/* ===== Attractive Pricing Plans — Premium Luxury Animated Design ===== */

.apw-wrap {
    --apw-navy: #0d1b4c;
    --apw-navy-2: #14205c;
    --apw-gold: #f7941d;
    --apw-gold-2: #ffb648;
    --apw-blue: #1a2a75;
    --apw-text-dark: #1a1a2e;
    --apw-muted: #6b7280;
    --apw-bg: #f6f8fc;
    --apw-border: #e7eaf3;

    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}
.apw-wrap *, .apw-wrap *::before, .apw-wrap *::after { box-sizing: border-box; }

/* Theme ki default underline/link styling kabhi kabhi cards ke andar text par
   underline daal deti hai — is section ke andar sab kuch force clean rakho */
.apw-wrap a,
.apw-wrap button,
.apw-wrap h1, .apw-wrap h2, .apw-wrap h3, .apw-wrap h4,
.apw-wrap p, .apw-wrap span, .apw-wrap li,
.apw-modal a, .apw-modal button,
.apw-modal h1, .apw-modal h2, .apw-modal h3, .apw-modal h4,
.apw-modal p, .apw-modal span, .apw-modal li, .apw-modal label {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none;
}

.apw-heading {
    text-align: center;
    margin-bottom: 50px;
    opacity: 0;
    animation: apwFadeUp .7s ease forwards;
}
.apw-eyebrow {
    display: inline-block;
    color: var(--apw-gold);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.apw-title {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    color: var(--apw-navy);
    margin: 0;
    letter-spacing: -0.5px;
}

.apw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}
@media (max-width: 992px) {
    .apw-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .apw-card { padding: 28px 20px 24px; }
}
@media (max-width: 820px) {
    .apw-grid { grid-template-columns: 1fr; gap: 24px; }
    .apw-card.apw-featured { transform: none; }
    .apw-card.apw-featured:hover { transform: translateY(-6px); }
}
@media (max-width: 480px) {
    .apw-wrap { padding: 0 14px; }
    .apw-title { font-size: 24px; }
    .apw-amount { font-size: 38px; }
    .apw-card { padding: 24px 18px 20px; border-radius: 14px; }
}

.apw-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--apw-border);
    border-radius: 18px;
    padding: 36px 30px 30px;
    box-shadow: 0 6px 20px rgba(20, 30, 90, 0.06);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    animation: apwFadeUp .7s ease forwards;
    animation-delay: var(--apw-delay, 0s);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.apw-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(20, 30, 90, 0.14);
}

.apw-card-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--apw-navy);
    margin: 4px 0 4px;
}
.apw-card-tagline {
    color: var(--apw-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

.apw-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 24px;
}
.apw-currency {
    font-size: 22px;
    font-weight: 700;
    color: var(--apw-navy);
}
.apw-amount {
    font-size: 46px;
    font-weight: 800;
    color: var(--apw-navy);
    line-height: 1;
}
.apw-suffix {
    font-size: 14px;
    color: var(--apw-muted);
    margin-left: 4px;
}

.apw-features {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    flex-grow: 1;
}
.apw-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: var(--apw-text-dark);
    padding: 8px 0;
}
.apw-check {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(247, 148, 29, 0.12);
    color: var(--apw-gold);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-top: 1px;
}

.apw-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    border-radius: 10px;
    border: 2px solid var(--apw-navy);
    background: #fff;
    color: var(--apw-navy);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}
.apw-btn:hover {
    background: var(--apw-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(13, 27, 76, 0.25);
}

/* Featured / Most Popular card */
.apw-card.apw-featured {
    background: linear-gradient(160deg, var(--apw-navy) 0%, var(--apw-navy-2) 100%);
    border: none;
    color: #fff;
    padding-top: 46px;
    transform: translateY(-14px) scale(1.03);
    box-shadow: 0 25px 55px rgba(13, 27, 76, 0.35);
    z-index: 2;
}
.apw-card.apw-featured:hover {
    transform: translateY(-22px) scale(1.04);
}
.apw-card.apw-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,182,72,.6), transparent 40%, transparent 60%, rgba(255,182,72,.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.apw-card.apw-featured .apw-card-name,
.apw-card.apw-featured .apw-currency,
.apw-card.apw-featured .apw-amount {
    color: #fff;
}
.apw-card.apw-featured .apw-card-tagline,
.apw-card.apw-featured .apw-suffix {
    color: rgba(255,255,255,0.7);
}
.apw-card.apw-featured .apw-features li {
    color: #fff;
}
.apw-card.apw-featured .apw-check {
    background: rgba(255, 182, 72, 0.18);
    color: var(--apw-gold-2);
}
.apw-card.apw-featured .apw-btn {
    background: linear-gradient(135deg, var(--apw-gold), var(--apw-gold-2));
    border: none;
    color: #1a1a2e;
    box-shadow: 0 12px 28px rgba(247, 148, 29, 0.35);
}
.apw-card.apw-featured .apw-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(247, 148, 29, 0.45);
}

.apw-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--apw-gold), var(--apw-gold-2));
    color: #1a1a2e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(247, 148, 29, 0.45);
    animation: apwPulse 2.4s ease-in-out infinite;
}

@keyframes apwFadeUp {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes apwPulse {
    0%, 100% { box-shadow: 0 8px 18px rgba(247, 148, 29, 0.45); }
    50% { box-shadow: 0 8px 26px rgba(247, 148, 29, 0.75); }
}

/* ===== Modal Popup =====
   !important yahan jaan bujh ke lagaya hai kyunke ziyada tar WordPress
   themes/page-builders parent wrappers par "transform" ya "overflow:hidden"
   laga dete hain, jis se normal position:fixed tootk jata hai aur modal
   popup ki bajaye page ke andar "neeche" open hota hai. JS is modal ko
   document.body ke seedha andar move bhi kar deta hai taake yeh kisi
   transformed/overflow parent ke andar phans hi na sake. */
.apw-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    background: rgba(10, 15, 40, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483647 !important;
    opacity: 0;
    padding: 20px;
    box-sizing: border-box;
}
.apw-modal-overlay.apw-active {
    display: flex !important;
    opacity: 1;
    animation: apwOverlayFade .3s ease forwards;
}
@keyframes apwOverlayFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.apw-modal {
    background: #fff;
    width: 100%;
    max-width: 460px;
    border-radius: 18px;
    padding: 32px;
    position: relative;
    max-height: 88vh;
    overflow-y: auto;
    transform: translateY(40px) scale(.94);
    opacity: 0;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.apw-modal-overlay.apw-active .apw-modal {
    animation: apwModalFadeUp .4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes apwModalFadeUp {
    from { transform: translateY(40px) scale(.94); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 600px) {
    .apw-modal-overlay { padding: 14px; }
    .apw-modal { padding: 24px 20px; max-height: 92vh; border-radius: 14px; }
    .apw-modal-header h3 { font-size: 19px; }
}
.apw-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #9099ab;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}
.apw-modal-close:hover { color: #0d1b4c; transform: rotate(90deg); }

.apw-modal-header h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #0d1b4c;
}
.apw-modal-selected-package {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 22px;
    padding: 10px 14px;
    background: #f6f8fc;
    border-radius: 10px;
    border: 1px solid #e7eaf3;
}
.apw-modal-selected-package strong { color: #0d1b4c; }
#apw-selected-package-price { color: #f7941d; font-weight: 700; margin-left: 4px; }

.apw-form-row { margin-bottom: 16px; }
.apw-form-row label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}
.apw-req { color: #e04848; }
.apw-form-row input,
.apw-form-row textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e7eaf3;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.apw-form-row input:focus,
.apw-form-row textarea:focus {
    outline: none;
    border-color: #f7941d;
    box-shadow: 0 0 0 3px rgba(247,148,29,0.15);
}

.apw-submit-btn {
    background: linear-gradient(135deg, #0d1b4c, #14205c);
    color: #fff;
    border: none;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.apw-submit-btn:hover {
    background: linear-gradient(135deg, #14205c, #1a2a75);
    color: #fff;
}
.apw-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    animation: apwSpin .7s linear infinite;
}
@keyframes apwSpin { to { transform: rotate(360deg); } }

.apw-form-message {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: none;
    padding: 10px 14px;
    border-radius: 10px;
}
.apw-form-message.apw-success {
    display: block;
    background: rgba(34, 197, 94, .1);
    color: #15803d;
}
.apw-form-message.apw-error {
    display: block;
    background: rgba(224, 72, 72, .1);
    color: #b91c1c;
}
