/**
 * TourTrend — Shared Stylesheet
 * Organization:
 *  1. Fonts & Custom Properties
 *  2. Reset & Base
 *  3. Typography
 *  4. Utility Classes
 *  5. Components (Buttons, Forms, Chips, Cards, Badges, Tables, Stars, Loader)
 *  6. Animations & Keyframes
 *  7. Page: Landing (index.php)
 *  8. Page: Admin Login (admin/login.php)
 *  9. Page: Admin Dashboard (admin/dashboard.php)
 *     a. Layout (sidebar, main)
 *     b. Section Banner
 *     c. Banner Color Themes
 *     d. Content (KPIs, grids, tabs, sections, tables, kiosk cards)
 * 10. Page: Kiosk (kiosk/index.php)
 * 11. Responsive Overrides (tablet & mobile)
 */

/* ─────────────────────────────────────────────────────────────────
   1. FONTS & CUSTOM PROPERTIES
───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Syne:wght@600;700;800&display=swap');

:root {
  /* Brand palette */
  --sea:        #0a7ea4;
  --sea-dark:   #064e6b;
  --sea-light:  #e0f4fb;
  --sea-mid:    #b3dff5;
  --teal:       #1aaa8c;
  --sand:       #f5e6c8;
  --leaf:       #2d7a4f;
  --leaf-light: #e8f5ee;

  /* Neutral scale */
  --white:    #fefcf8;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-900: #111827;

  /* Semantic states */
  --success: #059669;
  --warning: #d97706;
  --danger:  #dc2626;

  /* Border radius scale */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadow scale */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.14);
}


/* ─────────────────────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--gray-900);
  background: var(--gray-50);
}


/* ─────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: 'Playfair Display', serif;
  line-height: 1.25;
}

.syne { font-family: 'Syne', sans-serif; }


/* ─────────────────────────────────────────────────────────────────
   4. UTILITY CLASSES
───────────────────────────────────────────────────────────────── */

.text-sea   { color: var(--sea); }
.text-muted { color: var(--gray-500); }
.text-sm    { font-size: 13px; }
.text-xs    { font-size: 11px; }
.fw-600     { font-weight: 600; }

/* Spacing */
.mt-1 { margin-top: 8px; }   .mt-2 { margin-top: 16px; }   .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }


/* ─────────────────────────────────────────────────────────────────
   5. COMPONENTS
───────────────────────────────────────────────────────────────── */

/* ── Buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--r-md);
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--sea);
  color: #fff;
  box-shadow: 0 4px 12px rgba(10,126,164,.35);
}
.btn-primary:hover {
  background: var(--sea-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10,126,164,.45);
}

.btn-success {
  background: var(--leaf);
  color: #fff;
  box-shadow: 0 4px 12px rgba(45,122,79,.3);
}
.btn-success:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.btn-ghost { background: var(--gray-100); color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-200); }

.btn-lg { padding: 14px 32px; font-size: 16px; border-radius: var(--r-lg); }
.btn-sm { padding: 7px 14px;  font-size: 12px; border-radius: var(--r-sm); }

.btn:active { transform: translateY(0); }


/* ── Forms ── */

.form-group { margin-bottom: 10px; }

.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-500);
}

.form-control {
  width: 100%;
  padding: 9px 14px;
  border-radius: var(--r-md);
  border: 2px solid var(--gray-200);
  background: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--gray-900);
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(10,126,164,.12);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }


/* ── Chip Multi-select ── */

.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  padding: 8px 16px;
  border: 2px solid var(--gray-200);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: all .18s;
  background: #fff;
  user-select: none;
}
.chip:hover           { border-color: var(--sea); color: var(--sea); }
.chip.selected        { background: var(--sea-light); border-color: var(--sea); color: var(--sea-dark); font-weight: 600; }


/* ── Cards ── */

.card {
  background: #fff;
  border-radius: var(--r-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s, transform .22s cubic-bezier(.34,1.56,.64,1), border-color .22s;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--gray-300, #d1d5db);
}
.card-body   { padding: 24px; }
.card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-title {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}


/* ── Badges ── */

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
.badge-blue  { background: #dbeafe; color: #1d4ed8; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-red   { background: #fee2e2; color: #991b1b; }
.badge-gray  { background: var(--gray-100); color: var(--gray-500); }


/* ── Tables ── */

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-500);
  border-bottom: 2px solid var(--gray-100);
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td      { background: var(--gray-50); }


/* ── Star Rating ── */

.stars { display: flex; gap: 8px; }
.star {
  font-size: 30px;
  cursor: pointer;
  color: #d1d5db;
  transition: color .15s, transform .15s;
}
.star:hover, .star.lit { color: #fbbf24; transform: scale(1.15); }


/* ── Loader Spinner ── */

.loader {
  width: 36px;
  height: 36px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--sea);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 40px auto;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}


/* ─────────────────────────────────────────────────────────────────
   6. ANIMATIONS & KEYFRAMES
───────────────────────────────────────────────────────────────── */

@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; }                               to { opacity: 1; } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes countUp { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: translateY(0); } }

/* Banner shimmer sweep */
@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(260%)  skewX(-12deg); }
}

/* Icon box glow pulses — one per accent color */
@keyframes iconGlowPulse        { 0%,100% { box-shadow: 0 0 0 0 rgba(56,189,248,0),   0 4px 20px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 18px 4px rgba(56,189,248,.18), 0 4px 20px rgba(0,0,0,.35); } }
@keyframes iconGlowPulse-teal   { 0%,100% { box-shadow: 0 0 0 0 rgba(20,184,166,0),   0 4px 20px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 18px 4px rgba(20,184,166,.22), 0 4px 20px rgba(0,0,0,.35); } }
@keyframes iconGlowPulse-purple { 0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,0),   0 4px 20px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 18px 4px rgba(139,92,246,.22), 0 4px 20px rgba(0,0,0,.35); } }
@keyframes iconGlowPulse-amber  { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,0),   0 4px 20px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 18px 4px rgba(245,158,11,.22), 0 4px 20px rgba(0,0,0,.35); } }
@keyframes iconGlowPulse-green  { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0),    0 4px 20px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 18px 4px rgba(34,197,94,.22),  0 4px 20px rgba(0,0,0,.35); } }
@keyframes iconGlowPulse-rose   { 0%,100% { box-shadow: 0 0 0 0 rgba(244,63,94,0),    0 4px 20px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 18px 4px rgba(244,63,94,.22),  0 4px 20px rgba(0,0,0,.35); } }

/* Banner bottom accent line breathe */
@keyframes lineBreathe { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* Banner & section content entry animations */
@keyframes bannerEnter  { from { opacity: 0; transform: translateY(-6px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes sectionEnter { from { opacity: 0; transform: translateY(16px); }  to { opacity: 1; transform: translateY(0); } }

/* Live dot pulse (used for kiosk status indicator) */
@keyframes pulse2 { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.4); } }

.fade-up { animation: fadeUp .35s ease both; }


/* ─────────────────────────────────────────────────────────────────
   7. PAGE: LANDING (index.php)
───────────────────────────────────────────────────────────────── */

body.page-landing {
  background: linear-gradient(155deg, #042e42 0%, #0a6a8a 55%, #0d8a6e 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

/* Subtle radial overlay */
body.page-landing::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.08) 0%, transparent 50%);
}

.home-card {
  background: #fff;
  border-radius: 32px;
  padding: 52px 44px;
  max-width: 740px;
  width: 100%;
  text-align: center;
  box-shadow: 0 40px 80px rgba(0,0,0,.35);
  position: relative;
  z-index: 1;
}

.logo-name        { font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 900; color: #042e42; letter-spacing: -1px; }
.logo-name em     { color: var(--sea); font-style: normal; }
.logo-sub         { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gray-400); margin: 6px 0 36px; }
.hero             { font-size: 17px; color: var(--gray-500); line-height: 1.65; max-width: 480px; margin: 0 auto 44px; }

/* Portal cards */
.portals          { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.portal {
  border-radius: 20px;
  padding: 32px 24px;
  text-decoration: none;
  transition: all .25s;
  border: 2px solid transparent;
  display: block;
}
.portal-kiosk { background: linear-gradient(135deg, #e0f4fb, #c5eaf8); border-color: #b3dff5; }
.portal-kiosk:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(10,126,164,.22);
  border-color: var(--sea);
}
.portal-admin { background: linear-gradient(135deg, #0a1628, #1e2a45); border-color: #1e2a45; }
.portal-admin:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,.4);
  border-color: #38bdf8;
}

.portal-emoji { font-size: 44px; margin-bottom: 16px; display: block; }
.portal-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.portal-desc  { font-size: 13px; line-height: 1.5; }

.portal-kiosk .portal-title { color: #042e42; }
.portal-kiosk .portal-desc  { color: #3a7a9c; }
.portal-admin .portal-title { color: #f0f9ff; }
.portal-admin .portal-desc  { color: #7fb3cc; }

.portal-cta {
  display: inline-block;
  margin-top: 16px;
  padding: 9px 22px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  transition: all .2s;
}
.portal-kiosk .portal-cta { background: var(--sea); color: #fff; }
.portal-admin .portal-cta { background: #38bdf8; color: #042e42; }

.stack-info      { margin-top: 36px; font-size: 12px; color: var(--gray-400); }
.stack-info span { background: var(--gray-100); padding: 3px 10px; border-radius: 6px; margin: 0 3px; font-weight: 600; }

/* Research Objective box */
.research-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 auto 28px;
  text-align: left;
  max-width: 520px;
}
.research-box-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #166534;
  margin-bottom: 6px;
}
.research-box-text {
  font-size: 13px;
  color: #15803d;
  line-height: 1.6;
  margin: 0;
}


/* ─────────────────────────────────────────────────────────────────
   8. PAGE: ADMIN LOGIN (admin/login.php)
───────────────────────────────────────────────────────────────── */

body.page-login {
  background: linear-gradient(155deg, #042e42 0%, #0a6a8a 55%, #0d8a6e 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

body.page-login::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.08) 0%, transparent 50%);
}

.login-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 48px 44px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 32px 64px rgba(0,0,0,.35);
  position: relative;
  z-index: 1;
}

.logo             { text-align: center; margin-bottom: 36px; }
.logo-tour        { background: var(--sea-dark); color: #fff; padding: 0 6px 2px; border-radius: 4px; display: inline-block; }

.login-logo-name {
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 900;
  color: #042e42;
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 8px;
}
.login-logo-name em { color: var(--sea); font-style: normal; }

.login-logo-sub {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-top: 6px;
}

.login-btn {
  width: 100%;
  margin-top: 10px;
  padding: 13px 22px;
  font-size: 15px;
  border-radius: var(--r-md);
  letter-spacing: 0.02em;
}

.error-box {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 18px;
  display: none;
}

.login-footer { text-align: center; margin-top: 20px; font-size: 12px; color: var(--gray-400); }


/* ─────────────────────────────────────────────────────────────────
   9a. ADMIN DASHBOARD — Layout
───────────────────────────────────────────────────────────────── */

body.page-admin {
  background: linear-gradient(155deg, #042e42 0%, #0a6a8a 55%, #0d8a6e 100%);
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-size: 14px;
  position: relative;
}

body.page-admin::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.05) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.07) 0%, transparent 50%);
}

/* ── Sidebar ── */

.sidebar {
  width: 230px;
  background: #080f1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  isolation: isolate;
  box-shadow: 4px 0 20px rgba(0,0,0,.25);
  overflow-y: auto;
  overflow-x: hidden;
}

.sb-logo        { padding: 24px 22px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-brand       { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 900; color: #fff; }
.sb-brand em    { color: #38bdf8; font-style: normal; }
.sb-sub         { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.35); margin-top: 3px; }
.sb-section     { padding: 14px 14px 6px; }
.sb-lbl         { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.3); padding: 0 8px; margin-bottom: 5px; font-weight: 700; }

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  margin-bottom: 2px;
  text-decoration: none;
  transition: background .18s, color .18s, transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.sb-item:hover  { background: rgba(255,255,255,.08); color: #fff; transform: translateX(3px); }
.sb-item.active { background: rgba(56,189,248,.15); color: #38bdf8; box-shadow: inset 3px 0 0 #38bdf8; }

.sb-icon { width: 16px; text-align: center; font-size: 14px; }

.sb-footer { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,.08); }

.admin-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 12px;
}
.admin-av {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}
.admin-name { font-size: 12px; font-weight: 600; color: #fff; }
.admin-role { font-size: 10px; color: rgba(255,255,255,.4); }

.logout-btn {
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  text-align: center;
  background: rgba(239,68,68,.15);
  color: #fca5a5;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.logout-btn:hover { background: rgba(239,68,68,.3); }

/* ── Main Content Area ── */

.main {
  margin-left: 230px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh;
  overflow-y: auto;                   /* use auto not scroll to avoid always-visible scrollbar */
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}


/* ─────────────────────────────────────────────────────────────────
   9b. ADMIN DASHBOARD — Section Banner
───────────────────────────────────────────────────────────────── */

.section-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 90px;
  background: linear-gradient(105deg, #0d1b2e 0%, #0d2137 45%, #0a3650 100%);
  position: sticky;
  top: 0;
  z-index: 40;
  overflow: hidden;
  border-radius: 16px;
  margin: 20px 24px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  flex-shrink: 0;
}

/* Right-side radial glow */
.section-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 100% at 90% 50%, rgba(56,189,248,.10) 0%, transparent 70%),
    radial-gradient(ellipse 30% 80% at 5%  50%, rgba(20,184,166,.06) 0%, transparent 70%);
}

/* Animated bottom accent line */
.section-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,.6) 30%, rgba(20,184,166,.8) 55%, rgba(56,189,248,.6) 75%, transparent 100%);
  filter: blur(.5px);
  animation: lineBreathe 3s ease-in-out infinite;
}

/* Shimmer sweep overlay */
.section-banner-shimmer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.section-banner-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.055) 50%, transparent);
  animation: shimmer 5s ease-in-out infinite;
}

/* Entry animation (triggered via JS) */
.section-banner.banner-enter  { animation: bannerEnter .34s cubic-bezier(.22,.68,0,1.15) both; }
.section.section-enter         { animation: sectionEnter .38s cubic-bezier(.22,.68,0,1.1) both; }

.section-banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 3;
}

/* Icon box */
.section-banner-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  animation: iconGlowPulse 4s ease-in-out infinite;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .22s;
}
.section-banner-icon:hover { transform: scale(1.08); border-color: rgba(255,255,255,.22); }

/* Per-theme glow color overrides */
.section-banner.theme-teal   .section-banner-icon { animation-name: iconGlowPulse-teal; }
.section-banner.theme-purple .section-banner-icon { animation-name: iconGlowPulse-purple; }
.section-banner.theme-amber  .section-banner-icon { animation-name: iconGlowPulse-amber; }
.section-banner.theme-green  .section-banner-icon { animation-name: iconGlowPulse-green; }
.section-banner.theme-rose   .section-banner-icon { animation-name: iconGlowPulse-rose; }

.section-banner-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: -.3px;
  line-height: 1.15;
  margin-bottom: 3px;
}
.section-banner-sub { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 400; letter-spacing: .2px; }

.section-banner-right {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/* Month picker pill */
.banner-select {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  backdrop-filter: blur(10px);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.banner-select:hover         { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.12); box-shadow: 0 0 12px rgba(255,255,255,.08); }
.banner-select:focus         { outline: none; border-color: rgba(255,255,255,.45); }
.banner-select option        { background: #0f2d4a; color: #fff; }

/* Export button */
.btn-banner {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .22s, transform .2s cubic-bezier(.34,1.56,.64,1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
}
.btn-banner:hover  { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.40); box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 16px rgba(255,255,255,.07); transform: translateY(-2px) scale(1.03); }
.btn-banner:active { transform: translateY(0) scale(.97); transition-duration: .08s; }


/* ─────────────────────────────────────────────────────────────────
   9c. ADMIN DASHBOARD — Banner Color Themes
   Each section has a unique gradient background and accent color.
───────────────────────────────────────────────────────────────── */

/* Visitor Records — teal-green */
.section-banner.theme-teal { background: linear-gradient(105deg, #052820 0%, #074d38 45%, #096650 100%); }
.section-banner.theme-teal::before { background: radial-gradient(ellipse 60% 100% at 90% 50%, rgba(20,184,166,.18) 0%, transparent 70%), radial-gradient(ellipse 30% 80% at 5% 50%, rgba(56,189,248,.08) 0%, transparent 70%); }
.section-banner.theme-teal::after  { background: linear-gradient(90deg, transparent 0%, rgba(20,184,166,.7) 30%, rgba(52,211,153,.9) 55%, rgba(20,184,166,.7) 75%, transparent 100%); }

/* Destinations — deep purple */
.section-banner.theme-purple { background: linear-gradient(105deg, #150d2e 0%, #26165a 45%, #1c2255 100%); }
.section-banner.theme-purple::before { background: radial-gradient(ellipse 60% 100% at 90% 50%, rgba(139,92,246,.20) 0%, transparent 70%), radial-gradient(ellipse 30% 80% at 5% 50%, rgba(99,102,241,.08) 0%, transparent 70%); }
.section-banner.theme-purple::after  { background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,.7) 30%, rgba(167,139,250,.9) 55%, rgba(139,92,246,.7) 75%, transparent 100%); }

/* Activities — warm amber */
.section-banner.theme-amber { background: linear-gradient(105deg, #1e0d00 0%, #4a1f00 45%, #2a1500 100%); }
.section-banner.theme-amber::before { background: radial-gradient(ellipse 60% 100% at 90% 50%, rgba(245,158,11,.22) 0%, transparent 70%), radial-gradient(ellipse 30% 80% at 5% 50%, rgba(234,88,12,.08) 0%, transparent 70%); }
.section-banner.theme-amber::after  { background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,.7) 30%, rgba(251,191,36,.9) 55%, rgba(245,158,11,.7) 75%, transparent 100%); }

/* Kiosk Status — forest green */
.section-banner.theme-green { background: linear-gradient(105deg, #031a08 0%, #074e18 45%, #043a10 100%); }
.section-banner.theme-green::before { background: radial-gradient(ellipse 60% 100% at 90% 50%, rgba(34,197,94,.18) 0%, transparent 70%), radial-gradient(ellipse 30% 80% at 5% 50%, rgba(16,185,129,.08) 0%, transparent 70%); }
.section-banner.theme-green::after  { background: linear-gradient(90deg, transparent 0%, rgba(34,197,94,.7) 30%, rgba(74,222,128,.9) 55%, rgba(34,197,94,.7) 75%, transparent 100%); }

/* Reports — deep crimson */
.section-banner.theme-rose { background: linear-gradient(105deg, #1a0008 0%, #4a0018 45%, #200008 100%); }
.section-banner.theme-rose::before { background: radial-gradient(ellipse 60% 100% at 90% 50%, rgba(244,63,94,.18) 0%, transparent 70%), radial-gradient(ellipse 30% 80% at 5% 50%, rgba(225,29,72,.08) 0%, transparent 70%); }
.section-banner.theme-rose::after  { background: linear-gradient(90deg, transparent 0%, rgba(244,63,94,.7) 30%, rgba(251,113,133,.9) 55%, rgba(244,63,94,.7) 75%, transparent 100%); }


/* ─────────────────────────────────────────────────────────────────
   9d. ADMIN DASHBOARD — Content Area
───────────────────────────────────────────────────────────────── */

/* Inline filter select (used in top bar) */
select.top-select {
  padding: 8px 14px;
  border: 2px solid var(--gray-200);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-700);
  background: #fff;
  cursor: pointer;
  appearance: none;
  transition: border-color .2s;
}
select.top-select:focus { outline: none; border-color: var(--sea); }

/* Animated online indicator dot */
.live-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse2 2s infinite;
}

/* ── Padded content wrapper ── */
.content { padding: 20px 24px 80px; }

/* ── KPI Cards ── */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }

.kpi-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 22px;
  border-left: 4px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .22s, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* KPI accent colors */
.kpi-card.blue  { border-color: #3b82f6; }
.kpi-card.teal  { border-color: #14b8a6; }
.kpi-card.amber { border-color: #f59e0b; }
.kpi-card.green { border-color: #22c55e; }

.kpi-card.blue:hover  { box-shadow: 0 8px 24px rgba(59,130,246,.18); }
.kpi-card.teal:hover  { box-shadow: 0 8px 24px rgba(20,184,166,.18); }
.kpi-card.amber:hover { box-shadow: 0 8px 24px rgba(245,158,11,.18); }
.kpi-card.green:hover { box-shadow: 0 8px 24px rgba(34,197,94,.18); }

.kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gray-400); margin-bottom: 10px; }
.kpi-value { font-family: 'Syne', sans-serif; font-size: 32px; font-weight: 800; line-height: 1; margin-bottom: 8px; color: #0a1628; }
.kpi-sub   { font-size: 12px; color: var(--gray-500); display: flex; align-items: center; gap: 4px; }
.kpi-up    { color: #059669; }
.kpi-down  { color: #dc2626; }
.kpi-icon  { float: right; margin-top: -50px; font-size: 26px; opacity: .2; }

/* ── Chart Grids ── */
.grid-2   { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-2eq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }

/* ── Page Tabs ── */
.page-tabs { display: flex; gap: 6px; margin-bottom: 20px; }

.tab {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid var(--gray-200);
  color: var(--gray-500);
  background: #fff;
  transition: all .15s;
}
.tab.active { background: var(--sea); color: #fff; border-color: var(--sea); }

/* ── Sections (show/hide) ── */
.section        { display: none; }
.section.active { display: block; }

/* ── Visitor Table ── */
.table-wrap { overflow-x: auto; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }

.pg-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 2px solid var(--gray-200);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--gray-700);
  transition: all .15s;
}
.pg-btn.active        { background: var(--sea); color: #fff; border-color: var(--sea); }
.pg-btn:hover:not(.active) { border-color: var(--sea); color: var(--sea); }

/* ── Kiosk Cards ── */
.kiosk-grid { display: block; width: 100%; }

.kiosk-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 18px;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.kiosk-card::before          { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.kiosk-card.online::before   { background: var(--success); }
.kiosk-card.offline::before  { background: var(--danger); }

.kiosk-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
}
.kiosk-status.online  { background: #d1fae5; color: #065f46; }
.kiosk-status.offline { background: #fee2e2; color: #991b1b; }

/* ── Destination / Activity Category Tabs ── */
.dest-tab {
  padding: 6px 14px;
  border-radius: 100px;
  border: 2px solid var(--gray-200);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all .15s;
  font-family: 'DM Sans', sans-serif;
}
.dest-tab:hover  { border-color: #3b82f6; color: #3b82f6; }
.dest-tab.active { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; }


/* ─────────────────────────────────────────────────────────────────
   10. PAGE: KIOSK (kiosk/index.php)
   — Purpose-built for 11-inch tablet kiosk (1366 × 768 px)
   — All sizes use vw/vh so the UI scales to fill the screen
───────────────────────────────────────────────────────────────── */

body.page-kiosk {
  background: linear-gradient(155deg, #042e42 0%, #0a6a8a 55%, #0d8a6e 100%);
  /* Use fixed positioning anchored to the visual viewport.
     This is the most reliable way to fill exactly what the user sees
     on Android Chrome, regardless of browser UI (address bar, tabs).  */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  overflow: hidden;
  touch-action: pan-y;
}

body.page-kiosk::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.08) 0%, transparent 50%);
}

.wave-bg { position: fixed; bottom: 0; left: 0; width: 100%; height: 110px; opacity: .12; pointer-events: none; }

/* ── Main kiosk card — fills body (which is fixed to visual viewport) ── */
.kiosk {
  background: #fefcf8;
  border-radius: 28px;
  width: 100%;
  max-width: 1100px;
  height: calc(100% - 20px); /* 100% of the fixed body = visual viewport */
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.15);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.kiosk-header {
  background: linear-gradient(135deg, #042e42, #0a7ea4);
  padding: 18px 48px 28px;
  text-align: center;
  position: relative;
  flex-shrink: 0;
}
.kiosk-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 24px;
  background: #fefcf8;
  border-radius: 24px 24px 0 0;
}

.logo-row  { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 4px; }
.logo-icon { width: 48px; height: 48px; background: rgba(255,255,255,.15); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.logo-name { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 900; color: #fff; letter-spacing: -1px; }
.logo-name em { color: #7dd8f0; font-style: normal; }
.logo-tag  { color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }

/* ── Stepper ── */
.stepper { display: flex; align-items: center; justify-content: center; padding: 18px 60px 0; flex-shrink: 0; }
.step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1; position: relative;
}
.step::before {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: var(--gray-200);
  transition: background .4s;
}
.step:last-child::before { display: none; }
.step.done::before { background: var(--sea); }

.step-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-400);
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: all .3s;
}
.step.active .step-num { background: var(--sea); color: #fff; box-shadow: 0 0 0 5px rgba(10,126,164,.2); }
.step.done   .step-num { background: var(--sea); color: #fff; }
.step-lbl              { font-size: 12px; color: var(--gray-400); font-weight: 600; }
.step.active .step-lbl { color: var(--sea); }

/* ── Screen content area — scrolls if needed ── */
.screen-wrap  {
  padding: 20px 52px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;                        /* critical: lets flex child shrink & scroll */
  -webkit-overflow-scrolling: touch;    /* momentum scroll on iOS */
  overscroll-behavior: contain;         /* don't propagate scroll to body */
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,126,164,.4) transparent;
}
.screen-wrap::-webkit-scrollbar       { width: 5px; }
.screen-wrap::-webkit-scrollbar-track { background: transparent; }
.screen-wrap::-webkit-scrollbar-thumb { background: rgba(10,126,164,.35); border-radius: 4px; }
.screen       { display: none; animation: fadeUp .3s ease; }
.screen.active { display: block; }

.screen-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: var(--gray-900); margin-bottom: 3px; }
.screen-sub   { color: var(--gray-500); font-size: 15px; margin-bottom: 16px; }

/* ── Language grid — welcome screen ── */
.lang-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 22px; }
.lang-btn {
  padding: 18px 8px;
  border: 2px solid var(--gray-200);
  border-radius: 14px;
  font-size: 17px; font-weight: 600;
  cursor: pointer; background: #fff;
  color: var(--gray-500);
  transition: all .18s; text-align: center; line-height: 1.5;
  min-height: 66px;
  display: flex; align-items: center; justify-content: center;
}
.lang-btn .lf    { display: none; }  /* flags removed — text only */
.lang-btn:hover  { border-color: var(--sea); color: var(--sea); }
.lang-btn.active { background: var(--sea-light); border-color: var(--sea); color: var(--sea-dark); font-weight: 700; }

/* ── Nationality grid ── */
.nat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; }
.nat-chip {
  padding: 12px 6px;
  border: 2px solid var(--gray-200);
  border-radius: 14px;
  font-size: 13px; font-weight: 600;
  color: var(--gray-500);
  cursor: pointer; text-align: center;
  transition: all .18s; background: #fff;
}
.nat-chip .nf      { font-size: 26px; display: block; margin-bottom: 4px; }
.nat-chip:hover    { border-color: var(--sea); color: var(--sea); }
.nat-chip.selected { background: var(--sea-light); border-color: var(--sea); color: var(--sea-dark); font-weight: 700; }

/* ── On-screen keyboard ── */
.osk-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 10000;
  background: rgba(4,46,66,.6);
  align-items: flex-end; justify-content: center;
}
.osk-overlay.open { display: flex; }

.osk-panel {
  width: 100%; max-width: 1100px;
  background: #162635;
  border-radius: 28px 28px 0 0;
  padding: 16px 20px 24px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.55);
  animation: oskSlideUp .22s ease;
}
@keyframes oskSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.osk-preview {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 14px;
  padding: 12px 18px; margin-bottom: 14px;
  border: 2.5px solid var(--sea);
}
.osk-preview-text {
  flex: 1; font-size: 18px; font-weight: 500;
  color: var(--gray-900); min-height: 26px; word-break: break-all;
}
.osk-preview-text:empty::before {
  content: 'e.g. Cebu City, Cebu  or  Tokyo, Japan';
  color: var(--gray-400); font-weight: 400;
}
.osk-clear {
  background: var(--gray-100); border: none; border-radius: 10px;
  padding: 9px 18px; font-size: 14px; font-weight: 600;
  color: var(--gray-500); cursor: pointer;
}
.osk-done {
  background: var(--sea); border: none; border-radius: 10px;
  padding: 9px 20px; font-size: 14px; font-weight: 700;
  color: #fff; cursor: pointer;
}

.osk-rows { display: flex; flex-direction: column; gap: 8px; }
.osk-row  { display: flex; gap: 7px; justify-content: center; }

.osk-key {
  height: 58px; min-width: 58px; flex: 1; max-width: 88px;
  border: none; border-radius: 12px;
  background: #2a4557;
  color: #fff; font-size: 19px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, transform .08s;
  user-select: none; -webkit-user-select: none;
  font-family: 'DM Sans', sans-serif;
}
.osk-key:active      { background: var(--sea); transform: scale(.92); }
.osk-key.wide        { flex: 2; max-width: 150px; font-size: 14px; }
.osk-key.space       { flex: 6; max-width: 420px; font-size: 14px; color: rgba(255,255,255,.55); }
.osk-key.action      { background: #0d4060; }
.osk-key.action:active { background: var(--sea-dark); }
.osk-key.shift-active  { background: var(--sea); }

/* Country picker modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 9999; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }

.modal-box {
  background: #fff; border-radius: 28px;
  width: 100%; max-width: 700px; max-height: 82vh;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.45); overflow: hidden;
}
.modal-head   { padding: 22px 28px; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title  { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #111; }
.modal-close  { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--gray-200); background: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--gray-500); transition: all .15s; line-height: 1; }
.modal-close:hover { background: #fee2e2; border-color: #fca5a5; color: var(--danger); }
.modal-search { padding: 12px 22px; border-bottom: 1px solid var(--gray-100); flex-shrink: 0; }
.modal-search input { width: 100%; padding: 12px 16px; border: 2px solid var(--gray-200); border-radius: 12px; font-size: 16px; font-family: 'DM Sans', sans-serif; color: #111; outline: none; transition: border-color .2s; }
.modal-search input:focus { border-color: var(--sea); }

.country-list { overflow-y: auto; padding: 10px 16px; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.country-opt  { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: background .12s; font-size: 15px; color: var(--gray-700); }
.country-opt:hover  { background: #f0f9ff; color: var(--sea); }
.country-opt.chosen { background: var(--sea-light); color: var(--sea-dark); font-weight: 600; }
.country-flag-sm    { font-size: 20px; flex-shrink: 0; }

/* Destination scroll box — senior-friendly */
.dest-wrap  { position: relative; }
.dest-scroll {
  max-height: 260px; overflow-y: auto;
  border: 3px solid var(--gray-200); border-radius: 18px;
  padding: 12px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; scrollbar-width: thick; scrollbar-color: var(--sea) var(--gray-100);
}
.dest-scroll::-webkit-scrollbar       { width: 8px; }
.dest-scroll::-webkit-scrollbar-track { background: var(--gray-100); border-radius: 8px; }
.dest-scroll::-webkit-scrollbar-thumb { background: var(--sea); border-radius: 8px; }

.dest-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
  background: linear-gradient(transparent, rgba(255,255,255,.97));
  border-radius: 0 0 16px 16px; pointer-events: none; transition: opacity .2s;
}

/* Destination chips — large tap target, high contrast */
.dest-chip {
  padding: 16px 18px; border: 2.5px solid var(--gray-200); border-radius: 14px;
  font-size: 17px; font-weight: 600; color: #1f2937;
  cursor: pointer; transition: all .15s; background: #fff;
  display: flex; align-items: center; gap: 10px; min-height: 60px;
  line-height: 1.25;
}
.dest-chip:hover    { border-color: var(--sea); color: var(--sea); background: #f0f9ff; }
.dest-chip.selected { background: var(--sea-light); border-color: var(--sea); color: var(--sea-dark); font-weight: 700; }
.dest-icon          { font-size: 22px; flex-shrink: 0; }

/* Activity / purpose chips — big pill buttons for seniors */
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 10px 20px; border: 2px solid var(--gray-200); border-radius: 100px;
  font-size: 15px; font-weight: 600; color: #1f2937;
  cursor: pointer; transition: all .18s; background: #fff; user-select: none;
  line-height: 1.3; min-height: 44px; display: inline-flex; align-items: center;
  flex-direction: row; /* explicit: prevents WebView flex-direction default to column */
  gap: 6px;
}
.chip:hover    { border-color: var(--sea); color: var(--sea); background: #f0f9ff; }
.chip.selected { background: var(--sea-light); border-color: var(--sea); color: var(--sea-dark); font-weight: 700; }

/* chip-svg inside base .chip */
.chip .chip-svg { width: 18px; height: 18px; flex-shrink: 0; }

/* chip-lg: purpose/visit chips with icon — same pill style as chip */
.chip-lg {
  padding: 10px 20px;
  font-size: 15px;
  min-height: 44px;
  border-radius: 100px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  flex-direction: row; /* explicit: prevents Fully Kiosk Browser from stacking vertically */
}
.chip-lg .chip-svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── chip-xl: compact pill with icon — used in heard_from, recommend, activities ── */
.chip-xl {
  padding: 10px 18px;
  font-size: 15px;
  min-height: 44px;
  border-radius: 100px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  flex-direction: row; /* explicit: prevents Fully Kiosk Browser from stacking vertically */
}
.chip-xl .chip-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Kiosk button rows */
.btn-row        { display: flex; gap: 16px; margin-top: 22px; }
.btn-row .btn   { flex: 1; padding: 16px 24px; font-size: 17px; border-radius: 16px; font-weight: 700; min-height: 54px; }
.btn-back       { background: #f3f4f6; color: #374151; border: 2px solid #d1d5db; }
.btn-back:hover { background: #e5e7eb; }

/* Star rating — very large for seniors */
.stars { display: flex; gap: 12px; flex-wrap: wrap; }
.star  { font-size: 48px; cursor: pointer; color: #d1d5db; transition: color .15s, transform .15s; line-height: 1; }
.star:hover, .star.lit { color: #fbbf24; transform: scale(1.15); }
.star.active { color: #fbbf24 !important; }

/* Welcome / thank-you screens */
.welcome      { text-align: center; padding: 6px 0 4px; }
.hero-emoji   { font-size: 72px; display: block; margin-bottom: 14px; }
.thankyou     { text-align: center; padding: 20px 0; }
.check-circle { width: 90px; height: 90px; background: #e8f5ee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 42px; margin: 0 auto 20px; border: 3px solid rgba(45,122,79,.2); }
.ref-pill     { display: inline-block; background: var(--sea-light); color: var(--sea-dark); font-size: 16px; font-weight: 700; padding: 12px 28px; border-radius: 100px; letter-spacing: 1px; margin: 14px 0; }

/* Kiosk form fields */
.form-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group   { margin-bottom: 16px; }
/* Section labels (ACTIVITIES PARTICIPATED, etc.) — high contrast for seniors */
.form-label   { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1f2937; }
.form-control { width: 100%; padding: 14px 20px; border-radius: 14px; border: 2.5px solid var(--gray-200); background: #fff; font-family: 'DM Sans', sans-serif; font-size: 17px; color: #111; transition: border-color .2s; appearance: none; }
.form-control:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px rgba(10,126,164,.12); }

/* Screen title & subtitle — larger for seniors */
.screen-title { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 700; color: #111; margin-bottom: 5px; }
.screen-sub   { color: #374151; font-size: 18px; font-weight: 500; margin-bottom: 18px; }

/* Scroll hint text */
.scroll-hint  { font-size: 15px; color: #6b7280; margin-top: 10px; font-weight: 500; }


/* ─────────────────────────────────────────────────────────────────
   11. RESPONSIVE OVERRIDES
───────────────────────────────────────────────────────────────── */

/* ── General mobile ── */
@media (max-width: 640px) {
  .form-row    { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
}

/* ── Admin Dashboard — small tablets (≤900px) ── */
@media (max-width: 900px) {
  /* Collapse sidebar to icon-only */
  .sidebar       { width: 60px; overflow: hidden; }
  .sb-logo       { padding: 14px 8px; text-align: center; }
  .sb-brand, .sb-sub, .sb-lbl,
  .sb-item span:not(.sb-icon),
  .admin-name, .admin-role,
  .logout-btn    { display: none; }
  .sb-item       { justify-content: center; padding: 12px; gap: 0; }
  .sb-item.active { background: rgba(56,189,248,.2); }
  .admin-chip    { justify-content: center; padding: 8px; }
  .admin-chip > div { display: none; }
  .sb-footer     { padding: 10px; }
  .sb-section    { padding: 8px 6px; }
  .main          { margin-left: 60px; }

  /* Show only first logo in collapsed sidebar */
  .sb-logo-row   { justify-content: center; gap: 0; }
  .sb-logo-row .sb-logo-img:not(:first-child) { display: none; }
  .sb-logo-row .sb-logo-img:first-child { width: 34px; height: 34px; margin: 0 auto; }

  /* Section banner */
  .section-banner { padding: 0 14px; flex-wrap: wrap; gap: 10px; height: auto; min-height: 68px; margin: 14px 12px 0; border-radius: 12px; }
  .section-banner-icon  { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
  .section-banner-title { font-size: 20px; }
  .section-banner-sub   { display: none; }
  .section-banner-right { padding: 10px 0; }

  /* KPI & grid */
  .kpi-row          { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-2eq { grid-template-columns: 1fr; }
  .grid-3           { grid-template-columns: 1fr 1fr; }
  .content          { padding: 16px; }
}

/* Tooltip labels for collapsed sidebar icons */
@media (max-width: 900px) {
  .sb-item { position: relative; }
  .sb-item::after {
    content: attr(data-label);
    position: absolute;
    left: 68px;
    background: #1e2a45;
    color: #f0f2ff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    z-index: 100;
  }
  .sb-item:hover::after { opacity: 1; }
}

/* ── Admin Dashboard — medium tablets (901–1100px) ── */
@media (min-width: 901px) and (max-width: 1100px) {
  .sidebar  { width: 190px; }
  .main     { margin-left: 190px; }
  .sb-brand { font-size: 20px; }
}

/* ── Admin Dashboard — large tablets / 11-inch landscape (1024–1366px) ── */
@media (min-width: 1024px) and (max-width: 1366px) {
  .sidebar    { width: 220px; }
  .main       { margin-left: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .kpi-row    { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .kpi-value  { font-size: 30px; }
  .content    { padding: 20px 24px 60px; }
  /* Ensure charts/grids don't overflow */
  .grid-2     { grid-template-columns: 1fr 1fr; }
  .grid-3     { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Touch targets — all tablets ── */
@media (min-width: 768px) and (max-width: 1366px) {
  .dest-tab           { padding: 8px 16px; font-size: 13px; }
  .data-table th,
  .data-table td      { padding: 13px 12px; font-size: 13px; }
  .pg-btn             { width: 38px; height: 38px; font-size: 14px; }
  select.top-select   { font-size: 14px; padding: 9px 14px; }
  .kiosk-card         { padding: 20px; }
  .kiosk-grid         { display: block; width: 100%; }
  .card-title         { font-size: 15px; }
}

/* ── Very small screens ── */
@media (max-width: 600px) {
  .kpi-row   { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-value { font-size: 24px; }
  .grid-3    { grid-template-columns: 1fr; }
  .content   { padding: 12px; }
}

/* ── Kiosk — 11-inch tablet landscape (1024px+, up to 1366px) ── */
@media (min-width: 1024px) {
  /* Body: true full-screen, no scroll outside the card */
  body.page-kiosk {
    padding: 12px 18px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* position:fixed already set in base rule — height:100% covers visual viewport */
    touch-action: pan-y;
  }

  /* Card fills landscape screen with generous breathing room */
  .kiosk {
    max-width: 1240px;
    width: 100%;
    height: calc(100% - 24px);
    border-radius: 26px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header — spacious but not oversized */
  .kiosk-header  { padding: 16px 56px 26px; flex-shrink: 0; }
  .logo-icon     { width: 52px; height: 52px; font-size: 28px; }
  .logo-name     { font-size: 36px; }
  .logo-tag      { font-size: 12px; letter-spacing: 3px; }

  /* Stepper */
  .stepper   { padding: 16px 80px 0; }
  .step-num  { width: 36px; height: 36px; font-size: 16px; }
  .step-lbl  { font-size: 13px; }

  /* Content area */
  .screen-wrap  { padding: 22px 64px 28px; min-height: 0; overflow-y: auto; }
  .screen-title { font-size: 30px; margin-bottom: 4px; }
  .screen-sub   { font-size: 16px; margin-bottom: 18px; }

  /* Language grid */
  .lang-grid    { gap: 12px; margin-bottom: 22px; }
  .lang-btn     { font-size: 19px; padding: 20px 10px; border-radius: 14px; min-height: 72px; }
  .lang-btn .lf { font-size: 26px; margin-bottom: 4px; }

  /* Nationality grid */
  .nat-grid      { grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 12px; }
  .nat-chip      { padding: 14px 8px; font-size: 14px; border-radius: 14px; }
  .nat-chip .nf  { font-size: 28px; margin-bottom: 5px; }

  /* Form fields */
  .form-group   { margin-bottom: 16px; }
  .form-label   { font-size: 13px; margin-bottom: 8px; }
  .form-control { font-size: 17px; padding: 14px 20px; border-radius: 14px; }
  .form-row     { gap: 18px; }

  /* Chips (purpose, activities, heard-from) */
  .chip-group   { gap: 10px; }
  .chip         { padding: 10px 20px; font-size: 15px; min-height: 44px; }

  /* Destination chips */
  .dest-scroll  { max-height: 240px; gap: 8px; padding: 12px; }
  .dest-chip    { padding: 14px 16px; font-size: 15px; min-height: 52px; border-radius: 14px; }
  .dest-icon    { font-size: 20px; }

  /* Stars */
  .star         { font-size: 48px; }
  .stars        { gap: 14px; }

  /* Screen title & subtitle */
  .screen-title { font-size: 34px; }
  .screen-sub   { font-size: 19px; }

  /* Form labels */
  .form-label   { font-size: 15px; margin-bottom: 12px; }

  /* Buttons */
  .btn-row      { gap: 18px; margin-top: 26px; }
  .btn-row .btn { padding: 16px 24px; font-size: 18px; border-radius: 18px; min-height: 56px; }

  /* Welcome screen */
  .hero-emoji { font-size: 80px; margin-bottom: 16px; }

  /* Thank you screen */
  .check-circle { width: 96px; height: 96px; font-size: 44px; }
  .ref-pill     { font-size: 16px; padding: 12px 28px; }

  /* Modal */
  .modal-box    { max-width: 760px; }
  .modal-title  { font-size: 24px; }
  .country-list { grid-template-columns: 1fr 1fr 1fr; }
  .country-opt  { font-size: 15px; padding: 11px 14px; }

  /* OSK keyboard sizing for 11-inch */
  .osk-panel  { max-width: 1240px; padding: 18px 24px 28px; }
  .osk-key    { height: 62px; min-width: 62px; max-width: 96px; font-size: 20px; border-radius: 13px; }
  .osk-key.wide  { max-width: 160px; font-size: 15px; }
  .osk-key.space { max-width: 480px; font-size: 15px; }
  .osk-rows   { gap: 9px; }
  .osk-row    { gap: 8px; }
  .osk-preview-text { font-size: 20px; }
  .osk-clear  { padding: 11px 22px; font-size: 15px; border-radius: 11px; }
  .osk-done   { padding: 11px 24px; font-size: 15px; border-radius: 11px; }
}

/* ── Kiosk — smaller tablets 768–1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
  body          { padding: 20px; }
  .kiosk        { max-width: 860px; border-radius: 26px; height: calc(100% - 40px); }
  .kiosk-header { padding: 16px 40px 24px; }
  .logo-name    { font-size: 30px; }
  .screen-wrap  { padding: 18px 40px 24px; }
  .screen-title { font-size: 24px; }
  .screen-sub   { font-size: 14px; }
  .stepper      { padding: 14px 40px 0; }
  .nat-grid     { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .nat-chip     { padding: 11px 6px; font-size: 12px; }
  .nat-chip .nf { font-size: 22px; }
  .chip         { display: inline-flex !important; flex-direction: row !important; align-items: center !important; padding: 10px 16px; font-size: 13px; width: auto !important; aspect-ratio: unset !important; }
  .chip .chip-svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; margin: 0 !important; }
  .chip-lg      { display: inline-flex !important; flex-direction: row !important; align-items: center !important; padding: 10px 16px; font-size: 13px; gap: 6px; width: auto !important; aspect-ratio: unset !important; }
  .chip-lg .chip-svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; margin: 0 !important; }
  .chip-xl      { display: inline-flex !important; flex-direction: row !important; align-items: center !important; padding: 10px 14px; font-size: 13px; gap: 6px; width: auto !important; aspect-ratio: unset !important; }
  .chip-xl .chip-svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; margin: 0 !important; }
  .btn-row .btn { padding: 15px 22px; font-size: 16px; }
  .star         { font-size: 40px; }
  .dest-scroll  { max-height: 200px; }
}

/* ── Kiosk — landscape phone ── */
@media (max-width: 767px) and (orientation: landscape) {
  body.page-kiosk { padding: 8px; }
  .kiosk        { border-radius: 16px; height: calc(100% - 16px); }
  .kiosk-header { padding: 10px 20px 18px; }
  .logo-name    { font-size: 20px; }
  .screen-wrap  { padding: 12px 20px 16px; }
  .screen-title { font-size: 17px; }
  .screen-sub   { font-size: 12px; margin-bottom: 10px; }
  .stepper      { padding: 10px 16px 0; }
  .step-num     { width: 24px; height: 24px; font-size: 11px; }
  .dest-scroll  { max-height: 130px; }
  .nat-chip .nf { font-size: 18px; }
}

/* ── Settings Section ────────────────────────────────────────── */
.stg-form   { display:flex; flex-direction:column; gap:18px; }
.stg-row    { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stg-field  { display:flex; flex-direction:column; gap:6px; }
.stg-label  { font-size:13px; font-weight:600; color:#374151; letter-spacing:.3px; }
.stg-hint   { font-size:11px; color:#9ca3af; }

.stg-input {
  width:100%; padding:10px 14px;
  border:1.5px solid #e5e7eb; border-radius:8px;
  font-family:inherit; font-size:14px; color:#1f2937;
  background:#f9fafb; box-sizing:border-box;
  transition:border-color .2s, box-shadow .2s;
}
.stg-input:focus {
  outline:none; border-color:#3b82f6; background:#fff;
  box-shadow:0 0 0 3px rgba(59,130,246,.12);
}

.stg-pw-wrap { position:relative; display:flex; align-items:center; }
.stg-pw-wrap .stg-input { padding-right:42px; }
.stg-eye {
  position:absolute; right:10px;
  background:none; border:none; cursor:pointer;
  font-size:15px; opacity:.45; padding:2px; line-height:1;
  transition:opacity .2s;
}
.stg-eye:hover { opacity:1; }

.stg-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.stg-msg { font-size:13px; font-weight:500; min-height:18px; transition:color .2s; }

@media (max-width:600px) {
  .stg-row { grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE OVERRIDES v2 — Mobile-First Comprehensive Rewrite
   Breakpoints:
     xs  : <480px   (small phones)
     sm  : <640px   (phones)
     md  : ≤900px   (tablets portrait)
     lg  : 901–1100px (tablets landscape)
     xl  : 1101–1366px (laptops)
─────────────────────────────────────────────────────────────────── */

/* ── Mobile Hamburger Toggle ── */
.sb-toggle {
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 200;
  width: 42px;
  height: 42px;
  background: #080f1a;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transition: background .2s;
}
.sb-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.sb-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sb-toggle.open span:nth-child(2) { opacity: 0; }
.sb-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay for mobile sidebar */
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 48;
  backdrop-filter: blur(2px);
}
.sb-overlay.open { display: block; }

/* ── Large phones and up base ── */
@media (max-width: 480px) {
  /* Landing page */
  .home-card       { padding: 32px 20px; border-radius: 20px; }
  .logo-name       { font-size: 28px; }
  .logo-sub        { font-size: 9px; }
  .hero            { font-size: 14px; margin-bottom: 28px; }
  .portals         { grid-template-columns: 1fr; gap: 14px; }
  .portal          { padding: 22px 18px; }
  .portal-emoji    { font-size: 32px; }
  .portal-title    { font-size: 17px; }
  .stack-info      { font-size: 10px; }

  /* Login card */
  .login-card      { padding: 32px 24px; border-radius: 20px; }

  /* KPI row stacks to 2 cols on xs */
  .kpi-row         { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-value       { font-size: 22px; }
  .kpi-label       { font-size: 9px; }
  .kpi-icon        { font-size: 20px; margin-top: -42px; }

  /* All chart grids go single column */
  .grid-2, .grid-3, .grid-2eq { grid-template-columns: 1fr; }

  /* Section banner compact */
  .section-banner        { padding: 0 10px; min-height: 60px; margin: 10px 8px 0; border-radius: 10px; gap: 6px; }
  .section-banner-icon   { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
  .section-banner-title  { font-size: 16px; }
  .section-banner-right  { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .banner-select         { font-size: 11px; padding: 6px 10px; }
  .btn-banner            { font-size: 11px; padding: 6px 10px; }

  /* Content padding */
  .content { padding: 8px; }

  /* Tables: enable horizontal scroll with visible indicator */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 11px; white-space: nowrap; }

  /* Destination/activity category filter tabs wrap nicely */
  #destCatFilter, #destCatFilter + div { padding: 10px 10px 6px; }
  .dest-tab { font-size: 11px; padding: 5px 10px; }

  /* Settings */
  .stg-row { grid-template-columns: 1fr; }
  .stg-input { font-size: 14px; }

  /* Kiosk */
  .kiosk          { border-radius: 0; max-width: 100%; min-height: 100vh; }
  .kiosk-header   { padding: 16px 18px 24px; }
  .logo-name      { font-size: 22px; }
  .logo-tag       { font-size: 9px; }
  .screen-wrap    { padding: 14px 16px 28px; }
  .screen-title   { font-size: 17px; }
  .screen-sub     { font-size: 12px; }
  .lang-grid      { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .lang-btn       { font-size: 15px !important; padding: 14px 6px !important; min-height: 58px !important; }
  .lang-btn .lf   { font-size: 16px; }
  .nat-grid       { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .nat-chip       { padding: 9px 5px; font-size: 11px; }
  .nat-chip .nf   { font-size: 18px; }
  .dest-scroll    { grid-template-columns: 1fr; max-height: 200px; }
  .star           { font-size: 28px; }
  .hero-emoji     { font-size: 52px; }
  .btn-row        { flex-direction: column; gap: 8px; }
  .btn-row .btn   { width: 100%; }
  .form-row       { grid-template-columns: 1fr; }
  .stepper        { padding: 14px 12px 0; overflow-x: auto; }
  .step-lbl       { font-size: 9px; }
  .step-num       { width: 24px; height: 24px; font-size: 11px; }
  .country-list   { grid-template-columns: 1fr; }
}

/* ── Small phones (640px and below) ── */
@media (max-width: 640px) {
  /* Mobile sidebar drawer behaviour */
  .sb-toggle      { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    width: 240px !important;  /* full panel on mobile */
    z-index: 100;
  }
  .sidebar.open { transform: translateX(0); }

  /* Restore hidden labels inside open mobile sidebar */
  .sidebar.open .sb-brand,
  .sidebar.open .sb-sub,
  .sidebar.open .sb-lbl,
  .sidebar.open .sb-item span:not(.sb-icon),
  .sidebar.open .admin-name,
  .sidebar.open .admin-role,
  .sidebar.open .logout-btn { display: block !important; }
  .sidebar.open .sb-item    { justify-content: flex-start; padding: 10px 12px; gap: 10px; }
  .sidebar.open .admin-chip { justify-content: flex-start; padding: 10px 12px; }
  .sidebar.open .admin-chip > div { display: block !important; }
  /* Restore all 3 logos in open mobile sidebar */
  .sidebar.open .sb-logo-row { justify-content: flex-start; gap: 8px; }
  .sidebar.open .sb-logo-row .sb-logo-img { display: block !important; width: 36px; height: 36px; }

  /* Full-width main with top padding for toggle button */
  .main           { margin-left: 0 !important; padding-top: 58px; }

  /* Section banner — move below toggle */
  .section-banner { margin: 4px 8px 0; }

  /* Prevent card lift hover on mobile (saves space, avoids accidental taps) */
  .card:hover { transform: none; }

  /* Kiosk full screen on phones */
  body            { padding: 0; }
  .kiosk          { border-radius: 0; min-height: 100dvh; }

  /* Form row single column */
  .form-row { grid-template-columns: 1fr; }

  /* Landing page portals stacked */
  .portals { grid-template-columns: 1fr; }
}

/* ── Tablet portrait (641–900px) ── */
@media (min-width: 641px) and (max-width: 900px) {
  /* Collapsed sidebar — icon only with tooltips */
  .sidebar          { width: 64px; overflow: visible; }
  .sb-brand, .sb-sub, .sb-lbl,
  .sb-item span:not(.sb-icon),
  .admin-name, .admin-role,
  .logout-btn       { display: none; }
  .sb-item          { justify-content: center; padding: 12px; gap: 0; }
  .sb-item.active   { background: rgba(56,189,248,.2); }
  .admin-chip       { justify-content: center; padding: 8px; }
  .admin-chip > div { display: none !important; }
  .sb-footer        { padding: 10px 8px; }
  .sb-section       { padding: 8px 6px; }
  .main             { margin-left: 64px; }

  /* Tooltip on hover */
  .sb-item          { position: relative; }
  .sb-item::after {
    content: attr(data-label);
    position: absolute;
    left: 72px;
    top: 50%;
    transform: translateY(-50%);
    background: #1e2a45;
    color: #f0f2ff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    z-index: 100;
  }
  .sb-item:hover::after { opacity: 1; }

  /* Logout button: icon-only on collapsed sidebar */
  .logout-btn-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(239,68,68,.15);
    color: #fca5a5;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
    margin: 0 auto;
  }
  .logout-btn-icon:hover { background: rgba(239,68,68,.3); }

  /* Banner */
  .section-banner        { padding: 0 16px; min-height: 70px; height: auto; margin: 14px 14px 0; flex-wrap: wrap; gap: 8px; border-radius: 12px; }
  .section-banner-icon   { width: 44px; height: 44px; font-size: 21px; border-radius: 12px; }
  .section-banner-title  { font-size: 20px; }
  .section-banner-sub    { display: none; }
  .section-banner-right  { padding: 8px 0; gap: 8px; }

  /* KPIs 2-col */
  .kpi-row               { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi-value             { font-size: 26px; }

  /* Chart grids */
  .grid-2, .grid-2eq     { grid-template-columns: 1fr; }
  .grid-3                { grid-template-columns: 1fr 1fr; }

  /* Content */
  .content               { padding: 14px 16px; }

  /* Tables */
  .table-wrap            { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table th, .data-table td { font-size: 12px; padding: 10px 11px; }

  /* Landing portals */
  .portals               { grid-template-columns: 1fr; }
  .home-card             { padding: 40px 32px; }
}

/* ── Tablet landscape / small laptop (901–1100px) ── */
@media (min-width: 901px) and (max-width: 1100px) {
  .sidebar      { width: 190px; }
  .main         { margin-left: 190px; }
  .sb-brand     { font-size: 20px; }

  .kpi-row      { grid-template-columns: repeat(4,1fr); gap: 12px; }
  .kpi-value    { font-size: 26px; }

  .grid-2       { grid-template-columns: 3fr 2fr; }
  .grid-2eq     { grid-template-columns: 1fr 1fr; }
  .grid-3       { grid-template-columns: 1fr 1fr 1fr; }

  .content      { padding: 18px 20px; }
  .section-banner { margin: 16px 18px 0; }
}

/* ── Large laptop / desktop (1101–1366px) ── */
@media (min-width: 1101px) and (max-width: 1366px) {
  .sidebar      { width: 210px; }
  .main         { margin-left: 210px; }
  .kpi-value    { font-size: 28px; }
  .content      { padding: 20px 22px; }
}

/* ── Touch targets — tablets ── */
@media (min-width: 641px) and (max-width: 1366px) {
  .dest-tab           { padding: 8px 16px; font-size: 13px; }
  .data-table th,
  .data-table td      { padding: 13px 12px; font-size: 13px; }
  .pg-btn             { width: 40px; height: 40px; font-size: 14px; }
  .card-title         { font-size: 15px; }
  .btn                { min-height: 44px; }
}

/* ── Kiosk responsive — small phones ── */
@media (min-width: 480px) and (max-width: 767px) {
  .lang-grid    { grid-template-columns: repeat(3,1fr); }
  .nat-grid     { grid-template-columns: repeat(3,1fr); }
  .dest-scroll  { grid-template-columns: 1fr 1fr; max-height: 220px; }
  .kiosk        { border-radius: 20px; }
  body.page-kiosk { padding: 16px; }
}

/* ── Kiosk responsive — portrait tablet 768–1023px ── */
@media (min-width: 768px) and (max-width: 1023px) {
  body.page-kiosk { padding: 20px; overflow: hidden; }
  .lang-grid    { grid-template-columns: repeat(5,1fr); }
  .nat-grid     { grid-template-columns: repeat(5,1fr); }
  .dest-scroll  { max-height: 200px; }
  .country-list { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Landscape phone ── */
@media (max-width: 767px) and (orientation: landscape) {
  body.page-kiosk { padding: 8px; overflow: hidden; }
  .logo-tag     { display: none; }
  .screen-title { margin-bottom: 4px; }
  .hero-emoji   { font-size: 44px; margin-bottom: 8px; }
  .lang-grid    { grid-template-columns: repeat(5,1fr); gap: 6px; }
}

/* ── TechLife Pad Pro / 12-inch tablet in Chrome landscape ── */
/* CSS viewport ~1200×800px; with Chrome UI ~670px usable height.   */
/* dvh handles the browser chrome; these rules keep the header lean. */
@media (min-width: 1150px) and (max-width: 1400px) and (max-height: 860px) {
  body.page-kiosk {
    padding: 8px 14px;
  }
  .kiosk {
    height: calc(100% - 16px);
    border-radius: 22px;
  }
  .kiosk-header {
    padding: 10px 40px 18px; /* shorter header so content area is taller */
  }
  .logo-icon  { width: 40px; height: 40px; font-size: 22px; }
  .logo-name  { font-size: 28px; }
  .logo-tag   { font-size: 10px; letter-spacing: 2px; }
  #kioskClock { margin-top: 2px; }
  #kioskTime  { font-size: 15px !important; }
  .stepper    { padding: 10px 50px 0; }
  .step-num   { width: 30px; height: 30px; font-size: 13px; }
  .step-lbl   { font-size: 11px; }
  .screen-wrap { padding: 14px 44px 18px; }
  .screen-title { font-size: 24px; }
  .screen-sub   { font-size: 15px; margin-bottom: 12px; }
  .form-group   { margin-bottom: 12px; }
  .btn-row .btn { padding: 16px 22px; font-size: 17px; min-height: 54px; }
  .lang-grid  { gap: 8px; margin-bottom: 16px; }
  .lang-btn   { padding: 18px 8px !important; font-size: 18px !important; min-height: 68px !important; }
  .lang-btn .lf { font-size: 20px; }
  .nat-chip   { padding: 10px 5px; font-size: 12px; }
  .nat-chip .nf { font-size: 22px; }
  .dest-scroll { max-height: 180px; }
  .star       { font-size: 48px; }
  .hero-emoji { font-size: 56px; margin-bottom: 10px; }
  .welcome h1 { font-size: 26px !important; margin-bottom: 8px !important; }
  .welcome p  { font-size: 14px !important; margin-bottom: 14px !important; }
}

/* ── Print ── */
@media print {
  .sidebar, .sb-toggle, .sb-overlay, .section-banner, .pagination,
  .dest-tab, .btn, .logout-btn { display: none !important; }
  .main           { margin-left: 0 !important; }
  .content        { padding: 0 !important; }
  .card           { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  .grid-2, .grid-3, .grid-2eq, .kpi-row { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   12-INCH TABLET OPTIMISATIONS
   Targets: 1200–1400px wide, ~800px tall (landscape)
   Typical devices: iPad Pro 12.9 (1366×1024), Surface Pro (1368×912),
                    Samsung Tab S9 Ultra (1848×2960 → CSS 1366×1024)
   ═══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   ADMIN DASHBOARD — 12-inch tablet
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) and (max-width: 1400px) {

  /* ── Sidebar: comfortable width for 12-inch ── */
  .sidebar          { width: 224px; }
  .main             {
    margin-left: 224px;
    height: 100vh;
    overflow-y: auto;                     /* reliable scroll */
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* ── Content padding — more breathing room ── */
  .content          { padding: 22px 26px 80px; }  /* big bottom pad so last card clears */

  /* ── KPI row: 4 equal columns ── */
  .kpi-row          { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .kpi-value        { font-size: 30px; }
  .kpi-label        { font-size: 11px; }

  /* ── Chart grids ── */
  .grid-2           { grid-template-columns: 3fr 2fr; gap: 18px; }
  .grid-2eq         { grid-template-columns: 1fr 1fr; gap: 18px; }
  .grid-3           { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

  /* ── Section banner ── */
  .section-banner   { height: 84px; margin: 18px 22px 0; border-radius: 16px; }
  .section-banner-title { font-size: 24px; }
  .section-banner-sub   { font-size: 13px; }
  .section-banner-icon  { width: 52px; height: 52px; font-size: 25px; }

  /* ── Tables: tighter but readable ── */
  .data-table th, .data-table td { padding: 12px 14px; font-size: 13px; }

  /* ── Cards: slightly larger shadows for crisp 12-inch display ── */
  .card             { box-shadow: 0 4px 20px rgba(0,0,0,.09); }
}

/* ────────────────────────────────────────────────────────────────
   KIOSK — 12-inch tablet landscape (1200–1400 × 750–1100px)
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) and (max-width: 1400px) {

  /* ── Outer body ── */
  body.page-kiosk {
    padding: 16px 24px;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* ── Kiosk card ── */
  .kiosk {
    max-width: 1260px;
    width: 100%;
    height: calc(100% - 20px);
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* card clips, inner area scrolls */
  }

  /* ── Header: proportional for 12-inch ── */
  .kiosk-header   { padding: 16px 56px 26px; flex-shrink: 0; }
  .logo-icon      { width: 52px; height: 52px; font-size: 28px; }
  .logo-name      { font-size: 36px; }
  .logo-tag       { font-size: 12px; letter-spacing: 3px; }

  /* ── Stepper: flex-shrink:0 so it never collapses ── */
  .stepper        { padding: 16px 80px 0; flex-shrink: 0; }
  .step-num       { width: 36px; height: 36px; font-size: 16px; }
  .step-lbl       { font-size: 13px; }

  /* ── Scrollable content area: flex:1 + min-height:0 = proper scroll ── */
  .screen-wrap {
    padding: 22px 64px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* ── Screen titles ── */
  .screen-title   { font-size: 32px; margin-bottom: 4px; }
  .screen-sub     { font-size: 18px; margin-bottom: 18px; }

  /* ── Form fields ── */
  .form-group     { margin-bottom: 16px; }
  .form-label     { font-size: 14px; margin-bottom: 10px; }
  .form-control   { font-size: 17px; padding: 14px 20px; border-radius: 14px; }
  .form-row       { gap: 18px; }

  /* ── Language & nationality grids ── */
  .lang-grid      { grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 22px; }
  .lang-btn       { font-size: 19px; padding: 20px 10px; border-radius: 14px; min-height: 72px; }
  .lang-btn .lf   { font-size: 26px; margin-bottom: 4px; }
  .nat-grid       { grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 12px; }
  .nat-chip       { padding: 14px 8px; font-size: 14px; border-radius: 14px; }
  .nat-chip .nf   { font-size: 28px; margin-bottom: 5px; }

  /* ── Chips: compact touch targets ── */
  .chip-group     { gap: 10px; }
  .chip           { display: inline-flex !important; flex-direction: row !important; align-items: center !important; padding: 10px 20px; font-size: 15px; min-height: 44px; width: auto !important; aspect-ratio: unset !important; }
  .chip .chip-svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin: 0 !important; }
  .chip-lg        { display: inline-flex !important; flex-direction: row !important; align-items: center !important; padding: 10px 20px; font-size: 15px; min-height: 44px; gap: 8px; width: auto !important; aspect-ratio: unset !important; }
  .chip-lg .chip-svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin: 0 !important; }
  .chip-xl        { display: inline-flex !important; flex-direction: row !important; align-items: center !important; padding: 10px 18px; font-size: 15px; min-height: 44px; gap: 8px; width: auto !important; aspect-ratio: unset !important; }
  .chip-xl .chip-svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; margin: 0 !important; }

  /* ── Destination scroll box — constrained height so it scrolls ── */
  .dest-scroll    { max-height: 240px; gap: 8px; padding: 12px; }
  .dest-chip      { padding: 14px 16px; font-size: 15px; min-height: 52px; border-radius: 14px; }
  .dest-icon      { font-size: 20px; }

  /* ── Stars ── */
  .star           { font-size: 66px; }
  .stars          { gap: 20px; }

  /* ── Nav buttons — sticky-ish at bottom of screen-wrap ── */
  .btn-row        { gap: 18px; margin-top: 24px; }
  .btn-row .btn   { padding: 20px 32px; font-size: 21px; border-radius: 20px; min-height: 68px; }

  /* ── Welcome / thank-you ── */
  .hero-emoji     { font-size: 80px; margin-bottom: 16px; }
  .check-circle   { width: 96px; height: 96px; font-size: 44px; }
  .ref-pill       { font-size: 16px; padding: 12px 28px; }

  /* ── Country modal ── */
  .modal-box      { max-width: 780px; max-height: 80vh; }
  .modal-title    { font-size: 24px; }
  .country-list   { grid-template-columns: 1fr 1fr 1fr; }
  .country-opt    { font-size: 15px; padding: 11px 14px; }

  /* ── On-screen keyboard ── */
  .osk-panel      { max-width: 1260px; padding: 18px 24px 28px; }
  .osk-key        { height: 62px; min-width: 62px; max-width: 96px; font-size: 20px; border-radius: 13px; }
  .osk-key.wide   { max-width: 160px; font-size: 15px; }
  .osk-key.space  { max-width: 480px; font-size: 15px; }
  .osk-rows       { gap: 9px; }
  .osk-row        { gap: 8px; }
  .osk-preview-text { font-size: 20px; }
  .osk-clear      { padding: 11px 22px; font-size: 15px; border-radius: 11px; }
  .osk-done       { padding: 11px 24px; font-size: 15px; border-radius: 11px; }
}

/* ────────────────────────────────────────────────────────────────
   GLOBAL SCROLL FIXES — all tablet sizes
   Ensures touch scrolling works everywhere it should
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 641px) and (max-width: 1400px) {

  /* Admin main area: reliable touch scroll */
  .main {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Kiosk screen-wrap: always scrollable on touch */
  .screen-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* Destination scroll box */
  .dest-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* Country modal list */
  .country-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Data tables horizontal scroll */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ────────────────────────────────────────────────────────────────
   KIOSK SCROLL FIX — all sizes
   Ensures the kiosk card's flex children scroll correctly
   ──────────────────────────────────────────────────────────────── */
.kiosk {
  /* Already set to flex + column — enforce proper height chain */
  overflow: hidden;
}

/* The stepper must never grow/shrink so screen-wrap gets remaining space */
.stepper    { flex-shrink: 0; }
.kiosk-header { flex-shrink: 0; }

/* screen-wrap is the only flex child that should scroll */
.screen-wrap {
  /* min-height:0 is the critical fix — without it, flex items
     refuse to shrink below their content height and scroll never triggers */
  min-height: 0;
}


/* ────────────────────────────────────────────────────────────────
   LOGO IMAGES — Healing Island, DOT, Province Seal
   ──────────────────────────────────────────────────────────────── */

/* Kiosk header logo row with real images */
/* Logo circle wrapper — fixes black background in Android WebView */
.logo-circle {
  border-radius: 50% !important;
  background: #ffffff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.logo-circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.logo-healing-island {
  height: 52px !important;
  width: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  padding: 2px;
  display: block;
}

.logo-dot {
  height: 42px !important;
  width: 42px !important;
  max-width: 42px !important;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  padding: 2px;
}

.logo-seal {
  height: 42px !important;
  width: 42px !important;
  max-width: 42px !important;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  padding: 2px;
}

/* Three-zone kiosk header: left | center | right */
.logo-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  width: 100%;
  gap: 0;
}

.logo-left {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 52px;
}

.logo-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.logo-partners {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: 0 !important;
  min-width: 52px;
  justify-content: flex-end;
}

/* ── Kiosk header logos — tablet portrait (768–1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .logo-healing-island { height: 44px; width: 44px; }
  .logo-dot, .logo-seal { height: 36px; width: 36px; }
  .logo-name { font-size: 26px !important; }
}

/* ── Kiosk header logos — mobile (≤767px) ── */
@media (max-width: 767px) {
  .logo-healing-island { height: 36px; width: 36px; }
  .logo-dot, .logo-seal { height: 30px; width: 30px; }
  .logo-partners { gap: 5px; }
  .logo-name { font-size: 20px !important; }
}

/* Admin sidebar logo image */
.sb-logo-img {
  height: 36px;
  width: 36px;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  flex-shrink: 0;
}

/* Row of 3 logos in admin sidebar */
.sb-logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* ────────────────────────────────────────────────────────────────
   SVG ICONS IN CHIPS & BUTTONS
   ──────────────────────────────────────────────────────────────── */

.chip-svg {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
  color: inherit;
}

/* SVG inside dest-icon span */
.dest-icon svg {
  display: block;
}

/* Stars — color drives fill="currentColor" in SVG path */
.star { color: #d1d5db; }
.star svg { transition: color 0.15s; display: block; }
/* Active/lit → yellow */
.star.active, .star.lit { color: #fbbf24 !important; }
/* Hover preview: all stars yellow */
.stars:hover .star { color: #fbbf24; }
/* Stars after hovered one → gray */
.star:hover ~ .star { color: #d1d5db !important; }

/* Make chip-group items flexbox for SVG + text alignment */
.chip {
  display: inline-flex;
  align-items: center;
}

/* SVG icons in sidebar items */
.sb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: inherit;
}

/* SVG in language buttons */
.lang-btn .lf svg {
  display: block;
  border-radius: 2px;
}

/* Nationality chip flag SVGs */
.nat-chip .nf svg,
.nat-chip .nf {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  overflow: hidden;
}

/* Hero emoji area with SVG */
.hero-emoji {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.hero-emoji svg {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

/* Hero logo image (replaces SVG emoji) */
.hero-logo-img {
  width: 110px !important;
  height: 110px !important;
  max-width: 110px !important;
  max-height: 110px !important;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  background: #fff;
  display: block;
}

/* ── Hero logo responsive scaling ── */
@media (min-width: 1024px) {
  .hero-logo-img { width: 80px !important; height: 80px !important; max-width: 80px !important; max-height: 80px !important; }
}
@media (min-width: 1200px) {
  .hero-logo-img { width: 90px !important; height: 90px !important; max-width: 90px !important; max-height: 90px !important; }
}
@media (max-width: 767px) {
  .hero-logo-img { width: 60px !important; height: 60px !important; max-width: 60px !important; max-height: 60px !important; }
}
@media (max-width: 767px) and (orientation: landscape) {
  .hero-logo-img { width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; }
  .hero-emoji    { margin-bottom: 4px; }
}


/* ── Fully Kiosk Browser — all tablet widths 1024px+ ──────────────────────
   Fully Kiosk Browser (Android WebView) may apply different flex defaults
   than Chrome desktop/tablet. This block forces identical pill-style chips
   (flex-direction: row, compact padding, correct SVG sizing) across ALL
   tablet viewport heights — matching Chrome PC and Chrome tablet exactly.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Header */
  .kiosk-header    { padding: 12px 48px 22px; }
  .logo-name       { font-size: 32px !important; }
  .logo-tag        { font-size: 11px; letter-spacing: 2.5px; }
  #kioskClock      { margin-top: 4px; }
  #kioskTime       { font-size: 16px !important; }

  /* Welcome screen hero */
  .hero-logo-img   { width: 72px !important; height: 72px !important; max-width: 72px !important; max-height: 72px !important; }
  .hero-emoji      { margin-bottom: 8px; }
  .welcome         { padding: 6px 0 4px; }

  /* Content area */
  .screen-wrap     { padding: 18px 52px 22px; }
  .screen-title    { font-size: 26px; }
  .screen-sub      { font-size: 15px; margin-bottom: 14px; }

  /* Language grid */
  .lang-grid       { grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 18px; }
  .lang-btn        { font-size: 18px; padding: 18px 8px; min-height: 68px; border-radius: 14px; }

  /* Nationality grid */
  .nat-grid        { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .nat-chip        { padding: 12px 6px; font-size: 13px; border-radius: 12px; }
  .nat-chip .nf    { font-size: 24px; margin-bottom: 4px; }

  /* ── Chips: pill layout identical to Chrome — all three variants ──────
     !important overrides any WebView user-agent or inherited flex defaults.
     All chips must be: horizontal row, pill border-radius, auto width.     */
  .chip-group      { gap: 10px; flex-wrap: wrap; }

  /* Base chip (also covers chip-lg which extends .chip) */
  .chip,
  .chip.chip-lg    { display: inline-flex !important;
                     flex-direction: row !important;
                     align-items: center !important;
                     padding: 10px 20px !important;
                     font-size: 15px !important;
                     min-height: 44px !important;
                     border-radius: 100px !important;
                     gap: 6px !important;
                     width: auto !important;
                     min-width: unset !important;
                     max-width: none !important;
                     aspect-ratio: unset !important; }
  .chip .chip-svg,
  .chip.chip-lg .chip-svg { width: 18px !important; height: 18px !important;
                             flex-shrink: 0 !important; flex-direction: unset !important;
                             display: inline !important; margin: 0 !important; }

  /* chip-lg standalone (for Visit/Purpose chips using chip chip-lg) */
  .chip-lg         { display: inline-flex !important;
                     flex-direction: row !important;
                     align-items: center !important;
                     padding: 10px 20px !important;
                     font-size: 15px !important;
                     min-height: 44px !important;
                     border-radius: 100px !important;
                     gap: 8px !important;
                     width: auto !important;
                     min-width: unset !important;
                     max-width: none !important;
                     aspect-ratio: unset !important; }
  .chip-lg .chip-svg { width: 18px !important; height: 18px !important;
                       flex-shrink: 0 !important; display: inline !important; margin: 0 !important; }

  /* chip-xl (Activities, Heard-from, Recommend) */
  .chip-xl         { display: inline-flex !important;
                     flex-direction: row !important;
                     align-items: center !important;
                     padding: 10px 18px !important;
                     font-size: 15px !important;
                     min-height: 44px !important;
                     border-radius: 100px !important;
                     gap: 8px !important;
                     width: auto !important;
                     min-width: unset !important;
                     max-width: none !important;
                     aspect-ratio: unset !important; }
  .chip-xl .chip-svg { width: 18px !important; height: 18px !important;
                       flex-shrink: 0 !important; display: inline !important; margin: 0 !important; }

  /* Destination chips */
  .dest-scroll     { max-height: 220px; gap: 8px; padding: 12px; }
  .dest-chip       { padding: 12px 16px; font-size: 15px; min-height: 50px; border-radius: 12px; }
  .dest-icon       { font-size: 20px; }

  /* Stars */
  .star            { font-size: 52px; }
  .stars           { gap: 14px; }

  /* Nav buttons */
  .btn-row         { gap: 16px; margin-top: 20px; }
  .btn-row .btn    { padding: 15px 24px; font-size: 17px; min-height: 54px; border-radius: 16px; }

  /* Form fields */
  .form-control    { font-size: 16px; padding: 13px 18px; }
  .form-group      { margin-bottom: 14px; }
}

/* ── Fully Kiosk / tablet — compressed height (≤900px, e.g. 768px tall) ──
   Tighter vertical spacing to fit content in shorter WebView heights.      */
@media (min-width: 1024px) and (max-height: 900px) {
  .screen-wrap     { padding: 16px 52px 18px; }
  .screen-title    { font-size: 24px; }
  .screen-sub      { font-size: 14px; margin-bottom: 12px; }
  .dest-scroll     { max-height: 200px; }
  .star            { font-size: 44px; }
  .btn-row         { margin-top: 16px; }
}

/* ── Overall Satisfaction star label — yellow ── */
#starLabel {
  color: #f59e0b !important;
}

/* ── Overall Satisfaction label — always yellow ── */
.form-label[data-i18n="sat_lbl"],
#sc4 .form-group:first-child .form-label {
  color: #f59e0b !important;
}

/* ── Star label (Excellent!, Good, etc.) — always yellow ── */
#starLabel {
  color: #f59e0b !important;
}