/**
 * SPRINT 12.13.1 — APPLE HUMAN INTERFACE REFINEMENT
 * Design Philosophy Edition
 * ============================================================
 *
 * This stylesheet applies 10 Apple/Dieter Rams design principles
 * to the entire XEGHEP presentation layer.
 *
 * PRINCIPLES:
 *   1. Typography First (only 300/400/500/600 weights)
 *   2. One Hero Per Card
 *   3. Remove Colors (60% reduction, pastel only)
 *   4. Remove Borders (50% reduction, whitespace separation)
 *   5. Shadow Philosophy (3-5% opacity, 18-28px blur)
 *   6. Whitespace (strict 8pt grid)
 *   7. Button Philosophy (38px height, no gradients)
 *   8. Card Simplification
 *   9. Native Feeling (120-160ms, ease-out)
 *  10. Steve Jobs Filter (remove if not helping decisions)
 *
 * Architecture Lock: Presentation Layer Only.
 * No Business Logic, Database, Repository, Controller changes.
 *
 * @package XOS\Presentation
 * @version 12.13.1
 * @since  Sprint 12.13.1
 */

/* ═══════════════════════════════════════════════════════════════
     SECTION 0 — TOKEN OVERRIDES (Foundation)
     ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Principle 1: Typography First — only 300/400/500/600 ── */
  --weight-regular:   300;
  --weight-medium:    400;
  --weight-semibold:  500;
  --weight-bold:      600;
  --weight-extrabold: 600;
  --weight-black:     600;

  /* Route: 20px 600 */
  --typescale-route:       1.25rem;
  --typescale-route-weight: 600;

  /* Price: 18px 500 */
  --typescale-price:       1.125rem;
  --typescale-price-weight: 500;

  /* Information: 14px 400 */
  --typescale-info:        0.875rem;
  --typescale-info-weight: 400;

  /* Username: 13px 400 */
  --typescale-username:        0.8125rem;
  --typescale-username-weight: 400;

  /* Metadata: 12px 400 */
  --typescale-meta:        0.75rem;
  --typescale-meta-weight: 400;

  /* ── Principle 5: Shadow Philosophy — almost invisible ── */
  --elevation-0:  none;
  --elevation-1:  0 1px 2px  rgba(0,0,0,0.02), 0 1px 3px  rgba(0,0,0,0.02);
  --elevation-2:  0 2px 8px  rgba(0,0,0,0.03), 0 1px 4px  rgba(0,0,0,0.02);
  --elevation-3:  0 4px 16px rgba(0,0,0,0.04), 0 2px 6px  rgba(0,0,0,0.02);
  --elevation-4:  0 6px 24px rgba(0,0,0,0.04), 0 3px 8px  rgba(0,0,0,0.02);
  --elevation-5:  0 8px 28px rgba(0,0,0,0.05), 0 4px 10px rgba(0,0,0,0.02);
  --elevation-6:  0 12px 36px rgba(0,0,0,0.05), 0 6px 14px rgba(0,0,0,0.02);

  /* Legacy shadow overrides */
  --shadow-sm: var(--elevation-2);
  --shadow-md: var(--elevation-3);
  --shadow-lg: var(--elevation-4);

  /* ── Principle 6: 8pt Grid Whitespace ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;

  /* ── Principle 7: Button Philosophy — 38px, clean ── */
  --btn-height:     38px;
  --btn-height-sm:  38px;
  --btn-radius:     10px;
  --btn-font-weight: 500;

  /* ── Principle 9: Native Feeling — 120-160ms ── */
  --motion-duration-fast:   120ms;
  --motion-duration-normal: 140ms;
  --motion-duration-slow:   160ms;
  --motion-duration-slower: 160ms;
  --motion-duration-slowest: 160ms;

  /* ── Color: Soft pastel blue accent ── */
  --md-primary:              #3B82F6;
  --md-primary-hover:        #2563EB;
  --md-primary-active:       #1D4ED8;
  --md-primary-container:    #EFF6FF;
  --md-primary-on:           #FFFFFF;
  --md-primary-on-container: #1E3A5F;

  /* Legacy tokens */
  --primary-color:   var(--md-primary);
  --primary-hover:   var(--md-primary-hover);
  --secondary-color: var(--md-primary);
  --secondary-hover: var(--md-primary-hover);

  /* Reduced card radius */
  --card-radius: 14px;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 1 — TYPOGRAPHY FIRST (Principle 1)
     Reduce visual weight by 35%. Only weights 300/400/500/600.
     ═══════════════════════════════════════════════════════════════ */

/* Force all text to use only 300/400/500/600 weights */
body, p, span, div, a, li, td, th, label, input, textarea, select, button,
h1, h2, h3, h4, h5, h6, strong, b, em, i, small, .xos-btn, .ep12-live-btn {
  font-weight: 400;
}

/* Logo / Brand — only place using 600 */
.hp-appbar-brand,
.ep12-section-title,
.ep12-live-title {
  font-weight: 600 !important;
}

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

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

/* Information — 14px 400 */
.ep12-live-info-line,
.ep12-live-schedule-item,
.ep12-live-vehicle-row,
.ep12-live-driver-name,
.ep12-mp-detail-row {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
}

/* Username — 13px 400 */
.ep12-live-driver-name,
.db-header-name,
.xos-detail-publisher-name strong {
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
}

/* Metadata — 12px 400 */
.ep12-live-time,
.ep12-live-rating-value,
.ep12-live-rating-count,
.ep12-live-schedule-item,
.ep12-trust-signal,
.ep12-mp-detail-row,
.xos-detail-meta-label,
.xos-detail-meta-value,
.db-stat-label,
.db-timeline-meta,
.db-timeline-date {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}

/* Remove heavy font weights globally */
strong, b, [style*="font-weight: 700"],
[style*="font-weight:700"],
[style*="font-weight: 800"],
[style*="font-weight:800"],
[style*="font-weight: 900"],
[style*="font-weight:900"] {
  font-weight: 500 !important;
}

/* Section headers — 500 */
.ep12-section-title,
.db-section-title,
.hp-section-title,
.xos-detail-publisher-name strong {
  font-weight: 500 !important;
}

/* Buttons — 500 */
.xos-btn,
.ep12-live-btn,
.ep12-search-btn,
.hp-hero-btn,
.btn-next,
.btn-publish,
.btn-prev,
.btn-save,
.xos-retry-btn {
  font-weight: 500 !important;
}

/* Card titles — 500, not 600+ */
.ep12-live-card .ep12-live-route {
  font-weight: 600 !important;
}

/* Badges — 400 */
.ep12-live-listing-badge,
.ep12-hero-badge,
.ep12-smart-badge,
.ep12-trip-status-badge,
.xos-badge-listing-type,
.xos-badge-status,
.listing-type-badge,
.status-badge {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 2 — ONE HERO PER CARD (Principle 2)
     Priority: 1 Route → 2 Price → 3 CTA
     Everything else becomes secondary.
     ═══════════════════════════════════════════════════════════════ */

/* Diminish badges — they should whisper, not shout */
.ep12-live-listing-badge {
  background: rgba(0,0,0,0.04) !important;
  color: #6B7280 !important;
  font-size: 0.625rem !important;
  font-weight: 400 !important;
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 6px !important;
}

.ep12-live-listing-badge svg {
  display: none !important;
}

/* Remove LIVE dot and label from inside cards (keep only in section header) */
.ep12-live-top-bar {
  display: none !important;
}

/* Remove time badge from cards */
.ep12-live-time {
  display: none !important;
}

/* Remove hero badge system entirely — too much noise */
.ep12-hero-badge,
.ep12-smart-badge,
.ep12-smart-badges {
  display: none !important;
}

/* Remove trip status badges (active is already hidden, hide rest) */
.ep12-trip-status-badge {
  display: none !important;
}

/* Remove trust signals row — secondary metadata */
.ep12-trust-signals {
  display: none !important;
}

/* Simplify schedule row */
.ep12-live-schedule {
  font-size: 0.75rem !important;
  color: #9CA3AF !important;
  gap: 4px !important;
  margin-top: 0 !important;
}

.ep12-live-schedule-item {
  font-size: 0.75rem !important;
  color: #9CA3AF !important;
  font-weight: 400 !important;
}

.ep12-live-schedule-item svg {
  display: none !important;
}

.ep12-live-duration {
  color: #9CA3AF !important;
  font-weight: 400 !important;
}

/* Simplify vehicle row */
.ep12-live-vehicle-row {
  color: #9CA3AF !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important;
  margin-top: 0 !important;
}

/* Driver row: simplify, reduce prominence */
.ep12-live-driver {
  margin-top: 4px !important;
  gap: 8px !important;
}

.ep12-driver-avatar-img,
.ep12-driver-avatar-default {
  width: 28px !important;
  height: 28px !important;
  border: none !important;
  box-shadow: none !important;
}

.ep12-live-driver-name {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: #9CA3AF !important;
}

/* Remove rating from cards (secondary noise) */
.ep12-live-driver-rating {
  display: none !important;
}

/* Remove verified badge from cards */
.ep12-live-verified {
  display: none !important;
}

/* Remove marketplace detail rows from cards */
.ep12-mp-detail-row {
  display: none !important;
}

/* Price — second hero, soft blue */
.ep12-live-price {
  margin: 2px 0 0 !important;
}

.ep12-live-price-value {
  color: #3B82F6 !important;
  font-weight: 500 !important;
  font-size: 1.125rem !important;
}

/* Info line — simplify */
.ep12-live-info-line {
  color: #9CA3AF !important;
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  margin: 1px 0 0 !important;
}

/* Remove colored info line variants */
.ep12-live-info-passenger,
.ep12-live-info-ride,
.ep12-live-info-cargo,
.ep12-live-info-cargo-offer,
.ep12-live-info-default {
  color: #9CA3AF !important;
}

.ep12-live-capacity {
  color: #9CA3AF !important;
  font-weight: 400 !important;
}

.ep12-live-detail-sep {
  color: #E5E7EB !important;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 3 — REMOVE COLORS (Principle 3)
     Reduce colorful UI by 60%. Only white, soft gray, blue accent.
     Everything else becomes pastel/muted.
     ═══════════════════════════════════════════════════════════════ */

/* Remove gradient backgrounds — replace with solid soft gray */
.ep12-search-btn-primary,
.ep12-live-btn-primary,
.ep12-map-save-btn,
.ep12-live-empty-btn,
.ep12-nav-create-circle {
  background: #3B82F6 !important;
  box-shadow: none !important;
}

/* Remove hover gradient states */
.ep12-search-btn-primary:hover,
.ep12-live-btn-primary:hover,
.ep12-map-save-btn:hover,
.ep12-live-empty-btn:hover {
  background: #2563EB !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Remove active gradient states */
.ep12-search-btn-primary:active,
.ep12-live-btn-primary:active,
.ep12-map-save-btn:active {
  background: #1D4ED8 !important;
  transform: scale(0.98) !important;
}

/* Hero section: simplify gradient to soft gray */
.hp-hero,
.db-welcome {
  background: #F3F6FA !important;
  box-shadow: var(--elevation-1) !important;
}

.hp-hero-title,
.db-welcome-name {
  color: #1F2937 !important;
  text-shadow: none !important;
}

.hp-hero-sub,
.db-welcome-hello {
  color: #6B7280 !important;
}

/* Hide hero decorative circles */
.hp-hero-bg,
.hp-hero-circle,
.hp-hero-circle-1,
.hp-hero-circle-2,
.hp-hero-circle-3,
.db-welcome-orb,
.db-welcome-orb-1,
.db-welcome-orb-2,
.db-welcome-orb-3 {
  display: none !important;
}

/* Hero buttons: solid white / solid primary */
.hp-hero-btn-primary {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  box-shadow: none !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;
  border-color: #D1D5DB !important;
}

/* Hero stats: muted */
.hp-hero-stats,
.db-welcome-stats-row {
  background: rgba(0,0,0,0.02) !important;
  backdrop-filter: none !important;
}

.hp-hero-stat-value,
.db-welcome-stat-value {
  color: #1F2937 !important;
  font-weight: 500 !important;
}

.hp-hero-stat-label,
.db-welcome-stat-label {
  color: #9CA3AF !important;
}

/* Welcome card: remove gradient */
.welcome-card {
  background: #F3F6FA !important;
  box-shadow: var(--elevation-1) !important;
}

/* Badge colors → soft muted pastel */
.xos-badge-listing-type,
.xos-badge-type-passenger_request,
.xos-badge-type-cargo_request,
.xos-badge-type-ride_offer,
.xos-badge-type-cargo_offer {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

.xos-badge-status,
.xos-badge-status-active,
.xos-badge-status-completed,
.xos-badge-status-expired,
.xos-badge-status-draft {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

.listing-type-badge.type-passenger_request,
.listing-type-badge.type-cargo_request,
.listing-type-badge.type-ride_offer,
.listing-type-badge.type-cargo_offer {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

.status-badge.status-active,
.status-badge.status-completed,
.status-badge.status-expired,
.status-badge.status-draft {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

/* Verification badges → muted */
.verification-badge.status-active { background: #F3F4F6 !important; color: #6B7280 !important; }
.verification-badge.status-unverified { background: #F3F4F6 !important; color: #9CA3AF !important; }
.verification-badge.status-rejected { background: #F3F4F6 !important; color: #9CA3AF !important; }

/* Membership badges → muted */
.membership-badge {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
  font-weight: 400 !important;
}

/* Dashboard stat card icon backgrounds → muted */
.db-stat-active .db-stat-icon,
.db-stat-completed .db-stat-icon,
.db-stat-views .db-stat-icon,
.db-stat-expired .db-stat-icon {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

/* Performance card icon backgrounds → muted */
.db-perf-views-icon,
.db-perf-contacts-icon,
.db-perf-rate-icon {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

/* Timeline status badges → muted */
.db-timeline-status.status-active,
.db-timeline-status.status-draft,
.db-timeline-status.status-expired,
.db-timeline-status.status-completed {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

/* Notification unread → soft */
.notification-card.unread {
  background: #F9FAFB !important;
  border-left: 3px solid #3B82F6 !important;
}

/* Welcome verified badge → muted */
.db-welcome-verified.status-active { background: #9CA3AF !important; }
.db-welcome-verified.status-unverified { background: #D1D5DB !important; }
.db-welcome-verified.status-rejected { background: #F3F4F6 !important; }

/* Listing type colors → muted pastel */
.db-tag-membership,
.db-tag-verify.status-active,
.db-tag-verify.status-unverified,
.db-tag-verify.status-rejected {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

/* Sky blue outlines → soft gray */
.ep12-live-btn-outline {
  background: #FFFFFF !important;
  color: #3B82F6 !important;
  border: 1px solid #E5E7EB !important;
}

.ep12-live-btn-outline:hover {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
  color: #2563EB !important;
}

/* Remove colored vehicle info text */
.ep12-live-info-passenger { color: #9CA3AF !important; }
.ep12-live-info-ride { color: #9CA3AF !important; }
.ep12-live-info-cargo { color: #9CA3AF !important; }
.ep12-live-info-cargo-offer { color: #9CA3AF !important; }
.ep12-live-info-default { color: #9CA3AF !important; }


/* ═══════════════════════════════════════════════════════════════
     SECTION 4 — REMOVE BORDERS (Principle 4)
     Reduce border usage by 50%. Cards separate via whitespace.
     ═══════════════════════════════════════════════════════════════ */

/* Remove card borders — whitespace separates */
.ep12-live-card,
.ep12-hero-search,
.ep12-live-empty-state,
.ep12-quick-action,
.ep12-skeleton-card {
  border: none !important;
}

/* Remove action bar border-top */
.ep12-live-actions {
  border-top: none !important;
  padding-top: 0 !important;
}

/* Remove intent card borders */
.ep12-intent-card {
  border: none !important;
  background: #F9FAFB !important;
  border-radius: 12px !important;
}

.ep12-intent-card:hover {
  background: #F3F4F6 !important;
}

.ep12-intent-card.active {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}

/* Remove bottom nav border-top */
.ep12-bottom-nav {
  border-top: none !important;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.03) !important;
}

/* Remove search card borders */
.xos-search-card {
  border: none !important;
  box-shadow: var(--elevation-1) !important;
}

/* Remove dashboard section borders */
.dashboard-section {
  border: none !important;
  box-shadow: var(--elevation-1) !important;
}

/* Remove account section borders */
.account-section {
  border: none !important;
  box-shadow: var(--elevation-1) !important;
}

/* Remove listing card borders */
.listing-card {
  border: none !important;
  box-shadow: var(--elevation-1) !important;
}

/* Remove notification card borders */
.notification-card {
  border: none !important;
  box-shadow: var(--elevation-1) !important;
}

/* Remove input borders → softer */
.ep12-search-input,
.ep12-search-autocomplete-wrap input,
.xos-input,
.xos-select,
.wiz-input,
.account-form input,
.account-form select,
.account-form textarea {
  border: 1px solid #E5E7EB !important;
  box-shadow: none !important;
}

.ep12-search-input:focus,
.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;
}

/* Remove section header bottom borders */
.dashboard-section h2,
.account-section h2,
.wizard-form h3 {
  border-bottom: none !important;
  padding-bottom: 8px !important;
}

/* Remove table borders → subtle */
.recent-listings-table th,
.recent-listings-table td {
  border-bottom: 1px solid #F3F4F6 !important;
}

/* Remove filter sheet borders */
.xos-filter-sheet {
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06) !important;
}

/* Remove detail page borders */
.xos-detail-main,
.xos-contact-panel {
  border: none !important;
  box-shadow: var(--elevation-1) !important;
}

/* Remove wizard form borders */
.wizard-form,
.wizard-steps {
  border: none !important;
  box-shadow: var(--elevation-1) !important;
}

/* Remove stat card borders */
.statistic-card {
  border: none !important;
  box-shadow: var(--elevation-1) !important;
}

/* Remove preview box borders */
.preview-box {
  border: 1px solid #F3F4F6 !important;
}

/* Remove bottom sheet borders */
.xos-bottom-sheet-header {
  border-bottom: 1px solid #F3F4F6 !important;
}

/* Remove section divider borders */
.form-section-divider {
  border-top: 1px solid #F3F4F6 !important;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 5 — SHADOW PHILOSOPHY (Principle 5)
     Almost invisible. Opacity 3-5%, blur 18-28px.
     ═══════════════════════════════════════════════════════════════ */

.ep12-live-card,
.ep12-hero-search,
.ep12-quick-action,
.ep12-live-empty-state,
.ep12-skeleton-card,
.xos-card,
.hp-quick-action,
.hp-service-card,
.db-stat-card,
.db-action-card,
.db-perf-card,
.db-timeline,
.listing-card,
.notification-card,
.wizard-form,
.wizard-steps,
.dashboard-section,
.account-section,
.xos-detail-main,
.xos-contact-panel,
.statistic-card,
.xos-search-card,
.xos-card-compact {
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 5px rgba(0,0,0,0.02) !important;
}

/* Hero card: slightly elevated but still soft */
.ep12-live-card--hero {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.02) !important;
  transform: none !important;
  border: none !important;
}

/* Remove hero card pseudo-element gradient border */
.ep12-live-card--hero::before {
  display: none !important;
}

/* FAB: soft shadow */
.xos-fab,
.hp-bottom-nav-fab {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* App bar / bottom nav: minimal shadow */
.hp-appbar,
.db-header {
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.ep12-bottom-nav,
.hp-bottom-nav {
  box-shadow: 0 -1px 4px rgba(0,0,0,0.03) !important;
}

/* Search sticky */
.hp-search {
  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
}

/* Autocomplete dropdown: soft */
.ep12-autocomplete-dropdown,
.ep12-map-ac-dropdown {
  box-shadow: 0 6px 24px rgba(0,0,0,0.06) !important;
}

/* Remove shadow on hero buttons */
.hp-hero-btn-primary,
.hp-hero-btn-secondary {
  box-shadow: none !important;
}

/* Remove shadow on live buttons */
.ep12-live-btn-primary {
  box-shadow: none !important;
}

/* Remove shadow on search primary button */
.ep12-search-btn-primary {
  box-shadow: none !important;
}

/* Remove shadow on listing type card hover */
.listing-type-card:hover {
  box-shadow: none !important;
}

/* Remove shadow on action button hover */
.action-button:hover {
  box-shadow: none !important;
}

/* Remove hero card hover elevation boost */
.ep12-live-card--hero:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.02) !important;
  transform: none !important;
}

/* Remove nav create circle shadow */
.ep12-nav-create-circle {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 6 — WHITESPACE (Principle 6)
     Strict 8pt grid. Allowed: 4, 8, 12, 16, 24, 32.
     ═══════════════════════════════════════════════════════════════ */

/* Card body: clean breathing room */
.ep12-live-body {
  padding: 12px 12px 4px !important;
  gap: 4px !important;
}

/* Card actions: compact but clear */
.ep12-live-actions {
  padding: 8px 12px 12px !important;
  gap: 8px !important;
}

/* Card feed: consistent 12px gap */
.ep12-live-feed {
  gap: 12px !important;
}

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

/* Section: 12px vertical spacing */
.ep12-section {
  padding: 12px 0 !important;
}

/* Section header: 8px bottom */
.ep12-section-header {
  margin-bottom: 8px !important;
}

/* LIVE header: 8px bottom */
.ep12-live-header {
  margin-bottom: 8px !important;
}

/* Quick actions: consistent gap */
.ep12-quick-actions {
  gap: 8px !important;
  padding: 8px !important;
}

/* Search sections: 12px vertical */
.ep12-search-section {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 7 — BUTTON PHILOSOPHY (Principle 7)
     38px height. No gradients. Clean.
     ═══════════════════════════════════════════════════════════════ */

/* All buttons: 38px height */
.xos-btn,
.ep12-live-btn,
.ep12-search-btn,
.ep12-map-save-btn,
.ep12-live-empty-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,
.xos-detail-action-btn {
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 0.875rem !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}

/* Primary button */
.xos-btn-filled,
.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 {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
}

/* Secondary button */
.xos-btn-outlined,
.ep12-live-btn-outline,
.btn-prev,
.action-button {
  background: #FFFFFF !important;
  color: #3B82F6 !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: none !important;
}

/* Button hover states — none, just opacity */
.xos-btn-filled:hover,
.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 {
  background: #2563EB !important;
  transform: none !important;
  box-shadow: none !important;
}

.xos-btn-outlined:hover,
.ep12-live-btn-outline:hover,
.btn-prev:hover,
.action-button:hover {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Button active: subtle scale */
.xos-btn:active,
.ep12-live-btn:active,
.ep12-search-btn:active,
.btn-next:active,
.btn-prev:active,
.btn-publish:active,
.btn-save:active {
  transform: scale(0.97) !important;
}

/* Hero buttons: consistent */
.hp-hero-btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 24px !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}

/* FAB: keep size but remove blue shadow */
.xos-fab,
.hp-bottom-nav-fab {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Remove button gradient backgrounds — already handled above */

/* Dashboard action buttons */
.action-button:hover {
  background: #F9FAFB !important;
  color: #3B82F6 !important;
  border-color: #D1D5DB !important;
  transform: none !important;
  box-shadow: none !important;
}

.action-primary {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
  border: none !important;
}

.action-primary:hover {
  background: #2563EB !important;
}

/* Listing action buttons */
.listing-action-btn:hover {
  background: #F9FAFB !important;
  color: #3B82F6 !important;
  border-color: #D1D5DB !important;
}

.listing-action-btn.delete-btn:hover {
  background: #FEF2F2 !important;
  color: #EF4444 !important;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 8 — CARD SIMPLIFICATION (Principle 8)
     Image → Route → Info → Price → Publisher → Actions
     No separators. No extra containers. No decorative lines.
     ═══════════════════════════════════════════════════════════════ */

/* Card body: single vertical flow */
.ep12-live-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Action bar: inline with body, no separator */
.ep12-live-actions {
  border-top: none !important;
  padding-top: 8px !important;
}

/* Remove separator dots from info line */
.ep12-live-detail-sep {
  color: transparent !important;
}

/* Card media: cleaner, no gradient */
.ep12-live-media {
  background: #F3F4F6 !important;
  height: 96px !important;
}

/* Remove vehicle illustration filter effects */
.ep12-vehicle-illustration {
  filter: none !important;
}

/* Remove card hover scale on vehicle illustration */
.ep12-live-card:hover .ep12-vehicle-illustration {
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 9 — NATIVE FEELING (Principle 9)
     120-160ms, ease-out. No bounce. No exaggerated transitions.
     ═══════════════════════════════════════════════════════════════ */

/* All transitions: 120-160ms ease-out */
*, *::before, *::after {
  transition-duration: 120ms !important;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}

/* Allow slower transitions for sheets/overlays */
.xos-search-full,
.xos-filter-sheet,
.xos-bottom-sheet,
.ep12-map-overlay {
  transition-duration: 160ms !important;
}

/* Remove bounce/hover lift effects */
.ep12-live-card:hover,
.ep12-quick-action:hover,
.db-stat-card:hover,
.db-action-card:hover,
.db-perf-card:hover {
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 5px rgba(0,0,0,0.02) !important;
}

/* Remove hero card hover lift */
.ep12-live-card--hero:hover {
  transform: none !important;
}

/* Remove scale on hover for any card */
.ep12-live-card:hover,
.listing-type-card:hover,
.statistic-card:hover,
.action-button:hover {
  transform: none !important;
}

/* Card enter animation: just fade, no slide */
.ep12-live-card {
  animation: xg-fade-in 120ms ease-out both !important;
}

@keyframes xg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Remove stagger delays */
.ep12-live-card:nth-child(1),
.ep12-live-card:nth-child(2),
.ep12-live-card:nth-child(3),
.ep12-live-card:nth-child(4),
.ep12-live-card:nth-child(5) {
  animation-delay: 0ms !important;
}

/* Remove card entering animation */
.ep12-live-card.entering {
  animation: xg-fade-in 120ms ease-out both !important;
}

@keyframes xg-live-card-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Remove pulse animations */
.ep12-live-dot-group .ep12-live-dot,
.ep12-trust-signal--online::before {
  animation: none !important;
}

@keyframes xg-pulse {
  0%, 100% { opacity: 1; }
}

/* Remove hero badge pulse */
@keyframes xg-badge-pulse {
  0%, 100% { box-shadow: none; }
}

/* Remove quick action hover transforms */
.ep12-quick-action:hover {
  transform: none !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:hover .ep12-quick-action-icon {
  transform: none !important;
}

/* Remove driver avatar hover scale */
.ep12-live-card:hover .ep12-driver-avatar-img {
  transform: none !important;
}

/* Remove map overlay bounce animation */
@keyframes ep12-map-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Remove autocomplete scale animation */
@keyframes ep12-ac-slide-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Remove FAB hover lift */
@media (hover: hover) {
  .xos-fab:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    transform: none !important;
  }
}

/* Hero icon animation removal */
.hp-hero-circle-1,
.hp-hero-circle-2,
.hp-hero-circle-3 {
  animation: none !important;
}

/* Welcome orb animation removal */
.db-welcome-orb-1,
.db-welcome-orb-2,
.db-welcome-orb-3 {
  animation: none !important;
}

/* Scroll reveal: just fade */
.ep12-scroll-reveal {
  transition: opacity 120ms ease-out !important;
}

.ep12-scroll-reveal.ep12-revealed {
  opacity: 1 !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 10 — STEVE JOBS FILTER (Principle 10)
     "Does this help users make a decision?" If NO → Delete.
     ═══════════════════════════════════════════════════════════════ */

/* Remove decorative elements */
.hp-hero-icon {
  display: none !important;
}

/* Remove hero stat divider */
.hp-hero-stat-divider {
  display: none !important;
}

/* Remove marketplace hide elements */
.ep12-mp-hide {
  display: none !important;
}

/* Remove search tabs (already hidden by homepage.css but reaffirm) */
.ep12-search-tabs,
.ep12-search-tab,
.ep12-search-tab-icon,
.ep12-search-tab-label {
  display: none !important;
}

/* Remove welcome avatar ring gradient */
.db-welcome-avatar-ring {
  background: none !important;
  padding: 0 !important;
}

.db-welcome-avatar-ring img {
  border: none !important;
}

/* Remove welcome company logo decorative background */
.db-welcome-company-logo .logo-placeholder {
  background: #F3F4F6 !important;
}

/* Remove welcome verified badge - it's a trust signal but secondary */
.db-welcome-verified {
  display: none !important;
}

/* Remove dashboard stat hover effects */
@media (min-width: 1024px) {
  .db-stat-card:hover,
  .db-action-card:hover,
  .db-perf-card:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 5px rgba(0,0,0,0.02) !important;
    transform: none !important;
  }
}

/* Remove listing image hover zoom */
.hp-card-media img:hover {
  transform: none !important;
}

/* Remove intent card hover transform */
.ep12-intent-card:active {
  transform: scale(0.98) !important;
}

/* Remove listing type card hover effects */
.listing-type-card:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #F9FAFB !important;
  border-color: #3B82F6 !important;
}

/* Remove statistic card hover */
.statistic-card:hover {
  transform: none !important;
}

/* Remove notification card transition */
.notification-card {
  transition: none !important;
}

/* Remove contact button hover background changes */
.xos-contact-btn.phone:hover,
.xos-contact-btn.zalo:hover {
  opacity: 0.9 !important;
}

/* Remove ripple effects */
[data-ripple]::after {
  display: none !important;
}

/* Remove skeleton shimmer animations (keep skeleton, remove animation for calm) */
.xos-skeleton::after,
.xos-skeleton-text::after,
.xos-skeleton-text-sm::after,
.xos-skeleton-text-lg::after,
.xos-skeleton-card::after,
.xos-skeleton-avatar::after,
.xos-skeleton-list-line::after,
.xos-skeleton-list-avatar::after {
  animation: none !important;
  display: none !important;
}

/* Remove shimmer keyframe distractions */
@keyframes xg-shimmer {
  0%, 100% { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════
     SECTION 11 — ADDITIONAL CLEANUP
     Removing redundant styles, obsolete patterns
     ═══════════════════════════════════════════════════════════════ */

/* Simplify search bar */
.ep12-search-input {
  background: #F9FAFB !important;
  border-color: #E5E7EB !important;
  border-radius: 10px !important;
}

.ep12-search-input:focus {
  background: #FFFFFF !important;
  border-color: #3B82F6 !important;
}

/* Simplify hero search card */
.ep12-hero-search {
  background: #FFFFFF !important;
  border-radius: 14px !important;
  border: none !important;
}

/* Simplify page background */
.ep12-home,
.xos-app-layout,
.db-content,
body.xos-body {
  background: #F8FAFC !important;
}

/* Simplify welcome card */
.db-welcome {
  background: #F3F6FA !important;
  border-radius: 14px !important;
}

/* Clean up detail title */
.xos-detail-title {
  font-weight: 500 !important;
  color: #1F2937 !important;
}

/* Clean up detail meta boxes */
.xos-detail-meta-box {
  border: none !important;
  box-shadow: none !important;
  background: #F9FAFB !important;
}

.xos-detail-meta-box strong,
.xos-detail-meta-box span {
  font-weight: 400 !important;
  color: #6B7280 !important;
}

/* Clean up alert boxes */
.xos-alert,
.xos-alert-success,
.xos-alert-danger {
  border-left-width: 3px !important;
  background: #F9FAFB !important;
  color: #6B7280 !important;
}

.xos-alert-success {
  border-left-color: #3B82F6 !important;
}

.xos-alert-danger {
  border-left-color: #EF4444 !important;
}

/* Simplify account form messages */
.account-message.success,
.account-message.error {
  border-left-width: 3px !important;
  background: #F9FAFB !important;
  color: #6B7280 !important;
}

.account-message.success {
  border-left-color: #3B82F6 !important;
}

.account-message.error {
  border-left-color: #EF4444 !important;
}

/* Clean up verification badge */
.xos-badge-verified {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

/* Simplify contact panel */
.xos-contact-panel h3 {
  border-bottom: none !important;
}

/* Remove heavy detail route card background */
.xos-detail-route-card {
  background: #F9FAFB !important;
}

/* Clean up bottom contact bar */
.xos-detail-bottom-contact-bar {
  box-shadow: 0 -1px 4px rgba(0,0,0,0.03) !important;
  border-top: 1px solid #F3F4F6 !important;
}

/* Simplify search page */
.xos-search-full {
  background: #F8FAFC !important;
}

/* Simplify search top bar */
.xos-search-top {
  border-bottom: 1px solid #F3F4F6 !important;
}

/* Clean up filter sheet */
.xos-filter-sheet,
.xos-bottom-sheet {
  border-radius: 16px 16px 0 0 !important;
}

/* Simplify listing type cards border */
.listing-type-card {
  border: 1px solid #E5E7EB !important;
}

.listing-type-card.selected {
  border-color: #3B82F6 !important;
  background: #EFF6FF !important;
  box-shadow: none !important;
}

/* Clean up component card borders */
.xos-card-outlined {
  border: none !important;
}

.xos-card-compact {
  border: none !important;
}

/* Simplify quick action cards at homepage */
.ep12-quick-action {
  background: #FFFFFF !important;
  border-radius: 12px !important;
}

/* Reduce bottom nav FAB to simpler appearance */
.hp-bottom-nav-fab {
  background: #3B82F6 !important;
}

/* Simplify notification dot */
.hp-notif-dot,
.db-badge-dot {
  background: #3B82F6 !important;
}

/* Clean up empty state */
.ep12-live-empty-state {
  border: none !important;
}

/* Simplify pagination */
.pagination a,
.pagination span {
  border: 1px solid #F3F4F6 !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

.pagination .current {
  background: #3B82F6 !important;
  border-color: #3B82F6 !important;
  color: #FFFFFF !important;
}

/* Remove quick action skeleton heavy appearance */
.hp-quick-action-skeleton,
.hp-service-card-skeleton {
  background: #F9FAFB !important;
  border-radius: 12px !important;
}

/* Remove colorful search button map variant */
.ep12-search-btn-map {
  background: #FFFFFF !important;
  color: #3B82F6 !important;
  border: 1px solid #E5E7EB !important;
}

.ep12-search-btn-map:hover {
  background: #F9FAFB !important;
  border-color: #D1D5DB !important;
}

/* Clean up vehicle gallery */
.vehicle-gallery-item {
  border: 1px solid #F3F4F6 !important;
  box-shadow: none !important;
}

.vehicle-gallery-item.featured {
  box-shadow: 0 0 0 2px #3B82F6 !important;
}

.vehicle-gallery-featured-badge {
  background: #3B82F6 !important;
  font-weight: 400 !important;
}

.vehicle-gallery-item-actions button {
  border: 1px solid #F3F4F6 !important;
}

.vehicle-gallery-empty {
  border: 1px dashed #E5E7EB !important;
  background: #F9FAFB !important;
}

/* ═══════════════════════════════════════════════════════════════
     END SPRINT 12.13.1 REFINEMENT
     ═══════════════════════════════════════════════════════════════ */