/* 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;
}
/* ---- Hotel mode: Children ages UI ---- */
.guest-ages{
  margin-top: 10px;
  padding: 10px 8px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.guest-ages-title{
  font-weight: 800;
  margin-bottom: 8px;
  color:#111;
}
.guest-ages-hint{
  font-size: 12px;
  color:#667085;
  margin-top: 6px;
}
.guest-age-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 0;
}
.guest-age-row + .guest-age-row{
  border-top: 1px dashed rgba(0,0,0,.08);
}
.guest-age-label{
  font-weight:700;
  color:#111;
  font-size: 13px;
}
.guest-age-control{
  display:flex;
  align-items:center;
  gap:8px;
}
.guest-age-control .age-input{
  width: 70px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  text-align:center;
  font-weight:800;
  background:#fff;
}
.guest-age-control .age-minus,
.guest-age-control .age-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;
}
/* 🔥 HOTEL DETAIL FIX */
.h-sticky,
.h-card,
.card-body {
  overflow: visible !important;
}

.guest-children-ages{
  padding:8px;
  border-top:1px dashed rgba(0,0,0,.08);
  margin-top:6px;
}

.guest-age-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}

.guest-age-row label{
  font-size:13px;
  color:#444;
  font-weight:600;
}
/* ================================
   Guest Picker – Child Age (ETS-like)
================================ */

.guest-ages {
  margin-top: 10px;
  padding: 10px 8px;
  border-top: 1px dashed rgba(0,0,0,.12);
}

.guest-ages-title {
  font-weight: 700;
  font-size: 13px;
  color: #111;
  margin-bottom: 6px;
}

.guest-ages-hint {
  font-size: 12px;
  color: #667085;
  margin-top: 6px;
}

.guest-age-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}

.guest-age-label {
  font-size: 13px;
  color: #111;
  font-weight: 600;
}

.guest-age-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guest-age-control button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.guest-age-control button:hover {
  background: rgba(0,0,0,.04);
}

.guest-age-control button:active {
  transform: scale(0.95);
}

.age-value {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  color: #111;
}

/* ETS hissi: sarı focus */
.guest-picker.is-open .guest-age-control button {
  border-color: rgba(255,193,7,.55);
}