/* =============================================================
   Sajat fotobol vaszonkep — varazslo felulet
   Teljes kepernyos lepesek, animalt valtassal.
   ============================================================= */

.pw {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    background: linear-gradient(180deg, #fff 0%, var(--c-bg-soft, #f7f8fc) 100%);
    overflow-x: hidden;
}

/* ── Folyamatjelzo ───────────────────────────────────────── */
.pw-progress {
    position: sticky; top: var(--header-h); z-index: 20;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--c-line, #e6e9f0);
    padding: 0 0 10px;
}
.pw-progress-bar { height: 3px; background: var(--c-line, #e6e9f0); }
.pw-progress-fill {
    height: 100%; width: 25%;
    background: linear-gradient(90deg, var(--c-coral, #ff6b5b), var(--c-sun, #ffb23f));
    border-radius: 0 100px 100px 0;
    transition: width .55s cubic-bezier(.2,.8,.3,1);
}
.pw-progress-text {
    max-width: 1180px; margin: 0 auto; padding: 10px 24px 0;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; color: var(--c-muted, #8a93a5); font-weight: 500;
}
.pw-back {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: none; cursor: pointer;
    color: var(--c-ink-soft, #566074); font-size: 14px; font-weight: 600;
    padding: 6px 12px 6px 6px; border-radius: 100px;
    transition: background .2s, color .2s, transform .2s;
}
.pw-back:hover { background: var(--c-bg-tint, #fff4ef); color: var(--c-coral, #ff6b5b); transform: translateX(-2px); }

/* ── Lepesek ─────────────────────────────────────────────── */
.pw-step {
    position: absolute; inset: 0; top: 0;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 56px 24px 90px;
    opacity: 0; transform: translateX(44px) scale(.985);
    pointer-events: none;
    transition: opacity .42s cubic-bezier(.2,.8,.3,1), transform .42s cubic-bezier(.2,.8,.3,1);
}
.pw-step.is-active   { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.pw-step.from-right  { opacity: 0; transform: translateX(44px) scale(.985); }
.pw-step.from-left   { opacity: 0; transform: translateX(-44px) scale(.985); }
.pw-step.is-leaving      { opacity: 0; transform: translateX(-44px) scale(.985); }
.pw-step.is-leaving-back { opacity: 0; transform: translateX(44px)  scale(.985); }

.pw-inner { width: 100%; max-width: 760px; text-align: center; }
.pw-inner--wide   { max-width: 1120px; }
.pw-inner--narrow { max-width: 520px; }

.pw-title {
    font-size: clamp(1.7rem, 4.2vw, 2.5rem); font-weight: 800;
    letter-spacing: -.035em; color: var(--c-ink, #1d2433); margin-bottom: 10px;
}
.pw-sub { color: var(--c-ink-soft, #566074); font-size: 16px; margin-bottom: 40px; }

/* ── 1. Tajolas ──────────────────────────────────────────── */
.pw-orient { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.pw-orient-card {
    background: #fff; border: 2px solid var(--c-line, #e6e9f0);
    border-radius: 18px; padding: 34px 30px 26px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 200px;
    transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s, border-color .28s;
}
.pw-orient-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(29,36,51,.12);
    border-color: rgba(255,107,91,.4);
}
.pw-orient-card.is-picked {
    border-color: var(--c-coral, #ff6b5b);
    box-shadow: 0 0 0 4px rgba(255,107,91,.14), 0 18px 40px rgba(255,107,91,.2);
    transform: translateY(-4px);
}
.pw-orient-frame {
    display: block; margin-bottom: 16px; border-radius: 4px;
    background: linear-gradient(145deg, #eef1f6, #dfe4ed);
    border: 1px solid rgba(29,36,51,.12);
    box-shadow: inset 0 1px 3px rgba(255,255,255,.8), 0 3px 10px rgba(29,36,51,.08);
    transition: background .28s;
}
.pw-orient-card:hover .pw-orient-frame,
.pw-orient-card.is-picked .pw-orient-frame {
    background: linear-gradient(145deg, #ffe6e0, #ffd0c6);
}
.pw-orient-name { font-size: 17px; font-weight: 700; color: var(--c-ink, #1d2433); }
.pw-orient-desc { font-size: 13px; color: var(--c-muted, #8a93a5); }

/* ── 2. Feltoltes ────────────────────────────────────────── */
.pw-drop {
    position: relative; border: 2px dashed var(--c-line, #e6e9f0);
    border-radius: 20px; background: #fff; cursor: pointer;
    padding: 64px 28px; transition: border-color .25s, background .25s, transform .25s;
}
.pw-drop:hover { border-color: var(--c-coral, #ff6b5b); background: #fffaf8; }
.pw-drop.is-over {
    border-color: var(--c-coral, #ff6b5b); background: var(--c-bg-tint, #fff4ef);
    transform: scale(1.015);
}
.pw-drop.is-busy { cursor: default; border-style: solid; }
.pw-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pw-drop-icon { width: 62px; height: 62px; color: var(--c-coral, #ff6b5b); margin-bottom: 10px; }
.pw-drop-icon svg { width: 100%; height: 100%; }
.pw-drop-title   { font-size: 18px; font-weight: 700; color: var(--c-ink, #1d2433); }
.pw-drop-or      { font-size: 14px; color: var(--c-ink-soft, #566074); }
.pw-drop-formats { font-size: 12.5px; color: var(--c-muted, #8a93a5); margin-top: 10px; }

.pw-spinner {
    width: 40px; height: 40px; margin-bottom: 14px;
    border: 3px solid var(--c-line, #e6e9f0);
    border-top-color: var(--c-coral, #ff6b5b);
    border-radius: 50%; animation: pwSpin .8s linear infinite;
}
@keyframes pwSpin { to { transform: rotate(360deg); } }

.pw-bar {
    width: min(320px, 80%); height: 5px; margin-top: 16px;
    background: var(--c-line, #e6e9f0); border-radius: 100px; overflow: hidden;
}
.pw-bar-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--c-coral, #ff6b5b), var(--c-sun, #ffb23f));
    border-radius: 100px; transition: width .25s ease;
}

.pw-error {
    margin-top: 22px; display: flex; align-items: flex-start; gap: 14px;
    background: #fff5f4; border: 1px solid #ffd3cd;
    border-radius: 14px; padding: 18px 20px; text-align: left;
    animation: pwShake .45s cubic-bezier(.36,.07,.19,.97);
}
@keyframes pwShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}
.pw-error-icon  { color: #d9442f; flex-shrink: 0; margin-top: 1px; }
.pw-error-title { font-weight: 700; color: #8d2f28; margin-bottom: 3px; }
.pw-error-text  { font-size: 14px; color: #a1544a; line-height: 1.55; }
.pw-error-btn {
    margin-left: auto; flex-shrink: 0; align-self: center;
    background: var(--c-ink, #1d2433); color: #fff; border: none;
    border-radius: 100px; padding: 10px 18px; font-size: 14px;
    font-weight: 600; cursor: pointer; transition: background .22s, transform .22s;
}
.pw-error-btn:hover { background: var(--c-coral, #ff6b5b); transform: translateY(-1px); }

/* ── 3. Meretek ──────────────────────────────────────────── */
.pw-sizes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px; max-width: 820px; margin: 0 auto;
}
.pw-size-card {
    background: #fff; border: 2px solid var(--c-line, #e6e9f0);
    border-radius: 16px; padding: 24px 18px 20px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s, border-color .26s;
}
.pw-size-card:not(.is-disabled):hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(29,36,51,.12);
    border-color: rgba(255,107,91,.4);
}
.pw-size-card.is-picked {
    border-color: var(--c-coral, #ff6b5b);
    box-shadow: 0 0 0 4px rgba(255,107,91,.14);
}
.pw-size-card.is-disabled { opacity: .5; cursor: not-allowed; background: #fafbfd; }
.pw-size-shape {
    display: block; margin-bottom: 12px; border-radius: 3px;
    background: linear-gradient(145deg, #eef1f6, #dfe4ed);
    border: 1px solid rgba(29,36,51,.1);
}
.pw-size-card:not(.is-disabled):hover .pw-size-shape,
.pw-size-card.is-picked .pw-size-shape { background: linear-gradient(145deg, #ffe6e0, #ffd0c6); }
.pw-size-name  { font-weight: 700; color: var(--c-ink, #1d2433); font-size: 15px; }
.pw-size-cm    { font-size: 13px; color: var(--c-muted, #8a93a5); }
.pw-size-price { margin-top: 6px; font-weight: 800; color: var(--c-coral, #ff6b5b); font-size: 17px; }
.pw-size-note  { font-size: 11.5px; color: var(--c-muted, #8a93a5); margin-top: 3px; }
.pw-size-warn  { margin-top: 6px; font-size: 11.5px; color: #b8745f; font-weight: 600; }

/* ── 4. Elonezet ─────────────────────────────────────────── */
.pw-preview-wrap {
    display: grid; grid-template-columns: 1fr 320px; gap: 36px;
    align-items: start; text-align: left;
}
.pw-room {
    background: linear-gradient(170deg, #f2f0ec 0%, #e6e3dd 100%);
    border-radius: 18px; padding: 54px 28px 40px;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    box-shadow: inset 0 2px 20px rgba(0,0,0,.05);
}
/* Itt a vásárló a KÉPET ellenőrzi, nem a vászon formáját: sima,
   szemből mutatott kép, torzítás és perem nélkül. */
.pw-canvas3d {
    position: relative;
    filter: drop-shadow(0 12px 26px rgba(0,0,0,.16));
    transition: transform .4s cubic-bezier(.2,.8,.3,1);
    animation: pwDrop .7s cubic-bezier(.16,.84,.3,1);
}
@keyframes pwDrop {
    from { opacity: 0; transform: translateY(22px) scale(.96); }
    to   { opacity: 1; }
}
.pw-canvas3d:hover { transform: scale(1.01); }
.pw-canvas-face {
    position: relative; width: 100%; height: 100%;
    overflow: hidden; background: #fff;
    border-radius: 2px;
}
.pw-canvas-face img {
    width: 100%; height: 100%; object-fit: cover;
    object-position: 50% 50%; display: block; user-select: none; -webkit-user-drag: none;
}
/* Itt nincs perem: ez a nézet a képről szól. */
.pw-canvas-edge { display: none; }
.pw-room-hint { font-size: 12.5px; color: #8a847c; }

.pw-summary {
    background: #fff; border: 1px solid var(--c-line, #e6e9f0);
    border-radius: 16px; padding: 24px; position: sticky; top: 140px;
    box-shadow: 0 6px 22px rgba(29,36,51,.06);
}
.pw-sum-row {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 11px 0; border-bottom: 1px solid #f1f3f7; font-size: 14px;
}
.pw-sum-k { color: var(--c-muted, #8a93a5); }
.pw-sum-v { font-weight: 650; color: var(--c-ink, #1d2433); text-align: right; }
.pw-sum-file {
    max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-weight: 500;
}
.pw-quality {
    margin: 14px 0 4px; padding: 9px 13px; border-radius: 100px;
    font-size: 12.5px; font-weight: 650; text-align: center;
}
.pw-quality.is-great { background: #e7f8f1; color: #0d7a57; }
.pw-quality.is-good  { background: #fff4e3; color: #96620d; }
.pw-sum-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 16px 0 18px; padding-top: 14px; border-top: 2px solid var(--c-ink, #1d2433);
    font-size: 15px;
}
.pw-sum-total strong { font-size: 24px; font-weight: 800; color: var(--c-coral, #ff6b5b); }

.pw-cta {
    width: 100%; background: var(--c-ink, #1d2433); color: #fff;
    border: none; border-radius: 100px; padding: 16px 24px;
    font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 20px rgba(29,36,51,.18);
    transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .22s;
}
.pw-cta:hover:not(:disabled) {
    background: var(--c-coral, #ff6b5b); transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,107,91,.36);
}
.pw-cta:disabled { opacity: .6; cursor: default; }
.pw-ghost {
    width: 100%; margin-top: 12px; background: none;
    border: 1.5px solid var(--c-line, #e6e9f0); color: var(--c-ink-soft, #566074);
    border-radius: 100px; padding: 14px 24px; font-size: 15px;
    font-weight: 600; cursor: pointer; transition: all .22s;
}
.pw-ghost:hover { border-color: var(--c-coral, #ff6b5b); color: var(--c-coral, #ff6b5b); }

/* ── 5. Kesz ─────────────────────────────────────────────── */
.pw-done-check { width: 92px; height: 92px; margin: 0 auto 26px; color: #16c2a3; }
.pw-done-check svg { width: 100%; height: 100%; }
.pw-check-circle {
    stroke-dasharray: 145; stroke-dashoffset: 145;
    animation: pwDraw .6s cubic-bezier(.2,.8,.3,1) forwards;
}
.pw-check-mark {
    stroke-dasharray: 40; stroke-dashoffset: 40;
    animation: pwDraw .4s cubic-bezier(.2,.8,.3,1) .45s forwards;
}
@keyframes pwDraw { to { stroke-dashoffset: 0; } }
.pw-done-actions { margin-top: 30px; }

/* ── Mobil ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .pw-preview-wrap { grid-template-columns: 1fr; gap: 24px; }
    .pw-summary { position: static; }
    .pw-room { padding: 36px 18px 28px; }
}
@media (max-width: 620px) {
    .pw-step { padding: 36px 18px 70px; }
    .pw-orient { gap: 14px; }
    .pw-orient-card { min-width: 142px; padding: 24px 18px 20px; flex: 1 1 140px; }
    .pw-orient-frame { transform: scale(.78); margin-bottom: 8px; }
    .pw-drop { padding: 44px 18px; }
    .pw-sizes { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pw-error { flex-direction: column; }
    .pw-error-btn { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .pw-step, .pw-canvas3d, .pw-orient-card, .pw-size-card { transition: none !important; animation: none !important; }
}

/* Ha egyetlen meret sem felel meg a foto felbontasanak */
.pw-nosize {
    grid-column: 1 / -1;
    background: #fff8f0; border: 1px solid #ffdcc0;
    border-radius: 14px; padding: 22px 26px;
    color: #8a5a28; font-size: 15px; line-height: 1.65;
}


/* ── Tájékoztató, ha a fotó tájolása miatt váltottunk ────── */
.pw-orient-note {
    display: flex; align-items: center; gap: 9px;
    max-width: 560px; margin: 0 auto 18px;
    padding: 11px 16px;
    background: rgba(255,107,91,.09);
    border: 1px solid rgba(255,107,91,.26);
    border-radius: 12px;
    font-size: 13.5px; line-height: 1.45;
    color: #7a3328;
    text-align: left;
    animation: pwNoteIn .34s cubic-bezier(.2,.8,.3,1) both;
}
.pw-orient-note::before {
    content: "↻"; flex-shrink: 0;
    font-size: 16px; font-weight: 700; color: #ff6b5b;
}
.pw-orient-note[hidden] { display: none; }
@keyframes pwNoteIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pw-orient-note { animation: none; }
}

/* A kiemelt menüpont a fejléc jobb szélén, a kosár mellett */
.header-actions { display: flex; align-items: center; gap: 14px; }
@media (max-width: 860px) {
    .header-actions .pw-nav-cta {
        width: auto; margin-top: 0;
        padding: 7px 12px !important;
        font-size: 11px !important;
    }
}


/* ── Kétsoros ár: forint elöl, euró alatta ──────────────── */
.pw-dual { display: inline-flex; flex-direction: column; line-height: 1.18; }
.pw-huf  { font-weight: 800; color: var(--c-coral, #ff6b5b); }
.pw-eur  { font-size: .72em; font-weight: 500; color: var(--c-muted, #8a93a5); margin-top: 2px; }
.pw-eur-only { font-weight: 800; color: var(--c-coral, #ff6b5b); }

/* A méretkártyákon középre, az összegzésben jobbra */
.pw-size-price .pw-dual { align-items: center; }
.pw-sum-total .pw-dual  { align-items: flex-end; }
.pw-sum-total strong .pw-huf { font-size: 24px; }
.pw-sum-total strong .pw-eur { font-size: 14px; }

/* ── Mobil: a varázsló minden lépése ujjal is kényelmes ── */
@media (max-width: 620px) {
    /* A ragadós fejléc ne egye meg a képernyőt */
    .pw-top { padding: 10px 14px; }
    .pw-title { font-size: 25px; line-height: 1.2; }
    .pw-sub   { font-size: 14.5px; }

    /* Tájolás: egymás alatt, teljes szélességben, nagy érintőfelülettel */
    .pw-orient { flex-direction: column; align-items: stretch; gap: 12px; }
    .pw-orient-card {
        flex-direction: row; align-items: center; gap: 16px;
        min-width: 0; width: 100%; padding: 16px 18px; text-align: left;
    }
    .pw-orient-frame { margin-bottom: 0; transform: scale(.62); flex-shrink: 0; }
    .pw-orient-name { font-size: 16px; }
    .pw-orient-desc { font-size: 12.5px; }

    /* Méretek: egy oszlop, hogy az ár és a név is olvasható legyen */
    .pw-sizes { grid-template-columns: 1fr; gap: 10px; }
    .pw-size-card {
        flex-direction: row; align-items: center; justify-content: space-between;
        gap: 14px; padding: 14px 16px; text-align: left;
    }
    .pw-size-card .pw-size-vis { flex-shrink: 0; transform: scale(.8); }
    .pw-size-price { margin-top: 0; font-size: 15px; }
    .pw-size-price .pw-dual { align-items: flex-end; }

    /* Előnézet: a kép előre, az összegzés alá */
    .pw-preview-wrap { grid-template-columns: 1fr; gap: 18px; }
    .pw-room { padding: 22px 12px 18px; }
    .pw-summary { position: static; padding: 18px 16px; }
    .pw-sum-row { font-size: 14px; }
    .pw-sum-v { text-align: right; }
    .pw-sum-file { word-break: break-all; font-size: 12.5px; }
    .pw-sum-total strong .pw-huf { font-size: 21px; }

    /* Gombok: teljes szélesség, kényelmes magasság */
    .pw-cta, .pw-sum-cta, .pw-done-actions a, .pw-done-actions button {
        width: 100%; min-height: 50px; font-size: 16px;
    }
    .pw-back { min-height: 44px; }

    /* A tájékoztató doboz is férjen el */
    .pw-orient-note { font-size: 12.5px; padding: 10px 13px; margin-bottom: 14px; }
}

/* Nagyon keskeny telefon */
@media (max-width: 380px) {
    .pw-title { font-size: 22px; }
    .pw-orient-frame { transform: scale(.52); }
    .pw-size-card { padding: 12px 13px; }
    .pw-sum-total strong .pw-huf { font-size: 19px; }
}

/* Fekvő tartású telefon: ne legyen túl magas a lépés */
@media (max-height: 520px) and (orientation: landscape) {
    .pw-step { padding-top: 18px; padding-bottom: 50px; }
    .pw-title { font-size: 21px; margin-bottom: 4px; }
    .pw-sub { margin-bottom: 14px; }
    .pw-orient-frame { transform: scale(.55); }
}


/* ═══ MOBIL-FINOMITAS ═════════════════════════════════════ */

@media (max-width: 620px) {
    /* A feltöltő doboz: nagyobb érintőfelület, olvashatóbb szöveg */
    .pw-drop { padding: 38px 16px; border-radius: 14px; }
    .pw-drop-idle p { font-size: 14.5px; line-height: 1.55; }
    .pw-drop-btn { width: 100%; min-height: 50px; font-size: 16px; }

    /* Az előnézet: a kép felül, az adatok alatta */
    .pw-preview-wrap { display: flex; flex-direction: column; gap: 18px; }
    .pw-room { order: 1; padding: 20px 14px; }
    .pw-summary { order: 2; position: static; padding: 18px 16px; }
    .pw-sum-row { font-size: 13.5px; padding: 9px 0; }
    .pw-sum-file { font-size: 12px; word-break: break-all; }

    /* A méretkártyák egy oszlopban, vízszintes elrendezéssel */
    .pw-sizes { grid-template-columns: 1fr; gap: 10px; }
    .pw-size-card {
        flex-direction: row; align-items: center; justify-content: space-between;
        gap: 14px; padding: 14px 16px; text-align: left;
    }
    .pw-size-vis { flex-shrink: 0; transform: scale(.82); }

    /* Gombok ujjal is kényelmesen */
    .pw-cta, .pw-sum-cta { width: 100%; min-height: 50px; font-size: 16px; }
    .pw-back { min-height: 44px; }

    /* A szoba-előnézet */
    .pw-rooms { margin-top: 22px; }
}

@media (max-width: 380px) {
    .pw-drop { padding: 30px 13px; }
    .pw-orient-frame { transform: scale(.5); }
}


/* ── Átjárás a feliratozóba ──────────────────────────────────────
   A saját fotóra feliratot is lehet tenni. Ez nem a fő útvonal,
   ezért halványabb, mint a kosár-gomb — de könnyen megtalálható. */
.pw-text-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
    padding: 13px 18px;
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    color: var(--text, #1f2937);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .18s, background .18s, transform .18s;
}
.pw-text-link:hover {
    border-color: var(--accent, #ff6b4a);
    background: #fff8f6;
    transform: translateY(-1px);
}
.pw-text-link svg { flex: 0 0 auto; color: var(--accent, #ff6b4a); }
.pw-text-hint {
    margin: 8px 2px 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted, #6b7280);
    text-align: center;
}
@media (max-width: 760px) {
    .pw-text-link { font-size: 14px; padding: 12px 14px; }
    .pw-text-hint { font-size: 12px; }
}

/* ── Mobil: hely a ragadós sávnak ────────────────────────────────
   A .pw-progress sáv (Vissza · 1. lépés / 4) ragad a fejléc alatt,
   de a lépés tartalma ugyanonnan indult — ezért a sáv rácsúszott
   a címre. A tartalomnak a sáv ALATT kell kezdődnie. */

@media (max-width: 860px) {
    /* A sáv NE ragadjon mobilon: a kis kijelzőn úgyis elfér a lap
       tetején, ragadva viszont rácsúszott a címre és az alcímre.
       Így a tartalom szabadon, a sáv alatt folytatódik. */
    .pw-progress {
        position: static !important;
        top: auto !important;
    }
    .pw-step {
        padding-top: 22px !important;
    }
    .pw-step.is-active {
        padding-top: 22px !important;
    }
}

@media (max-width: 620px) {
    .pw-step,
    .pw-step.is-active { padding-top: 18px !important; }
}


/* ═══ MOBIL: MINDEN EGYMÁS ALÁ ═════════════════════════════════
   A .pw-step vízszintes flex-sor volt, törés nélkül. Ezért a
   4. lépésben a kép+összegzés (.pw-inner--wide) és az "így
   mutatna" szoba-előnézet (.pw-rooms) EGYMÁS MELLÉ került:
   a szobafotó 430 px-et kért egy 390 px-es kijelzőn, a belső
   tartalom 150 px-re nyomódott össze és félig kifutott a
   képernyőről — mindkettőnek csak a fele látszott.

   Mobilon a lépés tartalma egy oszlop, és semmi nem lóg ki. */

@media (max-width: 860px) {
    .pw-step {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    /* A belső sávok a teljes szélességet kapják, nem osztoznak. */
    .pw-step > *,
    .pw-inner,
    .pw-inner--wide,
    .pw-inner--narrow,
    .pw-rooms {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* A szoba-előnézet a kijelzőhöz igazodik, nem a fotó
       valódi szélességéhez. */
    .pw-rooms, .rp, .rp-stage {
        width: 100% !important;
        max-width: 100% !important;
    }
    .rp-bg { width: 100% !important; height: auto !important; }

    /* A szoba-választó csipszek: ujjal oldalra húzhatók,
       de nem feszítik szét a lapot. */
    .rp-picker {
        max-width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        overflow-x: visible !important;
    }

    /* A kép és az összegzés is egymás alatt, a kép elöl. */
    .pw-preview-wrap {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .pw-room    { order: 1; width: 100% !important; }
    .pw-summary { order: 2; width: 100% !important; position: static !important; }
}

/* ── "A minőségjavítást ingyen elvégezzük" ───────────────────
   Az ár alatt, a kosárgomb előtt. A vásárló itt bizonytalan el
   leginkább: elég jó-e a fotója. A válasz megnyugtató, ezért
   zöld pipával, nem figyelmeztető sárgával. */
.pw-igeret {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: #eefaf4;
    border: 1px solid #c8ebdc;
    border-radius: 11px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #1f6b4f;
    text-align: left;
}
.pw-igeret svg {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: #16a06f;
}
@media (max-width: 620px) {
    .pw-igeret { font-size: 12px; padding: 11px 13px; }
}