/* ============================================================
   Roxan Attendance Panel — صفحه کیبورد
   ============================================================ */

:root{
  --primary:#0ea371;
  --bg:#0b1220;
  --primary-rgb:14,163,113;
  --bg-rgb:11,18,32;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.10);
  --text:#eef3fb;
  --muted:#93a4c0;
  --danger:#f0526b;
  --radius:20px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%}

body{
  margin:0;
  font-family:Vazirmatn,system-ui,"Segoe UI",Tahoma,sans-serif;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 600px at 50% -12%, rgba(var(--primary-rgb),.26), transparent 65%),
    radial-gradient(900px 500px at 50% 115%, rgba(var(--primary-rgb),.12), transparent 60%);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));
  overflow-x:hidden;
  user-select:none;
}

/* ---------- چیدمان اصلی ---------- */
.kiosk{
  width:100%;
  max-width:430px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.kiosk-head{text-align:center}
.logo{max-height:64px;max-width:180px;object-fit:contain;margin-bottom:10px}
.kiosk-head h1{
  margin:0;
  font-size:clamp(19px,5vw,25px);
  font-weight:800;
  letter-spacing:-.3px;
}
.event-name{
  margin-top:7px;
  display:inline-block;
  padding:4px 14px;
  border-radius:99px;
  font-size:12.5px;
  color:var(--primary);
  background:rgba(var(--primary-rgb),.15);
  border:1px solid rgba(var(--primary-rgb),.32);
}

.welcome{
  margin:0;
  text-align:center;
  color:var(--muted);
  font-size:14.5px;
}

/* ---------- نمایشگر شماره ---------- */
.display{
  position:relative;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  font-size:clamp(24px,7vw,32px);
  font-weight:700;
  letter-spacing:3px;
  transition:border-color .2s, box-shadow .2s, transform .12s;
}
.display.filled{
  border-color:rgba(var(--primary-rgb),.55);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb),.12);
}
.display.shake{animation:shake .38s}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-9px)}
  40%{transform:translateX(9px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}
.display .placeholder{color:rgba(255,255,255,.16);font-weight:600}
.display .value{color:var(--text);white-space:nowrap}
.display .caret{
  width:2px;height:32px;
  background:var(--primary);
  border-radius:2px;
  animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.error-line{
  min-height:20px;
  text-align:center;
  font-size:13px;
  color:var(--danger);
  transition:opacity .2s;
}

/* ---------- کیبورد ---------- */
.keypad{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  /* چیدمان کیبورد تلفن همیشه از چپ به راست است: ۱‌۲‌۳ / ۴‌۵‌۶ / ۷‌۸‌۹ */
  direction:ltr;
}
.key{
  appearance:none;
  border:1.5px solid var(--border);
  background:var(--surface);
  color:var(--text);
  border-radius:18px;
  padding:0;
  height:clamp(60px,15vw,74px);
  font-family:inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .13s, transform .09s, border-color .13s;
}
.key .num{font-size:clamp(24px,6.5vw,30px);font-weight:700;line-height:1}
.key-sym .num{font-size:clamp(26px,7vw,32px);color:var(--muted)}
.key:hover{background:var(--surface-2)}
.key:active,.key.pressed{
  transform:scale(.94);
  background:rgba(var(--primary-rgb),.26);
  border-color:rgba(var(--primary-rgb),.6);
}

/* ---------- دکمه‌ها ---------- */
.actions{display:flex;gap:11px;align-items:stretch}
.btn{
  appearance:none;
  border:0;
  border-radius:18px;
  font-family:inherit;
  font-weight:800;
  cursor:pointer;
  transition:background .15s, transform .09s, opacity .15s;
}
.btn:active{transform:scale(.97)}

.btn-back{
  width:76px;
  flex:0 0 auto;
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--muted);
  display:flex;align-items:center;justify-content:center;
}
.btn-back:hover{background:var(--surface-2);color:var(--text)}

.btn-submit{
  flex:1;
  height:64px;
  font-size:18px;
  background:var(--primary);
  color:#fff;
  box-shadow:0 10px 26px -10px rgba(var(--primary-rgb),.6);
}
.btn-submit:hover{filter:brightness(1.07)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-submit.loading{color:transparent;position:relative}
.btn-submit.loading::after{
  content:"";
  position:absolute;inset:0;margin:auto;
  width:24px;height:24px;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- نتیجه ---------- */
.overlay{
  position:fixed;inset:0;
  background:rgba(var(--bg-rgb),.94);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  z-index:50;
}
.overlay.show{display:flex;animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

.overlay-card{
  width:100%;
  max-width:430px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1.5px solid var(--border);
  border-radius:26px;
  padding:32px 24px 24px;
  text-align:center;
  animation:pop .3s cubic-bezier(.2,1.2,.4,1);
}
@keyframes pop{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}

.icon-wrap{margin:0 auto 16px;width:80px;height:80px}
.icon-wrap svg{width:80px;height:80px;display:none}
.overlay-card.ok .ic-ok{display:block}
.overlay-card.err .ic-err{display:block}

/* آیکون همیشه کامل رسم می‌شود؛ حرکت فقط با بزرگ‌شدن قاب است تا اگر
   مرورگر انیمیشن‌ها را متوقف کند (تب پنهان، حالت کم‌مصرف) باز هم دیده شود. */
.ic-circle{stroke-width:3;stroke:var(--primary)}
.ic-check{stroke-width:4;stroke:var(--primary);stroke-linecap:round;stroke-linejoin:round}
.overlay-card.err .ic-circle,.overlay-card.err .ic-check{stroke:var(--danger)}
.icon-wrap{animation:iconPop .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes iconPop{from{transform:scale(.55)}to{transform:scale(1)}}

.overlay-card h2{margin:0 0 12px;font-size:22px;font-weight:800}
.overlay-msg{
  margin:0 0 16px;
  font-size:16.5px;
  line-height:2.1;
  color:#dbe5f4;
  white-space:pre-line;
}
.overlay-meta{
  font-size:13px;
  color:var(--muted);
  border-top:1px solid var(--border);
  padding-top:14px;
  margin-bottom:18px;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.overlay-meta span{display:inline-flex;align-items:center;gap:5px}
.overlay-meta b{color:var(--text);font-weight:700}
.btn-close{
  width:100%;height:56px;font-size:16px;
  background:var(--surface-2);color:var(--text);
  border:1.5px solid var(--border);
}
.btn-close:hover{background:rgba(255,255,255,.13)}
.countdown{margin-top:11px;font-size:12px;color:rgba(255,255,255,.3)}

/* ---------- نمایشگرهای کوتاه ---------- */
@media (max-height:700px){
  .kiosk{gap:10px}
  .display{height:62px}
  .key{height:54px}
  .btn-submit{height:56px}
  .welcome{font-size:13px}
}
@media (min-height:900px){
  .kiosk{max-width:470px;gap:18px}
  .key{height:82px}
}