﻿/* NC Call — Попап нерабочего времени */

body.nc-modal-open { overflow: hidden; }

.nc-popup { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; visibility: hidden; pointer-events: none; }
.nc-popup.is-open { visibility: visible; pointer-events: auto; }

.nc-popup__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.nc-popup.is-open .nc-popup__backdrop { opacity: 1; }

.nc-popup__box {
  position: relative; background: var(--surface); border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(15,23,42,.22); width: 100%; max-width: 440px;
  max-height: 90dvh; overflow-y: auto; padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 12px;
  transform: scale(.94) translateY(12px); opacity: 0;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .22s ease;
}
.nc-popup.is-open .nc-popup__box { transform: scale(1) translateY(0); opacity: 1; }

.nc-popup__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: none; background: var(--bg-alt); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: background .15s; }
.nc-popup__close:hover { background: var(--border); color: var(--text); }

/* Шапка попапа — по центру (иконка-бейдж, заголовок, подпись, чип графика) */
.nc-popup__icon { width: 60px; height: 60px; margin: 0 auto; background: linear-gradient(135deg, var(--primary-soft), #dbeafe); border-radius: 18px; display: flex; align-items: center; justify-content: center; color: var(--primary); box-shadow: 0 8px 20px rgba(37, 99, 235, .14); }
.nc-popup__title { font-size: var(--text-2xl); font-weight: 800; color: var(--text); margin: 0; line-height: 1.25; text-align: center; }
.nc-popup__text { font-size: 14.5px; color: var(--text-muted); margin: 0; line-height: 1.55; text-align: center; }
.nc-popup__schedule { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; width: fit-content; margin-inline: auto; }

.nc-popup__form { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.nc-popup__field { display: flex; flex-direction: column; gap: 5px; }
.nc-popup__field label { font-size: 14px; font-weight: 600; color: var(--text-body); }
.nc-popup__field label span { color: var(--rose); }
.nc-popup__field input, .nc-popup__field select, .nc-popup__field textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 15px; color: var(--text); background: var(--bg-soft, #f8fafc); outline: none; transition: border-color .15s, box-shadow .15s, background .15s; font-family: inherit; }
.nc-popup__field input:focus, .nc-popup__field select:focus, .nc-popup__field textarea:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.nc-popup__field input.has-error { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.nc-field-error { font-size: 12px; color: var(--rose); font-weight: 500; }
.nc-form-error { font-size: 14px; color: var(--rose); font-weight: 600; background: var(--rose-soft); border: 1px solid var(--rose-solid); border-radius: var(--r-xs); padding: 10px 14px; }

.nc-popup__field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; appearance: none; }

.nc-popup__toggle-comment { background: none; border: none; padding: 0; font-size: 14px; font-weight: 600; color: var(--primary); cursor: pointer; text-align: left; }
.nc-popup__toggle-comment:hover { color: var(--primary-hover); }

.nc-popup__submit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--primary)); color: #fff; font-size: 16px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; transition: filter .15s, transform .1s, box-shadow .15s; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -6px color-mix(in srgb, var(--primary) 50%, transparent); margin-top: 2px; }
.nc-popup__submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.nc-popup__submit:disabled { opacity: .6; pointer-events: none; }
.nc-popup__submit.is-loading::after { content: ''; display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: nc-spin .7s linear infinite; }
@keyframes nc-spin { to { transform: rotate(360deg); } }

.nc-popup__privacy { font-size: 12px; color: var(--text-faint); margin: 0; text-align: center; line-height: 1.5; }
.nc-popup__privacy a { color: var(--text-muted); text-decoration: underline; }

.nc-popup__success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 20px 0; color: var(--green); }
/* КРИТИЧНО: display:flex перебивал атрибут [hidden] — «Заявка принята!» была видна
   одновременно с формой. Прячем явно. */
.nc-popup__success[hidden] { display: none; }
.nc-popup__success svg { background: var(--green-soft, #ecfdf5); border-radius: 50%; padding: 14px; width: 76px; height: 76px; }
.nc-popup__success h3 { font-size: var(--text-2xl); font-weight: 800; color: var(--text); margin: 0; }
.nc-popup__success p { font-size: 15px; color: var(--text-muted); margin: 0; }

.nc-phone-link { color: inherit; text-decoration: none; font-weight: 600; }
.nc-phone-link:hover { text-decoration: underline; }

@media (max-width: 600px) { .nc-popup__box { padding: 28px 20px 24px; border-radius: var(--r-md); } .nc-popup__title { font-size: 19px; } }

/* Чекбокс согласия на обработку ПДн (152-ФЗ) — компактная строка, текст не разваливается */
.nc-popup__consent { display: block; padding-left: 26px; position: relative; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; cursor: pointer; margin-top: 2px; }
.nc-popup__consent input { position: absolute; left: 0; top: 1px; width: 17px; height: 17px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.nc-popup__consent a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ── Инлайн-форма заявки [nc_call_form] ── */
.nc-inline-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.nc-inline-form__title { font-size: 16px; font-weight: 700; color: var(--text, #0f172a); }
.nc-inline-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nc-inline-form input[type=text], .nc-inline-form input[type=tel] {
  height: 46px; padding: 0 14px; font-size: 14px; font-family: inherit;
  background: var(--surface, #fff); color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-sm, 10px);
}
.nc-inline-form input:focus { outline: none; border-color: var(--primary, #2563eb); }
.nc-inline-form__consent { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 6px 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted, #64748b); cursor: pointer; }
.nc-inline-form__consent input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--primary, #2563eb); }
.nc-inline-form__consent a { color: var(--primary, #2563eb); text-decoration: underline; }
.nc-inline-form .site-btn { justify-content: center; height: 48px; }
.nc-inline-form .nc-lead-ok { background: var(--green-soft, #ecfdf5); color: var(--green, #0a7d4b); border-radius: var(--r-sm, 10px); padding: 14px 16px; font-size: 13.5px; font-weight: 600; text-align: center; }
.nc-inline-form .nc-form-error { background: rgba(220,38,38,0.95); color: #fff; border-radius: var(--r-sm, 10px); padding: 10px 14px; font-size: 13px; }
.nc-inline-form .nc-field-error { color: #dc2626; font-size: 12px; }
@media (max-width: 600px) { .nc-inline-form__row { grid-template-columns: 1fr; } }

/* Состояние «заявка отправлена»: прячем все поля формы, показываем только сообщение об успехе.
   Работает для любых лид-форм (cta-band, [nc_call_form], блок nc/contact-form). */
.nc-lead-sent > *:not(.nc-lead-ok):not(.nc-form-ok) { display: none !important; }

/* ── Структурная запись [nc_booking_form] (врач + дата + формат) ── */
.nc-schedule-booking { margin: 18px 0 14px; }
.nc-booking-form { max-width: 520px; }
.nc-booking-form__doc { margin: 0; font-size: 14px; color: var(--text-muted, #64748b); }
.nc-booking-form__doc strong { color: var(--text, #0f172a); }
.nc-booking-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nc-booking-form__field { display: flex; flex-direction: column; gap: 5px; }
.nc-booking-form__field label { font-size: 13px; font-weight: 600; color: var(--text-body, #334155); }
.nc-booking-form__input,
.nc-booking-form__select {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--border, #e2e8f0); border-radius: var(--r-xs, 8px);
  font-size: 15px; font-family: inherit; color: var(--text, #0f172a);
  background: var(--surface, #fff); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.nc-booking-form__input:focus,
.nc-booking-form__select:focus { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.nc-booking-form__select {
  appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
@media (max-width: 600px) { .nc-booking-form__grid { grid-template-columns: 1fr; } }
