/* =====================================================================
   BHROMI — Review Booking (route /booking/:hotelSlug)
   Scoped to .brv-* so nothing leaks into other pages.
   Mobile first. >=768 widens the container, >=1024 becomes two columns
   (cards left, sticky price summary right) and the bottom bar is hidden.
   Colours are variables: swap --brv-bar-* to restyle the bottom bar.
   ===================================================================== */
.brv {
  --brv-bg: #eef3fb;
  --brv-card: #fff;
  --brv-line: #e1e7f3;
  --brv-ink: #0b1233;
  --brv-mute: #5d6a85;
  --brv-blue: #1d4fd8;
  --brv-blue-soft: #eaf0ff;
  --brv-green: #0d8a4b;
  --brv-green-soft: #e5f6ec;
  --brv-red: #d63a3a;
  --brv-amber-soft: #fff6e0;
  --brv-bar-bg: #0a1b63;
  --brv-bar-ink: #fff;
  --brv-bar-mute: #b9c4ee;
  --brv-cta: #ffc400;
  --brv-cta-ink: #0a1b63;
  --brv-r: 16px;
  font-family:"Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--brv-ink);
  background: var(--brv-bg);
  min-height: 100vh;
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  -webkit-text-size-adjust: 100%;
}
.brv *, .brv *::before, .brv *::after { box-sizing: border-box; }
body.brv-on { background: #eef3fb; }
@media (max-width: 1023px) { body.brv-on footer, body.brv-on .bhf { display: none !important; } }
/* checkout focus on phones: the page has its own back header, so the global site header is hidden */
@media (max-width: 767px) { body.brv-on header.glass-header { display: none; } .brv-top { position: sticky; top: 0; z-index: 30; background: var(--brv-bg); } }

.brv-wrap { max-width: 1120px; margin: 0 auto; padding: 0 12px; }
:where(.brv) button, :where(.brv) input, :where(.brv) textarea { font: inherit; color: inherit; }
.brv button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brv :focus-visible { outline: 2px solid var(--brv-blue); outline-offset: 2px; }

/* ---------- header + progress ---------- */
.brv-top { display: flex; align-items: center; gap: 4px; height: 52px; }
.brv-top h1 { flex: 1; margin: 0; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -0.1px; }
.brv-back { width: 40px; height: 40px; border: 0; background: none; border-radius: 12px; display: grid; place-items: center; color: var(--brv-ink); }
.brv-back:disabled { opacity: 0.3; cursor: default; }
.brv-top-sp { width: 40px; }
.brv-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; gap: 4px; }
.brv-steps li { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--brv-mute); }
.brv-steps li i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; background: #dfe6f5; color: var(--brv-mute); }
.brv-steps li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brv-steps li.is-now { color: var(--brv-ink); }
.brv-steps li.is-now i { background: var(--brv-blue); color: #fff; }
.brv-steps li.is-done i { background: var(--brv-green); color: #fff; }
@media (max-width: 479px) { .brv-steps li:not(.is-now) span { display: none; } .brv-steps li.is-now { flex: 2.2; } }

.brv-grid { display: block; }
.brv-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.brv-aside { display: none; }

/* ---------- cards ---------- */
.brv-card { background: var(--brv-card); border: 1px solid var(--brv-line); border-radius: var(--brv-r); padding: 12px; box-shadow: 0 1px 2px rgba(11, 18, 51, 0.04); }
.brv-card.is-invalid { border-color: var(--brv-red); }
.brv-h { display: flex; align-items: center; gap: 9px; min-height: 28px; width: 100%; margin: 0 0 8px; padding: 0; background: none; border: 0; text-align: left; }
.brv-h-btn { margin-bottom: 0; }
.brv-h-ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--brv-blue); background: var(--brv-blue-soft); }
.brv-h-t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; font-size: 15px; line-height: 1.25; }
.brv-h-t b { font-weight: 700; }
.brv-h-t em { font-style: normal; font-weight: 500; color: var(--brv-mute); font-size: 13px; margin-left: 4px; }
.brv-h-t small { flex-basis: 100%; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.35; color: var(--brv-mute); }
.brv-h-r { flex: none; }
.brv-chev { flex: none; color: var(--brv-mute); transition: transform 0.25s ease; }
.brv-chev.is-open { transform: rotate(180deg); }
.brv-h-btn + .brv-collapse .brv-collapse-in > .brv-body { padding-top: 10px; }
.brv-body { display: flex; flex-direction: column; gap: 10px; }
.brv-muted { color: var(--brv-mute); font-size: 12.5px; margin: 0; }
.brv-hint { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--brv-mute); }
.brv-err { margin: 4px 0 0; font-size: 12px; color: var(--brv-red); }
.brv-link { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--brv-blue); text-decoration: none; }
.brv-count { font-size: 12px; font-weight: 600; color: var(--brv-mute); }
.brv-count.is-done { color: var(--brv-green); }
.brv-edit { border: 0; background: none; padding: 4px 2px; font-size: 13px; font-weight: 700; color: var(--brv-blue); }

/* animated collapse (grid-rows trick) */
.brv-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.26s ease; }
.brv-collapse.is-open { grid-template-rows: 1fr; }
.brv-collapse-in { overflow: hidden; min-height: 0; }
.brv-collapse:not(.is-open) .brv-collapse-in { visibility: hidden; transition: visibility 0s 0.26s; }
@media (prefers-reduced-motion: reduce) { .brv-collapse, .brv-chev, .brv-pol-chev, .brv-chev-r { transition: none; } }

/* ---------- hotel ---------- */
.brv-hotel { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.brv-hotel-img { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--brv-blue-soft); display: grid; place-items: center; color: var(--brv-blue); }
.brv-hotel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brv-hotel-b h2 { margin: 0 0 3px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.brv-rate { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.brv-score { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 6px; background: #fff4d6; font-size: 12px; font-weight: 700; color: #8a5b00; }
.brv-star { fill: #f5a800; stroke: #f5a800; }
.brv-loc { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12.5px; color: var(--brv-mute); }
.brv-hotel .brv-link { grid-column: 1 / -1; justify-self: end; margin-top: -4px; }

/* ---------- summary ---------- */
.brv-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--brv-line); border-radius: 12px; }
.brv-dates > div { display: flex; flex-direction: column; min-width: 0; }
.brv-dates small { font-size: 12px; color: var(--brv-mute); }
.brv-dates b { font-size: 15px; font-weight: 700; margin: 1px 0; }
.brv-dates span { font-size: 12px; color: var(--brv-mute); }
.brv-dates-ar { color: var(--brv-mute); }
.brv-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.brv-chips span { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border-radius: 10px; background: var(--brv-blue-soft); color: var(--brv-blue); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.brv-edit-panel { padding-top: 12px; }
.brv-sub-h { margin: 12px 0 6px; font-size: 13px; font-weight: 700; }
.brv-rooms { display: flex; flex-direction: column; gap: 6px; }
.brv-roomopt { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--brv-line); border-radius: 12px; cursor: pointer; }
.brv-roomopt.is-on { border-color: var(--brv-blue); background: var(--brv-blue-soft); }
.brv-roomopt.is-off { opacity: 0.55; cursor: not-allowed; }
.brv-roomopt input { position: absolute; opacity: 0; pointer-events: none; }
.brv-roomopt-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brv-roomopt-b b { font-size: 13.5px; }
.brv-roomopt-b small { font-size: 12px; color: var(--brv-mute); line-height: 1.35; }
.brv-roomopt-b small.ok { color: var(--brv-green); }
.brv-roomopt-b small.bad { color: var(--brv-red); }
.brv-roomopt-p { font-size: 12.5px; font-weight: 700; white-space: nowrap; }

/* ---------- room ---------- */
.brv-room { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 8px; border-radius: 12px; background: #f6f9ff; }
.brv-room-img { width: 104px; min-height: 112px; border-radius: 10px; overflow: hidden; background: var(--brv-blue-soft); display: grid; place-items: center; color: var(--brv-blue); }
.brv-room-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brv-room-b h3 { margin: 2px 0 6px; font-size: 15px; font-weight: 700; line-height: 1.25; }
.brv-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.brv-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.brv-tags .tag-bed { background: var(--brv-green-soft); color: var(--brv-green); }
.brv-tags .tag-ok { background: var(--brv-blue-soft); color: var(--brv-blue); }
.brv-tags .tag-n { background: #eef0f5; color: var(--brv-mute); }
.brv-line { display: flex; align-items: center; gap: 7px; margin: 3px 0 0; font-size: 12.5px; }
.brv-line svg { flex: none; color: var(--brv-mute); }
.brv-room-more { padding-top: 8px; font-size: 13px; line-height: 1.5; color: var(--brv-mute); }
.brv-room-more p { margin: 0 0 6px; }
.brv-room-more ul { margin: 0; padding-left: 18px; }

/* ---------- coupon ---------- */
.brv-coupon { padding: 8px; }
.brv-coupon-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: var(--brv-blue-soft); text-align: left; }
.brv-coupon-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--brv-blue); }
.brv-coupon-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.brv-coupon-t b { font-size: 14.5px; color: #0f2a8f; }
.brv-coupon-t small { font-size: 12.5px; color: var(--brv-mute); }
.brv-chev-r { flex: none; color: var(--brv-blue); transition: transform 0.25s ease; }
.brv-chev-r.is-open { transform: rotate(90deg); }
.brv-coupon-b { padding: 10px 4px 4px; display: flex; flex-direction: column; gap: 8px; }
.brv-row { display: flex; gap: 8px; }
.brv-row .brv-in { flex: 1; min-width: 0; text-transform: uppercase; }
.brv-chipsrow { display: flex; flex-wrap: wrap; gap: 6px; }
.brv-chipsrow button { padding: 5px 10px; border: 1px solid var(--brv-line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; text-transform: uppercase; }

/* ---------- policies ---------- */
.brv-pol { display: flex; flex-direction: column; }
.brv-pol-row { border-top: 1px solid var(--brv-line); }
.brv-pol-row:first-child { border-top: 0; }
.brv-pol-h { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 2px; background: none; border: 0; text-align: left; }
.brv-pol-ic { flex: none; width: 24px; display: grid; place-items: center; color: var(--brv-blue); }
.brv-pol-t { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.3; }
.brv-pol-chev { flex: none; color: var(--brv-mute); transition: transform 0.25s ease; }
.brv-pol-row.is-open .brv-pol-chev { transform: rotate(90deg); }
.brv-pol-row.is-open > .brv-pol-h .brv-pol-t { color: var(--brv-blue); }
.brv-pol-b { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #f3f7ff; }
.brv-pol-ul { margin: 0; padding: 0 0 0 16px; font-size: 13px; line-height: 1.5; color: #27324f; }
.brv-pol-ul li + li { margin-top: 5px; }
.brv-pol-ul.pad { padding-left: 18px; }
.brv-pol-note { margin: 8px 0 0; font-size: 12.5px; font-style: italic; color: var(--brv-mute); line-height: 1.45; }
.brv-pol-p { margin: 0; font-size: 13px; line-height: 1.5; color: #27324f; }
.brv-pol-p + .brv-pol-p { margin-top: 6px; }
.brv-pol-badge { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; }
.brv-pol-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.brv-pol-tags span { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--brv-line); font-size: 12px; font-weight: 600; }
.brv-pol-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.brv-pol-times small { display: block; font-size: 12px; color: var(--brv-mute); }
.brv-pol-times b { font-size: 14px; }
.brv-more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 10px; border: 0; border-radius: 10px; background: var(--brv-blue-soft); color: var(--brv-blue); font-size: 14px; font-weight: 700; }
.brv-more.soft { margin-top: 8px; background: transparent; padding: 6px; }
.brv-more svg { transition: transform 0.25s ease; }
.brv-more .is-flip { transform: rotate(180deg); }

/* ---------- forms ---------- */
.brv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 479px) { .brv-grid2 { grid-template-columns: 1fr; } .brv-edit-panel .brv-grid2 { grid-template-columns: 1fr 1fr; } }
.brv-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brv-f-l { font-size: 12.5px; font-weight: 600; color: #27324f; }
.brv-f-l i { color: var(--brv-red); font-style: normal; }
.brv-f-e { font-size: 12px; color: var(--brv-red); }
.brv-f-h { font-size: 12px; color: var(--brv-mute); }
.brv-in { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #cfd8ec; border-radius: 12px; background: #fff; font-size: 16px; color: var(--brv-ink); }
.brv-in::placeholder { color: #98a3bd; }
.brv-in[readonly] { background: #f3f6fc; color: var(--brv-mute); }
.brv-f.is-invalid .brv-in { border-color: var(--brv-red); }
.brv-ta { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
.brv-counter { align-self: flex-end; margin-top: -4px; font-size: 12px; color: var(--brv-mute); }
.brv-room-tag { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12.5px; color: var(--brv-mute); }
.brv-room-tag span { padding: 2px 8px; border-radius: 6px; background: var(--brv-green-soft); color: var(--brv-green); font-weight: 700; }
.brv-extra { margin-top: 2px; }
.brv-login { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--brv-amber-soft); font-size: 13px; line-height: 1.4; }
.brv-login svg { flex: none; margin-top: 2px; color: #b27300; }
.brv-login a { color: var(--brv-blue); text-decoration: underline; }

.brv-ck, .brv-req, .brv-rd, .brv-method { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.4; }
.brv-ck input, .brv-req input, .brv-rd input, .brv-method input { position: absolute; opacity: 0; pointer-events: none; }
.brv-ck-box { flex: none; width: 20px; height: 20px; border: 1.5px solid #aab6d3; border-radius: 6px; display: grid; place-items: center; background: #fff; color: transparent; transition: background 0.15s, border-color 0.15s; }
.brv-ck input:checked + .brv-ck-box, .brv-req input:checked + .brv-ck-box { background: var(--brv-blue); border-color: var(--brv-blue); color: #fff; }
.brv-ck input:focus-visible + .brv-ck-box, .brv-req input:focus-visible + .brv-ck-box, .brv-rd input:focus-visible ~ .brv-rd-dot, .brv-roomopt input:focus-visible ~ .brv-rd-dot, .brv-method input:focus-visible ~ .brv-rd-dot { outline: 2px solid var(--brv-blue); outline-offset: 2px; }
.brv-reqs { gap: 8px; }
.brv-req { align-items: center; min-height: 46px; padding: 8px 10px; border: 1px solid var(--brv-line); border-radius: 12px; font-size: 14px; font-weight: 500; }
.brv-req.is-on { border-color: var(--brv-blue); background: var(--brv-blue-soft); }
.brv-req-ic { color: var(--brv-blue); }
.brv-rd-dot { flex: none; width: 20px; height: 20px; border: 1.5px solid #aab6d3; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.brv-rd input:checked ~ .brv-rd-dot, .brv-roomopt input:checked ~ .brv-rd-dot, .brv-method input:checked ~ .brv-rd-dot { border-color: var(--brv-blue); background: radial-gradient(circle, var(--brv-blue) 0 5px, #fff 5.5px); }
.brv-bed { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brv-rd { align-items: center; min-height: 46px; padding: 8px 12px; border: 1px solid var(--brv-line); border-radius: 12px; font-size: 14px; font-weight: 500; }
.brv-rd.is-on { border-color: var(--brv-blue); background: var(--brv-blue-soft); }
.brv-bed + .brv-hint { margin-top: 8px; }

.brv-methods { display: grid; grid-template-columns: 1fr; gap: 8px; }
.brv-method { align-items: center; padding: 10px 12px; border: 1px solid var(--brv-line); border-radius: 12px; }
.brv-method.is-on { border-color: var(--brv-blue); background: var(--brv-blue-soft); }
.brv-method b { display: block; font-size: 14px; }
.brv-method small { font-size: 12px; color: var(--brv-mute); }
.brv-info { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #eaf4fb; font-size: 13px; line-height: 1.45; }
.brv-info.warn { background: var(--brv-amber-soft); }
.brv-info svg { flex: none; margin-top: 2px; color: var(--brv-blue); }
.brv-info p { margin: 0; color: #27324f; }

/* ---------- buttons ---------- */
.brv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--brv-blue); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.brv-btn.sm { min-height: 44px; padding: 0 14px; }
.brv-btn.ghost { background: #fff; color: var(--brv-blue); border: 1px solid #cfd8ec; }
.brv-btn:disabled { opacity: 0.45; cursor: default; }
.brv-spin { animation: brv-spin 0.9s linear infinite; }
@keyframes brv-spin { to { transform: rotate(360deg); } }

/* ---------- review step ---------- */
.brv-kv { display: flex; flex-direction: column; }
.brv-kv > div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid var(--brv-line); font-size: 13px; }
.brv-kv > div:first-child { border-top: 0; padding-top: 2px; }
.brv-kv span { color: var(--brv-mute); flex: none; }
.brv-kv b { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.brv-kv em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 600; }
.brv-kv em.sent { color: var(--brv-green); }
.brv-kv em.local { color: var(--brv-mute); }
.brv-kv.tight > div { padding: 6px 0; }
.brv-pr { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.brv-pr > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.brv-pr small { display: block; color: var(--brv-mute); font-size: 12px; }
.brv-pr b { font-weight: 600; white-space: nowrap; }
.brv-pr .is-good { color: var(--brv-green); }
.brv-pr-total { padding-top: 8px; border-top: 1px dashed var(--brv-line); font-size: 15px; font-weight: 700; }
.brv-pr-total b { font-size: 17px; font-weight: 800; color: var(--brv-blue); }
.brv-pr-note { margin: 0; font-size: 12px; color: var(--brv-mute); }
.brv-pr.is-stale { opacity: 0.55; }

/* ---------- skeleton / empty ---------- */
.brv-skel { height: 88px; margin-top: 12px; border-radius: var(--brv-r); background: linear-gradient(90deg, #e3eaf7, #f1f5fc, #e3eaf7); background-size: 200% 100%; animation: brv-sh 1.3s linear infinite; }
.brv-skel.tall { height: 180px; }
@keyframes brv-sh { to { background-position: -200% 0; } }
.brv-empty { padding: 64px 12px; text-align: center; }

/* ---------- stepper + bottom bar ---------- */
.brv-stp { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 40px; padding: 0 6px; border: 1px solid #d6dff2; border-radius: 12px; background: #fff; color: var(--brv-ink); }
.brv-stp span { font-size: 12px; font-weight: 700; white-space: nowrap; }
.brv-stp button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; color: var(--brv-blue); }
.brv-stp button:disabled { opacity: 0.3; cursor: default; }

.brv-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; pointer-events: none; }
.brv-bar-in { pointer-events: auto; position: relative; max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 18px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--brv-bar-bg); color: var(--brv-bar-ink); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 28px rgba(8, 20, 70, 0.28); }
.brv-bar-grab { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); }
.brv-bar-l { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.brv-bar-l.is-stale { opacity: 0.6; }
.brv-bar-price { display: flex; align-items: baseline; gap: 5px; line-height: 1.1; }
.brv-bar-price small { font-size: 14px; font-weight: 700; }
.brv-bar-price strong { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.brv-bar-t { font-size: 12px; line-height: 1.4; color: var(--brv-bar-mute); white-space: nowrap; }
.brv-bar-t.good { color: #7ff0ae; }
.brv-bar .brv-stp { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.brv-bar .brv-stp button { color: #fff; }
.brv-next { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 92px; height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--brv-cta); color: var(--brv-cta-ink); font-size: 15px; font-weight: 800; box-shadow: 0 8px 18px rgba(255, 196, 0, 0.25); }
.brv-next:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.brv-next.wide { width: 100%; margin-top: 14px; background: var(--brv-bar-bg); color: #fff; box-shadow: none; }
.brv-aside-st { display: flex; justify-content: center; margin-top: 12px; }
.brv-aside .brv-stp { width: 100%; }
@media (max-width: 359px) { .brv-bar-in { gap: 6px; padding-left: 10px; padding-right: 10px; } .brv-next { min-width: 78px; padding: 0 12px; } .brv-bar-price strong { font-size: 20px; } }

/* ---------- tablet ---------- */
@media (min-width: 768px) {
  .brv-wrap { padding: 0 24px; }
  .brv-top h1 { font-size: 20px; }
  .brv-card { padding: 16px; }
  .brv-hotel { grid-template-columns: 96px 1fr auto; }
  .brv-hotel-img { width: 96px; height: 96px; }
  .brv-hotel .brv-link { grid-column: auto; margin: 0; }
  .brv-room { grid-template-columns: 140px 1fr; }
  .brv-room-img { width: 140px; }
  .brv-methods { grid-template-columns: 1fr 1fr; }
  .brv-bar-in { margin-bottom: 12px; border-radius: 22px; }
  .brv { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- desktop: two columns, sticky summary, no bottom bar ---------- */
@media (min-width: 1024px) {
  .brv { padding-bottom: 48px; }
  .brv-bar { display: none; }
  .brv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .brv-aside { display: block; position: sticky; top: 88px; }
  .brv-steps { max-width: 640px; }
  .brv-top { height: 64px; }
  .brv.step-2 .brv-grid { grid-template-columns: minmax(0, 640px); justify-content: center; }
}

/* Contact guest dropdown (native select styled like the other inputs) */
select.brv-in { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2358657f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.brv-f-h { font-size: 12px; color: var(--brv-mute); }

/* =====================================================================
   v3 — COMPACT + MINIMAL
   Neutral greys, one dark accent, no decorative icons, tighter spacing.
   Everything here overrides the rules above; delete this block to go back.
   ===================================================================== */
.brv {
  --brv-bg: #f5f6f8;
  --brv-line: #e4e7ec;
  --brv-ink: #111827;
  --brv-mute: #6b7280;
  --brv-blue: #0a1b63;          /* single accent = brand navy */
  --brv-blue-soft: #f1f3f6;     /* neutral tint instead of light blue */
  --brv-green: #374151;         /* no green accents */
  --brv-green-soft: #f1f3f6;
  --brv-amber-soft: #f1f3f6;
  --brv-red: #c62828;           /* errors only */
  --brv-bar-bg: #fff;
  --brv-bar-ink: #111827;
  --brv-bar-mute: #6b7280;
  --brv-cta: #0a1b63;
  --brv-cta-ink: #fff;
  --brv-r: 10px;
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
body.brv-on { background: #f5f6f8; }
.brv-wrap { padding: 0 10px; }

/* decorative icons off (chevrons, back arrow and check ticks stay) */
.brv-h-ic, .brv-pol-ic, .brv-coupon-ic, .brv-req-ic,
.brv-chips svg, .brv-tags svg, .brv-line svg, .brv-loc svg,
.brv-login svg, .brv-info svg, .brv-dates-ar, .brv-next svg,
.brv-hotel-img svg { display: none; }
.brv-score svg { display: none; }
.brv-score::before { content: "★ "; color: #6b7280; }

/* header + steps */
.brv-top { height: 44px; }
.brv-top h1 { font-size: 16px; }
.brv-back, .brv-top-sp { width: 36px; height: 36px; }
.brv-steps { margin-bottom: 8px; }
.brv-steps li { font-size: 12px; }
.brv-steps li i { width: 16px; height: 16px; font-size: 12px; }
.brv-steps li.is-done i { background: var(--brv-blue); }

/* cards */
.brv-main { gap: 8px; }
.brv-card { padding: 10px 12px; box-shadow: none; }
.brv-h { min-height: 22px; margin-bottom: 6px; gap: 6px; }
.brv-h-t { font-size: 14px; }
.brv-h-t small { font-size: 12px; margin-top: 1px; }
.brv-h-btn + .brv-collapse .brv-collapse-in > .brv-body { padding-top: 8px; }
.brv-body { gap: 8px; }
.brv-count.is-done { color: var(--brv-ink); }
.brv-edit, .brv-link { font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.brv-link svg { display: none; }

/* hotel */
.brv-hotel { grid-template-columns: 56px 1fr; gap: 10px; }
.brv-hotel-img { width: 56px; height: 56px; border-radius: 8px; }
.brv-hotel-b h2 { font-size: 14.5px; margin-bottom: 1px; }
.brv-rate { margin-bottom: 1px; }
.brv-score { background: none; padding: 0; font-size: 12px; color: var(--brv-ink); }
.brv-loc { font-size: 12px; }
.brv-hotel .brv-link { margin-top: -2px; }
/* tablet/desktop: the compact rules above are not scoped to mobile, so restore the 3-column hotel card (image | details | View Hotel) */
@media (min-width: 768px) { .brv-hotel { grid-template-columns: 96px 1fr auto; } .brv-hotel-img { width: 96px; height: 96px; border-radius: 12px; } .brv-hotel .brv-link { grid-column: auto; margin: 0; white-space: nowrap; } }

/* summary */
.brv-dates { padding: 8px 10px; border-radius: 8px; gap: 6px; }
.brv-dates b { font-size: 14px; margin: 0; }
.brv-dates small, .brv-dates span { font-size: 12px; }
.brv-chips { display: flex; gap: 6px; margin-top: 6px; }
.brv-chips span { flex: none; padding: 0; background: none; color: var(--brv-mute); font-size: 12px; font-weight: 500; }
.brv-chips span + span::before { content: "·"; margin-right: 6px; }
.brv-edit-panel { padding-top: 8px; }
.brv-roomopt { padding: 8px; border-radius: 8px; }
.brv-roomopt.is-on, .brv-req.is-on, .brv-rd.is-on, .brv-method.is-on { background: #fff; border-color: var(--brv-blue); }

/* room */
.brv-room { grid-template-columns: 76px 1fr; gap: 10px; padding: 0; background: none; }
.brv-room-img { width: 76px; min-height: 76px; border-radius: 8px; }
.brv-room-b h3 { font-size: 14px; margin: 0 0 4px; }
.brv-tags { gap: 4px; margin-bottom: 3px; }
.brv-tags span, .brv-tags .tag-bed, .brv-tags .tag-ok, .brv-tags .tag-n { padding: 0; background: none; color: var(--brv-mute); font-weight: 500; font-size: 12px; }
.brv-tags span + span::before { content: "·"; margin: 0 5px; }
.brv-line { font-size: 12px; margin-top: 1px; color: var(--brv-mute); }
.brv-more.soft { margin-top: 4px; padding: 4px; justify-content: flex-start; font-size: 12.5px; }

/* coupon: plain row */
.brv-coupon { padding: 4px 8px; }
.brv-coupon-h { padding: 6px 4px; background: none; gap: 6px; }
.brv-coupon-t b { font-size: 13.5px; color: var(--brv-ink); }
.brv-coupon-t small { font-size: 12px; }
.brv-chev-r { color: var(--brv-mute); }
.brv-chipsrow button { padding: 4px 9px; }

/* policies */
.brv-pol-h { min-height: 38px; padding: 4px 0; gap: 6px; }
.brv-pol-t { font-size: 13.5px; font-weight: 500; }
.brv-pol-row.is-open > .brv-pol-h .brv-pol-t { color: var(--brv-ink); font-weight: 600; }
.brv-pol-b { background: #f7f8fa; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; }
.brv-pol-ul, .brv-pol-p { font-size: 12.5px; }
.brv-more { background: none; border: 1px solid var(--brv-line); color: var(--brv-ink); padding: 8px; font-weight: 600; font-size: 13px; border-radius: 8px; margin-top: 6px; }
.brv-more.soft { border: 0; }

/* forms: always two columns for first/last name, shorter inputs */
@media (max-width: 479px) { .brv-grid2 { grid-template-columns: 1fr 1fr; } }
.brv-grid2 { gap: 8px; }
.brv-f { gap: 3px; }
.brv-f-l { font-size: 12px; font-weight: 500; color: var(--brv-mute); }
.brv-in { height: 40px; border-radius: 8px; border-color: #d5d9e0; }
.brv-ta { min-height: 64px; }
.brv-room-tag { margin-bottom: 4px; font-size: 13px; }
.brv-room-tag span, .brv-room-tag span { padding: 0; background: none; color: var(--brv-ink); font-weight: 600; }
.brv-extra + .brv-extra { margin-top: 2px; }
.brv-login { padding: 8px 10px; border-radius: 8px; font-size: 12.5px; }
.brv-hint { font-size: 12px; margin: 0; }

/* checkboxes / radios / requests — compact */
.brv-ck-box, .brv-rd-dot { width: 18px; height: 18px; }
.brv-reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.brv-reqs .brv-hint { grid-column: 1 / -1; }
.brv-req, .brv-rd { min-height: 38px; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.brv-bed { gap: 6px; }
.brv-methods { gap: 6px; }
.brv-method { padding: 8px 10px; border-radius: 8px; }
.brv-info, .brv-info.warn { background: #f7f8fa; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; }

/* buttons */
.brv-btn { min-height: 40px; border-radius: 8px; font-size: 13.5px; }
.brv-btn.sm { min-height: 40px; }

/* review + price */
.brv-kv > div { padding: 6px 0; font-size: 12.5px; }
.brv-kv em.sent { color: var(--brv-ink); }
.brv-pr { gap: 6px; font-size: 12.5px; }
.brv-pr .is-good, .brv-bar-t.good { color: var(--brv-ink); }
.brv-pr-total b { color: var(--brv-ink); font-size: 16px; }
.brv-pr-total { padding-top: 6px; }

/* bottom bar: white, slim, single dark button */
.brv-bar-grab { display: none; }
.brv-bar-in { max-width: none; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); border-radius: 0; border-top: 1px solid var(--brv-line); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04); gap: 10px; }
.brv-bar-price small { font-size: 12px; color: var(--brv-mute); font-weight: 600; }
.brv-bar-price strong { font-size: 19px; }
.brv-bar-t { font-size: 12px; line-height: 1.3; }
.brv-bar-l .brv-bar-t:nth-of-type(2) { display: inline; }
.brv-bar .brv-stp { border-color: #d5d9e0; color: var(--brv-ink); height: 36px; }
.brv-bar .brv-stp button { color: var(--brv-ink); width: 26px; height: 26px; }
.brv-next { height: 42px; min-width: 96px; border-radius: 8px; font-size: 14.5px; font-weight: 700; box-shadow: none; }
.brv-next.wide { margin-top: 10px; background: var(--brv-cta); color: var(--brv-cta-ink); } /* desktop sidebar Next was white-on-white (--brv-bar-bg is #fff in this theme) */
@media (min-width: 768px) { .brv-bar-in { margin-bottom: 0; border-radius: 0; } .brv { padding-bottom: 100px; } .brv-card { padding: 12px 14px; } }
@media (min-width: 1024px) { .brv { padding-bottom: 32px; } .brv-grid { gap: 16px; } .brv-aside { top: 76px; } }

/* ---------- Confirm Booking dialog (before the payment step) ---------- */
.brv-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(17, 24, 39, 0.55); animation: brv-fade 0.15s ease-out; }
.brv-dialog { width: 100%; max-width: 380px; padding: 18px 18px 10px; border-radius: 14px; background: #fff; color: var(--brv-ink, #111827); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); animation: brv-pop 0.18s ease-out; }
.brv-dialog h2 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.brv-dlg-p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--brv-mute, #6b7280); }
.brv-dlg-note { padding: 10px 12px; border-radius: 8px; background: #f5f6f8; font-size: 12.5px; line-height: 1.5; color: #27324f; }
.brv-dlg-act { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.brv-dlg-b { min-height: 42px; padding: 0 16px; border: 0; border-radius: 8px; background: none; font-size: 14.5px; font-weight: 600; color: var(--brv-mute, #6b7280); cursor: pointer; }
.brv-dlg-b.main { color: var(--brv-blue, #0a1b63); font-weight: 700; }
@keyframes brv-fade { from { opacity: 0; } }
@keyframes brv-pop { from { opacity: 0; transform: scale(0.96); } }

/* ---------- phone input with country code ---------- */
.brv-ph { display: flex; align-items: stretch; height: 40px; border: 1px solid #d5d9e0; border-radius: 8px; background: #fff; overflow: hidden; }
.brv-ph:focus-within { outline: 2px solid var(--brv-blue); outline-offset: 1px; }
.brv-f.is-invalid .brv-ph { border-color: var(--brv-red); }
.brv-ph-cc { position: relative; flex: none; display: flex; align-items: center; gap: 5px; padding: 0 8px 0 10px; border-right: 1px solid #d5d9e0; font-size: 15px; font-weight: 500; color: var(--brv-ink); background: #fafbfc; }
.brv-ph-cc svg { color: var(--brv-mute); }
.brv-ph-flag { font-size: 18px; line-height: 1; }
.brv-ph-cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.brv-ph input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 10px; background: transparent; font-size: 16px; color: var(--brv-ink); }
.brv-ph input::placeholder { color: #98a3bd; }

/* =====================================================================
   v4 — PREMIUM FOCUS (no more clipped / cheap blue line)
   Cause: the old focus used an OUTSIDE outline (offset 1-2px). The card's
   collapse wrapper has overflow:hidden, so that outline got cut off on the
   sides/bottom and looked like a broken blue line.
   Fix: border colour + soft glow that is drawn inside a padded wrapper,
   so nothing is ever clipped. Delete this block to go back.
   ===================================================================== */

/* 1) give the focus glow room inside the collapse wrapper (net layout shift = 0) */
.brv-collapse-in { padding: 4px; margin: -4px; }

/* 2) kill every outline on text fields (global rules use the orange/blue outline) */
.brv .brv-in:focus,
.brv .brv-in:focus-visible,
.brv .brv-ph:focus-within,
.brv .brv-ph input:focus,
.brv .brv-ph input:focus-visible,
.brv textarea:focus,
.brv textarea:focus-visible { outline: none !important; }

/* 3) smooth, subtle transition */
.brv-in, .brv-ph { transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; -webkit-tap-highlight-color: transparent; }

/* 4) the premium focus state: navy border + soft halo */
.brv .brv-in:focus,
.brv .brv-in:focus-visible,
.brv .brv-ph:focus-within {
  border-color: var(--brv-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 27, 99, 0.10), 0 1px 2px rgba(10, 27, 99, 0.06);
}

/* phone: highlight the country-code chip together with the field */
.brv .brv-ph:focus-within .brv-ph-cc { background: #f4f6fb; border-right-color: rgba(10, 27, 99, 0.25); }

/* invalid fields keep a red halo instead of navy */
.brv-f.is-invalid .brv-in:focus,
.brv-f.is-invalid .brv-ph:focus-within {
  border-color: var(--brv-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* placeholder fades a bit on focus so typing feels clean */
.brv .brv-in:focus::placeholder,
.brv .brv-ph input:focus::placeholder { color: #c0c7d6; }

/* mouse/touch taps on radios & checkboxes: no ring; keyboard users still get one */
.brv input[type="radio"]:focus:not(:focus-visible) + .brv-rd-dot,
.brv input[type="checkbox"]:focus:not(:focus-visible) + .brv-ck-box { outline: none; }

/* =====================================================================
   v5 — GUEST DETAILS: compact summary card + full-screen "Add guest" page
   Names are no longer shown inline; tapping the card opens a separate page.
   ===================================================================== */
.brv-guest-h { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brv-guest-h .brv-h-t small { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--brv-mute); }
.brv-addg {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--brv-blue); color: var(--brv-blue); background: #fff;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background-color .15s ease, transform .1s ease;
}
.brv-guest-h:active .brv-addg { transform: scale(.97); background: #f1f3f6; }
.brv-addg.is-done { border-color: #d5d9e0; color: var(--brv-ink); }

.brv-glist { display: flex; flex-direction: column; margin-top: 10px; border-top: 1px solid var(--brv-line); }
.brv-grow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 46px; padding: 0 2px; background: none; border: 0;
  border-bottom: 1px solid var(--brv-line); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.brv-grow:last-child { border-bottom: 0; }
.brv-grow-n { flex: none; width: 64px; font-size: 12.5px; font-weight: 500; color: var(--brv-mute); }
.brv-grow-v { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--brv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brv-grow:not(.is-done) .brv-grow-v { font-weight: 500; color: #98a3bd; }
.brv-grow svg { flex: none; color: var(--brv-mute); }
.brv-grow.is-done svg { color: var(--brv-green); }
.brv-grow:not(.is-done) svg { color: var(--brv-blue); }
.brv-guest-login { padding-top: 8px; }
.brv-guest-err { margin: 8px 0 0; }
.brv-guest-hint { margin-top: 8px; }

/* full-screen page */
.brv-gsheet-body { padding: 16px; }
.brv-gsheet-g + .brv-gsheet-g { margin-top: 20px; }
.brv-gsheet-t { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--brv-ink); }
.brv-gsheet .brv-hint { margin-top: 18px; }
.brv-gsheet .bhs__ok.brv-gsheet-ok { background: var(--brv-blue); border-radius: 12px; height: 48px; transition: transform .1s ease, opacity .15s ease; }
.brv-gsheet .bhs__ok.brv-gsheet-ok:active { transform: scale(.985); opacity: .92; }
.brv-gsheet .brv-f-e { margin-top: 2px; }