/* ========================================
   GLOBAL COMPONENTS
   ======================================== */

/* PAGE TRANSITION OVERLAY */
#page-transition-overlay {
    position: fixed;
    inset: 0;
    /* Глубокая версия акцента ТЕКУЩЕЙ темы (раньше вечно-изумрудный #0b3b2e
       «зеленил» переходы в midnight/dawn/ocean/ink) */
    background: var(--page-transition-bg, #0b3b2e);
    z-index: var(--z-transition);
    pointer-events: none;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 420ms ease, transform 420ms cubic-bezier(.2,.9,.3,1);
    will-change: opacity, transform;
}

#page-transition-overlay.exit {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
}

#page-transition-overlay.enter {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
}

#page-transition-overlay.enter.hide {
    opacity: 0;
    transform: scale(1.02);
}

/* Body scroll lock */
body.modal-open {
    overflow: hidden;
    padding-inline-end: var(--scrollbar-width, 0);
}

/* Tooltip */
.custom-tooltip {
    position: fixed;
    padding: 10px 15px;
    background: color-mix(in srgb, var(--emerald-dark, #047857) 95%, black);
    color: #fff;
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    pointer-events: none;
    z-index: var(--z-tooltip);
    max-width: 250px;
    line-height: 1.4;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: var(--font-primary);
}

.custom-tooltip.show {
    opacity: 1;
}

/* Spinner */
.spinner-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-gray);
    border-top-color: var(--emerald);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

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

/* ========================================
   ACCESS GATE MODAL (все страницы)
   ======================================== */
.access-gate-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gateIn 0.2s;
}
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gateSlideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.access-gate-modal {
    background: var(--white, #fff);
    border-radius: 12px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    animation: gateSlideUp 0.3s ease-out;
}

.access-gate-modal .gate-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.access-gate-modal h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-gray, #1f2937);
    margin: 0 0 8px;
}

.access-gate-modal p {
    font-size: 14px;
    color: var(--medium-gray, #6b7280);
    margin: 0 0 20px;
    line-height: 1.5;
}

.access-gate-modal .gate-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gate-actions .btn-gate-primary {
    padding: 10px 24px;
    background: var(--emerald, #059669);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-primary, 'Inter', sans-serif);
}

.gate-actions .btn-gate-primary.premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.gate-actions .btn-gate-secondary {
    padding: 8px 24px;
    background: transparent;
    color: var(--medium-gray, #6b7280);
    border: none;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-primary, 'Inter', sans-serif);
}

/* ========================================
   MODULE USER ACCOUNT (хедер модулей)
   ======================================== */
.module-user-wrap {
    position: relative;
    margin-inline-start: 8px;
}

.module-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-gray, #d1d5db);
    background: var(--white, #fff);
    color: var(--medium-gray, #6b7280);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.module-auth-btn:hover {
    border-color: var(--emerald, #059669);
    color: var(--emerald, #059669);
}

.module-user-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    background: var(--emerald-50, #ecfdf5);
    border: 2px solid var(--emerald, #059669);
    cursor: pointer;
    transition: all 0.2s ease;
}
.module-user-btn:hover {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--emerald) 20%, transparent);
}

.module-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--emerald, #059669);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary, 'Inter', sans-serif);
}
.module-user-avatar.lg {
    width: 42px;
    height: 42px;
    font-size: 17px;
}

.module-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--white, #fff);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border: 1px solid var(--border-gray, #e5e7eb);
    min-width: 220px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}
.module-user-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.module-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}
.module-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-gray, #1f2937);
}

.module-dropdown-divider {
    height: 1px;
    background: var(--border-gray, #e5e7eb);
    margin: 0;
}

.module-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--dark-gray, #374151);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: start;
    font-family: var(--font-primary, 'Inter', sans-serif);
    transition: background 0.15s;
}
.module-dropdown-item:hover {
    background: var(--light-bg, #f3f4f6);
}
.module-dropdown-item.danger {
    color: #dc2626;
}
.module-dropdown-item.danger:hover {
    background: #fef2f2;
}
.module-dropdown-item svg {
    flex-shrink: 0;
}

/* ========================================
   UNIFIED MODULE FOOTER
   ======================================== */
.module-footer {
    background: #1f2937;
    border-top: none;
    padding: 32px 24px;
    margin-top: auto;
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
}

.module-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.module-footer-brand {
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    white-space: nowrap;
}

.module-footer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.module-footer-link {
    font-size: 13px;
    color: var(--emerald-light, #6ee7b7);
    text-decoration: none;
    transition: color 0.15s;
}
.module-footer-link:hover {
    color: var(--gold-light, #fde68a);
}

.module-footer-lang {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

/* Стили lang-switcher для тёмного фона футера */
.module-footer-lang .lang-trigger {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
}
.module-footer-lang .lang-trigger:hover,
.module-footer-lang .lang-trigger.open {
    border-color: var(--emerald-light, #6ee7b7);
    color: var(--emerald-light, #6ee7b7);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12);
}

/* Дропдаун открывается вверх */
.module-footer-lang .lang-dropdown {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom center;
    transform: translateY(6px) scale(0.97);
    left: 50%;
    right: auto;
    translate: -50%;
}
.module-footer-lang .lang-dropdown.open {
    transform: translateY(0) scale(1);
    translate: -50%;
}

@media (max-width: 640px) {
    .module-footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    .module-footer-lang {
        justify-content: center;
    }
    .module-footer-lang .lang-dropdown {
        left: 50%;
        translate: -50%;
    }
}

/* ── Бейдж режима чтения (все модули) ──── */
.reading-mode-badge {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: var(--emerald, #059669);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 1;
    transition: opacity 1s ease;
}

.reading-mode-badge.fade-out {
    opacity: 0;
}

/* ============================================================
   Глобальный размер арабского шрифта
   Управляется переменной --arabic-font-size (из auth.js → applyFontSize)
   ============================================================ */

/* Коран — арабский текст аятов */
.quran-ayah-arabic {
    font-size: var(--arabic-font-size, 1.75rem) !important;
    line-height: var(--arabic-line-height, 2.2) !important;
}

/* Хадисы — заголовки разделов и pre-text (мукаддима арабская управляется
   в hadith-collections.css фиксированным размером, как и .hadith-matn) */
.hadith-section-title,
.pre-text-body,
.pre-text-fasl-title {
    font-size: var(--arabic-font-size, 1.1rem) !important;
    line-height: var(--arabic-line-height, 2.0) !important;
}

/* Фетвы — арабские панели ответов и вопросов */
.fatwa-arabic-text,
.fatwa-lang-panel[data-lang="ar"] .fatwa-question-body,
.fatwa-lang-panel[data-lang="ar"] .fatwa-answer-body {
    font-size: var(--arabic-font-size, 1.22em) !important;
    line-height: var(--arabic-line-height, 2.2) !important;
}

/* ============================================================
   Переключатель языка — БАЗОВЫЕ правила (Фаза 0)
   Дублируют layout.css, но размещены в global.css, который грузится
   на ВСЕХ страницах — чтобы langSwitcher работал и там, где layout.css
   не подключён (кабинет и др.). Скоупленные правила футеров
   (.main-footer-lang / .module-footer-lang) выше остаются приоритетнее.
   ============================================================ */
.lang-switcher { position: relative; }

.lang-trigger {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-gray);
    background: var(--white);
    color: var(--dark-gray);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    font-family: var(--font-primary);
    letter-spacing: 0.02em;
}

.lang-trigger:hover,
.lang-trigger.open {
    border-color: var(--emerald);
    color: var(--emerald);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 10%, transparent);
}

.lang-globe { width: 15px; height: 15px; flex-shrink: 0; }
.lang-chevron { width: 13px; height: 13px; flex-shrink: 0; transition: transform var(--transition-fast); }
.lang-trigger.open .lang-chevron { transform: rotate(180deg); }

.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 148px;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    z-index: var(--z-dropdown);
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform-origin: top right;
}

.lang-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: background var(--transition-fast);
    text-align: start;
}

.lang-option:hover,
.lang-option.active { background: var(--emerald-50); }

.lang-opt-code {
    font-size: 12px;
    font-weight: 700;
    color: var(--emerald);
    letter-spacing: 0.05em;
    min-width: 28px;
}

.lang-option:not(.active) .lang-opt-code { color: var(--medium-gray); }
.lang-option:hover .lang-opt-code { color: var(--emerald); }

.lang-opt-name { font-size: 13px; color: var(--dark-gray); font-weight: 400; }
.lang-option.active .lang-opt-name { font-weight: 500; color: var(--emerald-dark); }

.lang-option + .lang-option { border-top: 1px solid var(--border-gray); }

/* ============================================================
   RTL (арабский) — точечные оверрайды.
   Логические свойства (margin-inline/padding-inline/text-align:start)
   зеркалятся автоматически по dir. Здесь — то, что осталось физическим:
   абсолютно-позиционированные выпадающие (right:0 → к левому краю),
   transform-origin и направленные иконки/стрелки.
   Scoped к html[dir="rtl"] — на LTR (русский/английский) не влияет.
   ============================================================ */
html[dir="rtl"] .lang-dropdown,
html[dir="rtl"] .module-user-dropdown,
html[dir="rtl"] .user-dropdown,
html[dir="rtl"] .notify-dropdown,
html[dir="rtl"] .main-footer-lang .lang-dropdown,
html[dir="rtl"] .module-footer-lang .lang-dropdown {
    right: auto;
    left: 0;
    transform-origin: top left;
}

/* Кастомный тултип позиционируется по координатам курсора в JS — оставляем как есть. */

/* Направленные «назад»-стрелки/чевроны: зеркалим горизонтально в RTL. */
html[dir="rtl"] .cabinet-back-link svg,
html[dir="rtl"] .pt-back-link svg,
html[dir="rtl"] .mkt-reader-back svg,
html[dir="rtl"] .hadith-back-to-collections svg,
html[dir="rtl"] .quran-back-arrow svg {
    transform: scaleX(-1);
}
/* ── Слим-футер с переключателем языка для страниц без собственного футера
   (кабинет/мактаба/время-намаза — дашборд/ридер-лейауты). Переключатель языка
   живёт в футере на ВСЕХ страницах (единое место выбора языка). ── */
.module-footer-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px 16px;
    margin-top: 28px;
    border-top: 1px solid var(--border-gray, #e5e7eb);
}
html[dir="rtl"] .module-footer-bar { direction: rtl; }

/* ============================================================
   KAWN TOAST — единая система тостов (js/toast.js)
   ============================================================ */
.kawn-toasts {
    position: fixed;
    inset-block-end: 20px;
    inset-inline-end: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: var(--z-toast);
    max-width: min(380px, calc(100vw - 32px));
}

.kawn-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--surface-1);
    color: var(--text-1);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--emerald);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
}

@media (prefers-reduced-motion: no-preference) {
    .kawn-toast { animation: kawnToastIn var(--duration-2) var(--ease-out) both; }
    .kawn-toast.leaving { animation: kawnToastOut var(--duration-2) ease both; }
    @keyframes kawnToastIn  { from { opacity: 0; translate: 0 8px; } }
    @keyframes kawnToastOut { to   { opacity: 0; translate: 0 6px; } }
}

.kawn-toast-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--emerald); }
.kawn-toast-icon svg { width: 100%; height: 100%; }
.kawn-toast-msg { flex: 1; }
.kawn-toast-close {
    flex-shrink: 0;
    width: 16px; height: 16px;
    color: var(--text-3);
    padding: 0;
    transition: color var(--transition-fast);
}
.kawn-toast-close:hover { color: var(--text-1); }
.kawn-toast-close svg { width: 100%; height: 100%; }

.kawn-toast-error   { border-inline-start-color: var(--danger); }
.kawn-toast-error   .kawn-toast-icon { color: var(--danger); }
.kawn-toast-warning { border-inline-start-color: var(--warning); }
.kawn-toast-warning .kawn-toast-icon { color: var(--warning); }
.kawn-toast-info    { border-inline-start-color: var(--info); }
.kawn-toast-info    .kawn-toast-icon { color: var(--info); }

/* ============================================================
   KAWN DIALOG — промис-диалоги на <dialog> (js/dialog.js)
   ============================================================ */
.kawn-dialog {
    border: none;
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    color: var(--text-1);
    box-shadow: var(--shadow-modal);
    padding: 24px;
    width: min(420px, calc(100vw - 32px));
}

.kawn-dialog::backdrop {
    background: rgba(10, 14, 12, 0.5);
    backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: no-preference) {
    .kawn-dialog[open] { animation: kawnDlgIn var(--duration-2) var(--ease-out) both; }
    @keyframes kawnDlgIn { from { opacity: 0; translate: 0 10px; } }
}

.kawn-dialog-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.kawn-dialog-msg {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2);
    white-space: pre-line;
}

.kawn-dialog-input {
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--text-1);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.kawn-dialog-input:focus {
    border-color: var(--emerald);
    box-shadow: var(--focus-ring);
}

.kawn-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.kawn-dialog-btn {
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-primary);
    transition: all var(--transition-fast);
}

.kawn-dialog-cancel {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border-strong);
}
.kawn-dialog-cancel:hover { background: var(--surface-2); }

.kawn-dialog-ok {
    background: var(--emerald);
    color: var(--on-primary);
}
.kawn-dialog-ok:hover { background: var(--emerald-dark); }

.kawn-dialog-ok.danger { background: var(--danger); }
.kawn-dialog-ok.danger:hover { background: color-mix(in srgb, var(--danger) 85%, black); }

/* ============================================================
   KAWN SKELETON — шиммер-заглушки вместо голых спиннеров
   ============================================================ */
.kawn-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    min-height: 14px;
}

@media (prefers-reduced-motion: no-preference) {
    .kawn-skeleton::after {
        content: '';
        position: absolute;
        inset: 0;
        translate: -100% 0;
        background: linear-gradient(90deg, transparent,
            color-mix(in srgb, var(--surface-1) 60%, transparent), transparent);
        animation: kawnShimmer 1.4s infinite;
    }
    @keyframes kawnShimmer { to { translate: 100% 0; } }
}

.kawn-skeleton-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============================================================
   МИКРО-АНИМАЦИИ ФОРМ
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .form-group.invalid { animation: kawnShake 0.3s ease; }
    @keyframes kawnShake {
        25% { translate: -5px 0; }
        50% { translate: 4px 0; }
        75% { translate: -2px 0; }
    }
}

/* Кнопка в состоянии загрузки: инлайн-спиннер вместо смены текста */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}
.btn-loading::after {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-inline-start: 8px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-inline-start-color: transparent;
    border-radius: 50%;
    animation: kawnSpin 0.7s linear infinite;
}
@keyframes kawnSpin { to { transform: rotate(360deg); } }

/* Золотое кольцо аватара premium-подписчика */
.avatar-premium {
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent) !important;
}