/* Woldu Select Auto — base styles.
   Brand: bg #0B0C0D · card #141718 · text #F2F3F3 · accent #35D0C4 · hover #7FD7E8
   Light (admin/shop): bg #F4F4F2 · text #14171A · accent #0E8C84
   Corners 2px. No gradients on type. Figtree throughout. Mobile first. */

html, body { margin: 0; padding: 0; background: #0B0C0D; }
body {
  font-family: Figtree, system-ui, -apple-system, sans-serif;
  color: #F2F3F3;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
* { box-sizing: border-box; }
a { color: #35D0C4; text-decoration: none; }
a:hover { color: #7FD7E8; }
button, input, select, textarea { font-family: Figtree, system-ui, sans-serif; }
::placeholder { color: #8A8F90; opacity: 1; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #35D0C4; outline-offset: 2px; }

.boot { min-height: 100vh; display: grid; place-items: center; }
.boot-inner { text-align: center; opacity: .7 }
.boot-inner p { margin-top: 18px; font: 600 13px Figtree; letter-spacing: .12em; color: rgba(242,243,243,.6) }

/* hover behaviour that inline styles cannot express */
[data-hover="accent-bg"]:hover { background: #7FD7E8 !important; }
[data-hover="accent-border"]:hover { border-color: #35D0C4 !important; }
[data-hover="accent-text"]:hover { color: #35D0C4 !important; }
[data-hover="accent-both"]:hover { border-color: #35D0C4 !important; color: #35D0C4 !important; }
[data-hover="light-bg"]:hover { background: #35D0C4 !important; }
[data-hover="dark-teal"]:hover { background: #0E8C84 !important; }
[data-hover="danger"]:hover { background: #B03030 !important; color: #fff !important; }
[data-hover="danger-border"]:hover { border-color: #B4432A !important; color: #B4432A !important; }
[data-hover="teal-border"]:hover { border-color: #0E8C84 !important; color: #0E8C84 !important; }
[data-hover="dark-border"]:hover { border-color: #0B0C0D !important; }
[data-hover="fill-teal"]:hover { background: #35D0C4 !important; color: #08201F !important; }
button:disabled, [disabled] { cursor: not-allowed; }

/* spinner used on submit buttons */
.spin::after {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 9px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -2px; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 130%);
  z-index: 200; max-width: min(520px, calc(100vw - 32px));
  padding: 15px 20px; border-radius: 2px;
  background: #141718; border: 1px solid #35D0C4; color: #F2F3F3;
  font: 600 14px/1.5 Figtree; box-shadow: 0 18px 44px rgba(0,0,0,.5);
  transition: transform .26s cubic-bezier(.2,.8,.3,1);
}
#toast.show { transform: translate(-50%, 0); }
#toast.bad { border-color: #E07A5A; }

@media (max-width: 1000px) {
  [data-r="split"] { grid-template-columns: 1fr !important; }
  [data-r="g4"], [data-r="g3"], [data-r="g6"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r="days"] { grid-template-columns: repeat(4, 1fr) !important; }
  [data-r="vin"] { grid-template-columns: 1fr !important; }
  [data-r="times"] { grid-template-columns: repeat(3, 1fr) !important; }
  [data-r="row"], [data-r="row3"] { grid-template-columns: 1fr !important; }
  [data-r="row"] > *, [data-r="row3"] > * { justify-self: stretch; }
  [data-r="row"] > div:first-child { aspect-ratio: 16/9 !important; width: 100%; }
  [data-r="row"] button, [data-r="row"] label { min-height: 44px; }
  [data-r="row"] input, [data-r="row"] select { width: 100%; }
  [data-r="g3"] > * { grid-column: auto !important; }
  [data-r="bigtile"] { grid-row: auto !important; aspect-ratio: 16/9 !important; }
  [data-t="split"] { grid-template-columns: 1fr !important; }
  [data-t="g4"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-t="cmp"] { grid-template-columns: 110px repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
  [data-m="nav"] { display: none !important; }
  [data-m="chipscroll"] {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; max-width: 100%;
  }
  [data-m="chipscroll"]::-webkit-scrollbar { display: none; }
  [data-m="chipscroll"] > * { flex: 0 0 auto; }
  [data-m="burger"] { display: flex !important; }
  [data-m="scrollx"] { overflow-x: auto !important; }
  [data-m="minw"] { min-width: 680px; }
}

@media (max-width: 640px) {
  [data-r="g2"], [data-r="g3"], [data-r="g4"], [data-r="g6"], [data-r="foot"] { grid-template-columns: 1fr !important; }
  [data-r="days"], [data-r="times"] { grid-template-columns: repeat(2, 1fr) !important; }
  /* Page gutters. Only the elements that actually declare one are reduced —
     tagged with data-pad on the public pages, data-m="apad" in the manager.
     The old rule padded main, its child AND its grandchild, so gutters stacked
     three deep; the blanket reset that compensated was matching every card in
     the manager and stripping the padding off its own contents, which is what
     pushed the VIN decoder and Add-a-vehicle fields flush to their edges. */
  header, footer { padding-left: 20px !important; padding-right: 20px !important; }
  [data-pad] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r="vin"] button { width: 100%; }
  h1 { font-size: 30px !important; }
  h2 { font-size: 22px !important; }
  [data-m="hero"] { min-height: 0 !important; }
  [data-m="herotext"] { padding: 56px 20px !important; gap: 26px !important; }
  [data-m="unstick"] { position: static !important; }
  [data-m="stickybar"] { display: grid !important; }
  [data-m="detailmain"] { padding-bottom: 96px !important; }
  [data-t="g4"] { grid-template-columns: 1fr !important; }
}

/* Vehicle photo thumbnails stay a strip on phones — stacking them full-width
   buries the specs and the finance panel under seven screens of pictures. */
@media (max-width: 1000px) {
  [data-r="thumbs"] { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (max-width: 640px) {
  [data-r="thumbs"] { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
}


/* ============================================================
   Mobile fitting rules.
   Everything below exists because a phone is the primary screen
   for this site — staff add vehicles from the lot on a handset.
   ============================================================ */

/* Grid and flex items default to min-width:auto, so a <select> full of long
   option text ("Sport Utility Vehicle [SUV]") refuses to shrink and shoves the
   whole page sideways. This is the single biggest cause of horizontal scroll. */
[data-r] > *, [data-t] > *,
[data-r] > * > *, [data-t] > * > * { min-width: 0; }

/* Nothing in a form may exceed its container, whatever its content measures. */
input, select, textarea, button, label { max-width: 100%; }
select { text-overflow: ellipsis; }
img, iframe, video, table { max-width: 100%; }

/* Long unbroken strings — VINs, stock numbers, emails — must wrap rather than
   stretch their row. */
input, select, textarea { overflow-wrap: break-word; }

@media (max-width: 1000px) {
  /* Once a grid collapses to one column, a cell asking to span two columns
     invents a second track and doubles the block's width. */
  [data-r="wide"], [data-r="g6"] > [style*="span"], [data-r="g4"] > [style*="span"] {
    grid-column: auto !important;
  }
}

@media (max-width: 760px) {
  /* Desktop padding (36–44px a side) eats a 320px screen alive. */
  [data-m="apad"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [data-pad] { padding-left: 24px !important; padding-right: 24px !important; }
}

@media (max-width: 640px) {
  /* The manager's rows are label/value pairs on desktop; stack them on a phone. */
  [data-r="g6"], [data-r="vin"], [data-r="row3"], [data-r="row2"] { grid-template-columns: 1fr !important; }
  [data-r="row2"] > button { justify-self: stretch; }
  [data-m="apad"] { padding-left: 14px !important; padding-right: 14px !important; }
}

@media (max-width: 400px) {
  /* Two stat tiles side by side stop fitting once the label wraps. */
  [data-r="stats"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  /* A 72px logo in a sticky bar costs an eighth of a phone screen on every
     page. Shrink it so more of the actual content is visible. */
  header img { height: 52px !important; }
  header { padding-top: 10px !important; padding-bottom: 10px !important; }
  /* Let the "car finder tags" caption own its own line above the checkboxes. */
  [data-m="tagrow"] > p:first-child { flex-basis: 100%; margin-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}