/* Ajándékutalvány – prémium retro BKV kártya (utalvány, előnézet, főoldal) */
.pv {
  --pv-navy: #0E1A4D;
  --pv-navy2: #1B2F7A;
  --pv-cream: #F6EED8;
  --pv-ticket: #EFD27A;
  --pv-ink: #101426;
  --pv-red: #A3261F;
  --pv-amber: #FFB21A;
  --pv-gold: linear-gradient(115deg, #9C7424 0%, #F6DE93 22%, #C2943A 42%, #FFF0B8 58%, #B8892B 78%, #E9C66F 100%);
  --pv-gold-solid: #D9B45A;
  container-type: inline-size;
  -webkit-hyphens: manual; hyphens: manual;
  position: relative;
  width: 100%;
  color: var(--pv-cream);
  font-family: 'Barlow', system-ui, sans-serif;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  filter: drop-shadow(0 22px 36px rgba(0,0,0,.45));
}
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pv p { margin: 0; }

.pv-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px 29%;
  border-radius: 14px;
  overflow: hidden;
  /* kivágott jegy-sarkok a perforációnál */
  -webkit-mask: radial-gradient(circle 12px at calc(71% - 7px) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 12px at calc(71% - 7px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at calc(71% - 7px) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 12px at calc(71% - 7px) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}

/* ---- fő rész: sötétkék, guilloche-mintás biztonsági nyomat ---- */
.pv-main {
  position: relative;
  padding: clamp(18px, 4.2cqi, 40px) clamp(18px, 4.6cqi, 44px) clamp(16px, 3.2cqi, 30px);
  display: flex; flex-direction: column; gap: clamp(8px, 1.6cqi, 14px);
  background:
    repeating-radial-gradient(circle at 0 0, #0000 0 7px, rgba(233,198,111,.07) 7px 8px),
    repeating-radial-gradient(circle at 100% 100%, #0000 0 7px, rgba(233,198,111,.07) 7px 8px),
    radial-gradient(ellipse at 30% 20%, #23398C 0%, var(--pv-navy) 70%);
  isolation: isolate;
}
/* dupla aranykeret */
.pv-main::before, .pv-main::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1; border-radius: 8px;
}
.pv-main::before { inset: clamp(7px, 1.2cqi, 11px); border: 2px solid var(--pv-gold-solid); }
.pv-main::after  { inset: clamp(11px, 1.9cqi, 17px); border: 1px solid rgba(217,180,90,.55); }

.pv-top { display: flex; align-items: center; gap: 10px; padding-bottom: clamp(8px, 1.5cqi, 12px); border-bottom: 1px solid rgba(217,180,90,.5); }
.pv-route {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(15px, 2.6cqi, 24px); line-height: 1;
  background: #0A0A0A; color: var(--pv-amber); padding: 4px 9px; border-radius: 4px; border: 1px solid #2E2E2E;
  text-shadow: 0 0 8px rgba(255,178,26,.65);
}
.pv-brand {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(16px, 2.8cqi, 26px); letter-spacing: .22em;
  background: var(--pv-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pv-serial { margin-left: auto; font-family: 'Space Mono', monospace; font-weight: 700; font-size: clamp(11px, 1.5cqi, 14px); color: #FF8A7E; letter-spacing: .05em; white-space: nowrap; }

.pv-kicker { display: flex; align-items: center; gap: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(12px, 1.8cqi, 17px); letter-spacing: .45em; text-transform: uppercase; color: var(--pv-gold-solid); margin-top: clamp(4px, 1cqi, 10px) !important; }
.pv-kicker::before, .pv-kicker::after { content: ''; height: 1px; flex: 0 0 clamp(18px, 4cqi, 40px); background: var(--pv-gold-solid); }

.pv-title {
  margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 8.2cqi, 84px); line-height: .86; letter-spacing: -.005em;
  background: var(--pv-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
  max-width: 78%;
}
.pv-sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: clamp(14px, 2.1cqi, 20px); letter-spacing: .08em; text-transform: uppercase; color: #D9DEF2; }

/* névre szóló krém betét */
.pv-card {
  position: relative; margin-top: clamp(4px, 1cqi, 8px); max-width: 76%;
  background: var(--pv-cream); color: var(--pv-ink); border-radius: 6px;
  padding: clamp(10px, 2cqi, 18px) clamp(12px, 2.4cqi, 22px);
  border-left: 6px solid var(--pv-navy2);
  box-shadow: inset 0 0 0 1px rgba(16,20,38,.12), 0 6px 14px rgba(0,0,0,.25);
}
.pv-k { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(11px, 1.5cqi, 14px); letter-spacing: .3em; text-transform: uppercase; color: var(--pv-red); }
.pv-to { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(22px, 4.4cqi, 40px); line-height: 1; text-transform: uppercase; color: var(--pv-navy2); margin-top: 2px !important; overflow-wrap: anywhere; }
.pv-msg { font-size: clamp(14px, 2cqi, 19px); font-style: italic; line-height: 1.35; margin-top: 6px !important; overflow-wrap: anywhere; }
.pv-msg:empty { display: none; }
.pv-from { font-size: clamp(12px, 1.7cqi, 15px); margin-top: 6px !important; color: #3A3F55; }

.pv-seal {
  position: absolute; right: clamp(16px, 3.4cqi, 34px); top: clamp(56px, 11cqi, 104px);
  width: clamp(70px, 17cqi, 150px); height: auto; color: var(--pv-gold-solid);
  transform: rotate(-10deg); opacity: .95;
}
.pv-bus { width: clamp(150px, 34cqi, 300px); height: auto; color: var(--pv-gold-solid); margin-top: auto; align-self: flex-end; opacity: .9; }

/* perforáció */
.pv-perf { background:
  radial-gradient(circle 3.2px, var(--pv-navy) 96%, #0000) 50% 0 / 14px 14px repeat-y,
  linear-gradient(90deg, var(--pv-navy) 0 50%, var(--pv-ticket) 50% 100%);
}

/* ---- szelvény: klasszikus sárga BKV-jegy ---- */
.pv-stub {
  color: var(--pv-ink);
  background:
    repeating-linear-gradient(0deg, #0000 0 5px, rgba(27,47,122,.07) 5px 6px),
    var(--pv-ticket);
  padding: clamp(14px, 3cqi, 30px) clamp(12px, 2.4cqi, 24px);
  display: flex; flex-direction: column; gap: clamp(10px, 2cqi, 16px); justify-content: space-between;
}
.pv-stub-head { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(12px, 1.7cqi, 16px); letter-spacing: .2em; text-transform: uppercase; color: var(--pv-navy2); border-bottom: 2px solid var(--pv-navy2); padding-bottom: 6px; }
.pv-punch { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(4px, .8cqi, 7px); }
.pv-punch span {
  position: relative; aspect-ratio: 1.25; display: grid; place-items: center;
  border: 1.5px solid var(--pv-navy2); border-radius: 3px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(12px, 2cqi, 18px); color: var(--pv-navy2);
}
.pv-punch span.on::after {
  content: ''; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3A1210, #160807); box-shadow: inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(163,38,31,.5);
}
.pv-led {
  margin-top: 4px; background: #0A0A0A; border: 3px solid #2A2A2A; border-radius: 6px; padding: clamp(7px, 1.4cqi, 12px) 6px; text-align: center;
  font-family: 'Space Mono', monospace; font-weight: 700; font-size: clamp(12px, 2.25cqi, 21px); letter-spacing: .04em; white-space: nowrap;
  color: var(--pv-amber); text-shadow: 0 0 8px rgba(255,178,26,.75);
}
.pv-until { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; white-space: nowrap; font-size: clamp(15px, 2.6cqi, 26px); line-height: 1.05; color: var(--pv-navy2); margin-top: 2px !important; }
.pv-fine { font-size: clamp(10px, 1.3cqi, 12.5px); line-height: 1.45; color: #4A4330; }

.pv-stamp {
  position: absolute; left: 38%; bottom: 16%; z-index: 2;
  border: 5px solid var(--pv-red); color: var(--pv-red); background: rgba(246,238,216,.82);
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(24px, 5cqi, 48px); letter-spacing: .14em; text-transform: uppercase;
  padding: 2px 18px; border-radius: 8px; transform: rotate(-12deg);
}

/* kompakt (főoldal / előnézet) */
.pv--sm .pv-fine { display: none; }

/* keskeny: a szelvény a fő rész alá kerül */
@container (max-width: 560px) {
  .pv-in { grid-template-columns: 1fr; grid-template-rows: auto 14px auto; -webkit-mask: none; mask: none; }
  .pv-perf { background:
    radial-gradient(circle 3.2px, var(--pv-navy) 96%, #0000) 0 50% / 14px 14px repeat-x,
    linear-gradient(180deg, var(--pv-navy) 0 50%, var(--pv-ticket) 50% 100%); }
  .pv-title { font-size: clamp(32px, 11.5cqi, 64px); max-width: 74%; }
  .pv-card { max-width: none; }
  .pv-seal { width: clamp(64px, 21cqi, 110px); top: clamp(56px, 15cqi, 96px); }
  .pv-stub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
  .pv-stub-head, .pv-fine { grid-column: 1 / -1; }
  .pv-punch { grid-row: span 2; }
  .pv-led { font-size: clamp(13px, 4.2cqi, 20px); }
  .pv-until { font-size: clamp(16px, 5cqi, 24px); }
  .pv-stamp { left: 22%; bottom: 40%; }
}

/* Nyomtatás: a maszk, a szűrők és az átlátszó (gradiens) szöveg több böngészőben
   (főleg iPhone/Safari) fekete téglalapként nyomtatódik – ezért itt egyszerűsítünk. */
@media print {
  .pv, .pv * { filter: none !important; }
  .pv-in { -webkit-mask: none !important; mask: none !important; break-inside: avoid; page-break-inside: avoid; }
  .pv-title, .pv-brand { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #E2BD62 !important; -webkit-text-fill-color: #E2BD62 !important; }
  .pv-main { background: radial-gradient(ellipse at 30% 20%, #23398C 0%, #0E1A4D 70%) !important; }
  .pv-card { box-shadow: none; }
  .pv-punch span.on::after { background: #2A0E0C; box-shadow: none; }
  .pv-led { text-shadow: none; }
  .pv-route { text-shadow: none; }
}