/* booking-ui.css - Guest picker + Date range + Time picker UI */

/* ---- Guest picker button (input gibi) */
.guest-picker { position: relative; width: 100%; }
.guest-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  cursor:pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
  height:65px;
}
.guest-btn:hover{ border-color: rgba(0,0,0,.18); }
.guest-picker.is-open .guest-btn{
  border-color: rgba(255,193,7,.65);
  box-shadow: 0 0 0 4px rgba(255,193,7,.18);
}
.guest-title{ font-weight:700; color:#111; }
.guest-summary{ color:#667085; font-size:13px;text-align: left; }

/* ---- Dropdown */
.guest-dropdown{
  position:absolute;
  top: calc(100% + 8px);
  left:0;
  width: 100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  padding:10px;
  display:none;
  z-index: 99999;
}
.guest-picker.is-open .guest-dropdown{ display:block; }

.guest-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 8px;
  border-radius:12px;
}
.guest-row + .guest-row{ border-top:1px solid rgba(0,0,0,.06); }
.guest-label strong{ display:block; color:#111; }
.guest-label small{ display:block; color:#667085; margin-top:2px; }

/* ---- Counter */
.guest-counter{
  display:flex;
  align-items:center;
  gap:10px;
}
.guest-counter .count{
  min-width:24px;
  text-align:center;
  font-weight:800;
  color:#111;
}
.guest-counter .btn-minus,
.guest-counter .btn-plus{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.guest-counter .btn-minus:disabled{
  opacity:.35;
  cursor:not-allowed;
}
.guest-actions{
  display:flex;
  gap:8px;
  padding:10px 8px 4px;
}
.guest-actions .btn{
  border-radius:12px !important;
}

/* ---- Date range & time picker: flatpickr biraz güzelleştirme */
.flatpickr-calendar{
  border-radius:16px !important;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.16) !important;
}
.flatpickr-months .flatpickr-month{
  background: rgba(0,0,0,.02);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background: #ffc107 !important;
  border-color: #ffc107 !important;
  color:#111 !important;
}
.flatpickr-day.inRange{
  background: rgba(255,193,7,.18) !important;
  border-color: transparent !important;
  color:#111 !important;
}

/* ---- Make "readonly" inputs look clickable */
input.js-date-range,
input.js-timepicker{
  cursor:pointer;
  background:#fff;
}

.hero-search-box input[type=text],.hero-search-box button.btn {
    height: 65px;
    border-radius: 15px;
}