/* payment.css — уникальные блоки страницы «Оплата» */

/* ---------- BREADCRUMBS ---------- */

/* ---------- PAY HERO ---------- */
.pay-hero{padding:22px 0 8px;}
.pay-hero-card{position:relative;overflow:hidden;border-radius:26px;background:var(--graphite);color:#fff;padding:54px 56px;min-height:280px;display:flex;flex-direction:column;justify-content:center;}
.pay-hero-card::after{content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:420px;height:420px;background:radial-gradient(circle,rgba(240,140,30,.22),transparent 62%);pointer-events:none;}
.pay-hero-card .eyebrow{color:var(--brand);margin-bottom:14px;position:relative;z-index:2;}
.pay-hero-card h1{font-size:clamp(30px,3.8vw,46px);line-height:1.06;margin-bottom:18px;max-width:720px;position:relative;z-index:2;color:#fff;}   /* color: иначе h1 родителя merchant перебивает на тёмный */
.pay-hero-card p{color:#b9bdc6;font-size:17px;line-height:1.6;max-width:600px;position:relative;z-index:2;}
.pay-hero-ic{position:absolute;right:50px;bottom:-10px;opacity:.42;z-index:1;width:260px;color:var(--brand);}

/* ---------- AUDIENCE TABS ---------- */
.aud{padding:34px 0 8px;}
.aud-switch{display:inline-flex;background:var(--surface);border-radius:14px;padding:6px;gap:6px;margin-bottom:30px;}
.aud-switch button{display:flex;align-items:center;gap:9px;padding:12px 22px;border-radius:10px;font-size:15px;font-weight:700;color:var(--ink-2);transition:.18s var(--ease);}
.aud-switch button svg{width:18px;height:18px;}
.aud-switch button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm);}

.aud-pane{display:none;}
.aud-pane.on{display:block;animation:pay-fade .3s ease;}
@keyframes pay-fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------- METHOD CARDS ---------- */
.methods{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.method{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;background:#fff;transition:.2s var(--ease);overflow:hidden;}
.method:hover{box-shadow:var(--shadow-md);border-color:transparent;transform:translateY(-3px);}
.method .num{position:absolute;top:24px;right:28px;font-size:54px;font-weight:800;color:var(--surface-2);line-height:1;letter-spacing:-.04em;}
.method .ic{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;z-index:2;}
.method .ic.orange{background:var(--brand-soft);color:var(--brand-ink);}
.method .ic.green{background:var(--green-soft);color:var(--green);}
.method .ic.blue{background:var(--blue-soft);color:var(--blue);}
.method .ic svg{width:28px;height:28px;}
.method h3{font-size:21px;margin-bottom:14px;position:relative;z-index:2;}
.method ul{list-style:none;margin:0;padding:0;display:grid;gap:13px;position:relative;z-index:2;}
.method li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.method li svg{flex-shrink:0;width:20px;height:20px;color:var(--brand);margin-top:1px;}
.method.single{grid-column:1/-1;}
.method.single ul{grid-template-columns:1fr 1fr;gap:13px 36px;}

.chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:16px;position:relative;z-index:2;}
.chip.warn{background:#fef3e0;color:#a9670a;}
.chip svg{width:14px;height:14px;}

/* ---------- EDO BANNER ---------- */
.edo{margin-top:20px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:linear-gradient(135deg,var(--graphite),#23272f);color:#fff;border-radius:var(--radius);padding:30px 34px;}
.edo .ic{width:56px;height:56px;border-radius:15px;background:rgba(240,140,30,.16);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.edo .ic svg{width:28px;height:28px;}
.edo b{font-size:19px;display:block;margin-bottom:5px;}
.edo p{color:#b9bdc6;font-size:14.5px;line-height:1.5;max-width:620px;}
.edo .tag{flex-shrink:0;background:rgba(255,255,255,.1);border-radius:10px;padding:11px 18px;font-weight:800;font-size:15px;color:#fff;letter-spacing:.02em;}

/* ---------- FLOW STEPS ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.flow .fs{position:relative;background:var(--surface);border-radius:var(--radius);padding:26px 24px;}
.flow .fs .n{width:38px;height:38px;border-radius:11px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;margin-bottom:16px;}
.flow .fs b{display:block;font-size:16px;margin-bottom:6px;}
.flow .fs p{font-size:13.5px;color:var(--ink-2);line-height:1.5;}
.flow .fs::after{content:"";position:absolute;top:43px;right:-13px;width:14px;height:2px;background:var(--line);z-index:2;}
.flow .fs:last-child::after{display:none;}

/* ---------- NOTES GRID ---------- */
.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.note{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;}
.note .ic{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;}
.note .ic svg{width:23px;height:23px;}
.note b{display:block;font-size:15.5px;margin-bottom:5px;}
.note span{font-size:13.5px;color:var(--ink-2);line-height:1.45;}

/* ---------- CTA ---------- */
/* NOTE: .cta базовые стили (градиент, grid, padding, ::before) присутствуют на главной (home.css).
   Если home.css подключается глобально — убрать блок ниже и оставить только .btn-white/.btn-line.
   Пока home.css — home-only, дублируем здесь. */

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .methods{grid-template-columns:1fr;}
  .method.single ul{grid-template-columns:1fr;}
  .edo{grid-template-columns:auto 1fr;}
  .edo .tag{grid-column:2;justify-self:start;}
  .flow{grid-template-columns:1fr 1fr;}
  .flow .fs::after{display:none;}
  .note-grid{grid-template-columns:1fr;}
  .cta{grid-template-columns:1fr;gap:26px;}
}
@media(max-width:760px){
  .pay-hero-card{padding:32px 24px;}
  .pay-hero-ic{display:none;}
  .aud-switch{display:flex;width:100%;}
  .aud-switch button{flex:1;justify-content:center;padding:12px 10px;}
  .flow{grid-template-columns:1fr;}
  .edo{grid-template-columns:1fr;text-align:left;}
  .edo .tag{grid-column:1;}
  .cta{padding:32px 24px;}
}