/* 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; }
  header, footer, main, main > section, main > div, main > div > div { padding-left: 20px !important; padding-right: 20px !important; }
  main > div > div > div { padding-left: 0 !important; padding-right: 0 !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; }
}

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