:root {
  --blue: #003873;
  --green: #6fad22;
  --bg: #f4f6f8;
  --text: #18212a;
  --muted: #66717c;
  --result-bg: #eef6e8;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); font-family: Arial, sans-serif; color: var(--text); }
.wrap { max-width: 1400px; margin: 24px auto; padding: 12px; }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 18px; align-items: start; }
.card { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.map-card { position: sticky; top: 18px; min-width: 0; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.map-eyebrow { color: #667f4f; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.map-card h2 { margin: 3px 0 8px; color: var(--blue); font-size: 24px; }
.map-card p { min-height: 20px; margin: 0 0 12px; color: var(--muted); font-size: 14px; }
#natRouteMap { width: 100%; height: 520px; overflow: hidden; border-radius: 12px; background: #e8eef0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 11px; color: #435160; font-size: 13px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.pickup-dot { background: #003873; }
.destination-dot { background: #6fad22; }
.vehicle-home-dot { background: #b76508; }
.nat-map-vehicle-card { width: 250px; max-width: 100%; color: #18212a; font: 13px/1.4 Arial, sans-serif; }
.nat-map-vehicle-photo { display: block; width: 100%; height: 118px; margin: 0 0 8px; border-radius: 8px; object-fit: cover; background: #edf1f4; }
.nat-map-vehicle-title { display: block; margin-bottom: 7px; color: #003873; font-size: 15px; }
.nat-map-vehicle-details { display: grid; grid-template-columns: 1fr; gap: 3px; }
.nat-map-vehicle-detail { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #e5e9ed; padding-top: 3px; }
.nat-map-vehicle-detail span { color: #53616f; }
.nat-map-vehicle-detail strong { text-align: right; }
.nat-map-vehicle-card small { display: block; margin-top: 7px; color: #66717c; }
h1 { margin: 0; color: var(--blue); font-size: 32px; line-height: 1.15; }
.brand-nat { color: var(--blue); font-family: "Bodoni 72", Didot, "Times New Roman", Georgia, serif; font-size: 1.16em; font-weight: 700; letter-spacing: .045em; }
.brand-rest { color: var(--blue); font-family: "Bodoni 72", Didot, "Times New Roman", Georgia, serif; font-weight: 700; }
.sub { margin: 5px 0 14px; color: var(--muted); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
label { font-weight: 700; font-size: 14px; }
input { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; border: 1px solid #ccd3da; border-radius: 10px; font-size: 15px; }
.nat-time-picker { display: flex; align-items: center; gap: 5px; width: 100%; min-height: 52px; margin-top: 5px; padding: 4px 8px; border: 1px solid #ccd3da; border-radius: 10px; background: #fff; }
.nat-time-picker:focus-within { outline: 3px solid rgba(111,173,34,.28); outline-offset: 2px; border-color: var(--green); }
.nat-time-picker.is-disabled { background: #f1f3f5; opacity: .65; }
.nat-time-part { flex: 1 1 0; min-width: 0; min-height: 42px; margin: 0; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 17px; font-weight: 400; text-align: center; cursor: pointer; }
.nat-time-part:focus-visible { outline: 2px solid var(--green); }
.nat-time-separator { color: var(--blue); font-size: 20px; font-weight: 700; }
.nat-time-value { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.check { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.check input { width: auto; margin: 0; }
button { width: 100%; padding: 15px; border: 0; border-radius: 22px; background: var(--green); color: white; font-size: 17px; font-weight: 700; cursor: pointer; }
.result { margin-top: 20px; padding: 18px; border-radius: 16px; background: var(--result-bg); border-left: 5px solid var(--green); color: var(--text); font-size: 19px; line-height: 1.55; }
.result > div { margin: 3px 0; }
.result strong { color: var(--blue); }
.result button { margin-top: 14px; background: var(--blue); }
#natBookTransferBtn { font-size: clamp(13px, 3.7vw, 17px); line-height: 1.25; white-space: normal; }
.nat-route-summary { margin: 0 0 13px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.52); }
.nat-route-point { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.35; }
.nat-route-point strong { flex: 0 0 84px; }
.nat-route-point span { min-width: 0; }
.nat-vehicle-fare-row, .nat-unavailable-vehicle-row, .nat-journey-summary { font-size: 16px; color: #18212a; }
.nat-vehicle-fare-row { white-space: nowrap; }
.result .nat-vehicle-fare-row strong { color: #18212a; font-weight: 400; }
.nat-vehicle-fare-header { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nat-vehicle-fare-photo { flex: 0 0 112px; width: 112px; height: 72px; overflow: hidden; border-radius: 8px; background: #eef2f4; }
.nat-vehicle-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.nat-vehicle-fare-meta { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 3px 12px; }
.nat-journey-summary { font-weight: 700; }
.hidden { display: none; }
.error { background: #fdecec; color: #8c1c1c; border-left-color: #b42318; }
pre { white-space: pre-wrap; font-size: 12px; }
@media(max-width:900px) {
  .booking-layout { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .map-card { position: static; }
}
@media(max-width:620px) {
  .grid { grid-template-columns: 1fr; }
  .wrap { margin: 8px auto; padding: 8px; }
  .card { padding: 16px; border-radius: 16px; }
  .map-card { position: static; padding: 16px; border-radius: 16px; }
  #natRouteMap { height: 360px; }
  h1 { font-size: 28px; }
  .result { font-size: 18px; }
}
@media(max-width:390px) {
  .brand-rest { display: block; margin-top: 3px; }
  .nat-vehicle-fare-photo { flex-basis: 92px; width: 92px; height: 62px; }
  .nat-vehicle-fare-header { gap: 9px; }
}
/* Optional date based items */
.nat-special-date-fees{margin:14px 0;padding:16px 16px 14px;border:2px solid #6fad22;border-left-width:7px;border-radius:12px;background:#f4f9ec;color:#172536;box-shadow:0 3px 10px #173c1420}
.nat-special-date-fees[hidden]{display:none!important}
.nat-special-date-fees>strong{display:block;margin:0 0 4px;color:#173f70;font-size:16px}
.nat-special-date-fees>small{display:block;margin:0 0 10px;color:#34475b;font-size:13px}
.nat-special-fee-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto 124px;gap:10px;align-items:center;margin:0!important;padding:12px;border:1px solid #d6e4c5;border-radius:9px;background:#fff;font-weight:600}
.nat-special-fee-row>span:first-child{font-size:15px;line-height:1.35}
.nat-special-fee-row>span:nth-child(2){color:#173f70;font-weight:800;white-space:nowrap}
.nat-special-fee-quantity{display:grid;grid-template-columns:repeat(3,36px);gap:5px;align-items:center;justify-content:end}
.nat-special-fee-quantity-label{grid-column:1/-1;text-align:center;font-size:12px;font-weight:700;color:#34475b}
.nat-special-fee-quantity input{width:36px;margin:0!important;min-height:38px;padding:4px;text-align:center}
.nat-special-fee-step{width:36px;min-height:38px;padding:0;border:1px solid #71869a;border-radius:7px;background:#fff;color:#003873;font-size:22px;font-weight:700;line-height:1;cursor:pointer}
.nat-special-fee-step:active{background:#e5edf3}
@media(max-width:620px){.nat-special-date-fees{padding:13px 12px}.nat-special-fee-row{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px}.nat-special-fee-row>span:first-child{grid-column:1/-1}.nat-special-fee-quantity{grid-column:2}.nat-special-fee-quantity-label{display:block}}