/**
 * SPRINT 12.13.2 — FINAL POLISH BEFORE PUBLIC BETA
 * ============================================================
 *
 * This stylesheet corrects Sprint 12.13.1's over-aggressive
 * simplification and adds final native-feel polish.
 *
 * Architecture Lock: Presentation Layer Only.
 * No Business Logic, Database, Repository, Controller changes.
 *
 * SPRINT PHILOSOPHY:
 *   "Ứng dụng này rất gọn, rất mượt và rất chuyên nghiệp."
 *   — NOT "Đây là một website WordPress."
 *
 * Reference: Apple Human Interface, Airbnb, Grab, Google Maps
 *
 * @package XOS\Presentation
 * @version 12.13.2
 * @since  Sprint 12.13.2
 */

/* ═══════════════════════════════════════════════════════════════
     EPIC 1 — SEARCH PANEL POLISH
     48px height, 16px radius, soft shadow, thin blue glow focus
     "Xem bản đồ" MUST stay on ONE LINE. Never wrap.
     ═══════════════════════════════════════════════════════════════ */

/* Search input fields: 48px height, 16px radius, no hard border */
.ep12-search-input {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  border: 1px solid #E5E7EB !important;
  background: #F9FAFB !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
  font-size: 1rem !important;
  padding: 0 16px !important;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out !important;
}
.ep12-search-input::placeholder {
  color: #B0B7C3 !important;
  font-size: 0.875rem !important;
}
.ep12-search-input:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.10), 0 1px 3px rgba(0,0,0,0.02) !important;
  background: #FFFFFF !important;
  outline: none !important;
}

/* Origin/Destination inputs: icon padding */
.ep12-search-field-origin .ep12-search-input,
.ep12-search-field-dest .ep12-search-input {
  padding-left: 40px !important;
  padding-right: 44px !important;
}

/* Search icon inside input */
.ep12-search-icon-wrap {
  left: 14px !important;
  color: #9CA3AF !important;
}

/* Search button: 44px height, solid blue */
.ep12-search-btn-primary {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(59,130,246,0.15) !important;
  letter-spacing: 0 !important;
  flex: 2 !important;
  white-space: nowrap !important;
  padding: 0 20px !important;
}

/* Map button: same height, same radius, same typography, NEVER wrap */
.ep12-search-btn-map {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  color: #3B82F6 !important;
  border: 1px solid #E5E7EB !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  flex: 1 !important;
  min-width: 120px !important;
  white-space: nowrap !important;
  padding: 0 16px !important;
}
.ep12-search-btn-map:hover {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
}

/* Search actions row: equal button heights */
.ep12-search-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

/* Prevent button text wrap at ALL responsive widths */
@media (max-width: 374px) {
  .ep12-search-btn-map {
    min-width: auto !important;
    flex: 1 !important;
    padding: 0 10px !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 359px) {
  .ep12-search-actions {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  .ep12-search-btn-map {
    font-size: 0.75rem !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
}

/* Search card: 16px radius */
.ep12-hero-search {
  border-radius: 16px !important;
}
.ep12-hero-search-inner {
  padding: 8px !important;
}

/* Autocomplete dropdown: 12px radius */
.ep12-autocomplete-dropdown {
  border-radius: 12px !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06) !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 2 — HEADER POLISH
     Logo/title/icon spacing. Title weight 600, letter-spacing -0.2px.
     Reduced height. Icons same stroke weight. Perfect vertical center.
     ═══════════════════════════════════════════════════════════════ */

.hp-appbar-inner {
  height: 48px !important;
  padding: 0 12px !important;
}
.hp-appbar-logo {
  gap: 8px !important;
}
.hp-appbar-brand {
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: -0.2px !important;
  color: #1F2937 !important;
}
.hp-appbar-logo svg {
  width: 26px !important;
  height: 26px !important;
}
.hp-appbar-actions {
  gap: 4px !important;
}
.hp-appbar-icon {
  width: 44px !important;
  height: 44px !important;
  color: #6B7280 !important;
}
.hp-appbar-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.8 !important;
}
.hp-notif-dot {
  top: 8px !important;
  right: 8px !important;
  width: 7px !important;
  height: 7px !important;
  background: #EF4444 !important;
  border: 2px solid #FFFFFF !important;
}

/* Dashboard header: consistent with appbar */
.db-header-inner {
  height: 48px !important;
}
.db-header-avatar {
  width: 34px !important;
  height: 34px !important;
}
.db-header-name {
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  letter-spacing: -0.2px !important;
}
.db-header-icon {
  width: 44px !important;
  height: 44px !important;
  color: #6B7280 !important;
}

/* Sticky search: adjusted top */
.hp-search {
  top: 48px !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 3 — CARD DENSITY POLISH
     Compress 8-12px without feeling crowded.
     Reduce route bottom margin, price top margin, avatar margin,
     action spacing. Increase feed density ~5-8%.
     ═══════════════════════════════════════════════════════════════ */

/* Card body: compact but breathable */
.ep12-live-body {
  padding: 10px 12px 4px !important;
  gap: 2px !important;
}

/* Route: reduce bottom margin */
.ep12-live-route {
  margin-bottom: 1px !important;
}

/* Price: reduce top margin */
.ep12-live-price {
  margin: 4px 0 2px !important;
}

/* Driver row: tighter */
.ep12-live-driver {
  margin-top: 6px !important;
  gap: 6px !important;
}

/* Card actions: tighter padding */
.ep12-live-actions {
  padding: 8px 10px 10px !important;
  gap: 8px !important;
}

/* Schedule row: tighter */
.ep12-live-schedule {
  gap: 4px !important;
  margin-top: 2px !important;
}

/* Vehicle row: tighter */
.ep12-live-vehicle-row {
  margin-top: 1px !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 4 — TYPOGRAPHY REFINEMENT
     Route 20/600, Price 18/500, Info 14/400,
     Username 13/400, Badges 11/500, Time 11/400.
     No text heavier than 600.
     ═══════════════════════════════════════════════════════════════ */

/* Route: 20px 600 — the hero */
.ep12-live-route {
  font-size: 1.25rem !important;    /* 20px */
  font-weight: 600 !important;
  color: #1F2937 !important;
  letter-spacing: -0.01em !important;
}

/* Price: 18px 500 */
.ep12-live-price-value {
  font-size: 1.125rem !important;   /* 18px */
  font-weight: 500 !important;
  color: #3B82F6 !important;
  letter-spacing: -0.01em !important;
}

/* Information line: 14px 400 */
.ep12-live-info-line {
  font-size: 0.875rem !important;   /* 14px */
  font-weight: 400 !important;
  color: #6B7280 !important;
}

/* Username: 13px 400 */
.ep12-live-driver-name {
  font-size: 0.8125rem !important;  /* 13px */
  font-weight: 400 !important;
  color: #6B7280 !important;
}

/* Badges: 11px 500 — READABLE (EPIC 6) */
.ep12-live-listing-badge {
  font-size: 0.6875rem !important;  /* 11px */
  font-weight: 500 !important;
  height: 24px !important;
  line-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
}

/* Time: 11px 400 */
.ep12-live-time {
  font-size: 0.6875rem !important;  /* 11px */
  font-weight: 400 !important;
}

/* Schedule items: 12px 400 */
.ep12-live-schedule-item {
  font-size: 0.75rem !important;    /* 12px */
  font-weight: 400 !important;
  color: #9CA3AF !important;
}

/* Vehicle row: 12px 400 */
.ep12-live-vehicle-row {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: #9CA3AF !important;
}

/* Section titles: 18px 600 */
.ep12-section-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: #1F2937 !important;
}
.ep12-live-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

/* Section link: 12px 500 */
.ep12-section-link {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #3B82F6 !important;
}

/* Button text: 14px 500 */
.ep12-live-btn {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
.ep12-search-btn {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Remove explicit 400-force on everything from Sprint 12.13.1 sect 1 */
body, p, span, div, a, li, td, th, label, input, textarea, select, button,
h1, h2, h3, h4, h5, h6, strong, b, em, i, small {
  font-weight: unset !important;
}

/* Global text: 400 by default */
body {
  font-weight: 400 !important;
  color: #1F2937 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Restore proper hierarchy */
h1, h2, h3, .ep12-section-title, .ep12-live-title,
.db-section-title, .hp-section-title,
.xos-page-title, .xos-detail-title {
  font-weight: 600 !important;
  color: #1F2937 !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 5 — HERO CARD POLISH
     Image +8%, shadow +5%, radius same, title +1px.
     No extra decorations.
     ═══════════════════════════════════════════════════════════════ */

/* Hero card image: +8% taller */
.ep12-live-card--hero .ep12-live-media,
.ep12-live-card.ep12-live-card--hero .ep12-live-media {
  height: 104px !important;
}

/* Hero card shadow: +5% (slightly more than standard cards) */
.ep12-live-card--hero {
  box-shadow: 0 2px 12px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.03) !important;
}

/* Hero card title: +1px */
.ep12-live-card--hero .ep12-live-route {
  font-size: 1.3125rem !important; /* 21px (20 + 1) */
}

/* Standard card image: 96px (reduced from skeleton but clean) */
.ep12-live-media {
  height: 96px !important;
  background: #F3F4F6 !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 6 — BADGE POLISH
     +10% readability. Increase contrast, NOT saturation.
     Badge still looks premium. Not colorful.
     ═══════════════════════════════════════════════════════════════ */

/* RESTORE badge visibility (Sprint 12.13.1 made them invisible) */
.ep12-live-listing-badge {
  background: rgba(255,255,255,0.92) !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-size: 0.6875rem !important;
  height: 24px !important;
  line-height: 24px !important;
  padding: 0 10px !important;
  border-radius: 6px !important;
  backdrop-filter: blur(6px) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.ep12-live-listing-badge svg {
  display: inline !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
}

/* Badge type-specific contrast (NOT saturation, just text clarity) */
.ep12-badge-passenger {
  background: rgba(209, 250, 229, 0.90) !important;
  color: #065F46 !important;
}
.ep12-badge-ride {
  background: rgba(219, 234, 254, 0.90) !important;
  color: #1E40AF !important;
}
.ep12-badge-cargo {
  background: rgba(254, 243, 199, 0.90) !important;
  color: #92400E !important;
}
.ep12-badge-cargo-offer {
  background: rgba(237, 233, 254, 0.90) !important;
  color: #5B21B6 !important;
}

/* Restore visible listing type badges in dashboard/legacy pages */
.listing-type-badge.type-passenger_request {
  background: #ECFDF5 !important;
  color: #065F46 !important;
}
.listing-type-badge.type-cargo_request {
  background: #FEF3C7 !important;
  color: #92400E !important;
}
.listing-type-badge.type-ride_offer {
  background: #DBEAFE !important;
  color: #1E40AF !important;
}
.listing-type-badge.type-cargo_offer {
  background: #EDE9FE !important;
  color: #5B21B6 !important;
}
.status-badge.status-active {
  background: #ECFDF5 !important;
  color: #065F46 !important;
}
.status-badge.status-completed {
  background: #DBEAFE !important;
  color: #1E40AF !important;
}
.status-badge.status-expired {
  background: #FEF3C7 !important;
  color: #92400E !important;
}
.status-badge.status-draft {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

/* Verification badges: restore readability */
.verification-badge.status-active {
  background: #ECFDF5 !important;
  color: #065F46 !important;
}
.verification-badge.status-unverified {
  background: #FEF3C7 !important;
  color: #92400E !important;
}
.verification-badge.status-rejected {
  background: #FEF2F2 !important;
  color: #991B1B !important;
}
.membership-badge {
  background: rgba(255,255,255,0.20) !important;
  color: inherit !important;
  font-weight: 500 !important;
}

/* Dashboard welcome tags: readable */
.db-tag-membership {
  background: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
.db-tag-verify.status-active {
  background: rgba(16,185,129,0.30) !important;
  color: #FFFFFF !important;
}
.db-tag-verify.status-unverified {
  background: rgba(255,255,255,0.15) !important;
  color: #FFFFFF !important;
}
.db-tag-verify.status-rejected {
  background: rgba(239,68,68,0.30) !important;
  color: #FFFFFF !important;
}

/* Timeline status badges: readable */
.db-timeline-status.status-active {
  background: #ECFDF5 !important;
  color: #065F46 !important;
}
.db-timeline-status.status-draft,
.db-timeline-status.status-expired {
  background: #FEF3C7 !important;
  color: #92400E !important;
}
.db-timeline-status.status-completed {
  background: #DBEAFE !important;
  color: #1E40AF !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 7 — AVATAR POLISH
     36px, soft gray ring, very light shadow.
     No thick border. No glow.
     ═══════════════════════════════════════════════════════════════ */

.ep12-driver-avatar-img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #E5E7EB !important;  /* soft gray ring */
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02) !important;
  object-fit: cover !important;
}
.ep12-driver-avatar-default {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 2px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02) !important;
}

/* Dashboard welcome avatar */
.db-welcome-avatar-ring img {
  width: 56px !important;
  height: 56px !important;
  border: 2px solid #E5E7EB !important;
}

/* Dashboard header avatar */
.db-header-avatar {
  width: 34px !important;
  height: 34px !important;
  border: 2px solid #E5E7EB !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  border-radius: 50% !important;
}

/* Welcome avatar ring: restore subtle gradient */
.db-welcome-avatar-ring {
  background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.08)) !important;
  padding: 3px !important;
  border-radius: 50% !important;
}

/* Restore live top bar for hero cards (time overlay is useful info) */
.ep12-live-top-bar {
  display: flex !important;
}
.ep12-live-time {
  display: inline-flex !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
  background: rgba(0,0,0,0.35) !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
}
.ep12-live-dot-group .ep12-live-dot {
  width: 6px !important;
  height: 6px !important;
  background: #4ADE80 !important;
  box-shadow: 0 0 5px rgba(74,222,128,0.5) !important;
  animation: xg-pulse-12132 1.8s ease-in-out infinite !important;
}
@keyframes xg-pulse-12132 {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.ep12-live-dot-group .ep12-live-label {
  font-size: 0.5625rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 8 — BUTTON POLISH
     Primary: Solid Blue. Secondary: White/Border 1px.
     Radius 10px. Height 38px. Text perfectly centered.
     No gradients. No large shadow.
     ═══════════════════════════════════════════════════════════════ */

/* ALL buttons: 38px, 10px radius, centered text */
.ep12-live-btn,
.ep12-search-btn,
.xos-btn,
.hp-hero-btn,
.btn-next,
.btn-prev,
.btn-publish,
.btn-save,
.btn-danger,
.xos-retry-btn,
.action-button,
.listing-action-btn,
.notification-action-btn,
.xos-contact-btn,
.ep12-map-save-btn,
.ep12-live-empty-btn {
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: background 120ms ease-out, transform 120ms ease-out !important;
  box-shadow: none !important;
}

/* Primary: Solid Blue */
.ep12-live-btn-primary,
.ep12-search-btn-primary,
.ep12-map-save-btn,
.ep12-live-empty-btn,
.btn-next,
.btn-publish,
.btn-save,
.xos-retry-btn,
.xos-btn-filled {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  border: none !important;
}
.ep12-live-btn-primary:hover,
.ep12-search-btn-primary:hover,
.ep12-map-save-btn:hover,
.ep12-live-empty-btn:hover,
.btn-next:hover,
.btn-publish:hover,
.btn-save:hover,
.xos-retry-btn:hover,
.xos-btn-filled:hover {
  background: #2563EB !important;
  transform: none !important;
}
.ep12-live-btn-primary:active,
.ep12-search-btn-primary:active,
.btn-next:active,
.btn-publish:active,
.btn-save:active {
  transform: scale(0.97) !important;
}

/* Secondary: White, 1px border */
.ep12-live-btn-outline,
.ep12-search-btn-map,
.btn-prev,
.xos-btn-outlined,
.action-button {
  background: #FFFFFF !important;
  color: #3B82F6 !important;
  border: 1px solid #E5E7EB !important;
}
.ep12-live-btn-outline:hover,
.ep12-search-btn-map:hover,
.btn-prev:hover,
.xos-btn-outlined:hover,
.action-button:hover {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
  transform: none !important;
}

/* Hero buttons: consistent */
.hp-hero-btn-primary {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}
.hp-hero-btn-secondary {
  background: #FFFFFF !important;
  color: #3B82F6 !important;
  border: 1px solid #E5E7EB !important;
  backdrop-filter: none !important;
}
.hp-hero-btn-secondary:hover {
  background: #F9FAFB !important;
}

/* Action button: primary variant */
.action-primary {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}
.action-primary:hover {
  background: #2563EB !important;
}

/* Danger button */
.btn-danger,
.listing-action-btn.delete-btn:hover {
  background: #EF4444 !important;
  color: #FFFFFF !important;
}

/* FAB: solid blue */
.xos-fab,
.hp-bottom-nav-fab {
  background: #3B82F6 !important;
  box-shadow: 0 2px 12px rgba(59,130,246,0.25) !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 9 — IMAGE POLISH
     Reduce illustration opacity when no real image.
     Real uploaded photo = 100%. Illustration only fallback.
     ═══════════════════════════════════════════════════════════════ */

/* Real uploaded image: full 100% */
.ep12-live-img {
  opacity: 1 !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

/* Illustration fallback: reduced opacity */
.ep12-live-media-illustration {
  opacity: 0.55 !important;
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%) !important;
}
.ep12-vehicle-illustration {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.08)) !important;
  opacity: 0.7 !important;
}

/* Placeholder emoji: muted */
.ep12-live-media-placeholder {
  opacity: 0.5 !important;
  font-size: 2rem !important;
  background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%) !important;
}

/* Media background: clean gray */
.ep12-live-media {
  background: #F3F4F6 !important;
}

/* Card media hover: no scale (native feel) */
.ep12-live-card:hover .ep12-vehicle-illustration {
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 10 — FEED RHYTHM
     Consistent 12px between cards. No random gaps. No layout jumps.
     Cards must visually "flow" like App Store / Airbnb / Grab.
     ═══════════════════════════════════════════════════════════════ */

.ep12-live-feed {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Card enter: smooth fade + subtle slide, no bounce */
.ep12-live-card {
  transition: opacity 140ms ease-out, transform 140ms ease-out !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Section spacing: consistent 12px vertical */
.ep12-section {
  padding: 12px 0 !important;
}
.ep12-section-header {
  margin-bottom: 10px !important;
}

/* Live header: consistent spacing */
.ep12-live-header {
  margin-bottom: 10px !important;
  gap: 8px !important;
}

/* Search section spacing */
.ep12-search-section {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Listing grid (desktop): consistent 16px gap */
@media (min-width: 768px) {
  .ep12-live-feed {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* Prevent layout jumps: card media has stable height */
.ep12-live-media {
  flex-shrink: 0 !important;
  min-height: 96px !important;
}

/* Card body: prevent text collapse */
.ep12-live-body {
  min-height: 100px !important;
}

/* Prevent overflow on long route names */
.ep12-live-route {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ep12-live-route-origin,
.ep12-live-route-dest {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 44% !important;
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 11 — RESPONSIVE FINAL PASS
     Android 360/375/390/412/430, iPhone 375/390/414/430, Tablet 768+
     No clipping, no wrapped buttons, no overflow, no broken flex,
     no text collision, no badge overlap.
     ═══════════════════════════════════════════════════════════════ */

/* Android 360px */
@media (min-width: 340px) and (max-width: 374px) {
  .ep12-search-fields {
    gap: 4px !important;
  }
  .ep12-search-field {
    flex: 1 1 120px !important;
    min-width: 100px !important;
  }
  .ep12-search-btn {
    padding: 0 12px !important;
  }
  .ep12-live-feed {
    gap: 10px !important;
  }
  .ep12-live-media {
    height: 88px !important;
  }
}

/* iPhone 375px / Android 375px */
@media (min-width: 375px) and (max-width: 389px) {
  .ep12-live-media {
    height: 92px !important;
  }
  .ep12-search-actions {
    gap: 8px !important;
  }
}

/* iPhone 390px / Android 390px */
@media (min-width: 390px) and (max-width: 411px) {
  .ep12-live-media {
    height: 96px !important;
  }
  .ep12-search-btn-map {
    min-width: 110px !important;
  }
}

/* iPhone 414px / Android 412-430px */
@media (min-width: 412px) and (max-width: 430px) {
  .ep12-live-media {
    height: 100px !important;
  }
  .ep12-hero-search-inner {
    padding: 10px !important;
  }
}

/* Tablet 768px+ */
@media (min-width: 768px) {
  .ep12-search-fields {
    display: grid !important;
    grid-template-columns: 1fr 40px 1fr !important;
    gap: 8px !important;
  }
  .ep12-search-swap {
    align-self: flex-end !important;
  }
  .ep12-search-btn-map {
    min-width: 130px !important;
    white-space: nowrap !important;
  }
  .ep12-live-media {
    height: 110px !important;
  }
  .ep12-live-card--hero .ep12-live-media {
    height: 118px !important;
  }
  .ep12-quick-actions {
    display: none !important;
  }
}

/* Desktop 1024px+ */
@media (min-width: 1024px) {
  .ep12-hero-search {
    max-width: 640px !important;
    margin: 0 auto !important;
  }
  .ep12-hero-search-inner {
    padding: 12px !important;
  }
  .ep12-live-feed {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .ep12-live-media {
    height: 120px !important;
  }
  .ep12-live-card--hero .ep12-live-media {
    height: 130px !important;
  }
}

/* Tiny screens (<340px): prevent wrapping */
@media (max-width: 339px) {
  .ep12-search-fields {
    flex-direction: column !important;
  }
  .ep12-search-field {
    min-width: 100% !important;
  }
  .ep12-search-actions {
    flex-wrap: nowrap !important;
  }
  .ep12-search-btn-map {
    min-width: auto !important;
    font-size: 0.75rem !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
  .ep12-live-media {
    height: 80px !important;
  }
  .ep12-live-route {
    font-size: 1rem !important;
  }
  .ep12-live-price-value {
    font-size: 1rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
     EPIC 12 — FINAL VISUAL AUDIT
     Fix inconsistencies across ALL screens.
     ═══════════════════════════════════════════════════════════════ */

/* ─── CARD SHADOW: consistent soft unified shadow ─── */
.ep12-live-card,
.ep12-hero-search,
.ep12-quick-action,
.ep12-live-empty-state,
.ep12-skeleton-card {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 5px rgba(0,0,0,0.02) !important;
}

/* Card hover: subtle lift */
.ep12-live-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.02) !important;
  transform: translateY(-1px) !important;
}

/* ─── CARD BODY: restore proper internal gap ─── */
.ep12-live-body {
  gap: 3px !important;
}

/* ─── QUICK ACTIONS: consistent styling ─── */
.ep12-quick-action {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 5px rgba(0,0,0,0.02) !important;
}
.ep12-quick-action-icon {
  width: 44px !important;
  height: 44px !important;
}
.ep12-quick-action-label {
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
}

/* ─── INTENT CARDS: clean ─── */
.ep12-intent-card {
  border: 1px solid rgba(0,0,0,0.04) !important;
  background: #F9FAFB !important;
  border-radius: 12px !important;
  padding: 6px 4px !important;
  min-height: 52px !important;
}
.ep12-intent-card.active {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  border-color: #3B82F6 !important;
}
.ep12-intent-card:hover {
  background: #F3F4F6 !important;
}

/* ─── HERO SECTION: soft and clean ─── */
.hp-hero {
  background: linear-gradient(160deg, #3B82F6 0%, #2563EB 60%, #1D4ED8 100%) !important;
  border-radius: 0 0 24px 24px !important;
}
.hp-hero-title {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.10) !important;
}
.hp-hero-sub {
  color: rgba(255,255,255,0.85) !important;
}
.hp-hero-stats {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px) !important;
}
.hp-hero-stat-value {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.hp-hero-stat-label {
  color: rgba(255,255,255,0.75) !important;
}

/* ─── DASHBOARD WELCOME: premium gradient ─── */
.db-welcome {
  background: linear-gradient(145deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%) !important;
  border-radius: 20px !important;
}
.db-welcome-name {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.db-welcome-hello {
  color: rgba(255,255,255,0.8) !important;
}
.db-welcome-stats-row {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px) !important;
}
.db-welcome-stat-value {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}
.db-welcome-stat-label {
  color: rgba(255,255,255,0.75) !important;
}

/* ─── DASHBOARD STAT CARDS ─── */
.db-stat-active .db-stat-icon {
  background: #ECFDF5 !important;
  color: #065F46 !important;
}
.db-stat-completed .db-stat-icon {
  background: #DBEAFE !important;
  color: #1E40AF !important;
}
.db-stat-views .db-stat-icon {
  background: #ECFDF5 !important;
  color: #065F46 !important;
}
.db-stat-expired .db-stat-icon {
  background: #FEF3C7 !important;
  color: #92400E !important;
}

/* ─── PERFORMANCE CARDS ─── */
.db-perf-views-icon {
  background: #DBEAFE !important;
  color: #1E40AF !important;
}
.db-perf-contacts-icon {
  background: #ECFDF5 !important;
  color: #065F46 !important;
}
.db-perf-rate-icon {
  background: #FEF3C7 !important;
  color: #92400E !important;
}

/* ─── BOTTOM NAV: clean, premium ─── */
.ep12-bottom-nav,
.hp-bottom-nav {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 -1px 8px rgba(0,0,0,0.04) !important;
}

/* ─── APP BAR: minimal, premium ─── */
.hp-appbar {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* ─── PAGE BACKGROUND: clean light gray ─── */
.ep12-home,
.xos-app-layout,
.db-content,
body.xos-body {
  background: #F6F9FD !important;
}

/* ─── NOTIFICATION CARDS ─── */
.notification-card.unread {
  background: #EFF6FF !important;
  border-left: 3px solid #3B82F6 !important;
}

/* ─── DETAIL PAGE ─── */
.xos-detail-title {
  font-weight: 600 !important;
  color: #1F2937 !important;
}
.xos-detail-meta-box {
  background: #F9FAFB !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: none !important;
}
.xos-detail-meta-box strong {
  color: #6B7280 !important;
  font-weight: 500 !important;
}
.xos-detail-meta-box span {
  color: #1F2937 !important;
  font-weight: 500 !important;
}

/* ─── SEARCH/PROFILE FORMS ─── */
.xos-input,
.xos-select,
.wiz-input,
.account-form input,
.account-form select,
.account-form textarea {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
}
.xos-input:focus,
.xos-select:focus,
.wiz-input:focus,
.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.08) !important;
}

/* ─── EMPTY STATES ─── */
.ep12-live-empty-state {
  border: 1px dashed #D1D5DB !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
}

/* ─── PAGINATION ─── */
.pagination .current {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}

/* ─── CONTACT BUTTONS ─── */
.xos-contact-btn.phone {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}
.xos-contact-btn.zalo {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}

/* ─── WIZARD STEPS ─── */
.wizard-step.active {
  background: #3B82F6 !important;
}
.wizard-step.completed {
  color: #3B82F6 !important;
}
.wizard-step.completed .step-number {
  background: #3B82F6 !important;
}

/* ─── SECTION DIVIDERS ─── */
.form-section-divider span {
  color: #3B82F6 !important;
}

/* ─── DETAIL ROUTE CARD ─── */
.xos-detail-route-card {
  background: #F9FAFB !important;
  border-radius: 12px !important;
}


/* ═══════════════════════════════════════════════════════════════
     ACCESSIBILITY & TOUCH
     ═══════════════════════════════════════════════════════════════ */

/* Focus visible: thin blue ring */
:focus-visible {
  outline: 2px solid #3B82F6 !important;
  outline-offset: 2px !important;
}

/* Touch targets: minimum 44px */
button, a, [role="button"], .xos-btn, .ep12-live-btn, .ep12-search-btn {
  min-height: 44px !important;
  min-width: 44px !important;
}


/* ═══════════════════════════════════════════════════════════════
     PERFORMANCE: NO ANIMATION REGRESSION
     ═══════════════════════════════════════════════════════════════ */

/* Override Sprint 12.13.1's blanket 120ms transition on ALL elements */
*, *::before, *::after {
  transition-duration: unset !important;
  transition-timing-function: unset !important;
}

/* Restore targeted transitions only where needed */
.ep12-live-card,
.ep12-search-input,
.ep12-live-btn,
.ep12-search-btn,
.xos-btn {
  transition-duration: 140ms !important;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}


/* ═══════════════════════════════════════════════════════════════
     HORIZONTAL OVERFLOW PREVENTION
     ═══════════════════════════════════════════════════════════════ */

.ep12-home,
.xos-app-layout,
.xos-page-content,
.ep12-hero-search,
.ep12-search-fields {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

.ep12-search-field-origin,
.ep12-search-field-dest {
  min-width: 0 !important;
  overflow: hidden !important;
}


/* ═══════════════════════════════════════════════════════════════
     END SPRINT 12.13.2 — BETA READY
     ═══════════════════════════════════════════════════════════════ */