/* kiosks — כללי CSS ייחודיים לעמוד. הבסיס המשותף נמצא ב-assets/css/site.css */
.pg /* ===== תוספות: מוקאפ מסך קיוסק ===== */
  .kiosk-stage{position:relative; display:flex; justify-content:center; align-items:center}
.pg .kiosk-stage::before{content:""; position:absolute; inset:-6% -10%; z-index:0; background:radial-gradient(60% 55% at 50% 22%,rgba(139,92,246,.30),transparent 70%); filter:blur(8px)}
.pg .kiosk{position:relative; z-index:1; width:300px; max-width:100%; border-radius:34px; padding:14px; background:linear-gradient(160deg,#1a1030,#0b0720); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow), 0 0 0 6px rgba(20,14,40,.6)}
.pg .kiosk::after{content:""; position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); width:120px; height:14px; border-radius:0 0 14px 14px; background:linear-gradient(160deg,#1a1030,#0b0720); border:1px solid var(--glass-border); border-top:0}
.pg .k-screen{position:relative; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#0d1230,#0a0a1e); border:1px solid var(--line); height:520px; display:flex; flex-direction:column}
.pg .k-top{display:flex; align-items:center; gap:9px; padding:14px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.pg .k-logo{width:30px; height:30px; border-radius:9px; background:var(--grad-cta); display:grid; place-items:center; font-size:16px; flex-shrink:0}
.pg .k-brandtxt{font-weight:700; font-size:14px}
.pg .k-brandtxt em{font-style:normal; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.pg .k-sub{font-size:10.5px; color:var(--faint); margin-top:1px}
.pg .k-247{margin-inline-start:auto; font-size:10px; font-weight:700; color:var(--emerald); border:1px solid rgba(52,211,153,.3); background:rgba(52,211,153,.08); padding:4px 8px; border-radius:999px}
.pg .k-menu{flex:1; overflow:hidden; padding:14px 16px; display:flex; flex-direction:column; gap:10px}
.pg .k-menu-title{font-size:12px; color:var(--muted); font-weight:700}
.pg .k-item{display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); transition:transform .18s, background .18s, border-color .18s}
.pg .k-item .emo{font-size:22px; width:34px; height:34px; display:grid; place-items:center; background:rgba(139,92,246,.12); border-radius:10px; flex-shrink:0}
.pg .k-item .nm{font-weight:700; font-size:13.5px}
.pg .k-item .pr{margin-inline-start:auto; font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.pg .k-item.tapped{background:linear-gradient(135deg,rgba(99,102,241,.32),rgba(168,85,247,.24)); border-color:rgba(168,85,247,.5); transform:scale(.97)}
.pg .k-plus{position:absolute; font-size:12px; font-weight:700; color:var(--emerald); opacity:0; pointer-events:none}
.pg .k-plus.go{animation:kfloat 1s ease-out forwards}
@keyframes kfloat{0%{opacity:0; transform:translateY(0)}20%{opacity:1}100%{opacity:0; transform:translateY(-34px)}}
.pg .k-upsell{margin:0 16px; padding:12px 14px; border-radius:14px; background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(244,114,182,.12)); border:1px solid rgba(251,191,36,.3); display:flex; align-items:center; gap:10px; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .4s ease, margin .4s ease}
.pg .k-upsell.show{max-height:90px; opacity:1; margin:0 16px 6px}
.pg .k-upsell .ue{font-size:20px}
.pg .k-upsell .ut{font-size:12.5px; font-weight:700; line-height:1.4}
.pg .k-upsell .ut small{display:block; color:var(--amber); font-weight:700; font-family:var(--mono); margin-top:2px}
.pg .k-upsell .uadd{margin-inline-start:auto; font-size:11px; font-weight:700; color:#0b0720; background:var(--amber); padding:6px 11px; border-radius:999px}
.pg .k-bar{margin-top:auto; padding:14px 16px; border-top:1px solid var(--line); background:rgba(255,255,255,.02); display:flex; align-items:center; gap:12px}
.pg .k-total{display:flex; flex-direction:column}
.pg .k-total .tl{font-size:10.5px; color:var(--faint)}
.pg .k-total .tv{font-size:22px; font-weight:700; font-family:var(--mono); font-variant-numeric:tabular-nums; background:var(--grad-heading); -webkit-background-clip:text; background-clip:text; color:transparent}
.pg .k-pay{margin-inline-start:auto; font-size:12.5px; font-weight:700; color:#fff; background:var(--grad-cta); padding:11px 18px; border-radius:12px; box-shadow:0 10px 24px -8px rgba(139,92,246,.7)}
.pg .k-tick{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; background:linear-gradient(180deg,rgba(10,10,30,.92),rgba(10,10,30,.97)); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .5s}
.pg .k-tick.show{opacity:1}
.pg .k-tick .ring{width:70px; height:70px; border-radius:50%; background:var(--grad-cta); display:grid; place-items:center; font-size:34px; box-shadow:0 0 0 8px rgba(139,92,246,.12)}
.pg .k-tick .tt{font-size:18px; font-weight:700}
.pg .k-tick .ts{font-size:13px; color:var(--emerald); font-weight:700}
.pg .k-badge{position:absolute; top:14px; inset-inline-end:14px; z-index:1; font-size:10.5px; font-weight:700; color:var(--emerald); border:1px solid rgba(52,211,153,.3); background:rgba(10,10,30,.7); padding:5px 10px; border-radius:999px; display:flex; align-items:center; gap:6px; opacity:0; transition:opacity .4s}
.pg .k-badge.show{opacity:1}
.pg .k-badge .d{width:6px; height:6px; border-radius:50%; background:var(--emerald); animation:pulse 2s infinite}
.pg /* match homepage header exactly (eliminate jump between pages) */
  nav{position:fixed; top:0; left:0; right:0; background:transparent; border-bottom:1px solid transparent; -webkit-backdrop-filter:none; backdrop-filter:none}
.pg /* nav links = plain text like the homepage (no pill padding -> no width/position jump) */
  .nav-links a{padding:0 !important; border-radius:0 !important; background:none !important; font-size:.9rem; font-weight:500; color:var(--muted); transition:color .15s}
.pg /* real kiosk photos */
  .kreal-hero{max-width:340px; margin:0 auto 26px; border-radius:20px; overflow:hidden; box-shadow:var(--glass-shadow); background:rgba(255,255,255,.04); border:1px solid var(--glass-border)}
.pg .kreal-hero video{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#0c0920}
.pg .kreal-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.pg .kreal-grid figure{margin:0; min-width:0; border-radius:16px; overflow:hidden; border:1px solid var(--glass-border); background:var(--glass-bg)}
.pg .kreal-grid figure video{display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:#0c0920}
.pg .kreal-grid figcaption{padding:10px 12px; font-size:13px; color:var(--muted); text-align:center}
@media(max-width:820px){
  .pg .kreal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}