/* =========================================================
   features.css – additions on top of styles.css
   (real photos, filters, sorting, detail modals, etc.)
   ========================================================= */

/* ---------- Real photos ---------- */
.card__img{display:block;overflow:hidden;font-size:0}
.card__img::after{content:none}                 /* remove emoji placeholder */
.card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card__img img{transform:scale(1.05)}
.card__body h3 a{text-decoration:none}
.card__body h3 a:hover{color:var(--brand)}
.card__img--fallback,.card__img{background:linear-gradient(135deg,#3b6fd1,#1b2d5b)}
.card:nth-child(2) .card__img{background:linear-gradient(135deg,#3f7d5a,#14332a)}
.card:nth-child(3) .card__img{background:linear-gradient(135deg,#d4562c,#6a1f0c)}
.card:nth-child(4) .card__img{background:linear-gradient(135deg,#1aa5a5,#0b3a4a)}

/* Hero photo: put your file at images/hero.jpg */
.hero{background:
  linear-gradient(100deg,rgba(1,20,61,.92) 25%,rgba(1,20,61,.55)),
  url("images/hero.jpg") center/cover no-repeat,
  radial-gradient(900px 400px at 85% 0%,rgba(24,164,232,.25),transparent 60%),
  linear-gradient(135deg,var(--dark),var(--dark2))}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.btn--ghost{background:transparent;border:2px solid rgba(255,255,255,.6)}
.btn--ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.btn--outline{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn--outline:hover{background:var(--soft);box-shadow:none}

/* ---------- Trust bar ---------- */
.trust{background:var(--soft);border-bottom:1px solid var(--line)}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.1rem 0;font-size:.92rem;color:var(--muted)}
.trust__in li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.trust__in span{font-size:1.5rem}
.trust__in b{color:var(--ink);display:block;width:calc(100% - 2.4rem)}
.trust__in li{display:grid;grid-template-columns:auto 1fr;column-gap:.7rem}
.trust__in b{width:auto}

/* ---------- Filter / sort bar (CSS only) ---------- */
.filterbar{display:flex;flex-wrap:wrap;gap:1rem 2rem;padding:1rem 1.2rem;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);margin:1rem 0 1.6rem}
.fgroup{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;min-width:0}
.fgroup legend{float:left;font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:.6rem;padding:0}
.chip{margin:0;cursor:pointer;position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:.4rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:.9rem;font-weight:600;transition:.15s}
.chip:hover span{border-color:var(--brand)}
.chip input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

.listing .cards{display:grid}
.listing .card{order:var(--rn)}
.listing:has(#s-asc:checked) .card{order:var(--ra)}
.listing:has(#s-desc:checked) .card{order:var(--rd)}

.listing:has(#f-benzin:checked)  .card:not([data-fuel~="benzin"]),
.listing:has(#f-diesel:checked)  .card:not([data-fuel~="diesel"]),
.listing:has(#f-hybrid:checked)  .card:not([data-fuel~="hybrid"]),
.listing:has(#f-elektro:checked) .card:not([data-fuel~="elektro"]),
.listing:has(#t-kompakt:checked) .card:not([data-type~="kompakt"]),
.listing:has(#t-suv:checked)     .card:not([data-type~="suv"]),
.listing:has(#t-kombi:checked)   .card:not([data-type~="kombi"]),
.listing:has(#t-van:checked)     .card:not([data-type~="van"]),
.listing:has(#t-limousine:checked) .card:not([data-type~="limousine"]){display:none}

.empty{margin-top:1.4rem;color:var(--muted);text-align:center}
.empty a{color:var(--accent);font-weight:600}

/* ---------- Detail modals (:target) ---------- */
.modal{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:1rem}
.modal:target{display:grid;animation:fade .2s}
.modal__bg{position:absolute;inset:0;background:rgba(10,15,25,.72)}
.modal__box{position:relative;width:min(960px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:var(--r);display:grid;grid-template-columns:1.1fr 1fr;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal__x{position:absolute;top:.7rem;right:.7rem;z-index:2;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.modal__x:hover{background:var(--brand);color:#fff}
.modal__img{background:linear-gradient(135deg,#3b6fd1,#1b2d5b);min-height:260px;position:relative}
.modal__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal__txt{padding:1.6rem}
.data{width:100%;border-collapse:collapse;margin:.8rem 0 1rem;font-size:.95rem}
.data th{text-align:left;font-weight:600;color:var(--muted);padding:.4rem 0;border-bottom:1px solid var(--line);width:45%}
.data td{padding:.4rem 0;border-bottom:1px solid var(--line)}
.equip{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.equip li{background:var(--soft);padding:.3rem .7rem;border-radius:999px;font-size:.85rem}
.equip li::before{content:"✓ ";color:var(--ok);font-weight:800}
.modal__cta{display:flex;gap:.6rem;flex-wrap:wrap;margin:0}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Sell section ---------- */
.sell{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.sell .lead{color:#cdd6e4}
.radios{border:0;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.radios legend{font-weight:600;font-size:.9rem;margin-bottom:.3rem;padding:0}
.radios label{display:flex;gap:.4rem;align-items:center;font-weight:400;margin:0}
.radios input{accent-color:var(--brand);width:18px;height:18px}
input[type=number]{width:100%;font:inherit;padding:.75rem .85rem;border:1.5px solid var(--line);border-radius:10px}
input[type=number]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,111,179,.18)}
input[type=file]{width:100%;font:inherit;padding:.5rem;border:1.5px dashed var(--line);border-radius:10px;background:var(--soft)}
input[type=file]::file-selector-button{background:var(--dark);color:#fff;border:0;border-radius:8px;padding:.5rem .9rem;margin-right:.8rem;cursor:pointer}
.form h3{margin-bottom:1rem}

/* ---------- Contact extras ---------- */
.hours{width:100%;margin:1.5rem 0;border-collapse:collapse;font-size:.95rem}
.hours caption{text-align:left;font-weight:700;margin-bottom:.4rem}
.hours th{text-align:left;font-weight:500;color:var(--muted);padding:.45rem 0;border-bottom:1px solid var(--line)}
.hours td{text-align:right;padding:.45rem 0;border-bottom:1px solid var(--line);font-weight:600}
.map{width:100%;height:260px;border:0;border-radius:var(--r);box-shadow:var(--shadow)}

/* ---------- Mobile action bar ---------- */
.mbar{display:none}

@media (max-width:960px){
  .trust__in{grid-template-columns:1fr 1fr}
  .sell{grid-template-columns:1fr}
  .modal__box{grid-template-columns:1fr}
  .modal__img{min-height:0;aspect-ratio:16/10}
}
@media (max-width:700px){
  .float{display:none}
  .mbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--dark);box-shadow:0 -4px 16px rgba(0,0,0,.25)}
  .mbar a{color:#fff;text-decoration:none;text-align:center;padding:.9rem .3rem;font-weight:600;font-size:.9rem;border-right:1px solid rgba(255,255,255,.12)}
  .mbar a:last-child{border:0;background:var(--brand)}
  body{padding-bottom:52px}
  .trust__in{grid-template-columns:1fr}
  .filterbar{padding:.9rem}
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme:dark){
  :root{--bg:#031330;--soft:#141c2a;--ink:#eef2f8;--muted:#a3afc2;--line:#263247}
  .header{background:rgba(3,19,48,.94)}
  .search,.form,.card,.tile,.steps li,details,.types a,.modal__box,.chip span{background:#0a1c42;color:var(--ink)}
  input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{background:#031330;color:var(--ink)}
  .modal__x{background:#0a1c42;color:#fff}
  .nav{background:#031330}
  .btn--outline{color:var(--ink)}
}


/* =========================================================
   AutoMarkt J.A. brand colours (taken from the logo)
   navy #01143d · deep blue #0c3068 · bright blue #18a4e8
   ========================================================= */
.logo__img{height:44px;width:auto;border-radius:6px;display:block}
.footer .logo__img{height:52px;margin-bottom:.8rem}
.footer__addr{line-height:1.8}
.footer__addr a{color:#d4def0}
.btn{color:var(--on-brand)}
.btn:hover{color:#fff}
.btn--ghost,.btn--ghost:hover{color:#fff}
.btn--outline,.btn--outline:hover{color:var(--ink)}
.eyebrow{color:var(--brand-d)}
.hero .eyebrow,.section--dark .eyebrow{color:var(--brand)}
.steps li::before{color:var(--on-brand)}
.chip input:checked + span{color:var(--on-brand)}
.badge--deal{color:var(--on-brand)}
.float__btn{color:var(--on-brand)}
.float__btn--wa{color:#fff}
.mbar a:last-child{color:var(--on-brand)}
.modal__x:hover{color:var(--on-brand)}
.card__body h3 a:hover{color:var(--brand-d)}
.hours-note{margin:1.5rem 0;padding:1rem 1.2rem;background:var(--soft);border-left:3px solid var(--brand);border-radius:0 10px 10px 0;color:var(--muted)}
.hours-note b{color:var(--ink)}
@media (prefers-color-scheme:dark){
  .eyebrow{color:var(--brand)}
  .card__body h3 a:hover{color:var(--brand)}
}