/* =============================================
   Velora Resorts — booking.css (Chunk 2.4)
   Booking engine dedicated styles
   ============================================= */

/* ── Layout ─────────────────────────────────── */
.booking-body { background: var(--cream); min-height: 100vh; }
.bk-main      { max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; }

/* ── Booking nav ────────────────────────────── */
.bk-nav        { background: #fff; border-bottom: 1px solid var(--border); padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.bk-nav-logo   { display: flex; align-items: center; height: 40px; overflow: hidden; }
.bk-nav-logo img { height: 80px; margin: -20px 0; }
.bk-nav-right  { display: flex; align-items: center; gap: 16px; }
.bk-nav-call   { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); text-decoration: none; }
.bk-nav-call:hover { color: var(--gold); }
.bk-nav-rooms  { font-size: 12px; letter-spacing: .12em; color: var(--muted); text-decoration: none; border: 1px solid var(--border); padding: 6px 14px; transition: all .2s; }
.bk-nav-rooms:hover { border-color: var(--gold); color: var(--gold); }

/* ── Progress bar ───────────────────────────── */
.bk-progress       { background: #fff; border-bottom: 1px solid var(--border); padding: 16px 28px; }
.bk-progress-inner { max-width: 600px; margin: 0 auto; display: flex; align-items: center; }
.bk-step           { display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.bk-step-dot       { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--muted); transition: all .25s; }
.bk-step.active .bk-step-dot  { border-color: var(--gold); background: var(--gold); color: #fff; }
.bk-step.done .bk-step-dot    { border-color: var(--forest); background: var(--forest); color: #fff; }
.bk-step span      { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bk-step.active span { color: var(--gold); font-weight: 600; }
.bk-step.done span   { color: var(--forest); }
.bk-step-line      { flex: 1; height: 2px; background: var(--border); margin: 0 6px; margin-bottom: 14px; transition: background .25s; }
.bk-step-line.done { background: var(--forest); }

/* ── Flash messages ─────────────────────────── */
.bk-flash         { padding: 12px 24px; font-size: 14px; text-align: center; }
.bk-flash.error   { background: #f8d7da; color: #721c24; border-bottom: 1px solid #f5c6cb; }
.bk-flash.success { background: #d4edda; color: #155724; border-bottom: 1px solid #c3e6cb; }

/* ── Page container ─────────────────────────── */
.bk-page        { max-width: 860px; margin: 0 auto; }
.bk-page-narrow { max-width: 520px; }
.bk-page-wide   { max-width: 960px; }
.bk-page-head   { margin-bottom: 36px; }
.bk-page-head h1 { font-family: var(--serif); font-size: clamp(26px, 3.5vw, 42px); font-weight: 400; line-height: 1.1; margin: 10px 0 12px; color: var(--ink); }
.bk-page-head h1 em { font-style: italic; color: var(--gold); }
.bk-head-sub    { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.7; }
.bk-edit-link   { font-size: 12px; color: var(--gold); text-decoration: none; white-space: nowrap; }
.bk-edit-link:hover { text-decoration: underline; }

/* ── Form elements ──────────────────────────── */
.bk-form         { display: flex; flex-direction: column; gap: 22px; }
.bk-field-group  { display: flex; flex-direction: column; gap: 7px; }
.bk-field-row    { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bk-label        { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.bk-input        { padding: 12px 14px; border: 1px solid var(--border); font-family: var(--sans); font-size: 14px; color: var(--ink); background: #fff; outline: none; border-radius: 0; width: 100%; transition: border-color .2s; }
.bk-input:focus  { border-color: var(--gold); }
.bk-input textarea { resize: vertical; }
select.bk-input  { cursor: pointer; }
.bk-section-label { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.bk-submit-btn   { width: 100%; justify-content: center; padding: 16px; font-size: 12px; }
.bk-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; margin-top: 6px; }
.bk-checkbox-label input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--gold); }
.bk-notice       { background: #fef9ee; border: 1px solid #f0d78a; padding: 12px 16px; font-size: 13.5px; color: #7a5c00; display: flex; gap: 8px; align-items: flex-start; }
.bk-notice svg   { flex-shrink: 0; margin-top: 2px; color: #c9972e; }
.bk-help         { text-align: center; margin-top: 28px; font-size: 13px; color: var(--muted); }
.bk-help a       { color: var(--gold); text-decoration: none; }
.bk-nights-preview { background: var(--cream); border: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.bk-nights-preview svg { color: var(--gold); }

/* ── Property selector ──────────────────────── */
.bk-prop-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bk-prop-opt       { cursor: pointer; }
.bk-prop-opt input { display: none; }
.bk-prop-card      { border: 2px solid var(--border); padding: 14px 16px; background: #fff; transition: all .2s; }
.bk-prop-card strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.bk-prop-card span   { font-size: 12px; color: var(--muted); }
.bk-prop-opt input:checked + .bk-prop-card { border-color: var(--gold); background: #fdf8f0; }

/* ── Phone input with country code ─────────── */
.bk-phone-wrap       { display: flex; gap: 8px; }
.bk-country-code     { width: 100px; flex-shrink: 0; padding: 12px 8px; }
.bk-phone-input      { flex: 1; }

/* ── Step 2: Room list ──────────────────────── */
.bk-rooms-list    { display: flex; flex-direction: column; gap: 2px; background: var(--border); }
.bk-room-card     { background: #fff; display: grid; grid-template-columns: 280px 1fr; }
.bk-room-img      { height: 100%; min-height: 220px; background-size: cover; background-position: center; position: relative; }
.bk-room-body     { padding: 24px 22px; display: flex; flex-direction: column; }
.bk-room-meta     { display: flex; gap: 12px; font-size: 10.5px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.bk-room-name     { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 0 0 8px; }
.bk-room-desc     { font-size: 13.5px; color: var(--muted); line-height: 1.75; margin: 0 0 12px; flex: 1; }
.bk-room-tags     { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.bk-room-tags span { font-size: 10.5px; background: var(--cream); color: var(--muted); padding: 3px 9px; }
.bk-room-footer   { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.bkrp-amt         { font-family: var(--serif); font-size: 26px; color: var(--ink); font-weight: 400; }
.bkrp-detail      { font-size: 12px; color: var(--muted); display: block; }
.bkrp-per         { font-size: 11px; color: var(--muted); display: block; }
.bk-empty-state   { text-align: center; padding: 60px 20px; background: #fff; }
.bk-empty-state svg { color: var(--muted); margin: 0 auto 16px; display: block; }
.bk-empty-state h3  { font-family: var(--serif); font-size: 24px; font-weight: 400; margin: 0 0 12px; }
.bk-empty-state p   { font-size: 14px; color: var(--muted); margin: 0 0 24px; }

/* ── Step 3: grid ───────────────────────────── */
.bk-step3-grid    { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.bk-step4-grid    { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }

/* ── Summary card ───────────────────────────── */
.bk-summary-card  { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--gold); position: sticky; top: 90px; }
.bk-sc-header     { padding: 16px 20px; font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase; font-weight: 600; color: var(--gold); border-bottom: 1px solid var(--border); }
.bk-sc-room       { padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; border-bottom: 1px solid var(--border); }
.bk-sc-room-img   { width: 72px; height: 56px; flex-shrink: 0; background-size: cover; background-position: center; background-color: var(--cream-d); }
.bk-sc-room-cat   { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; font-weight: 600; }
.bk-sc-room-name  { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--ink); line-height: 1.2; }
.bk-sc-room-num   { font-size: 11px; color: var(--muted); margin-top: 3px; }
.bk-sc-rows       { padding: 12px 20px; }
.bk-sc-row        { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.bk-sc-row:last-child { border-bottom: none; }
.bk-sc-row span:first-child { color: var(--muted); }
.bk-sc-row span:last-child  { font-weight: 500; color: var(--ink); }
.bk-sc-total      { font-size: 15px !important; }
.bk-sc-total span:last-child { color: var(--gold) !important; font-size: 18px; font-family: var(--serif); }
.bk-sc-subtotal   { }
.bk-sc-day        { font-size: 12px !important; }
.bk-sc-day .wknd  { font-size: 9px; background: var(--gold); color: #fff; padding: 1px 4px; margin-left: 4px; }
.bk-sc-note       { padding: 12px 20px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); }
.bk-sc-note svg   { color: var(--gold); flex-shrink: 0; }

/* ── Step 4: review ─────────────────────────── */
.bk-review-block  { background: #fff; padding: 18px 20px; border: 1px solid var(--border); border-top: none; display: flex; align-items: flex-start; gap: 14px; }
.bk-review-block:first-child { border-top: 1px solid var(--border); }
.bk-review-label  { display: flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 600; min-width: 80px; flex-shrink: 0; margin-top: 2px; }
.bk-review-content { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bk-review-content strong { font-size: 14px; color: var(--ink); font-weight: 600; }
.bk-review-content span   { font-size: 13px; color: var(--muted); }
.bk-special       { background: var(--cream); padding: 4px 8px; border-left: 2px solid var(--gold); font-style: italic; }
.bk-terms         { margin-bottom: 14px; }

/* ── OTP verify ─────────────────────────────── */
.bk-otp-icon    { width: 72px; height: 72px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--gold); }
.bk-verify-card { background: #fff; border: 1px solid var(--border); padding: 36px 28px; margin: 0 auto; }
.bk-otp-inputs  { display: flex; gap: 10px; justify-content: center; margin: 0 auto 24px; }
.bk-otp-digit   { width: 50px; height: 60px; text-align: center; font-size: 24px; font-weight: 700; border: 2px solid var(--border); background: #fff; color: var(--ink); outline: none; transition: border-color .2s; border-radius: 0; }
.bk-otp-digit:focus { border-color: var(--gold); }
.bk-otp-actions { margin-bottom: 18px; }
.bk-otp-resend  { text-align: center; font-size: 13px; color: var(--muted); }
.bk-resend-btn  { background: none; border: none; color: var(--gold); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }
.bk-resend-timer { font-size: 12px; color: var(--muted); }
.bk-otp-alt     { text-align: center; font-size: 13px; color: var(--muted); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ── Confirmed page ─────────────────────────── */
.bk-confirmed-icon { width: 80px; height: 80px; border-radius: 50%; background: #d4edda; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #28a745; }
.bk-confirmed-ref  { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 20px; margin: 24px auto; max-width: 380px; }
.bk-confirmed-details { max-width: 400px; margin: 0 auto 24px; }
.bk-cd-row        { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.bk-cd-row span:first-child { color: var(--muted); }
.bk-cd-total span:last-child { color: var(--gold); font-family: var(--serif); font-size: 18px; font-weight: 400; }
.bk-confirmed-next { max-width: 440px; margin: 28px auto 0; text-align: left; }
.bk-next-steps    { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.bk-next-step     { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.bk-ns-num        { width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Footer ─────────────────────────────────── */
.bk-footer        { text-align: center; padding: 18px 24px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); background: #fff; display: flex; justify-content: center; align-items: center; gap: 10px; }
.bk-footer a      { color: var(--muted); text-decoration: none; }
.bk-footer a:hover { color: var(--gold); }

/* ── Responsive ─────────────────────────────── */
@media(max-width:900px){
  .bk-step3-grid,.bk-step4-grid { grid-template-columns: 1fr; }
  .bk-summary-card { position: static; }
  .bk-room-card    { grid-template-columns: 1fr; }
  .bk-room-img     { height: 220px; }
}
@media(max-width:640px){
  .bk-field-row  { grid-template-columns: 1fr; }
  .bk-prop-grid  { grid-template-columns: 1fr; }
  .bk-otp-digit  { width: 40px; height: 52px; font-size: 20px; }
  .bk-otp-inputs { gap: 7px; }
  .bk-progress   { padding: 12px 14px; }
  .bk-step span  { display: none; }
}

/* ── Extra guests (Booking Update v1.1) ─────── */
.bk-room-type-section{margin-bottom:36px;}
.bk-room-type-label{margin-bottom:16px;}
.bk-type-desc{font-size:13px;color:var(--muted);margin:4px 0 0;}
.bk-extras-row{background:var(--cream);border:1px solid var(--border);padding:14px 16px;margin:12px 0;border-left:3px solid var(--gold);}
.bk-extras-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.bk-extras-controls{display:flex;gap:20px;flex-wrap:wrap;}
.bk-extra-item{display:flex;align-items:center;gap:10px;font-size:13px;}
.bk-extra-item label{color:var(--ink);font-weight:500;white-space:nowrap;}
.bk-extra-counter{display:flex;align-items:center;gap:8px;}
.bk-extra-btn{width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--ink);}
.bk-extra-btn:hover{border-color:var(--gold);color:var(--gold);}
.bk-extra-count{width:20px;text-align:center;font-weight:700;font-size:15px;color:var(--ink);}
.bk-extra-price{font-size:12px;color:var(--muted);white-space:nowrap;}
.bk-gst-note{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px;margin:8px 0 0;}
.bk-gst-note svg{color:var(--gold);flex-shrink:0;}