/* ============================================================
   order-modal.css — модалка «Быстрый заказ» (замена корзины).
   Подключается глобально. Открытие — класс .open на overlay/modal
   (аналог мобильного m-drawer). Кнопки-триггеры: .qo-trigger.
   ============================================================ */

/* --- Триггер-кнопки «Быстрый заказ» ---
   Базовый класс — нейтральный JS-хук (сброс кнопки), чтобы НЕ перебивать
   существующий вид .pc-add в каталоге. Сплошной вид — только --single. */
.qo-trigger{border:0;cursor:pointer;font:inherit;}

/* На странице товара — крупная основная кнопка */
.qo-trigger--single{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:16px;padding:16px 22px;
  background:var(--brand);color:#fff;border-radius:var(--radius-sm);
  transition:background .18s var(--ease),transform .06s var(--ease);
}
.qo-trigger--single:hover{background:var(--brand-ink);}
.qo-trigger--single:active{transform:translateY(1px);}
.qo-trigger--single svg{width:20px;height:20px;flex:0 0 auto;}

/* Ряд действий на странице товара */
.buybox-actions{display:flex;gap:12px;align-items:stretch;margin-top:14px;}
.buybox-actions .qo-trigger--single{flex:1 1 auto;margin-top:0;}

/* --- Overlay --- */
.qo-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(20,24,33,.55);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .25s var(--ease);
}
.qo-overlay.open{opacity:1;}

/* --- Модалка --- */
.qo-modal{
  position:fixed;z-index:9999;top:50%;left:50%;
  transform:translate(-50%,-46%);opacity:0;pointer-events:none;
  width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;
  background:var(--bg);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:28px 26px 22px;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.qo-modal.open{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;}

.qo-close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;
  padding:0;margin:0;min-width:0;box-sizing:border-box;flex:0 0 auto;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--surface);color:var(--ink-2);cursor:pointer;transition:background .15s var(--ease);
}
.qo-close:hover{background:var(--surface-2);color:var(--ink);}
.qo-close svg{width:18px;height:18px;}

.qo-head{margin-bottom:16px;padding-right:30px;}
.qo-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink);background:var(--brand-soft);padding:4px 10px;border-radius:20px;}
.qo-head h3{margin:10px 0 4px;font-size:22px;line-height:1.2;color:var(--ink);}
.qo-sub{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted);}

/* Плашка товара */
.qo-product{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:16px;
}
.qo-product-name{font-weight:600;font-size:14px;line-height:1.35;color:var(--ink);}
.qo-qty{display:inline-flex;align-items:center;flex:0 0 auto;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);}
.qo-qty-btn{width:34px;height:38px;border:0;background:transparent;font-size:18px;line-height:normal;color:var(--ink-2);cursor:pointer;}
.qo-qty-btn:hover{background:var(--surface);}
.qo-qty input{width:44px;height:38px;border:0;text-align:center;font-weight:700;color:var(--ink);-moz-appearance:textfield;}
.qo-qty input::-webkit-outer-spin-button,
.qo-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Форма */
/* display:flex перебивает нативный [hidden] — возвращаем скрытие явно. */
.qo-form[hidden],.qo-product[hidden],.qo-done[hidden],.qo-msg[hidden]{display:none!important;}
.qo-form{display:flex;flex-direction:column;gap:12px;}
.qo-field{display:flex;flex-direction:column;gap:5px;}
.qo-field>span{font-size:13px;font-weight:600;color:var(--ink-2);}
.qo-field>span b{color:var(--brand);font-weight:700;}
.qo-field input,.qo-field textarea{
  border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;
  font:inherit;font-size:15px;color:var(--ink);background:var(--bg);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.qo-field input:focus,.qo-field textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);
}
.qo-field textarea{resize:vertical;min-height:64px;}
.qo-field.err input,.qo-field.err textarea{border-color:#d64545;box-shadow:0 0 0 3px rgba(214,69,69,.12);}

/* honeypot прячем */
#qo-website{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.qo-msg{font-size:13.5px;line-height:1.4;padding:9px 12px;border-radius:9px;background:rgba(214,69,69,.08);color:#b13333;}

/* Согласие на обработку данных (обязательно) */
.qo-consent{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:12.5px;line-height:1.4;color:var(--ink-2);}
.qo-consent input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--brand);cursor:pointer;}
.qo-consent.err{color:#b13333;}
.qo-consent.err input{outline:2px solid #d64545;outline-offset:1px;border-radius:3px;}

.qo-submit{
  margin-top:4px;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:16px;
  background:var(--brand);color:#fff;border-radius:var(--radius-sm);padding:14px 20px;
  transition:background .18s var(--ease);
}
.qo-submit:hover{background:var(--brand-ink);}
.qo-submit:disabled{opacity:.6;cursor:default;}

/* Успех */
.qo-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 6px 6px;}
.qo-done-ic{width:64px;height:64px;margin:6px auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green);}
.qo-done-ic svg{width:34px;height:34px;}
.qo-done h3{margin:0 0 6px;font-size:22px;color:var(--ink);}
.qo-done p{margin:0 0 18px;font-size:14.5px;color:var(--ink-2);line-height:1.45;}
.qo-done-close{width:100%;}

body.qo-open{overflow:hidden;}

@media (max-width:520px){
  .qo-modal{padding:24px 18px 18px;border-radius:16px;}
  .qo-head h3{font-size:20px;}
  .buybox-actions{flex-wrap:wrap;}
}