/* ============================================================
   SPRIEVODCA VÝBEROM
   Tlačidlo pod ZAREGISTRUJTE SA + tri otázky v páse s logom.

   Veľkosť písma odpovedí je zámerne tá istá liga ako nadpis
   VÝPREDAJ (.vypredaj-heading, 4,2rem) — je to hlavná vec na
   obrazovke, nie ovládací prvok kdesi bokom.
   ============================================================ */

/* ---- tlačidlo ------------------------------------------------------
   Sedí presne pod .dealer-btn: tá je fixed na right:0 / top:270px a
   je vysoká 48px, takže 326px je 8px medzera pod ňou. Zdedí aj
   zbaľovanie pri rolovaní — .scrolled prepína sprievodca.js, lebo
   script.js pozná len .dealer-btn. */
.guide-btn {
    position: fixed;
    right: 0;
    top: 326px;
    z-index: 900;
    display: flex;
    align-items: center;
    height: 48px;
    background: #bd8c00;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    border-radius: 4px 0 0 4px;
    padding: 0 14px 0 18px;
    gap: 6px;
    width: 220px;
    cursor: pointer;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s ease;
}

.guide-btn:hover { background: #dbfaf2;
    color: #172124;  }

.guide-btn__text {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.2s ease 0.05s;
}

.guide-btn__icon { font-size: 1.5rem; line-height: 1; }

.guide-btn.scrolled { width: 48px; padding: 0; justify-content: center; gap: 0; }
.guide-btn.scrolled .guide-btn__text { opacity: 0; flex: 0; overflow: hidden; }

/* ---- pás s otázkou -------------------------------------------------
   .intro-section je 440px vysoká a už aj centruje obsah. Sprievodca do
   nej len vloží iný blok — preto tu nie je žiadne position:fixed ani
   prekrytie: je to obyčajný obsah stránky.

   PÁS ZOSTÁVA BIELY. Invertované sú LEN tlačidlá odpovedí — tmavé
   karty na bielom sú tá výrazná vec na obrazovke, otázka nad nimi
   ostáva tmavým písmom ako zvyšok webu. (Celý pás tmavý bol medzikrok,
   ktorý sa neujal.) */
/* position:relative VŽDY, nie len počas sprievodcu. Logo je pri
   vysúvaní position:absolute a meria sa voči tomuto pásu. Keď relative
   visel len na .is-guide, zatvorenie ho zhodilo HNEĎ na začiatku —
   a logo sa celú cestu späť meralo voči stránke, takže prichádzalo
   zľava zdola namiesto zo strany. */
.intro-section { position: relative; }

.intro-section.is-guide {
    height: auto;
    min-height: 440px;
    padding: 48px 20px 56px;
    background: #ffffff;
    overflow: hidden;
}

/* Logo neodchádza cez display:none, ale vyšmykne sa vľavo za okraj.
   .is-floating ho vyberie z toku BEZ posunu (rovnaké miesto, celý pás),
   .is-out ho až potom odsunie — pozri slideLogoOut() v sprievodca.js.
   Von z toku sa musí dostať aj preto, aby otázka ostala v strede pásu
   a nie vedno s ním. */
.intro-img {
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.4s ease;
}

.intro-img.is-floating {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.intro-img.is-out { transform: translateX(-140%); opacity: 0; }

.guide-stage { width: 100%; max-width: 1180px; margin: 0 auto; text-align: center; }
.guide-stage[hidden] { display: none; }

.guide-step {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.25, 1, 0.5, 1);
}

.guide-step.is-in { opacity: 1; transform: none; }

/* Tá istá liga ako .vypredaj-heading, len s clamp() — 4,2rem by sa
   na mobile nezmestilo do jedného riadku. */
.guide-q {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.1rem, 5.2vw, 4.2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #172124;
    line-height: 1.05;
    margin: 0 0 34px;
}

/* ---- odpovede ------------------------------------------------------ */
.guide-opts {
    display: grid;
    gap: 14px;
    margin-bottom: 26px;
}

.guide-opts--4 { grid-template-columns: repeat(4, 1fr); }
.guide-opts--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }

.guide-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 132px;
    padding: 22px 14px;
    /* border: none je NUTNÉ, nie len vynechať border. .guide-opt je
       <button> a bez vlastného border sa vráti rámček z predvoleného
       štýlu prehliadača. */
    border: none;
    border-radius: 14px;
    background: #172124;
    font-family: 'Barlow Condensed', sans-serif;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease,
                transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}

.guide-opt__label {
    font-size: clamp(1.3rem, 2.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.05;
}

.guide-opt__note {
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}

.guide-opt:hover {
    background: #dbfaf2;
    color: #172124;
    transform: translateY(-3px);
}

/* Vybraté: mäta s tmavým písmom, bez rámčeka. Zostane tak aj po
   odchode myši — pri otázke s viacerými odpoveďami je to jediné,
   podľa čoho vidno, čo už je zvolené. */
.guide-opt.is-on {
    background: #dbfaf2;
    color: #172124;
}

.guide-opt.is-on .guide-opt__note { color: #5b6163; }

/* ---- výška --------------------------------------------------------- */
.guide-height {
    font-family: 'Barlow Condensed', sans-serif;
    margin: 0 0 10px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.guide-height__val {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    font-weight: 700;
    color: #172124;
    line-height: 1;
}

.guide-height span { font-size: 1.4rem; font-weight: 600; color: #93a0a4; }

.guide-range {
    -webkit-appearance: none;
    appearance: none;
    width: min(640px, 100%);
    height: 6px;
    border-radius: 999px;
    background: #e6e4dc;
    outline: none;
    margin: 0 auto;
    display: block;
}

.guide-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #172124;
    border: 4px solid #dbfaf2;
    cursor: pointer;
}

.guide-range::-moz-range-thumb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #172124;
    border: 4px solid #dbfaf2;
    cursor: pointer;
}

.guide-scale {
    display: flex;
    justify-content: space-between;
    width: min(640px, 100%);
    margin: 8px auto 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.9rem;
    color: #93a0a4;
}

/* ---- pomocné texty a ĎALEJ ----------------------------------------- */
.guide-hint {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    color: #93a0a4;
    margin: 14px 0 0;
}

.guide-next {
    margin-top: 22px;
    padding: 13px 44px;
    border: none;
    border-radius: 999px;
    background: #172124;
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.guide-next:hover:not(:disabled) { background: #dbfaf2; color: #172124; }
.guide-next:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- úzke displeje -------------------------------------------------- */
@media screen and (max-width: 900px) {
    .guide-opts--4 { grid-template-columns: repeat(2, 1fr); }
    .guide-opts--2 { grid-template-columns: repeat(2, 1fr); }
    .guide-opt { min-height: 104px; padding: 16px 12px; }
}

@media screen and (max-width: 768px) {
    /* Tlačidlá pri okraji sa na mobile zbaľujú samy; sprievodca len
       nesmie skončiť pod košíkom. */
    .guide-btn { top: auto; bottom: 76px; }
    .intro-section.is-guide { padding: 32px 14px 40px; min-height: 0; }
    .guide-q { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .guide-step, .guide-opt, .guide-btn, .guide-next { transition: none; }
    .guide-step { transform: none; }
}