/**
 * Regions and Branches Styles
 * Стили для выбора регионов и филиалов
 */

/* Select элементы для региона и филиала */
.auth-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.auth-select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007cba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.auth-select:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
    cursor: not-allowed;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Стили для опций */
.auth-select option {
    padding: 8px 12px;
    background-color: var(--color-white);
    color: var(--color-text-primary);
}

.auth-select option:hover {
    background-color: var(--color-primary-50);
}

.auth-select option:disabled {
    color: var(--color-gray-400);
    background-color: var(--color-gray-50);
}

/* Анимация загрузки филиалов */
.auth-select.loading {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='3'%3e%3c/circle%3e%3cpath d='M12 1v6m0 6v6m11-7h-6m-6 0H1'%3e%3c/path%3e%3c/svg%3e");
    animation: spin 1s linear infinite;
}

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

/* Responsive стили */
@media (max-width: 768px) {
    .auth-select {
        background-position: right 8px center;
        background-size: 14px;
        padding-right: 32px;
    }
}

/* Стили для профиля */
.profile-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.profile-form-select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007cba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.profile-form-select:disabled {
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
    cursor: not-allowed;
}

/* Индикатор обязательного поля */
.auth-label[data-required="true"]::after,
.profile-form-label[data-required="true"]::after {
    content: " *";
    color: var(--color-error, #dc3545);
    font-weight: 500;
}

/* Состояния валидации */
.auth-input-wrapper.valid .auth-select,
.profile-form-input-wrapper.valid .profile-form-select {
    border-color: var(--color-success, #28a745);
}

.auth-input-wrapper.invalid .auth-select,
.profile-form-input-wrapper.invalid .profile-form-select {
    border-color: var(--color-error, #dc3545);
}

/* Сообщения об ошибках */
.auth-field-feedback.error,
.profile-form-feedback.error {
    color: var(--color-error, #dc3545);
    font-size: 0.875rem;
    margin-top: 4px;
    display: block;
}

.auth-field-feedback.success,
.profile-form-feedback.success {
    color: var(--color-success, #28a745);
    font-size: 0.875rem;
    margin-top: 4px;
    display: block;
}

/* Группировка полей региона и филиала */
.region-branch-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .region-branch-group {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Стили для информации о регионе в профиле */
.profile-info-item .region-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-info-item .region-icon {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Анимации */
.auth-select,
.profile-form-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-select:focus,
.profile-form-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);
}