/* ============================================================
   penztar.css – Checkout / Pénztár oldal stílusok
   ============================================================ */

/* ── Oldal wrapper ── */
.checkout-page {
    background: var(--bg);
    min-height: 100vh;
    padding-bottom: 60px;
}

/* ── Fejléc ── */
.checkout-header {
    padding: 20px 0 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}

.checkout-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-3);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color .15s;
}
.checkout-back:hover { color: var(--gold); }

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

/* ── Lépés indikátor ── */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    gap: 4px;
}

.checkout-step {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity .2s;
}

.step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #d0d0d0;
    color: #888;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, color .25s, box-shadow .25s;
    flex-shrink: 0;
}

/* Aktív lépés – tömör arany, fehér szám */
.checkout-step.active .step-num {
    background: var(--gold) !important;
    color: #fff !important;
    border: 3px solid var(--gold);
    box-shadow: 0 0 0 3px rgba(184,125,30,.25);
}

/* Kész lépés – zöld */
.checkout-step.done .step-num {
    background: var(--green, #38a169);
    color: #fff;
    box-shadow: none;
}

.step-label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    transition: color .2s;
}
.checkout-step.active .step-label { color: var(--text); font-weight: 700; }
.checkout-step.done .step-label   { color: var(--text-3); }

.step-divider {
    width: 32px;
    height: 2px;
    background: #d0d0d0;
    margin: 0 4px;
    flex-shrink: 0;
    border-radius: 2px;
    transition: background .2s;
}

@media (max-width: 640px) {
    .step-label { display: none; }
    .step-divider { width: 16px; }
}

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

@media (max-width: 960px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    .checkout-sidebar {
        order: -1;
    }

    /* ── Mobil vízszintes görgetés megszüntetése ──────────────────────────
       A grid-oszlopok alapból min-width:auto-k, ezért a tartalom (pl. hosszú
       terméknév) szét tudja tolni a kártyát a viewporton túlra – iOS Safarin
       a body{overflow-x:hidden} ezt nem fogja vissza. A min-width:0 engedi a
       oszlopokat a rendelkezésre álló szélességre zsugorodni, a max-width:100%
       pedig biztosítja, hogy egyetlen kártya se legyen szélesebb a konténernél
       (= a header szélességénél). Asztali nézetet nem érinti. */
    .checkout-main,
    .checkout-sidebar { min-width: 0; }

    .checkout-summary-card,
    .checkout-panel { max-width: 100%; }

    /* Hosszú terméknevek mobilon TÖRJENEK több sorba, ne csonkolódjanak egy
       sorba (asztalin marad az ellipsis – ott elég a 360px-es sidebar). Így a
       név sosem tolja szét a kártyát vízszintesen. */
    .checkout-item__name {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* ── Panel (lépés kártya) ── */
.checkout-panel {
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 28px;
    box-shadow: var(--sh-sm);
    margin-bottom: 16px;
}
.checkout-panel.active { display: block; }

.checkout-panel__title {
    font-family: var(--fd);
    font-weight: 800;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.panel-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.checkout-panel__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ── Form segédosztályok ── */
.checkout-section-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-4);
    margin-bottom: 12px;
}

.checkout-address-form { margin-top: 20px; }
.checkout-address-form.hidden { display: none; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.form-row--3 { grid-template-columns: 120px 1fr; }
.form-group--grow { flex: 1; }

.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.form-label--required::after {
    content: ' *';
    color: var(--red, #e53e3e);
}

.form-control {
    width: 100%;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb, 184,125,30), .15);
}
.form-control--error {
    border-color: var(--red, #e53e3e) !important;
}

textarea.form-control {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
}

.form-hint {
    font-size: 12px;
    color: var(--text-4);
    margin-top: 4px;
}

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

.form-error {
    font-size: 13px;
    color: var(--red, #e53e3e);
    margin-top: 6px;
}
.form-error.hidden { display: none; }

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-2);
    margin: 12px 0;
}
.form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--gold);
}
.form-check--lg { font-size: 14px; }

/* ── Vendég login hint ── */
.checkout-login-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-3);
    background: var(--bg-2);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
}
.checkout-login-hint svg { flex-shrink: 0; }
.checkout-login-hint__text { line-height: 1.45; }
.checkout-login-hint a { color: var(--gold); }

/* ── Mentett cím kártyák ── */
.saved-addresses {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.address-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    position: relative;
}
.address-card:has(input:checked) {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb, 184,125,30), .05);
}
.address-card input[type="radio"] { display: none; }

.address-card__body { flex: 1; }
.address-card__name { font-weight: 600; font-size: 14px; color: var(--text); }
.address-card__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-4);
    background: var(--bg-2);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
}
.address-card__detail { font-size: 13px; color: var(--text-3); margin-top: 2px; }

.address-card__check {
    color: var(--gold);
    opacity: 0;
    transition: opacity .15s;
}
.address-card:has(input:checked) .address-card__check { opacity: 1; }

/* ── Szállítási mód opciók ── */
.shipping-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shipping-option {
    display: flex;
    align-items: center;
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    overflow: hidden;
}
.shipping-option:has(input:checked) {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb, 184,125,30), .04);
}
.shipping-option input[type="radio"] { display: none; }

.shipping-option__body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    width: 100%;
}

.shipping-option__icon { font-size: 22px; flex-shrink: 0; }

.shipping-option__info { flex: 1; }
.shipping-option__name { font-weight: 600; font-size: 15px; color: var(--text); }
.shipping-option__desc { font-size: 13px; color: var(--text-3); margin-top: 2px; }

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

/* ── Fizetési mód opciók ── */
.payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option {
    display: flex;
    border: 2px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    overflow: hidden;
}
.payment-option:has(input:checked) {
    border-color: var(--gold);
    background: rgba(var(--gold-rgb, 184,125,30), .04);
}
.payment-option input[type="radio"] { display: none; }

.payment-option__body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    width: 100%;
}

.payment-option__icon { font-size: 22px; flex-shrink: 0; }
.payment-option__info { flex: 1; }
.payment-option__name { font-weight: 600; font-size: 15px; color: var(--text); }
.payment-option__desc { font-size: 13px; color: var(--text-3); margin-top: 2px; }

.payment-option__badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}

.payment-option__extra {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
}

/* ── ÁSZF ── */
.aszf-agree {
    background: var(--bg-2);
    border-radius: var(--r-md);
    padding: 18px;
    margin-top: 24px;
}
.aszf-agree a { color: var(--gold); }

.btn--order {
    min-width: 220px;
    justify-content: center;
    gap: 8px;
}

/* ── Összefoglalás (4. lépés) ── */
.order-summary-preview { margin-bottom: 24px; }

.summary-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.summary-section:last-child { border-bottom: none; }

.summary-section--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.summary-section__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-4);
    margin-bottom: 10px;
}

.summary-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 6px;
}
.summary-item__name { flex: 1; }
.summary-item__qty  { color: var(--text-4); white-space: nowrap; }
.summary-item__total { font-weight: 600; white-space: nowrap; }

/* Tétel nettó ár sora (4. lépés "Rendelt termékek" listában) – a bruttó
   sorösszeg ALATT, nem mellette, ugyanaz a minta mint a sidebar mini-tételeknél
   és a kosar.php-ban. Ez egy önálló sor a summary-item alatt, nem inline. */
.summary-item-net-row {
    display: flex;
    justify-content: flex-end;
    font-size: 11px;
    color: var(--text-4);
    margin-top: -4px;
    margin-bottom: 6px;
}

.summary-address { font-size: 14px; color: var(--text-2); line-height: 1.6; }

.summary-totals { margin-top: 4px; }

.summary-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 8px;
}
.summary-total-row--final {
    font-weight: 800;
    font-size: 17px;
    color: var(--text);
    padding-top: 10px;
    border-top: 2px solid var(--border);
    margin-top: 8px;
}

/* Nettó / ÁFA / bruttó bontás a 4. lépés összefoglalóban – ugyanaz a stílus
   mint a sidebar #ckNetVatBlock-nál, de a summary-totals blokk TETEJÉN
   jelenik meg (renderSummary() generálja penztar.js-ben). */
.summary-net-vat-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}
.summary-total-row--net,
.summary-total-row--vat {
    color: var(--text-4);
    font-size: 12px;
}
.summary-total-row--gross {
    color: var(--text-2);
    font-weight: 600;
    font-size: 13px;
}

/* ── Sidebar ── */
/* Sticky csak asztali nézeten – mobilon (max 960px) normál flow,
   hogy az összesítő kártya ne fedje át a form elemeket */
@media (min-width: 961px) {
    .checkout-sidebar {
        position: sticky;
        top: calc(var(--header-h, 70px) + 16px);
    }
}

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

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

/* ── Nettó / ÁFA bontás (checkout sidebar) ───────────────────────────
   A checkout-items (kosár tételek) UTÁN és a checkout-totals "Részösszeg
   (bruttó)" sora ELŐTT jelenik meg, így a nettó/ÁFA/bruttó hármas egyetlen
   vizuális blokk. penztar.js tölti fel (renderNetVatBlock()) a
   state.cart.net_vat_breakdown adatból - nincs JS-es számítás, csak
   megjelenítés. Ha az adat hiányos, a JS elrejti ezt a blokkot (a bruttó
   sor a checkout-totals-ban ettől függetlenül mindig látszik). */
#ckNetVatBlock {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
}
#ckNetVatBlock[hidden] { display: none; }

.ck-net-vat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-4);
}
.ck-net-vat-row--gross {
    color: var(--text-2);
    font-weight: 600;
    font-size: 13px;
}

/* Sidebar kosár tételek – alattuk elválasztó a nettó/ÁFA/bruttó blokk felé */
.checkout-items {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.checkout-items__loading { display: flex; flex-direction: column; gap: 8px; }

.checkout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.checkout-item__img {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    overflow: visible;
    flex-shrink: 0;
}
.checkout-item__img img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--r-sm);
    display: block;
}
.checkout-item__img-placeholder {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    font-size: 18px;
}

.checkout-item__qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--text);
    color: var(--bg);
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkout-item__info { flex: 1; min-width: 0; }
.checkout-item__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.checkout-item__variant { font-size: 11px; color: var(--text-4); }

/* Bruttó ár ÉS a nettó ár ALATTA, zárójelben – szűk hely miatt nem mellette.
   Lásd kérés: "a kis termékikonoknál inkább a bruttó ár alá írjuk a nettót". */
.checkout-item__price-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}
.checkout-item__price { font-size: 13px; font-weight: 700; white-space: nowrap; }
.checkout-item__price-net {
    font-size: 10px;
    color: var(--text-4);
    white-space: nowrap;
}

/* Összesítő sorok – a "Részösszeg (bruttó)" a nettó/ÁFA blokk folytatása,
   ezért NINCS felső elválasztó (a hármas egy blokk). */
.checkout-totals { padding-top: 0; }

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-3);
    margin-bottom: 8px;
}
/* A bruttó részösszeg zárja a nettó/ÁFA/bruttó hármast – utána elválasztó
   a kupon / VIP / szállítás sorok felé. */
.checkout-total-row--gross {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.checkout-total-final {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    font-size: 17px;
    color: var(--text);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid var(--border);
}

.checkout-vat-note {
    font-size: 11px;
    color: var(--text-4);
    margin-top: 6px;
    margin-bottom: 0;
}

/* ── Bizalmi elemek ── */
.checkout-trust {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.checkout-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-4);
}

/* ── Billing section ── */
.billing-section { margin-top: 20px; }
/* A "Számlázási cím mentése" gomb sora a számlázási űrlap alján */
.billing-save-row { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ── Skeleton ── */
.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;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Spinner ── */
.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;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Segéd ── */
.hidden { display: none !important; }
.text-green { color: var(--green, #38a169); font-weight: 600; }
.text-red   { color: var(--red, #e53e3e); }

@media (max-width: 640px) {
    .checkout-panel { padding: 20px 16px; }
    .form-row { grid-template-columns: 1fr; }
    .form-row--3 { grid-template-columns: 100px 1fr; }
    .checkout-panel__footer { flex-direction: column-reverse; }
    .checkout-panel__footer .btn { width: 100%; justify-content: center; }
    .summary-section--row { grid-template-columns: 1fr; }

    /* A "Van már fiókja?" sáv mobilon több sorba tördelődik – az ikon a
       szöveg TETEJÉHEZ igazodjon (ne középre a többsoros blokkhoz képest),
       így rendezett, átlátható marad, és nem foglal több helyet. */
    .checkout-login-hint { align-items: flex-start; }
    .checkout-login-hint svg { margin-top: 3px; }
}

/* ── Rendelés-visszaigazolás – siker ikon (arany gyűrű + pipa) ──
   A ✅ emoji helyett egyedi, brandhez illő SVG. Az arany gyűrű, majd a
   pipa "megrajzolódik" (egyszer fut le, nem ciklikus). Mivel a #spSuccess /
   Stripe siker-blokk display:none-ról vált láthatóra a polling után, az
   animáció pont a siker megjelenésekor indul – nincs hozzá JS. */
.confirm-icon {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
}
.confirm-icon .ci-ring {
    fill: none;
    stroke: var(--gold);
    stroke-width: 6;
    stroke-dasharray: 277;    /* ≈ a r=44 kör kerülete */
    stroke-dashoffset: 277;
    animation: confirmDraw .55s ease-out forwards;
}
.confirm-icon .ci-check {
    fill: none;
    stroke: var(--gold);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: confirmDraw .38s ease-out .5s forwards;  /* a gyűrű után */
}
@keyframes confirmDraw { to { stroke-dashoffset: 0; } }

/* Mozgáscsökkentés: a végállapot azonnal, animáció nélkül. */
@media (prefers-reduced-motion: reduce) {
    .confirm-icon .ci-ring,
    .confirm-icon .ci-check { stroke-dashoffset: 0; animation: none; }
}

/* ── Rendelés-visszaigazolás – sikertelen ikon (piros gyűrű + X + megrezzenés) ──
   A ❌ emoji helyett. A piros gyűrű körberajzolódik, majd az X két szára, végül
   egy apró oldalirányú "megrezzenés". Egyszer fut le. A confirmDraw keyframe-et
   a siker-ikonnal közösen használja. */
.confirm-error {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
}
.confirm-error .ce-ring {
    fill: none;
    stroke: var(--red, #e53e3e);
    stroke-width: 6;
    stroke-dasharray: 277;    /* ≈ a r=44 kör kerülete */
    stroke-dashoffset: 277;
    animation: confirmDraw .5s ease-out forwards;
}
.confirm-error .ce-x1,
.confirm-error .ce-x2 {
    fill: none;
    stroke: var(--red, #e53e3e);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
}
.confirm-error .ce-x1 { animation: confirmDraw .32s ease-out .48s forwards; }
.confirm-error .ce-x2 { animation: confirmDraw .32s ease-out .66s forwards; }
.confirm-error .ce-shake {
    transform-origin: 50px 50px;
    animation: confirmShake .4s ease-in-out 1.05s 1;
}
@keyframes confirmShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* ── Rendelés-visszaigazolás – várakozó ikon (forgó arany ív) ──
   A ⏳ emoji (és a mellette lévő kis spinner) helyett. Folyamatosan forog,
   mert a várakozás hossza nem ismert. */
.confirm-wait {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 16px;
}
.confirm-wait .cw-track {
    fill: none;
    stroke: rgba(var(--gold-rgb, 184,125,30), .18);
    stroke-width: 6;
}
.confirm-wait .cw-arc {
    fill: none;
    stroke: var(--gold);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 63 251;   /* ~negyed ív + hézag (r=40 kerülete ≈ 251) */
    transform-origin: 50px 50px;
    animation: confirmSpin 1s linear infinite;
}
@keyframes confirmSpin { to { transform: rotate(360deg); } }

/* Mozgáscsökkentés: a sikertelen ikon végállapota animáció nélkül; a várakozó
   ív megáll (a "Fizetés feldolgozása…" szöveg hordozza a jelentést). */
@media (prefers-reduced-motion: reduce) {
    .confirm-error .ce-ring,
    .confirm-error .ce-x1,
    .confirm-error .ce-x2 { stroke-dashoffset: 0; animation: none; }
    .confirm-error .ce-shake { animation: none; }
    .confirm-wait .cw-arc { animation: none; }
}

/* ── SimplePay visszatérési MODAL (cancel / timeout) ──────────────────────────
   Középre úszó, lekerekített kártya, elhomályosított + sötétített háttérrel.
   Semleges (NEM hiba) megjelenés: ezekben az esetekben nem történt fizetés.
   A penztar.js showReturnNotice() nyitja meg (leveszi a `.hidden`-t). */
.sp-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sp-modal.hidden { display: none; }

.sp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);   /* Safari / iOS */
    animation: spModalFade .2s ease-out;
}
.sp-modal__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
    padding: 34px 28px 26px;
    text-align: center;
    animation: spModalIn .28s cubic-bezier(.16, 1, .3, 1);
}
.sp-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-3);
    border-radius: 50%;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.sp-modal__close:hover { background: var(--bg-2); color: var(--text); }

/* Az animált óra ikon a modalban nagyobb (a .confirm-clock szabályok adják a rajzot) */
.sp-modal__icon { display: block; width: 72px; height: 72px; margin: 4px auto 18px; }

.sp-modal__title {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(18px, 4vw, 22px);
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 10px;
}
.sp-modal__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
    margin: 0 0 24px;
}
.sp-modal__ok { width: 100%; justify-content: center; }

@keyframes spModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spModalIn {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* A modal nyitva tartása alatt a háttér ne görgethessen */
body.sp-modal-open { overflow: hidden; }

/* Mobil finomítás */
@media (max-width: 480px) {
    .sp-modal { padding: 16px; }
    .sp-modal__card { padding: 30px 22px 22px; }
    .sp-modal__icon { width: 64px; height: 64px; margin-bottom: 14px; }
}

/* Mozgáscsökkentés: nincs beúszás/halványodás */
@media (prefers-reduced-motion: reduce) {
    .sp-modal__backdrop,
    .sp-modal__card { animation: none; }
}

/* ── Animált óra ikon (semleges) ──────────────────────────────────────────────
   A SUCCESS pipa / FAIL X „megrajzolódó" mintáját követi: a gyűrű körberajzolódik,
   majd a két mutató kirajzolódik – egyszer fut le, nem ciklikus. A közös
   confirmDraw keyframe-et használja (mint a .confirm-icon / .confirm-error).
   Szín: semleges --text-2 (nem arany, nem piros), hogy ne olvasódjon sikerként
   vagy hibaként. */
.confirm-clock .cc-ring {
    fill: none;
    stroke: var(--text-2);
    stroke-width: 6;
    stroke-dasharray: 277;    /* ≈ a r=44 kör kerülete */
    stroke-dashoffset: 277;
    animation: confirmDraw .55s ease-out forwards;
}
.confirm-clock .cc-hand {
    fill: none;
    stroke: var(--text-2);
    stroke-width: 6;
    stroke-linecap: round;
}
.confirm-clock .cc-hand-min {
    stroke-dasharray: 26;     /* a mutató hossza (50,50)→(50,24) */
    stroke-dashoffset: 26;
    animation: confirmDraw .3s ease-out .5s forwards;   /* a gyűrű után */
}
.confirm-clock .cc-hand-hour {
    stroke-dasharray: 16;     /* a mutató hossza (50,50)→(66,50) */
    stroke-dashoffset: 16;
    animation: confirmDraw .3s ease-out .62s forwards;
}

/* Mozgáscsökkentés: a végállapot azonnal, animáció nélkül. */
@media (prefers-reduced-motion: reduce) {
    .confirm-clock .cc-ring,
    .confirm-clock .cc-hand-min,
    .confirm-clock .cc-hand-hour { stroke-dashoffset: 0; animation: none; }
}