/* Responsive hardening: theme pages, order forms and all result states. */
html { overflow-x: hidden; }
body { min-width: 0; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* The progress script calculates dash offsets after load; keep the SVG itself
   visible even when a cache/minifier delays its one-millisecond reveal. */
.order-completed-page .order-completed-circle-svg,
.completed-order-page .order-completed-circle-svg { opacity: 1 !important; }
/* The legacy theme paints perc-85.svg on .block-2-cen-pay.  Result templates
   now render a real SVG chart, so keeping that image creates a second ring. */
.order-completed-page .order-completed-circle-wrap,
.completed-order-page .order-completed-circle-wrap {
  background-image: none !important;
  background: none !important;
}
img, svg, video, iframe { max-width: 100%; }
.top { width: 100vw; max-width: 100%; }

/* Desktop navigation is part of the blue header.  The legacy transition can
   promote this transparent element to an opaque compositor layer (visible as
   a long white/grey rectangle in full-page captures and some browsers). */
@media (min-width: 1200px) {
  .top .col-mnu,
  .top .top-mnu,
  .top .menu-verxnee-menyu-container {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .top .top-mnu {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}
.wrapper, .contain, main, article, section { min-width: 0; }
.entry-content, .inner-txt, .warn-txt-2, .block-2-txt-2,
.file-name, .block-downl-txt-1, .proc-td, .pay-systs-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.entry-content table { max-width: 100%; }

/* The off-canvas menu must never enlarge the document while it is closed. */
@media (max-width: 767px) {
  /* The legacy theme slides the menu with transform.  Keep the closed panel
     off canvas, but explicitly restore the transform when common.js adds
     .show-mnu.  The old visibility rule also matched .show-mnu and made the
     hamburger appear to do nothing. */
  .top-mnu:not(.show-mnu) {
    visibility: hidden;
    transform: translate3d(100%, 0, 0) !important;
  }
  .top-mnu.show-mnu {
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
  }
  .top-mnu { transition: transform .28s ease, visibility 0s linear !important; }
  .hidden-mnu, .toggle-mnu { position: relative; z-index: 40; }
}

/* Result card: use real layout tracks instead of absolute positioning. */
@media (min-width: 900px) {
  .order-completed-page .block-2-pay,
  .completed-order-page .block-2-pay {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-areas:
      "heading chart"
      "details chart"
      "downloads primary";
    column-gap: 44px;
    row-gap: 28px;
    align-items: start;
    padding: 45px 60px;
  }
  .order-completed-page .block-2-pay > .block-2-top,
  .completed-order-page .block-2-pay > .block-2-top {
    grid-area: heading;
    padding-right: 0;
  }
  .order-completed-page .block-2-pay > .block-2-cen,
  .order-completed-page .block-2-pay > .block-2-cen-done-w,
  .completed-order-page .block-2-pay > .block-2-cen,
  .completed-order-page .block-2-pay > .block-2-cen-done-w {
    grid-area: chart;
    position: static;
    align-self: center;
    justify-self: center;
    margin: 0;
  }
  .order-completed-page .block-2-pay > .block-2-bot,
  .completed-order-page .block-2-pay > .block-2-bot {
    grid-area: details;
    margin: 0;
    min-width: 0;
  }
  .order-completed-page .block-2-pay > .pay-butts-1,
  .completed-order-page .block-2-pay > .pay-butts-1 {
    grid-area: primary;
    position: static;
    align-self: end;
    justify-self: stretch;
    width: 100%;
  }
  .order-completed-page .block-2-pay > .pay-butts-2,
  .completed-order-page .block-2-pay > .pay-butts-2 {
    grid-area: downloads;
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0;
  }
  .order-completed-page .block-2-pay > .pay-butts-2 .button,
  .completed-order-page .block-2-pay > .pay-butts-2 .button { margin: 0; }
  .order-completed-page .block-2-pay .pay-butts-1 .butt,
  .completed-order-page .block-2-pay .pay-butts-1 .butt { width: 100%; }
  .completed-order-page .block-2-pay-w .block-2 { padding-bottom: 45px; }
}

/* Tablets and phones: predictable single column, no collisions. */
@media (max-width: 899px) {
  .contain { width: calc(100% - 28px); max-width: 100%; }
  .contain-570-w-100 { width: 100%; }
  .blue-wrap-pay h1, .blue-wrap-done h1 { font-size: clamp(24px, 8vw, 34px); line-height: 1.2; }
  .block-2, .r-block, .warn, .processed-w { max-width: 100%; }
  .block-2-pay { padding: 22px 20px 24px; }
  .order-completed-page .block-2-pay,
  .completed-order-page .block-2-pay {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .block-2-pay > .block-2-top { width: 100%; min-width: 0; align-items: flex-start; }
  .block-2-pay > .block-2-top .block-2-l { flex: 0 0 44px; }
  .block-2-pay > .block-2-top .block-2-l img { width: 44px; height: auto; }
  .block-2-pay > .block-2-top .block-2-r { min-width: 0; margin-left: 14px; }
  .block-2-pay .block-2-txt-1 { line-height: 1.4; }
  .block-2-pay .block-2-txt-2 { line-height: 1.35; }
  .order-completed-page .order-completed-circle-wrap,
  .completed-order-page .order-completed-circle-wrap {
    position: static;
    justify-content: center;
    width: 150px !important;
    min-width: 150px;
    height: 150px;
    margin: 24px auto 18px;
  }
  .order-completed-page .order-completed-circle,
  .completed-order-page .order-completed-circle { width: 150px; height: 150px; }
  .order-completed-page .order-completed-circle-svg,
  .completed-order-page .order-completed-circle-svg {
    display: block;
    width: 150px;
    height: 150px;
    max-width: 100%;
    transform: none;
    transform-origin: center;
    overflow: visible;
  }
  .order-completed-page .order-completed-circle-number,
  .completed-order-page .order-completed-circle-number {
    z-index: 2;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: 108px !important;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 3px 6px;
    transform: translate(-50%, -50%);
    background: transparent;
    font-size: clamp(28px, 9vw, 34px);
    line-height: 1.1;
    text-align: center;
  }
  .order-completed-page .order-completed-circle-svg,
  .completed-order-page .order-completed-circle-svg {
    position: relative;
    z-index: 1;
    opacity: 1 !important;
  }
  .block-2-cen-done-w {
    position: static;
    width: 100%;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 24px 0 0;
  }
  .block-2-cen-done-w .order-completed-circle-wrap { flex: 0 0 150px !important; }
  .block-2-cen-done-w .order-completed-tarrif-image { flex: 1 1 90px; min-width: 0; }
  .block-2-cen-done-w .order-completed-tarrif-image img { display: block; max-width: 100%; height: auto; margin: auto; }
  .block-2-bot-pay { width: 100%; margin-top: 22px; }
  .block-2-bot-pay .proc-table, .pay-butts-1 .proc-table { width: 100%; min-width: 0; }
  .proc-tr { min-width: 0; }
  /* Result characteristics: reserve a stable icon column and keep long
     labels/values in their own tracks. This prevents the blue check icon and
     dotted leader from covering text at 320–390px. */
  .block-2-pay .proc-tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 10px;
    width: 100%;
    min-height: 24px;
    margin-bottom: 8px;
    padding-left: 27px;
    background-position: left 3px top 3px;
  }
  .block-2-pay .proc-tr:after { display: none; }
  .block-2-pay .proc-tr .processed-txt-1,
  .block-2-pay .proc-tr .processed-txt-2 {
    width: auto !important;
    max-width: none;
    min-width: 0;
    padding-left: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .block-2-pay .proc-tr .processed-txt-1 { background-image: none !important; }
  .block-2-pay .proc-tr .processed-txt-2 { text-align: right; white-space: normal; }
  .proc-tr .proc-td { min-width: 0; }
  .proc-tr .processed-txt-1 { flex: 1 1 auto; }
  .proc-tr .processed-txt-2 { flex: 0 1 auto; width: auto !important; max-width: 45%; text-align: right; }
  .pay-butts-1, .pay-butts-2, .pay-butts-3 {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin: 20px 0 0;
  }
  .order-completed-page .block-2-pay > .pay-butts-1,
  .completed-order-page .block-2-pay > .pay-butts-1 {
    position: static !important;
    inset: auto !important;
  }
  .order-completed-page .pay-butts-1 .proc-table {
    width: 100%;
    margin: 0;
  }
  .order-completed-page .pay-butts-1 .proc-tr {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  .pay-butts-1 .butt, .pay-butts-2 .button, .pay-butts-3 .button,
  .pay-butts-3 .share-block, .pay-butts-3 .link-block,
  .pay-butts-3 .share-block-button, .pay-butts-3 .link-block .button {
    width: 100%; max-width: 100%; margin: 0;
  }
  .create-order-page .ent-l, .create-order-page .ent-r,
  .create-order-page .create-order-column-left,
  .create-order-page .create-order-column-right { min-width: 0; max-width: 100%; }
  .create-order-page .r-block-2.fixed,
  .create-order-page .r-block-2.absolute { position: static; width: 100% !important; }
  .selected-order-file-wrap, .file-info, .file-block { min-width: 0; max-width: 100%; }
  .whait-payment-order-page .block-item-r,
  .check-page-run .block-item-r { width: 100%; min-width: 0; }
  .whait-payment-order-page .block-2-ch,
  .check-page-run .block-2-ch {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 18px;
    border: 1px solid #062e61 !important;
  }
  .whait-payment-order-page .block-2-ch .block-2-top,
  .check-page-run .block-2-ch .block-2-top { width: 100%; }
  .whait-payment-order-page .block-2-ch .block-2-r,
  .check-page-run .block-2-ch .block-2-r { flex: 1 1 auto; width: auto; min-width: 0; }
  .tabs-select, .tabs-control, .tabs_content, .tabs_content_item { max-width: 100%; }
  .warn { overflow: hidden; }
  .warn-l { float: none; margin: 0 auto 15px; }
  .warn-txt-1 { margin-top: 0; text-align: center; }
  .warn-txt-2 { clear: both; }
}

@media (max-width: 570px) {
  /* The fixed header is 5px taller than the legacy reserved space. */
  .blue-wrap.blue-wrap-pay,
  .blue-wrap.blue-wrap-done { margin-top: 20px; }
  /* Raise-order templates reserve only 58px for the 103px fixed header. */
  .blue-wrap.raise-page { margin-top: 35px; }
}

@media (max-width: 360px) {
  .block-2-pay { padding-left: 14px; padding-right: 14px; }
  .block-2-cen-done-w { flex-direction: column; }
  .block-2-cen-done-w .order-completed-tarrif-image { flex-basis: auto; width: 100%; }
  .proc-tr .processed-txt-1 { padding-left: 27px; }
  .site-footer__legal a, .site-footer__contact a { overflow-wrap: anywhere; }
}

/* Keep payment/result controls in one predictable order.  On desktop the
   buttons sit in a single row where space allows; on phones they become a
   full-width vertical stack with no negative/absolute offsets. */
@media (min-width: 900px) {
  .order-completed-page .pay-butts-2,
  .completed-order-page .pay-butts-2,
  .order-completed-page .pay-butts-3,
  .completed-order-page .pay-butts-3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .order-completed-page .pay-butts-2 > *,
  .completed-order-page .pay-butts-2 > *,
  .order-completed-page .pay-butts-3 > *,
  .completed-order-page .pay-butts-3 > * { margin: 0 !important; }
}
@media (max-width: 899px) {
  .order-completed-page .pay-butts-2,
  .completed-order-page .pay-butts-2,
  .order-completed-page .pay-butts-3,
  .completed-order-page .pay-butts-3 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .order-completed-page .pay-butts-2 > *,
  .completed-order-page .pay-butts-2 > *,
  .order-completed-page .pay-butts-3 > *,
  .completed-order-page .pay-butts-3 > * {
    width: 100% !important;
    max-width: 100%;
    margin: 0 !important;
  }
}

/* Compact cookie bar that does not cover an entire mobile result card. */
.lwpcngNoticeBar { max-width: 100vw; }
@media (max-width: 570px) {
  .lwpcngNoticeBar { padding: 8px 10px !important; }
  .lwpcngNoticeBar .lwpcngNotice_message { font-size: 11px !important; line-height: 1.25 !important; }
  .lwpcngNoticeBar .lwpcngNotice_buttons { margin-top: 5px !important; }
  .lwpcngNoticeBar .lwpcngNotice_accept { margin: 4px 6px !important; padding: 6px 10px !important; font-size: 11px !important; }
}