/* =============================================================================
   Project:  Truckwash Kassel · Location: /assets/css/wizard.css
   File:     wizard.css
   Function: Kiosk wizard layout. Hard requirement: fits ONE landscape tablet
             screen with NO page scroll. Achieved with a fixed full-viewport
             flex column (header / body / actions); only the program grid
             scrolls internally. Touch targets >= 60px (spec).
   Version:  1.0.0   Build: 2026.06.14.1418
   ============================================================================= */

html, body { height: 100%; margin: 0; }
body:has(.kiosk-root) { overflow: hidden; }            /* no page scroll */

.kiosk-root {
  position: fixed; inset: 0;                            /* fill the viewport */
  display: flex; flex-direction: column; overflow: hidden;
  background: #F4F4F5; color: #0A0A0A;
  font-size: clamp(15px, 1.4vw, 19px);
}
.kiosk-root * { box-sizing: border-box; }

/* ---- header + PKW bar (fixed height) ---- */
.kiosk-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1rem; background: #fff; border-bottom: 2px solid #E4E4E7;
}
.kiosk-top .brand { font-weight: 700; font-size: 1.2rem; }
.kiosk-top .brand span { color: var(--bs-primary, #FF2E78); }
.kiosk-top .steps { margin-left: auto; font-weight: 700; color: #0A0A0A; }
.lang-btn {
  min-height: 48px; padding: 0 1rem; border-radius: 4px; font-weight: 700;
  border: 2px solid #0A0A0A; background: #fff; color: #0A0A0A; cursor: pointer;
}
.pkw-bar {
  flex: 0 0 auto; background: #FFF0F6; color: #C9105B; font-size: .82rem;
  padding: .3rem 1rem; border-bottom: 1px solid #FFD6E7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- step area (grows; never scrolls the page) ---- */
.kiosk-body { flex: 1 1 auto; min-height: 0; position: relative; display: flex; }
.step { display: none; flex: 1; min-height: 0; flex-direction: column; padding: .9rem 1.1rem; overflow: hidden; }
.step.active { display: flex; }
.hint { color: #52525B; font-size: .85rem; margin: .15rem 0 .4rem; }

/* Step 1 — split screen */
.split { display: flex; gap: 1rem; flex: 1; min-height: 0; }
.pane { flex: 1; background: #fff; border-radius: 4px; padding: .9rem 1.1rem;
        overflow: auto; display: flex; flex-direction: column; gap: .35rem; }
.pane.lookup { flex: 0 0 36%; background: #FFF0F6; }
.kiosk-root label { font-weight: 600; font-size: .9rem; margin-top: .2rem; }
.kiosk-root input {
  min-height: 56px; font-size: 1.1rem; border: 2px solid #0A0A0A;
  border-radius: 4px; padding: .4rem .7rem; width: 100%; background: #fff;
}
.kiosk-root input:focus-visible { outline: 3px solid var(--bs-primary, #FF2E78); outline-offset: 1px; }
.plate-input { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.row2 { display: flex; gap: .6rem; } .row2 > div { flex: 1; }
.lu-msg { font-weight: 700; min-height: 1.4rem; }

/* Step 2 — program tiles (the only internally scrollable region) */
.selection-head { flex: 0 0 auto; font-weight: 700; margin-bottom: .35rem; }
.selection-head small { font-weight: 400; color: #52525B; margin-left: .6rem; }
.tiles-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .25rem; }
.cat { font-size: .8rem; letter-spacing: .04em; color: #0A0A0A; text-transform: uppercase; margin: .45rem 0 .3rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
.tile {
  position: relative; min-height: 132px; background: #fff; border: 2px solid #E4E4E7;
  border-radius: 4px; padding: .5rem .55rem; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; color: inherit;
}
.tile .num { position: absolute; top: .3rem; right: .5rem; font-weight: 700; color: #52525B; }
.tile .bi { font-size: 4.5rem; line-height: 1; color: var(--bs-primary, #FF2E78); display: block; margin: .1rem auto; text-align: center; }
.tile .tile-icon-img { height: 4.8rem; width: auto; max-width: 96%; object-fit: contain; display: block; margin: .1rem auto; }
.tile .tname { font-size: .78rem; font-weight: 600; line-height: 1.12; margin: .2rem 0; }
.tile .price { font-weight: 700; font-size: 1rem; margin-top: auto; }
.tile .net { font-size: .68rem; color: #52525B; }
.tile.selected { border-color: var(--bs-primary, #FF2E78); box-shadow: 0 0 0 3px rgba(255,46,120,.22); }
.trailer-badge {
  position: absolute; bottom: .35rem; right: .4rem; font-size: .54rem; font-weight: 700;
  background: var(--bs-warning, #FF2E78); color: #0A0A0A; padding: .06rem .3rem; border-radius: 4px;
}
.trailer-input { flex: 0 0 auto; background: #FFF0F6; border-radius: 4px; padding: .5rem .8rem; margin-top: .5rem; }
.addons { flex: 0 0 auto; margin-top: .5rem; }
.addons-empty { color: #52525B; font-size: .85rem; font-style: italic; }

/* Step 3 — signature fills the remaining height */
.step-3 { align-items: center; }
.sig-wrap { flex: 1 1 auto; width: 100%; min-height: 0; background: #fff; border: 2px dashed #0A0A0A; border-radius: 4px; margin: .4rem 0; }
#sigCanvas { width: 100%; height: 100%; display: block; touch-action: none; }

/* ---- action bar (fixed height) ---- */
.kiosk-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; background: #fff; border-top: 2px solid #E4E4E7; }
.kiosk-actions .summary { margin: 0 auto; font-weight: 600; color: #0A0A0A; text-align: center; }
.btn-big {
  min-height: 60px; min-width: 132px; font-size: 1.05rem; font-weight: 700;
  border-radius: 4px; padding: .5rem 1.4rem; border: 2px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
}
.btn-primary   { background: var(--bs-primary, #FF2E78); color: #fff; }
.btn-success   { background: var(--bs-success, #01930E); color: #fff; }
.btn-secondary { background: #0A0A0A; color: #fff; }
.btn-outline   { background: #fff; border-color: #0A0A0A; color: #0A0A0A; }
.btn-big:disabled { opacity: .4; cursor: not-allowed; }
.btn-big:focus-visible { outline: 3px solid #FF2E78; outline-offset: 2px; }

/* ---- overlays ---- */
.overlay { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column;
           align-items: center; justify-content: center; padding: 2rem; text-align: center;
           background: rgba(15,23,42,.97); color: #fff; }
.overlay[hidden] { display: none; }
.overlay-title { margin-bottom: 1.25rem; }
.lang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; max-width: 720px; width: 100%; }
.lang-tile { min-height: 120px; border-radius: 4px; border: 2px solid #FF2E78; background: #0A0A0A;
             color: #fff; font-weight: 700; cursor: pointer; display: flex; flex-direction: column;
             align-items: center; justify-content: center; gap: .35rem; }
.lang-tile span { font-size: 2rem; }
.lang-tile small { color: #C9C9CF; }

.lock-msg { font-size: 1.5rem; font-weight: 800; max-width: 720px; margin-bottom: 1.4rem; line-height: 1.25; }
.lock-msg .bi { font-size: 2.4rem; display: block; margin-bottom: .5rem; }
.keypad { background: #fff; border-radius: 4px; padding: 1.1rem; width: 320px; color: #0A0A0A; }
.pin-label { font-weight: 600; margin-bottom: .5rem; }
#pinDisplay { width: 100%; height: 58px; font-size: 1.8rem; text-align: center; letter-spacing: .4em;
              border: 2px solid #0A0A0A; border-radius: 4px; margin-bottom: .7rem; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.keys button { min-height: 60px; font-size: 1.4rem; font-weight: 700; border-radius: 4px;
               border: 2px solid #E4E4E7; background: #F4F4F5; cursor: pointer; }
.keys .ok  { background: var(--bs-success, #01930E); color: #fff; border-color: var(--bs-success, #01930E); }
.keys .clr { background: var(--bs-danger, #C40010); color: #fff; border-color: var(--bs-danger, #C40010); }
.pin-msg { min-height: 1.4rem; margin-top: .5rem; font-weight: 700; color: var(--bs-danger, #C40010); }

.info-card { background: #fff; color: #0A0A0A; border-radius: 4px; padding: 1.5rem; max-width: 520px; }
.info-card h3 { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Step-2 add-ons (Faza 8) ---- */
.addons { border-top: 1px solid var(--line, #E4E4E7); padding-top: .5rem; margin-top: .4rem;
          max-height: 27vh; display: flex; flex-direction: column; }
.addons[hidden] { display: none; }
.addons-title { font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.addons-list { display: flex; flex-wrap: wrap; gap: .4rem; overflow: auto; }
.addon-chip { display: inline-flex; align-items: center; gap: .45rem; background: #fff;
              border: 1.5px solid var(--line, #0A0A0A); border-radius: 4px; padding: .4rem .6rem;
              cursor: pointer; font-size: .9rem; }
.addon-chip input[type=checkbox] { width: 18px; height: 18px; flex: none; }
.addon-chip .ac-name { font-weight: 600; }
.addon-chip .ac-price { color: #0A0A0A; font-variant-numeric: tabular-nums; }
.addon-chip.rec { border-color: #FF2E78; }
.addon-chip.rec .bi-star-fill { color: #C9105B; }
.addon-chip.req { border-style: dashed; color: #0A0A0A; }
.addon-chip.on { background: #FFF0F6; border-color: #FF2E78; }
.addon-chip .ac-qty { width: 56px; padding: .15rem .3rem; }

/* staff review: add-on lines */
.addon-rows { margin: .4rem 0 0; width: 100%; border-collapse: collapse; font-size: .92rem; }
.addon-rows td { padding: .25rem 0; border-top: 1px dashed var(--line, #E4E4E7); }
.addon-rows td.r { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Step-2 packages (Faza 12) ---- */
.packages { border-bottom: 1px solid var(--line, #E4E4E7); padding-bottom: .45rem; margin-bottom: .45rem; }
.pkg-head { font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }
.pkg-head small { font-weight: 400; color: #52525B; margin-left: .5rem; }
.pkg-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .2rem; }
.pkg-card { flex: 0 0 auto; max-width: 230px; text-align: left; background: #fff;
            border: 1.5px solid var(--line, #0A0A0A); border-radius: 4px; padding: .5rem .7rem;
            cursor: pointer; display: flex; flex-direction: column; gap: .1rem; position: relative; }
.pkg-card .pk-name { font-weight: 700; font-size: .95rem; padding-right: 1.1rem; }
.pkg-card .pk-meta { font-size: .78rem; color: #0A0A0A; }
.pkg-card .bi-gem { position: absolute; top: .45rem; right: .5rem; color: #C9105B; }
.pkg-card.prem { border-color: #C9105B; }
.pkg-card.active { background: #FFF0F6; border-color: #FF2E78; box-shadow: 0 0 0 2px rgba(255,46,120,.25); }

/* ---- add-ons modal (opens after program selection; mirrors .info-card) ---- */
.addons-overlay { align-items: center; justify-content: center; padding: 1rem; }
.addons-card { width: min(580px, 94vw); max-height: 84vh; display: flex; flex-direction: column; gap: .85rem; }
.addons-card .addons { border-top: 0; margin-top: 0; padding-top: 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.addons-card .addons-list { max-height: 60vh; overflow: auto; }
.addons-card .addons-actions { display: flex; gap: .6rem; }
.addons-card .addons-actions .btn-big { flex: 1; }
.kiosk-top .brand img { height: 30px; width: auto; display: block; }

/* ---- 2026 high-contrast kiosk (poor-lighting legibility) ---- */
.tile { border: 2px solid #0A0A0A; color: #0A0A0A; }
.tile.selected { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(255,46,120,.40); }
.tile .num { color: #0A0A0A; font-weight: 800; }
.tile .tname { color: #0A0A0A; font-weight: 700; }
.tile .price { color: #0A0A0A; font-weight: 800; }
.tile .net  { color: #0A0A0A; }
.cat { color: #0A0A0A; font-weight: 800; }
.pkg-card { border: 2px solid #0A0A0A; color: #0A0A0A; }
.plate-input, .pane input { border: 2px solid #0A0A0A; color: #0A0A0A; font-weight: 600; }
.btn-big { font-weight: 800; }
.selection-head, .pkg-head, .addons-title { color: #0A0A0A; }

/* ============================================================================
   Faza 32 — Programmauswahl-Step füllt den Bildschirm (dynamische Größen)
   The program-select step ('.step-2', data-step=1) must fill the kiosk viewport
   with no empty gap. The category grids flex-grow to consume the available
   height and tiles stretch into it; everything is sized in vh/vw/clamp so it
   scales with the tablet. Falls back to internal scroll on very small screens.
   ============================================================================ */
.step-2 { gap: clamp(.25rem, .8vh, .6rem); }

/* the scroll region becomes a flex column whose grids share the leftover height */
.step-2 .tiles-scroll { display: flex; flex-direction: column; gap: clamp(.3rem, 1vh, .7rem); }
.step-2 .tiles-scroll .cat { flex: 0 0 auto; margin: clamp(.2rem,.8vh,.5rem) 0 clamp(.12rem,.5vh,.35rem); }

/* each category grid grows; its rows stretch to fill -> tiles get taller */
.step-2 .tiles-scroll .tiles {
  flex: 1 1 auto; align-content: stretch;
  grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 14vw, 240px), 1fr));
  grid-auto-rows: minmax(clamp(150px, 22vh, 300px), 1fr);
  gap: clamp(.4rem, 1.1vh, .75rem);
}
.step-2 .tiles .tile {
  height: 100%; min-height: 0;
  padding: clamp(.45rem,1.2vh,.95rem) clamp(.5rem,1vw,.9rem);
}
/* tile internals: the IMAGE is the hero (drivers identify by picture).
   The icon/image flex-grows to consume all spare height; text stays compact. */
.step-2 .tiles .tile{ justify-content:flex-start; }
.step-2 .tile .num            { font-size: clamp(.9rem, 1.9vh, 1.35rem); }
.step-2 .tile .bi             { flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center;
                                font-size: clamp(3.5rem, 14vh, 11rem); line-height:1; margin:.1rem 0; }
.step-2 .tile .tile-icon-img  { flex:1 1 auto; min-height:0; width:100%; height:auto; max-width:100%;
                                max-height:none; object-fit:contain; margin:.1rem auto; }
.step-2 .tile .tname          { flex:0 0 auto; font-size: clamp(.74rem, 1.6vh, 1.05rem); line-height:1.1; margin: clamp(.15rem,.7vh,.4rem) 0 .1rem; }
.step-2 .tile .price          { flex:0 0 auto; font-size: clamp(1rem, 2.2vh, 1.55rem); }
.step-2 .tile .net            { flex:0 0 auto; font-size: clamp(.66rem, 1.35vh, .92rem); }
.step-2 .trailer-badge        { font-size: clamp(.54rem,1.25vh,.8rem); }

/* Komplettpakete fill the width and grow a touch with height */
.step-2 .packages { flex: 0 0 auto; }
.step-2 .pkg-row  { gap: clamp(.4rem,.8vw,.7rem); }
.step-2 .pkg-card {
  flex: 1 1 0; max-width: none; min-width: clamp(150px, 12vw, 235px);
  padding: clamp(.5rem,1.2vh,.95rem) clamp(.6rem,1vw,.95rem);
}
.step-2 .pkg-card .pk-name { font-size: clamp(.92rem, 1.7vh, 1.12rem); }
.step-2 .pkg-card .pk-meta { font-size: clamp(.78rem, 1.45vh, .98rem); }
.step-2 .selection-head    { font-size: clamp(1rem, 2.1vh, 1.4rem); }

/* ============================================================================
   REDESIGN — Programmkacheln + Pakete-Modal · MONO + PINK (hoher Kontrast)
   Last in the file => wins. Tiles: kräftige schwarze Rahmen, klare Typo-Hierarchie
   (Name oben, Preis groß unten), deutlich sichtbare Auswahl (Pink-Füllung + Haken).
   Pakete: aus der Kachelliste entfernt -> Button "Pakete" öffnet Vollbild-Modal.
   ============================================================================ */

/* ---- selection head as a flex row to seat the Pakete button on the right ---- */
.step-2 .selection-head{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.step-2 .selection-head small{ flex:1 1 auto; }

/* ---- Pakete button (opens the fullscreen modal) ---- */
.pkg-open-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem;
  background:#0A0A0A; color:#fff; border:2px solid #0A0A0A; border-radius:6px;
  font-weight:800; letter-spacing:-.01em; cursor:pointer;
  padding:clamp(.5rem,1.1vh,.8rem) clamp(.8rem,1.4vw,1.3rem);
  font-size:clamp(.95rem,1.8vh,1.2rem); line-height:1;
}
.pkg-open-btn .bi{ font-size:1.15em; color:var(--bs-primary,#E10A5A); }
.pkg-open-btn:hover{ background:#000; }
.pkg-open-btn:active{ transform:translateY(1px); }

/* ---- high-contrast program tile ---- */
.step-2 .tiles .tile{
  background:#fff; border:2.5px solid #0A0A0A; border-radius:8px;
  display:flex; flex-direction:column; align-items:stretch;
  box-shadow:0 1px 0 rgba(10,10,11,.04);
  transition:box-shadow .12s ease, transform .12s ease, border-color .12s ease, background-color .12s ease;
}
.step-2 .tiles .tile:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(10,10,11,.14); }

/* number badge: solid black chip, top-left, out of the way of the image */
.step-2 .tile .num{
  position:absolute; top:0; left:0; z-index:2;
  background:#0A0A0A; color:#fff; font-weight:800;
  min-width:1.7em; height:1.7em; padding:0 .4em; border-radius:0 0 8px 0;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(.8rem,1.7vh,1.15rem);
}

/* image stays the hero on white */
.step-2 .tile .tile-icon-img,
.step-2 .tile .bi{ margin-top:.2rem; }

/* text block: name (strong) then a baseline row with big price + small netto */
.step-2 .tile .tname{
  flex:0 0 auto; color:#0A0A0A; font-weight:800; letter-spacing:-.01em;
  line-height:1.12; text-align:center;
  font-size:clamp(.8rem,1.7vh,1.12rem); margin:.25rem 0 .15rem;
}
.step-2 .tile .price{
  flex:0 0 auto; color:#0A0A0A; font-weight:900; letter-spacing:-.02em; text-align:center;
  font-size:clamp(1.15rem,2.6vh,1.9rem); line-height:1; margin-top:auto;
}
.step-2 .tile .net{
  flex:0 0 auto; color:#52525B; font-weight:600; text-align:center;
  font-size:clamp(.64rem,1.3vh,.9rem); margin-top:.1rem;
}

/* SELECTED: pink fill + thick pink ring + checkmark badge (unmistakable) */
.step-2 .tiles .tile.selected{
  background:var(--pink-tint,#FFF0F6); border-color:var(--bs-primary,#E10A5A);
  box-shadow:0 0 0 4px rgba(225,10,90,.30), 0 10px 26px rgba(225,10,90,.20);
}
.step-2 .tiles .tile.selected .tname,
.step-2 .tiles .tile.selected .price{ color:var(--pink-deep,#B80A4A); }
.step-2 .tiles .tile.selected::after{
  content:"\F26E";                          /* bi-check-lg glyph */
  font-family:"bootstrap-icons"; position:absolute; top:.25rem; right:.3rem; z-index:2;
  width:1.55em; height:1.55em; border-radius:50%;
  background:var(--bs-primary,#E10A5A); color:#fff; font-weight:400;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(.85rem,1.7vh,1.15rem); box-shadow:0 2px 6px rgba(225,10,90,.4);
}

/* trailer badge: solid, high-contrast (kept bottom-right) */
.step-2 .trailer-badge{
  background:#0A0A0A; color:#fff; font-weight:800; letter-spacing:.02em;
  border-radius:4px; padding:.12em .45em;
}

/* ============================================================================
   Pakete — Vollbild-Modal
   ============================================================================ */
.pkg-modal{
  position:fixed; inset:0; z-index:1200;
  background:rgba(10,10,11,.72); backdrop-filter:blur(3px);
  display:flex; flex-direction:column; padding:clamp(.8rem,3vh,2.5rem);
}
.pkg-modal[hidden]{ display:none; }
.pkg-modal-head{
  flex:0 0 auto; display:flex; align-items:center; gap:1rem;
  background:#0A0A0A; color:#fff; border-radius:12px 12px 0 0;
  padding:clamp(.8rem,1.8vh,1.3rem) clamp(1rem,2vw,1.6rem);
  max-width:1100px; width:100%; margin:0 auto;
}
.pkg-modal-title{ font-weight:900; letter-spacing:-.02em; font-size:clamp(1.2rem,2.6vh,1.8rem); }
.pkg-modal-head small{ display:block; color:rgba(255,255,255,.6); font-weight:500; font-size:clamp(.78rem,1.5vh,.98rem); }
.pkg-modal-head>div{ flex:1 1 auto; }
.pkg-modal-close{
  flex:0 0 auto; width:clamp(2.4rem,5vh,3.2rem); height:clamp(2.4rem,5vh,3.2rem);
  border-radius:8px; border:2px solid rgba(255,255,255,.3); background:transparent; color:#fff;
  font-size:clamp(1rem,2.2vh,1.5rem); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.pkg-modal-close:hover{ background:var(--bs-primary,#E10A5A); border-color:var(--bs-primary,#E10A5A); }
.pkg-modal-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; background:#fff;
  border-radius:0 0 12px 12px; padding:clamp(1rem,2.5vh,2rem);
  max-width:1100px; width:100%; margin:0 auto;
}
.pkg-grid{
  display:grid; gap:clamp(.7rem,1.6vh,1.2rem);
  grid-template-columns:repeat(auto-fill, minmax(clamp(220px,28vw,340px),1fr));
}
/* package card inside the modal (overrides old inline pkg-card layout) */
.pkg-modal .pkg-card{
  position:relative; flex:none; max-width:none; min-width:0; text-align:left;
  background:#fff; border:2.5px solid #0A0A0A; border-radius:10px;
  padding:clamp(.9rem,2vh,1.4rem) clamp(1rem,1.6vw,1.4rem);
  display:flex; flex-direction:column; gap:.2rem; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.pkg-modal .pkg-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(10,10,11,.18); }
.pkg-modal .pkg-card .pk-name{ font-weight:900; letter-spacing:-.01em; color:#0A0A0A; font-size:clamp(1.05rem,2.1vh,1.4rem); padding-right:2rem; }
.pkg-modal .pkg-card .pk-base{ color:#52525B; font-weight:600; font-size:clamp(.82rem,1.5vh,1rem); }
.pkg-modal .pkg-card .pk-price{ color:#0A0A0A; font-weight:900; letter-spacing:-.02em; font-size:clamp(1.4rem,3vh,2.1rem); margin-top:.25rem; }
.pkg-modal .pkg-card .pk-meta{ color:var(--pink-deep,#B80A4A); font-weight:700; font-size:clamp(.8rem,1.5vh,1rem); }
.pkg-modal .pkg-card .pkg-gem{
  position:absolute; top:.7rem; right:.8rem; width:2em; height:2em; border-radius:50%;
  background:linear-gradient(140deg,var(--bs-primary,#E10A5A),var(--pink-deep,#B80A4A));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:.95em;
}
.pkg-modal .pkg-card.prem{ border-color:var(--bs-primary,#E10A5A); }
.pkg-modal .pkg-card.prem .pk-name{ padding-right:2.6rem; }

/* lock body scroll while modal open */
body.pkg-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .step-2 .tiles .tile, .pkg-modal .pkg-card, .pkg-open-btn{ transition:none; }
}

/* ---- abbreviation legend under the program list (kiosk) ---- */
.abbr-legend{
  flex:0 0 auto; margin:.6rem 0 .2rem; color:#52525B; font-weight:600;
  font-size:clamp(.7rem,1.4vh,.95rem); text-align:center; letter-spacing:.01em;
}
.step-2 .abbr-legend{ padding-top:.3rem; border-top:1px solid var(--line,#E4E4E7); }