/* ===============================
   General Elements
================================ */
.newspaper-card img { width:100%; height:120px; object-fit:contain; padding:10px; background:#fff; }
.sidebar { padding:5px; border-radius:5px; }
.category-title { font-weight:600; margin-top:20px; }
.border-primary, .border-warning { border-width:2px !important; }
.news-item { cursor:pointer; }

/* ===============================
   Sticky Sidebar (desktop)
================================ */
/* Categories sidebar */
.categories-sidebar {
    background: #fff;
    border-left: 4px solid #0d6efd; /* only for categories */
}

/* Scrollable categories */
.categories-scroll {
    max-height: 400px; /* adjust as needed */
    overflow-y: auto;
    padding-right: 5px;
}

/* Ads sidebar (sticky) */
.ads-sidebar {
    background: #fff;
    margin-top: 1rem;
}

/* Sticky only for large screens */
@media (min-width: 992px) {
    .ads-sidebar {
        position: sticky;
        top: 100px; /* adjust according to your navbar height */
    }
}

/* ===============================
   Top Header
================================ */
.top-header { font-size:0.9rem; }
.top-header .top-social a {
    font-size:0.9rem;
    transition: transform 0.2s, color 0.2s;
}
.top-header .top-social a:hover { transform:translateY(-2px); color:#0d6efd; }
.top-email, .top-phone { font-size:0.9rem; }
.top-email a:hover, .top-phone a:hover { color:#0d6efd; }

/* ===============================
   Navbar
================================ */
.navbar { padding:0.5rem 1rem; }
.navbar-brand { display:flex; align-items:center; padding-left:0; }
.nav-link { font-weight:600; padding:14px 18px; color:#505050; transition: color 0.3s; }
.nav-link:hover { color:#0d6efd; }

/* Search Bar */
.input-group .form-control { border-radius:4px 0 0 4px; border-right:none; }
.input-group .btn { border-radius:0 4px 4px 0; }

/* ===============================
   Category / Sidebar Links
================================ */
.category-link { background:#f8f9fa; color:#333; font-weight:500; text-decoration:none; position:relative; transition:all 0.3s ease; }
.category-link:hover { background:#0d6efd; color:#fff; transform:translateX(5px); box-shadow:0 4px 12px rgba(0,0,0,0.15); }
.active-category { background:#e7f1ff; font-weight:600; color:#0d6efd !important; }
.active-category::before { content:''; position:absolute; left:0; top:0; width:4px; height:100%; background:#0d6efd; border-radius:4px 0 0 4px; }
.active-category:hover { background:#0b5ed7; color:#fff !important; transform:translateX(5px); }

/* ===============================
   Sidebar Ads
================================ */
.sidebar-ad, .header-ad { background:#fff; border-radius:6px; padding:10-12px; box-shadow:0 2px 6px rgba(0,0,0,0.08); }

/* ===============================
   Dropdown Menu (Desktop)
================================ */
@media (min-width:992px) {
    .navbar .dropdown-menu {
        display:block;
        opacity:0;
        visibility:hidden;
        transform:translateY(10px);
        transition:all .25s ease;
    }
    .navbar .dropdown:hover .dropdown-menu {
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
}

/* Dropdown Menu (Mobile / Tablet) */
@media (max-width:991px) {
    .navbar .dropdown-menu {
        position:static;
        display:none;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        box-shadow:none;
        padding-left:0;
        padding-right:0;
    }
    .navbar .dropdown:focus-within > .dropdown-menu { display:block; }
    .navbar .dropdown-item { padding-left:30px; }
}

/* ===============================
   Responsive Adjustments
================================ */
.navbar-brand img { max-width:170px; height:auto; }
@media (max-width:991px) {
    .navbar .container { padding-left:0.5rem; padding-right:0.5rem; }
    form.d-flex { margin-left:0; width:100%; }
    .sticky-sidebar { position:relative; top:0; border-left:none; border-radius:8px; margin-bottom:20px; }
}
@media (max-width:576px) {
    .top-header { padding:0.25rem 0.5rem; }
    .top-header .top-social { gap:0.5rem; }
    .top-header .top-email, .top-header .top-phone { display:none; }
}

/* ===============================
   Responsive Ads
================================ */
.banner_ads{
    width:100%;
    max-width:830px;
    aspect-ratio: 830 / 90;
    margin:0 auto;
}
.banner_ads img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:6px;
}

.iframe_ads{
    width:100%;
    max-width:970px;
    aspect-ratio: 970 / 60;
    margin:0 auto;
}
.iframe_ads img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ===============================
   Newspapers  Cards
================================ */
/* improve logo fit */
.newspaper-card img{
    max-height:80px;
    object-fit:contain;
    padding:10px;
}

/* image container */
.img-wrapper{
    position:relative;
    width:100%;
    height:80px;
    overflow:hidden;
    background:#f0f0f0;
    border-top-left-radius: calc(.375rem - 1px);
    border-top-right-radius: calc(.375rem - 1px);
}

/* shimmer placeholder */
.img-wrapper::before{
    content:'';
    position:absolute;
    top:0;
    left:-200px;
    width:160px;
    height:100%;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.65) 50%,
        rgba(255,255,255,0) 100%
    );
    animation:shimmer 1.3s infinite;
    z-index:1;
}

@keyframes shimmer{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(420px); }
}

/* progressive loading image */
.lazy-img{
    opacity:0;
    filter:blur(10px);
    transform:scale(1.05);
    transition:opacity .5s ease, filter .6s ease, transform .6s ease;
    position:relative;
    z-index:2;
}

/* final sharp image */
.lazy-loaded{
    opacity:1;
    filter:blur(0);
    transform:scale(1);
}

/* remove shimmer after load */
.img-wrapper.loaded::before{
    display:none;
}