@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&family=Cairo:wght@400;600;800&display=swap');

:root{
  --ink:#f2f2f2; --muted:#a8a8ac; --paper:#0c0c10; --paper-soft:#1a1a20;
  --card:#17171d; --accent:#d4a017; --accent-dark:#a97e0f; --dark:#000000;
  --line:#2a2a32; --whatsapp:#25d366; --header-h:60px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Tajawal', sans-serif; line-height:1.85; font-size:16px; overflow-x:hidden; }
img, iframe{ max-width:100%; }
a{ color:var(--ink); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--accent); }
[hidden]{ display:none !important; }

.site-header{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; background:var(--dark); border-bottom:2px solid var(--accent); position:sticky; top:0; z-index:40; min-height:var(--header-h); }
.site-header .brand{ font-family:'Cairo', sans-serif; font-weight:900; font-size:1.2rem; color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:1; }
.site-header .brand:hover{ color:#fff; }
.site-header nav{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.site-header nav a{ color:var(--ink); font-weight:700; font-size:.86rem; padding:6px 8px; border-bottom:2px solid transparent; white-space:nowrap; }
.site-header nav a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.site-header nav a.app-download-btn{ background:var(--accent); color:#000; padding:7px 14px; border-radius:20px; border-bottom:none; font-weight:800; }
.site-header nav a.app-download-btn:hover{ background:#fff; color:#000; }
.icon-btn{ background:none; border:1px solid var(--line); border-radius:50%; width:36px; height:36px; min-width:36px; font-size:1rem; cursor:pointer; color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0; }
.icon-btn:hover{ border-color:var(--accent); color:var(--accent); }

main.page-content{ max-width:1100px; margin:0 auto; padding:28px 18px 50px; overflow-wrap:break-word; word-break:break-word; }
main.page-content h1, main.page-content h2, main.page-content h3{ font-family:'Cairo', sans-serif; font-weight:800; color:#fff; position:relative; margin-bottom:20px; padding-bottom:10px; font-size:1.4rem; line-height:1.5; }
main.page-content h1{ font-size:1.7rem; }
main.page-content h1:after, main.page-content h2:after{ content:""; position:absolute; bottom:0; right:0; width:56px; height:3px; background:var(--accent); }
main.page-content img{ max-width:100%; height:auto; border-radius:6px; display:block; margin:0 auto; }
main.page-content figure{ margin:22px 0; text-align:center; max-width:100%; }
main.page-content figcaption{ font-size:0.88rem; color:var(--muted); margin-top:6px; }
main.page-content ul:not(.archive-list):not(.sidebar-nav):not(.share-buttons):not(.related-list) li{ border-bottom:1px solid var(--line); padding:10px 0; }
.wp-block-gallery{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; justify-content:center; margin:20px 0; }
.wp-block-gallery figure{ flex:1 1 160px; max-width:220px; margin:0; }
.wp-block-social-links{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; padding:0; justify-content:center; }

.video-embed{ position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:8px; margin:20px 0; background:#000; border:1px solid var(--line); }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.category-badge{ display:inline-block; background:var(--accent); color:#000; font-size:.8rem; font-weight:800; padding:5px 14px; border-radius:14px; margin-bottom:14px; }
.breadcrumb{ font-size:.85rem; color:var(--muted); margin-bottom:16px; }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--accent); }
.fav-btn{ display:inline-block; background:none; border:1.5px solid var(--accent); color:var(--accent); font-weight:700; font-size:.82rem; padding:5px 14px; border-radius:14px; cursor:pointer; margin-inline-start:8px; }
.fav-btn:hover{ background:var(--accent); color:#000; }
.fav-btn.fav-active{ background:var(--accent); color:#000; }
.info-box{ display:flex; flex-wrap:wrap; gap:10px 20px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin:12px 0 20px; font-size:.88rem; }
.info-item strong{ color:#fff; }

.faq-box{ margin:24px 0; }
.faq-box h2{ font-size:1.15rem; }
.faq-box details{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 16px; margin-bottom:8px; }
.faq-box summary{ font-weight:700; cursor:pointer; color:var(--ink); }
.faq-box summary:hover{ color:var(--accent); }
.faq-box p{ margin:8px 0 0; color:var(--muted); font-size:.92rem; }
.hero-intro{ text-align:center; padding:36px 18px 28px; border-bottom:2px solid var(--line); margin-bottom:32px; }
.hero-intro h1{ font-size:2rem; border-bottom:none; margin-bottom:14px; }
.hero-intro h1:after{ right:50%; transform:translateX(50%); }
.hero-intro p{ max-width:680px; margin:0 auto 22px; color:var(--muted); font-size:1rem; }
.hero-cta{ display:inline-block; background:var(--accent); color:#000; font-weight:800; padding:12px 28px; border-radius:24px; font-size:.95rem; }
.hero-cta:hover{ background:#fff; color:#000; }
main.page-content h2 .see-all{ font-size:.8rem; font-weight:700; color:var(--accent); position:absolute; left:0; bottom:10px; }
main.page-content h2 .see-all:hover{ color:#fff; }
.tags-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tag-pill{ background:var(--card); border:1px solid var(--line); color:var(--muted); font-size:.8rem; font-weight:700; padding:4px 12px; border-radius:12px; }
.tag-pill:hover{ background:var(--accent); color:#000; border-color:var(--accent); }
.related-works{ margin-top:44px; padding-top:28px; border-top:2px solid var(--line); }
.related-works h2{ font-size:1.2rem; }
.share-buttons{ display:flex; flex-wrap:wrap; gap:10px; margin:26px 0; }
.share-buttons a{ display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:20px; font-weight:700; font-size:.85rem; color:#fff; }
.share-buttons a.share-whatsapp{ background:var(--whatsapp); }
.share-buttons a.share-facebook{ background:#1877f2; }
.share-buttons a:hover{ opacity:.9; color:#fff; }

.poster-grid{ list-style:none; padding:0; margin:0 0 32px; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; }
.poster-card{ margin:0; }
.poster-card a{ display:block; }
.poster-thumb{ display:block; width:100%; aspect-ratio:2/3; border-radius:8px; overflow:hidden; background:var(--card); border:1px solid var(--line); position:relative; }
.poster-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.poster-card:hover .poster-thumb img{ transform:scale(1.06); }
.poster-card:hover .poster-thumb{ border-color:var(--accent); box-shadow:0 6px 20px rgba(212,160,23,.25); }
.poster-title{ display:block; margin-top:8px; font-size:.85rem; font-weight:700; color:var(--ink); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.poster-card:hover .poster-title{ color:var(--accent); }
.cat-count{ color:var(--muted); font-weight:400; font-size:.82rem; }
ul.archive-list:not(.poster-grid){ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px 16px; margin-bottom:32px; }
ul.archive-list:not(.poster-grid) li{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:14px 16px; }
ul.archive-list:not(.poster-grid) li a{ font-weight:700; color:var(--ink); font-size:.95rem; }
ul.related-list:not(.poster-grid) li{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:10px 14px; font-size:.9rem; font-weight:600; list-style:none; }

.site-sidebar{ position:fixed; top:0; right:0; width:280px; max-width:82vw; height:100%; background:var(--dark); box-shadow:-4px 0 24px rgba(0,0,0,.5); z-index:100; overflow-y:auto; border-inline-start:1px solid var(--line); }
.site-sidebar:not([hidden]){ animation:slideIn .22s ease; }
@keyframes slideIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
.sidebar-header{ display:flex; justify-content:space-between; align-items:center; padding:16px 18px; background:var(--dark); color:var(--accent); font-weight:800; font-family:'Cairo', sans-serif; position:sticky; top:0; border-bottom:1px solid var(--line); }
.sidebar-header button{ background:none; border:none; color:var(--accent); font-size:1.4rem; cursor:pointer; padding:0; line-height:1; }
.sidebar-nav{ display:flex; flex-direction:column; padding:8px 0; }
.sidebar-nav a{ padding:13px 18px; border-bottom:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.92rem; display:flex; justify-content:space-between; gap:8px; }
.sidebar-nav a:hover{ background:var(--paper-soft); color:var(--accent); }
.sidebar-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:90; }

.search-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.9); z-index:110; align-items:flex-start; justify-content:center; padding:16vh 16px 16px; }
.search-overlay:not([hidden]){ display:flex; }
.search-box{ position:relative; background:var(--card); width:100%; max-width:600px; border-radius:10px; overflow:hidden; max-height:70vh; display:flex; flex-direction:column; border:1px solid var(--line); }
#search-input{ width:100%; border:none; padding:16px 48px 16px 16px; font-size:1rem; font-family:'Tajawal', sans-serif; outline:none; background:var(--card); color:var(--ink); }
#search-close{ position:absolute; left:10px; top:8px; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--muted); line-height:1; padding:6px; }
.search-results{ overflow-y:auto; border-top:1px solid var(--line); }
.search-results a{ display:block; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.92rem; }
.search-results a:hover{ background:var(--paper-soft); color:var(--accent); }

.whatsapp-fab{ position:fixed; bottom:18px; left:18px; background:var(--whatsapp); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.5); z-index:80; }
.whatsapp-fab:hover{ background:#1ebe5a; }
.whatsapp-fab svg{ width:24px; height:24px; }

.update-banner{ align-items:center; justify-content:center; gap:14px; background:var(--accent); color:#000; padding:10px 16px; font-weight:700; font-size:.85rem; text-align:center; position:sticky; top:var(--header-h); z-index:35; }
.update-banner:not([hidden]){ display:flex; animation:slideDown .3s ease; }
.update-banner-close{ background:rgba(0,0,0,.2); border:none; color:#000; width:24px; height:24px; border-radius:50%; font-size:1rem; line-height:1; cursor:pointer; flex-shrink:0; padding:0; }
.update-banner-close:hover{ background:rgba(0,0,0,.35); }
@keyframes slideDown{ from{ transform:translateY(-8px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

.quote-widget{ max-width:1100px; margin:0 auto; padding:14px 18px; }
.quote-widget blockquote{ margin:0; background:var(--card); border-inline-start:4px solid var(--accent); padding:14px 18px; font-size:.95rem; color:var(--ink); border-radius:0 6px 6px 0; }
.quote-widget cite{ display:block; margin-top:8px; font-size:.8rem; color:var(--muted); font-style:normal; }

.daily-widgets{ max-width:1100px; margin:0 auto; padding:0 18px 14px; display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.daily-card{ background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:.85rem; display:flex; flex-direction:column; gap:4px; min-height:64px; justify-content:center; }
.daily-label{ font-weight:700; color:var(--muted); font-size:.78rem; }
.daily-card a{ font-weight:700; color:var(--ink); }
.daily-card a:hover{ color:var(--accent); }
#widget-countdown-text{ font-weight:800; color:var(--accent); font-size:1rem; }
@media (max-width:700px){ .daily-widgets{ grid-template-columns:1fr; } }

.site-footer{ text-align:center; padding:22px 16px; background:var(--dark); color:#ddd; font-size:0.88rem; margin-top:36px; border-top:2px solid var(--accent); }
.site-footer a{ color:var(--accent); }
.site-footer .footer-links{ margin-top:8px; font-size:.82rem; }
.site-footer .footer-links a{ color:#999; }
.site-footer .footer-links a:hover{ color:var(--accent); }
.site-footer .footer-credit{ margin-top:10px; font-size:.82rem; color:#777; }
.site-footer .footer-credit a{ color:var(--accent); font-weight:700; }

@media (max-width:760px){
  .site-header nav a:not(.app-download-btn):not(#search-toggle){ display:none; }
  .site-header nav a.app-download-btn{ font-size:.8rem; padding:6px 10px; }
  .site-header .brand{ font-size:1.05rem; }
  main.page-content h1{ font-size:1.35rem; }
  main.page-content h2, main.page-content h3{ font-size:1.15rem; }
  .poster-grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; }
  .search-overlay{ padding:8vh 10px 10px; }
  .whatsapp-fab{ width:46px; height:46px; bottom:14px; left:14px; }
  .whatsapp-fab svg{ width:22px; height:22px; }
}
@media (max-width:420px){
  .site-header{ padding:8px 12px; }
  .site-header .brand{ font-size:.92rem; }
  main.page-content{ padding:20px 14px 40px; }
  .poster-grid{ grid-template-columns:1fr 1fr 1fr; gap:8px; }
  .poster-title{ font-size:.75rem; }
}