/* =========================
   Pricing cards - base
   Uses global theme tokens from themes.css
   ========================= */

.pricing-card-monthly,
.pricing-card-onetime,
.pricing-card-free {
    background-color: var(--color-primary-light, #FFF7F0);
    color: var(--text-dark, #2B2A2E);
    border: 1px solid rgba(76, 74, 79, 0.14);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(76, 74, 79, 0.10);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-card-monthly {
    border-top: 5px solid var(--highlight-attention, #FE9A37);
}

.pricing-card-onetime {
    border-top: 5px solid var(--highlight-premium, #8E51FF);
}

.pricing-card-free {
    border-top: 5px solid var(--surface-card-accent-blue, #74D4FF);
}

    .pricing-card-monthly:hover,
    .pricing-card-onetime:hover,
    .pricing-card-free:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 28px rgba(76, 74, 79, 0.16);
    }

    .pricing-card-monthly .text-muted,
    .pricing-card-onetime .text-muted,
    .pricing-card-free .text-muted,
    .pricing-card-monthly .card-text,
    .pricing-card-onetime .card-text,
    .pricing-card-free .card-text {
        color: var(--text-muted-on-light, #706D75) !important;
        opacity: 1;
    }

    .pricing-card-monthly h3,
    .pricing-card-monthly h4,
    .pricing-card-onetime h3,
    .pricing-card-onetime h4,
    .pricing-card-free h3,
    .pricing-card-free h4 {
        color: var(--text-dark, #2B2A2E);
    }

    /* =========================
   Hover lift animation
   ========================= */
    .pricing-card-monthly:hover,
    .pricing-card-onetime:hover,
    .pricing-card-free:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 28px rgba(29, 41, 61, 0.25);
    }

/* =========================
   Buttons
   ========================= */
.btn-custom-card-light {
    background-color: var(--color-primary-light, #FAFAF9);
    color: var(--color-primary-dark, #1D293D);
    border: none;
}

    .btn-custom-card-light:hover {
        background-color: var(--highlight-attention, #FE9A37);
        color: var(--color-primary-dark, #1D293D);
    }

.btn-custom-card-dark {
    background-color: var(--color-primary-dark, #1D293D);
    color: var(--text-light, #FAFAF9);
    border: none;
}

    .btn-custom-card-dark:hover {
        background-color: var(--cta-primary, #05DF72);
        color: var(--cta-primary-text, #1D293D);
    }




.pricing-guest-banner {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, #d4af37 0%, #659dbd 50%, #da7b93 100%);
    box-shadow: 0 20px 50px rgba(101, 157, 189, 0.18);
}

.pricing-guest-banner-inner {
    position: relative;
    border-radius: 23px;
    padding: 2.5rem 1.5rem;
    background: radial-gradient(circle at top left, rgba(212, 175, 55, 0.17) 0%, rgba(212, 175, 55, 0.09) 22%, transparent 48%), radial-gradient(circle at center top, rgba(101, 157, 189, 0.28) 0%, rgba(101, 157, 189, 0.15) 26%, transparent 54%), radial-gradient(circle at bottom right, rgba(218, 123, 147, 0.17) 0%, rgba(218, 123, 147, 0.09) 22%, transparent 48%), linear-gradient(180deg, #fffaf6 0%, #f6f1ec 100%);
}

.pricing-guest-badge {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.18);
    color: #8d8741;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pricing-guest-title {
    margin-bottom: 0.85rem;
    font-size: 2rem;
    font-weight: 700;
    color: #2d2d2d;
}

.pricing-guest-text {
    max-width: 720px;
    margin: 0 auto 1.5rem auto;
    font-size: 1rem;
    line-height: 1.7;
    color: #5f6368;
}

.pricing-guest-actions {
    margin-top: 0.5rem;
}

.pricing-guest-primary {
    min-width: 190px;
    font-weight: 600;
}

.pricing-guest-secondary {
    min-width: 150px;
    font-weight: 600;
    border: 1px solid rgba(45, 45, 45, 0.12);
    background: #ffffff;
    color: #2d2d2d;
}

    .pricing-guest-secondary:hover {
        background: #f3f3f3;
        color: #2d2d2d;
    }

.btn-custom-card-light {
    background-color: var(--color-primary-dark, #1D293D);
    color: var(--text-light, #FAFAF9)
}

    .btn-custom-card-light:hover {
        background-color: #07ace9;
        color: var(--text-light, #FAFAF9);
    }

@media (max-width: 767.98px) {
    .pricing-guest-title {
        font-size: 1.55rem;
    }

    .pricing-guest-banner-inner {
        padding: 2rem 1rem;
    }
}