/* ============================================================
 * Unified loading spinner for AJAX buttons.
 * Used with: setButtonLoading(el) / restoreButton(el) from user.js
 *
 * Usage in HTML:
 *   <button data-loading-on-submit="true">Save</button>
 * Or in JS:
 *   setButtonLoading(btn);
 *   ... AJAX ...
 *   restoreButton(btn, 'Save');
 * ============================================================ */

.magicai-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: magicai-spin 0.7s linear infinite;
    vertical-align: middle;
    opacity: 0.85;
}

@keyframes magicai-spin {
    to { transform: rotate(360deg); }
}

.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
    cursor: progress !important;
}

.is-loading .magicai-loading-label {
    vertical-align: middle;
}

/* Skeleton/placeholder loading для блоков */
.is-loading-block {
    position: relative;
    min-height: 60px;
    pointer-events: none;
}
.is-loading-block::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(200, 255, 0, 0) 0%,
            rgba(200, 255, 0, 0.08) 50%,
            rgba(200, 255, 0, 0) 100%);
    animation: magicai-shimmer 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes magicai-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%);  }
}

/* Accessibility: focus visible outlines в стиле сайта */
.site-header a:focus-visible,
.site-header button:focus-visible,
button:focus-visible,
a.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #c8ff00;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Убираем outline если пользователь ориентируется мышью */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Красные бордеры для полей с ошибкой валидации (работает с user.js fix-ошибок) */
.form-control.is-invalid,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: #f87171 !important;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.15) !important;
}

.invalid-feedback {
    display: block;
    font-size: 0.8125rem;
    margin-top: 0.3rem;
    color: #f87171;
}