/* Event kiosk: a 20–32 inch touch screen at 1920×1080, used standing. Everything is sized for the 20-inch case. */

html.kiosk, html.kiosk body {
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
html.kiosk body { font-size: 20px; }
html.kiosk[lang="ar"] body { font-family: 'Segoe UI', Tahoma, 'Noto Kufi Arabic', sans-serif; }
html.kiosk #map { touch-action: none; }

/* top bar */
html.kiosk .topbar { padding: 14px 24px; }
html.kiosk .logo { width: 64px; height: 64px; font-size: 30px; background: #fff; padding: 0; overflow: hidden; }
html.kiosk .logo img { width: 100%; height: 100%; display: block; animation: ktoplogo 6s ease-in-out infinite; }
@keyframes ktoplogo { 0%, 80%, 100% { transform: rotate(0) scale(1) } 88% { transform: rotate(-8deg) scale(1.08) } 94% { transform: rotate(5deg) scale(1.03) } }
html.kiosk .topbar h1 { font-size: 30px; }
html.kiosk .topbar .sub { font-size: 18px; }
html.kiosk #refreshBtn { display: none; }
html.kiosk .top-actions { gap: 14px; align-items: center; }
html.kiosk .topbar .ghost { font-size: 22px; padding: 12px 26px; min-height: 64px; border-radius: 14px; border-width: 2px; }
html.kiosk #startOverBtn { display: inline-flex; align-items: center; gap: 10px; }
#startOverBtn { display: none; }

/* left panel: chips instead of drop-downs */
html.kiosk .sidebar { width: 500px; }
html.kiosk .filters { padding: 16px 18px; gap: 14px; }
html.kiosk .filters > label, html.kiosk .filters > .row { display: none; }
html.kiosk .filters > label.k-search { display: grid; }
html.kiosk .filters label { font-size: 17px; }
html.kiosk .filters input {
  font-size: 22px; padding: 14px 16px; min-height: 64px; border-radius: 14px; border-width: 2px;
}
.k-group h4 { margin: 0 0 8px; font-size: 17px; color: var(--muted); font-weight: 600; }
.k-chips { display: flex; flex-wrap: wrap; gap: 10px; max-height: 236px; overflow-y: auto; padding-bottom: 2px; }
.k-chips.areas { max-height: none; overflow: visible; }
.k-chip {
  min-height: 56px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--line); background: #fff;
  font-size: 19px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ink);
}
.k-chip .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.k-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.k-chip.on .dot { box-shadow: 0 0 0 2px #fff; }
.k-chip small { opacity: .7; font-size: 15px; }
.k-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.k-tab {
  flex: 1; min-height: 52px; border-radius: 12px; border: 2px solid var(--line); background: #f7fafc; font-size: 18px;
}
.k-tab.on { border-color: var(--brand); background: var(--accent-bg); color: var(--brand); font-weight: 700; }

html.kiosk .summary { font-size: 19px; padding: 12px 18px; }
html.kiosk .group-head { font-size: 17px; padding: 10px 18px; }
html.kiosk .item { padding: 16px 18px; gap: 14px; min-height: 76px; align-items: center; }
html.kiosk .item .name { font-size: 21px; }
html.kiosk .item .meta { font-size: 17px; }
html.kiosk .item .dot, html.kiosk .lg .dot { width: 16px; height: 16px; }
html.kiosk .badge { font-size: 16px; padding: 4px 12px; }
html.kiosk .list { scroll-behavior: smooth; }
html.kiosk .item:hover { background: inherit; }
html.kiosk .item.selected { background: var(--accent-bg); }

/* map */
html.kiosk .legend { font-size: 17px; padding: 12px 16px; max-height: 60%; overflow: auto; }
html.kiosk .legend h4 { font-size: 16px; }
html.kiosk .leaflet-control-zoom a { width: 64px !important; height: 64px !important; line-height: 64px !important; font-size: 34px !important; }
html.kiosk .leaflet-control-attribution { font-size: 12px; }
html.kiosk .here-tip {
  font-size: 18px; font-weight: 700; background: #111; color: #fff; border: 0; border-radius: 10px; padding: 6px 12px;
}
html.kiosk .here-tip::before { border-top-color: #111; }

/* center details */
html.kiosk .details { width: 600px; padding: 26px 28px 40px; }
html.kiosk .close { font-size: 48px; width: 72px; height: 72px; top: 8px; inset-inline-end: 8px; }
html.kiosk .details h2 { font-size: 30px; margin-inline-end: 72px; }
html.kiosk .details .alt-name { font-size: 20px; }
html.kiosk .details h3 { font-size: 18px; margin-top: 28px; }
html.kiosk .kv, html.kiosk .ref, html.kiosk .svc, html.kiosk .note, html.kiosk .route { font-size: 19px; }
html.kiosk .ref .cond, html.kiosk .svc .shifts { font-size: 17px; }
html.kiosk .ref { padding: 12px 14px; }
html.kiosk .link-btn { font-size: 21px; padding: 14px 22px; min-height: 64px; border-radius: 14px; border-width: 2px; }
html.kiosk #dirBtn { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; }
html.kiosk .route-sum { font-size: 20px; }
html.kiosk .route-sum strong { font-size: 30px; }
html.kiosk .steps summary { font-size: 19px; padding: 8px 0; }
html.kiosk .chips .badge { font-size: 16px; }

.k-qr {
  display: flex; gap: 18px; align-items: center; margin-top: 18px; padding: 16px; border-radius: 16px;
  background: var(--accent-bg); border: 2px solid #cfe5ef;
}
.k-qr .qr { flex: none; width: 168px; height: 168px; background: #fff; border-radius: 10px; padding: 8px; display: grid; place-items: center; }
.k-qr .qr img, .k-qr .qr canvas, .k-qr .qr svg { width: 152px; height: 152px; display: block; image-rendering: pixelated; }
.k-qr strong { display: block; font-size: 21px; margin-bottom: 6px; }
.k-qr span { font-size: 17px; color: var(--muted); }

/* offline: what needs the internet is hidden */
html.kiosk.offline #dirBtn, html.kiosk.offline .route, html.kiosk.offline #clearRoute { display: none !important; }
html.kiosk.no-venue #dirBtn, html.kiosk.no-venue .k-near { display: none !important; }

/* on-screen keyboard */
.k-kbd {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 3000; background: #1d2a36; padding: 16px 20px 22px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.3); transform: translateY(105%); transition: transform .2s ease;
}
.k-kbd.open { transform: none; }
.k-kbd .k-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.k-kbd button {
  min-width: 84px; height: 76px; border-radius: 12px; border: 0; background: #3a4a5a; color: #fff; font-size: 30px;
}
.k-kbd button:active { background: var(--brand); }
.k-kbd .wide { min-width: 360px; }
.k-kbd .act { background: #55687c; font-size: 22px; min-width: 140px; }
.k-kbd .done { background: var(--brand); }
.k-kbd .k-preview { text-align: center; color: #fff; font-size: 26px; min-height: 40px; margin-bottom: 8px; }

/* "are you still there?" */
.k-warn {
  position: fixed; inset: 0; z-index: 3500; display: none; place-items: center; background: rgba(10,25,40,.55);
}
.k-warn.open { display: grid; }
.k-warn div {
  background: #fff; border-radius: 24px; padding: 40px 60px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.k-warn strong { display: block; font-size: 36px; margin-bottom: 10px; }
.k-warn span { font-size: 24px; color: var(--muted); }
.k-warn b { display: block; font-size: 72px; color: var(--brand); margin-top: 12px; }

/* staff dot and panel */
.k-dot {
  position: fixed; z-index: 4000; bottom: 10px; inset-inline-start: 10px; width: 14px; height: 14px; border-radius: 50%;
  background: #2ecc71; box-shadow: 0 0 0 2px rgba(255,255,255,.8); pointer-events: none;
}
html.offline .k-dot { background: #f39c12; }
.k-dot i { position: absolute; inset-inline-start: 20px; top: -4px; font: 600 13px/1 sans-serif; color: #555; font-style: normal; }
.k-corner { position: fixed; z-index: 4001; top: 0; inset-inline-start: 0; width: 90px; height: 90px; }
.k-staff {
  position: fixed; z-index: 4500; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.5);
}
.k-staff.open { display: grid; }
.k-staff > div { background: #fff; border-radius: 18px; padding: 28px 32px; width: 640px; font-size: 19px; direction: ltr; text-align: left; }
.k-staff h2 { margin: 0 0 14px; }
.k-staff dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.k-staff dt { color: var(--muted); }
.k-staff dd { margin: 0; }
.k-staff .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.k-staff button, .k-staff input { font-size: 19px; padding: 10px 16px; border-radius: 10px; border: 2px solid var(--line); background: #fff; }
.k-staff button.primary { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- floating bar over a full-screen map (as on the dashboard's Health Centers page) ---------- */
html.kiosk .sidebar.k-moved { display: none; }
html.kiosk .map-wrap { position: relative; }
.k-bar {
  position: absolute; z-index: 1000; top: 22px; left: 50%; transform: translateX(-50%); width: min(1120px, calc(100% - 48px));
  display: grid; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 26px;
  box-shadow: 0 12px 36px rgba(13, 40, 60, .28); transition: left .25s ease, width .25s ease;
}
.k-bar[hidden], .k-pill[hidden] { display: none; }
/* a center card is open: the bar moves beside it */
html.kiosk .layout:has(#details:not(.hidden)) .k-bar { left: calc((100% - 644px) / 2); width: min(1040px, calc(100% - 720px)); }
.k-bar-row { display: flex; gap: 12px; align-items: center; }
.k-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 0 14px;
  background: #f3f6f9; border: 2px solid var(--line); border-radius: 18px;
}
.k-search-icon { font-size: 32px; color: var(--muted); line-height: 1; }
html.kiosk .k-search input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 24px; padding: 0; min-height: 0;
}
.k-clear { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; background: #e2e8ef; font-size: 20px; }
.k-clear[hidden] { display: none; }
.k-btn {
  flex: none; min-height: 68px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  border: 2px solid var(--line); border-radius: 18px; background: #fff; font-size: 21px; color: var(--ink);
}
.k-btn.on { background: var(--accent-bg); border-color: var(--brand); color: var(--brand); font-weight: 700; }
.k-count { background: var(--brand); border-color: var(--brand); color: #fff; }
.k-count b { font-size: 27px; }
.k-icon { width: 68px; padding: 0; justify-content: center; font-size: 30px; }
.k-caret { font-size: 16px; opacity: .8; }
.k-filters { flex-wrap: wrap; }
.k-filters .k-chip { min-height: 60px; }
.k-filters .k-chip.open { border-color: var(--brand); box-shadow: 0 0 0 4px var(--accent-bg); }
.k-x { flex: none; width: 50px; height: 50px; margin-inline-start: -8px; border: 0; border-radius: 50%; background: #e2e8ef; font-size: 20px; }
.k-drop { border-top: 2px solid var(--line); padding-top: 12px; }
.k-drop[hidden], .k-panel[hidden], .k-results[hidden] { display: none; }
.k-panel .k-chips { max-height: none; }
.k-panel .k-scroll { max-height: 46vh; overflow-y: auto; }
.k-results { max-height: calc(100vh - 330px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -16px -14px; border-radius: 0 0 26px 26px; }
html.k-kbd-open .k-results { max-height: calc(100vh - 720px); }
.k-results .list { overflow: visible; max-height: none; }
.k-pill {
  position: absolute; z-index: 1000; top: 22px; left: 50%; transform: translateX(-50%); min-height: 66px; padding: 0 30px;
  border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-size: 22px; box-shadow: 0 10px 30px rgba(13, 40, 60, .3);
}
/* the center: a floating card over the map, above the bar */
html.kiosk .details {
  position: absolute; z-index: 1100; top: 22px; bottom: 22px; right: 22px; left: auto; width: 620px;
  border: 0; border-radius: 26px; box-shadow: 0 16px 44px rgba(13, 40, 60, .34);
}
/* the legend bottom-left, away from the card, above the zoom buttons */
html.kiosk .legend { bottom: 170px; left: 14px; right: auto; }

/* the staff dot bottom-right, clear of the zoom buttons */
.k-dot { left: auto; right: 10px; bottom: 26px; inset-inline-start: auto; }
.k-dot i { inset-inline-start: auto; right: 20px; }

/* no scroll bars on the touch screen: everything still scrolls with a finger */
html.kiosk .details, html.kiosk .k-results, html.kiosk .k-panel .k-scroll, html.kiosk .legend, html.kiosk .list, html.kiosk .k-chips {
  scrollbar-width: none; -ms-overflow-style: none;
}
html.kiosk .details::-webkit-scrollbar, html.kiosk .k-results::-webkit-scrollbar, html.kiosk .k-panel .k-scroll::-webkit-scrollbar,
html.kiosk .legend::-webkit-scrollbar, html.kiosk .list::-webkit-scrollbar, html.kiosk .k-chips::-webkit-scrollbar { display: none; }

/* the fold button: an arrow that keeps nudging up; the pill's arrow nudges down */
.k-arrow { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.k-collapse { color: var(--brand); }
.k-collapse .k-arrow { animation: karrowUp 1.6s ease-in-out infinite; }
.k-collapse:active .k-arrow { transform: translateY(-6px) scale(.9); }
.k-pill { display: inline-flex; align-items: center; gap: 10px; }
.k-pill .k-arrow { width: 28px; height: 28px; animation: karrowDown 1.6s ease-in-out infinite; }
@keyframes karrowUp { 0%, 100% { transform: translateY(3px); opacity: .75 } 50% { transform: translateY(-4px); opacity: 1 } }
@keyframes karrowDown { 0%, 100% { transform: translateY(-3px); opacity: .75 } 50% { transform: translateY(4px); opacity: 1 } }