/* ==========================================================================
   Ghiceste pretul de Black Friday
   Foloseste tokenii din htmlHeader.phtml / newNavbar.phtml (--clr-*, --ff-*);
   fallback-urile de mai jos tin componenta corecta si pe o pagina fara tokeni.
   Clasele si ID-urile folosite de ghicesteSlider.js (si de cartItem.phtml
   pentru butonul .buton-cumpara-bf) raman neschimbate.
   ========================================================================== */

.ghiceste-wrapper {
    --gh-bg: var(--clr-accentgrey, #212121);
    --gh-border: var(--clr-border, #2B2C2E);
    --gh-text: var(--clr-almostwhite, #EEEEEE);
    --gh-muted: var(--clr-lightgrey, #ACAAAA);
    --gh-accent: var(--clr-orange, #F16A52);
    --gh-blue: var(--clr-blue, #49B2E3);
    --gh-ff: var(--ff-hg, 'hanken-grotesk', Arial, sans-serif);
    --gh-ff-title: var(--ff-aga, 'alternate-gothic-atf', Impact, sans-serif);
    --gh-ff-small: var(--ff-rf, 'Roboto Flex', Arial, sans-serif);
    --gh-track: rgba(255, 255, 255, .14);
    --gh-tick: rgba(255, 255, 255, .26);
    /* culoarea "activa" (arc, umplere, tick): portocaliu; albastru dupa ce ai ghicit */
    --gh-hi: var(--gh-accent);
    --gh-dial: 148px;
    --gh-ease: cubic-bezier(.22, .8, .3, 1);
}

/* ==========================================================================
   1. Card + layout (mobile first)
   ========================================================================== */

.ghiceste-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "title"
        "dial"
        "slider"
        "action"
        "info";
    margin-top: 3rem;
    padding: 28px 20px 18px;
    box-sizing: border-box;
    background: var(--gh-bg);
    border: 1px solid var(--gh-border);
    border-radius: 2px;
    color: var(--gh-text);
    font-family: var(--gh-ff);
    overflow: hidden;
}

.ghiceste-wrapper .title-bf {
    grid-area: title;
    align-self: center;
}

/* iconitele inline sunt "stroke", fara umplere */
.ghiceste-wrapper svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ghiceste-wrapper .circular-wrapper {
    grid-area: dial;
    justify-self: center;
    margin: 20px 0 4px 0;
}

.ghiceste-wrapper .ghiceste-slider-wrapper {
    grid-area: slider;
}

.ghiceste-wrapper #buton-wrapper,
.ghiceste-wrapper .messages {
    grid-area: action;
    align-self: start;
}

/* butonul si mesajele impart aceeasi zona: containerul gol nu trebuie sa prinda click-uri */
.ghiceste-wrapper .messages {
    pointer-events: none;
}

.ghiceste-wrapper .message {
    pointer-events: auto;
}

.ghiceste-wrapper #buton-wrapper,
.ghiceste-wrapper .messages {
    margin-top: 14px;
}

.ghiceste-wrapper .bf-info {
    grid-area: info;
}

/* tableta: titlul langa cadran, restul pe toata latimea */
@media (min-width: 641px) {
    .ghiceste-wrapper {
        --gh-dial: 168px;
        grid-template-columns: minmax(0, 1fr) var(--gh-dial);
        grid-template-areas:
            "title  dial"
            "slider slider"
            "action action"
            "info   info";
        column-gap: 40px;
        padding: 36px 32px 20px;
    }

    .ghiceste-wrapper .circular-wrapper {
        margin: 0;
        align-self: center;
    }
}

/* desktop: titlu | cadran | actiune, apoi slider-ul pe toata latimea */
@media (min-width: 1031px) {
    .ghiceste-wrapper {
        grid-template-columns: minmax(0, 1fr) var(--gh-dial) minmax(0, 1fr);
        grid-template-areas:
            "title  dial   action"
            "slider slider slider"
            "info   info   info";
        /* rezerva loc pentru cel mai inalt mesaj, ca slider-ul sa nu sara intre stari */
        grid-template-rows: minmax(200px, auto) auto auto;
        column-gap: 56px;
        padding: 44px 48px 22px;
    }

    .ghiceste-wrapper #buton-wrapper,
    .ghiceste-wrapper .messages {
        align-self: center;
        margin-top: 0;
    }
}

/* ==========================================================================
   2. Titlu (.title-bf)
   Dupa ce ghicesti, JS inlocuieste tot continutul cu un text simplu - de
   aceea tipografia titlului sta pe .title-bf, nu pe copii.
   ========================================================================== */

.ghiceste-wrapper .title-bf {
    font-family: var(--gh-ff-title);
    font-size: 36px;
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: left;
    color: #fff;
}

.ghiceste-wrapper .ghiceste-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-family: var(--gh-ff-small);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    color: var(--gh-accent);
}

.ghiceste-wrapper .ghiceste-eyebrow::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.ghiceste-wrapper .title-bf .ghiceste-title {
    display: block;
}

.ghiceste-wrapper .title-bf .ghiceste-lead {
    display: block;
    max-width: 42ch;
    margin-top: 16px;
    font-family: var(--gh-ff);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gh-muted);
}

/* badge-ul raster clonat de blackFridayBadge.js repeta titlul de mai sus */
.ghiceste-wrapper .title-bf .badge-bf {
    display: none !important;
}

@media (min-width: 1031px) {
    .ghiceste-wrapper .title-bf {
        font-size: clamp(38px, 3.9vw, 46px);
    }
}

/* ==========================================================================
   3. Cadran (rotita)
   .circular-ext = arc de scala (fix) + zona de drag (JS redirecteaza
   mouse-ul catre maner), .circular-int = butonul care se roteste.
   --p (0..1) e setat din ghicesteSlider.js la fiecare miscare.
   ========================================================================== */

.ghiceste-wrapper .circular-wrapper {
    position: relative;
    width: var(--gh-dial);
    height: var(--gh-dial);
}

.ghiceste-wrapper .circular-slider {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}

.ghiceste-wrapper .circular-ext {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    background: none;
    cursor: grab;
}

.ghiceste-wrapper .circular-ext:active {
    cursor: grabbing;
}

/* arcul de 270 grade: pista + progresul */
.ghiceste-wrapper .circular-ext::before,
.ghiceste-wrapper .circular-ext::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}

.ghiceste-wrapper .circular-ext::before {
    background: conic-gradient(from -135deg, var(--gh-track) 0deg 270deg, transparent 270deg);
}

.ghiceste-wrapper .circular-ext::after {
    background: conic-gradient(from -135deg, var(--gh-hi) 0deg calc(var(--p, .5) * 270deg), transparent calc(var(--p, .5) * 270deg));
}

.ghiceste-wrapper .circular-int {
    position: absolute;
    inset: 14px;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 22%, #3b3c41 0%, #27282b 46%, #19191b 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 0 0 1px rgba(255, 255, 255, .04),
        0 10px 24px rgba(0, 0, 0, .55);
    transition: transform .28s var(--gh-ease), box-shadow .2s ease;
}

/* randul zimtat de pe marginea butonului */
.ghiceste-wrapper .circular-int::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 255, 255, .09) 0deg 1.4deg, transparent 1.4deg 6deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
}

/* indicatorul: punct pe margine (o dunga ar parea un "minus" langa numar cand ajunge la 9 o'clock) */
.ghiceste-wrapper .circular-int::after {
    content: "";
    position: absolute;
    top: 11px;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: var(--gh-hi);
}

.ghiceste-wrapper .circular-wrapper:hover .circular-int {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        inset 0 0 0 1px rgba(255, 255, 255, .07),
        0 12px 28px rgba(0, 0, 0, .65);
}

/* pretul curent, in centrul cadranului (ramane ascuns pana la prima atingere) */
.ghiceste-wrapper .circular-price {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    visibility: hidden;
    pointer-events: none;
    text-align: center;
    color: #fff;
    font-family: var(--gh-ff-title);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    text-shadow: none;
}

.ghiceste-wrapper .circular-price-inner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    line-height: 1;
}

.ghiceste-wrapper .circular-price-currency {
    margin: 0;
    font-family: var(--gh-ff-small);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gh-muted);
}

/* indiciu pana cand utilizatorul atinge cadranul sau maner-ul */
.ghiceste-wrapper .circular-hint {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--gh-muted);
}

.ghiceste-wrapper .circular-price[style*="visible"] ~ .circular-hint {
    display: none;
}

.ghiceste-wrapper .circular-hint .hint-tag {
    display: block;
}

.ghiceste-wrapper .circular-hint .hint-drag {
    display: none;
}

@media (min-width: 641px) {
    .ghiceste-wrapper .circular-hint .hint-tag {
        display: none;
    }

    .ghiceste-wrapper .circular-hint .hint-drag {
        display: block;
    }
}

@media (min-width: 641px) {
    .ghiceste-wrapper .circular-price {
        font-size: 34px;
    }
}

/* ==========================================================================
   4. Slider (noUiSlider)
   ========================================================================== */

.ghiceste-wrapper .ghiceste-slider-wrapper {
    position: relative;
    box-sizing: border-box;
    padding: 24px 0 62px 0;
}

.ghiceste-wrapper .ghiceste-slider.noUi-target {
    height: 6px;
    border: 0;
    border-radius: 3px;
    background: var(--gh-track);
    box-shadow: none;
}

/* umplerea pistei pana la maner (nu exista .noUi-connect: connect e false) */
.ghiceste-wrapper .ghiceste-slider .noUi-connects {
    border-radius: 3px;
}

.ghiceste-wrapper .ghiceste-slider .noUi-connects::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--p, .5) * 100%);
    border-radius: 3px;
    background: var(--gh-hi);
}

.ghiceste-wrapper .ghiceste-slider.noUi-state-tap .noUi-connects::before {
    transition: width .3s;
}

/* maner: zona de atingere de 44px, discul vizibil de 30px */
.ghiceste-wrapper .ghiceste-slider.noUi-target .noUi-handle {
    width: 44px;
    height: 44px;
    top: -19px;
    right: -22px;
    left: auto;
    box-sizing: border-box;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    outline: none;
    cursor: grab;
}

.ghiceste-wrapper .ghiceste-slider.noUi-target .noUi-handle:active,
.ghiceste-wrapper .ghiceste-slider.noUi-target .noUi-handle.noUi-active {
    cursor: grabbing;
}

.ghiceste-wrapper .ghiceste-slider.noUi-target .noUi-handle::before {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 7px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--clr-white-background, #F5F5F5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}

/* sagetile de pe maner */
.ghiceste-wrapper .ghiceste-slider.noUi-target .noUi-handle::after {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    left: 7px;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 8l-4 4 4 4M15 8l4 4-4 4'/></svg>") center / 20px 20px no-repeat;
}

.ghiceste-wrapper .ghiceste-slider.noUi-target .noUi-handle:hover::before {
    transform: scale(1.08);
}

.ghiceste-wrapper .ghiceste-slider.noUi-target .noUi-handle.noUi-active::before {
    transform: scale(1.14);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 0 6px rgba(241, 106, 82, .28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6), 0 0 0 6px color-mix(in srgb, var(--gh-hi) 30%, transparent);
}

.ghiceste-wrapper .ghiceste-slider.noUi-target .noUi-handle:focus-visible::before {
    animation: none !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 0 3px var(--gh-bg), 0 0 0 5px var(--gh-hi);
}

/* inchis (cooldown / ghicit): JS pune [disabled] pe .noUi-origin */
.ghiceste-wrapper .ghiceste-slider .noUi-origin[disabled] .noUi-handle {
    cursor: not-allowed;
}

.ghiceste-wrapper .ghiceste-slider .noUi-origin[disabled] .noUi-handle::before {
    background: #8d8b8b;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    transform: none;
}

.ghiceste-wrapper .ghiceste-slider .noUi-origin[disabled] .noUi-handle::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='11' width='12' height='9' rx='2'/><path d='M8.5 11V8.5a3.5 3.5 0 0 1 7 0V11'/></svg>");
    background-size: 18px 18px;
}

/* ticks + etichete */
.ghiceste-wrapper .ghiceste-slider .noUi-pips {
    padding: 0;
    height: 56px;
    color: var(--gh-muted);
}

.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-marker {
    top: 18px;
    width: 1px;
    height: 7px;
    margin-left: 0;
    border-radius: 1px;
    background: var(--gh-tick);
    transition: background-color .15s ease, height .15s ease;
}

.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-marker:nth-child(4n-3) {
    height: 12px;
}

.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-marker.active {
    width: 2px;
    height: 16px;
    margin-left: -.5px;
    background: var(--gh-hi);
}

.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value {
    top: 40px;
    transform: translateX(-50%);
    opacity: 0;
    font-family: var(--gh-ff-small);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--gh-muted);
    cursor: pointer;
    transition: color .15s ease, opacity .15s ease;
}

/* o eticheta din doua e mereu vizibila; restul apar doar cand sunt active */
.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:nth-child(4n-2),
.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value.active {
    opacity: 1;
}

.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value.active {
    color: var(--gh-hi);
    font-weight: 700;
}

.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:hover {
    color: #fff;
}

.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value.active:hover {
    color: var(--gh-hi);
}

/* unitatea, doar la capetele scalei */
.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:nth-child(2)::after,
.ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:last-child::after {
    content: " lei";
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
}

@media (max-width: 1030px) {
    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:nth-child(2)::after,
    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:last-child::after {
        content: none;
    }
}

/* indiciul "trage": sagetile pulseaza in laterale pana la prima atingere */
.ghiceste-wrapper .ghiceste-slider-wrapper #slider-guide {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    height: 6px;
    z-index: 4;
    pointer-events: none;
}

.ghiceste-wrapper #slider-guide svg {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    stroke: #fff;
    stroke-width: 2.4;
}

.ghiceste-wrapper #slider-guide .guide-left {
    left: calc(50% - 64px);
    animation: ghiceste-nudge-left 1.5s var(--gh-ease) infinite;
}

.ghiceste-wrapper #slider-guide .guide-right {
    left: calc(50% + 42px);
    animation: ghiceste-nudge-right 1.5s var(--gh-ease) infinite;
}

.ghiceste-wrapper .ghiceste-slider-wrapper:has(#slider-guide:not([style*="none"])) .noUi-handle::before {
    animation: ghiceste-pulse 2s ease-out infinite;
}

@keyframes ghiceste-nudge-left {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(-8px); opacity: .35; }
}

@keyframes ghiceste-nudge-right {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(8px); opacity: .35; }
}

@keyframes ghiceste-pulse {
    0% { box-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 0 0 rgba(241, 106, 82, .55); }
    70%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 0 0 14px rgba(241, 106, 82, 0); }
}

/* pe telefon: doar eticheta activa sta sub maner; capetele scalei trec pe un rand separat,
   ca sa nu se suprapuna cu eticheta activa cand maner-ul e aproape de unul din capete */
@media (max-width: 640px) {
    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:not(.active) {
        opacity: 0;
    }

    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:nth-child(2),
    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:last-child {
        top: 64px;
        opacity: 1;
    }

    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:nth-child(2) {
        transform: none;
    }

    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:last-child {
        transform: translateX(-100%);
    }

    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:nth-child(2)::after,
    .ghiceste-wrapper .ghiceste-slider .noUi-pips .noUi-value:last-child::after {
        content: " lei";
    }

    .ghiceste-wrapper .ghiceste-slider-wrapper {
        padding-bottom: 84px;
    }
}

/* ==========================================================================
   5. Butoane
   ========================================================================== */

.ghiceste-wrapper .buton-mare,
.ghiceste-wrapper a.buton-mare:link,
.ghiceste-wrapper a.buton-mare:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    box-sizing: border-box;
    border: 0;
    border-radius: 2px;
    background: var(--gh-accent);
    color: #fff;
    font-family: var(--gh-ff-title);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
}

.ghiceste-wrapper .buton-mare:hover {
    filter: brightness(1.08);
    color: #fff;
    text-decoration: none;
}

.ghiceste-wrapper .buton-mare:active {
    transform: translateY(1px);
}

.ghiceste-wrapper .buton-mare:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ghiceste-wrapper .buton-mare svg {
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform .15s ease;
}

.ghiceste-wrapper .buton-mare:hover svg {
    transform: translateX(3px);
}

.ghiceste-wrapper #buton-wrapper .buton-mare {
    width: 100%;
}

/* secundar: Distribuie pagina (a doua greseala) */
.ghiceste-wrapper .buton-mare.buton-share,
.ghiceste-wrapper a.buton-mare.buton-share:link,
.ghiceste-wrapper a.buton-mare.buton-share:visited {
    min-height: 46px;
    padding: 0 20px;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    color: var(--gh-text);
    font-size: 18px;
}

.ghiceste-wrapper .buton-mare.buton-share:hover {
    filter: none;
    box-shadow: inset 0 0 0 1px #fff;
    color: #fff;
}

.ghiceste-wrapper .buton-mare.buton-share svg {
    color: var(--gh-accent);
}

.ghiceste-wrapper .buton-mare.buton-share:hover svg {
    transform: rotate(-10deg) scale(1.12);
}

/* contact (a treia greseala): "Suna-ne" - butonul principal portocaliu; pictograma nu aluneca, ci se inclina */
.ghiceste-wrapper .buton-mare.buton-contact:hover svg {
    transform: rotate(-12deg);
}

/* succes: Comanda acum */
.ghiceste-wrapper #buton-cumpara-acum,
.ghiceste-wrapper a#buton-cumpara-acum:link,
.ghiceste-wrapper a#buton-cumpara-acum:visited {
    min-height: 48px;
    padding: 0 24px;
    background: var(--gh-blue);
    font-size: 19px;
}

/* ==========================================================================
   6. Mesaje (corect / mai mic / mai mare / ai incercat deja)
   ========================================================================== */

.ghiceste-wrapper .message {
    --msg: var(--gh-muted);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
    align-items: start;
    animation: ghiceste-in .35s var(--gh-ease);
}

.ghiceste-wrapper #mesaj-corect {
    --msg: var(--gh-blue);
}

.ghiceste-wrapper #mesaj-mai-mic {
    --msg: var(--gh-blue);
}

.ghiceste-wrapper #mesaj-mai-mare {
    --msg: var(--gh-accent);
}

.ghiceste-wrapper .message .icon {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--msg) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--msg) 40%, transparent);
    color: var(--msg);
    font-size: 0;
    line-height: 0;
}

.ghiceste-wrapper .message .content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 2px 0 0 0;
    width: auto;
}

.ghiceste-wrapper .message .button {
    grid-column: 2;
    grid-row: 2;
}

.ghiceste-wrapper .message .title {
    font-family: var(--gh-ff-title);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
}

.ghiceste-wrapper .message .text {
    margin-top: 8px;
    font-family: var(--gh-ff);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--gh-muted);
}

.ghiceste-wrapper .message .text b {
    font-weight: 700;
    color: #fff;
}

/* optiunea dupa o greseala: data-bf-option pe .ghiceste-wrapper (ghicesteSlider.js) */
.ghiceste-wrapper .message .bf-opt {
    display: none;
}

.ghiceste-wrapper:not([data-bf-option]) .message .bf-opt-wait,
.ghiceste-wrapper[data-bf-option=""] .message .bf-opt-wait,
.ghiceste-wrapper[data-bf-option="newsletter"] .message .bf-opt-newsletter,
.ghiceste-wrapper[data-bf-option="subscriber"] .message .bf-opt-subscriber,
.ghiceste-wrapper[data-bf-option="thanks"] .message .bf-opt-thanks,
.ghiceste-wrapper[data-bf-option="share"] .message .bf-opt-share,
.ghiceste-wrapper[data-bf-option="contact"] .message .bf-opt-contact {
    display: block;
}

/* newsletter (prima greseala): campul de email + butonul, pe acelasi rand */
.ghiceste-wrapper .bf-newsletter {
    display: flex;
    gap: 8px;
    margin: 0;
    max-width: 440px;
}

.ghiceste-wrapper .bf-newsletter__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    box-sizing: border-box;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    color: var(--gh-text);
    font-family: var(--gh-ff);
    font-size: 15px;
    outline: none;
}

.ghiceste-wrapper .bf-newsletter__input::placeholder {
    color: var(--gh-muted);
    opacity: 1;
}

.ghiceste-wrapper .bf-newsletter__input:focus {
    box-shadow: inset 0 0 0 1px var(--gh-accent);
}

.ghiceste-wrapper .bf-newsletter .buton-mare {
    flex: none;
    min-height: 46px;
    padding: 0 20px;
    font-size: 18px;
}

.ghiceste-wrapper .bf-newsletter.is-busy .buton-mare,
.ghiceste-wrapper .buton-mare.is-busy {
    opacity: .6;
    pointer-events: none;
}

.ghiceste-wrapper .bf-newsletter__error {
    margin-top: 6px;
    font-family: var(--gh-ff);
    font-size: 13px;
    line-height: 1.4;
    color: var(--gh-accent);
}

.ghiceste-wrapper .bf-newsletter__error:empty {
    display: none;
}

/* multumirea dupa abonare / pentru abonati, inainte sa revina slider-ul */
.ghiceste-wrapper .message .bf-opt-thanks {
    color: var(--gh-text);
    font-weight: 600;
}

.ghiceste-wrapper .bf-time-left {
    font-weight: 700;
    white-space: nowrap;
    color: var(--gh-text);
}

@media (max-width: 640px) {
    .ghiceste-wrapper .message .button {
        grid-column: 1 / -1;
    }

    .ghiceste-wrapper .message .button .buton-mare {
        width: 100%;
    }

    .ghiceste-wrapper .bf-newsletter {
        flex-direction: column;
        max-width: none;
    }
}

@keyframes ghiceste-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   7. Stari (CSS-only: citim ce mesaj e vizibil, nu avem nevoie de clase din JS)
   ========================================================================== */

/* ghicit: totul trece pe albastru (culoarea pretului de Black Friday) */
.ghiceste-wrapper:has(#mesaj-corect:not([style*="none"])) {
    --gh-hi: var(--gh-blue);
}

.ghiceste-wrapper:has(#mesaj-corect:not([style*="none"])) .noUi-handle::before {
    background: var(--gh-blue);
}

.ghiceste-wrapper:has(#mesaj-corect:not([style*="none"])) .noUi-handle::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
    background-size: 18px 18px;
}

/* cooldown: cadranul si scala devin neutre, ca sa nu para active */
.ghiceste-wrapper:has(:is(#mesaj-mai-mic, #mesaj-mai-mare, #mesaj-mai-tarziu):not([style*="none"])) {
    --gh-hi: var(--gh-muted);
}

.ghiceste-wrapper:has(:is(#mesaj-mai-mic, #mesaj-mai-mare, #mesaj-mai-tarziu, #mesaj-corect):not([style*="none"])) .circular-ext {
    cursor: default;
}

/* ==========================================================================
   8. Linia de informare
   ========================================================================== */

.ghiceste-wrapper .bf-info {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gh-border);
    font-family: var(--gh-ff-small);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: var(--gh-muted);
}

.ghiceste-wrapper .bf-info a {
    color: var(--gh-accent);
}

.ghiceste-wrapper .bf-info a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   9. Loading (overlay-ul global .overlayer-inside, calmat in interiorul cardului)
   ========================================================================== */

.ghiceste-wrapper > .overlayer-inside {
    background: rgba(33, 33, 33, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: 2px;
}

.ghiceste-wrapper > .overlayer-inside::before {
    display: none;
}

.ghiceste-wrapper > .overlayer-inside::after {
    inset: auto;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(255, 255, 255, .16);
    border-top-color: var(--gh-accent);
    border-radius: 50%;
    background: none;
    opacity: 1;
    animation: ghiceste-spin .8s linear infinite;
}

@keyframes ghiceste-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   10. Butonul din buy-box dupa ce ai ghicit pretul
   JS (ghicesteSlider.js) transforma .btn-4 in .buton-cumpara-bf; dupa reload
   il randeaza direct cartItem.phtml cu aceeasi clasa si un style inline.
   ========================================================================== */

.buton-mare.buton-cumpara-bf,
a.buton-mare.buton-cumpara-bf:link,
a.buton-mare.buton-cumpara-bf:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    box-sizing: border-box;
    border: 0;
    border-radius: 2px;
    background: var(--clr-blue, #49B2E3) !important;
    color: #fff !important;
    font-family: var(--ff-hg, 'hanken-grotesk', Arial, sans-serif);
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: filter .15s ease;
}

.buton-mare.buton-cumpara-bf:hover {
    filter: brightness(1.08);
}

.buton-mare.buton-cumpara-bf .cos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.buton-mare.buton-cumpara-bf .cos br {
    display: none;
}

.buton-mare.buton-cumpara-bf .price-bf {
    font-family: var(--ff-aga, 'alternate-gothic-atf', Impact, sans-serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
}

/* ==========================================================================
   11. Butonul "Ghiceste acum pretul de Black Friday" (productGhicesteButon)
   ========================================================================== */

.buton-bf,
a.buton-bf:link,
a.buton-bf:visited {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px;
    border-radius: 2px;
    background: var(--clr-orange, #F16A52);
    color: #fff !important;
    font-family: var(--ff-aga, 'alternate-gothic-atf', Impact, sans-serif);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: filter .15s ease;
}

.buton-bf:hover {
    filter: brightness(1.08);
}

/* ==========================================================================
   12. Accesibilitate: fara miscare daca utilizatorul o cere
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ghiceste-wrapper #slider-guide svg,
    .ghiceste-wrapper .message,
    .ghiceste-wrapper .noUi-handle::before {
        animation: none !important;
    }

    .ghiceste-wrapper .circular-int {
        transition: none;
    }
}

/* ==========================================================================
   13. Joc rapid: "Potriveste perechile"
   Se deschide peste card (ghicesteGame.js) dupa o ghicire gresita. Nu se poate
   pierde; e doar un motiv ca utilizatorul sa mai petreaca timp pe pagina.
   ========================================================================== */

.ghiceste-wrapper {
    position: relative;
}

.ghiceste-game {
    --gcard: 84px;
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 32px 20px 22px;
    box-sizing: border-box;
    overflow: auto;
    background: #1b1b1d;
    opacity: 0;
    visibility: hidden;
    outline: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

.ghiceste-game.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease;
}

.ghiceste-game .ghiceste-game__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    color: var(--gh-text);
    cursor: pointer;
    transition: box-shadow .15s ease, background-color .15s ease;
}

.ghiceste-game .ghiceste-game__close:hover {
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px #fff;
}

.ghiceste-game .ghiceste-game__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ghiceste-game__head {
    font-family: var(--gh-ff-title);
    text-transform: uppercase;
    color: #fff;
}

.ghiceste-game__title {
    display: block;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: .01em;
}

.ghiceste-game__lead {
    display: block;
    max-width: 42ch;
    margin-top: 14px;
    font-family: var(--gh-ff);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gh-muted);
}

/* titlul / textul se schimba dupa stare: joc -> castigat -> eroare la reset */
.ghiceste-game .is-win,
.ghiceste-game .is-err {
    display: none;
}

.ghiceste-game.is-won .is-play,
.ghiceste-game.is-error .is-play {
    display: none;
}

.ghiceste-game.is-won .is-win,
.ghiceste-game.is-error .is-err {
    display: inline;
}

.ghiceste-game.is-won .ghiceste-game__title {
    color: var(--gh-blue);
}

.ghiceste-game.is-error .ghiceste-game__title {
    color: var(--gh-accent);
}

.ghiceste-game__progress {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    font-family: var(--gh-ff-small);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gh-muted);
}

.ghiceste-game__found {
    font-weight: 700;
    color: #fff;
}

.ghiceste-game__bar {
    position: relative;
    flex: 1;
    max-width: 160px;
    height: 4px;
    border-radius: 2px;
    background: var(--gh-track);
    overflow: hidden;
}

.ghiceste-game__bar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: calc(var(--found, 0) / var(--pairs, 6) * 100%);
    border-radius: 2px;
    background: var(--gh-blue);
    transition: width .3s var(--gh-ease);
}

.ghiceste-game__peekmsg {
    display: none;
    color: var(--gh-accent);
}

.ghiceste-game.is-peek .ghiceste-game__peekmsg {
    display: inline;
}

.ghiceste-game.is-peek .ghiceste-game__count,
.ghiceste-game.is-peek .ghiceste-game__bar {
    display: none;
}

/* cartile */
.ghiceste-game__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

.ghiceste-game .gcard {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    perspective: 700px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ghiceste-game .gcard:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.ghiceste-game .gcard__inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform .45s var(--gh-ease);
}

.ghiceste-game .gcard__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* spatele cartii: motivul rotitei (inel + punct portocaliu) */
.ghiceste-game .gcard__back {
    background: radial-gradient(circle at 50% 28%, #3b3c41 0%, #26272a 55%, #1b1b1d 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .45);
    transition: filter .15s ease;
}

.ghiceste-game .gcard__back::before {
    content: "";
    position: absolute;
    inset: 27%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .12);
}

.ghiceste-game .gcard__back::after {
    content: "";
    position: absolute;
    top: calc(27% - 3px);
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--gh-accent);
}

.ghiceste-game .gcard:not(.is-flipped):not(.is-matched):hover .gcard__back {
    filter: brightness(1.2);
}

.ghiceste-game .gcard__front {
    background: var(--clr-white-background, #F5F5F5);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
    color: #212121;
    transform: rotateY(180deg);
}

.ghiceste-game .gcard__front svg {
    width: 58%;
    height: 58%;
    stroke-width: 2.6;
}

.ghiceste-game .gcard.is-flipped .gcard__inner,
.ghiceste-game .gcard.is-matched .gcard__inner,
.ghiceste-game.is-peek .gcard .gcard__inner {
    transform: rotateY(180deg);
}

.ghiceste-game .gcard.is-matched .gcard__front,
.ghiceste-game.is-won .gcard .gcard__front {
    background: var(--gh-blue);
    color: #fff;
}

.ghiceste-game .gcard.is-matched .gcard__inner {
    animation: gcard-pop .5s var(--gh-ease);
}

.ghiceste-game .gcard.is-miss .gcard__inner {
    animation: gcard-shake .45s ease;
}

@keyframes gcard-pop {
    0% { transform: rotateY(180deg) scale(1); }
    40% { transform: rotateY(180deg) scale(1.1); }
    100% { transform: rotateY(180deg) scale(1); }
}

@keyframes gcard-shake {
    0%, 100% { transform: rotateY(180deg) translateX(0); }
    25% { transform: rotateY(180deg) translateX(-5px); }
    75% { transform: rotateY(180deg) translateX(5px); }
}

/* tableta + desktop: titlul in stanga, cartile in dreapta */
@media (min-width: 641px) {
    .ghiceste-game {
        --gcard: 88px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 40px;
        padding: 32px;
    }

    .ghiceste-game__title {
        font-size: 40px;
    }

    .ghiceste-game__grid {
        gap: 12px;
        width: calc(4 * var(--gcard) + 3 * 12px);
        max-width: none;
        margin: 0;
    }
}

@media (min-width: 1031px) {
    .ghiceste-game {
        --gcard: 92px;
        column-gap: 56px;
        padding: 36px 48px;
    }

    .ghiceste-game__title {
        font-size: clamp(38px, 3.9vw, 46px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ghiceste-game,
    .ghiceste-game.is-open {
        transition: none;
    }

    .ghiceste-game .gcard__inner {
        transition: none;
        animation: none !important;
        transform: none !important;
    }

    .ghiceste-game .gcard__front {
        opacity: 0;
        transform: none;
    }

    .ghiceste-game .gcard.is-flipped .gcard__front,
    .ghiceste-game .gcard.is-matched .gcard__front,
    .ghiceste-game.is-peek .gcard .gcard__front {
        opacity: 1;
    }

    .ghiceste-game .gcard.is-flipped .gcard__back,
    .ghiceste-game .gcard.is-matched .gcard__back,
    .ghiceste-game.is-peek .gcard .gcard__back {
        opacity: 0;
    }
}

/* ==========================================================================
   14. LEGACY - reguli globale pe pagina de produs, mutate aici neschimbate
   (erau in blocul @media al vechiului ghiceste.css; nu tin de widget, dar
   afecteaza layout-ul pe mobil, asa ca le pastram exact cum erau)
   ========================================================================== */

@media (max-width: 640px), (max-device-width: 640px) {
    .dr {
        float: none !important;
    }

    #content #detalii .col.w425 .actiuni {
        margin-bottom: 20px;
    }

    #content #detalii .col.w425 .addtocartarea {
        text-align: center;
    }

    #content #detalii .col.w425 .addtocartarea .mainproductprice {
        float: none;
        display: inline-block;
    }
}