/* 🟢 Push Main Content Below Navbar */
.contentZone {
    padding-bottom: 20px; /* Keeps spacing at the bottom */
    background: transparent;
    border-radius: 0px;
    border: 0;
    display: block;/* Ensure the custom arrows are visible */
    transition: transform 0.3s ease-in-out;
    position: absolute;
    top: 120px;
    right: 440px;
    width: calc(100% - 860px);
    height: calc(100% - 140px);
    /*background: radial-gradient(#302d26, #070706);*/
    z-index: 10;
    overflow-y: auto; /* ✅ Content scrolls inside this div */
}

/* 🟢 Prevent Body from Scrolling When Side Panel Scrolls */
body {
    overflow-x: hidden; /* Prevents unwanted horizontal scroll */
}

/* Ensure images inside the article description (TinyMCE content) scale correctly */
.article-content img {
    max-width: 100%; /* Keeps images within the article container */
    height: auto; /* Maintains aspect ratio */
    display: block;
    margin: 10px auto; /* Adds spacing and centers */
}
.country-select-flag[src*="__.gif"] {
    display: none;
}


.overview {
    display: block;
    flex-direction: column;
    align-items: center;
    background: #1a1a1a; /* Dark background for contrast */
    border: 1px solid #3f3d38;
    border-radius: 9px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
    opacity:0;

}
.overview:hover{
    background:radial-gradient(#3398CC,#32332c );
    border-color:skyblue;

}
.overview:active {
    background:radial-gradient(#eefffd , #59c9ec );
         border-color:black;}
/* 🟢 Optional: Restore Color on Hover */


/* 🟢 Style the Overview Images */
.overview-image {
    width: auto;
    height: auto;
    max-width: 300px; /* Limit max width */
    overflow: hidden; /* Crop overflow */
    border-radius: 5px;
}

.overview-image img {
    width: 100%; /* Force width to fit container */
    height: 100%; /* Fill container */
    object-fit: cover; /* Crop to fit while maintaining aspect ratio */
    display: block;

    filter: grayscale(100%); /* ✅ Converts image to black & white */
    transition: filter 0.3s ease-in-out; /* ✅ Smooth effect when changing */

}
.overview-image img:hover {
    filter: grayscale(0%); /* ✅ Restores original color on hover */
}
h1 {
    color: cyan; /* Cyan title */
    font-size: 2.5rem;
    align-items: start;
    font-family:"Calibri", sans-serif;
}
 h2 {
    color: skyblue;
    font-size: 1.875rem;
    align-items: center;
    margin: 5px;
    font-family:"Calibri", sans-serif;
}
/* 🟢 Style the Title */
 h3 {
    color: #2dacd2;
    align-items: center;
    margin: 5px;
    font-family:"Calibri", sans-serif;
    font-size: 1.6rem;
    line-height: 1.8rem;
}
collection-title {
    color: skyblue;
    font-size: 2.5rem;
    align-items: start;
    font-family:"Calibri", sans-serif;
}



h3:hover { color: skyblue; }
h3:active { color: cyan; }


/* 🟢 Style the Snippet */
p {
    color: lightgrey; /* White text */
    font-size: 1.2rem;
    margin-top: 5px;
    line-height: 1.4rem;
    font-family:"Calibri", sans-serif;
}



a {
    text-decoration: none;
    display: block;
    width: 100%;
}
.article-content {
    width: 100%;

}


.article-image{
    width:100%;
}
.article-image img{
    width:100%;

}

/* Base Styles */
body {
    font-family:"Calibri", sans-serif;
    margin: 0;
    padding: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer */
    scroll-behavior: smooth;
}


/* Content Wrapper: Main Article and Side Panel */
.content-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    margin-top: 20px;
}

/* Main Article */
.article {
    flex: 0 0 70%; /* takes 70% of the width */
    margin-right: 20px;
}

/* Default state of the overview panel */




/* Content inside the panel */
.overviews {
    position: absolute;
    width: calc(100% - 40px);
    height: calc(100% - 80px);
    flex-direction: column;
    left: 20px;
    top: 20px;
    border: 1px solid #3f3d38;
    border-radius: 9px;
    background-color: #11100e;
}



.content-wrapper {
    flex-direction: column;
}

.article {
    flex: 0 0 100%;
    margin-right: 0;
}

.article-side-panel {
    flex: 0 0 100%;
    border-left: none;
    padding-left: 0;
}
.article-side-panel.hidden {
    /*display: none; */
}



      .topnav-right .d-flex {
          top: 0px;

      }


      /* Hide default navigation arrows */
      .swiper-button-prev,
      .swiper-button-next {
          visibility: hidden;
      }
      .swiper-container .swiper-slide img {
          height: 50px;
          width: 150px;
          left: 15px;
      }
      .swiper-container .swiper-slide {
          padding-left: 20px; /* Keep spacing consistent between slides */
          top: 20px;
      }

      /* Adjust the visibility of images */
      .swiper-container .swiper-slide img.visible {
          visibility: visible;
          opacity: 1;
      }

      /* Swiper container styles */
      .swiper-container {
          width: 100%;  /* Default full width */
          max-width: 1600px;  /* Limit to max 1500px */
          height:100px;

          margin: 0 auto;  /* Center the swiper */
          position: absolute;  /* Important for positioning arrows relative to the container */
          overflow: hidden;  /* Prevent horizontal overflow */
          left: 0px;  /* Add padding on the left */
          padding-right: 0px;  /* Add padding on the right */
          box-sizing: border-box;  /* Ensure padding doesn't add to the overall width */


      }
      .swiper-button-next::after,.swiper-button-prev::after {
          content: "";
      }
      .swiper-button-prev, .swiper-button-next {
          display: block;/* Ensure the custom arrows are visible */
          position: absolute;
          top: 70%; /* Adjust top position to move arrows lower */
          transform: translateY(-50%);
          z-index: 10;
          width: 20px;
          height: 20px;
          background-size: contain;
          background-repeat: no-repeat;
          cursor: pointer;
      }
      /* Adjust pagination dot container */
      .swiper-pagination {
          position: absolute;
          bottom: 0px;  /* Move pagination dots lower */
          left: 50%;
          transform: translateY(10px);
      }
      .swiper-pagination-bullet {
          width: 12px;
          height: 12px;
          background-color: #000;  /* Color of dots */
      }

      @media (min-width: 1980px)  {
          .swiper-container {
            width: 1600px;
            left: 400px;
          }
      }

      @media (min-width: 1780px) and (max-width: 1979px) {
          .swiper-container {
            width: 1600px;      
          }
      }

      @media (min-width: 1580px) and (max-width: 1779px) {
          .swiper-container {
            width: 1400px;
              left: 0px;
          }
      }

      @media (min-width: 1380px) and (max-width: 1579px)  {
          .swiper-container {
              width: 1200px;
              position: absolute;
              padding-left: 0px;
              padding-right: 20px;
          }

      }


      @media (min-width: 1180px) and (max-width: 1379px) {
          .swiper-container {
              width: 1020px;
          }
      }
      @media (min-width: 980px) and (max-width: 1179px) {
          .swiper-container {
              width: 820px;
          }
      }


      @media (min-width: 780px) and (max-width: 979px){

              .swiper-container {
              width: 620px;
          }  
      }


        @media (min-width: 580px) and (max-width: 779px) {
          .swiper-container {
            width: 420px;
          }
        }


        @media (max-width: 579px) {
          .swiper-container {
            width: 220px;
          }
        }

    @media (max-width: 2020px) {

          .contentZone {
              right: 380px;
              width: calc(100% - 660px);
          }
          .side-panel, .sort-bar, .sort{
              width: 340px;
          }

      }

      @media (max-width: 1800px) {

          .contentZone {
              left:220px;
              width: calc(100% - 560px);
          }

          .side-panel, .sort-bar, .sort{
              width: 300px;
          }

      }

      @media (max-width: 1640px) {

          .swiper-button-prev, .swiper-button-next {visibility: visible !important; display: block !important; }
          .swiper-button-prev{left: 0px; }
          .swiper-button-next{right: 0px; }

          .swiper-container .swiper-slide {
              padding-right: 20px;
          }

      }

      @media (max-width: 840px) {

          .contentZone {
              left:20px;
                width: calc(100% - 360px);
          }

      }
      @media (max-width: 640px) {

          .contentZone {
              left:20px;
                width: calc(100% - 40px);
          }

      }



/* ✅ Ensure overviews start hidden to prevent flashing */
.overview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 1;  /* ✅ Start hidden to prevent the flash */
    transform: translateY(0px); /* ✅ Start slightly above */
}