/* ============================================
   AL JAZEERA CLONE v2 - Dark Mode CSS
   ============================================ */

/* Dark Mode Button */
.dark-mode-btn {
    background: none;
    border: 1px solid #444;
    color: #ccc;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.8rem;
    padding: 0;
}
.dark-mode-btn:hover { border-color: var(--aj-red); color: var(--aj-red); }

/* ===== DARK MODE OVERRIDES ===== */
body.dark-mode {
    background: #121212;
    color: #e0e0e0;
}
body.dark-mode a { color: #e0e0e0; }
body.dark-mode a:hover { color: var(--aj-red); }

/* Cards & surfaces */
body.dark-mode .article-card,
body.dark-mode .admin-card,
body.dark-mode .stat-card {
    background: #1e1e1e;
    border-color: #2a2a2a;
}

/* Article card text */
body.dark-mode .article-card-title { color: #e0e0e0; }
body.dark-mode .article-card-title:hover { color: var(--aj-red); }
body.dark-mode .article-card-excerpt { color: #aaa; }
body.dark-mode .article-list-title { color: #e0e0e0; }
body.dark-mode .article-list-title:hover { color: var(--aj-red); }

/* Sidebar */
body.dark-mode .sidebar-widget { background: transparent; }
body.dark-mode .trending-title { color: #e0e0e0; }
body.dark-mode .trending-num { color: #333; }

/* Article detail */
body.dark-mode .article-detail-title { color: #f0f0f0; }
body.dark-mode .article-detail-excerpt { color: #bbb; }
body.dark-mode .article-body { color: #d0d0d0; }
body.dark-mode .article-body h2,
body.dark-mode .article-body h3 { color: #f0f0f0; }
body.dark-mode .article-body blockquote { background: #1e1e1e; color: #bbb; }
body.dark-mode .article-detail-meta { border-color: #2a2a2a; color: #888; }
body.dark-mode .divider { background: #2a2a2a; }

/* Section headings */
body.dark-mode .section-heading { color: #e0e0e0; }

/* Borders & dividers */
body.dark-mode .article-list-card { border-color: #2a2a2a; }
body.dark-mode .trending-item { border-color: #2a2a2a; }
body.dark-mode .comment-item { border-color: #2a2a2a; }

/* Forms */
body.dark-mode .form-control {
    background: #1e1e1e;
    border-color: #333;
    color: #e0e0e0;
}
body.dark-mode .form-control:focus {
    background: #252525;
    border-color: var(--aj-red);
    color: #e0e0e0;
    box-shadow: none;
}
body.dark-mode .form-control::placeholder { color: #555; }

/* Category page hero */
body.dark-mode .page-hero { background: #0d0d0d; }

/* Footer */
body.dark-mode .main-footer { background: #0d0d0d; }
body.dark-mode .footer-bottom { background: #080808; border-color: #1a1a1a; }

/* Tags */
body.dark-mode .tag-badge { background: #2a2a2a; color: #aaa; }
body.dark-mode .tag-badge:hover { background: var(--aj-red); color: #fff; }

/* Search */
body.dark-mode .search-header { background: #0d0d0d; }

/* Light gray sections */
body.dark-mode .category-band { background: #1a1a1a; }
body.dark-mode [style*="background:#f7f7f7"],
body.dark-mode [style*="background: #f7f7f7"] { background: #1e1e1e !important; }
body.dark-mode [style*="background:var(--aj-light-gray)"],
body.dark-mode [style*="background: var(--aj-light-gray)"] { background: #1e1e1e !important; }

/* ===== GALLERY STYLES ===== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 20px 0;
}
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4/3;
    background: #111;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    display: block;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    padding: 20px 10px 8px;
    opacity: 0;
    transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-caption { color: #fff; font-size: 0.78rem; }
.gallery-item-expand {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item-expand { opacity: 1; }

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.lightbox-img {
    max-width: 92vw;
    max-height: 82vh;
    object-fit: contain;
    display: block;
}
.lightbox-caption {
    color: #ccc;
    font-size: 0.88rem;
    margin-top: 12px;
    text-align: center;
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.lightbox-nav:hover { background: var(--aj-red); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-counter { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #aaa; font-size: 0.82rem; }

/* ===== POLL STYLES ===== */
.poll-widget {
    background: #f7f7f7;
    border-left: 4px solid var(--aj-red);
    padding: 20px;
    margin: 28px 0;
}
body.dark-mode .poll-widget { background: #1a1a1a; }
.poll-question {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--aj-dark);
    margin-bottom: 16px;
}
body.dark-mode .poll-question { color: #f0f0f0; }
.poll-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--aj-border);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
    font-size: 0.9rem;
}
body.dark-mode .poll-option label { background: #252525; border-color: #333; color: #ddd; }
.poll-option label:hover { border-color: var(--aj-red); }
.poll-option input[type="radio"] { accent-color: var(--aj-red); }
.poll-bar-wrap { margin-bottom: 10px; }
.poll-bar-label { font-size: 0.85rem; color: var(--aj-text); margin-bottom: 4px; display: flex; justify-content: space-between; }
body.dark-mode .poll-bar-label { color: #ddd; }
.poll-bar-bg { background: var(--aj-border); border-radius: 2px; height: 8px; overflow: hidden; }
body.dark-mode .poll-bar-bg { background: #333; }
.poll-bar-fill { background: var(--aj-red); height: 100%; border-radius: 2px; transition: width 0.6s ease; }
.poll-bar-fill.winner { background: #c0001a; }
.poll-total { font-size: 0.78rem; color: #999; margin-top: 10px; }

/* ===== VIDEO EMBED STYLES ===== */
.video-embed-wrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
    margin-bottom: 8px;
    overflow: hidden;
}
.video-embed-wrap iframe { width: 100%; height: 100%; border: none; }
.video-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--aj-red);
    color: #fff;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* ===== DARK MODE TOGGLE ANIMATION ===== */
.dark-mode-btn i { transition: transform 0.3s; }
.dark-mode-btn:hover i { transform: rotate(20deg); }

/* ===== SEO META FIELDS (admin) ===== */
.seo-preview {
    border: 1px solid var(--aj-border);
    padding: 14px;
    background: #fff;
    margin-top: 10px;
}
.seo-preview-title { color: #1a0dab; font-size: 1rem; font-weight: 600; }
.seo-preview-url { color: #006621; font-size: 0.8rem; }
.seo-preview-desc { color: #545454; font-size: 0.85rem; }

/* ===== TAGS PAGE ===== */
.tag-cloud a {
    display: inline-block;
    background: var(--aj-light-gray);
    color: var(--aj-gray);
    padding: 6px 16px;
    font-size: 0.85rem;
    margin: 4px;
    border-radius: 20px;
    transition: all 0.2s;
    font-weight: 600;
}
.tag-cloud a:hover { background: var(--aj-red); color: #fff; }
body.dark-mode .tag-cloud a { background: #2a2a2a; color: #bbb; }
body.dark-mode .tag-cloud a:hover { background: var(--aj-red); color: #fff; }

/* ===== MEDIA LIBRARY ===== */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.media-item {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.media-item:hover { border-color: var(--aj-red); }
.media-item.selected { border-color: var(--aj-red); }
.media-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}
.media-item-name {
    font-size: 0.72rem;
    color: #666;
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #f7f7f7;
}
.media-item-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: var(--aj-red);
    color: #fff;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}
.media-item.selected .media-item-check { display: flex; }

/* Social login buttons */
.btn-google {
    background: #fff;
    color: #444;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
.btn-google:hover { background: #f5f5f5; color: #333; }
.btn-facebook {
    background: #1877f2;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}
.btn-facebook:hover { background: #1565c0; color: #fff; }
.divider-or {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #aaa;
    font-size: 0.82rem;
    margin: 16px 0;
}
.divider-or::before, .divider-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--aj-border);
}