/* ═══════════════════════════════════════════════════════════════
   JMAC Web — Pricing Page
   Cards, toggle, popular badge, comparison table, FAQ accordion,
   green glow button, card hover border.
   ═══════════════════════════════════════════════════════════════ */

/* ── Success Page — Checkmark Pulse ──────────────────────────── */
@keyframes success-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    50%      { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
}

.success-pulse {
    animation: success-pulse 2s ease-in-out 3;
}

/* ── Billing Mode Toggle (JS-driven via #pricing-root class) ─── */
.billing-monthly .billing-show-annual { display: none !important; }
.billing-annual .billing-show-monthly { display: none !important; }

.billing-monthly .billing-label-monthly { color: #fff; }
.billing-monthly .billing-label-annual { color: rgba(255, 255, 255, 0.5); }

.billing-annual .billing-label-annual { color: #fff; }
.billing-annual .billing-label-monthly { color: rgba(255, 255, 255, 0.5); }

/* ── Monthly/Annual Toggle Switch ────────────────────────────── */
.pricing-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-out);
    padding: 0;
}

.pricing-toggle:hover {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
}

.pricing-toggle-thumb {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform var(--duration-normal) var(--ease-out);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.pricing-toggle.active {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: transparent;
}

.pricing-toggle.active .pricing-toggle-thumb {
    transform: translateX(24px);
}

/* ── Comparison Table — Description Clamp + Hover ────────────── */
.comparison-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.45);
    transition: color var(--duration-normal) var(--ease-out);
    cursor: default;
}

tr:hover .comparison-desc {
    -webkit-line-clamp: unset;
    overflow: visible;
    color: rgba(255, 255, 255, 0.7);
}

/* ── Pricing Card — Popular Tier Elevation ───────────────────── */
.pricing-card-popular {
    position: relative;
    transform: scale(1.04);
    z-index: 2;
    box-shadow: 0 12px 40px rgba(91, 45, 142, 0.25), var(--glow-accent);
}

@media (max-width: 1199.98px) {
    .pricing-card-popular {
        transform: none;
    }
}

/* Brand gradient background for badges */
.bg-gradient-brand {
    background: var(--brand-gradient) !important;
}

/* ── Pricing Hero Glass — remove max-height constraint ───────── */
#pricing-root .hero-glass {
    max-height: none;
}

/* ── Pricing Cards Row — equal height, wider columns ─────────── */
.pricing-cards-row .stagger-item {
    display: flex;
}

.pricing-cards-row .pricing-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* ── Pricing Amount — keep price + /mo on one line ───────────── */
.pricing-amount {
    white-space: nowrap;
}

/* ── Pricing Original (strikethrough) — visible red on annual ── */
.pricing-original {
    text-decoration: line-through;
    color: rgba(239, 68, 68, 0.6);
    font-size: 0.85rem;
}

/* ── Annual price green highlight ────────────────────────────── */
.pricing-amount .text-success {
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.25);
}

/* ── Pricing Responsive — shrink price text on tablets ───────── */
@media (min-width: 768px) and (max-width: 1399.98px) {
    .pricing-amount .display-6 {
        font-size: 1.75rem;
    }

    .pricing-original {
        font-size: 0.75rem;
    }
}

@media (min-width: 1400px) {
    .pricing-amount .display-6 {
        font-size: 2.25rem;
    }
}

/* ── Green Glow Button (Most Popular CTA) ────────────────────── */
.btn-glow-green {
    background: linear-gradient(135deg, #22c55e, #15803d);
    border: none;
    color: #fff;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: all var(--duration-normal) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.btn-glow-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.4), 0 0 20px rgba(21, 128, 61, 0.3);
    color: #fff;
    filter: brightness(1.08);
}

.btn-glow-green:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

.btn-glow-green::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s var(--ease-out);
}

.btn-glow-green:hover::after {
    left: 120%;
}

.btn-glow-green .bi {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* ── Blurred Prices (anonymous visitors) ─────────────────────── */
.pricing-blurred {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    transition: filter var(--duration-normal) var(--ease-out);
}

/* ── Active Plan Card (subscriber's current plan) ────────────── */
.pricing-card-active {
    border: 2px solid rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 0 24px rgba(99, 102, 241, 0.15), 0 8px 32px rgba(0, 0, 0, 0.15);
}

.pricing-card-active .pricing-amount {
    opacity: 0.6;
}

.btn-glow-green.btn-sm {
    padding: 0.3rem 1rem;
    font-size: 0.875rem;
}

/* ── Card Hover Border (colored border on hover) ─────────────── */
.card-hover-border {
    transition: border-color var(--duration-normal) var(--ease-out);
}

.card-hover-border:hover {
    border-color: rgba(139, 92, 246, 0.6) !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
}

/* ── Pricing Comparison Table — Dark theme adjustments ────────── */
.table-dark.table-hover > tbody > tr:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Accordion FAQ — Dark mode border fix ────────────────────── */
.accordion-button:not(.collapsed) {
    background: var(--surface-raised) !important;
    color: var(--brand-accent) !important;
    box-shadow: none !important;
}

.accordion-button::after {
    filter: var(--bs-accordion-btn-icon-filter, none);
}

[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ═══════════════════════════════════════════════════════════
   Embedded Stripe Checkout Overlay
   Full-screen modal with backdrop blur and smooth transitions
   ═══════════════════════════════════════════════════════════ */

.stripe-checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stripe-checkout-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: checkoutFadeIn 0.25s ease-out;
}

.stripe-checkout-overlay-panel {
    position: relative;
    width: min(96vw, 720px);
    max-height: 92vh;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--surface-raised, #1a1a2e);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 24px 80px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(139, 92, 246, 0.08);
    animation: checkoutSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.stripe-checkout-mount {
    flex: 1;
    overflow-y: auto;
    min-height: 400px;
    padding-bottom: 1rem;
}

/* Scrollbar styling */
.stripe-checkout-mount::-webkit-scrollbar {
    width: 6px;
}

.stripe-checkout-mount::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.stripe-checkout-mount::-webkit-scrollbar-track {
    background: transparent;
}

/* Close animation */
.stripe-checkout-overlay.closing .stripe-checkout-overlay-backdrop {
    animation: checkoutFadeOut 0.2s ease-in forwards;
}

.stripe-checkout-overlay.closing .stripe-checkout-overlay-panel {
    animation: checkoutSlideDown 0.25s ease-in forwards;
}

@keyframes checkoutFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes checkoutFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes checkoutSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes checkoutSlideDown {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(30px) scale(0.96); }
}

/* Mobile: full-screen panel */
@media (max-width: 576px) {
    .stripe-checkout-overlay-panel {
        width: 100vw;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
}