/* =========================================================
   ОФОРМЛЕНИЕ ЗАКАЗА (sale.order.ajax)
   В стилях сайта: чёрный/белый + жёлтый акцент, шрифт Onest.
   Использует переменные из основного style.css сайта.
   ========================================================= */

/* ---------- Контейнер + 12-колоночная сетка ---------- */
.soa-wrapper {
    max-width: var(--container);   /* 1280px */
    margin: 0 auto;
    padding: 40px 24px 80px;
}

#bx-soa-order.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}
#bx-soa-order [class*="col-"] {
    padding: 0 12px;
    width: 100%;
}

@media (min-width: 768px) {
    #bx-soa-order .col-sm-9 { width: 66.6667%; }  /* контент 8/12 */
    #bx-soa-order .col-sm-3 { width: 33.3333%; }  /* итог 4/12 */
}
@media (min-width: 992px) {
    #bx-soa-order .col-sm-9 { width: 70%; }
    #bx-soa-order .col-sm-3 { width: 30%; }
}

#bx-soa-order .col-xs-12 { width: 100%; }
@media (min-width: 768px) {
    #bx-soa-order .col-sm-4  { width: 33.3333%; }
    #bx-soa-order .col-sm-5  { width: 41.6667%; }
    #bx-soa-order .col-sm-7  { width: 58.3333%; }
    #bx-soa-order .col-sm-6  { width: 50%; }
    #bx-soa-order .col-sm-12 { width: 100%; }
    #bx-soa-order .col-lg-4  { width: 33.3333%; }
    #bx-soa-order .col-md-6  { width: 50%; }
    #bx-soa-order .col-md-12 { width: 100%; }
}
#bx-soa-order .col-xs-6 { width: 50%; }

/* ---------- Общий контейнер ---------- */
#bx-soa-order {
    font-family: var(--font-main);
    color: var(--black);
    font-size: 15px;
    line-height: 1.6;
}

/* ---------- Секция (шаг оформления) ---------- */
.bx-soa-section {
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: var(--transition);
}
.bx-soa-section.bx-selected {
    border-color: var(--black);
    box-shadow: 0 14px 30px rgba(0,0,0,0.06);
}
.bx-soa-section.bx-step-error   { border-color: #e63946; }
.bx-soa-section.bx-step-warning { border-color: var(--yellow); }
.bx-soa-section.bx-step-completed { cursor: pointer; }

/* ---------- Заголовок шага ---------- */
.bx-soa-section-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: var(--gray-bg);
    margin: 0;
    border-bottom: 1px solid transparent;
}
.bx-soa-section.bx-selected .bx-soa-section-title-container {
    background: var(--white);
    border-bottom-color: var(--gray-line);
}

.bx-soa-section-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--black);
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
}
.bx-soa-section-title-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.bx-soa-section.bx-step-completed .bx-soa-section-title-count {
    background: var(--yellow);
    color: var(--black);
}

/* "Изменить" — как ссылки навигации сайта */
.bx-soa-section-title-container > div.text-right {
    float: none;
    width: auto;
    padding: 0;
}
.bx-soa-editstep {
    position: relative;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: var(--gray-text);
    text-decoration: none;
    float: none !important;
    width: auto !important;
    transition: color var(--transition);
}
.bx-soa-editstep::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 1px;
    background: var(--black);
    transition: width var(--transition);
}
.bx-soa-editstep:hover { color: var(--black); }
.bx-soa-editstep:hover::after { width: 100%; }

/* ---------- Контент шага ---------- */
.bx-soa-section-content { padding: 22px; }

/* ---------- Поля ввода (как в фильтрах/контактах) ---------- */
.form-control,
.bx-soa-customer-input,
.bx-soa-customer-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: var(--black);
    background: var(--white);
    outline: none;
    height: auto;
    box-shadow: none;
    transition: border var(--transition);
    resize: vertical;
}
.form-control:focus,
.bx-soa-customer-input:focus,
.bx-soa-customer-textarea:focus {
    border-color: var(--black);
    box-shadow: none;
    outline: none;
}

.bx-soa-customer-label,
.bx-soa-custom-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--black);
}
.bx-authform-starrequired { color: #e63946; margin-right: 2px; }

.form-group,
.bx-soa-customer-field { margin-bottom: 18px; }

.has-error .form-control { border-color: #e63946; }

/* select со стрелкой как в тулбаре каталога */
#bx-soa-order select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* ---------- Кнопки (чёрные → жёлтые, как на сайте) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: none;
    line-height: 1.2;
}

/* Основная кнопка */
.btn-default,
.btn-order-save {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}
.btn-default:hover,
.btn-default:focus,
.btn-order-save:hover {
    background: var(--yellow);
    color: var(--black);
    border-color: var(--yellow);
    transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

.btn-lg { padding: 16px 36px; font-size: 14px; }
.btn-sm { padding: 10px 18px; font-size: 12px; }
.btn-md { padding: 12px 24px; font-size: 12px; }

.btn-link {
    background: transparent;
    color: var(--black);
    border: none;
    text-transform: none;
    letter-spacing: 0.3px;
    padding: 8px 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn-link:hover { color: var(--gray-text); }

/* Футер шага (навигация) */
.bx-soa-more {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-line);
}
.bx-soa-more-btn::after { content: ''; display: table; clear: both; }
.pull-left  { float: left; }
.pull-right { float: right; }

/* ---------- Карточки доставки / оплаты ---------- */
.bx-soa-pp-company {
    position: relative;
    text-align: center;
    padding: 18px 12px;
    margin: 0 0 14px 0;
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: 14px;
    cursor: pointer;
    transition: var(--transition);
}
.bx-soa-pp-company:hover {
    border-color: var(--black);
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}
.bx-soa-pp-company.bx-selected {
    border-color: var(--black);
    box-shadow: 0 0 0 2px var(--black);
}
.bx-soa-pp-company.bx-selected::after {
    content: '';
    position: absolute;
    top: 10px; right: 10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--yellow);
}

.bx-soa-pp-company-image {
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 8px;
}
.bx-soa-pp-company-smalltitle {
    font-size: 13px;
    font-weight: 500;
    color: var(--black);
    line-height: 1.3;
}
.bx-soa-pp-company-checkbox { position: absolute; top: 10px; left: 10px; }
.bx-soa-pp-delivery-cost {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--black);
}

/* Блок описания выбранного варианта */
.bx-soa-pp-desc-container {
    background: var(--gray-bg);
    border-radius: 14px;
    padding: 20px;
}
.bx-soa-pp-company-subTitle {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}
.bx-soa-pp-company-desc { color: var(--gray-text); font-size: 14px; }

.bx-soa-pp-list { list-style: none; padding: 0; margin: 14px 0 0; }
.bx-soa-pp-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-line);
}
.bx-soa-pp-list li:last-child { border-bottom: none; }
.bx-soa-pp-list-termin { color: var(--gray-text); font-size: 14px; }
.bx-soa-pp-list-description { font-weight: 700; text-align: right; }

/* Свёрнутый вид */
.bx-soa-pp-company-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
}
.bx-soa-pp-company-selected img { border-radius: 6px; }
.bx-soa-pp-price {
    text-align: right;
    font-weight: 700;
    font-size: 16px;
    color: var(--black);
}

/* Оплата с внутреннего счёта */
.bx-soa-pp-inner-ps {
    border: 1px solid var(--gray-line);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    transition: var(--transition);
}
.bx-soa-pp-inner-ps.bx-selected {
    border-color: var(--black);
    box-shadow: 0 0 0 2px var(--black);
}

/* ---------- Самовывоз (ПВЗ) ---------- */
.bx-soa-pickup-list-item {
    border: 1px solid var(--gray-line);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: var(--transition);
}
.bx-soa-pickup-list-item:hover {
    border-color: var(--black);
    transform: translateY(-2px);
}
.bx-soa-pickup-list-item.bx-selected {
    border-color: var(--black);
    box-shadow: 0 0 0 2px var(--black);
}
.bx-soa-pickup-l-item-adress { font-weight: 600; margin-bottom: 6px; }
.bx-soa-pickup-l-item-name   { font-weight: 600; margin: 6px 0; }
.bx-soa-pickup-l-item-desc   { color: var(--gray-text); font-size: 14px; }
.bx-soa-pickup-l-item-img {
    max-width: 90px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
.bx-soa-pickup-subTitle {
    font-size: 15px;
    font-weight: 600;
    margin: 18px 0 10px;
}

/* ---------- Корзина (товары) ---------- */
.bx-soa-item-table { width: 100%; }
.bx-soa-item-tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-line);
}
.bx-soa-item-tr:last-child { border-bottom: none; }
.bx-soa-item-block { display: flex; align-items: center; gap: 14px; }
.bx-soa-item-imgcontainer {
    width: 64px; height: 64px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--gray-bg);
    border: 1px solid var(--gray-line);
    border-radius: 10px;
}
.bx-soa-item-title { font-size: 15px; font-weight: 600; }
.bx-soa-item-title a { color: var(--black); }
.bx-soa-item-title a:hover { color: var(--gray-text); }
.bx-soa-item-td-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-text);
}

.bx-price { font-weight: 700; color: var(--black); }
.bx-price.all { color: var(--black); font-size: 17px; }
.bx-price-old {
    color: var(--gray-text);
    text-decoration: line-through;
    font-weight: 400;
    font-size: 13px;
}
.bx-soa-info-shower { color: var(--black); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.bx-soa-item-info-block { display: none; }
.bx-soa-item-info-container.bx-active .bx-soa-item-info-block,
.bx-soa-item-info-block.bx-active { display: block; }

/* ---------- Купоны ---------- */
.bx-soa-coupon {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-line);
}
.bx-soa-coupon-label { font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.bx-soa-coupon-input { max-width: 320px; }
.bx-soa-coupon-item-success,
.bx-soa-coupon-item-danger,
.bx-soa-coupon-item-used {
    position: relative;
    display: inline-block;
    padding: 5px 12px;
    margin: 6px 6px 0 0;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.bx-soa-coupon-item-success { background: rgba(148,154,144,.15); color: var(--sage); }
.bx-soa-coupon-item-used    { background: rgba(215,200,38,.2);  color: #8a7f11; }
.bx-soa-coupon-item-danger  { background: rgba(230,57,70,.1);   color: #e63946; }
.bx-soa-coupon-remove { cursor: pointer; margin-left: 6px; font-weight: 700; }
.bx-soa-coupon-remove::before { content: '✕'; }

/* ---------- Итоговый блок (сайдбар) ---------- */
.bx-soa-cart-total {
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: 14px;
    padding: 24px;
}
.bx-soa-cart-total.bx-soa-cart-total-fixed {
    position: fixed;
    top: 100px;
    z-index: 10;
}
.bx-soa-cart-total-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    font-size: 15px;
}
.bx-soa-cart-t { color: var(--gray-text); }
.bx-soa-cart-d { font-weight: 600; text-align: right; }

.bx-soa-cart-total-line-total {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 2px solid var(--black);
}
.bx-soa-cart-total-line-total .bx-soa-cart-t {
    font-weight: 700;
    color: var(--black);
    font-size: 16px;
}
.bx-soa-cart-total-line-total .bx-soa-cart-d {
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.5px;
}
.bx-soa-cart-total-line-highlighted .bx-soa-cart-d { color: var(--sage); }
.bx-soa-price-free { color: var(--sage); font-weight: 700; }
.bx-soa-price-not-calc { color: #8a7f11; border-bottom: 1px dashed; cursor: pointer; }

.bx-soa-cart-total-button-container { margin-top: 18px; }
.bx-soa-cart-total-button-container .btn { width: 100%; }

/* Кнопка "Оформить" внизу */
#bx-soa-orderSave { margin-top: 20px; }
#bx-soa-orderSave .btn { padding: 16px 44px; }

/* ---------- Алерты ---------- */
.alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
}
.alert-danger  { background: rgba(230,57,70,.08);  border-color: rgba(230,57,70,.3);  color: #b02631; }
.alert-warning { background: rgba(215,200,38,.14); border-color: rgba(215,200,38,.5); color: #8a7f11; }
.alert-success { background: rgba(148,154,144,.12); border-color: rgba(148,154,144,.4); color: var(--sage); }

/* ---------- Пагинация ---------- */
.bx-pagination { margin-top: 14px; }
.bx-pagination-container ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.bx-pagination-container li a,
.bx-pagination-container li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    text-decoration: none;
    background: var(--white);
    transition: var(--transition);
}
.bx-pagination-container li a:hover { border-color: var(--black); }
.bx-pagination-container li.bx-active a,
.bx-pagination-container li.bx-active span {
    background: var(--black);
    color: var(--white);
    border-color: var(--black);
}

/* ---------- Авторизация / регистрация ---------- */
.bx-authform .bx-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}
.bx-authform-formgroup-container { margin-bottom: 14px; }
.bx-authform-label-container { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.bx-authform-input-container input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border var(--transition);
}
.bx-authform-input-container input:focus { border-color: var(--black); }
.bx-authform input[type=submit] {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.bx-authform input[type=submit]:hover {
    background: var(--yellow);
    color: var(--black);
    border-color: var(--yellow);
    transform: translateY(-2px);
}

/* ---------- Чекбоксы/радио — чёрный акцент как в каталоге ---------- */
#bx-soa-order input[type=checkbox]:not(.bx-soa-pp-company-checkbox),
#bx-soa-order input[type=radio] {
    accent-color: var(--black);
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.checkbox label,
.radio-inline label { cursor: pointer; }
.radio-inline { margin-right: 24px; }

.checkbox,
.radio { margin: 8px 0; }

/* ---------- Прочее ---------- */
.bx-soa-reference {
    color: var(--gray-text);
    font-size: 13px;
    margin-top: 10px;
    line-height: 1.6;
}
.bx-soa-service-small { color: var(--gray-text); font-size: 13px; }
hr.bxe-light {
    border: none;
    border-top: 1px solid var(--gray-line);
    margin: 20px 0;
}

/* Прелоадер (загрузка шага) */
.bx-soa-section.bx-loading {
    position: relative;
    min-height: 120px;
}
.bx-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* Ссылки внутри блоков заказа — как на сайте */
#bx-soa-order a { color: var(--black); }
#bx-soa-order a:hover { color: var(--gray-text); }

/* ---------- Адаптив ---------- */
@media (max-width: 992px) {
    .bx-soa-cart-total.bx-soa-cart-total-fixed {
        position: static !important;
        width: auto !important;
    }
}

@media (max-width: 768px) {
    .soa-wrapper { padding: 24px 18px 60px; }

    .bx-soa-section-content { padding: 18px; }
    .bx-soa-section-title-container { padding: 16px 18px; }
    .bx-soa-section-title { font-size: 16px; }
    .bx-soa-section-title-count { width: 24px; height: 24px; font-size: 12px; }

    .bx-soa-cart-total-line-total .bx-soa-cart-d { font-size: 22px; }
    .bx-soa-pp-desc-container { margin-top: 12px; }

    /* Кнопки на всю ширину для удобства тапа */
    #bx-soa-orderSave .btn,
    .bx-soa-more .btn { width: 100%; }
    .bx-soa-more .pull-left,
    .bx-soa-more .pull-right { float: none; margin-bottom: 10px; }
}