/* Articles Page Styles */
:root{--art-bg:#000;--art-gold:#FFD700;--art-gold-dark:#DAA520;--art-glass:rgba(255,255,255,0.05);--art-border:rgba(255,215,0,0.15);--art-text:#fff;--art-muted:rgba(255,255,255,0.6);--art-radius:16px}
body.articles-body{font-family:'Cairo','Tajawal',sans-serif;background:var(--art-bg);color:var(--art-text);min-height:100vh;padding-top:80px}

/* Search Section */
.articles-search{max-width:900px;margin:40px auto 30px;padding:0 20px}
.search-box{position:relative;background:var(--art-glass);border:1px solid var(--art-border);border-radius:50px;backdrop-filter:blur(20px);overflow:hidden;display:flex;align-items:center;transition:all .4s}
.search-box:focus-within{border-color:var(--art-gold);box-shadow:0 0 30px rgba(255,215,0,.15)}
.search-box input{flex:1;background:transparent;border:none;outline:none;color:#fff;padding:18px 25px;font-size:1.05rem;font-family:inherit}
.search-box input::placeholder{color:var(--art-muted)}
.search-box button{background:var(--art-gold);color:#000;border:none;padding:12px 28px;margin:6px;border-radius:50px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .3s}
.search-box button:hover{background:var(--art-gold-dark);transform:scale(1.05)}
.search-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.search-chip{padding:8px 20px;border-radius:25px;background:var(--art-glass);border:1px solid var(--art-border);color:var(--art-muted);cursor:pointer;transition:all .3s;font-size:.9rem;text-decoration:none}
.search-chip:hover,.search-chip.active{background:var(--art-gold);color:#000;border-color:var(--art-gold);transform:translateY(-2px)}

/* Featured Article */
.featured-article{max-width:1300px;margin:0 auto 50px;padding:0 20px}
.featured-card{display:grid;grid-template-columns:1.2fr 1fr;border-radius:var(--art-radius);overflow:hidden;background:var(--art-glass);border:1px solid var(--art-border);transition:all .5s;min-height:400px}
.featured-card:hover{border-color:var(--art-gold);box-shadow:0 20px 60px rgba(255,215,0,.1);transform:translateY(-5px)}
.featured-img{position:relative;overflow:hidden}
.featured-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.featured-card:hover .featured-img img{transform:scale(1.05)}
.featured-img .cat-badge{position:absolute;top:20px;right:20px;padding:8px 18px;border-radius:25px;font-size:.85rem;font-weight:700;color:#fff;z-index:2}
.featured-body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.featured-body h2{font-size:1.8rem;font-weight:800;margin-bottom:15px;line-height:1.5}
.featured-body h2 a{color:#fff;text-decoration:none;transition:color .3s}
.featured-body h2 a:hover{color:var(--art-gold)}
.featured-body .excerpt{color:var(--art-muted);line-height:1.8;margin-bottom:20px;font-size:1rem}
.article-meta{display:flex;align-items:center;gap:15px;flex-wrap:wrap;color:var(--art-muted);font-size:.85rem}
.article-meta .author{display:flex;align-items:center;gap:8px;color:var(--art-gold)}
.article-meta .author img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--art-gold)}
.article-meta span i{margin-left:5px}
.read-more-btn{display:inline-block;margin-top:20px;padding:12px 30px;background:var(--art-gold);color:#000;border-radius:50px;text-decoration:none;font-weight:700;transition:all .3s;width:fit-content}
.read-more-btn:hover{background:var(--art-gold-dark);transform:translateY(-3px);box-shadow:0 10px 25px rgba(255,215,0,.3)}

/* Main Layout */
.articles-layout{max-width:1300px;margin:0 auto;padding:0 20px 60px;display:grid;grid-template-columns:1fr 350px;gap:40px}

/* Articles Grid */
.articles-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.article-card{background:var(--art-glass);border:1px solid var(--art-border);border-radius:var(--art-radius);overflow:hidden;transition:all .4s;opacity:0;transform:translateY(30px)}
.article-card.visible{opacity:1;transform:translateY(0)}
.article-card:hover{border-color:var(--art-gold);transform:translateY(-8px);box-shadow:0 15px 40px rgba(255,215,0,.12)}
.article-card .card-img{position:relative;height:220px;overflow:hidden}
.article-card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.article-card:hover .card-img img{transform:scale(1.08)}
.article-card .card-img .cat-badge{position:absolute;top:15px;right:15px;padding:6px 14px;border-radius:20px;font-size:.8rem;font-weight:700;color:#fff}
.article-card .card-img .reading-badge{position:absolute;bottom:15px;left:15px;background:rgba(0,0,0,.7);color:#fff;padding:5px 12px;border-radius:15px;font-size:.75rem;backdrop-filter:blur(5px)}
.card-body{padding:20px}
.card-body h3{font-size:1.1rem;font-weight:700;margin-bottom:10px;line-height:1.5}
.card-body h3 a{color:#fff;text-decoration:none;transition:color .3s}
.card-body h3 a:hover{color:var(--art-gold)}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding:0 20px 15px;font-size:.8rem;color:var(--art-muted)}
.card-footer .author{display:flex;align-items:center;gap:6px}
.share-btn{background:none;border:none;color:var(--art-muted);cursor:pointer;font-size:1rem;transition:color .3s;padding:5px}
.share-btn:hover{color:var(--art-gold)}
.share-dropdown{position:absolute;bottom:45px;left:10px;background:rgba(15,15,15,.98);border:1px solid var(--art-border);border-radius:12px;padding:8px;display:none;z-index:100;backdrop-filter:blur(20px)}
.share-dropdown.show{display:flex;gap:5px}
.share-dropdown a{color:#fff;width:35px;height:35px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .3s;text-decoration:none;font-size:.9rem}
.share-dropdown a:hover{background:var(--art-gold);color:#000;transform:scale(1.1)}

/* Sidebar */
.articles-sidebar{display:flex;flex-direction:column;gap:25px}
.sidebar-widget{background:var(--art-glass);border:1px solid var(--art-border);border-radius:var(--art-radius);padding:25px;backdrop-filter:blur(15px)}
.sidebar-widget h3{font-size:1.1rem;font-weight:800;margin-bottom:20px;position:relative;padding-bottom:12px}
.sidebar-widget h3::after{content:'';position:absolute;bottom:0;right:0;width:40px;height:3px;background:var(--art-gold);border-radius:2px}
.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{margin-bottom:8px}
.cat-list li a{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-radius:10px;color:var(--art-muted);text-decoration:none;transition:all .3s;font-size:.95rem}
.cat-list li a:hover{background:rgba(255,215,0,.08);color:var(--art-gold);padding-right:20px}
.cat-list .cat-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:8px}
.cat-list .count{background:rgba(255,255,255,.08);padding:3px 10px;border-radius:10px;font-size:.8rem}
.latest-list{list-style:none;padding:0;margin:0}
.latest-list li{display:flex;gap:12px;margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.05)}
.latest-list li:last-child{border:none;margin:0;padding:0}
.latest-list .thumb{width:70px;height:55px;border-radius:8px;overflow:hidden;flex-shrink:0}
.latest-list .thumb img{width:100%;height:100%;object-fit:cover}
.latest-list .info{display:flex;flex-direction:column;justify-content:center}
.latest-list .info a{color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;line-height:1.4;transition:color .3s;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.latest-list .info a:hover{color:var(--art-gold)}
.latest-list .info small{color:var(--art-muted);font-size:.75rem;margin-top:4px}
.subscribe-form{display:flex;flex-direction:column;gap:12px}
.subscribe-form p{color:var(--art-muted);font-size:.9rem;line-height:1.6}
.subscribe-form input{background:rgba(255,255,255,.05);border:1px solid var(--art-border);border-radius:10px;padding:14px;color:#fff;font-family:inherit;outline:none;transition:border .3s}
.subscribe-form input:focus{border-color:var(--art-gold)}
.subscribe-form button{background:var(--art-gold);color:#000;border:none;padding:14px;border-radius:10px;font-weight:700;cursor:pointer;transition:all .3s;font-family:inherit;font-size:1rem}
.subscribe-form button:hover{background:var(--art-gold-dark);transform:translateY(-2px)}
.subscribe-msg{text-align:center;padding:8px;border-radius:8px;font-size:.85rem;display:none}
.subscribe-msg.success{display:block;background:rgba(0,201,167,.1);color:#00C9A7;border:1px solid rgba(0,201,167,.3)}
.subscribe-msg.error{display:block;background:rgba(255,0,0,.1);color:#ff6b6b;border:1px solid rgba(255,0,0,.2)}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pagination a,.pagination span{padding:10px 18px;border-radius:10px;background:var(--art-glass);border:1px solid var(--art-border);color:var(--art-muted);text-decoration:none;transition:all .3s;font-weight:600;font-size:.9rem}
.pagination a:hover,.pagination .active{background:var(--art-gold);color:#000;border-color:var(--art-gold);transform:translateY(-2px)}
.pagination .disabled{opacity:.3;pointer-events:none}

/* Empty State */
.empty-articles{text-align:center;padding:80px 20px;color:var(--art-muted)}
.empty-articles i{font-size:4rem;margin-bottom:20px;opacity:.4}
.empty-articles h3{font-size:1.5rem;margin-bottom:10px}

/* Carousel Adjustments */
.featured-carousel-wrapper { max-width: 1300px; margin: 0 auto 50px; padding: 0 20px; }
.featured-swiper { border-radius: var(--art-radius); overflow: hidden; border: 1px solid var(--art-border); }
.featured-swiper .swiper-pagination-bullet { background: rgba(255,255,255,0.5); opacity: 1; }
.featured-swiper .swiper-pagination-bullet-active { background: var(--art-gold); width: 25px; border-radius: 10px; transition: width .3s; }
.featured-swiper .swiper-button-next, .featured-swiper .swiper-button-prev { color: var(--art-gold); transform: scale(0.6); background: rgba(0,0,0,0.4); width: 50px; height: 50px; border-radius: 50%; backdrop-filter: blur(5px); }
.featured-swiper .swiper-button-next:after, .featured-swiper .swiper-button-prev:after { font-size: 24px; }

/* Favorite Button */
.fav-btn { position: absolute; top: 15px; left: 15px; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s; z-index: 10; backdrop-filter: blur(5px); outline: none; }
.fav-btn:hover { background: #ff4757; border-color: #ff4757; transform: scale(1.1); box-shadow: 0 5px 15px rgba(255,71,87,0.3); }
.fav-btn.active { background: #ff4757; border-color: #ff4757; color: #fff; }
.fav-btn.active i { font-weight: 900; }

/* Toast */
.share-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(100px); background: rgba(0,0,0,0.85); color: #fff; padding: 12px 25px; border-radius: 50px; font-size: .9rem; font-weight: 700; z-index: 10000; transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid var(--art-border); backdrop-filter: blur(10px); }
.share-toast.show { transform: translateX(-50%) translateY(0); }

/* Responsive */
@media(max-width:1024px){.articles-layout{grid-template-columns:1fr}.articles-sidebar{order:-1;display:grid;grid-template-columns:1fr 1fr;gap:15px}}
@media(max-width:768px){
    .featured-card{grid-template-columns:1fr}
    .featured-img{height:250px}
    .articles-grid{grid-template-columns:1fr}
    .articles-sidebar{grid-template-columns:1fr}
    .article-meta{font-size:.8rem}
    .featured-body{padding:25px}
    .featured-body h2{font-size:1.4rem}
    .featured-carousel-wrapper { padding: 0 10px; margin-bottom: 30px; }
}

/* Full Card Link */
.stretched-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; }
.article-card, .featured-card { position: relative; }
.fav-btn, .share-btn, .share-dropdown, .cat-badge, .read-more-btn, .reading-badge, .article-meta, .card-footer { position: relative; z-index: 2; }