/* ═══════════════════════════════════════════════════════════
   THE GRAND HAVELI & RESORT — Navigation App
   style.css  |  Author: Jay Agarwal
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  --header-h:    64px;
  --footer-h:    36px;
  --gold:        #c9a84c;
  --gold-light:  #f0d080;
  --gold-dim:    rgba(201,168,76,.18);
  --bg-deep:     #070c18;
  --bg-surface:  #0e1628;
  --bg-glass:    rgba(14,22,40,.72);
  --txt-primary: #eef0f5;
  --txt-muted:   #7b8aa0;
  --route-red:   #ff2244;
  --route-pink:  #ff4fae;
  --route-blue:  #3a9eff;
  --route-green: #2cdf6e;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --shadow-glow: 0 0 24px rgba(201,168,76,.25);
  --transition:  .22s cubic-bezier(.4,0,.2,1);
}

/* Day theme overrides */
body.day-mode {
  --bg-deep:    #f0ede6;
  --bg-surface: #faf8f3;
  --bg-glass:   rgba(250,248,243,.82);
  --txt-primary:#1a1208;
  --txt-muted:  #7a6a4a;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg-deep);
  color: var(--txt-primary);
  -webkit-font-smoothing: antialiased;
}

body { display:flex; flex-direction:column; }

/* ════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════ */
.app-header {
  flex-shrink: 0;
  height: var(--header-h);
  background: linear-gradient(180deg, #0d1524 0%, #091120 100%);
  border-bottom: 1px solid rgba(201,168,76,.15);
  padding: 0 14px;
  padding-top: env(safe-area-inset-top, 0);
  z-index: 1100;
}

body.day-mode .app-header {
  background: linear-gradient(180deg,#fffdf5,#f5edd8);
  border-bottom-color: rgba(201,168,76,.3);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.header-logo { display:flex; align-items:center; gap:10px; }

.logo-icon {
  font-size: 20px;
  color: var(--gold);
  filter: drop-shadow(0 0 6px var(--gold));
}

.header-titles h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1.1;
}

.header-sub {
  font-size: 10px;
  color: var(--txt-muted);
  letter-spacing: .6px;
  text-transform: uppercase;
}

.header-actions { display:flex; align-items:center; gap:6px; }

/* Icon buttons in header */
.btn-icon {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--txt-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: var(--transition);
}

.btn-icon:hover  { color:var(--gold); border-color:rgba(201,168,76,.3); }
.btn-icon:active { transform:scale(.9); }

/* GPS badge */
.header-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-glass);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--txt-muted);
  backdrop-filter: blur(10px);
  transition: var(--transition);
  white-space: nowrap;
}

.header-badge.active { color:#2cdf6e; border-color:rgba(44,223,110,.25); }

.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--txt-muted);
  transition: var(--transition);
}

.header-badge.active .badge-dot {
  background: #2cdf6e;
  box-shadow: 0 0 6px #2cdf6e;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ════════════════════════════════════════════════════════
   MAP WRAP
════════════════════════════════════════════════════════ */
#mapWrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

#map { width:100%; height:100%; }

/* ════════════════════════════════════════════════════════
   USER LOCATION DOT — Google Maps style
════════════════════════════════════════════════════════ */
.user-arrow {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 800;
  transform: translate(-50%, -50%);
  will-change: transform, left, top;
}

/* Outer pulsing ring */
.gdot-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(66, 133, 244, 0.28);
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: gdotPulse 2s ease-out infinite;
}

/* Core blue dot */
.gdot-core {
  position: relative;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4285F4;
  border: 3px solid #ffffff;
  box-shadow:
    0 2px 6px rgba(66, 133, 244, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner specular highlight */
.gdot-inner {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  margin-top: -3px;
  margin-left: -3px;
}

@keyframes gdotPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════
   PINNED DOT (when follow=ON — fixed to screen centre)
════════════════════════════════════════════════════════ */
.user-arrow.pinned {
  position: fixed !important;
  left: 50% !important;
  top:  50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9000 !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  filter: none !important;
}

/* Scale up the core + ring when pinned */
.user-arrow.pinned .gdot-core {
  width: 26px;
  height: 26px;
  border-width: 3.5px;
  box-shadow:
    0 3px 10px rgba(66, 133, 244, 0.65),
    0 1px 4px rgba(0, 0, 0, 0.35);
}

.user-arrow.pinned .gdot-pulse-ring {
  width: 26px;
  height: 26px;
}

/* ════════════════════════════════════════════════════════
   ROUTE PROGRESS BAR
════════════════════════════════════════════════════════ */
.route-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,.06);
  z-index: 900;
}

.route-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow: 0 0 10px var(--gold);
  transition: width .3s linear;
  border-radius: 0 2px 2px 0;
}

/* ════════════════════════════════════════════════════════
   ETA CARD
════════════════════════════════════════════════════════ */
.eta-card {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-glass);
  border: 1px solid rgba(201,168,76,.2);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  z-index: 900;
  box-shadow: var(--shadow-glow);
  animation: slideDown .35s ease-out both;
}

@keyframes slideDown {
  from { opacity:0; transform:translateX(-50%) translateY(-10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

.eta-card__icon { font-size:18px; }
.eta-card__body { display:flex; flex-direction:column; gap:1px; min-width:56px; }
.eta-card__label { font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.8px; color:var(--txt-muted); }
.eta-card__value { font-size:15px; font-weight:600; color:var(--gold-light); }
.eta-card__divider { width:1px; height:32px; background:rgba(201,168,76,.2); }

/* ════════════════════════════════════════════════════════
   WRONG ROUTE ALERT BANNER
════════════════════════════════════════════════════════ */
.wrong-route-alert {
  position: absolute;
  top: 60px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,20,50,.18);
  border: 1.5px solid rgba(255,40,60,.7);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  z-index: 950;
  box-shadow: 0 0 24px rgba(255,20,50,.35);
  animation: shakeIn .4s ease-out both;
  max-width: 90vw;
}

@keyframes shakeIn {
  0%   { transform:translateX(-50%) scale(.9); opacity:0; }
  60%  { transform:translateX(calc(-50% + 4px)) scale(1.02); opacity:1; }
  80%  { transform:translateX(calc(-50% - 4px)); }
  100% { transform:translateX(-50%) scale(1); }
}

.alert-icon { font-size:20px; animation:alertPulse 1s ease-in-out infinite; }
@keyframes alertPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

.alert-text {
  font-size: 13px;
  font-weight: 600;
  color: #ff6677;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════
   TURN-BY-TURN BANNER
════════════════════════════════════════════════════════ */
.turn-banner {
  position: absolute;
  bottom: 180px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-glass);
  border: 1px solid rgba(58,158,255,.3);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  z-index: 900;
  box-shadow: 0 0 20px rgba(58,158,255,.2);
  min-width: 220px;
  max-width: 88vw;
  animation: slideUp .3s ease-out both;
}

@keyframes slideUp {
  from { opacity:0; transform:translateX(-50%) translateY(12px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

.turn-arrow-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(58,158,255,.15);
  border: 1.5px solid rgba(58,158,255,.4);
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}

.turn-icon { font-size:22px; line-height:1; }

.turn-info { display:flex; flex-direction:column; gap:2px; }

.turn-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-primary);
}

.turn-dist {
  font-size: 12px;
  color: var(--route-blue);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════
   SPEEDOMETER
════════════════════════════════════════════════════════ */
.speedometer {
  position: absolute;
  bottom: 100px; left: 16px;
  width: 110px; height: 110px;
  z-index: 800;
  display: flex; align-items:center; justify-content:center;
  background: rgba(7,12,24,.65);
  border: 1px solid rgba(201,168,76,.15);
  border-radius: 50%;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 20px rgba(0,0,0,.5);
}

.speedo-svg { position:absolute; inset:0; transform:rotate(-90deg); }
.speedo-track { fill:none; stroke:rgba(255,255,255,.07); stroke-width:9; }
.speedo-fill  {
  fill:none; stroke:var(--gold); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:314; stroke-dashoffset:314;
  filter:drop-shadow(0 0 6px var(--gold));
  transition:stroke-dashoffset .18s linear;
}

.speedo-label {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; line-height:1;
}

#speedValue {
  font-size:24px; font-weight:700;
  color:var(--gold-light);
  text-shadow:0 0 10px var(--gold);
}

.speedo-unit { font-size:10px; color:var(--txt-muted); letter-spacing:.5px; margin-top:2px; }

/* ════════════════════════════════════════════════════════
   BUTTONS (recenter, legend)
════════════════════════════════════════════════════════ */
.btn-recenter {
  position: absolute;
  bottom: 100px; right: 16px;
  width: 50px; height: 50px;
  border: none; border-radius: var(--radius-sm);
  background: var(--bg-glass);
  border: 1px solid rgba(201,168,76,.2);
  backdrop-filter: blur(12px);
  color: var(--gold);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  z-index: 800;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  transition: var(--transition);
}

.btn-recenter:hover  { transform:scale(1.07); box-shadow:var(--shadow-glow); }
.btn-recenter:active { transform:scale(.93); }

/* ── Camera follow toggle button ────────────────────────── */
.btn-follow-toggle {
  position: absolute;
  bottom: 160px; right: 16px;
  height: 40px;
  padding: 0 14px;
  border: none; border-radius: 999px;
  display: flex; align-items: center; gap: 7px;
  backdrop-filter: blur(12px);
  cursor: pointer;
  z-index: 800;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  transition: var(--transition);
  white-space: nowrap;
}

/* ON state — gold/active */
.btn-follow-toggle.follow-on {
  background: rgba(201,168,76,.18);
  border: 1.5px solid rgba(201,168,76,.5);
  color: var(--gold-light);
  box-shadow: 0 0 16px rgba(201,168,76,.25), 0 4px 18px rgba(0,0,0,.4);
}

/* OFF state — muted */
.btn-follow-toggle.follow-off {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  color: var(--txt-muted);
}

.btn-follow-toggle:hover  { transform: scale(1.05); }
.btn-follow-toggle:active { transform: scale(.94); }

.follow-label { letter-spacing: .3px; }

.legend-wrap {
  position: absolute;
  bottom: 16px; left: 16px;
  z-index: 800;
}

.btn-legend {
  width: 40px; height: 40px;
  border: none; border-radius: var(--radius-sm);
  background: var(--bg-glass);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  color: var(--txt-muted);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  transition: var(--transition);
}

.btn-legend:hover  { color:var(--gold); border-color:rgba(201,168,76,.3); }
.btn-legend:active { transform:scale(.92); }

.legend-panel {
  position: absolute;
  bottom: calc(100% + 10px); left: 0;
  width: 220px;
  background: var(--bg-glass);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  animation: fadeUp .22s ease-out both;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

.legend-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-weight:600;
  color: var(--gold); margin-bottom:10px;
}

.legend-list { list-style:none; display:flex; flex-direction:column; gap:8px; }

.legend-list li {
  display:flex; align-items:center; gap:9px;
  font-size:12px; color:var(--txt-primary); opacity:.9;
}

.legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.legend-dot--red   { background:var(--route-red);   box-shadow:0 0 5px var(--route-red);   }
.legend-dot--pink  { background:var(--route-pink);  box-shadow:0 0 5px var(--route-pink);  }
.legend-dot--blue  { background:var(--route-blue);  box-shadow:0 0 5px var(--route-blue);  }
.legend-dot--green { background:var(--route-green); box-shadow:0 0 5px var(--route-green); }

/* ════════════════════════════════════════════════════════
   MARKERS
════════════════════════════════════════════════════════ */
.marker-start {
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(58,158,255,.15);
  border:2px solid #3a9eff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  box-shadow:0 0 14px rgba(58,158,255,.55);
}

.marker-dest {
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(201,168,76,.12);
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 18px rgba(201,168,76,.5);
  overflow:hidden;
}

.marker-dest img { width:28px; height:28px; object-fit:cover; border-radius:6px; }

/* ════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
.app-footer {
  flex-shrink: 0;
  height: var(--footer-h);
  display:flex; align-items:center; justify-content:center;
  background: #060b16;
  border-top: 1px solid rgba(255,255,255,.04);
  font-size: 11px;
  color: var(--txt-muted);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

body.day-mode .app-footer { background:#e8e0cc; }
.app-footer strong { color:var(--gold); }

/* ════════════════════════════════════════════════════════
   LOCATION MODAL
════════════════════════════════════════════════════════ */
.modal {
  position: fixed; inset:0;
  background: rgba(4,8,18,.75);
  backdrop-filter: blur(8px);
  display: flex; align-items:center; justify-content:center;
  z-index: 9999;
  animation: fadeIn .3s ease-out;
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal.hidden { display:none; }

.modal__card {
  width: min(88vw, 360px);
  background: linear-gradient(160deg,#111d35 0%,#0c1525 100%);
  border: 1px solid rgba(201,168,76,.22);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.6);
  animation: scaleUp .3s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes scaleUp {
  from { transform:scale(.88); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}

.modal__icon  { font-size:38px; margin-bottom:16px; filter:drop-shadow(0 0 12px var(--gold)); }
.modal__title { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:700; color:var(--gold-light); margin-bottom:10px; }
.modal__text  { font-size:14px; color:var(--txt-muted); line-height:1.65; margin-bottom:24px; }
.modal__text strong { color:var(--txt-primary); }

.modal__btn {
  width:100%; padding:15px; border:none; border-radius:var(--radius-sm);
  background: linear-gradient(135deg,#9a6d0e,var(--gold),var(--gold-light));
  color:#07090f; font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:0 0 24px rgba(201,168,76,.4);
  transition:var(--transition);
}

.modal__btn:hover  { filter:brightness(1.1); transform:translateY(-1px); }
.modal__btn:active { transform:translateY(0) scale(.98); }
.modal__error { margin-top:14px; font-size:12px; color:#ff4444; line-height:1.5; }

/* ════════════════════════════════════════════════════════
   ARRIVAL CELEBRATION SCREEN
════════════════════════════════════════════════════════ */
.arrival-screen {
  position: fixed; inset:0;
  z-index: 99999;
  display: flex; align-items:center; justify-content:center;
  animation: fadeIn .6s ease-out both;
}

.arrival-bg {
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(201,168,76,.22) 0%,
    rgba(10,15,30,.97) 65%,
    #050810 100%);
  z-index:0;
}

.confetti-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:1;
}

.arrival-card {
  position:relative; z-index:2;
  text-align:center;
  padding: 0 28px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  animation: arrivalCardIn .8s cubic-bezier(.34,1.56,.64,1) .3s both;
}

@keyframes arrivalCardIn {
  from { transform:translateY(40px) scale(.9); opacity:0; }
  to   { transform:translateY(0) scale(1); opacity:1; }
}

.arrival-logo {
  font-size:48px; color:var(--gold);
  filter:drop-shadow(0 0 20px var(--gold));
  animation:logoSpin 3s ease-in-out infinite;
}

@keyframes logoSpin {
  0%,100% { transform:rotate(0deg) scale(1); }
  50%     { transform:rotate(15deg) scale(1.1); }
}

.arrival-welcome {
  font-size:14px; letter-spacing:4px; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}

.arrival-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(32px,8vw,52px);
  font-weight:700;
  color:#fff;
  text-shadow:0 0 40px rgba(201,168,76,.5);
  line-height:1;
}

.arrival-sub {
  font-family:'Cormorant Garamond',serif;
  font-size:22px; color:var(--gold);
  letter-spacing:1px;
}

.arrival-divider {
  width:60px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:4px 0;
}

.arrival-msg {
  font-size:14px; color:var(--txt-muted);
  line-height:1.7; max-width:300px;
}

.arrival-btn {
  margin-top:8px;
  padding:14px 32px; border:none; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#9a6d0e,var(--gold),var(--gold-light));
  color:#07090f; font-family:'DM Sans',sans-serif;
  font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:0 0 32px rgba(201,168,76,.5);
  transition:var(--transition);
}

.arrival-btn:hover  { filter:brightness(1.1); transform:translateY(-2px); }
.arrival-btn:active { transform:scale(.97); }

/* ════════════════════════════════════════════════════════
   LEAFLET OVERRIDES
════════════════════════════════════════════════════════ */
.leaflet-control-attribution {
  background:rgba(6,11,22,.7) !important;
  color:var(--txt-muted) !important;
  font-size:10px !important;
  backdrop-filter:blur(4px);
}

.leaflet-control-attribution a { color:var(--gold) !important; }

/*
  Text-upright fix when map rotates:
  leaflet-rotate rotates the whole .leaflet-map-pane including tiles.
  Tiles from MapTiler have text baked into the raster image — when
  the map rotates, that text rotates too and becomes unreadable.
  Setting transform:none on .leaflet-tile-pane keeps tiles visually
  flat (upright labels) while .leaflet-overlay-pane and
  .leaflet-marker-pane still rotate correctly with the map.
*/
.leaflet-tile-pane {
  transform: none !important;
  transform-origin: 50% 50% !important;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-height:500px) and (orientation:landscape) {
  :root { --header-h:48px; }
  .header-titles h1 { font-size:14px; }
  .header-sub       { display:none; }
  .speedometer      { width:80px; height:80px; bottom:70px; }
  #speedValue       { font-size:18px; }
  .turn-banner      { bottom:120px; }
}

@media (min-width:600px) {
  .eta-card__value { font-size:16px; }
  .btn-recenter    { width:56px; height:56px; }
}