/* Conversion shell (look/cta.js): the phone «Book a call» bar and «Ask about this screen →» buttons.
   Colours from look/tokens.css with fallbacks. Paper pages: an ink bar; night pages (header data-surface="night"): glass. */
.wl-cta { display: none; }
@media (max-width: 760px) {
  .wl-cta {
    --c-ink: #0c111b; --c-blue: var(--blue, #285ff5);
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; pointer-events: none;
    padding: 0 12px calc(10px + env(safe-area-inset-bottom)); font-family: var(--font, 'Geist', 'Helvetica Neue', Arial, sans-serif);
    transition: transform .36s var(--ease-ui, cubic-bezier(.2,.7,.1,1)), opacity .24s ease;
  }
  .wl-cta.is-off { transform: translateY(calc(100% + 12px)); opacity: 0; }
  .wl-cta-in {
    pointer-events: auto; display: flex; align-items: center; gap: 6px; height: 60px; padding: 6px; border-radius: 22px;
    background: var(--c-ink); color: #fff; box-shadow: 0 18px 40px -16px rgba(12,17,27,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  }
  .wl-cta[data-surface="night"] .wl-cta-in {
    background: var(--glass-night, rgba(10,15,26,.62)); color: var(--ink-night, #e9eef7);
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 18px 44px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(233,238,247,.12) inset;
  }
  .wl-cta-go {
    flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 0 14px;
    border-radius: 16px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .wl-cta-t { display: grid; gap: 4px; min-width: 0; }
  .wl-cta-t b { font: 640 16px/1 var(--font, sans-serif); letter-spacing: -.015em; }
  .wl-cta-t small { font: 500 10.5px/1.1 var(--mono, 'Geist Mono', ui-monospace, monospace); letter-spacing: .07em; text-transform: uppercase; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wl-cta-i {
    flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--c-blue); color: #fff;
    box-shadow: 0 10px 24px -10px rgba(40,95,245,.8), inset 0 1px 0 rgba(255,255,255,.22); transition: transform .2s;
  }
  .wl-cta-go:active .wl-cta-i { transform: scale(.94); }
  .wl-cta-wa {
    flex: none; height: 100%; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 16px;
    background: rgba(255,255,255,.08); color: inherit; text-decoration: none; font: 560 12.5px/1.1 var(--font, sans-serif); white-space: nowrap;
  }
  .wl-cta-wa svg { color: #25d366; flex: none; }
  .wl-cta-wa > span { white-space: nowrap; }
  /* Dubai: «Ask on WhatsApp» beside «Book a call» leaves no room for the sub-line (it was cut to «30 MIN · A PLAN F…») */
  .wl-cta[data-market="dubai"] .wl-cta-t small { display: none; }
  .wl-cta a:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
  .wl-cta[data-surface="night"] a:focus-visible { outline-color: #9db6ff; }
}
/* a phone of 420 px or less: the small action is the icon + «WhatsApp» (its aria-label keeps «Ask on WhatsApp»), never
   cut; «Book a call» gives way instead */
@media (max-width: 420px) { .wl-cta-wa-x { display: none; } .wl-cta-wa { padding: 0 11px; gap: 6px; } }

/* The room the bottom overlays take, at every width: the phone «Book a call» bar (--wl-cta-h, this file's cta.js) and the
   consent strip / row while it is open (--wl-consent-h, consent.js). Focus scrolling keeps clear of both; the hub's
   chapters, the market pages' body and the Dubai page body end above both, so an in-chapter «Book a call» is never
   half-covered. (The US pages lift their own bottom controls with the same variables: look/us2/us2.css --us2-bottom.) */
html { scroll-padding-bottom: calc(var(--wl-cta-h, 0px) + var(--wl-consent-h, 0px) + 16px); }
#ui > .ch:not(.top), .mk-paper, main > .paper { padding-bottom: calc(var(--wl-room-pad, 0px) + var(--wl-cta-h, 0px) + var(--wl-consent-h, 0px)); }
main > .paper { --wl-room-pad: 40px; }
html.wl-cta-on .wl-foot, html.wl-consent-on .wl-foot { padding-bottom: calc(28px + env(safe-area-inset-bottom) + var(--wl-cta-h, 0px) + var(--wl-consent-h, 0px)); }
/* paper pages in a dark OS theme: the page ground is near-black, so the ink bar turns to the night glass */
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wl-cta:not([data-surface="night"]) .wl-cta-in { background: rgba(21,26,34,.88); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 18px 44px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(233,238,247,.14) inset; }
}
@media (max-width: 760px) { :root[data-theme="dark"] .wl-cta:not([data-surface="night"]) .wl-cta-in { background: rgba(21,26,34,.88); box-shadow: 0 18px 44px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(233,238,247,.14) inset; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .wl-cta { transition: none; } }
@media print { .wl-cta { display: none !important; } }

/* «Ask about this screen →» — the old «+ Add to plan» buttons after plan.js converts them (and new [data-ask] buttons) */
.wl-ask { gap: 10px; }
.wl-ask .wl-ask-i { display: inline-grid; place-items: center; flex: none; transition: transform .25s var(--ease-ui, cubic-bezier(.2,.7,.1,1)); }
.wl-ask:hover .wl-ask-i, .wl-ask:focus-visible .wl-ask-i { transform: translateX(3px); }
.wl-ask.u2-add, .wl-ask.wl-add { border-color: rgba(40,95,245,.55); }
.wl-ask.u2-add:hover, .wl-ask.wl-add:hover { background: var(--blue, #285ff5); border-color: var(--blue, #285ff5); color: #fff; }
.wl-ask[aria-pressed] { background: transparent; }