body {
            background-color: #f8f9fa;
            padding: 20px;
        }
        .payment-form {
            background: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin: 20px auto;
        }
        .back-button {
            display: block;
            width: 100%;
            margin-bottom: 15px;
        }
        @media (max-width: 576px) {
            .payment-form {
                padding: 20px;
            }
            h2 {
                font-size: 1.5rem;
            }
            .btn {
                font-size: 1rem;
                padding: 10px;
            }
        }
/* Hover — НЕ заливаем фон, только меняем цвет рамки и текста */
.vpn-switch .btn-openvpn:hover:not(.active) {
    background-color: transparent;
    color: #0d6efd;
    border-color: #0d6efd;
}

.vpn-switch .btn-vless:hover:not(.active) {
    background-color: transparent;
    color: #fd7e14;
    border-color: #fd7e14;
}

/* Active — всегда заливка и белый текст */
.vpn-switch .btn-openvpn.active {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

.vpn-switch .btn-vless.active {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
    color: #fff !important;
}

/* Active + hover — то же что и просто active */
.vpn-switch .btn-openvpn.active:hover,
.vpn-switch .btn-vless.active:hover {
    background-color: inherit !important;
    border-color: inherit !important;
    color: inherit !important;
}
/* При наведении на активную кнопку — текст всегда белый */
.vpn-switch .btn-openvpn.active:hover {
    color: #fff !important;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

.vpn-switch .btn-vless.active:hover {
    color: #fff !important;
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
}
.vpn-switch .btn {
    flex: 1 1 0; /* Кнопки растягиваются равномерно */
    text-align: center; /* Центрируем текст */
    min-width: 0; /* Для корректного сжатия на узких экранах */
}

/* Если нужна одинаковая высота — можно задать фиксированную */
.vpn-switch {
    display: flex;
}