/*
======================================================
1. Загальні стилі та фон (мінімалізм)
======================================================
*/


.extension-module-custom .panel {
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin-bottom: 0px;
}

.extension-module-custom .panel-heading {
    background-color: #ffffff;
    color: #333333;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    border-top: none;
}

/*
======================================================
2. Елементи форми (Input, Select, Textarea)
======================================================
*/
.extension-module-custom .form-control {
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border: 1px solid #cccccc;
    border-radius: 0; /* Прибираємо закруглення */
    box-shadow: none;
    transition: border-color 0.15s ease-in-out;
}

.extension-module-custom  .form-control:focus {
    border-color: #333333; /* Чорний колір фокусу */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(51, 51, 51, 0.25); /* Легка чорна тінь фокусу */
}

.extension-module-custom  .form-group {
    margin-bottom: 20px;
}

.extension-module-custom  .control-label {
    font-weight: 500;
    color: #333333;
    margin-bottom: 5px;
    font-size: 14px;
}



/*
======================================================
3. Радіо-кнопки (Payment & Checkout as)
======================================================
*/

/* Стиль для блоків радіо-кнопок */
#custom-login .radio,
#custom-payment .radio,
#custom-shipping-methods .radio {
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 0;
    background-color: #fff;
    cursor: pointer;
    line-height: 20px;
}

/* Стиль для активного (вибраного) радіо-блоку */
#custom-login .radio:has(input:checked),
#custom-payment .radio:has(input:checked),
#custom-shipping-methods .radio:has(input:checked) {
    box-shadow: none;
}

/*
======================================================
4. Кнопки (використовуємо чорний колір як основний акцент)
======================================================
*/
.btn-primary {
    color: #ffffff;
    background-color: #333333; /* Чорний колір, як кнопка "Add to Cart" */
    border-color: #333333;
    font-size: 14px;
    border-radius: 0;
    text-transform: uppercase;
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #000000; /* Чистий чорний при наведенні */
    border-color: #000000;
    color: #ffffff;
}

#button-custom-order {
    width: 100%;
    margin-top: 15px;
}

/*
======================================================
5. Блок кошика (Cart Table)
======================================================
*/
#custom-cart .table > thead > tr > td,
#custom-cart .table > tbody > tr > td {
    vertical-align: middle;
    padding: 15px 2px;
    font-size: 14px;
    text-align: left;
}

#custom-cart .table > thead > tr > td {
    background-color: #ffffff;
    font-weight: 600;
    color: #333333;
    border-bottom: 2px solid #333;

    text-align: left;
}

/* Кнопка видалення (Delete) */
#custom-cart .btn-danger {
    background-color: #e74c3c; /* Червоний акцент */
    border-color: #e74c3c;
    border-radius: 0;
}

/*
======================================================
6. Підсумковий блок (Total & Coupon)
======================================================
*/
#custom-module {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 0;
    border: 1px solid #e0e0e0;
}

#custom-module h4 {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
}

#custom-total .table {
    margin-bottom: 0;
    border: none; /* Прибираємо загальну рамку таблиці */
}

#custom-total .table td {
    font-size: 16px;
    padding: 8px 15px;
    border-top: 1px solid #eee; /* Легке розділення рядків */
}

/* Виділення загальної суми */
#custom-total .table tr:last-child {
    font-size: 18px;
    font-weight: bold;
    color: #333333; /* Чорний для загальної суми */
    border-top: 2px solid #333; /* Чітке відділення від підсумків */
}

/*
======================================================
7. Таби для вибору типу оформлення (Register / Guest / Auth)
======================================================
*/
#custom-login .nav-tabs {
    margin-top: 10px;
    margin-bottom: 15px;
    border-bottom: none!important;
}

#custom-login .nav-tabs > li {
    margin-bottom: 0px;
}

#custom-login .nav-tabs > li > a {
    border-radius: 0;
    color: #333;
    padding: 10px 15px;
}


#custom-login .nav-tabs > li.active > a,
#custom-login .nav-tabs > li.active > a:focus,
#custom-login .nav-tabs > li.active > a:hover,
#custom-login .nav-tabs > li > a:focus,
#custom-login .nav-tabs > li > a:hover {
    background-color: #000;
    border: 1px solid #e0e0e0;
    border-bottom-color: transparent;
    color: #fff;
}

#custom-login .panel-body {
    padding-bottom: 0;
}
#custom-customer .panel-body {
    padding-top: 0;
}
#custom-login .tab-content .tab-pane {
    display: none;
}

#custom-login .tab-content .tab-pane.active {
    display: block;
}

#auth-form {
    margin-top: 10px;
}

/*
======================================================
8. Візуальне розміщення Personal Details зверху при Register/Guest
   (без зміни DOM — злиття панелей #custom-login та #custom-customer)
======================================================
*/
/* При активному табі Register або Guest — прибираємо службовий текст у табі,
   щоб форма Personal Details піднялась максимально вгору */
#custom-login:has(#account-tabs li.active a[data-account="register"]) #tab-register p,
#custom-login:has(#account-tabs li.active a[data-account="guest"]) #tab-guest p {
    display: none;
}

/* Зменшуємо відстань між панелями та зливаємо рамки */
#custom-login:has(#account-tabs li.active a[data-account="register"]),
#custom-login:has(#account-tabs li.active a[data-account="guest"]) {
    margin-bottom: 0; /* панель логіну без нижнього відступу */
}

/* Контейнер із персональними даними одразу підтягуємо під таби */
#custom-login:has(#account-tabs li.active a[data-account="register"]) + #custom-customer,
#custom-login:has(#account-tabs li.active a[data-account="guest"]) + #custom-customer {

    margin-top: 0;
}

/* Прибираємо верхню рамку і заголовок у панелі персональних даних для візуального злиття */
#custom-login:has(#account-tabs li.active a[data-account="register"]) + #custom-customer .panel,
#custom-login:has(#account-tabs li.active a[data-account="guest"]) + #custom-customer .panel {
    border-top: none;
    margin-top: 0;
}

#custom-login:has(#account-tabs li.active a[data-account="register"]) + #custom-customer .panel-heading,
#custom-login:has(#account-tabs li.active a[data-account="guest"]) + #custom-customer .panel-heading {
    display: none;
}

/* На малих екранах додатково ущільнимо відступи */
@media (max-width: 767px) {
    #custom-login:has(#account-tabs li.active a[data-account="register"]) + #custom-customer .panel-body,
    #custom-login:has(#account-tabs li.active a[data-account="guest"]) + #custom-customer .panel-body {
        padding-top: 10px;
    }
}
/* Custom cart: mobile remove button over product image */
.cart-img-wrap {
  position: relative;
  display: inline-block;
}

.cart-remove-xs {
  position: absolute;
top: -5px;
right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
line-height: 21px;
text-align: center;
}


#sticky-col {
    position: -webkit-sticky;
    position: sticky;
    top: 140px;

    padding-bottom: 20px;
}
#sticky-col-parent {
    position: relative;
}
#sticky-col.is-sticky {
    position: fixed;
    top: 140px;
    z-index: 0;
}
#sticky-col.is-bottom {

}
@media (min-width: 768px) {
    #sticky-col.is-bottom {
        position: absolute;
        z-index: 0;
    }
}