/* ============================================================
   Road-trip theme — warm Mediterranean light
   ============================================================ */

:root {
  --bg: #FBF6ED;
  --bg-warm: #F5EDD8;
  --surface: #FFFFFF;
  --surface-2: #F5EDD8;
  --hairline: rgba(120,80,40,0.12);
  --hairline-2: rgba(120,80,40,0.22);
  --ink: #1E1208;
  --ink-2: #5A3E28;
  --muted: #8C6840;
  --accent: #B03020;
  --accent-2: #C84820;
  --accent-soft: rgba(176,48,32,0.10);
  --check: #2D7040;
  --map-land: #E8D9B8;
  --map-land-stroke: rgba(120,80,40,0.25);
  --map-route: rgba(176,48,32,0.65);
  --shadow-1: 0 1px 3px rgba(80,40,10,0.08), 0 4px 14px rgba(80,40,10,0.07);
  --shadow-2: 0 2px 6px rgba(80,40,10,0.10), 0 8px 28px rgba(80,40,10,0.09);
  --bg-grad-top: #FFF8EC;
  --on-accent: #FFFFFF;
  --on-accent-soft: rgba(255,255,255,0.92);
  --tag-water: #2D6A8E;
  --tag-modest: #8A6A2A;
  --scrim: rgba(30,18,8,0.55);
}

body {
  background: radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-grad-top) 0%, var(--bg) 70%) !important;
  position: relative;
}

main { position: relative; z-index: 1; }

/* Van illustration — fixed behind all content, centered in viewport */
.bg-illustration {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  color: var(--ink);
  opacity: 0.06;
}
.bg-illustration svg { width: min(88vw, 440px); height: auto; }

/* Ensure all page content sits above the illustration */
.layout { position: relative; z-index: 1; }

/* FX rate chip in Costs panel header */
.panel-fx {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  text-align: right;
  line-height: 1.5;
  letter-spacing: 0.01em;
  align-self: flex-start;
}