/* Responsive V7 owner for the public payment routes /pay and /pay/result.
   The service pages are intentionally self-contained: one DOM, one flexible
   layout and the single shared 1024px boundary.  Header, footer and buttons
   stay owned by the shared shell; this sheet owns their placement plus the
   payment form components. */
:root{
  color-scheme:dark;
  --v7-bg:#0a0a0a;--v7-surface:#151310;--v7-surface2:#1b1613;
  --v7-text:#f0ede8;--v7-muted:#b0aba2;--v7-line:#2b2722;
  --v7-gold:#e4a971;--v7-accent:#cf8a52;--v7-accent-dim:#8d5e38;
  --v7-content:1440px;--v7-gutter:clamp(20px,3vw,56px);
  --v7-radius:22px;--v7-section:24px;
  --v7-alert:#e37b6b;
  /* Compatibility aliases consumed by shared shell/FAQ components. */
  --bg:var(--v7-bg);--panel:var(--v7-surface);--panel2:var(--v7-surface2);
  --text:var(--v7-text);--muted:var(--v7-muted);--line:var(--v7-line);
  --accent:var(--v7-accent);--accent-text:var(--v7-gold);--accent-dim:var(--v7-accent-dim);
  --r-md:var(--v7-radius);--fs-meta:12.5px;
}
@media(768px <= width < 1024px){:root{--v7-section:48px}}
@media(min-width:1024px){:root{--v7-gutter:32px;--v7-section:var(--shell-section-step)}} /* десктопная лестница 64/88 — shell.css (18.09.2026) */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100dvh;margin:0;display:flex;flex-direction:column;overflow-x:hidden;background:var(--v7-bg);color:var(--v7-text);font:400 16px/1.55 Manrope,'Manrope Fallback',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.nav-lock{overflow:hidden}
main{flex:1 0 auto;overflow-x:clip}
h1,h2,h3,p,ul,ol,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
h1,h2,h3{font-family:Manrope,'Manrope Fallback',sans-serif;font-weight:500;text-wrap:balance}
h1{font-size:clamp(29px,4.5vw,38px);line-height:1.16;letter-spacing:.005em}
h2{font-size:clamp(20px,2.4vw,24px);line-height:1.25}
.wrap{width:100%;max-width:calc(var(--v7-content) + var(--v7-gutter)*2);margin-inline:auto;padding-inline:var(--v7-gutter)}
main.wrap{padding-top:12px}
/* `hidden` must win over the component display rules below. */
.pg-pay [hidden],.pg-pay-result [hidden]{display:none}

.pay-hero{padding-top:12px}
.pay-hero .lead{max-width:720px;margin-top:12px;color:var(--v7-muted);font-size:14.5px;line-height:1.58}
.pay-hero .crumb{font-size:var(--fs-meta);letter-spacing:.28em;text-transform:uppercase;color:var(--v7-gold);font-weight:600;margin-bottom:14px}

.pay-form{margin-top:var(--v7-section)}
.pay-scenarios{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pay-scenarios>legend,.pay-panel>legend{padding:0;font-size:var(--fs-meta);letter-spacing:.22em;text-transform:uppercase;color:var(--v7-gold);font-weight:600;margin-bottom:12px}
.pay-methods{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.pay-choice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--v7-line);border-radius:16px;background:var(--v7-surface);cursor:pointer;transition:border-color .18s,background .18s}
.pay-choice input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--v7-accent)}
.pay-choice-t{display:block;font-size:16px;font-weight:600;line-height:1.3;color:var(--v7-text)}
.pay-choice-d{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--v7-muted)}
.pay-choice:has(input:checked){border-color:var(--v7-accent);background:var(--v7-surface2)}
.pay-choice:has(input:focus-visible){outline:2px solid var(--v7-accent);outline-offset:2px}

.pay-panel{margin-top:var(--v7-section)}
.pay-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.pay-field{display:block;min-width:0}
.pay-field>span{display:block;margin-bottom:8px;font-size:13.5px;line-height:1.4;color:var(--v7-muted)}
.pay-field input,.pay-field select,.pay-field textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--v7-line);border-radius:12px;background:var(--v7-surface);color:var(--v7-text);font:inherit;font-size:16px;line-height:1.3}
.pay-field textarea{min-height:96px;resize:vertical}
.pay-field input[readonly]{background:var(--v7-surface2);color:var(--v7-muted)}
.pay-field input:focus-visible,.pay-field select:focus-visible,.pay-field textarea:focus-visible{outline:2px solid var(--v7-accent);outline-offset:2px;border-color:var(--v7-accent-dim)}
.pay-field .fld-invalid{border-color:var(--v7-alert)}
.fld-error{display:none;margin-top:6px;color:var(--v7-alert);font-size:12.5px;line-height:1.45}
.fld-error.show{display:block}
.pay-hint{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--v7-muted)}
.pay-basis{margin-top:10px;font-size:13px;line-height:1.5;color:var(--v7-muted)}
.pay-consent{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border:1px solid var(--v7-line);border-radius:16px;background:var(--v7-surface);cursor:pointer}
.pay-consent input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--v7-accent)}
.pay-consent span{font-size:13px;line-height:1.5;color:var(--v7-muted)}
.pay-consent a{color:var(--v7-gold)}

.pay-alert{margin-top:18px;padding:12px 14px;border:1px solid var(--v7-alert);border-radius:12px;color:#f3cdc5;font-size:13.5px;line-height:1.5}
.pay-status{margin-top:18px;padding:12px 14px;border:1px solid var(--v7-accent-dim);border-radius:12px;color:var(--v7-gold);font-size:13.5px;line-height:1.5}
.pay-sbp{margin-top:18px;padding:16px;border:1px solid var(--v7-accent-dim);border-radius:16px;background:var(--v7-surface2)}
.pay-sbp img{display:block;width:100%;max-width:260px;height:auto;margin:0 auto;border-radius:12px;background:#fff}
.pay-sbp p{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--v7-muted)}
.pay-sbp code{display:block;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--v7-surface);color:var(--v7-text);font-size:12.5px;word-break:break-all}
.pay-sbp .btn{margin-top:14px}

.pay-summary{margin-top:var(--v7-section);padding:18px;border:1px solid var(--v7-line);border-radius:var(--v7-surface-radius);background:var(--v7-surface)}
.pay-summary dl{display:grid;gap:12px}
.pay-summary dl>div{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.pay-summary dt{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--v7-muted)}
.pay-summary dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--v7-text);overflow-wrap:anywhere}
.pay-summary .btn{width:100%;margin-top:18px}
.pay-summary-note{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--v7-muted)}

/* 18.09.2026, волна 5 (mobile): узкие режимы читают --card-pad; десктопный
   20px сохранён до волны 4 и объявлен ниже, в существующем блоке min-width:1024. */
.pay-result{margin-top:var(--v7-section);max-width:760px;padding:var(--card-pad,24px);border:1px solid var(--v7-line);border-radius:var(--v7-surface-radius);background:var(--v7-surface)}
.pay-result-state{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--v7-gold);font-weight:600;margin-bottom:12px}
.pay-result p{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--v7-muted)}
.pay-result-amount{margin-top:16px;font-size:15px;color:var(--v7-text)}
.pay-result-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.pay-result-actions .btn{flex:1 1 auto;justify-content:center}
.pay-result--paid .pay-result-state{color:var(--v7-gold)}
.pay-result--failed .pay-result-state{color:var(--v7-alert)}

@media(min-width:1024px){
  /* 18.09.2026, волна 5 (mobile): десктопная половина результата сохраняет
     прежний отступ до волны 4. */
  .pay-result{padding:20px}
  .pay-scenarios{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pay-methods{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pay-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
  .pay-fields>.pay-field--full{grid-column:1/-1}
  .pay-summary dl>div{grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:16px;align-items:baseline}
  .pay-summary .btn{width:auto;min-width:280px}
}
@media(prefers-reduced-motion:reduce){.pay-choice{transition:none}}