/* assets/css/app.css - Global design tokens and base styles (Maple Rides) */
:root {
  --mr-accent: #e52a1a;
  --mr-text: #111827;
  --mr-muted: #6b7280;
  --mr-bg: #ffffff;
  --mr-card: #ffffff;
  --mr-border: #e5e7eb;
  --mr-success: #16a34a;
  --mr-danger: #dc2626;
  --mr-warning: #d97706;

  --mr-radius-2xl: 16px;
  --mr-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --mr-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.08);
  --mr-space-1: 4px;
  --mr-space-2: 8px;
  --mr-space-3: 12px;
  --mr-space-4: 16px;
  --mr-space-5: 20px;
  --mr-space-6: 24px;
}

/* Typography */
.mr-h1 { font-size: 28px; font-weight: 700; color: var(--mr-text); }
.mr-h2 { font-size: 22px; font-weight: 700; color: var(--mr-text); }
.mr-subtle { color: var(--mr-muted); }

/* Layout helpers */
.mr-container { padding: var(--mr-space-5); }
.mr-stack > * + * { margin-top: var(--mr-space-3); }
.mr-inline > * + * { margin-left: var(--mr-space-3); }
/* New layout utilities */
.mr-row { display: flex; }
.mr-justify-between { justify-content: space-between; }
.mr-align-center { align-items: center; }
.mr-gap-2 { gap: var(--mr-space-2); }
.mr-half { width: 50%; }

/* Section header: compact title on left, controls on right */
.mr-section-header { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 var(--mr-space-3) 0; }

/* Alerts */
.mr-alert { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--mr-border); background: #fff; color: var(--mr-text); }
.mr-alert-success { border-color: #c7f9cc; background: #ecfdf5; color: var(--mr-success); }
.mr-alert-danger { border-color: #fecaca; background: #fef2f2; color: var(--mr-danger); margin: var(--mr-space-2) 0; }

/* Cards */
.mr-dashboard-card { background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-2xl); box-shadow: var(--mr-shadow-sm); padding: 16px; }
@media (min-width: 992px) {
  .mr-dashboard-card { padding: 25px; }
}
.mr-card-title { font-size: 20px; font-weight: 800; color: var(--mr-text); margin: 0 0 12px 0; }
/* Compact card title for inline headers */
.mr-card-title-sm { font-size: 16px; font-weight: 700; color: var(--mr-text); margin: 0; }
/* Card subtitle (smaller section heading inside cards) */
.mr-card-subtitle { font-size: 14px; font-weight: 700; color: var(--mr-text); margin: 8px 0; }

/* Stats grid for dashboard summaries */
.mr-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mr-space-4); }
@media (max-width: 480px) { .mr-stats-grid { grid-template-columns: 1fr; } }
.mr-stat { background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-2xl); padding: var(--mr-space-4); box-shadow: var(--mr-shadow-sm); }
.mr-stat-value { font-size: 20px; font-weight: 800; color: var(--mr-text); }
.mr-stat-label { color: var(--mr-muted); font-size: 12px; font-weight: 600; margin-top: 4px; }

/* Forms */
.mr-form-group { margin-bottom: 12px; }
.mr-form-label { display: block; font-weight: 600; color: var(--mr-text); margin-bottom: 6px; }
.mr-form-control { width: 100%; padding: 10px 12px; border: 1px solid var(--mr-border); border-radius: 12px; outline: none; font-size: 16px; background: #fff; }
.mr-form-control:focus { border-color: var(--mr-accent); box-shadow: 0 0 0 3px rgba(229, 42, 26, 0.15); }
.mr-checkbox-label, .mr-radio-label { display: inline-flex; align-items: center; gap: 8px; }
.mr-checkbox-input, .mr-radio-input { accent-color: var(--mr-accent); }
/* Stripe Elements wrapper to match inputs */
.mr-stripe-input { padding: 10px 12px; border: 1px solid var(--mr-border); border-radius: 12px; background: #fff; }
/* QA: mock card fields visual parity */
.mr-mock-card-fields { display: grid; grid-template-columns: 1fr; gap: var(--mr-space-3); }
.mr-mock-card-fields .mr-row { gap: var(--mr-space-3); }
.mr-mock-card-fields .mr-half { flex: 1; }
/* Helpers for stacked radio lists and spacing */
.mr-radio-list .mr-radio-label { display: block; margin-bottom: var(--mr-space-2); }
.mr-mt-2 { margin-top: var(--mr-space-2); }
/* Signature pad */
.mr-signature-canvas { border: 1px solid var(--mr-border); border-radius: 4px; display: block; }

/* Autocomplete dropdown */
.mr-input-relative { position: relative; }
.mr-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-top: none;
  border-radius: 0 0 var(--mr-radius-2xl) var(--mr-radius-2xl);
  max-height: 220px;
  margin-left: 0;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: var(--mr-shadow-sm);
}
.mr-dropdown-item {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--mr-border);
  color: var(--mr-text);
  background: #fff;
}
.mr-dropdown-item:hover { background: #f9fafb; }
.mr-dropdown-item:last-child { border-bottom: none; }

/* Buttons */
.mr-btn { appearance: none; border: none; cursor: pointer; border-radius: 12px; padding: 10px 14px; font-weight: 600; }
.mr-btn-lg { padding: 12px 18px; font-size: 16px; }
.mr-btn-primary { background: var(--mr-accent); color: #fff; }
.mr-btn-secondary { background: #f3f4f6; color: var(--mr-text); border: 1px solid var(--mr-border); }
.mr-btn-danger { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.mr-btn-success { background: var(--mr-success); color: #fff; }
.mr-btn-info { background: #3b82f6; color: #fff; }
.mr-btn-link { background: transparent; color: var(--mr-accent); padding: 0; }
.mr-btn-block {
  display: block;
  width: 100%;
}
/* Pill-shaped button utility */
.mr-btn-pill {
  border-radius: 999px;
}
/* Spacing when block buttons follow estimate boxes */
.mr-trip-estimates + .mr-btn-block {
  margin-top: 12px;
}
.mr-btn-outline { background: #fff; color: var(--mr-accent); border: 1px solid var(--mr-accent); }
/* Circular icon button (for minimal page headers) */
.mr-btn-icon { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
/* Small button utility */
.mr-btn-sm { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
/* Ensure primary stays Maple accent within dashboard cards (override themes) */
.mr-dashboard-card .mr-btn-primary { background: var(--mr-accent); color: #fff; }

/* Stripe forms fallback normalization within dashboard cards */
.mr-dashboard-card .snrb-payment-form h1,
.mr-dashboard-card .snrb-payment-form h2,
.mr-dashboard-card .snrb-payment-form h3,
.mr-dashboard-card .snrb-payment-form h4,
.mr-dashboard-card .snrb-payment-form h5,
.mr-dashboard-card .snrb-payment-form h6 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mr-text) !important;
  margin: 0 0 8px 0 !important;
}
.mr-dashboard-card .snrb-payment-form button[type="submit"]:not(.mr-btn) {
  background: var(--mr-accent) !important;
  color: #fff !important;
  border: 1px solid var(--mr-accent) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.mr-dashboard-card .snrb-payment-form button[type="submit"][disabled]:not(.mr-btn) { opacity: 0.7 !important; cursor: not-allowed !important; }
/* Ensure Maple small/pill styles win within payment form when using our .mr-btn classes */
.mr-dashboard-card .snrb-payment-form .mr-btn,
.snrb-payment-form .mr-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  border: none !important;
}
.mr-dashboard-card .snrb-payment-form .mr-btn.mr-btn-pill,
.snrb-payment-form .mr-btn.mr-btn-pill { border-radius: 999px !important; }
.snrb-payment-form .mr-btn-primary { background: var(--mr-accent) !important; color: #fff !important; border: 1px solid var(--mr-accent) !important; }

/* Stronger rule to defeat opinionated theme button sizes inside payment form */
.mr-dashboard-card .snrb-payment-form .mr-compact-card button.mr-btn,
.mr-dashboard-card .snrb-payment-form .mr-compact-card .mr-btn {
  padding: 6px 10px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 999px !important;
}

/* Compact card container for forms */
.mr-compact-card { background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-2xl); box-shadow: var(--mr-shadow-sm); padding: 14px; max-width: 420px; }
.mr-compact-card--flush { padding: 0; }
.mr-card-inner-header { padding: 14px; border-bottom: 1px solid var(--mr-border); }
.mr-card-inner-body { padding: 14px; }

/* Ride Offers: flatten inner cards within the offers container */
.mr-offers-plain .mr-compact-card,
.mr-offers-plain .mr-stat,
.mr-offers-plain .mr-card,
.mr-offers-plain .snrb-offer-card {
  background: transparent;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.mr-offers-plain .mr-ride-empty,
.mr-offers-plain .snrb-offers-empty {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--mr-muted);
}

/* SNRB Offers block (full-width, light bordered) */
.snrb-ride-offers {
  width: 100%;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius-2xl);
  background: var(--mr-card);
  padding: 14px;
}
.snrb-ride-offers .snrb-card-title { margin: 0 0 10px 0; }
.snrb-offers-list { margin: 0; padding: 0; }
.snrb-offer-row { display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--mr-border); }
.snrb-offer-row:first-child { border-top: 0; }
.snrb-offer-meta { flex: 1; }
.snrb-offer-line { color: var(--mr-text); }
.snrb-offer-actions { margin-left: 10px; }
.snrb-offers-empty { margin: 6px 0 0 0; padding: 0; }

/* Auth */
.mr-auth-container { padding: 16px; }
.mr-auth-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mr-page-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.mr-auth-header .mr-card-title, .mr-page-header .mr-card-title { margin: 0; }
.mr-auth-subtitle { color: var(--mr-muted); margin: 0 0 8px 0; }
.mr-auth-footer { margin: var(--mr-space-4) 0; text-align: center; }
.mr-auth-container .mr-form-control { margin-bottom: var(--mr-space-3); }
/* Limit auth cards to a normal container width similar to splash */
.mr-auth-container .mr-dashboard-card { width: 100%; max-width: 420px; margin: 0 auto; }

/* Splash */
.mr-splash-container { min-height: 70vh; display: flex; align-items: center; justify-content: center; background: var(--mr-bg); color: var(--mr-text); }
.mr-splash-content { width: 100%; max-width: 420px; padding: 24px; text-align: center; display: flex; flex-direction: column; align-items: center; min-height: max-content; }
.mr-splash-logo { margin-bottom: 8px; }
.mr-splash-logo-img { width: 107px; height: auto; display: block; }
.mr-splash-title { font-size: 28px; font-weight: 800; margin: 4px 0 6px 0; }
.mr-splash-subtitle { color: var(--mr-muted); margin: 0 0 24px 0; }
.mr-splash-actions { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mr-btn-login { background: #111827; color: #fff; }
.mr-btn-signup { background: var(--mr-accent); color: #fff; }

/* Navigation (top) */
.mr-main-nav { padding: 8px 12px; }
.mr-nav-bar { display: flex; align-items: center; gap: 8px; }
.mr-nav-links { display: inline-flex; gap: 8px; }
.mr-nav-actions { margin-left: auto; }
.mr-nav-btn { background: #fff; border: 1px solid var(--mr-border); border-radius: 12px; padding: 8px 12px; box-shadow: var(--mr-shadow-sm); }

/* Bottom tabs are styled in sn-ride-tabs.css (existing) */

/* Dashboard layout */
.mr-has-tabs { padding-bottom: 80px; background: var(--mr-bg); min-height: 100vh; }
.mr-dashboard-content { padding: var(--mr-space-5); min-height: calc(100vh - 160px); }
.mr-dashboard-card .mr-h2 { margin: 0 0 4px 0; }
/* Profile header: reduce line-height for the name under thumbnail only */
.mr-profile-header .mr-h2 { line-height: 1.2; }
.mr-header { padding: var(--mr-space-5); border-radius: var(--mr-radius-2xl); background: var(--mr-card); border: 1px solid var(--mr-border); box-shadow: var(--mr-shadow-sm); text-align: center; }
.mr-header--accent { background: linear-gradient(135deg, var(--mr-accent), #ff5a4c); color: #fff; }
.mr-header-title { margin: 0; font-size: 22px; font-weight: 800; }
.mr-header-subtitle { margin: 4px 0 0; opacity: 0.95; }
.mr-header--accent .mr-card-title,
.mr-header--accent .mr-header-title,
.mr-header--accent .mr-header-subtitle { color: #fff; }

/* Banners */
.mr-banner { padding: var(--mr-space-5); border-radius: var(--mr-radius-2xl); border: 1px solid var(--mr-border); margin: var(--mr-space-4) 0; }
.mr-banner-warning { background: #fff7ed; border-color: #fdba74; color: #92400e; }
.mr-banner-info { background: #eff6ff; border-color: #93c5fd; color: #1e3a8a; }
.mr-banner-success { background: #ecfdf5; border-color: #bbf7d0; color: var(--mr-success); }
.mr-banner-danger { background: #fef2f2; border-color: #fecaca; color: var(--mr-danger); }

/* Avatar & helpers */
.mr-text-center { text-align: center; }
.mr-avatar { width: 100px; height: 100px; border-radius: 50%; background: #f3f4f6; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--mr-space-3); font-size: 40px; color: #6b7280; }
.mr-avatar-sm { width: 70px; height: 70px; font-size: 28px; margin: 0; }
.mr-profile-rating { margin-top: 2px; }
.mr-driver-name { font-size: 18px; font-weight: 800; color: var(--mr-text); line-height: 1.2; }
.mr-status-badge {
  display: inline-block;
  padding: 0 6px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  border-radius: 999px;
  margin-left: 8px; /* spacing after name */
  vertical-align: middle;
  border: 1px solid transparent;
}
.mr-status-badge--positive {
  background: #ecfdf5;
  color: var(--mr-success);
  border-color: #bbf7d0;
}
.mr-status-badge--negative {
  background: #fef2f2;
  color: var(--mr-danger);
  border-color: #fecaca;
}
.mr-status-badge--neutral {
  background: #f3f4f6;
  color: var(--mr-muted);
  border-color: var(--mr-border);
}
.mr-status-badge.is-online {
  background: #ecfdf5; /* soft green */
  color: var(--mr-success);
  border-color: #bbf7d0;
}
.mr-status-badge.is-offline {
  background: #f3f4f6; /* soft gray */
  color: #6b7280;
  border-color: #e5e7eb;
}
.mr-badge-plate { margin-left: 8px; }
.is-driver-home .mr-badge-plate { margin-left: 0; }
.mr-readonly-field { margin: 0; padding: 10px 12px; background: #f9fafb; border: 1px solid var(--mr-border); border-radius: 12px; color: var(--mr-text); }

/* Buttons (additional) */
.mr-btn-danger { background: var(--mr-danger); color: #fff; }

/* Utility helpers */
.mr-text-muted { color: var(--mr-muted); }
.mr-text-accent { color: var(--mr-accent); }
.mr-text-warning { color: var(--mr-warning); }
.mr-pad-lg { padding: 24px; }
.mr-mt-1 { margin-top: 10px; }
.mr-mb-2 { margin-bottom: var(--mr-space-2); }
.mr-mb-3 { margin-bottom: 12px; }
.mr-text-lg { font-size: 18px; }
.mr-fw-bold { font-weight: 700; }
/* Small text utility for subtle inline details */
.mr-text-sm { font-size: 13px; }
/* Larger bottom margin utility for extra spacing between blocks */
.mr-mb-4 { margin-bottom: var(--mr-space-4); }

/* Actions row: split 50/50, stack on mobile */
.mr-actions-50 { display: flex; gap: 12px; }
.mr-actions-50 > .mr-btn { flex: 1 1 50%; }
@media (max-width: 600px) {
  .mr-actions-50 { flex-direction: column; }
  .mr-actions-50 > .mr-btn { width: 100%; flex: 1 1 auto; }
}

/* Interactive rating stars */
.snrb-rating { display: inline-flex; gap: 6px; line-height: 1; user-select: none; }
.snrb-star { font-size: 24px; cursor: pointer; color: #d1d5db; transition: color 0.15s ease; }
.snrb-star-filled { color: #f59e0b; /* amber-500 */ }
.snrb-star-empty { color: #d1d5db; }
.snrb-star:focus { outline: none; }

/* Modals */
.mr-modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.mr-modal-content { background: var(--mr-card); border: 1px solid var(--mr-border); border-radius: var(--mr-radius-2xl); box-shadow: var(--mr-shadow-md); width: 92%; max-width: 420px; overflow: hidden; }
.mr-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--mr-space-5); border-bottom: 1px solid var(--mr-border); }
.mr-modal-header .mr-card-title { margin: 0; }
.mr-modal-body { padding: var(--mr-space-5); }
.mr-modal-footer { padding: var(--mr-space-5); border-top: 1px solid var(--mr-border); display: flex; justify-content: flex-end; gap: var(--mr-space-3); }
.mr-modal-close { background: transparent; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--mr-text); }

/* Actions split (Back left, Primary right) */
.mr-actions.mr-actions-split { justify-content: space-between; }

/* Disabled buttons: visibly muted and not clickable */
.mr-btn:disabled,
.mr-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* Star ratings with half support (used on driver profile) */
.mr-stars { display: inline-flex; gap: 2px; line-height: 1; vertical-align: middle; }
.mr-star { position: relative; display: inline-block; font-size: 18px; line-height: 1; color: #ddd; }
.mr-star.full { color: #f5a623; }
.mr-star.empty { color: #ddd; }
.mr-star.half { color: #ddd; }
.mr-star.half::before { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #f5a623; }

/* Input counter (bottom-right small text) */
.mr-input-counter { position: relative; }
.mr-input-counter .mr-counter { position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: var(--mr-text-muted, #6b7280); pointer-events: none; }
.mr-form-control.mr-has-counter { padding-right: 50px; }

/* Utilities for rider dashboard lists and filters */
.mr-filter-group { display: flex; gap: 10px; flex-wrap: wrap; }
.mr-scroll-400 { max-height: 400px; overflow-y: auto; }
.mr-ride-item { padding: 15px; border-bottom: 1px solid var(--mr-border); cursor: pointer; transition: background-color 0.2s; }
.mr-ride-row { display: flex; justify-content: space-between; align-items: center; }
.mr-ride-row-left { display: flex; align-items: center; gap: 10px; }
.mr-status-dot { width: 12px; height: 12px; border-radius: 50%; }
.mr-status-text { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.mr-ride-meta { margin-top: 10px; font-size: 14px; color: var(--mr-text); }
.mr-ride-submeta { margin-top: 6px; font-size: 14px; color: var(--mr-text); }
.mr-ride-submeta .mr-ride-fare { font-weight: 700; }
.mr-ride-fare .mr-badge { font-size: 13px; font-weight: 700; }
.mr-badge-fare {
  background: rgba(217, 119, 6, 0.12); /* soft warning */
  color: var(--mr-warning);
  border-color: rgba(217, 119, 6, 0.35);
}
.mr-ride-amount { font-weight: 800; text-align: right; margin-top: 6px; }
.mr-emoji-xl { font-size: 48px; margin-bottom: 10px; }

/* Badges */
.mr-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 999px;
  background: #f3f4f6;
  color: var(--mr-text);
  border: 1px solid var(--mr-border);
  vertical-align: middle;
}
.mr-badge-plate {
  margin-left: var(--mr-space-2);
  background: #111827;
  color: #fff;
  border-color: #111827;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* List section title (e.g., grouped dates in history) */
.mr-list-section-title { margin: 10px 0 6px; font-weight: 600; }

/* Status colors for history items */
.mr-status--completed { color: var(--mr-success); }
.mr-status--cancelled { color: var(--mr-danger); }
.mr-status--requested { color: var(--mr-warning); }
.mr-status--assigned { color: #0891b2; }
.mr-status--in_progress { color: #1d4ed8; }
.mr-status--default { color: var(--mr-muted); }
.mr-status-dot--completed { background: var(--mr-success); }
.mr-status-dot--cancelled { background: var(--mr-danger); }
.mr-status-dot--requested { background: var(--mr-warning); }
.mr-status-dot--assigned { background: #0891b2; }
.mr-status-dot--in_progress { background: #1d4ed8; }
.mr-status-dot--default { background: var(--mr-muted); }

/* OTP block: full width stack */
.mr-otp-block { width: 100%; display: block; margin-top: 12px; }

/* Auth actions */
.mr-auth-actions { display: grid; gap: 12px; }

/* Role selection */
.mr-role-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .mr-role-actions { grid-template-columns: 1fr; } }
.mr-role-btn { background: #fff; border: 1px solid var(--mr-border); border-radius: 12px; padding: 14px 14px; box-shadow: var(--mr-shadow-sm); width: 100%; }
.mr-role-btn-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
.mr-role-icon { font-size: 1.25rem; margin: 0; color: var(--mr-accent); }
.mr-role-title { margin: 0; font-weight: 600; color: var(--mr-text); font-size: 16px; line-height: 1.2; }
.mr-role-desc { display: none; }

/* Booking: trip estimates */
.mr-trip-estimates {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--mr-space-4);
  margin: var(--mr-space-4) 0;
}
.mr-estimate {
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius-2xl);
  padding: var(--mr-space-4);
  box-shadow: var(--mr-shadow-sm);
  text-align: center;
}
.mr-estimate-label { color: var(--mr-muted); font-weight: 600; margin-bottom: 6px; }
.mr-estimate-value { color: var(--mr-text); font-size: 18px; font-weight: 800; }
@media (max-width: 480px) { .mr-trip-estimates { grid-template-columns: 1fr; } }

/* Booking: map preview */
.mr-map-preview {
  height: 320px;
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius-2xl);
  overflow: hidden;
  box-shadow: var(--mr-shadow-sm);
  margin: var(--mr-space-4) 0;
}

/* Pending Screen (driver) */
.mr-pending-card { max-width: 520px; margin: 0 auto; }
.mr-pending-card .mr-card-title { font-size: 24px; }
.mr-pending-card .mr-card-subtitle { font-size: 16px; }
.mr-pending-card .mr-text-muted { font-size: 14px; }

/* Accent bullets for pending steps */
.mr-pending-list { list-style: none !important; padding-left: 0 !important; margin: 12px 0 20px; }
.mr-pending-list li { list-style: none !important; position: relative; padding-left: 22px; margin: 8px 0; line-height: 1.6; }
.mr-pending-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mr-accent);
  font-size: 20px;
  line-height: 1.2;
}

/* Reusable checklist with green checks */
.mr-checklist { list-style: none !important; padding-left: 0 !important; margin: 12px 0 20px; }
.mr-checklist li { list-style: none !important; position: relative; padding-left: 26px; margin: 10px 0; line-height: 1.6; }
.mr-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--mr-success); font-weight: 800; }

/* Numbered steps with accent circular badges, badge right before text */
/* Scoped to .mr-steps-vertical to avoid conflict with registration.css .mr-steps */
.mr-steps-vertical { list-style: none !important; padding-left: 0 !important; margin: 12px 0 20px; counter-reset: mrstep; text-align: center; }
.mr-steps-vertical li {
  list-style: none !important;
  display: block; /* no flex; center text */
  line-height: 1.6;
  padding: 0 0 12px 0; /* space for divider */
  margin: 0 0 12px 0;
  border-bottom: 1px solid #e5e7eb; /* soft gray divider */
}
.mr-steps-vertical li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.mr-steps-vertical li::before {
  counter-increment: mrstep;
  content: counter(mrstep);
  display: inline-flex; /* inline so it sits right before text */
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  font-weight: 600; /* accent 600 weight */
  color: var(--mr-accent);
  background: rgba(229, 42, 26, 0.12); /* light accent background */
  line-height: 1;
  margin-right: 8px; /* space between badge and text */
  vertical-align: middle; /* align nicely with text */
}

/* Toggle switch */
.mr-switch { display: inline-flex; align-items: center; gap: 8px; user-select: none; }
.mr-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.mr-switch-toggle {
  position: relative; width: 44px; height: 26px; border-radius: 999px;
  background: #e5e7eb; border: 1px solid var(--mr-border);
  transition: background-color 0.2s, border-color 0.2s;
  display: inline-block;
}
.mr-switch-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgba(17,24,39,0.15);
  transition: transform 0.2s;
}
.mr-switch-input:checked + .mr-switch-toggle { background: var(--mr-accent); border-color: var(--mr-accent); }
.mr-switch-input:checked + .mr-switch-toggle::after { transform: translateX(18px); }
.mr-switch-text { font-weight: 600; color: var(--mr-text); }
.mr-switch-subtle { color: var(--mr-muted); font-weight: 600; }
.mr-switch:has(.mr-switch-input:focus-visible) .mr-switch-toggle { box-shadow: 0 0 0 3px rgba(229,42,26,0.2); }

/* Map pointer (driver/pickup/drop) with optional pulsing
.mr-map-pointer { position: relative; width: 18px; height: 18px; }
.mr-pointer-core { position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; background: var(--mr-accent); border-radius: 999px; box-shadow: 0 0 0 2px #fff; }
.mr-pointer-ring { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid var(--mr-accent); border-radius: 999px; opacity: 0.6; }
.mr-pointer-pulse { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 999px; background: rgba(229,42,26,0.15); transform: scale(1); opacity: 0; }
.mr-map-pointer.is-pulsing .mr-pointer-pulse { animation: mrPulse 1.6s ease-out infinite; }

@keyframes mrPulse {
  0% { transform: scale(0.9); opacity: 0.35; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(0.9); opacity: 0; }
} */

/* Utility to remove bottom margin for compact inline headers */
.mr-mb-0 { margin-bottom: 0 !important; }

/* Pagination (shared by rider/driver history) */
.mr-pagination {
  display: flex;
  align-items: center;
  justify-content: center; /* center horizontally */
  gap: 10px; /* spacing between prev/info/next */
  margin: 16px 0 16px; /* top & bottom spacing from surrounding card/content */
}
.mr-pagination-info {
  color: var(--mr-muted);
  font-weight: 600;
}

/* Booking page layout */
.mr-booking-layout {
  display: flex;
  flex-direction: column; /* mobile-first: stack */
  gap: 16px;
}
.mr-booking-left, .mr-booking-right {
  width: 100%;
}
.mr-booking-map {
  width: 100%;
  height: 320px; /* mobile default */
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 992px) {
  .mr-booking-layout {
    flex-direction: row; /* two columns on desktop */
    align-items: stretch;
  }
  .mr-booking-left, .mr-booking-right {
    width: 50%;
  }
  .mr-booking-right {
    padding-left: 16px; /* gutter between columns */
  }
  .mr-booking-map {
    height: 500px; /* requested desktop height */
    min-height: 500px;
  }
}

/* Payout Settings Styles */
.mr-payout-status {
  margin: var(--mr-space-4) 0;
}

.mr-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mr-space-3);
}

@media (min-width: 768px) {
  .mr-status-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mr-status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--mr-space-3);
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid var(--mr-border);
}

.mr-status-label {
  font-weight: 500;
  color: var(--mr-text);
}

.mr-status-badge {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.mr-status-badge--success {
  background: #ecfdf5;
  color: var(--mr-success);
  border: 1px solid #c7f9cc;
}

.mr-status-badge--warning {
  background: #fef3c7;
  color: var(--mr-warning);
  border: 1px solid #fde68a;
}

.mr-payout-info {
  margin: var(--mr-space-4) 0;
  padding: var(--mr-space-4);
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid var(--mr-border);
}

.mr-info-list {
  list-style: none;
  padding: 0;
  margin: var(--mr-space-3) 0 0 0;
}

.mr-info-list li {
  padding: var(--mr-space-2) 0;
  color: var(--mr-text);
  line-height: 1.5;
}

.mr-alert--success {
  background: #ecfdf5;
  border-color: #c7f9cc;
  color: var(--mr-success);
}

.mr-alert--warning {
  background: #fef3c7;
  border-color: #fde68a;
  color: var(--mr-warning);
}

.mr-alert--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.mr-mt-2 {
  margin-top: var(--mr-space-2);
}