/* AutoShuk — custom rules layered on top of Tailwind (see theme.js).
 * The "Apex Automotive" look: machined silver borders, soft ambient shadows,
 * electric-blue focus, and a couple of components Tailwind utilities don't cover. */

:root { --silver: #e2e8f0; --field: #f1f5f9; --ambient: 0px 4px 20px rgba(15, 23, 42, 0.08); }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }

/* Machined 1px silver outline used on all container boundaries. */
.machined-border { border: 1px solid var(--silver); }

/* Soft lift on interactive containers (cards, tiles). */
.ambient { transition: box-shadow .3s ease, transform .3s ease; }
.ambient:hover { box-shadow: var(--ambient); transform: translateY(-2px); }
.ambient-shadow:hover { box-shadow: var(--ambient); }
.premium-shadow { box-shadow: var(--ambient); }

/* Inputs: grey field that turns white with an electric-blue ring on focus. */
.field { background: var(--field); border: 1px solid transparent; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.field:focus, .field:focus-within { outline: none; border-color: #0058be; background: #fff; box-shadow: 0 0 0 1px #0058be; }
input:focus, select:focus, textarea:focus { outline: none; }

/* Material Symbols baseline. */
.material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; vertical-align: middle; user-select: none; }

/* Hero overlay gradient (sits above the background image, below the text). */
.hero-scrim { background: linear-gradient(180deg, rgba(13, 20, 36, .62) 0%, rgba(13, 20, 36, .82) 100%); }
/* Home hero: mostly clear up top so the photo's sky shows, darker toward the
 * bottom where the search bar sits. Paired with .hero-textfx for legibility. */
.hero-scrim-home { background: linear-gradient(180deg, rgba(13, 20, 36, .14) 0%, rgba(13, 20, 36, .30) 46%, rgba(13, 20, 36, .80) 100%); }
.hero-textfx { text-shadow: 0 2px 16px rgba(8, 12, 24, .55), 0 1px 4px rgba(8, 12, 24, .5); }

/* Color swatch dot for a vehicle's exterior color. */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 9999px; border: 1px solid rgba(15, 23, 42, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); vertical-align: middle; }

/* ---- Detail modal ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(8, 15, 30, .55); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-card { background: #fff; border-radius: .5rem; max-width: 520px; width: 100%; max-height: 92vh; overflow: auto; box-shadow: 0 20px 50px rgba(15, 23, 42, .3); position: relative; }

/* Range sliders (inventory filters). */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: #e2e8f0; outline: none; cursor: pointer; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #0058be; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); cursor: pointer; }
.slider::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: #0058be; box-shadow: 0 1px 3px rgba(15, 23, 42, .35); cursor: pointer; }

/* Hide the scrollbar on the horizontal category rail (still swipe/drag-scrolls). */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* Line-clamp helper for long descriptions in cards. */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Hide number-input spinners in the price filter. */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }