/* ============================================
   KIRANIME REPORTS V2 - GHOST MODE
   ============================================ */

/* 1. CONFIGURARE MODAL */
#kiranime-report-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; 
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2. CÂND MODALUL ESTE DESCHIS */
#kiranime-report-modal:not(.hidden):not(.kr-hidden) {
    z-index: 2147483647 !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* --- Stiluri Vizuale --- */
#kiranime-report-modal .modal-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 1;
}

#kiranime-report-modal .modal-container {
    position: relative; width: 100%; max-width: 600px; max-height: 90vh;
    overflow-y: auto; z-index: 10; background: #1a1a1a;
    border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.9); display: flex; flex-direction: column;
}

#kiranime-report-modal .modal-header { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
#kiranime-report-modal .modal-header h5 { margin: 0; color: #fff; font-size: 1.25rem; font-weight: 600; }
#kiranime-report-modal .modal-header .material-icons-round { font-size: 28px; color: #ef4444; }
#kiranime-report-modal .modal-close { margin-left: auto; background: rgba(255,255,255,0.05); border: none; color: #ef4444; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
#kiranime-report-modal .modal-close:hover { background: rgba(239,68,68,0.2); }
#kiranime-report-modal .modal-close:hover .material-icons-round { transform: rotate(90deg); transition: transform 0.3s; }

#kiranime-report-modal .modal-body { padding: 1.5rem; color: #ddd; overflow-y: auto; }
#kiranime-report-modal .hidden, #kiranime-report-modal .kr-hidden { display: none !important; }

#kiranime-report-modal .category-option { display: flex; align-items: center; gap: 1rem; padding: 1.2rem; background: rgba(255,255,255,0.03); margin-bottom: 0.75rem; border-radius: 12px; cursor: pointer; border: 1px solid rgba(255,255,255,0.05); transition: all 0.2s; }
#kiranime-report-modal .category-option:hover { background: rgba(255,255,255,0.08); border-color: rgba(239,68,68,0.4); transform: translateX(5px); }
#kiranime-report-modal .category-option.active { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; }
#kiranime-report-modal .category-icon { width: 42px; height: 42px; flex-shrink: 0; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; }
#kiranime-report-modal .category-content h6 { margin: 0 0 4px 0; color: #fff; font-size: 1rem; }
#kiranime-report-modal .category-content p { margin: 0; font-size: 0.85rem; color: #aaa; }
#kiranime-report-modal .category-option.active .category-check { opacity: 1; transform: scale(1); margin-left: auto; color: #ef4444; }
#kiranime-report-modal .category-check { opacity: 0; transform: scale(0.5); transition: all 0.3s; margin-left: auto; }

#kiranime-report-modal .faq-accordion-item { margin-bottom: 8px; background: rgba(255,255,255,0.03); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
#kiranime-report-modal .faq-question { padding: 12px 15px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: #eee; font-weight: 500; }
#kiranime-report-modal .faq-question:hover { background: rgba(255,255,255,0.05); }
#kiranime-report-modal .faq-icon { width: 24px; height: 24px; flex-shrink: 0; background: #333; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
#kiranime-report-modal .faq-accordion-item.active .faq-icon { transform: rotate(45deg); background: #ef4444; }
#kiranime-report-modal .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: rgba(0,0,0,0.2); }
#kiranime-report-modal .faq-accordion-item.active .faq-answer { max-height: 500px; border-top: 1px solid rgba(255,255,255,0.05); }
#kiranime-report-modal .faq-answer-content { padding: 15px; font-size: 0.9rem; line-height: 1.5; color: #ccc; }

#kiranime-report-modal input, #kiranime-report-modal textarea { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 12px; border-radius: 8px; margin-bottom: 1rem; }
#kiranime-report-modal .report-screenshot-preview { margin-bottom: 1.25rem; }
#kiranime-report-modal .report-screenshot-preview label,
#kiranime-report-modal .timecode-input label,
#kiranime-report-modal .description-input label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #fff; font-weight: 600; }
#kiranime-report-modal .report-screenshot-frame { display: flex; align-items: center; justify-content: center; min-height: 180px; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); }
#kiranime-report-modal .report-screenshot-frame img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
#kiranime-report-modal .report-screenshot-empty { padding: 18px; color: #9ca3af; text-align: center; font-size: 0.875rem; line-height: 1.5; }
#kiranime-report-modal .report-screenshot-preview small { display: block; margin-top: 8px; color: #9ca3af; }
#kiranime-report-modal .notice-box { background: rgba(251, 191, 36, 0.1); border-left: 3px solid #fbbf24; padding: 1rem; border-radius: 6px; display: flex; gap: 10px; margin-bottom: 1.5rem; }
#kiranime-report-modal .mistake-hunt-note .notice-box { background: rgba(59, 130, 246, 0.12); border-left-color: #60a5fa; }
#kiranime-report-modal .mistake-hunt-list { margin: 12px 0 0; padding-left: 18px; }
#kiranime-report-modal .mistake-hunt-list li { margin-bottom: 6px; color: #e5e7eb; }
#kiranime-report-modal .modal-footer { padding: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: flex-end; gap: 1rem; margin-top: auto; }
#kiranime-report-modal .btn-primary { background: #ef4444; color: white; border: none; padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
#kiranime-report-modal .btn-secondary { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: white; padding: 10px 20px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
