/* =====================================================================
   BHROMI — "Booking Confirmed" page (route /booking/confirmation/:id)
   Scoped to .bcf. Every size is the mock-up pixel (978px wide picture)
   written as  N * var(--u),  --u = viewport / 978 (capped at 480px),
   so spacing, type and radii keep the exact proportions of the design.
   ===================================================================== */
body.bcf-on { background: #f9fafc; }
@media (max-width: 1023px) { body.bcf-on footer, body.bcf-on .bhf { display: none !important; } }
@media (max-width: 767px) { body.bcf-on header.glass-header { display: none; } }

.bcf {
  --u: calc(min(100vw, 480px) / 978);
  --ink: #0a1a45;
  --mute: #5f6c86;
  --navy: #0a2a80;
  --green: #1fae5e;
  --line: #e8ecf4;
  box-sizing: border-box;
  max-width: 480px; margin: 0 auto;
  padding: calc(40 * var(--u)) calc(40 * var(--u)) calc(56 * var(--u));
  background: #f9fafc;
  font-family:"Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.bcf *, .bcf *::before, .bcf *::after { box-sizing: border-box; }
.bcf svg { flex: none; }
.bcf h1, .bcf h2, .bcf h3, .bcf p { margin: 0; }

/* ---------- hero: tick + confetti ---------- */
.bcf-hero { position: relative; height: calc(182 * var(--u)); margin-top: calc(-4 * var(--u)); }
.bcf-ring { position: absolute; left: 50%; top: calc(-1 * var(--u)); width: calc(180 * var(--u)); height: calc(180 * var(--u)); margin-left: calc(-90 * var(--u)); border-radius: 50%; background: #e4f6ec; display: flex; align-items: center; justify-content: center; }
.bcf-tick { width: calc(140 * var(--u)); height: calc(140 * var(--u)); border-radius: 50%; background: #22b45f; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(34, 180, 95, 0.22); }
.bcf-tick svg { width: calc(78 * var(--u)); height: calc(78 * var(--u)); }
.bcf .cf { position: absolute; display: block; border-radius: calc(6 * var(--u)); }
.bcf .cf1 { left: calc(307 * var(--u) - 40 * var(--u)); top: calc(110 * var(--u) - 37 * var(--u)); width: calc(30 * var(--u)); height: calc(12 * var(--u)); background: #f6c224; transform: rotate(-38deg); }
.bcf .cf2 { left: calc(347 * var(--u) - 40 * var(--u)); top: calc(52 * var(--u) - 37 * var(--u)); width: calc(30 * var(--u)); height: calc(12 * var(--u)); background: #1f6bff; transform: rotate(42deg); }
.bcf .cf3 { left: calc(344 * var(--u) - 40 * var(--u)); top: calc(168 * var(--u) - 37 * var(--u)); width: calc(30 * var(--u)); height: calc(12 * var(--u)); background: #1faa5a; transform: rotate(-52deg); }
.bcf .cf4 { left: calc(618 * var(--u) - 40 * var(--u)); top: calc(61 * var(--u) - 37 * var(--u)); width: calc(30 * var(--u)); height: calc(12 * var(--u)); background: #1faa5a; transform: rotate(-48deg); }
.bcf .cf5 { left: calc(638 * var(--u) - 40 * var(--u)); top: calc(116 * var(--u) - 37 * var(--u)); width: calc(30 * var(--u)); height: calc(12 * var(--u)); background: #f6c224; transform: rotate(40deg); }
.bcf .cf6 { left: calc(611 * var(--u) - 40 * var(--u)); top: calc(164 * var(--u) - 37 * var(--u)); width: calc(30 * var(--u)); height: calc(12 * var(--u)); background: #1f6bff; transform: rotate(48deg); }

.bcf-title { margin-top: calc(14 * var(--u)) !important; text-align: center; font-size: calc(46 * var(--u)); line-height: calc(60 * var(--u)); font-weight: 800; letter-spacing: calc(-0.4 * var(--u)); color: var(--ink); }
.bcf-sub { margin-top: calc(9 * var(--u)) !important; text-align: center; font-size: max(12px, calc(28.2 * var(--u))); line-height: calc(42.5 * var(--u)); font-weight: 400; color: #66738c; margin-left: calc(-20 * var(--u)) !important; margin-right: calc(-20 * var(--u)) !important; }

/* ---------- reference card ---------- */
.bcf-ref { margin-top: calc(27 * var(--u)); height: calc(174 * var(--u)); border-radius: calc(26 * var(--u)); background: #e9f8ef; border: calc(1.5 * var(--u)) solid #d4eede; display: flex; align-items: center; padding: 0 calc(30 * var(--u)); gap: calc(34 * var(--u)); position: relative; }
.bcf-ref-ic { flex: none; width: calc(96 * var(--u)); height: calc(102 * var(--u)); border-radius: calc(26 * var(--u)); background: #d9f1e4; display: flex; align-items: center; justify-content: center; color: #1c9a57; }
.bcf-ref-ic svg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.bcf-ref-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bcf-ref-t small { font-size: max(12px, calc(23.5 * var(--u))); line-height: calc(30 * var(--u)); color: #5f6c86; font-weight: 500; }
.bcf-ref-t b { font-size: calc(35 * var(--u)); line-height: calc(46 * var(--u)); font-weight: 800; letter-spacing: calc(-0.2 * var(--u)); color: var(--ink); margin-top: calc(1 * var(--u)); white-space: nowrap; }
.bcf-ref-t span { font-size: max(12px, calc(23.5 * var(--u))); line-height: calc(30 * var(--u)); color: #5f6c86; margin-top: calc(3 * var(--u)); white-space: nowrap; }
.bcf-copy { flex: none; align-self: flex-start; margin-top: calc(38 * var(--u)); margin-right: calc(0 * var(--u)); height: calc(74 * var(--u)); padding: 0 calc(30 * var(--u)); border: calc(1.5 * var(--u)) solid #d2eddc; border-radius: calc(28 * var(--u)); background: #dff4e8; color: #1c9a57; display: inline-flex; align-items: center; gap: calc(12 * var(--u)); font: 600 max(12px, calc(27 * var(--u))) "Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; cursor: pointer; position: absolute; right: calc(30 * var(--u)); top: calc(0 * var(--u)); }
.bcf-copy svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }

/* ---------- generic white card ---------- */
.bcf-card { background: #fff; border: calc(1.5 * var(--u)) solid #edf0f6; border-radius: calc(30 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(40, 60, 120, 0.05); }

/* ---------- hotel card ---------- */
.bcf-hotel { margin-top: calc(28 * var(--u)); padding: calc(23 * var(--u)) calc(24 * var(--u)) calc(21 * var(--u)); }
.bcf-hotel-top { display: flex; align-items: flex-start; gap: calc(36 * var(--u)); }
.bcf-himg { flex: none; width: calc(237 * var(--u)); height: calc(186 * var(--u)); border-radius: calc(20 * var(--u)); overflow: hidden; background: #e3eaf6; display: flex; align-items: center; justify-content: center; color: #8aa0c8; }
.bcf-himg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcf-hb { flex: 1 1 auto; min-width: 0; padding-top: calc(0 * var(--u)); }
.bcf-hb h2 { font-size: calc(33.2 * var(--u)); line-height: calc(40 * var(--u)); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: calc(1 * var(--u)); }
.bcf-hsub { display: flex; align-items: center; gap: calc(18 * var(--u)); margin-top: calc(5 * var(--u)); font-size: max(12px, calc(22 * var(--u))); line-height: calc(30 * var(--u)); font-weight: 500; color: #18284f; min-width: 0; }
.bcf-hsub > span:not(.bcf-stars) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcf-stars { display: inline-flex; gap: calc(5 * var(--u)); flex: none; }
.bcf-stars svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); fill: #f5a81c; stroke: #f5a81c; stroke-width: 1.5; }
.bcf-dates { display: flex; align-items: center; margin-top: calc(36 * var(--u)); gap: calc(0 * var(--u)); }
.bcf-d { display: flex; align-items: flex-start; gap: calc(21 * var(--u)); min-width: 0; }
.bcf-d > svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); color: #17285a; margin-top: calc(5 * var(--u)); }
.bcf-d b { display: block; font-size: max(12px, calc(22 * var(--u))); line-height: calc(32 * var(--u)); font-weight: 700; color: var(--ink); white-space: nowrap; }
.bcf-d span { display: block; font-size: max(12px, calc(20.3 * var(--u))); line-height: calc(28 * var(--u)); color: #66738d; margin-top: calc(2 * var(--u)); white-space: nowrap; }
.bcf-dch { flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin: calc(-6 * var(--u)) calc(39 * var(--u)) 0 0; color: #4a5878; }
.bcf-dates > .bcf-d:first-child { flex: none; width: calc(265 * var(--u)); }
.bcf-chips { display: flex; margin-top: calc(22 * var(--u)); height: calc(108 * var(--u)); border-radius: calc(20 * var(--u)); background: #f4f6fb; padding: calc(14 * var(--u)) 0; }
.bcf-chips > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u)); color: #1a2c66; position: relative; padding-top: calc(10 * var(--u)); flex-grow: var(--cg, 1); }
.bcf-chips > div + div::before { content: ""; position: absolute; left: 0; top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); width: calc(1.5 * var(--u)); background: #e2e7f1; }
.bcf-chips svg { width: calc(35 * var(--u)); height: calc(35 * var(--u)); color: #1d3f9e; }
.bcf-chips span { font-size: max(12px, calc(20.8 * var(--u))); line-height: calc(28 * var(--u)); font-weight: 500; color: #17285a; white-space: nowrap; }

/* ---------- quick actions ---------- */
.bcf-acts { margin-top: calc(19 * var(--u)); padding: calc(14 * var(--u)) calc(10 * var(--u)) calc(21 * var(--u)); display: flex; gap: calc(24 * var(--u)); height: calc(146 * var(--u)); }
.bcf-acts button { flex: 1 1 0; flex-grow: var(--g, 1); min-width: 0; height: calc(109 * var(--u)); border: 0; border-radius: calc(22 * var(--u)); background: #f0f5fe; display: flex; align-items: center; gap: calc(20 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(20 * var(--u)); cursor: pointer; text-align: left; font-family: inherit; }
.bcf-acts button i { flex: none; width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: 50%; background: #e1ebfb; display: flex; align-items: center; justify-content: center; color: #1f5ae6; }
.bcf-acts button i svg { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.bcf-acts button span { font-size: max(12px, calc(23 * var(--u))); line-height: calc(34 * var(--u)); font-weight: 700; color: #0a2a80; }

/* ---------- what's next ---------- */
.bcf-next-h { margin: calc(31 * var(--u)) 0 calc(8 * var(--u)) calc(30 * var(--u)) !important; font-size: calc(36.9 * var(--u)); line-height: calc(48 * var(--u)); font-weight: 800; color: var(--ink); letter-spacing: calc(-0.2 * var(--u)); }
.bcf-next { padding: calc(26 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u)) calc(49 * var(--u)); }
.bcf-step { display: flex; align-items: flex-start; gap: calc(50 * var(--u)); position: relative; padding-bottom: calc(41 * var(--u)); }
.bcf-step > div { width: calc(590 * var(--u)); flex: none; }
.bcf-step:last-child { padding-bottom: 0; }
.bcf-step:nth-child(2) { padding-bottom: calc(43 * var(--u)); }
.bcf-step:not(:last-child)::after { content: ""; position: absolute; left: calc(33 * var(--u)); top: calc(69 * var(--u)); bottom: calc(8 * var(--u)); border-left: calc(2.5 * var(--u)) dashed #d3dde8; }
.bcf-step i { flex: none; width: calc(68 * var(--u)); height: calc(68 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: calc(-5 * var(--u)); color: #fff; }
.bcf-step i svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.bcf-step i.g { background: #1fa65a; }
.bcf-step i.b { background: #1f5ae6; }
.bcf-step i.l { background: #e4edfc; color: #1f5ae6; border: calc(1.5 * var(--u)) solid #d3e1f8; }
.bcf-step b { display: block; font-size: max(12px, calc(27 * var(--u))); line-height: calc(36 * var(--u)); font-weight: 800; color: var(--ink); }
.bcf-step p { margin-top: calc(1 * var(--u)) !important; font-size: max(12px, calc(26.3 * var(--u))); line-height: calc(36.5 * var(--u)); font-weight: 400; color: #5f6c86; }

/* ---------- bottom buttons ---------- */
.bcf-btn { display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--u)); width: 100%; border-radius: calc(24 * var(--u)); font-family: inherit; font-size: max(14px, calc(30 * var(--u))); font-weight: 600; text-decoration: none; cursor: pointer; letter-spacing: calc(-0.1 * var(--u)); }
.bcf-btn svg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.bcf-btn.primary { height: calc(100 * var(--u)); margin-top: calc(23 * var(--u)); background: #0a2a80; color: #fff; border: 0; box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(10, 42, 128, 0.18); }
.bcf-btn.primary svg:last-child { width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin-left: calc(2 * var(--u)); }
.bcf-btn.ghost { height: calc(96 * var(--u)); margin-top: calc(25 * var(--u)); background: #fff; color: #0a2a80; border: calc(1.5 * var(--u)) solid #e3e8f1; box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) rgba(40, 60, 120, 0.04); }
.bcf-btn.ghost svg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.bcf-btn.bcf-rv { height: calc(80 * var(--u)); font-size: max(12px, calc(26 * var(--u))); }
.bcf-btn.bcf-rv svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }

/* ---------- cancelled variant ---------- */
.bcf.is-cancelled .bcf-tick { background: #e5484d; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(229, 72, 77, 0.22); }
.bcf.is-cancelled .bcf-ring { background: #fde9ea; }

/* ---------- loading / not found ---------- */
.bcf-load { display: flex; flex-direction: column; gap: calc(24 * var(--u)); padding-top: calc(90 * var(--u)); }
.bcf-sk { height: calc(150 * var(--u)); border-radius: calc(30 * var(--u)); background: linear-gradient(90deg, #eef1f7, #f7f9fc, #eef1f7); background-size: 200% 100%; animation: bcf-sh 1.2s linear infinite; }
.bcf-sk.big { height: calc(260 * var(--u)); } .bcf-sk.tall { height: calc(360 * var(--u)); }
@keyframes bcf-sh { to { background-position: -200% 0; } }
.bcf-nf { text-align: center; padding-top: calc(160 * var(--u)); }
.bcf-nf h1 { font-size: calc(44 * var(--u)); font-weight: 800; }
.bcf-nf p { margin: calc(12 * var(--u)) 0 calc(24 * var(--u)) !important; color: var(--mute); font-size: max(12px, calc(25 * var(--u))); }

/* ---------- review form ---------- */
.bcf-review { margin-top: calc(26 * var(--u)); background: #fff; border: calc(1.5 * var(--u)) solid #edf0f6; border-radius: calc(30 * var(--u)); padding: calc(28 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.bcf-review h3 { font-size: max(12px, calc(30 * var(--u))); font-weight: 800; }
.bcf-rate { display: flex; gap: calc(10 * var(--u)); }
.bcf-rate button { width: calc(70 * var(--u)); height: calc(70 * var(--u)); border-radius: calc(16 * var(--u)); border: 0; background: #eef2fa; color: var(--ink); font: 700 max(12px, calc(24 * var(--u))) "Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.bcf-rate button.on { background: #0a2a80; color: #fff; }
.bcf-review input, .bcf-review textarea { width: 100%; border: calc(1.5 * var(--u)) solid #dfe5f0; border-radius: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(20 * var(--u)); font: 400 max(16px, calc(25 * var(--u))) "Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color: var(--ink); background: #fff; }
.bcf-submit { height: calc(84 * var(--u)); border: 0; border-radius: calc(20 * var(--u)); background: #0a2a80; color: #fff; font: 700 max(12px, calc(27 * var(--u))) "Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.bcf-submit:disabled { opacity: 0.5; }

/* ---------- "View Confirmation" sheet ---------- */
.bcf-sheet-wrap { position: fixed; inset: 0; z-index: 90; background: rgba(8, 20, 60, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.bcf-sheet { --u: calc(min(100vw, 480px) / 978); width: 100%; max-width: 480px; max-height: 86vh; overflow: auto; background: #fff; border-radius: calc(36 * var(--u)) calc(36 * var(--u)) 0 0; padding: calc(30 * var(--u)) calc(40 * var(--u)) calc(50 * var(--u)); font-family:"Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color: #0a1a45; }
.bcf-sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(10 * var(--u)); }
.bcf-sheet-h h3 { margin: 0; font-size: calc(34 * var(--u)); font-weight: 800; }
.bcf-sheet-h button { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border: 0; border-radius: 50%; background: #eef2fa; color: #0a1a45; display: flex; align-items: center; justify-content: center; }
.bcf-sheet-h svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.bcf-sec { padding: calc(14 * var(--u)) 0; border-bottom: calc(1.5 * var(--u)) solid #e8ecf4; }
.bcf-sec:last-child { border-bottom: 0; }
.bcf-sl { display: flex; justify-content: space-between; gap: calc(24 * var(--u)); padding: calc(7 * var(--u)) 0; font-size: max(12px, calc(24 * var(--u))); line-height: calc(33 * var(--u)); }
.bcf-sl span { color: #5f6c86; }
.bcf-sl b { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.bcf-sl.ok b { color: #1c9a57; }
.bcf-sl.tot span, .bcf-sl.tot b { font-size: max(12px, calc(29 * var(--u))); font-weight: 800; color: #0a1a45; }

.bcf-acts button:nth-child(1) { --g: 298; } .bcf-acts button:nth-child(2) { --g: 285; } .bcf-acts button:nth-child(3) { --g: 248; }
.bcf-chips > div:nth-child(1) { --cg: 160; } .bcf-chips > div:nth-child(2) { --cg: 170; } .bcf-chips > div:nth-child(3) { --cg: 176; } .bcf-chips > div:nth-child(4) { --cg: 180; } .bcf-chips > div:nth-child(5) { --cg: 164; }

/* v042: larger, easier-to-read text (layout widths kept, so everything still fits) */
.bcf-title { font-size: calc(52 * var(--u)); line-height: calc(64 * var(--u)); }
.bcf-sub { font-size: max(12px, calc(31 * var(--u))); line-height: calc(46 * var(--u)); }
.bcf-ref { height: calc(190 * var(--u)); }
.bcf-ref-t small { font-size: max(12px, calc(26.5 * var(--u))); line-height: calc(33 * var(--u)); }
.bcf-ref-t b { font-size: calc(40 * var(--u)); line-height: calc(50 * var(--u)); }
.bcf-ref-t span { font-size: max(12px, calc(25 * var(--u))); line-height: calc(32 * var(--u)); }
.bcf-copy { height: calc(80 * var(--u)); font-size: max(12px, calc(30 * var(--u))); }
.bcf-copy { font: 600 max(12px, calc(30 * var(--u))) "Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.bcf-himg { width: calc(222 * var(--u)); }
.bcf-hb h2 { font-size: calc(37 * var(--u)); line-height: calc(44 * var(--u)); }
.bcf-hsub { font-size: max(12px, calc(26 * var(--u))); line-height: calc(34 * var(--u)); }
.bcf-stars svg { width: calc(27 * var(--u)); height: calc(27 * var(--u)); }
.bcf-d { gap: calc(13 * var(--u)); }
.bcf-d > svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.bcf-d b { font-size: max(12px, calc(26 * var(--u))); line-height: calc(35 * var(--u)); }
.bcf-d span { font-size: max(12px, calc(24 * var(--u))); line-height: calc(31 * var(--u)); }
.bcf-dates > .bcf-d:first-child { width: auto; }
.bcf-dch { margin: calc(-6 * var(--u)) calc(14 * var(--u)) 0 calc(14 * var(--u)); }
.bcf-chips { height: calc(126 * var(--u)); }
.bcf-chips svg { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
.bcf-chips span { font-size: max(12px, calc(25 * var(--u))); line-height: calc(32 * var(--u)); }
.bcf-acts { height: calc(162 * var(--u)); }
.bcf-acts button { height: calc(124 * var(--u)); gap: calc(12 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(14 * var(--u)); }
.bcf-acts button i { width: calc(66 * var(--u)); height: calc(66 * var(--u)); }
.bcf-acts button i svg { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.bcf-acts button span { font-size: max(12px, calc(26.5 * var(--u))); line-height: calc(36 * var(--u)); }
.bcf-next-h { font-size: calc(41 * var(--u)); line-height: calc(52 * var(--u)); }
.bcf-step b { font-size: max(12px, calc(31 * var(--u))); line-height: calc(40 * var(--u)); }
.bcf-step p { font-size: max(12px, calc(29 * var(--u))); line-height: calc(41 * var(--u)); }
.bcf-btn { font-size: calc(34 * var(--u)); }
.bcf-btn.primary { height: calc(108 * var(--u)); }
.bcf-btn.ghost { height: calc(104 * var(--u)); }
.bcf-btn.bcf-rv { height: calc(88 * var(--u)); font-size: max(12px, calc(29 * var(--u))); }

/* ---- v071: animated success tick (ring pops, tick springs in, check draws itself, confetti bursts, soft pulse) ---- */
.bcf-ring { animation: bcf-ring-in .55s cubic-bezier(.2,.8,.3,1) both; }
.bcf-ring::before, .bcf-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(34,180,95,.45); opacity: 0; pointer-events: none; animation: bcf-ripple 2.6s ease-out 1.3s infinite; }
.bcf-ring::after { animation-delay: 2.2s; }
.bcf-tick { animation: bcf-tick-in .6s cubic-bezier(.3,1.5,.5,1) .18s both, bcf-breathe 2.8s ease-in-out 1.4s infinite; }
.bcf-tick svg path, .bcf-tick svg polyline, .bcf-tick svg line { stroke-dasharray: 30; stroke-dashoffset: 30; animation: bcf-draw .5s ease-out .6s forwards; }
.bcf .cf { animation: bcf-burst .75s cubic-bezier(.2,.9,.3,1.2) .7s both, bcf-float 3.2s ease-in-out 1.6s infinite; }
.bcf .cf2, .bcf .cf5 { animation-delay: .78s, 1.9s; }
.bcf .cf3, .bcf .cf6 { animation-delay: .86s, 2.2s; }
.bcf .cf1, .bcf .cf2, .bcf .cf3 { --dx: calc(110 * var(--u)); }
.bcf .cf4, .bcf .cf5, .bcf .cf6 { --dx: calc(-110 * var(--u)); }
.bcf .cf1, .bcf .cf4 { --dy: calc(20 * var(--u)); }
.bcf .cf2, .bcf .cf5 { --dy: calc(60 * var(--u)); }
.bcf .cf3, .bcf .cf6 { --dy: calc(-40 * var(--u)); }
@keyframes bcf-ring-in { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bcf-tick-in { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bcf-draw { to { stroke-dashoffset: 0; } }
@keyframes bcf-burst { from { translate: var(--dx) var(--dy); scale: 0; opacity: 0; } 60% { opacity: 1; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes bcf-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-5 * var(--u)); } }
@keyframes bcf-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes bcf-ripple { 0% { transform: scale(.78); opacity: .55; } 100% { transform: scale(1.18); opacity: 0; } }
.bcf.is-cancelled .bcf-ring::before, .bcf.is-cancelled .bcf-ring::after { border-color: rgba(229,72,77,.4); }
@media (prefers-reduced-motion: reduce) {
  .bcf-ring, .bcf-tick, .bcf .cf, .bcf-ring::before, .bcf-ring::after { animation: none !important; }
  .bcf-ring::before, .bcf-ring::after { display: none; }
  .bcf-tick svg path, .bcf-tick svg polyline, .bcf-tick svg line { animation: none; stroke-dashoffset: 0; }
}

/* v077: payment under review (not yet verified) */
.bcf-hero.bcf-wait .bcf-ring { background: #fdf1d6; }
.bcf-hero.bcf-wait .bcf-tick { background: #f0a21a; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(240, 162, 26, 0.25); }

/* ===== v1.2.33: PC layout (>=1024px) - two columns, container 1100px. Phones/tablets untouched. ===== */
@media (min-width: 1024px) {
  body.bcf-on footer, body.bcf-on .bhf { display: block; }
  .bcf:not(.bcf-nf):not(.bcf-load) {
    --u: calc(min(100vw - 64px, 1100px) / 1560);
    max-width: 1164px; width: 100%;
    padding: calc(34 * var(--u)) 32px calc(80 * var(--u));
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 32px; align-items: start; background: transparent; min-height: 0;
  }
  .bcf-main { grid-column: 1; min-width: 0; }
  .bcf-side { grid-column: 2; min-width: 0; position: sticky; top: 84px; padding-top: calc(10 * var(--u)); }
  .bcf > .bcf-review { grid-column: 1 / -1; }

  /* left column */
  .bcf-hero { width: calc(898 * var(--u)); max-width: none; margin-left: calc(50% - 449 * var(--u)); }
  .bcf-main > .bcf-ref { margin-top: calc(27 * var(--u)); }
  .bcf-main .bcf-acts { margin-top: calc(24 * var(--u)); }
  .bcf-main .bcf-acts button { cursor: pointer; }

  /* right column */
  .bcf-side .bcf-next-h { margin: 0 0 calc(14 * var(--u)) calc(6 * var(--u)) !important; }
  .bcf-side .bcf-next { padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u)); }
  .bcf-side .bcf-step { gap: calc(28 * var(--u)); }
  .bcf-side .bcf-step > div { width: auto; flex: 1 1 0; min-width: 0; }
  .bcf-side .bcf-step:not(:last-child)::after { left: calc(34 * var(--u)); }
  .bcf-side .bcf-step i { margin-top: calc(-2 * var(--u)); }
  .bcf-side .bcf-step { padding-bottom: calc(30 * var(--u)); }
  .bcf-side .bcf-step:nth-child(2) { padding-bottom: calc(30 * var(--u)); }
  .bcf-side .bcf-step b { font-size: max(14px, calc(25 * var(--u))); line-height: calc(34 * var(--u)); }
  .bcf-side .bcf-step p { font-size: max(13px, calc(22 * var(--u))); line-height: calc(32 * var(--u)); }
  .bcf-side .bcf-step:not(:last-child)::after { top: calc(66 * var(--u)); }
  .bcf-side .bcf-next-h { font-size: calc(36 * var(--u)); line-height: calc(46 * var(--u)); margin-bottom: calc(10 * var(--u)) !important; }
  .bcf-side .bcf-next { padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u)); }
  .bcf-side { top: 76px; padding-top: 0; }

  .bcf .bcf-pay[hidden] { display: block; }
  .bcf-pay { margin-top: calc(18 * var(--u)); padding: calc(22 * var(--u)) calc(32 * var(--u)) calc(20 * var(--u)); }
  .bcf-pay h3 { font-size: calc(34 * var(--u)); line-height: calc(44 * var(--u)); font-weight: 800; color: var(--ink); margin-bottom: calc(8 * var(--u)); letter-spacing: calc(-0.2 * var(--u)); }
  .bcf-pay-r { display: flex; justify-content: space-between; align-items: baseline; gap: calc(20 * var(--u)); padding: calc(10 * var(--u)) 0; border-bottom: calc(1.5 * var(--u)) solid var(--line); font-size: max(13px, calc(26 * var(--u))); line-height: calc(38 * var(--u)); }
  .bcf-pay-r span { color: #5f6c86; }
  .bcf-pay-r b { font-weight: 700; color: var(--ink); white-space: nowrap; }
  .bcf-pay-r.ok b { color: #1c9a57; }
  .bcf-pay-r.tot { border-bottom: 0; padding-bottom: 0; }
  .bcf-pay-r.tot span, .bcf-pay-r.tot b { font-size: max(14px, calc(32 * var(--u))); font-weight: 800; color: var(--ink); }

  .bcf-side .bcf-btn.primary { height: calc(88 * var(--u)); margin-top: calc(18 * var(--u)); color: #fff; background: #0a2a80; }
  .bcf-side .bcf-btn.primary span, .bcf-side .bcf-btn.primary svg { color: #fff; }
  .bcf-side .bcf-btn.ghost { height: calc(84 * var(--u)); margin-top: calc(12 * var(--u)); }
  .bcf-side .bcf-btn { font-size: max(14px, calc(32 * var(--u))); }
  .bcf-side .bcf-btn span { font-size: 17px; font-weight: 600; }
  .bcf-side .bcf-btn.primary:hover { background: #08236b; }
  .bcf-side .bcf-btn.ghost:hover { background: #f4f7fd; }

  /* "Booking not found" / loading on desktop */
  .bcf.bcf-nf { --u: 0.75px; max-width: 520px; min-height: 0; padding: 120px 24px 140px; }
  .bcf.bcf-nf .bcf-btn { max-width: 320px; margin: 0 auto; height: 56px; font-size: 16px; }
  .bcf.bcf-nf h1 { font-size: 34px; }
  .bcf.bcf-nf p { font-size: 16px; }
  .bcf.bcf-load { --u: 0.75px; max-width: 1100px; min-height: 0; padding-top: 60px; }
}