/* ==========================================================================
   МОДАЛЬНЫЕ ОКНА — общий компонент для всех страниц
   Каркас: затемнение + центрированная карточка. Внутри — шапка
   (заголовок + крестик, у многошаговых ещё «назад» на мобильном),
   подзаголовок, контент, кнопка действия, нижние ссылки.

   Подключается на всех страницах (partials/scripts.php), стили — из head.php.
   ========================================================================== */

/* --- затемнение и карточка --- */
.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(18,58,99,.42);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s;
}
.modal.is-open{opacity:1;visibility:visible;pointer-events:auto}
body.is-modal-open{overflow:hidden}

.modal__win{
  position:relative;
  width:100%;max-width:448px;max-height:calc(100vh - 48px);
  overflow-y:auto;
  border-radius:var(--r-lg);background:#fff;
  padding:26px 28px 28px;
  box-shadow:0 24px 64px rgba(18,58,99,.24);
  transform:translateY(8px) scale(.99);
  transition:transform .2s;
}
.modal.is-open .modal__win{transform:none}
.modal__win--wide{max-width:900px}
.modal__win--narrow{max-width:392px}

/* --- шапка --- */
.modal__head{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:6px;
}
.modal__back{
  flex:none;width:28px;height:28px;margin-left:-6px;
  border:0;background:transparent;color:var(--navy);
  display:none;align-items:center;justify-content:center;cursor:pointer;
}
.modal__back .ic{width:18px;height:18px;stroke-width:2}
.modal__back:hover{color:var(--blue-bright)}
.modal__title{margin:0;font-size:20px;font-weight:700;color:var(--navy);line-height:1.25}
.modal__close{
  flex:none;margin-left:auto;width:28px;height:28px;
  border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--muted-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:color .16s,background .16s;
}
.modal__close:hover{color:var(--navy);background:var(--panel)}
.modal__close .ic{width:16px;height:16px}

.modal__sub{
  margin:0 0 20px;font-size:13.5px;line-height:1.45;color:var(--muted);
}
.modal__sub--tight{margin-bottom:16px}

/* --- шаги --- */
.modal__step{display:none}
.modal__step.is-active{display:block}

/* --- низ модалки --- */
.modal__cta{margin-top:20px}
.modal__links{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:14px;font-size:13.5px;
}
.modal__links a{color:var(--blue-bright);font-weight:600}
.modal__links a:hover{text-decoration:underline}
.modal__link-c{
  display:block;margin-top:14px;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--blue-bright);
}
.modal__link-c:hover{text-decoration:underline}
.modal__foot{
  margin:16px 0 0;text-align:center;font-size:13.5px;color:var(--muted);
}
.modal__foot a{color:var(--blue-bright);font-weight:600}
.modal__foot a:hover{text-decoration:underline}

/* ==========================================================================
   ПОЛЯ — плавающий лейбл: подпись сверху, значение под ней
   ========================================================================== */
.field{
  display:block;position:relative;
  border:1px solid #dfe8f2;border-radius:var(--r);
  padding:9px 14px 10px;background:#fff;
  transition:border-color .16s;
  margin-bottom:12px;
}
.field:focus-within{border-color:var(--blue)}
.field--error{border-color:var(--red)}

.field__label{
  display:block;font-size:11.5px;line-height:1.3;color:var(--muted);
  margin-bottom:2px;
}
.field__row{display:flex;align-items:center;gap:8px}
.field__input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--navy);
  padding:0;height:22px;
}
.field__input::placeholder{color:var(--muted-2);font-weight:400}
.field__eye{
  flex:none;width:24px;height:24px;margin-right:-4px;
  border:0;background:transparent;color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .16s;
}
.field__eye:hover{color:var(--navy)}
.field__eye .ic{width:19px;height:19px}
.field__hint{margin:-6px 0 12px;font-size:12px;color:var(--muted)}
.field__hint a{color:var(--blue-bright)}

/* Чекбокс согласия внутри модалки.
   Базовый .check в системе всегда отмечен (подписка в футере), поэтому
   здесь добавляем снятое состояние — клик по подписи переключает. */
.modal .check{margin:4px 0 16px}
.modal .check__text{font-size:12.5px;line-height:1.4;color:var(--muted)}
.modal .check__text a{color:var(--blue-bright)}
.modal .check__box{background:#fff;border:1.5px solid #c3cede}
.modal .check__box::after{display:none}
.modal .check__input:checked ~ .check__box{background:var(--blue);border-color:var(--blue)}
.modal .check__input:checked ~ .check__box::after{display:block}

/* ==========================================================================
   ВЫБОР СПОСОБА (карточки с радио)
   ========================================================================== */
.opt{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;margin-bottom:8px;
  border:1.5px solid var(--border);border-radius:var(--r);
  background:#fff;cursor:pointer;
  transition:border-color .16s,background .16s;
}
.opt:hover{border-color:#bcd0e4}
.opt.is-on{border-color:var(--blue);background:var(--tint)}
.opt__ic{
  flex:none;width:36px;height:36px;border-radius:var(--pill);
  background:var(--tint);color:var(--blue-bright);
  display:flex;align-items:center;justify-content:center;
}
.opt__ic .ic{width:19px;height:19px}
.opt.is-on .opt__ic{background:#fff}
.opt__body{flex:1;min-width:0}
.opt__title{display:block;font-size:14px;font-weight:600;color:var(--navy);line-height:1.3}
.opt__text{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:1px}
.opt__radio{
  flex:none;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.opt__radio::after{
  content:'';width:10px;height:10px;border-radius:50%;
  background:var(--blue);transform:scale(0);transition:transform .16s;
}
.opt.is-on .opt__radio{border-color:var(--blue)}
.opt.is-on .opt__radio::after{transform:scale(1)}

/* ==========================================================================
   ВВОД КОДА — 4 ячейки (используется в 3 модалках)
   ========================================================================== */
.code-input{display:flex;gap:8px;margin:0 0 14px}
.code-input__cell{
  flex:1;min-width:0;height:60px;
  border:1.5px solid #dfe8f2;border-radius:var(--r);
  background:#fff;outline:0;text-align:center;
  font-family:inherit;font-size:24px;font-weight:700;color:var(--navy);
  transition:border-color .16s;
}
.code-input__cell:focus{border-color:var(--blue)}
.code-input.is-error .code-input__cell{border-color:var(--red)}
.code-input__cell::placeholder{color:#cdd8e5}

.code-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--muted);margin-bottom:4px;
}
.code-meta a{color:var(--blue-bright);font-weight:600}
.code-meta a:hover{text-decoration:underline}
.code-meta__timer{white-space:nowrap}
.code-error{
  display:none;align-items:flex-start;gap:8px;
  margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--red);
}
.code-error .ic{width:15px;height:15px;flex:none;margin-top:1px}
.code-input.is-error ~ .code-error{display:flex}
.code-resend{
  display:block;margin-top:12px;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--blue-bright);
}
.code-resend:hover{text-decoration:underline}

/* ==========================================================================
   ИНДИКАТОР НАДЁЖНОСТИ ПАРОЛЯ
   ========================================================================== */
.strength{margin:-4px 0 14px}
.strength__label{font-size:12px;color:var(--muted);margin-bottom:6px}
.strength__label b{color:#0aa653;font-weight:600}
.strength__track{height:4px;border-radius:var(--pill);background:var(--border-soft);overflow:hidden}
.strength__fill{height:100%;border-radius:var(--pill);background:#f2a33c;transition:width .2s,background .2s}
.strength[data-level="weak"] .strength__fill{background:var(--red)}
.strength[data-level="strong"] .strength__fill{background:#0aa653}

/* ==========================================================================
   КАПЧА (визуальная заглушка — реальный виджет подключается при интеграции)
   ========================================================================== */
.captcha{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;margin-bottom:16px;
  border:1px solid var(--border);border-radius:var(--r);background:#fafbfd;
}
.captcha__box{
  flex:none;width:22px;height:22px;border-radius:4px;
  border:2px solid #c3cede;background:#fff;
}
.captcha__text{font-size:13.5px;color:var(--ink)}
.captcha__logo{
  margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  font-size:9px;line-height:1.1;color:var(--muted-2);text-align:center;
}
.captcha__logo .ic{width:20px;height:20px;color:#c3cede}

/* ==========================================================================
   МИНИ-КАРТОЧКА ТОВАРА (в модалках заказа и подписок)
   ========================================================================== */
.mprod{
  display:flex;align-items:center;gap:12px;
  padding:12px;margin-bottom:16px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--panel);
}
.mprod__img{
  flex:none;width:64px;height:64px;border-radius:var(--r-sm);
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.mprod__img img{max-width:84%;max-height:84%;object-fit:contain}
.mprod__body{flex:1;min-width:0}
.mprod__name{display:block;font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.3}
.mprod__sub{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.mprod__price{display:block;font-size:16px;font-weight:700;color:var(--navy);margin-top:4px}

/* ==========================================================================
   КНОПКА БЫСТРОГО ПРОСМОТРА на карточке товара
   ========================================================================== */
.pcard__view{
  position:absolute;top:12px;right:54px;z-index:3;
  width:36px;height:36px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:translateY(-4px);
  transition:opacity .18s,transform .18s,color .16s,background .16s;
}
.pcard:hover .pcard__view{opacity:1;transform:none}
.pcard__view:hover{background:var(--blue);color:#fff}
.pcard__view .ic{width:18px;height:18px}
/* на тач-устройствах кнопка видна всегда — наведения нет */
@media (hover:none){
  .pcard__view{opacity:1;transform:none}
}
@media (max-width:1023px){
  .pcard__view{top:6px;right:44px;width:32px;height:32px}
  .pcard__view .ic{width:16px;height:16px}
}

/* ==========================================================================
   СОСТОЯНИЯ (ошибка / успех / загрузка / подтверждение)
   ========================================================================== */
.mstate{text-align:center;padding:8px 0 4px}
.mstate__ic{
  width:56px;height:56px;margin:0 auto 16px;border-radius:var(--pill);
  display:flex;align-items:center;justify-content:center;
}
.mstate__ic .ic{width:26px;height:26px}
.mstate--error .mstate__ic{background:#fdecea;color:var(--red)}
.mstate--ok .mstate__ic{background:#e2f7ea;color:#0aa653}
.mstate--wait .mstate__ic{background:var(--tint);color:var(--blue-bright)}
.mstate__title{margin:0 0 6px;font-size:19px;font-weight:700;color:var(--navy)}
.mstate__text{margin:0 0 20px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.mstate__spin{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid rgba(0,125,187,.25);border-top-color:var(--blue-bright);
  animation:mspin .8s linear infinite;
}
@keyframes mspin{to{transform:rotate(360deg)}}

/* ==========================================================================
   ВЫБОР ГОРОДА
   ========================================================================== */
.city-search{position:relative;margin-bottom:10px}
.city-search .field{margin-bottom:0;padding-left:42px}
.city-search__ic{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted-2);pointer-events:none;
}
.city-auto{
  display:inline-flex;align-items:center;gap:7px;
  margin-bottom:14px;font-size:13px;font-weight:600;color:var(--blue-bright);
  border:0;background:transparent;padding:0;cursor:pointer;
}
.city-auto .ic{width:15px;height:15px}
.city-auto:hover{text-decoration:underline}
.city-list{max-height:264px;overflow-y:auto;margin:0 -4px}
.city-list::-webkit-scrollbar{width:6px}
.city-list::-webkit-scrollbar-thumb{background:#d6dfe9;border-radius:3px}
.city-opt{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 12px;border:0;border-radius:var(--r-sm);background:transparent;
  font-family:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer;
  transition:background .16s;
}
.city-opt:hover{background:var(--panel)}
.city-opt.is-on{color:var(--blue-bright);font-weight:600}
.city-opt__dot{
  flex:none;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border);background:#fff;position:relative;
}
.city-opt.is-on .city-opt__dot{border-color:var(--blue-bright)}
.city-opt.is-on .city-opt__dot::after{
  content:'';position:absolute;inset:4px;border-radius:50%;background:var(--blue-bright);
}
.city-opt[hidden]{display:none}

/* ==========================================================================
   БЫСТРЫЙ ПРОСМОТР — широкая модалка в две колонки
   ========================================================================== */
.fv{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px}
.fv__gal{position:relative}
.fv__main{
  position:relative;height:320px;border-radius:var(--r);
  background:var(--panel);display:flex;align-items:center;justify-content:center;
  padding:20px;margin-bottom:10px;
}
.fv__main img{max-width:100%;max-height:100%;object-fit:contain}
.fv__thumbs{display:flex;gap:8px}
.fv__thumb{
  width:56px;height:56px;flex:none;padding:4px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .16s;
}
.fv__thumb.is-active{border-color:var(--blue)}
.fv__thumb img{max-width:100%;max-height:100%;object-fit:contain}
.fv__nav{
  position:absolute;top:150px;z-index:3;width:36px;height:36px;
  border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.95);
  color:var(--navy);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .16s,color .16s,border-color .16s;
}
.fv__nav:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.fv__nav--prev{left:10px}
.fv__nav--next{right:10px}
.fv__nav .ic{width:14px;height:14px}
/* точки — внутри фото-бокса, с полупрозрачной подложкой для контраста */
.fv__dots{
  position:absolute;left:0;right:0;bottom:14px;
  display:flex;justify-content:center;gap:6px;
}
.fv__dots span{
  width:7px;height:7px;border-radius:50%;
  background:#b9c6d6;box-shadow:0 0 0 2px rgba(255,255,255,.75);
}
.fv__dots span.is-active{background:var(--blue);width:18px;border-radius:4px}

.fv__info{min-width:0}
.fv__name{margin:0 0 8px;font-size:19px;font-weight:700;color:var(--navy);line-height:1.28}
.fv__brand{display:inline-block;font-size:13.5px;color:var(--blue-bright);margin-bottom:8px}
.fv__meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.fv__price-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fv__price{font-size:28px;font-weight:700;color:var(--navy);line-height:1.2}
.fv__old{font-size:15px;color:var(--muted-2);text-decoration:line-through}
.fv__sale{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:var(--pill);background:var(--red);color:#fff;
  font-size:12px;font-weight:700;
}
.fv__label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}
.fv__row{display:flex;align-items:center;gap:14px;margin:16px 0}
.fv__stock{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#0aa653;margin-bottom:4px}
.fv__more{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:13px;font-weight:600;color:var(--blue-bright);
}
.fv__more .ic{width:12px;height:12px;transition:transform .18s}
.fv__more:hover .ic{transform:translateX(2px)}

/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================================== */
@media (max-width:1023px){
  .modal{padding:16px;align-items:flex-start}
  .modal__win{
    max-width:none;max-height:calc(100vh - 32px);
    padding:20px 18px 22px;margin-top:auto;margin-bottom:auto;
  }
  /* у многошаговых модалок на мобильном появляется «назад» */
  .modal__back{display:flex}
  .modal__title{font-size:18px}
  .code-input__cell{height:56px;font-size:22px}
  .fv{grid-template-columns:1fr;gap:16px}
  .fv__main{height:240px}
  .fv__nav{top:110px}
}