/* CMS-попапи (.popup: «Замовити дзвінок», «Замовити авто», форми з /modals/) у стилі дизайн-системи.
   Попап лежить поза .ds, тому токени продубльовано тут (значення = ds.css; міняти разом).
   Темна тема: html[data-ds-dark] (готові сторінки ДС) або body.catalog-dark-page (каталог).
   Підключається після main.css, специфічність вища за старі правила .popup … / .form__… */
.popup {
  --dp-surface: #fff; --dp-text: #222; --dp-muted: #5d625b; --dp-line: #e3e6e0; --dp-border: #858c80;
  --dp-field: #fff; --dp-accent: #157a25; --dp-danger: #b42a2a; --dp-green: #22b235; --dp-lime: #3ddc4f; --dp-ink: #0a0c0b;
}
html[data-ds-dark] .popup, body.catalog-dark-page .popup {
  --dp-surface: #141816; --dp-text: #f1f4ef; --dp-muted: rgba(255,255,255,.64); --dp-line: rgba(255,255,255,.12); --dp-border: rgba(255,255,255,.34);
  --dp-field: rgba(255,255,255,.06); --dp-accent: #3ddc4f; --dp-danger: #f26a6a;
}
html body .popup:not(.popup_loader) { background-color: rgba(6, 9, 7, .78); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* вікно */
html body .popup .popup_container:has(> .popup_header) {
  position: relative; max-width: 460px; border: 1px solid var(--dp-line); border-radius: 6px; background: var(--dp-surface); color: var(--dp-text); box-shadow: none;
  font-family: Manrope, system-ui, sans-serif;
}
html body .popup .popup_container:has(> .popup_header)::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 0; --c: 20px;
  background: linear-gradient(var(--dp-green), var(--dp-green)) left top / var(--c) 2px no-repeat, linear-gradient(var(--dp-green), var(--dp-green)) left top / 2px var(--c) no-repeat,
              linear-gradient(var(--dp-green), var(--dp-green)) right bottom / var(--c) 2px no-repeat, linear-gradient(var(--dp-green), var(--dp-green)) right bottom / 2px var(--c) no-repeat;
}
html body .popup .popup_header { padding: 30px 28px 0; text-align: left; background: transparent; border: 0; color: var(--dp-text); position: relative; z-index: 1; }
html body .popup .popup_header .form__title { max-width: none; margin: 0 40px 6px 0; font: 800 22px/1.25 Manrope, system-ui, sans-serif; letter-spacing: -.01em; text-transform: none; text-align: left; color: var(--dp-text); }
html body .popup .popup_header + .popup_content { padding: 0 28px 28px; background: transparent; position: relative; z-index: 1; }
html body .popup .popup_header + .popup_content .form__cta { margin: 0 0 20px; text-align: left; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--dp-muted); }
html body .popup .popup_header + .popup_content .form__inputs { display: grid; gap: 16px; }
html body .popup .popup_header + .popup_content .form__button { margin-top: 16px; }

/* хрестик: квадрат 36×36 з рамкою, як .ds-modal__close */
html body .popup .popup_container:has(> .popup_header) > .popup_close {
  position: absolute; z-index: 2; top: 14px; right: 14px; float: none; margin: 0; width: 36px; height: 36px; border: 1px solid var(--dp-border); border-radius: 3px; background: transparent !important; opacity: 1; cursor: pointer;
  transition: border-color .3s, color .3s; color: var(--dp-text);
}
html body .popup .popup_container:has(> .popup_header) > .popup_close::before,
html body .popup .popup_container:has(> .popup_header) > .popup_close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: currentColor; transform: rotate(45deg); }
html body .popup .popup_container:has(> .popup_header) > .popup_close::after { transform: rotate(-45deg); }
html body .popup .popup_container:has(> .popup_header) > .popup_close:hover { border-color: var(--dp-green); color: var(--dp-accent); opacity: 1; }
html body .popup .popup_container:has(> .popup_header) > .popup_close:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 2px; }

/* поля */
html body .popup .popup_content .form__field-label { display: block; margin: 0 0 8px; font: 700 14px/1.3 Manrope, system-ui, sans-serif; color: var(--dp-text); }
html body .popup .popup_content .form__field-label .required { color: var(--dp-danger); font-style: normal; }
html body .popup .popup_content .form__input input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
html body .popup .popup_content .form__input select,
html body .popup .popup_content .form__input textarea,
html body .popup .popup_content input[type="text"]:not([name="website"]), html body .popup .popup_content input[type="tel"], html body .popup .popup_content input[type="email"] {
  width: 100%; min-height: 44px; height: auto; padding: 0 14px; border: 1px solid var(--dp-border) !important; border-radius: 6px; background: var(--dp-field) !important; color: var(--dp-text);
  font: 500 16px/1.4 Manrope, system-ui, sans-serif; box-shadow: none !important; -webkit-appearance: none; appearance: none; transition: border-color .3s, background .3s;
}
html body .popup .popup_content .form__input textarea { min-height: 112px; padding: 10px 14px; resize: vertical; }
html body .popup .popup_content .form__input input::placeholder, html body .popup .popup_content .form__input textarea::placeholder { color: var(--dp-muted); opacity: 1; }
html body .popup .popup_content .form__input input:hover:not(:focus), html body .popup .popup_content .form__input textarea:hover:not(:focus) { border-color: var(--dp-text) !important; }
html body .popup .popup_content .form__input input:focus, html body .popup .popup_content .form__input textarea:focus, html body .popup .popup_content .form__input select:focus {
  outline: 2px solid var(--dp-accent); outline-offset: 1px; border-color: var(--dp-accent) !important; box-shadow: none !important;
}

/* кнопка відправлення: як .ds-btn--primary (чорний на зеленому) */
html body .popup .popup_content .form__button .button, html body .popup .popup_content button[type="submit"].button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 6px;
  background: var(--dp-green); color: var(--dp-ink); font: 700 15px/1 Manrope, system-ui, sans-serif; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer;
  transition: background .3s, color .3s;
}
html body .popup .popup_content .form__button .button:hover { background: var(--dp-lime); color: var(--dp-ink); transform: none; box-shadow: none; }
html body .popup .popup_content .form__button .button:focus-visible { outline: 2px solid var(--dp-accent); outline-offset: 2px; }
html body .popup .popup_content a:not(.button) { color: var(--dp-accent); }

/* мобільна шторка: квадратні верхні кути за стандартом ДС (радіус 6) */
@media (max-width: 899.98px) {
  html body .popup:not(.popup_loader) .popup_shell:not(.popup_shell_loader) > .popup_container { border-radius: 6px 6px 0 0; }
  html body .popup .popup_header { padding: 26px 20px 0; }
  html body .popup .popup_header + .popup_content { padding: 0 20px 24px; }
}
@media (prefers-reduced-motion: reduce) { html body .popup .popup_container { animation: none !important; } }