/* =====================================================================
   BHROMI — "Make Payment" step (booking step 3)
   Scoped to .brv.pay-pick. Sizes are the design mock-up divided by 2.
   ===================================================================== */
.brv.pay-pick { --brv-bg: #f9fafb; background: #f9fafb; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
body.brv-on:has(.brv.pay-pick) { background: #f9fafb; }
@media (max-width: 1023px) { .brv.pay-pick .brv-wrap { padding: 0 17px; max-width: 560px; } }
.brv.pay-pick .brv-steps { display: none; }

/* header */
.brv.pay-pick .brv-top { height: 63px; padding-top: 7px; box-sizing: border-box; margin: 0 -17px; padding: 7px 17px 0; background: #f9fafb; border-bottom: 1px solid #dfe3ea; gap: 0; }
.brv.pay-pick .brv-top h1 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; color: #050818; }
.brv.pay-pick .brv-back { width: 40px; height: 40px; margin-left: -13px; color: #050818; }
.brv.pay-pick .brv-top-sp { width: 30px; height: 40px; }

/* hotel card */
.pay3 { display: block; font-family:"Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color: #050818; }
.pay3-hotel { display: flex; align-items: center; gap: 13px; margin-top: 9px; padding: 0 10px; height: 68.5px; background: #fff; border: 1px solid #dde1e9; border-radius: 10px; }
.pay3-hotel-img { flex: none; width: 64px; height: 51px; border-radius: 6px; overflow: hidden; background: #e8ecf3; display: grid; place-items: center; }
.pay3-hotel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pay3-hotel-b { min-width: 0; flex: 1; padding-bottom: 3px; }
.pay3-hotel-b h2 { margin: 0 0 6px; font-size: 14.5px; line-height: 20px; font-weight: 700; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay3-meta { display: flex; align-items: center; font-size: 12px; line-height: 16px; font-weight: 500; color: #5c6378; white-space: nowrap; }
.pay3-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; }
.pay3-meta span:first-child { padding-left: 0; }
.pay3-meta span + span { border-left: 1px solid #dde1e9; }
.pay3-meta svg { width: 16px; height: 16px; flex: none; color: #4b5266; }

/* heading */
.pay3-h { margin: 18px 0 8px 1px; font-size: 19.5px; line-height: 26px; font-weight: 800; letter-spacing: -0.4px; color: #050818; }

/* options */
.pay3-list { display: flex; flex-direction: column; gap: 5px; }
.pay3-opt { position: relative; display: flex; align-items: center; height: 62px; padding: 0 13px 0 14px; background: #fff; border: 1px solid #e1e5ec; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
.pay3-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay3-opt.is-on { background: #edf5fc; border-color: #5b9ef0; box-shadow: none; }
.pay3-ic { flex: none; width: 51px; height: 44px; margin-right: 19px; border-radius: 7px; overflow: hidden; display: block; }
.pay3-ic img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pay3-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pay3-t b { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.25px; color: #050818; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay3-t small { font-size: 12px; line-height: 18px; font-weight: 400; color: #69728a; letter-spacing: -0.1px; }
.pay3-rd { flex: none; width: 17px; height: 17px; margin: 0 1.5px 0 10px; border-radius: 50%; border: 1.5px solid #7f8596; background: #fff; display: grid; place-items: center; }
.pay3-opt.is-on .pay3-rd { width: 20px; height: 20px; margin: 0 0 0 10px; border: 2px solid #2457ea; }
.pay3-opt.is-on .pay3-rd::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #2457ea; }
.pay3-opt input:focus-visible ~ .pay3-rd { outline: 2px solid #2457ea; outline-offset: 2px; }

/* bottom bar on this step */
.brv.pay-pick .brv-bar-in { max-width: none; height: 69px; padding: 0 13px calc(6px + env(safe-area-inset-bottom, 0px)) 16px; gap: 10px; background: #fff; border-top: 1px solid #e3e6ec; box-shadow: none; }
.brv.pay-pick .brv-bar-price small { font-size: 12px; font-weight: 600; color: #6b7280; }
.brv.pay-pick .brv-bar-price strong { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: #050818; }
.brv.pay-pick .brv-bar-t { font-size: 12px; line-height: 14px; color: #6d7a8c; }
.brv.pay-pick .brv-bar .brv-stp, .brv.pay-pick .brv-stp { height: 34px; padding: 0; gap: 0; border: 1px solid #d9dde5; border-radius: 14px; }
.brv.pay-pick .brv-stp button { width: 31px; height: 32px; color: #1f2a44; border-radius: 0; }
.brv.pay-pick .brv-stp span { padding: 0 11px; height: 18px; line-height: 18px; font-size: 12.5px; font-weight: 600; border-left: 1px solid #d9dde5; border-right: 1px solid #d9dde5; }
.brv.pay-pick .brv-next { height: 40px; min-width: 97px; padding: 0 14px; border-radius: 9px; background: #122f80; color: #fff; font-size: 16px; font-weight: 700; }
@media (min-width: 1024px) { .brv.pay-pick .brv-bar { display: block; } }
.brv.pay-pick .brv-next svg { display: inline-block !important; width: 18px; height: 18px; }

/* v040: more compact Make Payment page */
.brv.pay-pick { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.brv.pay-pick .brv-top { height: 54px; padding-top: 4px; }
.brv.pay-pick .brv-top h1 { font-size: 16px; }
.brv.pay-pick .brv-back { width: 36px; height: 36px; }
.pay3-hotel { margin-top: 7px; gap: 11px; height: 58px; padding: 0 9px; }
.pay3-hotel-img { width: 52px; height: 42px; }
.pay3-hotel-b h2 { margin-bottom: 3px; font-size: 14px; line-height: 18px; }
.pay3-meta { font-size: 12px; line-height: 14px; }
.pay3-meta span { gap: 4px; padding: 0 7px; }
.pay3-meta svg { width: 14px; height: 14px; }
.pay3-h { margin: 12px 0 6px 1px; font-size: 17px; line-height: 22px; }
.pay3-list { gap: 4px; }
.pay3-opt { height: 50px; padding: 0 12px 0 11px; border-radius: 9px; }
.pay3-ic { width: 42px; height: 36px; margin-right: 13px; border-radius: 6px; }
.pay3-t { gap: 0; }
.pay3-t b { font-size: 13.5px; line-height: 18px; }
.pay3-t small { font-size: 12px; line-height: 15px; }
.pay3-rd { width: 16px; height: 16px; }
.pay3-opt.is-on .pay3-rd { width: 18px; height: 18px; }
.pay3-opt.is-on .pay3-rd::after { width: 8px; height: 8px; }
/* bottom bar: stop the "Taxes & Fees" line running under the room stepper */
.brv.pay-pick .brv-bar-in { height: 62px; gap: 8px; padding-left: 12px; padding-right: 10px; }
.brv.pay-pick .brv-bar-price strong { font-size: 18px; }
.brv.pay-pick .brv-bar-t { font-size: 12px; line-height: 13px; }
.brv.pay-pick .brv-stp button { width: 26px; }
.brv.pay-pick .brv-stp span { padding: 0 8px; font-size: 12px; }
.brv.pay-pick .brv-next { height: 38px; min-width: 88px; font-size: 15px; }

/* ---- Coming soon options (visible, not selectable) ---- */
.pay3-opt.is-soon { cursor: not-allowed; background: #fbfbfc; box-shadow: none; }
.pay3-opt.is-soon .pay3-ic, .pay3-opt.is-soon .pay3-t { opacity: 0.5; filter: grayscale(0.35); }
.pay3-opt.is-soon .pay3-rd { opacity: 0.45; }
.pay3-soon { flex: none; margin-left: auto; padding: 3px 8px; border-radius: 999px; background: #fff4d6; border: 1px solid #f3dc9a; color: #8a5a00; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.1px; white-space: nowrap; }
.pay3-opt:has(.pay3-soon) .pay3-t { min-width: 0; }
.pay3-opt.is-soon .pay3-rd { display: none; }
.pay3-opt.is-soon .pay3-soon { margin-right: 2px; }
.pay3-opt.is-soon .pay3-t { flex: 1 1 auto; }
.pay3-opt.is-soon .pay3-t b { overflow: visible; text-overflow: clip; }
.pay3-opt.is-soon .pay3-t small { white-space: nowrap; }
@media (max-width: 380px) { .pay3-soon { font-size: 12px; padding: 2px 6px; } }