/* BedsKingKong 2026 brand layer (public app only, loaded last).
   Colours come from the official logo: navy #0A1F3C (wordmark) and blue #1271EE (isotype details).
   Header applies to every public page; the hero band and home sections only to the home page. */
:root {
  --bk-navy: #0a1f3c;
  --bk-navy-950: #071629;
  --bk-navy-800: #12294a;
  --bk-blue: #1271ee;
  --bk-blue-hover: #0d5fd0;
  --bk-blue-soft: #8ec0f7;
  --bk-blue-50: #eaf2fe;
  --bk-blue-100: #d5e5fc;
  --bk-ink: #0f172a;
  --bk-muted: #475569;
  --bk-line: #e2e8f0;
  --bk-bg: #f6f8fb;
  --bk-r-card: 18px;
  --bk-shadow-1: 0 1px 2px rgb(15 23 42 / 6%), 0 6px 16px -6px rgb(15 23 42 / 14%);
  --bk-shadow-2: 0 2px 6px rgb(15 23 42 / 8%), 0 28px 56px -24px rgb(10 31 60 / 45%);
  --bk-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Header (all public pages) ---------- */
html body.app-site .bkk-top.mx-app-header {
  background: var(--bk-navy) !important;
  border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
  box-shadow: none !important;
  color: #fff;
}
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bkk-desknav a { color: #c9d6e6 !important; font-weight: 500; }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bkk-desknav a:hover { color: #fff !important; background: rgb(255 255 255 / 6%) !important; }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bkk-desknav a[aria-current] { color: #fff !important; background: transparent !important; }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bkk-desknav a[aria-current]::after { background: var(--bk-blue-soft) !important; }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header :is(.mx-currency-shortcut, .mx-settings-toggle, .mx-header-avatar, .mx-header-bell) {
  background: rgb(255 255 255 / 6%) !important;
  border: 1px solid rgb(255 255 255 / 18%) !important;
  color: #e6edf5 !important;
}
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header :is(.mx-currency-shortcut, .mx-settings-toggle, .mx-header-avatar):hover { background: rgb(255 255 255 / 12%) !important; }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .mx-header-avatar svg { color: #e6edf5 !important; }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bk-hdr-login,
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bk-hdr-register {
  align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--bk-ease);
}
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bk-hdr-login { color: #fff; border: 1px solid rgb(255 255 255 / 35%); }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bk-hdr-login:hover { background: rgb(255 255 255 / 8%); }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bk-hdr-register { color: #fff; background: var(--bk-blue); }
html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .bk-hdr-register:hover { background: var(--bk-blue-hover); }
/* Guests on desktop get explicit Ingresar / Crear cuenta buttons, so the avatar shortcut is redundant there. */
@media (min-width: 1200px) {
  html body.app-site[data-member="0"] .mx-app-header .mx-header-avatar { display: none !important; }
}

/* ---------- Home: hero band ---------- */
html body.app-site.landing-site .bk-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bk-navy); color: #fff;
  padding: 0 0 56px; margin: 0 0 8px;
}
html body.app-site.landing-site .bk-band-photo { position: absolute; inset: 0; margin: 0; z-index: -2; }
html body.app-site.landing-site .bk-band-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
html body.app-site.landing-site .bk-band-photo figcaption {
  position: absolute; right: 20px; top: 16px; font-size: 11px; color: #e2e8f0;
  background: rgb(7 22 41 / 60%); padding: 4px 10px; border-radius: 999px;
}
html body.app-site.landing-site .bk-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(10 31 60 / 97%) 0%, rgb(10 31 60 / 90%) 40%, rgb(10 31 60 / 45%) 68%, rgb(10 31 60 / 50%) 100%),
    linear-gradient(180deg, rgb(10 31 60 / 0%) 45%, rgb(10 31 60 / 96%) 82%);
}
html body.app-site.landing-site .bk-band::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -2px; height: 36px;
  background: var(--bk-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
html body.app-site.landing-site .bk-band-inner { position: relative; }
html body.app-site.landing-site .bk-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: center;
  padding: 56px 0 36px;
}
html body.app-site.landing-site .bk-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; margin: 0; padding: 0 14px;
  border-radius: 999px; border: 1px solid rgb(142 192 247 / 45%); background: rgb(18 113 238 / 18%);
  font-size: 13px; font-weight: 500; color: #e8f1fd; letter-spacing: 0; text-transform: none;
}
html body.app-site.landing-site .bk-badge svg { width: 17px; height: 17px; color: var(--bk-blue-soft); }
html body.app-site.landing-site .bk-hero h1 {
  margin: 18px 0 0; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; font-weight: 700;
  letter-spacing: -.02em; color: #fff !important;
}
html body.app-site.landing-site .bk-hl { position: relative; display: inline-block; color: var(--bk-blue-soft); white-space: nowrap; }
html body.app-site.landing-site .bk-hl svg { position: absolute; left: 0; bottom: -10px; width: 100%; height: 12px; color: var(--bk-blue); }
html body.app-site.landing-site .bk-lead { margin: 26px 0 0; max-width: 540px; font-size: 17px; line-height: 1.6; color: #d4deea !important; }
html body.app-site.landing-site .bk-glass {
  justify-self: end; width: 300px; padding: 22px; border-radius: 22px; text-align: center;
  background: rgb(10 31 60 / 55%); border: 1px solid rgb(255 255 255 / 18%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 60%); transform: rotate(-3deg);
}
html body.app-site.landing-site .bk-glass-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; background: var(--bk-blue); color: #fff; }
html body.app-site.landing-site .bk-glass-icon svg { width: 28px; height: 28px; }
html body.app-site.landing-site .bk-glass strong { display: block; font-size: 23px; line-height: 1.2; color: #fff; }
html body.app-site.landing-site .bk-glass span:last-child { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: #cbd5e1; }

/* Trust row */
html body.app-site.landing-site .bk-trust { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px 0 0; padding: 0; list-style: none; }
html body.app-site.landing-site .bk-trust li { display: flex; gap: 12px; align-items: flex-start; padding: 4px 20px; }
html body.app-site.landing-site .bk-trust li + li { border-left: 1px solid rgb(255 255 255 / 14%); }
html body.app-site.landing-site .bk-trust svg { width: 30px; height: 30px; flex: none; margin-top: 2px; color: var(--bk-blue-soft); }
html body.app-site.landing-site .bk-trust strong { display: block; font-size: 14px; font-weight: 600; color: #fff; }
html body.app-site.landing-site .bk-trust small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #b9c7d8; }

/* ---------- Home: search card inside the band ---------- */
html body.app-site.bkk-international.landing-site .ix-home-search.bk-search {
  width: auto !important; max-width: none !important; margin: 0 !important; padding: 10px !important;
  background: #fff !important; border: 0 !important; border-radius: 26px !important;
  box-shadow: var(--bk-shadow-2) !important; color: var(--bk-ink);
}
html body.app-site.landing-site .bk-search .stay-budget {
  background: var(--bk-blue-50) !important; border: 1.5px solid var(--bk-blue-100) !important; border-radius: 18px !important;
}
html body.app-site.landing-site .bk-search .stay-budget:focus-within { border-color: var(--bk-blue) !important; box-shadow: 0 0 0 3px rgb(18 113 238 / 20%) !important; }
html body.app-site.landing-site .bk-search .stay-budget input[name="budget"] {
  font-size: 26px !important; font-weight: 700 !important; color: var(--bk-ink) !important; background: transparent !important;
}
html body.app-site.landing-site .bk-search .stay-budget .budget-tag { color: var(--bk-blue) !important; }
html body.app-site.landing-site .bk-search .stay-actions .btn,
html body.app-site.landing-site .bk-search [data-search-submit] {
  background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important;
  border-radius: 18px !important; font-weight: 600 !important; box-shadow: 0 12px 24px -12px rgb(18 113 238 / 90%) !important;
}
html body.app-site.landing-site .bk-search [data-search-submit]:hover { background: var(--bk-blue-hover) !important; }

/* ---------- Home: sections below ---------- */
html body.app-site.landing-site { background: var(--bk-bg); }
html body.app-site.landing-site .landing-process article.bk-step-on { background: var(--bk-navy) !important; border-color: var(--bk-navy) !important; }
html body.app-site.landing-site .landing-process article.bk-step-on :is(h3) { color: #fff !important; }
html body.app-site.landing-site .landing-process article.bk-step-on p { color: #cbd5e1 !important; }
html body.app-site.landing-site .landing-process article.bk-step-on .landing-step-number { color: #9fb6d3 !important; }
html body.app-site.landing-site .landing-process article.bk-step-on .bf-step-icon { background: var(--bk-blue) !important; color: #fff !important; }
html body.app-site.landing-site .landing-host { background: var(--bk-navy) !important; }
html body.app-site.landing-site :is(.landing-primary, .landing-final .landing-primary) { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; }
html body.app-site.landing-site :is(.landing-primary, .landing-final .landing-primary):hover { background: var(--bk-blue-hover) !important; }
html body.app-site.landing-site .landing-final { background: linear-gradient(120deg, var(--bk-navy), var(--bk-navy-800)) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  html body.app-site.landing-site .bk-hero { grid-template-columns: 1fr; padding: 28px 0 20px; }
  html body.app-site.landing-site .bk-glass { display: none; }
  html body.app-site.landing-site .bk-trust { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  html body.app-site.landing-site .bk-trust li:nth-child(3) { border-left: 0; }
}
@media (max-width: 767.98px) {
  html body.app-site.landing-site .bk-band { padding-bottom: 40px; }
  html body.app-site.landing-site .bk-band::before {
    background: linear-gradient(180deg, rgb(10 31 60 / 55%) 0%, rgb(10 31 60 / 88%) 40%, rgb(10 31 60 / 97%) 100%);
  }
  html body.app-site.landing-site .bk-band-photo figcaption { display: none; }
  html body.app-site.landing-site .bk-hl svg { bottom: -8px; height: 9px; }
  html body.app-site.landing-site .bk-lead { font-size: 15px; margin-top: 18px; }
  html body.app-site.bkk-international.landing-site .ix-home-search.bk-search { padding: 8px !important; border-radius: 22px !important; }
  html body.app-site.landing-site .bk-trust { margin-top: 22px; }
  html body.app-site.landing-site .bk-trust li { padding: 4px 10px; gap: 10px; }
  html body.app-site.landing-site .bk-trust svg { width: 24px; height: 24px; }
  html body.app-site.landing-site .bk-trust small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.app-site .bkk-top.mx-app-header *, html body.app-site.landing-site .bk-band * { transition: none !important; }
}

/* Header logo: always the version made for dark backgrounds, since the header is navy in both themes.
   It uses its own class so the theme script that swaps .brand-wordmark leaves it alone. */
html body.app-site .mx-app-header .bk-wordmark { display: block; width: 210px; height: auto; max-width: 100%; }
@media (max-width: 767.98px) { html body.app-site .mx-app-header .bk-wordmark { width: 148px; } }
/* Hero title: one line per phrase on wide screens (older layers capped its width). */
html body.app-site.bkk-international.landing-site .bk-hero h1 { max-width: none !important; font-size: clamp(32px, 4.2vw, 58px) !important; }
/* Accent phrase on its own line, with the underline matching its width (older layers balance h1 lines). */
html body.app-site.landing-site .bk-hero h1 { text-wrap: wrap !important; }
html body.app-site.landing-site .bk-hl { display: table; }

/* Footer in the logo navy, matching the header. */
html body.app-site .platform-footer:not(.admin-footer) { background: var(--bk-navy-950) !important; }

/* Dark theme: the band's curved edge and the search card follow the dark page surface. */
html[data-bs-theme="dark"] body.app-site.landing-site { background: var(--bs-body-bg); }
html[data-bs-theme="dark"] body.app-site.landing-site .bk-band::after { background: var(--bs-body-bg); }
html[data-bs-theme="dark"] body.app-site.bkk-international.landing-site .ix-home-search.bk-search {
  background: #13253f !important; border: 1px solid rgb(255 255 255 / 10%) !important; color: #e6edf5;
}
html[data-bs-theme="dark"] body.app-site.landing-site .bk-search .stay-budget { background: rgb(18 113 238 / 16%) !important; border-color: rgb(142 192 247 / 35%) !important; }
html[data-bs-theme="dark"] body.app-site.landing-site .bk-search .stay-budget input[name="budget"] { color: #fff !important; }
/* Footer copyright line stays readable on the deeper navy (WCAG AA). */
html body.app-site .platform-footer:not(.admin-footer) .footer-bottom span { color: #9fb0c3 !important; }

/* ---------- P02 Explore: navy search panel, map and results ---------- */
html body.app-site.bkk-international .bk-explore { --bk-ex-h: calc(100dvh - 78px); }
html body.app-site.bkk-international .bk-explore .bk-ex-side { background: var(--bk-navy); color: #fff; }
html body.app-site.bkk-international .bk-explore .bk-ex-head h1 { margin: 0; font-size: 26px; font-weight: 700; color: #fff !important; letter-spacing: -.01em; }
html body.app-site.bkk-international .bk-explore .bk-ex-head p { margin: 6px 0 18px; font-size: 14px; line-height: 1.5; color: #c6d3e2; }

/* Search summary: the whole card reopens the search dialog, where the price is typed. */
html body.app-site.bkk-international .bk-explore .bk-ex-summary {
  display: block !important; width: 100%; margin: 0 !important; padding: 6px !important; text-align: left;
  background: #fff !important; color: var(--bk-ink) !important; border: 0 !important; border-radius: var(--bk-r-card) !important;
  box-shadow: var(--bk-shadow-2) !important; cursor: pointer;
}
html body.app-site.bkk-international .bk-explore .bk-ex-summary > svg { display: none; }
html body.app-site.bkk-international .bk-explore .bk-sum-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
html body.app-site.bkk-international .bk-explore .bk-sum-row + .bk-sum-row { border-top: 1px solid #eef2f6; }
html body.app-site.bkk-international .bk-explore .bk-sum-row svg { width: 20px; height: 20px; flex: none; color: var(--bk-muted); }
html body.app-site.bkk-international .bk-explore .bk-sum-row > span { display: flex; flex-direction: column; min-width: 0; }
html body.app-site.bkk-international .bk-explore .bk-sum-row strong { font-size: 14px; font-weight: 600; color: var(--bk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.app-site.bkk-international .bk-explore .bk-sum-row small { font-size: 13px; color: var(--bk-muted); }
html body.app-site.bkk-international .bk-explore .bk-sum-price { background: var(--bk-blue-50); border-top-color: transparent !important; margin-top: 4px; }
html body.app-site.bkk-international .bk-explore .bk-sum-price svg { color: var(--bk-blue); }
html body.app-site.bkk-international .bk-explore .bk-sum-price small { order: -1; font-weight: 600; color: var(--bk-ink); }
html body.app-site.bkk-international .bk-explore .bk-sum-price strong { font-size: 20px; font-weight: 700; }
html body.app-site.bkk-international .bk-explore .bk-sum-edit {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin: 6px 0 0;
  border-radius: 14px; background: var(--bk-blue); color: #fff; font-size: 15px; font-weight: 600; transition: background .18s var(--bk-ease);
}
html body.app-site.bkk-international .bk-explore .bk-ex-summary:hover .bk-sum-edit { background: var(--bk-blue-hover); }
html body.app-site.bkk-international .bk-explore .bk-sum-edit svg { width: 18px; height: 18px; }

/* Filters as a white card under the summary. */
html body.app-site.bkk-international .bk-explore .dx-catalogue-filters {
  margin: 16px 0 0 !important; padding: 6px !important; background: #fff !important; border-radius: var(--bk-r-card) !important;
  display: flex !important; flex-direction: column; gap: 0 !important; color: var(--bk-ink);
}
html body.app-site.bkk-international .bk-explore .dx-catalogue-filters details { width: 100% !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
html body.app-site.bkk-international .bk-explore .dx-catalogue-filters details + details { border-top: 1px solid #eef2f6 !important; }
html body.app-site.bkk-international .bk-explore .dx-catalogue-filters summary { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 48px; color: var(--bk-ink) !important; }
html body.app-site.bkk-international .bk-explore .dx-catalogue-filters fieldset { position: static !important; inset: auto !important; transform: none !important; width: auto !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; padding: 4px 12px 12px !important; }
html body.app-site.bkk-international .bk-explore .dx-catalogue-filters input { accent-color: var(--bk-blue); }
html body.app-site.bkk-international .bk-explore .dx-catalogue-filters button[type="submit"] { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; border-radius: 12px !important; }

/* View switch (phones only: wider screens show map and list together). */
html body.app-site.bkk-international .bk-explore .dx-view-switch { margin: 16px 0 0 !important; background: rgb(255 255 255 / 10%) !important; border-radius: 14px !important; padding: 4px !important; }
html body.app-site.bkk-international .bk-explore .dx-view-switch button { color: #e2e8f0 !important; background: transparent !important; border-radius: 10px !important; }
html body.app-site.bkk-international .bk-explore .dx-view-switch button[aria-pressed="true"] { background: #fff !important; color: var(--bk-navy) !important; }

/* Map chrome */
html body.app-site.bkk-international .bk-explore .dx-map-overlay span,
html body.app-site.bkk-international .bk-explore .dx-map-overlay button { box-shadow: var(--bk-shadow-1) !important; }
html body.app-site.bkk-international .bk-explore .bk-map-offer {
  position: absolute; left: 50%; bottom: 44px; z-index: 3; transform: translateX(-50%); margin: 0;
  display: flex; flex-direction: column; align-items: center; padding: 8px 16px; border-radius: 14px;
  background: var(--bk-navy); color: #fff; box-shadow: 0 12px 28px -12px rgb(0 0 0 / 60%); pointer-events: none; white-space: nowrap;
}
html body.app-site.bkk-international .bk-explore .bk-map-offer strong { font-size: 18px; line-height: 1.15; }
html body.app-site.bkk-international .bk-explore .bk-map-offer small { font-size: 11px; color: #c6d3e2; }

/* Result cards: Ofertar in the logo blue, price never under the button. */
html body.app-site.bkk-international :is(.bk-explore, .landing-stays) .nx-stay-foot { flex-wrap: wrap; gap: 10px; }
html body.app-site.bkk-international :is(.bk-explore, .landing-stays) .nx-stay-foot :is(a.btn, .btn) {
  background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; margin-left: auto;
}
html body.app-site.bkk-international :is(.bk-explore, .landing-stays) .nx-stay-foot :is(a.btn, .btn):hover { background: var(--bk-blue-hover) !important; }

/* Desktop: three zones (search panel, map, results). */
@media (min-width: 1200px) {
  html body.app-site.bkk-international .bk-explore.container-xxl { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-grid {
    display: grid !important; grid-template-columns: 340px minmax(0, 1fr) 400px !important; gap: 0 !important;
    height: var(--bk-ex-h); min-height: 640px; align-items: stretch !important;
  }
  html body.app-site.bkk-international .bk-explore .bk-ex-side { grid-column: 1; grid-row: 1; overflow-y: auto; padding: 26px 22px; }
  html body.app-site.bkk-international .bk-explore .bk-ex-grid > .dx-map-panel {
    grid-column: 2 !important; grid-row: 1 !important; position: relative !important; top: auto !important;
    height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important;
  }
  html body.app-site.bkk-international .bk-explore .bk-ex-grid > .dx-map-panel .dx-map-canvas { height: 100% !important; min-height: 0 !important; border-radius: 0 !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-grid > .dx-results-main {
    grid-column: 3 !important; grid-row: 1 !important; overflow-y: auto; padding: 18px 16px 24px; background: var(--bk-bg);
  }
  html body.app-site.bkk-international .bk-explore .dx-view-switch { display: none !important; }
  html body.app-site.bkk-international .bk-explore .explore-count h2 { font-size: 17px !important; margin: 0 0 4px; }
  html body.app-site.bkk-international .bk-explore .explore-count p { font-size: 12px; margin: 0 0 14px; }
  html body.app-site.bkk-international .bk-explore .grid-props { display: flex !important; flex-direction: column; gap: 12px !important; }
  html body.app-site.bkk-international .bk-explore .nx-stay { display: grid !important; grid-template-columns: 128px minmax(0, 1fr); border-radius: 16px !important; overflow: hidden; }
  html body.app-site.bkk-international .bk-explore .nx-stay-media { height: 100% !important; min-height: 150px; aspect-ratio: auto !important; border-radius: 0 !important; }
  html body.app-site.bkk-international .bk-explore .nx-stay-media img { height: 100% !important; object-fit: cover; }
  html body.app-site.bkk-international .bk-explore .nx-stay-body { padding: 12px 14px !important; }
  html body.app-site.bkk-international .bk-explore .nx-stay-body h3 { font-size: 15px !important; margin: 2px 0 !important; }
  html body.app-site.bkk-international .bk-explore .nx-stay-meta { font-size: 12px !important; }
  html body.app-site.bkk-international .bk-explore .dx-card-services { display: none !important; }
  html body.app-site.bkk-international .bk-explore .nx-stay-price strong { font-size: 16px !important; }
  html body.app-site.bkk-international .bk-explore .nx-stay-foot :is(a.btn, .btn) { padding: 8px 14px !important; min-height: 38px; }
}

/* Tablets and phones: navy panel on top, then map and list. */
@media (max-width: 1199.98px) {
  html body.app-site.bkk-international .bk-explore .bk-ex-grid { display: flex !important; flex-direction: column; gap: 18px !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-side { margin: -8px calc(var(--bs-gutter-x, 1.5rem) * -.5) 0; padding: 22px calc(var(--bs-gutter-x, 1.5rem) * .5 + 4px); border-radius: 0 0 24px 24px; }
  html body.app-site.bkk-international .bk-explore .dx-catalogue-filters { flex-direction: row !important; flex-wrap: wrap; padding: 4px !important; }
  html body.app-site.bkk-international .bk-explore .dx-catalogue-filters details { flex: 1 1 30%; width: auto !important; }
  html body.app-site.bkk-international .bk-explore .dx-catalogue-filters details + details { border-top: 0 !important; border-left: 1px solid #eef2f6 !important; }
  html body.app-site.bkk-international .bk-explore .dx-catalogue-filters details[open] { flex-basis: 100%; order: 3; border-left: 0 !important; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  html body.app-site.bkk-international .bk-explore .bk-ex-summary { display: grid !important; grid-template-columns: 1.3fr 1fr .8fr 1fr auto; align-items: center; gap: 4px; }
  html body.app-site.bkk-international .bk-explore .bk-sum-row + .bk-sum-row { border-top: 0; border-left: 1px solid #eef2f6; }
  html body.app-site.bkk-international .bk-explore .bk-sum-price { margin: 0; }
  html body.app-site.bkk-international .bk-explore .bk-sum-edit { margin: 0; padding: 0 18px; }
  html body.app-site.bkk-international .bk-explore .dx-view-switch { display: none !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  html body.app-site.bkk-international .bk-explore .bk-ex-side { grid-column: 1 / -1; }
  html body.app-site.bkk-international .bk-explore .bk-ex-grid > .dx-results-main { grid-column: 1 !important; grid-row: 2 !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-grid > .dx-map-panel { grid-column: 2 !important; grid-row: 2 !important; position: sticky !important; top: 96px !important; height: calc(100dvh - 120px) !important; }
}
@media (max-width: 767.98px) {
  html body.app-site.bkk-international .bk-explore .bk-ex-head h1 { font-size: 23px; }
  html body.app-site.bkk-international .bk-explore .bk-ex-head p { margin-bottom: 14px; }
  html body.app-site.bkk-international .bk-explore .bk-sum-row { padding: 9px 10px; }
  html body.app-site.bkk-international .bk-explore .bk-map-offer { bottom: 36px; }
}

/* Explore in the dark theme */
html[data-bs-theme="dark"] body.app-site.bkk-international .bk-explore .bk-ex-summary,
html[data-bs-theme="dark"] body.app-site.bkk-international .bk-explore .dx-catalogue-filters { background: #13253f !important; color: #e6edf5 !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .bk-explore :is(.bk-sum-row strong, .dx-catalogue-filters summary, .bk-sum-price small) { color: #f1f5f9 !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .bk-explore .bk-sum-row small { color: #a9b8ca; }
html[data-bs-theme="dark"] body.app-site.bkk-international .bk-explore :is(.bk-sum-row + .bk-sum-row, .dx-catalogue-filters details + details) { border-color: rgb(255 255 255 / 10%) !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .bk-explore .bk-sum-price { background: rgb(18 113 238 / 18%); }
html[data-bs-theme="dark"] body.app-site.bkk-international .bk-explore .bk-ex-grid > .dx-results-main { background: transparent; }

/* Explore on desktop runs edge to edge down to the footer. */
@media (min-width: 1200px) { html body.app-site.bkk-international .bk-explore.section { padding-top: 0 !important; padding-bottom: 0 !important; } }
@media (min-width: 1200px) { html body.app-site.bkk-international .bkk-main:has(.bk-explore) { padding-bottom: 0 !important; } }
html[data-bs-theme="dark"] body.app-site.bkk-international .bk-explore :is(.bk-ex-summary, .dx-catalogue-filters) { border: 1px solid rgb(255 255 255 / 12%) !important; }

/* ---------- P04–P06: zone picker, calendar, guests, and the offer page ---------- */

/* Calendar dialog: check-in / check-out in the logo blue, nights range in a soft blue band. */
html body.app-site .stay-calendar .calendar-grid > button { border-radius: 12px; font-weight: 500; transition: background .15s var(--bk-ease), color .15s var(--bk-ease); }
html body.app-site .stay-calendar .calendar-grid > button:not(:disabled):hover { background: var(--bk-blue-50); color: var(--bk-navy); }
html body.app-site .stay-calendar .calendar-grid > button.in-range { background: var(--bk-blue-50) !important; color: var(--bk-navy) !important; border-radius: 0 !important; }
html body.app-site .stay-calendar .calendar-grid > button.selected { background: var(--bk-blue) !important; color: #fff !important; font-weight: 700; border-radius: 12px !important; box-shadow: 0 6px 14px -8px rgb(18 113 238 / 90%); }
html body.app-site .stay-calendar .calendar-grid > button[aria-current="date"] { outline-color: var(--bk-blue) !important; }
html body.app-site .stay-calendar .calendar-month h3,
html body.app-site .stay-calendar .calendar-month > :first-child { color: var(--bk-navy); font-weight: 700; text-transform: capitalize; }
html body.app-site .stay-calendar .calendar-range > * { border-radius: 14px !important; }
html body.app-site .stay-calendar .calendar-range [aria-pressed="true"],
html body.app-site .stay-calendar .calendar-range .active { border-color: var(--bk-blue) !important; box-shadow: 0 0 0 3px rgb(18 113 238 / 18%) !important; background: var(--bk-blue-50) !important; }
html body.app-site .stay-calendar .mx-eyebrow { color: var(--bk-blue) !important; }
html body.app-site .stay-calendar .btn-ink:not(:disabled) { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; }
html body.app-site .stay-calendar .btn-ink:not(:disabled):hover { background: var(--bk-blue-hover) !important; }
html body.app-site .stay-calendar [data-month-step] { border-radius: 12px !important; color: var(--bk-navy); }

/* Guests sheet: round steppers and switches in the logo blue. */
html body.app-site.bkk-international .occupancy-stepper { border: 0 !important; gap: 8px !important; background: transparent !important; overflow: visible !important; }
html body.app-site.bkk-international .occupancy-stepper button {
  width: 40px !important; height: 40px !important; min-height: 40px !important; border-radius: 50% !important;
  border: 1px solid var(--bk-line) !important; background: #fff !important; color: var(--bk-blue) !important; font-size: 20px !important;
}
html body.app-site.bkk-international .occupancy-stepper button:not(:disabled):hover { background: var(--bk-blue-50) !important; border-color: var(--bk-blue-100) !important; }
html body.app-site.bkk-international .occupancy-stepper input { background: transparent !important; font-size: 18px !important; font-weight: 700 !important; color: var(--bk-ink) !important; }
html body.app-site .occupancy-switch:checked { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; }
html body.app-site .occupancy-editor .btn-ink, html body.app-site .occupancy-footer .btn-ink { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .occupancy-stepper button { background: #13253f !important; border-color: rgb(255 255 255 / 16%) !important; color: var(--bk-blue-soft) !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .occupancy-stepper input { color: #fff !important; }

/* Zone picker dialog: radius and actions in the logo palette. */
html body.app-site .stay-map-dialog .map-eyebrow { color: var(--bk-blue) !important; }
html body.app-site .stay-map-dialog input[type="range"] { accent-color: var(--bk-blue); }
html body.app-site .stay-map-dialog .map-radius-control output,
html body.app-site .stay-map-dialog .map-radius-control strong { background: var(--bk-navy) !important; color: #fff !important; }
html body.app-site .stay-map-dialog .btn-ink { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; }
html body.app-site .stay-map-dialog .btn-ink:hover { background: var(--bk-blue-hover) !important; }
html body.app-site .stay-map-dialog .btn-ghost { color: var(--bk-blue) !important; border-color: var(--bk-blue-100) !important; }

/* Offer page: navy header band, form on the left, the stay as a sticky summary on the right. */
html body.app-site.bkk-international .stay-proposal { position: relative; isolation: isolate; max-width: 1180px !important; padding-top: 34px !important; }
html body.app-site.bkk-international .stay-proposal::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 210px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--bk-navy) 0%, var(--bk-navy-800) 100%);
}
html body.app-site.bkk-international .stay-proposal > .mx-eyebrow { color: var(--bk-blue-soft) !important; }
html body.app-site.bkk-international .stay-proposal > h1 { color: #fff !important; font-size: 32px !important; margin: 6px 0 6px !important; }
html body.app-site.bkk-international .stay-proposal > .text-mute { color: #c6d3e2 !important; margin-bottom: 22px; }
html body.app-site.bkk-international .stay-proposal > .stay-form {
  background: #fff !important; border: 0 !important; border-radius: 24px !important; box-shadow: var(--bk-shadow-2) !important; padding: 22px !important;
}
html body.app-site.bkk-international .stay-proposal .direct-offer-card { border-radius: var(--bk-r-card) !important; overflow: hidden; }

/* The typed nightly offer: the largest element on the page. */
html body.app-site.bkk-international .stay-proposal .stay-budget {
  display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px !important;
  padding: 18px 20px !important; border-radius: 20px !important; text-align: left !important;
  background: var(--bk-blue-50) !important; border: 1.5px solid var(--bk-blue-100) !important;
}
html body.app-site.bkk-international .stay-proposal .stay-budget:focus-within { border-color: var(--bk-blue) !important; box-shadow: 0 0 0 4px rgb(18 113 238 / 18%) !important; }
html body.app-site.bkk-international .stay-proposal .stay-budget .budget-tag {
  display: block !important; grid-row: 1 / span 3; width: 48px !important; height: 48px !important; padding: 12px; border-radius: 14px;
  background: #fff; color: var(--bk-blue) !important; position: static !important;
}
html body.app-site.bkk-international .stay-proposal .stay-budget > label { font-size: 14px !important; font-weight: 600 !important; color: var(--bk-ink) !important; margin: 0 !important; }
html body.app-site.bkk-international .stay-proposal .stay-budget > div { display: flex !important; align-items: baseline; gap: 10px; justify-content: flex-start !important; }
html body.app-site.bkk-international .stay-proposal .stay-budget [data-budget-currency] { font-size: 16px !important; font-weight: 700 !important; color: var(--bk-blue) !important; }
html body.app-site.bkk-international .stay-proposal .stay-budget input[name="budget"] {
  width: 100% !important; max-width: 260px; text-align: left !important; font-size: 40px !important; font-weight: 700 !important;
  color: var(--bk-ink) !important; background: transparent !important; border: 0 !important; padding: 0 !important; line-height: 1.1 !important;
}
html body.app-site.bkk-international .stay-proposal .stay-budget > small { grid-column: 2; margin: 0 !important; font-size: 13px !important; color: var(--bk-muted) !important; }
html body.app-site.bkk-international .stay-proposal .stay-below-bar output { font-weight: 600; color: var(--bk-navy); }
html body.app-site.bkk-international .stay-proposal [data-search-submit] {
  background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; border-radius: 16px !important;
  min-height: 54px; font-size: 16px !important; box-shadow: 0 14px 26px -14px rgb(18 113 238 / 90%) !important;
}
html body.app-site.bkk-international .stay-proposal [data-search-submit]:hover { background: var(--bk-blue-hover) !important; }
html body.app-site.bkk-international .stay-proposal .jx-offer-duration { background: var(--bk-blue-50) !important; color: var(--bk-navy) !important; border-radius: 12px !important; }

@media (min-width: 992px) {
  html body.app-site.bkk-international .stay-proposal > .stay-form.stay-offer {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; row-gap: 0 !important; align-items: start;
  }
  html body.app-site.bkk-international .stay-proposal > .stay-offer > :not(.direct-offer-card),
  html body.app-site.bkk-international .stay-proposal > .stay-offer > .stay-main-grid > * { grid-column: 1 !important; margin-bottom: 12px; }
  html body.app-site.bkk-international .stay-proposal > .stay-offer > .direct-offer-card {
    grid-column: 2 !important; grid-row: 1 / span 40 !important; position: sticky; top: 96px; margin: 0 !important;
  }
  html body.app-site.bkk-international .stay-proposal [data-search-submit] { width: 100%; }
}
@media (max-width: 767.98px) {
  html body.app-site.bkk-international .stay-proposal::before { height: 190px; }
  html body.app-site.bkk-international .stay-proposal > h1 { font-size: 27px !important; }
  html body.app-site.bkk-international .stay-proposal > .stay-form { padding: 14px !important; border-radius: 20px !important; }
  html body.app-site.bkk-international .stay-proposal .stay-budget input[name="budget"] { font-size: 34px !important; }
}
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-proposal > .stay-form { background: #13253f !important; border: 1px solid rgb(255 255 255 / 10%) !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-proposal .stay-budget { background: rgb(18 113 238 / 16%) !important; border-color: rgb(142 192 247 / 35%) !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-proposal .stay-budget :is(input[name="budget"], > label) { color: #fff !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-proposal .stay-budget .budget-tag { background: rgb(255 255 255 / 8%); }
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-proposal .stay-below-bar output { color: #e6edf5; }

/* Result cards show their real services again on desktop (up to three, as the card renders them). */
@media (min-width: 1200px) {
  html body.app-site.bkk-international .bk-explore .dx-card-services { display: flex !important; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0 !important; font-size: 12px !important; }
}
/* Check-in stays solid after it is chosen (it becomes non-selectable as a check-out day). */
html body.app-site .stay-calendar .calendar-grid > button.selected:disabled { opacity: 1 !important; text-decoration: none !important; }
/* Guests sheet: a centred card on wide screens instead of a full-width strip. */
@media (min-width: 768px) { html body.app-site .occupancy-dialog[open] { width: min(560px, calc(100vw - 48px)) !important; max-width: 560px !important; margin: auto !important; inset: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } html body.app-site .occupancy-dialog .occupancy-editor { border-radius: 22px !important; } }

/* ---------- P07–P11: offer total, review, stay page, photo viewer, login ---------- */

/* Offer page: the estimated total reads as a summary box once dates and price exist. */
html body.app-site.bkk-international .stay-proposal .stay-below-bar output:not(:empty) {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px;
  padding: 14px 18px; border-radius: 16px; background: var(--bk-blue-50); border: 1px solid var(--bk-blue-100);
  font-size: 15px; color: var(--bk-navy);
}

/* Review: navy band, the stay on the left and the price with the send action on the right. */
html body.app-site.bkk-international .stay-review { position: relative; isolation: isolate; max-width: 1180px !important; padding-top: 34px !important; }
html body.app-site.bkk-international .stay-review::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 210px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--bk-navy) 0%, var(--bk-navy-800) 100%);
}
html body.app-site.bkk-international .stay-review > .mx-eyebrow { color: var(--bk-blue-soft) !important; }
html body.app-site.bkk-international .stay-review > h1 { color: #fff !important; font-size: 32px !important; margin: 6px 0 6px !important; }
html body.app-site.bkk-international .stay-review > .text-mute { color: #c6d3e2 !important; margin-bottom: 22px; }
html body.app-site.bkk-international .stay-review > .mx-card,
html body.app-site.bkk-international .stay-review > .direct-offer-card { border: 0 !important; border-radius: 22px !important; box-shadow: var(--bk-shadow-2) !important; background: #fff; }
html body.app-site.bkk-international .stay-review .mx-detail-grid > div { background: var(--bk-bg) !important; border-radius: 14px !important; }
html body.app-site.bkk-international .stay-review .mx-price {
  background: var(--bk-blue-50) !important; border: 1.5px solid var(--bk-blue-100) !important; border-left-width: 1.5px !important;
  border-radius: 18px !important; padding: 16px 18px !important;
}
html body.app-site.bkk-international .stay-review .mx-price strong { font-size: 30px !important; color: var(--bk-navy) !important; }
html body.app-site.bkk-international .stay-review .btn-ink { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; border-radius: 16px !important; min-height: 54px; font-size: 16px !important; box-shadow: 0 14px 26px -14px rgb(18 113 238 / 90%) !important; }
html body.app-site.bkk-international .stay-review .btn-ink:hover { background: var(--bk-blue-hover) !important; }
html body.app-site.bkk-international .stay-review .btn-ghost { border-radius: 16px !important; color: var(--bk-blue) !important; border-color: var(--bk-blue-100) !important; }
@media (min-width: 992px) {
  html body.app-site.bkk-international .stay-review { display: grid !important; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 28px; align-items: start; }
  html body.app-site.bkk-international .stay-review > :is(.mx-eyebrow, h1, .text-mute) { grid-column: 1 / -1; }
  html body.app-site.bkk-international .stay-review > .direct-offer-card { grid-column: 1; margin: 0 !important; }
  html body.app-site.bkk-international .stay-review > .mx-card { grid-column: 2; position: sticky; top: 96px; margin: 0 !important; }
  html body.app-site.bkk-international .stay-review:not(:has(> .direct-offer-card)) > .mx-card { grid-column: 1 / -1; max-width: 760px; position: static; }
}
@media (max-width: 767.98px) {
  html body.app-site.bkk-international .stay-review::before { height: 190px; }
  html body.app-site.bkk-international .stay-review > h1 { font-size: 27px !important; }
}
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-review > :is(.mx-card, .direct-offer-card) { background: #13253f !important; border: 1px solid rgb(255 255 255 / 10%) !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-review .mx-detail-grid > div { background: rgb(255 255 255 / 5%) !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-review .mx-price { background: rgb(18 113 238 / 16%) !important; border-color: rgb(142 192 247 / 35%) !important; }
html[data-bs-theme="dark"] body.app-site.bkk-international .stay-review .mx-price strong { color: #fff !important; }

/* Stay page gallery: the main photo and up to four more, adapting to how many photos exist. */
@media (min-width: 768px) {
  html body.app-site .nx-detail .hotel-gallery { position: relative; }
  html body.app-site .nx-detail .hotel-gallery-grid { display: grid !important; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 210px 210px; gap: 8px !important; border-radius: 22px; overflow: hidden; }
  html body.app-site .nx-detail .hotel-gallery-grid button { height: 100%; }
  html body.app-site .nx-detail .hotel-gallery-grid button img { width: 100%; height: 100% !important; object-fit: cover; aspect-ratio: auto !important; border-radius: 0 !important; transition: transform .4s var(--bk-ease); }
  html body.app-site .nx-detail .hotel-gallery-grid button:hover img { transform: scale(1.03); }
  html body.app-site .nx-detail .hotel-gallery-grid:has(> button:nth-child(3):last-child) { grid-template-columns: 2fr 1fr; }
  html body.app-site .nx-detail .hotel-gallery-grid:has(> button:nth-child(2):last-child) { grid-template-columns: 2fr 1fr; }
  html body.app-site .nx-detail .hotel-gallery-grid:has(> button:nth-child(2):last-child) > button:last-child { grid-row: span 2; }
  html body.app-site .nx-detail .hotel-gallery-grid:has(> button:nth-child(4):last-child) > button:last-child { grid-column: span 2; }
  html body.app-site .nx-detail [data-gallery-show] {
    position: absolute; right: 16px; bottom: 16px; margin: 0 !important; z-index: 2;
    background: rgb(10 31 60 / 85%) !important; color: #fff !important; border: 1px solid rgb(255 255 255 / 25%) !important; border-radius: 12px !important;
    backdrop-filter: blur(6px);
  }
}

/* Stay page offer panel: the typed nightly offer plus the action. */
html body.app-site .nx-offer-panel { border: 0 !important; border-radius: 22px !important; box-shadow: var(--bk-shadow-2) !important; }
html body.app-site .bk-quick-offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 4px 0 8px; min-width: 0; }
html body.app-site .bk-quick-offer .nx-offer-cta { width: 100% !important; margin: 4px 0 0 !important; }
html body.app-site .bk-quick-offer > label { font-size: 14px; font-weight: 600; color: var(--bk-ink); }
html body.app-site .bk-quick-field {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 16px; border-radius: 16px;
  background: var(--bk-blue-50); border: 1.5px solid var(--bk-blue-100); transition: border-color .15s, box-shadow .15s;
}
html body.app-site .bk-quick-field:focus-within { border-color: var(--bk-blue); box-shadow: 0 0 0 4px rgb(18 113 238 / 18%); }
html body.app-site .bk-quick-field span { font-size: 15px; font-weight: 700; color: var(--bk-blue-hover); }
html body.app-site .bk-quick-field input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 30px; font-weight: 700; color: var(--bk-ink); padding: 0; }
html body.app-site .bk-quick-field input::placeholder { color: #94a3b8; }
html body.app-site :is(.nx-offer-panel, .nx-offer-bar) .nx-btn-primary { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; border-radius: 14px !important; }
html body.app-site :is(.nx-offer-panel, .nx-offer-bar) .nx-btn-primary:hover { background: var(--bk-blue-hover) !important; }
html[data-bs-theme="dark"] body.app-site .bk-quick-field { background: rgb(18 113 238 / 16%); border-color: rgb(142 192 247 / 35%); }
html[data-bs-theme="dark"] body.app-site .bk-quick-field input, html[data-bs-theme="dark"] body.app-site .bk-quick-offer > label { color: #fff; }

/* Photo viewer: dark navy stage, white counter, round arrows and a thumbnail strip. */
html body.app-site .hotel-lightbox { background: var(--bk-navy-950) !important; color: #fff !important; border: 0 !important; }
html body.app-site .hotel-lightbox::backdrop { background: rgb(7 22 41 / 88%); }
html body.app-site .hotel-lightbox header { display: flex; align-items: center; justify-content: space-between; }
html body.app-site .hotel-lightbox [data-gallery-counter] { margin: 0; padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / 12%); color: #fff !important; font-weight: 600; }
html body.app-site .hotel-lightbox [data-gallery-close] { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--bk-navy); font-size: 24px; line-height: 1; }
html body.app-site .hotel-lightbox :is([data-gallery-previous], [data-gallery-next]) { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #fff !important; color: var(--bk-navy) !important; border: 0 !important; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 60%); }
html body.app-site .hotel-lightbox [data-gallery-image] { border-radius: 18px; }
html body.app-site .hotel-lightbox [data-gallery-caption] { color: #c6d3e2 !important; text-align: center; }
html body.app-site .hotel-lightbox-thumbs { display: flex; gap: 10px; justify-content: center; overflow-x: auto; padding: 4px 4px 12px; scrollbar-width: thin; }
html body.app-site .hotel-lightbox-thumbs button { flex: none; width: 96px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: none; opacity: .65; transition: opacity .15s, border-color .15s; }
html body.app-site .hotel-lightbox-thumbs button:hover { opacity: 1; }
html body.app-site .hotel-lightbox-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--bk-blue-soft); }
html body.app-site .hotel-lightbox-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767.98px) { html body.app-site .hotel-lightbox-thumbs { justify-content: flex-start; } html body.app-site .hotel-lightbox-thumbs button { width: 72px; height: 52px; } }

/* Login and register: the brand panel becomes a photo with the navy gradient; actions in the logo blue. */
html body.app-site .au-page .au-aside {
  background: linear-gradient(160deg, rgb(10 31 60 / 92%) 0%, rgb(10 31 60 / 70%) 55%, rgb(10 31 60 / 88%) 100%), url("/assets/categories/residential.jpg") center / cover no-repeat !important;
  border: 0 !important;
}
html body.app-site .au-page .au-aside .mx-eyebrow { color: var(--bk-blue-soft) !important; }
html body.app-site .au-page .au-aside :is(svg, .ui-icon) { color: var(--bk-blue-soft) !important; }
html body.app-site .au-page .au-card { border: 0 !important; border-radius: 24px !important; box-shadow: var(--bk-shadow-2) !important; }
html body.app-site .au-page .au-submit { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; border-radius: 14px !important; min-height: 52px; }
html body.app-site .au-page .au-submit:hover { background: var(--bk-blue-hover) !important; }
html body.app-site .au-page .au-input:focus-within { border-color: var(--bk-blue) !important; box-shadow: 0 0 0 4px rgb(18 113 238 / 16%) !important; }
html[data-bs-theme="dark"] body.app-site .au-page .au-card { background: #13253f !important; border: 1px solid rgb(255 255 255 / 10%) !important; }

/* ---------- P12–P27: signed-in guest and host spaces ---------- */

/* Primary actions across the app use the logo blue (previously charcoal / older blue). */
html body.app-site :is(.btn-ink, .nx-btn-primary):not(:disabled) { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; border-radius: 14px !important; box-shadow: 0 10px 22px -14px rgb(18 113 238 / 90%); }
html body.app-site :is(.btn-ink, .nx-btn-primary):not(:disabled):hover { background: var(--bk-blue-hover) !important; border-color: var(--bk-blue-hover) !important; }
html body.app-site .btn-ghost { border-radius: 14px !important; }

/* Page headers become a navy banner with a soft room photo on the right. */
html body.app-site :is(.mx-welcome, .hs-welcome) {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: 26px 28px !important; margin-bottom: 20px !important; border-radius: 24px;
  background: linear-gradient(100deg, var(--bk-navy) 0%, var(--bk-navy) 45%, rgb(10 31 60 / 70%) 100%), url("/assets/categories/residential.jpg") right 30% / cover no-repeat;
  box-shadow: var(--bk-shadow-2);
}
html body.app-site :is(.mx-welcome, .hs-welcome) :is(h1, h2) { color: #fff !important; }
html body.app-site :is(.mx-welcome, .hs-welcome) :is(p, .text-mute, small) { color: #cdd8e6 !important; }
html body.app-site :is(.mx-welcome, .hs-welcome) :is(.mx-eyebrow, .nx-eyebrow) { color: var(--bk-blue-soft) !important; }
html body.app-site :is(.mx-welcome, .hs-welcome) .btn:not(.btn-ink) { background: rgb(255 255 255 / 10%) !important; color: #fff !important; border: 1px solid rgb(255 255 255 / 30%) !important; }
html body.app-site :is(.mx-welcome, .hs-welcome) .btn:not(.btn-ink):hover { background: rgb(255 255 255 / 18%) !important; }
html body.app-site :is(.mx-welcome, .hs-welcome) :is(svg, .ui-icon) { color: inherit; }
@media (max-width: 767.98px) {
  html body.app-site :is(.mx-welcome, .hs-welcome) { padding: 20px 18px !important; border-radius: 20px; background: linear-gradient(160deg, var(--bk-navy) 0%, var(--bk-navy-800) 100%); }
}

/* KPI tiles: each metric gets its own soft colour, like a dashboard. */
html body.app-site .hs-kpis > * { border: 0 !important; border-radius: 20px !important; box-shadow: var(--bk-shadow-1) !important; background: #fff !important; transition: transform .2s var(--bk-ease), box-shadow .2s var(--bk-ease); }
html body.app-site .hs-kpis > *:hover { transform: translateY(-2px); box-shadow: var(--bk-shadow-2) !important; }
html body.app-site .hs-kpis > * :is(svg, .ui-icon) { border-radius: 12px; }
html body.app-site .hs-kpis > *:nth-child(4n+1) :is(span, i):has(> svg), html body.app-site .hs-kpis > *:nth-child(4n+1) > :first-child:has(svg) { background: #fdecec !important; color: #c2410c !important; }
html body.app-site .hs-kpis > *:nth-child(4n+2) :is(span, i):has(> svg), html body.app-site .hs-kpis > *:nth-child(4n+2) > :first-child:has(svg) { background: #e7f6ee !important; color: #047857 !important; }
html body.app-site .hs-kpis > *:nth-child(4n+3) :is(span, i):has(> svg), html body.app-site .hs-kpis > *:nth-child(4n+3) > :first-child:has(svg) { background: var(--bk-blue-50) !important; color: var(--bk-blue-hover) !important; }
html body.app-site .hs-kpis > * strong { font-size: 30px !important; color: var(--bk-navy) !important; }

/* Host sidebar: a navy rail with a blue active pill. */
@media (min-width: 992px) {
  html body.app-site .mx-desktop-nav.ix-host-nav { background: var(--bk-navy) !important; border: 0 !important; padding: 18px 12px !important; }
  html body.app-site .mx-desktop-nav.ix-host-nav a { color: #c9d6e6 !important; border-radius: 12px !important; font-weight: 500; justify-content: flex-start !important; text-align: left !important; padding: 11px 14px !important; transition: background .15s var(--bk-ease), color .15s var(--bk-ease); }
  html body.app-site .mx-desktop-nav.ix-host-nav a:hover { background: rgb(255 255 255 / 8%) !important; color: #fff !important; }
  html body.app-site .mx-desktop-nav.ix-host-nav a[aria-current] { background: var(--bk-blue) !important; color: #fff !important; box-shadow: 0 10px 22px -14px rgb(18 113 238 / 90%); }
}

/* Tabs and filters: pills, active in navy. */
html body.app-site .mx-tabs :is(a, button) { border-radius: 999px !important; }
html body.app-site .mx-tabs :is(a, button):is([aria-current], [aria-selected="true"], [aria-pressed="true"], .active) { background: var(--bk-navy) !important; border-color: var(--bk-navy) !important; color: #fff !important; }

/* Cards: rounder, softer, no hard borders. */
html body.app-site :is(.mx-card, .nx-card, .bf-wallet-task, .hs-income) { border-radius: 22px !important; border-color: var(--bk-line) !important; box-shadow: var(--bk-shadow-1) !important; }
html body.app-site :is(.mx-card, .nx-card):hover { box-shadow: var(--bk-shadow-2) !important; }

/* Prices in requests and offers: the guest's offer reads in blue, the listed price in neutral grey. */
html body.app-site :is(.mx-price, .nx-price-guest) { background: var(--bk-blue-50) !important; border: 1.5px solid var(--bk-blue-100) !important; border-left-width: 1.5px !important; border-radius: 18px !important; }
html body.app-site :is(.mx-price, .nx-price-guest) strong { color: var(--bk-navy) !important; }
html body.app-site .nx-price-listed { background: var(--bk-bg) !important; border: 1px solid var(--bk-line) !important; border-radius: 18px !important; }
html body.app-site .offer-expiry strong, html body.app-site .offer-expiry time { color: var(--bk-blue-hover) !important; }

/* Status chips never wrap letter by letter. */
html body.app-site :is(.nx-chip, .mx-status) { white-space: nowrap !important; width: auto !important; max-width: 100%; display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; }
html body.app-site .bf-req-head { flex-wrap: wrap; }

/* Host response choices: the selected answer is a blue pill. */
html body.app-site .nx-choices .nx-choice { border-radius: 12px !important; }
html body.app-site .nx-choices .nx-choice:is([aria-pressed="true"], [aria-checked="true"], .is-active, :has(input:checked)) { background: var(--bk-blue) !important; color: #fff !important; }

/* Guest home: the search hero picks up the room photo behind the navy gradient. */
html body.app-site .px-member-hero {
  background: linear-gradient(100deg, rgb(10 31 60 / 97%) 0%, rgb(10 31 60 / 88%) 45%, rgb(10 31 60 / 55%) 100%), url("/assets/categories/residential.jpg") center 40% / cover no-repeat !important;
  border-radius: 26px !important;
}
html body.app-site .px-member-hero [data-search-submit] { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; }

/* Profile: the identity card in the logo navy with a photo glow. */
html body.app-site .member-profile-hero {
  background: linear-gradient(160deg, rgb(10 31 60 / 96%) 0%, rgb(18 41 74 / 90%) 60%, rgb(18 113 238 / 55%) 140%), url("/assets/categories/hotel.jpg") center / cover no-repeat !important;
  border-radius: 24px !important;
}
html body.app-site .member-profile-menu > * { border-radius: 16px !important; transition: transform .15s var(--bk-ease), box-shadow .15s var(--bk-ease); }
html body.app-site .member-profile-menu > *:hover { transform: translateX(2px); box-shadow: var(--bk-shadow-1); }
html body.app-site .member-profile-menu-icon { background: var(--bk-blue-50) !important; color: var(--bk-blue) !important; border-radius: 12px !important; }
html body.app-site .member-profile-stats { background: linear-gradient(120deg, var(--bk-blue-50), #fff) !important; border-radius: 18px !important; }

/* Bottom navigation (phones): active tab in the logo blue with a top marker. */
html body.app-site .mx-bottom { background: #fff !important; border-top: 1px solid var(--bk-line) !important; box-shadow: 0 -10px 24px -18px rgb(10 31 60 / 45%); }
html body.app-site .mx-bottom a { position: relative; color: var(--bk-muted) !important; }
html body.app-site .mx-bottom a[aria-current] { color: var(--bk-blue) !important; font-weight: 600; }
html body.app-site .mx-bottom a[aria-current]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; transform: translateX(-50%); border-radius: 0 0 3px 3px; background: var(--bk-blue); }

/* Empty states: a friendlier illustration bubble. */
html body.app-site .mx-empty { border-radius: 22px !important; text-align: center; }
html body.app-site .mx-empty .mx-icon { background: var(--bk-blue-50) !important; color: var(--bk-blue) !important; border-radius: 18px !important; }

/* Dark theme for the signed-in spaces. */
html[data-bs-theme="dark"] body.app-site .hs-kpis > * { background: #13253f !important; }
html[data-bs-theme="dark"] body.app-site .hs-kpis > * strong { color: #fff !important; }
html[data-bs-theme="dark"] body.app-site :is(.mx-price, .nx-price-guest) { background: rgb(18 113 238 / 16%) !important; border-color: rgb(142 192 247 / 35%) !important; }
html[data-bs-theme="dark"] body.app-site :is(.mx-price, .nx-price-guest) strong { color: #fff !important; }
html[data-bs-theme="dark"] body.app-site .member-profile-stats { background: rgb(18 113 238 / 12%) !important; }
html[data-bs-theme="dark"] body.app-site .mx-bottom { background: #0f1f36 !important; border-top-color: rgb(255 255 255 / 10%) !important; }

/* Signed-in fixes: KPI icons, host rail, chosen response and profile card (more specific than older layers). */
html body.app-site .hs-kpis > a > svg { box-sizing: content-box; padding: 10px; border-radius: 14px; }
html body.app-site .hs-kpis > a:nth-child(4n+1) > svg { background: #fdecec; color: #c2410c; }
html body.app-site .hs-kpis > a:nth-child(4n+2) > svg { background: #e7f6ee; color: #047857; }
html body.app-site .hs-kpis > a:nth-child(4n+3) > svg { background: var(--bk-blue-50); color: var(--bk-blue-hover); }
html body.app-site .hs-kpis > a:nth-child(4n+4) > svg { background: #fff4dc; color: #a16207; }
@media (min-width: 992px) {
  html body.app-site .ix-host-nav { background: var(--bk-navy) !important; border: 0 !important; }
  html body.app-site .ix-host-nav .mx-desktop-nav { padding: 18px 12px !important; gap: 4px; }
  html body.app-site .ix-host-nav .mx-desktop-nav a { color: #c9d6e6 !important; background: transparent !important; border-radius: 12px !important; font-weight: 500; text-align: left !important; justify-content: flex-start !important; padding: 11px 14px !important; transition: background .15s var(--bk-ease), color .15s var(--bk-ease); }
  html body.app-site .ix-host-nav .mx-desktop-nav a:hover { background: rgb(255 255 255 / 8%) !important; color: #fff !important; }
  html body.app-site .ix-host-nav .mx-desktop-nav a[aria-current] { background: var(--bk-blue) !important; color: #fff !important; box-shadow: 0 10px 22px -14px rgb(18 113 238 / 90%); }
}
html body.app-site .nx-choices .nx-choice:has(input:checked) { background: var(--bk-blue) !important; color: #fff !important; border-color: var(--bk-blue) !important; }
html body.app-site .nx-choices .nx-choice:has(input:checked) * { color: #fff !important; }
html body.app-site.bkk-international .px-profile .member-profile-hero {
  background: linear-gradient(160deg, rgb(10 31 60 / 95%) 0%, rgb(18 41 74 / 88%) 60%, rgb(18 113 238 / 60%) 130%), url("/assets/categories/hotel.jpg") center / cover no-repeat !important;
}
html body.app-site .mode-become-icon { background: var(--bk-navy) !important; color: #fff !important; }
html body.app-site :is(.mx-welcome, .hs-welcome) .btn { white-space: nowrap !important; }
@media (min-width: 992px) { html body.app-site .ix-host-nav .mx-desktop-nav a { display: flex !important; width: 100%; } }

/* ---------- P11/P12 v2: login and register over a full-bleed room photo ---------- */
html body.app-site .au-page:not(.is-admin) { position: relative; isolation: isolate; padding-top: 48px !important; padding-bottom: 56px !important; }
html body.app-site .au-page:not(.is-admin)::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgb(10 31 60 / 94%) 0%, rgb(10 31 60 / 78%) 42%, rgb(10 31 60 / 45%) 100%),
    url("/assets/categories/residential.jpg") center 45% / cover no-repeat;
}
html body.app-site[data-view="register"] .au-page:not(.is-admin)::before {
  background:
    linear-gradient(90deg, rgb(10 31 60 / 94%) 0%, rgb(10 31 60 / 78%) 42%, rgb(10 31 60 / 45%) 100%),
    url("/assets/categories/hotel.jpg") center 55% / cover no-repeat;
}
/* The brand panel sits directly on the photo: no box of its own. */
html body.app-site.bkk-international .au-page .au-aside {
  background: none !important; box-shadow: none !important; border: 0 !important; min-height: 0 !important; padding: 12px 8px !important;
}
html body.app-site.bkk-international .au-page .au-aside h2 { font-size: clamp(30px, 3.6vw, 46px) !important; line-height: 1.1 !important; letter-spacing: -.02em; text-shadow: 0 2px 18px rgb(0 0 0 / 35%); }
html body.app-site .au-page .au-aside li { padding: 10px 14px; border-radius: 16px; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 14%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff !important; font-weight: 500; }
html body.app-site .au-page .au-aside li span { background: var(--bk-blue) !important; color: #fff !important; }
html body.app-site .au-page .au-aside li span :is(svg, .ui-icon) { color: #fff !important; }
/* The form card: white, rounded, lifted above the photo. */
html body.app-site.bkk-international .au-page .au-card { border-radius: 28px !important; padding: 30px !important; box-shadow: 0 30px 60px -28px rgb(0 0 0 / 55%) !important; }
html body.app-site .au-page .au-head h1 { font-size: 28px !important; color: var(--bk-navy) !important; }
html body.app-site .au-page .au-head-icon { background: var(--bk-blue-50) !important; color: var(--bk-blue) !important; border-radius: 14px !important; }
html body.app-site .au-page .au-input { border-radius: 14px !important; }
html body.app-site .au-page :is(a[href*="google"], .google-btn, .btn-google) { border-radius: 14px !important; }
/* Phones: the photo becomes a top hero with the title in white, and the card rises over it. */
@media (max-width: 899.98px) {
  html body.app-site .au-page:not(.is-admin) { padding-top: 26px !important; }
  html body.app-site .au-page:not(.is-admin)::before {
    bottom: auto; height: 300px;
    background:
      linear-gradient(180deg, rgb(10 31 60 / 72%) 0%, rgb(10 31 60 / 88%) 70%, rgb(10 31 60 / 96%) 100%),
      url("/assets/categories/residential.jpg") center 40% / cover no-repeat;
  }
  html body.app-site[data-view="register"] .au-page:not(.is-admin)::before {
    background:
      linear-gradient(180deg, rgb(10 31 60 / 72%) 0%, rgb(10 31 60 / 88%) 70%, rgb(10 31 60 / 96%) 100%),
      url("/assets/categories/hotel.jpg") center 55% / cover no-repeat;
  }
  html body.app-site.bkk-international .au-page .au-aside { display: block !important; text-align: center; padding: 4px 6px 22px !important; }
  html body.app-site.bkk-international .au-page .au-aside h2 { font-size: 28px !important; margin: 6px 0 0 !important; }
  html body.app-site .au-page .au-aside ul { display: none !important; }
  html body.app-site.bkk-international .au-page .au-card { padding: 22px 18px !important; border-radius: 24px !important; }
  html body.app-site .au-page .au-head h1 { font-size: 24px !important; }
}
html[data-bs-theme="dark"] body.app-site .au-page .au-head h1 { color: #fff !important; }
/* Login / register in the dark theme: readable links and host box on the dark card. */
html[data-bs-theme="dark"] body.app-site .au-page .au-card a:not(.btn):not(.mode-become) { color: var(--bk-blue-soft) !important; }
html[data-bs-theme="dark"] body.app-site .au-page .mode-become { background: rgb(255 255 255 / 6%) !important; border-color: rgb(142 192 247 / 30%) !important; }
html[data-bs-theme="dark"] body.app-site .au-page .mode-become :is(strong, b, span, small, p) { color: #e6edf5 !important; }
html[data-bs-theme="dark"] body.app-site .au-page .mode-become-icon { background: var(--bk-blue) !important; }

/* Google sign-in: Google's own multicolour mark on a white button with dark text (their brand guidelines). */
html body.app-site .google-login-button {
  display: flex !important; align-items: center; justify-content: center; gap: 12px; min-height: 52px;
  background: #fff !important; color: #1f1f1f !important; border: 1px solid #dadce0 !important; border-radius: 14px !important;
  font-size: 15px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgb(60 64 67 / 12%) !important;
  transition: background .15s var(--bk-ease), box-shadow .15s var(--bk-ease);
}
html body.app-site .google-login-button:not(:disabled):hover { background: #f8faff !important; box-shadow: 0 2px 8px rgb(60 64 67 / 18%) !important; }
html body.app-site .google-login-button .google-mark { flex: none; width: 20px; height: 20px; }
html[data-bs-theme="dark"] body.app-site .google-login-button { background: #fff !important; color: #1f1f1f !important; border-color: #fff !important; }

/* ---------- v3: visible on every phone screen ---------- */

/* Bottom bar: navy, with the active tab as a blue pill and a raised "Ofertar" button in the middle. */
html body.app-site .bkk-bottom.mx-bottom {
  background: var(--bk-navy) !important; border-top: 0 !important; box-shadow: 0 -12px 30px -18px rgb(0 0 0 / 70%) !important;
  padding-top: 6px !important; overflow: visible !important;
}
html body.app-site .bkk-bottom.mx-bottom a { color: #a9bbd0 !important; font-size: 10.5px !important; font-weight: 500 !important; gap: 3px; min-width: 0; }
html body.app-site .bkk-bottom.mx-bottom a::before { display: none !important; }
html body.app-site .bkk-bottom.mx-bottom a svg { width: 22px !important; height: 22px !important; padding: 4px 12px; box-sizing: content-box; border-radius: 999px; transition: background .18s var(--bk-ease), color .18s var(--bk-ease); }
html body.app-site .bkk-bottom.mx-bottom a[aria-current] { color: #fff !important; font-weight: 600 !important; }
html body.app-site .bkk-bottom.mx-bottom a[aria-current] svg { background: rgb(18 113 238 / 35%); color: #fff; }
html body.app-site .bkk-bottom.mx-bottom a.bk-nav-offer { color: #fff !important; font-weight: 600 !important; }
html body.app-site .bkk-bottom.mx-bottom a.bk-nav-offer svg {
  width: 26px !important; height: 26px !important; padding: 13px; margin-top: -26px; border-radius: 50%;
  background: var(--bk-blue); color: #fff; stroke-width: 2.4;
  box-shadow: 0 0 0 5px var(--bk-navy), 0 12px 24px -8px rgb(18 113 238 / 90%);
}
html body.app-site .bkk-bottom.mx-bottom a.bk-nav-offer[aria-current] svg { background: var(--bk-blue-hover); }

/* Simple content pages (legal, contact): navy band behind the top so they match the rest of the app. */
html body.app-site:is([data-view="terms"], [data-view="privacy"], [data-view="contact"]) .bkk-main > section:first-of-type { position: relative; isolation: isolate; }
html body.app-site:is([data-view="terms"], [data-view="privacy"], [data-view="contact"]) .bkk-main > section:first-of-type::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 200px; transform: translateX(-50%);
  background: linear-gradient(100deg, rgb(10 31 60 / 97%) 0%, rgb(10 31 60 / 85%) 55%, rgb(10 31 60 / 70%) 100%), url("/assets/categories/residential.jpg") center 40% / cover no-repeat;
}
html body.app-site:is([data-view="terms"], [data-view="privacy"], [data-view="contact"]) .card-bkk { border: 0 !important; border-radius: 24px !important; box-shadow: var(--bk-shadow-2) !important; }
html body.app-site:is([data-view="terms"], [data-view="privacy"], [data-view="contact"]) .card-bkk h1 { color: var(--bk-navy) !important; }
html body.app-site .legal-toc { background: var(--bk-blue-50) !important; border: 0 !important; border-radius: 18px !important; }
html body.app-site .legal-toc a { color: var(--bk-navy) !important; }
html body.app-site .legal-body h2 { color: var(--bk-navy) !important; }
html body.app-site .contact-channels a { border-radius: 16px !important; min-height: 52px; font-weight: 600 !important; transition: transform .15s var(--bk-ease), box-shadow .15s var(--bk-ease); }
html body.app-site .contact-channels a:hover { transform: translateY(-2px); box-shadow: var(--bk-shadow-1); }
html[data-bs-theme="dark"] body.app-site:is([data-view="terms"], [data-view="privacy"], [data-view="contact"]) .card-bkk h1,
html[data-bs-theme="dark"] body.app-site .legal-body h2, html[data-bs-theme="dark"] body.app-site .legal-toc a { color: #fff !important; }
html[data-bs-theme="dark"] body.app-site .legal-toc { background: rgb(18 113 238 / 12%) !important; }

/* Join (afiliar) header: logo navy over a hotel photo instead of the old charcoal. */
html body.app-site .hj-hero {
  background: linear-gradient(120deg, rgb(10 31 60 / 96%) 0%, rgb(10 31 60 / 86%) 55%, rgb(18 41 74 / 70%) 100%), url("/assets/categories/hotel.jpg") center / cover no-repeat !important;
  border: 0 !important; box-shadow: var(--bk-shadow-2) !important; border-radius: 26px !important;
}
html body.app-site .hj-hero .mx-eyebrow { color: var(--bk-blue-soft) !important; }
html body.app-site .hj-benefits > li { background: rgb(255 255 255 / 8%) !important; border: 1px solid rgb(255 255 255 / 14%) !important; border-radius: 18px !important; backdrop-filter: blur(6px); }
html body.app-site .hj-benefits > li :is(svg, .ui-icon) { background: var(--bk-blue) !important; color: #fff !important; border-radius: 12px; }
html body.app-site .hj-steps button[aria-current] .hj-step-dot { background: var(--bk-blue) !important; border-color: var(--bk-blue) !important; color: #fff !important; }
html body.app-site .hj-progress span, html body.app-site .hj-progress > div { background: var(--bk-blue) !important; }

/* Map: no repeated labels. The search panel already states the zone, so the map keeps only "Cambiar zona". */
html body.app-site .bk-explore .dx-map-overlay > span { display: none !important; }
html body.app-site .bk-explore .dx-map-overlay { justify-content: flex-end !important; }
/* Phones: map and nearby stays show together; "Lista" or "Mapa" narrows to just one of them. */
@media (max-width: 767.98px) {
  html body.app-site .bk-explore[data-view="list"] .bk-ex-grid > .dx-map-panel { display: none !important; }
  html body.app-site .bk-explore[data-view="map"] .bk-ex-grid > .dx-results-main { display: none !important; }
  html body.app-site .bk-explore[data-view="map"] .bk-ex-grid > .dx-map-panel { height: calc(100dvh - 230px) !important; min-height: 420px !important; }
}
/* Bottom bar, with enough weight to beat the older layers (they force a dark icon colour and square backgrounds). */
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom { background: var(--bk-navy) !important; border-top: 0 !important; box-shadow: 0 -12px 30px -18px rgb(0 0 0 / 70%) !important; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a { color: #a9bbd0 !important; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a::after { display: none !important; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a svg { color: #c9d6e6 !important; background: transparent !important; border-radius: 999px !important; padding: 4px 12px !important; box-sizing: content-box !important; width: 22px !important; height: 22px !important; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a[aria-current] { color: #fff !important; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a[aria-current] svg { color: #fff !important; background: rgb(18 113 238 / 40%) !important; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a.bk-nav-offer { color: #fff !important; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a.bk-nav-offer svg {
  width: 26px !important; height: 26px !important; padding: 13px !important; margin-top: -26px; border-radius: 50% !important;
  background: var(--bk-blue) !important; color: #fff !important; stroke-width: 2.4;
  box-shadow: 0 0 0 5px var(--bk-navy), 0 12px 24px -8px rgb(18 113 238 / 90%);
}
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a:focus-visible { outline: 3px solid var(--bk-blue-soft) !important; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom a { white-space: nowrap !important; overflow: visible; text-overflow: ellipsis; font-size: 10px !important; letter-spacing: -.01em; }
html body.app-site.bkk-international[data-view] .bkk-bottom.mx-bottom:has(> a:nth-child(6)) a:not(.bk-nav-offer) svg { padding: 4px 9px !important; }

/* Header on small phones (signed in): logo, currency, bell and profile always fit on one line. */
@media (max-width: 420px) {
  html body.app-site .mx-app-header .bk-wordmark { width: 124px !important; }
  html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .mx-header-actions { gap: 6px !important; }
  html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .mx-currency-shortcut { padding: 6px 9px !important; gap: 5px !important; min-height: 40px !important; min-width: 0 !important; font-size: 12px !important; }
  html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .mx-currency-shortcut .region-chevron { display: none !important; }
  html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header :is(.mx-header-avatar, .mx-header-bell) { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; flex: none; }
}
@media (max-width: 359.98px) {
  html body.app-site .mx-app-header .bk-wordmark { width: 112px !important; }
  html body.app-site.bkk-international[data-view] .bkk-top.mx-app-header .mx-currency-shortcut [data-active-currency] { display: none !important; }
}

/* Explore on phones: the search collapses to one compact bar (destination + offer + edit) so the map and stays come first. */
@media (max-width: 767.98px) {
  html body.app-site.bkk-international .bk-explore .bk-ex-side { padding: 14px 16px 16px !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-head h1 { font-size: 20px !important; margin-bottom: 10px; }
  html body.app-site.bkk-international .bk-explore .bk-ex-head p { display: none; }
  html body.app-site.bkk-international .bk-explore .bk-ex-summary { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 6px !important; border-radius: 18px !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-row:nth-child(2),
  html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-row:nth-child(3) { display: none !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-row { border: 0 !important; padding: 6px 8px !important; margin: 0 !important; min-width: 0; }
  html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-row small { font-size: 11.5px; }
  html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-price { padding: 6px 10px !important; border-radius: 12px; }
  html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-price > svg { display: none; }
  html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-price small { font-size: 10.5px; }
  html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-price strong { font-size: 14px; max-width: 92px; }
  html body.app-site.bkk-international .bk-explore .bk-sum-edit { width: 44px; height: 44px; margin: 0 !important; padding: 0 !important; font-size: 0 !important; border-radius: 14px; }
  html body.app-site.bkk-international .bk-explore .bk-sum-edit svg { width: 20px; height: 20px; }
  html body.app-site.bkk-international .bk-explore .dx-view-switch { margin-top: 12px !important; }
  html body.app-site.bkk-international .bk-explore .dx-catalogue-filters { margin-top: 10px !important; }
  html body.app-site.bkk-international .bk-explore .bk-ex-grid > .dx-map-panel { height: 46dvh !important; min-height: 300px !important; }
}
/* Phones: the search form lives in Inicio and Ofertar, so Buscar shows only the map and nearby stays (zone changes from the map). */
@media (max-width: 767.98px) { html body.app-site.bkk-international .bk-explore .bk-ex-summary { display: none !important; } html body.app-site.bkk-international .bk-explore .dx-view-switch { margin-top: 0 !important; } }
@media (max-width: 1199.98px) { html body.app-site.bkk-international .bk-explore .bk-ex-side { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 20px !important; padding-right: 20px !important; } }
@media (max-width: 1199.98px) { html body.app-site.bkk-international .bk-explore .bk-ex-side { align-self: stretch !important; width: auto !important; } }
@media (max-width: 1199.98px) { html body.app-site.bkk-international .bk-explore .bk-ex-side { margin-top: -16px !important; } }
@media (min-width: 768px) and (max-width: 1199.98px) { html body.app-site.bkk-international .bk-explore .bk-ex-side { margin-top: calc(-16px - 16px) !important; } }
@media (min-width: 768px) and (max-width: 1199.98px) { html body.app-site.bkk-international .bk-explore .bk-ex-side { margin-left: -24px !important; margin-right: -24px !important; padding-left: 24px !important; padding-right: 24px !important; } }
/* Tablets: the one-line search summary always fits (the guests cell gives way below 992 px). */
@media (min-width: 768px) and (max-width: 1199.98px) { html body.app-site.bkk-international .bk-explore .bk-ex-summary { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) auto !important; } html body.app-site.bkk-international .bk-explore .bk-sum-edit { white-space: nowrap; padding: 0 14px !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { html body.app-site.bkk-international .bk-explore .bk-ex-summary { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto !important; } html body.app-site.bkk-international .bk-explore .bk-ex-summary .bk-sum-row:nth-child(3) { display: none !important; } }

/* When a page has its own fixed action bar above the menu (stay page "Ofertar"), the menu's Ofertar button stays flat so it never covers it. */
html body.app-site.bkk-international[data-view]:has(.nx-offer-bar:not(.is-hidden), .bf-play-banner:not([hidden])) .bkk-bottom.mx-bottom a.bk-nav-offer svg {
  width: 22px !important; height: 22px !important; padding: 4px 12px !important; margin-top: 0 !important;
  border-radius: 999px !important; box-shadow: none !important; background: var(--bk-blue) !important; stroke-width: 2.2;
}
/* Stay page on phones: the offer panel only keeps its fine print, so it has no card of its own. */
@media (max-width: 991.98px) {
  html body.app-site .nx-detail-layout .nx-offer-panel { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; }
  html body.app-site .nx-detail-layout .nx-offer-panel .nx-fine { margin: 0 0 8px !important; text-align: center; color: var(--bk-muted) !important; }
}