/* Checkbox wrapper - horizontal layout */
.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0;
  width: 100%;
}

.checkbox-wrapper input[type="checkbox"] {
  margin: 0;
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.checkbox-wrapper label {
  margin: 0;
  line-height: 1.5;
  font-weight: normal;
  cursor: pointer;
  flex: 1;
  display: block;
  white-space: normal;
}
/* When the label itself is used as the checkbox wrapper, ensure it is not bold */
label.checkbox-wrapper{ font-weight: normal; }
/* Place the two options on one line */
.booking-for{ display:flex; gap:24px; align-items:center }
.booking-for .checkbox-wrapper{ width:auto; margin:0 }
/* Radios: match brand color and alignment */
.checkbox-wrapper input[type="radio"]{
  margin: 0;
  margin-top: 2px;
  flex-shrink: 0;
  width: 18px; height: 18px;
  accent-color: var(--brand);
}
/* Extracted page styles for checkout.html to comply with CSP */
:root{
  --brand:#2aa6b8; /* sea-blue */
  --bg:#e9f8fa;
  --card:#ffffff;
  --text:#08323b;
  --muted:#5aa6ad;
  --radius:12px;
  --container:1100px;
  --border:#e6f6f7;
  --emph:#0a5662;
  --warning:#b82a2a;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",Arial;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}
small,.muted{color:var(--muted)}
.wrap{max-width:var(--container);margin:0 auto 20px;padding:16px}

/* layout */
main.layout{display:grid;gap:12px;position:relative}
/* Visual band to reduce perceived gap between header and first card */
main.layout::before{
  content: "";
  position:absolute;
  left:0; right:0;
  top:calc(var(--space-section) * -1);
  height:12px;
  background:linear-gradient(180deg, rgba(42,166,184,0.08), rgba(42,166,184,0));
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  pointer-events:none;
}
/* Slight upward nudge for first card to visually align with other pages */
.layout > .card:first-child{ margin-top:-8px }
@media(min-width:980px){ main.layout{grid-template-columns:2fr 1fr} .sticky{position:sticky;top:14px} }
@media(max-width:979px){
  main.layout{grid-template-columns:1fr}
}

/* Override index .hero for Checkout: stack on mobile, side-by-side on tablet/desktop */
#checkout2{display:flex;gap:14px;flex-direction:column}
@media(min-width:760px){
  #checkout2{flex-direction:row;align-items:flex-start;gap:18px}
  #checkout2 .left{flex:2 1 0}
  #checkout2 .right{flex:1 1 0}
  /* Keep the summary visible while scrolling */
  #checkout2 .right .card{position:sticky;top:calc(var(--header-inner-height,72px) + 12px)}
}

/* components */
.card{background:var(--card);border-radius:12px;box-shadow:0 8px 20px rgba(3,50,59,.04);padding:12px}
.section{border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:12px;background:#fff}
label{display:block;margin:6px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#fff}
textarea{min-height:84px;resize:vertical}
.row{display:grid;gap:10px}
@media(min-width:760px){ .row.cols-2{grid-template-columns:1fr 1fr} .row.cols-3{grid-template-columns:1fr 1fr 1fr} }
.inline{display:flex;gap:8px;align-items:center}
/* Avoid full-width stretching for checkbox rows placed inside grid */
.span-all.checkbox-wrapper{grid-column:auto}
/* Ensure checkbox + text sit flush-left with no unintended spacing */
label.inline{align-items:flex-start}
label.inline input[type="checkbox"]{margin:2px 6px 0 0;flex:0 0 auto}
label.inline span{flex:1 1 auto}
/* utilities replacing inline styles in checkout.html */
.gap-10{gap:10px}
.opacity-70{opacity:.7}
.inline-flex{display:inline-flex}
.items-center{align-items:center}
.btn{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}
.btn.secondary{background:#fff;color:var(--brand);border:1px solid rgba(3,50,59,.1)}
.btn.ghost{background:transparent;border:1px dashed rgba(3,50,59,.25);color:var(--text)}
.btn.block{width:100%}
.btn-group{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(184,42,42,.08);color:#8d2222}
.help{font-size:12px}
.divider{height:1px;background:linear-gradient(90deg, rgba(3,50,59,.06), rgba(3,50,59,.02));margin:10px 0}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border)}
th,td{padding:8px;border:1px solid var(--border);text-align:left}
.summary .line{display:flex;justify-content:space-between;margin:6px 0}
.summary .line.total{font-weight:800;font-size:18px}
.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(184,42,42,.08);color:#8d2222}
.paybox{margin-top:12px;border:2px dashed rgba(42,166,184,.35);border-radius:12px;background:linear-gradient(180deg, rgba(42,166,184,.08), rgba(42,166,184,.03));padding:12px}
.pay-now{display:flex;justify-content:space-between;align-items:center}

/* utilities used by checkout */
.text-right{text-align:right}
.mt-6{margin-top:6px}
.gap-6{gap:6px}
.opacity-80{opacity:.8}
.fs-12{font-size:12px}
.text-danger{color:#d33}
.pay-total{font-size:20px;font-weight:800;color:var(--emph);margin-left:auto;text-align:right}

/* focus */
button:focus, a:focus, input:focus, select:focus, textarea:focus{outline:3px solid rgba(42,166,184,.18);outline-offset:2px}

/* Special Requests */
#specialRequests .checkbox-wrapper {
  display: inline-flex;
  align-items: center;
}
#specialRequests .checkbox-wrapper input[type="checkbox"],
#specialRequests .checkbox-wrapper input[type="radio"]{
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}
#specialRequests .mb-4 { margin-bottom: 4px; }
#specialRequests .mt-6 { margin-top: 6px; }
#specialRequests .row { align-items: start; }
#specialRequests .row.cols-2 > * { align-self: start; }
#specialRequests .req-sub{ margin: 8px 0 0 28px; }
#specialRequests input[type="time"]{ max-width: 200px; }
@media (max-width: 600px){
  #specialRequests input[type="time"]{ max-width: 100%; }
}
/* Modal for Terms & Policies */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:1000; }
.modal-content{ background:#fff; border-radius:12px; max-width:720px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.2); padding:12px; outline:none; }
.modal-header{ display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.modal-body{ max-height:60vh; overflow:auto; padding:8px 0; }
.modal-footer{ display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--border); padding-top:8px; }
/* Bed type radios: keep each option on a single line and avoid stretching full width */
#reqBedOptions .checkbox-wrapper{ width:auto; }
#reqBedOptions .checkbox-wrapper span{ white-space: nowrap; }