/* =========================================================
   AirportShuttleTR — Vehicle List UI (v2)
   File: static/css/vehicle_list_ui.css
   Amaç: Araç liste sayfasını tek CSS ile profesyonel hale getirmek
   Not: Tüm stiller .vehicle-list scope'unda -> diğer sayfaları bozmaz
   ========================================================= */

/* ---------- Theme helpers (fallback) ---------- */
.vehicle-list{
  --vl-radius: 18px;
  --vl-radius-sm: 14px;
  --vl-border: rgba(15, 23, 42, .10);
  --vl-shadow: 0 10px 26px rgba(15, 23, 42, .06);

  --vl-muted: rgba(15, 23, 42, .62);
  --vl-title: rgba(2, 110, 96, 1);

  --vl-primary: var(--primary-color, var(--bs-primary));
  --vl-accent: var(--accent-color, var(--bs-primary));
  --vl-card-bg: var(--card-bg, #fff);
}

/* Eğer globalde yoksa accent rengi yakala */
.vehicle-list .text-accent{ color: var(--vl-accent); }

/* ---------- Layout / spacing (mobile padding + gaps) ---------- */
.vehicle-list.container{
  padding-left: 14px;
  padding-right: 14px;
}

/* Bootstrap g-5 çok geniş: mobilde azalt */
@media (max-width: 576px){
  .vehicle-list .row.g-5{
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1.25rem;
  }
}

/* Araç kartları arası boşluk: mobilde daha sıkı */
.vehicle-list [itemtype="https://schema.org/ItemList"]{
  gap: 1.25rem !important;
}
@media (max-width: 576px){
  .vehicle-list [itemtype="https://schema.org/ItemList"]{
    gap: .95rem !important;
  }
}

/* ---------- Sticky summary (desktop) ---------- */
@media (min-width: 992px){
  .vehicle-list .summary-sticky{
    position: sticky;
    top: 90px;
  }
}

/* ---------- Controls (currency + selects) ---------- */
.vehicle-list #controlsForm.controls-compact{
  gap: .6rem !important;
}

/* currency buttons daha modern/pill */
.vehicle-list #controlsForm .btn-group .btn{
  height: 38px;
  padding: .375rem .75rem;
  font-size: .90rem;
  line-height: 1.2;
  border-radius: 999px;
}
.vehicle-list #controlsForm .btn-group .btn + .btn{
  margin-left: .35rem;
}

/* select alanları */
.vehicle-list #controlsForm .form-select-sm{
  height: 38px;
  padding: .375rem 2rem .375rem .6rem;
  font-size: .90rem;
  line-height: 1.2;
  border-radius: 12px;
  border-color: var(--vl-border);
}

/* label daha hafif */
.vehicle-list #controlsForm .form-label{
  display: block;
  font-size: .78rem;
  color: var(--vl-muted);
}

/* control-field min genişlik (desktop) */
.vehicle-list #controlsForm .control-field{
  min-width: 160px;
}

/* Mobil: Sort + Filter aynı satırda eşit bölünsün */
@media (max-width: 576px){
  .vehicle-list #controlsForm .btn-group .btn{
    height: 34px;
    font-size: .85rem;
    padding: .32rem .6rem;
  }
  .vehicle-list #controlsForm .form-select-sm{
    height: 34px;
    font-size: .85rem;
  }
  .vehicle-list .sort-filter-group{
    width: 100%;
  }
  .vehicle-list .sort-filter-group .control-field{
    flex: 1;
    min-width: 0;
  }
}

/* ---------- Vehicle Card Base ---------- */
.vehicle-list .vehicle-card{
  background: var(--vl-card-bg);
  border: 1px solid var(--vl-border);
  border-radius: var(--vl-radius);
  box-shadow: var(--vl-shadow);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vehicle-list .vehicle-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
  border-color: rgba(15, 23, 42, .16);
}

@media (prefers-reduced-motion: reduce){
  .vehicle-list .vehicle-card{ transition: none; }
  .vehicle-list .vehicle-card:hover{ transform: none; }
}

/* ---------- Badges ---------- */
.vehicle-list .vehicle-rating-badge{
  z-index: 10;
  border-bottom-right-radius: 12px;
  font-weight: 650;
  letter-spacing: .01em;
}

.vehicle-list .badge-preferred{
  z-index: 11;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #19a874;
  color: #fff;
  padding: .32rem .55rem;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 6px 16px rgba(25, 168, 116, .22);
  font-weight: 650;
  font-size: .78rem;
}

/* ---------- Image ---------- */
.vehicle-list .vehicle-img{
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* Desktop: görsel ile içerik arasına ince çizgi */
@media (min-width: 768px){
  .vehicle-list .vehicle-card .col-md-3{
    border-right: 1px solid var(--vl-border);
  }
}

/* Mobile: görsel altına çizgi */
@media (max-width: 767.98px){
  .vehicle-list .vehicle-card .col-md-3{
    border-bottom: 1px solid var(--vl-border);
  }
}

/* ---------- Info column (text weight fix: daha az bold) ---------- */
.vehicle-list .vehicle-info{
  padding: 14px 16px;
}

.vehicle-list .vehicle-title{
  color: var(--vl-title);
  font-weight: 650;     /* fw-bold yerine daha yumuşak */
  letter-spacing: .01em;
  margin-bottom: .35rem;
}

.vehicle-list .vehicle-info .text-muted{
  color: var(--vl-muted) !important;
}

.vehicle-list .vehicle-info ul{
  margin-bottom: .55rem;
}

.vehicle-list .vehicle-info .list-inline-item{
  margin-right: 0 !important;
}

.vehicle-list .vehicle-services-desktop .badge{
  border: 1px solid rgba(15, 23, 42, .08);
  background: rgba(248, 250, 252, .9) !important;
  font-size: .72rem;
  font-weight: 600; /* daha az yorucu */
  border-radius: 999px;
  padding: .28rem .55rem;
}

/* açıklama daha okunur */
.vehicle-list .vehicle-info p{
  line-height: 1.45;
}

.vehicle-list .btn-xs{
  padding: .1rem .25rem;
  font-size: .78rem;
  line-height: 1;
}

.vehicle-list .desc-more{
  color: var(--vl-primary);
  font-weight: 600;
}
.vehicle-list .desc-more:hover{
  color: color-mix(in oklab, var(--vl-primary) 85%, #000);
}

/* line clamp (2 satır) - modern + fallback */
.vehicle-list .line-clamp-2{
  overflow: hidden;
  max-height: calc(1.45em * 2);   /* fallback: 2 satır */
  line-height: 1.45;
}

/* WebKit clamp destekleyenlerde gerçek clamp */
@supports (-webkit-line-clamp: 2) and (-webkit-box-orient: vertical){
  .vehicle-list .line-clamp-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: none; /* fallback'i kapat */
  }
}

/* İstersen çok yeni tarayıcılar için (opsiyonel) */
@supports (line-clamp: 2){
  .vehicle-list .line-clamp-2{
    display: block;
    line-clamp: 2;
  }
}


/* ---------- Price / CTA column ---------- */
.vehicle-list .vehicle-price{
  padding: 14px 16px;
  background: rgba(248, 250, 252, .55);
}

/* Desktop: sol çizgi */
@media (min-width: 768px){
  .vehicle-list .vehicle-price{
    border-left: 1px solid var(--vl-border);
  }
}

/* Mobile: üst çizgi + daha kompakt */
@media (max-width: 767.98px){
  .vehicle-list .vehicle-price{
    border-top: 1px solid var(--vl-border);
    background: rgba(248, 250, 252, .35);
  }
}

/* ---------- Price block (tek yön) ---------- */
.vehicle-list .price-block{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vehicle-list .price-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vehicle-list .price-line .cur{
  min-width: 46px;
  text-align: center;
  font-weight: 650; /* daha yumuşak */
  border: 1px solid var(--vl-border);
  background: rgba(255,255,255,.9);
  color: rgba(15, 23, 42, .75);
  border-radius: 999px;
  padding: .14rem .55rem;
  line-height: 1.1;
  font-size: .78rem;
}

.vehicle-list .price-line.active .cur{
  background: var(--vl-primary);
  border-color: var(--vl-primary);
  color: #fff;
}

.vehicle-list .price-line .amt{
  font-weight: 750;
  letter-spacing: .01em;
  font-size: .98rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: rgba(15, 23, 42, .92);
}

@media (max-width: 576px){
  .vehicle-list .price-line .amt{
    font-size: .92rem;
  }
}

/* ---------- Roundtrip band ---------- */
.vehicle-list .roundtrip{
  border: 1px dashed var(--vl-primary);
  background: rgba(13,110,253,.08); /* fallback */
  background: color-mix(in oklab, var(--vl-primary) 10%, transparent);
  padding: .55rem .65rem;
  border-radius: 12px;
  line-height: 1.25;
}

.vehicle-list .roundtrip .rt-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vehicle-list .roundtrip .rt-amt{
  font-size: 1.02rem;
  font-weight: 800;
}

/* ---------- CTA button ---------- */
.vehicle-list .vehicle-price .btn.btn-success{
  border-radius: 14px;
  font-weight: 700;
  padding: .62rem .75rem;
  box-shadow: 0 10px 24px rgba(25,135,84,.18);
}

/* ---------- Summary card header (inline style kaldırıldı) ---------- */
.vehicle-list .summary-sticky .card{
  background: var(--vl-card-bg);
}

.vehicle-list .summary-sticky .card-header{
  background: var(--vl-primary);
  border: 0;
  padding: .85rem 1rem;
  border-top-left-radius: var(--vl-radius);
  border-top-right-radius: var(--vl-radius);
}

/* Summary body readability */
.vehicle-list .summary-sticky .card-body{
  padding: 1rem;
}
.vehicle-list .summary-sticky .card-body .fw-semibold{
  font-weight: 650 !important; /* çok bold olmasın */
}

/* Alerts daha modern */
.vehicle-list .alert{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--vl-radius-sm);
}

/* Pagination uyum */
.vehicle-list .pagination .page-link{
  border-radius: 12px;
}

/* Küçük iyileştirme: breadcrumb linkleri */
.vehicle-list .breadcrumb a{
  text-decoration: none;
}
.vehicle-list .breadcrumb a:hover{
  text-decoration: underline;
}