/* =====================================================================
   BHROMI — Review & Confirm: easier-to-read header, progress and hotel card.
   Everything keeps the mock-up proportions on big screens but never drops
   below a comfortable phone size (max(mock-size, minimum)).
   ===================================================================== */
/* header + back button (same feel as the payment page) */
.brv.step-1 .brv-top { height: max(calc(70 * var(--u)), 58px); }
.brv.step-1 .brv-top h1 { font-size: max(calc(29.7 * var(--u)), 20px); line-height: 1.2; letter-spacing: -0.3px; }
.brv.step-1 .brv-back, .brv.step-1 .brv-top-sp { width: 46px; height: 46px; margin-left: -10px; border-radius: 50%; }
.brv.step-1 .brv-top-sp { margin: 0 -10px 0 0; }
.brv.step-1 .brv-back { display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.brv.step-1 .brv-back:active { background: rgba(10, 30, 109, 0.08); }
.brv.step-1 .brv-back svg { width: 28px; height: 28px; stroke-width: 2.2; }

/* progress */
.brv.step-1 .brv-steps { height: 40px; margin: 2px calc(24 * var(--u)) 14px calc(24 * var(--u)); }
.brv.step-1 .brv-steps li i { width: 30px; height: 30px; font-size: 14px; font-weight: 800; }
.brv.step-1 .brv-steps li i svg { width: 16px; height: 16px; stroke-width: 3; }
.brv.step-1 .brv-steps li.is-now span { margin: 0 10px 0 9px; font-size: 14.5px; font-weight: 700; }
.brv.step-1 .brv-steps li:not(:last-child)::after { height: 3px; min-width: 8px; }
.brv.step-1 .brv-steps li.is-now:not(:last-child)::after { height: 3px; }

/* hotel card */
.rc-hotel-top { gap: 12px; align-items: stretch; }
.rc-himg { width: max(calc(236 * var(--u)), 116px); height: auto; min-height: 128px; }
.rc-nbadge { height: 22px; padding: 0 9px; border-radius: 8px; font-size: 12px; line-height: 22px; left: 8px; bottom: 8px; }
.rc-hb h2 { font-size: max(calc(29.5 * var(--u)), 17.5px); line-height: 1.25; }
.rc-hsub { height: auto; gap: 7px; margin-top: 2px; }
.rc-stars svg { width: 13px; height: 13px; }
.rc-room { font-size: max(calc(22.6 * var(--u)), 13px); }
.rc-dates { flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 10px; padding-left: 0; }
.rc-dch { display: none; }
.rc-d, .rc-d.one { width: auto; gap: 9px; }
.rc-d > svg { width: 20px; height: 21px; flex: none; }
.rc-d b { font-size: 12.5px; line-height: 16px; }
.rc-d span { font-size: 12px; line-height: 15px; }
.rc-chips { height: 62px; margin-top: 12px; }
.rc-chips > div { padding-top: 10px; }
.rc-chips > div + div::before { top: 10px; height: 40px; }
.rc-chips svg { width: 19px; height: 19px; }
.rc-chips span { margin-top: 5px; font-size: 12px; line-height: 16px; }

/* fit-fixes: nothing may collide on narrow phones */
.brv.step-1 .brv-steps { margin-left: 6px; margin-right: 6px; }
.brv.step-1 .brv-steps li i { width: 28px; height: 28px; font-size: 13.5px; }
.brv.step-1 .brv-steps li.is-now span { margin: 0 8px 0 8px; font-size: 13px; letter-spacing: -0.1px; }
.brv.step-1 .brv-steps li:not(:last-child)::after { min-width: 6px; }
.rc-hsub { flex-wrap: wrap; row-gap: 3px; }
.rc-room { flex: 1 1 100%; min-width: 0; font-size: max(calc(22.6 * var(--u)), 13px); }
.rc-chips span { font-size: 12px; letter-spacing: -0.15px; }
.rc-chips svg { width: 18px; height: 18px; }
.brv.step-1 .brv-steps li.is-now { flex: 1 0 auto; }
.brv.step-1 .brv-steps li.is-done { flex: 1 1 0; min-width: 40px; }
.brv.step-1 .brv-steps li.is-now:not(:last-child)::after { min-width: 14px; }