/* =====================================================================
 * forms.css — попапи форм зворотного зв'язку (перенесення з бойового).
 *
 * Джерела правил (усе взято з бойового plomba.org.ua, значення 1:1):
 *   1. /media/jui/css/design-popup.css      → блок «.modal__*» (консультація)
 *   2. /media/com_rstbox/css/engagebox.css  → мінімум «.rstbox*» (оболонка попапа)
 *   3. /media/com_convertforms/css/convertforms.css → мінімум «.cf-*» (дзвінок)
 *   4. інлайн-<style> бойового <head> → CSS-змінні #cf_3 / #cf_6 / #cf_7
 *
 * Чого тут НЕМАЄ (уже підключено раніше в каскаді, не дублюємо):
 *   #popup-window, #close-popup, #confirmation-modal, #confirm-call,
 *   #confirm-close, #floating-icons-container, .floating-icon, .consult-block
 *   — усе це є в assets/css/original/style.css.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Шрифти попапів.
 * Бойовий тягне Open Sans / Roboto з Google Fonts; на dev їх немає взагалі
 * (усі шрифти падають на Arial). Щоб не міняти типографіку решти сайту —
 * реєструємо ті самі файли бойового (/media/jui/fonts/*) під ВЛАСНИМИ
 * іменами і застосовуємо їх ТІЛЬКИ всередині попапів.
 * ------------------------------------------------------------------- */
@font-face {
    font-family: "PlombaOpenSans";
    src: url("../fonts/OpenSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PlombaOpenSans";
    src: url("../fonts/OpenSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PlombaOpenSans";
    src: url("../fonts/OpenSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "PlombaRoboto";
    src: url("../fonts/Roboto-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------
 * 2. Оболонка попапа — EngageBox (.rstbox), тільки те, що реально працює
 *    на бойових попапах #rstbox_5 / #rstbox_6.
 * ------------------------------------------------------------------- */
.rstboxes { margin: 0; padding: 0; }
.rstboxes, .rstboxes *, .rstboxes *:before, .rstboxes *:after { box-sizing: border-box; }
.rstboxes img { max-width: 100%; }

.rstboxes .rstbox {
    position: fixed;
    display: none;
    z-index: 99999;
    font-size: 14px;
    line-height: 1.4em;
    max-height: 100%;
    overflow: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
.rstboxes .rstbox:focus { outline: 0; }
.rstboxes .rstbox.rstbox_shd_1 { box-shadow: 0 0 2px 2px rgba(0, 0, 1, .3); }
.rstboxes .rstbox.rstbox_center { left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
.rstboxes .rstbox-acc { text-align: center; }
.rstboxes .rstbox-acm .rstbox-container { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }
.rstboxes .rstbox .rstbox-content { overflow: hidden; }

/* Інлайн-стилі бойового модуля EngageBox (data-settings → style="...") */
.rstboxes #rstbox_5,
.rstboxes #rstbox_6 {
    max-width: 650px;
    height: 75%;
    background-color: rgba(246, 246, 246, 1);
    color: rgba(51, 51, 51, 1);
    border: none;
    border-radius: 0;
    padding: 10px;
}

.rstbox-close {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
    background: none;
    color: #aeaeae;
    text-decoration: none !important;
    font-size: 24px;
    font-weight: normal;
    font-family: Tahoma, Arial;
    -webkit-font-smoothing: antialiased;
    transition: all 200ms ease-in-out;
    appearance: none;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}
.rstbox-close:focus { outline: 0; }
.rstbox-close span { font-size: 1em; padding: .4em; line-height: .4em; display: block; }
/* інлайн-<style> бойового: #rstbox_N .rstbox-close:hover */
#rstbox_5 .rstbox-close:hover,
#rstbox_6 .rstbox-close:hover { color: rgba(128, 128, 128, 1) !important; }

/* Підкладка: на бойовому затемнення НЕМАЄ (EngageBox без overlay), тому
   робимо прозорий шар — він лише ловить клік «повз попап», вигляд сторінки
   не змінюється. */
.plomba-popup-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    display: none;
}
.plomba-popup-backdrop.is-open { display: block; }
.plomba-popup-backdrop--consult { z-index: 99998; }
.plomba-popup-backdrop--callback { z-index: 1999; }

/* Блокування прокрутки сторінки, поки відкрито попап
   (клас із design-popup.css бойового). */
body.modal-show { overflow: hidden; }

/* ---------------------------------------------------------------------
 * 3. ConvertForms — мінімум, потрібний обом формам.
 * ------------------------------------------------------------------- */
.convertforms {
    --color-primary: #4285F4;
    --color-success: #0F9D58;
    --color-danger: #DB4437;
    --color-warning: #F4B400;
    --color-default: #444;
    --color-grey: #ccc;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    font-family: var(--font);
    max-width: var(--max-width);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
}
.convertforms *, .convertforms *:before, .convertforms *:after { box-sizing: inherit; }
.convertforms button,
.convertforms form,
.convertforms label,
.convertforms .cf-input {
    height: auto;
    margin: 0;
    max-width: 100%;
    width: 100%;
    line-height: normal;
    border-radius: 0;
    border: none;
    outline: 0;
    text-transform: none;
    font-family: inherit;
    box-shadow: none;
}
.convertforms button:focus,
.convertforms form:focus,
.convertforms label:focus,
.convertforms .cf-input:focus { outline: 0; }

.convertforms .cf-input {
    font-size: 1em;
    color: var(--input-color);
    background-color: var(--input-background-color);
    padding: var(--input-padding);
    border: solid 1px var(--input-border-color);
    border-radius: var(--input-border-radius);
    text-align: var(--input-text-align);
}
.convertforms .cf-input:focus,
.convertforms .cf-input:invalid:focus {
    border: solid 1px var(--input-border-color);
    box-shadow: none;
    color: var(--input-color);
}
.convertforms .cf-input::placeholder { color: var(--input-color); opacity: .5; }
.convertforms textarea.cf-input { overflow: auto; }

.convertforms .cf-fields { margin: -9px; display: flex; flex-wrap: wrap; }
.convertforms .cf-control-group { padding: 9px; max-width: 100%; width: 100%; min-width: 120px; flex-grow: 1; }
.convertforms .cf-control-input { font-size: var(--input-size); }
.convertforms .cf-label {
    color: var(--label-color);
    font-size: var(--label-size);
    margin-bottom: 6px;
    display: block;
    line-height: 1.3;
    font-weight: normal;
    width: auto;
}
.convertforms .cf-label .cf-required-label { color: var(--color-danger); font-weight: 400; }
.convertforms .cf-content-wrap,
.convertforms .cf-form-wrap { padding: 18px; }
.convertforms .cf-one-half { width: 50%; }
.convertforms .cf-col-16 { width: 100%; }
.convertforms .cf-width-auto { width: auto; }
.convertforms .cf-text-center { text-align: center; }
/* .cf-text-left у ConvertForms НЕ визначений — на бойовому кнопка
   «Замовити дзвінок» успадковує text-align:center від #popup-window.
   Тому власного правила .cf-text-left тут свідомо немає. */

.convertforms .cf-btn { position: relative; cursor: pointer; transition: all 200ms ease; }
.convertforms .cf-btn:active,
.convertforms .cf-btn:focus,
.convertforms .cf-btn:hover { background-image: none; border: none; }
.convertforms .cf-btn.cf-btn-style-flat:hover { opacity: .8; }

/* honeypot — має бути невидимим і для людини, і для скрінрідера */
.cf-field-hp { display: none !important; position: absolute !important; left: -9000px !important; }

/* ---------------------------------------------------------------------
 * 4. CSS-змінні форм — 1:1 з інлайн-<style> бойового <head>.
 *    #cf_3 — «Замовлення дзвінка», #cf_6/#cf_7 — «Консультація та зразки».
 * ------------------------------------------------------------------- */
#cf_3 {
    --font: "PlombaOpenSans", "Open Sans", Arial, "Arial Unicode MS", Helvetica, sans-serif;
    --max-width: 600px;
    --background-color: rgba(255, 255, 255, 1);
    --border-radius: 0px;
    --label-color: #444444;
    --label-size: 16px;
    --input-color: #444444;
    --input-text-align: left;
    --input-background-color: #ffffff;
    --input-border-color: #cccccc;
    --input-border-radius: 2px;
    --input-size: 15px;
    --input-padding: 6px 6px;
}
#cf_6 {
    --font: Arial, "Arial Unicode MS", Helvetica, sans-serif;
    --max-width: 650px;
    --background-color: rgba(255, 255, 255, 1);
    --border-radius: 0px;
    --label-color: #888888;
    --label-size: 15px;
    --input-color: #888888;
    --input-text-align: left;
    --input-background-color: #ffffff;
    --input-border-color: #cccccc;
    --input-border-radius: 3px;
    --input-size: 15px;
    --input-padding: 10px 10px;
}
#cf_7 {
    --font: Arial, "Arial Unicode MS", Helvetica, sans-serif;
    --max-width: 650px;
    --background-color: rgba(246, 246, 246, 1);
    --border-radius: 0px;
    --label-color: #888888;
    --label-size: 15px;
    --input-color: #888888;
    --input-text-align: left;
    --input-background-color: #ffffff;
    --input-border-color: #cccccc;
    --input-border-radius: 3px;
    --input-size: 15px;
    --input-padding: 10px 10px;
}

/* Кнопка «Замовити дзвінок» — на бойовому інлайн-стиль з налаштувань форми */
#popup-window .cf-btn {
    border-radius: 2px;
    padding: 13px 20px;
    color: #ffffff;
    font-size: 16px;
    background-color: #e37d39;
    /* на бойовому кнопки в цій зоні мають margin-bottom від .bd-tagstyles */
    margin: 0 0 10px;
}

/*
 * УВАГА (успадкована типографіка бойового).
 * На бойовому попап дзвінка лежить усередині модуля позиції footer1
 * (.bd-blockcontent.bd-tagstyles), тому успадковує від тієї зони
 * font-size:13px, line-height:1.42857 і color:#dddddd. Повторюємо 1:1,
 * інакше попап «поїде» по висоті й розмірах кнопки закриття.
 *
 * ПОБІЧНИЙ ЕФЕКТ БОЙОВОГО: вступний рядок «Залиште свій номер…» через
 * колір #dddddd на білому тлі майже не читається (контраст ~1.2:1).
 * Це дефект бойового, не наш. ЩОБ ВИПРАВИТИ — поміняйте color нижче
 * на #555555 (одна строка), решта попапа не зміниться.
 */
#popup-window {
    font-size: 13px;
    /* саме в px: на бойовому значення успадковується вниз як довжина,
       тому кнопка #close-popup має ту саму висоту рядка, що й попап */
    line-height: 18.5714px;
    color: #dddddd;
}

/* ---------------------------------------------------------------------
 * 5. «Отримати консультацію та замовити зразки» — design-popup.css бойового.
 *    Шрифти замінені на локальні PlombaOpenSans / PlombaRoboto (див. п.1).
 * ------------------------------------------------------------------- */
.modalbox {
    --color-dark: #444;
    --color-brand: #fa8b23;
    --color-txt: #808080;
    --color-border: #ccc;
}
.modal__inner {
    width: 100%;
    max-width: 638px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}
.modal__body {
    overflow: hidden;
    overflow-y: auto;
    background-color: #f6f6f6;
    color: var(--color-dark);
    font: 400 18px/1.2 "PlombaOpenSans", "Open Sans", Arial, sans-serif;
    padding-top: 47px;
    padding-bottom: 42px;
    text-align: left;
}
.modal__body a { color: var(--color-brand); text-decoration: underline; }
.modal__body a:hover { text-decoration: none; }
.modal__header { text-align: center; padding-left: 40px; padding-right: 40px; }
.modal__title {
    font: 700 36px/1.17 "PlombaRoboto", Roboto, Arial, sans-serif;
    text-transform: uppercase;
    margin: 0 0 5px;
    color: var(--color-dark);
}
.modal__subtitle { color: var(--color-txt); line-height: 1.33; }
.modal__strong { font-weight: 700; color: var(--color-brand); }
.modal__block { padding-bottom: 20px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
.modal__px { padding-left: 20px; padding-right: 20px; }
.modal__caption {
    text-align: center;
    font: 700 18px/1.5 "PlombaRoboto", Roboto, Arial, sans-serif;
    margin: 0 0 12px;
}
.modal__btn-group { display: flex; justify-content: center; gap: 8px; }
@media (max-width: 650px) {
    .modal__btn-group { flex-wrap: wrap; }
}
.modal__btn { flex-grow: 1; max-width: 180px; margin: 0; }
.modal__btn input { display: none; }
.modal__btn input:checked + .modal__btn-content { border-color: var(--color-brand); }
.modal__btn-content {
    border: 1px solid #ccc;
    border-radius: 0.375em;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.625em;
    padding: 0.625em;
    height: 100%;
    min-height: 3.75em;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.3s;
}
.modal__btn-content:hover .modal__btn-icon { transform: translateY(-3px); }
.modal__btn-icon { max-width: 1.625em; transition: transform 0.3s; }
.modal__btn-icon img, .modal__btn-icon svg { max-width: 100%; height: auto; display: block; }
.modal__content { padding-left: 42px; padding-right: 42px; }
.modal__center { text-align: center; }
.modal__form-note { font-size: 14px; line-height: 1.14; color: #989898; margin-bottom: 8px; }
.modal__form-inputs { display: flex; flex-direction: column; row-gap: 12px; }
.modal__form-control {
    width: 100%;
    display: block;
    background-color: #fff;
    border: 1px solid var(--color-border);
    height: 44px;
    padding: 0 15px;
    font: 400 16px/1.25 "PlombaOpenSans", "Open Sans", Arial, sans-serif;
    transition: border-color 0.3s;
    border-radius: 0;
    color: #444;
}
.modal__form-control:focus { border-color: var(--color-brand); outline-color: var(--color-brand); }
.modal__form-control::placeholder { color: #989898; opacity: 1; }
.modal__form-footer { display: flex; flex-direction: column; row-gap: 20px; margin-top: 20px; }
.modal__form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    background-color: var(--color-brand);
    color: #fff;
    font-size: 16px;
    padding: 15px 23px;
    border: 1px solid var(--color-brand);
    cursor: pointer;
    transition: background-color 0.3s;
    width: auto;
    font-family: inherit;
    border-radius: 0;
}
.modal__form-btn:hover .modal__form-btn-icon { transform: translateY(-3px); }
.modal__form-btn:disabled { background-color: var(--color-border); border-color: var(--color-border); pointer-events: none; }
.modal__form-btn-icon { max-width: 18px; transition: transform 0.3s; }
.modal__form-btn-icon img { display: block; }
.modal__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.358;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.modal__checkbox:hover .modal__checkbox-mark { border-color: var(--color-brand); }
.modal__checkbox input { display: none; }
.modal__checkbox input:checked + .modal__checkbox-mark img { transform: scale(1); }
.modal__checkbox-mark {
    width: 22px;
    height: 22px;
    border: 1px solid var(--color-border);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: border-color 0.3s;
}
.modal__checkbox-mark img { max-width: 15px; height: auto; transform: scale(0); transition: transform 0.3s; }

@media (max-width: 575px) {
    .modal__body { font-size: 16px; padding-top: 38px; padding-bottom: 38px; }
    .modal__title { font-size: 28px; }
    .modal__caption { font-size: 17px; margin-bottom: 10px; }
    .modal__btn-group { gap: 5px; }
    .modal__btn { max-width: 130px; }
    .modal__btn-content { font-size: 14px; }
    .modal__px, .modal__content { padding-left: 15px; padding-right: 15px; }
    .modal__form-note { font-size: 13px; }
    .modal__form-inputs { row-gap: 10px; }
    .modal__form-footer { margin-top: 18px; row-gap: 18px; }
    .modal__form-btn { width: 100%; }
}

/* ---------------------------------------------------------------------
 * 6. Стики з Contact Form 7: обгортки, помилки, відповідь сервера.
 *    Вигляд повідомлень повторює .cf-response ConvertForms (зелена/червона
 *    плашка на всю ширину форми).
 * ------------------------------------------------------------------- */
#popup-window .wpcf7-form-control-wrap,
.rstboxes .wpcf7-form-control-wrap { display: block; }

#popup-window .wpcf7-form,
.rstboxes .wpcf7-form { width: 100%; }

#popup-window .wpcf7-spinner,
.rstboxes .wpcf7-spinner { margin: 8px auto 0; display: block; }

#popup-window .wpcf7-not-valid-tip,
.rstboxes .wpcf7-not-valid-tip {
    display: block;
    color: #DB4437;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 4px;
    text-align: left;
}
#popup-window .wpcf7-not-valid,
.rstboxes .wpcf7-not-valid { border-color: #DB4437 !important; }

#popup-window .wpcf7-response-output,
.rstboxes .wpcf7-response-output {
    color: #fff;
    margin: 0 0 18px;
    padding: 10px 15px;
    width: 100%;
    border: none;
    border-radius: 2px;
    text-align: center;
    font-size: 15px;
    background-color: #DB4437;
}
/* Зелена плашка на успіх. Класи sent + resetting: CF7 після відправки
   на мить перемикає форму в resetting (очищає поля) і лише потім у sent —
   без resetting повідомлення блимає. */
#popup-window .wpcf7 form.sent .wpcf7-response-output,
#popup-window .wpcf7 form.resetting .wpcf7-response-output,
.rstboxes .wpcf7 form.sent .wpcf7-response-output,
.rstboxes .wpcf7 form.resetting .wpcf7-response-output { background-color: #0F9D58; }

/* На бойовому форма консультації має cf-success-hideform:
   після успішної відправки лишається тільки зелене повідомлення. */
.rstboxes .wpcf7 form.sent .modal__px,
.rstboxes .wpcf7 form.sent .modal__form-note,
.rstboxes .wpcf7 form.sent .modal__form-inputs,
.rstboxes .wpcf7 form.sent .modal__form-footer,
.rstboxes .wpcf7 form.sent .modal__content > .modal__caption,
.rstboxes .wpcf7 form.resetting .modal__px,
.rstboxes .wpcf7 form.resetting .modal__form-note,
.rstboxes .wpcf7 form.resetting .modal__form-inputs,
.rstboxes .wpcf7 form.resetting .modal__form-footer,
.rstboxes .wpcf7 form.resetting .modal__content > .modal__caption { display: none; }
.rstboxes .wpcf7 form.sent .modal__header,
.rstboxes .wpcf7 form.resetting .modal__header { border-bottom: none; margin-bottom: 0; }
.rstboxes .wpcf7 form.sent .wpcf7-response-output,
.rstboxes .wpcf7 form.resetting .wpcf7-response-output { margin: 20px 42px 0; width: auto; }

/* Порядок: у CF7 плашка відповіді стоїть у кінці форми — піднімаємо її
   нагору, як .cf-response у ConvertForms. Показуємо, лише коли в ній є текст
   (CF7 чистить її на початку кожної нової відправки). */
#popup-window .wpcf7 form,
.rstboxes .wpcf7 form { display: flex; flex-direction: column; }
#popup-window .wpcf7 form > .wpcf7-response-output,
.rstboxes .wpcf7 form > .wpcf7-response-output { order: -1; }
#popup-window .wpcf7-response-output:empty,
.rstboxes .wpcf7-response-output:empty { display: none; }

/* Телефон: підсвітка неповного номера (замовник 10.09.2026, формат +380XXXXXXXXX). */
input.plomba-tel-invalid {
	border-color: #d63638 !important;
	background-color: #fff6f6;
}
input.plomba-tel-ok {
	border-color: #2e9e5b !important;
}
.plomba-tel-hint {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: #d63638;
}
