/* RathnaPrabha booking page */
.booking-page { background: #eef1f0; color: #1d2939; font-family: "Open Sans", sans-serif; }

.booking-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06);
  position: sticky; top: 0; z-index: 20;
}
.booking-header img { height: 44px; }
.booking-back { color: #0d5237; font-weight: 600; text-decoration: none; }
.booking-back:hover { text-decoration: underline; }

.booking-main { max-width: 1080px; margin: 0 auto; padding: 28px 16px 60px; }
.booking-main h1 {
  font-family: "Playball", cursive; color: #0e1322; font-size: 2.4rem; margin: 0 0 6px;
}
.booking-sub { color: #667085; margin: 0 0 26px; }

.booking-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
@media (max-width: 860px) { .booking-layout { grid-template-columns: 1fr; } }

.booking-card {
  background: #fff; border: 1px solid #e6eaee; border-radius: 18px; padding: 24px;
  box-shadow: 0 18px 40px rgba(18,42,31,.06);
}
.booking-card h2 { font-size: 1.15rem; margin: 0 0 16px; color: #0d5237; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #d0d7de; border-radius: 10px;
  font-size: 1rem; background: #fff; color: #1d2939;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: #168f65; box-shadow: 0 0 0 3px rgba(22,143,101,.15);
}
.field .error { color: #c0392b; font-size: .82rem; margin-top: 4px; display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px){ .row2 { grid-template-columns: 1fr; } }

.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid #168f65;
  background: #fff; color: #168f65; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper input { width: 56px; text-align: center; }

.btn-book {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg,#0d5237,#168f65); color: #fff; border: none;
  border-radius: 999px; padding: 14px 30px; font-weight: 700; font-size: 1rem; cursor: pointer;
  width: 100%; transition: filter .15s ease;
}
.btn-book:hover:not(:disabled) { filter: brightness(1.07); }
.btn-book:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; background: transparent;
  border: 1px solid #cfd8d3; color: #0d5237; border-radius: 999px; padding: 11px 20px;
  font-weight: 600; text-decoration: none; cursor: pointer;
}

/* Summary panel */
.booking-summary { position: sticky; top: 92px; }
.summary-room { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.summary-room img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.summary-lines { list-style: none; margin: 0 0 12px; padding: 0; }
.summary-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; color: #475467; font-size: .94rem; border-bottom: 1px dashed #eceff1; }
.summary-total { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.15rem; color: #0e1322; padding-top: 10px; }
.summary-advance { display: flex; justify-content: space-between; color: #0d5237; font-weight: 600; margin-top: 6px; }
.summary-note { font-size: .8rem; color: #98a2b3; margin-top: 10px; }
.summary-empty { color: #98a2b3; font-size: .92rem; }

.upi-box { text-align: center; }
.upi-box img.qr { width: 200px; height: 200px; object-fit: contain; border: 1px solid #e6eaee; border-radius: 12px; background:#fff; }
.upi-vpa { font-weight: 700; font-size: 1.1rem; margin: 10px 0 2px; }
.pay-amount { font-size: 1.6rem; font-weight: 800; color: #0d5237; margin: 8px 0; }
.pay-options { text-align: left; max-width: 360px; margin: 12px auto 0; }
.pay-opt { padding: 9px 12px; border: 1px solid #e6eaee; border-radius: 10px; margin-bottom: 8px; font-size: .95rem; }
.pay-opt strong { color: #0d5237; }
.pay-opt__label { display: inline-block; font-weight: 700; color: #168f65; margin-right: 6px; }
.pay-opt--name { border: none; text-align: center; color: #667085; font-size: .85rem; padding-top: 0; }

.note-bar { background:#f6fbf9; border:1px solid #d7efe4; border-radius:12px; padding:12px 16px; color:#2e4d3f; font-size:.9rem; margin-bottom:18px; }
.alert-error { background:#fdecea; border:1px solid #f5c6c0; color:#a23b30; border-radius:12px; padding:12px 16px; margin-bottom:16px; }

.done-icon { font-size: 3rem; color:#168f65; }
.booking-done { text-align:center; }
.booking-done .ref { font-size:1.4rem; font-weight:800; letter-spacing:1px; color:#0d5237; }

.note-bar__line { margin: 3px 0; }
.note-bar__line strong { color: #0d5237; }
#payTimer { font-variant-numeric: tabular-nums; }
#payTimer.timer-low { color: #c0392b; }

.pay-summary { max-width: 420px; margin: 0 auto 14px; background: #f6fbf9; border: 1px solid #d7efe4; border-radius: 12px; padding: 14px 18px; }
.pay-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .95rem; border-bottom: 1px dashed #d7efe4; }
.pay-sum-row:last-child { border-bottom: none; }
.pay-sum-row span { color: #5b6262; }
.pay-sum-row strong { color: #16241f; text-align: right; }

.id-slot { margin-bottom: 12px; padding: 12px; border: 1px solid #e6eaee; border-radius: 10px; background: #fafbfb; }
.id-slot__label { display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; color:#0d5237; }

.hidden { display:none !important; }
.spinner { display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); } }

/* Positive/neutral banner (reuses the error bar element) */
.alert-error.alert-ok { background:#eef6f1; border-color:#b7e4c7; color:#166534; }

/* Cancel reservation — quieter than the primary actions, but clearly destructive */
.btn-cancel { display:inline-block; margin-left:10px; background:none; border:1px solid #e6c3bf;
  color:#c0392b; padding:9px 18px; border-radius:999px; font-weight:600; font-size:.9rem; cursor:pointer; }
.btn-cancel:hover { background:#fdecea; border-color:#d98b81; }
@media (max-width:520px){ .btn-cancel { margin:10px 0 0; display:block; width:100%; } }

/* Inline field validation — message sits under the field it belongs to */
.field-error { color:#c0392b; font-size:.82rem; font-weight:600; margin:6px 0 0; }
/* Red asterisk marking a mandatory field. */
.req { color:#d0021b; font-weight:700; }
.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color:#e0a3a3; box-shadow:0 0 0 3px rgba(192,57,43,.08);
}

/* Nights count — its own column to the right of the date fields, lined up with
   the inputs (the blank label above it does the aligning). */
.dates-row { grid-template-columns: 1fr 1fr auto; }
.nights-col { display:flex; flex-direction:column; }
.nights-inline { display:inline-block; align-self:flex-start; background:#eef6f1; color:#0d5237;
  font-weight:700; font-size:.82rem; padding:11px 16px; border-radius:10px; white-space:nowrap; }
@media (max-width:520px){
  .dates-row { grid-template-columns: 1fr; }
  .nights-col label { display:none; }
  .nights-col { margin-top:-8px; }
}

/* Booked-date legend — a small dot, so it can't be mistaken for a checkbox */
.date-legend { display:flex; align-items:center; gap:7px; margin:10px 2px 0; font-size:.8rem; color:#8a9499; }
.date-legend__dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#f3b8b0; flex:0 0 auto; }
.Zebra_DatePicker td.rpf-booked {
  background:#fdecea !important;
  color:#c0392b !important;
  text-decoration:line-through;
  cursor:not-allowed;
  opacity:1 !important;
}

/* Upload progress + processing overlay (item 5) */
.upload-overlay {
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center;
  background:rgba(15,40,28,.45);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.upload-overlay.show { display:flex; }
.upload-overlay__card {
  width:min(420px,90vw); background:#fff; border-radius:16px; padding:28px 26px; text-align:center;
  box-shadow:0 24px 60px rgba(6,35,24,.3);
}
.upload-spinner {
  width:46px; height:46px; margin:0 auto 16px;
  border:4px solid #e2efe9; border-top-color:#168f65; border-radius:50%;
  animation:spin .8s linear infinite;
}
.upload-overlay__status { font-weight:700; color:#0d5237; margin:0 0 14px; font-size:1.05rem; }
.upload-overlay__track { height:10px; background:#e9eef0; border-radius:999px; overflow:hidden; }
.upload-overlay__bar { display:block; height:100%; width:0; background:linear-gradient(135deg,#0d5237,#168f65); border-radius:999px; transition:width .2s ease; }
.upload-overlay__bar.indeterminate { width:40% !important; animation:rpf-indet 1.1s ease-in-out infinite; }
@keyframes rpf-indet { 0% { margin-left:-40%; } 100% { margin-left:100%; } }
.upload-overlay__pct { margin-top:8px; font-size:.85rem; color:#5b6262; min-height:1em; }
.upload-overlay__note { margin:10px 0 0; font-size:.8rem; color:#8a9499; }

/* Photo-ID step heading — quiet instruction, not a page title */
.id-stage__head h3 {
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #5b6262;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 6px 0 14px;
}

/* Cancellation policy under the amount on the payment step — a compact,
   deliberate two-line note (label above, policy below) so it never looks like
   an awkward text wrap. */
.pay-policy {
  width:fit-content; max-width:100%; margin:10px auto 16px; padding:8px 16px; text-align:center;
  background:#f6fbf9; border:1px solid #d7efe4; border-radius:10px;
  font-size:.8rem; color:#5b6262; line-height:1.5;
  white-space:nowrap; /* keep the policy on a single line (2 lines total) */
}
/* Too narrow for one line on small phones — allow it to wrap there. */
@media (max-width:430px){
  .pay-policy { white-space:normal; max-width:300px; }
}
.pay-policy__label {
  display:block; font-weight:700; color:#0d5237; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px;
}

/* Amount-locked UPI QR + tap-to-pay */
.qr-box { display:flex; justify-content:center; margin:14px 0 8px; }
.qr-box svg, .qr-box img.qr { width:190px; height:190px; display:block; background:#fff; padding:8px; border:1px solid #e6eaee; border-radius:12px; }
.qr-note { text-align:center; font-size:.85rem; color:#4d5761; margin:0 0 14px; }
.pay-intent { display:block; text-align:center; text-decoration:none; margin:0 auto 10px; max-width:340px; }

/* "Works with GPay / PhonePe / Paytm…" strip under the pay button */
.upi-apps { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.upi-apps__label, .upi-apps__more { font-size:.75rem; color:#8a9499; }
.upi-apps img { height:18px; width:auto; opacity:.55; display:block; }
.pay-intent:hover { text-decoration:none; color:#fff; }
.pay-manual { margin-top:6px; border-top:1px dashed #d7efe4; padding-top:10px; }
.pay-manual > summary { cursor:pointer; font-size:.9rem; font-weight:600; color:#0d5237; }
.pay-manual .pay-options { margin-top:10px; }
.pay-back-note { text-align:center; margin-top:12px; }

/* Multi-room chooser (step 2) */
.room-pick { border:1px solid #e6eaee; border-radius:12px; padding:10px 14px; margin-bottom:10px; background:#fafbfb; }
.room-pick__head { display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:600; margin:0; }
.room-pick__toggle { width:18px; height:18px; flex:0 0 auto; accent-color:#168f65; }
.room-pick__name { flex:1 1 auto; color:#16241f; }
.room-pick__price { color:#0d5237; font-weight:700; white-space:nowrap; }
.room-pick__status { font-size:.76rem; color:#c0392b; font-weight:600; margin-left:auto; padding-right:10px; white-space:nowrap; }
.room-pick__body { margin-top:12px; padding-top:12px; border-top:1px dashed #e0e6ea; }
.room-pick__hint { margin:8px 0 0; }
/* Room not bookable for the chosen dates */
.room-pick--off { opacity:.6; }
.room-pick--off .room-pick__head { cursor:not-allowed; }
.room-pick--off .room-pick__price { text-decoration:line-through; color:#9aa3a8; }
/* When a room is ticked, highlight its card */
.room-pick:has(.room-pick__toggle:checked) { border-color:#9ed3b8; background:#f3faf6; }
/* Per-room price headers inside the order summary */
.summary-lines .summary-room-head { font-size:.9rem; padding-top:6px; border-top:1px dashed #e0e6ea; margin-top:4px; }
.summary-lines .summary-room-head:first-child { border-top:none; margin-top:0; }

/* "Whom is this reservation for?" — selectable chips */
.choice-row { display:flex; flex-wrap:wrap; gap:10px; }
.choice { display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0;
  padding:10px 16px; border:1px solid #e6eaee; border-radius:999px; background:#fff;
  font-size:.9rem; font-weight:600; color:#16241f; transition:border-color .15s, background .15s; }
/* Beat the generic ".field input" rule (width:100% + padding + border) which
   otherwise turns these radios into full-size form fields and squashes the label. */
.field .choice input[type="radio"] {
  -webkit-appearance:radio; appearance:radio;
  width:16px; height:16px; min-width:16px; flex:0 0 16px;
  margin:0; padding:0; border:none; border-radius:50%;
  background:none; box-shadow:none; accent-color:#168f65;
}
.field .choice input[type="radio"]:focus { outline:2px solid rgba(22,143,101,.35); outline-offset:2px; box-shadow:none; }
.choice span { line-height:1.2; }
.choice:hover { border-color:#9ed3b8; }
.choice:has(input:checked) { border-color:#168f65; background:#f3faf6; color:#0d5237; }
.field.has-error .choice-row .choice { border-color:#e0a3a3; }
@media (max-width:520px){ .choice { width:100%; } }