/* ================================================
   Стили для модальных окон авторизации клиентов
   ================================================ */

/* Brand Colors Override - Only for Auth Modals */
.client-auth-modal {
    --bs-primary: #4a90e2;
    --bs-primary-rgb: 74, 144, 226;
}

/* Модальные окна */
.client-auth-modal .modal-content {
    border-radius: 0.75rem;
    box-shadow: 0 0.3125rem 1.25rem rgba(0, 0, 0, 0.3);
}

.client-auth-modal .modal-header {
    border-bottom: 1px solid #e0e0e0;
    padding: 1.25rem 1.5625rem;
}

.client-auth-modal .modal-body {
    padding: 1.5625rem;
}

.client-auth-modal .modal-footer {
    border-top: 1px solid #e0e0e0;
    padding: 0.9375rem 1.5625rem;
}

/* Формы */
.client-auth-modal .form-label {
    font-weight: 500;
    color: #555;
    margin-bottom: 0.5rem;
}

.client-auth-modal .form-control {
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 0.625rem 0.9375rem;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.client-auth-modal .form-control:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 0.1875rem rgba(74, 144, 226, 0.1);
    outline: none;
}

.client-auth-modal .form-check {
    padding-left: 1.75rem;
    margin-bottom: 1rem;
}

.client-auth-modal .form-check-input {
    margin-top: 0.25rem;
}

.client-auth-modal .form-check-label {
    font-size: 0.95rem;
    color: #666;
}

/* Кнопки */
.client-auth-modal .btn {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s;
}

.client-auth-modal .btn-primary {
    background-color: #4a90e2;
    border-color: #4a90e2;
}

.client-auth-modal .btn-primary:hover {
    background-color: #357abd;
    border-color: #357abd;
}

/* VK button - официальный синий VK */
.client-auth-modal .btn-outline-primary {
    color: #4C75A3;
    border-color: #4C75A3;
}

.client-auth-modal .btn-outline-primary:hover {
    background-color: #4C75A3;
    color: #fff;
}

/* Yandex button - официальный красно-оранжевый Yandex */
.client-auth-modal .btn-outline-warning {
    color: #FC3F1D;
    border-color: #FC3F1D;
}

.client-auth-modal .btn-outline-warning:hover {
    background-color: #FC3F1D;
    color: #fff;
}

/* Mail.ru button - официальный голубой Mail.ru */
.client-auth-modal .btn-outline-danger {
    color: #168DE2;
    border-color: #168DE2;
}

.client-auth-modal .btn-outline-danger:hover {
    background-color: #168DE2;
    color: #fff;
}

/* Alerts */
.client-auth-modal .alert {
    border-radius: 0.5rem;
    padding: 0.75rem 0.9375rem;
    margin-bottom: 0.9375rem;
}

.client-auth-modal .alert-danger {
    background-color: #ffe5e5;
    border-color: #ff4d4d;
    color: #cc0000;
}

.client-auth-modal .alert-success {
    background-color: #e5f7e5;
    border-color: #4daf4d;
    color: #006600;
}

.client-auth-modal .alert-info {
    background-color: #e5f3ff;
    border-color: #4a90e2;
    color: #004085;
}

/* Spinner */
.client-auth-modal .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Ссылки */
.client-auth-modal a {
    color: #4a90e2;
    text-decoration: none;
    transition: color 0.3s;
}

.client-auth-modal a:hover {
    color: #357abd;
    text-decoration: underline;
}

/* Toast уведомления */
.toast-container {
    z-index: 9999;
}

.toast {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.2);
}

.toast-body {
    padding: 0.75rem 0.9375rem;
}

/* Иконка авторизованного пользователя */
.user-btn.authorized {
    position: relative;
}

.user-btn.authorized::after {
    content: '';
    position: absolute;
    top: -0.125rem;
    right: 0.125rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: #4caf50;
    border-radius: 50%;
    border: 0.125rem solid #fff;
    box-shadow: 0 0 0 0.125rem rgba(76, 175, 80, 0.3), 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}

/* Адаптивность */
@media (max-width: 576px) {
    .client-auth-modal .modal-dialog {
        margin: 10px;
    }

    .client-auth-modal .modal-body {
        padding: 20px;
    }

    .client-auth-modal .modal-header {
        padding: 15px 20px;
    }

    .client-auth-modal .modal-footer {
        padding: 12px 20px;
    }

    .client-auth-modal .btn {
        padding: 12px 15px;
        font-size: 1rem;
    }
}

/* OAuth кнопки */
.client-auth-modal .btn i {
    margin-right: 0.5rem;
}

/* OAuth кнопки с SVG иконками */
.client-auth-modal .oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.client-auth-modal .oauth-btn svg {
    flex-shrink: 0;
}

.client-auth-modal .oauth-btn:hover svg {
    fill: #fff;
}

/* VK кнопка - официальный синий */
.client-auth-modal .oauth-vk {
    color: #0077FF;
    border-color: #0077FF;
}

.client-auth-modal .oauth-vk:hover {
    background-color: #0077FF;
    border-color: #0077FF;
    color: #fff;
}

/* Mail.ru кнопка - официальный синий */
.client-auth-modal .oauth-mailru {
    color: #005FF9;
    border-color: #005FF9;
}

.client-auth-modal .oauth-mailru:hover {
    background-color: #005FF9;
    border-color: #005FF9;
    color: #fff;
}

/* Яндекс кнопка - официальный красный */
.client-auth-modal .oauth-yandex {
    color: #FC3F1D;
    border-color: #FC3F1D;
}

.client-auth-modal .oauth-yandex:hover {
    background-color: #FC3F1D;
    border-color: #FC3F1D;
    color: #fff;
}

/* Иконки соцсетей - официальные логотипы */

/* VK logo - официальный логотип ВКонтакте */
.client-auth-modal .icon-vk {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%234C75A3'%3E%3Cpath d='M25.2 35.9s.6-.1.9-.4c.3-.3.3-.9.3-.9s0-2.6 1.2-3c1.2-.4 2.7 2.5 4.3 3.6 1.2.8 2.1.7 2.1.7l4.3-.1s2.2-.1 1.2-1.9c-.1-.1-.6-1.3-3.2-3.7-2.7-2.5-2.3-2.1.9-6.5 2-2.7 2.8-4.3 2.5-5-.3-.7-1.7-.5-1.7-.5l-4.8 0s-.4-.1-.6.1c-.3.2-.4.5-.4.5s-.8 2.1-1.8 3.8c-2.1 3.7-3 3.9-3.3 3.7-.8-.5-.6-2.2-.6-3.3 0-3.6.5-5.1-1-5.5-.5-.1-.9-.2-2.3-.2-1.7 0-3.2 0-4 .4-.6.3-1 .9-.7.9.3 0 1.1.2 1.4.7.5.7.5 2.2.5 2.2s.3 4.2-.7 4.8c-.7.4-1.6-.4-3.5-3.8-1-1.7-1.7-3.6-1.7-3.6s-.1-.4-.4-.6c-.3-.2-.7-.3-.7-.3l-4.5 0s-.7 0-.9.3c-.2.3 0 .8 0 .8s3.6 8.5 7.6 12.8c3.7 3.9 7.9 3.7 7.9 3.7l1.9 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Mail.ru logo - буква M в облаке */
.client-auth-modal .icon-mail {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23168DE2'%3E%3Cpath d='M40 12H8c-2.2 0-3.98 1.8-3.98 4L4 36c0 2.2 1.8 4 4 4h32c2.2 0 4-1.8 4-4V16c0-2.2-1.8-4-4-4zm0 8L24 28 8 20v-4l16 8 16-8v4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* Yandex logo - красная буква Я */
.client-auth-modal .icon-yandex {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23FC3F1D'%3E%3Cpath d='M29.4 8H18.6v13.5h3.7c4.2 0 7.1-2.5 7.1-6.8 0-4.2-2.9-6.7-7.1-6.7H18.6V8h10.8zm-6.8 17.5h-3.7V40h-4V8h7.7c6.5 0 11.1 3.8 11.1 10.7 0 5.2-2.9 8.7-7.4 10L34 40h-4.6l-6.8-14.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.client-auth-modal .icon-ok::before {
    content: "OK";
    font-weight: bold;
}

.client-auth-modal .icon-telegram::before {
    content: "TG";
    font-weight: bold;
}

/* Разделитель "или" */
.client-auth-modal .modal-body > div.mt-4 {
    border-top: 1px solid #e0e0e0;
    padding-top: 1.25rem;
}

/* Поля обязательные к заполнению */
.client-auth-modal .text-danger {
    color: #dc3545;
}

/* Форма текст */
.client-auth-modal .form-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Bootstrap modal backdrop */
.client-auth-modal .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.client-auth-modal .modal-backdrop.show {
    opacity: 0.5;
}

/* Закрывающая кнопка */
.client-auth-modal .btn-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #000;
    opacity: 0.5;
}

.client-auth-modal .btn-close:hover {
    opacity: 0.75;
}

/* Gap между кнопками */
.client-auth-modal .d-grid.gap-2 {
    gap: 0.5rem;
}

/* Utilities */
.client-auth-modal .d-none {
    display: none !important;
}

.client-auth-modal .text-center {
    text-align: center;
}

.client-auth-modal .text-end {
    text-align: right;
}

.client-auth-modal .text-muted {
    color: #6c757d !important;
}

.client-auth-modal .w-100 {
    width: 100% !important;
}

.client-auth-modal .mb-3 {
    margin-bottom: 1rem;
}

.client-auth-modal .mt-3 {
    margin-top: 1rem;
}

.client-auth-modal .mt-4 {
    margin-top: 1.5rem;
}

.client-auth-modal .me-2 {
    margin-right: 0.5rem;
}