#pay-form.pay-form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 18px;
}

.pay-product-name {
    margin-bottom: 4px;
}

.pay-product-price {
    margin: 0 0 8px;
}

.pay-prestart-form {
    width: 100%;
}

#pay-form .prestart-field-body input[type="text"],
#pay-form .prestart-field-body input[type="email"],
#pay-form .prestart-nickname-input-wrap input,
#pay-form .prestart-password-input-wrap input {
    display: block;
    flex: none;
    width: 100%;
    height: 56px;
    padding: 20px 38px 6px 14px;
}

#pay-form .prestart-field select {
    flex: none;
}

#pay-birth-month { order: 1; }
#pay-birth-day { order: 2; }
#pay-birth-year { order: 3; }

#pay-form textarea.pay-option {
    display: block;
    width: 100%;
    min-height: 72px;
    padding: 20px 14px 8px;
    border-radius: 5px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font: 16px/1.4 var(--font);
    resize: vertical;
}

#pay-form textarea.pay-option:focus {
    outline: none;
    border-color: var(--line-focus);
}

.pay-section-block {
    width: 100%;
    padding-top: 6px;
}

.pay-section-title {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
}

.pay-options-form .pay-options-field {
    display: block;
    width: 100%;
}

.pay-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pay-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    font-size: 14.5px;
    color: var(--ink);
}

.pay-checkbox:hover {
    border-color: var(--line-focus);
}

.pay-checkbox:has(input:checked) {
    border-color: var(--rk-orange);
}

.pay-checkbox input[type="checkbox"],
.pay-checkbox input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0;
    accent-color: var(--rk-orange);
    cursor: pointer;
}

.pay-checkbox-name {
    flex: 1;
    font-weight: 500;
}

.pay-variant-price {
    color: var(--ink-soft);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pay-checkbox--out {
    cursor: not-allowed;
    opacity: 0.55;
}

.pay-checkbox--out:hover {
    border-color: var(--line);
}

.pay-checkbox--out .pay-checkbox-name {
    text-decoration: line-through;
}

.pay-checkbox--out input[type="checkbox"],
.pay-checkbox--out input[type="radio"] {
    cursor: not-allowed;
}

.pay-variant-out {
    color: var(--danger);
    font-weight: 600;
}

.pay-option-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.pay-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #eaeaee;
    border-radius: 8px;
    background: #f6f6f8;
}

.pay-summary-label {
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 500;
}

.pay-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

#pay-total {
    display: inline-block;
}

#pay-total.pay-total-bump {
    animation: pay-total-bump 0.38s ease;
}

@keyframes pay-total-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.08); color: var(--rk-orange); }
    100% { transform: scale(1); }
}

.pay-actions {
    width: 100%;
    margin-top: 4px;
}

.pay-actions .pay-note,
.pay-actions .pay-message {
    width: 100%;
    order: 3;
}

#btn-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 220px;
}

.pay-btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(28, 20, 3, 0.25);
    border-top-color: #1c1403;
    border-radius: 50%;
    animation: pay-btn-spin 0.7s linear infinite;
    display: none;
}

#btn-pay.is-loading .pay-btn-spinner {
    display: inline-block;
}

@keyframes pay-btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.pay-message {
    margin: 0;
    font-size: 14px;
    color: var(--ink-soft);
    text-align: center;
}

.pay-message.is-error {
    color: var(--danger);
}

.pay-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    color: var(--ink-soft);
}

.pay-note a {
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 560px) {
    #btn-pay {
        width: 100%;
        min-width: 0;
    }
}