/* Live kiosk demo (event page). Section layout uses site tokens; the kiosk screen keeps its own
   1080x1920 design and is scaled to fit. All kiosk classes are k-/kd- prefixed to avoid site styles. 2026-11-01 */

/* ---------- section layout ---------- */
.kd{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:clamp(28px,4vw,56px);align-items:start;margin-top:8px}
.kd-ctrl{display:flex;flex-direction:column;gap:22px;background:#fff;border:1px solid rgba(20,29,48,.09);border-radius:var(--r-lg);padding:26px 26px 24px;box-shadow:var(--shadow-1);position:sticky;top:calc(var(--header-h) + 18px)}
.kd-ctrl h3{font-family:var(--f-sans);font-size:19px;font-weight:600;margin:0;line-height:1.3}
.kd-field{display:flex;flex-direction:column;gap:7px;font-weight:500;font-size:15px}
.kd-field input{font:inherit;font-size:17px;font-weight:400;padding:12px 14px;border:1px solid rgba(20,29,48,.2);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);width:100%}
.kd-field input:focus{outline:2px solid var(--gold-500);outline-offset:1px}
.kd-group{display:flex;flex-direction:column;gap:9px}
.kd-group>span{font:500 12.5px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-600)}
.kd-chips{display:flex;flex-wrap:wrap;gap:8px}
.kd-chips button{font:500 14px/1.2 var(--f-sans);padding:9px 13px;border-radius:999px;border:1px solid rgba(20,29,48,.18);background:var(--paper);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.kd-chips button:hover{border-color:var(--gold-500)}
.kd-chips button[aria-pressed="true"]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.kd-play{display:flex;gap:10px;flex-wrap:wrap}
.kd-play .btn{min-height:46px;padding:10px 20px;font-size:15px;flex:1}
.kd-hint{margin:0;font-size:13.5px;color:var(--ink-70);line-height:1.5}
.kd-hint b{font-weight:600;color:var(--ink)}

/* the device: dark bezel + small stand, screen scaled inside */
.kd-device{position:relative;justify-self:center;width:100%;max-width:440px}
.kd-bezel{background:linear-gradient(160deg,#1B2533,#0B1018);border-radius:30px;padding:14px;box-shadow:0 30px 70px -28px rgba(10,20,38,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.kd-box{position:relative;width:100%;aspect-ratio:1080/1920;border-radius:18px;overflow:hidden;background:#03111F}
.kd-box>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.kd-ready .kd-box>img{opacity:0;pointer-events:none}
.kd-live{position:absolute;inset:0}
.kd-stand{width:34%;height:46px;margin:-2px auto 0;background:linear-gradient(180deg,#141C27,#0B1018);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);border-radius:0 0 8px 8px;opacity:.9}
.kd-cap{text-align:center;font-size:13px;color:var(--ink-50);margin:10px 0 0}
.kd-legal{font-size:12px;color:var(--ink-50);margin-top:18px}
.kd-legal a{color:inherit}
@media (max-width:900px){
  .kd{grid-template-columns:1fr}
  .kd-ctrl{position:static;order:2}
  .kd-device{order:1;max-width:380px}
}
@media (prefers-reduced-motion:reduce){.kd-box>img{transition:none}}

/* ---------- kiosk screen 1080 x 1920 (design from the event kiosk) ---------- */
.k-screen{
  --sea:#06213A;--deep:#03111F;--tide:#0D3150;--line:rgba(226,240,247,.16);
  --foam:#F1F8FB;--haze:#A9C2D0;--signal:#4FE3F2;--coral:#FF6B5E;--coral-ink:#3B0904;--amber:#FFC25C;--host-h:560px;
  position:absolute;top:0;left:0;width:1080px;height:1920px;overflow:hidden;transform-origin:0 0;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:150px var(--host-h) 440px 116px minmax(0,1fr) 200px;
  background:linear-gradient(180deg,#0A2946 0%,var(--sea) 38%,#052036 70%,var(--deep) 100%);
  color:var(--foam);font-family:"Readex Pro","Segoe UI",Tahoma,sans-serif;font-size:30px;line-height:1.4;text-align:start;direction:ltr}
.k-screen[dir="rtl"]{line-height:1.55;direction:rtl}
.k-screen *,.k-screen *::before,.k-screen *::after{box-sizing:border-box}
.k-screen p,.k-screen ul,.k-screen ol,.k-screen figure{margin:0;padding:0}
.k-screen button{font:inherit;color:inherit;cursor:pointer;-webkit-backdrop-filter:none;backdrop-filter:none}
.k-screen button:focus-visible{outline:4px solid var(--signal);outline-offset:4px}

.k-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 64px;border-bottom:1px solid var(--line);position:relative;z-index:3}
.k-brand{display:flex;align-items:center;gap:28px;min-width:0}
.k-brand img{height:70px;width:auto;display:block;flex:none}
.k-event{display:flex;flex-direction:column;min-width:0;padding-inline-start:28px;border-inline-start:2px solid var(--line)}
.k-event b{font-size:36px;font-weight:600;letter-spacing:.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:560px}
.k-event span{font-size:24px;color:var(--haze);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:560px}
.k-utility{display:flex;gap:16px;flex:none}
.k-chip{height:76px;min-width:76px;padding:0 30px;border-radius:38px;border:2px solid rgba(241,248,251,.32);background:rgba(6,33,58,.6);font-size:28px;font-weight:500}
.k-chip:active{background:var(--tide)}

.k-host{position:relative;z-index:1;min-width:0;overflow:visible}
.k-host::before{content:"";position:absolute;inset:-150px 0 -120px;background:url(../kiosk/coast.webp) 28% 70%/cover no-repeat;opacity:.42;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 62%,transparent 100%)}
.k-host::after{content:"";position:absolute;left:50%;top:48%;width:760px;height:620px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(79,227,242,.16),transparent);pointer-events:none}
.k-host canvas{position:relative;z-index:1;display:block;width:100%;height:100%}

.k-talk{display:grid;grid-template-columns:1fr 380px;column-gap:44px;align-items:center;padding:0 84px 0 64px;direction:ltr;position:relative;z-index:2}
.k-screen[dir="rtl"] .k-words{direction:rtl}
.k-h{font-size:92px;line-height:1.02;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.k-h.k-long{font-size:76px}
.k-screen[dir="rtl"] .k-h{font-size:84px;line-height:1.2;letter-spacing:0}
.k-screen[dir="rtl"] .k-h.k-long{font-size:70px}
.k-lede{margin-top:26px!important;font-size:36px;line-height:1.38;color:#D3E3EB;max-width:560px;text-wrap:pretty}
.k-vf-fig{display:flex;flex-direction:column;gap:14px;align-items:center}
.k-vf{width:380px;height:300px;border-radius:28px;background:#020B15;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(79,227,242,.22)}
.k-vf i{position:absolute;width:54px;height:54px;border:5px solid rgba(241,248,251,.75)}
.k-vf i:nth-child(1){top:26px;left:26px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.k-vf i:nth-child(2){top:26px;right:26px;border-left:0;border-bottom:0;border-top-right-radius:14px}
.k-vf i:nth-child(3){bottom:26px;left:26px;border-right:0;border-top:0;border-bottom-left-radius:14px}
.k-vf i:nth-child(4){bottom:26px;right:26px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.k-vf svg{position:absolute;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);opacity:.32}
.k-sweep{position:absolute;left:30px;right:30px;height:4px;top:50%;background:var(--signal);box-shadow:0 0 22px 4px rgba(79,227,242,.6);opacity:0}
.k-vf-fig figcaption{font-size:24px;color:var(--haze)}
.k-screen[dir="rtl"] .k-vf-fig figcaption{direction:rtl}

.k-steps{list-style:none;margin:0;padding:0 96px 0 64px!important;display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.k-steps li{display:flex;align-items:center;gap:14px;font-size:26px;color:var(--haze);white-space:nowrap}
.k-steps li+li::before{content:"";width:64px;height:2px;background:var(--line);margin-inline-end:4px}
.k-n{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:2px solid rgba(241,248,251,.34);font-weight:600;font-size:26px;flex:none}
.k-steps li[data-s="now"]{color:var(--foam);font-weight:500}
.k-steps li[data-s="now"] .k-n{background:var(--foam);color:var(--sea);border-color:var(--foam)}
.k-steps li[data-s="done"] .k-n{border-color:var(--signal);color:var(--signal)}
.k-steps li[data-s="done"]{color:#CFE6EE}

.k-panel{padding:22px 84px 0 64px;position:relative;z-index:2}
.k-panel>div{display:none}
.k-screen[data-state="idle"] [data-for~="idle"],.k-screen[data-state="scanning"] [data-for~="scanning"],
.k-screen[data-state="review"] [data-for~="review"],.k-screen[data-state="printing"] [data-for~="printing"],
.k-screen[data-state="ready"] [data-for~="ready"],.k-screen[data-state="error"] [data-for~="error"],
.k-screen[data-state="duplicate"] [data-for~="duplicate"],.k-screen[data-state="help"] [data-for~="help"]{display:block}
.k-tips{list-style:none;display:flex;flex-direction:column;gap:22px}
.k-tips li{display:flex;gap:24px;align-items:center;font-size:30px;color:#CFE0E8}
.k-tips svg{width:52px;height:52px;flex:none;stroke:var(--signal);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.k-card{background:linear-gradient(180deg,#113A5C,#0B2C49);border:1px solid rgba(241,248,251,.14);border-radius:30px;padding:26px 38px 28px}
.k-name{font-size:54px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.k-org{font-size:30px;color:var(--haze);margin-top:6px}
.k-pill{display:inline-block;margin-top:18px;font-size:24px;font-weight:500;padding:6px 20px;border-radius:999px;background:rgba(79,227,242,.14);color:var(--signal)}
.k-actions{display:flex;gap:18px;margin-top:22px}
.k-btn{height:112px;border-radius:30px;border:2px solid rgba(241,248,251,.4);background:transparent;font-size:32px;font-weight:500;padding:0 30px}
.k-btn.k-primary{flex:1.7;background:var(--coral);border-color:var(--coral);color:var(--coral-ink);font-weight:600;font-size:38px}
.k-btn.k-wide{width:100%;flex:none;margin-top:28px}
.k-btn:active{transform:translateY(2px)}
.k-privacy{display:flex;align-items:center;gap:18px;margin-top:18px;font-size:24px;color:var(--haze)}
.k-bar{flex:none;width:180px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.k-bar b{display:block;height:100%;width:100%;background:var(--haze);transform-origin:left}
.k-screen[data-state="review"] .k-bar b{animation:k-drain 60s linear forwards}
.k-screen[dir="rtl"] .k-bar b{transform-origin:right}
@keyframes k-drain{to{transform:scaleX(0)}}
.k-note{font-size:32px;color:#CFE0E8}
.k-note.k-small{font-size:26px;color:var(--haze)}
.k-alert{display:flex;gap:26px;align-items:flex-start;padding:30px 36px;border-radius:30px;border:2px solid rgba(255,194,92,.5);background:rgba(255,194,92,.08);margin-bottom:26px}
.k-alert svg{width:56px;height:56px;flex:none;stroke:var(--amber);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.k-alert p{font-size:30px;color:#F6E7CB}

.k-printer{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:34px;background:linear-gradient(180deg,transparent,rgba(2,10,18,.75) 40%)}
.k-label{display:flex;align-items:center;gap:20px;font-size:32px;font-weight:500;color:var(--foam);margin-bottom:26px}
.k-arrow{width:56px;height:56px;stroke:var(--coral);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.k-slot{width:560px;height:30px;border-radius:15px;background:#01070D;box-shadow:inset 0 3px 8px rgba(0,0,0,.8),0 0 0 2px rgba(241,248,251,.12);position:relative}
.k-badge{position:absolute;left:50%;bottom:62px;width:150px;height:96px;margin-left:-75px;border-radius:12px;background:var(--foam);opacity:0;box-shadow:0 10px 30px rgba(0,0,0,.4);overflow:hidden}
.k-badge::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:var(--coral)}
.k-badge::after{content:"";position:absolute;left:22px;right:40px;top:46px;height:10px;border-radius:5px;background:#B9C7CF;box-shadow:0 22px 0 -1px #D8E1E6}
.k-fonix{position:absolute;right:84px;bottom:34px;font-size:20px;color:rgba(169,194,208,.7)}
.k-screen[dir="rtl"] .k-fonix{right:auto;left:64px}
.k-screen[data-state="printing"] .k-label,.k-screen[data-state="ready"] .k-label{color:var(--coral)}
.k-screen[data-state="ready"] .k-slot{box-shadow:inset 0 3px 8px rgba(0,0,0,.8),0 0 0 3px var(--coral),0 0 40px rgba(255,107,94,.45)}

.k-rail{position:absolute;inset:0;width:1080px;height:1920px;z-index:1;pointer-events:none}
.k-rail .k-base{stroke:rgba(241,248,251,.13);stroke-width:4;fill:none}
.k-rail .k-cam,.k-rail .k-print,.k-rail .k-link{fill:none;stroke-width:5;stroke-linecap:round;opacity:0;transition:opacity .4s}
.k-rail .k-cam,.k-rail .k-link{stroke:var(--signal)}
.k-rail .k-print{stroke:var(--coral)}
.k-rail .k-node{fill:var(--sea);stroke:rgba(241,248,251,.35);stroke-width:4;transition:fill .3s,stroke .3s}
.k-rail .k-node-arrow{fill:none;stroke:var(--sea);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.k-rail .k-halo{fill:none;stroke:var(--signal);stroke-width:3;opacity:0}
.k-screen[data-state="idle"] .k-cam,.k-screen[data-state="scanning"] .k-cam,.k-screen[data-state="idle"] .k-link,.k-screen[data-state="scanning"] .k-link{opacity:1}
.k-screen[data-state="idle"] .k-node,.k-screen[data-state="scanning"] .k-node{fill:var(--signal);stroke:var(--signal)}
.k-screen[data-state="idle"] .k-node-arrow,.k-screen[data-state="scanning"] .k-node-arrow{opacity:1}
.k-screen[data-state="printing"] .k-print,.k-screen[data-state="ready"] .k-print{opacity:1}
.k-screen[data-state="printing"] .k-node,.k-screen[data-state="ready"] .k-node{fill:var(--coral);stroke:var(--coral)}
.k-screen[data-state="error"] .k-node,.k-screen[data-state="duplicate"] .k-node{stroke:var(--amber)}
@media (prefers-reduced-motion:no-preference){
  .k-screen[data-state="idle"] .k-halo{animation:k-halo 2.6s ease-out infinite}
  .k-screen[data-state="scanning"] .k-sweep{animation:k-sweep 1.4s ease-in-out infinite alternate}
  .k-screen[data-state="printing"] .k-print{stroke-dasharray:26 22;animation:k-flow .9s linear infinite}
  .k-screen[data-state="printing"] .k-badge{animation:k-feed 2.2s ease-in infinite}
  .k-screen[data-state="ready"] .k-arrow{animation:k-nudge 1.6s ease-in-out 3}
}
.k-screen[data-state="scanning"] .k-sweep{opacity:1}
.k-screen[data-state="scanning"] .k-vf{box-shadow:inset 0 0 0 3px var(--signal)}
.k-screen[data-state="scanning"] .k-vf i{border-color:var(--signal)}
@keyframes k-halo{0%{opacity:.75;r:22px}100%{opacity:0;r:62px}}
@keyframes k-sweep{from{top:22%}to{top:78%}}
@keyframes k-flow{to{stroke-dashoffset:-48}}
@keyframes k-feed{0%{opacity:0;transform:translateY(-40px)}25%{opacity:1}80%{opacity:1;transform:translateY(40px) scale(.92)}100%{opacity:0;transform:translateY(64px) scale(.88)}}
@keyframes k-nudge{50%{transform:translateY(10px)}}

/* On the event floor: kiosk video + photos (2026-11-01) */
.kp-sec{padding-top:0}
.kp-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:18px;align-items:start}
.kp-grid figure{margin:0}
.kp-grid img,.kp-grid video{display:block;width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-2);background:var(--navy-950)}
.kp-grid img{aspect-ratio:3/4;object-fit:cover}
.kp-video{grid-row:span 2}
.kp-video video{aspect-ratio:9/16;object-fit:cover}
.kp-grid figcaption{margin-top:9px;font:500 12.5px/1.45 var(--f-mono);letter-spacing:.04em;color:var(--ink-70)}
.kp-grid figcaption a{color:inherit}
.kp-note{margin:16px 0 0;font-size:13px;color:var(--ink-50)}
html[lang="ar"] .kp-grid figcaption{font-family:var(--f-sans);letter-spacing:0}
@media (max-width:760px){.kp-grid{grid-template-columns:1fr 1fr}.kp-video{grid-column:1/-1;grid-row:auto;max-width:420px;justify-self:center;width:100%}}