/*
 * Trucker Heaven Parking — customer Liquid Glass system
 * One visual layer shared by reservation, account, document, and lifecycle views.
 */

:root {
  color-scheme: dark;
  --brand-green: #8bc34a;
  --brand-green-hover: #a7d65f;
  --brand-green-bright: #c3e36e;
  --brand-blue: #2855a5;
  --brand-blue-hover: #356bc5;
  --page: #030811;
  --page-deep: #030811;
  --surface: rgb(6 16 30 / 78%);
  --surface-raised: rgb(7 21 39 / 92%);
  --surface-soft: rgb(10 27 47 / 78%);
  --border: rgb(175 213 239 / 17%);
  --border-strong: rgb(195 227 245 / 29%);
  --text: #f5f2e9;
  --text-muted: #aab7c4;
  --gold: #8bc34a;
  --gold-hover: #a7d65f;
  --gold-soft: rgb(139 195 74 / 13%);
  --blue: #5d8fdc;
  --blue-soft: rgb(40 85 165 / 16%);
  --success: #9bd05c;
  --success-soft: rgb(139 195 74 / 14%);
  --warning: #e5b65e;
  --warning-soft: rgb(229 182 94 / 13%);
  --danger: #f17c7c;
  --danger-soft: rgb(112 31 42 / 28%);
  --glass-base: linear-gradient(145deg, rgb(11 29 50 / 88%), rgb(4 13 25 / 82%));
  --glass-edge: rgb(220 239 250 / 19%);
  --glass-shadow: 0 24px 70px rgb(0 4 11 / 48%), 0 3px 12px rgb(0 6 14 / 32%), inset 0 1px 0 rgb(255 255 255 / 10%);
  --glass-reflection: radial-gradient(circle at 10% 0%, rgb(79 132 207 / 15%), transparent 31rem), radial-gradient(circle at 92% 6%, rgb(139 195 74 / 9%), transparent 25rem);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --focus: 0 0 0 3px rgb(139 195 74 / 34%);
  --content: 1480px;
  --input-height: 54px;
}

html { background: var(--page); }

body {
  background:
    linear-gradient(rgb(3 8 17 / 92%), rgb(3 8 17 / 96%)),
    url("images/parking-sky.jpg") center top / cover fixed,
    var(--page);
  color: var(--text);
  font-family: Aptos, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .002em;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 11% 9%, rgb(40 85 165 / 18%), transparent 34rem),
    radial-gradient(circle at 90% 28%, rgb(139 195 74 / 8%), transparent 29rem),
    linear-gradient(180deg, transparent, #030811 78%);
  content: "";
  pointer-events: none;
}

h1, h2, h3, h4,
.button, .eyebrow, .step-label, .card-kicker,
.desktop-nav, .mobile-nav, .timezone-chip, .context-chip {
  font-family: "Bahnschrift Condensed", Bahnschrift, "Arial Narrow", Impact, sans-serif;
}

h1, h2, h3, h4 { color: var(--text); }

h1[tabindex="-1"], h2[tabindex="-1"], h3[tabindex="-1"],
#myParkingTitle, #uploadDocumentsTitle, #lookupTitle, #passViewTitle,
#mapViewTitle, #reservationsTitle, #managementTitle {
  scroll-margin-top: 116px;
}

button, a, input, select, textarea, summary {
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, .parking-type-card:focus-visible,
.duration-option:focus-visible, .document-type-choice:focus-visible {
  outline: 2px solid var(--brand-green-bright);
  outline-offset: 3px;
  box-shadow: var(--focus);
}

.LiquidGlass {
  position: relative;
  border: 1px solid var(--glass-edge);
  background: var(--glass-reflection), var(--glass-base);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
}

.LiquidGlass::after {
  position: absolute;
  z-index: 5;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgb(255 255 255 / 8%), transparent 18%, transparent 74%, rgb(73 126 198 / 7%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%), inset 1px 0 0 rgb(255 255 255 / 4%);
  content: "";
  pointer-events: none;
}

.GlassNav,
.GlassPanel,
.GlassOffer,
.GlassModal,
.GlassActionBar {
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
}

.GlassPanel { border-radius: var(--radius-lg); }
.GlassOffer { border-radius: var(--radius); }

.site-header {
  position: sticky;
  z-index: 80;
  top: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header::after { display: none; }

.header-inner {
  width: min(calc(100% - 36px), 1420px);
  min-height: 72px;
  margin: 12px auto 0;
  padding: 9px 13px 9px 11px;
  border-radius: 20px;
}

.brand {
  display: flex;
  width: auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0;
  letter-spacing: .15em;
}

.brand::before { display: none; }

.brand-art {
  display: grid;
  width: 214px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 52%);
  border-radius: 12px;
  background: rgb(252 250 245 / 95%);
  box-shadow: inset 0 1px 0 #fff, 0 5px 18px rgb(0 0 0 / 22%);
}

.brand-logo { display: block; width: 100%; height: auto; filter: none; }

.brand small {
  margin: 0;
  padding: 0;
  color: var(--brand-green-bright);
  font-size: .62rem;
  letter-spacing: .22em;
  white-space: nowrap;
}

.desktop-nav { gap: 2px; }
.desktop-nav a {
  position: relative;
  min-height: 44px;
  padding: 14px 12px 10px;
  color: #c8d2dc;
  font-size: .72rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.desktop-nav a::after {
  position: absolute;
  right: 12px;
  bottom: 6px;
  left: 12px;
  height: 2px;
  border-radius: 999px;
  background: var(--brand-green);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}
.desktop-nav a:hover, .desktop-nav [aria-current="page"] { border: 0; color: #fff; }
.desktop-nav a:hover::after, .desktop-nav [aria-current="page"]::after { transform: scaleX(1); }

.mobile-nav summary {
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgb(4 14 26 / 82%);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mobile-nav nav {
  top: calc(100% + 11px);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: #071527;
  box-shadow: 0 20px 50px rgb(0 0 0 / 48%);
}
.mobile-nav a { color: #eef2f3; }

main { width: min(calc(100% - 40px), var(--content)); padding: 22px 0 72px; }

.parking-hero {
  position: relative;
  min-height: 350px;
  align-items: flex-end;
  overflow: hidden;
  margin: 0 0 18px;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid rgb(198 224 240 / 20%);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgb(3 8 17 / 94%) 0%, rgb(3 8 17 / 74%) 48%, rgb(3 8 17 / 32%) 100%),
    linear-gradient(0deg, rgb(3 8 17 / 78%), transparent 60%),
    url("images/parking-hero.png") center 44% / cover;
  box-shadow: 0 28px 80px rgb(0 0 0 / 52%), inset 0 1px 0 rgb(255 255 255 / 10%);
}
.parking-hero::after {
  background: linear-gradient(115deg, rgb(73 126 198 / 14%), transparent 26%, transparent 70%, rgb(139 195 74 / 7%));
}
.hero-copy-block { position: relative; z-index: 6; max-width: 760px; }
.hero-brand {
  display: block;
  width: min(250px, 68vw);
  margin-bottom: 25px;
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: 14px;
  background: rgb(252 250 245 / 94%);
  box-shadow: 0 12px 30px rgb(0 0 0 / 30%);
}
.hero-brand img { display: block; width: 100%; height: auto; }
.booking-heading .eyebrow { color: var(--brand-green-bright); }
.booking-heading h1 {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-size: clamp(3.15rem, 7.2vw, 7rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .84;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-support { max-width: 540px; margin: 20px 0 0; color: #d4dce2; font-size: clamp(.98rem, 1.5vw, 1.15rem); }
.timezone-chip, .context-chip {
  position: relative;
  z-index: 6;
  border: 1px solid rgb(199 225 241 / 22%);
  background: rgb(4 14 27 / 78%);
  color: #c1ccd5;
  letter-spacing: .045em;
}
.parking-hero .timezone-chip { align-self: flex-end; color: #e0e5e7; }

.progress {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 18px;
  padding: 7px;
  border-left: 1px solid var(--glass-edge);
  border-radius: 18px;
}
.progress::before { display: none; }
.progress li, .progress .GlassStep {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  min-height: 52px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #7f909e;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.progress li > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgb(190 217 235 / 20%);
  border-radius: 50%;
  background: rgb(8 24 41 / 88%);
  color: #9baab6;
}
.progress .is-current {
  border-color: rgb(139 195 74 / 42%);
  background: linear-gradient(145deg, rgb(139 195 74 / 15%), rgb(8 24 41 / 74%));
  box-shadow: inset 0 1px 0 rgb(195 227 110 / 12%);
  color: #edf6e4;
}
.progress .is-current > span { border-color: var(--brand-green); background: var(--brand-green); color: #0a1607; }
.progress .is-complete { border-color: rgb(139 195 74 / 16%); color: #b9d39e; }
.progress .is-complete > span { background: rgb(139 195 74 / 20%); color: var(--brand-green-bright); }

.panel, .GlassPanel {
  border: 1px solid var(--glass-edge);
  background: var(--glass-reflection), var(--glass-base);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}

.search-layout { grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); gap: 16px; }
.search-panel, .offers-panel, .details-panel { padding: clamp(24px, 3.2vw, 44px); border-top: 1px solid var(--glass-edge); }
.screen-heading h2, .page-head h2, .offers-heading h2, .lookup-heading h2,
.property-copy h2, .summary-heading h2, .portal-section-heading h2 {
  color: #fff;
  font-weight: 760;
  letter-spacing: -.035em;
}
.screen-heading > p:last-child, .page-head p, .lookup-heading p { color: var(--text-muted); }
.eyebrow, .step-label, .card-kicker { color: var(--brand-green-bright); }

.location-inline {
  margin: 24px 0;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgb(3 11 22 / 46%);
}
.location-mark { border: 1px solid rgb(91 145 220 / 31%); border-radius: 10px; background: var(--blue-soft); color: #91b8ec; }

.plain-fieldset legend, .duration-choices legend, label, .details-panel legend { color: #dbe2e6; }
.field-help, .optional, .duration-note { color: var(--text-muted); }

input, select, textarea,
.GlassInput input, .GlassInput select, .GlassInput textarea {
  min-height: var(--input-height);
  border: 1px solid rgb(154 186 207 / 31%);
  border-radius: 11px;
  background: rgb(4 12 24 / 75%);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 36%);
  color: #f6f3ea;
  caret-color: var(--brand-green-bright);
}
input:hover, select:hover, textarea:hover { border-color: rgb(139 195 74 / 46%); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-green);
  background: rgb(5 16 29 / 92%);
  box-shadow: inset 3px 0 0 var(--brand-green), var(--focus);
}
input::placeholder, textarea::placeholder { color: #798a97; }
input[type="date"], input[type="time"] { color-scheme: dark; }

.parking-type-choices { gap: 10px; }
.parking-type-card, .duration-option, .document-type-choice {
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: linear-gradient(145deg, rgb(12 31 51 / 86%), rgb(5 17 31 / 90%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
  color: var(--text);
}
.parking-type-card:hover, .duration-option:hover, .document-type-choice:hover {
  border-color: rgb(139 195 74 / 45%);
  transform: translateY(-1px);
}
.parking-type-card.is-selected, .parking-type-card.is-bobtail.is-selected,
.duration-option.is-selected, .document-type-choice[aria-pressed="true"] {
  border-color: var(--brand-green);
  background: linear-gradient(145deg, rgb(27 52 37 / 94%), rgb(7 25 38 / 92%));
  box-shadow: inset 3px 0 0 var(--brand-green), 0 10px 30px rgb(0 0 0 / 26%);
  color: #f5f8ef;
}
.parking-type-marker, .offer-symbol {
  border: 1px solid rgb(87 138 207 / 38%);
  border-radius: 11px;
  background: rgb(40 85 165 / 18%);
  color: #91b8ec;
}
.parking-type-copy > strong, .offer-copy h3, .information-card h4, .quote-summary h4 { color: #fff; }
.parking-type-copy > span:not(.card-kicker):not(.duration-badges), .offer-copy p { color: var(--text-muted); }
.parking-type-rate, .price { color: var(--brand-green-bright); }
.duration-badges span { border-color: rgb(139 195 74 / 24%); color: #b8d799; }

.button, .GlassButton {
  min-height: 50px;
  border: 1px solid rgb(195 227 110 / 58%);
  border-radius: 12px;
  background: linear-gradient(145deg, #9bcd5b, #79ad3d);
  box-shadow: 0 10px 25px rgb(44 78 20 / 27%), inset 0 1px 0 rgb(255 255 255 / 28%);
  color: #081206;
  font-size: .76rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.button:hover, .GlassButton:hover { border-color: #d4ec93; background: linear-gradient(145deg, #addb70, #89bb49); transform: translateY(-1px); }
.button:disabled { border-color: rgb(159 174 185 / 22%); background: #34414c; box-shadow: none; color: #8e9ba5; }
.secondary-button {
  border-color: var(--border-strong);
  background: linear-gradient(145deg, rgb(20 43 67 / 94%), rgb(7 22 39 / 94%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  color: #eef3f5;
}
.secondary-button:hover { border-color: rgb(139 195 74 / 44%); background: linear-gradient(145deg, rgb(27 55 82 / 96%), rgb(9 29 49 / 96%)); }
.text-button, .text-link { color: #9fc6ef; }
.text-button:hover, .text-link:hover { color: var(--brand-green-bright); }
.danger-button { border-color: rgb(241 124 124 / 42%); background: var(--danger-soft); color: #ffc1c1; }
.self-service-button { border-color: rgb(139 195 74 / 50%); background: #4e812b; }

.message { color: #c1d2de; }
.message.error, .error-state { border-color: rgb(241 124 124 / 46%); background: var(--danger-soft); color: #ffc3c3; }
.loading-state, .portal-loading {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(110deg, rgb(8 25 43 / 84%) 20%, rgb(23 53 78 / 82%) 38%, rgb(8 25 43 / 84%) 56%);
  background-size: 220% 100%;
  color: #d4e0e8;
  animation: glass-shimmer 1.8s ease-in-out infinite;
}
.empty-state, .portal-empty { border-color: var(--border); background: rgb(6 19 34 / 72%); color: var(--text-muted); }

.property-panel { overflow: hidden; border-color: var(--glass-edge); background: var(--glass-base); }
.property-image-wrap { min-height: 430px; border-bottom-color: var(--border); }
.property-image-wrap::after { height: 56%; background: linear-gradient(transparent, rgb(3 8 17 / 92%)); }
.image-badge { border-color: rgb(255 255 255 / 24%); background: rgb(3 10 20 / 78%); color: #fff; }
.property-copy::before { background: linear-gradient(90deg, var(--brand-blue) 0 57%, var(--brand-green) 57%); }
.property-details { border-color: var(--border); }
.property-details div { border-color: var(--border); background: transparent; }
.property-details dd, .search-overview dd, .review-facts dd { color: #f5f2e9; }
.assignment-note, .automatic-assignment {
  border: 1px solid rgb(139 195 74 / 25%);
  border-radius: 13px;
  background: rgb(139 195 74 / 10%);
}
.assignment-note > span, .automatic-assignment > span { background: var(--brand-green); color: #071006; }
.assignment-note strong, .automatic-assignment strong { color: #e4f4d2; }
.assignment-note p, .automatic-assignment p { color: #b7caa7; }

.availability-layout { grid-template-columns: 292px minmax(0, 1fr); gap: 16px; }
.search-summary-panel, .selected-parking-summary { top: 98px; border-top: 1px solid var(--glass-edge); }
.availability-cards { gap: 12px; }
.availability-card, .GlassOffer {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgb(14 35 57 / 86%), rgb(6 18 33 / 91%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
  color: var(--text);
}
.availability-card.is-selected, .GlassOffer[aria-pressed="true"] {
  border-color: var(--brand-green);
  background: linear-gradient(145deg, rgb(24 52 39 / 93%), rgb(6 23 36 / 94%));
  box-shadow: inset 4px 0 0 var(--brand-green), 0 18px 42px rgb(0 0 0 / 30%);
}
.capacity { color: #abd982; }
.quote-summary > section, .information-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgb(6 20 35 / 70%);
  color: var(--text);
}
.quote-lines dd, .quote-lines .quote-total dd { color: #f5f2e9; }
.quote-lines .quote-total dt, .quote-lines .quote-total dd { border-color: var(--border); color: var(--brand-green-bright); }

.details-panel fieldset, .terms, .billing-summary, .lookup-form {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgb(3 13 25 / 50%);
  color: var(--text);
}
.terms .check, .terms .check span { color: #d7dfe4; }
.check input { accent-color: var(--brand-green); }
.verification-fieldset, .document-upload-card {
  border-style: dashed;
  border-color: rgb(139 195 74 / 35%);
  background: linear-gradient(145deg, rgb(139 195 74 / 8%), rgb(4 15 28 / 62%));
}
.selected-file {
  min-height: 48px;
  margin: 14px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgb(3 11 22 / 58%);
  color: #d8e1e5;
}
.secure-payment-note, .privacy-note {
  padding: 10px 12px;
  border: 1px solid rgb(139 195 74 / 18%);
  border-radius: 10px;
  background: rgb(139 195 74 / 7%);
  color: #b7c6ab;
}
.secure-payment-note strong { color: #dff1c8; }
.secure-payment-note p, .summary-assignment-note p { color: #aebda3; }
.summary-assignment-note { border-color: var(--brand-green); background: rgb(139 195 74 / 8%); }

.confirmation-view, .digital-pass, .management-card, .recent-reservation-card,
.dedicated-map, .lookup-page, .portal-login-card, .document-upload-card {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  background: var(--glass-reflection), var(--glass-base);
  box-shadow: var(--glass-shadow);
}
.pass-status, .management-status { border-color: var(--border); background: rgb(3 13 25 / 64%); }
.confirmation-banner { background: radial-gradient(circle at 90% 20%, rgb(139 195 74 / 10%), transparent 24rem); }
.confirmation-mark { border-color: var(--brand-green); color: var(--brand-green-bright); }
.assigned-space-card { border-color: var(--brand-green); background: linear-gradient(145deg, rgb(139 195 74 / 16%), rgb(7 23 38 / 92%)); }
.assigned-space-card span, .assigned-space-card small, .assigned-space-card strong { color: var(--brand-green-bright); }
.confirmation-credentials > div, .recovery-details, .remember-control, .reservation-facts,
.pass-details section, .pass-details dl div, .written-directions > div {
  border-color: var(--border);
  background: rgb(4 17 31 / 72%);
}
.confirmation-credentials strong, .confirmation-credentials code, .reservation-facts strong,
.pass-details dd, .recent-reservation-card dd { color: #fff; }
.arrival-callout, .pending-assignment, .assigned-navigation-card { border-color: rgb(81 137 209 / 32%); background: rgb(40 85 165 / 13%); }
.assigned-navigation-card strong { color: var(--brand-green-bright); }
.written-directions > div:last-child { border-left-color: var(--brand-green); }
.reservation-saved { border-color: rgb(139 195 74 / 35%); background: rgb(139 195 74 / 10%); }
.reservation-saved h2 { color: #e7f6d8; }
.reservation-saved p:last-child { color: #bdd3a8; }

.monthly-selector { border-color: var(--border-strong); background: rgb(4 16 29 / 82%); }
.monthly-selector-head h3 { color: #fff; }
.selected-monthly-position strong, .map-area-label { color: var(--brand-green-bright); }
.monthly-map-stage, .map-stage {
  border-color: var(--border);
  background-color: #06101e;
  background-image: linear-gradient(rgb(91 143 216 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(91 143 216 / 5%) 1px, transparent 1px);
  background-size: 24px 24px;
}
.map-controls { border-radius: 12px; }
.map-controls button { border-color: var(--border-strong); background: rgb(4 17 31 / 94%); color: #edf2f4; }
.map-controls button:hover { border-color: var(--brand-green); color: var(--brand-green-bright); }
.map-area-label { border-color: var(--brand-green); background: rgb(3 12 23 / 92%); }

.GlassModal, dialog {
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background: var(--glass-reflection), linear-gradient(145deg, rgb(11 30 50 / 97%), rgb(4 13 25 / 97%));
  box-shadow: 0 34px 100px rgb(0 0 0 / 72%), inset 0 1px 0 rgb(255 255 255 / 10%);
  color: var(--text);
}
dialog::backdrop { background: rgb(0 4 10 / 78%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dialog-close { border: 1px solid var(--border); background: rgb(15 39 62 / 92%); color: #fff; }

.my-parking-view { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 72px; }
.my-parking-auth { min-height: 58vh; display: grid; place-items: center; }
.portal-login-card { width: min(560px, 100%); padding: clamp(24px, 5vw, 48px); }
.portal-login-card h1 { margin: .35rem 0 .75rem; color: #fff; font-size: clamp(2rem, 6vw, 3.4rem); }
.portal-auth-form { display: grid; gap: 16px; margin: 28px 0 18px; }
.portal-auth-form label { display: grid; gap: 8px; font-weight: 700; }
.portal-recovery { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.portal-recovery summary { cursor: pointer; font-weight: 800; }
.portal-loading, .portal-empty { padding: 48px 24px; text-align: center; }
.my-parking-shell, .portal-section, .current-parking-list, .portal-list, .upload-documents-shell { display: grid; gap: 18px; }
.portal-head { align-items: flex-start; }
.portal-head-actions, .portal-form-title, .portal-form-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.portal-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgb(4 15 28 / 76%);
  scrollbar-width: thin;
}
.portal-tabs button { flex: 0 0 auto; min-height: 44px; padding: 10px 15px; border: 0; border-radius: 10px; background: transparent; color: var(--text-muted); font-weight: 800; cursor: pointer; }
.portal-tabs button[aria-current="page"] { background: rgb(139 195 74 / 18%); color: var(--brand-green-bright); }
.portal-section-heading h2 { margin: .3rem 0 0; font-size: clamp(1.55rem, 4vw, 2.35rem); }
.portal-parking-card { padding: clamp(20px, 4vw, 30px); border-left: 4px solid var(--brand-green); }
.portal-parking-card.is-monthly { border-left-color: var(--brand-blue); }
.portal-card-heading, .portal-list-row { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.portal-card-heading h3 { margin: .25rem 0; color: #fff; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.portal-status, .safe-document-status { display: inline-flex; width: fit-content; padding: 7px 11px; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: .76rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.portal-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 24px 0 0; }
.portal-facts div { display: grid; gap: 4px; }
.portal-facts dt { color: var(--text-muted); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.portal-facts dd { margin: 0; color: var(--text); font-weight: 800; }
.portal-list-row { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgb(5 18 32 / 75%); }
.portal-list-row > div { display: grid; gap: 4px; }
.portal-list-row > div:last-child { text-align: right; }
.portal-list-row span { color: var(--text-muted); }
.portal-empty { border: 1px dashed var(--border-strong); border-radius: 14px; background: rgb(5 18 32 / 64%); }
.document-type-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.document-type-choice { min-height: 110px; color: var(--text); font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.document-upload-card { display: grid; gap: 18px; padding: clamp(22px, 5vw, 36px); }
.document-source-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.document-source-buttons label { position: relative; cursor: pointer; }
.document-source-buttons input { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.upload-progress { display: grid; gap: 8px; }
.upload-progress progress { width: 100%; height: 14px; accent-color: var(--brand-green); }
.document-success { padding: clamp(28px, 6vw, 52px); border-left: 5px solid var(--brand-green); text-align: center; }
.safe-document-status.replacement { background: var(--warning-soft); color: var(--warning); }

footer { border-color: var(--border); background: transparent; color: var(--text-muted); }
footer strong { color: var(--brand-green-bright); }
footer a { color: #9fc6ef; }

@keyframes glass-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (max-width: 1100px) {
  .brand-art { width: 180px; }
  .desktop-nav a { padding-inline: 9px; }
  .search-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
  .availability-layout { grid-template-columns: 250px minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  main { width: min(calc(100% - 26px), var(--content)); }
  .parking-hero { min-height: 330px; }
  .search-layout, .availability-layout, .review-layout { grid-template-columns: 1fr; }
  .property-panel { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); }
  .property-image-wrap { min-height: 100%; }
  .search-summary-panel, .selected-parking-summary { position: relative; top: auto; }
}

@media (max-width: 640px) {
  .header-inner { width: calc(100% - 20px); min-height: 64px; margin-top: 8px; padding: 8px; border-radius: 16px; }
  .brand { gap: 7px; }
  .brand-art { width: 178px; padding: 6px 8px; border-radius: 10px; }
  .brand small { font-size: .51rem; }
  main { width: calc(100% - 20px); padding-top: 14px; }
  .parking-hero { min-height: 310px; padding: 24px 20px; border-radius: 22px; background-position: 58% 44%; }
  .hero-brand { width: 205px; margin-bottom: 20px; }
  .booking-heading h1 { font-size: clamp(2.8rem, 15vw, 4.2rem); }
  .hero-support { margin-top: 14px; font-size: .9rem; }
  .parking-hero .timezone-chip { position: absolute; z-index: 7; top: 17px; right: 17px; max-width: 44%; }
  .progress { gap: 3px; padding: 5px; }
  .progress li, .progress .GlassStep { display: grid; grid-template-columns: 1fr; gap: 3px; justify-items: center; min-height: 56px; padding: 7px 2px; font-size: .57rem; text-align: center; }
  .progress li b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .progress li > span { width: 24px; height: 24px; }
  .search-panel, .offers-panel, .details-panel { padding: 22px 17px; }
  .parking-type-choices, .field-grid, .parking-information { grid-template-columns: 1fr; }
  .schedule-grid { grid-template-columns: 1fr 1fr; }
  .property-panel { display: flex; }
  .property-image-wrap { min-height: 250px; aspect-ratio: 4 / 3; }
  .property-copy { padding: 22px 18px; }
  .availability-card { grid-template-columns: 1fr; padding: 18px; }
  .card-choice { grid-column: auto; grid-template-columns: 1fr; justify-items: stretch; text-align: left; }
  .card-choice .button { grid-column: auto; grid-row: auto; width: 100%; }
  .primary-action { width: 100%; min-width: 0; }
  .GlassActionBar {
    position: sticky;
    z-index: 15;
    bottom: 8px;
    margin: 22px -8px -8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgb(4 15 28 / 90%);
    box-shadow: 0 14px 34px rgb(0 0 0 / 38%);
  }
  .GlassActionBar .button { width: 100%; }
  .lookup-form { grid-template-columns: 1fr; }
  .portal-card-heading, .portal-list-row, .portal-form-title, .portal-form-actions { flex-direction: column; }
  .portal-facts { grid-template-columns: 1fr 1fr; }
  .portal-list-row > div:last-child { text-align: left; }
  .document-type-choices { grid-template-columns: 1fr; }
  .document-source-buttons { display: grid; }
  .document-source-buttons .button { width: 100%; }
}

@media (max-width: 430px) {
  .header-inner { width: calc(100% - 16px); }
  .brand-art { width: 164px; }
  .brand small { display: none; }
  .mobile-nav summary { padding-inline: 12px; }
  main { width: calc(100% - 16px); }
  .parking-hero { min-height: 292px; padding-inline: 17px; }
  .hero-brand { width: 188px; }
  .parking-hero .timezone-chip { top: 13px; right: 13px; padding: 6px 8px; font-size: .56rem; }
  .screen-heading h2, .page-head h2, .offers-heading h2, .lookup-heading h2 { font-size: 1.75rem; }
  .schedule-grid { grid-template-columns: 1fr; }
  .portal-facts { grid-template-columns: 1fr; }
  .map-stage { min-height: 440px; }
  footer { align-items: flex-start; gap: 18px; padding-inline: 4px; }
  footer nav { display: grid; gap: 8px; }
}

@media (max-width: 390px) {
  .brand-art { width: 150px; }
  .parking-hero { min-height: 280px; }
  .hero-brand { width: 176px; }
  .progress li, .progress .GlassStep { font-size: .52rem; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .LiquidGlass, .GlassNav, .GlassPanel, .GlassOffer, .GlassModal, .GlassActionBar,
  .panel, .portal-login-card, .document-upload-card {
    background-color: #071527;
    background-image: linear-gradient(145deg, #0b1d32, #06101e);
  }
}

/* The lot map is operational information, but it remains part of the same
   daylight family instead of becoming a dark dashboard inside the page. */
.monthly-selector { background: rgb(255 255 255 / 70%); }
.selected-monthly-position span, .selected-monthly-position small { color: var(--text-muted); }
.selected-monthly-position strong { color: #4f792a; }
.map-stage, .monthly-map-stage {
  border-color: #cbd8de;
  background: linear-gradient(145deg, #e8eef0, #dce7ea);
  scrollbar-color: #8da2ac #e8eef0;
}
.lot-map.customer-map, .monthly-selection-map {
  border-color: #b5c5cc !important;
  background-color: #dfe8eb !important;
  background-image: radial-gradient(rgb(40 85 165 / 7%) 1px, transparent 1px), linear-gradient(135deg, rgb(255 255 255 / 30%), transparent 48%) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 58%), 0 16px 32px rgb(34 67 86 / 13%) !important;
}
.customer-map .map-element { border-color: #8ba0a9; background: #b9c7cc; color: #18313b; }
.customer-map .map-element span { text-shadow: 0 1px 0 rgb(255 255 255 / 72%); }
.customer-map .map-space.is-bobtail-space { border-color: #8ca68c; background: #b8cab6; }
.customer-map .map-space.is-general-space { border-color: #879da7; background: #afc0c7; }
.customer-map .map-space.is-unavailable, .customer-map .map-space.is-confirmation-muted { border-color: #abb9bf; background: #d0d9dc; color: #70838b; }
.customer-map .map-space.is-outside-area { border-color: #bcc8cd; background: #cbd6da; }
.customer-map .map-space.is-customer-quiet { border-color: #b9b7ad; background: #cfcdc3; }
.customer-map .map-space.is-permitted-area { border-color: #7ba34a; background: rgb(146 186 94 / 58%); box-shadow: 0 0 8px rgb(102 146 55 / 40%); }
.customer-map .map-element.is-route, .customer-map .map-space.is-route:not(.is-assigned) { border-color: #6b9dbe; background: #92bed2; color: #123a4c; }
.customer-map .map-label, .customer-map .map-area { background: rgb(255 255 255 / 76%); color: #24414c; }
.customer-map .customer-lane { background: #bac8cd; }
.customer-map .customer-boundary { border-color: #94a7ae; }
.customer-map .customer-island { border-color: #9badb4; background: #c4d0d4; }
.customer-map .customer-building { border-color: #a3a090; background: #c9c6b9; }
.monthly-position.state-available { border-color: #5d9a60; background: #78b879; color: #102d16; }
.monthly-position.state-available:hover, .monthly-position.state-available:focus-visible { border-color: #527d2e; background: #8bc984; }
.monthly-position.state-selected, .monthly-position.is-selected-monthly { border-color: #2855a5; background: #7297d1; color: #fff; box-shadow: 0 0 0 4px rgb(40 85 165 / 20%), 0 0 16px rgb(40 85 165 / 24%); }
.monthly-position.state-temporarily-held, .monthly-position.state-reserved, .monthly-position.state-occupied { border-color: #9983a7; background: #b5a5bd; }
.monthly-position.state-blocked { border-color: #c56863; background: repeating-linear-gradient(135deg,#dfaaa6 0 4px,#edd0cd 4px 8px); }
.monthly-position.state-not-monthly-eligible { border-color: #9baab0; background: #c3cdd1; }
.monthly-position.state-internal-shop-company { border-color: #aaa18f; background: repeating-linear-gradient(45deg,#d1ccbf 0 4px,#e2ded5 4px 8px); }
.monthly-position span { color: inherit; text-shadow: 0 1px 0 rgb(255 255 255 / 55%); }
.map-legend { color: #506872; }

@media (prefers-reduced-motion: reduce) {
  .loading-state, .portal-loading { animation: none; }
}

/* Daylight optical layer — the final cascade intentionally replaces the
   retired dark presentation while retaining every existing flow component. */
:root {
  color-scheme: light;
  --brand-green: #83aa49;
  --brand-green-hover: #6e9637;
  --brand-green-bright: #739b3d;
  --brand-blue: #2855a5;
  --brand-blue-hover: #1f468d;
  --page: #edf4f7;
  --page-deep: #e7f0f4;
  --surface: rgb(255 255 255 / 76%);
  --surface-raised: rgb(255 255 255 / 94%);
  --surface-soft: rgb(245 250 252 / 78%);
  --border: rgb(53 88 111 / 16%);
  --border-strong: rgb(42 80 108 / 25%);
  --text: #071820;
  --text-muted: #536872;
  --gold: #83aa49;
  --gold-hover: #6e9637;
  --gold-soft: rgb(131 170 73 / 13%);
  --blue: #2855a5;
  --blue-soft: rgb(40 85 165 / 10%);
  --success: #567b2d;
  --success-soft: rgb(131 170 73 / 15%);
  --warning: #9b681c;
  --warning-soft: rgb(192 128 31 / 12%);
  --danger: #a72f2a;
  --danger-soft: rgb(198 62 54 / 10%);
  --glass-base: linear-gradient(145deg, rgb(255 255 255 / 89%), rgb(240 248 251 / 69%));
  --glass-edge: rgb(255 255 255 / 92%);
  --glass-shadow: 0 22px 58px rgb(25 57 77 / 14%), 0 4px 14px rgb(25 57 77 / 7%), inset 0 1px 0 #fff, inset 0 -1px 0 rgb(37 84 115 / 8%);
  --glass-reflection: radial-gradient(circle at 8% 0%, rgb(255 255 255 / 96%), transparent 25rem), radial-gradient(circle at 94% 4%, rgb(121 170 213 / 13%), transparent 26rem), radial-gradient(circle at 82% 100%, rgb(131 170 73 / 8%), transparent 22rem);
  --focus: 0 0 0 4px rgb(40 85 165 / 13%), 0 0 0 1px rgb(131 170 73 / 44%);
}

html { background: var(--page); }
body {
  background:
    radial-gradient(circle at 7% -4%, rgb(125 182 222 / 21%), transparent 32rem),
    radial-gradient(circle at 96% 15%, rgb(155 196 100 / 16%), transparent 27rem),
    linear-gradient(180deg, #f8fbfc 0%, #edf5f7 60%, #e8f1f4 100%);
  color: var(--text);
}
body::before {
  background:
    linear-gradient(115deg, transparent 0 58%, rgb(255 255 255 / 46%) 74%, transparent 88%),
    radial-gradient(circle at 28% 36%, rgb(255 255 255 / 70%), transparent 35rem);
}
h1, h2, h3, h4 { color: var(--text); }

.LiquidGlass,
.panel, .GlassPanel,
.confirmation-view, .digital-pass, .management-card, .recent-reservation-card,
.dedicated-map, .lookup-page, .portal-login-card, .document-upload-card {
  border-color: var(--glass-edge);
  background: var(--glass-reflection), var(--glass-base);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}
.LiquidGlass::after {
  background: linear-gradient(112deg, rgb(255 255 255 / 52%), transparent 18%, transparent 70%, rgb(65 125 174 / 8%));
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgb(255 255 255 / 78%), inset 0 -1px 0 rgb(44 93 125 / 7%);
}
.GlassNav, .GlassPanel, .GlassOffer, .GlassModal, .GlassActionBar {
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.site-header { padding-bottom: 6px; }
.header-inner {
  border-color: rgb(255 255 255 / 94%);
  background: linear-gradient(125deg, rgb(255 255 255 / 88%), rgb(241 248 250 / 70%));
  box-shadow: 0 14px 40px rgb(25 57 77 / 12%), inset 0 1px 0 #fff, inset 0 -1px 0 rgb(40 85 165 / 8%);
}
.brand-art {
  border-color: rgb(40 85 165 / 11%);
  background: rgb(255 255 255 / 76%);
  box-shadow: inset 0 1px 0 #fff;
}
.brand small { color: var(--brand-blue); }
.desktop-nav a { color: #445d68; }
.desktop-nav a:hover, .desktop-nav [aria-current="page"] { color: var(--brand-blue); }
.desktop-nav a[href="#parking"] { color: #496b28; }
.mobile-nav summary {
  border-color: var(--border);
  background: rgb(255 255 255 / 78%);
  color: var(--brand-blue);
}
.mobile-nav nav {
  border-color: var(--glass-edge);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 18px 44px rgb(25 57 77 / 17%);
}
.mobile-nav a { color: var(--text); }

main { padding-top: 18px; }
.parking-hero {
  min-height: 450px;
  border-color: rgb(255 255 255 / 72%);
  background:
    linear-gradient(90deg, rgb(248 252 253 / 97%) 0%, rgb(248 252 253 / 91%) 31%, rgb(248 252 253 / 48%) 58%, rgb(248 252 253 / 8%) 100%),
    linear-gradient(0deg, rgb(232 243 246 / 45%), transparent 52%),
    url("images/trucker-heaven-aerial.jpg") center 53% / cover;
  box-shadow: 0 28px 76px rgb(25 57 77 / 17%), inset 0 1px 0 #fff;
}
.parking-hero::after {
  background: linear-gradient(115deg, rgb(255 255 255 / 70%), transparent 27%, transparent 72%, rgb(70 133 181 / 12%));
}
.hero-copy-block { max-width: 670px; }
.hero-brand {
  width: min(230px, 64vw);
  margin-bottom: 30px;
  border-color: rgb(40 85 165 / 13%);
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 12px 28px rgb(33 71 97 / 12%), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.booking-heading .eyebrow { color: var(--brand-blue); }
.booking-heading h1 {
  max-width: 650px;
  color: var(--text);
  font-size: clamp(3.1rem, 7.2vw, 6.7rem);
  line-height: .87;
  text-shadow: 0 1px 0 rgb(255 255 255 / 88%);
}
.booking-heading h1 span { display: block; }
.booking-heading h1 span:last-child { color: var(--brand-blue); }
.hero-support { color: #3f5660; }
.timezone-chip, .context-chip {
  border-color: rgb(40 85 165 / 14%);
  background: rgb(255 255 255 / 77%);
  color: #435c67;
  box-shadow: inset 0 1px 0 #fff;
}
.parking-hero .timezone-chip { color: #435c67; }

.progress {
  position: relative;
  z-index: 9;
  width: min(860px, calc(100% - 32px));
  margin: -30px auto 20px;
  border-color: rgb(255 255 255 / 92%);
  background: linear-gradient(135deg, rgb(255 255 255 / 91%), rgb(240 248 251 / 75%));
  box-shadow: 0 15px 40px rgb(25 57 77 / 13%), inset 0 1px 0 #fff;
}
.progress li, .progress .GlassStep { color: #768992; }
.progress li > span {
  border-color: rgb(42 80 108 / 19%);
  background: rgb(255 255 255 / 75%);
  color: #60757e;
}
.progress .is-current {
  border-color: rgb(131 170 73 / 34%);
  background: linear-gradient(145deg, rgb(247 252 241 / 94%), rgb(255 255 255 / 74%));
  box-shadow: inset 0 1px 0 #fff;
  color: #38571d;
}
.progress .is-current > span { background: var(--brand-green); color: #fff; }
.progress .is-complete { border-color: rgb(131 170 73 / 15%); color: #557331; }
.progress .is-complete > span { background: rgb(131 170 73 / 14%); color: #50742c; }

.search-layout { align-items: start; gap: 20px; }
.search-panel, .offers-panel, .details-panel { border-top-color: #fff; }
.screen-heading h2, .page-head h2, .offers-heading h2, .lookup-heading h2,
.property-copy h2, .summary-heading h2, .portal-section-heading h2 { color: var(--text); }
.eyebrow, .step-label, .card-kicker { color: var(--brand-blue); }
.location-inline {
  border-color: var(--border);
  background: rgb(255 255 255 / 52%);
  box-shadow: inset 0 1px 0 #fff;
}
.location-mark { border-color: rgb(40 85 165 / 18%); background: var(--blue-soft); color: var(--brand-blue); }
.plain-fieldset legend, .duration-choices legend, label, .details-panel legend { color: #2c424c; }
input, select, textarea,
.GlassInput input, .GlassInput select, .GlassInput textarea {
  border-color: rgb(53 88 111 / 22%);
  background: linear-gradient(180deg, rgb(255 255 255 / 92%), rgb(245 249 250 / 78%));
  box-shadow: inset 0 2px 4px rgb(36 72 94 / 6%), inset 0 1px 0 #fff;
  color: var(--text);
  caret-color: var(--brand-blue);
}
input:hover, select:hover, textarea:hover { border-color: rgb(40 85 165 / 35%); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-blue);
  background: #fff;
  box-shadow: inset 3px 0 0 var(--brand-green), var(--focus);
}
input::placeholder, textarea::placeholder { color: #809099; }
input[type="date"], input[type="time"] { color-scheme: light; }

.parking-type-card, .duration-option, .document-type-choice {
  border-color: var(--border);
  background: linear-gradient(145deg, rgb(255 255 255 / 80%), rgb(239 247 250 / 69%));
  box-shadow: inset 0 1px 0 #fff;
  color: var(--text);
}
.parking-type-card:hover, .duration-option:hover, .document-type-choice:hover { border-color: rgb(40 85 165 / 31%); }
.parking-type-card.is-selected, .parking-type-card.is-bobtail.is-selected,
.duration-option.is-selected, .document-type-choice[aria-pressed="true"] {
  border-color: var(--brand-green);
  background: linear-gradient(145deg, #fff, #eef7e5);
  box-shadow: inset 3px 0 0 var(--brand-green), 0 11px 28px rgb(72 103 37 / 12%);
  color: var(--text);
}
.parking-type-marker, .offer-symbol { border-color: rgb(40 85 165 / 19%); background: var(--blue-soft); color: var(--brand-blue); }
.parking-type-copy > strong, .offer-copy h3, .information-card h4, .quote-summary h4 { color: var(--text); }
.parking-type-rate, .price { color: #50782a; }
.duration-badges span { border-color: rgb(131 170 73 / 28%); color: #557331; }

.button, .GlassButton {
  border-color: #92b968;
  background: linear-gradient(145deg, #9cc66c, #78a944);
  box-shadow: 0 10px 24px rgb(63 96 29 / 18%), inset 0 1px 0 rgb(255 255 255 / 45%);
  color: #102008;
}
.button:hover, .GlassButton:hover { border-color: #759d48; background: linear-gradient(145deg, #acd47e, #87b653); }
.button:disabled { border-color: #ccd5d9; background: #dfe6e9; color: #78888f; }
.secondary-button {
  border-color: rgb(40 85 165 / 23%);
  background: linear-gradient(145deg, rgb(255 255 255 / 90%), rgb(235 242 249 / 82%));
  box-shadow: inset 0 1px 0 #fff;
  color: var(--brand-blue);
}
.secondary-button:hover { border-color: rgb(40 85 165 / 40%); background: #fff; }
.text-button, .text-link { color: var(--brand-blue); }
.text-button:hover, .text-link:hover { color: #50782a; }
.danger-button { border-color: rgb(167 47 42 / 27%); background: #fff1f0; color: #912c27; }
.self-service-button { border-color: #6e9637; background: #739f3f; color: #fff; }

.message { color: #455f6a; }
.message.error, .error-state { border-color: rgb(167 47 42 / 28%); background: #fff1f0; color: #922e29; }
.loading-state, .portal-loading {
  border-color: var(--border);
  background: linear-gradient(110deg, rgb(245 249 250 / 86%) 20%, rgb(224 237 244 / 92%) 38%, rgb(245 249 250 / 86%) 56%);
  color: #435d68;
}
.empty-state, .portal-empty { border-color: var(--border); background: rgb(255 255 255 / 52%); color: var(--text-muted); }

.property-panel { border-color: var(--glass-edge); background: var(--glass-reflection), var(--glass-base); }
.property-image-wrap { min-height: 390px; border-bottom-color: var(--border); }
.property-image-wrap img { filter: saturate(.96) contrast(.96) brightness(1.05); }
.property-image-wrap::after { height: 44%; background: linear-gradient(transparent, rgb(237 246 248 / 88%)); }
.image-badge { border-color: rgb(255 255 255 / 79%); background: rgb(255 255 255 / 76%); color: var(--text); }
.property-details dd, .search-overview dd, .review-facts dd { color: var(--text); }
.assignment-note, .automatic-assignment { border-color: rgb(131 170 73 / 29%); background: rgb(242 249 234 / 78%); }
.assignment-note > span, .automatic-assignment > span { background: var(--brand-green); color: #fff; }
.assignment-note strong, .automatic-assignment strong { color: #39591d; }
.assignment-note p, .automatic-assignment p { color: #577242; }

.availability-card, .GlassOffer {
  border-color: var(--border);
  background: linear-gradient(145deg, rgb(255 255 255 / 83%), rgb(238 247 250 / 68%));
  box-shadow: inset 0 1px 0 #fff;
  color: var(--text);
}
.availability-card.is-selected, .GlassOffer[aria-pressed="true"] {
  border-color: var(--brand-green);
  background: linear-gradient(145deg, #fff, #eef7e8);
  box-shadow: inset 4px 0 0 var(--brand-green), 0 17px 38px rgb(61 92 35 / 13%);
}
.capacity { color: #557b30; }
.quote-summary > section, .information-card,
.details-panel fieldset, .terms, .billing-summary, .lookup-form {
  border-color: var(--border);
  background: rgb(255 255 255 / 54%);
  color: var(--text);
}
.quote-lines dd, .quote-lines .quote-total dd { color: var(--text); }
.quote-lines .quote-total dt, .quote-lines .quote-total dd { border-color: var(--border); color: #52792d; }
.terms .check, .terms .check span { color: #304750; }
.verification-fieldset, .document-upload-card {
  border-color: rgb(131 170 73 / 33%);
  background: linear-gradient(145deg, rgb(247 252 242 / 88%), rgb(255 255 255 / 68%));
}
.selected-file { border-color: var(--border); background: rgb(255 255 255 / 66%); color: var(--text); }
.secure-payment-note, .privacy-note { border-color: rgb(40 85 165 / 15%); background: rgb(239 245 251 / 73%); color: #50646e; }
.secure-payment-note strong { color: var(--brand-blue); }
.secure-payment-note p, .summary-assignment-note p { color: #50646e; }
.summary-assignment-note { border-color: var(--brand-green); background: #f2f8ec; }

.pass-status, .management-status { border-color: var(--border); background: rgb(255 255 255 / 57%); }
.confirmation-banner { background: radial-gradient(circle at 90% 20%, rgb(131 170 73 / 13%), transparent 24rem); }
.confirmation-mark { border-color: var(--brand-green); color: #5e8731; }
.assigned-space-card { border-color: var(--brand-green); background: linear-gradient(145deg, #f5faef, rgb(255 255 255 / 80%)); }
.assigned-space-card span, .assigned-space-card small, .assigned-space-card strong { color: #4b7025; }
.confirmation-credentials > div, .recovery-details, .remember-control, .reservation-facts,
.pass-details section, .pass-details dl div, .written-directions > div {
  border-color: var(--border);
  background: rgb(255 255 255 / 60%);
}
.confirmation-credentials strong, .confirmation-credentials code, .reservation-facts strong,
.pass-details dd, .recent-reservation-card dd { color: var(--text); }
.arrival-callout, .pending-assignment, .assigned-navigation-card { border-color: rgb(40 85 165 / 25%); background: rgb(40 85 165 / 7%); }
.assigned-navigation-card strong { color: var(--brand-blue); }
.reservation-saved { padding: clamp(30px, 5vw, 58px); border-color: rgb(131 170 73 / 35%); background: linear-gradient(135deg, #f4faed, rgb(255 255 255 / 76%)); text-align: center; }
.reservation-saved::before { display: grid; width: 68px; height: 68px; margin: 0 auto 16px; place-items: center; border-radius: 50%; background: var(--brand-green); color: #fff; content: "✓"; font-size: 2rem; }
.reservation-saved h2 { color: #315719; font-size: clamp(2.5rem, 7vw, 5.5rem); letter-spacing: -.05em; }
.reservation-saved p:last-child { color: #526a46; }

.monthly-selector { border-color: var(--border-strong); background: rgb(255 255 255 / 66%); }
.monthly-selector-head h3 { color: var(--text); }
.selected-monthly-position strong, .map-area-label { color: #50782a; }
.monthly-map-stage, .map-stage {
  border-color: var(--border);
  background-color: #e7eef1;
  background-image: linear-gradient(rgb(40 85 165 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(40 85 165 / 5%) 1px, transparent 1px);
}
.map-controls button { border-color: var(--border-strong); background: rgb(255 255 255 / 91%); color: var(--brand-blue); }
.map-controls button:hover { color: #50782a; }
.map-area-label { border-color: var(--brand-green); background: rgb(255 255 255 / 91%); }

.GlassModal, dialog {
  border-color: var(--glass-edge);
  background: var(--glass-reflection), linear-gradient(145deg, rgb(255 255 255 / 98%), rgb(235 245 249 / 96%));
  box-shadow: 0 34px 100px rgb(18 48 67 / 28%), inset 0 1px 0 #fff;
  color: var(--text);
}
dialog::backdrop { background: rgb(30 54 67 / 32%); }
.dialog-close { border-color: var(--border); background: #fff; color: var(--text); }

.portal-login-card h1, .portal-card-heading h3 { color: var(--text); }
.portal-tabs { border-color: var(--glass-edge); background: rgb(255 255 255 / 68%); box-shadow: inset 0 1px 0 #fff; }
.portal-tabs button[aria-current="page"] { background: rgb(131 170 73 / 16%); color: #50742c; }
.portal-section { padding: clamp(18px, 4vw, 32px); border: 1px solid var(--glass-edge); border-radius: var(--radius-lg); background: var(--glass-reflection), var(--glass-base); box-shadow: var(--glass-shadow); }
.portal-parking-card {
  position: relative;
  overflow: hidden;
  min-height: 238px;
  padding: clamp(24px, 4vw, 38px);
  border-left: 0;
  border-top: 4px solid var(--brand-green);
  border-radius: 24px;
}
.portal-parking-card::after { position: absolute; right: -60px; bottom: -80px; width: 190px; height: 190px; border: 1px solid rgb(40 85 165 / 8%); border-radius: 50%; background: radial-gradient(circle, rgb(40 85 165 / 7%), transparent 65%); content: ""; }
.portal-parking-card.is-monthly { border-top-color: var(--brand-blue); }
.portal-status, .safe-document-status { background: #edf6e6; color: #50742c; }
.portal-list-row { border-color: var(--border); background: rgb(255 255 255 / 62%); }
.portal-empty { border-color: var(--border-strong); background: rgb(255 255 255 / 48%); }
.document-type-choice { color: var(--text); }
.document-success { border-left-color: var(--brand-green); }
footer { border-color: var(--border); color: var(--text-muted); }
footer strong { color: var(--brand-blue); }
footer a { color: var(--brand-blue); }

@media (max-width: 820px) {
  .parking-hero { min-height: 400px; background-position: 58% 53%; }
  .property-panel { border-radius: 22px; }
}

@media (max-width: 640px) {
  .parking-hero {
    min-height: 390px;
    padding: 28px 20px 34px;
    background:
      linear-gradient(90deg, rgb(248 252 253 / 96%) 0%, rgb(248 252 253 / 83%) 56%, rgb(248 252 253 / 25%) 100%),
      url("images/trucker-heaven-aerial.jpg") 57% center / cover;
  }
  .booking-heading h1 { font-size: clamp(2.75rem, 14vw, 4.35rem); }
  .progress { width: calc(100% - 18px); margin-top: -25px; }
  .GlassActionBar { border-color: var(--glass-edge); background: rgb(255 255 255 / 88%); box-shadow: 0 14px 34px rgb(26 58 77 / 14%), inset 0 1px 0 #fff; }
  .portal-section { padding: 16px; }
}

@media (max-width: 430px) {
  .parking-hero { min-height: 370px; }
  .hero-brand { width: 176px; }
  .parking-hero .timezone-chip { background: rgb(255 255 255 / 82%); }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .LiquidGlass, .GlassNav, .GlassPanel, .GlassOffer, .GlassModal, .GlassActionBar,
  .panel, .portal-login-card, .document-upload-card {
    background-color: #f8fbfc;
    background-image: linear-gradient(145deg, #fff, #edf5f8);
  }
}

/* Focused premium blue-glass tone. This final cascade changes only atmosphere
   and contrast; the booking structure and operational map stay unchanged. */
:root {
  --page: #cbd9e6;
  --page-deep: #b9cbdb;
  --surface: rgb(230 240 249 / 78%);
  --surface-raised: rgb(241 247 252 / 92%);
  --surface-soft: rgb(217 232 244 / 78%);
  --border: rgb(24 67 111 / 20%);
  --border-strong: rgb(24 67 111 / 31%);
  --glass-base: linear-gradient(145deg, rgb(237 245 251 / 84%), rgb(201 220 236 / 74%));
  --glass-edge: rgb(255 255 255 / 56%);
  --glass-shadow: 0 18px 48px rgb(13 39 68 / 16%), inset 0 1px 0 rgb(255 255 255 / 66%);
  --text: #102b42;
  --text-muted: #4b6578;
}
body {
  background:
    radial-gradient(circle at 8% 0%, rgb(74 130 184 / 31%), transparent 34rem),
    radial-gradient(circle at 94% 18%, rgb(121 164 73 / 15%), transparent 28rem),
    linear-gradient(155deg, #b9cede 0%, #d7e3ec 48%, #bdcfdd 100%);
}
header .GlassNav {
  border-bottom-color: rgb(183 216 241 / 24%);
  background: linear-gradient(110deg, rgb(6 37 70 / 92%), rgb(13 64 105 / 84%));
  box-shadow: 0 12px 34px rgb(4 24 46 / 22%);
  backdrop-filter: blur(14px) saturate(118%);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
}
.GlassNav a, .GlassNav button { color: #edf7ff; }
.GlassNav .text-button:hover, .GlassNav a:hover { color: #b9d887; }
.booking-heading.parking-hero {
  background:
    linear-gradient(90deg, rgb(5 34 63 / 91%) 0%, rgb(8 49 87 / 75%) 47%, rgb(10 54 91 / 28%) 100%),
    url("images/trucker-heaven-aerial.jpg") center 53% / cover;
  box-shadow: 0 24px 66px rgb(7 35 61 / 24%);
}
.parking-hero h1, .parking-hero h2, .parking-hero p, .parking-hero .eyebrow { color: #f4f9fc; text-shadow: 0 2px 18px rgb(1 17 32 / 35%); }
.parking-hero .timezone-chip { border-color: rgb(220 239 251 / 30%); background: rgb(4 30 55 / 48%); color: #eff8fd; }
.LiquidGlass, .GlassPanel, .panel, .portal-section, .property-panel {
  background: var(--glass-reflection), var(--glass-base);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(11px) saturate(112%);
  -webkit-backdrop-filter: blur(11px) saturate(112%);
}
.GlassOffer, .parking-type-card, .duration-option, .availability-card,
.information-card, .quote-summary > section, .details-panel fieldset, .terms, .billing-summary, .lookup-form {
  background: linear-gradient(145deg, rgb(242 248 252 / 86%), rgb(211 227 239 / 72%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 65%);
  backdrop-filter: blur(7px) saturate(108%);
  -webkit-backdrop-filter: blur(7px) saturate(108%);
}
input, select, textarea, .GlassInput input, .GlassInput select, .GlassInput textarea {
  border-color: rgb(27 74 116 / 27%);
  background: rgb(245 249 252 / 90%);
  color: #102b42;
}
.monthly-map-stage, .map-stage { backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 640px) {
  .booking-heading.parking-hero {
    background:
      linear-gradient(90deg, rgb(5 34 63 / 94%) 0%, rgb(8 49 87 / 79%) 62%, rgb(10 54 91 / 48%) 100%),
      url("images/trucker-heaven-aerial.jpg") 57% center / cover;
  }
  .GlassActionBar { background: rgb(12 49 81 / 92%); }
  .GlassActionBar .button, .GlassActionBar .secondary-button { color: #f4f9fc; }
}