/* ============================================================================
   BEFORE THE ITINERARY — "A little about you", three questions, one at a time.
   ----------------------------------------------------------------------------
   Design A, chosen by Chiran on 9 November 2026:
   claude.ai/artifact/EnR77xSzYrQS6v5YkmnEUp (Main.dc.html = computer 1440x900,
   Phone.dc.html = phone 390x844). Values below are taken from those artboards.

   Computer: a large photo on the left (46%) with the white butterfly, "Your
   trip is ready", the trip name and the guide's line; the question on the right
   on the #fafafa canvas. Phone (600px and below): the photo is a 230px band on
   top, the question below, Back and Continue fixed at the bottom.

   Every rule is scoped to .ss-ov and two classes deep where the Traveler theme
   styles bare buttons (gold, uppercase) — otherwise the theme wins.
   ============================================================================ */

.ss-ov {
    --ov-violet: #7700FF;
    --ov-violet-deep: #5A00C2;
    --ov-violet-tint: #F3EBFF;
    --ov-violet-hover: #B98AFF;
    --ov-ink: #090920;
    --ov-body: #4A4A5E;
    --ov-muted: #6B6B80;
    --ov-faint: #8A8A9C;
    --ov-line: #E3E0EC;
    --ov-seg: #E9E3F5;
    --ov-off: #D9CCF2;
    --ov-canvas: #FAFAFA;
    --ov-red: #FF0A1F;
    --ov-font: 'Google Sans', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    position: fixed;
    inset: 0;
    /* Above every floating thing on the page (the favourites button, the
       cookie notice, chat bubbles). They are also hidden while this is open. */
    z-index: 2147483000;
    display: grid;
    grid-template-columns: 46% 54%;
    background: var(--ov-canvas);
    color: var(--ov-ink);
    font-family: var(--ov-font);
    overflow: hidden;
    overscroll-behavior: contain;
    transition: opacity .45s ease;
}
.ss-ov.ss-ov,
.ss-ov .ss-ov__k,
.ss-ov button,
.ss-ov input { font-family: var(--ov-font) !important; }
.ss-ov *, .ss-ov *::before, .ss-ov *::after { box-sizing: border-box; }
.ss-ov.is-done { opacity: 0; pointer-events: none; }

/* Nothing behind it scrolls while it is up. */
body.ss-ov-open { overflow: hidden !important; }
/* Anything that floats over the page waits until she has answered. */
body.ss-ov-open .ss-ov-hid,
body.ss-ov-open #sarisara-fav,
body.ss-ov-open .sl-consent-glow,
body.ss-ov-open .sl-consent { visibility: hidden !important; pointer-events: none !important; }

/* ---------------- left: the photo ---------------- */
.ss-ov__photo {
    position: relative;
    overflow: hidden;
    background: #1A1A2E;
    min-height: 0;
}
.ss-ov .ss-ov__img {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important; max-width: none !important;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
}
.ss-ov .ss-ov__img.is-on { opacity: 1; }
.ss-ov__shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9,9,32,.35) 0%, rgba(9,9,32,0) 28%, rgba(9,9,32,0) 55%, rgba(9,9,32,.78) 100%);
}
.ss-ov__brand {
    position: absolute; top: 36px; left: 44px;
    display: flex; align-items: center; gap: 10px;
    color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .2px; line-height: 1;
}
.ss-ov .ss-ov__logo { width: 34px !important; height: auto !important; display: block; }
.ss-ov__hero {
    position: absolute; left: 44px; right: 44px; bottom: 48px;
    display: flex; flex-direction: column; gap: 10px; color: #fff;
}
.ss-ov__ready {
    align-self: flex-start;
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.2;
    background: rgba(255,255,255,.18); padding: 7px 14px; border-radius: 999px;
}
.ss-ov__trip { font-size: 34px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.ss-ov__by { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 460px; }

/* ---------------- right: one question at a time ---------------- */
.ss-ov__side {
    display: flex; flex-direction: column;
    padding: 48px 72px 40px;
    min-width: 0; min-height: 0;
    overflow-y: auto;
}
.ss-ov__prog { display: flex; align-items: center; gap: 16px; flex: none; }
.ss-ov__bars { display: flex; gap: 6px; width: 180px; }
.ss-ov__bar { height: 4px; border-radius: 4px; background: var(--ov-seg); flex: 1; transition: background .3s ease; }
.ss-ov__bar.is-on { background: var(--ov-violet); }
.ss-ov__count { font-size: 13px; color: var(--ov-muted); }

.ss-ov__mid {
    flex: 1 0 auto;
    display: flex; flex-direction: column; justify-content: center;
    padding: 28px 0;
}
.ss-ov__form { width: 100%; max-width: 620px; }

.ss-ov__q { display: none; }
.ss-ov__q.is-on { display: flex; flex-direction: column; gap: 14px; animation: ssOvRise .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ssOvRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ss-ov .ss-ov__kicker {
    margin: 0 !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1.3 !important;
    letter-spacing: 1.6px !important; text-transform: uppercase !important;
    color: var(--ov-violet) !important;
}
.ss-ov .ss-ov__k {
    margin: 0 !important; padding: 0 !important;
    font-size: 40px !important; line-height: 1.15 !important; font-weight: 700 !important;
    letter-spacing: normal !important; text-transform: none !important;
    color: var(--ov-ink) !important;
    text-wrap: balance;
}
.ss-ov .ss-ov__k:focus { outline: none; }
.ss-ov .ss-ov__lead {
    margin: 0 !important;
    font-size: 17px !important; line-height: 1.55 !important; color: var(--ov-body) !important;
}

/* ---------- chips: countries and "how did you hear" ---------- */
.ss-ov__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ss-ov .ss-chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; height: auto !important; margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid var(--ov-line) !important; border-radius: 999px !important;
    background: #fff !important; color: var(--ov-ink) !important;
    font-size: 15px !important; font-weight: 400 !important; line-height: 1.25 !important;
    text-transform: none !important; letter-spacing: normal !important;
    box-shadow: none !important; text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.ss-ov .ss-chip:hover { border-color: var(--ov-violet-hover) !important; }
.ss-ov .ss-chip.is-on {
    border-color: var(--ov-violet) !important; background: var(--ov-violet-tint) !important; font-weight: 500 !important;
}
.ss-ov .ss-chip:focus-visible,
.ss-ov .ss-pick:focus-visible,
.ss-ov .ss-cc__trigger:focus-visible,
.ss-ov .ss-ov__btn:focus-visible { outline: 2px solid var(--ov-violet) !important; outline-offset: 2px; }
.ss-chip__flag { font-size: 18px; line-height: 1; }
.ss-chip__short { display: none; }

/* ---------- "another country": the searchable list ---------- */
.ss-ov__or { margin-top: 8px; font-size: 14px; color: var(--ov-body); }
.ss-ov .ss-cc { position: relative; margin: -8px 0 0; }
.ss-ov .ss-cc__trigger {
    display: flex; align-items: center; gap: 12px; width: 100%;
    height: 48px !important; margin: 0 !important; padding: 0 16px !important;
    border: 1px solid var(--ov-line) !important; border-radius: 12px !important;
    background: #fff !important; color: var(--ov-ink) !important;
    font-size: 15px !important; font-weight: 400 !important; text-align: left;
    text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important;
    cursor: pointer;
}
.ss-ov .ss-cc__trigger:hover { border-color: var(--ov-violet-hover) !important; }
.ss-ov .ss-cc.is-open .ss-cc__trigger,
.ss-ov .ss-cc__trigger.is-on { border-color: var(--ov-violet) !important; }
.ss-ov .ss-cc__trigger.is-on { background: var(--ov-violet-tint) !important; font-weight: 500 !important; }
.ss-cc__trigger[data-empty="1"] .ss-cc__val { color: var(--ov-faint); }
.ss-cc__val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-cc__chev { flex: none; display: inline-flex; color: var(--ov-faint); transition: transform .18s ease; }
.ss-ov .ss-cc__chev .svgico { width: 20px; height: 20px; }
.ss-ov .ss-cc.is-open .ss-cc__chev { transform: rotate(180deg); color: var(--ov-violet); }

.ss-flag { flex: none; font-size: 19px; line-height: 1; }
.ss-flag--empty { display: none; }

.ss-cc__menu {
    position: absolute; z-index: 20; left: 0; width: 100%;
    top: calc(100% + 8px);
    background: #fff; border: 1px solid var(--ov-line); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(9, 9, 32, .16); overflow: hidden;
}
/* Close to the bottom of a short screen the list opens upwards instead. */
.ss-cc.is-up .ss-cc__menu { top: auto; bottom: calc(100% + 8px); }
.ss-cc__menu[hidden] { display: none; }
.ss-cc__search { padding: 10px; border-bottom: 1px solid #EFEFF4; }
.ss-ov .ss-cc__search input {
    width: 100%; height: 44px !important; margin: 0 !important; padding: 0 13px !important;
    font-size: 15px !important; font-weight: 400 !important; color: var(--ov-ink) !important;
    background: var(--ov-canvas) !important; border: 1px solid var(--ov-line) !important; border-radius: 10px !important;
    box-shadow: none !important;
}
.ss-ov .ss-cc__search input:focus { outline: none; background: #fff !important; border-color: var(--ov-violet) !important; }
.ss-cc__list { max-height: 252px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.ss-cc__opt {
    display: flex; align-items: center; gap: 11px;
    min-height: 44px; padding: 0 10px;
    font-size: 15px; color: var(--ov-ink); border-radius: 9px; cursor: pointer;
}
.ss-cc__opt:hover, .ss-cc__opt.is-active { background: var(--ov-violet-tint); }
.ss-cc__opt.is-selected { color: var(--ov-violet-deep); font-weight: 500; }
.ss-cc__head {
    padding: 9px 10px 5px; font-size: 11px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase; color: var(--ov-faint); list-style: none;
}
.ss-cc__empty { padding: 16px 12px; color: var(--ov-muted); font-size: 14.5px; text-align: center; list-style: none; }

/* ---------- "what kind of trip": six boxes, icon square first ---------- */
.ss-ov__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.ss-ov .ss-pick {
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    width: 100%; height: auto !important; min-height: 44px; margin: 0 !important;
    padding: 16px 18px !important;
    border: 1px solid var(--ov-line) !important; border-radius: 16px !important;
    background: #fff !important; color: var(--ov-ink) !important;
    text-align: left; text-transform: none !important; letter-spacing: normal !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ss-ov .ss-pick:hover { border-color: var(--ov-violet-hover) !important; }
.ss-ov .ss-pick.is-on {
    border-color: var(--ov-violet) !important; background: var(--ov-violet-tint) !important;
    box-shadow: 0 0 0 1px var(--ov-violet) inset !important;
}
.ss-pick__ico {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 12px;
    background: var(--ov-violet-tint); color: var(--ov-violet);
}
.ss-ov .ss-pick.is-on .ss-pick__ico { background: #fff; }
.ss-ov .ss-pick__ico .svgico { width: 26px; height: 26px; }
.ss-pick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ss-ov .ss-pick__label { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ov-ink); }
.ss-ov .ss-pick__hint { font-size: 14px; line-height: 1.4; color: var(--ov-muted); }
.ss-ov .ss-pick__label--short,
.ss-ov .ss-pick__hint--short { display: none; }

/* ---------- done ---------- */
.ss-ov__q--done { align-items: flex-start; }
.ss-ov__done-ico { color: #30B300; display: inline-flex; }
.ss-ov .ss-ov__done-ico .svgico { width: 56px; height: 56px; }

/* ---------- Back + Continue ---------- */
.ss-ov__msg { margin: 0 0 10px !important; min-height: 0; font-size: 13.5px; color: var(--ov-muted); max-width: 620px; }
.ss-ov__msg:empty { display: none; }
.ss-ov__msg.is-bad { color: var(--ov-red); }
.ss-ov__foot {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    max-width: 620px;
}
.ss-ov .ss-ov__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px !important; margin: 0 !important;
    border-radius: 999px !important;
    font-size: 15px !important; line-height: 1 !important;
    text-transform: none !important; letter-spacing: normal !important;
    box-shadow: none !important; cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ss-ov .ss-ov__btn .svgico { width: 18px; height: 18px; flex: none; }
.ss-ov .ss-ov__btn--go {
    margin-left: auto !important;
    padding: 0 26px !important; border: 0 !important;
    background: var(--ov-violet) !important; color: #fff !important; font-weight: 700 !important;
}
.ss-ov .ss-ov__btn--go:hover:not(:disabled) { background: var(--ov-violet-deep) !important; }
.ss-ov .ss-ov__btn--go:disabled { background: var(--ov-off) !important; cursor: default; }
.ss-ov .ss-ov__btn--back {
    padding: 0 20px !important;
    border: 1px solid var(--ov-line) !important;
    background: #fff !important; color: var(--ov-body) !important; font-weight: 500 !important;
}
.ss-ov .ss-ov__btn--back:hover { border-color: var(--ov-violet-hover) !important; }
.ss-ov .ss-ov__btn[hidden] { display: none !important; }
.ss-ov__note { font-size: 13px; color: var(--ov-faint); }
.ss-ov__note[hidden] { display: none; }
.ss-ov.is-finished .ss-ov__foot,
.ss-ov.is-finished .ss-ov__msg { visibility: hidden; }

/* While an answer is on its way, a second tap does nothing. */
.ss-ov.is-busy .ss-ov__form,
.ss-ov.is-busy .ss-ov__foot { pointer-events: none; }

/* A shorter computer screen: the same layout, a little tighter. */
@media (min-width: 601px) and (max-height: 760px) {
    .ss-ov__side { padding: 32px 56px 28px; }
    .ss-ov .ss-ov__k { font-size: 32px !important; }
    .ss-ov .ss-pick { padding: 12px 14px !important; }
    .ss-pick__ico { width: 44px; height: 44px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
    .ss-ov__side { padding: 40px 40px 32px; }
    .ss-ov__brand { left: 32px; }
    .ss-ov__hero { left: 32px; right: 32px; }
    .ss-ov__trip { font-size: 28px; }
    .ss-ov .ss-ov__k { font-size: 32px !important; }
}
@media (min-width: 601px) and (max-width: 860px) {
    .ss-ov__picks { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ PHONE ============================ */
@media (max-width: 600px) {
    .ss-ov {
        display: flex; flex-direction: column;
    }
    .ss-ov__photo { flex: none; height: 230px; transition: height .35s ease; }
    /* AFTER THE FIRST QUESTION THE PHOTO STEPS BACK (Chiran, 9 Nov 2026: questions 2 and 3 needed a
       scroll on a phone). The band shrinks to a slim strip with the logo and the trip name on one
       line, so all six trip boxes and all eight "how did you hear" answers fit above Continue. */
    .ss-ov[data-at="purpose"] .ss-ov__photo,
    .ss-ov[data-at="channel"] .ss-ov__photo,
    .ss-ov[data-at="done"] .ss-ov__photo { height: 112px; }
    .ss-ov[data-at="purpose"] .ss-ov__ready,
    .ss-ov[data-at="channel"] .ss-ov__ready,
    .ss-ov[data-at="done"] .ss-ov__ready { display: none; }
    .ss-ov[data-at="purpose"] .ss-ov__trip,
    .ss-ov[data-at="channel"] .ss-ov__trip,
    .ss-ov[data-at="done"] .ss-ov__trip { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ss-ov[data-at="purpose"] .ss-ov__hero,
    .ss-ov[data-at="channel"] .ss-ov__hero { bottom: 12px; }
    .ss-ov[data-at="purpose"] .ss-ov__brand,
    .ss-ov[data-at="channel"] .ss-ov__brand { top: 14px; }
    .ss-ov__shade { background: linear-gradient(180deg, rgba(9,9,32,.4) 0%, rgba(9,9,32,0) 40%, rgba(9,9,32,.75) 100%); }
    .ss-ov__brand { top: 18px; left: 20px; gap: 8px; font-size: 15px; }
    .ss-ov .ss-ov__logo { width: 26px !important; }
    .ss-ov__hero { left: 20px; right: 20px; bottom: 16px; gap: 4px; }
    .ss-ov__ready { background: none; padding: 0; border-radius: 0; font-size: 11px; letter-spacing: 1.4px; color: rgba(255,255,255,.85); }
    .ss-ov__trip { font-size: 20px; line-height: 1.25; }
    .ss-ov__by { display: none; }

    .ss-ov__side {
        flex: 1 1 auto;
        padding: 18px 20px calc(96px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .ss-ov__prog { gap: 10px; }
    .ss-ov__bars { width: 110px; gap: 5px; }
    .ss-ov__count { font-size: 12px; }
    .ss-ov__secs { display: none; }
    .ss-ov__mid { flex: none; justify-content: flex-start; padding: 12px 0 0; }
    .ss-ov__q.is-on { gap: 10px; }
    .ss-ov .ss-ov__kicker { display: none; }
    .ss-ov .ss-ov__k { font-size: 26px !important; line-height: 1.2 !important; }
    .ss-ov__q[data-step="purpose"] .ss-ov__k,
    .ss-ov__q[data-step="channel"] .ss-ov__k { font-size: 23px !important; }
    .ss-ov .ss-ov__lead { font-size: 15px !important; line-height: 1.5 !important; }
    .ss-ov__q[data-step="purpose"] .ss-ov__lead,
    .ss-ov__q[data-step="channel"] .ss-ov__lead { display: none; }

    .ss-ov__chips { gap: 8px; margin-top: 0; }
    .ss-ov .ss-chip { padding: 0 16px !important; }
    .ss-chip__long { display: none; }
    .ss-chip__short { display: inline; }
    .ss-ov__or { margin-top: 4px; }
    .ss-ov .ss-cc { margin-top: -4px; }

    .ss-ov__picks { gap: 8px; margin-top: 0; }
    .ss-ov .ss-pick { gap: 10px; padding: 10px 12px !important; border-radius: 14px !important; min-height: 64px; }
    .ss-pick__ico { width: 38px; height: 38px; flex: none; }
    .ss-ov .ss-pick__ico .svgico { width: 22px; height: 22px; }
    .ss-ov .ss-pick__label { font-size: 14px; }
    .ss-ov .ss-pick__hint { font-size: 12px; }
    .ss-ov .ss-pick__label:not(.ss-pick__label--short),
    .ss-ov .ss-pick__hint:not(.ss-pick__hint--short) { display: none; }
    .ss-ov .ss-pick__label--short,
    .ss-ov .ss-pick__hint--short { display: block; }
    .ss-ov .ss-ov__done-ico .svgico { width: 48px; height: 48px; }

    .ss-ov__msg { margin: 12px 0 0 !important; }
    .ss-ov__foot {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
        max-width: none; gap: 10px;
        padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        background: var(--ov-canvas); border-top: 1px solid #ECE9F3;
    }
    .ss-ov__note { display: none; }
    .ss-ov .ss-ov__btn { height: 48px !important; }
    .ss-ov .ss-ov__btn--back { width: 48px; padding: 0 !important; flex: none; color: var(--ov-body) !important; }
    .ss-ov .ss-ov__btn--back .ss-ov__btn-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ss-ov .ss-ov__btn--back .svgico { width: 20px; height: 20px; }
    .ss-ov .ss-ov__btn--go { flex: 1; margin-left: 0 !important; padding: 0 24px !important; }
    .ss-ov .ss-ov__btn--go .svgico { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ss-ov, .ss-ov__q.is-on, .ss-ov .ss-ov__img, .ss-ov__bar, .ss-cc__chev,
    .ss-ov .ss-chip, .ss-ov .ss-pick { animation: none !important; transition: none !important; }
}