/* One continuous page surface for funding, gateway confirmation and checkout.
   Keep individual cards intact; only page-sized wrappers become transparent. */
body.sg-payment-flow .site-wrapper,
body.sg-payment-flow .site-wrapper > main.site-main,
body.sg-payment-flow .site-main > .container,
body.sg-payment-flow .site-main > .main-content,
body.sg-payment-flow .site-main :is(.ap-shell,.ap-wrap,.sg-fund-page,.sg-finance-page,.mbt-page,.checkout-section) {
    background: transparent !important;
    background-image: none !important;
}

body.sg-payment-flow {
    --payment-content-width: 1440px;
    --payment-gutter: clamp(16px, 2.5vw, 40px);
    --payment-space: clamp(24px, 3vw, 48px);
}

/* The outer layout owns width and spacing, not a second nested page panel. */
body.sg-payment-flow .user-full-page > .container,
body.sg-payment-flow .site-main > .main-content,
body.sg-payment-flow .checkout-section > .container {
    width: 100%;
    max-width: var(--payment-content-width) !important;
    margin-inline: auto;
    padding-inline: var(--payment-gutter) !important;
}

body.sg-payment-flow .user-full-page > .container,
body.sg-payment-flow .site-main > .main-content {
    padding-block: var(--payment-space) !important;
}

body.sg-payment-flow .site-main :is(.ap-shell,.sg-fund-page,.mbt-page,.sg-finance-page) {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.sg-payment-flow .ap-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* A nested <main> used to inherit the legacy documentation sidebar's 300px
   width reduction. The payment column is now an ordinary grid item. */
body.sg-payment-flow .ap-request-main {
    width: auto;
    min-width: 0;
    margin: 0;
    background: transparent;
}

body.sg-payment-flow :is(.ap-request-grid,.ap-grid) {
    grid-template-columns: minmax(0, 1.65fr) minmax(310px, .8fr);
    gap: 24px;
    align-items: start;
}

body.sg-payment-flow .checkout-section { padding-block: var(--payment-space); }

/* Keep one live timer near the action, rather than below a long mobile form. */
body.sg-payment-flow .ap-deadline-banner { margin: 0 0 20px; }
body.sg-payment-flow .ap-deadline-banner .ap-time-remaining {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 16px 20px !important;
    border-color: var(--ap-line) !important;
    background: transparent;
}
body.sg-payment-flow .ap-deadline-banner dt { font-size: 13px; font-weight: 700; color: var(--ap-muted); }
body.sg-payment-flow .ap-deadline-banner dt i { margin-inline-end: 7px; }
body.sg-payment-flow .ap-deadline-banner dd { margin: 0; text-align: right; }
body.sg-payment-flow .ap-deadline-banner #paymentCountdown { font-size: 26px; line-height: 1.2; letter-spacing: .035em; font-weight: 800; font-variant-numeric: tabular-nums; }
body.sg-payment-flow .ap-deadline-banner small { max-width: none; margin-top: 5px; font-size: 11px; }
body.sg-payment-flow .ap-money-currency { display: block; font-size: 11px; font-weight: 750; letter-spacing: .06em; color: var(--ap-muted); }
body.sg-payment-flow .ap-money-value { display: block; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.theme-lime_pearl.sg-payment-flow .ap-deadline-banner #paymentCountdown { color: #507400; }
body.theme-lime_pearl.sg-payment-flow .ap-time-remaining.is-urgent #paymentCountdown { color: #8a5600; }
body.theme-lime_pearl.sg-payment-flow .ap-time-remaining.is-expired #paymentCountdown { color: #b52a2a; }
body.sg-payment-flow :is(.ap-detail-list button,.ap-primary,.ap-secondary,.sg-confirm,.mbt-submit):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (max-width: 900px) {
    body.sg-payment-flow :is(.ap-request-grid,.ap-grid) { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    body.sg-payment-flow .ap-request-grid > aside { grid-row: auto; }
}

@media (max-width: 540px) {
    body.sg-payment-flow { --payment-gutter: 12px; --payment-space: 24px; }
    body.sg-payment-flow .ap-heading { display: grid; gap: 14px; margin-bottom: 22px; }
    body.sg-payment-flow .ap-heading h1 { font-size: 30px; line-height: 1.15; margin-block: 8px; }
    body.sg-payment-flow .ap-heading p { font-size: 13px; line-height: 1.7; }
    body.sg-payment-flow .ap-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 11px 14px; font-size: 12px; }
    body.sg-payment-flow .ap-request-head { display: flex; flex-wrap: wrap; gap: 14px; padding: 18px 16px; margin-bottom: 14px; border-radius: 16px; }
    body.sg-payment-flow .ap-request-head > div:first-child { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
    body.sg-payment-flow .ap-request-head > div:first-child > span { font-size: 10px; letter-spacing: .1em; }
    body.sg-payment-flow .ap-request-head time { font-size: 11px; }
    body.sg-payment-flow .ap-progress { order: 3; width: 100%; padding-top: 17px; gap: 4px; font-size: 9px; line-height: 1.5; letter-spacing: 0; }
    body.sg-payment-flow .ap-deadline-banner { margin-bottom: 18px; }
    body.sg-payment-flow .ap-deadline-banner .ap-time-remaining { align-items: start; padding: 16px !important; gap: 14px; border-radius: 14px; }
    body.sg-payment-flow .ap-deadline-banner dt { font-size: 12px; padding-top: 5px; line-height: 1.5; }
    body.sg-payment-flow .ap-deadline-banner dd { min-width: 0; }
    body.sg-payment-flow .ap-deadline-banner #paymentCountdown { display: block; font-size: clamp(25px,7vw,30px); white-space: nowrap; }
    body.sg-payment-flow .ap-deadline-banner small { max-width: 180px; font-size: 11px; line-height: 1.6; }
    body.sg-payment-flow :is(.ap-card,.ap-side-card) { padding: 20px 16px; border-radius: 16px; }
    body.sg-payment-flow .ap-provider-top { gap: 12px; }
    body.sg-payment-flow .ap-provider-top h2 { font-size: 21px; line-height: 1.35; }
    body.sg-payment-flow .ap-provider-totals { gap: 10px; margin-top: 18px; padding-top: 18px; grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.sg-payment-flow .ap-provider-totals > div { padding: 12px; border: 1px solid var(--ap-line); border-radius: 12px; }
    body.sg-payment-flow .ap-provider-totals > div + div { padding-left: 12px; }
    body.sg-payment-flow .ap-provider-totals small { font-size: 9px; letter-spacing: .06em; line-height: 1.5; }
    body.sg-payment-flow .ap-provider-totals strong { margin-top: 9px; }
    body.sg-payment-flow .ap-money-value,body.sg-payment-flow .ap-provider-totals .ap-crypto-value { font-size: clamp(15px,4.5vw,20px); letter-spacing: -.035em; }
    body.sg-payment-flow .ap-money-currency { font-size: 11px; margin-bottom: 3px; }
    body.sg-payment-flow .ap-card-title { gap: 11px; margin-bottom: 20px; }
    body.sg-payment-flow .ap-card-title h2 { font-size: 19px; line-height: 1.4; }
    body.sg-payment-flow .ap-card-title p { font-size: 13px; line-height: 1.7; }
    body.sg-payment-flow .ap-detail-list { gap: 12px; margin-bottom: 20px; }
    body.sg-payment-flow .ap-detail-list > div { padding: 15px 68px 15px 14px; border-radius: 12px; }
    body.sg-payment-flow .ap-detail-list span { font-size: 11px; line-height: 1.6; margin-bottom: 7px; }
    body.sg-payment-flow .ap-detail-list strong { font-size: 16px; line-height: 1.6; word-break: normal; overflow-wrap: anywhere; }
    body.sg-payment-flow .ap-detail-list button { width: 44px; height: 44px; right: 12px; border: 1px solid var(--ap-line); }
    body.sg-payment-flow .ap-details form label { font-size: 13px !important; line-height: 1.6; }
    body.sg-payment-flow .ap-details form label small { display: block; font-size: 11px; line-height: 1.7; margin-top: 8px; color: var(--ap-muted); }
    body.sg-payment-flow :is(.ap-shell,.sg-fund-page,.mbt-page,.checkout-section) :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size: 16px !important; min-height: 52px; border-radius: 12px; }
    body.sg-payment-flow .ap-shell .form-control { margin-top: 8px; padding: 12px 14px; }
    body.sg-payment-flow :is(.ap-primary,.ap-secondary,.sg-confirm,.mbt-submit,.checkout-section .cmn-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 14px 16px; font-size: 13px; line-height: 1.5; text-align: center; }
    body.sg-payment-flow .ap-primary.ap-full,body.sg-payment-flow .ap-secondary.ap-full { display: flex; width: 100%; }
    body.sg-payment-flow .ap-cancel { margin-top: 18px; }
    body.sg-payment-flow .ap-cancel button { min-height: 48px; padding: 13px 16px; font-size: 13px; }
    body.sg-payment-flow .ap-actions { gap: 12px; margin-top: 22px; }
    body.sg-payment-flow .ap-actions > * { width: 100%; }
    body.sg-payment-flow .ap-summary > div { gap: 12px; font-size: 13px; line-height: 1.7; }
    body.sg-payment-flow .ap-summary dd { min-width: 0; overflow-wrap: anywhere; }
    body.sg-payment-flow .ap-summary .total { display: grid; grid-template-columns: 1fr; padding: 16px; }
    body.sg-payment-flow .ap-summary .total dd { text-align: left; font-size: 21px; font-variant-numeric: tabular-nums; }
    body.sg-payment-flow .ap-consent { gap: 12px; align-items: start; line-height: 1.7; padding-block: 8px; }
    body.sg-payment-flow .ap-consent input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 2px; }
    body.sg-payment-flow .ap-request-details dl > div { padding-block: 14px; gap: 16px; font-size: 12px; line-height: 1.7; }
    body.sg-payment-flow .sg-amount-box { min-height: 66px; padding-inline: 14px; }
    body.sg-payment-flow .sg-amount-box input { font-size: 28px !important; line-height: 1.4; }
    body.sg-payment-flow .ap-amount { min-height: 64px; align-items: center; }
    body.sg-payment-flow .ap-amount input { font-size: 28px !important; min-height: 64px; }
    body.sg-payment-flow :is(.sg-quick-amounts,.ap-quick) { gap: 8px; }
    body.sg-payment-flow :is(.sg-quick-amounts,.ap-quick) button { min-height: 44px; padding: 10px 5px; font-size: 11px; }
    body.sg-payment-flow .sg-summary .total { align-items: start; gap: 16px; line-height: 1.6; }
    body.sg-payment-flow .sg-summary .total strong { text-align: right; overflow-wrap: anywhere; }
    body.sg-payment-flow .sg-cancel { min-height: 44px; padding: 14px; margin-top: 14px; font-size: 12px; }
    body.sg-payment-flow .mbt-bank-row button { min-height: 44px; min-width: 44px; justify-content: center; }
    body.sg-payment-flow #rulesModal .ap-modal-actions { gap: 12px; }
    body.sg-payment-flow #rulesModal .ap-modal-actions button { min-height: 52px; }
    body.sg-payment-flow #rulesModal .ap-modal-close { width: 44px; height: 44px; top: 10px; right: 10px; }
    body.sg-payment-flow #rulesModal .ap-rules-heading { padding-right: 32px; }
    body.sg-payment-flow #rulesModal .ap-rules-amount { display: flex; flex-direction: column; align-items: start; gap: 8px; padding: 16px; }
    body.sg-payment-flow #rulesModal .ap-rules-amount strong { font-size: 21px; line-height: 1.5; overflow-wrap: anywhere; max-width: 100%; }
}

@media (max-width: 360px) {
    body.sg-payment-flow .ap-provider-totals { grid-template-columns: minmax(0,1fr); }
    body.sg-payment-flow .ap-provider-totals > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); align-items: center; gap: 12px; }
    body.sg-payment-flow .ap-provider-totals strong { margin-top: 0; text-align: right; }
    body.sg-payment-flow .ap-money-value,body.sg-payment-flow .ap-provider-totals .ap-crypto-value { font-size: 18px; }
}