/* ============================================
   روايات بيت الحكايات - Custom Styles
   ============================================ */

/* Aspect ratio fix - tailwind.css doesn't contain aspect-[3/4] */
.aspect-\[3\/4\] { aspect-ratio: 3/4; }

/* Line clamp fallbacks */
.line-clamp-1 { display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* Skip to content link - visible on focus */
.sr-only:not(:focus):not(:focus-within) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Reading page content */
.reading-content { font-size:18px; line-height:2; }
.reading-content p { margin-bottom:1.25rem; }

/* Reading Themes */
.reading-sepia { background:#faf3e0 !important; color:#5c4b3a !important; }
.reading-sepia p { color:#5c4b3a !important; }
.reading-dark { background:#0f172a !important; color:#e2e8f0 !important; }
.reading-dark p { color:#e2e8f0 !important; }

/* Pagination buttons - maktbaa style */
.page-numbers {
    display:inline-flex;align-items:center;justify-content:center;
    min-width:2.5rem;height:2.5rem;padding:0 0.75rem;
    border-radius:0.5rem;font-size:0.875rem;font-weight:500;
    background:white;color:#374151;
    border:1px solid #e5e7eb;transition:all 0.2s;
}
.dark .page-numbers{background:#1f2937;color:#d1d5db;border-color:#374151;}
.page-numbers.current{background:#f59e0b;color:#fff;border-color:#f59e0b;font-weight:700;}
.page-numbers:hover:not(.current):not(.dots){background:#f59e0b;color:#fff;border-color:#f59e0b;}
.page-numbers.dots{background:transparent;border-color:transparent;color:#9ca3af;cursor:default;}
.dark .page-numbers.dots{color:#6b7280;}

/* Chapters panel */
#chapters-panel{transition:transform 0.3s ease;}

/* Reading progress bar */
#progress-bar{transition:width 0.15s linear;}

/* Custom Scrollbar - Amber gradient */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.05);border-radius:10px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f59e0b,#f97316);border-radius:10px;}
.dark ::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);}
.dark ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#f59e0b,#f97316);}

/* WordPress overrides */
body{margin:0;overscroll-behavior-y:none;overflow-x:hidden;max-width:100vw;}
img{height:auto;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* Novel grid - responsive fixed columns */
.novel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem;}
@media(min-width:480px){.novel-grid{grid-template-columns:repeat(3,1fr);gap:0.5rem;}}
@media(min-width:640px){.novel-grid{grid-template-columns:repeat(4,1fr);gap:0.5rem;}}
@media(min-width:768px){.novel-grid{grid-template-columns:repeat(5,1fr);gap:0.5rem;}}
@media(min-width:1024px){.novel-grid{grid-template-columns:repeat(6,1fr);gap:0.5rem;}}
.novel-grid>*{min-width:0;}

/* Remove WP admin bar margin */
@media screen and (max-width:600px){#wpadminbar{position:fixed;}}

/* Card hover effects */
.novel-card:hover .novel-cover{transform:scale(1.05);}
.novel-card .novel-cover{transition:transform .3s;}
.novel-card .aspect-\[3\/4\] { background:#e5e7eb; position:relative; }
.dark .novel-card .aspect-\[3\/4\] { background:#374151; }

/* Mobile grid fix */
@media (max-width:639px){
    .novel-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Card images */
.novel-card-img{max-width:100%;height:auto;}

/* Voice search button animation */
.voice-btn.listening { background:#ef4444 !important; color:white !important; animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

/* Dark mode - improved contrast like maktbaa.com */
.dark .text-gray-400 { color:#a1a1aa !important; }
.dark .text-gray-500 { color:#94a3b8 !important; }
.dark .text-gray-600 { color:#a1a1aa !important; }

/* Gradient text effect */
.gradient-text { background:linear-gradient(135deg,#c026d3 0%,#f97316 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Card overlay gradient */
.card-gradient { background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.9) 100%); }

/* Prevent layout shifts from ads/images */
ins.adsbygoogle, .adsbygoogle { max-width:100% !important; overflow:hidden !important; }

/* Search suggestions styling */
.search-result-item { display:flex;align-items:center;gap:0.75rem;padding:0.75rem;transition:background 0.2s; }
.search-result-item:hover { background:#f9fafb; }
.dark .search-result-item:hover { background:#1f2937; }

/* Gutenberg overrides */
@media (max-width:639px){.wp-block-columns,.wp-block-group{display:block;}}

/* ============================================
   Dark Mode Fixes - الظلال والألوان
   ============================================ */
/* إخفاء الظلال في الوضع الدكن */
.dark .shadow-none{box-shadow:none}
.dark .shadow-sm,.dark .shadow,.dark .shadow-md,.dark .shadow-lg,.dark .shadow-xl,.dark .shadow-2xl,.dark .shadow-inner{box-shadow:none !important}
.dark .hover\:shadow-sm:hover,.dark .hover\:shadow:hover,.dark .hover\:shadow-md:hover,.dark .hover\:shadow-lg:hover,.dark .hover\:shadow-xl:hover{box-shadow:none !important}
.dark .group:hover .group-hover\:shadow-lg,.dark .group:hover .group-hover\:shadow-md,.dark .group:hover .group-hover\:shadow-sm{box-shadow:none !important}

/* ترقيم الصفحات في الوضع الدكن */
.dark .page-numbers.current,
.dark .page-numbers:hover:not(.current):not(.dots){background:#f59e0b;color:#111827;border-color:#f59e0b}

/* Skip link focus في الدكن */
.dark .focus\:text-gray-900:focus{color:#f3f4f6}

/* ============================================
   Comments - تصميم maktbaa.com النظيف
   ============================================ */
.comments-area { margin-top:0.25rem; }

/* Comment list */
.comment-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.5rem; }

/* Comment card */
.comment-list li .comment-body {
    position:relative;
    background:#fff;
    border-radius:0.75rem;
    padding:0.75rem 1rem;
    border:1px solid #f1f5f9;
    transition:border-color 0.2s;
}
.dark .comment-list li .comment-body { background:#1e293b; border-color:#1e293b; }
.comment-list li .comment-body:hover { border-color:#e2e8f0; }
.dark .comment-list li .comment-body:hover { border-color:#334155; }

/* Author highlight */
.comment-list li.bypostauthor > .comment-body {
    border-color:#fde68a;
    background:linear-gradient(to left, rgba(254,243,199,0.3), rgba(255,255,255,0));
}
.dark .comment-list li.bypostauthor > .comment-body {
    border-color:rgba(251,191,36,0.3);
    background:linear-gradient(to left, rgba(251,191,36,0.08), rgba(30,41,59,0));
}

/* Replies */
.comment-list .children { list-style:none; padding:0; margin:0.5rem 0 0 2.5rem; position:relative; border-right:2px solid #fef3c7; padding-right:1rem; }
.dark .comment-list .children { border-right-color:rgba(251,191,36,0.15); }
.comment-list .children .comment-body { border-radius:0.5rem; }
@media(max-width:640px){ .comment-list .children{margin-right:1.25rem; padding-right:0.75rem;} }

/* Meta row */
.comment-meta { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.35rem; }
.comment-author { display:flex; align-items:center; gap:0.4rem; }
.comment-author img.avatar,
.comment-body > .flex > img.rounded-full { width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid #f1f5f9; flex-shrink:0; }
.dark .comment-author img.avatar,
.dark .comment-body > .flex > img.rounded-full { border-color:#334155; }
.comment-author cite.fn { font-size:0.85rem; font-weight:700; font-style:normal; color:#111827; }
.dark .comment-author cite.fn { color:#f1f5f9; }
.comment-metadata { font-size:0.68rem; }
.comment-metadata a { color:#94a3b8; }
.comment-metadata a:hover { color:#f59e0b; }

/* Content */
.comment-content { font-size:0.88rem; line-height:1.65; color:#334155; }
.dark .comment-content { color:#cbd5e1; }
.comment-content p { margin-bottom:0.25rem; }
.comment-content p:last-child { margin-bottom:0; }

/* Reply link */
.comment-reply { margin-top:0.25rem; }
.comment-reply-link {
    display:inline-flex; align-items:center; gap:0.2rem;
    font-size:0.72rem; font-weight:600;
    color:#d97706;
    padding:0;
    background:none;
    border:none;
    transition:color 0.15s;
}
.comment-reply-link:hover { color:#b45309; }
.dark .comment-reply-link { color:#fbbf24; }
.dark .comment-reply-link:hover { color:#f59e0b; }

/* No comments msg */
.no-comments { text-align:center; color:#94a3b8; font-size:0.85rem; padding:1rem 0; }

/* ============================================
   Comment Form
   ============================================ */
.comment-respond { margin-top:1rem; padding-top:0.75rem; border-top:1px solid #f1f5f9; }
.dark .comment-respond { border-top-color:#334155; }

/* Title */
.comment-reply-title {
    font-size:0.9rem; font-weight:700; color:#111827;
    margin-bottom:0.5rem; display:flex; align-items:center; gap:0.4rem;
}
.dark .comment-reply-title { color:#f1f5f9; }
.comment-reply-title::before {
    content:'';
    display:inline-block;
    width:3px; height:16px;
    background:#f59e0b;
    border-radius:2px;
}
.comment-reply-title small { margin-right:auto; font-size:0.7rem; }
.comment-reply-title small a { color:#94a3b8; }
.comment-reply-title small a:hover { color:#ef4444; }

/* Logged-in notice */
.comment-form .logged-in-as { font-size:0.72rem; color:#94a3b8; margin-top:-0.25rem; margin-bottom:0.5rem; }
.dark .comment-form .logged-in-as { color:#64748b; }
.comment-form .logged-in-as a { color:#f59e0b; font-weight:600; }

/* Form layout */
.comment-form { display:flex; flex-direction:column; gap:0.4rem; }
.comment-form p { margin:0; }

/* Textarea */
.comment-form textarea {
    display:block;
    width:100%;
    padding:0.6rem 0.75rem;
    border-radius:0.5rem;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    color:#111827;
    font-size:0.85rem;
    line-height:1.65;
    outline:none;
    resize:vertical;
    min-height:65px;
    transition:all 0.2s;
    direction:rtl;
}
.dark .comment-form textarea { border-color:#334155; background:#0f172a; color:#e2e8f0; }
.comment-form textarea:focus {
    border-color:#f59e0b;
    box-shadow:0 0 0 3px rgba(245,158,11,0.1);
    background:#fff;
}
.dark .comment-form textarea:focus { background:#0f172a; box-shadow:0 0 0 3px rgba(245,158,11,0.15); }

/* Submit button */
.comment-form .form-submit { text-align:left; }
.comment-form input[type="submit"] {
    display:inline-flex; align-items:center; gap:0.3rem;
    padding:0.45rem 1.25rem;
    font-size:0.8rem; font-weight:700;
    color:#111827;
    background:#f59e0b;
    border:none;
    border-radius:0.5rem;
    cursor:pointer;
    transition:all 0.2s;
}
.comment-form input[type="submit"]:hover { background:#d97706; }

/* Guest login prompt */
.comment-login-box .text-center { padding:1.25rem; text-align:center; border:1.5px dashed #e2e8f0; border-radius:0.75rem; background:#f8fafc; }
.dark .comment-login-box .text-center { border-color:#334155; background:#1e293b; }

/* Pagination links in comments */
.comments-area .page-numbers { padding:0.25rem 0.5rem; font-size:0.75rem; min-width:1.75rem; height:1.75rem; }