/*
 * Sieton Auto — hand-written component styles (NOT generated by Tailwind).
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * These rules used to live at the bottom of the compiled `theme.css`. Because
 * `theme.css` is a build artifact, running the Tailwind CLI
 * (`npx tailwindcss -c tailwind.config.js -i assets/css/input.css -o assets/css/theme.css --minify`)
 * silently deleted every one of them and broke the layout. They are now kept
 * here so a rebuild can never wipe them.
 *
 * HOW IT IS LOADED
 * ----------------
 * `functions.php` → `sieton_scripts()` enqueues this file as the `sieton-custom`
 * handle with `sieton-theme` (theme.css) as a dependency, so it always loads
 * AFTER the Tailwind artifact and keeps the same cascade order as before.
 * It is intentionally NOT `@import`ed from `input.css` — that would duplicate
 * (and, on rebuild, re-embed) the rules.
 *
 * WHAT IS IN HERE
 * ---------------
 *  - A few Tailwind utility classes that the original compile never emitted
 *    (hero dots, gradient fallback, `animate-spin` with the theme keyframes,
 *    `.h-[400px]`, `translate`/`opacity` helpers …) — hand-patched at some point,
 *    so they are preserved here instead of being lost or regenerated incorrectly.
 *  - Theme components that are not part of the React/Tailwind design system:
 *    hero slideshow fixes, WhatsApp floating widget, category strip, sales team
 *    cards, car brand badge, sidebar brand chips, Leaflet pin override,
 *    car detail gallery (+ mobile/iOS fallbacks), Features chips,
 *    car category chip, results-info wrapper.
 *
 * HOUSEKEEPING
 * ------------
 *  - Formatting was normalised (one rule per line, at-rule blocks indented) —
 *    every declaration is byte-identical to the original artifact.
 *  - The "Inspection Report additions" block (`details[open] > summary .chevron-icon`,
 *    `.bg-orange-50`, …) appears to be dead: no template emits that markup today.
 *    Kept for reference; safe to delete once confirmed unused.
 *  - If a rule here is actually a plain Tailwind utility, prefer adding the
 *    class to `tailwind.config.js`/`input.css` and deleting it here.
 */

.animate-spin{animation:sieton-spin 1s linear infinite}
@keyframes sieton-spin{
  to{transform:rotate(360deg)}
}
.border-t-transparent{border-top-color:transparent}
.js-hero-finder select option{color:#1a1a1a!important;background-color:#fff!important}
.js-hero-finder select option:checked,.js-hero-finder select option:hover{color:#fff!important;background-color:#1e88e5!important}
/* Hero slideshow — missing Tailwind utility classes (not in original compile) */
.bottom-6{bottom:1.5rem}
.left-1\/2{left:50%}
.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.z-20{z-index:20}
.w-2\.5{width:.625rem}
.h-2\.5{height:.625rem}
.bg-white\/40{background-color:hsla(0,0%,100%,.4)}
.hover\:bg-white\/70:hover{background-color:hsla(0,0%,100%,.7)}
.ml-2{margin-left:.5rem}
.duration-1000{transition-duration:1s}
.hover\:bg-black\/60:hover{background-color:rgba(0,0,0,.6)}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.from-gray-900{--tw-gradient-from:#111827 var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-gray-800{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#1f2937 var(--tw-gradient-via-position),var(--tw-gradient-to)}
.to-black{--tw-gradient-to:#000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
/* Inspection Report additions */
.bg-orange-50{background-color:#fff7ed}
.bg-red-50{background-color:#fef2f2}
.text-orange-600{color:#ea580c}
.border-orange-100{border-color:#ffedd5}
.select-none{-webkit-user-select:none;user-select:none}
.min-w-0{min-width:0}
.last\:border-b-0:last-child{border-bottom-width:0}
.chevron-icon{transition:transform .2s ease;display:inline-flex;align-items:center}
details[open] > summary .chevron-icon{transform:rotate(180deg)}
details > summary{list-style:none}
details > summary::-webkit-details-marker{display:none}
.flex-shrink-0{flex-shrink:0}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.duration-300{transition-duration:300ms}
.h-\[400px\]{height:400px}
/* ------------------------------------------------------------------ */
/* WhatsApp floating widget                                            */
/* ------------------------------------------------------------------ */
.sieton-wa{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:inherit}
@media (max-width:1023.98px){
  .sieton-wa{right:16px;bottom:80px}
}
.sieton-wa__panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(320px,calc(100vw - 40px));background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:16px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:opacity .25s ease,transform .25s ease,visibility .25s}
.sieton-wa.is-open .sieton-wa__panel{opacity:1;visibility:visible;transform:none}
@media (hover:hover){
  .sieton-wa:hover .sieton-wa__panel,.sieton-wa:focus-within .sieton-wa__panel{opacity:1;visibility:visible;transform:none}
}
.sieton-wa__panel-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#16a34a;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.sieton-wa__dot{width:8px;height:8px;border-radius:9999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2);flex-shrink:0}
.sieton-wa__greeting{font-size:14px;line-height:1.6;color:#374151;margin:0 0 12px}
.sieton-wa__cta{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:12px;background:#25D366;color:#fff;font-weight:700;font-size:15px;text-decoration:none;transition:background .2s ease}
.sieton-wa__cta:hover{background:#1fbd59}
.sieton-wa__cta svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.sieton-wa__trigger{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 22px 0 14px;background:#25D366;color:#fff;border:0;border-radius:9999px;cursor:pointer;font-size:15px;font-weight:600;font-family:inherit;box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.sieton-wa__trigger:hover{background:#1fbd59;transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.55)}
.sieton-wa__icon{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sieton-wa__icon svg{width:26px;height:26px;fill:currentColor}
.sieton-wa__icon::after{content:"";position:absolute;inset:-4px;border-radius:9999px;border:2px solid rgba(255,255,255,.7);animation:sieton-wa-pulse 2.2s ease-out infinite}
.sieton-wa__label{white-space:nowrap;padding-left:2px}
@keyframes sieton-wa-pulse{
  0%{transform:scale(.8);opacity:.9}
  70%,100%{transform:scale(1.45);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .sieton-wa__panel,.sieton-wa__trigger{transition:none}
  .sieton-wa__icon::after{animation:none}
}
/* ------------------------------------------------------------------ */
/* Category strip — Buy It Now / Auctions / New Cars / Fleet Cars     */
/* Inserted between Hero and Hot Sales on the front page.             */
/* ------------------------------------------------------------------ */
.category-strip{background:#f4f5f7;padding:44px 0}
.category-strip__grid{max-width:1280px;margin:0 auto;padding:0 1.25rem;display:grid;grid-template-columns:1fr;gap:20px}
.cat-card{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:128px;padding:24px 26px;border-radius:22px;color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 10px 24px rgba(15,23,42,.08);transition:transform .25s ease,box-shadow .25s ease}
.cat-card:focus-visible{outline:3px solid rgba(25,118,21,.55);outline-offset:2px}
@media (hover:hover){
  .cat-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(15,23,42,.16)}
}
.cat-card--orange{background:linear-gradient(135deg,#ee8c14 0%,#f7a628 100%)}
.cat-card--blue{background:linear-gradient(135deg,#3573e8 0%,#4f86f7 100%)}
.cat-card--green{background:linear-gradient(135deg,#1ab55c 0%,#2fd073 100%)}
.cat-card__body{display:block;position:relative;z-index:1;max-width:66%}
.cat-card__title{display:block;font-size:23px;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:#fff;margin:0 0 7px}
.cat-card__sub{display:block;font-size:18px;font-weight:600;line-height:1.35;color:#fff;margin:0}
.cat-card__sub--inline-arrow{display:flex;align-items:center;gap:8px;white-space:nowrap}
.cat-card__arrow-icon{width:21px;height:21px;flex-shrink:0}
.cat-card__arrow-icon--block{display:block;margin-top:7px}
.cat-card__art{position:absolute;right:0;bottom:0;width:108px;height:108px;opacity:.5;pointer-events:none;z-index:0}
.cat-card__art--badge{width:112px;height:112px;opacity:.62}
@media (min-width:640px){
  .category-strip__grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .cat-card{min-height:150px;padding:28px 30px;border-radius:24px}
  .cat-card__title{font-size:26px;margin-bottom:8px}
  .cat-card__sub{font-size:20px}
  .cat-card__art{width:114px;height:114px}
  .cat-card__art--badge{width:118px;height:118px}
}
@media (min-width:1024px){
  .category-strip{padding:52px 0}
  .category-strip__grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .cat-card{min-height:158px;padding:30px 32px}
  .cat-card__body{max-width:75%}
  .cat-card__title{font-size:27px}
  .cat-card__sub{font-size:20px}
  .cat-card__art{width:114px;height:114px}
  .cat-card__art--badge{width:118px;height:118px}
}
@media (prefers-reduced-motion:reduce){
  .cat-card{transition:none}
}
/* Results info meta wrapper — keeps count/page spans in the parent flex layout */
.js-results-meta{display:contents}
/* Sales Team */
.sales-team__grid{display:grid;grid-template-columns:1fr;gap:24px}
.sales-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:32px 24px;transition:transform .3s ease,box-shadow .3s ease}
.sales-card:hover,.sales-card:focus-within{transform:scale(1.03);box-shadow:0 12px 32px rgba(27,34,51,.12);z-index:1}
.sales-card__avatar{width:120px;height:120px;border-radius:50%;overflow:hidden;flex-shrink:0;margin-bottom:16px}
.sales-card__avatar img{width:100%;height:100%;object-fit:cover;display:block}
.sales-card__initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:34px;letter-spacing:1px;user-select:none}
.sales-card__name{font-size:20px;font-weight:700;color:#1B2233;margin:0}
.sales-card__position{font-size:14px;font-weight:600;color:#64748b;line-height:1.4;margin:4px 0 0;max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);transition:max-height .3s ease,opacity .3s ease,transform .3s ease}
.sales-card:hover .sales-card__position,.sales-card:focus-within .sales-card__position{max-height:3.2em;opacity:1;transform:translateY(0)}
@media (hover:none){
  .sales-card__position{max-height:none;opacity:1;transform:none;overflow:visible}
}
.sales-card__wa{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#25D366;font-weight:600;font-size:14px;text-decoration:none;transition:color .2s ease}
.sales-card__wa:hover{color:#1DA851;text-decoration:underline}
.sales-card__wa svg{flex-shrink:0}
@media (min-width:640px){
  .sales-team__grid{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .sales-card,.sales-card:hover,.sales-card:focus-within{transform:none;transition:none}
}
/* Car brand badge */
.car-brand-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e5e7eb;border-radius:9999px;padding:4px 10px 4px 6px;font-size:12px;font-weight:600;color:#374151;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.car-brand-badge:hover{border-color:#1976D2;color:#1976D2}
.car-brand-badge img{width:20px;height:20px;object-fit:contain;border-radius:4px}
/* Hot Items brand chips (sidebar filter) */
.brand-chip{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;padding:10px 4px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.brand-chip__logo{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-chip__logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand-chip__fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#009B3F;color:#fff;font-size:13px;font-weight:700;border-radius:6px;line-height:1}
.brand-chip__name{font-size:11px;font-weight:600;color:inherit;line-height:1.2;text-align:center;word-break:break-word}
@media (min-width:640px){
  .brand-chip__logo{width:44px;height:44px}
}
/* Leaflet map pin override — divIcon default has white bg + border */
.sieton-map-pin{background:transparent;border:0}
/* Car detail gallery — stacked images + arrows + thumbnail strip */
.car-gallery__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;pointer-events:none}
.car-gallery__img.is-active{opacity:1;pointer-events:auto}
.car-gallery__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:9999px;background:rgba(255,255,255,.9);color:#1B2233;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 8px rgba(0,0,0,.15);transition:background .2s ease,opacity .2s ease;opacity:0;padding:0}
.car-gallery:hover .car-gallery__nav,.car-gallery__nav:focus-visible{opacity:1}
.car-gallery__nav--prev{left:12px}
.car-gallery__nav--next{right:12px}
.car-gallery__nav:hover{background:#fff}
@media (hover:none){
  .car-gallery__nav{opacity:1;width:36px;height:36px}
}
.car-gallery__thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.car-gallery__thumb{flex:0 0 auto;width:72px;height:54px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:#fff;transition:border-color .2s ease}
.car-gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.car-gallery__thumb.is-active{border-color:#009B3F}
@media (max-width:639px){
  .car-gallery__thumb{width:56px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .car-gallery__img{transition:none}
}
/* ------------------------------------------------------------------ */
/* Mobile & touch compatibility                                        */
/* ------------------------------------------------------------------ */
/* iOS < 14.5 ignores inset; pin explicitly (no-op on modern browsers) */
.car-gallery__img{top:0;left:0}
/* iOS < 15 has no aspect-ratio: build the 4:3 box with padding hack    */
@supports not (aspect-ratio: 4/3){.car-gallery__main::before{content:"";display:block;padding-top:75%}
}
/* Let vertical page scroll pass through; JS handles horizontal swipes  */
.car-gallery__main{touch-action:pan-y}
/* Suppress iOS long-press callout on gallery controls                  */
.car-gallery__thumb,.car-gallery__nav{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* Prevent iOS focus auto-zoom: inputs must render at >= 16px           */
@media (max-width:1023.98px){.js-filter-price-min,.js-filter-price-max,.js-filter-year-min,.js-filter-year-max{font-size:16px}
}
/* Gallery defense-in-depth: never let the strip widen its ancestors */
.car-gallery{max-width:100%;min-width:0}
.car-gallery__thumbs{min-width:0;max-width:100%}
/* Content sections (Vehicle Details, Specs, Features, Inquire) match Gallery width on PC.
   Gallery width = 100% - price box (464px) - flex gap (32px) = 100% - 496px.
   Below lg (1024px) the layout stacks, so sections stay full width like the Gallery. */
@media (min-width:1024px){
  .car-content-sections{max-width:calc(100% - 496px)}
}
/* Features section — brand-aligned: warm-white chips with green accent, transparent panel on white card */
.car-features__head{font-size:24px;font-weight:700;color:#1B2233;margin:0}
.car-features__panel{margin-top:1.5rem;background:transparent;border-radius:12px;padding:0}
.car-features__list{display:flex;flex-wrap:wrap;gap:16px}
.car-feature-chip{display:inline-flex;align-items:center;background:#fff;color:#009B3F;font-size:16px;line-height:1.4;padding:10px 20px;border-radius:6px;border:1px solid rgba(0,155,63,.25);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
.car-feature-chip:hover{transform:translateY(-1px);background:#009B3F;color:#fff;border-color:#009B3F;box-shadow:0 4px 12px rgba(0,155,63,.25)}
.car-feature-chip:focus-visible{outline:2px solid rgba(0,155,63,.5);outline-offset:2px}
@media (max-width:639px){
  .car-features__head{font-size:20px}
  .car-features__panel{padding:0;border-radius:10px}
  .car-features__list{gap:12px}
  .car-feature-chip{font-size:14px;padding:8px 14px;border-radius:6px}
}
@media (prefers-reduced-motion:reduce){
  .car-feature-chip{transition:none}
  .car-feature-chip:hover{transform:none}
}
.car-category-chip{display:inline-flex;align-items:center;background:#fff;color:#4b5563;font-size:12px;font-weight:600;padding:3px 10px;border:1px solid #e5e7eb;border-radius:4px;line-height:1.4;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.car-category-chip:hover{background:#E5F5EB;color:#009B3F;border-color:#009B3F}
@media (prefers-reduced-motion:reduce){
  .car-category-chip{transition:none}
}

/* ------------------------------------------------------------------ */
/* Shared pill search box — used by 404.php and search.php             */
/* ------------------------------------------------------------------ */
.sieton-search-pill{position:relative;max-width:560px;margin-left:auto;margin-right:auto}
.sieton-search-pill__input{
  width:100%;height:56px;padding:0 64px 0 20px;font-size:15px;color:#1B2233;
  background:#fff;border:1px solid #e5e7eb;border-radius:999px;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.sieton-search-pill__input::placeholder{color:#9ca3af}
.sieton-search-pill__input:focus{border-color:#1E88E5;box-shadow:0 0 0 3px rgba(30,136,229,.15)}
.sieton-search-pill__submit{
  position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#009B3F;color:#fff;cursor:pointer;transition:opacity .2s ease;
}
.sieton-search-pill__submit:hover{opacity:.9}
/* ------------------------------------------------------------------ */
/* 404 — recovery page (template: 404.php)                            */
/* ------------------------------------------------------------------ */
.error-404__code{
  font-size:96px;line-height:1;font-weight:800;letter-spacing:-2px;
  color:#1E88E5;                     /* fallback when gradient text is unsupported */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .error-404__code{
    background:linear-gradient(135deg,#1E88E5 0%,#0096B7 55%,#009B3F 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
@media (min-width:640px){
  .error-404__code{font-size:132px}
}
.error-404__brands .brand-chip:hover,
.error-404__brands .brand-chip:focus-visible{border-color:#009B3F;color:#009B3F;background:#E5F5EB}
@media (prefers-reduced-motion:reduce){
  .sieton-search-pill__input,.sieton-search-pill__submit,.error-404__brands .brand-chip{transition:none}
}