/* ==========================================================================
   FNF Chai Advisor — full-screen interactive overlay
   Modern · mild · colorful · brand-aligned
   ========================================================================== */

:root {
    --adv-sage:     #e8efe2;
    --adv-cream:    #faf6ee;
    --adv-blush:    #fde4d4;
    --adv-mint:     #dff0e6;
    --adv-lavender: #ece4f5;
    --adv-sky:      #dceaf3;
    --adv-amber:    #fbe8c2;
    --adv-rose:     #f7d9dc;
    --adv-ink:      #2c2a26;
    --adv-ink-soft: #5b574e;
    --adv-line:     rgba(20, 18, 14, 0.07);
    --adv-shadow:   0 12px 40px rgba(86, 143, 49, 0.10);
    --adv-shadow-lg:0 24px 80px rgba(86, 143, 49, 0.18);
    --adv-radius:   24px;
    --adv-radius-pill: 999px;
    --fnf-primary:  #568f31;
    --fnf-primary-deep: #3f6c23;
    --fnf-accent:   #c8943e;
}

/* ==========================================================================
   FLOATING TRIGGER BUTTON
   ========================================================================== */

.fnf-chai-trigger {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 18px;
    border-radius: var(--adv-radius-pill);
    background: linear-gradient(135deg, var(--fnf-primary) 0%, var(--fnf-primary-deep) 100%);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: var(--adv-shadow-lg);
    transition: transform .25s ease, box-shadow .25s ease;
}

.fnf-chai-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 90px rgba(86, 143, 49, 0.28);
}

.fnf-chai-trigger:active { transform: translateY(0); }

.fnf-chai-trigger--float {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 9998;
}

.fnf-chai-trigger__pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(86, 143, 49, 0.45);
    animation: fnfChaiPulse 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes fnfChaiPulse {
    0%   { box-shadow: 0 0 0 0 rgba(86, 143, 49, 0.45); }
    70%  { box-shadow: 0 0 0 22px rgba(86, 143, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(86, 143, 49, 0); }
}

.fnf-chai-trigger__icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
}
.fnf-chai-trigger__icon svg { width: 100%; height: 100%; }

@media (max-width: 540px) {
    .fnf-chai-trigger--float { left: 14px; bottom: 14px; padding: 12px 18px 12px 14px; font-size: 14px; }
}

/* ==========================================================================
   OVERLAY
   ========================================================================== */

.fnf-chai-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    overflow-y: auto;
    color: var(--adv-ink);
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.fnf-chai-overlay.is-open {
    display: block;
    animation: fnfChaiFadeIn .3s ease both;
}

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

.fnf-chai-overlay__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(120% 80% at 0% 0%,   var(--adv-tint-a, var(--adv-sage))   0%, transparent 55%),
        radial-gradient(120% 80% at 100% 0%, var(--adv-tint-b, var(--adv-cream))  0%, transparent 55%),
        radial-gradient(120% 80% at 50% 100%, var(--adv-tint-c, var(--adv-blush)) 0%, transparent 55%),
        var(--adv-cream);
    transition: background 1.2s cubic-bezier(.4,0,.2,1);
}

.fnf-chai-close {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 3;
    width: 44px; height: 44px;
    border: 1px solid var(--adv-line);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    cursor: pointer;
    color: var(--adv-ink);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.fnf-chai-close:hover { transform: rotate(90deg); background: #fff; }
.fnf-chai-close svg { width: 18px; height: 18px; }

/* ==========================================================================
   PROGRESS DOTS
   ========================================================================== */

.fnf-chai-progress {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}
.fnf-chai-progress__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(20, 18, 14, 0.18);
    transition: width .3s ease, background .3s ease;
}
.fnf-chai-progress__dot.is-active {
    width: 24px;
    border-radius: 999px;
    background: var(--fnf-primary);
}
.fnf-chai-progress__dot.is-done { background: var(--fnf-primary); }

/* ==========================================================================
   STAGE
   ========================================================================== */

.fnf-chai-stage {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    padding: 110px 24px 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fnf-chai-step {
    width: 100%;
    text-align: center;
    display: none;
    animation: fnfChaiStepIn .55s cubic-bezier(.16,1,.3,1) both;
}
.fnf-chai-step.is-active { display: block; }

@keyframes fnfChaiStepIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fnf-chai-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    font-weight: 600;
    color: var(--fnf-primary);
    margin: 0 0 14px;
}

.fnf-chai-title {
    font-size: clamp(28px, 4.6vw, 44px);
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--adv-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.fnf-chai-sub {
    font-size: 16px;
    color: var(--adv-ink-soft);
    margin: 0 auto 36px;
    max-width: 520px;
    line-height: 1.55;
}

/* ==========================================================================
   STEP 1 — MOOD CHIPS
   ========================================================================== */

.fnf-chai-moods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 42px;
    max-width: 720px;
}

.fnf-chai-mood {
    appearance: none;
    border: 1.5px solid var(--adv-line);
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(6px);
    border-radius: var(--adv-radius-pill);
    padding: 14px 22px 14px 18px;
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    color: var(--adv-ink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.fnf-chai-mood:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--adv-shadow);
    border-color: rgba(86,143,49,0.35);
}

.fnf-chai-mood.is-selected {
    background: #fff;
    border-color: var(--fnf-primary);
    box-shadow: 0 8px 28px rgba(86,143,49,0.18);
    animation: fnfChaiBreathe 3s ease-in-out infinite;
}

@keyframes fnfChaiBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

.fnf-chai-mood__icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

/* Inline SVG icons via data URIs */
.fnf-chai-mood__icon--cup     { background-color: var(--adv-blush);    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a26' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 11h12v3a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4z'/%3E%3Cpath d='M17 12h1.5a2.5 2.5 0 0 1 0 5H17'/%3E%3C/svg%3E"); }
.fnf-chai-mood__icon--sun     { background-color: var(--adv-amber);    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a26' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4l1.4-1.4M17 7l1.4-1.4'/%3E%3C/svg%3E"); }
.fnf-chai-mood__icon--leaf    { background-color: var(--adv-mint);     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a26' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 19c0-8 6-14 14-14 0 8-6 14-14 14z'/%3E%3Cpath d='M5 19c4-4 9-7 14-12'/%3E%3C/svg%3E"); }
.fnf-chai-mood__icon--spark   { background-color: var(--adv-rose);     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a26' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6z'/%3E%3C/svg%3E"); }
.fnf-chai-mood__icon--compass { background-color: var(--adv-sky);      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a26' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15 9l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.fnf-chai-mood__icon--moon    { background-color: var(--adv-lavender); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a26' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M20 14a8 8 0 1 1-9.5-9.5 6 6 0 0 0 9.5 9.5z'/%3E%3C/svg%3E"); }

/* ==========================================================================
   STEP 2 — SLIDERS
   ========================================================================== */

.fnf-chai-sliders {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 540px;
    margin: 0 auto 36px;
    text-align: left;
}

.fnf-chai-slider {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--adv-line);
    border-radius: var(--adv-radius);
    padding: 18px 22px;
    backdrop-filter: blur(6px);
}

.fnf-chai-slider__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    gap: 12px;
}

.fnf-chai-slider__name {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--adv-ink-soft);
}

.fnf-chai-slider__value {
    font-weight: 600;
    color: var(--fnf-primary);
    font-size: 15px;
    transition: color .3s ease;
}

.fnf-chai-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--adv-cream), var(--adv-amber), var(--fnf-accent));
    outline: none;
    cursor: pointer;
}

.fnf-chai-slider[data-slider="strength"] .fnf-chai-range { background: linear-gradient(90deg, #f3ebd9, var(--fnf-accent), #8b5a1f); }
.fnf-chai-slider[data-slider="spice"]    .fnf-chai-range { background: linear-gradient(90deg, var(--adv-rose), var(--adv-amber), #b4602f); }
.fnf-chai-slider[data-slider="adventure"].fnf-chai-range,
.fnf-chai-slider[data-slider="adventure"] .fnf-chai-range { background: linear-gradient(90deg, var(--adv-sage), var(--adv-mint), var(--adv-sky), var(--adv-lavender)); }

.fnf-chai-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--fnf-primary);
    cursor: grab;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.fnf-chai-range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }

.fnf-chai-range::-moz-range-thumb {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--fnf-primary);
    cursor: grab;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.fnf-chai-slider__poles {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--adv-ink-soft);
}

/* ==========================================================================
   STEP 3 — TEXTAREA
   ========================================================================== */

.fnf-chai-textarea {
    width: 100%;
    max-width: 540px;
    padding: 18px 20px;
    border-radius: var(--adv-radius);
    border: 1.5px solid var(--adv-line);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    font: inherit;
    font-size: 16px;
    color: var(--adv-ink);
    resize: vertical;
    min-height: 110px;
    margin: 0 auto 28px;
    display: block;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.fnf-chai-textarea:focus {
    outline: none;
    border-color: var(--fnf-primary);
    box-shadow: 0 0 0 4px rgba(86, 143, 49, 0.12);
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */

.fnf-chai-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.fnf-chai-actions--center { margin-top: 24px; }

.fnf-chai-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: var(--adv-radius-pill);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none;
}

.fnf-chai-btn--primary {
    background: linear-gradient(135deg, var(--fnf-primary), var(--fnf-primary-deep));
    color: #fff;
    box-shadow: 0 8px 24px rgba(86,143,49,0.28);
}
.fnf-chai-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(86,143,49,0.36); }
.fnf-chai-btn--primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.fnf-chai-btn--ghost {
    background: transparent;
    color: var(--adv-ink-soft);
    border: 1.5px solid var(--adv-line);
}
.fnf-chai-btn--ghost:hover { background: rgba(255,255,255,0.6); color: var(--adv-ink); }

.fnf-chai-btn--lg { padding: 18px 32px; font-size: 16px; width: 100%; justify-content: center; }

/* ==========================================================================
   LOADING
   ========================================================================== */

.fnf-chai-cup {
    position: relative;
    width: 120px;
    height: 140px;
    margin: 0 auto 32px;
}
.fnf-chai-cup svg { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 90px; }
.fnf-chai-cup__steam {
    position: absolute;
    bottom: 80px;
    width: 6px; height: 30px;
    background: rgba(86,143,49,0.35);
    border-radius: 999px;
    filter: blur(3px);
    opacity: 0;
    animation: fnfChaiSteam 2.4s ease-in-out infinite;
}
.fnf-chai-cup__steam--1 { left: 38px; animation-delay: 0s; }
.fnf-chai-cup__steam--2 { left: 58px; animation-delay: 0.4s; height: 38px; }
.fnf-chai-cup__steam--3 { left: 78px; animation-delay: 0.8s; }

@keyframes fnfChaiSteam {
    0%   { transform: translateY(0)    scale(1);    opacity: 0; }
    30%  {                                          opacity: 0.7; }
    100% { transform: translateY(-50px) scale(1.4); opacity: 0; }
}

.fnf-chai-title--loading {
    color: var(--adv-ink-soft);
    font-weight: 500;
    font-size: 22px;
}

/* ==========================================================================
   RESULT
   ========================================================================== */

.fnf-chai-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    background: #fff;
    border-radius: var(--adv-radius);
    padding: 24px;
    box-shadow: var(--adv-shadow-lg);
    text-align: left;
    align-items: center;
    margin: 12px auto 32px;
    max-width: 760px;
}

.fnf-chai-hero__media {
    border-radius: 18px;
    overflow: hidden;
    background: var(--adv-cream);
    aspect-ratio: 1;
}
.fnf-chai-hero__media img {
    width: 100%; height: 100%; object-fit: cover;
    animation: fnfChaiKenBurns 14s ease-in-out infinite alternate;
}

@keyframes fnfChaiKenBurns {
    from { transform: scale(1)    translate(0,0); }
    to   { transform: scale(1.08) translate(-1%, -1%); }
}

.fnf-chai-hero__tag {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--adv-tint-a, var(--adv-mint));
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--adv-ink);
    margin-bottom: 10px;
}

.fnf-chai-hero__name {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--adv-ink);
    line-height: 1.2;
}

.fnf-chai-hero__reason {
    font-size: 15px;
    line-height: 1.6;
    color: var(--adv-ink-soft);
    margin: 0 0 18px;
    min-height: 3em;
}
.fnf-chai-hero__reason::after {
    content: "▍";
    color: var(--fnf-primary);
    margin-left: 2px;
    animation: fnfChaiBlink 1s steps(1) infinite;
    opacity: 0;
}
.fnf-chai-hero__reason.is-typing::after { opacity: 1; }
@keyframes fnfChaiBlink { 50% { opacity: 0; } }

.fnf-chai-hero__meta {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--adv-ink-soft);
}
.fnf-chai-hero__price { font-weight: 600; color: var(--adv-ink); }
.fnf-chai-hero__price del { color: var(--adv-ink-soft); font-weight: 400; margin-right: 6px; }

.fnf-chai-hero__caffeine {
    display: inline-flex; align-items: center; gap: 6px;
}
.fnf-chai-hero__caffeine::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--adv-tint-a, var(--fnf-accent));
}

.fnf-chai-altsHead {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 12px;
    font-weight: 600;
    color: var(--adv-ink-soft);
    margin: 0 0 16px;
}

.fnf-chai-alts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 760px;
    margin: 0 auto;
}

.fnf-chai-alt {
    display: flex;
    gap: 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--adv-line);
    border-radius: 18px;
    padding: 12px;
    text-decoration: none;
    color: var(--adv-ink);
    transition: transform .25s ease, box-shadow .25s ease;
    text-align: left;
    align-items: center;
}
.fnf-chai-alt:hover { transform: translateY(-3px); box-shadow: var(--adv-shadow); }
.fnf-chai-alt img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.fnf-chai-alt__name { font-weight: 600; font-size: 15px; margin: 0 0 4px; line-height: 1.3; }
.fnf-chai-alt__pitch { font-size: 13px; color: var(--adv-ink-soft); margin: 0; line-height: 1.4; }

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 640px) {
    .fnf-chai-stage { padding: 90px 18px 60px; }
    .fnf-chai-hero { grid-template-columns: 1fr; padding: 18px; }
    .fnf-chai-hero__media { aspect-ratio: 16/10; }
    .fnf-chai-alts { grid-template-columns: 1fr; }
    .fnf-chai-progress { top: 20px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fnf-chai-overlay, .fnf-chai-step, .fnf-chai-hero__media img,
    .fnf-chai-mood, .fnf-chai-trigger, .fnf-chai-cup__steam,
    .fnf-chai-trigger__pulse {
        animation: none !important;
        transition: none !important;
    }
    .fnf-chai-overlay__bg { transition: none; }
}

/* ==========================================================================
   BODY LOCK
   ========================================================================== */

body.fnf-chai-open { overflow: hidden; }