/*--------------------------------------
  1) CSS Variable Definitions
---------------------------------------*/
:root {
  --fleet-gap: 2rem;            /* space between cards */
  --fleet-radius: 4px;          /* rounded corners */
  --fleet-border: #e1e1e1;      /* light panel border */
}

/*--------------------------------------
  2) Filter Navigation
---------------------------------------*/
/* compact pill chips */
.ald-fleet-filter{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  margin:0 0 var(--fleet-gap,1rem);
  width:100%;
  box-sizing:border-box;
  overflow-x:auto;
  text-transform:uppercase;
  letter-spacing:.06em;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}

.ald-fleet-filter a{
  flex:0 0 auto;
  scroll-snap-align:center;
  display:inline-flex;
  align-items:center;
  padding:.5rem .85rem;
  border-radius:999px;
  white-space:nowrap;
  text-decoration:none;
  font-weight:600;
  font-size:.9rem;
  line-height:1;
  color:#222;
  background:#f6f7f8;
  border:1px solid #e3e6ea;
  transition:background-color .2s ease,color .2s ease,transform .06s ease;
}

.ald-fleet-filter a:hover{ background:#eef1f4; }
.ald-fleet-filter a:active{ transform:translateY(1px); }
.ald-fleet-filter a:focus-visible{ outline:2px solid #4c9ffe; outline-offset:2px; }

.ald-fleet-filter a.active{
  color:#1eacc7;
  background:transparent;
  border-color:#1eacc7;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

/*--------------------------------------
  3) Fleet Grid Container
---------------------------------------*/
.ald-fleet-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--fleet-gap);
  justify-content:flex-start;
}

/*--------------------------------------
  4) Vehicle Card
---------------------------------------*/
.vehicle-card{
  /* more stable than width calc in flex + gap */
  flex: 0 0 calc(33.333% - (var(--fleet-gap) * 2 / 3));
  background:#fff;
  border:1px solid var(--fleet-border);
  border-radius:var(--fleet-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  margin-bottom:var(--fleet-gap);
  transition:transform .2s ease, box-shadow .2s ease;
}

.vehicle-card:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/*--------------------------------------
  5) Image Section
---------------------------------------*/
.image-wrap{
  position:relative;
  width:100%;
  padding-top:60%; /* aspect ratio */
  background:#fff;
}

.image-wrap img,
.image-wrap .wp-post-thumbnail{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/*--------------------------------------
  6) Content Body
---------------------------------------*/
.vehicle-card .card-link{
  display:block;
  padding:1rem;
  color:inherit;
  text-decoration:none;
  flex:1 1 auto;
}

.vehicle-title{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  font-size:1.125rem;
  margin:1.5rem 0 1rem;
}

.vehicle-title .spec-icon{
  color:#00bcd4;
  font-size:1.2rem;
}

/*--------------------------------------
  7) Perks List
---------------------------------------*/
.vehicle-perks{
  display:flex;
  flex-direction:column;
  row-gap:.75rem;
  margin:.5rem 0 1rem 1rem;
  padding:0;
  list-style:none;
}

.perk-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  font-size:.9rem;
  color:#555;
  cursor:help; /* shows tooltip intent */
}

.perk-item i{
  color:#00bcd4;
  display:inline-block;
  flex:0 0 auto;
  font-size:1rem;
  width:1.25rem;
  height:1.25rem;
  line-height:1.25rem;
  text-align:center;
}

/*--------------------------------------
  8) Specs Row
---------------------------------------*/
.specs{
  display:flex;
  justify-content:center;
  gap:var(--fleet-gap);
  padding:0 1rem 1rem;
}

/* auto-sized spec boxes */
.spec-item{
  flex:0 0 auto;
  min-width:80px;
  background:#fff;
  border:1px solid var(--fleet-border);
  border-radius:var(--fleet-radius);
  padding:.5rem 1rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:.9rem;
  color:#333;
}

.spec-item i{
  margin-bottom:.25rem;
  color:#00bcd4;
  font-size:1.2rem;
}

/*--------------------------------------
  9) Book Now Button
---------------------------------------*/
.book-now-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  letter-spacing:.02em;
  font-weight:bold;
  text-transform:uppercase;
  text-align:center;
  padding:8px 24px;
  margin:0 auto var(--fleet-gap);
  border-radius:50px;
  border:2px solid #00bcd4;
  background:#fff;
  color:#00bcd4 !important;
  text-decoration:none;
  cursor:pointer;
  transition:all .3s ease;
}

.book-now-button:hover,
.book-now-button:focus{
  background:#00bcd4;
  border-color:#00bcd4;
  color:#ffffff !important;
}

/*--------------------------------------
 10) Responsive Breakpoints
---------------------------------------*/
/* Tablet (≤768px): 2 columns */
@media (max-width: 768px){
  .ald-fleet-filter{
    justify-content:flex-start;
  }

  .vehicle-card{
    flex: 0 0 calc(50% - (var(--fleet-gap) / 2));
  }
}

/* Mobile (≤480px): 1 column & stack */
@media (max-width: 480px){
  .vehicle-card{
    flex: 0 0 100%;
    width:100% !important;
  }

  .ald-fleet-grid{
    flex-direction:column;
    gap:var(--fleet-gap);
  }

  /* ✅ FIXED: no nested .specs block */
  .specs{
    flex-direction:row !important;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:.5rem;
    padding:0 1rem 1rem;
  }

  .vehicle-perks{
    flex-direction:column;
    gap:.5rem;
    padding:1rem;
    margin:0; /* cleaner on mobile */
  }

  .book-now-button{
    margin:0 1rem var(--fleet-gap);
  }

  .vehicle-title{
    font-size:1.1rem;
  }

  .vehicle-title .spec-icon,
  .spec-item i{
    font-size:1.1rem;
  }
}
.ald-route-pricing { margin: 18px 0; }
.ald-route-pricing-list { margin: 10px 0 14px; padding-left: 18px; }
.ald-route-pricing-note { color:#555; }
.ald-route-pricing-btn{
  display:inline-block; margin-top:10px; padding:10px 16px;
  border-radius:999px; text-decoration:none;
  border:2px solid currentColor;
}