/* ==========================================================================
   Lifetime Deal popup + sticky reminder
   Partial: resources/views/refactor/partials/lifetime_popup.blade.php
   Loaded on the marketing site and in the customer app, both of which load
   variables.css first. Scoped to .mc-ltd so neither shell's styles leak in.

   Orange throughout, the same orange as the "Lifetime deal" link in the
   marketing nav (--color-warning), so the popup, the pill and the menu read
   as one offer. The hero gradient runs from dark orange so white text keeps
   readable contrast across it.
   ========================================================================== */

.mc-ltd {
    --ltd-accent: var(--color-warning, #DC6803);
    --ltd-accent-deep: #B54708;
    --ltd-accent-soft: #FFFAEB;
    --ltd-accent-line: #FEDF89;
    --ltd-glow: #FEC84B;
    --ltd-card: var(--color-card-bg, #fff);
    --ltd-text: var(--color-text, #0C111D);
    --ltd-muted: var(--color-text-secondary, #344054);
    --ltd-border: var(--color-border, #EAECF0);
    --ltd-hero: linear-gradient(135deg, #93370D 0%, #B54708 45%, #DC6803 100%);
    --ltd-button: linear-gradient(135deg, #DC6803 0%, #B54708 100%);
    --ltd-shadow: 0 24px 64px -16px rgba(16, 24, 40, .45), 0 2px 6px rgba(16, 24, 40, .08);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-theme="dark"] .mc-ltd {
    --ltd-accent: var(--color-warning, #FDB022);
    --ltd-accent-soft: rgba(253, 176, 34, .10);
    --ltd-accent-line: rgba(253, 176, 34, .30);
    --ltd-hero: linear-gradient(135deg, #6B2A0B 0%, #93370D 45%, #B54708 100%);
    --ltd-shadow: 0 24px 64px -16px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .4);
}

.mc-ltd [hidden] { display: none !important; }
.mc-ltd .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mc-ltd svg { width: 100%; height: 100%; display: block; }

/* ── Dialog ─────────────────────────────────────────────────────────────── */

.mc-ltd-backdrop {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(12, 17, 29, .55);
    backdrop-filter: blur(3px);
    animation: mc-ltd-fade .25s ease-out;
}
.mc-ltd-dialog {
    position: fixed; z-index: 10001;
    top: 50%; left: 50%;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    transform: translate(-50%, -50%);
    background: var(--ltd-card);
    color: var(--ltd-text);
    border-radius: 20px;
    box-shadow: var(--ltd-shadow);
    outline: none;
    animation: mc-ltd-pop .35s cubic-bezier(.2, .9, .3, 1.2);
}

.mc-ltd-close {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    width: 32px; height: 32px; padding: 7px;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
    transition: background .15s;
}
.mc-ltd-close:hover { background: rgba(255, 255, 255, .26); }
.mc-ltd-close:focus-visible,
.mc-ltd-later:focus-visible,
.mc-ltd-cta:focus-visible,
.mc-ltd-pill button:focus-visible,
.mc-ltd-pill a:focus-visible { outline: 2px solid var(--ltd-accent); outline-offset: 2px; }

.mc-ltd-hero {
    position: relative;
    padding: 28px 28px 24px;
    background: var(--ltd-hero);
    color: #fff;
    text-align: center;
    overflow: hidden;
}
/* Soft glow behind the timer — decoration only. */
.mc-ltd-hero::before {
    content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%;
    background: radial-gradient(closest-side, rgba(254, 200, 75, .30), transparent);
    pointer-events: none;
}
.mc-ltd-hero > * { position: relative; }

.mc-ltd-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.mc-ltd-badge-icon { width: 18px; height: 18px; color: var(--ltd-glow); }

.mc-ltd .mc-ltd-title {
    margin: 16px 0 8px;
    font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
    color: #fff;
}
/* Doubled class: the marketing shell styles bare h2/p with enough weight to
   pull these off-centre. */
.mc-ltd .mc-ltd-lead {
    margin: 0 auto; max-width: 36ch;
    text-wrap: balance;
    font-size: 14px; line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.mc-ltd-timer {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin-top: 20px;
}
.mc-ltd-timer-label {
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

/* The countdown partial is shared with /lifetime; its page stylesheet is not
   loaded here, so the base rules are repeated under .mc-ltd. */
.mc-ltd .mcl-countdown {
    display: inline-flex; align-items: flex-start; gap: 6px;
    font-variant-numeric: tabular-nums; font-weight: 700;
}
.mc-ltd .mcl-countdown-cell { display: inline-flex; flex-direction: column; align-items: center; }
.mc-ltd .mcl-countdown-unit { min-width: 2.2ch; text-align: center; line-height: 1.1; }
.mc-ltd .mcl-countdown-tag { font-size: 11px; font-weight: 500; opacity: .65; text-transform: uppercase; }
.mc-ltd .mcl-countdown-sep { opacity: .45; }

.mc-ltd-timer .mcl-countdown.is-lg { gap: 8px; }
.mc-ltd-timer .mcl-countdown.is-lg .mcl-countdown-cell {
    min-width: 62px;
    padding: 10px 8px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
}
.mc-ltd-timer .mcl-countdown.is-lg .mcl-countdown-unit { font-size: 28px; }
.mc-ltd-timer .mcl-countdown.is-lg .mcl-countdown-tag { margin-top: 2px; }
.mc-ltd-timer .mcl-countdown.is-lg .mcl-countdown-sep { font-size: 24px; margin-top: 10px; }

.mc-ltd-body { padding: 22px 28px 20px; }

.mc-ltd-benefits { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.mc-ltd-benefits li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.45; color: var(--ltd-muted);
}
.mc-ltd-check {
    flex: none; width: 20px; height: 20px; padding: 4px; margin-top: 1px;
    border-radius: 50%;
    background: var(--ltd-accent-soft);
    border: 1px solid var(--ltd-accent-line);
    color: var(--ltd-accent);
}

.mc-ltd-price {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 16px; padding: 12px 14px;
    border-radius: 12px;
    background: var(--ltd-accent-soft);
    border: 1px solid var(--ltd-accent-line);
    font-size: 14px; font-weight: 600; color: var(--ltd-text);
    text-align: center;
}
.mc-ltd-seats { font-size: 12px; font-weight: 700; color: var(--ltd-accent-deep); }
html[data-theme="dark"] .mc-ltd-seats { color: var(--ltd-accent); }

.mc-ltd-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 13px 18px;
    border-radius: 12px;
    /* Fixed rather than --gradient-primary: that token lightens in dark mode,
       which drops the white label below readable contrast. */
    background: var(--ltd-button);
    color: #fff !important;
    font-size: 15px; font-weight: 700; text-decoration: none !important;
    box-shadow: 0 8px 20px -8px rgba(181, 71, 8, .65);
    transition: transform .15s, box-shadow .15s;
}
.mc-ltd-cta svg { width: 18px; height: 18px; }
.mc-ltd-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(181, 71, 8, .75); }

.mc-ltd-later {
    display: block; margin: 10px auto 0; padding: 6px 10px;
    border: 0; background: none;
    font: inherit; font-size: 13px; color: var(--color-text-muted, #667085);
    cursor: pointer;
}
.mc-ltd-later:hover { color: var(--ltd-text); text-decoration: underline; }

/* ── Sticky pill ────────────────────────────────────────────────────────── */

/* Bottom-left: the live chat (marketing) and the AI chat bubble (app) both
   sit bottom-right. */
.mc-ltd-pill {
    position: fixed; left: 20px; bottom: 20px; z-index: 9990;
    display: flex; align-items: center; gap: 4px;
    padding: 5px 5px 5px 6px;
    border-radius: 999px;
    background: var(--ltd-hero);
    color: #fff;
    box-shadow: 0 10px 30px -8px rgba(147, 55, 13, .55);
    animation: mc-ltd-rise .35s ease-out;
}
.mc-ltd-pill-open {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 0; border-radius: 999px; background: none;
    color: inherit; font: inherit; cursor: pointer;
}
.mc-ltd-pill-icon {
    flex: none; width: 28px; height: 28px; padding: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: var(--ltd-glow);
}
.mc-ltd-pill-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
.mc-ltd-pill-timer {
    padding: 2px 8px; border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    font-size: 12px;
}
.mc-ltd-pill .mcl-countdown { gap: 2px; align-items: baseline; }
.mc-ltd-pill .mcl-countdown-cell { flex-direction: row; align-items: baseline; gap: 1px; }
.mc-ltd-pill .mcl-countdown-unit { min-width: 0; }
.mc-ltd-pill .mcl-countdown-tag { font-size: inherit; text-transform: none; opacity: .6; }
.mc-ltd-pill-cta {
    padding: 6px 12px; border-radius: 999px;
    background: #fff; color: var(--ltd-accent-deep) !important;
    font-size: 12px; font-weight: 700; text-decoration: none !important;
    white-space: nowrap;
}
.mc-ltd-pill-cta:hover { background: #FFFAEB; }
.mc-ltd-pill-close {
    flex: none; width: 26px; height: 26px; padding: 6px;
    border: 0; border-radius: 50%; background: none;
    color: rgba(255, 255, 255, .75); cursor: pointer;
}
.mc-ltd-pill-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* Customer app: keep the pill clear of the fixed sidebar (expanded or
   collapsed). Below 768px the sidebar is off-canvas, see the phone block. */
@media (min-width: 768px) {
    body:has(.mc-app .mc-sidebar) .mc-ltd-pill { left: calc(var(--sidebar-width, 240px) + 20px); }
    body:has(.mc-app.sidebar-collapsed) .mc-ltd-pill,
    html[data-sidebar-collapsed="true"] body:has(.mc-app .mc-sidebar) .mc-ltd-pill { left: calc(var(--sidebar-collapsed, 60px) + 20px); }
}

/* ── Phones ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .mc-ltd-dialog {
        top: auto; bottom: 0; left: 0;
        width: 100%; max-height: calc(100vh - 24px);
        transform: none;
        border-radius: 20px 20px 0 0;
        animation: mc-ltd-sheet .3s ease-out;
    }
    .mc-ltd-hero { padding: 24px 16px 20px; }
    .mc-ltd-body { padding: 18px 16px 16px; }
    .mc-ltd-title { font-size: 22px; }
    .mc-ltd-timer .mcl-countdown.is-lg .mcl-countdown-cell { min-width: 54px; }
    .mc-ltd-timer .mcl-countdown.is-lg .mcl-countdown-unit { font-size: 24px; }

    .mc-ltd-pill {
        left: 16px; right: 16px; bottom: 16px;
        justify-content: space-between;
    }
    .mc-ltd-pill-open { min-width: 0; }
}
@media (max-width: 440px) {
    .mc-ltd-pill-label { display: none; }
}

/* ── Motion ─────────────────────────────────────────────────────────────── */

@keyframes mc-ltd-fade { from { opacity: 0; } }
@keyframes mc-ltd-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes mc-ltd-sheet { from { transform: translateY(100%); } }
@keyframes mc-ltd-rise { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
    .mc-ltd-backdrop, .mc-ltd-dialog, .mc-ltd-pill { animation: none; }
    .mc-ltd-cta { transition: none; }
}