/* =========================================================
   SimpleCheckout — кастомный редизайн (поверх simple.css)
   Подключать ПОСЛЕ оригинального simple.css, ничего в нём
   не меняя — так проще откатиться, если что-то не понравится.
   ========================================================= */

.simple-content {
    --sc-bg: #ffffff;
    --sc-card: #ffffff;
    --sc-border: #ece1d8;
    --sc-accent: #b5473f;      /* терракотовый — заголовки, ссылки */
    --sc-accent-soft: #f7e2dc; /* мягкий фон под иконками */
    --sc-maroon: #6f2530;      /* бордовые кнопки +/- количества */
    --sc-dark: #161513;        /* кнопка "Оформити замовлення" */
    --sc-danger: #e2836f;      /* кнопка удаления товара */
    --sc-text: #2b2926;
    --sc-muted: #948b83;
    background: var(--sc-bg);
    padding: 24px 0 40px;
}

/* ---------- Карточки блоков ---------- */
.simple-content .simplecheckout-block {
    background: var(--sc-card);
    border: 1px solid var(--sc-border);
    border-radius: 16px;
    margin-bottom: 18px;
    box-shadow: 0 1px 2px rgba(20,15,10,.03);
}
.simple-content .simplecheckout-block-content {
    padding: 15px 22px 22px;
}
.simple-content fieldset { border: none; padding: 0; margin: 0; }

/* ---------- Заголовки с иконкой ---------- */
.simple-content .checkout-heading {
    background: transparent;
    border: none;
    padding: 20px 22px 10px;
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sc-text);
}
.simple-content .checkout-heading::before {
    content: '';
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 50%;
    background-color: var(--sc-accent-soft);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
}
.simple-content .checkout-heading-button {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
}
.simple-content .checkout-heading-button a {
    color: var(--sc-accent);
    font-weight: 500;
    font-size: 13px;
    text-decoration: underline;
}

/* Иконки по блокам (SVG, data-uri, цвет зашит в stroke) */
#simplecheckout_customer .checkout-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5473f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
#simplecheckout_shipping .checkout-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5473f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='7' width='13' height='10'/%3E%3Cpath d='M14 10h4l3 3v4h-7z'/%3E%3Ccircle cx='5.5' cy='19' r='1.6'/%3E%3Ccircle cx='16.5' cy='19' r='1.6'/%3E%3C/svg%3E");
}
#simplecheckout_shipping_address .checkout-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5473f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.58 7-12a7 7 0 1 0-14 0c0 4.42 7 12 7 12z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}
#simplecheckout_payment .checkout-heading::before,
#simplecheckout_payment_address .checkout-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5473f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M6 15h4'/%3E%3C/svg%3E");
}
#simplecheckout_cart .checkout-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5473f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 14H5z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E");
}
#simplecheckout_comment .checkout-heading::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5473f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}

/* ---------- Поля форм ---------- */
.simple-content .form-control,
.simple-content select {
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    padding: 11px 14px;
    height: auto;
    background: #fff;
    color: var(--sc-text);
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
.simple-content .form-control:focus,
.simple-content select:focus {
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px var(--sc-accent-soft);
    outline: none;
}
.simple-content .form-control::placeholder { color: var(--sc-muted); }
.simple-content label.control-label {
    font-weight: 500;
    font-size: 13px;
    color: var(--sc-text);
    padding-top: 0;
    margin-bottom: 6px;
}
.simple-content .form-group { margin-bottom: 16px; }
/* звёздочка у обязательных полей уже рисуется темой — своё правило не добавляем, иначе дублируется */

/* радиокнопки (регистрация / доставка / оплата) */
.simple-content .radio {
    border: 1px solid var(--sc-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 10px;
}
.simple-content .radio label {
    padding-left: 28px;
    font-weight: 400;
    cursor: pointer;
}
.simple-content .radio input[type="radio"] {
    position: absolute;
    margin-left: -28px;
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--sc-accent);
}
.row-customer_register .radio {
    display: inline-flex !important;
    margin-right: 10px;
    padding: 8px 16px;
}

/* ---------- Корзина товаров ---------- */
#simplecheckout_cart .table-responsive { padding: 0 22px 12px; }
.simplecheckout-cart {
    border: none !important;
}
.simplecheckout-cart thead { display: none; } /* заголовки таблицы прячем — как на референсе */
.simplecheckout-cart td {
    border: none !important;
    border-bottom: 1px solid var(--sc-border) !important;
    padding: 14px 6px !important;
    vertical-align: middle;
}
.simplecheckout-cart tr:last-child td { border-bottom: none !important;vertical-align: middle !important; }
.simplecheckout-cart td.image { width: 76px; }
.simplecheckout-cart td.image img,
.simplecheckout-cart td.name .image img {
    border-radius: 10px;
    width: 160px;
    height: 200px;
    object-fit: cover;
}
.simplecheckout-cart td.name .image { display: none; } /* фото дублируется в td.image */
.simplecheckout-cart td.name a { color: var(--sc-text); font-weight: 500; text-decoration: none; }
.simplecheckout-cart td.total { font-weight: 600; white-space: nowrap; }

/* количество: минус / поле / плюс / удалить */
#simplecheckout_cart td.quantity .input-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#simplecheckout_cart td.quantity .input-group-btn { display: contents; }
#simplecheckout_cart td.quantity .form-control {
    width: 40px !important;
    min-width: 40px;
    text-align: center;
    padding: 8px 4px;
    border-radius: 8px;
}
#simplecheckout_cart td.quantity .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
#simplecheckout_cart td.quantity .btn-primary {
    background: var(--sc-maroon) !important;
    border-color: var(--sc-maroon) !important;
    color: #fff !important;
}
#simplecheckout_cart td.quantity .btn-danger {
    background: var(--sc-danger) !important;
    border-color: var(--sc-danger) !important;
    color: #fff !important;
    border-radius: 50% !important;
}

/* ---------- Итоги заказа ---------- */
.simplecheckout-cart-total {
    border: none !important;
    padding: 10px 22px !important;
    text-align: right;
    font-size: 14px;
    color: var(--sc-text);
}
.simplecheckout-cart-total .simplecheckout-cart-total-value { font-weight: 500; }
#total_total {
    border-top: 1px solid var(--sc-border) !important;
    margin-top: 6px;
    padding-top: 16px !important;
    font-weight: 700;
    font-size: 17px;
}

/* купон / сертификат — отдельные "карточки" (см. правки в simplecheckout_cart.twig) */
.sc-mini-card {
    margin: 18px;
    padding: 16px 18px;
    border: 1px solid var(--sc-border);
    border-radius: 14px;
    text-align: left;
}
.sc-mini-card + .sc-mini-card { margin-top: -4px; }
.sc-mini-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
}
.sc-mini-card-heading::before {
    content: '';
    width: 22px;
    height: 22px;
    flex: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5473f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M12 8c-1.5-3-6-3-6 0s4.5 3 6 0z'/%3E%3Cpath d='M12 8c1.5-3 6-3 6 0s-4.5 3-6 0z'/%3E%3C/svg%3E");
}
.sc-mini-card-row {
    display: flex;
    gap: 10px;
}
.sc-mini-card-row .form-control { flex: 1 1 auto; }
.sc-mini-card-btn {
    flex: none;
    border-radius: 10px !important;
    background: var(--sc-accent-soft) !important;
    border: none !important;
    color: var(--sc-accent) !important;
    font-weight: 600 !important;
    padding: 0 18px !important;
    box-shadow: none !important;
}

/* ---------- Комментарий ---------- */
#simplecheckout_comment textarea {
    border: 1px solid var(--sc-border) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    min-height: 90px !important;
}

/* ---------- Согласие + кнопки ---------- */
.simple-content .simplecheckout-warning-block {
    border-radius: 12px;
    border-color: #f0c2c2;
    background: #fdf1f1;
}
#buttons.simplecheckout-button-block {
    background: #f5f5f5;
    border: none;
    box-shadow: none;
    padding: 15px;
    margin-top: -2px;
    border-radius: 0 0 17px 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
#buttons .simplecheckout-button-left,
#buttons .simplecheckout-button-right {
    display: flex;
    align-items: center;
    gap: 16px;
    float: none;
    text-align: left;
}
/* в разметке .button-right (кнопка заказа) идёт в DOM раньше .button-left (назад) —
   явно фиксируем визуальный порядок, чтобы "Назад" был слева, а заказ — справа */
#buttons .simplecheckout-button-left { order: 1; }
#buttons .simplecheckout-button-right { order: 2; }
#buttons #agreement_checkbox {
    float: none;
    margin: 0;
    font-size: 13px;
    color: var(--sc-muted);
}
#buttons #agreement_checkbox a { color: var(--sc-accent); }
#buttons .button.btn-primary.button_oc.btn {
    border-radius: 999px !important;
    padding: 14px 30px !important;
    font-weight: 600;
    text-transform: none;
    border: none !important;
    box-shadow: none !important;
    line-height: normal;
}
#simplecheckout_button_confirm {
    background: var(--sc-dark) !important;
    color: #fff !important;
}
#simplecheckout_button_back,
#simplecheckout_button_prev {
    background: transparent !important;
    border: 1px solid var(--sc-border) !important;
    color: var(--sc-text) !important;
}

/* ---------- Мобильная адаптация ---------- */
@media only screen and (max-width: 640px) {
    .simple-content .checkout-heading { padding: 16px 16px 8px; }
    .simple-content .simplecheckout-block-content { padding: 4px 16px 18px; }
    #simplecheckout_cart .table-responsive { padding: 0 16px 8px; }
    .sc-mini-card { margin: 12px; }
    #buttons.simplecheckout-button-block { flex-direction: column-reverse; align-items: stretch; }
    #buttons .simplecheckout-button-right { flex-direction: column; align-items: stretch; }
    #buttons .button.btn-primary.button_oc.btn { text-align: center; }
}