/* ==========================================================================
   Библиотека Пара — оформление заказа
   Зависит от base.css
   ========================================================================== */

body { padding-bottom: calc(112px + var(--safe-bottom)); }

main { padding: var(--sp-4) var(--sp-4) var(--sp-10); }

/* --------------------------------------------------------------------------
   Заголовки секций
   -------------------------------------------------------------------------- */

main h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: var(--sp-8) 0 var(--sp-3);
}

main h2:first-of-type { margin-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   Поля ввода
   -------------------------------------------------------------------------- */

.form-control {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--r-md) !important;
    padding: 14px var(--sp-4) !important;
    font-family: inherit;
    font-size: 15px !important;
    font-weight: 500;
    letter-spacing: -0.005em;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
}

.form-control::placeholder { color: var(--faint); }

.form-control:focus {
    background-color: var(--surface-2) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

.form-control.is-invalid,
.form-check-input.is-invalid {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(228, 88, 106, 0.22) !important;
}

textarea.form-control {
    width: 100%;
    margin-top: var(--sp-5);
    min-height: 92px;
    line-height: 1.55;
    resize: none;
}

/* --------------------------------------------------------------------------
   Варианты выбора — строка с радио справа
   -------------------------------------------------------------------------- */

.checkout-block,
.checkout-block1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 62%);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-2);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.checkout-block:active,
.checkout-block1:active {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.checkout-block h3,
.checkout-block1 h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
}

/* Радио-кнопка как тонкое кольцо с акцентной заливкой */
.form-check-input {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--surface-3);
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Селектор повторяет специфичность Bootstrap (.form-check-input:checked[type="radio"]),
   иначе его встроенная иконка перебивает нашу */
.form-check-input:checked[type="radio"] {
    background-color: var(--accent);
    border-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.6' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.form-check-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Поясняющий текст под вариантом
   -------------------------------------------------------------------------- */

.checkout-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
    margin: var(--sp-1) var(--sp-1) var(--sp-4);
}

/* Поля адреса, раскрывающиеся по выбору доставки */
#address-group { margin-top: var(--sp-2); }

#address-group .form-control + .form-control { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   Кнопка отправки
   -------------------------------------------------------------------------- */

.button-footer,
#submit-btn {
    position: fixed;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: calc(var(--sp-4) + var(--safe-bottom));
    z-index: 20;
    display: block;
    width: calc(100% - var(--sp-8));
    text-align: center;
    background: var(--accent-grad);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.005em;
    padding: 16px;
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-accent);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

#submit-btn:active {
    transform: scale(0.985);
    box-shadow: 0 6px 18px -6px rgba(228, 78, 134, 0.5);
}