static/css/redesign.css

/* ═══════════════════════════════════════════════════════════════
   YATRI AI — "Sacred Modern" Design System
   Visual overhaul: richer palette, deeper shadows, premium polish
   Layers on top of base styles — override only, no structural changes
   ═══════════════════════════════════════════════════════════════ */

/* ─── UPGRADED COLOR TOKENS ─── */
:root {
  /* Primary — richer, warmer saffron */
  --saffron: #E45A22;
  --saffron-light: #F07B4F;
  --saffron-dark: #B8421A;
  --saffron-glow: rgba(228, 90, 34, 0.2);
  --saffron-subtle: rgba(228, 90, 34, 0.06);

  /* Gold — deeper, more luminous */
  --gold: #C99A10;
  --gold-light: #E8C252;
  --gold-dark: #9A7400;

  /* Maroon — deeper, more dramatic */
  --maroon: #5C0A16;
  --maroon-light: #7D1628;

  /* Deep blue — richer */
  --deepblue: #14104E;
  --river: #1E7A9E;
  --river-light: #8CCFEE;

  /* Neutrals — warmer and more refined */
  --cream: #FEFBF6;
  --cream-dark: #F3ECE2;
  --ink: #16162A;
  --ink-light: #3D3D5C;
  --ink-muted: #7A7A98;
  --white: #FFFFFF;

  /* Enhanced glass */
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* Layered shadow system */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 8px 32px rgba(228, 90, 34, 0.2), 0 2px 8px rgba(228, 90, 34, 0.1);
  --shadow-soft: var(--shadow-md);

  /* Refined radii */
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
}


/* ═══════════════════════════════════════════════════════════════
   BODY & GLOBAL
   ═══════════════════════════════════════════════════════════════ */

body {
  background: var(--cream);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════
   NAVBAR — Premium glass navigation
   ═══════════════════════════════════════════════════════════════ */

.navbar {
  background: linear-gradient(135deg, #4A0812 0%, #7A1A10 40%, #A0381A 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 24px rgba(74, 8, 18, 0.4) !important;
}

.nav-logo {
  background: linear-gradient(145deg, #EABC4E, #C99A10) !important;
  box-shadow: 0 2px 8px rgba(201, 154, 16, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  border-radius: 10px !important;
}

.nav-title {
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  font-size: 17px !important;
}

.nav-status {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
}

.nav-link {
  border-radius: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

.nav-link:hover, .nav-link.active {
  background: rgba(255, 255, 255, 0.12) !important;
}

.nav-user-btn {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}


/* ═══════════════════════════════════════════════════════════════
   HERO — Cinematic, immersive
   ═══════════════════════════════════════════════════════════════ */

.hero {
  background: linear-gradient(160deg, #3A0610 0%, #7A1810 30%, #C04818 60%, #D4922A 100%) !important;
  padding: 72px 28px 90px !important;
  min-height: 460px !important;
}

.hero h1 {
  font-size: clamp(34px, 7vw, 58px) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25) !important;
}

.hero h1 span {
  color: #F0C75E !important;
  text-shadow: 0 2px 20px rgba(240, 199, 94, 0.3);
}

.hero p {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.7 !important;
  max-width: 440px !important;
  letter-spacing: 0.01em !important;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 7px 18px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
}

.hero-cta {
  background: white !important;
  color: var(--saffron-dark) !important;
  padding: 16px 36px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.hero-cta:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-3px) !important;
}

.hero-float {
  opacity: 0.08 !important;
  font-size: 44px !important;
}

/* Wave divider — more natural */
.wave-divider svg {
  height: 70px !important;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION LAYOUT — Better spacing
   ═══════════════════════════════════════════════════════════════ */

.section {
  padding: 44px 24px !important;
  max-width: 1100px !important;
}

.section-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 20px !important;
  color: var(--ink) !important;
}

.section-title i {
  font-size: 22px !important;
  color: var(--saffron) !important;
}


/* ═══════════════════════════════════════════════════════════════
   ACTION CARDS — Elevated, premium
   ═══════════════════════════════════════════════════════════════ */

.actions-grid {
  gap: 14px !important;
}

.action-card {
  background: var(--white) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: var(--shadow-sm) !important;
}

.action-card::after {
  height: 3px !important;
  background: linear-gradient(90deg, var(--saffron), var(--gold-light)) !important;
  border-radius: 0 0 0 0 !important;
}

.action-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-6px) !important;
  border-color: rgba(228, 90, 34, 0.08) !important;
}

.action-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  font-size: 24px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.action-card h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  color: var(--ink) !important;
}

.action-card p {
  font-size: 11px !important;
  color: var(--ink-muted) !important;
  margin-top: 2px !important;
}


/* ═══════════════════════════════════════════════════════════════
   INFO BANNER — Warmer, more inviting
   ═══════════════════════════════════════════════════════════════ */

.info-banner {
  background: linear-gradient(135deg, #FEF7ED, #FFF0DB) !important;
  border: 1px solid #F5D89A !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  margin-top: 24px !important;
  box-shadow: 0 2px 12px rgba(201, 154, 16, 0.08) !important;
}

.info-banner h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #8B5E00 !important;
  letter-spacing: -0.3px !important;
}

.info-banner .info-row {
  font-size: 14px !important;
  color: #5C4000 !important;
  margin-top: 8px !important;
}

.info-banner .info-row i {
  color: #C99A10 !important;
}


/* ═══════════════════════════════════════════════════════════════
   CHAT — Premium messaging experience
   ═══════════════════════════════════════════════════════════════ */

.chat-header {
  background: var(--white) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.chat-avatar {
  border-radius: 12px !important;
  background: linear-gradient(145deg, var(--saffron), #D44A12) !important;
  box-shadow: 0 2px 8px rgba(228, 90, 34, 0.25) !important;
}

.chat-messages {
  background: var(--cream) !important;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(228, 90, 34, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(30, 122, 158, 0.02) 0%, transparent 50%) !important;
}

/* User bubble — deeper gradient with glow */
.msg-user .msg-bubble {
  background: linear-gradient(135deg, #E45A22, #B8421A) !important;
  color: white !important;
  border-radius: 20px 20px 6px 20px !important;
  box-shadow: 0 4px 16px rgba(228, 90, 34, 0.2), 0 1px 4px rgba(228, 90, 34, 0.1) !important;
  font-weight: 450 !important;
}

/* Bot bubble — refined glass card */
.msg-bot .msg-bubble {
  background: var(--white) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 20px 20px 20px 6px !important;
  box-shadow: var(--shadow-sm) !important;
  font-weight: 400 !important;
}

.msg-bubble {
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.005em !important;
}

.msg-lang {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: var(--saffron) !important;
  margin-bottom: 4px !important;
}

/* Bot avatar */
.msg-bot::before {
  border-radius: 10px !important;
  background: linear-gradient(145deg, var(--saffron), var(--gold)) !important;
  box-shadow: 0 2px 6px rgba(228, 90, 34, 0.2) !important;
}

/* Play button */
.msg-play {
  border-radius: 10px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(228, 90, 34, 0.08), rgba(228, 90, 34, 0.03)) !important;
  border: 1px solid rgba(228, 90, 34, 0.1) !important;
}

/* Chat input bar */
.chat-input-bar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.03) !important;
  padding: 12px 16px !important;
  gap: 10px !important;
}

.chat-input {
  border: 2px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 24px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  background: var(--cream) !important;
  font-weight: 450 !important;
}

.chat-input:focus {
  border-color: var(--saffron) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 4px rgba(228, 90, 34, 0.06) !important;
}

/* Send button */
.btn-send {
  border-radius: 14px !important;
}

.btn-send.ready {
  background: linear-gradient(145deg, var(--saffron), var(--saffron-dark)) !important;
  box-shadow: 0 4px 12px rgba(228, 90, 34, 0.25) !important;
}

/* Mic button */
.btn-mic {
  background: linear-gradient(145deg, #E45A22, #C04415) !important;
  box-shadow: 0 6px 20px rgba(228, 90, 34, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Typing indicator */
.typing-indicator {
  border-radius: 20px 20px 20px 6px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Welcome state */
.chat-welcome-icon {
  width: 84px !important;
  height: 84px !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, var(--saffron), #D44A12) !important;
  box-shadow: 0 8px 28px rgba(228, 90, 34, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-size: 38px !important;
}

.chat-welcome h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

.chat-welcome p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ink-muted) !important;
}

.chat-welcome-chip {
  padding: 10px 18px !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-xs) !important;
}

.chat-welcome-chip:hover {
  border-color: var(--saffron) !important;
  background: var(--saffron-subtle) !important;
  color: var(--saffron-dark) !important;
  box-shadow: var(--shadow-sm) !important;
}


/* ═══════════════════════════════════════════════════════════════
   LANG PICKER — Refined chips
   ═══════════════════════════════════════════════════════════════ */

.lang-picker-btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  background: var(--cream) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
}

.lang-dropdown {
  background: var(--white) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.lang-chip {
  border-radius: 12px !important;
  padding: 7px 18px !important;
  font-weight: 600 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
}

.lang-chip.active {
  background: linear-gradient(135deg, var(--saffron), var(--saffron-dark)) !important;
  box-shadow: 0 2px 10px rgba(228, 90, 34, 0.2) !important;
  border-color: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════
   EXPLORE — Rich card design
   ═══════════════════════════════════════════════════════════════ */

.explore-header {
  background: linear-gradient(135deg, #10083E 0%, #1E7A9E 100%) !important;
  padding: 36px 24px !important;
}

.explore-header h2 {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.8px !important;
}

.filter-bar {
  padding: 14px 20px !important;
  gap: 8px !important;
  background: var(--white) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.filter-chip {
  border-radius: 12px !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  font-size: 13px !important;
}

.filter-chip.active {
  background: var(--river) !important;
  border-color: var(--river) !important;
  box-shadow: 0 2px 10px rgba(30, 122, 158, 0.2) !important;
}

.places-list {
  padding: 12px 16px 40px !important;
}

.place-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 14px !important;
}

.place-card:hover {
  box-shadow: var(--shadow-lg) !important;
}

.place-card-img-wrap {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  height: 170px !important;
}


/* ═══════════════════════════════════════════════════════════════
   EMERGENCY — Urgent, clear
   ═══════════════════════════════════════════════════════════════ */

.sos-header {
  background: linear-gradient(135deg, #C41E1E 0%, #7A0F0F 100%) !important;
  padding: 36px 24px !important;
}

.sos-header h2 {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
}

.sos-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  padding: 22px !important;
}

.sos-card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: #FCA5A5 !important;
}

.sos-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  font-size: 24px !important;
}

.sos-card h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  letter-spacing: -0.2px !important;
}

.sos-call-btn {
  border-radius: 16px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 18px 40px !important;
  letter-spacing: -0.3px !important;
  background: linear-gradient(135deg, #D42020, #8B0F0F) !important;
  box-shadow: 0 8px 28px rgba(212, 32, 32, 0.3) !important;
}

.sos-call-btn:hover {
  box-shadow: 0 12px 36px rgba(212, 32, 32, 0.4) !important;
}

/* Helpline items */
.helpline-item {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-xs) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  padding: 16px !important;
  margin-bottom: 8px !important;
}

.helpline-item:hover {
  box-shadow: var(--shadow-md) !important;
  background: #FEF2F2 !important;
  border-color: #FECACA !important;
}

.helpline-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 20px !important;
}

.helpline-info .number {
  font-size: 18px !important;
  font-weight: 800 !important;
}

.helpline-call {
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 7px 16px !important;
  letter-spacing: 1.5px !important;
}


/* ═══════════════════════════════════════════════════════════════
   MAP — Elevated panels
   ═══════════════════════════════════════════════════════════════ */

.map-search {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.map-btn {
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
}

.map-place-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-2xl) !important;
  padding: 20px !important;
}

.map-place-card h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

.map-place-card p {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.mpc-btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px !important;
}

.mpc-btn-primary {
  background: var(--saffron) !important;
  box-shadow: 0 2px 8px rgba(228, 90, 34, 0.2) !important;
}

.route-panel {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-2xl) !important;
  padding: 20px !important;
}

.route-field {
  border-radius: 12px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.06) !important;
}

.route-go-btn {
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 13px !important;
  box-shadow: 0 4px 12px rgba(228, 90, 34, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════
   AUTH — Premium form design
   ═══════════════════════════════════════════════════════════════ */

.auth-page {
  background: linear-gradient(160deg, #3A0610 0%, #8A2010 40%, #C07030 100%) !important;
}

.auth-card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-2xl) !important;
  padding: 40px 32px !important;
}

.auth-card .auth-logo {
  width: 60px !important;
  height: 60px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, var(--saffron), #D44A12) !important;
  box-shadow: 0 6px 20px rgba(228, 90, 34, 0.25) !important;
  font-size: 26px !important;
}

.auth-card h2 {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.8px !important;
  color: var(--ink) !important;
}

.auth-card .auth-sub {
  font-size: 14px !important;
  color: var(--ink-muted) !important;
}

.auth-field label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: var(--ink-light) !important;
}

.auth-field input, .auth-field select {
  border-radius: 14px !important;
  padding: 14px 18px !important;
  border: 1.5px solid rgba(0, 0, 0, 0.08) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.auth-field input:focus, .auth-field select:focus {
  border-color: var(--saffron) !important;
  box-shadow: 0 0 0 4px rgba(228, 90, 34, 0.06) !important;
}

.auth-btn {
  border-radius: 14px !important;
  padding: 15px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  box-shadow: 0 4px 16px rgba(228, 90, 34, 0.2) !important;
}

.auth-btn:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(228, 90, 34, 0.3) !important;
}

.auth-lang-chip {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
}

.auth-lang-chip.active {
  background: var(--saffron) !important;
  border-color: var(--saffron) !important;
  box-shadow: 0 2px 8px rgba(228, 90, 34, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════
   PROFILE — Clean, modern settings
   ═══════════════════════════════════════════════════════════════ */

.profile-header {
  background: linear-gradient(135deg, #10102A 0%, #1C2044 100%) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
  padding: 44px 24px !important;
}

.profile-avatar {
  width: 88px !important;
  height: 88px !important;
  font-size: 32px !important;
  background: linear-gradient(145deg, var(--saffron), #D44A12) !important;
  box-shadow: 0 6px 24px rgba(228, 90, 34, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.1) !important;
}

.profile-name {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.8px !important;
}

.profile-email {
  font-size: 14px !important;
  opacity: 0.55 !important;
}

.profile-lang-badge {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 5px 16px !important;
}

.profile-stat {
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
  padding: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.profile-stat .num {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(135deg, var(--saffron), var(--gold)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text;
}

.profile-stat .label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
}

.profile-info-card {
  border-radius: 16px !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.profile-info-row {
  padding: 14px 18px !important;
}

.profile-info-row .lbl {
  font-weight: 500 !important;
}

.profile-info-row .val {
  font-weight: 700 !important;
}

.profile-btn {
  border-radius: 14px !important;
  font-weight: 700 !important;
  padding: 15px !important;
}

.profile-section h3 {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 11px !important;
  color: var(--ink-muted) !important;
}


/* ═══════════════════════════════════════════════════════════════
   CHAT SIDEBAR — Refined panel
   ═══════════════════════════════════════════════════════════════ */

.chat-sidebar {
  box-shadow: 6px 0 36px rgba(0, 0, 0, 0.15) !important;
}

.chat-sidebar-header h3 {
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

.chat-sidebar-new {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px !important;
  box-shadow: 0 2px 8px rgba(228, 90, 34, 0.2) !important;
}

.chat-sidebar-item {
  border-radius: 12px !important;
}

.chat-sidebar-item-info h4 {
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}


/* ═══════════════════════════════════════════════════════════════
   FEEDBACK MODAL — Polished
   ═══════════════════════════════════════════════════════════════ */

.fb-type {
  border-radius: 12px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}

.fb-type.active {
  background: var(--saffron) !important;
  border-color: var(--saffron) !important;
  box-shadow: 0 2px 8px rgba(228, 90, 34, 0.2) !important;
}


/* ═══════════════════════════════════════════════════════════════
   TOAST — Premium notification
   ═══════════════════════════════════════════════════════════════ */

#toast {
  background: var(--ink) !important;
  border-radius: 16px !important;
  padding: 14px 24px !important;
  box-shadow: var(--shadow-2xl) !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV — Premium tab bar
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .mobile-nav button.active {
    color: var(--saffron) !important;
  }

  .mobile-nav button.active::after {
    background: linear-gradient(90deg, var(--saffron), var(--gold)) !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 1.5px !important;
  }

  /* Compact card adjustments */
  .action-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    margin-bottom: 10px !important;
  }

  .action-card {
    padding: 18px 12px !important;
    border-radius: 16px !important;
  }

  .action-card h3 {
    font-size: 11px !important;
  }

  .action-card p {
    font-size: 9px !important;
  }

  .hero {
    padding: 36px 18px 56px !important;
    min-height: 360px !important;
  }

  .hero h1 {
    font-size: 30px !important;
    letter-spacing: -1px !important;
  }

  .hero p {
    font-size: 14px !important;
    margin-bottom: 22px !important;
  }

  .hero-cta {
    padding: 14px 30px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }

  .section {
    padding: 24px 16px !important;
  }

  .section-title {
    font-size: 17px !important;
  }

  .chat-welcome-icon {
    width: 68px !important;
    height: 68px !important;
    font-size: 30px !important;
  }

  .chat-welcome h3 {
    font-size: 19px !important;
  }

  .profile-avatar {
    width: 72px !important;
    height: 72px !important;
    font-size: 26px !important;
  }

  .profile-name {
    font-size: 20px !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 26px !important;
    letter-spacing: -0.8px !important;
  }

  .hero-cta {
    padding: 12px 24px !important;
    font-size: 14px !important;
  }

  .action-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LEAFLET MAP POPUPS — Refined
   ═══════════════════════════════════════════════════════════════ */

.leaflet-popup-content-wrapper {
  border-radius: 16px !important;
  box-shadow: var(--shadow-xl) !important;
}

.leaflet-popup-content {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.leaflet-popup-content b {
  font-weight: 700 !important;
}


/* ═══════════════════════════════════════════════════════════════
   LOCATION PICKER — Refined
   ═══════════════════════════════════════════════════════════════ */

.loc-picker-sheet {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  box-shadow: var(--shadow-2xl) !important;
}

.loc-picker-sheet h3 {
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

.loc-picker-search {
  border-radius: 14px !important;
}

.loc-option {
  border-radius: 12px !important;
}

.loc-option-icon {
  border-radius: 12px !important;
}

.loc-picker-gps {
  border-radius: 12px !important;
}

.loc-picker-done {
  border-radius: 12px !important;
  font-weight: 800 !important;
}