/* Ad Container Styles */

 /* Common ad container styles */
 .ad-container {
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     background-color: var(--background-color);
     margin: 0 auto;
     text-align: center;
     width: 100%;
     border: 1px dashed var(--card-border);
     /* Light dashed border using theme variables */
     border-radius: 4px;
     padding: 5px;
     /* Add some internal padding */
     margin-bottom: 15px;
     /* Add some margin below */
 }

 /* Top banner ad styles */
 .ad-top-banner {
     max-width: 100%;
     min-height: 90px;
     margin: 0 auto 20px;
     padding: 20px 0;
     border-bottom: 1px solid var(--card-border);
     display: flex;
     justify-content: center;
 }

 /* Make banner ads responsive */
 .ad-top-banner .adsbygoogle {
     width: 100%;
     max-width: 728px;
     height: auto;
     min-height: 90px;
 }

 /* Page layout for sidebar ads */
 .page-layout {
     display: flex;
     justify-content: space-between;
     max-width: 1600px;
     margin: 0 auto;
     gap: 10px;
     flex-wrap: wrap;
     /* Allow wrapping on smaller screens */
     padding: 0 10px;
     /* Add some padding on the sides */
 }

 /* Main content container */
 .main-content {
     flex: 1;
     min-width: 0;
     /* Important for preventing overflow */
     width: 100%;
     /* Full width on mobile */
     max-width: 100%;
     /* Ensure it doesn't overflow */
     overflow-x: hidden;
     /* Prevent horizontal scrolling */
 }

 /* Make main content take full width on mobile */
 @media (max-width: 767px) {
     .main-content.container {
         max-width: 100%;
         padding: 0 15px;
     }
 }

 /* Sidebar ad containers */
 .ad-sidebar {
     width: 300px;
     min-height: 600px;
     display: none;
     /* Hidden by default, will show only on desktop */
     margin: 0 auto;
 }

 /* Sticky ad positioning */
 .sticky-ad {
     position: sticky;
     top: 90px;
     /* Adjust based on your header height plus some padding */
     padding: 10px;
     border: 1px dashed var(--card-border);
     /* Light dashed border using theme variables */
     border-radius: 4px;
     background-color: var(--background-color);
     margin-bottom: 15px;
     /* Add some margin below */
 }

 /* AdSense specific styles */
 .adsbygoogle {
     display: block;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 /* Ensure ads don't overflow their containers */
 ins.adsbygoogle {
     max-width: 100%;
 }

 /* Media Queries for Responsive Behavior */

 /* Desktop screens - Show sidebar ads */
 @media (min-width: 1200px) {
     .page-layout {
         max-width: 1400px;
         margin: 0 auto;
     }

     /* Show both sidebars on large desktop */
     .ad-sidebar {
         display: block;
         width: 300px;
         min-height: 600px;
     }

     .sticky-ad {
         min-height: 600px;
     }

     .ad-sidebar .adsbygoogle {
         height: 600px;
     }
 }

 /* Medium desktop screens - Adjust sidebar size */
 @media (min-width: 992px) and (max-width: 1199px) {

     /* Show only left sidebar on medium desktop */
     .ad-sidebar-right {
         display: none;
     }

     .ad-sidebar-left {
         display: block;
         width: 200px;
         min-height: 600px;
     }

     .sticky-ad {
         min-height: 600px;
     }

     .ad-sidebar .adsbygoogle {
         height: 600px;
     }
 }

 /* Tablet landscape - Only show left sidebar smaller */
 @media (min-width: 768px) and (max-width: 991px) {
     .ad-sidebar-right {
         display: none;
     }

     .ad-sidebar-left {
         display: block;
         width: 160px;
         min-height: 600px;
     }

     .sticky-ad {
         min-height: 600px;
     }

     .ad-sidebar .adsbygoogle {
         height: 600px;
     }

     .ad-top-banner {
         min-height: 90px;
     }
 }

 /* Mobile devices - Hide sidebar ads, only show banner */
 @media (max-width: 767px) {
     .page-layout {
         flex-direction: column;
     }

     /* Enhance banner ad for mobile */
     .ad-top-banner {
         min-height: 90px;
         margin-bottom: 15px;
         width: 100%;
         max-width: 100%;
     }

     .ad-top-banner .adsbygoogle {
         min-height: 90px;
         width: 100%;
         max-width: 336px;
         /* Common mobile ad size */
     }

     /* Hide sidebar ads completely on mobile */
     .ad-sidebar {
         display: none !important;
         /* Force hide on mobile */
     }

     /* Make the banner ad border more visible on mobile */
     .ad-container {
         border-width: 2px;
         margin-bottom: 20px;
     }
 }

 /* Small mobile screens - Optimize banner ad */
 @media (max-width: 480px) {
     .ad-top-banner {
         min-height: 50px;
         padding: 15px 0;
     }

     .ad-top-banner .adsbygoogle {
         min-height: 50px;
         max-width: 320px;
         /* Common small mobile ad size */
     }

     /* Center banner ad on very small screens */
     .ad-container {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     /* Adjust padding and margins for very small screens */
     .page-layout {
         padding: 0 5px;
         gap: 10px;
     }

     /* Make ad label smaller on mobile */
     .ad-container::before {
         font-size: 9px;
         padding: 1px 0;
     }
 }

 /* Extra small screens - Further optimize banner */
 @media (max-width: 320px) {
     .ad-top-banner {
         padding: 10px 0;
         min-height: 50px;
     }

     .ad-top-banner .adsbygoogle {
         max-width: 300px;
         /* Smallest common ad size */
     }
 }

 /* Ad labels for transparency */
 .ad-container::before,
 .sticky-ad::before {
     content: "Advertisement";
     display: block;
     text-align: center;
     font-size: 11px;
     font-weight: 500;
     color: var(--submenu-text);
     opacity: 0.8;
     margin-bottom: 5px;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     padding: 2px 0;
     background-color: rgba(0, 0, 0, 0.02);
     /* Very slight background to make label stand out */
     border-bottom: 1px dotted var(--card-border);
 }

 /* Ad container position relative for the label */
 .ad-container,
 .sticky-ad {
     position: relative;
     padding-top: 20px;
     /* Increased space for the ad label */
 }

 /* Ad visibility control for lazy loading */
 .ad-hidden {
     visibility: hidden;
     height: 0;
     min-height: 0;
 }