/* ============================================================
   Think Expand — Car Rental Module Frontend CSS
   ============================================================ */

/* ── Variables ── */
:root {
  --te-primary:  #1a3c6e;
  --te-accent:   #f59e0b;
  --te-green:    #16a34a;
  --te-red:      #e11d48;
  --te-gray:     #64748b;
  --te-border:   #e2e8f0;
  --te-light:    #f8fafc;
  --te-white:    #ffffff;
  --te-dark:     #0f172a;
  --te-radius:   12px;
  --te-shadow:   0 4px 20px rgba(0,0,0,.08);
}

/* ── Fleet wrap ──
   box-sizing:border-box on every element in this module — without it, an
   element's declared width doesn't include its own padding, so a card
   set to fill its container plus padding renders wider than that
   container on narrow screens, clipping content at the viewport edge. */
.tethbe-fleet-wrap, .tethbe-fleet-wrap * { box-sizing: border-box; }
.tethbe-fleet-wrap { max-width: 100%; margin: 0 0 40px; }
.tethbe-fleet-wrap img { max-width: 100%; }

/* ── Fleet filter buttons ── */
.tethbe-fleet-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tethbe-filter-btn {
  padding: 9px 20px;
  border: 2px solid var(--te-border);
  border-radius: 30px;
  background: var(--te-white);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--te-gray);
  transition: all .2s;
}
.tethbe-filter-btn.active,
.tethbe-filter-btn:hover {
  background: var(--te-primary);
  color: #fff;
  border-color: var(--te-primary);
}

/* ── Fleet grid ──
   auto-fit + minmax instead of a fixed column count: a fleet of 1–2
   vehicles fills the available width instead of sitting in a narrow
   column beside empty grid tracks, and it adapts correctly to whatever
   width Elementor gives its container (a full section vs a narrow
   column) without relying on a viewport media query. The --columns
   shortcode attribute still nudges the target card width wider/narrower
   for large fleets, but no longer forces empty tracks with few vehicles. */
.tethbe-fleet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(240px, calc(100% / var(--columns, 3) - 20px)), 1fr));
  gap: 24px;
}

/* ── Car card ── */
.tethbe-car-card {
  background: var(--te-white);
  border-radius: var(--te-radius);
  overflow: hidden;
  box-shadow: var(--te-shadow);
  transition: transform .3s, box-shadow .3s;
}
.tethbe-car-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

/* Car image — fixed aspect ratio so every vehicle photo (regardless of
   its raw upload dimensions) frames consistently across the grid. */
.tethbe-car-img {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tethbe-car-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.tethbe-car-card:hover .tethbe-car-img img { transform: scale(1.05); }
.tethbe-car-img-placeholder { font-size: 64px; opacity: .3; }

/* Badges */
.tethbe-car-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tethbe-car-badge.economy  { background: var(--te-accent); color: #1a1a1a; }
.tethbe-car-badge.midrange { background: #6366f1; color: #fff; }
.tethbe-car-badge.suv      { background: var(--te-green); color: #fff; }
.tethbe-car-badge.premium  { background: var(--te-primary); color: #fff; }
.tethbe-car-badge.bus      { background: #0891b2; color: #fff; }
.tethbe-car-badge.tethbe-badge-booked { background: var(--te-red); color: #fff; top: auto; bottom: 12px; }

/* Car body */
.tethbe-car-body { padding: 18px 20px; }
.tethbe-car-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--te-dark);
  margin: 0 0 4px;
}
.tethbe-car-type {
  font-size: 13px;
  color: var(--te-gray);
  margin: 0 0 12px;
}
.tethbe-car-specs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tethbe-spec {
  font-size: 12px;
  color: var(--te-gray);
  background: var(--te-light);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--te-border);
}
.tethbe-car-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tethbe-car-price {
  font-size: 22px;
  font-weight: 900;
  color: var(--te-primary);
}
.tethbe-car-price span {
  font-size: 13px;
  font-weight: 500;
  color: var(--te-gray);
}

/* ── Featured view ── */
.tethbe-fleet-featured { display: flex; flex-direction: column; gap: 28px; }
.tethbe-car-card-featured {
  display: flex; flex-wrap: wrap; gap: 20px; background: var(--te-white); border-radius: var(--te-radius);
  overflow: hidden; box-shadow: var(--te-shadow); padding: 20px;
}
.tethbe-car-featured-img {
  position: relative; flex: 1 1 340px; min-width: 280px; aspect-ratio: 16 / 10;
  border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
}
.tethbe-car-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tethbe-car-featured-body { flex: 1 1 300px; min-width: 260px; padding: 4px 4px 4px 0; }
.tethbe-car-featured-body .tethbe-car-name { font-size: 22px; }

/* ── List view ── */
.tethbe-fleet-list { display: flex; flex-direction: column; gap: 14px; }
.tethbe-car-card-list {
  display: flex; flex-wrap: wrap; gap: 16px; background: var(--te-white); border-radius: var(--te-radius);
  overflow: hidden; box-shadow: var(--te-shadow); transition: box-shadow .2s;
}
.tethbe-car-card-list:hover { box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.tethbe-car-list-img {
  position: relative; flex: 0 1 220px; min-width: 160px; aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e2e8f0, #f1f5f9); overflow: hidden;
}
.tethbe-car-list-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tethbe-car-list-body { flex: 1 1 260px; padding: 16px 18px 16px 0; }

@media (max-width: 480px) {
  .tethbe-car-list-img { flex-basis: 100%; }
  .tethbe-car-list-body { padding: 0 18px 18px; }

  .tethbe-car-card-featured { padding: 12px; gap: 14px; }
  .tethbe-car-featured-img { flex-basis: 100%; min-width: 0; }
  .tethbe-car-featured-body { flex-basis: 100%; min-width: 0; padding: 0; }
  .tethbe-car-featured-body .tethbe-car-name { font-size: 18px; }
}

.tethbe-btn-rent {
  padding: 9px 18px;
  background: var(--te-primary);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.tethbe-btn-rent:hover {
  background: #1e40af;
  transform: translateY(-1px);
}
.tethbe-btn-rent-disabled,
.tethbe-btn-rent-disabled:hover {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  transform: none;
}
select#te_vehicle option:disabled { color: #94a3b8; }

/* ── Booking engine ── */
.tethbe-booking-wrap { margin: 40px 0; }
.tethbe-booking-card {
  background: var(--te-white);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 8px 40px rgba(0,0,0,.1);
  max-width: 860px;
  margin: 0 auto;
}
.tethbe-booking-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--te-primary);
  margin: 0 0 22px;
}

/* Tabs */

/* Form grid */
.tethbe-booking-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.tethbe-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tethbe-form-group.tethbe-full { grid-column: 1 / -1; }
.tethbe-form-group label {
  font-size: 11px;
  font-weight: 700;
  color: var(--te-gray);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tethbe-form-group input,
.tethbe-form-group select,
.tethbe-form-group textarea {
  padding: 11px 14px;
  border: 2px solid var(--te-border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--te-dark);
  background: var(--te-white);
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.tethbe-form-group input:focus,
.tethbe-form-group select:focus,
.tethbe-form-group textarea:focus { border-color: var(--te-primary); }

/* Price estimate */
.tethbe-price-estimate {
  background: linear-gradient(135deg, var(--te-primary), #2563eb);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.tethbe-est-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 14px;
  margin-bottom: 6px;
  opacity: .9;
}
.tethbe-est-row > span:first-child { min-width: 0; word-break: break-word; }
.tethbe-est-total {
  font-size: 18px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.3);
}

/* Customer section */
.tethbe-customer-section {
  border-top: 1px solid var(--te-border);
  padding-top: 20px;
  margin-top: 8px;
  margin-bottom: 20px;
}
.tethbe-customer-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--te-dark);
  margin: 0 0 16px;
}

/* Book button */
.tethbe-btn-book {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--te-accent), #f97316);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all .25s;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.tethbe-btn-book:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245,158,11,.4);
}
.tethbe-btn-book:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* Notices */
.tethbe-notice {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin: 8px 0;
}
.tethbe-notice-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.tethbe-notice-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Success modal */
.tethbe-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tethbe-modal {
  background: #fff;
  border-radius: 20px;
  padding: 36px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0,0,0,.3);
}

/* ── Responsive ──
   .tethbe-fleet-grid no longer needs fixed-column overrides here — the
   auto-fit/minmax rule above already reflows the grid to fewer columns
   as space shrinks, at any container width, viewport or Elementor column. */
@media (max-width: 768px) {
  .tethbe-booking-form-grid { grid-template-columns: 1fr; gap: 12px; }
  .tethbe-form-group.tethbe-full { grid-column: 1; }
}
@media (max-width: 600px) {
  .tethbe-booking-card { padding: 18px 16px 24px; }
  .tethbe-booking-title { font-size: 19px; margin-bottom: 16px; }
  .tethbe-price-estimate { padding: 14px 16px; }
  .tethbe-customer-section { padding-top: 16px; }
  /* Prevent iOS Safari from auto-zooming when a field is focused —
     it only zooms when a text input's computed font-size is under 16px. */
  .tethbe-form-group input,
  .tethbe-form-group select,
  .tethbe-form-group textarea { font-size: 16px; }
}
@media (max-width: 480px) {
  .tethbe-booking-close { top: 10px; right: 10px; }
  .tethbe-modal { padding: 24px 20px; }
  .tethbe-modal-overlay { padding: 14px; }
}

/* ── Booking popup modal ── */
.tethbe-booking-trigger-bar { text-align:center; margin:24px 0; }
.tethbe-booking-modal-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(15,23,42,.6);
  z-index:99998;
  padding:20px;
  overflow-y:auto;
}
.tethbe-booking-modal-overlay.open { display:flex; align-items:flex-start; justify-content:center; }
.tethbe-booking-modal-overlay .tethbe-booking-wrap { width:100%; max-width:780px; margin:30px auto; }
.tethbe-booking-modal-overlay .tethbe-booking-card { position:relative; max-height:none; }
.tethbe-booking-close {
  position:absolute; top:14px; right:16px;
  width:36px; height:36px; border:none; border-radius:50%;
  background:#f1f5f9; color:#475569; font-size:22px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.tethbe-booking-close:hover { background:#e2e8f0; color:#0f172a; }

/* ── Pricing display variants ── */
.tethbe-price-prefix {
  display:block; font-size:11px; font-weight:600; color:var(--te-gray,#64748b);
  text-transform:uppercase; letter-spacing:.4px; line-height:1.2;
}
.tethbe-price-enquire { color:var(--te-primary,#1a3c6e); font-weight:800; }

@media (max-width:600px){
  .tethbe-booking-modal-overlay { padding:0; }
  .tethbe-booking-modal-overlay .tethbe-booking-wrap { margin:0; }
  .tethbe-booking-modal-overlay .tethbe-booking-card { border-radius:0; min-height:100vh; }
}

/* ── Inline booking (standalone [te_car_booking]) ── */
.tethbe-booking-inline { margin:24px 0; }
.tethbe-booking-inline .tethbe-booking-wrap { max-width:780px; margin:0 auto; }