/* ==========================================================================
   ajandekutalvany.css — Ajándékutalvány oldal (interaktív kártyák + lépések).
   base.css + subpage.css mellé töltődik (a megrendelő űrlap a subpage .form-ot használja).
   ========================================================================== */

/* ---------- Utalvány-kártyák ---------- */
.vouchers{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.3rem;align-items:stretch}
.vcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);transition:transform .25s ease,box-shadow .25s ease,border-color .2s}
.vcard:hover{transform:translateY(-6px);box-shadow:0 26px 48px rgba(16,12,10,.18)}
.vcard.selected{border-color:var(--o-orange);box-shadow:0 0 0 3px rgba(255,122,24,.35),0 26px 48px rgba(16,12,10,.18)}
.vcard.selected::before{content:"✓";position:absolute;top:.6rem;right:.6rem;z-index:4;width:30px;height:30px;border-radius:50%;background:var(--flame-h);color:#1a0e00;display:grid;place-items:center;font-weight:900}

.vshot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.vshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.vcard:hover .vshot img{transform:scale(1.05)}
/* fény-sweep hoverre */
.vshot::after{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s ease}
.vcard:hover .vshot::after{left:130%}
.vtag{position:absolute;top:0;left:0;z-index:3;background:var(--flame-h);color:#1a0e00;font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;padding:.3em 1em;clip-path:polygon(0 0,100% 0,100% 100%,12px 100%)}

.vbd{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.vbd h3{font-size:1.4rem;margin-bottom:.2rem}
.vprice{font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:1.5rem;line-height:1;background:var(--flame);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.6rem}
.vbd p{color:var(--muted);line-height:1.5;font-size:.92rem;margin-bottom:1.1rem}
.vpick{margin-top:auto;align-self:flex-start;cursor:pointer}

/* Egyedi összeg kártya (kép nélkül) */
.vcustom{background:linear-gradient(160deg,var(--ink-3),var(--ink-2));color:#fff;border-color:rgba(255,255,255,.1)}
.vcustom .vbd{align-items:flex-start}
.vcustom .vbd p{color:#bdb0a2}
.vcustom-ic{width:54px;height:54px;display:grid;place-items:center;background:var(--flame-h);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);margin-bottom:1rem}
.vcustom-ic svg{width:28px;height:28px;stroke:#1a0e00;fill:none;stroke-width:2}

/* ---------- Így működik ---------- */
.how{background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.step{position:relative;background:#fff;border:1px solid var(--line);padding:1.8rem 1.5rem;overflow:hidden}
.step .snum{position:absolute;top:-.3rem;right:.4rem;font-family:'Saira Condensed',sans-serif;font-weight:900;font-style:italic;font-size:5rem;line-height:1;color:rgba(16,12,10,.06)}
.step .sic{width:54px;height:54px;display:grid;place-items:center;background:var(--flame-h);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);margin-bottom:1rem}
.step .sic svg{width:28px;height:28px;stroke:#1a0e00;fill:none;stroke-width:2}
.step h3{font-size:1.3rem;margin-bottom:.3rem}
.step p{color:var(--muted);line-height:1.5;font-size:.94rem}

@media(max-width:860px){
  .steps{grid-template-columns:1fr}
}