/* ===== fb-checkout ===== */
/* ---------- Верхнього ряду кроків немає ---------- */
body.woocommerce-checkout ul#thwmscf-tabs,
body.woocommerce-checkout #thwmscf-tabs {
    display: none !important;
}

/* ---------- Відступ від шапки: 32px ---------- */
body.woocommerce-checkout #thwmscf-tab-panels,
body.woocommerce-checkout .thwmscf-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Відступ зверху тримала тема: у контейнера сторінки #qodef-page-inner
   стояло padding-top: 130px. Саме воно давало ті ~160px до картки. */
body.woocommerce-checkout #qodef-page-inner {
    padding-top: 32px !important;
}
body.woocommerce-checkout .qodef-page-content-section,
body.woocommerce-checkout .qodef-content-full-width,
body.woocommerce-checkout main.qodef-page-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.woocommerce-checkout .woocommerce-notices-wrapper:empty {
    display: none !important;
}

/* ---------- Одна картка на екрані ---------- */
body.woocommerce-checkout form.checkout {
    display: block !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
body.woocommerce-checkout form.checkout > .thwmscf-content {
    display: none !important;
    float: none !important;           /* плагін ставить float:left, і тоді авто-поля не центрують */
    width: 100% !important;
    max-width: 640px !important;      /* десктоп */
    margin: 0 auto !important;
    border-radius: 25px !important;   /* однакові кути з пілюлею */
    overflow: hidden !important;
    box-sizing: border-box !important;
}
body.woocommerce-checkout form.checkout > .thwmscf-content.fb-step-on {
    display: block !important;
}
@media (max-width: 767px) {
    body.woocommerce-checkout form.checkout > .thwmscf-content {
        max-width: none !important;   /* на телефоні — на всю ширину екрана */
        border-radius: 25px !important;   /* кути ті самі, що на десктопі */
    }
    body.woocommerce-checkout a.thwmscf-accordion-label {
        border-radius: 25px !important;
    }
}

/* ---------- Пілюля заголовка: вгорі картки, на всю її ширину ---------- */
body.woocommerce-checkout a.thwmscf-accordion-label {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 56px !important;
    border-radius: 25px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}
/* Колір пілюлі — фірмовий блакитний (18.09.2026, власник: «зеленую пилюлю замени
   на голубую», «Вот тут и шаги 2 и 3»). Зелений лишається на інших елементах сайту:
   плашка «НОВИНКА» і кнопки слайдера — їх не чіпаємо. */
body.woocommerce-checkout a.thwmscf-accordion-label,
body.woocommerce-checkout a.thwmscf-accordion-label.thwmscf-active,
body.woocommerce-checkout a.thwmscf-accordion-label:hover {
    background: #56E1FF !important;
    color: #0C0C0C !important;
}

/* Лічильник кроку — праворуч, щоб напис лишався по центру */
body.woocommerce-checkout a.thwmscf-accordion-label::after {
    content: attr(data-fb-count);
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    opacity: 0.7 !important;
}
/* Крок «Нова Пошта»: напис ховаємо, лишається лого.
   Логотип чорний (#0C0C0C), не фірмовий червоний — власник 07.09.
   Той самий чорний, що й текст оформлення нижче, щоб тон збігався.
   Порожня назва не годиться — плагін підставляє своє «Shipping details». */
body.woocommerce-checkout a.thwmscf-accordion-label[data-step="2"],
body.woocommerce-checkout a.thwmscf-accordion-label[data-step="2"] span {
    font-size: 0 !important;
}
body.woocommerce-checkout a.thwmscf-accordion-label[data-step="2"]::after {
    font-size: 14px !important;
}
body.woocommerce-checkout a.thwmscf-accordion-label[data-step="2"]::before {
    content: "" !important;
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 116px !important;
    height: 26px !important;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22191%22%20height%3D%2242%22%20viewBox%3D%220%200%20191%2042%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M14.29%2018.6216H8.01973V14.25C8.01973%2013.1023%207.16401%2012.2492%206.01295%2012.2492H0.5V16.8775H3.00658V29.7508H8.01973V23.3784H14.29V29.7508H19.3031V12.2492H14.29V18.6216Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3Cpath%20d%3D%22M30.844%2012C25.5506%2012%2021.6885%2015.7978%2021.6885%2021C21.6885%2026.2022%2025.5506%2030%2030.844%2030C36.1373%2030%2039.9994%2026.2022%2039.9994%2021C39.9994%2015.7978%2036.1297%2012%2030.844%2012ZM30.844%2025.1225C28.4585%2025.1225%2026.7092%2023.3708%2026.7092%2021C26.7092%2018.6292%2028.4661%2016.8775%2030.844%2016.8775C33.2294%2016.8775%2034.9787%2018.6292%2034.9787%2021C34.9787%2023.3708%2033.2218%2025.1225%2030.844%2025.1225Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3Cpath%20d%3D%22M55.5084%2020.4941C56.7503%2019.7391%2057.5227%2018.448%2057.5227%2016.9002C57.5227%2014.1971%2055.7658%2012.2492%2052.2824%2012.2492H42.3772V29.7508H52.2824C55.94%2029.7508%2058.0755%2027.6292%2058.0755%2024.6997C58.0755%2022.8196%2057.0759%2021.302%2055.5084%2020.4941ZM47.042%2016.1451H50.7754C51.9568%2016.1451%2052.6307%2016.719%2052.6307%2017.693C52.6307%2018.6669%2051.9568%2019.2408%2050.7754%2019.2408H47.042V16.1451ZM51.1238%2025.9002H47.0345V22.6535H51.1238C52.3808%2022.6535%2053.0775%2023.25%2053.0775%2024.2768C53.0775%2025.3037%2052.3808%2025.9002%2051.1238%2025.9002Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3Cpath%20d%3D%22M65.7467%2012.2492L58.8252%2029.7508H64.164L65.2772%2026.5268H72.3274L73.4406%2029.7508H78.8854L71.9639%2012.2492H65.7467ZM66.6327%2022.6007L68.6092%2016.8775H68.9878L70.9643%2022.6007H66.6327Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3Cpath%20d%3D%22M102.861%2012.2492H86.0644V16.8775H88.5709V29.7508H93.5841V16.87H99.8543V29.7433H104.867V14.25C104.86%2012.974%20104.133%2012.2492%20102.861%2012.2492Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3Cpath%20d%3D%22M116.401%2012C111.107%2012%20107.245%2015.7978%20107.245%2021C107.245%2026.2022%20111.107%2030%20116.401%2030C121.694%2030%20125.556%2026.2022%20125.556%2021C125.556%2015.7978%20121.687%2012%20116.401%2012ZM116.401%2025.1225C114.015%2025.1225%20112.266%2023.3708%20112.266%2021C112.266%2018.6292%20114.023%2016.8775%20116.401%2016.8775C118.779%2016.8775%20120.535%2018.6292%20120.535%2021C120.535%2023.3708%20118.779%2025.1225%20116.401%2025.1225Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3Cpath%20d%3D%22M147.494%2025.1225H142.731V12.2492H137.71V25.1225H132.947V12.2492H127.934V29.7508H152.508V12.2492H147.494V25.1225Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3Cpath%20d%3D%22M171.939%2016.87V12.2492H154.893V16.87H160.906V29.7508H165.919V16.87H171.939Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3Cpath%20d%3D%22M185.055%2029.7508H190.5L183.579%2012.2492H177.361L170.44%2029.7508H175.779L176.892%2026.5268H183.942L185.055%2029.7508ZM178.247%2022.6007L180.224%2016.8775H180.602L182.579%2022.6007H178.247Z%22%20fill%3D%22%230C0C0C%22%2F%3E%20%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
}

/* Усередині третьої картки плагін ще раз пише «Ваше замовлення» —
   це повтор пілюлі, прибираємо. */
body.woocommerce-checkout .thwmscf-tab-panel > h3#order_review_heading,
body.woocommerce-checkout #order_review_heading {
    display: none !important;
}

/* ---------- Тіло картки ---------- */
body.woocommerce-checkout .thwmscf-tab-panel {
    padding: 24px !important;
    box-sizing: border-box !important;
}
/* Адресні поля з очей прибрано: адресу дає крок Нової Пошти */
body.woocommerce-checkout .thwmscf-content p.form-row.fb-hidden-field,
body.woocommerce-checkout p.form-row[id$="_country_field"],
body.woocommerce-checkout p.form-row[id$="_state_field"],
body.woocommerce-checkout p.form-row[id$="_address_1_field"],
body.woocommerce-checkout p.form-row[id$="_address_2_field"],
body.woocommerce-checkout p.form-row[id$="_postcode_field"] {
    display: none !important;
}
/* Поля і пілюля однакової висоти — 50px */
body.woocommerce-checkout .thwmscf-content input.input-text,
body.woocommerce-checkout .thwmscf-content input[type="text"],
body.woocommerce-checkout .thwmscf-content input[type="tel"],
body.woocommerce-checkout .thwmscf-content input[type="email"],
body.woocommerce-checkout .thwmscf-content input[type="number"],
body.woocommerce-checkout .thwmscf-content select,
body.woocommerce-checkout .thwmscf-content .select2-container .select2-selection--single {
    height: 50px !important;
    min-height: 50px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 48px !important;
    box-sizing: border-box !important;
}
body.woocommerce-checkout .thwmscf-content .select2-container .select2-selection--single .select2-selection__rendered { line-height: 48px !important; }
body.woocommerce-checkout .thwmscf-content .select2-container .select2-selection--single .select2-selection__arrow  { height: 48px !important; }

/* ---------- Кнопки кроків: «наступний» зверху, «попередній» під ним ---------- */
body.woocommerce-checkout .thwmscf-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
    margin-top: 20px !important;
}
body.woocommerce-checkout .thwmscf-buttons .action-next { order: 1 !important; }
body.woocommerce-checkout .thwmscf-buttons .action-prev { order: 2 !important; }
body.woocommerce-checkout .thwmscf-buttons input {
    width: 100% !important;
    height: 50px !important;
    border-radius: 25px !important;
    cursor: pointer !important;
}
body.woocommerce-checkout .thwmscf-buttons .action-prev {
    background: transparent !important;
    border: 1px solid #d9dde3 !important;
    color: #0c0c0c !important;
}
body.woocommerce-checkout .thwmscf-buttons.fb-first .action-prev {
    display: none !important;
}

/* Вікно купона — як звичайне поле: ті самі кути і рамка.
   17.09.2026, власник: «поле купона углы острые, у нас не может быть нигде
   острых углов» — було 8px, стало 25px, як у решти полів. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
body.woocommerce-checkout form.checkout_coupon {
    border-radius: 25px !important;
    border: 1px solid #d8d8d8 !important;
}

/* Повідомлення про незаповнені поля: тільки напис, по центру.
   Без рамки і без заливки — прохання власника. Правило звужене до
   сторінки оформлення, щоб не чіпати помилки на решті сайту. */
/* Обгортку повідомлень ставимо в ту саму коробку, що й картка:
   ширина як у картки, авто-поля з боків. Тоді напис стоїть по центру
   екрана незалежно від того, який контейнер теми його оточує —
   `text-align: center` сам по собі цього не давав, бо контейнер
   ширший за екран і зміщений праворуч. */
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce-NoticeGroup {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 640px !important;
    margin: 0 auto 20px !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
}
/* Замір показав: `.woocommerce-NoticeGroup` стояв на x=156 при батьківському
   x=56 — тобто вилазив на 100px праворуч, і центрований всередині нього
   напис опинявся правіше центра екрана. Тому обнуляємо зміщення саме тут. */
body.woocommerce-checkout ul.woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 auto 20px !important;
    float: none !important;
    width: 100% !important;
    max-width: 640px !important;
    list-style: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    color: #c1121f !important;
    /* Список повідомлень — флекс-контейнер. У флексі `text-align` нічого
       не центрує: напис притискався до правого краю коробки. Центр дає
       `justify-content`. Саме через це замір коробки показував нуль,
       а очима напис стояв праворуч. */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}
body.woocommerce-checkout ul.woocommerce-error li,
body.woocommerce-checkout .woocommerce-error li {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    display: block !important;
}
body.woocommerce-checkout ul.woocommerce-error::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout ul.woocommerce-error li::before {
    display: none !important;
    content: none !important;
}

/* ---------- Підказка про помилку в полі ---------- */
body.woocommerce-checkout .fb-field-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: #c1121f;
}
body.woocommerce-checkout .fb-field-warn {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: #a86a00;
}
body.woocommerce-checkout .fb-input-bad,
body.woocommerce-checkout .fb-input-bad:focus {
    border-color: #c1121f !important;
}

/* Помилки кроку «Нова Пошта» (FRBK-136, +139; 23.09.2026, п. 11) — у тому ж вигляді, що й наші помилки телефону й пошти. */
body.woocommerce-checkout .frbk-shipping-field-error,
body.woocommerce-checkout .frbk-shipping-general-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.35;
    color: #c1121f;
}
body.woocommerce-checkout .frbk-shipping-general-error {
    margin: 0 0 12px;
    text-align: center;
}
body.woocommerce-checkout .frbk-shipping-field-invalid input:not([type="hidden"]),
body.woocommerce-checkout .frbk-shipping-field-invalid .zen-ui-select__value,
body.woocommerce-checkout .frbk-shipping-field-invalid [role="combobox"] {
    border-color: #c1121f !important;
}

/* Екран «Переходимо до оплати…» замість сірої форми, поки створюється оплата в Моно (п. 11, 23.09.2026). */
#fb-pay-screen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #fff;
    font-family: "Roboto Condensed", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: #0C0C0C;
}
#fb-pay-screen .fb-pay-spin {
    width: 40px;
    height: 40px;
    border: 3px solid #E2E2E2;
    border-top-color: #0C0C0C;
    border-radius: 50%;
    animation: fb-pay-spin 0.8s linear infinite;
}
@keyframes fb-pay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    #fb-pay-screen .fb-pay-spin { animation-duration: 2.4s; }
}