/* شاشة الانتظار — عرض كبير، خلفية داكنة */
:root {
  --scr-bg: #0b1220;
  --scr-card: #131c2f;
  --scr-line: #1f2b45;
  --scr-teal: #2dd4bf;
  --scr-dim: #8ea0bd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--scr-bg);
  color: #fff;
  font-family: 'Cairo', 'Segoe UI', 'Noto Naskh Arabic', Tahoma, sans-serif;
  min-height: 100vh;
  overflow: hidden;
}

.scr {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2vh 3vw;
  gap: 2vh;
}

.scr-head {
  display: flex; align-items: center; justify-content: space-between; gap: 2vw;
  border-bottom: 2px solid var(--scr-line); padding-bottom: 1.6vh;
}
.scr-clinic { display: flex; align-items: center; gap: 1.4vw; }
.scr-clinic img { height: 8vh; max-height: 90px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; }
.scr-clinic h1 { margin: 0; font-size: clamp(22px, 3.2vw, 54px); font-weight: 800; }
.scr-clinic .spec { color: var(--scr-dim); font-size: clamp(13px, 1.4vw, 24px); }
.scr-clock { text-align: left; }
.scr-clock .time { font-size: clamp(22px, 3vw, 50px); font-weight: 800; font-variant-numeric: tabular-nums; }
.scr-clock .date { color: var(--scr-dim); font-size: clamp(12px, 1.3vw, 22px); }

.scr-main { flex: 1; display: grid; grid-template-columns: 1.55fr 1fr; gap: 2vw; min-height: 0; }
@media (max-width: 900px), (orientation: portrait) { .scr-main { grid-template-columns: 1fr; } }

.now-card {
  background: linear-gradient(150deg, #0d8074, #14a08f);
  border-radius: 26px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 3vh 2vw; text-align: center;
  box-shadow: 0 20px 60px rgba(20,160,143,.28);
}
.now-card .lbl { font-size: clamp(16px, 2vw, 34px); opacity: .9; font-weight: 700; }
.now-card .num {
  font-size: clamp(90px, 20vw, 320px); font-weight: 900; line-height: .95;
  font-variant-numeric: tabular-nums; margin: 1vh 0; letter-spacing: -.02em;
}
.now-card .who { font-size: clamp(18px, 2.4vw, 42px); font-weight: 700; }
.now-card .doc { font-size: clamp(13px, 1.5vw, 26px); opacity: .85; margin-top: .6vh; }
.now-card.idle { background: linear-gradient(150deg, #1f2b45, #131c2f); box-shadow: none; }
.now-card.idle .num { font-size: clamp(40px, 6vw, 90px); color: var(--scr-dim); }

.side { display: flex; flex-direction: column; gap: 2vh; min-height: 0; }

.next-card {
  background: var(--scr-card); border: 2px solid var(--scr-line);
  border-radius: 22px; padding: 2.4vh 1.6vw; text-align: center;
}
.next-card .lbl { color: var(--scr-dim); font-size: clamp(14px, 1.5vw, 26px); font-weight: 700; }
.next-card .num {
  font-size: clamp(46px, 8vw, 130px); font-weight: 900; color: var(--scr-teal);
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.next-card .who { font-size: clamp(14px, 1.5vw, 26px); color: #cbd5e1; }

.wait-card {
  background: var(--scr-card); border: 2px solid var(--scr-line);
  border-radius: 22px; padding: 1.8vh 1.4vw; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.wait-card h2 {
  margin: 0 0 1.2vh; font-size: clamp(15px, 1.6vw, 28px);
  color: var(--scr-dim); font-weight: 700;
}
.wait-list { list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1; }
.wait-list li {
  display: flex; align-items: center; gap: 1vw;
  padding: 1.1vh 0; border-bottom: 1px solid var(--scr-line);
  font-size: clamp(15px, 1.7vw, 30px);
}
.wait-list li:last-child { border-bottom: 0; }
.wait-list .n {
  min-width: 2.6em; text-align: center; background: #1f2b45; color: var(--scr-teal);
  border-radius: 10px; padding: .2em .3em; font-weight: 800; font-variant-numeric: tabular-nums;
}
.wait-list .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scr-foot {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--scr-dim); font-size: clamp(11px, 1.1vw, 18px);
  border-top: 2px solid var(--scr-line); padding-top: 1.2vh;
}
.dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: #22c55e; margin-inline-end: .4em; }
.dot.off { background: #ef4444; }

.flash { animation: flash 1s ease-in-out 3; }
@keyframes flash {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.sound-btn {
  position: fixed; inset-block-start: 10px; inset-inline-start: 10px;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid var(--scr-line);
  border-radius: 10px; padding: 8px 14px; font-family: inherit; font-size: 14px; cursor: pointer;
  z-index: 10;
}