/*
 * booking-widget.css — Sultanate booking widget (obsidian · warm sand · gold)
 * Scoped under .sbk so it can drop onto any Sultanate page without collisions.
 */
.sbk {
  --sbk-ocean-950:#050d1a; --sbk-ocean-800:#0b2b45; --sbk-ocean-700:#10395c;
  --sbk-sand-050:#faf6ec; --sbk-sand-100:#f4ecdb; --sbk-gold-400:#d4b46a; --sbk-gold-300:#e3cb8f;
  --sbk-aqua:#5fd3c9; --sbk-ink-300:#9fb2c8;
  --sbk-display:'Cormorant Garamond',Georgia,serif; --sbk-body:'Inter',system-ui,sans-serif;
  font-family:var(--sbk-body); color:var(--sbk-sand-100);
  background:linear-gradient(165deg,#0d2b46,#081426);
  border:1px solid rgba(212,180,106,.28); border-radius:2px;
  padding:1.5rem 1.6rem 1.8rem; max-width:860px; box-sizing:border-box;
}
.sbk *, .sbk *::before, .sbk *::after { box-sizing:border-box; }

.sbk .sbk-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }
.sbk .sbk-title { font-family:var(--sbk-display); font-size:1.5rem; color:var(--sbk-sand-050); letter-spacing:.02em; }
.sbk .sbk-mode { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; padding:.3rem .55rem; border:1px solid; border-radius:999px; white-space:nowrap; }
.sbk .sbk-mode.mock { color:var(--sbk-gold-300); border-color:rgba(212,180,106,.5); }
.sbk .sbk-mode.live { color:var(--sbk-aqua); border-color:rgba(95,211,201,.5); }

.sbk .sbk-form { display:flex; flex-wrap:wrap; gap:.7rem; align-items:end; }
.sbk .sbk-field { display:flex; flex-direction:column; gap:.3rem; flex:1 1 140px; }
.sbk .sbk-field.sbk-narrow { flex:0 0 84px; }
.sbk .sbk-field.sbk-prop { flex:1 1 100%; }
.sbk label { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sbk-gold-400); }
.sbk input, .sbk select {
  background:var(--sbk-ocean-800); border:1px solid rgba(159,178,200,.3); color:var(--sbk-sand-100);
  font-family:var(--sbk-body); font-size:.9rem; padding:.55rem .6rem; border-radius:2px; width:100%;
}
.sbk input:focus, .sbk select:focus { outline:2px solid var(--sbk-gold-400); outline-offset:1px; }

.sbk .sbk-btn {
  font-family:var(--sbk-body); cursor:pointer; border:1px solid var(--sbk-gold-400); background:transparent;
  color:var(--sbk-gold-300); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:.62rem 1.3rem; border-radius:2px; transition:.25s; white-space:nowrap;
}
.sbk .sbk-btn:hover { background:var(--sbk-gold-400); color:var(--sbk-ocean-950); }
.sbk .sbk-btn.sbk-primary { background:var(--sbk-gold-400); color:var(--sbk-ocean-950); }
.sbk .sbk-btn.sbk-primary:hover { background:var(--sbk-gold-300); }
.sbk .sbk-btn:disabled { opacity:.5; cursor:default; }
.sbk .sbk-form .sbk-btn { flex:0 0 auto; height:calc(.55rem*2 + .9rem*1.2 + 2px); align-self:end; }

.sbk .sbk-results { margin-top:1.3rem; }
.sbk .sbk-loading, .sbk .sbk-empty, .sbk .sbk-error { padding:1.1rem 0; color:var(--sbk-ink-300); font-size:.9rem; }
.sbk .sbk-error { color:#e6b8b8; }
.sbk .sbk-open-note { margin:.5rem 0 0; font-size:.78rem; color:var(--sbk-gold-300); }
.sbk .sbk-open-note:empty { display:none; }
.sbk .sbk-comingsoon { padding:1.4rem 1.2rem; margin-top:.6rem; border:1px solid rgba(212,180,106,.28); border-radius:10px; background:rgba(212,180,106,.06); }
.sbk .sbk-comingsoon h4 { font-family:var(--sbk-display); font-size:1.25rem; color:var(--sbk-gold-300); margin:0 0 .4rem; }
.sbk .sbk-comingsoon p { color:var(--sbk-ink-300); font-size:.9rem; line-height:1.55; margin:0; }
.sbk .sbk-sub { color:var(--sbk-ink-300); font-size:.82rem; margin:.2rem 0 1rem; }
.sbk .sbk-link { color:var(--sbk-gold-300); }

.sbk .sbk-room {
  display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:1.1rem 1.2rem; border:1px solid rgba(159,178,200,.18); background:rgba(8,20,38,.5);
  border-radius:2px; margin-bottom:.7rem;
}
.sbk .sbk-room h4 { font-family:var(--sbk-display); font-size:1.25rem; color:var(--sbk-sand-050); margin:0 0 .2rem; font-weight:500; }
.sbk .sbk-rate { font-size:.8rem; color:var(--sbk-ink-300); margin:0; }
.sbk .sbk-avail { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sbk-aqua); margin:.45rem 0 0; }
.sbk .sbk-room-price { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; }
.sbk .sbk-from { font-size:.72rem; color:var(--sbk-ink-300); }
.sbk .sbk-total { font-family:var(--sbk-display); font-size:1.5rem; color:var(--sbk-gold-300); line-height:1.1; }
.sbk .sbk-total-label { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sbk-ink-300); margin-bottom:.5rem; }
.sbk .sbk-note { font-size:.72rem; color:var(--sbk-ink-300); margin-top:1rem; line-height:1.5; }

.sbk .sbk-checkout { border:1px solid rgba(212,180,106,.25); background:rgba(8,20,38,.55); padding:1.3rem 1.4rem; border-radius:2px; }
.sbk .sbk-back { background:none; border:none; color:var(--sbk-gold-300); cursor:pointer; font-size:.78rem; padding:0 0 .8rem; }
.sbk .sbk-checkout h4 { font-family:var(--sbk-display); font-size:1.35rem; color:var(--sbk-sand-050); margin:0 0 .2rem; font-weight:500; }
/* extras: transfers + experiences */
.sbk .sbk-xtitle { font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sbk-gold-400); margin:1.3rem 0 .6rem; }
.sbk .sbk-opts { display:flex; flex-wrap:wrap; gap:.5rem; }
.sbk .sbk-opt {
  display:flex; align-items:center; gap:.8rem; justify-content:space-between;
  background:var(--sbk-ocean-800); border:1px solid rgba(159,178,200,.28); color:var(--sbk-sand-100);
  border-radius:2px; padding:.6rem .8rem; cursor:pointer; font-size:.84rem; font-family:var(--sbk-body);
  flex:1 1 220px; transition:.2s;
}
.sbk .sbk-opt:hover { border-color:rgba(212,180,106,.5); }
.sbk .sbk-opt.on { border-color:var(--sbk-gold-400); background:rgba(212,180,106,.12); color:var(--sbk-sand-050); }
.sbk .sbk-opt-price { color:var(--sbk-gold-300); white-space:nowrap; font-size:.8rem; }
.sbk .sbk-hint { font-size:.72rem; color:var(--sbk-ink-300); margin:.55rem 0 0; }
.sbk .sbk-pax { font-style:normal; color:var(--sbk-ink-300); font-size:.82em; }

.sbk .sbk-exps-scroll { max-height:340px; overflow-y:auto; padding-right:.4rem; margin-top:.2rem; }
.sbk .sbk-exps-scroll::-webkit-scrollbar { width:8px; }
.sbk .sbk-exps-scroll::-webkit-scrollbar-thumb { background:rgba(212,180,106,.3); border-radius:4px; }
.sbk .sbk-xsub { font-size:.72rem; letter-spacing:.06em; color:var(--sbk-gold-300); margin:.9rem 0 .1rem; font-weight:600; }
.sbk .sbk-xsub:first-child { margin-top:.2rem; }
.sbk .sbk-exps { display:flex; flex-direction:column; gap:.4rem; }
.sbk .sbk-exp {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.65rem .2rem; border-bottom:1px solid rgba(159,178,200,.12);
}
.sbk .sbk-exp-main { display:flex; flex-direction:column; gap:.15rem; }
.sbk .sbk-exp-name { font-size:.9rem; color:var(--sbk-sand-100); }
.sbk .sbk-exp-price { font-size:.74rem; color:var(--sbk-ink-300); }
.sbk .sbk-step { display:flex; align-items:center; gap:.7rem; }
.sbk .sbk-step-btn {
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(212,180,106,.5);
  background:transparent; color:var(--sbk-gold-300); font-size:1.05rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.sbk .sbk-step-btn:hover { background:var(--sbk-gold-400); color:var(--sbk-ocean-950); }
.sbk .sbk-step-qty { min-width:1.2ch; text-align:center; font-size:.95rem; color:var(--sbk-sand-050); }

.sbk .sbk-bill { margin:1rem 0 1.2rem; border-top:1px solid rgba(159,178,200,.18); }
.sbk .sbk-bill > div { display:flex; justify-content:space-between; padding:.5rem 0; font-size:.86rem; border-bottom:1px solid rgba(159,178,200,.12); color:var(--sbk-sand-100); }
.sbk .sbk-bill .sbk-bill-sub { color:var(--sbk-sand-050); font-weight:600; border-bottom:1px solid rgba(159,178,200,.24); }
.sbk .sbk-bill .sbk-bill-note { font-size:.72rem; color:var(--sbk-ink-300); font-style:italic; padding:.35rem 0; border-bottom:none; }
.sbk .sbk-bill .sbk-bill-total { font-family:var(--sbk-display); font-size:1.2rem; color:var(--sbk-gold-300); border-bottom:none; padding-top:.7rem; }
.sbk .sbk-guest { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.sbk .sbk-guest .sbk-pay-note, .sbk .sbk-guest .sbk-pay, .sbk .sbk-guest .sbk-checkout-msg { grid-column:1 / -1; }
.sbk .sbk-pay-note { font-size:.74rem; color:var(--sbk-ink-300); margin:.3rem 0 .2rem; line-height:1.5; }
.sbk .sbk-checkout-msg { font-size:.82rem; color:var(--sbk-aqua); min-height:1.1em; }
.sbk .sbk-checkout-msg.err { color:#e6b8b8; }
.sbk .sbk-guest .sbk-wide, .sbk .sbk-guest .sbk-terms { grid-column:1 / -1; }
.sbk .sbk-guest textarea { width:100%; resize:vertical; background:rgba(9,20,38,.7); border:1px solid rgba(159,178,200,.25); border-radius:8px; color:var(--sbk-sand-050); font:inherit; font-size:.88rem; padding:.55rem .7rem; }
.sbk .sbk-guest textarea:focus { outline:none; border-color:var(--sbk-gold-300); }
.sbk .sbk-opt-label { font-weight:400; text-transform:none; letter-spacing:0; color:var(--sbk-ink-300); }
.sbk .sbk-terms { display:flex; gap:.6rem; align-items:flex-start; font-size:.78rem; color:var(--sbk-ink-300); line-height:1.55; cursor:pointer; min-width:0; }
.sbk .sbk-terms span { min-width:0; overflow-wrap:anywhere; }
.sbk .sbk-terms input { margin-top:.2rem; accent-color:var(--sbk-gold-300); flex:none; }
.sbk .sbk-terms strong { color:var(--sbk-sand-050); }
.sbk .sbk-review { margin-top:.6rem; }
.sbk .sbk-review-title { font-family:var(--sbk-display); font-size:1.3rem; color:var(--sbk-gold-300); margin:0 0 .8rem; }
.sbk .sbk-review-grid > div { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:.86rem; border-bottom:1px solid rgba(159,178,200,.12); }
.sbk .sbk-review-grid > div > span:first-child { color:var(--sbk-ink-300); flex:none; }
.sbk .sbk-review-grid > div > span:last-child { color:var(--sbk-sand-050); text-align:right; overflow-wrap:anywhere; }
.sbk .sbk-review-grid .sbk-review-total { border-bottom:none; padding-top:.7rem; font-family:var(--sbk-display); font-size:1.15rem; }
.sbk .sbk-review-grid .sbk-review-total > span:last-child { color:var(--sbk-gold-300); }
.sbk .sbk-btnrow { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }
.sbk .sbk-btnrow .sbk-btn { white-space:normal; line-height:1.35; }  /* long labels wrap on narrow screens */
.sbk .sbk-btnrow .sbk-confirm { flex:1; min-width:230px; }

.sbk .sbk-success { text-align:center; padding:1.5rem 1rem; }
.sbk .sbk-tick { width:54px; height:54px; margin:0 auto 1rem; border-radius:50%; border:1.5px solid var(--sbk-gold-400); color:var(--sbk-gold-300); font-size:1.6rem; line-height:52px; }
.sbk .sbk-success h4 { font-family:var(--sbk-display); font-size:1.6rem; color:var(--sbk-sand-050); margin:0 0 .4rem; font-weight:500; }

@media (max-width:560px) {
  .sbk .sbk-room { flex-direction:column; align-items:flex-start; }
  .sbk .sbk-room-price { text-align:left; align-items:flex-start; }
  .sbk .sbk-guest { grid-template-columns:1fr; }
}