/* BVCH VisitUs — kiosk styles (iPad, full screen, touch-first)
   Palette matches the Birkdale compliance portal: teal #0f766e,
   gradient #0f2e3d → #0f766e, Inter webfont. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

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

html, body {
  height: 100%;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: #f6f8fa;
  color: #101828;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.kiosk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  background: linear-gradient(135deg, #0f2e3d, #0f766e);
  color: #fff;
}
.kiosk-home-name { font-size: 22px; font-weight: 700; letter-spacing: 0.3px; }
.header-status { display: flex; align-items: center; gap: 18px; }
.kiosk-clock { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }

.conn-wrap { display: flex; align-items: center; gap: 10px; }
.conn-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.conn-dot.syncing { background: #d97706; }
.conn-dot.offline { background: #dc2626; }
.sync-label { font-size: 13px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.sync-label.stale { color: #fecaca; opacity: 1; font-weight: 600; }
.pending-badge {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 600;
}

.offline-pill {
  margin: 10px auto 0;
  width: fit-content;
  max-width: 90%;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

.screen {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 30px 40px 20px;
  height: calc(100% - 68px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: flex; }

.welcome-line { font-size: 26px; color: #5e6e82; margin: 4vh 0 5vh; }

.home-buttons {
  display: flex;
  gap: 40px;
  width: 100%;
  max-width: 860px;
  flex: 0 1 auto;
}
.big-btn {
  flex: 1;
  border-radius: 24px;
  padding: 7vh 20px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(16,24,40,0.14);
}
.big-btn:active { transform: scale(0.98); }
.big-btn-in  { background: linear-gradient(160deg, #15803d, #16a34a); }
.big-btn-out { background: linear-gradient(160deg, #0f2e3d, #0f766e); }
.big-btn-icon { font-size: 56px; line-height: 1; }
.big-btn-label { font-size: 44px; font-weight: 800; margin-top: 12px; }
.big-btn-sub { font-size: 19px; margin-top: 8px; opacity: 0.85; }

.screen-title { font-size: 32px; font-weight: 800; color: #0f766e; margin-bottom: 8px; text-align: center; }
.screen-sub { font-size: 19px; color: #5e6e82; margin-bottom: 22px; text-align: center; }

.expected-title { font-size: 20px; font-weight: 700; color: #0f766e; margin-bottom: 12px; text-align: center; }
.expected-divider { border-bottom: 2px solid #e4e9ef; margin: 20px auto 24px; width: 100%; max-width: 720px; }

.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 820px;
  margin-top: 20px;
}
.type-tile {
  background: #fff;
  border: 3px solid #e4e9ef;
  border-radius: 20px;
  padding: 4.5vh 16px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16,24,40,0.06);
}
.type-tile:active { border-color: #0f766e; background: #e7f4f2; }
.type-tile-icon { font-size: 44px; }
.type-tile-label { font-size: 25px; font-weight: 700; margin-top: 10px; color: #101828; }

.kiosk-input {
  width: 100%;
  max-width: 640px;
  font-size: 26px;
  padding: 18px 22px;
  border: 3px solid #d3dce6;
  border-radius: 16px;
  margin-bottom: 16px;
  background: #fff;
  outline: none;
  font-family: inherit;
  -webkit-user-select: text;
  user-select: text;
}
.kiosk-input:focus { border-color: #0f766e; }

.search-results { width: 100%; max-width: 640px; }
.result-row {
  background: #fff;
  border: 2px solid #e4e9ef;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.result-row:active { background: #e7f4f2; border-color: #0f766e; }
.result-name { font-size: 24px; font-weight: 700; }
.result-meta { font-size: 17px; color: #5e6e82; }

.tap { cursor: pointer; }

.new-visitor-btn {
  margin-top: 14px;
  font-size: 21px;
  font-weight: 700;
  color: #0f766e;
  background: #fff;
  border: 3px dashed #8ec8c0;
  border-radius: 16px;
  padding: 18px 30px;
  text-align: center;
  width: 100%;
  max-width: 640px;
}
.new-visitor-btn:active { background: #e7f4f2; }

.consent-box {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border: 2px solid #e4e9ef;
  border-radius: 16px;
  padding: 20px 24px;
  margin: 6px 0 18px;
}
.consent-text { font-size: 17px; line-height: 1.5; color: #101828; }
.consent-tick {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-size: 21px;
  font-weight: 700;
  color: #0f766e;
}
.tickbox {
  width: 40px;
  height: 40px;
  border: 3px solid #94a3b8;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: #fff;
}
.tickbox.s { background: #16a34a; border-color: #16a34a; }
.tickbox.s::after { content: '\2713'; }

.continue-btn {
  background: linear-gradient(160deg, #15803d, #16a34a);
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  border-radius: 18px;
  padding: 20px 60px;
  text-align: center;
  margin-top: 8px;
  min-width: 320px;
  box-shadow: 0 6px 16px rgba(22,163,74,0.3);
}
.continue-btn:active { transform: scale(0.98); }
.continue-btn.disabled { background: #d3dce6; color: #5e6e82; box-shadow: none; }

.skip-btn {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 700;
  color: #5e6e82;
  background: #fff;
  border: 2px solid #d3dce6;
  border-radius: 14px;
  padding: 16px 40px;
  text-align: center;
}
.skip-btn:active { background: #f2f6f9; }

.chip-row, .chip-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 720px;
  margin-bottom: 18px;
}
.chip {
  background: #fff;
  border: 3px solid #d3dce6;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 21px;
  font-weight: 600;
  cursor: pointer;
  color: #101828;
}
.chip.s { background: #0f766e; border-color: #0f766e; color: #fff; }

/* custom sign-in fields */
.custom-fields { width: 100%; max-width: 680px; }
.cf-field {
  background: #fff;
  border: 2px solid #e4e9ef;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 14px;
}
.cf-label { font-size: 21px; font-weight: 700; color: #101828; margin-bottom: 12px; }
.cf-label .cf-req { color: #dc2626; }
.cf-label .cf-opt { color: #94a3b8; font-weight: 500; font-size: 16px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cf-field .kiosk-input { margin-bottom: 0; font-size: 22px; padding: 14px 18px; max-width: none; }
.cf-field.cf-missing { border-color: #dc2626; }

/* screening */
.screening-q { max-width: 760px; line-height: 1.35; margin-top: 4vh; }
.yn-row { display: flex; gap: 30px; margin-top: 6vh; width: 100%; max-width: 620px; }
.yn-btn {
  flex: 1;
  background: #fff;
  border: 4px solid #d3dce6;
  border-radius: 22px;
  padding: 5vh 20px;
  font-size: 38px;
  font-weight: 800;
  text-align: center;
  color: #101828;
}
.yn-btn:active { border-color: #0f766e; background: #e7f4f2; }

.signout-list { width: 100%; max-width: 680px; }
.signout-row {
  background: #fff;
  border: 2px solid #e4e9ef;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.signout-row:active { background: #e7f4f2; border-color: #0f766e; }
.signout-row.busy { opacity: 0.5; pointer-events: none; }
.signout-name { font-size: 25px; font-weight: 700; }
.signout-time { font-size: 18px; color: #5e6e82; }
.signout-empty { font-size: 21px; color: #5e6e82; text-align: center; margin-top: 30px; }

.nav-row { margin-top: auto; padding-top: 24px; }
.nav-btn {
  font-size: 21px;
  font-weight: 700;
  color: #46566a;
  background: #fff;
  border: 2px solid #d3dce6;
  border-radius: 14px;
  padding: 14px 34px;
  cursor: pointer;
}
.nav-btn:active { background: #f2f6f9; }

.done-icon {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font-size: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8vh 0 30px;
  flex-shrink: 0;
}
.done-icon.out { background: #0f766e; }
.done-icon.warn { background: #d97706; }
.done-title { font-size: 38px; font-weight: 800; color: #101828; text-align: center; }
.done-sub { font-size: 23px; color: #5e6e82; margin-top: 14px; text-align: center; max-width: 720px; }

/* fire evacuation */
.evac-btn {
  position: fixed;
  left: 18px;
  bottom: 18px;
  background: #dc2626;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: 0 4px 14px rgba(220,38,38,0.35);
  z-index: 40;
}
.evac-btn:active { transform: scale(0.97); }

.evac-header {
  width: 100%;
  max-width: 760px;
  background: #dc2626;
  color: #fff;
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.evac-title { font-size: 23px; font-weight: 800; }
.evac-count { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }

.evac-list { width: 100%; max-width: 760px; }
.evac-row {
  background: #fff;
  border: 3px solid #e4e9ef;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.evac-row.accounted { border-color: #16a34a; background: #f0fdf4; }
.evac-name { font-size: 24px; font-weight: 700; }
.evac-meta { font-size: 16px; color: #5e6e82; }
.evac-state {
  font-size: 18px;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
  white-space: nowrap;
}
.evac-row.accounted .evac-state { background: #dcfce7; color: #15803d; }

/* kiosk toast */
.ktoast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: #101828;
  color: #fff;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 19px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  z-index: 100;
  max-width: 86%;
  text-align: center;
}
.ktoast.show { opacity: 1; }

@media (max-width: 700px) {
  .home-buttons { flex-direction: column; gap: 20px; }
  .type-grid { grid-template-columns: 1fr; }
  .big-btn { padding: 4vh 20px; }
  .yn-row { flex-direction: column; gap: 16px; }
}