/* ==========================================================================
   Guest booking — "Luxury Enterprise" theme (loaded after booking.css)
   Ink navy, champagne gold, serif display type, generous whitespace.
   Hotels can set brand_json.hero_image; everything else is neutral.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600&family=Noto+Serif+Thai:wght@500;600&display=swap");

:root {
  --ink: #0b1220; --ink-2: #121b2e; --ink-3: #1b2740;
  --forest: #0b1220; --forest-2: #1b2740;
  --gold: #b8924e; --gold-2: #d9bf8c; --gold-soft: #f5eddc; --gold-deep: #8b6a2e;
  --paper: #fbfaf7; --ivory: #f6f3ec; --line: #e7e1d4; --muted: #6b7080;
  --success: #1d6b4f; --radius: 14px;
  --display: "Cormorant Garamond", "Noto Serif Thai", Georgia, serif;
  --sans: Inter, "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow-sm: 0 1px 2px rgba(11,18,32,.05);
  --shadow: 0 1px 2px rgba(11,18,32,.04), 0 18px 48px rgba(11,18,32,.08);
}
html { background: var(--paper); }
body { background: var(--paper) !important; color: #1a2233; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body::before { display: none !important; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.01em; }
::selection { background: #efe2c6; }

/* ---------- Top bar ---------- */
.topbar { background: var(--ink) !important; border-bottom: 1px solid rgba(217,191,140,.14) !important; box-shadow: none !important; }
.topbar.is-scrolled { background: rgba(11,18,32,.92) !important; backdrop-filter: saturate(1.3) blur(14px); box-shadow: 0 1px 0 rgba(217,191,140,.18) !important; }
.nav { min-height: 84px; }
.nav-links { gap: 28px; color: rgba(255,255,255,.78); font-size: 13.5px; letter-spacing: .02em; }
.nav-links .btn { background: transparent !important; border: 1px solid rgba(217,191,140,.6) !important; color: #f3e6c9 !important; border-radius: 999px; min-height: 42px; padding: 0 20px; box-shadow: none !important; }
.nav-links .btn:hover { background: rgba(217,191,140,.12) !important; }
.brand-image-link { background: #fff; border-radius: 10px; box-shadow: none; }
.brand-image-link:has(.brand-text) { background: none !important; padding: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
.brand-text { display: inline-block !important; width: auto !important; max-width: none !important; height: auto !important; overflow: visible !important; font-family: var(--display) !important; font-weight: 600 !important; font-size: 25px !important; line-height: 1 !important; letter-spacing: .005em !important; text-transform: none !important; color: #fff !important; white-space: nowrap; object-fit: initial !important; padding: 0 !important; background: none !important; }
.footer .brand-text { font-size: 22px; }
.language-trigger { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 999px !important; }
.language-trigger .language-chevron { color: rgba(255,255,255,.7); }

/* ---------- Hero ---------- */
.hero {
  min-height: 640px !important;
  background:
    linear-gradient(180deg, rgba(8,13,24,.45) 0%, rgba(8,13,24,.25) 40%, rgba(8,13,24,.82) 100%),
    linear-gradient(90deg, rgba(8,13,24,.62) 0%, rgba(8,13,24,.28) 55%, rgba(8,13,24,0) 100%),
    var(--hero-image, radial-gradient(900px 520px at 78% 20%, rgba(217,191,140,.22), transparent 62%), linear-gradient(150deg, #0b1220 0%, #16223a 55%, #1f3152 100%)) center 45% / cover no-repeat !important;
}
.hero::before, .hero::after { opacity: .5; }
.hero-inner { padding-top: 150px !important; padding-bottom: 150px !important; max-width: 860px; }
.hero .eyebrow, .eyebrow { color: var(--gold-2) !important; font: 600 11px/1 var(--sans) !important; letter-spacing: .28em !important; text-transform: uppercase; }
.hero h1 { font-family: var(--display) !important; font-weight: 500 !important; font-size: clamp(48px, 6.6vw, 92px) !important; line-height: 1.02 !important; letter-spacing: -.02em !important; color: #fff; }
.hero h1 em { font-style: italic; color: var(--gold-2) !important; font-weight: 500; }
.hero p { color: rgba(255,255,255,.78) !important; font-size: 17px !important; line-height: 1.7; max-width: 580px; }
.trust-row { gap: 26px !important; color: rgba(255,255,255,.72) !important; font-size: 12.5px; letter-spacing: .03em; }
.trust-row span::before { content: "" !important; display: inline-block; width: 14px; height: 1px; margin: 0 9px 3px 0; background: var(--gold-2); vertical-align: middle; }

/* ---------- Search ---------- */
.search-wrap { margin-top: -64px !important; }
.search-card { border-radius: 16px !important; border: 1px solid rgba(217,191,140,.45) !important; box-shadow: 0 30px 80px rgba(11,18,32,.18) !important; overflow: hidden; background: #fff; }
.search-card:focus-within { transform: none !important; }
.field { border-color: #efeae0 !important; padding: 18px 20px 16px !important; }
.field label { color: #8a8272 !important; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: .2em !important; }
.field input, .field select { font-weight: 500; color: var(--ink); }
.field:focus-within { background: #fffcf6 !important; }
.field:focus-within label { color: var(--gold-deep) !important; }
.search-card .btn-gold, .search-card .btn, .search-card button[type="submit"] {
  background: var(--ink) !important; color: #f3e6c9 !important; border-radius: 0 !important; letter-spacing: .06em; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(217,191,140,.35) !important;
}
.search-card .btn-gold:hover, .search-card button[type="submit"]:hover { background: var(--ink-3) !important; }

/* ---------- Assurance strip ---------- */
.assurance-grid { border: 1px solid var(--line) !important; border-radius: 14px !important; background: var(--line) !important; box-shadow: var(--shadow-sm) !important; }
.assurance-grid > div { background: #fff !important; }
.assurance-icon { color: var(--gold-deep) !important; border-color: #e7d7b3 !important; background: #fdf9f0 !important; }
.assurance-grid b { color: var(--ink) !important; font-weight: 600; }

/* ---------- Section heads ---------- */
.section { padding: 88px 0 !important; }
.section-head h2 { font-size: clamp(38px, 5vw, 56px) !important; color: var(--ink); line-height: 1.05; }
.section-head .eyebrow { color: var(--gold-deep) !important; }
.results-summary { border: 1px solid var(--line) !important; border-radius: 12px !important; background: #fff !important; box-shadow: var(--shadow-sm) !important; }
.results-signals span, .results-summary .results-signals span { color: var(--success) !important; }

/* ---------- Room cards ---------- */
.rooms { gap: 36px !important; }
.room-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
  grid-template-areas: "visual info" "rates rates";
  border: 1px solid var(--line) !important; border-radius: 18px !important; overflow: hidden; background: #fff !important;
  box-shadow: var(--shadow) !important; transform: none !important;
}
.room-card:hover { transform: none !important; border-color: #dccfb2 !important; }
.room-card::after { display: none !important; }
.room-visual { grid-area: visual; min-height: 400px !important; background: linear-gradient(150deg, #16223a, #0b1220) !important; }
.room-visual.has-image::after { background: linear-gradient(0deg, rgba(8,13,24,.55), transparent 55%) !important; }
.room-tag-name { font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.choice-badge { background: rgba(11,18,32,.72) !important; color: var(--gold-2) !important; border: 1px solid rgba(217,191,140,.45) !important; letter-spacing: .18em !important; font-weight: 600 !important; backdrop-filter: blur(6px); }
.gallery-arrow { background: rgba(255,255,255,.9) !important; color: var(--ink) !important; border: 0 !important; }
.room-info { grid-area: info; padding: 40px 42px !important; display: flex; flex-direction: column; }
.room-info h3 { font-size: 40px !important; line-height: 1.05; color: var(--ink) !important; margin-bottom: 6px; }
.room-info > p { font-size: 14.5px !important; line-height: 1.7; color: var(--muted) !important; margin: 10px 0 22px !important; }
.amenities { gap: 7px !important; }
.pill, .amenity-pill { border: 1px solid var(--line) !important; background: #fcfbf8 !important; color: #4a5060 !important; border-radius: 999px !important; font-size: 11.5px !important; padding: 6px 11px !important; }
.room-card:hover .pill { background: #fcfbf8 !important; }
.rate-plan { margin-top: auto !important; padding-top: 22px !important; border-top: 1px solid #efeae0 !important; }
.rate-plan b { color: var(--gold-deep) !important; font: 600 10px/1 var(--sans) !important; letter-spacing: .2em; text-transform: uppercase; }
.rate-plan li { color: #4a5060 !important; }
.rate-plan li::before { color: var(--gold) !important; }
.offer-pill { background: var(--gold-soft) !important; color: var(--gold-deep) !important; border: 1px solid #ead9b4 !important; box-shadow: none !important; }

/* Rates: full-width rows under the room */
.room-rate-stack { grid-area: rates; border-left: 0 !important; border-top: 1px solid var(--line) !important; background: #fcfbf8 !important; container-type: normal !important; }
.rate-choice {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; row-gap: 4px; align-items: center;
  padding: 24px 42px !important; border-bottom: 1px solid #efeae0 !important; background: transparent !important; box-shadow: none !important;
}
.rate-choice:hover { background: #fff !important; box-shadow: inset 2px 0 0 var(--gold) !important; }
.rate-choice > *:not(.rate-choice-action) { grid-column: 1; }
.rate-choice-action { grid-column: 2 !important; grid-row: 1 / span 8; display: flex !important; align-items: center; gap: 22px; }
.rate-choice-head h4 { font: 600 16px/1.25 var(--sans) !important; color: var(--ink) !important; }
.rate-choice-head p { font-size: 12.5px !important; }
.rate-code { background: #fff !important; color: #5b6272 !important; border: 1px solid var(--line) !important; font-weight: 600 !important; letter-spacing: .06em; }
.rate-benefits { color: var(--success) !important; font-weight: 500 !important; font-size: 12px !important; margin: 10px 0 4px !important; }
.non-refundable-term { color: #9a4a2f !important; font-weight: 600 !important; }
.guest-inclusion-note, .limited-badge { font-size: 11.5px !important; }
.guest-inclusion-note { color: #6b7080 !important; }
.limited-badge { color: #9a4a2f !important; background: #fbf1ec !important; border-color: #efd5c9 !important; }
.rate-choice .room-quantity { width: auto; flex: 0 0 auto; }
.rate-choice .room-quantity label { white-space: nowrap; font-size: 9.5px !important; letter-spacing: .16em !important; color: #8a8272 !important; }
.rate-choice .room-quantity select { width: 88px !important; min-height: 46px; padding: 0 30px 0 14px !important; border-radius: 10px; border: 1px solid var(--line); background-color: #fff; color: var(--ink); font-weight: 600; font-size: 15px; }
.rate-choice .rate-price { min-width: 200px; }
.rate-choice .price, .price { font-family: var(--sans) !important; font-weight: 600 !important; font-size: 26px !important; letter-spacing: -.02em; color: var(--ink) !important; font-variant-numeric: lining-nums tabular-nums; }
.was-price { color: #9aa0ab !important; }
.save-badge { background: var(--gold-soft) !important; color: var(--gold-deep) !important; border: 1px solid #ead9b4 !important; box-shadow: none !important; border-radius: 999px !important; font-weight: 600 !important; }
.btn, .reserve-btn {
  background: var(--ink) !important; color: #fff !important; border-radius: 10px !important; font-weight: 600 !important; letter-spacing: .02em;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px rgba(11,18,32,.16) !important;
}
.btn:hover, .reserve-btn:hover { background: var(--ink-3) !important; transform: translateY(-1px); }
.rate-choice .reserve-btn { min-height: 48px !important; padding: 0 26px !important; }
.rate-choice-featured { background: linear-gradient(90deg, #fffaf0, #fcfbf8 60%) !important; }
.featured-rate-ribbon { background: none !important; padding: 0 0 8px !important; margin: 0 !important; display: flex; gap: 10px; align-items: center; }
.featured-rate-ribbon span { background: var(--ink) !important; color: var(--gold-2) !important; border-radius: 999px !important; letter-spacing: .16em !important; font-size: 9.5px !important; padding: 5px 10px !important; }
.featured-rate-ribbon b { color: var(--gold-deep) !important; font-weight: 600 !important; }
.rate-choice-featured .reserve-btn { background: linear-gradient(180deg, #cdb07a, var(--gold)) !important; color: #1b1407 !important; box-shadow: 0 8px 20px rgba(184,146,78,.28) !important; }
.rate-stack-note { padding: 14px 42px 18px !important; font-size: 11.5px; }

/* ---------- Benefits band ---------- */
.benefits { background: linear-gradient(160deg, #0b1220, #131d33) !important; color: #fff; }
.benefits .section-head h2 { color: #fff !important; }
.benefits .eyebrow { color: var(--gold-2) !important; }
.benefit { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(217,191,140,.18) !important; border-radius: 14px !important; }
.benefit:hover { background: rgba(255,255,255,.07) !important; transform: none !important; box-shadow: none !important; }
.benefit b { font-family: var(--display) !important; font-weight: 500 !important; font-size: 24px !important; color: #f3e6c9 !important; }
.benefit span { color: rgba(255,255,255,.66) !important; }

/* ---------- Footer ---------- */
.footer { background: #080d18 !important; color: rgba(255,255,255,.6) !important; border-top: 1px solid rgba(217,191,140,.14); }
.footer a:hover { color: var(--gold-2); }

/* ---------- Checkout ---------- */
.checkout-shell { padding-top: 132px !important; background: var(--paper); }
body:has(.checkout-shell) .topbar, body:has(.confirmation) .topbar, body:has(.policy-list) .topbar { background: rgba(11,18,32,.96) !important; }
.stepper { color: #9a9486 !important; font-size: 12.5px; letter-spacing: .04em; }
.stepper b { color: var(--ink) !important; }
.panel { border: 1px solid var(--line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: var(--shadow) !important; padding: 32px !important; }
.panel:hover { transform: none !important; }
.panel h1 { font-size: 44px !important; color: var(--ink) !important; }
.panel h2 { font-size: 30px !important; color: var(--ink) !important; }
.input-group label { color: #6b6453 !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; }
.input-group input, .input-group select, .input-group textarea { border: 1px solid #ddd5c5 !important; border-radius: 10px !important; background: #fff !important; min-height: 46px; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(184,146,78,.18) !important; outline: none; }
.payment-option { border: 1px solid var(--line) !important; border-radius: 12px !important; background: #fff !important; }
.payment-option:has(input:checked) { border-color: var(--ink) !important; box-shadow: 0 0 0 1px var(--ink) inset; background: #fcfbf8 !important; }
.payment-option input { accent-color: var(--ink); }
.summary-row { color: #5b6272 !important; }
.summary-total strong { font-family: var(--sans) !important; font-weight: 600 !important; font-size: 30px !important; color: var(--ink) !important; font-variant-numeric: lining-nums tabular-nums; }
.checkout-rate-plan { background: #fcfbf8 !important; border-color: var(--line) !important; }
.checkout-rate-plan b { color: var(--ink) !important; }

/* ---------- Confirmation ---------- */
.confirmation { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 56px 48px !important; margin-top: 140px !important; }
.confirmation h1 { font-size: 46px !important; color: var(--ink) !important; }
.confirmation .check { background: var(--gold-soft) !important; color: var(--gold-deep) !important; border: 1px solid #ead9b4; }
.reference { background: var(--ink) !important; color: var(--gold-2) !important; letter-spacing: .12em; font-weight: 600; border-radius: 999px !important; padding: 12px 22px !important; }

/* ---------- Notices ---------- */
.notice-error { background: #fbf1ec !important; border-color: #efd5c9 !important; color: #8a3a22 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .room-card { grid-template-columns: 1fr !important; grid-template-areas: "visual" "info" "rates"; }
  .room-visual { min-height: 300px !important; }
  .room-info { padding: 28px 24px !important; }
  .rate-choice { grid-template-columns: 1fr; padding: 22px 24px !important; }
  .rate-choice-action { grid-column: 1 !important; grid-row: auto; margin-top: 12px; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
  .rate-choice .rate-price { text-align: left; min-width: 0; flex: 1; }
  .rate-choice .reserve-btn { width: 100%; justify-content: center; }
  .rate-stack-note { padding: 12px 24px 16px !important; }
  .hero-inner { padding-top: 120px !important; padding-bottom: 120px !important; }
}
@media (max-width: 680px) {
  .hero { min-height: 560px !important; }
  .room-info h3 { font-size: 32px !important; }
  .panel { padding: 22px !important; }
  .confirmation { padding: 36px 22px !important; }
  .checkout-shell { padding-top: 108px !important; }
  .topbar .nav-links > .btn { display: none !important; }
  .brand-text { font-size: 21px !important; }
}

/* Thai, CJK: wide tracking breaks non-Latin scripts */
:lang(th) *:not(#lx-x), :lang(zh) *:not(#lx-x), :lang(ja) *:not(#lx-x), :lang(ko) *:not(#lx-x) { letter-spacing: normal !important; }
:lang(th) label:not(#lx-x), :lang(th) .eyebrow:not(#lx-x) { font-size: 12px !important; }