/*
Theme Name: My Book Theme
Description: تنسيقات مخصصة وعصرية لقالب الكتب (رسمي ومحدث)
*/

:root {
    --primary: #104c59;
    /* بترولي داكن فخم مأخوذ من كتاب اللوجو */
    --primary-hover: #145e6d;
    /* بترولي فاتح عند الوقوف بالفأرة */
    --secondary: #cca458;
    /* ذهبي عتيق مأخوذ من حدود ونقوش اللوجو */
    --accent: #cca458;
    /* لون النجوم والتمييز الذهبي */
    --accent-hover: #b08d48;
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.03);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --radius: 12px;
}

/* تنسيقات عامة */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-hover);
}

/* الهيدر العصري (Sticky & Two Rows Layout) */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
}

.header-main-row {
    background-color: var(--primary);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-nav-row {
    background-color: #ffffff;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.site-branding {
    display: flex;
    flex-direction: column;
}

.site-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
}

.site-title a {
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-logo-image {
    max-height: var(--logo-height, 40px);
    width: auto;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
}

.site-title a:hover .site-logo-image {
    transform: scale(1.08);
}

.site-title a i {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
}

.site-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    margin-top: 2px;
}

/* القائمة الرئيسية (الروابط في الشريط الأبيض السفلي) */
.main-navigation {
    display: flex;
    align-items: center;
    width: 100%;
}

.primary-menu {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
    width: 100%;
    justify-content: flex-start;
}

.primary-menu li a {
    color: #475569;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 18px;
    transition: var(--transition);
    white-space: nowrap;
    display: inline-block;
    position: relative;
}

/* تأثير الخط السفلي التفاعلي الممتد من المنتصف */
.primary-menu li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
    transition: var(--transition);
    transform: translateX(-50%);
    border-radius: 10px;
}

.primary-menu li a:hover {
    color: var(--primary) !important;
    transform: translateY(-2px);
    /* تأثير صعود طفيف */
}

.primary-menu li a:hover::after {
    width: calc(100% - 36px);
    /* يتمدد الخط السفلي */
}

.primary-menu li.current-menu-item a {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(16, 76, 89, 0.15);
}

.primary-menu li.current-menu-item a::after {
    display: none;
    /* إخفاء الخط السفلي للتصنيف النشط */
}

/* زر البحث العصري في الهيدر */
.header-search .search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search .search-field {
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 15px 8px 45px;
    border-radius: 50px;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    width: 200px;
    transition: var(--transition);
    outline: none;
}

.header-search .search-field::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.header-search .search-field:focus {
    background-color: #ffffff;
    color: var(--text-main);
    width: 250px;
    border-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-search .search-submit {
    position: absolute;
    left: 5px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.header-search .search-field:focus~.search-submit {
    color: var(--text-muted);
}

.header-search .search-submit:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* زر الجوال للمنيو */
.menu-toggle {
    display: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    align-items: center;
    gap: 8px;
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* بطاقات شبكة عرض الكتب (Modern Grid Layout) */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.book-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.book-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background-color: var(--primary);
    transform: scaleY(0);
    transition: var(--transition);
    transform-origin: top;
}

.book-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.book-item:hover::before {
    transform: scaleY(1);
}

.book-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.book-item:hover img {
    transform: scale(1.03);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.book-item .book-title {
    font-size: 16px;
    font-weight: 700;
    margin: 15px 0 8px 0;
    line-height: 1.4;
}

.book-item .book-title a {
    color: var(--text-main);
}

.book-item .book-title a:hover {
    color: var(--primary-hover);
}

.book-item .book-excerpt {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* صفحة الكتاب المفردة (Premium Layout) */
.book-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2.8fr 1.2fr;
    gap: 40px;
}

.book-article {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.book-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.book-title {
    font-size: 34px;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 15px;
    line-height: 1.3;
}

/* شارات معلومات الكتاب البصرية */
.book-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 100%;
    overflow: hidden;
}

.book-meta>span,
.book-meta>a,
.book-genres a {
    font-size: 13px;
    background: #f1f5f9;
    color: #475569;
    padding: 6px 14px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.book-authors {
    flex-wrap: wrap;
    gap: 5px;
}

/* شارة التصنيفات المتعددة */
.book-genres {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    max-width: 100%;
    min-width: 0;
}

.book-genres a {
    white-space: nowrap;
}

.book-meta > a:hover,
.book-genres a:hover {
    background: var(--primary);
    color: #ffffff !important;
}

.book-authors a,
.book-publish-date a {
    color: var(--primary);
    font-weight: 700;
    transition: color 0.2s ease;
}

.book-authors a:hover,
.book-publish-date a:hover {
    color: var(--secondary) !important;
    text-decoration: underline;
}

.book-meta span strong {
    color: var(--text-main);
    white-space: nowrap;
}

/* تأثير صورة الغلاف المرتفعة (3D Spine Effect) */
.book-thumbnail {
    margin: 30px auto;
    text-align: center;
    max-width: 320px;
}

.book-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 8px 16px 16px 8px;
    box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.18), -1px 1px 4px rgba(0, 0, 0, 0.1);
    border-left: 5px solid rgba(0, 0, 0, 0.2);
    /* محاكاة كعب الكتاب */
    transition: var(--transition);
}

.book-thumbnail:hover img {
    transform: rotateY(-5deg) scale(1.02);
    box-shadow: -15px 15px 35px rgba(0, 0, 0, 0.22);
}

/* المحتوى والنبذة */
.book-content {
    font-size: 16px;
    line-height: 1.9;
    color: #334155;
    margin: 30px 0;
}

.book-content p {
    margin-bottom: 15px;
}

/* زر التحميل والنبذة المخصصة */
.book-footer {
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    margin-top: 40px;
    text-align: center;
}

.download-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #082d36 100%);
    color: #ffffff;
    padding: 16px 45px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(16, 76, 89, 0.2);
    transition: var(--transition);
}

.download-button:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--secondary) 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 76, 89, 0.35);
    color: #ffffff;
}

/* الشريط الجانبي والويدجت */
.book-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 120px;
    align-self: start;
}

.widget {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 25px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.widget h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 10px;
    margin-bottom: 15px;
    position: relative;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.widget ul li a {
    color: var(--text-main);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget ul li a::before {
    content: '←';
    color: var(--secondary);
    transition: var(--transition);
}

.widget ul li a:hover {
    color: var(--primary-hover);
}

.widget ul li a:hover::before {
    transform: translateX(-4px);
}

/* ============================================================
   تنسيق نظام التقييمات والمراجعات (Premium Rating UI)
   ============================================================ */

.book-reviews {
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
}

/* عنوان قسم التقييمات - بنمط عناوين الأقسام الرئيسية */
.reviews-section-title,
.comments-title {
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 25px 0;
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviews-section-title span,
.comments-title span {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reviews-section-title i,
.comments-title i {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16, 76, 89, 0.12) 0%, rgba(16, 76, 89, 0.04) 100%);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(16, 76, 89, 0.08);
    flex-shrink: 0;
}

.reviews-section-title::after,
.comments-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 65px;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
    border-radius: 10px;
}

/* بطاقة التقييم المجمعة البريميم */
.book-rating-summary {
    display: flex;
    align-items: center;
    gap: 25px;
    background: linear-gradient(135deg, #f0fdfa 0%, #e6f7f3 40%, #dff2ec 100%);
    padding: 28px 30px;
    border-radius: 16px;
    border: 1px solid #a7d8c8;
    box-shadow: 0 4px 20px rgba(16, 76, 89, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.book-rating-summary::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(16, 76, 89, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

/* كتلة الرقم المركزي */
.rating-score-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, #1c3d5a 100%);
    color: #ffffff;
    min-width: 85px;
    min-height: 85px;
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(16, 76, 89, 0.3);
    position: relative;
    z-index: 1;
}

.rating-average-number {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
}

.rating-out-of {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 2px;
}

/* تفاصيل النجوم والعداد */
.rating-details-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.rating-stars {
    color: var(--secondary);
    font-size: 22px;
    letter-spacing: 3px;
    display: flex;
    gap: 3px;
}

.rating-stars i {
    filter: drop-shadow(0 1px 2px rgba(58, 114, 141, 0.3));
}

/* شريط التقدم البصري */
.rating-progress-bar {
    width: 100%;
    max-width: 200px;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    overflow: hidden;
}

.rating-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary), var(--primary));
    border-radius: 50px;
    transition: width 1s ease;
}

.rating-count {
    font-size: 13px;
    color: #104c59;
    font-weight: 600;
}

/* حالة عدم وجود تقييمات */
.rating-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 5px 0;
}

.rating-empty-icon {
    font-size: 28px;
    color: #b0c4c9;
}

.rating-empty p {
    margin: 0;
    color: #64748b;
    font-style: italic;
    font-size: 14px;
}

/* نجوم التقييم في التعليقات */
.comment-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 10px;
    color: var(--secondary);
    font-size: 18px;
}

.comment-stars i {
    filter: drop-shadow(0 1px 1px rgba(58, 114, 141, 0.25));
}

.comment-rating-text {
    font-size: 12px;
    color: var(--primary);
    font-weight: 700;
    margin-right: 8px;
    background: #e0f2f1;
    padding: 2px 10px;
    border-radius: 50px;
    font-style: normal;
}

/* محدد النجوم التفاعلي في نموذج التعليقات */
.comment-form-rating-wrapper {
    background: linear-gradient(135deg, #f0fdfa 0%, #e6f7f3 100%);
    padding: 22px 25px;
    border-radius: 12px;
    border: 1px solid #a7d8c8;
    margin-bottom: 25px;
}

.comment-form-rating-wrapper label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.star-rating-selector {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    font-size: 42px !important;
    margin-top: 8px !important;
}

.star-rating-selector label {
    color: #b0c4c9 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
    font-size: 42px !important;
    line-height: 1 !important;
}

.star-rating-selector label:hover {
    transform: scale(1.15);
}

.star-rating-selector input[type="radio"]:checked~label,
.star-rating-selector label:hover,
.star-rating-selector label:hover~label {
    color: var(--secondary) !important;
}

/* تعليقات المراجعات (Review Comments Feed) */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* كارت التقييم المخصص */
.comment-body-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 24px;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.comment-body-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(16, 76, 89, 0.2);
}

/* هيدر التقييم */
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* معلومات المقيم */
.commenter-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.commenter-avatar img {
    border-radius: 50% !important;
    width: 52px;
    height: 52px;
    object-fit: cover;
    border: 2px solid var(--border-color) !important;
    display: block;
}

.commenter-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.commenter-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.comment-date {
    font-size: 12px;
    color: var(--text-muted);
}

/* النجوم أقصى اليسار (تلقائياً بفضل flex-direction) */
.comment-stars-wrapper {
    display: flex;
    align-items: center;
}

.comment-stars-left {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--secondary);
    font-size: 16px;
    direction: ltr;
    /* لضمان الترتيب الرياضي السليم للعلامة */
}

.comment-stars-left i {
    filter: drop-shadow(0 1px 1px rgba(58, 114, 141, 0.2));
}

.comment-stars-left .rating-badge {
    font-size: 12px;
    color: var(--primary);
    font-weight: 700;
    margin-left: 8px;
    background: #e0f2f1;
    padding: 2px 10px;
    border-radius: 50px;
}

/* فاصل تصميمي أنيق بين الهيدر والمحتوى */
.comment-separator {
    height: 1px;
    background: linear-gradient(90deg, var(--border-color) 0%, rgba(226, 232, 240, 0.15) 100%);
    margin: 18px 0;
    width: 100%;
}

/* محتوى التقييم */
.comment-content-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.8;
}

.comment-content-text p {
    margin: 0 0 10px 0;
}

.comment-content-text p:last-child {
    margin-bottom: 0;
}

/* ذيل التقييم والعمليات */
.comment-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
}

.comment-actions a {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.comment-actions a:hover {
    color: var(--primary);
}

.comment-actions .edit-link a {
    color: var(--text-muted);
}

.comment-actions .edit-link a:hover {
    color: #be123c;
}

/* ووردبريس يضيف فئات افتراضية سنقوم بتهيئتها لتلائم تصميمنا */
.comment-respond {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-top: 30px;
}

.comment-reply-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 20px;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
    width: 100%;
    border: 1px solid var(--border-color);
    padding: 12px 18px;
    border-radius: 8px;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    background-color: #f8fafc;
    transition: var(--transition);
    outline: none;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--primary);
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.form-submit input[type="submit"] {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    border-radius: 50px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
}

.form-submit input[type="submit"]:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
}

/* ============================================================
   تصميم الفوتر الفخم (Modern 3-Column Footer)
   ============================================================ */

.site-footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 60px 0 30px 0;
    margin-top: 60px;
    border-top: 5px solid var(--primary);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-title i {
    color: var(--accent);
}

.footer-desc {
    font-size: 14px;
    line-height: 1.7;
}

.footer-motto {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    border-right: 3px solid var(--secondary);
    padding-right: 12px;
}

/* روابط الفوتر السريعة */
.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-menu-list li a {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    display: inline-block;
}

.footer-menu-list li a:hover {
    color: #ffffff;
    transform: translateX(-4px);
}

.footer-social-text {
    font-size: 14px;
    line-height: 1.6;
}

/* أيقونات التواصل الاجتماعي */
.social-icons {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--transition);
}

.social-icon:hover {
    color: #ffffff;
    transform: translateY(-3px);
}

.social-icon.facebook:hover {
    background-color: #1877f2;
}

.social-icon.twitter:hover {
    background-color: #000000;
}

.social-icon.instagram:hover {
    background-color: #e1306c;
}

.social-icon.youtube:hover {
    background-color: #ff0000;
}

/* شريط الحقوق السفلي */
.site-info {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 25px;
    display: flex;
    justify-content: center;
    /* توسيط الحقوق في المنتصف */
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    text-align: center;
    /* توسيط النص أفقياً */
    width: 100%;
}

.site-info a {
    color: var(--secondary);
}

.site-info a:hover {
    color: #ffffff;
}

/* شبكة بطاقات التصنيفات في الصفحة الرئيسية */
.category-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.category-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 25px 20px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(2, 132, 199, 0.3);
}

.category-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f1f5f9;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: var(--transition);
}

.category-card:hover .category-card-icon {
    background-color: var(--primary);
    color: #ffffff;
}

.category-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
}

.category-card-count {
    font-size: 13px;
    color: var(--text-muted);
}

/* تنسيق شريط التمرير الأفقي العصري (Netflix Style) */
.books-grid.layout-scroll {
    display: flex !important;
    overflow-x: auto !important;
    gap: 20px;
    padding-bottom: 20px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    justify-content: flex-start;
}

.books-grid.layout-scroll .book-item {
    flex: 0 0 220px;
    /* عرض ثابت لكل كتاب في التمرير */
    scroll-snap-align: start;
    margin: 0;
}

/* تصميم شريط التمرير الأنيق والنحيف جداً بصرياً */
.books-grid.layout-scroll::-webkit-scrollbar {
    height: 5px !important;
}

.books-grid.layout-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02) !important;
    border-radius: 10px !important;
}

.books-grid.layout-scroll::-webkit-scrollbar-thumb {
    background: rgba(30, 58, 138, 0.12) !important;
    border-radius: 10px !important;
    transition: var(--transition);
}

.books-grid.layout-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--primary) !important;
}

/* تنسيقات قسم الهيرو (Hero Section) المطور */
.homepage-hero-section {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, #0f172a 100%) !important;
    /* تدرج بترولي داكن فخم */
    box-shadow: inset 0 -10px 25px rgba(0, 0, 0, 0.15);
    padding: 70px 20px 85px 20px;
    text-align: center;
    overflow: hidden;
}

/* نمط الباترن المنقط الشفاف */
.homepage-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px),
        radial-gradient(rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}

/* الأشكال الملونة الهائمة في الخلفية (الدمج البصري والأورورا) */
.hero-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(75px);
    opacity: 0.12;
    animation: floatShape 22s infinite alternate ease-in-out;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* تحرك سلس مع حركة الماوس */
}

.hero-shape-1 {
    width: 280px;
    height: 280px;
    background: var(--secondary);
    /* ذهبي مأخوذ من الشعار */
    top: -50px;
    right: -40px;
    animation-duration: 28s;
}

.hero-shape-2 {
    width: 240px;
    height: 240px;
    background: var(--primary-hover);
    /* بترولي أفتح */
    bottom: -60px;
    left: 8%;
    animation-duration: 22s;
    animation-delay: -6s;
}

.hero-shape-3 {
    width: 200px;
    height: 200px;
    background: var(--accent);
    /* ذهبي عتيق */
    top: 35%;
    left: 45%;
    animation-duration: 32s;
    animation-delay: -12s;
}

@keyframes floatShape {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate(40px, -25px) rotate(180deg) scale(1.15);
    }

    100% {
        transform: translate(-30px, 35px) rotate(360deg) scale(0.9);
    }
}

.hero-logo-icon {
    font-size: 80px;
    color: var(--accent);
    display: inline-block;
    filter: drop-shadow(0 4px 12px rgba(234, 179, 8, 0.45));
    animation: floatLogo 4s ease-in-out infinite;
}

@keyframes floatLogo {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.hero-title {
    font-size: 38px;
    font-weight: 900;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 0.5px;
}

.hero-subtitle {
    font-size: 18px;
    opacity: 0.95;
    font-weight: 500;
    margin: 0 0 35px 0;
    font-family: 'Tajawal', sans-serif;
    color: #e2e8f0;
}

/* صندوق البحث المطور */
.hero-search-form {
    display: flex;
    background: #ffffff;
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    align-items: center;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    border: 2px solid rgba(234, 179, 8, 0.25);
    transition: var(--transition);
}

.hero-search-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 8px 32px rgba(234, 179, 8, 0.15) !important;
}

.hero-search-field {
    flex-grow: 1;
    border: none !important;
    padding: 12px 20px !important;
    outline: none !important;
    font-size: 15px;
    font-family: 'Tajawal', sans-serif;
    color: var(--text-main);
    background: transparent !important;
}

.hero-search-field::placeholder {
    color: #94a3b8;
}

.hero-search-filter-select-wrapper {
    border-right: 1px solid var(--border-color) !important;
    padding-right: 15px;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

/* تنسيق لوحة اختيار الفلتر داخل شريط البحث */
.hero-search-type-select {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    outline: none;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    padding: 5px 10px 5px 25px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%20fill%3D%22none%22%20stroke%3D%22%23475569%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px;
    transition: var(--transition);
}

.hero-search-type-select:hover {
    color: var(--primary);
}

.hero-search-submit {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 35px !important;
    border-radius: 50px !important;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: var(--transition);
    min-width: 100px;
    height: auto !important;
    line-height: 1 !important;
}

.hero-search-submit:hover {
    background-color: var(--primary-hover) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.hero-quick-pills {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.hero-quick-pill {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    padding: 11px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    text-decoration: none;
    cursor: pointer;
}

.hero-quick-pill:hover {
    background-color: var(--accent);
    color: var(--text-main);
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(234, 179, 8, 0.25);
}

/* شارات الكتّاب والمؤلفين الجدد */
.writers-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

.writer-badge {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-weight: 700;
    transition: var(--transition);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.writer-badge i {
    color: var(--primary);
    font-size: 13px;
}

.writer-badge .writer-count {
    background: #f1f5f9;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 5px;
    transition: var(--transition);
}

.writer-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
    color: var(--primary);
}

.writer-badge:hover .writer-count {
    background-color: var(--primary);
    color: #ffffff;
}

/* تصفير وإلغاء أي حدود أو إطارات داكنة محيطة بأقسام الرئيسية */
.homepage-genres-section,
.homepage-writers-section,
.homepage-category-section {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* تنسيق قائمة تصفية السنوات في الهيرو */
.hero-search-year-select {
    border: none;
    border-right: 1px solid var(--border-color) !important;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    outline: none;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    padding: 5px 15px 5px 25px !important;
    margin-right: 10px !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%20fill%3D%22none%22%20stroke%3D%22%23475569%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 14px;
    transition: var(--transition);
}

.hero-search-year-select:hover {
    color: var(--primary);
}

/* شبكة صفحة دليل الكتّاب والمؤلفين */
.writers-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.writer-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 35px 20px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
}

.writer-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(30, 58, 138, 0.15);
}

.writer-card-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f1f5f9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transition: var(--transition);
}

.writer-card:hover .writer-card-image {
    border-color: var(--primary);
    transform: scale(1.05);
}

.writer-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.writer-card-image.fallback-avatar {
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 40px;
}

.writer-card-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
}

.writer-card-count {
    font-size: 13px;
    color: var(--text-muted);
    background: #f1f5f9;
    padding: 4px 14px;
    border-radius: 50px;
    font-weight: 700;
    transition: var(--transition);
}

.writer-card:hover .writer-card-count {
    background-color: var(--primary);
    color: #ffffff;
}

.writer-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}

.writer-card-button {
    margin-top: 10px;
    background: var(--primary);
    color: #ffffff;
    padding: 10px 30px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
}

.writer-card-button:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
    color: #ffffff;
}

/* ============================================================
   تنسيق عناوين الأقسام الفخمة بالتدريج اللوني (Premium Titles UI)
   ============================================================ */

/* 1. التنسيق الموحد لعناوين الأقسام الرئيسية (التصنيفات والمؤلفين) */
.homepage-section-title {
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 30px 0;
    position: relative;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.homepage-section-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 65px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
    border-radius: 10px;
}

/* 2. التنسيق الفاخر لترويسة صفوف الكتب المتتالية */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 30px;
    position: relative;
}

.section-title {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

/* إيقونة القسم كبيدج دائري متدرج */
.section-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(234, 179, 8, 0.05) 100%);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.1);
    transition: var(--transition);
}

.section-header:hover .section-title-icon {
    transform: rotate(-10deg) scale(1.05);
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(234, 179, 8, 0.1) 100%);
}

/* خط تجميلي متدرج مخصص تحت عنوان القسم مباشرة */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -16px;
    /* يوضع فوق خط الترويسة بضبط */
    right: 0;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
    border-radius: 10px;
}

/* نص عنوان القسم ملون بتدرج مائي ملكي فخم */
.section-title-text {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* زر عرض الكل المطور كحبة تفاعلية عصرية */
.view-all-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 50px;
    background: #f8fafc;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.view-all-link i {
    transition: var(--transition);
    font-size: 11px;
    color: var(--primary);
}

.view-all-link:hover {
    background: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2);
}

.view-all-link:hover i {
    color: #ffffff;
    transform: translateX(-4px);
    /* إزاحة السهم لليسار في RTL عند الهوفر */
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 28px !important;
    }

    .hero-subtitle {
        font-size: 15px !important;
        margin-bottom: 25px !important;
    }

    .hero-search-form {
        flex-direction: column;
        border-radius: 16px !important;
        padding: 15px !important;
        gap: 12px;
    }

    .hero-search-field {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 12px !important;
    }

    .hero-search-filter-select-wrapper {
        border-right: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        width: 100%;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }

    .hero-search-type-select {
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 12px !important;
        width: 100%;
        text-align: center;
        background-position: center left !important;
    }

    .hero-search-year-select {
        border-right: none !important;
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 12px !important;
        width: 100%;
        text-align: center;
        background-position: center left !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .hero-search-submit {
        width: 100%;
        border-radius: 8px !important;
    }
}

/* ============================================================
   التجاوب التام للهواتف والأجهزة اللوحية (Responsive Design)
   ============================================================ */

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-column.footer-social {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .header-container {
        position: relative;
    }

    .menu-toggle {
        display: flex;
    }

    .header-nav-row {
        background-color: var(--primary);
        padding: 0;
        border-bottom: none;
        width: 100%;
    }

    /* تحويل شبكات الكتب التلقائية بالرئيسية إلى سلايدر أفقي تفاعلي باللمس */
    .books-grid.swiper {
        display: flex !important;
        overflow-x: auto !important;
        padding-bottom: 15px !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        justify-content: flex-start !important;
        margin-top: 15px !important;
    }

    .books-grid.swiper .book-item {
        flex: 0 0 170px !important;
        scroll-snap-align: start !important;
    }

    .books-grid.swiper .book-item img {
        height: 200px !important;
    }

    /* شبكة الكتب الرأسية في صفحات الأرشيف والبحث على الجوال (عمودين منظمين) */
    .books-grid:not(.swiper) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }

    .books-grid:not(.swiper) .book-item {
        width: 100% !important;
        flex: none !important;
    }

    .books-grid:not(.swiper) .book-item img {
        height: 220px !important;
    }

    /* تصميم شريط تمرير ناعم ومخفي جزئياً للجوال */
    .books-grid::-webkit-scrollbar {
        height: 4px !important;
    }

    .books-grid::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 10px;
    }

    .books-grid::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

    /* تحويل شارات الكتاب إلى عمودين منظمين بعرض كامل على الجوال */
    .writers-badges-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .writer-badge {
        display: flex !important;
        align-items: center !important;
        padding: 8px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    .writer-badge img {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    .writer-badge i {
        flex-shrink: 0 !important;
        font-size: 12px !important;
    }

    .writer-badge .writer-name {
        font-size: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .writer-badge .writer-count {
        font-size: 11px !important;
        padding: 1px 6px !important;
        flex-shrink: 0 !important;
        margin-right: 0 !important;
    }

    /* تحويل القائمة لمستند منسدل للجوال */
    .main-navigation {
        display: none;
        width: 100%;
        background-color: var(--primary);
        padding: 15px 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 999;
    }

    .main-navigation.active {
        display: block;
    }

    .primary-menu {
        flex-direction: column;
        width: 100%;
        gap: 5px;
    }

    .primary-menu li a {
        display: block;
        padding: 10px 15px;
        border-radius: 6px;
        color: #ffffff;
        /* نص أبيض متناسب مع الخلفية الزرقاء */
    }

    .primary-menu li a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }

    .primary-menu li.current-menu-item a {
        background-color: var(--accent);
        color: var(--text-main);
    }

    .header-search {
        display: none;
        /* إخفاء البحث من الهيدر على الشاشات الصغيرة وتضمينه في أماكن أخرى */
    }

    .book-page-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 15px;
    }

    .book-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .book-article {
        padding: 15px;
    }

    .book-title {
        font-size: 26px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-column.footer-social {
        grid-column: span 1;
    }

    .site-info {
        flex-direction: column;
        text-align: center;
    }

    /* إصلاح تمدد بطاقة التقييم على الجوال */
    .book-rating-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px 15px;
    }

    .rating-score-block {
        width: 100%;
        min-height: auto;
        padding: 15px;
        box-sizing: border-box;
    }

    .rating-progress-bar {
        max-width: 100%;
    }

    /* إصلاح كروت التعليقات ومستند الكتابة للردود على الشاشات الصغيرة */
    .comment-body-card {
        padding: 16px;
    }

    .comment-respond {
        padding: 20px 15px;
    }

    .comment-form-rating-wrapper {
        padding: 15px 12px;
    }

    /* إلغاء إزاحة الردود المتداخلة تماماً على الجوال لمنع الخروج عن الشاشة */
    .comment-list .children {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* إصلاح هيدر التقييم على الجوال لضمان بقاء النجوم أقصى اليسار */
    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .comment-stars-wrapper {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        /* وضع النجوم أقصى اليسار في RTL */
    }

    /* تصغير حجم نجوم التقييم التفاعلي على الشاشات الصغيرة جداً (مثل 360px و 384px) لكي لا تبرز للخارج */
    @media (max-width: 400px) {
        .star-rating-selector {
            font-size: 32px !important;
            gap: 4px !important;
        }

        .star-rating-selector label {
            font-size: 32px !important;
        }
    }
}

/* ============================================================
   تنسيقات أزرار ومقابض سلايدر Swiper المطور (Desktop & Touch)
   ============================================================ */

.books-grid.swiper {
    position: relative;
    padding: 0 10px 30px 10px !important;
    overflow: hidden !important;
    /* لمنع تمدد الصفحة أفقياً */
}

/* تخصيص المسافات لـ swiper-wrapper */
.books-grid.swiper .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

/* تخصيص أزرار التنقل يمين ويسار كأزرار خارجية تفاعلية */
.homepage-category-section {
    position: relative;
}

.homepage-category-section .swiper-button-next,
.homepage-category-section .swiper-button-prev {
    width: 48px;
    /* حجم أكبر لوضوح فائق */
    height: 48px;
    background: #ffffff;
    border: 2px solid var(--border-color);
    /* إطار أوضح */
    border-radius: 50%;
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    position: absolute;
    top: calc(55% + 10px);
    /* متوسط الارتفاع أسفل ترويسة العنوان */
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* أبعاد وعكس اتجاه الأيقونات بالمرآة في تصميم RTL للغة العربية */
.homepage-category-section .swiper-button-next::after,
.homepage-category-section .swiper-button-prev::after {
    font-size: 18px;
    /* سهم أوضح */
    font-weight: 900;
    display: inline-block;
    transform: scaleX(-1);
    /* عكس اتجاه السهم ليطابق الوجهة الصحيحة */
}

/* تأثيرات التحويم المنزلقة في اتجاه السهم نفسه لخلق تفاعل مميز */
.homepage-category-section .swiper-button-next:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 6px 15px rgba(16, 76, 89, 0.35);
    transform: translateX(-5px) scale(1.08);
    /* انزلاق لليسار وتكبير */
}

.homepage-category-section .swiper-button-prev:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 6px 15px rgba(16, 76, 89, 0.35);
    transform: translateX(5px) scale(1.08);
    /* انزلاق لليمين وتكبير */
}

/* موضع أزرار التحويم خارج الكارد يمين ويسار */
.homepage-category-section .swiper-button-next {
    left: -24px;
    right: auto;
}

.homepage-category-section .swiper-button-prev {
    right: -24px;
    left: auto;
}

/* تفادي خروج الأزرار من شاشة المتصفح على الشاشات المتوسطة */
@media (max-width: 1280px) {
    .homepage-category-section .swiper-button-next {
        left: 5px;
    }

    .homepage-category-section .swiper-button-prev {
        right: 5px;
    }
}

/* إخفاء أزرار السلايدر بالكامل على الهواتف والاعتماد على السحب باللمس */
@media (max-width: 768px) {
    .books-grid.swiper {
        padding: 0 0 15px 0 !important;
    }

    .homepage-category-section .swiper-button-next,
    .homepage-category-section .swiper-button-prev {
        display: none !important;
    }
}

/* ============================================================
   تنسيق مسار التنقل الذكي (Breadcrumbs Styling)
   ============================================================ */
.site-breadcrumbs {
    background-color: #ffffff;
    padding: 15px 0 0 0;
    margin-bottom: 30px;
    font-size: 14px;
}

.breadcrumbs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 12px 20px;
    /* الحشوة تفصل النصوص عن خط الحدود */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    direction: rtl;
    /* اتجاه عربي */
    border-bottom: 1px solid var(--border-color);
    /* الخط الآن بداخل العرض الموحد للصحفة */
}

.breadcrumb-item {
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
}

.breadcrumb-item a {
    color: var(--text-muted);
}

.breadcrumb-item:hover,
.breadcrumb-item a:hover {
    color: var(--primary);
}

.breadcrumb-home-icon {
    font-size: 13px;
    color: var(--primary);
}

.breadcrumb-separator {
    font-size: 11px;
    color: #cbd5e1;
    margin: 0 4px;
}

.breadcrumb-current {
    color: var(--primary);
    font-weight: 700;
    pointer-events: none;
}

/* ============================================================
   توحيد وعرض جميع الصفحات الداخلية بالموقع (Unified Containers)
   ============================================================ */
.page-wrapper,
.single-post-wrapper,
.archive-books-wrapper,
.archive-genre-wrapper,
.archive-writer-wrapper,
.writers-page-wrapper,
.archive-year-wrapper,
.index-wrapper,
.search-wrapper,
.homepage-wrapper {
    max-width: 1200px;
    margin: 40px auto 60px auto;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

/* تفادي تراكب العناوين والمسافات بالأجهزة اللوحية والمحمول */
@media (max-width: 768px) {

    .page-wrapper,
    .single-post-wrapper,
    .archive-books-wrapper,
    .archive-genre-wrapper,
    .archive-writer-wrapper,
    .writers-page-wrapper,
    .archive-year-wrapper,
    .index-wrapper,
    .search-wrapper,
    .homepage-wrapper {
        margin: 25px auto 40px auto;
        padding: 0 15px;
    }

    .archive-header {
        margin-bottom: 25px !important;
    }

    .archive-title {
        font-size: 24px !important;
    }
}

/* ============================================================
   تنسيق أرقام وتعدد الصفحات العصري (Pagination Styling)
   ============================================================ */
.pagination,
.posts-navigation,
.navigation {
    margin: 50px 0 20px 0;
    width: 100%;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    direction: rtl;
    /* اتجاه عربي */
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 6px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #ffffff;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

/* الصفحة النشطة حالياً */
.pagination .page-numbers.current {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 10px rgba(16, 76, 89, 0.2);
    pointer-events: none;
}

/* تحويم الأرقام والأزرار */
.pagination .page-numbers:hover:not(.current):not(.dots) {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(16, 76, 89, 0.15);
}

/* النقاط الثلاثية */
.pagination .page-numbers.dots {
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    cursor: default;
}

/* أزرار السابق والتالي */
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    padding: 0 16px;
    font-size: 14px;
}

@media (max-width: 480px) {
    .pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
        border-radius: 6px;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        padding: 0 10px;
    }
}

/* ============================================================
   صندوق تحذير حقوق الملكية الفكرية لمنع التحميل (Copyright Warning)
   ============================================================ */
.book-copyright-warning {
    background-color: #fff1f2;
    border: 2px dashed #fecdd3;
    padding: 24px 20px;
    border-radius: 12px;
    text-align: center;
    margin-top: 30px;
    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.04);
    animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder {
    0% {
        border-color: #fecdd3;
    }

    50% {
        border-color: #fda4af;
    }

    100% {
        border-color: #fecdd3;
    }
}

.copyright-warning-icon {
    font-size: 32px;
    color: #e11d48;
    margin-bottom: 12px;
}

.copyright-warning-title {
    color: #be123c;
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 10px 0;
}

.copyright-warning-message {
    color: #9f1239;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px 0;
    line-height: 1.7;
}

.copyright-warning-badge {
    display: inline-block;
    color: #e11d48;
    background-color: #ffe4e6;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #fecdd3;
}

/* ============================================================
   تنسيقات أزرار الاختصارات الأربعة (شراء ورقي، شراء إلكتروني، كتاب صوتي، معاينة)
   ============================================================ */
.book-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    margin: 8px;
    cursor: pointer;
}

.book-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.book-action-btn i {
    font-size: 14px;
}

/* 1. شراء ورقي - برونزي / بني دافئ */
.btn-buy-paper {
    background: linear-gradient(135deg, #b45309 0%, #78350f 100%);
    border: 1px solid #d97706;
}

.btn-buy-paper:hover {
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
    color: #ffffff !important;
}

/* 2. شراء إلكتروني - زمردي هادئ */
.btn-buy-digital {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border: 1px solid #10b981;
}

.btn-buy-digital:hover {
    background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
    color: #ffffff !important;
}

/* 3. كتاب صوتي - بنفسجي ملكي */
.btn-audiobook {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    border: 1px solid #8b5cf6;
}

.btn-audiobook:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #4c1d95 100%);
    color: #ffffff !important;
}

/* 4. معاينة الكتاب - تركواز / أزرق سماوي */
.btn-preview-book {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    border: 1px solid #14b8a6;
}

.btn-preview-book:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #115e59 100%);
    color: #ffffff !important;
}

/* 5. زر رابط الكاتب - تدرج بتريولي متناسق مع هوية الموقع */
.btn-writer-link {
    background: linear-gradient(135deg, var(--primary) 0%, #1c3d5a 100%);
    border: 1px solid var(--secondary);
}

.btn-writer-link:hover {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    color: #ffffff !important;
}

/* ============================================================
   تصميم صفحة الخطأ 404 الفاخرة (Premium 404 Layout)
   ============================================================ */
.error-404-wrapper {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: radial-gradient(circle at 50% 50%, rgba(16, 76, 89, 0.03) 0%, transparent 80%);
}

.error-404-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 50px 40px;
    border-radius: 24px;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.error-404-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
}

/* الرسوميات والرقم */
.error-404-illustration {
    position: relative;
    margin-bottom: 25px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.error-code {
    font-size: 110px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
    filter: drop-shadow(0 4px 10px rgba(16, 76, 89, 0.15));
}

.error-book-icon {
    font-size: 42px;
    color: var(--accent);
    margin-top: -15px;
    animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-3deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* العناوين والنصوص */
.error-title {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-main);
    margin: 10px 0 15px 0;
}

.error-text {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 30px;
}

/* صندوق البحث */
.error-search-box {
    margin-bottom: 30px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.error-search-box .search-form {
    display: flex;
    border: 2px solid var(--border-color);
    border-radius: 50px;
    overflow: hidden;
    background: #f8fafc;
    transition: var(--transition);
    align-items: stretch;
    width: 100%;
}

.error-search-box .search-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16, 76, 89, 0.08);
    background: #ffffff;
}

.error-search-box .search-form label {
    flex: 1;
    display: flex;
    margin: 0;
    padding: 0;
}

.error-search-box .search-field {
    width: 100%;
    border: none;
    background: transparent;
    padding: 12px 24px;
    font-family: 'Tajawal', sans-serif;
    font-size: 14px;
    outline: none;
}

.error-search-box .search-submit {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 0 35px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.error-search-box .search-submit:hover {
    background: var(--primary-hover);
}

/* إخفاء نصوص قارئات الشاشة لتجنب كسر التخطيط */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* أزرار الإجراءات */
.error-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-error-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition);
}

.btn-error-action.btn-home {
    background: var(--primary);
    color: #ffffff !important;
}

.btn-error-action.btn-home:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 76, 89, 0.2);
}

.btn-error-action.btn-books {
    background: #f1f5f9;
    color: #475569 !important;
    border: 1px solid #cbd5e1;
}

.btn-error-action.btn-books:hover {
    background: #e2e8f0;
    color: #1e293b !important;
    transform: translateY(-2px);
}

/* استجابة الجوال */
@media (max-width: 480px) {
    .error-404-container {
        padding: 35px 20px;
    }
    .error-code {
        font-size: 80px;
    }
    .error-title {
        font-size: 22px;
    }
    .btn-error-action {
        width: 100%;
        justify-content: center;
    }

    /* شارات الكتّاب - عمود واحد للشاشات الصغيرة جداً */
    .writers-badges-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .writer-badge {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    .writer-badge .writer-name {
        font-size: 13px !important;
    }
}

/* ============================================================
   صفحة طلب كتاب - Request Book Form
   ============================================================ */

.request-book-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

.request-book-container {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 50px 45px;
    margin-top: 10px;
}

/* هيدر الصفحة */
.request-book-header {
    text-align: center;
    margin-bottom: 40px;
}

.request-book-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), #082d36);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 25px rgba(16, 76, 89, 0.25);
}

.request-book-icon i {
    font-size: 32px;
    color: #ffffff;
}

.request-book-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 10px;
}

.request-book-desc {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.7;
}

/* الفورم */
.request-book-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-main);
}

.form-group label i {
    color: var(--primary);
    font-size: 14px;
    width: 16px;
    text-align: center;
}

.form-group label .required {
    color: #dc2626;
    font-size: 16px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-main);
    background: #fafbfc;
    transition: var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(16, 76, 89, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #94a3b8;
    font-size: 13px;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 35px;
}

/* زر الإرسال */
.form-submit-row {
    text-align: center;
    margin-top: 10px;
}

.request-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #082d36 100%);
    color: #ffffff;
    padding: 14px 50px;
    border: none;
    border-radius: 50px;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(16, 76, 89, 0.25);
}

.request-submit-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--secondary) 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 76, 89, 0.35);
}

.request-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* رسالة النتيجة */
.request-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    margin-top: 10px;
    animation: fadeInUp 0.4s ease;
}

.request-message.success {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.request-message.error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.request-message i {
    font-size: 20px;
    flex-shrink: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ملاحظة أسفل الفورم */
.request-book-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 30px;
    padding: 15px 20px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 10px;
    color: #0369a1;
    font-size: 13px;
    line-height: 1.7;
}

.request-book-note i {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* استجابة الجوال لصفحة طلب كتاب */
@media (max-width: 768px) {
    .request-book-container {
        padding: 30px 20px;
    }

    .request-book-title {
        font-size: 22px;
    }

    .request-book-desc {
        font-size: 14px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .request-book-icon {
        width: 65px;
        height: 65px;
    }

    .request-book-icon i {
        font-size: 26px;
    }

    .request-submit-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 30px;
    }
}

/* =====================================================
   بانر صفحة الكتّاب والمؤلفين - Writers Hero Banner
   ===================================================== */
.writers-hero-banner {
    position: relative;
    background: linear-gradient(135deg, var(--primary) 0%, #0f172a 100%);
    border-radius: var(--radius);
    padding: 55px 30px 50px;
    margin-bottom: 45px;
    text-align: center;
    overflow: hidden;
    box-shadow:
        0 10px 40px -10px rgba(16, 76, 89, 0.35),
        inset 0 -8px 20px rgba(0, 0, 0, 0.12);
}

/* نمط الباترن المنقط الشفاف */
.writers-hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.07) 1.5px, transparent 1.5px),
        radial-gradient(rgba(255, 255, 255, 0.03) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
    opacity: 0.9;
    z-index: 1;
    pointer-events: none;
}

/* الأشكال الهائمة في الخلفية */
.writers-hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.writers-hero-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.13;
    animation: writersFloatShape 22s infinite alternate ease-in-out;
}

.writers-shape-1 {
    width: 220px;
    height: 220px;
    background: var(--secondary);
    top: -40px;
    right: -30px;
    animation-duration: 26s;
}

.writers-shape-2 {
    width: 180px;
    height: 180px;
    background: var(--primary-hover);
    bottom: -50px;
    left: 5%;
    animation-duration: 20s;
    animation-delay: -5s;
}

.writers-shape-3 {
    width: 150px;
    height: 150px;
    background: var(--accent);
    top: 40%;
    left: 50%;
    animation-duration: 30s;
    animation-delay: -10s;
}

@keyframes writersFloatShape {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    50% {
        transform: translate(30px, -20px) rotate(180deg) scale(1.12);
    }
    100% {
        transform: translate(-25px, 30px) rotate(360deg) scale(0.92);
    }
}

/* المحتوى الأمامي */
.writers-hero-content {
    position: relative;
    z-index: 2;
}

/* أيقونة البانر */
.writers-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(204, 164, 88, 0.15);
    border: 2px solid rgba(204, 164, 88, 0.3);
    margin-bottom: 20px;
    animation: writersPulseGlow 3s ease-in-out infinite;
}

.writers-hero-icon i {
    font-size: 32px;
    color: var(--accent);
    filter: drop-shadow(0 2px 8px rgba(204, 164, 88, 0.4));
}

@keyframes writersPulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(204, 164, 88, 0.2);
    }
    50% {
        box-shadow: 0 0 20px 8px rgba(204, 164, 88, 0.12);
    }
}

/* عنوان البانر */
.writers-hero-title {
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 12px;
    letter-spacing: -0.3px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* النص التوضيحي */
.writers-hero-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto 22px;
    max-width: 500px;
    line-height: 1.7;
    font-weight: 400;
}

/* الخط الذهبي الفاصل */
.writers-hero-divider {
    width: 70px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    margin: 0 auto;
    border-radius: 3px;
    animation: writersDividerShimmer 3s ease-in-out infinite;
}

@keyframes writersDividerShimmer {
    0%, 100% {
        opacity: 0.6;
        width: 70px;
    }
    50% {
        opacity: 1;
        width: 100px;
    }
}

/* ريسبونسف */
@media (max-width: 768px) {
    .writers-hero-banner {
        padding: 40px 20px 35px;
        margin-bottom: 30px;
    }

    .writers-hero-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 16px;
    }

    .writers-hero-icon i {
        font-size: 26px;
    }

    .writers-hero-title {
        font-size: 24px;
    }

    .writers-hero-subtitle {
        font-size: 14px;
    }

    .writers-shape-1 {
        width: 150px;
        height: 150px;
    }

    .writers-shape-2 {
        width: 120px;
        height: 120px;
    }

    .writers-shape-3 {
        width: 100px;
        height: 100px;
    }
}