/* ==========================================================================
   Softbnb — display currency (24 Oct 2026). DISPLAY ONLY.
   The estimate beside a naira price, the currency picker (header + footer)
   and its menu/sheet, and the checkout notice. Behaviour: js/sb-fx.js.
   Loaded by common/head.blade.php only while DisplayCurrency::enabled().

   Tokens: the design system keeps its --sb-* tokens on .sb-page / .sb-foot /
   .sb-modal (css/softbnb-ds.css), and that file is not on every page that
   shows the picker. So the picker and its sheet carry their own copy of the
   tokens they use, with the same names and values, day and night (night =
   body.dark-mode, set by the header's theme script).
   ========================================================================== */

.sb-fx-pick,
.sb-fx-sheet,
.sb-fx-pay {
  --sb-primary:        #E63338;
  --sb-primary-strong: #C8262B;
  --sb-primary-soft:   #FDECEC;
  --sb-bg:             #FFFDFB;
  --sb-surface:        #FFFFFF;
  --sb-surface-2:      #F7F3EE;
  --sb-surface-3:      #EFE8E0;
  --sb-border:         #E7DFD6;
  --sb-border-strong:  #D6CABB;
  --sb-text:           #1A1614;
  --sb-ink:            #14100E;
  --sb-muted:          #6B615A;
  --sb-focus:          #C8262B;
  --sb-r-sm:   8px;
  --sb-r-md:   14px;
  --sb-r-lg:   20px;
  --sb-r-pill: 999px;
  --sb-shadow-3: 0 8px 20px rgba(20, 16, 14, 0.08), 0 28px 60px rgba(20, 16, 14, 0.12);
  --sb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sb-dur-fast: 180ms;
  --sb-dur:      240ms;
}
body.dark-mode .sb-fx-pick,
body.dark-mode .sb-fx-sheet,
body.dark-mode .sb-fx-pay {
  --sb-primary-soft:   rgba(230, 51, 56, 0.16);
  --sb-bg:             #0F0D0C;
  --sb-surface:        #1A1614;
  --sb-surface-2:      #221D1A;
  --sb-surface-3:      #2C2521;
  --sb-border:         #332B26;
  --sb-border-strong:  #4A3F37;
  --sb-text:           #F1EAE4;
  --sb-ink:            #F5F0EB;
  --sb-muted:          #A99E95;
  --sb-focus:          #FF6B6F;
  --sb-shadow-3: 0 8px 20px rgba(0, 0, 0, 0.5), 0 28px 60px rgba(0, 0, 0, 0.55);
}

/* ── 1. The estimate beside a naira price (rule 6) ───────────────────────
   "≈ £55" is the main figure, the naira price small beside it. Doubled class
   selectors: the legacy cards style every span inside a price
   (.prop-card__price span { 12px; grey }), which would shrink the estimate. */
.sb-fx.sb-fx { font: inherit; color: inherit; letter-spacing: inherit; white-space: nowrap; }
.sb-fx.sb-fx > .sb-fx__est,
.sb-fx.sb-fx > .sb-fx__ngn { font: inherit; color: inherit; letter-spacing: inherit; }
.sb-fx > .sb-fx__est[hidden] { display: none !important; }
.sb-fx.sb-fx.is-fx > .sb-fx__ngn {
  margin-left: .4em;
  font-size: .78em;
  font-weight: 400;
  letter-spacing: 0;
  color: #786D64;
  color: var(--sb-muted, #786D64);
}
body.dark-mode .sb-fx.sb-fx.is-fx > .sb-fx__ngn { color: #A99E95; color: var(--sb-muted, #A99E95); }
/* A price that sits on red or on a photo keeps its own colour, slightly quieter. */
.prop-card__price .sb-fx.is-fx > .sb-fx__ngn,
.sr-hc-badge .sb-fx.is-fx > .sb-fx__ngn { color: inherit !important; opacity: .72; }
/* Two-up phone cards are ~150px wide: the estimate takes the first line, and the naira price
   starts the second, where "/ night" follows it — instead of "/ night" wrapping on its own. */
@media (max-width: 767.98px) {
  .prop-card__price .sb-fx.is-fx { white-space: normal; }
  .prop-card__price .sb-fx.sb-fx.is-fx > .sb-fx__ngn { margin-left: 0; white-space: nowrap; }
  .prop-card__price .sb-fx.is-fx > .sb-fx__ngn::before { content: "\A"; white-space: pre; }
}

/* Property page: the head price stacks — "≈ £55 / night" over "₦97,500". */
.pp-booking__amount .sb-fx.is-fx,
.pp-mobile-bar__amount .sb-fx.is-fx { white-space: normal; }
.pp-booking__amount .sb-fx.sb-fx.is-fx > .sb-fx__ngn,
.pp-mobile-bar__amount .sb-fx.sb-fx.is-fx > .sb-fx__ngn { margin-left: .45em; font-size: .6em; font-weight: 500; color: inherit; opacity: .72; }
/* The live quote: each value stacks the estimate over the naira line. */
.pp-quote__value .sb-fx.is-fx { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.pp-quote__value .sb-fx.is-fx > .sb-fx__ngn { margin-left: 0; font-size: .82em; }

/* ── 2. The picker button ─────────────────────────────────────────────── */
.sb-fx-pick {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 11px 0 12px;
  border: 1px solid var(--sb-border-strong);
  border-radius: var(--sb-r-pill);
  background: transparent;
  color: var(--sb-text);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sb-dur-fast) ease, border-color var(--sb-dur-fast) ease, color var(--sb-dur-fast) ease;
}
.sb-fx-pick[hidden] { display: none !important; }
.sb-fx-pick:hover { background: var(--sb-surface-2); border-color: var(--sb-muted); }
.sb-fx-pick:focus { outline: none; }
.sb-fx-pick:focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 2px; }
.sb-fx-pick:active { transform: scale(.97); }
.sb-fx-pick__sym { font-weight: 700; }
.sb-fx-pick__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.sb-fx-pick[aria-expanded="true"] .sb-fx-pick__chev { transform: rotate(180deg); }

/* In the top bar: a little room before the theme switch. */
.sb-fx-pick--nav { margin: 0 4px; }
/* Over the homepage photo (headerH .at-top) the bar is transparent: white text. */
.site-topnav.at-top .sb-fx-pick { color: #fff; border-color: rgba(255, 255, 255, .45); }
.site-topnav.at-top .sb-fx-pick:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .75); }
body.dark-mode .site-topnav:not(.at-top) .sb-fx-pick { color: #e2e8f0; border-color: #334155; }
body.dark-mode .site-topnav:not(.at-top) .sb-fx-pick:hover { background: rgba(255, 255, 255, .06); }
/* Phone: the code alone, no chevron, the same height as the menu button. */
@media (max-width: 991.98px) {
  .sb-fx-pick--nav { height: 32px; padding: 0 10px; margin: 0 6px 0 0; font-size: 12.5px; }
  .sb-fx-pick--nav .sb-fx-pick__chev { display: none; }
}
.mob-site-top-bar .sb-fx-pick { height: 32px; padding: 0 10px; font-size: 12.5px; background: #f3f4f6; border-color: #d1d5db; color: #374151; }
.mob-site-top-bar .sb-fx-pick .sb-fx-pick__chev { display: none; }
body.dark-mode .mob-site-top-bar .sb-fx-pick { background: #1e293b; border-color: #334155; color: #cbd5e1; }

/* Legacy footer (common/footer): a text link in the "Language & currency" row. */
.sb-fx-pick--foot {
  height: auto; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font-size: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 3px;
}
.sb-fx-pick--foot:hover { background: none; color: inherit; }
/* Premium footer: the same pill as the language button beside it (.sb-foot__prefbtn in
   css/softbnb-home.css), restated because this file loads after that one. The footer is
   always on the deep ground, day and night. */
.sb-fx-pick.sb-fx-pick--prem {
  height: auto; padding: 8px 14px; gap: 7px;
  font-size: var(--sb-t-small, 15px); font-weight: var(--sb-w-medium, 500);
  color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16);
}
.sb-fx-pick.sb-fx-pick--prem:hover { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .16); }
.sb-fx-credit { font-size: 12px; opacity: .8; }
.sb-fx-credit[hidden] { display: none !important; }
.sb-fx-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sb-foot .sb-fx-credit { align-self: center; color: rgba(255, 255, 255, .7); }

/* ── 3. The menu: popover under the button on a wide screen, bottom sheet on a phone ── */
html.sb-fx-lock, html.sb-fx-lock body { overflow: hidden !important; }
.sb-fx-sheet { position: fixed; inset: 0; z-index: 1300; pointer-events: none; }
.sb-fx-sheet[hidden] { display: none !important; }
.sb-fx-sheet__scrim { position: absolute; inset: 0; pointer-events: auto; background: transparent; }
.sb-fx-sheet__panel {
  position: fixed; pointer-events: auto;
  width: 340px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 18px 16px 14px;
  background: var(--sb-surface);
  color: var(--sb-text);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-r-lg);
  box-shadow: var(--sb-shadow-3);
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.4; text-align: left;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity var(--sb-dur-fast) var(--sb-ease-out), transform var(--sb-dur) var(--sb-ease-out);
}
.sb-fx-sheet.is-open .sb-fx-sheet__panel { opacity: 1; transform: none; }
.sb-fx-sheet *, .sb-fx-sheet *::before, .sb-fx-sheet *::after { box-sizing: border-box; }

.sb-fx-sheet.is-sheet .sb-fx-sheet__scrim { background: rgba(10, 7, 6, .48); opacity: 0; transition: opacity var(--sb-dur) ease; }
.sb-fx-sheet.is-sheet.is-open .sb-fx-sheet__scrim { opacity: 1; }
.sb-fx-sheet.is-sheet .sb-fx-sheet__panel {
  left: 0 !important; right: 0 !important; top: auto !important; bottom: 0;
  width: 100%; max-width: none; max-height: 86vh;
  border-radius: var(--sb-r-lg) var(--sb-r-lg) 0 0; border-bottom: 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); opacity: 1;
  transition: transform 320ms var(--sb-ease-out);
}
.sb-fx-sheet.is-sheet.is-open .sb-fx-sheet__panel { transform: none; }
.sb-fx-sheet__grab { display: none; width: 40px; height: 4px; border-radius: 4px; margin: 0 auto 10px; background: var(--sb-border-strong); }
.sb-fx-sheet.is-sheet .sb-fx-sheet__grab { display: block; }

.sb-fx-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.sb-fx-sheet__eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-muted); }
.sb-fx-sheet__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--sb-ink); }
.sb-fx-sheet__close {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--sb-r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sb-border); background: var(--sb-surface-2); color: var(--sb-text); cursor: pointer; padding: 0;
}
.sb-fx-sheet__close:hover { background: var(--sb-surface-3); }
.sb-fx-sheet__x { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.sb-fx-sheet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sb-fx-sheet__list li { margin: 0; padding: 0; }
.sb-fx-opt {
  width: 100%; display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 8px 12px 8px 8px;
  border: 1px solid transparent; border-radius: var(--sb-r-md);
  background: transparent; color: var(--sb-text);
  font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sb-dur-fast) ease, border-color var(--sb-dur-fast) ease;
}
.sb-fx-opt:hover { background: var(--sb-surface-2); }
.sb-fx-opt:focus { outline: none; }
.sb-fx-opt:focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 1px; }
.sb-fx-opt.is-active { background: var(--sb-primary-soft); border-color: rgba(200, 38, 43, .28); }
body.dark-mode .sb-fx-opt.is-active { border-color: rgba(255, 107, 111, .35); }
.sb-fx-opt__sym {
  flex: 0 0 auto; width: 46px; height: 38px; padding: 0; border-radius: 12px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sb-surface-2); border: 1px solid var(--sb-border);
  font-size: 15px; font-weight: 700; color: var(--sb-ink);
}
.sb-fx-opt.is-active .sb-fx-opt__sym { background: var(--sb-primary-strong); border-color: var(--sb-primary-strong); color: #fff; }
.sb-fx-opt__stack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-fx-opt__label { font-size: 15px; font-weight: 500; color: var(--sb-ink); }
.sb-fx-opt__sub { font-size: 12.5px; color: var(--sb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-fx-opt__check { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--sb-primary-strong); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
body.dark-mode .sb-fx-opt__check { stroke: #FF8A8D; }
.sb-fx-opt.is-active .sb-fx-opt__check { opacity: 1; }

.sb-fx-sheet__note { margin: 12px 4px 6px; font-size: 12.5px; line-height: 1.45; color: var(--sb-muted); }
.sb-fx-sheet__credit { margin: 0 4px; font-size: 12px; color: var(--sb-muted); }
.sb-fx-sheet__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sb-fx-sheet__credit a:hover { color: var(--sb-text); }

@media (prefers-reduced-motion: reduce) {
  .sb-fx-sheet__panel, .sb-fx-sheet__scrim, .sb-fx-pick { transition: none !important; }
}

/* ── 4. Where the guest pays (rule 5): the naira charge leads, the estimate follows ── */
.sb-fx-pay {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 0 0; padding: 11px 13px;
  border: 1px solid var(--sb-border); border-radius: 12px;
  background: var(--sb-surface-2); color: var(--sb-text);
  font-size: 13px; line-height: 1.5;
}
.sb-fx-pay[hidden] { display: none !important; }
.sb-fx-pay__icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--sb-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sb-fx-pay strong { font-weight: 700; color: var(--sb-ink); white-space: nowrap; }
.sb-fx-pay .sb-fx__est { font-weight: 600; white-space: nowrap; }
.sb-fx-pay .sb-fx__est[hidden] { display: none; }
.sb-fx-pay__note { color: var(--sb-muted); }
/* Checkout (payment/payment): first thing in the payment panel, above the methods. */
.pm-panel-body > .sb-fx-pay { margin: 0 0 14px; }