/* =========================================================
   CUSTOM CHECKOUT STYLE — класичний [woocommerce_checkout]
   під вигляд двоколонкового блокового чекауту
   Додати через: Зовнішній вигляд → Кастомізатор → Додатковий CSS
   (або в style.css дочірньої теми)
   ========================================================= */

/* --- Загальний контейнер: дві колонки як у block checkout --- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
    box-sizing: border-box;
}

/* Safety-net: якщо якийсь вкладений елемент все ж спробує "розпирати"
   контейнер довгим текстом (адреси відділень Нової Пошти тощо),
   сторінка не повинна горизонтально скролитись цілком. */
.woocommerce-checkout {
    overflow-x: hidden;
    max-width: 100%;
}

@media (min-width: 992px) {
    .woocommerce-checkout form.checkout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 32px;
        align-items: start;
        max-width: 1100px;
        margin: 0 auto;
    }

    .woocommerce-checkout #customer_details {
        grid-column: 1;
        grid-row: 1 / span 3;
    }

    .woocommerce-checkout #order_review_heading,
    .woocommerce-checkout #order_review {
        grid-column: 2;
        grid-row: 1 / span 3;
        position: sticky;
        top: 24px;
    }
}

@media (max-width: 991px) {
    .woocommerce-checkout form.checkout {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-width: 100%;
    }
}

/* --- Картка "Детали заказа" справа --- */
.woocommerce-checkout #order_review_heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.woocommerce-checkout #order_review {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 20px;
}

.woocommerce-checkout table.shop_table {
    border: none;
    margin: 0;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
    border: none;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.woocommerce-checkout table.shop_table tr.order-total th,
.woocommerce-checkout table.shop_table tr.order-total td {
    border-top: 1px solid #222;
    border-bottom: none;
    font-size: 18px;
    font-weight: 700;
}

/* --- Поля вводу: заокруглені, як на скріні блокового чекауту --- */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-checkout .select2-selection {
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    height: auto !important;
    font-size: 15px;
    box-shadow: none !important;
    transition: border-color .15s ease;
    box-sizing: border-box !important;
    max-width: 100%;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #6b46ff !important;
    outline: none;
}

.woocommerce-checkout .form-row {
    margin-bottom: 14px;
    /* КЛЮЧОВИЙ ФІКС: flex-елементи мають min-width:auto за замовчуванням,
       тобто НЕ можуть стиснутись менше за ширину свого вмісту.
       Довгий текст (наприклад, повна адреса відділення Нової Пошти)
       інакше "розпирає" картку і виштовхує її за межі екрана на мобільних,
       навіть попри max-width:100% на самому .form-row. */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.woocommerce-checkout label {
    font-size: 13px;
    color: #555;
    margin-bottom: 4px;
    display: inline-block;
}

/* --- Заголовки секцій --- */
.woocommerce-checkout #customer_details h3,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 14px;
}

/* --- Картка-повідомлення "Клиент соответствует зоне ..." --- */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
    border: 1px solid #6b46ff;
    border-radius: 10px;
    background: #f5f2ff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Поля Нової Пошти (город/отделение) — той самий стиль select --- */
.woocommerce-checkout #shipping_novaposhta_city_field select,
.woocommerce-checkout #shipping_novaposhta_warehouse_field select,
.woocommerce-checkout select[name*="novaposhta"],
.woocommerce-checkout select[name*="nova_poshta"] {
    border: 1px solid #ccc !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
}

/* --- Кнопка "Подтвердить заказ" --- */
.woocommerce-checkout #place_order {
    width: 100%;
    background: #111;
    color: #fff;
    border-radius: 8px;
    padding: 16px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    margin-top: 16px;
}

.woocommerce-checkout #place_order:hover {
    background: #333;
}

/* --- Ліва колонка: суцільний блок, col-1/col-2 більше не стоять поруч --- */
.woocommerce-checkout .col2-set {
    display: block;
    width: 100%;
}

/* Розгортаємо вкладені обгортки полів, щоб form-row стали прямими flex-елементами */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Кожне поле — 50% ширини, по 2 в ряд */
.woocommerce-checkout #customer_details .form-row {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
    box-sizing: border-box;
    min-width: 0;
}

/* Поля, що мають бути на всю ширину: textarea, wide-поля WooCommerce, Страна/регион */
.woocommerce-checkout #customer_details .form-row-wide,
.woocommerce-checkout #customer_details p#order_comments_field,
.woocommerce-checkout #customer_details .form-row:has(textarea) {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* На вузьких екранах — всі поля в один стовпчик */
@media (max-width: 767px) {
    .woocommerce-checkout #customer_details .form-row {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
}

/* --- Точкові правки конкретних полів --- */

/* Телефон — явно 50% (про всяк випадок, якщо тема ставить свій клас) */
.woocommerce-checkout #billing_phone_field {
    flex: 1 1 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    min-width: 0;
}

/* Email — повністю прибираємо з чекауту */
.woocommerce-checkout #billing_email_field {
    display: none !important;
}

/* Нова Пошта (плагін mrkv_ua_shipping): справжній контейнер полів —
   #mrkv_ua_shipping_nova-poshta-shipping-info, а не col2-set/field-wrapper */
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta-shipping-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0 24px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Службові поля з прихованими input (city_label, city_ref, area_name,
   warehouse_ref, warehouse_number) — прибираємо з візуальної розкладки,
   інакше вони ламають ряд порожніми "слотами" */
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_city_label_field,
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_city_ref_field,
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_area_name_field,
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_warehouse_ref_field,
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_warehouse_number_field {
    display: none !important;
}

/* Місто + Відділення — в один ряд по 50% */
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_city_field,
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_warehouse_field {
    flex: 1 1 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    margin-bottom: 14px;
    /* Без цього довгий текст обраного відділення "розпирає" картку
       і вона вилазить за межі екрана, замість того щоб обрізатись
       трьома крапками всередині фіксованої ширини поля. */
    min-width: 0;
    box-sizing: border-box;
}

/* select2 контроли на всю ширину свого поля */
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_city_field .select2-container,
.woocommerce-checkout #mrkv_ua_shipping_nova-poshta_warehouse_field .select2-container {
    width: 100% !important;
}

/* --- Фікс: select2 сам виставляє інлайновий style="width:auto" через JS
   (і навіть перевиставляє його заново після кожного вибору значення),
   тому потрібен саме width, а не тільки max-width — інакше контейнер
   продовжує рахувати ширину "по контенту" (shrink-to-fit) і текст
   вилазить за межі екрана раніше, ніж встигає спрацювати overflow:hidden.

   ДОДАТКОВО: усі елементи в цьому ланцюжку — flex/inline-block елементи
   з min-width:auto за замовчуванням, тому саме по собі width:100%!important
   не рятує на мобільних, доки не проставлено ще й min-width:0 на кожному
   рівні вкладеності (.select2-container → .selection → .select2-selection
   → .select2-selection__rendered). Це і є справжня причина overflow. --- */
.woocommerce-checkout .select2-container,
.woocommerce-checkout span.select2.select2-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

.woocommerce-checkout .select2-container .selection {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

.woocommerce-checkout .select2-selection {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: block !important;
}

.woocommerce-checkout .select2-selection__rendered {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    padding-right: 20px !important;
}

.woocommerce-checkout .woocommerce-input-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: unset;
    padding: 0;
}

.woocommerce-additional-fields {
    width: 100%;
}

@media (max-width: 767px) {
    .woocommerce-checkout #mrkv_ua_shipping_nova-poshta_city_field,
    .woocommerce-checkout #mrkv_ua_shipping_nova-poshta_warehouse_field {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    .woocommerce-checkout .select2-container,
    .woocommerce-checkout .select2-selection,
    .woocommerce-checkout .select2-selection__rendered {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Примечание к заказу — 100% ширини, фіксована висота 200px */
.woocommerce-checkout #order_comments_field {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

.woocommerce-checkout #order_comments_field textarea,
.woocommerce-checkout textarea#order_comments {
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    box-sizing: border-box;
    resize: vertical;
}

/* На мобільних всі ці поля теж повертаються в один стовпчик
   (успадковується від загального правила @media max-width:767px вище,
   але дублюємо явно для полів з !important, щоб точно перебило) */
@media (max-width: 767px) {
    .woocommerce-checkout #billing_phone_field {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
    .woocommerce-billing-fields{width:100%;}
}
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon {
    margin: 0 !important;
}

/* --- Прибрати зайві рамки навколо блоків payment --- */
.woocommerce-checkout #payment {
    background: transparent;
    border: none;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    border: none;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
}