/* booking.css — page-specific styles only
   NOTE: Navbar, theme button, global containers come from homepage.css */

/* Page scaffold */
.page {
  padding: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 6vw, 4rem) clamp(4rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 3.5rem);
}

/* Header panel */
.page__header {
  background: var(--panel);
  border-radius: calc(var(--border-radius) * 1.2);
  padding: clamp(2rem, 3vw, 2.5rem);
  box-shadow: var(--panel-shadow);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(6px);
}

.page__header-content h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(2.2rem, 6vw, 3.1rem);
  color: var(--ink);
}

.page__header-content p {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* Search bar */
.search-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: clamp(1rem, 2vw, 1.25rem);
  align-items: end;
}

.search-bar__field { display: flex; flex-direction: column; gap: 0.5rem; }
.search-bar__field label { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.search-bar__field input {
  border: 1px solid var(--panel-border);
  border-radius: var(--border-radius);
  padding: 0.75rem 0.95rem;
  background: var(--input-bg);
  color: var(--ink);
}
.search-bar__field input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(2,132,199,.12);
  outline: none;
}

.btn { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600;
  padding: .75rem 1.35rem; border-radius: var(--border-radius); }
.btn i { width: 20px; height: 20px; }
.btn--primary { background: linear-gradient(135deg, var(--accent-color), #0EA5E9); color:#fff; }
.btn--outline { background: transparent; border: 1px solid var(--panel-border); color: var(--accent-color); }

/* Booking layout */
.booking { display: grid; grid-template-columns: minmax(260px,320px) 1fr; gap: clamp(1.75rem, 4vw, 2.5rem); }

/* Filter panel */
.filter {
  background: var(--panel);
  border-radius: calc(var(--border-radius) * 1.2);
  padding: clamp(1.75rem, 3vw, 2rem);
  box-shadow: var(--panel-shadow);
  display: flex; flex-direction: column; gap: 1.75rem;
  position: sticky; top: 110px;
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(6px);
}
.filter__header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.filter__header h2 { margin:0; font-size:1.2rem; color:var(--ink); }
.filter__reset { display:inline-flex; gap:.35rem; color:var(--accent-color);
  padding:.45rem .75rem; border-radius:999px; background:rgba(2,132,199,.1); }
.filter__form { display:flex; flex-direction:column; gap:1.65rem; }
.filter__group { display:flex; flex-direction:column; gap:.75rem; border-bottom:1px solid var(--divider); padding-bottom:1rem; }
.filter__group:last-of-type { border-bottom:none; padding-bottom:0; }
.filter__label, .filter__group legend { font-weight:600; color:var(--ink); font-size:.95rem; }
.filter__checkbox, .filter__radio { display:flex; align-items:center; gap:.65rem; color:var(--ink-soft); }
.filter__checkbox input, .filter__radio input { width:18px; height:18px; accent-color: var(--accent-color); }
.filter__range-output { display:inline-flex; align-items:baseline; gap:.4rem; color:var(--ink); font-weight:600; }
input[type="range"]{ width:100%; appearance:none; height:6px; border-radius:999px; background:var(--range-track); }
input[type="range"]::-webkit-slider-thumb{ appearance:none; height:18px; width:18px; border-radius:50%; background:var(--range-thumb); }

/* Results grid */
.results { display:grid; gap: clamp(1.35rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

/* Cards */
.booking-card {
  background: var(--panel);
  border-radius: calc(var(--border-radius) * 1.2);
  border: 1px solid transparent;
  box-shadow: var(--panel-shadow-soft);
  padding: clamp(1.5rem,3vw,1.75rem);
  display:flex; flex-direction:column; gap:1.35rem; position:relative; overflow:hidden;
}
.booking-card:hover { transform: translateY(-6px); box-shadow: 0 20px 42px rgba(2,132,199,.22); border-color: var(--card-hover-border); }

.booking-card__header { display:flex; align-items:flex-start; gap:1rem; }
.booking-card__image-wrapper { width:72px; height:72px; border-radius:18px; background:linear-gradient(135deg, rgba(2,132,199,.12), rgba(14,165,233,.12)); display:inline-flex; justify-content:center; align-items:center; overflow:hidden; }
.booking-card__title { margin:0 0 .25rem; color:var(--ink); font-size:1.05rem; }
.booking-card__meta { display:inline-flex; gap:.6rem; color:var(--ink-soft); font-size:.9rem; }

.badge { font-size:.82rem; font-weight:600; padding:.35rem .75rem; border-radius:999px; align-self:flex-start; text-transform:capitalize; }
.badge--status[data-status="available"]{ background:rgba(22,163,74,.12); color:var(--success-color); }
.badge--status[data-status="unavailable"]{ background:rgba(220,38,38,.12); color:var(--error-color); }

.booking-card__features{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; color:var(--ink-soft); }
.booking-card__features li{ position:relative; padding-left:1rem; }
.booking-card__features li::before{ content:"•"; position:absolute; left:0; color:var(--accent-color); }

.booking-card__footer{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center; border-top:1px solid var(--divider); padding-top:1.1rem; }
.booking-card__price{ display:inline-flex; align-items:baseline; gap:.45rem; color:var(--ink); font-weight:600; }
.booking-card__price strong{ font-size:1.35rem; color:var(--accent-color); }
.booking-card__actions{ display:inline-flex; gap:.75rem; flex-wrap:wrap; }

/* Steps */
.booking-steps{
  background: var(--panel);
  border-radius: calc(var(--border-radius) * 1.2);
  padding: clamp(2rem, 3vw, 2.4rem);
  box-shadow: var(--panel-shadow);
  border: 1px solid var(--panel-border);
}
.booking-steps h2{ margin:0 0 1.5rem; font-size:clamp(1.6rem,4vw,2rem); color:var(--ink); }
.steps{ display:grid; gap:clamp(1.1rem,3vw,1.5rem); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.step-card{ background: rgba(255,255,255,.65); border:1px solid var(--panel-border); border-radius: calc(var(--border-radius) * 1.05); padding:1.35rem; display:flex; flex-direction:column; gap:.75rem; }
body.darkmode .step-card{ background: rgba(7,18,41,.4); }
.step-card__icon{ width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg, rgba(2,132,199,.14), rgba(14,165,233,.14)); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-color); }
.step-card h3{ margin:0; color:var(--ink); font-size:1.05rem; }
.step-card p{ margin:0; color:var(--ink-soft); }

/* Empty state */
.empty-state{
  background: var(--panel);
  border-radius: calc(var(--border-radius) * 1.2);
  padding: clamp(2rem,3vw,2.5rem);
  text-align:center;
  border: 1px dashed var(--panel-border);
  color: var(--ink-soft);
}

/* Chat bubble (kept) */
.chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), #0EA5E9);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 32px rgba(2,132,199,.32);
  z-index: 1001;
}

/* Responsive tweaks */
@media (max-width:1100px){ .search-bar{ grid-template-columns: repeat(2, minmax(180px, 1fr)); } }
@media (max-width:960px){
  .booking{ grid-template-columns:1fr; }
  .filter{ position:static; order:-1; }
}
@media (max-width:720px){
  .search-bar{ grid-template-columns:1fr; }
  .booking-card__actions{ width:100%; justify-content:space-between; }
  .booking-card__actions .btn{ flex:1; justify-content:center; }
}
@media (max-width:540px){
  .page{ padding: 2.5rem 1.2rem 4rem; }
  .chat-bubble{ bottom:18px; right:18px; }
}