/* AEZ-SHOP.RU — страница «Порядок оплаты» (information_id=8).
   Префикс "azop-" проверен на отсутствие коллизий с CSS темы profline и aez-*.css.
   Дизайн-язык — как у «Как заказать», «Гарантий», «Доставки». */

.azop-wrap{
  --yellow:#fed501; --yellow-deep:#e0bd00;
  --dark:#252525; --light:#f6f6f6; --white:#fff; --line:#e2e2e2; --green:#1f8b4c; --red:#d62828;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  display:block; color:var(--dark); font-size:14.5px; line-height:1.6;
}
.azop-wrap, .azop-wrap *{ box-sizing:border-box; }
.azop-wrap p{ margin:0 0 12px; }
.azop-wrap p:last-child{ margin-bottom:0; }
.azop-wrap a{ color:#0b63c5; }

.azop-lead{
  display:block; background:var(--light); border-left:4px solid var(--yellow);
  border-radius:0 6px 6px 0; padding:16px 18px; margin:0 0 16px; font-size:16px; font-weight:700; color:#000;
}

/* ---------- ключевые факты ---------- */
.azop-terms{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 16px; }
.azop-term{ display:flex; flex-direction:column; gap:4px; background:var(--dark); border-radius:8px; padding:16px 18px; }
.azop-term-value{ color:var(--yellow); font-size:22px; font-weight:800; line-height:1.15; }
.azop-num{ font-family:var(--mono); }
.azop-term-label{ color:#bdbdbd; font-size:13px; line-height:1.35; }

/* ---------- заметки ---------- */
.azop-note{
  display:block; background:#f0f8f3; border-left:4px solid var(--green);
  border-radius:0 6px 6px 0; padding:12px 16px; margin:14px 0 0; font-size:14px;
}
.azop-note--warn{ background:#fff8e6; border-left-color:var(--yellow-deep); }
.azop-note strong{ color:#000; }
.azop-muted{ color:#666; font-size:13.5px; margin-top:12px !important; }

/* ---------- выбор способа ---------- */
.azop-wrap h2.azop-h2{
  display:flex; align-items:center; gap:10px; margin:26px 0 12px; padding:0; border:none;
  font-size:20px; font-weight:700; color:#000; line-height:1.3;
}
.azop-wrap h2.azop-h2::before{ content:""; width:6px; height:23px; background:var(--yellow); border-radius:2px; flex:none; }
.azop-ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 24px; }
.azop-wrap a.azop-way{
  display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; text-decoration:none; color:var(--dark);
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--yellow-deep); border-radius:6px;
  box-shadow:0 0 30px #0000000d; transition:border-color .2s, box-shadow .2s;
}
.azop-wrap a.azop-way:hover{ border-left-color:var(--yellow); box-shadow:0 6px 22px rgba(0,0,0,.1); color:var(--dark); }
.azop-way-num{
  display:flex; align-items:center; justify-content:center; flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--yellow); color:#000; font-family:var(--mono); font-weight:700; font-size:15px;
}
.azop-way-body{ display:flex; flex-direction:column; }
.azop-way-title{ font-weight:700; font-size:15px; color:#000; line-height:1.3; }
.azop-way-text{ font-size:13px; color:#666; line-height:1.35; }

/* ---------- разделы ---------- */
.azop-section{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:8px;
  padding:22px 26px; margin:0 0 16px; scroll-margin-top:90px;
}
.azop-sec-head{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.azop-sec-num{
  display:flex; align-items:center; justify-content:center; flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--yellow); color:#000; font-family:var(--mono); font-size:16px; font-weight:700;
}
.azop-wrap .azop-sec-head h2{ margin:0; padding:0; border:none; font-size:19px; font-weight:700; color:#000; line-height:1.3; }
.azop-sub-title, .azop-bank-name{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700; color:#000; margin:18px 0 8px; }
.azop-sec-head + .azop-sub-title{ margin-top:4px; }
.azop-sub-num{
  display:inline-flex; align-items:center; justify-content:center; padding:2px 8px; border-radius:4px;
  background:var(--dark); color:var(--yellow); font-family:var(--mono); font-size:12.5px; font-weight:700;
}

/* ---------- скриншоты ---------- */
.azop-fig{ display:block; margin:6px 0 0; }
.azop-fig--doc{ max-width:720px; }
.azop-wrap a.azop-zoom{
  position:relative; display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:var(--white); cursor:zoom-in; transition:box-shadow .2s, border-color .2s;
}
.azop-wrap a.azop-zoom:hover{ border-color:var(--yellow-deep); box-shadow:0 6px 22px rgba(0,0,0,.12); }
.azop-wrap a.azop-zoom::after{
  content:""; position:absolute; right:8px; top:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(37,37,37,.85) no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fed501' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity:.8; transition:opacity .2s;
}
.azop-wrap a.azop-zoom:hover::after{ opacity:1; }
.azop-fig img{ display:block; width:100%; height:auto; max-width:none; }
.azop-fig figcaption{ font-size:13px; color:#666; margin:8px 2px 0; line-height:1.45; }

/* ---------- банки ---------- */
.azop-banks{ display:block; margin:10px 0 0; }
.azop-tabs{ display:none; }
.azop-banks.is-tabs .azop-tabs{
  display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--dark); border-radius:8px; margin:0 0 14px;
}
.azop-wrap button.azop-tab{
  appearance:none; border:none; margin:0; cursor:pointer; padding:9px 16px; border-radius:6px;
  background:transparent; color:#e8e8e8; font:inherit; font-size:14px; font-weight:700; line-height:1.2;
  transition:background .2s, color .2s;
}
.azop-wrap button.azop-tab:hover{ background:rgba(255,255,255,.08); color:#fff; }
.azop-wrap button.azop-tab.is-active{ background:var(--yellow); color:#000; }
.azop-wrap button.azop-tab:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }

.azop-bank{ display:block; background:var(--light); border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin:0 0 14px; }
.azop-bank-name{ margin-top:0; }
.azop-banks.is-tabs .azop-bank{ display:none; }
.azop-banks.is-tabs .azop-bank.is-active{ display:block; }
.azop-banks.is-tabs .azop-bank-name{ display:none; }

.azop-route{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; margin:0 0 14px; padding:0; }
.azop-route li{
  position:relative; display:inline-flex; align-items:center; gap:7px;
  background:var(--white); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font-size:13.5px; line-height:1.35;
}
.azop-route li:not(:last-child){ margin-right:18px; }
.azop-route li:not(:last-child)::after{
  content:""; position:absolute; right:-17px; top:50%; width:7px; height:7px; margin-top:-4px;
  border-top:2px solid var(--yellow-deep); border-right:2px solid var(--yellow-deep); transform:rotate(45deg);
}
.azop-route li b{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:50%; background:#e0262b; color:#fff; font-size:11.5px; font-weight:700;
}
.azop-shots{ display:grid; grid-template-columns:repeat(2,minmax(0,280px)); gap:16px; align-items:start; }
.azop-fig--shot{ margin:0; }
.azop-fig--shot a.azop-zoom{ border-radius:14px; border:4px solid var(--dark); }
/* на скринах телефонов значок лупы закрывал бы отмеченные кнопки (QR вверху справа) — скрываем, клик по картинке всё равно увеличивает */
.azop-wrap .azop-fig--shot a.azop-zoom::after{ display:none; }

/* ---------- самовывоз ---------- */
.azop-info{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 20px;
  background:var(--dark); border-radius:8px; padding:16px 20px; margin:4px 0 0;
}
.azop-info div{ display:block; }
.azop-info dt{ color:#9a9a9a; font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:400; }
.azop-info dd{ margin:2px 0 0; color:#fff; font-size:15px; font-weight:700; }

/* ---------- назначение платежа ---------- */
.azop-purpose{
  display:flex; flex-direction:column; gap:4px; background:var(--light); border:1px dashed #bdbdbd; border-radius:6px; padding:12px 16px; margin:0 0 4px;
}
.azop-purpose-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#8a8a8a; }
.azop-purpose-text{ font-family:var(--mono); font-size:14.5px; font-weight:700; color:#000; word-break:break-word; }
.azop-purpose-hint{ font-size:12.5px; color:#777; }

/* ---------- контакты ---------- */
.azop-contact{ display:block; background:var(--dark); color:var(--light); border-radius:10px; padding:24px 26px; margin-top:22px; }
.azop-contact-title{ font-size:18px; font-weight:700; color:#fff; display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.azop-contact-title::before{ content:""; width:5px; height:20px; background:var(--yellow); border-radius:2px; flex:none; }
.azop-contact p{ color:#cfcfcf; margin:0 0 16px; }
.azop-contact-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.azop-wrap a.azop-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 18px;
  background:var(--yellow); color:#000; border:1px solid var(--yellow); border-radius:6px;
  font-weight:700; font-size:14px; text-decoration:none; transition:background .2s, border-color .2s, color .2s;
}
.azop-wrap a.azop-btn:hover{ background:var(--yellow-deep); border-color:var(--yellow-deep); }
.azop-wrap a.azop-btn--ghost{ background:transparent; color:#fff; border-color:#5a5a5a; }
.azop-wrap a.azop-btn--ghost:hover{ background:transparent; color:var(--yellow); border-color:var(--yellow); }
.azop-contact-links{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }
.azop-wrap .azop-contact-links a{ color:#cfcfcf; font-size:13.5px; text-decoration:none; border-bottom:1px dashed #6a6a6a; }
.azop-wrap .azop-contact-links a:hover{ color:var(--yellow); border-bottom-color:var(--yellow); }

/* ---------- лайтбокс ---------- */
.azop-lightbox{
  position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center;
  background:rgba(15,15,15,.88); padding:24px; cursor:zoom-out;
}
.azop-lightbox.is-open{ display:flex; }
.azop-lightbox img{ max-width:100%; max-height:100%; width:auto; height:auto; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); background:#fff; }
.azop-lightbox-close{
  position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:50%;
  border:none; background:#fed501; color:#000; font-size:24px; line-height:1; cursor:pointer;
}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .azop-ways{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .azop-terms{ grid-template-columns:1fr; gap:8px; }
  .azop-term{ flex-direction:row; align-items:baseline; gap:10px; padding:12px 16px; }
  .azop-term-value{ font-size:18px; flex:none; }
}
@media (max-width:520px){
  .azop-wrap{ font-size:14px; }
  .azop-section{ padding:16px 14px; }
  .azop-wrap .azop-sec-head h2{ font-size:17px; }
  .azop-sec-num{ width:32px; height:32px; font-size:14px; }
  .azop-bank{ padding:12px; }
  .azop-shots{ gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .azop-fig--shot a.azop-zoom{ border-width:3px; border-radius:10px; }
  .azop-wrap a.azop-zoom::after{ width:24px; height:24px; right:6px; top:6px; background-size:13px; }
  .azop-route{ flex-direction:column; align-items:stretch; gap:14px; }
  .azop-route li:not(:last-child){ margin-right:0; }
  .azop-route li:not(:last-child)::after{ right:auto; left:50%; top:auto; bottom:-11px; margin:0 0 0 -4px; transform:rotate(135deg); }
  .azop-wrap button.azop-tab{ padding:8px 11px; font-size:13px; }
  .azop-contact{ padding:20px 18px; }
  .azop-contact-actions .azop-btn{ width:100%; }
}