/* ===== Theme tokens (light default) ===== */
:root {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --text: #111827;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --input-bg: #ffffff;
  --header-bg: rgba(255, 255, 255, 0.95);
  --map-opacity: 1;
  --map-filter: none;
  --footer-bg: #ffffff;
  --footer-text: #333333;
  --footer-heading: #1a1a1a;
  --footer-link-hover: #0d2b5c;
  --footer-divider: rgba(0, 0, 0, 0.1);
  --footer-border: #e5e7eb;
  --footer-muted: #6b7280;
  --footer-legal: #4b5563;
  --help-hover-green: #f0fdf4;
  --help-hover-blue: #eff6ff;
  --pkg-fade: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
}

/* ===== Dark theme ===== */
html.dark {
  color-scheme: dark;
  --bg: #0b1220;
  --surface: #111827;
  --surface-2: #1f2937;
  --text: #f3f4f6;
  --text-muted: #9ca3af;
  --border: #1e293b;
  --input-bg: #0f172a;
  --header-bg: rgba(15, 23, 42, 0.92);
  --map-opacity: 0.14;
  --map-filter: invert(1) brightness(0.85);
  --footer-bg: #0f172a;
  --footer-text: #d1d5db;
  --footer-heading: #f3f4f6;
  --footer-link-hover: #60a5fa;
  --footer-divider: rgba(255, 255, 255, 0.08);
  --footer-border: #1e293b;
  --footer-muted: #9ca3af;
  --footer-legal: #9ca3af;
  --help-hover-green: rgba(34, 197, 94, 0.12);
  --help-hover-blue: rgba(59, 130, 246, 0.12);
  --pkg-fade: linear-gradient(to bottom, rgba(17, 24, 39, 0) 0%, rgba(17, 24, 39, 0.95) 100%);
  --light-gray: #1f2937;
  --border-gray: #1e293b;
  --text-dark: #f3f4f6;
  --text-gray: #9ca3af;
}

/* ===== Delivery timeline (restored original layout) =====
   Layout is Tailwind (w-16 h-16 rounded-full absolute).
   Only override paint: solid disc fill so the rail never shows through. */
.timeline-container {
  position: relative;
}

.timeline-container .timeline-line {
  z-index: 0;
}

.timeline-container .timeline-event {
  position: relative;
  z-index: 1;
}

.timeline-container .timeline-icon {
  z-index: 2 !important;
  /* Opaque disc — do not use translucent bg-*-50 */
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Dark: solid fill slightly lighter than card so the circle reads as a disc */
html.dark .timeline-container .timeline-icon {
  background-color: #1e293b !important;
  background-image: none !important;
  box-shadow: 0 0 0 3px #111827; /* ring matching card surface hides rail under edge */
}

html.dark .timeline-container .timeline-line {
  background-color: #3b82f6 !important;
  background-image: none !important;
  opacity: 0.85;
}

html.dark .timeline-container .timeline-icon .text-blue-600 { color: #60a5fa !important; }
html.dark .timeline-container .timeline-icon .text-green-600 { color: #4ade80 !important; }
html.dark .timeline-container .timeline-icon .text-red-600 { color: #f87171 !important; }
html.dark .timeline-container .timeline-icon .text-yellow-600 { color: #facc15 !important; }
html.dark .timeline-container .timeline-icon .text-purple-600 { color: #c084fc !important; }
html.dark .timeline-container .timeline-icon .text-indigo-600 { color: #818cf8 !important; }

/* Amount due block on paynow */
.amount-due-panel {
  background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid #bfdbfe;
}

html.dark .amount-due-panel {
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.35) 0%, rgba(30, 64, 175, 0.28) 100%);
  border-color: #1e3a5f;
}

html.dark .amount-due-panel h3,
html.dark .amount-due-panel .amount-due-value {
  color: #f3f4f6 !important;
}

html.dark .amount-due-panel p,
html.dark .amount-due-panel .amount-due-currency {
  color: #94a3b8 !important;
}

/* Paynow “We Accept” — keep brand logos readable on dark surfaces */
html.dark .we-accept-card .trust-badge {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* Base page chrome */
html.dark body {
  background-color: var(--bg) !important;
  color: var(--text);
}

html.dark body::before {
  opacity: var(--map-opacity) !important;
  filter: var(--map-filter);
}

/* Package items fade */
html.dark .pkg-items-fade-edge {
  background: var(--pkg-fade);
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle:hover {
  color: #2563eb;
  border-color: #93c5fd;
  background: var(--surface-2, #f9fafb);
}

.theme-toggle:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

html.dark .theme-toggle {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}

html.dark .theme-toggle:hover {
  color: #93c5fa;
  border-color: #60a5fa;
  background: var(--surface-2);
}

.theme-toggle .theme-icon-sun {
  display: none;
}

.theme-toggle .theme-icon-moon {
  display: inline-block;
}

html.dark .theme-toggle .theme-icon-sun {
  display: inline-block;
}

html.dark .theme-toggle .theme-icon-moon {
  display: none;
}

/* ----- Utility remaps (high-frequency Tailwind surfaces) ----- */
html.dark .bg-white {
  background-color: var(--surface) !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: var(--surface-2) !important;
}

/* Paynow / full-page light backgrounds */
html.dark body.bg-gradient-to-br,
html.dark body.from-gray-50,
html.dark body.bg-gray-50 {
  background-image: none !important;
  background-color: var(--bg) !important;
}

html.dark .text-gray-900 {
  color: #f3f4f6 !important;
}

html.dark .text-gray-800 {
  color: #e5e7eb !important;
}

html.dark .text-gray-700 {
  color: #d1d5db !important;
}

html.dark .text-gray-600 {
  color: #9ca3af !important;
}

html.dark .text-gray-500 {
  color: #9ca3af !important;
}

html.dark .text-gray-400 {
  color: #6b7280 !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
  border-color: var(--border) !important;
}

/* Soften gray borders only (do not override border-blue-* / brand colors) */
html.dark .border-b.border-gray-200,
html.dark .border-t.border-gray-200,
html.dark .border-b.border-gray-100,
html.dark .border-t.border-gray-100 {
  border-color: var(--border) !important;
}

/* Header sticky bar */
html.dark header.bg-white,
html.dark header {
  background-color: var(--header-bg) !important;
  border-color: var(--border) !important;
}

html.dark #headerInput,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark input[type="number"],
html.dark input[type="password"],
html.dark select,
html.dark textarea {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html.dark #headerInput::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6b7280 !important;
}

/* Light hovers that wash out in dark */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: var(--surface-2) !important;
}

html.dark .hover\:bg-green-50:hover {
  background-color: var(--help-hover-green) !important;
}

html.dark .hover\:bg-blue-50:hover {
  background-color: var(--help-hover-blue) !important;
}

/* Soft tinted panels */
html.dark .bg-blue-50,
html.dark .bg-emerald-50,
html.dark .from-blue-50,
html.dark .to-emerald-50 {
  background-color: rgba(30, 58, 138, 0.25) !important;
}

html.dark .bg-red-50 {
  background-color: rgba(127, 29, 29, 0.35) !important;
}

html.dark .bg-yellow-50 {
  background-color: rgba(113, 63, 18, 0.35) !important;
}

html.dark .text-red-800,
html.dark .text-red-700 {
  color: #fecaca !important;
}

html.dark .border-red-200 {
  border-color: rgba(248, 113, 113, 0.4) !important;
}

/* Progress track */
html.dark .bg-gray-200 {
  background-color: #1e293b !important;
}

/* Footer token application */
html.dark footer {
  --footer-bg: #0f172a;
  --footer-text: #d1d5db;
  --footer-heading: #f3f4f6;
  --footer-link-hover: #60a5fa;
  --footer-divider: rgba(255, 255, 255, 0.1);
  background-color: var(--footer-bg) !important;
  color: var(--footer-text) !important;
  border-top-color: var(--footer-border) !important;
}

html.dark .footer-illustration {
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.95), #1f2937, #1f2937) !important;
}

html.dark .footer-section:not(.contact-section) {
  border-bottom-color: var(--footer-border) !important;
}

html.dark .footer-bottom {
  border-top-color: var(--footer-border) !important;
  color: var(--footer-muted) !important;
}

html.dark .footer-legal a {
  color: var(--footer-legal) !important;
}

html.dark .footer-section.active .footer-heading {
  color: #93c5fd !important;
}

html.dark .footer-description {
  color: var(--footer-muted) !important;
}

/* Help menu dark polish */
html.dark #helpMenuContent {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

html.dark #helpMenuContent .bg-gray-50 {
  background-color: var(--surface-2) !important;
}

/* Shadow soft-down on dark cards */
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
  --tw-shadow-color: rgba(0, 0, 0, 0.45);
}

/* Logo subtle invert when dark if logo is dark-colored */
html.dark header img[alt="FM Logistic"],
html.dark .footer-logo {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Divide / ring helpers sometimes used */
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border);
}

/* Main content inputs on track form */
html.dark .main-content input {
  background-color: var(--input-bg);
  color: var(--text);
}