/*
Theme Name: KiaraHub Mobility Marketplace
Theme URI: https://kiarahub.com
Author: KiaraHub
Description: Varanasi-first mobility marketplace for rides, parking reservations, food delivery, driver earnings, and local partners.
Version: 3.0.0
Text Domain: kiarahub
*/

/* =========================================================
   Design tokens
   A cool-toned "tech dashboard" palette: deep navy ink,
   an electric teal primary, a sky-cyan secondary, and a
   warm marigold accent that keeps the Varanasi identity.
   ========================================================= */
:root{
  /* Ink / neutrals */
  --kh-ink:#0A1424;
  --kh-ink-soft:#122438;
  --kh-surface:#16283D;
  --kh-dark:#0A1424;

  /* Brand */
  --kh-primary:#0FCE9B;
  --kh-primary-dark:#0AA97F;
  --kh-primary-light:#6BEBC8;
  --kh-ganga:#2B95D6;
  --kh-ganga-light:#5FC2F0;
  --kh-marigold:#F2A93B;
  --kh-marigold-dark:#D6860F;
  --kh-accent:#F2A93B;

  /* Text / grays (tuned for AA contrast on --kh-bg and #fff) */
  --kh-gray:#4B5768;
  --kh-ash:#333D4C;
  --kh-ink-text:#101B2C;

  /* Surfaces */
  --kh-bg:#F3F6FA;
  --kh-bg-soft:#EAF1F6;
  --kh-white:#ffffff;
  --kh-line:#DDE5EE;

  /* Glow / shadows */
  --kh-glow:rgba(15,206,155,.35);
  --kh-glow-blue:rgba(43,149,214,.30);
  --kh-shadow-sm:0 2px 8px rgba(10,20,36,.06);
  --kh-shadow-md:0 8px 24px rgba(10,20,36,.10);
  --kh-shadow-lg:0 24px 60px rgba(6,13,24,.35);

  --kh-radius-sm:8px;
  --kh-radius:12px;
  --kh-radius-lg:18px;

  --kh-font-display:'Fraunces', Georgia, serif;
  --kh-font-body:'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --kh-font-mono:'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth;}
body{
  margin:0;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  font-family:var(--kh-font-body);background:var(--kh-bg);color:var(--kh-ink-text);
  font-size:16px;line-height:1.65;
  background-image:
    radial-gradient(1200px 500px at 100% -10%, rgba(43,149,214,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(15,206,155,.05), transparent 55%);
  background-attachment:fixed;
}
h1,h2,h3{font-family:var(--kh-font-display);letter-spacing:-.01em;color:var(--kh-ink-text);}
a{color:var(--kh-ganga);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--kh-primary-dark);}
img{max-width:100%;display:block;}
svg,video,iframe,canvas,embed,object{max-width:100%;height:auto;}
h1,h2,h3,h4,h5,h6,p,a,span,li,td,th,blockquote{overflow-wrap:break-word;word-break:break-word;}
::selection{background:var(--kh-primary);color:#fff;}

/* Consistent, visible keyboard focus everywhere (accessibility + polish) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--kh-ganga);outline-offset:2px;border-radius:4px;
}

.kh-container{max-width:1180px;margin:0 auto;padding:0 20px;padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right));}

/* Thin, tech-flavoured scrollbars where content scrolls internally */
.kh-suggestions,.kh-chat-messages,.kh-nav{scrollbar-width:thin;scrollbar-color:var(--kh-ganga-light) transparent;}
.kh-suggestions::-webkit-scrollbar,.kh-chat-messages::-webkit-scrollbar{width:6px;}
.kh-suggestions::-webkit-scrollbar-thumb,.kh-chat-messages::-webkit-scrollbar-thumb{background:var(--kh-line);border-radius:6px;}

/* Live/tech readout — used for real values only (driver counts, ratings,
   peak status), never as pure decoration. */
.kh-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--kh-ganga-light);box-shadow:0 0 0 0 rgba(47,163,178,.6);animation:kh-pulse 2s infinite;}
@keyframes kh-pulse{
  0%{box-shadow:0 0 0 0 rgba(47,163,178,.55);}
  70%{box-shadow:0 0 0 8px rgba(47,163,178,0);}
  100%{box-shadow:0 0 0 0 rgba(47,163,178,0);}
}
@media (prefers-reduced-motion: reduce){ .kh-live-dot{animation:none;} html{scroll-behavior:auto;} }
.kh-mono{font-family:var(--kh-font-mono);}

/* =========================================================
   Header
   ========================================================= */
.kh-header{
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--kh-line);position:sticky;top:0;z-index:50;
}
.kh-header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px;}
.kh-logo{font-family:var(--kh-font-display);font-weight:700;font-size:23px;color:var(--kh-ink);}
.kh-logo span{color:var(--kh-primary-dark);}
.kh-nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0;}
.kh-nav a{color:var(--kh-ink-text);font-weight:600;font-size:15.5px;position:relative;padding:6px 2px;}
.kh-nav a:hover{color:var(--kh-ganga);}
/* Underline sweep on hover/current page — desktop only, gives clearer wayfinding
   than a color change alone. */
.kh-nav a::after{
  content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px;border-radius:2px;
  background:var(--kh-ganga);transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.kh-nav a:hover::after,.kh-nav a:focus-visible::after,.kh-nav li.current-menu-item a::after{transform:scaleX(1);}
.kh-nav li.current-menu-item a{color:var(--kh-ink);}
.kh-header-actions{display:flex;gap:10px;align-items:center;}

/* =========================================================
   Global touch-target + hover-affordance pass (v3.2)
   Every tappable control gets a real 44px hit area on touch
   devices, even ones that aren't .kh-btn/.kh-field (icon
   buttons, chips, nav items, table row actions). Desktop
   keeps compact sizing but gains a deliberate hover state so
   clickability is obvious with a mouse.
   ========================================================= */
@media (pointer: coarse){
  a,button,[role="button"],.kh-nav a,.kh-nav-toggle,.kh-chip,.kh-toggle button,
  .kh-modal-close,.kh-icon-btn,select,input[type="checkbox"],input[type="radio"],
  .khfm-bottom-nav-item{
    min-height:44px;
  }
  a,button,[role="button"]{min-width:44px;}
  .kh-nav ul{gap:4px;}
  .kh-nav a{padding:12px 10px;display:flex;align-items:center;}
}
@media (hover: hover) and (pointer: fine){
  .kh-card,.kh-listing-card,.kh-feature,.kh-restaurant-card{transition:box-shadow .18s ease, transform .18s ease;}
  .kh-card:hover,.kh-listing-card:hover,.kh-feature:hover,.kh-restaurant-card:hover{
    box-shadow:var(--kh-shadow-md);transform:translateY(-2px);
  }
  .kh-btn-outline:hover{box-shadow:0 6px 16px rgba(43,149,214,.18);}
}

/* =========================================================
   Buttons — gradient fills with a soft tech glow on hover
   ========================================================= */
.kh-btn{
  display:inline-block;padding:12px 22px;border-radius:9px;font-weight:700;font-size:15px;
  font-family:var(--kh-font-body);border:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.kh-btn-primary{
  background:linear-gradient(135deg, var(--kh-marigold), var(--kh-marigold-dark));
  color:var(--kh-ink);box-shadow:0 6px 16px rgba(214,134,15,.25);
}
.kh-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(214,134,15,.35);color:var(--kh-ink);}
.kh-btn-outline{background:transparent;border:2px solid var(--kh-ganga);color:var(--kh-ganga);}

.kh-or-divider{
	display:flex;align-items:center;gap:10px;margin:18px 0;
	color:var(--kh-gray);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
}
.kh-or-divider::before,.kh-or-divider::after{content:'';flex:1;height:1px;background:var(--kh-line);}
.kh-google-btn{
	width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
	color:var(--kh-ink-text);border-color:var(--kh-line);
}
.kh-btn-outline:hover{background:var(--kh-ganga);color:#fff;transform:translateY(-1px);}
.kh-btn-accent{
  background:linear-gradient(135deg, var(--kh-primary), var(--kh-primary-dark));
  color:#04231a;box-shadow:0 6px 16px var(--kh-glow);
}
.kh-btn-accent:hover{transform:translateY(-1px);box-shadow:0 10px 24px var(--kh-glow);}
.kh-btn-decline{background:#fff;color:#b91c1c;border:2px solid #fca5a5;margin-left:6px;}
.kh-btn-decline:hover{background:#fef2f2;}
.kh-btn-block{width:100%;text-align:center;}
.kh-btn:active{transform:translateY(0);}

/* Driver: mark-completed row */
.kh-complete-row{display:flex;gap:8px;align-items:center;}
.kh-complete-row select{padding:8px 10px;border:1px solid #d1d5db;border-radius:8px;font-size:16px;}

/* Customer: UPI pay popover */
.kh-upi-popover{
	position:absolute;z-index:70;margin-top:8px;background:#fff;
	border:1px solid var(--kh-line);border-radius:12px;box-shadow:var(--kh-shadow-md);
	padding:16px;text-align:center;width:190px;
}
.kh-upi-popover img{margin:0 auto 8px;border-radius:8px;}

/* =========================================================
   Hero — dusk-over-the-Ganga gradient + circuit-dot grid,
   like a live dashboard skyline
   ========================================================= */
.kh-hero{
	background:
		radial-gradient(1100px 480px at 15% -10%, rgba(43,149,214,.35), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(242,169,59,.18), transparent 55%),
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0),
		linear-gradient(160deg, var(--kh-ink) 0%, #132A40 55%, var(--kh-ink-soft) 100%);
	background-size:auto, auto, 22px 22px, auto;
	color:#fff;padding:clamp(48px, 8vw, 84px) 0;position:relative;overflow:hidden;
}
.kh-hero-skyline{
	position:absolute;left:0;right:0;bottom:0;width:100%;height:180px;
	object-fit:cover;object-position:bottom;opacity:.55;pointer-events:none;
}
.kh-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.kh-hero h1{font-family:var(--kh-font-display);font-weight:600;font-size:clamp(28px, 4.2vw, 42px);line-height:1.16;margin:0 0 16px;color:#fff;}
.kh-hero p{color:#DAE3EE;font-size:clamp(15px, 2vw, 18px);line-height:1.6;margin-bottom:24px;}
.kh-hero-stats{display:flex;flex-wrap:wrap;gap:26px;}
.kh-hero-stat strong{display:block;font-family:var(--kh-font-mono);font-size:24px;font-weight:700;color:#fff;line-height:1.1;}
.kh-hero-stat span{display:flex;align-items:center;gap:6px;color:#AFC1D6;font-size:13px;font-family:var(--kh-font-mono);text-transform:uppercase;letter-spacing:.06em;margin-top:5px;}

/* Ride type toggle */
.kh-toggle{display:flex;background:var(--kh-bg-soft);border-radius:10px;padding:4px;margin-bottom:18px;}
.kh-toggle button{flex:1;padding:10px;border:none;background:transparent;border-radius:8px;font-weight:700;cursor:pointer;color:var(--kh-gray);font-family:var(--kh-font-body);transition:background .15s ease, color .15s ease;}
.kh-toggle button.active{background:var(--kh-ganga);color:#fff;box-shadow:0 4px 12px var(--kh-glow-blue);}
.kh-vehicle-type-group{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.kh-vehicle-type-option{
	position:relative;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
	background:#fff;
	border:1.5px solid var(--kh-line);
	border-radius:var(--kh-radius);
	padding:14px 8px 12px;
	cursor:pointer;
	text-align:center;
	box-shadow:var(--kh-shadow-sm);
	transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kh-vehicle-type-option:hover{transform:translateY(-2px);box-shadow:var(--kh-shadow-md);}
.kh-vehicle-type-option input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.kh-vt-icon{font-size:24px;line-height:1;margin-bottom:2px;}
.kh-vt-name{font-family:var(--kh-font-body);font-weight:700;font-size:14px;color:var(--kh-ink-text);}
.kh-vt-rate{font-family:var(--kh-font-mono);font-size:12px;font-weight:600;color:var(--kh-gray);}
.kh-vt-check{
	position:absolute;top:6px;right:6px;
	width:18px;height:18px;border-radius:50%;
	background:var(--kh-ganga);color:#fff;
	font-size:11px;line-height:18px;
	opacity:0;transform:scale(.5);
	transition:opacity .15s ease, transform .15s ease;
}
.kh-vehicle-type-option:has(input:checked){
	border-color:var(--kh-ganga);
	background:linear-gradient(180deg,var(--kh-glow-blue),#fff 65%);
	box-shadow:0 6px 16px var(--kh-glow-blue);
}
.kh-vehicle-type-option:has(input:checked) .kh-vt-name{color:var(--kh-ganga);}
.kh-vehicle-type-option:has(input:checked) .kh-vt-check{opacity:1;transform:scale(1);}
.kh-vehicle-type-option.kh-checked{
	border-color:var(--kh-ganga);
	background:linear-gradient(180deg,var(--kh-glow-blue),#fff 65%);
	box-shadow:0 6px 16px var(--kh-glow-blue);
}
.kh-vehicle-type-option.kh-checked .kh-vt-name{color:var(--kh-ganga);}
.kh-vehicle-type-option.kh-checked .kh-vt-check{opacity:1;transform:scale(1);}
.kh-vehicle-type-option:has(input:focus-visible){outline:2px solid var(--kh-ganga);outline-offset:2px;}
@media (max-width:420px){
	.kh-vt-icon{font-size:20px;}
	.kh-vt-name{font-size:13px;}
	.kh-vt-rate{font-size:11px;}
	.kh-vehicle-type-option{padding:11px 4px 9px;}
}
.kh-toggle-3 a{font-size:14.5px;padding:9px 6px;}

/* Card / form — the booking widget reads as a glass dashboard panel */
.kh-card{
	background:rgba(255,255,255,.97);
	border:1px solid rgba(255,255,255,.6);
	border-radius:var(--kh-radius-lg);
	box-shadow:var(--kh-shadow-lg), 0 0 0 1px rgba(43,149,214,.12);
	padding:24px;
}
.kh-field{margin-bottom:14px;}
.kh-field label{display:block;font-size:14.5px;font-weight:700;color:var(--kh-ink-text);margin-bottom:6px;}
.kh-field input,.kh-field select,.kh-field textarea{
  width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:15px;
  font-family:var(--kh-font-body);background:#fff;color:var(--kh-ink-text);transition:border-color .15s ease, box-shadow .15s ease;
}
.kh-field input:focus,.kh-field select:focus,.kh-field textarea:focus{outline:2px solid var(--kh-ganga-light);outline-offset:1px;border-color:var(--kh-ganga);}
.kh-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.kh-field-hint{display:block;font-size:12.5px;color:var(--kh-gray);margin-top:5px;}
/* Validation states — the theme had success/decline button colors but no
   field-level error styling anywhere, so invalid forms (register, parking
   reservation, checkout) gave no visible feedback beyond a toast. */
.kh-field input[aria-invalid="true"],.kh-field select[aria-invalid="true"],.kh-field textarea[aria-invalid="true"],
.kh-field.kh-field-error input,.kh-field.kh-field-error select,.kh-field.kh-field-error textarea{
  border-color:#dc2626 !important;background:#fef2f2;
}
.kh-field.kh-field-error input:focus,.kh-field.kh-field-error select:focus,.kh-field.kh-field-error textarea:focus{
  outline-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12);
}
.kh-field-error-msg{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#b91c1c;margin-top:5px;}
.kh-field.kh-field-success input,.kh-field.kh-field-success select{border-color:var(--kh-primary) !important;}
.kh-note{font-size:13.5px;color:var(--kh-gray);margin-top:4px;line-height:1.5;}
.kh-cash-badge{
  display:inline-flex;align-items:center;gap:6px;background:rgba(242,169,59,.14);color:var(--kh-marigold-dark);
  border:1px solid rgba(242,169,59,.35);padding:6px 12px;border-radius:20px;font-size:13.5px;font-weight:700;
  font-family:var(--kh-font-mono);text-transform:uppercase;letter-spacing:.03em;
}

/* Fare breakdown box — numbers in mono, like a real fare meter */
.kh-fare-box{background:var(--kh-bg);border:1px solid var(--kh-line);border-radius:10px;padding:12px 14px;}
.kh-fare-row{display:flex;justify-content:space-between;font-size:14.5px;color:var(--kh-ash);padding:3px 0;font-family:var(--kh-font-mono);}
.kh-fare-row.kh-fare-total{border-top:1px dashed #d1d5db;margin-top:6px;padding-top:8px;font-weight:700;font-size:16px;color:var(--kh-ink-text);}
.kh-fare-row.kh-fare-note{display:block;background:#fff7e6;color:#7A4F08;border:1px solid #ffe1a8;border-radius:6px;padding:6px 8px;margin-bottom:8px;font-size:13.5px;font-weight:600;font-family:var(--kh-font-body);line-height:1.5;}
.kh-fare-row.kh-fare-trip-summary{background:#EAF1FB;color:var(--kh-ganga);border:1px solid rgba(43,149,214,.18);border-radius:6px;padding:7px 10px;margin-bottom:8px;font-weight:700;font-size:14px;}
.kh-fare-row.kh-fare-converted{border-top:1px dashed #d1d5db;margin-top:4px;padding-top:6px;color:var(--kh-ink-text);font-weight:600;}

/* Refer & Earn */
.kh-refer-card{max-width:560px;}
.kh-wallet-balance{background:#eafff6;border:1px solid #a7f3d3;color:#0a6b4f;border-radius:8px;padding:10px 14px;font-size:14.5px;margin:14px 0 4px;font-family:var(--kh-font-mono);}
#kh-ref-link{flex:1;background:var(--kh-bg);}

/* Parking Marketplace listing grid */
.kh-listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;}
.kh-listing-card{background:#fff;border-radius:var(--kh-radius-lg);overflow:hidden;box-shadow:var(--kh-shadow-sm);border:1px solid var(--kh-line);transition:transform .15s ease, box-shadow .15s ease;}
.kh-listing-card:hover{transform:translateY(-3px);box-shadow:var(--kh-shadow-md);}
.kh-listing-card img{width:100%;height:150px;object-fit:cover;}
.kh-listing-noimg{width:100%;height:150px;background:var(--kh-bg);display:flex;align-items:center;justify-content:center;font-size:40px;}
.kh-listing-body{padding:14px;}
.kh-listing-type{font-size:12.5px;font-weight:700;text-transform:uppercase;color:var(--kh-ganga);letter-spacing:.03em;margin-bottom:4px;font-family:var(--kh-font-mono);}
.kh-listing-body h4{margin:0 0 4px;font-size:16px;font-family:var(--kh-font-display);}
.kh-listing-price{font-size:18px;font-weight:700;color:var(--kh-ink-text);margin:10px 0;font-family:var(--kh-font-mono);}
.kh-listing-price span{font-size:13.5px;font-weight:500;color:var(--kh-gray);}
.kh-listing-gallery{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:110px;gap:8px;margin-bottom:20px;}
.kh-listing-gallery img{width:100%;height:100%;object-fit:cover;border-radius:var(--kh-radius-lg,10px);}
.kh-listing-gallery img:first-child{grid-row:span 2;height:100%;}
.kh-btn:disabled,.kh-btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none;}

/* Modal */
.kh-modal-overlay{position:fixed;inset:0;height:100vh;height:100dvh;background:rgba(6,13,24,.65);backdrop-filter:blur(2px);z-index:1000000;display:flex;align-items:center;justify-content:center;padding:16px;padding-bottom:calc(16px + var(--kh-khfm-bottom-offset, 0px));overflow-y:auto;}
.kh-modal{max-width:420px;width:100%;position:relative;margin:auto;}
.kh-modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--kh-gray);}

/* Map */
#kh-map{width:100%;height:340px;border-radius:var(--kh-radius);margin-top:16px;border:1px solid var(--kh-line);}
.kh-driver-pin{background:var(--kh-ganga);color:#fff;border-radius:50%;width:14px;height:14px;border:3px solid #fff;box-shadow:0 0 0 2px var(--kh-ganga);}
.kh-drop-icon{font-size:22px;line-height:1;text-align:center;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));}

/* Address autocomplete — locality suggestions list.
   Redesigned for clarity: a visibly separated panel, colour-coded
   City vs Rural groups (with a live count), and a clear pin marker
   + area tag on every row so pickup/drop localities are unmistakable
   at a glance, on any device. */
.kh-suggestions{
	position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;
	border:1px solid var(--kh-line);border-radius:12px;
	box-shadow:0 16px 40px rgba(10,20,36,.16), 0 0 0 1px rgba(43,149,214,.06);
	max-height:320px;overflow-y:auto;z-index:60;display:none;
}
.kh-suggestion-group{
	position:sticky;top:0;z-index:1;
	display:flex;align-items:center;justify-content:space-between;
	padding:8px 14px;font-size:12.5px;font-weight:800;
	text-transform:uppercase;letter-spacing:.05em;font-family:var(--kh-font-mono);
	border-bottom:1px solid var(--kh-line);
}
.kh-suggestion-group-city{background:#E7F6F0;color:var(--kh-primary-dark);}
.kh-suggestion-group-rural{background:#FFF3E0;color:var(--kh-marigold-dark);}
.kh-suggestion-group-india{background:#EAF1FB;color:var(--kh-ganga);}
.kh-suggestion-count{
	font-size:11px;font-weight:700;background:rgba(255,255,255,.65);
	padding:1px 7px;border-radius:10px;
}
.kh-suggestion-item{
	padding:11px 14px;font-size:15px;cursor:pointer;
	border-bottom:1px solid #f1f3f5;
	transition:background .12s ease, padding-left .12s ease;
}
.kh-suggestion-item:last-child{border-bottom:none;}
.kh-suggestion-item:hover,.kh-suggestion-item:focus-visible{background:var(--kh-bg);padding-left:18px;}
.kh-suggestion-item:active{background:#E7F6F0;}
.kh-suggestion-local{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;}
.kh-suggestion-local strong{
	font-weight:700;color:var(--kh-ink-text);display:flex;align-items:center;gap:7px;
}
.kh-suggestion-local strong::before{content:'📍';font-size:13px;line-height:1;flex-shrink:0;}
.kh-suggestion-area{font-size:12.5px;font-weight:700;color:var(--kh-ganga);background:#E1F1F9;padding:2px 8px;border-radius:10px;white-space:nowrap;font-family:var(--kh-font-mono);flex-shrink:0;}

/* =========================================================
   Sections
   ========================================================= */
.kh-section{padding:clamp(40px, 6vw, 64px) 0;}
.kh-section h2{font-family:var(--kh-font-display);font-weight:600;font-size:clamp(24px, 3vw, 30px);text-align:center;margin-bottom:8px;color:var(--kh-ink-text);}
.kh-section p.kh-sub{text-align:center;color:var(--kh-gray);font-size:16px;line-height:1.6;margin-bottom:36px;}
.kh-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.kh-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}

/* Varanasi Darshan panel — was previously inline-styled (1.1fr/1fr and a
   fixed 2-col spot picker), which overrode the .kh-grid-2 mobile
   breakpoint below because inline styles win over stylesheet rules.
   Moved to real classes so it now collapses like every other section. */
.kh-darshan-grid{grid-template-columns:1.1fr 1fr;}
.kh-darshan-spots-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;}
.kh-darshan-spot-label{display:flex;align-items:flex-start;gap:6px;font-size:14px;cursor:pointer;}
.kh-feature{background:#fff;border-radius:var(--kh-radius-lg);padding:26px 22px;text-align:center;box-shadow:var(--kh-shadow-sm);border-top:3px solid var(--kh-ganga-light);transition:transform .15s ease, box-shadow .15s ease;}
.kh-feature:hover{transform:translateY(-4px);box-shadow:var(--kh-shadow-md);}
.kh-feature .icon{font-size:30px;margin-bottom:10px;}
.kh-feature h3{font-family:var(--kh-font-display);font-size:18px;margin:0 0 8px;color:var(--kh-ink-text);}
.kh-icon-badge{
	width:52px;height:52px;border-radius:14px;margin:0 auto 14px;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(150deg, var(--kh-ganga) 0%, var(--kh-ganga-light) 100%);
	color:#fff;box-shadow:0 8px 20px var(--kh-glow-blue);
}
.kh-icon-svg{width:26px;height:26px;}

/* Earn section */
.kh-earn-section{background:linear-gradient(150deg,var(--kh-ink),#173247);color:#fff;position:relative;}
.kh-earn-section > .kh-container > h2,
.kh-earn-section .kh-earn-intro h2{color:#fff;}
.kh-earn-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;margin-bottom:40px;}
.kh-earn-illustration{width:100%;max-width:380px;justify-self:center;filter:drop-shadow(0 20px 30px rgba(0,0,0,.35));}
.kh-earn-card{text-align:left;display:flex;flex-direction:column;}
.kh-earn-card h3{text-align:left;}
.kh-earn-card > p{text-align:left;color:var(--kh-gray);font-size:15.5px;line-height:1.6;margin:0 0 4px;}
.kh-earn-list{list-style:none;margin:0 0 18px;padding:0;flex:1;}
.kh-earn-list li{
	position:relative;padding:6px 0 6px 20px;font-size:15px;color:var(--kh-ash);line-height:1.55;
}
.kh-earn-list li::before{
	content:'';position:absolute;left:0;top:13px;width:8px;height:8px;border-radius:2px;
	background:var(--kh-marigold);transform:rotate(45deg);
}
.kh-earn-list strong{color:var(--kh-ink-text);font-family:var(--kh-font-mono);font-weight:700;}

/* Featured earn card (parking) */
.kh-earn-card-featured{position:relative;border:2px solid var(--kh-marigold);box-shadow:0 12px 30px rgba(242,169,59,.18);}
.kh-earn-card-tag{position:absolute;top:-13px;left:20px;background:var(--kh-marigold);color:#3a2604;font-family:var(--kh-font-mono);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:4px 10px;border-radius:20px;}

/* Parking sharing hook section */
.kh-parking-hook{background:linear-gradient(150deg,#fff8ec,#fff);}
.kh-parking-hook-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:center;}
.kh-hook-badge{margin-bottom:14px;}
.kh-hook-headline{text-align:left;font-size:clamp(24px,3.4vw,34px);line-height:1.22;margin:0 0 14px;}
.kh-hook-points{list-style:none;margin:0 0 22px;padding:0;}
.kh-hook-points li{padding:5px 0;font-size:15.5px;color:var(--kh-ink-text);line-height:1.5;}
.kh-hook-cta-row{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.kh-btn-lg{padding:15px 26px;font-size:16.5px;}
.kh-hook-urgency{color:var(--kh-marigold-dark);font-weight:700;}
.kh-hook-visual{display:grid;gap:14px;}
.kh-hook-stat-card{background:#fff;border:1px solid var(--kh-line);border-radius:14px;padding:18px 20px;box-shadow:0 10px 24px rgba(10,20,36,.06);text-align:center;}
.kh-hook-stat-card strong{display:block;font-family:var(--kh-font-mono);font-size:26px;color:var(--kh-primary-dark);margin-bottom:4px;}
.kh-hook-stat-card span{font-size:13px;color:var(--kh-gray);}
.kh-nav-highlight{color:var(--kh-marigold-dark) !important;font-weight:800;}

/* Careers / Jobs */
.kh-careers-hero{background:linear-gradient(150deg,var(--kh-ink),#173247);padding-bottom:26px;}
.kh-careers-hero h1{color:#fff;text-align:left;}
.kh-jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.kh-job-card{position:relative;text-decoration:none;color:inherit;display:block;text-align:left;transition:transform .15s ease, box-shadow .15s ease;}
.kh-job-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,20,36,.1);}
.kh-job-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.kh-job-type-pill{flex-shrink:0;background:rgba(15,206,155,.12);color:var(--kh-primary-dark);font-family:var(--kh-font-mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;padding:4px 9px;border-radius:20px;}
.kh-job-meta-row{font-size:13.5px;color:var(--kh-gray);margin:0 0 6px;}
.kh-job-salary{font-family:var(--kh-font-mono);font-weight:700;color:var(--kh-marigold-dark);margin:0 0 8px;font-size:14.5px;}
.kh-job-excerpt{font-size:14px;color:var(--kh-ash);line-height:1.55;margin:0 0 12px;}
.kh-job-card-cta{display:inline-block;font-weight:700;color:var(--kh-primary-dark);font-size:14px;}
.kh-job-deadline{display:block;margin-top:8px;font-size:12.5px;color:#94a3b8;}
.kh-jobs-closed-list{list-style:none;margin:0;padding:0;}
.kh-jobs-closed-list li{padding:6px 0;border-bottom:1px dashed var(--kh-line);color:var(--kh-ash);}

.kh-job-single{max-width:760px;}
.kh-job-facts{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:14.5px;color:var(--kh-ash);margin-bottom:22px;}
.kh-job-body{font-size:15.5px;line-height:1.7;color:var(--kh-ink-text);margin-bottom:28px;}
.kh-job-body p{margin:0 0 14px;}
.kh-job-apply-box{max-width:420px;}
@media (max-width:820px){
  .kh-parking-hook-grid{grid-template-columns:1fr;}
  .kh-hook-visual{grid-template-columns:repeat(3,1fr);}
  .kh-hook-headline{text-align:left;}
}
@media (max-width:560px){
  .kh-hook-visual{grid-template-columns:1fr 1fr;}
}


/* Chat panel */
.kh-chat-msg{margin-bottom:8px;max-width:85%;}
.kh-chat-msg-self{margin-left:auto;text-align:right;}
.kh-chat-meta{font-size:12.5px;color:#64748b;margin-bottom:2px;}
.kh-chat-bubble{display:inline-block;padding:6px 10px;border-radius:10px;background:#f1f5f9;color:var(--kh-ink-text);}
.kh-chat-msg-self .kh-chat-bubble{background:var(--kh-primary-dark);color:#fff;}

/* Ad slots */
.kh-ad-slot{min-height:20px;}

/* =========================================================
   Dashboard
   ========================================================= */
.kh-dash{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:30px 0;}
.kh-dash-nav{background:#fff;border:1px solid var(--kh-line);border-radius:var(--kh-radius);padding:16px;height:fit-content;}
.kh-dash-nav a{display:block;padding:10px 12px;border-radius:8px;color:var(--kh-ink-text);font-weight:600;margin-bottom:4px;}
.kh-dash-nav a.active,.kh-dash-nav a:hover{background:var(--kh-bg);color:var(--kh-primary-dark);}
.kh-status{padding:4px 10px;border-radius:20px;font-size:13px;font-weight:700;}
.kh-status-pending{background:#fef3c7;color:#92400e;}
@keyframes kh-pending-row-flash{0%,100%{background:transparent;}50%{background:rgba(15,206,155,.14);}}
.kh-pending-row-new{animation:kh-pending-row-flash 1s ease-in-out 2;}
.kh-status-accepted{background:#dbeafe;color:#1e40af;}
.kh-status-ongoing{background:#e0e7ff;color:#3730a3;}
.kh-status-completed{background:#dcfce7;color:#166534;}
.kh-status-cancelled{background:#fee2e2;color:#991b1b;}

table.kh-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--kh-radius);overflow:hidden;border:1px solid var(--kh-line);}
table.kh-table th,table.kh-table td{padding:12px 14px;text-align:left;border-bottom:1px solid #eee;font-size:15px;position:relative;}
table.kh-table th{background:var(--kh-bg);font-size:13px;text-transform:uppercase;color:var(--kh-gray);letter-spacing:.03em;}
table.kh-table tbody tr:hover{background:#FAFCFE;}

.kh-driver-toggle{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--kh-line);padding:14px 18px;border-radius:var(--kh-radius);margin-bottom:20px;}
.kh-switch{position:relative;width:46px;height:26px;}
.kh-switch input{opacity:0;width:0;height:0;}
.kh-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:26px;transition:.2s;}
.kh-slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.kh-switch input:checked + .kh-slider{background:var(--kh-primary);}
.kh-switch input:checked + .kh-slider:before{transform:translateX(20px);}

/* =========================================================
   Footer — dark, tech-grid backdrop
   ========================================================= */
.kh-footer{
  background:var(--kh-dark);color:#c2cadb;margin-top:70px;font-size:15px;line-height:1.6;
  background-image:radial-gradient(700px 300px at 90% 0%, rgba(15,206,155,.08), transparent 60%);
}
.kh-footer a{color:#c2cadb;transition:color .15s;}
.kh-footer a:hover{color:#fff;}

.kh-footer-grid{
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;
	gap:28px;
	padding:56px 0 40px;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.kh-footer-brand{padding-right:10px;}
.kh-footer-logo{font-family:var(--kh-font-display);font-weight:700;font-size:22px;color:#fff;margin-bottom:12px;}
.kh-footer-logo span{color:var(--kh-marigold);}
.kh-footer-brand p{line-height:1.7;margin:0 0 18px;color:#a5aec0;}

.kh-footer-social{display:flex;gap:10px;}
.kh-footer-social a{
	width:34px;height:34px;border-radius:50%;
	background:rgba(255,255,255,.06);
	display:flex;align-items:center;justify-content:center;
	font-size:12.5px;font-weight:700;color:#cbd5e1;
	border:1px solid rgba(255,255,255,.1);
	transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.kh-footer-social a:hover{background:var(--kh-ganga);color:#fff;border-color:var(--kh-ganga);}

.kh-footer-col h4{
	color:#fff;font-size:14px;font-weight:700;
	text-transform:uppercase;letter-spacing:.04em;
	margin:0 0 18px;
}
.kh-footer-col ul{list-style:none;margin:0;padding:0;}
.kh-footer-col ul li{margin-bottom:12px;font-size:14.5px;}
.kh-footer-contact li{color:#a5aec0;}
.kh-footer-contact a{color:#cbd5e1;}

.kh-footer-widgets{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.08);}

.kh-footer-bottom{padding:20px 0;}
.kh-footer-bottom-inner{
	display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
	font-size:13.5px;color:#93a0b8;
}
.kh-footer-bottom-inner p{margin:0;}

/* =========================================================
   Responsive: all devices
   Breakpoints run largest -> smallest, each one only overriding
   what actually needs to change at that width, so nothing repeats
   or fights an earlier rule.
   ========================================================= */

/* Mobile nav toggle (hamburger) — hidden on desktop by default */
.kh-nav-toggle{
	display:none;flex-direction:column;justify-content:center;gap:4px;
	width:38px;height:38px;border:none;background:transparent;cursor:pointer;padding:0;flex-shrink:0;
}
.kh-nav-toggle span{display:block;width:22px;height:2px;background:var(--kh-dark);border-radius:2px;transition:.2s;}
.kh-nav-toggle-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.kh-nav-toggle-open span:nth-child(2){opacity:0;}
.kh-nav-toggle-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.kh-nav-mobile-actions{display:none;}
body.kh-noscroll{overflow:hidden;}

/* Large desktops: give the layout a touch more spacing */
@media(min-width:1440px){
  .kh-container{max-width:1280px;}
  .kh-hero-grid{gap:64px;}
}

/* Ultra-wide / large desktop monitors: stop the content column feeling
   cramped in a sea of empty margin without ever letting it sprawl into
   an unreadable full-bleed line length. */
@media(min-width:1800px){
  .kh-container{max-width:1440px;}
  .kh-hero-grid{gap:80px;}
}

/* Small laptops / tablets landscape (1025–1024px and down) */
@media(max-width:1024px){
  .kh-grid-3{grid-template-columns:1fr 1fr;}
  .kh-footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .kh-footer-brand{grid-column:1 / -1;}
  .kh-container{padding:0 18px;padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right));}
}

/* Tablets portrait / large phones (881–1024px and down): nav collapses into the hamburger menu */
@media(max-width:880px){
  .kh-hero-grid{grid-template-columns:1fr;}
  .kh-grid-3{grid-template-columns:1fr;}
  .kh-grid-2{grid-template-columns:1fr;}
  .kh-darshan-grid{grid-template-columns:1fr;}
  .kh-dash{grid-template-columns:1fr;}

  .kh-header-inner{flex-wrap:wrap;}
  .kh-nav-toggle{display:flex;}
  .kh-hide-mobile{display:none !important;}

  .kh-nav{
	display:none;width:100%;order:3;
	background:#fff;border-top:1px solid #e5e7eb;
	max-height:calc(100vh - 60px);
	max-height:calc(100dvh - 60px); /* accounts for Chrome mobile's collapsing address bar; falls back to vh above on older browsers */
	overflow-y:auto;
  }
  .kh-nav.kh-nav-open{display:block;}
  .kh-nav ul{flex-direction:column;gap:0;width:100%;padding:8px 0;}
  .kh-nav ul li{width:100%;}
  .kh-nav ul li a{display:block;padding:12px 4px;border-bottom:1px solid #f1f3f5;}
  .kh-nav-mobile-actions{
	display:flex;flex-direction:column;gap:8px;
	padding:14px 4px;border-top:1px solid #e5e7eb;
  }
  .kh-nav-mobile-actions a{
	display:block;text-align:center;padding:10px;border-radius:8px;font-weight:700;
	background:var(--kh-bg);color:var(--kh-dark);
  }

  .kh-dash-nav{display:flex;overflow-x:auto;gap:6px;padding:10px;}
  .kh-dash-nav a{white-space:nowrap;margin-bottom:0;}

  table.kh-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}

  .kh-container{padding:0 16px;padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right));}

  /* Larger, easier tap targets on touch screens */
  .kh-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .kh-nav-toggle,.kh-modal-close{min-width:44px;min-height:44px;}
  .kh-nav ul li a{min-height:44px;display:flex;align-items:center;}

  /* Cards and forms get a touch more spacing, tighter spacing */
  .kh-card{padding:18px;border-radius:10px;}
  .kh-hero-grid{gap:24px;}

  /* Dashboard: tighter vertical rhythm on small screens */
  .kh-dash{padding:16px 0;gap:16px;}

  /* Listing photos scale down slightly for narrower viewports */
  .kh-listing-card img,.kh-listing-noimg{height:170px;}
}

/* Phones (641–880px and down) — the layout stops being "desktop with
   things squeezed in" and switches to compact, single-column spacing
   sized for one-handed use. */
@media(max-width:640px){
  /* Trim the generous desktop spacing everywhere — hero, sections,
     cards — so mobile doesn't inherit desktop-scale whitespace. */
  .kh-hero{padding:28px 0 36px;}
  .kh-hero-skyline{height:90px;opacity:.35;}
  .kh-hero-grid{gap:20px;}
  .kh-hero p{margin-bottom:18px;}
  .kh-hero-stats{gap:16px 22px;}
  .kh-cash-badge{font-size:12px;padding:5px 10px;margin-bottom:10px;}

  .kh-section{padding:28px 0;}
  .kh-section h2{margin-bottom:6px;}
  .kh-section p.kh-sub{margin-bottom:22px;}
  .kh-grid-3,.kh-grid-2{gap:14px;}
  .kh-darshan-spots-grid{grid-template-columns:1fr;gap:8px;}
  .kh-feature{padding:20px 16px;}

  .kh-earn-intro{grid-template-columns:1fr;text-align:center;gap:18px;margin-bottom:24px;}
  .kh-earn-intro h2, .kh-earn-intro p.kh-sub{text-align:center !important;}
  .kh-earn-illustration{max-width:220px;}
  .kh-earn-card{padding:20px 16px;}

  .kh-field-row{grid-template-columns:1fr;gap:0;}
  .kh-toggle-3{flex-direction:column;}
  .kh-toggle-3 a{width:100%;}
  .kh-header-actions{gap:6px;}
  .kh-btn{padding:9px 14px;font-size:14.5px;}
  .kh-listing-grid{grid-template-columns:1fr;gap:14px;}
  .kh-modal{max-width:94vw;}
  .kh-upi-popover{width:min(190px, 80vw);}
  #kh-map{height:220px;}

  .kh-suggestions{max-height:min(55vh, 380px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:10px;}
  .kh-suggestion-item{padding:13px 14px;font-size:15.5px;min-height:44px;display:flex;align-items:center;}
  .kh-suggestion-local{flex-wrap:wrap;row-gap:4px;}
  .kh-suggestion-group{position:sticky;top:0;padding:8px 14px;font-size:12px;}

  .kh-footer{margin-top:36px;}
  .kh-footer-grid{grid-template-columns:1fr 1fr;gap:20px;padding:32px 0 22px;}
  .kh-footer-brand{grid-column:1 / -1;}
  .kh-footer-widgets{padding:18px 0;}
  .kh-footer-bottom{padding:14px 0;}
  .kh-footer-bottom-inner{flex-direction:column;align-items:flex-start;gap:6px;}
}

/* Small / compact phones (≤400px) — a few final size trims so nothing
   crowds or overflows on the narrowest screens. */
@media(max-width:400px){
  .kh-container{padding:0 14px;padding-left:max(14px, env(safe-area-inset-left));padding-right:max(14px, env(safe-area-inset-right));}
  .kh-logo{font-size:19px;}
  .kh-header-inner{padding:11px 0;}
  .kh-hero{padding:24px 0 30px;}
  .kh-hero h1{font-size:24px;}
  .kh-hero-stats{gap:14px;}
  .kh-hero-stat strong{font-size:19px;}
  .kh-hero-stat span{font-size:11.5px;}
  .kh-card{padding:14px;}
  .kh-fare-box{padding:9px 10px;}
  .kh-upi-popover{padding:12px;}
  .kh-footer-grid{grid-template-columns:1fr;}
}

/* General mobile screen-fit / touch optimization */
input,select,textarea,button{font-size:16px;} /* prevents iOS Safari auto-zoom on focus */

/* Chrome (and other Chromium mobile browsers) show a persistent blue/grey
   tap-highlight rectangle on any tappable element by default, and add a
   ~300ms delay before registering taps unless touch-action is set. Both
   make the site feel less like an app and more like a bare webpage. */
*{-webkit-tap-highlight-color:transparent;}
a,button,.kh-btn,.kh-toggle button,.kh-nav-toggle,.kh-modal-close,.kh-suggestion-item{
	touch-action:manipulation;
}

@media(max-width:880px){
	.kh-suggestions{max-height:min(50vh, 340px);}
}

/* Tactile "press" feedback — buttons, cards, and list rows compress
   slightly on tap like native controls, instead of just changing colour. */
@media(hover:none){
	.kh-btn:active{transform:scale(.97);}
	.kh-feature:active,.kh-listing-card:active{transform:scale(.98);}
	.kh-suggestion-item:active{background:#E7F6F0;}
	.kh-nav-toggle:active,.kh-modal-close:active{transform:scale(.9);}
}
@media (prefers-reduced-motion: reduce){
	.kh-btn,.kh-feature,.kh-listing-card{transition:none;}
}

/* Smoother, app-like scrolling: keep pull gestures inside their own
   panel instead of scrolling/bouncing the whole page underneath. */
.kh-suggestions,.kh-chat-messages,.kh-nav,.kh-dash-nav,table.kh-table{overscroll-behavior:contain;}

/* =========================================================
   Android app feel — ripples, elevation, snackbar, install
   banner, and bottom-sheet modals. Mobile-only (≤880px);
   app-shell.js only attaches this behaviour on mobile too.
   ========================================================= */

/* Material-style ripple, spawned by app-shell.js on tap */
.kh-ripple{
	position:absolute;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
	transform:scale(0);animation:kh-ripple-anim .55s ease-out;
	mix-blend-mode:overlay;
}
.kh-feature .kh-ripple,.kh-listing-card .kh-ripple{
	background:radial-gradient(circle, rgba(43,149,214,.18) 0%, rgba(43,149,214,0) 70%);
	mix-blend-mode:normal;
}
@keyframes kh-ripple-anim{
	to{transform:scale(1);opacity:0;}
}
@media (prefers-reduced-motion: reduce){ .kh-ripple{display:none;} }

/* Material elevation levels — used to give the app-shell UI (snackbar,
   install banner, sheets) the same "floating above content" depth cues
   Android's Material Design uses instead of flat borders. */
.kh-elevation-1{box-shadow:0 1px 3px rgba(10,20,36,.12), 0 1px 2px rgba(10,20,36,.08);}
.kh-elevation-2{box-shadow:0 3px 8px rgba(10,20,36,.16), 0 1px 3px rgba(10,20,36,.10);}
.kh-elevation-3{box-shadow:0 8px 20px rgba(10,20,36,.20), 0 2px 6px rgba(10,20,36,.12);}

/* Snackbar — replaces alert()-style popups on mobile */
.kh-snackbar-host{
	position:fixed;left:0;right:0;bottom:0;z-index:200;
	display:flex;flex-direction:column;align-items:center;gap:8px;
	padding:0 14px calc(14px + env(safe-area-inset-bottom, 0) + var(--kh-khfm-bottom-offset, 0px));
	pointer-events:none;
}

.kh-snackbar{
	pointer-events:auto;max-width:480px;width:100%;
	background:#1B2838;color:#fff;border-radius:10px;
	padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;
	font-size:14.5px;box-shadow:0 8px 24px rgba(6,13,24,.35);
	transform:translateY(16px);opacity:0;transition:transform .22s ease, opacity .22s ease;
}
.kh-snackbar-in{transform:translateY(0);opacity:1;}
.kh-snackbar-action{
	background:none;border:none;color:var(--kh-primary-light);font-weight:700;
	font-size:13.5px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;flex-shrink:0;
}

/* Install-to-home-screen banner */
.kh-install-banner{
	position:fixed;left:12px;right:12px;bottom:calc(12px + var(--kh-khfm-bottom-offset, 0px));z-index:190;
	display:flex;align-items:center;gap:12px;
	background:#fff;border-radius:14px;padding:12px 12px 12px 14px;
	box-shadow:0 10px 30px rgba(10,20,36,.22);
	transform:translateY(140%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
}

.kh-install-in{transform:translateY(0);}
.kh-install-icon{font-size:26px;line-height:1;flex-shrink:0;}
.kh-install-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.kh-install-copy strong{font-size:14px;color:var(--kh-ink-text);}
.kh-install-copy span{font-size:12.5px;color:var(--kh-gray);line-height:1.35;}
.kh-install-btn{padding:9px 14px;font-size:13.5px;flex-shrink:0;}
.kh-install-close{
	background:none;border:none;font-size:18px;color:var(--kh-gray);cursor:pointer;
	padding:4px;flex-shrink:0;line-height:1;
}

@media(max-width:880px){
	/* Bottom sheet: modals slide up from the bottom edge, rounded only at
	   the top, with a drag handle — the standard Android pattern, instead
	   of a centred desktop dialog box. */
	.kh-modal-overlay{align-items:flex-end;padding:0;background:rgba(6,13,24,.55);}
	.kh-modal{
		max-width:100%;margin:0;border-radius:20px 20px 0 0;
		max-height:88vh;max-height:88dvh;overflow-y:auto;
		padding-bottom:calc(20px + env(safe-area-inset-bottom, 0));
		animation:kh-sheet-up .28s cubic-bezier(.2,.8,.2,1);
		touch-action:pan-y;
	}
	.kh-modal::before{
		content:'';display:block;width:36px;height:4px;border-radius:3px;
		background:#d8dee6;margin:10px auto 4px;
	}
	.kh-modal-close{top:16px;right:16px;}
	@keyframes kh-sheet-up{from{transform:translateY(100%);}to{transform:translateY(0);}}
	@media (prefers-reduced-motion: reduce){ .kh-modal{animation:none;} }
}

/* Ride-request status modal (searching / accepted / cancelled) */
.kh-ride-status-spinner{
	width:38px;height:38px;margin:4px auto 16px;border-radius:50%;
	border:3px solid var(--kh-line);border-top-color:var(--kh-primary);
	animation:kh-ride-status-spin .8s linear infinite;
}
@keyframes kh-ride-status-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .kh-ride-status-spinner{animation:none;} }

.kh-driver-card{
	display:flex;align-items:center;gap:12px;
	background:var(--kh-bg);border:1px solid var(--kh-line);border-radius:12px;
	padding:14px;margin-top:6px;
}
.kh-driver-card-avatar{
	width:42px;height:42px;flex-shrink:0;border-radius:50%;
	background:var(--kh-primary-light);display:flex;align-items:center;justify-content:center;font-size:20px;
}
.kh-driver-card-details{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.kh-driver-card-details strong{font-size:15px;color:var(--kh-ink-text);}
.kh-driver-info{display:flex;flex-direction:column;gap:2px;}
.kh-driver-info .kh-note a{color:var(--kh-ganga);}

/* Dedicated Book a Ride page layout */
.kh-book-ride-grid{
	display:grid;grid-template-columns:1.3fr .8fr;gap:28px;align-items:start;
}
.kh-book-ride-side{display:flex;flex-direction:column;gap:20px;}
.kh-book-ride-side .kh-card{margin:0;}

@media(max-width:880px){
	.kh-book-ride-grid{grid-template-columns:1fr;}
}




/* Unified Ride Route taxonomy */
.kh-taxonomy-page{padding-bottom:40px}.kh-taxonomy-hero{padding:56px 0 32px}.kh-taxonomy-results{padding:16px 0 48px}.kh-ride-post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}.kh-ride-post-card{overflow:hidden;border:1px solid rgba(0,0,0,.1);border-radius:16px;background:#fff}.kh-ride-post-thumb,.kh-ride-post-thumb img{display:block;width:100%;height:auto}.kh-ride-post-body{padding:18px}.kh-ride-post-body h2{margin:0 0 10px;font-size:1.2rem}.kh-ride-post-body h2 a{text-decoration:none}.kh-ride-post-excerpt{margin-bottom:16px}.kh-ride-post-link{font-weight:700;text-decoration:none}.kh-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* -------------------------------------------------------
 * Feedback & ratings
 * ----------------------------------------------------- */
.kh-rating-stars{color:var(--kh-marigold-dark);letter-spacing:1px;font-size:14px;}
.kh-rating-num{font-weight:700;font-size:13px;color:var(--kh-dark);}
.kh-rate-btn{margin-top:4px;}

.kh-star-picker{display:flex;gap:6px;justify-content:center;margin:14px 0 18px;}
.kh-star-btn{
	background:none;border:none;cursor:pointer;font-size:34px;line-height:1;
	color:#d8dde3;padding:0;transition:color .12s ease, transform .12s ease;
}
.kh-star-btn:hover{transform:scale(1.12);}
.kh-star-btn.kh-star-active{color:var(--kh-marigold-dark);}

#kh-feedback-name{color:var(--kh-primary-dark);}

/* Driver priority tier badge (shown on the driver's own dashboard) */
.kh-priority-badge{
	display:inline-block;padding:3px 10px;border-radius:999px;
	font-size:12px;font-weight:700;letter-spacing:.02em;
}
.kh-priority-badge.gold{background:#FFF4D6;color:#92610A;}
.kh-priority-badge.silver{background:#EEF1F5;color:#48505C;}
.kh-priority-badge.standard{background:#E7F8F1;color:#0AA97F;}

/* Live consumer location controls */
.kh-live-location-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px}
.kh-live-location-btn{border:0;background:transparent;padding:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kh-location-status{font-size:12px;line-height:1.35;color:#666}
.kh-location-status.is-precise{font-weight:600}
.kh-location-status.is-error{font-weight:600}
@media(max-width:600px){.kh-live-location-row{align-items:flex-start;flex-direction:column;gap:4px}.kh-live-location-btn{min-height:34px;text-align:left}}

/* --- SEO breadcrumbs (inc/seo-schema.php) --- */
.kh-breadcrumbs { margin-bottom: 14px; }
.kh-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--kh-muted, #6b7280); }
.kh-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; opacity: .5; }
.kh-breadcrumbs a { color: var(--kh-muted, #6b7280); text-decoration: none; }
.kh-breadcrumbs a:hover { color: var(--kh-marigold, #d97706); text-decoration: underline; }
.kh-breadcrumbs li[aria-current="page"] { color: inherit; font-weight: 500; }

/* =========================================================
   Host: restaurant + menu management — easy add/edit on mobile
   ========================================================= */

/* Menu editor: each item is a set of fields. On desktop they sit in a
   flexible row; the rules below keep it usable when the row would
   otherwise overflow on a phone (image URL + qty + category + price all
   fighting for space at 360-400px wide). */
.kh-menu-editor-row{position:relative;}
.kh-menu-editor-row .kh-mi-img-preview{flex:0 0 auto;}
.kh-menu-editor-row input[type="text"],
.kh-menu-editor-row input[type="number"],
.kh-menu-editor-row select{
  min-height:44px;padding:8px 10px;border:1px solid var(--kh-line);border-radius:8px;
  font-size:15px;background:#fff;
}
.kh-menu-editor-row .kh-mi-remove{min-height:38px;padding:6px 12px;}

@media(max-width:700px){
  /* Stack every field in a menu row to full width — no more pinching
     tiny inputs together on a phone screen. */
  .kh-menu-editor-row{
    display:flex;flex-direction:column;align-items:stretch;gap:8px;
    background:#fafbfc;border:1px solid var(--kh-line);border-radius:10px;padding:12px;
  }
  .kh-menu-editor-row input,
  .kh-menu-editor-row select{width:100%;flex:none !important;min-width:0 !important;}
  .kh-menu-editor-row label{display:flex;align-items:center;gap:6px;}
  .kh-menu-editor-row .kh-mi-img-preview img{width:48px;height:48px;}
  .kh-menu-editor-row .kh-mi-remove{align-self:flex-end;}

  /* Host "Add a restaurant" / contact panel: full-width fields and
     buttons, comfortable spacing, no cramped desktop-width inputs. */
  .kh-field input,.kh-field textarea,.kh-field select{width:100%;min-height:44px;}
  #kh-restaurants .kh-btn{width:100%;justify-content:center;}
  #kh-restaurants .kh-table td .kh-btn{width:auto;}

  /* Menu editor and contact editor become sticky-footer panels so the
     Save button is always reachable without hunting for it after
     scrolling through a long list of items. */
  #kh-menu-editor,#kh-contact-editor{
    position:sticky;bottom:var(--kh-khfm-bottom-offset, 0px);z-index:20;
    max-height:80vh;overflow-y:auto;
    box-shadow:0 -4px 16px rgba(0,0,0,.08);
  }
  #kh-menu-editor > div[style*="margin-top"],
  #kh-contact-editor #kh-contact-save-btn{
    position:sticky;bottom:var(--kh-khfm-bottom-offset, 0px);background:#fff;padding-top:10px;margin-top:10px !important;
  }
}

/* Restaurant list on mobile: turn the table into stacked cards instead of
   a horizontally-scrolling table, which is much easier to manage
   one-handed than swiping a table sideways. */
@media(max-width:640px){
  #kh-restaurants table.kh-table,
  #kh-food-orders table.kh-table{
    display:block;white-space:normal;overflow-x:visible;border:none;background:transparent;
  }
  #kh-restaurants table.kh-table thead,
  #kh-food-orders table.kh-table thead{display:none;}
  #kh-restaurants table.kh-table tbody,
  #kh-food-orders table.kh-table tbody{display:block;}
  #kh-restaurants table.kh-table tr,
  #kh-food-orders table.kh-table tr{
    display:block;background:#fff;border:1px solid var(--kh-line);border-radius:10px;
    padding:12px 14px;margin-bottom:12px;
  }
  #kh-restaurants table.kh-table td,
  #kh-food-orders table.kh-table td{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    border-bottom:1px solid #f1f3f5;padding:8px 0;white-space:normal;text-align:right;
  }
  #kh-restaurants table.kh-table td:last-child,
  #kh-food-orders table.kh-table td:last-child{border-bottom:none;flex-wrap:wrap;justify-content:flex-end;}
  #kh-restaurants table.kh-table td::before,
  #kh-food-orders table.kh-table td::before{
    content:attr(data-label);font-weight:700;color:var(--kh-gray);text-align:left;font-size:12px;
    text-transform:uppercase;letter-spacing:.03em;
  }
}

/* Driver dashboard: same treatment for pending/incoming ride & delivery
   tables so accepting or declining a job on a phone is one clean tap,
   not a sideways scroll through a cramped table. */
@media(max-width:640px){
  #kh-pending-table,#kh-deliveries-pending-table{
    display:block;white-space:normal;overflow-x:visible;border:none;background:transparent;
  }
  #kh-pending-table thead,#kh-deliveries-pending-table thead{display:none;}
  #kh-pending-table tbody,#kh-deliveries-pending-table tbody{display:block;}
  #kh-pending-table tr,#kh-deliveries-pending-table tr{
    display:block;background:#fff;border:1px solid var(--kh-line);border-radius:10px;
    padding:12px 14px;margin-bottom:12px;
  }
  #kh-pending-table td,#kh-deliveries-pending-table td{
    display:flex;justify-content:space-between;align-items:center;gap:12px;
    border-bottom:1px solid #f1f3f5;padding:8px 0;white-space:normal;text-align:right;
  }
  #kh-pending-table td:last-child,#kh-deliveries-pending-table td:last-child{
    border-bottom:none;flex-wrap:wrap;justify-content:flex-end;gap:8px;
  }
  #kh-pending-table td:last-child .kh-btn,#kh-deliveries-pending-table td:last-child .kh-btn{flex:1;min-width:100px;}
  #kh-pending-table td::before,#kh-deliveries-pending-table td::before{
    content:attr(data-label);font-weight:700;color:var(--kh-gray);text-align:left;font-size:12px;
    text-transform:uppercase;letter-spacing:.03em;
  }
}


/* =========================================================
   Food marketplace + mobile layout hardening
   ========================================================= */
.kh-food-directory{padding-top:30px}.kh-food-directory-head{margin-bottom:12px}.kh-food-eyebrow{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(43,149,214,.1);color:var(--kh-ganga);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.kh-food-directory h1,.kh-restaurant-hero h1{margin:8px 0 4px;text-align:left;font-size:clamp(28px,5vw,42px)}
.kh-food-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:620px;margin:22px 0 28px}.kh-food-search .kh-field{margin:0}.kh-food-search .kh-btn{min-height:46px}
.kh-restaurant-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}.kh-restaurant-card{display:block;color:inherit;text-decoration:none;height:100%;position:relative}.kh-restaurant-card-body{padding:15px}.kh-restaurant-name{display:block;font-size:17px;margin-bottom:5px}.kh-restaurant-card .kh-note{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kh-restaurant-noimg{height:180px;background:linear-gradient(135deg,#fff5e6,#eef7ff);font-size:46px}.kh-restaurant-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-size:13px;font-weight:700}.kh-restaurant-open{color:var(--kh-ganga)}
.kh-restaurant-page{padding-top:30px}.kh-restaurant-hero{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);overflow:hidden;background:#fff;border:1px solid var(--kh-line);border-radius:var(--kh-radius-lg);box-shadow:var(--kh-shadow-sm);margin-bottom:22px}.kh-restaurant-hero img,.kh-restaurant-hero-placeholder{width:100%;height:280px;object-fit:cover}.kh-restaurant-hero-placeholder{display:flex;align-items:center;justify-content:center;font-size:70px;background:linear-gradient(135deg,#fff5e6,#eef7ff)}.kh-restaurant-hero-content{padding:28px;align-self:center}.kh-restaurant-hero-content p{margin:7px 0;color:var(--kh-gray);line-height:1.6}.kh-restaurant-description{max-width:65ch}.kh-food-menu-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}.kh-food-item-card{padding:14px;display:flex;flex-direction:column}.kh-food-item-image{width:100%;height:150px;object-fit:cover;border-radius:10px;margin-bottom:12px}.kh-food-item-name{line-height:1.35;font-size:16px}.kh-food-item-price{font-size:18px;font-weight:800;margin-top:6px}.kh-food-item-card .kh-menu-qty{margin-top:auto !important;padding-top:10px}.kh-food-item-card .kh-cart-add{width:100%;min-height:42px}
@media(max-width:880px){body{overflow-x:hidden}.kh-container{max-width:100%;padding-left:16px;padding-right:16px}.kh-card{padding:18px}.kh-food-directory,.kh-restaurant-page{padding-top:20px}.kh-restaurant-hero{grid-template-columns:1fr}.kh-restaurant-hero img,.kh-restaurant-hero-placeholder{height:220px}.kh-restaurant-hero-content{padding:20px}.kh-listing-grid.kh-food-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kh-food-item-card{padding:12px}.kh-food-item-image{height:125px}.kh-food-item-card .kh-btn{font-size:14px;padding-left:10px;padding-right:10px}}
@media(max-width:640px){.kh-food-search{grid-template-columns:1fr;margin:18px 0 22px}.kh-food-search .kh-btn{width:100%}.kh-restaurant-grid{grid-template-columns:1fr;gap:14px}.kh-restaurant-card{display:grid;grid-template-columns:120px minmax(0,1fr);min-height:130px}.kh-restaurant-card>img,.kh-restaurant-card>.kh-listing-noimg{height:100%;min-height:130px;border-radius:0;object-fit:cover}.kh-restaurant-card-body{padding:12px}.kh-restaurant-name{font-size:16px}.kh-restaurant-card .kh-note{font-size:12.5px}.kh-restaurant-meta{margin-top:8px;font-size:12px}.kh-listing-grid.kh-food-menu-grid{grid-template-columns:1fr}.kh-food-item-card{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:12px;align-items:start}.kh-food-item-image{grid-row:span 4;width:92px;height:92px;margin:0}.kh-food-item-name{font-size:15px}.kh-food-item-card .kh-menu-qty{grid-column:2}.kh-restaurant-hero-content{padding:16px}.kh-restaurant-hero h1{font-size:28px}.kh-food-directory h1{font-size:30px}#kh-cart-bar{position:fixed !important;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom) + var(--kh-khfm-bottom-offset, 0px));margin:0 !important;z-index:70}#kh-cart-bar .kh-card{padding:12px;gap:10px}#kh-cart-checkout{padding:10px 12px;font-size:13px}body:has(#kh-cart-bar){padding-bottom:calc(88px + var(--kh-khfm-bottom-offset, 0px))}}
@media(max-width:380px){.kh-restaurant-card{grid-template-columns:100px minmax(0,1fr)}.kh-restaurant-card>img,.kh-restaurant-card>.kh-listing-noimg{min-height:120px}.kh-food-item-card{grid-template-columns:78px minmax(0,1fr)}.kh-food-item-image{width:78px;height:78px}.kh-food-directory h1{font-size:27px}}


/* Restaurant food inventory usability */
.kh-menu-editor-row input,.kh-menu-editor-row select{min-height:44px;box-sizing:border-box}.kh-menu-editor-row label{min-height:44px;display:inline-flex;align-items:center;gap:5px}.kh-food-item-card{min-width:0}.kh-restaurant-card{overflow:hidden}@media(max-width:700px){.kh-table{display:block;overflow-x:auto}.kh-menu-editor-row{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}.kh-menu-editor-row .kh-mi-name,.kh-menu-editor-row .kh-mi-image{grid-column:1/-1}.kh-menu-editor-row .kh-mi-remove{grid-column:1/-1;min-height:44px}.kh-menu-editor-row input,.kh-menu-editor-row select{width:100%;min-width:0!important}.kh-food-menu-grid{grid-template-columns:1fr!important}.kh-restaurant-grid{grid-template-columns:1fr!important}.kh-restaurant-card img{width:100%;height:180px;object-fit:cover}.kh-food-item-card{padding:14px}.kh-food-item-image{width:92px!important;height:92px!important;float:right;margin-left:12px}.kh-menu-qty .kh-cart-add{min-height:44px;width:100%}}

/* Host dashboard: easy-scroll section tabs and restaurant location controls */
.kh-dash-nav{scrollbar-width:thin}
.kh-location-actions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.kh-location-preview{padding:12px 14px;border:1px solid var(--kh-line);border-radius:10px;background:#fafafa;margin-top:10px;min-height:22px}
@media(max-width:880px){
  .kh-dash{display:block}
  /* top must sit BELOW the site's own sticky header (.kh-header,
     position:sticky;top:0;z-index:50) — both were pinned to top:0
     before, so on scroll this bar rendered on top of (and hid) the
     site header, and its full-width strip sat directly under the
     user's thumb at the very top of the viewport, where its
     touch-action:pan-x (needed for the horizontal tab scroller)
     swallowed the vertical swipe that should have scrolled the page.
     --kh-header-h is measured and kept in sync by khSyncHeaderHeight()
     in main.js; the 60px fallback covers the brief instant before
     that JS runs. */
  .kh-dash-nav{position:sticky;top:var(--kh-header-h, 60px);z-index:40;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:10px max(12px, env(safe-area-inset-left));margin:0 -16px 18px;-webkit-overflow-scrolling:touch;background:#fff;border-bottom:1px solid var(--kh-line);box-shadow:0 2px 8px rgba(0,0,0,.05)}
  .kh-dash-nav a{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:42px;padding:0 14px;border-radius:999px;background:#f6f7f8}
  .kh-dash-nav a.active,.kh-dash-nav a:focus{background:var(--kh-primary);color:#fff}
  #kh-host-overview,#kh-restaurants,#kh-food-orders,#kh-host-bookings,#kh-host-availability,#kh-host-listings,#kh-my-rides,#kh-pending,#kh-history,#kh-deliveries,#kh-reports,#kh-payment-settings,#kh-my-listings{scroll-margin-top:calc(var(--kh-header-h, 60px) + 60px)}
}
@media(max-width:640px){
  .kh-location-actions{display:grid;grid-template-columns:1fr}
  .kh-location-actions .kh-btn{width:100%;min-height:46px}
  #kh-restaurants .kh-card{max-width:none!important}
  #kh-restaurants table.kh-table td{align-items:flex-start}
  #kh-restaurants table.kh-table td[data-label="Actions"] .kh-btn{width:100%;margin:3px 0}
}
/* Real mobile scrolling repair: nested horizontal controls must retain pan-x. */
@media(max-width:880px){
 html,body{overflow-x:hidden;overflow-y:auto!important;min-height:100%;height:auto!important;touch-action:pan-y;}
 .kh-dash-nav{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;touch-action:pan-x!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;}
 .kh-dash-nav::-webkit-scrollbar{display:none}
 .kh-dash-nav a{flex:0 0 auto;scroll-snap-align:start;}
 table.kh-table{touch-action:pan-x!important;overflow-x:auto!important;}
 .kh-modal{touch-action:pan-y!important;}
}


/* QA repair: stable live feedback and GPS health */
.kh-gps-status{margin-top:6px;font-size:13px;padding:7px 10px;border-radius:8px;background:#f5f5f5;display:inline-block}.kh-gps-status.is-ok{background:#eaf8ef}.kh-gps-status.is-pending{background:#fff8df}.kh-gps-status.is-error{background:#fff0f0}.kh-live-notice{position:fixed;left:50%;bottom:calc(20px + var(--kh-khfm-bottom-offset, 0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:99999;max-width:min(92vw,560px);padding:11px 15px;border-radius:10px;background:#222;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:opacity .2s ease,transform .2s ease}.kh-live-notice.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:700px){.kh-table{font-size:14px}.kh-live-notice{bottom:calc(16px + env(safe-area-inset-bottom) + var(--kh-khfm-bottom-offset, 0px))}}


/* =========================================================
   KiaraHub 2026 visual refresh — mobility + parking + food
   ========================================================= */
:root{
  --kh-ink:#071525;
  --kh-ink-soft:#0d2238;
  --kh-primary:#12cfa0;
  --kh-primary-dark:#079a78;
  --kh-ganga:#1787d1;
  --kh-ganga-light:#55b9ef;
  --kh-marigold:#ffb547;
  --kh-marigold-dark:#e58b16;
  --kh-bg:#f6f8fb;
  --kh-bg-soft:#edf4f8;
  --kh-line:#d9e3ec;
  --kh-radius:16px;
  --kh-radius-lg:24px;
  --kh-shadow-sm:0 4px 14px rgba(7,21,37,.06);
  --kh-shadow-md:0 14px 36px rgba(7,21,37,.10);
  --kh-shadow-lg:0 30px 70px rgba(3,12,24,.30);
}
body{
  background:
    radial-gradient(900px 420px at 90% 0%,rgba(23,135,209,.07),transparent 65%),
    radial-gradient(760px 420px at -10% 30%,rgba(18,207,160,.06),transparent 65%),
    var(--kh-bg);
}
.kh-header{background:rgba(255,255,255,.92);box-shadow:0 1px 0 rgba(7,21,37,.04);}
.kh-logo{font-size:25px;letter-spacing:-.04em;}
.kh-nav ul{gap:22px;}
.kh-nav a{font-size:14px;}
.kh-btn{border-radius:11px;padding:12px 20px;box-shadow:none;}
.kh-btn-primary{background:linear-gradient(135deg,#ffc45b,#ee9c24);box-shadow:0 7px 18px rgba(229,139,22,.20);}
.kh-btn-accent{background:linear-gradient(135deg,#18d5a4,#079b79);color:#04231a;}
.kh-card,.kh-feature,.kh-listing-card{
  border:1px solid rgba(217,227,236,.9);
  border-radius:var(--kh-radius-lg);
  box-shadow:var(--kh-shadow-sm);
}
.kh-card{background:rgba(255,255,255,.96);}
.kh-feature{background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.kh-feature:hover{transform:translateY(-3px);box-shadow:var(--kh-shadow-md);border-color:#c8d7e4;}
.kh-hero{
  position:relative;overflow:hidden;
  padding:76px 0 88px;
  background:
    radial-gradient(900px 520px at 8% -10%,rgba(23,135,209,.32),transparent 64%),
    radial-gradient(760px 460px at 95% 8%,rgba(255,181,71,.18),transparent 60%),
    linear-gradient(145deg,#071525 0%,#0b2035 58%,#0a2940 100%);
}
.kh-hero:after{
  content:"";position:absolute;inset:auto 0 0;height:150px;pointer-events:none;
  background:linear-gradient(to top,rgba(7,21,37,.5),transparent);
}
.kh-hero-grid{position:relative;z-index:2;gap:48px;}
.kh-hero h1{font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-.045em;max-width:760px;}
.kh-hero p{font-size:18px;line-height:1.7;max-width:690px;color:#d7e5f1;}
.kh-hero .kh-card{box-shadow:0 30px 70px rgba(0,0,0,.26);border-color:rgba(255,255,255,.12);}
.kh-hero-stats{gap:12px;}
.kh-hero-stat{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);border-radius:14px;padding:12px 16px;}
.kh-section{padding:76px 0;}
.kh-section h2{font-size:clamp(30px,4vw,44px);letter-spacing:-.035em;}
.kh-sub{max-width:720px;}
.kh-grid-3{gap:20px;}
.kh-feature{padding:28px;}
.kh-icon-badge{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(18,207,160,.12),rgba(23,135,209,.10));font-size:23px;}
.kh-parking-hook{background:linear-gradient(135deg,#0a1c2d,#0d2c43);color:#fff;position:relative;overflow:hidden;}
.kh-parking-hook h2{color:#fff;}
.kh-parking-hook .kh-sub{color:#c5d4e0;}
.kh-hook-stat-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px;box-shadow:none;}
.kh-hook-stat-card strong{font-size:28px;}
.kh-hook-points{gap:12px;}
.kh-hook-points li{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px;}
.kh-earn-section{background:#071525;}
.kh-earn-section .kh-earn-card{box-shadow:0 18px 40px rgba(0,0,0,.14);}
.kh-listing-grid{gap:20px;}
.kh-listing-card{overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease;}
.kh-listing-card:hover{transform:translateY(-3px);box-shadow:var(--kh-shadow-md);}
.kh-listing-card img,.kh-listing-noimg{height:190px;object-fit:cover;}
.kh-listing-body{padding:20px;}
.kh-listing-price{font-size:22px;font-weight:800;}
.kh-table{border-collapse:separate;border-spacing:0;border:1px solid var(--kh-line);border-radius:14px;overflow:hidden;background:#fff;}
.kh-table th{background:#f3f7fa;font-size:12px;text-transform:uppercase;letter-spacing:.06em;}
.kh-table th,.kh-table td{padding:13px 14px;border-bottom:1px solid var(--kh-line);}
.kh-modal{border-radius:22px;box-shadow:var(--kh-shadow-lg);}
.kh-field input,.kh-field select,.kh-field textarea{border-radius:11px;border:1px solid #cfdbe5;background:#fbfdff;padding:12px 13px;}
.kh-field input:focus,.kh-field select:focus,.kh-field textarea:focus{border-color:var(--kh-ganga);box-shadow:0 0 0 3px rgba(23,135,209,.12);}
.kh-footer{background:#061321;}
.kh-footer-grid{gap:34px;}
.kh-footer-logo{font-size:28px;}
.kh-footer-bottom{border-top-color:rgba(255,255,255,.09);}
@media(max-width:820px){
  .kh-hero{padding:46px 0 56px;}
  .kh-hero-grid{gap:26px;}
  .kh-hero h1{font-size:clamp(38px,11vw,54px);}
  .kh-hero p{font-size:16px;}
  .kh-section{padding:54px 0;}
  .kh-grid-3{grid-template-columns:1fr;}
  .kh-feature{padding:22px;}
}
@media(max-width:520px){
  .kh-container{padding-left:16px;padding-right:16px;}
  .kh-hero-stats{grid-template-columns:1fr;}
  .kh-hero-stat{display:flex;align-items:center;justify-content:space-between;}
  .kh-btn{width:100%;}
  .kh-hook-cta-row{align-items:stretch;}
}

/* Compact vertical action group for driver trip controls. */
.kh-action-stack{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){.kh-action-stack{flex-direction:column;align-items:stretch}.kh-action-stack .kh-btn{width:100%}}

/* =========================================================
   v4 Production UX layer
   Focus: clear hierarchy, touch-safe controls, accessible focus,
   resilient mobile dashboards, and consistent loading states.
   ========================================================= */
:root{
  --kh-radius-sm:10px;
  --kh-radius-md:16px;
  --kh-radius-lg:22px;
  --kh-shadow-sm:0 4px 16px rgba(10,20,36,.08);
  --kh-shadow-md:0 12px 32px rgba(10,20,36,.12);
}
html{scroll-behavior:smooth;}
body{overflow-x:hidden;}
.kh-skip-link{position:fixed;left:12px;top:10px;z-index:100000;padding:10px 14px;border-radius:10px;background:#fff;color:var(--kh-dark);font-weight:800;transform:translateY(-150%);transition:transform .18s ease;box-shadow:var(--kh-shadow-md);}
.kh-skip-link:focus{transform:translateY(0);}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid rgba(43,149,214,.38);outline-offset:2px;}
button:disabled,.kh-btn:disabled{cursor:not-allowed;opacity:.62;}
.kh-btn{min-height:44px;border-radius:12px;font-weight:750;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;}
.kh-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:var(--kh-shadow-sm);}
.kh-card,.kh-feature{border-radius:var(--kh-radius-md);}
.kh-card{box-shadow:var(--kh-shadow-sm);}
.kh-field input,.kh-field select,.kh-field textarea{min-height:46px;border-radius:12px;}
.kh-field textarea{min-height:92px;resize:vertical;}
.kh-loading-state{display:flex;align-items:center;justify-content:center;gap:10px;min-height:120px;padding:24px;border:1px dashed rgba(75,87,104,.28);border-radius:16px;color:var(--kh-gray);background:rgba(255,255,255,.7);}
.kh-spinner,.kh-btn-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kh-spin .7s linear infinite;}
.kh-btn-spinner{display:none;margin-left:8px;vertical-align:-3px;}
.kh-btn:disabled .kh-btn-spinner{display:inline-block;}
@keyframes kh-spin{to{transform:rotate(360deg)}}
.kh-table{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px;box-shadow:0 0 0 1px rgba(75,87,104,.10);}
.kh-table th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.kh-table td,.kh-table th{vertical-align:middle;}
.kh-status{white-space:nowrap;}
.kh-modal-overlay{overscroll-behavior:contain;}
.kh-modal{max-height:min(88vh,760px);overflow:auto;-webkit-overflow-scrolling:touch;}
.kh-nav-toggle{min-width:44px;min-height:44px;}
.kh-driver-toggle{border-radius:16px;}

@media (max-width:760px){
  .kh-container{width:min(100% - 28px,680px);}
  .kh-hero{padding-top:26px;}
  .kh-hero h1{font-size:clamp(34px,9vw,48px);line-height:1.02;}
  .kh-card{padding:18px;}
  .kh-grid-3{grid-template-columns:1fr;gap:14px;}
  .kh-field-row{grid-template-columns:1fr;gap:0;}
  .kh-hero-stats{grid-template-columns:repeat(3,1fr);gap:8px;}
  .kh-hero-stat{padding:10px 6px;}
  .kh-hero-stat strong{font-size:17px;}
  .kh-table{display:block;width:100%;overflow:visible;box-shadow:none;border-radius:0;}
  .kh-table thead{display:none;}
  .kh-table tbody,.kh-table tr,.kh-table td{display:block;width:100%;box-sizing:border-box;}
  .kh-table tbody tr{margin:0 0 12px;padding:12px;border:1px solid rgba(75,87,104,.14);border-radius:14px;background:#fff;box-shadow:var(--kh-shadow-sm);}
  .kh-table td{display:grid;grid-template-columns:minmax(88px,34%) 1fr;gap:10px;padding:9px 4px;border:0;border-bottom:1px solid rgba(75,87,104,.08);text-align:left;overflow-wrap:anywhere;}
  .kh-table td:last-child{border-bottom:0;}
  .kh-table td::before{content:attr(data-label);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--kh-gray);}
  .kh-table td:empty{display:none;}
  .kh-table td .kh-btn{margin:2px 4px 2px 0;}
  .kh-dash-nav{position:sticky;top:0;z-index:20;display:flex;gap:8px;overflow-x:auto;padding:8px;margin:0 0 18px;background:rgba(255,255,255,.96);border-radius:14px;box-shadow:var(--kh-shadow-sm);-webkit-overflow-scrolling:touch;}
  .kh-dash-nav a{flex:0 0 auto;min-height:40px;display:flex;align-items:center;padding:8px 12px;border-radius:10px;}
  .kh-modal{width:calc(100vw - 24px);max-width:none;margin:12px;border-radius:20px;}
  .kh-modal-close{min-width:44px;min-height:44px;}
  .kh-vehicle-type-group{grid-template-columns:1fr;}
  .kh-live-location-row{align-items:stretch;flex-direction:column;}
  .kh-live-location-btn{min-height:44px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* Restaurant owner manager */
.kh-restaurant-manager .kh-dash-nav{position:sticky;top:18px}
.kh-restaurant-manager .kh-order-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.kh-restaurant-manager .kh-order-card-grid>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.kh-restaurant-manager .kh-pagination{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.kh-restaurant-manager .kh-pagination a{display:inline-flex;min-width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--kh-line);border-radius:10px;text-decoration:none}
.kh-restaurant-manager .kh-pagination a.active{font-weight:800;background:var(--kh-primary);color:#fff}
.kh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.kh-restaurant-manager .kh-dash-nav{position:static}.kh-restaurant-manager .kh-order-card-grid{grid-template-columns:1fr 1fr}.kh-restaurant-manager .kh-order-filter{width:100%}.kh-restaurant-manager .kh-order-filter select{flex:1;min-height:44px}}
@media(max-width:480px){.kh-restaurant-manager .kh-order-card-grid{grid-template-columns:1fr}}