/* ===== FitVibe Invite page ===== */
:root {
    --fv-page-bg: #f3f5fb;
    --fv-card-radius: 24px;
    --fv-card-shadow: 0 20px 50px rgba(15,23,42,0.08);
    --fv-line: var(--border-silver-color);
    --fv-title: #111827;
    --fv-body: #4b5563;
}

body {
    margin: 0;
    background: var(--fv-page-bg);
    color: var(--fv-body);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.fv-wrap {
    min-height: 75dvh;
    display: grid;
    place-items: center;
    padding: 28px 16px;
}

/* ===== Card shell ===== */
.fv-card {
    width: min(960px, 100%);
    background: var(--main-white-pure-color);
    border-radius: var(--fv-card-radius);
    box-shadow: var(--fv-card-shadow);
    border: 3px solid color-mix(in oklab, var(--fv-line), #fff 40%);
    overflow: hidden;
    /* Desktop: 2-col grid — header spans left col, right col spans both rows */
    display: grid;
    grid-template-areas:
        "header right"
        "body   right";
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: auto 1fr;
}

/* ===== Header: badge + title ===== */
.fv-header {
    grid-area: header;
    padding: 34px 34px 20px;
    display: grid;
    gap: 14px;
    align-content: start;
}

/* ===== Body grid (contains left + right on desktop, unwrapped on mobile) ===== */
.fv-body-grid {
    grid-area: body;
    display: contents; /* children become direct grid children */
}

/* ===== Left: benefits ===== */
.fv-left {
    grid-area: body; /* fills the body cell on desktop */
    padding: 0 34px 34px;
    display: grid;
    align-content: start;
    gap: 18px;
}

/* ===== Right: action + studio info ===== */
.fv-right {
    grid-area: right;
    border-left: 1px solid color-mix(in oklab, var(--fv-line), #fff 20%);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
    padding: 28px;
    display: grid;
    align-content: start;
    gap: 14px;
}

/* Studio info — at bottom of right col on desktop */
.fv-studio {
    display: grid;
    grid-template-columns: 54px auto;
    gap: 14px;
    align-items: center;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in oklab, var(--fv-line), #fff 30%);
}

/* ===== Badge ===== */
.fv-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--main-sub-color), var(--main-white-color));
    border: 1px solid color-mix(in oklab, var(--fv-line), #fff 35%);
    width: fit-content;
    font-size: 13px;
    color: var(--main-primary-color);
    font-weight: 700;
}

.fv-badge .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--main-primary-color);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--main-primary-color), transparent 82%);
}

.fv-title {
    margin: 0;
    color: var(--fv-title);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    font-size: clamp(22px, 2.6vw, 34px);
}

.fv-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    max-width: 58ch;
}

/* ===== Benefits ===== */
.fv-benefits {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    list-style: none;
}

.fv-benefits li {
    display: grid;
    grid-template-columns: 26px auto;
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--fv-line), #fff 45%);
}

.fv-check {
    width: 26px; height: 26px;
    border-radius: 10px;
    background: var(--main-sub-color);
    display: grid;
    place-items: center;
    color: var(--main-primary-color);
    font-weight: 900;
    user-select: none;
}

.fv-benefits b {
    color: var(--fv-title);
    font-weight: 800;
}

.fv-footnote {
    font-size: 12.5px;
    opacity: .9;
    margin: 0;
}

.fv-divider {
    height: 1px;
    background: color-mix(in oklab, var(--fv-line), #fff 30%);
}

/* ===== Logo ===== */
.fv-logo {
    width: 54px; height: 54px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--fv-line), #fff 35%);
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(15,23,42,0.06);
    overflow: hidden;
    flex-shrink: 0;
}

.fv-logo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.fv-studio h3 {
    margin: 0;
    color: var(--fv-title);
    font-weight: 900;
    letter-spacing: -0.02em;
    font-size: 16px;
    line-height: 1.25;
}

.fv-studio p {
    margin: 4px 0 0;
    font-size: 12.5px;
    opacity: .9;
}

/* ===== Action card ===== */
.fv-action-card {
    border-radius: 20px;
    border: 1px solid color-mix(in oklab, var(--fv-line), #fff 35%);
    background: #fff;
    padding: 16px;
    display: grid;
    gap: 12px;
}

.fv-action-title {
    margin: 0;
    color: var(--fv-title);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.fv-muted {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    opacity: .95;
}

.fv-cta-area {
    display: grid;
    gap: 10px;
    margin-top: 6px;
}

.fv-cta-area .f-btn {
    height: 52px;
    border-radius: 999px;
    justify-content: center;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(50,93,230,0.22);
}

.fv-cta-area .f-btn.primary-btn {
    transition: .18s ease;
    background: linear-gradient(135deg, var(--main-primary-color), #2f7bff);
}

.fv-cta-area .f-btn.primary-btn:hover {
    transform: translateY(-1px);
}

.fv-cta-area .f-btn.silver-b-btn {
    justify-content: center;
    height: 46px;
    border-radius: 999px;
}

.fv-mobile-cta {
    display: none;
}

.fv-mobile-cta[hidden],
.fv-mobile-cta [hidden] {
    display: none !important;
}

/* ===== State containers ===== */
.fv-state { display: none; }
.fv-state.is-active { display: grid; gap: 12px; }

/* ===== Alert boxes ===== */
.fv-alert {
    border-radius: 16px;
    padding: 12px;
    border: 1px solid;
    display: grid;
    gap: 6px;
    background: #fff;
}

.fv-alert.info {
    border-color: color-mix(in oklab, var(--alert-info-color), #fff 65%);
    background: color-mix(in oklab, var(--alert-linfo-color), #fff 40%);
}
.fv-alert.success {
    border-color: color-mix(in oklab, var(--alert-success-color), #fff 65%);
    background: color-mix(in oklab, var(--alert-lsuccess-color), #fff 35%);
}
.fv-alert.danger {
    border-color: color-mix(in oklab, var(--alert-danger-color), #fff 65%);
    background: color-mix(in oklab, var(--alert-ldanger-color), #fff 35%);
}

.fv-alert .t {
    color: var(--fv-title);
    font-weight: 900;
    font-size: 13.5px;
}
.fv-alert .d {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .fv-wrap {
        padding: 16px 12px 32px;
        place-items: start;
    }

    /* Card becomes flex column — order controls sequence */
    .fv-card {
        display: flex;
        flex-direction: column;
        border-radius: 20px;
        width: 100%;
    }

    /* 1st: badge + title */
    .fv-header {
        order: 0;
        padding: 22px 18px 16px;
        gap: 12px;
    }

    /* 2nd: action CTA (fv-right) */
    .fv-right {
        order: 1;
        border-left: none;
        border-top: none;
        padding: 0 18px 4px;
        gap: 12px;
    }

    /* Mobile sticky CTA — identical to share-link */
    .fv-mobile-cta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        z-index: 60;
        padding: 10px 12px;
        border-radius: 20px;
        background: #fffffff5;
        border: 1px solid color-mix(in oklab, var(--fv-line), #fff 25%);
        box-shadow: 0 16px 34px #0f172a29;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transition: opacity .18s ease, transform .18s ease;
    }

    body.overflow-hidden .fv-mobile-cta {
        opacity: 0;
        pointer-events: none;
        transform: translateY(14px);
    }

    .fv-mobile-cta .f-btn {
        width: 100%;
        height: 54px;
        justify-content: center;
    }

    .fv-mobile-cta .f-btn[hidden] {
        display: none;
    }

    /* Inline CTA hidden ONLY when JS has loaded and activated the sticky mobile CTA.
       Without .js-mobile-cta-ready, the inline buttons remain visible as fallback. */
    .js-mobile-cta-ready .fv-state .fv-cta-area {
        display: none;
    }

    .fv-studio {
        margin-top: 2px;
        padding-top: 12px;
    }

    /* 3rd: benefits */
    .fv-left {
        order: 2;
        padding: 16px 18px 110px;
        gap: 14px;
    }
}

/* ===== Demo switcher ===== */
.fv-demo-switch {
    position: fixed;
    left: 14px;
    bottom: 14px;
    background: #fff;
    border: 1px solid color-mix(in oklab, var(--fv-line), #fff 20%);
    border-radius: 18px;
    padding: 10px;
    box-shadow: var(--fv-card-shadow);
    display: grid;
    gap: 8px;
    z-index: 99;
    width: 260px;
}
.fv-demo-switch label { font-size: 12px; color: var(--fv-title); font-weight: 900; }
.fv-demo-switch select { height: 44px; border-radius: 12px; border: 1px solid var(--fv-line); padding: 0 12px; outline: none; background: #fff; font-weight: 700; color: var(--fv-title); }
.fv-demo-switch small { opacity: .75; line-height: 1.35; }