/* ── Oldal fejléc (checkout-tal konzisztens) ── */
.cart-page-header {
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}

.cart-page-title {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 30px);
    text-transform: uppercase;
    color: var(--text);
}

/* ============================================================
   kosar.css – Kosár oldal stílusok
   Osztályok a kosar.php HTML struktúrájához igazítva
   ============================================================ */

/* ── Layout ── */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
    padding-bottom: 60px;
}

@media (max-width: 900px) {
    .cart-layout { grid-template-columns: 1fr; }
}

/* A bal oszlop rács-elem, a rács-elemek alapértelmezett min-width-je pedig
   `auto` – vagyis NEM zsugorodhatnak a tartalmuk minimális szélessége alá.
   Emiatt egyetlen nem törhető elem (pl. egy white-space:nowrap felirat)
   szélesebbre feszítette az egész oszlopot, mint a kijelző, és a kosár
   oldal vízszintesen görgethetővé vált keskeny telefonon.
   A min-width:0 engedi, hogy az oszlop a kijelzőhöz igazodjon; a belső
   elemek a saját ellipszis/törés szabályaik szerint viselkednek.
   Mérve 320px-en: nélküle 419px görgetési szélesség, vele pontosan 320px. */
.cart-main { min-width: 0; }

/* ── Üres kosár ── */
.cart-empty {
    padding: 64px 0 80px;
    text-align: center;
}

.cart-empty__icon {
    color: var(--text-4);
    margin-bottom: 20px;
}

.cart-empty__title {
    font-family: var(--fd);
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 10px;
}

.cart-empty__desc {
    color: var(--text-3);
    font-size: 15px;
    margin-bottom: 28px;
}

/* ── Ingyenes szállítás progress ── */
.shipping-progress-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 18px;
    margin-bottom: 20px;
}

.shipping-progress-bar__track {
    height: 6px;
    background: var(--border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}

.shipping-progress-bar__fill {
    display: block;
    height: 6px;
    background: var(--gold);
    border-radius: 99px;
    transition: width 0.6s ease 0.1s;
    width: 0%;
    min-height: 6px;
}

.shipping-progress-bar__text {
    font-size: 13px;
    color: var(--text-3);
    margin: 0;
}

.shipping-progress-bar__text strong {
    color: var(--gold);
}

/* ── Küszöb-mérföldkövek a sáv fölött (2026.09.20) ──────────────────
   Az ikonok abszolút pozícióban ülnek a sáv fölött, a saját küszöbértékük
   arányában (pl. 20 000 / 40 000 = 50%). A pozíciót a kosar.js számolja,
   itt csak a megjelenés van. A szélső ikonokat befelé húzzuk, hogy ne
   lógjanak ki a sáv vonalából. */
.ms-wrap {
    /* A mérföldkő ikon + címke együtt 26px magas; a 30px-es térköz
       4px levegőt hagy a sáv fölött, hogy a címke ne feküdjön rá. */
    position: relative;
    padding-top: 30px;
}

.ms-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    pointer-events: none;
}

.ms-marker {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1;
}

.ms-marker--end   { transform: translateX(-100%); align-items: flex-end; }
.ms-marker--start { transform: translateX(0);     align-items: flex-start; }

.ms-marker__icon {
    font-size: 15px;
    line-height: 1;
    filter: grayscale(1);
    opacity: .4;
    transition: opacity .3s var(--ease), filter .3s var(--ease);
}

.ms-marker__label {
    font-family: var(--fm);
    font-size: 10px;
    color: var(--text-4);
    white-space: nowrap;
}

.ms-marker.is-reached .ms-marker__icon  { filter: none; opacity: 1; }
.ms-marker.is-reached .ms-marker__label { color: var(--gold); font-weight: 600; }

/* ── Ajándék doboz ────────────────────────────────────────────────── */
.gift-box {
    border: 1px dashed var(--gold);
    background: var(--gold-dim);
    border-radius: var(--r-md);
    padding: 14px 16px;
    margin: 4px 0 18px;
}

.gift-box__head p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-2);
}

.gift-box__earned strong,
.gift-box__pending strong {
    color: var(--gold);
}

.gift-box__toggle {
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 600;
    color: var(--gold);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.gift-box__toggle:hover { color: var(--gold-h); }

.gift-options {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.gift-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.gift-opt.is-selected { border-color: var(--gold); }

.gift-opt__thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: contain;
    border-radius: var(--r-xs);
    background: var(--surface-3);
}

.gift-opt__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.gift-opt__main  { flex: 1; min-width: 0; }

.gift-opt__name {
    display: block;
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gift-opt__value {
    display: block;
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

.gift-opt__value strong { color: var(--green); }

.gift-opt__btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--gold);
    background: none;
    color: var(--gold);
    font-family: var(--fb);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--t);
}

.gift-opt__btn:hover { background: var(--gold); color: #fff; }

.gift-opt__badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--green);
    white-space: nowrap;
}

/* Keskeny kijelzőn a küszöb-címkék elférnek ugyan, de zsúfolnak –
   az IKONOK viszont maradnak, mert azok hordozzák az üzenetet. */
@media (max-width: 480px) {
    .ms-marker__label { display: none; }
    .ms-wrap          { padding-top: 22px; }
    .gift-opt__thumb  { width: 38px; height: 38px; flex-basis: 38px; }
    .gift-opt__name   { font-size: 12px; }
}

/* ── Kosár fejléc (asztali oszlopok) ── */
.cart-header {
    display: grid;
    grid-template-columns: 80px 1fr 140px 100px;
    gap: 16px;
    padding: 0 12px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-4);
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

@media (max-width: 640px) {
    .cart-header { display: none; }
}

/* ── Tételsor ── */
.cart-row {
    display: grid;
    grid-template-columns: 80px 1fr 140px 100px;
    gap: 16px;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}

.cart-row:hover {
    background: var(--surface);
}

/* ── Időközben elfogyott termék (2026.09.24) ──────────────────────
   MIÉRT ERŐSEBB A JELZÉS, MINT EDDIG:
   A tartós kosárral (30 napos sz_cart süti) a vásárló napokkal később is
   visszatérhet a kosarához – addigra egy termék státusza bőven változhat.
   Eddig csak `opacity: .6` jelezte, a Pénztár gomb pedig letiltva, az
   indoklás viszont egy `title` tooltipben volt, ami MOBILON NEM LÉTEZIK
   (nincs hover). A vásárló csak annyit látott, hogy a gomb nem működik.

   Most a sor halvány piros háttérrel és elmosott termékadattal jelzi, hogy
   ez a tétel kiesett. A már meglévő piros magyarázó sáv (.cart-item__
   unavailable) változatlanul ott van, és a tételt a vásárló a szokásos
   módon törölheti – nem kell hozzá új gomb, sem új API hívás. */
.cart-row--unavailable {
    opacity: .75;
    background: rgba(229, 62, 62, .05);
    border-left: 3px solid rgba(229, 62, 62, .45);
}

/* A termék képe és neve elmosódik – ránézésre látszik, hogy ez a tétel
   már nem él. A magyarázó sáv és a törlés gomb ÉLES marad, különben pont
   azt nem lehetne elolvasni, illetve megnyomni, ami a megoldás. */
.cart-row--unavailable .cart-item__thumb,
.cart-row--unavailable .cart-item__name {
    filter: blur(1.5px);
    opacity: .7;
}

.cart-row--unavailable .cart-item__unavailable,
.cart-row--unavailable .cart-item__remove {
    filter: none;
    opacity: 1;
}

@media (max-width: 640px) {
    .cart-row {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }
}

/* Termék kép */
.cart-item__img-link {
    display: block;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 1;
}

.cart-item__thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.cart-item__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    color: var(--text-4);
    width: 80px;
    height: 80px;
}

/* Termék infó */
.cart-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cart-item__name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cart-item__name:hover {
    color: var(--gold);
}

.cart-item__variant {
    font-size: 12px;
    color: var(--text-4);
    background: var(--bg-2);
    border-radius: var(--r-sm);
    padding: 2px 7px;
    display: inline-block;
    width: fit-content;
}

.cart-item__unit-price {
    font-size: 12px;
    color: var(--text-4);
}

.cart-item__unavailable {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--red, #e53e3e);
    background: rgba(229,62,62,.08);
    border-radius: var(--r-sm);
    padding: 4px 8px;
    width: fit-content;
}

/* Mennyiség selector */
.qty-selector {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    width: fit-content;
}

.qty-btn {
    background: var(--surface);
    border: none;
    width: 32px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-3);
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.qty-btn:hover:not(:disabled) {
    background: var(--bg-2);
    color: var(--text);
}

.qty-btn:disabled {
    opacity: .35;
    cursor: default;
}

.qty-input {
    width: 48px;
    height: 36px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: var(--bg);
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.cart-item__qty-disabled {
    font-size: 14px;
    color: var(--text-4);
}

/* Összeg + törlés */
.cart-item__controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cart-item__subtotal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* ── Tétel ár wrapper – bruttó fölött, nettó alatta (jogszabályi infó) ──
   A bruttó ár marad domináns/hangsúlyos; a nettó kis, halvány sor
   közvetlenül ALATTA jelenik meg, NEM mellette – szűk hely miatt
   (lásd kosar.js renderCartRow()). */
.cart-item__price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.cart-item__price {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    white-space: nowrap;
}

.cart-item__price-net {
    font-family: var(--fm, monospace);
    font-size: 11px;
    color: var(--text-4);
    white-space: nowrap;
}

.cart-item__price--unavailable {
    color: var(--text-4);
}

.cart-item__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-4);
    padding: 4px;
    border-radius: var(--r-sm);
    transition: color .15s, background .15s;
    display: flex;
    align-items: center;
}

.cart-item__remove:hover {
    color: var(--red, #e53e3e);
    background: rgba(229,62,62,.08);
}

/* Vásárlás folytatása */
.cart-continue {
    padding: 16px 12px 0;
}

.cart-continue__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-3);
    text-decoration: none;
    transition: color .15s;
}

.cart-continue__link:hover {
    color: var(--gold);
}

/* ── Skeleton betöltés ── */
.cart-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cart-row--skeleton {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 12px;
    border-bottom: 1px solid var(--border);
}

.skeleton-box {
    background: linear-gradient(90deg, var(--border) 25%, var(--bg-2) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: var(--r-sm);
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Összesítő kártya (jobb oldal) ── */
.cart-summary {
    position: sticky;
    top: calc(var(--header-h, 70px) + 16px);
}

.summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 22px;
    box-shadow: var(--sh-sm);
}

.summary-card__title {
    font-family: var(--fd);
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

/* ── Nettó / ÁFA / bruttó bontás blokk ──────────────────────────────
   A summary-card__title ÉS a summary-rows KÖZÖTT jelenik meg, önálló
   blokként, enyhén elválasztva alsó border-rel. kosar.js tölti fel
   (renderNetVatBlock()) - ha az adat hiányos (vegyes vagy hiányzó
   vat_rate egy tételnél), a kosar.js elrejti ezt a blokkot, ezért
   itt [hidden] kezelést is biztosítunk. */
#summaryNetVatBlock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--border);
}
#summaryNetVatBlock[hidden] { display: none; }

.summary-row--net,
.summary-row--vat {
    color: var(--text-4);
    font-size: 12px;
}
.summary-row--gross {
    color: var(--text-2);
    font-weight: 600;
    font-size: 13px;
}

.summary-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-3);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--fd);
    font-weight: 800;
    font-size: 18px;
    color: var(--text);
    padding: 14px 0;
    border-top: 2px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.summary-total__amount {
    color: var(--gold);
}

.summary-vat-note {
    font-size: 11px;
    color: var(--text-4);
    margin-bottom: 18px;
}

.free-shipping {
    color: var(--green, #38a169);
    font-weight: 600;
}

.text-red {
    color: var(--red, #e53e3e);
}

.text-green {
    color: var(--green, #38a169);
}

/* Kupon mező */
.coupon-area {
    margin-bottom: 18px;
}

.coupon-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.coupon-input-group {
    display: flex;
    gap: 8px;
}

.coupon-input {
    flex: 1;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 12px;
    font-size: 13px;
    color: var(--text);
    background: var(--bg);
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: border-color .15s;
}

.coupon-input:focus {
    outline: none;
    border-color: var(--gold);
}

.coupon-error {
    font-size: 12px;
    color: var(--red, #e53e3e);
    margin-top: 6px;
    margin-bottom: 0;
}

.coupon-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--gold-rgb, 184,125,30), .08);
    border: 1px solid var(--gold);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-top: 8px;
}

.coupon-badge__info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold);
}

.coupon-code {
    font-weight: 700;
    font-size: 13px;
    display: block;
}

.coupon-type {
    font-size: 11px;
    color: var(--text-3);
    display: block;
}

.coupon-badge__remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-4);
    font-size: 14px;
    padding: 2px 6px;
    border-radius: var(--r-sm);
    transition: color .15s, background .15s;
}

.coupon-badge__remove:hover {
    color: var(--red, #e53e3e);
    background: rgba(229,62,62,.08);
}
/* VIP kedvezmény */
.summary-vip-badge { width: 104px; height: auto; display: block; flex-shrink: 0; }
.text-vip { color: #7c3aed; font-weight: 700; }

/* A VIP-sor kicsit magasabb a badge miatt – középre igazítjuk, hogy rendezett legyen */
#summaryVipRow { align-items: center; }

@media (max-width: 640px) {
    .summary-vip-badge { width: 96px; }
}

/* Checkout gomb */
.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
    text-decoration: none;
}

.cart-checkout-btn:disabled,
.cart-checkout-btn[disabled],
.cart-checkout-btn.is-disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Bizalmi sáv */
.summary-trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-4);
}

.trust-item svg {
    flex-shrink: 0;
}


/* ── Minimum rendelési összeg értesítő ── */
.min-order-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    margin-bottom: 12px;
    background: rgba(245, 158, 11, .1);
    border: 1px solid rgba(245, 158, 11, .4);
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}

/* hidden attribútum felülírja a display:flex-et */
.min-order-notice[hidden] {
    display: none !important;
}

.min-order-notice svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--gold);
}

/* A szöveg span kitölti a maradék helyet az SVG mellett */
.min-order-notice span {
    flex: 1;
    min-width: 0;
}

.min-order-notice strong {
    color: var(--gold);
    white-space: nowrap;
}

/* ── Btn spinner animáció ── */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

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

/* ============================================================
   5. fázis (2026.10.22): küszöb-sáv új mérföldkövei, „Vendégként ennyit
   hagysz itt” blokk, kosár-pörgető. Az animációk az effects.css-ben vannak
   (vészkapcsolóval kikapcsolhatók) – itt a statikus kinézet és a hover.
   ============================================================ */
.ms-marker--minor .ms-marker__icon { font-size: 13px; }
@media (max-width: 640px) {
    .ms-marker--minor .ms-marker__label { display: none; }
}

/* ── Vendég-veszteség / pont-előnézet ── */
.loyalty-nudge {
    margin-top: 14px;
    padding: 16px 16px 14px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
}
.loyalty-nudge--guest { border-color: rgba(192,57,43,.28); background: linear-gradient(160deg, rgba(192,57,43,.05), var(--surface) 55%); }
.loyalty-nudge--member { border-color: rgba(var(--gold-rgb),.35); background: linear-gradient(160deg, rgba(var(--gold-rgb),.08), var(--surface) 55%); }
.ln-head { margin: 0 0 10px; font-size: 13px; color: var(--text-3); }
.ln-points { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ln-num { display: block; font-family: var(--fd); font-size: 26px; line-height: 1.05; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.loyalty-nudge--member .ln-num { color: var(--gold); }
.ln-sub { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ln-sad { flex: none; overflow: visible; }
.ln-sad__face { fill: #fcd34d; stroke: #b45309; stroke-width: 1.5; }
.ln-sad__eye { fill: #5b3a0a; }
.ln-sad__brow, .ln-sad__mouth { fill: none; stroke: #5b3a0a; stroke-width: 2.4; stroke-linecap: round; }
.ln-sad__tear { fill: #60a5fa; }
.ln-coin {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe7a3, var(--gold) 60%, #8a5a10);
    color: #5a3a06; font-family: var(--fd); font-weight: 800; font-size: 20px;
    box-shadow: 0 3px 10px rgba(var(--gold-rgb), .45), inset 0 -3px 0 rgba(0,0,0,.15);
}
/* A kupon: perforált szelvény. Vendégnek szürke – maga a szín mondja, hogy nem jár. */
.ln-coupon {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 2px dashed rgba(var(--gold-rgb), .7);
    border-radius: 10px;
    background: rgba(var(--gold-rgb), .08);
    color: var(--gold);
    overflow: hidden;
    transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.ln-coupon::before, .ln-coupon::after {
    content: ''; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px;
    border-radius: 50%; background: var(--surface); border: 2px dashed rgba(var(--gold-rgb), .7);
}
.ln-coupon::before { left: -10px; }
.ln-coupon::after { right: -10px; }
.ln-coupon__body b { display: block; font-family: var(--fd); font-size: 20px; letter-spacing: .5px; text-transform: uppercase; }
.ln-coupon__body span { font-size: 12px; color: var(--text-3); }
.loyalty-nudge--guest .ln-coupon { filter: grayscale(1); opacity: .55; cursor: default; }
.ln-coupon__hover {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(var(--gold-rgb), .92); color: #fff; font-family: var(--fd); font-weight: 800; font-size: 16px;
    letter-spacing: .5px; text-transform: uppercase; opacity: 0; transition: opacity .25s var(--ease);
}
[data-theme="dark"] .ln-coupon__hover { color: #000; }
@media (hover: hover) {
    .loyalty-nudge--guest .ln-coupon:hover { filter: none; opacity: 1; }
    .loyalty-nudge--guest .ln-coupon:hover .ln-coupon__hover { opacity: 1; }
}
.ln-ticket { font-size: 24px; }
.ln-next { margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.ln-next strong { color: var(--gold); white-space: nowrap; }
.ln-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Lodix (3. fázis): a fiók általános előnyei vendégnek (kivezetett hűségprogram) */
.loyalty-nudge--account { border-color: rgba(18,115,201,.28); background: linear-gradient(160deg, rgba(18,115,201,.06), var(--surface) 55%); }
.ln-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.ln-perks li { position: relative; padding-left: 22px; }
.ln-perks li::before { content: '✓'; position: absolute; left: 2px; top: 0; font-weight: 800; color: #1273C9; }
.ln-actions .btn--primary { flex: 1 1 200px; justify-content: center; }

/* ── Kosár-pörgető ── */
.cheap-picks {
    margin: 4px 0 22px;
    padding: 14px 0 12px;
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid rgba(var(--gold-rgb), .4);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}
.cheap-picks__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 10px; flex-wrap: wrap; }
.cheap-picks__title { margin: 0; font-family: var(--fd); font-size: 18px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text); }
.cheap-picks__title span { color: var(--gold); white-space: nowrap; }
.cheap-picks__navs { display: flex; gap: 6px; }
.cp-nav {
    min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-sm); cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: 18px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: var(--t);
}
.cp-nav:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.cp-nav--spin { font-family: var(--fd); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); border-color: rgba(var(--gold-rgb), .45); }
.cp-lever { display: inline-block; font-size: 16px; }
.cheap-picks__reel {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cheap-picks__track { display: flex; gap: 10px; width: max-content; padding: 4px 0 6px; will-change: transform; }
.cp-card {
    flex: 0 0 138px; display: flex; flex-direction: column; gap: 4px; padding: 8px;
    border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
    transition: border-color .3s, transform .35s var(--ease), box-shadow .3s;
}
.cp-card.is-center { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .6), 0 8px 20px rgba(var(--gold-rgb), .2); }
.cp-card__img { display: grid; place-items: center; height: 84px; border-radius: 8px; background: #fff; overflow: hidden; }
.cp-card__img img { width: 100%; height: 100%; object-fit: contain; }
.cp-card__ph { font-size: 28px; opacity: .35; }
.cp-card__name { font-size: 12px; line-height: 1.3; color: var(--text); text-decoration: none; height: 31px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cp-card__name:hover { color: var(--gold); }
.cp-card__price { font-family: var(--fd); font-weight: 800; font-size: 16px; color: var(--gold); }
.cp-card__price s { font-family: var(--fm); font-size: 9px; font-weight: 400; color: var(--text-4); }
.cp-card__add {
    margin-top: auto; padding: 6px 0; border-radius: var(--r-sm); cursor: pointer;
    background: rgba(var(--gold-rgb), .12); border: 1px solid rgba(var(--gold-rgb), .45); color: var(--gold);
    font-family: var(--fd); font-weight: 800; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; transition: var(--t);
}
.cp-card__add:hover { background: var(--gold); color: #fff; }
.cp-card__add.is-added { background: var(--green); border-color: var(--green); color: #fff; }
.cheap-picks__note { margin: 6px 16px 0; font-size: 11.5px; color: var(--text-4); min-height: 1.2em; }
.cheap-picks.is-spinning .cp-card { transform: skewX(-6deg) scale(.97); pointer-events: none; }
.cheap-picks.is-leaving { opacity: 0; transform: scale(.97); transition: opacity .4s var(--ease), transform .4s var(--ease); }
@media (max-width: 640px) {
    .cp-spin-txt { display: none; }
    .cheap-picks__title { font-size: 16px; }
}