/* Посадочная страница /zakupki/ — самостоятельные стили.
   Все классы с префиксом .mx-zk, чтобы не зависеть от шаблона и не ломать его.
   Работает и в основном шаблоне aspro-premier, и в мобильных шаблонах. */

.mx-zk{
  --mx-ink:#16202b;
  --mx-ink-2:#4d5c6b;
  --mx-line:#e2e8ef;
  --mx-bg:#f5f8fb;
  --mx-accent:#FD9C12;
  --mx-accent-dk:#E28A05;
  --mx-accent-text:#B5700A;
  --mx-ok:#1f7a45;
  --mx-radius:10px;
  color:var(--mx-ink);
  font-size:16px;
  line-height:1.55;
  box-sizing:border-box;
}
.mx-zk *,.mx-zk *:before,.mx-zk *:after{box-sizing:border-box;}
.mx-zk h1,.mx-zk h2,.mx-zk h3{color:var(--mx-ink);margin:0 0 .5em;line-height:1.22;font-weight:700;}
.mx-zk h1{font-size:34px;}
.mx-zk h2{font-size:26px;margin-bottom:18px;}
.mx-zk h3{font-size:18px;}
.mx-zk p{margin:0 0 12px;}
.mx-zk a{color:var(--mx-accent-text);}
.mx-zk .mx-zk-link{font-weight:600;text-decoration:none;}
.mx-zk .mx-zk-link:hover{text-decoration:underline;}
.mx-zk-accent{color:var(--mx-accent-text);white-space:nowrap;}
.mx-zk-muted{color:var(--mx-ink-2);font-size:14px;}
.mx-zk-big{font-size:20px;font-weight:700;text-decoration:none;}

/* ---------- первый экран ---------- */
.mx-zk-hero{
  display:grid;grid-template-columns:1fr 480px;
  grid-template-areas:"txt form" "steps form";
  grid-template-rows:auto 1fr;
  gap:0 32px;align-items:start;padding:28px 0 8px;
}
.mx-zk-hero__text{grid-area:txt;align-self:start;}
.mx-zk-steps{grid-area:steps;align-self:start;}
.mx-zk-formwrap{grid-area:form;}
.mx-zk-lead{font-size:19px;color:var(--mx-ink);max-width:660px;margin-top:0;}
.mx-zk-hero__note{font-size:15px;color:var(--mx-ink-2);border-left:3px solid var(--mx-accent);padding-left:12px;margin-top:18px;}
.mx-zk ul,.mx-zk ol{list-style:none!important;margin:0;padding:0;}
.mx-zk ul li:before,.mx-zk ol li:before,.mx-zk ul li:after,.mx-zk ol li:after{content:none!important;display:none!important;}
.mx-zk-badges{list-style:none!important;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.mx-zk-badges li{
  background:var(--mx-bg);border:1px solid var(--mx-line);border-radius:100px;
  padding:6px 14px;font-size:14px;font-weight:600;color:var(--mx-ink);
}

/* ---------- как это работает ---------- */
.mx-zk-steps{margin-top:28px;padding-top:24px;border-top:1px solid var(--mx-line);}
.mx-zk-steps__h{font-size:20px;margin-bottom:16px;}
.mx-zk-steps__list{counter-reset:none;}
.mx-zk-steps__list li{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;}
.mx-zk-steps__n{
  flex:0 0 28px;width:28px;height:28px;min-width:28px;border-radius:50%;line-height:28px;text-align:center;
  background:var(--mx-accent);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.mx-zk-steps__list b{display:block;font-size:16px;margin-bottom:3px;}
.mx-zk-steps__list li>div>span{display:block;color:var(--mx-ink-2);font-size:15px;}
.mx-zk-steps__call{margin-top:20px;padding:12px 14px;background:var(--mx-bg);border-radius:8px;font-size:15px;}
.mx-zk-steps__call a{font-weight:700;text-decoration:none;color:var(--mx-accent-text);}

/* ---------- форма ---------- */
.mx-zk-formwrap{position:sticky;top:16px;}
.mx-zk-form{
  background:#fff;border:1px solid var(--mx-line);border-radius:var(--mx-radius);
  padding:24px;box-shadow:0 6px 28px rgba(22,32,43,.08);
}
.mx-zk-form__title{font-size:22px;margin-bottom:4px;}
.mx-zk-form__sub{font-size:14px;color:var(--mx-ink-2);margin-bottom:18px;}
.mx-zk-form__promise{font-size:13px;color:var(--mx-ink-2);margin:10px 0 0;text-align:center;}
.mx-zk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.mx-zk-field{margin-bottom:14px;min-width:0;}
.mx-zk-field label{display:block;font-size:14px;font-weight:600;margin-bottom:5px;}
.mx-zk-req-star{color:var(--mx-accent-text);}
.mx-zk-field input[type=text],
.mx-zk-field input[type=tel],
.mx-zk-field input[type=email],
.mx-zk-field input[type=date],
.mx-zk-field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--mx-line);border-radius:8px;
  font-size:16px;font-family:inherit;color:var(--mx-ink);background:#fff;
  -webkit-appearance:none;appearance:none;
}
.mx-zk-field input:focus,.mx-zk-field textarea:focus{outline:none;border-color:var(--mx-accent);box-shadow:0 0 0 3px rgba(253,156,18,.22);}
.mx-zk-field textarea{resize:vertical;min-height:76px;}
.mx-zk-field.mx-zk-invalid input,.mx-zk-field.mx-zk-invalid textarea,.mx-zk-field.mx-zk-invalid .mx-zk-drop{border-color:#C0392B;}
.mx-zk-field__err{color:#C0392B;font-size:13px;margin-top:4px;font-weight:600;}

/* зона загрузки файла */
.mx-zk-drop{
  position:relative;border:2px dashed #c3d0dc;border-radius:8px;background:var(--mx-bg);
  padding:20px 14px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.mx-zk-drop:hover,.mx-zk-drop.mx-zk-drop--over{border-color:var(--mx-accent);background:#fff;}
.mx-zk-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.mx-zk-drop__text{display:block;font-weight:600;font-size:15px;}
.mx-zk-drop__hint{display:block;font-size:13px;color:var(--mx-ink-2);margin-top:4px;}
.mx-zk-filelist{list-style:none;margin:10px 0 0;padding:0;}
.mx-zk-filelist li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--mx-bg);border:1px solid var(--mx-line);border-radius:6px;
  padding:7px 10px;font-size:14px;margin-bottom:6px;word-break:break-all;
}
.mx-zk-filelist .mx-zk-fsize{color:var(--mx-ink-2);white-space:nowrap;font-size:13px;}

/* honeypot — прячем от человека, но не через display:none (роботы это видят) */
.mx-zk-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;overflow:hidden;}

.mx-zk-consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--mx-ink-2);margin:4px 0 16px;cursor:pointer;}
.mx-zk-consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;}
.mx-zk-consent.mx-zk-invalid span{color:#C0392B;}

.mx-zk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;border-radius:8px;padding:14px 22px;
  font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s,border-color .15s;
}
.mx-zk-btn--primary{width:100%;background:var(--mx-accent);color:#fff;}
.mx-zk-btn--primary:hover{background:var(--mx-accent-dk);color:#fff;}
.mx-zk-btn--primary[disabled]{opacity:.6;cursor:default;}
.mx-zk-btn--ghost{background:#fff;color:var(--mx-ink);border-color:var(--mx-line);padding:11px 18px;font-size:15px;}
.mx-zk-btn--ghost:hover{border-color:var(--mx-accent);color:var(--mx-accent-text);}
.mx-zk-btn__spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:mxZkSpin .7s linear infinite;}
@keyframes mxZkSpin{to{transform:rotate(360deg);}}

.mx-zk-msg{border-radius:8px;padding:14px 16px;font-size:15px;margin-top:14px;}
.mx-zk-msg--err{background:#fdecea;border:1px solid #f5c2bd;color:#8d1c13;}
.mx-zk-msg--ok{background:#e9f6ee;border:1px solid #bfe3cd;color:#155c33;}
.mx-zk-msg--ok a{color:#155c33;}

/* ---------- секции ---------- */
.mx-zk-sec{padding:34px 0;border-top:1px solid var(--mx-line);margin-top:14px;}
.mx-zk-sub{color:var(--mx-ink-2);max-width:760px;}
.mx-zk-grid{display:grid;gap:16px;}
.mx-zk-grid--2{grid-template-columns:repeat(2,1fr);}
.mx-zk-grid--3{grid-template-columns:repeat(3,1fr);}
.mx-zk-card{background:#fff;border:1px solid var(--mx-line);border-radius:var(--mx-radius);padding:20px;}
.mx-zk-card p:last-child{margin-bottom:0;}
.mx-zk-card--doc{background:var(--mx-bg);}
.mx-zk-req{font-size:14px;line-height:1.7;}

.mx-zk-cats{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mx-zk-cats a{
  display:block;background:#fff;border:1px solid var(--mx-line);border-radius:8px;
  padding:12px 14px;text-decoration:none;color:var(--mx-ink);font-weight:600;font-size:15px;
}
.mx-zk-cats a:hover{border-color:var(--mx-accent);color:var(--mx-accent-text);}

.mx-zk-faq details{border:1px solid var(--mx-line);border-radius:8px;background:#fff;margin-bottom:8px;}
.mx-zk-faq summary{cursor:pointer;padding:15px 18px;font-weight:700;font-size:16px;list-style:none;position:relative;padding-right:44px;}
.mx-zk-faq summary::-webkit-details-marker{display:none;}
.mx-zk-faq summary:after{
  content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--mx-ink-2);border-bottom:2px solid var(--mx-ink-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s;
}
.mx-zk-faq details[open] summary:after{transform:translateY(-30%) rotate(-135deg);}
.mx-zk-faq__a{padding:0 18px 16px;color:var(--mx-ink-2);}

/* ---------- планшет ---------- */
@media (max-width:1100px){
  .mx-zk-hero{grid-template-columns:1fr 420px;gap:0 24px;}
  .mx-zk h1{font-size:30px;}
}
@media (max-width:900px){
  .mx-zk-hero{grid-template-columns:1fr;grid-template-areas:"txt" "form" "steps";grid-template-rows:auto auto auto;gap:0;}
  .mx-zk-formwrap{position:static;margin-top:20px;}
  .mx-zk-steps{margin-top:26px;}
  .mx-zk-grid--3{grid-template-columns:repeat(2,1fr);}
  .mx-zk-cats{grid-template-columns:repeat(2,1fr);}
}

/* ---------- телефон ---------- */
@media (max-width:640px){
  .mx-zk{font-size:16px;}
  .mx-zk h1{font-size:25px;}
  .mx-zk h2{font-size:21px;}
  .mx-zk-lead{font-size:16px;}
  .mx-zk-hero{padding-top:16px;gap:20px;}
  .mx-zk-sec{padding:26px 0;}
  .mx-zk-grid--2,.mx-zk-grid--3{grid-template-columns:1fr;}
  .mx-zk-cats{grid-template-columns:1fr;}
  .mx-zk-row{grid-template-columns:1fr;gap:0;}
  .mx-zk-form{padding:18px 16px;border-radius:8px;}
  .mx-zk-form__title{font-size:19px;}
  .mx-zk-card{padding:16px;}
  .mx-zk-badges li{font-size:13px;padding:5px 12px;}
  .mx-zk-steps{margin-top:22px;padding-top:18px;}
  .mx-zk-steps__h{font-size:18px;}
  .mx-zk-steps__list li>div>span{font-size:14px;}
  .mx-zk-btn--primary{padding:15px 18px;font-size:16px;}
  /* iOS не должен увеличивать страницу при фокусе — шрифт не меньше 16px */
  .mx-zk-field input,.mx-zk-field textarea{font-size:16px;}
}