/* ===== إعدادات عامة ===== */
* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}
body {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg,#f0f0f8,#d0e7ff);
    scroll-behavior:smooth;
    color:#222;
    padding-top:90px; /* لإزاحة الهيدر */
    padding-bottom:130px; /* لإزاحة الفوتر */
}

/* ===== الهيدر ===== */
header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:70px;
    background: linear-gradient(90deg,#4f46e5,#8b5cf6);
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    z-index:999;
    box-shadow:0 3px 6px rgba(0,0,0,0.2);
    flex-wrap:wrap;
}
header strong { font-size:22px; }
header nav a {
    margin:0 8px;
    text-decoration:none;
    color:#fff;
    font-weight:bold;
    transition:0.3s;
}
header nav a:hover { color:#ffeb3b; transform:scale(1.1); }

/* ===== الحاوية ===== */
.container { max-width:1200px; margin:auto; }

/* ===== الشبكة ===== */
.grid {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
}

/* ===== الكروت ===== */
.card {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:150px;
    text-align:center;
    text-decoration:none;
    color:#000;
    font-size:14px;
    background:#fff;
    padding:10px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover { transform: translateY(-6px); box-shadow:0 10px 25px rgba(0,0,0,0.15); }

.card img, .card video, .file-icon {
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:8px;
    cursor:pointer;
    transition: transform 0.3s;
}
.card img:hover, .card video:hover, .file-icon:hover { transform: scale(1.05); }

.file-icon {
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:36px;
    background: linear-gradient(135deg,#94a3b8,#cbd5e1);
    color:#1e293b;
    width:100px;
    height:100px;
    margin-bottom:8px;
    border-radius:10px;
}

/* ===== نصوص البطاقة ===== */
.card span { font-weight:bold; font-size:12px; color:#555; margin-bottom:5px; }
.card h3 { font-size:13px; margin:4px 0; word-break:break-word; text-align:center; }
.view-count { font-size:12px; color:#555; margin-bottom:5px; }

/* ===== أزرار ===== */
a.back-btn, .more-btn {
    display:inline-block;
    width:200px;
    text-align:center;
    margin:20px 0;
    padding:10px;
    background:#4f46e5;
    color:#fff;
    font-weight:bold;
    text-decoration:none;
    border-radius:25px;
    transition:0.3s;
}
a.back-btn:hover, .more-btn:hover { background:#8b5cf6; transform:scale(1.05); }

/* ===== نافذة تكبير الصور ===== */
.image-modal {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    z-index:2000;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.image-modal img {
    max-width:90%;
    max-height:85%;
    border-radius:10px;
}
.close-btn {
    position:absolute;
    top:20px;
    right:30px;
    font-size:35px;
    color:#fff;
    cursor:pointer;
}
.nav-btn {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:40px;
    color:#fff;
    cursor:pointer;
    user-select:none;
    padding:10px;
}
.prev-btn { left:20px; }
.next-btn { right:20px; }

/* ===== Pagination ===== */
.pagination { text-align:center; margin-top:25px; }
.pagination a {
    display:inline-block;
    padding:6px 12px;
    margin:3px;
    border-radius:8px;
    background:#e5e7eb;
    color:#111;
    text-decoration:none;
    font-weight:bold;
    transition:0.3s;
}
.pagination a:hover { background:#cbd5e1; }
.pagination a.active { background:#2563eb; color:#fff; }

/* ===== جوال ===== */
@media(max-width:768px){
    .grid {
        display:grid;
        grid-template-columns: repeat(2, 1fr);
        gap:15px;
        justify-items: center;
    }
    .card { width:100%; font-size:16px; }
    .card img, .card video, .file-icon { width:120px; height:120px; }
    header { flex-direction:column; height:auto; padding:10px 20px; gap:5px; }
    header nav a { margin:6px; font-size:15px; }
    a.back-btn, .more-btn { width:80%; padding:12px; font-size:16px; }
}
@media(max-width:480px){
    .grid { grid-template-columns: 1fr; }
    .card img, .card video, .file-icon { width:100px; height:100px; }
}

/* ===== فوتر ===== */
footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:100px;
    background: linear-gradient(90deg,#4f46e5,#8b5cf6);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    box-shadow:0 -3px 6px rgba(0,0,0,0.2);
    font-size:14px;
}
footer .social-icons { display:flex; gap:15px; margin-top:8px; }
footer .social-icons img { width:40px; transition:0.3s; }
footer .social-icons img:hover { transform:scale(1.2); }