/* v98+: stable first-paint geometry for controls rendered by the server. */
/* Inter is part of the accepted mobile design. Register the same variable
   Google Fonts subsets in the critical stylesheet so the deferred legacy
   style.css cannot introduce the face after first paint. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Keep the complete server-rendered GEO/SEO article in the document while
   skipping its expensive off-screen layout on the first mobile frame. The
   intrinsic size mirrors the measured comparison article and is remembered
   after the browser has materialized it, preventing a late scroll jump. */
@supports (content-visibility: auto) {
  @media (max-width: 720px) {
    :is(.page-proba, .page-results) #seo-content-slot > .compare-article {
      content-visibility: auto;
      contain-intrinsic-size: auto 5400px;
    }
  }
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Keep the accepted product stack by default. Desktop/tablet typography is
   isolated below; mobile must not be globally flattened to a platform face. */
body.page-proba {
  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-family: var(--font-family) !important;
}
.promotion-mode-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  margin: 8px 0 10px;
  padding: 9px 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}
.promotion-mode-heading { display: flex; gap: 7px; align-items: center; min-width: 0; }
.promotion-mode-heading > strong { font-size: 0.84rem; line-height: 1.25; color: var(--color-text, #172033); }
.promotion-mode-help { position: relative; flex: 0 0 auto; }
.promotion-mode-help-trigger {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #cfd7e3;
  border-radius: 50%;
  color: #526071;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.promotion-mode-help-trigger::before { content: ""; position: absolute; inset: -8px; }
.promotion-mode-help-dialog {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  width: min(360px, calc(100vw - 32px));
  max-width: none;
  max-height: min(70dvh, 440px);
  margin: 0;
  padding: 0;
  border: 1px solid #dbe2ec;
  border-radius: 18px;
  color: var(--color-text-muted, #667085);
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
  overflow: auto;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 12px), 0) scale(0.97);
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}
.promotion-mode-help-dialog::backdrop { background: rgba(15, 23, 42, 0.32); }
.promotion-mode-help-dialog[open][data-visible="1"] {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.promotion-mode-help-card { padding: 18px; font-size: 0.82rem; line-height: 1.5; }
.promotion-mode-help-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 9px; color: var(--color-text, #172033); font-size: 0.94rem; line-height: 1.3; }
.promotion-mode-help-close { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: 50%; color: #526071; background: #eef2f6; font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.promotion-mode-help-card p { margin: 0; }
.promotion-mode-note { margin-top: 7px; font-size: 0.72rem; color: var(--color-text-muted, #667085); }
.promotion-mode-buttons {
  display: inline-flex;
  padding: 3px;
  border-radius: 12px;
  background: #eef2f6;
}
.promotion-mode-buttons button {
  min-height: 32px;
  padding: 5px 11px;
  border: 0;
  border-radius: 9px;
  color: #526071;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
}
.promotion-mode-buttons button.active {
  color: #172033;
  background: #ffd84d;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
}

@media (max-width: 640px) {
  body.page-results .promotion-mode-control {
    width: min(100%, calc(100vw - 32px));
    max-width: 596px;
    margin: 8px auto 10px;
    grid-template-columns: 1fr;
    padding: 9px 10px;
    min-height: 0;
  }
  .promotion-mode-buttons { width: 100%; }
  .promotion-mode-buttons button { flex: 1; }
}
@media (max-width: 380px) {
  body.page-results .promotion-mode-control { width: min(100%, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .promotion-mode-help-dialog,
  .promotion-mode-help-dialog[open][data-visible="1"] { transition: none !important; transform: translate3d(-50%, -50%, 0) !important; }
}

/* The recipient-bank filter is server-rendered. These critical rules reserve
   its final footprint before the deferred shell stylesheet arrives. */
body.page-proba .proba-bank-scope-rail {
  width: min(100%, 720px);
  margin: 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
body.page-proba .proba-bank-scope-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(202, 213, 230, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #10245f;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
body.page-proba .proba-bank-scope-link.is-active {
  border-color: rgba(49, 91, 220, 0.36);
  background: #eef6ff;
  color: #1d4ed8;
}
/* Bank logos have large source dimensions. Fix their intrinsic footprint at
   every breakpoint so a freshly inserted hydrated chip cannot stretch the
   rail before the non-critical shell is available. */
body.page-proba .proba-bank-scope-link img {
  display: block !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}
body.page-proba .proba-bank-scope-rail.is-placeholder {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* A disabled SmartPay calculation has no recipient-bank scope. Collapse the
   server-reserved rail immediately, before hydration, instead of leaving an
   invisible 75px placeholder between the receiving methods and tariffs. */
body.page-proba:has(#smartPayEnabled:not(:checked)) .proba-bank-scope-rail {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin-block: 0 !important;
  overflow: hidden !important;
}

/* Stable mobile receiving rail and result-card geometry. */
@media (max-width: 720px) {
  body.page-proba {
    --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-family: var(--font-family) !important;
  }
  /* Critical and hydrated CSS both load this file. Size every SSR bank image
     at the wrapper level so the 512px Monobank asset can never use the full
     81px trigger as its intrinsic first-paint box. */
  body.page-proba #smartPayRow .proba-smartpay-bank-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }
  body.page-proba #smartPayRow .proba-smartpay-bank-icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  body.page-proba #smartPayRow .smartpay-bank-trigger {
    display: grid !important;
    grid-template-columns: minmax(0, 39px) 34px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 81px !important;
    min-width: 81px !important;
    max-width: 81px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 0 0 0 !important;
    border: 1px solid rgba(214, 224, 239, .92) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.98) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body.page-proba #smartPayRow .proba-smartpay-bank-display {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 39px !important;
    min-width: 0 !important;
    height: 36px !important;
    overflow: hidden !important;
  }
  body.page-proba #smartPayRow .proba-smartpay-menu-button {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    border: 1px solid rgba(202, 213, 230, .95) !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  body.page-proba #smartPayRow:has(#smartPayEnabled:not(:checked)),
  body.page-proba #smartPayRow:has(#smartPayEnabled:not(:checked)) > .proba-smartpay-pill {
    width: 318px !important;
    min-width: 318px !important;
    max-width: min(318px, calc(100vw - 32px)) !important;
  }
  body.page-proba #smartPayRow:has(#smartPayEnabled:not(:checked)) .smartpay-bank-wrap {
    flex: 0 0 180px !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }
  body.page-proba #smartPayRow:has(#smartPayEnabled:not(:checked)) .smartpay-bank-trigger {
    grid-template-columns: minmax(0, 138px) 34px !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }
  body.page-proba #smartPayRow:has(#smartPayEnabled:not(:checked)) .proba-smartpay-bank-display {
    justify-content: flex-start !important;
    width: 138px !important;
    padding-inline-start: 10px !important;
    box-sizing: border-box !important;
  }
  body.page-proba #smartPayRow:has(#smartPayEnabled:not(:checked)) .proba-smartpay-bank-text {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  /* The editorial block is below the comparison, but its SSR images are in
     the initial document. Give them stable boxes before the deferred article
     stylesheet arrives to prevent an unstyled 64px logo flash. */
  body.page-proba .compare-article__brand-mark {
    display: grid !important;
    place-items: center !important;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 11px;
  }
  body.page-proba .compare-article__brand-mark img {
    display: block;
    width: 88%;
    height: 88%;
    object-fit: contain;
  }
  body.page-proba .proba-hero {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 20px !important;
  }

  .promotion-mode-control {
    grid-template-columns: 1fr;
    padding: 9px 10px;
  }
  .promotion-mode-buttons { width: 100%; }
  .promotion-mode-buttons button { flex: 1; }
  .promotion-mode-note { grid-column: auto; }

  body.page-proba .proba-bank-scope-rail {
    width: min(calc(100vw - 28px), 362px) !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin-block: 16px !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.page-proba .proba-bank-scope-rail::-webkit-scrollbar { display: none; }
  body.page-proba .proba-bank-scope-link {
    flex: 0 0 auto !important;
    min-height: 34px;
    padding-inline: 12px;
  }

  body.page-proba #methods {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-padding-inline: 12px !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Keep the one-row swipe rail on genuinely narrow screens, but center the
     complete three-card group as soon as it fits inside the viewport. */
  @media (min-width: 452px) {
    body.page-proba #methods {
      justify-content: center !important;
      padding-inline: 0 !important;
      overflow-x: visible !important;
      overflow-y: visible !important;
    }
    body.page-proba #methods .method:not(.method-shell-card) {
      position: relative !important;
      left: 8px !important;
    }
  }

  body.page-proba #methods::-webkit-scrollbar {
    display: none !important;
  }

  body.page-proba #methods .method:not(.method-shell-card),
  body.page-proba #methods > button.method:not(.method-shell-card) {
    flex: 0 0 132px !important;
    inline-size: 132px !important;
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    padding-inline: 10px !important;
    scroll-snap-align: start !important;
  }

  /* A single available method is still the first-left result semantically,
     but it should not look accidentally glued to the phone edge. Multi-card
     rails keep their left origin so the first method is always visible. */
  body.page-proba #methods:has(> .method:not(.method-shell-card):only-child) {
    justify-content: center !important;
    padding-inline: 0 !important;
    overflow-x: visible !important;
  }
  body.page-proba #methods:has(> .method:not(.method-shell-card):only-child) > .method:not(.method-shell-card) {
    left: 0 !important;
    margin-inline: 0 !important;
  }

  body.page-proba #methods .method:not(.method-shell-card) .method-name {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.08 !important;
  }

  body.page-proba #methods .method:not(.method-shell-card) .method-value,
  body.page-proba #methods .method.active:not(.method-shell-card) .method-value {
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 12.5px !important;
  }

  /* The client amount fitter starts every ordinary phone price at 20px and
     only reduces genuinely long totals. Use that same baseline in SSR so a
     normal amount never grows from 18px after hydration. */
  body.page-proba[data-proba-card-layout="paytoua"] #results[data-card-layout="paytoua"] .card[data-service] .price {
    font-size: 20px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  body.page-proba[data-proba-card-layout="paytoua"] #results[data-card-layout="paytoua"] .card[data-service] .price.proba-price-long {
    font-size: 16px !important;
  }

  body.page-proba[data-proba-card-layout="paytoua"] #results[data-card-layout="paytoua"] .card[data-service] .price.proba-price-xlong {
    font-size: 13.5px !important;
  }

  @media (max-width: 350px) {
    body.page-proba[data-proba-card-layout="paytoua"] #results[data-card-layout="paytoua"] .card[data-service] .price {
      font-size: 17px !important;
    }
    body.page-proba[data-proba-card-layout="paytoua"] #results[data-card-layout="paytoua"] .card[data-service] .price.proba-price-long {
      font-size: 14px !important;
    }
    body.page-proba[data-proba-card-layout="paytoua"] #results[data-card-layout="paytoua"] .card[data-service] .price.proba-price-xlong {
      font-size: 11.35px !important;
    }
  }

  body.page-proba #smartPayRow,
  body.page-proba .proba-calc-shell[data-proba-calc-expanded="false"] > #smartPayRow,
  body.page-proba .proba-calc-shell[data-proba-calc-expanded="false"] > #smartPayRow:has(.proba-smartpay-pill[data-selected-bank-count="2"]),
  body.page-proba #smartPayRow:has(#smartPayBankTrigger[data-selected-bank-count="2"]) {
    width: 262px !important;
    min-width: 262px !important;
    max-width: min(262px, calc(100vw - 32px)) !important;
  }

  body.page-proba #smartPayRow > .proba-smartpay-pill,
  body.page-proba #smartPayRow .proba-smartpay-pill,
  body.page-proba #smartPayRow .proba-smartpay-pill[data-selected-bank-count="2"],
  body.page-proba #smartPayRow .proba-smartpay-pill:has(#smartPayBankTrigger[data-selected-bank-count="2"]) {
    width: 262px !important;
    min-width: 262px !important;
    max-width: min(262px, calc(100vw - 32px)) !important;
    margin-inline: 0 !important;
    gap: 8px !important;
    padding: 5px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* The bank icons and menu are three independent circles. Do not wrap them
     in another white capsule: that capsule caused the menu to cover bank 2. */
  body.page-proba[data-smartpay-available="true"] #smartPayRow .smartpay-toggle {
    flex: 0 0 124px !important;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
  }
  body.page-proba[data-smartpay-available="true"] #smartPayRow .smartpay-bank-wrap,
  body.page-proba[data-smartpay-available="true"] #smartPayRow .smartpay-bank-trigger {
    flex: 0 0 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    overflow: visible !important;
  }

  /* The template's critical block is later in source order. One extra stable
     body class keeps the final dimensions authoritative without JS timing. */
  body.page-proba.page-results[data-smartpay-available="true"] #smartPayRow {
    overflow: visible !important;
  }
  body.page-proba.page-results[data-smartpay-available="true"] #smartPayRow .smartpay-bank-wrap,
  body.page-proba.page-results[data-smartpay-available="true"] #smartPayRow .smartpay-bank-trigger {
    display: grid !important;
    flex: 0 0 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    overflow: visible !important;
  }
  body.page-proba[data-smartpay-available="true"] #smartPayRow .smartpay-bank-trigger {
    display: grid !important;
    grid-template-columns: 76px 34px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  body.page-proba[data-smartpay-available="true"] #smartPayRow .proba-smartpay-bank-display {
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 38px !important;
    overflow: visible !important;
  }
  body.page-proba[data-smartpay-available="true"] #smartPayRow .proba-smartpay-bank-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 4px !important;
    border-radius: 50% !important;
    background: #fff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body.page-proba[data-smartpay-available="true"] #smartPayRow .proba-smartpay-bank-icon img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }

  body.page-proba #smartPayRow:has(#smartPayEnabled:not(:checked)),
  body.page-proba .proba-calc-shell[data-proba-calc-expanded="false"] > #smartPayRow:has(#smartPayEnabled:not(:checked)),
  body.page-proba #smartPayRow:has(#smartPayEnabled:not(:checked)) > .proba-smartpay-pill {
    width: 318px !important;
    min-width: 318px !important;
    max-width: min(318px, calc(100vw - 32px)) !important;
  }
  body.page-proba[data-smartpay-available="true"] #smartPayRow:has(#smartPayEnabled:not(:checked)) .smartpay-bank-wrap,
  body.page-proba[data-smartpay-available="true"] #smartPayRow:has(#smartPayEnabled:not(:checked)) .smartpay-bank-trigger {
    flex-basis: 180px !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }
  body.page-proba[data-smartpay-available="true"] #smartPayRow:has(#smartPayEnabled:not(:checked)) .smartpay-bank-trigger {
    grid-template-columns: 138px 34px !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.page-proba[data-smartpay-available="true"] #smartPayRow:has(#smartPayEnabled:not(:checked)) .proba-smartpay-bank-display {
    justify-content: flex-start !important;
    width: 138px !important;
    min-width: 138px !important;
    max-width: 138px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(214, 224, 239, .92) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.98) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service],
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service].best {
    height: 224px !important;
    min-height: 224px !important;
    max-height: 224px !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service] .proba-result-meta-line {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    overflow: visible !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service].proba-has-expanded-promo,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service].proba-has-expanded-promo.best,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service]:has(.promotion-old-rate),
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service]:has(.fee-old),
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service]:has(.fee-note),
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service="Profee"][data-row-id*="RATE:PROMO"],
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service="Paysend"][data-row-id*="PROMO:FIRST_TRANSFER"] {
    height: 244px !important;
    min-height: 244px !important;
    max-height: 244px !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service].proba-has-expanded-promo .proba-result-meta-line,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service]:has(.promotion-old-rate) .proba-result-meta-line,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service]:has(.fee-old) .proba-result-meta-line,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service]:has(.fee-note) .proba-result-meta-line,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service="Profee"][data-row-id*="RATE:PROMO"] .proba-result-meta-line,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service="Paysend"][data-row-id*="PROMO:FIRST_TRANSFER"] .proba-result-meta-line {
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service] .proba-result-meta-item {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Keep every current and legacy rate subtree visibly light after the full
     shell stylesheet is hydrated. A 300 weight is intentional here: the
     surrounding metadata uses 500, and mobile numeric glyphs otherwise still
     read as bold even when their computed weight is 400. */
  body.page-proba #results .card[data-service] .proba-result-meta-item[title="Курс"],
  body.page-proba #results .card[data-service] .proba-result-meta-item[title="Курс"] strong,
  body.page-proba #results .card[data-service] .proba-result-meta-item[title="Курс"] strong *,
  body.page-proba #results .card[data-service] .proba-result-meta-item:has(.proba-rate-stack),
  body.page-proba #results .card[data-service] .proba-result-meta-item:has(.proba-rate-stack) strong,
  body.page-proba #results .card[data-service] .proba-result-meta-item:has(.proba-rate-stack) strong *,
  body.page-proba #results .card[data-service] .proba-rate-stack,
  body.page-proba #results .card[data-service] .proba-rate-stack *,
  body.page-proba #results .card[data-service] .proba-rate-line,
  body.page-proba #results .card[data-service] .proba-rate-line *,
  body.page-proba #results .card[data-service] .exchange-rate,
  body.page-proba #results .card[data-service] .exchange-rate * {
    font-weight: 300 !important;
  }
}

/* Language selection is a public navigation control, not a mobile-only
   feature. On tablet/desktop retain the flag trigger and hide only hamburger. */
@media (min-width: 721px) {
  body.page-proba {
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }
  body.page-proba #results-h1 {
    font-weight: 800 !important;
  }
  body.page-proba #results .card[data-service] .service,
  body.page-proba #results .card[data-service] .price {
    font-weight: 700 !important;
  }
  body.page-proba #results .card[data-service] .proba-result-meta-item strong,
  body.page-proba #results .card[data-service] .proba-result-meta-item strong * {
    font-weight: 500 !important;
  }
  body.page-proba #methods .method-name {
    font-weight: 600 !important;
  }
  body.page-proba #methods .method-value,
  body.page-proba #methods .method.active .method-value {
    font-weight: 700 !important;
  }
  body.page-proba .compare-article h2,
  body.page-proba .compare-article h3,
  body.page-proba .compare-article h4 {
    font-weight: 700 !important;
  }
  body.page-proba .proba-nav {
    position: relative;
    z-index: 40;
  }
  body.page-proba .proba-mobile-nav-actions {
    display: flex !important;
    flex: 0 0 38px;
    width: 38px;
    align-items: center;
    justify-content: center;
  }
  body.page-proba #probaMobileMenuButton {
    display: none !important;
  }
  body.page-proba .proba-mobile-locale-wrap {
    position: relative;
    display: block;
  }
  body.page-proba .proba-mobile-locale-trigger {
    display: inline-flex !important;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }
  body.page-proba .proba-mobile-locale-trigger img {
    display: block;
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(255,255,255,.9);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,28,84,.16);
  }
  body.page-proba .proba-mobile-locale-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 2147481000;
    width: 250px;
    max-height: min(68dvh, 470px);
    padding: 8px;
    gap: 1px;
    overflow-y: auto;
    border: 1px solid rgba(226,234,248,.95);
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 42px rgba(15,23,42,.22);
  }
  body.page-proba .proba-mobile-locale-menu:not([hidden]) {
    display: grid !important;
  }
  body.page-proba .proba-mobile-locale-option {
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) auto;
    min-height: 44px;
    padding: 0 10px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #172033;
    font: 600 13px/1.2 var(--font-family);
    text-align: left;
    cursor: pointer;
  }
  body.page-proba .proba-mobile-locale-option img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
  }
  body.page-proba .proba-mobile-locale-option small {
    color: #8993a5;
    font-size: 10px;
    font-weight: 700;
  }
  body.page-proba .proba-mobile-locale-option[aria-current="true"] {
    background: #eef5ff;
    color: #0b62ba;
  }
}

/* v245: the SmartPay selector is a centered, transactional dialog on every
   proba viewport. This final critical-layer rule explicitly replaces the old
   mobile bottom-aligned sheet while components.css is still loading. */
html body.page-proba > .smartpay-bank-backdrop[hidden],
html body.page-proba > .smartpay-bank-popup[hidden] {
  display: none !important;
}

html body.page-proba > .smartpay-bank-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482500 !important;
  background: rgba(15, 23, 42, 0.34) !important;
  opacity: 0;
  transition: opacity 160ms ease-in;
}

html body.page-proba > .smartpay-bank-backdrop[data-visible="1"] {
  opacity: 1;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

html body.page-proba > .smartpay-bank-popup {
  position: fixed !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 2147482501 !important;
  display: flex !important;
  width: min(420px, calc(100vw - 32px)) !important;
  max-width: min(420px, calc(100vw - 32px)) !important;
  height: auto !important;
  max-height: min(78dvh, 620px) !important;
  margin: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 0;
  transform: translate3d(-50%, calc(-50% + 12px), 0) scale(0.97) !important;
  transform-origin: 50% 50%;
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}

html body.page-proba > .smartpay-bank-popup[data-visible="1"] {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-header {
  flex: 0 0 auto !important;
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-title {
  min-width: 0;
  color: #172033;
  font-size: 0.94rem;
  line-height: 1.25;
  font-weight: 800;
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-footer {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(226, 232, 240, 0.86);
  background: rgba(248, 250, 252, 0.96);
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-footer[hidden] {
  display: none !important;
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-action {
  min-height: 44px;
  flex: 1 1 0;
  padding: 9px 14px;
  border: 1px solid #d7deea;
  border-radius: 12px;
  color: #263247;
  background: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-action--apply {
  border-color: #ffd84d;
  color: #172033;
  background: #ffd84d;
}

html body.page-proba > .smartpay-bank-popup .smartpay-bank-popup-action:disabled {
  cursor: default;
  opacity: 0.55;
}

html body.page-proba > .smartpay-bank-popup :is(button, input):focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.34);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body.page-proba > .smartpay-bank-backdrop,
  html body.page-proba > .smartpay-bank-popup,
  html body.page-proba > .smartpay-bank-popup[data-visible="1"] {
    transition: none !important;
  }
  html body.page-proba > .smartpay-bank-popup,
  html body.page-proba > .smartpay-bank-popup[data-visible="1"] {
    transform: translate3d(-50%, -50%, 0) !important;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  body.page-proba #smartPayRow .smartpay-bank-wrap {
    flex: 0 0 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }
}

@media (min-width: 431px) and (max-width: 720px) {
  body.page-proba .promotion-mode-control {
    grid-template-columns: 1fr !important;
    padding: 9px 10px !important;
    min-height: 0 !important;
  }
  body.page-proba .promotion-mode-buttons {
    width: 100% !important;
  }
  body.page-proba .promotion-mode-buttons button {
    flex: 1 1 0 !important;
  }
}
@media (max-width: 430px) {
  body.page-proba .promotion-mode-control {
    grid-template-columns: 1fr !important;
    padding: 9px 10px !important;
    min-height: 0 !important;
  }
  body.page-proba .promotion-mode-buttons {
    width: 100% !important;
  }
  body.page-proba .promotion-mode-buttons button {
    flex: 1 1 0 !important;
  }
}

/* v137: the server snapshot and the hydrated result use the same reserved
   geometry. The canonical renderer may replace the factual copy, but it must
   not move the result grid while doing so. */
@media (min-width: 721px) and (max-width: 1040px) {
  body.page-proba .proba-calc-shell[data-proba-calc-expanded="false"],
  body.page-proba .proba-calc-shell[data-proba-calc-expanded="false"] > #calcBar {
    height: 237px !important;
    min-height: 237px !important;
    max-height: 237px !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service],
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service].best {
    height: 277px !important;
    min-height: 277px !important;
    max-height: 277px !important;
  }
}

@media (min-width: 1041px) {
  body.page-proba .proba-calc-shell[data-proba-calc-expanded="false"],
  body.page-proba .proba-calc-shell[data-proba-calc-expanded="false"] > #calcBar {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service],
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service].best {
    height: 281px !important;
    min-height: 281px !important;
    max-height: 281px !important;
  }
}

/* Lighthouse v210 accessibility fixes: color/opacity only, no geometry. */
.page-proba .res-section-label {
  color: #667085;
}
.page-proba .promotion-mode-help-dialog,
.page-proba .promotion-mode-note {
  color: #667085;
}
.page-proba .proba-result-diff.is-best {
  color: #078658 !important;
}
.page-proba .proba-result-more-btn {
  color: #64748b !important;
  opacity: 1 !important;
}

/* v211: SmartPay availability is known in the server-rendered body dataset.
   When the destination has no SmartPay banks, release only the row that would
   have contained SmartPay instead of keeping the true-state fixed shell
   height. The <=720px collapsed calculator already has the correct 72px
   footprint and is intentionally left untouched. */
@media (min-width: 721px) and (max-width: 1040px) {
  body.page-proba[data-smartpay-available="true"] .proba-calc-shell[data-proba-calc-expanded="false"] {
    position: relative !important;
  }

  /* In the server snapshot SmartPay is a direct shell child. The polish
     layer later moves the same node into #calcBar. Reserve the hydrated
     position up front so this necessary DOM move has zero visual travel. */
  body.page-proba[data-smartpay-available="true"] .proba-calc-shell[data-proba-calc-expanded="false"] > #smartPayRow {
    position: absolute !important;
    right: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  body.page-proba[data-smartpay-available="false"] .proba-calc-shell[data-proba-calc-expanded="false"],
  body.page-proba[data-smartpay-available="false"] .proba-calc-shell[data-proba-calc-expanded="false"] > #calcBar {
    height: auto !important;
    min-height: 157px !important;
    max-height: none !important;
  }
}

@media (min-width: 1041px) {
  body.page-proba[data-smartpay-available="true"] .proba-calc-shell[data-proba-calc-expanded="false"] {
    position: relative !important;
  }

  body.page-proba[data-smartpay-available="true"] .proba-calc-shell[data-proba-calc-expanded="false"] > #smartPayRow {
    position: absolute !important;
    right: auto !important;
    bottom: 2px !important;
    left: 50% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  body.page-proba[data-smartpay-available="false"] .proba-calc-shell[data-proba-calc-expanded="false"],
  body.page-proba[data-smartpay-available="false"] .proba-calc-shell[data-proba-calc-expanded="false"] > #calcBar {
    height: auto !important;
    min-height: 80px !important;
    max-height: none !important;
  }

  /* The shell stylesheet deliberately aligns metadata with the logo by a
     negative margin. In the accepted desktop composition that makes rate,
     delivery, fee, CTA and timestamp start 56px left of the provider title.
     Keep the proven 281px promo-safe height and align the content column only. */
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service] .proba-result-meta-line,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service] .proba-result-actions,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service] .rate-timestamp,
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-service] .proba-result-updated {
    margin-left: 0 !important;
  }
}

/* app.js portals country panels to BODY through 900px, while the phone sheet
   rules stop at 720px. A direct-child selector affects only that portalled
   tablet state; ordinary desktop dropdowns remain anchored to their field. */
@media (min-width: 721px) {
  /* Server-ready universal cards keep their factual metadata/actions as direct
     card children. The legacy wide CSS expects those nodes inside the service
     column, so normal flow pushed them below the fixed card and over the next
     result. Anchor only this explicit SSR structure inside the proven card
     footprint; client-restructured and all mobile cards keep their own rules. */
  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-proba-layout-ready="1"] {
    position: relative !important;
    /* Keep the accepted top badge visible. Direct children are explicitly
       anchored below, so clipping is neither necessary nor desirable. */
    overflow: visible !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-proba-layout-ready="1"] > .row {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-proba-layout-ready="1"] > .proba-result-meta-line {
    position: absolute !important;
    top: 88px !important;
    right: 294px !important;
    left: 80px !important;
    z-index: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-proba-layout-ready="1"] > .proba-result-actions {
    position: absolute !important;
    right: auto !important;
    bottom: 18px !important;
    left: 80px !important;
    z-index: 3 !important;
    width: auto !important;
    margin: 0 !important;
  }

  body.page-proba[data-proba-card-layout] #results[data-card-layout="paytoua"] .card[data-proba-layout-ready="1"] > .proba-result-more-btn {
    position: absolute !important;
    right: 20px !important;
    bottom: 40px !important;
    left: auto !important;
    z-index: 3 !important;
    margin: 0 !important;
  }

  body.page-proba > .country-panel:not([hidden]) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: max(72px, calc(12px + env(safe-area-inset-top, 0px))) !important;
    bottom: auto !important;
    display: flex !important;
    width: min(520px, calc(100vw - 32px)) !important;
    max-width: min(520px, calc(100vw - 32px)) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 96px) !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
    pointer-events: auto !important;
    z-index: 2147482000 !important;
  }

  body.page-proba > .country-panel:not([hidden]) .country-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 206px) !important;
    overflow-y: auto !important;
  }
}