/* ─────────────────────────────────────────────────────────────────────
   GIV'ER REDESIGN PREVIEW
   Activated by html[data-redesign="day"] or html[data-redesign="night"].
   Scoped so it has zero effect unless the attribute is set.
   Preserves .bolt-ambient (8-bit cars/trucks/birds) — never overrides it.
   ───────────────────────────────────────────────────────────────────── */

/* ── Night palette (dark) ──
   Contrast targets (on #0c1a24 bg, WCAG):
     --rd-text  #ffffff  → 18.7:1  AAA
     --rd-body  #dae6ee  → 14.5:1  AAA
     --rd-muted #9db2c0  → 9.7:1   AAA  (was #7a92a3 8.1:1 — ok but borderline for small)
     --rd-dim   #8099a9  → 7.2:1   AA   (replaces invisible 0.14 white)
*/
html[data-redesign="night"] {
  --rd-bg:         #0c1a24;
  --rd-bg-elev1:   #132a3a;
  --rd-bg-elev2:   #1a3547;
  --rd-panel:      #091620;
  --rd-text:       #ffffff;
  --rd-body:       #dae6ee;
  --rd-muted:      #9db2c0;
  --rd-dim:        #8099a9;
  --rd-border:     rgba(255,255,255,0.10);
  --rd-border-2:   rgba(255,255,255,0.18);
  --rd-accent:     #00e5c8;
  --rd-accent-ink: #0c1a24;
  --rd-accent-dim: rgba(0,229,200,0.15);
  --rd-yellow:     #e6c800;
  --rd-yellow-ink: #0c1a24;
  --rd-red:        #ff7e7e;
  --rd-green:      #4ddd8a;
  --rd-shadow:     0 8px 24px rgba(0,0,0,0.45);
}

/* ── Day palette (light) ──
   Contrast targets (on #f4f7fa bg):
     --rd-text  #0c1a24 → 15.4:1  AAA
     --rd-body  #2d4154 → 9.8:1   AAA
     --rd-muted #506777 → 5.8:1   AA
     --rd-dim   #6b8092 → 4.1:1   AA (for non-essential hints only)
*/
html[data-redesign="day"] {
  --rd-bg:         #f4f7fa;
  --rd-bg-elev1:   #ffffff;
  --rd-bg-elev2:   #edf2f6;
  --rd-panel:      #e6ecf2;
  --rd-text:       #0c1a24;
  --rd-body:       #2d4154;
  --rd-muted:      #506777;
  --rd-dim:        #6b8092;
  --rd-border:     rgba(12,26,36,0.10);
  --rd-border-2:   rgba(12,26,36,0.18);
  --rd-accent:     #007d70;
  --rd-accent-ink: #ffffff;
  --rd-accent-dim: rgba(0,125,112,0.13);
  --rd-yellow:     #a68900;
  --rd-yellow-ink: #ffffff;
  --rd-red:        #c23030;
  --rd-green:      #1e8a4a;
  --rd-shadow:     0 6px 18px rgba(12,26,36,0.09);
}

/* ── Remap app tokens so legacy styles follow redesign palette ── */
html[data-redesign] {
  --bg:       var(--rd-bg);
  --surface:  var(--rd-bg-elev1);
  --surface2: var(--rd-bg-elev2);
  --border:   var(--rd-border);
  --accent:   var(--rd-accent);
  --white:    var(--rd-text);
  --body:     var(--rd-body);
  --muted:    var(--rd-muted);
  --dim:      var(--rd-dim);
  --green:    var(--rd-green);
  --red:      var(--rd-red);
  --black:    #0c1a24;
}

/* ── Typography: Poppins throughout when active ──
   Rendering hints + slight tracking make Poppins read cleanly at small sizes.
*/
html[data-redesign] body,
html[data-redesign] button,
html[data-redesign] input,
html[data-redesign] textarea,
html[data-redesign] select {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html[data-redesign] body {
  background: var(--rd-bg);
  color: var(--rd-body);
  letter-spacing: 0;
  line-height: 1.5;
  font-weight: 500;     /* base body weight up from 400 — Poppins reads heavier */
}

/* Paragraph/span defaults inherit body color (--rd-body), not pure white, to avoid
   glare on dark; important headlines are pure white via h1-h4. */
html[data-redesign] h1, html[data-redesign] h2,
html[data-redesign] h3, html[data-redesign] h4 {
  color: var(--rd-text);
}

/* Small text (≤12px) gets a touch more tracking + weight 500 for clarity in Poppins */
html[data-redesign] small,
html[data-redesign] .small-text,
html[data-redesign] [class*="txt-muted"] { letter-spacing: 0.15px; }

html[data-redesign] h1,
html[data-redesign] h2,
html[data-redesign] h3,
html[data-redesign] h4 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--rd-text);
}

/* ── Cards / panels ── */
html[data-redesign] .card,
html[data-redesign] .card-sm {
  background: var(--rd-bg-elev1);
  border: 1px solid var(--rd-border);
  border-radius: 16px;
  box-shadow: var(--rd-shadow);
}

/* ── Buttons ── */
html[data-redesign] .btn {
  border-radius: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-family: inherit;
  border: none;
  transition: transform 0.1s, opacity 0.15s, background 0.15s;
}
html[data-redesign] .btn-primary,
html[data-redesign] .btn-accept {
  background: var(--rd-accent);
  color: var(--rd-accent-ink);
}
html[data-redesign] .btn-primary:hover,
html[data-redesign] .btn-accept:hover { opacity: 0.92; }

html[data-redesign] .btn-secondary {
  background: transparent;
  color: var(--rd-body);
  border: 1px solid var(--rd-border-2);
}
html[data-redesign] .btn-danger {
  background: var(--rd-red);
  color: #fff;
}

/* ── Inputs ── */
html[data-redesign] input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
html[data-redesign] textarea,
html[data-redesign] select {
  background: var(--rd-bg-elev1);
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  color: var(--rd-text);
  font-size: 16px;
  font-family: inherit;
  padding: 14px;
}
html[data-redesign] input:focus,
html[data-redesign] textarea:focus,
html[data-redesign] select:focus {
  border-color: var(--rd-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--rd-accent-dim);
}
html[data-redesign] input::placeholder,
html[data-redesign] textarea::placeholder { color: var(--rd-muted); }

/* ── Tabs / pill toggles ── */
html[data-redesign] .tabs,
html[data-redesign] .pill-toggle {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
html[data-redesign] .tab,
html[data-redesign] .pill-toggle-opt {
  border-radius: 9px;
  padding: 10px;
  font-weight: 600;
  color: var(--rd-muted);
  background: transparent;
  border: none;
  transition: background 0.15s, color 0.15s;
}
html[data-redesign] .tab.active,
html[data-redesign] .tab:focus,
html[data-redesign] .pill-toggle-opt.active {
  background: var(--rd-accent);
  color: var(--rd-accent-ink);
  font-weight: 700;
}

/* ── Labels (uppercase muted style used in mockup) ── */
html[data-redesign] .label,
html[data-redesign] label.input-label {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: var(--rd-muted);
  font-weight: 700;
}

/* ── Fare / summary box (teal glow) ── */
html[data-redesign] .fare-box,
html[data-redesign] #fare-display,
html[data-redesign] .fare-display {
  background: linear-gradient(135deg, rgba(0,229,200,0.14), rgba(0,229,200,0.04));
  border: 1px solid rgba(0,229,200,0.32);
  border-radius: 18px;
}
html[data-redesign="day"] .fare-box,
html[data-redesign="day"] #fare-display,
html[data-redesign="day"] .fare-display {
  background: linear-gradient(135deg, rgba(0,157,140,0.12), rgba(0,157,140,0.03));
  border-color: rgba(0,157,140,0.34);
}

/* ── Bottom nav ── */
html[data-redesign] .bottom-nav {
  background: color-mix(in srgb, var(--rd-bg) 92%, transparent);
  border-top: 1px solid var(--rd-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-redesign] .nav-item { color: var(--rd-muted); font-weight: 600; }
html[data-redesign] .nav-item.active { color: var(--rd-accent); }

/* ── Chat bubbles ── */
html[data-redesign] .bubble.mine,
html[data-redesign] .msg.mine,
html[data-redesign] .chat-mine {
  background: var(--rd-accent);
  color: var(--rd-accent-ink);
  border-bottom-right-radius: 4px;
  font-weight: 600;
}
html[data-redesign] .bubble.theirs,
html[data-redesign] .msg.theirs,
html[data-redesign] .chat-theirs {
  background: var(--rd-bg-elev1);
  color: var(--rd-text);
  border: 1px solid var(--rd-border);
  border-bottom-left-radius: 4px;
}

/* ── Job cards (driver side) ── */
html[data-redesign] .job-card {
  background: var(--rd-bg-elev1);
  border: 1px solid var(--rd-border);
  border-radius: 14px;
}
html[data-redesign] .job-card.selected,
html[data-redesign] .job-card.active {
  border-color: var(--rd-accent);
  box-shadow: 0 0 0 1px var(--rd-accent), 0 0 24px var(--rd-accent-dim);
  background: linear-gradient(135deg, var(--rd-accent-dim), var(--rd-bg-elev1));
}

/* ── Avatars: gradient styles like mockup ── */
html[data-redesign] .avatar.teal,
html[data-redesign] .avatar-teal {
  background: linear-gradient(135deg, #00e5c8, #00b899);
  color: #0c1a24;
  font-weight: 800;
}
html[data-redesign] .avatar.yellow,
html[data-redesign] .avatar-yellow {
  background: linear-gradient(135deg, #ffe033, #c4a800);
  color: #0c1a24;
  font-weight: 800;
}

/* ── Day-specific contrast tweaks ── */
html[data-redesign="day"] {
  background: var(--rd-bg);
}
html[data-redesign="day"] body {
  background: var(--rd-bg);
}
html[data-redesign="day"] .btn-primary:hover { opacity: 0.92; }
html[data-redesign="day"] .bottom-nav {
  background: color-mix(in srgb, #ffffff 92%, transparent);
}

/* ── Force-correct logo for redesign mode (override time-of-day data-theme) ── */
html[data-redesign="night"] .logo-day  { display: none !important; }
html[data-redesign="night"] .logo-night { display: inline-block !important; }
html[data-redesign="day"]   .logo-night { display: none !important; }
html[data-redesign="day"]   .logo-day   { display: inline-block !important; }

/* ── Scroll-fade on service tabs: match redesign background, not system theme ── */
html[data-redesign="night"] .tab-scroll-fade {
  background: linear-gradient(to right, transparent, rgba(12,26,36,0.92)) !important;
}
html[data-redesign="day"] .tab-scroll-fade {
  background: linear-gradient(to right, transparent, rgba(244,247,250,0.95)) !important;
}

/* ── Waiting panel: classic vs beacon swap ──
   In redesign mode the outer #waiting-panel loses its card/breathe chrome
   so the beacon heading floats freely and only the posted-card is framed.
*/
.waiting-beacon { display: none; }
html[data-redesign] .waiting-classic { display: none; }
html[data-redesign] .waiting-beacon { display: block; }
html[data-redesign] #waiting-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  overflow: visible !important;
  padding: 0 14px !important;
  margin: 0 !important;
}

/* ── Beacon header: free-floating above the posted card ── */
html[data-redesign] .rd-beacon-header {
  text-align: center;
  padding: 16px 12px 20px;
}
html[data-redesign] .rd-cancel-row {
  text-align: center;
  margin-top: 24px;
  padding-bottom: 8px;
}
html[data-redesign] .rd-cancel-row .btn {
  width: auto;
  padding: 12px 40px;
}

/* ── Breathing green outline, on the posted card specifically ── */
@keyframes rdBreatheGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77,221,138,0); }
  50%      { box-shadow: 0 0 24px 4px rgba(77,221,138,0.22); }
}
html[data-redesign] .rd-breathe-green {
  animation: rdBreatheGreen 2.2s ease-in-out infinite;
  border: 2px solid var(--rd-green) !important;
}

/* ── Beacon pulse + content ── */
@keyframes rdPulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  50%  { transform: scale(1.4); opacity: 0.2; }
  100% { transform: scale(1.8); opacity: 0;   }
}
html[data-redesign] .rd-pulser {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
html[data-redesign] .rd-pulser::before,
html[data-redesign] .rd-pulser::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(0,229,200,0.25);
  animation: rdPulse 2s ease-out infinite;
}
html[data-redesign] .rd-pulser::after { animation-delay: 1s; }
html[data-redesign="day"] .rd-pulser::before,
html[data-redesign="day"] .rd-pulser::after {
  background: rgba(0,157,140,0.22);
}
html[data-redesign] .rd-pulser-core {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--rd-accent);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 8px 24px rgba(0,229,200,0.35);
}
html[data-redesign] .rd-pulser-core svg {
  display: block;
}

html[data-redesign] .rd-waiting-title {
  font-size: 22px; font-weight: 800; margin-bottom: 6px;
  color: var(--rd-text); letter-spacing: -0.3px;
}
html[data-redesign] .rd-waiting-sub {
  font-size: 14px; color: var(--rd-muted);
  margin-bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: center;
}
html[data-redesign] .rd-waiting-sub .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,229,200,0.25);
  border-top-color: var(--rd-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

html[data-redesign] .rd-posted-card {
  background: var(--rd-bg-elev1);
  border: 1px solid var(--rd-border);
  border-radius: 16px;
  padding: 18px;
  text-align: left;
  box-shadow: var(--rd-shadow);
}
html[data-redesign] .rd-trip-text { flex: 1; min-width: 0; }
html[data-redesign] .rd-trip-text > div:last-child {
  font-size: 14px;
  line-height: 1.4;
  color: var(--rd-text);
  word-wrap: break-word;
}
html[data-redesign] .rd-posted-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
html[data-redesign] .rd-pill-teal {
  background: rgba(0,229,200,0.15);
  color: var(--rd-accent);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px;
}
html[data-redesign="day"] .rd-pill-teal {
  background: rgba(0,157,140,0.13); color: var(--rd-accent);
}
html[data-redesign] .rd-posted-age {
  font-size: 11px; color: var(--rd-muted);
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
html[data-redesign] .rd-trip-row {
  display: flex; gap: 12px; margin-bottom: 10px;
  align-items: flex-start;
}
html[data-redesign] .rd-dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
}
html[data-redesign] .rd-dot-pick { background: var(--rd-accent); }
html[data-redesign] .rd-dot-drop { background: var(--rd-yellow); }
html[data-redesign] .rd-tag {
  font-size: 10px; color: var(--rd-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; margin-bottom: 2px;
}
html[data-redesign] .rd-divider {
  height: 1px; background: var(--rd-border);
  margin: 10px 0;
}
html[data-redesign] .rd-posted-foot {
  display: flex; justify-content: space-between; align-items: center;
}
html[data-redesign] .rd-posted-meta {
  font-size: 12px; color: var(--rd-muted); font-weight: 600;
}
html[data-redesign] .rd-posted-fare {
  font-size: 20px; font-weight: 800; color: var(--rd-accent);
  letter-spacing: -0.3px;
}
html[data-redesign] .rd-posted-timer {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rd-border);
  font-size: 12px; color: var(--rd-muted); text-align: center;
}
html[data-redesign] .rd-posted-timer span {
  color: var(--rd-text); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── Contrast fixes for hardcoded inline colors ──
   The app has many inline styles using #3a6880 (2.6:1 on navy, nearly invisible).
   Rewrite those specific targets to a readable equivalent when redesign is active.
*/
html[data-redesign="night"] #fare-distance-label,
html[data-redesign="night"] #fare-tier-info,
html[data-redesign="night"] .fare-placeholder {
  color: var(--rd-muted) !important;
}
html[data-redesign="day"] #fare-distance-label,
html[data-redesign="day"] #fare-tier-info,
html[data-redesign="day"] .fare-placeholder {
  color: var(--rd-muted) !important;
}
/* Disabled post button — don't let the dark text on dark bg make it unreadable */
html[data-redesign] #post-btn[disabled] {
  background: var(--rd-bg-elev2) !important;
  color: var(--rd-muted) !important;
}

/* Anything inline-styled with color:#3a6880 — catch via attribute selector */
html[data-redesign] [style*="#3a6880"] { color: var(--rd-muted) !important; }
html[data-redesign] [style*="rgba(255,255,255,0.22)"] { color: var(--rd-muted) !important; }
html[data-redesign] [style*="rgba(255,255,255,0.3)"] { color: var(--rd-muted) !important; }
html[data-redesign] [style*="rgba(255,255,255,0.4)"] { color: var(--rd-body) !important; }
html[data-redesign] [style*="rgba(58,80,104"] { color: var(--rd-muted) !important; }

/* Placeholder contrast */
html[data-redesign] input::placeholder,
html[data-redesign] textarea::placeholder {
  color: var(--rd-muted);
  opacity: 1;   /* some browsers dim the placeholder by default */
}

/* Card-on-card: ensure body text on elevated cards inherits the right color */
html[data-redesign] .card,
html[data-redesign] .card-sm { color: var(--rd-body); }
html[data-redesign] .card strong,
html[data-redesign] .card b { color: var(--rd-text); }

/* Labels above inputs: boost weight + contrast */
html[data-redesign] label {
  color: var(--rd-muted);
  font-weight: 600;
}
html[data-redesign] .form-group > label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  display: block;
}