/* 24racks Store — payment choices v5.
   Payment methods need a visible hit area without reintroducing nested panels. */

.checkout-payment-panel .payment-method-grid,
.checkout-payment-panel .payment-method-group--renewal .payment-method-grid {
    gap: 8px;
}

.checkout-payment-panel .payment-method-card {
    min-height: 80px;
    border: 1px solid color-mix(in srgb, var(--border-dim) 84%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.checkout-payment-panel .payment-method-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--bg-root) 40%, transparent);
}

.checkout-payment-panel .payment-method-input:focus-visible + .payment-method-card {
    outline-offset: 2px;
    border-color: var(--brand);
}

.checkout-payment-panel .payment-method-input:checked + .payment-method-card {
    border-color: color-mix(in srgb, var(--brand) 78%, var(--blue-border));
    background: color-mix(in srgb, var(--brand) 16%, var(--bg-elevated));
    box-shadow: 0 5px 16px color-mix(in srgb, var(--brand) 12%, transparent);
}

.checkout-payment-panel .payment-method-input:checked + .payment-method-card .payment-method-card__copy strong {
    color: var(--text-1);
}

@media (max-width: 760px) {
    .checkout-payment-panel .payment-method-grid,
    .checkout-payment-panel .payment-method-group--renewal .payment-method-grid {
        gap: 7px;
    }

    .checkout-payment-panel .payment-method-card {
        min-height: 72px;
    }
}