@charset "UTF-8";
/* Стилі плагіна syrocarpaty-forms-harmony. Винесено з блоку <style id="syro-forms-harmony"> 11.10.2026 без змін у правилах. */
/* ---------------------------------------------------------------------------
 * 1. ПОЛЯ ВВОДУ
 * Ловимо і кошик, і чекаут, і форму відгуку, і Contact Form 7. Пошук у каталозі
 * (.syro-search__field) виключаємо — він уже оформлений як чипс.
 * ------------------------------------------------------------------------- */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce-page input.input-text,
.woocommerce-page textarea,
.woocommerce-page select,
#respond input[type=text],
#respond input[type=email],
#respond input[type=url],
#respond textarea,
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 textarea,
.wpcf7 select,
/* CF7 не завжди виводить type — надійніше чіплятись за його власні класи.
   Кнопку (.wpcf7-submit) сюди НЕ беремо: у неї вже стоять класи теми btn_orange. */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select{
  background:#2e2e40 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:8px !important;
  padding:11px 14px !important;
  font-family:inherit;
  font-size:15px;
  line-height:22px;
  box-shadow:none !important;
  transition:border-color .15s,box-shadow .15s;
}

.woocommerce input.input-text::placeholder,
.woocommerce textarea::placeholder,
.woocommerce-page input.input-text::placeholder,
.woocommerce-page textarea::placeholder,
#respond input::placeholder,
#respond textarea::placeholder,
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{color:#9aa0a6 !important;opacity:1}

.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-page input.input-text:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus,
#respond input:focus,
#respond textarea:focus,
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus{
  border-color:#f1a416 !important;
  box-shadow:0 0 0 3px rgba(241,164,22,.18) !important;
  outline:none !important;
}

/* Списки: стрілку малюємо самі, бо системна на темному тлі не видно */
.woocommerce select,
.woocommerce-page select,
.wpcf7 select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f1a416' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:18px 18px !important;
  padding-right:40px !important;
}
.woocommerce select option,
.wpcf7 select option{background:#2e2e40;color:#fff}

/* ---------------------------------------------------------------------------
 * 1b. СПИСКИ НОВОЇ ПОШТИ — це select2, а не звичайний <select>
 * Справжній <select> схований (select2-hidden-accessible), а видиме поле —
 * власна розмітка select2. Тому правила вище на нього не діяли, і «Виберіть
 * місто» / «Виберіть відділення» лишались білими. Випадний список select2
 * малює в кінці <body>, поза формою, — його теж не можна скоупити у форму.
 * ------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  background:#2e2e40 !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:8px !important;
  height:auto !important;
  padding:10px 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#fff !important;line-height:22px !important;padding:0 !important}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#9aa0a6 !important}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  height:100% !important;top:0 !important;right:10px !important}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:#f1a416 transparent transparent transparent !important}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent #f1a416 transparent !important}
.select2-container--default.select2-container--open .select2-selection--single{
  border-color:#f1a416 !important;box-shadow:0 0 0 3px rgba(241,164,22,.18) !important}

/* Випадний список */
.select2-container--default .select2-dropdown,
.select2-container--default .select2-results{background:#2e2e40 !important;
  border-color:rgba(255,255,255,.18) !important;border-radius:8px}
.select2-container--default .select2-results__option{background:#2e2e40 !important;color:#fff !important}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true]{
  background:#f1a416 !important;color:#252534 !important}
.select2-container--default .select2-search--dropdown{background:#2e2e40 !important;padding:8px}
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:#252534 !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;border-radius:6px;padding:8px 10px}
.select2-container--default .select2-selection--single .select2-selection__clear{color:#9aa0a6 !important}

/* Поле телефону з прапорцем (intl-tel-input): підкладка теж має бути темною.
   Відступ зліва повертаємо — інакше загальне правило вище затирає місце,
   зарезервоване під прапорець, і той наїжджає на «+380». */
.iti input.input-text,.iti input[type=tel]{padding-left:52px !important}
.iti,.iti__flag-container{background:transparent}
.iti__country-list{background:#2e2e40 !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important}
.iti__country:hover,.iti__country.iti__highlight{background:rgba(241,164,22,.2) !important}
.iti__divider{border-color:rgba(255,255,255,.18) !important}

/* 1.1.0, 11.10.2026 — ПРАПОРЕЦЬ УКРАЇНИ БЕЗ СПРАЙТА ВСІХ КРАЇН.
   Бібліотека малює прапорець шматком спільної картинки на 240 країн:
   flags@2x.png, 161 КБ на телефоні, з кожної сторінки, де є поле телефону
   (тобто з кожної — форма зворотного звʼязку в підвалі). Замір прода 10.10:
   це 3 с на 3G і 6 с на EDGE заради жовто-блакитного прямокутника 20x14.
   Обраний прапорець України малюємо тут же, вбудованим SVG. Список країн
   схований (display:none), доки його не відкрили, — а браузер не вантажить
   тло невидимих елементів. Тож спрайт приїде лише тому, хто відкрив список
   або обрав іншу країну: правила бібліотеки для них не чіпаємо. */
.iti__selected-flag .iti__flag.iti__ua{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath fill='%230057b7' d='M0 0h20v7H0z'/%3E%3Cpath fill='%23ffd700' d='M0 7h20v7H0z'/%3E%3C/svg%3E") !important;
  background-position:0 0 !important;background-size:20px 14px !important;background-repeat:no-repeat !important}

/* ---------------------------------------------------------------------------
 * 2. КНОПКИ
 * «Підтвердити замовлення» приходила фіолетовою — це типовий колір WooCommerce
 * за замовчуванням, який ніхто не перекривав.
 * ------------------------------------------------------------------------- */
.woocommerce #place_order,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce-page #place_order,
.woocommerce-page button.button,
.woocommerce-page a.button,
.woocommerce-page input.button,
#respond input#submit,
.wpcf7 input[type=submit],
.wpcf7 button[type=submit]{
  background:#f1a416 !important;
  color:#252534 !important;
  border:0 !important;
  border-radius:10px !important;
  padding:13px 28px !important;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  line-height:20px;
  text-shadow:none !important;
  cursor:pointer;
  transition:background .15s;
}
.woocommerce #place_order:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce-page #place_order:hover,
.woocommerce-page button.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page input.button:hover,
#respond input#submit:hover,
.wpcf7 input[type=submit]:hover,
.wpcf7 button[type=submit]:hover{background:#df950d !important;color:#252534 !important}

/* ---------------------------------------------------------------------------
 * 3. ПРАПОРЦІ Й ПЕРЕМИКАЧІ — були системні сині
 * ------------------------------------------------------------------------- */
.woocommerce input[type=radio],
.woocommerce input[type=checkbox],
.woocommerce-page input[type=radio],
.woocommerce-page input[type=checkbox],
#respond input[type=checkbox],
.wpcf7 input[type=radio],
.wpcf7 input[type=checkbox]{accent-color:#f1a416;width:17px;height:17px;cursor:pointer}

/* ---------------------------------------------------------------------------
 * 4. ПАНЕЛІ Й ПОВІДОМЛЕННЯ
 * Світлі плашки WooCommerce (купон, «дані будуть використані», помилки)
 * на темному сайті виглядають як чужі вставки.
 * ------------------------------------------------------------------------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice,
.woocommerce-checkout-payment,
.woocommerce ul.order_details,
#payment,
#payment ul.payment_methods,
#payment div.form-row{
  background:#2e2e40 !important;
  color:#fff !important;
  border-radius:10px;
}
/* ЛІВИЙ ВІДСТУП 56px, А НЕ 20px — і це виправлення нашої ж поломки, знайдене
   14.08 знімком чекауту. WooCommerce малює в цих нотатках іконку через
   `::before` з `position:absolute; left:24px`, а місце під неї тримається
   штатним `padding-left:3.5em`. Ми задали `padding:16px 20px` одним рядком і
   тим самим той відступ прибрали — іконка лягла ПОВЕРХ першої літери, і на
   чекауті читалось «⊙абір «Карпатський» додано до кошика» замість «Набір».
   Виміряно в браузері: іконка на 24px, текст починався з 20px.
   Правило лишається одним рядком, просто з чотирма значеннями. */
.woocommerce-info,.woocommerce-message{border-top:3px solid #f1a416 !important;padding:16px 20px 16px 56px !important}
.woocommerce-error{border-top:3px solid #c02828 !important;padding:16px 20px 16px 56px !important}
.woocommerce-info::before,.woocommerce-message::before{color:#f1a416 !important}
.woocommerce-error::before{color:#c02828 !important}
.woocommerce-info a,.woocommerce-message a,.woocommerce-error a{color:#f1a416 !important}

#payment ul.payment_methods{border-bottom:1px solid rgba(255,255,255,.12) !important}
#payment div.payment_box{background:#252534 !important;color:#bbb !important;border-radius:8px}
#payment div.payment_box::before{border-bottom-color:#252534 !important}

/* ---------------------------------------------------------------------------
 * 5. ПІДПИСИ Й ЗІРОЧКИ ОБОВ'ЯЗКОВОСТІ
 * ------------------------------------------------------------------------- */
.woocommerce label,.woocommerce-page label,#respond label,.wpcf7 label{color:#fff}
.woocommerce .required,.woocommerce-page .required,#respond .required{color:#f1a416;border:0}
.woocommerce-privacy-policy-text,.woocommerce-terms-and-conditions-wrapper{color:#bbb}
.woocommerce-privacy-policy-text a{color:#f1a416}

/* ---------------------------------------------------------------------------
 * 6. БЛОК ВІДГУКІВ
 * Був схожий на технічну заглушку: сірий квадрат замість аватара, ледь видимі
 * ім'я й дата, сам відгук у чужій рамці.
 * ------------------------------------------------------------------------- */
.woocommerce #reviews #comments ol.commentlist{padding:0;list-style:none}
.woocommerce #reviews #comments ol.commentlist li{margin:0 0 22px;padding:0}
.woocommerce #reviews #comments ol.commentlist li img.avatar{
  width:44px;height:44px;border-radius:50%;background:#2e2e40;padding:0;border:0;position:static;float:left}
.woocommerce #reviews #comments ol.commentlist li .comment-text{
  background:#2e2e40;border:0 !important;border-radius:12px;padding:18px 22px;margin-left:60px}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta{
  color:#fff;font-size:15px;margin-bottom:8px}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__author{
  color:#fff;font-weight:600}
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta time,
.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta .woocommerce-review__published-date{
  color:#9aa0a6;font-size:13px}
.woocommerce #reviews #comments ol.commentlist li .comment-text p{color:#e6e6e6}
.woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating{color:#f1a416;float:none;margin-bottom:6px}
.woocommerce #review_form #respond{background:transparent;padding:0}
.woocommerce p.stars a{color:#f1a416}
.woocommerce #reviews #comments h2{color:#fff}