@import url('assets/fonts/fonts.css');
/*
Theme Name: Maksymalnie Sauces
Theme URI: https://easy-dev.company
Author: Easy Dev company
Author URI: https://easy-dev.company
Description: Custom theme made by Easy Dev team
Version: 1.0
*/

#inpost-geowidget-wrapper-block>label {
  color: white !important;
}

inpost-geowidget {
  display: block !important;
  width: 100% !important;
  min-height: 400px !important;
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

inpost-geowidget iframe {
  min-height: 400px !important;
}

@media (max-width: 768px) {
  inpost-geowidget {
    min-height: 800px !important; /* було 400px, стало 800px */
  }

  inpost-geowidget iframe {
    min-height: 800px !important; /* також подвоюємо */
  }
}

.leaflet-tooltip {
  color: white !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  border-color: #474747 !important;
  padding: 16px 24px !important;
  user-select: initial !important;
  pointer-events: initial !important;
  z-index: 99999999999999999999999999999999999999 !important;
}

.leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before, .leaflet-tooltip-top:before {
  border-top-color: #474747 !important;
  border-width: 12px !important;
  margin-bottom: -24px !important;
}

#inpost-geowidget-wrapper {
  position: relative !important;
  z-index: 9999;
}

.checkout-inline-error-message {
  color: red;
}

.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: red;
}

.input-text {
  background-color: #2A2A2A;
  height: 48px;
  width: 100%; /* ← замість фіксованої ширини */
  border: 1px solid #2E2E2E;
  font-family: Barlow, serif;
  color: #F6F6F6;
  padding: 8px 12px;
  box-sizing: border-box;
  font-weight: 500;
}
/* Обгортка всіх полів */
.woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* mobile: 1 колонка */
  gap: 16px;
}

@media (min-width: 768px) {
  .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: repeat(2, 1fr); /* md: 2 колонки */
  }

  /* Щоб поле country або email займало всю ширину — зазвичай form-row-wide */
  .woocommerce-billing-fields__field-wrapper .form-row-wide {
    grid-column: span 2;
  }
}
.input-text,
.select2-selection--single {
  width: 100% !important;
  box-sizing: border-box;
}
/* Контейнер замінника select (вигляд поля) */
.select2-container--default .select2-selection--single {
  border-radius: 0;
  background-color: #2A2A2A;
  height: 48px;
  border: 1px solid #2E2E2E;
  font-family: Barlow, serif;
  color: #F6F6F6;
  padding: 8px 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Текст усередині селекту */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #F6F6F6;
  font-size: 14px;
  line-height: normal;
  padding-left: 0;
  padding-right: 0;
}

/* Стрілочка справа */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 8px;
}

/* При фокусі — як input focus, якщо треба */
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #3E3E3E;
  outline: none;
}

/* Контейнер повинен бути на всю ширину */
.select2-container {
  width: 100% !important;
}
/* Сам дропдаун */
.select2-container--default .select2-dropdown {
  background-color: #2A2A2A;
  border: 1px solid #2E2E2E;
  font-family: Barlow, serif;
  color: #7E7E7E;
  box-sizing: border-box;
  border-radius: 0; /* або додай якщо інпути мають округлення */
}

/* Select2 дропдаун та скролбар */
.select2-container--default .select2-dropdown {
  background-color: #2A2A2A;
  border: 1px solid #2E2E2E;
  font-family: Barlow, serif;
  color: #7E7E7E;
  box-sizing: border-box;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #2A2A2A;
  color: #7E7E7E;
  border: 1px solid #2E2E2E;
  font-family: Barlow, serif;
  padding: 8px 12px;
  box-sizing: border-box;
  width: 100%;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 300px;
  overflow-y: auto;
}

.select2-container--default .select2-results__options::-webkit-scrollbar {
  width: 4px;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
  background-color: #848484;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-track {
  background: none;
}

.select2-container--default .select2-results__option {
  padding: 10px 12px;
  color: #7E7E7E;
  font-family: Barlow, serif;
  cursor: pointer;
}

.select2-container--default .select2-results__option--highlighted {
  background-color: #3A3A3A;
  color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: #FFCC00;
  color: black;
}
#order_comments{
  height: 110px;
  resize: none;

}
/* Основна таблиця */
.woocommerce-checkout-review-order-table {
  width: 100%;
  max-width: 752px;
  border-collapse: collapse;
  background-color: #191919;
  color: #F6F6F6;
  font-family: 'Barlow', sans-serif;
  border: 1px solid #3D3D3D;
  margin: 40px auto;
}

/* Заголовки */
.woocommerce-checkout-review-order-table thead th {
  background-color: #191919;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid #3D3D3D;
}

/* Товари */
.woocommerce-checkout-review-order-table tbody .cart_item {
  background-color: #2A2A2A;
}

/* Усі комірки */
.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
  padding: 14px 16px;
  border-bottom: 1px solid #3D3D3D;
  font-size: 15px;
  vertical-align: middle;
}

/* Підсумки (Subtotal, Shipping, Total) */
.woocommerce-checkout-review-order-table tfoot tr {
  background-color: #191919;
  font-weight: 600;
}

/* Total — збільшений розмір */
.woocommerce-checkout-review-order-table tfoot tr.order-total td,
.woocommerce-checkout-review-order-table tfoot tr.order-total th {
  font-size: 16px;
  border-bottom: none;
}

/* Доставка */
.woocommerce-checkout-review-order-table .shipping td {
  font-size: 14px;
  color: #CCCCCC;
  font-style: italic;
}

/* Ціни */
.woocommerce-checkout-review-order-table .woocommerce-Price-amount {
  white-space: nowrap;
  color: #F6F6F6;
}

/* Мобільна адаптація */
@media (max-width: 752px) {
  .woocommerce-checkout-review-order-table td,
  .woocommerce-checkout-review-order-table th {
    padding: 10px 12px;
    font-size: 14px;
  }

  .woocommerce-checkout-review-order-table tfoot tr.order-total td,
  .woocommerce-checkout-review-order-table tfoot tr.order-total th {
    font-size: 15px;
  }
}
.woocommerce-checkout-review-order-table {
  margin: 40px auto;
}
tr.cart_item td {
  width: 50%;
}
.product-total {
  text-align: end;
}
.product-name {
  text-align: start;
}
.woocommerce-checkout-review-order-table tfoot th {
  text-align: start;
}

.woocommerce-checkout-review-order-table tfoot td {
  text-align: end;
}
.woocommerce-form-coupon-toggle {
  display: none;
}
.woocommerce-shipping-fields {
  display: none;
}
/*.form-row.address-field.validate-required.validate-state.form-row-wide {*/
/*  display: none !important;*/
/*}*/
/*.form-row.form-row-wide.address-field.update_totals_on_change.validate-required {*/
/*  display: none !important;*/
/*}*/
.select2-search.select2-search--dropdown{
  display: none;
}
#order_comments{
  margin-top: 16px;
}
.shipping_method {
  margin-right: 10px;
  width:16px;
  height: 16px;
  /* Зміна кольору радіо-кнопки */
  accent-color: #FFCC00; /* Колір галочки (працює в сучасних браузерах) */

  /* Зміна заднього фону */
  background-color: black; /* Колір фону кнопки */
  padding: 5px; /* Додатковий відступ для фону */
  border-radius: 50%; /* Округла форма для кращого вигляду */
}

/* Стилі для checked стану */
.shipping_method:checked {
  background-color: #FFCC00; /* Колір фону при виборі */
  border: 2px solid #FFCC00; /* Додаткова рамка для виділення */
}
#shipping_method.woocommerce-shipping-methods {
  display: flex;
  flex-direction: column; /* Вертикальне розташування */
  list-style: none; /* Прибираємо маркери списку */
  padding: 0; /* Прибираємо відступи */
  margin: 0; /* Прибираємо зовнішні відступи */
}

#shipping_method.woocommerce-shipping-methods li {
  display: flex;
  align-items: center; /* Вирівнювання елементів по вертикалі */
  margin-bottom: 10px; /* Відстань між кнопками */
  justify-content: end;
}

#shipping_method.woocommerce-shipping-methods li:last-child {
  margin-bottom: 0; /* Прибираємо нижній відступ для останнього елемента */
}
label[for="payment_method_imoje_blik"] {
  position: relative;
  display: inline-block;
  padding-right: 50px; /* резерв місця для картинки справа */
  line-height: 1.5;
}

/* Зображення всередині label */
label[for="payment_method_imoje_blik"] img {

  position: absolute;
  left: 1100px;
  top: 50%;
  width: 64px; /* або підбери інший */
  height: auto;
}
/* --- Головний контейнер BLIK --- */
.wc_payment_method.payment_method_imoje_blik {
  margin-bottom: 16px;
  background-color: #2A2A2A;
  border: 1px solid #3D3D3D;
  border-radius: 0;
  padding: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

/* --- Основна радіокнопка та label для BLIK --- */
.wc_payment_method.payment_method_imoje_blik > input[type="radio"] {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  display: block !important;
  accent-color: #FFCC00;
}

.wc_payment_method.payment_method_imoje_blik > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 30px);
  padding: 0;
  cursor: pointer;
  position: static; /* Скидаємо неправильне позиціонування */
}

.wc_payment_method.payment_method_imoje_blik > label img {
  width: 64px;
  height: auto;
  margin-left: 10px;
  position: static; /* Скидаємо неправильне позиціонування */
}

/* --- Внутрішній блок .payment_box для BLIK --- */
.payment_box.payment_method_imoje_blik {
  flex-basis: 100%;
  width: 100%;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.payment_box.payment_method_imoje_blik > p {
  display: none;
}

/* --- Внутрішній платіжний канал BLIK --- */
.wc_payment_method.payment_method_imoje_blik .imoje-channels {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  width: 100%;
  max-width: none;
}

/* --- Стиль для самого каналу (li) --- */
.wc_payment_method.payment_method_imoje_blik .imoje-channel {
  margin-bottom: 8px;
  background-color: #2A2A2A;
  border: 1px solid #FFCC00 !important; /* Гарантовано жовта рамка */
  border-radius: 0;
  padding: 0.7rem;
  width: 100%;
  transition: none;
}

/* --- Примусово відключаємо скейлінг/тіні від зовнішніх стилів --- */
.wc_payment_method.payment_method_imoje_blik .imoje-channel:hover,
.wc_payment_method.payment_method_imoje_blik .imoje-channel:focus,
.wc_payment_method.payment_method_imoje_blik .imoje-channel:focus-within {
  transform: none !important;
  box-shadow: none !important;
}

/* --- Гарантовано прибираємо рамку з label всередині --- */
.wc_payment_method.payment_method_imoje_blik .imoje-channel label {
  border: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
}

/* --- Стилі для посилань --- */
.payment_box.payment_method_imoje_blik .imoje-regulations span a {
  color: #FFCC00;
}
/* Основний контейнер li */
.wc_payment_method.payment_method_imoje_cards {
  margin-bottom: 16px;
  background-color: #2A2A2A;
  border: 1px solid #3D3D3D;
  border-radius: 0;
  padding: 0.7rem; /* Падінг для всього li */
  display: flex;
  align-items: center;
}

/* Стилі для label - головного елемента, який все об'єднує в один рядок */
.wc_payment_method.payment_method_imoje_cards label {
  display: flex; /* Робимо label флекс-контейнером */
  align-items: center; /* Вирівнюємо елементи по центру по вертикалі */
  justify-content: space-between; /* Розносимо елементи: input з текстом зліва, img справа */
  width: 100%; /* Розтягуємо label на всю ширину батьківського li */
  padding: 0; /* Прибираємо можливий внутрішній падінг */
  cursor: pointer; /* Додаємо курсор-поінтер для кращої взаємодії */
  /* Рамка з'явиться, коли label буде "активним" */
}

/* Стилі для рамки та фону label при "активному" стані */
/* Ми імітуємо "активний" стан BLIK, який був на li, на цьому li.
   Якщо "активний" стан також задається на input або якось інакше,
   тоді селектор потрібно буде скоригувати.
   Для прикладу, якщо li є активним, ми стилізуємо його label. */
.wc_payment_method.payment_method_imoje_cards.wc-payment-method-selected label {
  border: 1px solid #FFCC00 !important; /* Жовта рамка для активного label */
}

/* Стилі для input (радіокнопки) */
.wc_payment_method.payment_method_imoje_cards input[type="radio"] {
  width: 16px;
  height: 16px;
  display: block !important;
  accent-color: #FFCC00;
  margin-right: 10px; /* Відступ між радіокнопкою та текстом */
}

/* Стилі для вибраного input (радіокнопки) */
.wc_payment_method.payment_method_imoje_cards input[type="radio"]:checked {
  background-color: #FFCC00; /* Колір фону при виборі */
  border: 2px solid #FFCC00; /* Додаткова рамка для виділення */
}

/* Стилі для зображення */
.wc_payment_method.payment_method_imoje_cards label img {
  width: 64px; /* Розмір зображення */
  height: auto;
  margin-left: 10px; /* Додамо відступ зліва від зображення, якщо потрібно */
}

/* Приховуємо параграф з описом (якщо він є і його потрібно приховати) */
.payment_box.payment_method_imoje_cards p {
  display: none;
}
/* --- Загальні стилі для зовнішнього контейнера платіжного методу (li.wc_payment_method) --- */
/* --- Основний контейнер --- */
/* ===================================================================
   Головний контейнер методу оплати
=================================================================== */
/* ===================================================================
   Головний контейнер методу оплати
=================================================================== */
.wc_payment_method.payment_method_imoje_wallet {
  margin-bottom: 16px;
  background-color: #2A2A2A;
  border: 1px solid #3D3D3D;
  border-radius: 0;
  padding: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

/* ===================================================================
   Стилі для основної радіокнопки "Electronic wallet" та її label
=================================================================== */
.wc_payment_method.payment_method_imoje_wallet > input[type="radio"] {
  margin-right: 10px;
  width: 16px;
  height: 16px;
  display: block !important;
  accent-color: #FFCC00;
}

.wc_payment_method.payment_method_imoje_wallet > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 30px);
  padding: 0;
  cursor: pointer;
}

.wc_payment_method.payment_method_imoje_wallet > label img {
  width: 64px;
  height: auto;
  margin-left: 10px;
}

/* ===================================================================
   Стилі для внутрішнього блоку з опціями (.payment_box)
=================================================================== */
.payment_box.payment_method_imoje_wallet {
  flex-basis: 100%;
  width: 100%;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.payment_box.payment_method_imoje_wallet > p {
  display: none;
}

.payment_box.payment_method_imoje_wallet .imoje-pbl-error {
  display: none;
}

.payment_box.payment_method_imoje_wallet .imoje-regulations span a {
  color: #FFCC00;
}

.imoje-pbl-error.woocommerce-error ul {
  display: flex;
  justify-content: center !important;
}

/* ===================================================================
   Стилі для внутрішніх платіжних каналів (Apple Pay, Google Pay)
=================================================================== */
.wc_payment_method.payment_method_imoje_wallet .imoje-channels {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  width: 100%;
  max-width: none;
}

/* ВИПРАВЛЕННЯ №1: Застосовуємо стилі до всіх li, а не тільки до активних */
.wc_payment_method.payment_method_imoje_wallet .imoje-channel {
  margin-bottom: 8px;
  background-color: #2A2A2A;
  border: 1px solid #FFCC00; /* Жовта рамка тепер є ЗАВЖДИ */
  border-radius: 0;
  padding: 0.7rem;
  width: 100%;
  transition: none; /* Відключаємо плавні переходи */
}

/* ВИПРАВЛЕННЯ №2: Примусово відключаємо скейлінг від зовнішніх стилів */
.wc_payment_method.payment_method_imoje_wallet .imoje-channel:hover,
.wc_payment_method.payment_method_imoje_wallet .imoje-channel:focus,
.wc_payment_method.payment_method_imoje_wallet .imoje-channel:focus-within {
  transform: none !important;
  box-shadow: none !important;
}

/* ВИПРАВЛЕННЯ №3: Застосовуємо стилі до label, щоб повернути контент */
.wc_payment_method.payment_method_imoje_wallet .imoje-channel label {

  border: 1px solid #FFCC00;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100% !important;
  padding: 0;
  align-items: center;
}

/* Input (радіокнопка) всередині каналу */
.wc_payment_method.payment_method_imoje_wallet .imoje-channel input[type="radio"] {
  width: 16px;
  height: 16px;
  display: block !important;
  accent-color: #FFCC00;
  margin-right: 10px;
}

/* Зображення всередині каналу */
.wc_payment_method.payment_method_imoje_wallet .imoje-channel label div img {
  width: 64px;
  height: auto;
}
.imoje-payment-method-container .imoje-channels li label.imoje-active, .imoje-payment-method-container .imoje-channels li label.imoje-c-active:hover, .imoje-payment-method-container__legal span a {
  transform: none !important;
  cursor: pointer;
}
.wc_payment_method.payment_method_imoje_wallet .imoje-channel label input[type="radio"],
.wc_payment_method.payment_method_imoje_blik .imoje-channel label input[type="radio"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  accent-color: #FFCC00 !important;
  margin-right: 10px !important;
}
.imoje-payment-method-container. div ul li label{
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
}
.imoje-payment-method-container .imoje-channels li label.imoje-active, .imoje-payment-method-container .imoje-channels li label.imoje-c-active:hover, .imoje-payment-method-container__legal span a {
  border-color: #FFCC00 !important;
  transform: scale(1.03);
  cursor: pointer;
}
.wc_payment_method.payment_method_imoje_blik.imoje-payment-method-container ul{
  display: none !important;
}

.imoje-channel.imoje-channel-blik.imoje-c-active label{
  width: 100% !important;
  align-items: center;
}
/* --- Стилі для кнопки "Place Order" (вибір за атрибутом name) --- */
[name="woocommerce_checkout_place_order"] {
  /* Flexbox & Alignment */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 44px;
  margin-left: auto;
  margin-right: auto;

  /* Sizing */
  width: 100%;
  max-width: 34.625rem; /* 900px */
  height: 44px;

  /* Spacing */
  padding-left: 0.75rem;  /* 12px */
  padding-right: 0.75rem; /* 12px */
  padding-top: 0.5rem;    /* 8px */
  padding-bottom: 0.5rem; /* 8px */

  /* Typography */
  font-family: 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 600; /* font-semibold */
  text-transform: uppercase;
  color: #000000;

  /* Background */
  /* УВАГА: Замініть #FFCC00 на ваш реальний колір "primary" */
  background-color: #FFCC00;

  /* Animation */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;

  /* Додамо стиль для курсора і приберемо стандартну рамку кнопки */
  cursor: pointer;
  border: none;
}

/* Hover State */
[name="woocommerce_checkout_place_order"]:hover {
  /* УВАГА: Замініть #E6B800 на ваш реальний колір "primary-hover" */
  background-color: #E6B800;
}
.woocommerce-privacy-policy-text{
  font-family: Barlow, serif;
}
.woocommerce-checkout-review-order-table .shipping td {
  font-size: 14px;
  color: #CCCCCC;
  font-style: normal !important;
}

.address-selector li {
  font-size: 12px !important;
}

#address_selectSelected {
  font-size: 14px !important;
  line-height: 14px !important;
}