/**
 * TOCHKA Modal & Sheet Engine v27.6.4 — Atmos Core (Cinema Depth Update)
 * Фичи: Stacked Layers, Glassmorphism, Dynamic Island Safe, Dismiss Animations
 * Интеграция: Druzhi i Tochka UI Engine [2026-05-10]
 * Исправления: Fix for Overlay Double-Stacking Blackout, Modal Displacement & GPU Sync
 * FIX: Layer Hierarchy for .modal-system (Clickability Fix)
 * UPDATED: System Modal Alignment & Pop-up Scaling (Cinema Glass Fix)
 * CRITICAL FIX: Pointer-events ghost layer removal after closing (Visibility Sync)
 * ADDED: Filter Reset Rule for content clarity
 * FIX [2026-05-10]: Идеальная центровка кнопки закрытия (крестика) во всех типах модалок.
 * UPDATED [2026-05-13]: Интеграция Cinema Glass профиля и оптимизация кнопок под IMG_20260513_120313.webp.
 */

:root {
    --ios-curve: cubic-bezier(0.32, 0.72, 0, 1);
    --ios-accent: #007AFF; 
    --glass-bg: rgba(28, 28, 30, 0.75);
    --ios-border: rgba(255, 255, 255, 0.1);
    --safe-top: env(safe-area-inset-top, 20px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    
    /* Дефолтная иконка для заглушки шторки */
    --sheet-placeholder-icon: "📍";
}

/* --- CLARITY FIX: Всегда четкие модалки --- */
.modal-system.is-active, 
.ios-modal.is-active {
    filter: none !important;
    -webkit-filter: none !important;
}

/* --- UI SYNC: BODY & TABBAR CONTROL --- */
body.modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
    touch-action: none; /* Предотвращает скролл фона на iOS */
}

body.modal-opened .tabbar-container {
    transform: translate3d(0, 120%, 0) !important;
    transition: transform 0.4s var(--ios-curve) !important;
}

/* --- ANIMATION: DISMISS CARD (GPU Accelerated) --- */
.is-deleting {
    pointer-events: none;
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.point-card.is-deleting, 
.feed-card-glass.is-deleting,
.point-card-managed.is-deleting {
    animation: card-dismiss 0.6s var(--ios-curve) forwards;
    will-change: transform, opacity;
}

@keyframes card-dismiss {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
        filter: blur(0);
        max-height: 1000px; 
        margin-bottom: 16px;
    }
    20% {
        transform: translate3d(-15px, 0, 0) scale(1.02); 
        opacity: 1;
    }
    50% {
        opacity: 0.5;
        transform: translate3d(60%, 0, 0) scale(0.8);
    }
    100% {
        transform: translate3d(150%, 0, 0) scale(0.6); 
        opacity: 0;
        filter: blur(15px);
        max-height: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* --- ОСНОВНОЙ КОНТЕЙНЕР МОДАЛКИ (SHEET) --- */
.ios-modal {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 99999 !important; /* Приоритет над таббаром */
    display: none !important;
    align-items: flex-end; 
    justify-content: center;
    /* FIX: Полное отключение кликов и видимости в выключенном состоянии */
    pointer-events: none !important;
    visibility: hidden;
    opacity: 0;
    overscroll-behavior: contain;
    margin: 0 !important;
    transition: opacity 0.4s var(--ios-curve), visibility 0.4s;
}

.ios-modal.is-active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Активируем клики только при наличии класса .is-active */
    pointer-events: auto !important;
}

/* --- ЦЕНТРИРОВАНИЕ: PRO МОДАЛКА И СИСТЕМНЫЕ ОКНА --- */
.js-pro-modal.ios-modal,
.modal-system.ios-modal,
.modal-profile.ios-modal {
    align-items: center !important;
}

#modal-pro-messaging {
    z-index: 99999 !important;
    position: fixed !important;
}

.js-pro-modal.ios-modal {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    perspective: 1000px;
    backface-visibility: hidden;
}

/* --- ОБРАБОТКА ОВЕРЛЕЯ (FIXED FOR iOS BLUR) --- */
.ios-modal-overlay {
    position: fixed !important; 
    inset: 0;
    z-index: 99998 !important;
    background: rgba(0, 0, 0, 0.4); /* Прозрачнее для лучшего эффекта блюра */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Защита: оверлей не должен перехватывать клики, если модалка закрыта */
    pointer-events: none !important; 
    transition: opacity 0.3s ease !important;
}

/* Принудительное скрытие оверлея, если родительская модалка не активна */
.ios-modal:not(.is-active) .ios-modal-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Убедитесь, что активная модалка показывает оверлей */
.ios-modal.is-active .ios-modal-overlay {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* --- КОНТЕНТ МОДАЛКИ --- */
.ios-modal-content {
    position: relative;
    width: 100%;
    max-width: 550px;
    background: #000;
    border-radius: 38px 38px 0 0;
    padding: 0 0 calc(30px + var(--safe-bottom));
    transform: translate3d(0, 105%, 0);
    -webkit-transform: translate3d(0, 105%, 0);
    transition: transform 0.5s var(--ios-curve);
    box-shadow: 0 -20px 60px rgba(0,0,0,0.8);
    z-index: 99999 !important;
    pointer-events: none !important; 
    overflow: hidden; 
    will-change: transform;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.ios-modal.is-active .ios-modal-content {
    transform: translate3d(0, 0, 0) scale(1);
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto !important;
}

/* --- 1. СТИЛИ ДЛЯ КАРТОЧКИ ПРОФИЛЯ (CINEMA GLASS) --- */
.modal-profile .ios-modal-content {
    background: rgba(28, 28, 30, 0.9) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px !important;
    width: 92% !important;
    max-width: 400px;
    margin: auto !important;
    padding: 24px 20px !important;
    transform: scale(0.9) translate3d(0, 20px, 0);
    opacity: 0;
}

.ios-modal.is-active.modal-profile .ios-modal-content {
    transform: scale(1) translate3d(0, 0, 0) !important;
    opacity: 1 !important;
}

/* --- 2. ФИКС КНОПОК В ПРОФИЛЕ (Sync with IMG_20260513_120313.webp) --- */
.profile-actions-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

.profile-btn-primary {
    background: var(--ios-accent) !important;
    border-radius: 16px !important;
    height: 54px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: none;
    cursor: pointer;
}

.profile-btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    height: 54px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    border: none;
    cursor: pointer;
}

/* Специфичные настройки для центрированного контента (PRO & System) */
.js-pro-modal .ios-modal-content,
.modal-system .ios-modal-content {
    border-radius: 32px !important;
    margin: 20px !important;
    padding: 24px !important;
    transform: translate3d(0, 30px, 0) scale(0.9);
    -webkit-transform: translate3d(0, 30px, 0) scale(0.9);
    opacity: 0;
}

.ios-modal.is-active .ios-modal-content {
    opacity: 1;
}

@media (min-width: 768px) {
    .ios-modal { align-items: center; }
    .ios-modal-content {
        border-radius: 28px !important;
        transform: translate3d(0, 50px, 0) scale(0.95);
        -webkit-transform: translate3d(0, 50px, 0) scale(0.95);
        opacity: 0;
    }
    .ios-modal.is-active .ios-modal-content {
        transform: translate3d(0, 0, 0) scale(1);
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
}

/* --- CINEMA GLASS FOR REPORTS & SYSTEM --- */
.js-modal-report .ios-modal-content,
.js-pro-modal .ios-modal-content {
    background: rgba(20, 20, 22, 0.85) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-pull-bar {
    width: 40px;
    height: 5px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin: 14px auto 0;
}

/* --- КНОПКА ЗАКРЫТИЯ (ИДЕАЛЬНОЕ ЦЕНТРИРОВАНИЕ) --- */
.modal-close-x, 
.modal-close-btn, 
.modal-close-touch {
    position: absolute;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 1000 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.modal-close-x img, 
.modal-close-x svg,
.modal-close-btn img,
.modal-close-btn svg,
.modal-close-touch i {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    pointer-events: none;
}

.modal-close-touch i {
    font-size: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* --- ACF FORM STYLING IN MODALS --- */
.acf-report-form-container [data-name="report_type"],
.acf-report-form-container [data-name="reported_user"],
.acf-report-form-container [data-name="reported_point"],
.acf-report-form-container [data-name="reported_message_id"],
.acf-report-form-container [data-name="reason"],
.acf-report-form-container [data-name="status"] {
    display: none !important;
}

.acf-report-form-container .acf-fields > .acf-field {
    border: none !important;
    padding: 10px 0 !important;
}

.btn-report-submit {
    background: #FF3B30 !important;
    color: white !important;
    border: none !important;
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    margin-top: 15px !important;
    box-shadow: 0 8px 24px rgba(255, 59, 48, 0.3) !important;
    cursor: pointer;
    transition: transform 0.2s var(--ios-curve);
}

.btn-report-submit:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* --- SHEET HEADER & HERO ADAPTIVITY --- */
#modal-point-details.no-hero-image .js-sheet-hero {
    height: 140px !important; 
    min-height: 140px !important;
}

.ios-modal-handle {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    width: 40px;
    height: 5px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    z-index: 10010; 
}

/* --- SCROLL & ACTIONS FIX --- */
.sheet-content-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    overscroll-behavior: contain;
}

.sheet-footer-actions {
    position: relative !important; 
    padding-bottom: calc(15px + var(--safe-bottom)) !important;
    z-index: 10;
    background: transparent;
    flex-shrink: 0;
}

/* --- СОСТОЯНИЕ ЗАГРУЗКИ (iOS SPINNER) --- */
.ios-btn.is-loading,
.btn-report-submit.is-loading {
    position: relative;
    color: transparent !important; 
    pointer-events: none; 
    opacity: 0.85;
}

.ios-btn.is-loading::after,
.btn-report-submit.is-loading::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    top: calc(50% - 11px);
    left: calc(50% - 11px);
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin-ios 0.75s linear infinite;
}

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

/* Кнопка удаления с эффектом подтверждения (Shake) */
.btn-delete-outline.confirm-waiting {
    background: #FF3B30 !important;
    color: #fff !important;
    border-color: #FF3B30 !important;
    animation: ios-shake 0.4s var(--ios-curve);
}

@keyframes ios-shake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    20%, 60% { transform: translate3d(-6px, 0, 0); }
    40%, 80% { transform: translate3d(6px, 0, 0); }
}

/* --- ДИНАМИЧЕСКИЕ ИКОНКИ КАТЕГОРИЙ --- */
.js-placeholder-icon::before {
    content: var(--sheet-placeholder-icon);
}

.cat-eda { --sheet-placeholder-icon: "🍔"; }
.cat-sport { --sheet-placeholder-icon: "⚽"; }
.cat-kultura { --sheet-placeholder-icon: "🎭"; }
.cat-igry { --sheet-placeholder-icon: "🎮"; }
.cat-volunteering { --sheet-placeholder-icon: "📸"; }
.cat-party { --sheet-placeholder-icon: "🥳"; }
.cat-study { --sheet-placeholder-icon: "📚"; }

/* --- СИСТЕМА PUSH-УВЕДОМЛЕНИЙ (TOASTS) --- */
#toast-container {
    position: fixed;
    top: var(--safe-top);
    left: 0;
    right: 0;
    z-index: 1100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.ios-push-banner {
    pointer-events: auto;
    width: 94%;
    max-width: 440px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border: 0.5px solid var(--ios-border);
    border-radius: 26px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    transition: transform 0.4s var(--ios-curve);
    will-change: transform;
    transform: translate3d(0, -140%, 0);
    -webkit-transform: translate3d(0, -140%, 0);
}

.ios-push-banner.animate-in {
    animation: pushIn 0.7s var(--ios-curve) forwards;
}

.ios-push-banner.animate-out {
    animation: pushOut 0.5s ease-in forwards;
}

/* --- iOS STYLE ALERTS (System Popups / Errors) --- */
/* FIX: Модалка ошибки теперь имеет матовый стеклянный фон */
.modal-system.is-active {
    display: flex !important;
    pointer-events: auto !important;
}

.ios-modal.modal-system {
    align-items: center !important; 
    justify-content: center !important; 
    /* Добавляем блюр на весь фон за алертом */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ios-modal.modal-system .ios-modal-content {
    z-index: 99999 !important;
    pointer-events: auto !important;
    position: relative;
    transform: scale(0.8) !important; 
    bottom: auto !important; 
    /* iOS Glass Effect для контента */
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border-radius: 20px !important; 
    width: 280px !important; /* Нативная ширина Alert */
    max-width: 90% !important;
    margin: 0 !important;
    transition: all 0.4s var(--ios-curve) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
    padding-bottom: 0 !important; /* Убираем лишний паддинг снизу для кнопок */
}

.ios-modal.modal-system.is-active .ios-modal-content {
    transform: scale(1) !important;
    opacity: 1 !important;
}

.ios-alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200000;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ios-alert-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.ios-alert-container {
    width: 275px; /* Идеальный размер по гайдам Apple */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 14px;
    overflow: hidden;
    transform: scale(1.15) translate3d(0, 0, 0);
    -webkit-transform: scale(1.15) translate3d(0, 0, 0);
    transition: transform 0.35s var(--ios-curve);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.ios-alert-overlay.is-active .ios-alert-container {
    transform: scale(1) translate3d(0, 0, 0);
    -webkit-transform: scale(1) translate3d(0, 0, 0);
    animation: ios-pop 0.4s var(--ios-curve);
}

.ios-alert-content { padding: 20px 16px; text-align: center; }
.ios-alert-title { color: #000; font-weight: 600; font-size: 17px; margin-bottom: 4px; letter-spacing: -0.4px; }
.ios-alert-text { color: #000; font-size: 13.5px; line-height: 1.4; opacity: 0.8; }

.ios-alert-footer { display: flex; flex-direction: column; }

.ios-alert-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: none;
    border-top: 0.5px solid rgba(0,0,0,0.1);
    color: var(--ios-accent);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.ios-alert-btn:active {
    background: rgba(0,0,0,0.05);
}

/* --- GLOBAL KEYFRAMES (GPU Optimized) --- */
@keyframes pushIn {
    from { transform: translate3d(0, -140%, 0) scale(0.8); opacity: 0; filter: blur(10px); }
    to { transform: translate3d(0, 0, 0) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes pushOut {
    to { transform: translate3d(0, -80px, 0) scale(0.85); opacity: 0; filter: blur(10px); }
}

@keyframes ios-pop {
    0% { transform: scale(1.2) translate3d(0, 0, 0); opacity: 0; }
    100% { transform: scale(1) translate3d(0, 0, 0); opacity: 1; }
}

/* --- UI COMPONENTS: BUTTON STATES --- */
.btn-disabled { 
    background: #3a3a3c !important; 
    opacity: 0.6; 
    filter: grayscale(1); 
    cursor: not-allowed; 
}

/* Отключение подсветки тапов */
* { -webkit-tap-highlight-color: transparent; outline: none; }