/* ==========================================================================
   FIXOVKA · VARIANT B — the whole visual layer of the A/B variant
   ==========================================================================
   Ships to fonergy.cz as one file, loaded AFTER the site's own main.css.

   The isolation contract (variant A and B are live at the same time):
   - every class starts with `fxb-`, every custom property with `--fxb-`;
     the site's stylesheets contain neither (checked against main.css and
     main-extra.css on 2026-10-02);
   - no element selector, no `:root`, no `body`, no `*` outside a `.fxb`
     ancestor — a page that loads this file without variant B's markup
     renders exactly as before;
   - tokens live on `.fxb`, the class every root of this variant carries
     (<main>, the sticky bar, the callback button and panel);
   - sizes are px, not rem: the site sets `html{font-size:17px}` and a
     future change there must not rescale this page;
   - the live components kept as they are (calculator, header, footer)
     keep the site's classes; the few adjustments they need are scoped
     under `.fxb-calc`.

   The two classes this file puts on <body> are set by fixovka-b.js:
   `fxb-has-sticky` (room for the mobile bar) — nothing else.
   ========================================================================== */

.fxb {
  --fxb-navy: #18286c;
  --fxb-ink: #051148;
  --fxb-orange: #ff601a;
  --fxb-orange-d: #e24e0c;
  --fxb-bg: #fffaf8;
  --fxb-card: #fff;
  --fxb-line: #eadfd8;
  --fxb-muted: #5a6285;
  --fxb-peach: #fff0e8;
  --fxb-ok: #1d7a4a;
  --fxb-err: #c62828;
  --fxb-star: #ffd500;
  --fxb-r: 18px;
  --fxb-sticky-h: 64px;
  /* The site's header is position:fixed; the hero clears it and anchors
     land under it. Its height changes with the width in more steps than
     these two (65 / 82 / 74 / 94px), so fixovka-b.js measures it and
     overwrites this — the values here are the pre-script fallback. */
  --fxb-nav-h: 65px;
  /* The site's own `html{scroll-padding-top}` — see `.fxb-section[id]`. */
  --fxb-site-scroll-pad: 20vh;

  box-sizing: border-box;
  color: var(--fxb-ink);
  font-family: Kanit, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 1100px) {
  .fxb { --fxb-nav-h: 74px; }
}

.fxb *,
.fxb *::before,
.fxb *::after { box-sizing: border-box; }

/* Zero specificity on purpose — the WHOLE selector, the `.fxb` part too:
   these only replace browser defaults where the site's reset is absent and
   must never outrank a class. Written as `.fxb :where(p)` the first of them
   weighed one class, loaded after the site's sheet, and so beat the
   calculator's own `.calculator_info{margin-top:auto}` — the note stopped
   sitting at the foot of the card and the fields spread out instead. */
:where(.fxb) :where(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; }
:where(.fxb) :where(ul, ol) { padding: 0; list-style: none; }
:where(.fxb) :where(img, svg) { max-width: 100%; }
/* `hidden` must beat every display this file sets — on a root too (the
   callback button and panel are roots, and are hidden most of the time). */
.fxb[hidden], .fxb [hidden] { display: none !important; }
:where(.fxb) :where(a) { color: var(--fxb-navy); }

.fxb :focus-visible { outline: 3px solid var(--fxb-orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fxb, .fxb * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ layout */

.fxb-container { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 16px; }

.fxb-section { position: relative; padding-block: 56px; }
/* Where an anchor lands. The site already sets `html{scroll-padding-top:
   20vh}`, which stops a target a fifth of the screen down — on top of that,
   a margin of the header's height left the calculator's heading at 321px of
   an 800px window with the hero's buttons still above it. So the margin
   takes the site's padding back out and places the section itself: its top
   32px above the header's lower edge, which with the section's 56px of
   padding puts the heading 24px under the header on every screen height.
   If the site's scroll-padding changes, `--fxb-site-scroll-pad` follows it. */
.fxb-section[id] { scroll-margin-top: calc(var(--fxb-nav-h) - 32px - var(--fxb-site-scroll-pad)); }

.fxb-stack { display: grid; gap: 22px; }
.fxb-stack > * { min-width: 0; }

/* -------------------------------------------------------------- typography */

.fxb-h1, .fxb-h2, .fxb-h3 { color: var(--fxb-navy); line-height: 1.1; text-wrap: balance; }
.fxb-h1 { font-size: clamp(34px, 6vw, 60px); font-weight: 600; }
.fxb-h2 { font-size: clamp(26px, 4vw, 42px); font-weight: 500; }
.fxb-h2--xl { font-size: clamp(34px, 6vw, 64px); }
.fxb-h2--l { font-size: clamp(30px, 5vw, 48px); }
.fxb-h3 { font-size: 20px; font-weight: 500; }

.fxb-eyebrow { display: block; color: var(--fxb-orange); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.fxb-lead { max-width: 70ch; }
.fxb-head { display: grid; gap: 10px; }
.fxb-head--center { text-align: center; justify-items: center; }
.fxb-head--center p { font-size: 18px; font-weight: 400; }

/* ----------------------------------------------------------------- buttons */

.fxb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 14px 26px;
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1.5;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, transform .1s;
}
.fxb-btn:active { transform: translateY(2px); }
.fxb-btn--accent { background: var(--fxb-orange); color: #fff; }
.fxb-btn--accent:hover { background: var(--fxb-orange-d); }
.fxb-btn--navy { background: var(--fxb-navy); color: #fff; }
.fxb-btn--navy:hover { background: var(--fxb-ink); }
.fxb-btn--ghost { background: transparent; color: var(--fxb-navy); box-shadow: inset 0 0 0 2px var(--fxb-navy); }
.fxb-btn--ghost:hover { background: rgba(24, 40, 108, .06); }
.fxb-btn--full { width: 100%; }
.fxb-btn--s { padding: 10px 20px; font-size: 15px; }

.fxb-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.fxb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------------- hero */

.fxb-hero { padding-block: calc(var(--fxb-nav-h) + 40px) 48px; }
.fxb-hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
.fxb-hero__text { margin-top: 14px; max-width: 54ch; }
.fxb-hero .fxb-h1 { margin-top: 8px; }
.fxb-hero__art { justify-self: center; width: 100%; max-width: 300px; height: auto; }
.fxb-hero__ctas { margin-top: 24px; }

.fxb-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 14px; color: var(--fxb-muted); font-size: 14px; }
.fxb-trust b { color: var(--fxb-navy); font-weight: 500; }
.fxb-trust__item { display: inline-flex; align-items: center; gap: 6px; }
.fxb-trust svg { width: 16px; height: 15px; color: var(--fxb-star); }

.fxb-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 600px; margin-top: 20px; }
.fxb-price {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px 16px; border: 1.5px solid var(--fxb-line); border-radius: var(--fxb-r);
  background: var(--fxb-card); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.fxb-price:hover { border-color: var(--fxb-orange); transform: translateY(-2px); }
.fxb-price__icon { display: block; width: 40px; height: 40px; object-fit: contain; }
.fxb-price__name { display: block; color: var(--fxb-navy); font-weight: 500; }
.fxb-price__value { display: block; color: var(--fxb-orange); font-size: 24px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.fxb-price__vat { display: block; margin-bottom: 2px; color: var(--fxb-navy); font-size: 13.5px; font-weight: 500; }
.fxb-price__more { display: block; color: var(--fxb-muted); font-size: 13px; line-height: 1.45; }

.fxb-ticks { display: flex; flex-wrap: nowrap; gap: 6px 18px; margin-top: 18px; color: var(--fxb-navy); font-size: 14.5px; font-weight: 400; }
.fxb-ticks li { white-space: nowrap; }
.fxb-ticks li::before { content: "✓"; margin-right: 6px; color: var(--fxb-orange); font-weight: 600; }

@media (max-width: 767px) {
  .fxb-hero { padding-block: calc(var(--fxb-nav-h) + 24px) 32px; }
  .fxb-hero__grid { grid-template-columns: 1fr; }
  .fxb-hero__art { display: none; }
  .fxb-ticks { flex-direction: column; font-size: 15px; }
  .fxb-ticks li { white-space: normal; }
}
@media (max-width: 480px) {
  .fxb-prices { gap: 8px; margin-top: 12px; }
  .fxb-price { grid-template-columns: 1fr; gap: 4px; padding: 12px; }
  .fxb-price__icon { display: none; }
  .fxb-price__value { font-size: 21px; }
  .fxb-price__vat, .fxb-price__more { font-size: 11.5px; }
  .fxb-hero .fxb-eyebrow { font-size: 11.5px; }
  .fxb-hero__ctas { margin-top: 16px; }
}
@media (max-width: 420px) {
  .fxb-hero__ctas .fxb-btn { flex: 1 1 100%; }
}

/* -------------------------------------------------------------- calculator
   The calculator is the site's own component, markup and classes included.
   What follows only (a) restores the site's body text settings inside it,
   so `.fxb`'s typography does not leak into a component designed against
   the body's, and (b) makes room for the address field that now lives in
   the card. */

.fxb-calc { color: #000; font-size: 17px; font-weight: 400; line-height: 1.5; }
/* The component prints its own H2; the section already has one. */
.fxb-calc .calculator-tabs > .container { display: none; }
/* Tabs sit under the left-aligned section heading, not centred. */
.fxb-calc .calculator-tabs > .flex { justify-content: flex-start; padding-top: 0 !important; }
.fxb-calc .calculators-tabs { margin-bottom: 16px; }
/* The component centres itself in a 1000px column of its own; here the
   section's container is the column. */
.fxb-calc .plyn__calculator { padding-inline: 0; padding-bottom: 0 !important; }
.fxb-calc .play__calculator_content { width: 100%; max-width: none; margin: 0; }
/* The accuracy note goes under the two buttons, not beside them. */
.fxb-calc .tariff-cta > .flex { flex-wrap: wrap; }
.fxb-calc .price-subtext { flex-basis: 100%; margin-top: 8px; }
/* Fixed at 625px on the site; the address row makes the card taller. */
.fxb-calc .calculator__card { display: flex; flex-direction: column; height: auto; }
/* Its inner column is `height:100%` of the card and spreads its rows over
   it. With the address above, 100% overflows the card by exactly the
   address's height — so it takes what is left instead. */
.fxb-calc .calculator__card__radios { flex: 1 1 auto; height: auto; }

/* The tariff card when it is narrow (a phone: 343px). The component keeps
   the two buttons in the text column beside the picture, where there is
   room for only one per line — two stacked buttons in a 200px column, the
   note squeezed under them. Here the picture sits beside the title,
   description and price, and the buttons and the note take the card's full
   width underneath, side by side. The picture itself is the component's,
   as it is.

   No markup is touched: the text column is dissolved (display: contents)
   so its three parts become cells of a grid on the card; the component's
   width cap on the button row and its block layout on small screens are
   undone. Narrow means up to 440px: variant B's own desktop card is 516px wide
   and keeps the component's layout. The query is on the cards' group, because a container cannot
   restyle itself. `.fxb .fxb-calc` rather than `.fxb-calc`: the component's
   own scoped rules are injected at runtime, after this file, and would win
   a tie.

   The container is named and every query asks for it by name. An unnamed
   query answers to the nearest container, and B+ makes the card one too
   (for its wide layout) — so the card's own rule measured the group while
   the rules for its parts measured the card, 50px narrower. Between the
   two the parts were dissolved into a grid that was not there: three
   columns in a row, the buttons cut off at the card's edge. */
.fxb .fxb-calc .tariff-card-group { container: fxb-tariffs / inline-size; }
@container fxb-tariffs (max-width: 440px) {
  .fxb .fxb-calc .tariff-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 0;
    grid-template-areas: "head pic" "price pic" "cta cta";
    align-items: start; padding: 22px 20px 20px;
  }
  .fxb .fxb-calc .tariff-content { display: contents; }
  .fxb .fxb-calc .tariff-header { grid-area: head; }
  .fxb .fxb-calc .tariff-price { grid-area: price; }
  .fxb .fxb-calc .tariff-content-cta { grid-area: pic; align-self: center; }
  .fxb .fxb-calc .tariff-cta { grid-area: cta; justify-self: stretch; width: auto; max-width: none; margin-top: 16px; }
  .fxb .fxb-calc .tariff-cta > .flex { align-items: stretch; width: 100%; max-width: none; }
  .fxb .fxb-calc .calculator-btns { display: flex; flex-direction: row; align-items: stretch; gap: 10px; width: 100%; }
  .fxb .fxb-calc .calculator-btns .tariff-button { flex: 1 1 0; min-width: 0; margin: 0; padding-inline: 10px !important; text-align: center; white-space: nowrap; }
  .fxb .fxb-calc .price-subtext { margin-top: 10px; }
}

/* Between that and the tablet (a 441–720px card under the 768px window).
   The component stacks its two buttons below 768px although the text
   column has room for both, which left a tall card with two lone buttons
   down its left side. They sit side by side here, sharing the text
   column's 290px — the row cannot be wider, the picture is next to it. */
@media (max-width: 767px) {
  @container fxb-tariffs (min-width: 440.01px) {
    .fxb .fxb-calc .tariff-cta { align-self: stretch; width: 100%; }
    .fxb .fxb-calc .tariff-cta > .flex { align-items: stretch; width: 100%; }
    .fxb .fxb-calc .calculator-btns { display: flex; flex-direction: row; align-items: stretch; gap: 8px; width: 100%; }
    .fxb .fxb-calc .calculator-btns .tariff-button { flex: 1 1 0; min-width: 0; padding-inline: 8px !important; text-align: center; white-space: nowrap; }
  }
}

/* A tariff name that wraps ("Fixovka / Online F29" on a phone). The
   component sets it at a line-height made for one line — 41px for 26px
   type — so two lines stood a full blank line apart. Tightened, and the
   "i" beside it sits by the first line instead of floating between two. */
.fxb .fxb-calc .tariff-title { line-height: 1.15; }
.fxb .fxb-calc .tariff-product-name { align-items: flex-start; margin-bottom: 6px; }
/* Centred on the title's first line by its capitals, not by its line box
   (Kanit's letters sit a little low in the line). */
.fxb .fxb-calc .tariff-product-name .product-info { margin-top: 6px; }
/* The "i". The component draws it as a letter in a thin 20px ring — a
   lower-case i in the text face, which read as a stray character rather
   than as a control. Same button, same tooltip; it is shown as a filled
   navy disc with a drawn white "i" instead (the letter itself is hidden,
   the aria-label still names the button), and turns orange under the
   pointer or on focus. */
.fxb .fxb-calc .product-info__trigger {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: var(--fxb-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='6.4' r='1.55' fill='%23fff'/%3E%3Crect x='9.7' y='9.3' width='2.6' height='7.4' rx='1.3' fill='%23fff'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  color: transparent; font-size: 0; cursor: help;
  transition: background-color .15s;
}
.fxb .fxb-calc .product-info__trigger:hover,
.fxb .fxb-calc .product-info__trigger:focus-visible { background-color: var(--fxb-orange); }

/* "Zavolejte mi" in a tariff card: the component's outlined orange button
   has no hover of its own (its `hover:bg-opacity-90` acts on a white
   background, so nothing is seen). It answers the pointer the way this
   page's other outlined buttons do — a faint wash of its own colour. */
.fxb .fxb-calc .tariff-button.button-white { transition: background-color .15s, transform .1s; }
.fxb .fxb-calc .tariff-button.button-white:hover,
.fxb .fxb-calc .tariff-button.button-white:focus-visible { background-color: rgba(255, 96, 26, .1) !important; }

.fxb-addr { display: grid; gap: 6px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--fxb-line); }
.fxb-addr__label { color: var(--fxb-muted); font-size: 14px; font-weight: 300; }
.fxb-addr__row { display: grid; grid-template-columns: auto 1fr; align-items: center; padding-left: 12px; border: 1.5px solid var(--fxb-line); border-radius: 12px; background: #fff; }
.fxb-addr__row:focus-within { border-color: var(--fxb-orange); }
.fxb-addr__row.input-error-address { border-color: #f00; }
.fxb-addr__input { min-width: 0; width: 100%; padding: 10px 12px 10px 8px; border: 0; background: transparent; color: var(--fxb-ink); font: inherit; font-size: 17px; }
.fxb-addr__input:focus { outline: none; }
.fxb-addr__hint { color: var(--fxb-muted); font-size: 13.5px; font-weight: 300; line-height: 1.45; }
.fxb-addr__hint.is-ok { color: var(--fxb-ok); font-weight: 500; }

/* The way from the last field to the price while the tariff cards are
   stacked under this card. Hidden when they sit beside it. */
.fxb-calc__next { display: none; margin-top: 20px; font-family: inherit; }
.fxb-calc.is-stacked .fxb-calc__next { display: inline-flex; }

.fxb-calc__tip { margin-top: 12px; color: var(--fxb-muted); font-size: 12.5px; font-weight: 300; line-height: 1.45; }
.fxb-calc .price-subtext { color: var(--fxb-muted); font-size: 13px; font-weight: 300; }
.fxb-calc .price-subtext.is-ok { color: var(--fxb-ok); }

.fxb-limit { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; align-items: center; padding: 16px 20px; border-radius: 14px; background: var(--fxb-peach); }
.fxb-limit p { max-width: 75ch; font-size: 15.5px; font-weight: 400; }
@media (max-width: 600px) {
  .fxb-limit { grid-template-columns: 1fr; justify-items: start; }
}

/* ----------------------------------------------------------------- reviews */

.fxb-rv { display: grid; gap: 16px; }
.fxb-rv__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.fxb-rv__score { display: flex; align-items: center; gap: 14px; }
.fxb-rv__num { color: var(--fxb-navy); font-size: 48px; font-weight: 600; line-height: 1; }
/* Centred by ink, not by box. The two boxes were centred on each other, but
   the digits sit 1.5px low in theirs (the font's ascender is taller than its
   descender) and the stars-plus-line block's ink ended 6px above its box's
   foot (the line's leading), so the block read 5px higher than the number.
   The line loses its leading and the block is nudged so that the stars' top
   meets the digits' top and the line's baseline meets the digits' baseline. */
.fxb-rv__meta { display: grid; gap: 3px; padding-top: 5px; }
.fxb-rv__count { display: block; color: var(--fxb-muted); font-size: 14px; line-height: 1; }
.fxb-rv__nav { display: flex; align-items: center; gap: 8px; }
.fxb-rv__all { margin-right: 8px; font-size: 14px; }
.fxb-rv__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--fxb-navy); border-radius: 50%; background: #fff; color: var(--fxb-navy); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
/* Drawn, not typed: the font's ← → sit on the text baseline, which put
   them visibly below the centre of the circle. */
.fxb-rv__arrow svg { display: block; width: 18px; height: 18px; }
.fxb-rv__arrow:disabled { opacity: .3; cursor: default; }

.fxb-stars { display: flex; gap: 2px; color: var(--fxb-star); }
.fxb-stars svg { width: 18px; height: 17px; }

.fxb-rv__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px;
  margin-inline: -2px; padding: 4px 2px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.fxb-rv__track::-webkit-scrollbar { display: none; }
.fxb-rv__card { display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid var(--fxb-line); border-radius: var(--fxb-r); background: #fff; scroll-snap-align: start; }
.fxb-rv__text { font-size: 16px; font-weight: 400; white-space: pre-line; }
.fxb-rv__toggle { justify-self: start; padding: 0; border: 0; background: none; color: var(--fxb-navy); font: inherit; font-size: 14px; font-weight: 500; text-decoration: underline; cursor: pointer; }
.fxb-rv__by { margin-top: auto; color: var(--fxb-muted); font-size: 14px; }
.fxb-rv__by b { color: var(--fxb-navy); font-weight: 500; }

@media (max-width: 900px) {
  .fxb-rv__track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 600px) {
  /* The next card peeks in: that is the affordance, so the arrows go. */
  .fxb-rv__track { grid-auto-columns: 86%; }
  .fxb-rv__arrow { display: none; }
}

/* ------------------------------------------------------------ price promise */

.fxb-promise { display: grid; gap: 18px; justify-items: center; max-width: 1000px; margin-inline: auto; text-align: center; }
.fxb-promise p { max-width: 780px; font-size: 18px; font-weight: 400; line-height: 1.65; }
.fxb-promise picture { display: block; width: 100%; }
.fxb-promise img { display: block; width: 100%; height: auto; margin-block: 6px; border-radius: 12px; }

/* ----------------------------------------------------------- benefit cards */

.fxb-bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fxb-bcard {
  position: relative; display: grid; gap: 12px; align-content: start; overflow: hidden;
  min-height: 420px; padding: 36px 32px 190px; border-radius: 24px;
  background: linear-gradient(140deg, #1d2c7e 0%, #131f66 45%, #08124b 100%); color: #fff;
}
.fxb-bcard__kicker { color: var(--fxb-orange); font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-transform: uppercase; }
.fxb-bcard__title { color: #fff; font-size: clamp(26px, 3vw, 32px); font-weight: 600; line-height: 1.12; }
.fxb-bcard p { max-width: 24ch; font-size: 17px; font-weight: 400; line-height: 1.6; }
.fxb-bcard__img { position: absolute; right: 28px; bottom: 24px; width: auto; max-width: none; height: 160px; user-select: none; }
@media (max-width: 900px) {
  .fxb-bcards { grid-template-columns: 1fr; }
  .fxb-bcard { min-height: 0; padding-bottom: 150px; }
  .fxb-bcard__img { height: 120px; }
}

/* ----------------------------------------------------- tiles, steps, tariffs */

.fxb-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 767px) {
  .fxb-cols3 { grid-template-columns: 1fr; }
}

.fxb-tile { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--fxb-line); border-radius: var(--fxb-r); background: #fff; }

.fxb-steps { counter-reset: fxb-step; }
.fxb-steps .fxb-tile::before {
  counter-increment: fxb-step; content: counter(fxb-step);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--fxb-navy); color: #fff; font-weight: 500;
}

/* Text on the left, the tariff's card picture from the site on the right.
   The text column fills the tile's height and the link takes the slack
   above it, so "Prozkoumat tarif" sits on one line across the three tiles
   however long each description runs. */
.fxb-tariff { grid-template-columns: 1fr auto; gap: 12px; align-content: stretch; align-items: center; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.fxb-tariff__body { display: flex; flex-direction: column; gap: 8px; align-self: stretch; min-width: 0; }
.fxb-tariff__body .fxb-tariff__more { margin-top: auto; padding-top: 4px; }
.fxb-tariff__img { display: block; width: auto; max-width: 110px; max-height: 150px; object-fit: contain; }
.fxb-tariff:hover { border-color: var(--fxb-orange); transform: translateY(-2px); }
.fxb-tariff__value { color: var(--fxb-orange); font-size: 22px; font-weight: 600; line-height: 1.25; }
.fxb-tariff__note { color: var(--fxb-muted); font-size: 14px; }
.fxb-tariff__more { margin-top: 4px; color: var(--fxb-navy); font-weight: 400; text-decoration: underline; }

.fxb-ref { display: block; margin-top: 2px; border-radius: var(--fxb-r); overflow: hidden; }
.fxb-ref img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------- FAQ */

.fxb-faq { display: grid; gap: 10px; }
.fxb-faq__item { padding: 16px 20px; border: 1px solid var(--fxb-line); border-radius: 14px; background: #fff; }
.fxb-faq__q { color: var(--fxb-navy); font-size: 18px; font-weight: 500; cursor: pointer; }
.fxb-faq__item p { margin-top: 10px; }

/* ------------------------------------------------- contact card + the forms */

.fxb-ccard {
  position: relative; display: grid; gap: 18px; overflow: hidden;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 64px);
  padding-right: calc(clamp(200px, 28%, 300px) + 32px);
  border: 1.5px solid var(--fxb-orange); border-radius: 24px; background: #fff;
}
.fxb-ccard > *:not(.fxb-ccard__lock) { position: relative; z-index: 1; }
.fxb-ccard .fxb-h2 { font-size: clamp(28px, 3.6vw, 44px); }
.fxb-ccard__lead { color: var(--fxb-ink); font-size: clamp(18px, 2vw, 22px); font-weight: 500; line-height: 1.4; }
.fxb-ccard__lock { position: absolute; right: 0; bottom: 0; width: clamp(200px, 28%, 300px); height: auto; pointer-events: none; user-select: none; }
.fxb-ccard__alt { color: var(--fxb-muted); font-size: 15px; }
.fxb-ccard__alt a { font-weight: 500; }

.fxb-form { display: grid; gap: 10px; margin: 0; }
.fxb-form__error { color: var(--fxb-err); font-size: 14px; }
.fxb-form__error:empty { display: none; }

.fxb-legal { max-width: 720px; color: #666c89; font-size: 12.5px; font-weight: 300; line-height: 1.45; }
.fxb-legal a { color: inherit; text-decoration: underline; }

.fxb-done { display: grid; gap: 6px; padding: 10px 0; }
.fxb-done b { color: var(--fxb-navy); font-size: 20px; font-weight: 500; }

/* Field and button in one outline. */
.fxb-pill { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; max-width: 620px; padding: 8px 8px 8px 22px; border: 1.5px solid var(--fxb-orange); border-radius: 999px; background: #fff; }
.fxb-pill:focus-within { box-shadow: 0 0 0 3px rgba(255, 96, 26, .25); }
.fxb-pill__cc { display: flex; align-items: center; gap: 8px; color: var(--fxb-ink); font-size: 20px; font-weight: 400; }
.fxb-pill__cc svg { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.fxb-pill__input { min-width: 0; width: 100%; padding: 10px 4px; border: 0; background: transparent; color: var(--fxb-ink); font: inherit; font-size: 20px; font-weight: 400; }
.fxb-pill__input::placeholder { color: #8a92b8; }
.fxb-pill__input:focus { outline: none; }
.fxb-pill .fxb-btn { padding: 14px 30px; font-size: 17px; }

@media (max-width: 767px) {
  .fxb-ccard { padding-top: 30px; padding-right: clamp(20px, 5vw, 64px); }
  .fxb-ccard__lock { display: none; }
  .fxb-pill { grid-template-columns: auto 1fr; padding: 8px 8px 8px 16px; border-radius: 22px; }
  .fxb-pill .fxb-btn { grid-column: 1 / -1; width: 100%; }
}

/* The callback panel's field: prefix and number in one rounded box. */
.fxb-phone { display: grid; grid-template-columns: auto 1fr; overflow: hidden; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--fxb-line); }
.fxb-phone:focus-within { box-shadow: 0 0 0 3px var(--fxb-orange); }
.fxb-phone__cc { padding: 13px 14px; border-right: 1px solid var(--fxb-line); color: var(--fxb-ink); font-weight: 400; }
.fxb-phone__input { min-width: 0; width: 100%; padding: 13px 14px; border: 0; background: transparent; color: var(--fxb-ink); font: inherit; font-size: 17px; font-weight: 400; }
.fxb-phone__input:focus { outline: none; }

/* --------------------------------------------------------- sticky bar (mobile)
   Lives outside <main>, carries `.fxb` itself. Mobile only; fixovka-b.js
   adds `is-shown` once hero, calculator and the form are all off screen. */

.fxb-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: none; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--fxb-line); background: #fff;
  box-shadow: 0 -8px 24px -12px rgba(5, 17, 72, .25);
  transform: translateY(110%); transition: transform .25s;
}
.fxb-sticky.is-shown { transform: none; }
.fxb-sticky .fxb-btn { flex: 1; padding: 12px 10px; font-size: 15px; }
@media (max-width: 767px) {
  .fxb-sticky { display: flex; }
  /* Set on <body> by fixovka-b.js: the bar must not cover the footer's end. */
  .fxb-has-sticky { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------- callback: the button */

.fxb-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1045;
  display: flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: transparent; font-size: 15px; cursor: pointer;
}
.fxb-fab__label {
  padding: 8px 14px; border: 1.5px solid var(--fxb-navy); border-radius: 999px;
  background: #fff; color: var(--fxb-navy); font-weight: 500; line-height: 1.5;
  box-shadow: 0 8px 20px -10px rgba(5, 17, 72, .4);
  transition: opacity .3s, transform .3s;
}
.fxb-fab__dot { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fxb-orange); box-shadow: 0 10px 24px -8px rgba(255, 96, 26, .7); }
.fxb-fab.is-collapsed .fxb-fab__label { opacity: 0; transform: translateX(8px); pointer-events: none; }

/* -------------------------------------------------------- callback: the panel
   One element, three shapes — fixovka-b.js sets the modifier:
     --sheet   mobile, opened by a tap: bottom sheet, at most 60% of the height
     --toast   mobile, opened automatically: small card above the sticky bar
     --corner  desktop, both ways: 340px card in the corner, no scrim       */

.fxb-cb {
  position: fixed; z-index: 1060;
  display: grid; gap: 12px; padding: 20px;
  background: #fff; color: var(--fxb-ink);
  box-shadow: 0 20px 60px -20px rgba(5, 17, 72, .45);
}
.fxb-cb__title { padding-right: 36px; color: var(--fxb-navy); font-size: 22px; font-weight: 500; line-height: 1.15; }
.fxb-cb__sub { color: var(--fxb-muted); font-size: 15px; }
.fxb-cb__close { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fxb-navy); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.fxb-cb__close:hover { background: var(--fxb-peach); }
.fxb-cb .fxb-legal { color: var(--fxb-muted); }
.fxb-cb .fxb-legal a { color: var(--fxb-navy); }

/* The white under the sheet on iOS — see placeFiller() in fixovka-b.js.
   Part of the page, not fixed: that is the point of it. */
.fxb-cb-fill { position: absolute; left: 0; right: 0; z-index: 1059; background: #fff; pointer-events: none; }
/* On a phone the panel needs more to stand off the page than the corner
   card does on a desktop, where the one soft shadow above is enough: a
   hairline, a tight shadow for the edge and a wide one for the lift. The
   sheet rises from the bottom edge, so its shadow falls upward — downward
   it was off the screen. */
.fxb-cb--sheet { box-shadow: 0 0 0 1px rgba(5, 17, 72, .08), 0 -6px 18px rgba(5, 17, 72, .14), 0 -24px 70px rgba(5, 17, 72, .36); }
.fxb-cb--toast { box-shadow: 0 0 0 1px rgba(5, 17, 72, .08), 0 6px 18px rgba(5, 17, 72, .16), 0 28px 70px -8px rgba(5, 17, 72, .42); }
.fxb-cb--sheet { left: 0; right: 0; bottom: 0; max-height: 60vh; max-height: 60dvh; overflow: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; }
.fxb-cb--corner { right: 16px; bottom: 88px; width: 340px; max-width: calc(100vw - 32px); border-radius: 20px; }
.fxb-cb--toast { left: 12px; right: 12px; bottom: calc(var(--fxb-sticky-h) + 10px + env(safe-area-inset-bottom, 0px)); padding: 16px; border-radius: 18px; }
.fxb-cb--toast .fxb-cb__title { font-size: 18px; }
.fxb-cb--toast .fxb-cb__sub { display: none; }

/* Country selector in the two AdsCall layouts. Keep +420 as the no-JS fallback. */
.fxb-form--international .fxb-phone__cc,
.fxb-form--international .fxb-pill__cc { display: none; }
.fxb-form--international .fxb-phone { display: block; overflow: visible; }
.fxb-form--international .fxb-pill { grid-template-columns: minmax(0, 1fr) auto; }
.fxb-form--international .iti { width: 100%; min-width: 0; }
.fxb-form--international .iti input { width: 100%; }
.iti--container { z-index: 100000; }
@media (max-width: 767px) {
  .fxb-form--international .fxb-pill { grid-template-columns: minmax(0, 1fr); }
}