:root{
  --iveco-blue-950:#001a3a;
  --iveco-blue-900:#002b5c;
  --iveco-blue-800:#003a70;
  --iveco-blue-700:#004c97;
  --iveco-blue-600:#005fbf;
  --iveco-blue-100:#e7f0ff;

  --iveco-ink:#0b1220;
  --iveco-surface:#ffffff;
  --iveco-bg:#f4f7fc;
  --iveco-border:#dbe6f6;
  --iveco-accent:#00a3e0;
}

html, body { height:100%; }
body{ background: var(--iveco-bg); color: var(--iveco-ink); }

.iveco-navbar{
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 18%,
    var(--iveco-blue-100) 32%,
    var(--iveco-blue-950) 65%,
    var(--iveco-blue-800) 100%
  );
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.iveco-navbar .navbar-brand{ color: var(--iveco-blue-950); }
.iveco-mark{ font-weight: 800; letter-spacing: 0.12em; font-size: 1.05rem; }
.iveco-navbar .iveco-sub{ color: var(--iveco-blue-950); font-weight: 700; }
.iveco-badge{
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-weight: 600;
}

.iveco-card{
  border: 1px solid var(--iveco-border);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 35, 78, 0.08);
  background: var(--iveco-surface);
}
.iveco-card-header{
  background: linear-gradient(180deg, var(--iveco-blue-100), #ffffff);
  border-bottom: 1px solid var(--iveco-border);
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.btn-iveco{
  background: var(--iveco-blue-700);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-iveco:hover{ background: var(--iveco-blue-800); color:#fff; }

.btn-outline-iveco{
  border-color: var(--iveco-blue-700);
  color: var(--iveco-blue-800);
}
.btn-outline-iveco:hover{ background: var(--iveco-blue-700); color:#fff; }

.iveco-resultbar{
  border: 1px solid var(--iveco-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff, var(--iveco-blue-100));
}

.vehicle-slide{ padding: 6px; }
.vehicle-card{
  border: 1px solid var(--iveco-border);
  border-radius: 16px;
  overflow: hidden;
  background:#fff;
}
.vehicle-hero{
  background: linear-gradient(180deg, var(--iveco-blue-900), var(--iveco-blue-700));
  color:#fff;
  padding: 14px 16px;
}
.vehicle-hero .title{ font-weight: 800; letter-spacing: 0.02em; }
.vehicle-hero .meta{ opacity: 0.92; }

.vehicle-body{ padding: 14px 16px; }
.vehicle-photo{
  border-radius: 14px;
  border: 1px solid var(--iveco-border);
  background: #f2f6ff;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.vehicle-photo-placeholder{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio: 16 / 10;
  border-radius: 14px;
  border: 1px dashed var(--iveco-border);
  background: #f2f6ff;
  color: var(--iveco-blue-800);
  font-weight: 700;
}

.kv{
  display:flex; justify-content: space-between; gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--iveco-border);
}
.kv:last-child{ border-bottom:none; }
.kv .k{ color:#4b5a77; }
.kv .v{ font-weight: 700; color: var(--iveco-ink); }

.badge-photo{
  background: rgba(0,163,224,0.14);
  border: 1px solid rgba(0,163,224,0.25);
  color: var(--iveco-blue-900);
  font-weight: 700;
}

.iveco-empty-icon{ font-size: 2.2rem; color: var(--iveco-blue-700); }

.iveco-modal{
  background: var(--iveco-blue-950);
  color:#fff;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Thumbnails foto 1-2-3 */
.iveco-thumb-wrap{
  position: relative;
}
.iveco-thumb{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--iveco-border);
  background: #f2f6ff;
}
.iveco-thumb-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(2px);
}
.iveco-thumb-empty{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px dashed var(--iveco-border);
  background: #f2f6ff;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--iveco-blue-800);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

/* Filigrana nei riquadri foto vuoti */
.iveco-thumb-empty::before{
  content: "";
  position: absolute;
  inset: 12%;
  background: url("./SVRA_IVECO_logo_transparent.png") center / contain no-repeat;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

.iveco-empty-label{
  display: none !important;
}

/* Fullscreen gallery image */
.iveco-gallery-img{
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

/* Pan & Zoom container */
.iveco-panzoom{
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.iveco-panzoom img{
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  cursor: zoom-in;
  transform-origin: center center;
}

.iveco-panzoom.zoomed{ cursor: grab; }
.iveco-panzoom.zoomed img{ cursor: grab; }
.iveco-panzoom.panning,
.iveco-panzoom.zoomed img:active{ cursor: grabbing; }

/* Gallery modal: no scroll durante pan/pinch */
#galleryModal .modal-body{
  overflow: hidden !important;
}

/* Quando zoom > 1, blocchiamo swipe del carousel */
.carousel.iveco-carousel-locked,
.carousel.iveco-carousel-locked .carousel-inner{
  touch-action: none !important;
}

/* ===== Navbar logo ===== */
.iveco-nav-logo{
  height: 1em;
  width: auto;
  display: inline-block;
  margin-right: .60rem;
  object-fit: contain;
}

/* ===== Bottone Pulisci con PNG ===== */
.iveco-clear-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 78px;
  padding: 0;
  margin: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.iveco-clear-btn:hover,
.iveco-clear-btn:active,
.iveco-clear-btn:focus{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.iveco-clear-btn:focus-visible{
  outline: 2px solid rgba(11,18,32,0.25);
  outline-offset: 2px;
  border-radius: 10px;
}

.iveco-clear-img{
  height: 1.15rem;
  width: auto;
  display: block;
}

/* ===== Barra filtri selezionati ===== */
.active-filters-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  margin: 0 0 .75rem 0;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(0,58,112,.16);
  border-radius: 14px;
  min-height: 44px;
}

.active-filter-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(0,58,112,.10);
  border: 1px solid rgba(0,58,112,.18);
  color: #061a2d;
  padding: .22rem .55rem .22rem .55rem;
  padding-right: .30rem;
  border-radius: 999px;
  font-size: .9rem;
  white-space: nowrap;
}

.active-filter-chip .af-k{
  font-weight: 800;
}

.active-filters-empty{
  color: rgba(0,0,0,.55);
  font-size: .9rem;
}

/* ===== Intestazioni filtri in grassetto ===== */
#filtersPanel .form-label,
#filtersPanel label,
#filtersPanel .form-check-label{
  font-weight: 700;
}

/* ===== X dentro i chip filtri ===== */
.active-filter-chip .af-x{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: .15rem;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 900;
  line-height: 1;
  color: rgba(6,26,45,.75);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.active-filter-chip .af-x:hover{
  color: rgba(6,26,45,1);
}

.active-filter-chip .af-x:focus,
.active-filter-chip .af-x:active{
  outline: none !important;
  background: transparent !important;
}

.active-filter-chip .af-x:focus-visible{
  outline: 2px solid rgba(0,58,112,.35);
  outline-offset: 2px;
  border-radius: 999px;
}

/* ===== Costi glass button ===== */
.cost-glass-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0, 210, 255, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  font-weight: 800;
  cursor: pointer;
}

.cost-glass-btn:hover{
  background: rgba(0, 210, 255, .30);
}

.cost-glass-btn:active{
  transform: translateY(1px);
}

.cost-glass-btn:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(0, 210, 255, .35), 0 8px 20px rgba(0,0,0,.18);
}

.cost-glass-euro{
  font-size: 1rem;
  line-height: 1;
}

.cost-glass-text{
  font-size: .92rem;
  line-height: 1;
}

@media (max-width: 576px){
  .cost-glass-text{ display:none; }
}

/* ===== Popover costi ===== */
.cost-popover{
  z-index: 20000;
  min-width: 240px;
  max-width: 320px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(220, 250, 255, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #003a70;
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
}

.cost-hdr{
  font-weight: 900;
  margin-bottom: 8px;
  color: #002b55;
}

.cost-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,58,112,.12);
}

.cost-row:last-child{ border-bottom: 0; }

.cost-label{
  font-weight: 800;
  font-size: .86rem;
}

.cost-value{
  font-weight: 900;
  white-space: nowrap;
}

.cost-popover .muted{
  opacity: .78;
  font-size: .9rem;
}

/* Quick filtri IVECO */
.iveco-quick-btn{
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,58,112,.25);
  background: rgba(255,255,255,.88);
  color: #003a70;
  font-weight: 800;
  text-align: left;
}

.iveco-quick-btn:hover{
  background: rgba(230,245,255,.95);
}

.iveco-quick-btn.active{
  background: rgba(0,160,220,.20);
  border-color: rgba(0,160,220,.60);
  box-shadow: 0 0 0 .2rem rgba(0,160,220,.18);
}

/* ===== Brand switch ===== */
.brand-switch-wrap{
  display:flex;
  align-items:center;
  gap:.4rem;
}

.brand-switch{
  display: flex;
  align-items: center;
  gap: .6rem;
}

.brand-switch-label{
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--iveco-blue-900);
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Toggle custom con pallino arancione */
.brand-toggle input{ display:none; }

.brand-toggle-track{
  width: 46px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.15);
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.brand-toggle-thumb{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #BF7B3F;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform .18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.brand-toggle input:checked + .brand-toggle-track{
  background: rgba(191, 123, 63, .25);
  border-color: rgba(191, 123, 63, .45);
}

.brand-toggle input:checked + .brand-toggle-track .brand-toggle-thumb{
  transform: translateX(22px);
}

/* Host nel pannello filtri */
.brand-switch-host{
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: .25rem;
}

@media (min-width: 992px){
  .brand-switch-host{
    flex: 1 1 auto;
    margin-top: 0;
  }
}

.brand-switch--filters .brand-switch-label{
  font-size: .95rem;
}

/* Vecchio stile .form-check-input per brand switch (non più usato, rimosso) */

/* ===== Modalità "Altre marche": header schede ambra-terracotta ===== */
body.brand-other .vehicle-hero{
  background: linear-gradient(180deg, #D09258, #BF7B3F);
}

/* Bottone Costi in "Altre marche": sfumatura arancione */
body.brand-other .cost-glass-btn{
  background: rgba(255, 77, 0, .28);
  border-color: rgba(255,255,255,.50);
}
body.brand-other .cost-glass-btn:hover{
  background: rgba(255, 77, 0, .38);
}
body.brand-other .cost-glass-btn:focus{
  box-shadow: 0 0 0 .2rem rgba(255, 77, 0, .35), 0 8px 20px rgba(0,0,0,.18);
}

/* Popover costi in "Altre marche": sfondo arancione, testo resta blu */
body.brand-other .cost-popover{
  background: rgba(255, 230, 210, .60);
  border-color: rgba(255, 160, 80, .50);
}

/* ===== Spec table (scheda veicolo) ===== */
.spec-table{ border-collapse: collapse; }
.spec-table th,
.spec-table td{
  padding: 5px 6px;
  font-size: .88rem;
  vertical-align: top;
}
.spec-k{
  color: #4b5a77;
  font-weight: 600;
  white-space: nowrap;
}
.spec-v{
  font-weight: 700;
  color: var(--iveco-ink);
}
.spec-table tr + tr{
  border-top: 1px dashed var(--iveco-border);
}