/* ============================================================
   KV MANSION — Direct Booking (booking.html / check-booking.html)
   reuses design tokens from style.css — compact layout
   ============================================================ */

.booking-page{background:var(--cream)}

/* header tweaks for booking pages */
/* primary link (My booking / Book a room) → tag/chip ที่ชัดเจน */
.bk-headlink{display:inline-flex;align-items:center;gap:.42rem;font-size:.86rem;font-weight:600;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);padding:.4rem .85rem;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-shadow:0 1px 6px rgba(0,0,0,.3);transition:background .2s,border-color .2s,color .2s}
.bk-headlink .ic{width:1.05em;height:1.05em}
.bk-headlink:hover{background:rgba(255,255,255,.24);border-color:var(--gold-soft);color:#fff}
.site-header.scrolled .bk-headlink{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff;text-shadow:none}
.site-header.scrolled .bk-headlink:hover{border-color:var(--gold);color:var(--gold-soft)}
/* back to site → ปุ่มไอคอนบ้านล้วน */
.bk-homebtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:50%;color:#fff;border:1px solid rgba(255,255,255,.5);background:transparent;transition:background .2s,border-color .2s,color .2s}
.bk-homebtn .ic{width:1.18rem;height:1.18rem}
.bk-homebtn:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(255,255,255,.1)}
.site-header.scrolled .bk-homebtn{border-color:rgba(255,255,255,.4)}
.site-header.scrolled .bk-homebtn:hover{border-color:var(--gold);color:var(--gold-soft)}

/* ---------- banner (compact, title clears cards) ---------- */
.bk-banner{position:relative;min-height:clamp(148px,20vh,196px);display:flex;align-items:flex-end;overflow:hidden;color:#fff;padding-top:var(--header-h)}
.bk-banner-media{position:absolute;inset:0;z-index:0}
.bk-banner-media img{width:100%;height:100%;object-fit:cover}
.bk-banner-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,31,26,.45) 0%,rgba(36,31,26,.3) 40%,rgba(36,31,26,.82) 100%)}
.bk-banner-content{position:relative;z-index:1;padding-bottom:clamp(12px,2vw,18px)}
.bk-title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.05;letter-spacing:-.01em;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.bk-sub{font-size:clamp(.82rem,1.1vw,.96rem);color:rgba(255,255,255,.9);margin-top:.3rem;max-width:52ch;text-shadow:0 1px 12px rgba(0,0,0,.45)}

/* ---------- main / container (cards sit BELOW the banner — no overlap) ---------- */
.bk-main{padding-bottom:clamp(28px,4vw,52px)}
.bk-container{position:relative;z-index:2;max-width:820px;margin-top:clamp(12px,2vw,20px)}

/* ---------- stepper (compact, on cream) ---------- */
.bk-steps{display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,2.2vw,1.5rem);list-style:none;margin:0 0 .9rem;flex-wrap:wrap}
.bk-steps li{display:flex;align-items:center;gap:.45rem;color:var(--ink-3)}
.bk-steps li b{font-weight:600;font-size:.84rem}
.bk-step-no{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--cream-2);border:1px solid var(--line);font-weight:700;font-size:.78rem;flex:none;color:var(--ink-3)}
.bk-steps li.active{color:var(--ink)}
.bk-steps li.active .bk-step-no{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 6px 16px -6px rgba(194,154,75,.9)}
.bk-steps li.done .bk-step-no{background:var(--sage);border-color:var(--sage);color:#fff}

/* ---------- cards (compact) ---------- */
.bk-card{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(14px,2.2vw,20px);margin-bottom:.8rem}
.bk-card-title{font-family:var(--font-display);font-size:clamp(1.1rem,1.8vw,1.3rem);font-weight:600;margin-bottom:.85rem}

/* ---------- form (compact) ---------- */
.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .8rem;margin-bottom:.9rem}
.bk-span2{grid-column:1 / -1}
.bk-nights-field{display:flex;flex-direction:column}
.bk-field label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:.3rem}
.bk-input-ic{position:relative;display:flex;align-items:center}
.bk-input-ic .ic{position:absolute;left:.8rem;width:1.1rem;height:1.1rem;color:var(--gold-deep);pointer-events:none}
.bk-input-ic input,.bk-input-ic select{width:100%;font-family:var(--font-body);font-size:.98rem;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.6rem .9rem .6rem 2.45rem;transition:border-color .2s,box-shadow .2s;appearance:none;cursor:pointer}
.bk-input-ic input:focus,.bk-input-ic select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,154,75,.15);background:#fff}
.bk-input-ic select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A77F35' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right .9rem center;background-size:1rem;padding-right:2.4rem}
.bk-nights{display:flex;align-items:center;height:calc(1.5em + 1.2rem + 3px);padding:0 1rem;font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--gold-deep);background:var(--cream-2);border-radius:var(--r-sm)}
.bk-check-btn{width:100%;justify-content:center;padding:.8em 1.4em;font-size:1rem}

/* ---------- availability result (compact) ---------- */
.bk-result{animation:bkFade .45s var(--ease)}
@keyframes bkFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bk-avail-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.bk-avail-badge{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--sage-deep);background:rgba(94,114,89,.12);border:1px solid rgba(94,114,89,.3);padding:.35em .85em;border-radius:999px;font-size:.9rem}
.bk-avail-badge span:first-child{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--sage)}
.bk-avail-dates{font-size:.88rem;color:var(--ink-3)}

.room-card{display:grid;grid-template-columns:240px 1fr;gap:2.2rem;align-items:start}
.room-card-media{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3}
.room-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.room-card-body h3{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin-bottom:.25rem}
.room-card-body .room-desc{font-size:.9rem;color:var(--ink-2);margin-bottom:.7rem;line-height:1.45}
.price-list{list-style:none;margin:0 0 .6rem;border-top:1px dashed var(--line)}
.price-list li{display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink-2);padding:.32rem 0;border-bottom:1px dashed var(--line)}
.price-list li b{color:var(--ink)}
.room-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:.5rem}
.room-total .lbl{font-weight:600;font-size:.95rem;color:var(--ink)}
.room-total .amt{font-family:var(--font-display);font-size:1.45rem;font-weight:700;color:var(--gold-deep)}

.bk-result-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:space-between;margin-top:1.3rem}
.bk-result-actions .btn-gold{margin-left:auto}
.bk-soon{margin-top:.8rem;font-size:.82rem;color:var(--ink-3);font-style:italic;text-align:center}

/* ---------- guest form (Phase 2) ---------- */
.bk-textarea{width:100%;font-family:var(--font-body);font-size:.98rem;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.6rem .9rem;transition:border-color .2s,box-shadow .2s;resize:vertical;min-height:2.6rem}
.bk-textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,154,75,.15);background:#fff}
.bk-field input.is-invalid,.bk-textarea.is-invalid{border-color:#c05757;box-shadow:0 0 0 3px rgba(192,87,87,.13)}

/* ---------- booking summary (compact) ---------- */
.bk-summary{background:var(--cream-2);border-radius:var(--r-sm);padding:.85rem 1rem;margin-bottom:1rem}
.bk-summary-title{font-family:var(--font-display);font-size:1.02rem;font-weight:600;margin-bottom:.55rem;display:flex;align-items:center;gap:.4rem}
.bk-summary-title .ic{width:1.05em;height:1.05em;color:var(--gold-deep)}
.bk-sum-rows{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem;margin-bottom:.5rem}
.bk-sum-rows .bk-sum-row{display:flex;justify-content:space-between;gap:.6rem;font-size:.86rem;padding:.18rem 0;border-bottom:1px dashed var(--line)}
.bk-sum-row span:first-child{color:var(--ink-3)}
.bk-sum-row span:last-child{color:var(--ink);font-weight:600;text-align:right}
.bk-sum-row.bk-sum-wide{grid-column:1 / -1}
.bk-sum-prices{list-style:none;margin:.4rem 0 .5rem;border-top:1px dashed var(--line)}
.bk-sum-prices li{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink-2);padding:.24rem 0;border-bottom:1px dashed var(--line)}
.bk-sum-prices li b{color:var(--ink)}
.bk-sum-line{display:flex;justify-content:space-between;gap:.6rem;font-size:.88rem;padding:.16rem 0}
.bk-sum-line span:first-child{color:var(--ink-3)}
.bk-sum-line span:last-child{font-weight:600;color:var(--ink)}
.bk-sum-discount span:last-child{color:#2e7d4f}
.bk-sum-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:.4rem;padding-top:.4rem;border-top:1.5px solid var(--line)}
.bk-sum-total .lbl{font-weight:600;font-size:.92rem;color:var(--ink)}
.bk-sum-total .amt{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--gold-deep)}

/* ---- discount code field ---- */
.bk-promo-row{display:flex;gap:.5rem;align-items:stretch}
.bk-promo-row .bk-input-ic{flex:1;min-width:0}
.bk-promo-row input{cursor:text;text-transform:uppercase}
.bk-promo-row input::placeholder{text-transform:none}
.bk-promo-apply{flex:0 0 auto;white-space:nowrap;padding-left:1rem;padding-right:1rem}
.bk-promo-msg{margin:.4rem 0 0;font-size:.82rem;line-height:1.4}
.bk-promo-msg.ok{color:#2e7d4f}
.bk-promo-msg.err{color:#c05757}

/* ---------- reCAPTCHA ---------- */
.bk-recaptcha{display:flex;justify-content:center;margin-bottom:1rem;min-height:0}
.bk-recaptcha:empty,.bk-recaptcha .g-recaptcha:empty{min-height:0}

/* ---------- success + payment (Phase 3) ---------- */
.bk-success{animation:bkFade .45s var(--ease)}
.bk-success-top{text-align:center;padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}
.bk-success-check{width:62px;height:62px;margin:0 auto .7rem;border-radius:50%;background:rgba(94,114,89,.14);border:2px solid var(--sage);display:grid;place-items:center;animation:bkPop .5s var(--ease)}
.bk-success-check svg{width:30px;height:30px;fill:none;stroke:var(--sage);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes bkPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.bk-success-title{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--sage-deep)}
.bk-success-sub{font-size:.9rem;color:var(--ink-2);margin-top:.2rem}
.bk-bookingid{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem .7rem;justify-content:center;background:var(--cream-2);border:1px dashed var(--gold);border-radius:var(--r-sm);padding:.6rem 1rem;margin:.9rem auto 0}
.bk-bookingid-lbl{font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.bk-bookingid-val{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--gold-deep);letter-spacing:.02em}
.bk-copy{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--gold-deep);border:1px solid var(--gold);border-radius:999px;padding:.25em .7em;background:var(--paper);transition:background .2s,color .2s}
.bk-copy:hover{background:var(--gold);color:#fff}
.bk-copy.copied{background:var(--sage);border-color:var(--sage);color:#fff}
.bk-copy .ic{width:1em;height:1em}
.bk-pending-note{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;color:var(--ink-2);margin-top:.8rem;background:rgba(194,154,75,.13);border-radius:999px;padding:.32em .9em}
.bk-pending-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 3px rgba(194,154,75,.22)}

.bk-pay{padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}
.bk-pay-title{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem}
.bk-pay-amount{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;background:var(--cream-2);border-radius:var(--r-sm);padding:.6rem .9rem;margin-bottom:.8rem}
.bk-pay-amount span{font-weight:600;color:var(--ink)}
.bk-pay-amount b{font-family:var(--font-display);font-size:1.55rem;font-weight:700;color:var(--gold-deep)}
.bk-bank{display:grid;grid-template-columns:auto 1fr;gap:.3rem .9rem;margin-bottom:.85rem;font-size:.9rem}
.bk-bank dt{color:var(--ink-3)}
.bk-bank dd{color:var(--ink);font-weight:600;word-break:break-word}
.bk-pay-instructions{font-size:.88rem;color:var(--ink-2);line-height:1.6}
.bk-pay-link{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bk-pay-link:hover{color:var(--gold)}

/* ============================================================
   CHECK-BOOKING page (Phase 4)
   ============================================================ */
.bk-search-field{margin-bottom:0}
.bk-search-row{display:flex;gap:.6rem;align-items:stretch}
.bk-search-row .bk-input-ic{flex:1}
.bk-search-row .btn{flex:none;padding:.6em 1.3em}
.bk-hint{margin-top:.45rem;font-size:.82rem;color:var(--ink-3)}

/* empty / no-results */
.bk-empty{text-align:center;padding:clamp(20px,3vw,32px)}
.bk-empty-ic{width:3rem;height:3rem;margin:0 auto .6rem;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bk-empty h3{font-family:var(--font-display);font-size:1.3rem;font-weight:600;margin-bottom:.3rem}
.bk-empty p{font-size:.92rem;color:var(--ink-2);margin-bottom:1rem}
.bk-empty-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* list head */
.bk-list-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.9rem;flex-wrap:wrap}
.bk-list-head .bk-card-title{margin-bottom:0}

/* status groups */
.bk-group{margin-bottom:1.3rem}
.bk-group-head{display:flex;align-items:center;gap:.5rem;margin:1.1rem 0 .6rem}
.bk-group-emoji{font-size:1rem;line-height:1;flex:none}
.bk-group-head h3{font-family:var(--font-display);font-size:.9rem;font-weight:700;letter-spacing:.3px;color:#5c5348}
.bk-group-count{display:grid;place-items:center;min-width:1.3rem;height:1.3rem;padding:0 .4rem;border-radius:999px;font-size:.72rem;font-weight:700;color:#a99f8f;background:#ece4d5}
.bk-group-cards{display:grid;gap:.55rem}

/* booking card — compact horizontal row */
.bk-bcard{display:flex;flex-direction:column;gap:.42rem;background:#fff;border:1px solid #ece4d5;border-left:3px solid #b3a89a;border-radius:12px;padding:.8rem 1.05rem;box-shadow:0 1px 2px rgba(60,45,30,.03);cursor:pointer;transition:box-shadow .18s,transform .18s,border-color .18s}
.bk-bcard:hover{box-shadow:0 6px 18px rgba(60,45,30,.1);transform:translateY(-1px)}
.bk-bcard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bk-bcard.is-pending{border-left-color:#c79a3e}
.bk-bcard.is-confirmed{border-left-color:#5b8a63}
.bk-bcard.is-cancelled{border-left-color:#b5615a}
.bk-bcard.is-history{border-left-color:#b3a89a}
/* row 1: รหัส (ซ้าย) · 🌙🚪👤 (กลาง) · ราคา (ขวา) */
.bk-bcard-r1{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;min-width:0}
.bk-bcard-id{font-family:var(--font-display);font-weight:700;color:#2c2621;font-size:.95rem;letter-spacing:.3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-bcard-mid{text-align:center;font-size:.82rem;color:#8a8178;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-bcard-total{font-size:1.06rem;font-weight:700;color:#b8933f;white-space:nowrap;justify-self:end}
/* row 2: check-in → out (ซ้าย) · รายละเอียด → (ขวา) */
.bk-bcard-r2{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-top:.34rem;border-top:1px dashed #f1ebdf}
.bk-bcard-dates{min-width:0;font-size:.82rem;color:#6b6259;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-bcard-go{flex:none;font-size:.8rem;font-weight:600;color:#8a7a4a;white-space:nowrap}

/* status badge */
.bk-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;padding:.28em .8em;border-radius:999px;white-space:nowrap}
.bk-status.is-pending{color:#8a6a1f;background:#f6ecd3;border:1px solid rgba(199,154,62,.4)}
.bk-status.is-confirmed{color:#3d6244;background:#e6efe6;border:1px solid rgba(91,138,99,.36)}
.bk-status.is-cancelled{color:#8f453f;background:#f6e6e4;border:1px solid rgba(181,97,90,.34)}
.bk-status.is-history{color:#6b6259;background:#ece7dd;border:1px solid #e2d9c9}

/* details — compact card w/ status top bar */
.bk-details{position:relative;overflow:hidden;padding-top:0}
.bk-details-topbar{position:absolute;left:0;right:0;top:0;height:3px;background:#b3a89a}
.bk-details.is-pending .bk-details-topbar{background:#c79a3e}
.bk-details.is-confirmed .bk-details-topbar{background:#5b8a63}
.bk-details.is-cancelled .bk-details-topbar{background:#b5615a}
.bk-details.is-history .bk-details-topbar{background:#b3a89a}
.bk-details-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:.6rem;margin-bottom:0;border-bottom:1px solid #f1ebdf}
.bk-details-head-l{min-width:0}
.bk-details-id{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:#2c2621;letter-spacing:.3px;line-height:1.2}
.bk-details-guest{font-size:.92rem;color:#4a433a;line-height:1.35;margin-top:.05rem}
.bk-guest-k{color:#a99f8f;font-size:.8rem}
.bk-guest-name{color:#2c2621;font-weight:700}
.bk-details-booked{font-size:.76rem;color:#a99f8f;line-height:1.3;margin-top:.02rem}

/* stay strip: เข้า | ออก (บน) + สรุปบรรทัดเดียว (ล่าง) */
.bk-stay-strip{display:grid;grid-template-columns:1fr 1fr;gap:.3rem .9rem;background:#fcfaf5;border-bottom:1px solid #f1ebdf;margin:0 calc(-1*clamp(14px,2.2vw,20px));padding:.6rem clamp(14px,2.2vw,20px)}
.bk-stay-cell{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.bk-stay-k{font-size:.7rem;color:#a99f8f;white-space:nowrap}
.bk-stay-cell b{font-size:.92rem;font-weight:600;color:#2c2621;word-break:break-word;line-height:1.2}
.bk-stay-sum{grid-column:1 / -1;font-size:.85rem;font-weight:600;color:#5c5348;line-height:1.3;padding-top:.32rem;border-top:1px dashed #ece3d2}

/* details body two columns */
.bk-details-body{display:grid;grid-template-columns:1fr 300px;gap:0}
.bk-details-col{padding:.9rem clamp(4px,1vw,10px)}
.bk-details-col-left{padding-right:clamp(1rem,2vw,1.4rem);border-right:1px solid #f1ebdf}
.bk-details-col-right{background:#faf7f0;margin:0 calc(-1*clamp(14px,2.2vw,20px)) 0 0;padding-left:clamp(1rem,2vw,1.4rem);padding-right:clamp(14px,2.2vw,20px)}
.bk-dl-title{font-family:var(--font-display);font-size:.86rem;font-weight:700;letter-spacing:.3px;margin:0 0 .4rem;color:#2c2621}
.bk-details-thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-sm);display:block;margin:0 0 .7rem;border:1px solid #eadfce}
.bk-dl-title + .bk-dl-title,.bk-crow + .bk-dl-title{margin-top:.8rem}
.bk-crow{display:flex;justify-content:space-between;gap:.8rem;padding:.24rem 0;font-size:.86rem;line-height:1.3}
.bk-crow > span:first-child{color:#8a8178}
.bk-crow > span:last-child{color:#2c2621;font-weight:600;text-align:right;word-break:break-word}
.bk-crow-last{border-bottom:1px solid #f4efe4;padding-bottom:.45rem}
.bk-special{font-size:.85rem;color:#6b6259;background:#faf6ee;border:1px solid #eee6d7;border-radius:10px;padding:.5rem .7rem;line-height:1.4;min-height:2rem}
.bk-details-col-right .bk-crow-last{border-bottom-color:#eadfce}
.bk-details-actions{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem}
.bk-details-actions .btn{width:100%;justify-content:center;font-size:.88rem;padding:.7em 1em}
.bk-back-link{background:none;border:none;font-family:inherit;font-size:.82rem;font-weight:600;color:#6b6259;cursor:pointer;padding:.3rem;transition:color .2s}
.bk-back-link:hover{color:var(--gold-deep)}

/* ---- map QR footer (Google Maps directions) ---- */
.bk-details-map{display:flex;flex-direction:column;align-items:center;gap:.5rem;border-top:1px solid #f1ebdf;background:#fff;margin:0 calc(-1*clamp(14px,2.2vw,20px)) calc(-1*clamp(14px,2.2vw,20px));padding:1rem clamp(14px,2.2vw,20px) 1.15rem}
.bk-details-map .bk-dl-title{margin:0;text-align:center}
.bk-map-qr{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none}
.bk-map-qr-img{width:132px;height:132px;border:1px solid #eee6d7;border-radius:12px;padding:8px;background:#fff;box-shadow:0 1px 3px rgba(60,45,30,.06);transition:border-color .2s,box-shadow .2s}
.bk-map-qr-cap{font-size:.76rem;color:#8a8178;font-weight:600;text-align:center}
.bk-map-qr:hover .bk-map-qr-img{border-color:var(--gold);box-shadow:0 4px 14px rgba(60,45,30,.12)}
.bk-map-qr:focus-visible .bk-map-qr-img{outline:2px solid var(--gold);outline-offset:3px}
.btn-danger-soft{background:rgba(176,74,74,.1);color:#a23b3b;border:1.5px solid rgba(176,74,74,.4)}
.btn-danger-soft:hover{background:#b04a4a;color:#fff;border-color:#b04a4a;transform:translateY(-2px)}

/* print-only header (hidden on screen) */
.bk-print-head{display:none}

/* ---------- toast ---------- */
.bk-toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(20px);z-index:300;background:var(--espresso);color:#fff;padding:.8rem 1.3rem;border-radius:var(--r);box-shadow:var(--shadow-lg);font-size:.92rem;max-width:90vw;opacity:0;transition:opacity .3s,transform .3s;display:flex;align-items:center;gap:.6rem}
.bk-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.bk-toast.error{background:#8a3a3a}
.bk-toast .ic{width:1.2rem;height:1.2rem;flex:none}

/* ---------- modal (confirm + success) ---------- */
.bk-modal-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:1.1rem;background:rgba(43,38,32,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:bkFade .2s var(--ease)}
.bk-modal-overlay[hidden]{display:none}   /* ต้องมี ไม่งั้น display:flex ทับ attribute hidden → modal ค้างบังหน้าจอตั้งแต่โหลด */
.bk-modal{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow-lg);width:100%;max-width:400px;padding:1.6rem 1.5rem;text-align:center;animation:bkPop .4s var(--ease)}
.bk-modal-title{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--espresso);margin:0}
.bk-modal-sub{font-size:.9rem;color:var(--ink-soft);margin:.4rem 0 0;line-height:1.5}
/* confirm summary */
.bk-modal-summary{text-align:left;background:var(--cream-2);border-radius:var(--r-sm);padding:.9rem 1rem;margin:1.1rem 0 0}
.bk-modal-summary .row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;padding:.22rem 0;color:var(--ink)}
.bk-modal-summary .row span:first-child{color:var(--ink-soft)}
.bk-modal-summary .row.total{margin-top:.35rem;padding-top:.5rem;border-top:1px solid var(--line);font-weight:700}
.bk-modal-summary .row.total b{font-family:var(--font-display);font-size:1.15rem;color:var(--gold-deep)}
.bk-modal-actions{display:flex;gap:.6rem;margin-top:1.3rem}
.bk-modal-actions .btn{flex:1}
/* กล่องเตือนไม่คืนเงิน (ใช้ในโมดัลยกเลิก หน้า check-booking) */
.bk-modal-warn{margin:1rem 0 0;padding:.7rem .9rem;background:rgba(176,74,74,.08);border:1px solid rgba(176,74,74,.28);border-radius:var(--r-sm);color:#8f453f;font-size:.86rem;line-height:1.55;text-align:left}
/* success state */
.bk-modal-check{width:64px;height:64px;margin:.2rem auto .8rem;border-radius:50%;background:rgba(94,114,89,.14);border:2px solid var(--sage);display:grid;place-items:center;animation:bkPop .55s var(--ease)}
.bk-modal-check svg{width:32px;height:32px;fill:none;stroke:var(--sage);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bk-modal-success .bk-modal-title{color:var(--sage-deep)}
.bk-modal-status{display:inline-block;margin:.7rem 0 0;font-size:.86rem;font-weight:700;color:#8a6a1f;background:#f6ecd3;border:1px solid rgba(199,154,62,.4);border-radius:999px;padding:.28em .95em}
.bk-modal-idrow{display:inline-flex;align-items:center;gap:.55rem;justify-content:center;background:var(--cream-2);border:1px dashed var(--gold);border-radius:var(--r-sm);padding:.5rem .95rem;margin:1rem auto 0}
.bk-modal-idrow span{font-size:.8rem;color:var(--ink-soft)}
.bk-modal-idrow b{font-family:var(--font-display);font-size:1.15rem;font-weight:700;color:var(--gold-deep);letter-spacing:.02em}
.bk-modal-go{width:100%;justify-content:center;margin-top:1.2rem}
.bk-modal-go .ic{width:1.15rem;height:1.15rem}
.bk-modal-hint{font-size:.82rem;color:var(--ink-soft);margin:.7rem 0 0;line-height:1.5}
@media (max-width:480px){.bk-modal{padding:1.4rem 1.2rem}.bk-modal-actions{flex-direction:column-reverse}}

/* button loading state */
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:1.2em;height:1.2em;margin:-.6em 0 0 -.6em;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:bkspin .7s linear infinite}
@keyframes bkspin{to{transform:rotate(360deg)}}

/* ---------- flatpickr — gold theme ---------- */
.flatpickr-calendar{font-family:var(--font-body);border-radius:var(--r);box-shadow:var(--shadow);border:1px solid var(--line)}
.flatpickr-months .flatpickr-month,.flatpickr-current-month{color:var(--ink)}
.flatpickr-weekday{color:var(--gold-deep);font-weight:600}
.flatpickr-day{color:var(--ink-2);border-radius:8px}
.flatpickr-day:hover{background:var(--cream-2);border-color:var(--cream-2)}
.flatpickr-day.today{border-color:var(--gold)}
.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,
.flatpickr-day.selected:hover{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:none}
.flatpickr-day.inRange{background:var(--gold-soft);border-color:var(--gold-soft);box-shadow:-5px 0 0 var(--gold-soft),5px 0 0 var(--gold-soft)}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--ink-3);opacity:.45}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:var(--gold-deep)}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .bk-banner{min-height:clamp(140px,22vh,190px)}
  .bk-sub{display:none}
  .bk-container{margin-top:14px}
  .bk-grid{grid-template-columns:1fr;gap:.6rem}
  /* ข้อมูลผู้พัก (step 3) — กระชับบนมือถือ: จับคู่ช่องสั้นไว้แถวเดียว */
  #step3 .bk-grid{grid-template-columns:1fr 1fr;gap:.45rem .55rem;margin-bottom:.7rem}
  #step3 .bk-field--long{grid-column:1 / -1}
  #step3 .bk-field label{margin-bottom:.18rem;font-size:.75rem}
  #step3 .bk-input-ic input,#step3 .bk-input-ic select{padding:.5rem .7rem .5rem 2.15rem;font-size:.92rem}
  #step3 .bk-input-ic .ic{left:.6rem;width:1rem;height:1rem}
  #step3 .bk-textarea{padding:.5rem .7rem;font-size:.92rem;min-height:2.2rem}
  #step3 .bk-promo-apply{padding-left:.7rem;padding-right:.7rem}
  .bk-nights-field{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}
  .bk-nights-field label{margin-bottom:0}
  .bk-nights{height:auto;padding:.45rem 1rem;font-size:1.05rem}
  .room-card{grid-template-columns:1fr;gap:.8rem}
  .room-card-media{aspect-ratio:16/9}
  .bk-result-actions{flex-direction:column-reverse}
  .bk-result-actions .btn{width:100%;justify-content:center}
  .bk-result-actions .btn-gold{margin-left:0}
  .bk-steps li b{display:none}
  .bk-steps li.active b{display:inline}
  .bk-sum-rows{grid-template-columns:1fr}
  .bk-bookingid{width:100%}
  .g-recaptcha{transform:scale(.92);transform-origin:center}
  /* check-booking */
  .bk-search-row{flex-direction:column}
  .bk-search-row .btn{justify-content:center;width:100%}
  .bk-details-body{grid-template-columns:1fr}
  .bk-details-col-left{border-right:none;border-bottom:1px solid #f1ebdf;padding-right:clamp(4px,1vw,10px)}
  .bk-details-col-right{margin-left:calc(-1*clamp(14px,2.2vw,20px));padding-left:clamp(14px,2.2vw,20px)}
  .bk-empty-actions .btn{width:100%}
  /* ---- detail: กระชับบนมือถือ ตัด label เหลือ emoji + ค่า ---- */
  .bk-details-head{padding-top:.85rem;padding-bottom:.55rem}
  .bk-details-id{font-size:1.05rem}
  .bk-stay-strip{grid-template-columns:repeat(2,1fr);gap:.35rem .7rem;padding:.55rem clamp(14px,2.2vw,20px)}
  .bk-stay-strip .bk-stay-k span{display:none}   /* ซ่อนคำ เหลือ emoji */
  .bk-stay-k{font-size:.95rem;line-height:1}
  .bk-stay-cell{flex-direction:row;align-items:baseline;gap:.35rem}
  .bk-stay-cell b{font-size:.9rem}
  .bk-details-col{padding-top:.8rem;padding-bottom:.8rem}
  .bk-dl-title{margin-bottom:.4rem;font-size:.85rem}
  .bk-dl-title + .bk-dl-title,.bk-crow + .bk-dl-title{margin-top:.75rem}
  .bk-crow{padding:.22rem 0;font-size:.85rem}
  .bk-crow-last{padding-bottom:.45rem}
  .bk-special{min-height:auto;padding:.5rem .65rem}
  .bk-details-actions{margin-top:.8rem;gap:.45rem}
  .bk-details-actions .btn{padding:.62em 1em;font-size:.85rem}
  .bk-map-qr-img{width:120px;height:120px}
}

/* ---------- print (check-booking details) ---------- */
@media print{
  .site-header,.site-footer,.bk-banner,.bk-steps,#searchCard,#bookingsList,
  .bk-details-actions,.bk-toast,.lang-toggle,.bk-headlink,.bk-homebtn{display:none!important}
  body.booking-page{background:#fff}
  .bk-main{padding:0}
  .bk-container{max-width:100%;margin:0}
  .bk-card{box-shadow:none;border:1px solid #ccc;margin:0}
  .bk-print-head{display:flex!important;align-items:center;gap:.6rem;justify-content:center;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #999}
  .bk-print-head img{width:120px;height:auto}
  .bk-print-head p{font-family:var(--font-display);font-weight:600;font-size:1.1rem}
  .bk-status{border:1px solid #999!important}
}