/* ============================================================
   CBS – Car Booking System  |  Styles v3.0
   ============================================================ */
:root {
  --cbs-green:      #5d8a2e;
  --cbs-green-light:#73ad3a;
  --cbs-red:        #c0392b;
  --cbs-red-light:  #e74c3c;
  --cbs-gray:       #8e9eab;
  --cbs-dark:       #1c2833;
  --cbs-text:       #2d3e50;
  --cbs-muted:      #5d7180;
  --cbs-border:     #dde6ed;
  --cbs-bg:         #f4f7f9;
  --cbs-white:      #ffffff;
  --cbs-shadow-sm:  0 2px 8px rgba(0,0,0,.06);
  --cbs-shadow:     0 8px 32px rgba(0,0,0,.09);
  --cbs-shadow-lg:  0 16px 48px rgba(0,0,0,.12);
  --cbs-radius:     16px;
  --cbs-radius-sm:  10px;
  --cbs-primary:    #5d8a2e;
  --cbs-accent:     #e8a020;
}

/* ── UTILITIES ─────────────────────────────────────────── */
.cbs-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--cbs-muted);
  font-size: .95rem;
}
.cbs-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 3px solid var(--cbs-border);
  border-top-color: var(--cbs-primary);
  border-radius: 50%;
  animation: cbsSpin .7s linear infinite;
}
@keyframes cbsSpin { to { transform: rotate(360deg); } }

.cbs-msg {
  padding: 14px 18px;
  border-radius: var(--cbs-radius-sm);
  font-size: .93rem;
  margin-top: 12px;
}
.cbs-msg--error   { background: #fde8e8; color: #8b2020; border-left: 4px solid #d44; }
.cbs-msg--success { background: #e8f5e9; color: #1a5e26; border-left: 4px solid #4a9a5c; }

/* ── BUTTONS ───────────────────────────────────────────── */
.cbs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--cbs-radius-sm);
  font-weight: 700;
  font-size: .92rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s ease;
  white-space: nowrap;
}
.cbs-btn--primary {
  background: var(--cbs-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(93,138,46,.35);
}
.cbs-btn--primary:hover {
  background: var(--cbs-green-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(93,138,46,.45);
}
.cbs-btn--secondary {
  background: transparent;
  color: var(--cbs-primary);
  border: 2px solid var(--cbs-primary);
}
.cbs-btn--secondary:hover {
  background: var(--cbs-primary);
  color: #fff;
}
.cbs-btn.is-loading { opacity: .7; pointer-events: none; }

/* ── SEARCH HERO ───────────────────────────────────────── */
.cbs-hero-search {
  background: #fff;
  border: 1px solid var(--cbs-border);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: var(--cbs-shadow);
  margin: 24px 0 36px;
}
.cbs-hero-search h2 {
  margin: 0 0 20px;
  font-size: 1.5rem;
  color: var(--cbs-dark);
}
.cbs-search-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: end;
}
.cbs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cbs-field label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--cbs-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cbs-field input,
.cbs-field select,
.cbs-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid var(--cbs-border);
  border-radius: var(--cbs-radius-sm);
  background: var(--cbs-bg);
  color: var(--cbs-text);
  font-size: .95rem;
  transition: border-color .2s;
  box-sizing: border-box;
}
.cbs-field input:focus,
.cbs-field select:focus,
.cbs-field textarea:focus {
  outline: none;
  border-color: var(--cbs-primary);
  background: #fff;
}
.cbs-search-form button[type="submit"] {
  min-height: 48px;
  padding: 0 28px;
  background: var(--cbs-primary);
  color: #fff;
  border: none;
  border-radius: var(--cbs-radius-sm);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: all .2s;
}
.cbs-search-form button[type="submit"]:hover {
  background: var(--cbs-green-light);
  transform: translateY(-1px);
}
.cbs-results-count {
  color: var(--cbs-muted);
  font-size: .9rem;
  margin: 0 0 16px;
}

/* ── CARS GRID ─────────────────────────────────────────── */
.cbs-cars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cbs-car-card {
  background: #fff;
  border: 1px solid var(--cbs-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--cbs-shadow-sm);
  transition: box-shadow .25s, transform .25s;
}
.cbs-car-card:hover {
  box-shadow: var(--cbs-shadow);
  transform: translateY(-3px);
}
.cbs-car-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.cbs-car-body {
  padding: 18px 20px 20px;
}
.cbs-car-title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  color: var(--cbs-dark);
  line-height: 1.3;
}
.cbs-car-excerpt {
  color: var(--cbs-muted);
  font-size: .88rem;
  margin: 0 0 12px;
  line-height: 1.5;
}
.cbs-car-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.cbs-car-badges span {
  background: var(--cbs-bg);
  border: 1px solid var(--cbs-border);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .8rem;
  color: var(--cbs-muted);
}
.cbs-car-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--cbs-border);
}
.cbs-days-label {
  display: block;
  font-size: .8rem;
  color: var(--cbs-muted);
}
.cbs-price-total {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cbs-primary);
}

/* ── SINGLE CAR PAGE ───────────────────────────────────── */
.cbs-single-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 36px;
  align-items: start;
  margin-top: 28px;
}
.cbs-single-hero img {
  width: 100%;
  border-radius: 18px;
  display: block;
  max-height: 480px;
  object-fit: cover;
}
.cbs-single-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0;
}
.cbs-meta-pill {
  background: var(--cbs-bg);
  border: 1px solid var(--cbs-border);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .88rem;
}
.cbs-meta-pill strong {
  display: block;
  color: var(--cbs-muted);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}

/* ── BOOKING PANEL ─────────────────────────────────────── */
.cbs-booking-panel {
  background: #fff;
  border: 1px solid var(--cbs-border);
  border-radius: 20px;
  box-shadow: var(--cbs-shadow);
  overflow: hidden;
  position: sticky;
  top: 24px;
}
.cbs-panel-header {
  background: var(--cbs-primary);
  color: #fff;
  padding: 20px 24px;
}
.cbs-panel-header h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}
.cbs-panel-price {
  font-size: 1.5rem;
  font-weight: 800;
}
.cbs-panel-price small {
  font-size: .75rem;
  font-weight: 400;
  opacity: .85;
}
.cbs-panel-body {
  padding: 24px;
}

/* Date selection display */
.cbs-date-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.cbs-date-pill {
  background: var(--cbs-bg);
  border: 1.5px solid var(--cbs-border);
  border-radius: var(--cbs-radius-sm);
  padding: 10px 14px;
}
.cbs-date-pill label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  color: var(--cbs-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.cbs-date-pill span {
  font-size: .95rem;
  font-weight: 700;
  color: var(--cbs-primary);
}
.cbs-date-pill .placeholder { color: var(--cbs-muted); font-weight: 400; }

/* Quote box */
.cbs-quote-card {
  background: var(--cbs-bg);
  border: 1px solid var(--cbs-border);
  border-radius: var(--cbs-radius-sm);
  padding: 16px;
  margin: 12px 0;
}
.cbs-quote-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: .9rem;
  color: var(--cbs-muted);
  border-bottom: 1px solid var(--cbs-border);
}
.cbs-quote-row:last-child { border-bottom: none; }
.cbs-quote-row strong { color: var(--cbs-text); }
.cbs-quote-deposit { color: var(--cbs-accent) !important; }
.cbs-quote-deposit strong { color: var(--cbs-accent) !important; }
.cbs-quote-total {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cbs-primary) !important;
  padding-top: 10px;
}
.cbs-quote-total strong {
  color: var(--cbs-primary) !important;
  font-size: 1.25rem;
}

/* Extras */
.cbs-extras-section { margin: 18px 0; }
.cbs-extras-section h4 {
  margin: 0 0 12px;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cbs-muted);
}
.cbs-extra-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--cbs-border);
}
.cbs-extra-item:last-child { border-bottom: none; }
.cbs-extra-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.cbs-extra-label strong { display: block; font-size: .9rem; color: var(--cbs-text); }
.cbs-extra-label em { font-style: normal; font-size: .82rem; color: var(--cbs-muted); }

/* Contact form */
.cbs-contact-section { margin: 18px 0 0; }
.cbs-contact-section h4 {
  margin: 0 0 14px;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cbs-muted);
}
.cbs-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cbs-form-grid .cbs-field-full { grid-column: 1 / -1; }

/* Submit button full width */
.cbs-booking-panel .cbs-btn--primary {
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  font-size: 1rem;
}

/* ── INTERACTIVE CALENDAR ──────────────────────────────── */
.cbs-calendar-interactive {
  margin: 24px 0 8px;
}
.cbs-cal-months {
  position: relative;
}
.cbs-cal-nav {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 12px;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 2;
}
.cbs-cal-nav-btn {
  pointer-events: all;
  background: #fff;
  border: 1.5px solid var(--cbs-border);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--cbs-text);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
  box-shadow: var(--cbs-shadow-sm);
}
.cbs-cal-nav-btn:hover {
  background: var(--cbs-primary);
  color: #fff;
  border-color: var(--cbs-primary);
}
.cbs-cal-months > .cbs-cal-month { /* single-month view */ }
.cbs-cal-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* Nav spans both columns */
.cbs-cal-nav {
  grid-column: 1 / -1;
  position: static;
  margin-bottom: 8px;
  pointer-events: all;
}

.cbs-cal-month-title {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--cbs-text);
  margin-bottom: 10px;
  padding: 4px 0;
}
.cbs-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cbs-cal-head div {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--cbs-muted);
  padding: 6px 2px;
  text-transform: uppercase;
}
.cbs-cal-empty {
  aspect-ratio: 1;
}
.cbs-cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  transition: all .15s ease;
  position: relative;
  cursor: default;
}
.cbs-cal-day-num { line-height: 1; }

/* States */
.cbs-cal-day.is-available {
  background: rgba(93,138,46,.1);
  color: var(--cbs-green);
  cursor: pointer;
}
.cbs-cal-day.is-available:hover {
  background: var(--cbs-green);
  color: #fff;
  transform: scale(1.08);
  z-index: 1;
}
.cbs-cal-day.is-unavailable {
  background: rgba(192,57,43,.1);
  color: var(--cbs-red);
  text-decoration: line-through;
}
.cbs-cal-day.is-past {
  color: #ccc;
  background: none;
}

/* Selection states */
.cbs-cal-day.is-start,
.cbs-cal-day.is-end {
  background: var(--cbs-green) !important;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(93,138,46,.4);
  z-index: 2;
}
.cbs-cal-day.is-in-range {
  background: rgba(93,138,46,.2);
  color: var(--cbs-green);
  border-radius: 0;
}
.cbs-cal-day.is-hover-range {
  background: rgba(93,138,46,.15);
  color: var(--cbs-green);
}
.cbs-cal-day.is-invalid-hover {
  background: rgba(192,57,43,.2);
  color: var(--cbs-red);
}

/* Calendar legend */
.cbs-cal-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.cbs-cal-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--cbs-muted);
}
.cbs-cal-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.cbs-cal-legend-dot--avail  { background: var(--cbs-green); }
.cbs-cal-legend-dot--booked { background: var(--cbs-red); }
.cbs-cal-legend-dot--sel    { background: var(--cbs-accent); }

/* Calendar message */
.cbs-cal-msg {
  background: rgba(93,138,46,.12);
  color: var(--cbs-green);
  border: 1px solid rgba(93,138,46,.25);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .84rem;
  text-align: center;
  margin-top: 10px;
  display: none;
}

/* ── ADMIN CALENDAR (unchanged styles) ─────────────────── */
.cbs-admin-calendar-wrap,
.cbs-calendar-wrap-single {
  background:#efefef;border:1px solid #cfcfcf;padding:12px;border-radius:4px;margin-top:24px;
}
.cbs-admin-calendar-header,.cbs-calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cbs-admin-calendar-header h2,.cbs-calendar-nav h4{margin:0;font-size:2rem;color:#5d5d5d;}
.cbs-admin-calendar-grid,.cbs-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cbs-admin-calendar-grid.head div,.cbs-calendar-head div{text-align:center;padding:10px 6px;color:#7a7a7a;font-weight:500;background:#f5f5f5;}
.cbs-admin-calendar-grid.body .day,.cbs-calendar-grid .day{min-height:84px;padding:6px;background:#f8f8f8;border:1px solid #d8d8d8;display:flex;flex-direction:column;justify-content:space-between;}
.cbs-admin-calendar-grid.body .day.available,.cbs-calendar-grid .day.available{background:#73ba73;color:#fff;}
.cbs-admin-calendar-grid.body .day.booked,.cbs-calendar-grid .day.booked{background:#d96565;color:#fff;}
.cbs-admin-calendar-grid.body .day.blocked,.cbs-calendar-grid .day.blocked{background:#9ca3a7;color:#fff;}
.cbs-admin-calendar-grid.body .day .num,.cbs-calendar-grid .day .num{font-weight:700;font-size:1rem;}
.cbs-admin-calendar-grid.body .empty,.cbs-calendar-grid .empty{min-height:84px;background:#ececec;border:1px solid #ddd;}
.nav-arrow{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:#d0d0d0;color:#fff;text-decoration:none;border-radius:4px;font-size:1.5rem;}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cbs-single-layout { grid-template-columns: 1fr; }
  .cbs-booking-panel { position: static; }
  .cbs-cars-grid { grid-template-columns: 1fr 1fr; }
  .cbs-cal-months { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .cbs-cars-grid { grid-template-columns: 1fr; }
  .cbs-search-form { grid-template-columns: 1fr; }
  .cbs-form-grid { grid-template-columns: 1fr; }
  .cbs-date-display { grid-template-columns: 1fr; }
  .cbs-hero-search { padding: 20px; }
}

/* ============================================================
   CBS HERO SEARCH WIDGET  [cbs_hero_search]
   ============================================================ */
.cbs-hero-widget {
  display: inline-block;
  width: 100%;
  max-width: 380px;
}

.cbs-hero-widget-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cbs-dark, #1c2833);
  margin: 0 0 6px;
  line-height: 1.2;
}
.cbs-hero-widget-subtitle {
  font-size: .9rem;
  color: var(--cbs-muted, #6b7d8c);
  margin: 0 0 18px;
}

/* The vertical form card */
.cbs-hero-vform {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--cbs-border, #dde6ed);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

.cbs-vfield {
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cbs-border, #dde6ed);
  position: relative;
}
.cbs-vfield:last-of-type {
  border-bottom: none;
}
.cbs-vfield label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cbs-muted, #6b7d8c);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cbs-vfield-icon { font-size: .9rem; }
.cbs-vfield input[type="date"],
.cbs-vfield select {
  border: none;
  background: transparent;
  font-size: .97rem;
  font-weight: 600;
  color: var(--cbs-dark, #1c2833);
  padding: 0;
  width: 100%;
  outline: none;
  cursor: pointer;
}
.cbs-vfield input[type="date"]:focus,
.cbs-vfield select:focus {
  outline: none;
}

/* Submit button */
.cbs-hero-vbtn {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--cbs-primary, #5d8a2e);
  color: #fff;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  letter-spacing: .02em;
}
.cbs-hero-vbtn:hover {
  background: var(--cbs-green-light, #73ad3a);
}

/* Inline results below the form */
.cbs-hero-results {
  margin-top: 16px;
}
.cbs-hero-results-count {
  font-size: .82rem;
  color: var(--cbs-muted, #6b7d8c);
  margin: 0 0 10px;
}
.cbs-hero-cars-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cbs-hero-car-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--cbs-border, #dde6ed);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.cbs-hero-car-thumb {
  width: 56px;
  height: 46px;
  object-fit: cover;
  border-radius: 7px;
  flex-shrink: 0;
}
.cbs-hero-car-info {
  flex: 1;
  min-width: 0;
}
.cbs-hero-car-name {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--cbs-dark, #1c2833);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cbs-hero-car-meta {
  display: block;
  font-size: .73rem;
  color: var(--cbs-muted, #6b7d8c);
  margin-top: 2px;
}
.cbs-hero-car-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.cbs-hero-car-total {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cbs-primary, #5d8a2e);
  line-height: 1;
}
.cbs-hero-car-days {
  font-size: .7rem;
  color: var(--cbs-muted, #6b7d8c);
  margin-top: 2px;
}
.cbs-hero-car-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--cbs-primary, #5d8a2e);
  color: #fff;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s;
  white-space: nowrap;
}
.cbs-hero-car-btn:hover {
  background: var(--cbs-green-light, #73ad3a);
}

/* ============================================================
   VEHICLE CALENDAR WIDGET  [cbs_vehicle_calendar]
   ============================================================ */
.cbs-vc-widget {
  background: #fff;
  border: 1px solid var(--cbs-border, #dde6ed);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
.cbs-vc-title {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cbs-dark, #1c2833);
}
.cbs-vc-legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.cbs-vc-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .73rem;
  color: var(--cbs-muted, #6b7d8c);
}