/* Jo Autos: site styles (used with Tailwind) */

/* ---------- Shared + home page ---------- */
    body { font-family: 'Barlow', system-ui, sans-serif; }
    /* Brushed-steel text, matches the silver lettering in the logo */
    .steel-text {
      background: linear-gradient(180deg, #FFFFFF 0%, #D7D9DE 38%, #8A8D96 52%, #E6E7EA 70%, #A9ACB4 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .red-text {
      background: linear-gradient(180deg, #FF4A3D 0%, #E10600 55%, #A30400 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    /* Red speed streaks from the creatives */
    .speed-lines {
      background-image:
        linear-gradient(115deg, transparent 0 46%, rgba(225,6,0,.55) 46.2% 46.6%, transparent 46.8%),
        linear-gradient(115deg, transparent 0 49%, rgba(225,6,0,.35) 49.2% 49.4%, transparent 49.6%),
        linear-gradient(115deg, transparent 0 52%, rgba(225,6,0,.22) 52.2% 52.35%, transparent 52.5%);
    }
    .grain::after {
      content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    .clip-slant { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
    .skew-btn { transform: skewX(-10deg); }
    .skew-btn > * { transform: skewX(10deg); display: inline-flex; align-items: center; gap: .5rem; }

    /* Marquee */
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .marquee-track { animation: marquee 38s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

    /* UK number-plate input */
    .uk-plate { background: #FFD500; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .08em; }
    .uk-plate::placeholder { color: rgba(0,0,0,.35); }

    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

    .svc-card[hidden] { display: none; }

    /* Service tiles: photo background with a dark gradient for readable text */
    .svc-tile {
      display: flex; flex-direction: column; justify-content: flex-end;
      min-height: 16rem;
      background: linear-gradient(145deg, #26262E, #0F0F12);  /* shows if a photo fails to load */
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: 0 20px 40px -24px rgba(0,0,0,.9);
      isolation: isolate;
    }
    .svc-tile.reveal { transition: opacity .7s ease, transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
    .svc-tile .svc-photo {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
      transition: transform .8s ease;
    }
    .svc-tile .svc-shade {
      position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(to top, rgba(9,9,11,.96) 0%, rgba(9,9,11,.78) 38%, rgba(9,9,11,.15) 75%, rgba(9,9,11,.05) 100%);
      transition: background .4s ease;
    }
    .svc-tile .svc-link { position: absolute; inset: 0; z-index: 3; }
    .svc-tile .svc-arrow {
      position: absolute; top: 1rem; right: 1rem; z-index: 2;
      display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px;
      background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px);
      transition: background .3s ease, transform .3s ease;
    }
    /* Red line along the bottom edge on hover */
    .svc-tile::after {
      content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; z-index: 2;
      background: #E10600; transition: width .35s ease;
    }
    .svc-tile:hover::after { width: 100%; }
    .svc-tile.in:hover {
      transform: translateY(-4px);
      border-color: rgba(225,6,0,.6);
      box-shadow: 0 26px 50px -18px rgba(225,6,0,.55);
    }
    .svc-tile:hover .svc-photo { transform: scale(1.08); }
    .svc-tile:hover .svc-shade {
      background: linear-gradient(to top, rgba(9,9,11,.96) 0%, rgba(80,2,0,.72) 45%, rgba(225,6,0,.18) 100%);
    }
    .svc-tile:hover .svc-arrow { background: #E10600; transform: rotate(45deg); }
    .svc-tile h3 { color: #FFFFFF; }
    .svc-tile p { color: rgba(255,255,255,.80); }
    .map-dark { filter: grayscale(1) invert(.92) contrast(.9) brightness(.95); }

    /* ---------- Services page ---------- */
    .cat-pill.is-active { background: #E10600; color: #fff; border-color: #E10600; }
    .svc-photo img { transition: transform .8s ease; }
    .svc-item:hover .svc-photo img { transform: scale(1.07); }
    .svc-item.reveal { transition: opacity .7s ease, transform .3s ease, box-shadow .3s ease; }
    .svc-item.in:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(225,6,0,.55); }
    .svc-item .book-btn svg { transition: transform .25s ease; }
    .svc-item:hover .book-btn svg { transform: translateX(4px); }
    .cat-nav::-webkit-scrollbar { display: none; }
    .cat-nav { scrollbar-width: none; }
    section[data-cat-section] { scroll-margin-top: 9.5rem; }
    .svc-item { scroll-margin-top: 9.5rem; }
  

    /* ---------- Cars page ---------- */
    .filter-panel details > summary { list-style: none; cursor: pointer; }
    .filter-panel details > summary::-webkit-details-marker { display: none; }
    .filter-panel details[open] .chev { transform: rotate(180deg); }
    .chip-check input:checked + span { background: #E10600; color: #fff; border-color: #E10600; }
    .swatch input:checked + span { outline: 2px solid #E10600; outline-offset: 2px; }
    .seg input:checked + span { background: #09090B; color: #fff; }

    /* dual range slider (visual only) */
    .range-wrap { position: relative; height: 1.5rem; }
    .range-wrap .track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 9999px; background: #E4E4E7; }
    .range-wrap .fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 9999px; background: #E10600; }
    .range-wrap input[type=range] { position: absolute; inset: 0; width: 100%; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
    .range-wrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 20px; height: 20px; border-radius: 9999px; background: #fff; border: 3px solid #E10600; box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
    .range-wrap input[type=range]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 9999px; background: #fff; border: 3px solid #E10600; cursor: pointer; }

    /* toggle switch */
    .switch input:checked + span { background: #E10600; }
    .switch input:checked + span::after { transform: translateX(1.25rem); }
    .switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9999px; background: #fff; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

    /* car cards */
    .car-card .car-img img { transition: transform .7s ease; }
    .car-card:hover .car-img img { transform: scale(1.06); }
    .save-btn.is-saved { background: #E10600; color: #fff; }
    .save-btn.is-saved svg { fill: currentColor; }
    @media (min-width: 768px) {
      #results.is-list { grid-template-columns: 1fr; }
      #results.is-list .car-card { display: grid; grid-template-columns: 340px 1fr; }
      #results.is-list .car-img { aspect-ratio: auto; height: 100%; min-height: 15rem; }
    }
    .view-btn.is-active { background: #09090B; color: #fff; }

    /* mobile filter drawer */
    @media (max-width: 1023px) {
      #filterPanel { position: fixed; inset: 0 0 0 auto; width: min(92vw, 380px); z-index: 70; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; }
      #filterPanel.is-open { transform: none; }
    }
    #compareTray { transform: translateY(150%); transition: transform .3s ease; }
    #compareTray.is-visible { transform: none; }