:root {
  --bg-color: #121212;
  --text-color: #f5f5f5;
  --card-bg: #1e1e1e;
  --link-color: #64b5f6;
}

/* Light mode overrides */
[data-bs-theme="light"] {
  --bg-color: #f5f5f5;
  --text-color: #121212;
  --card-bg: #ffffff;
  --link-color: #1565c0;
}

/* Apply to your elements */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.card {
  background-color: var(--card-bg);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

/* Default dark mode button */
#fullscreenToggle, #themeToggle {
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
  background: transparent;
}

/* Light mode tweak */
[data-bs-theme="light"] #fullscreenToggle,
[data-bs-theme="light"] #themeToggle {
  border-color: #333;
  color: #111;

}



/* 🟢 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 */
}



/* 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 {
    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;
}



[data-bs-theme="dark"] h1 {
  color: deepskyblue  !important;
}

[data-bs-theme="light"] h1 {
  color:  deepskyblue !important;
}







.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;
}


[data-bs-theme="light"] p {
  color:  black ;
}



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;
      overflow-x: hidden; /* Prevents unwanted horizontal scroll */
}

[data-bs-theme="light"] body {
  background-color:  snow !important;
}



/* 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;
}

/* ===== Panels Theme ===== */





[data-bs-theme="dark"] .overview{
  background: #11100e;
  color: #fff;
}

[data-bs-theme="light"] .overview{
  background: azure;
  color: #000;
}



.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;

}


/* --- Remove Swiper's built-in SVG arrows --- */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
  content: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  display: none !important;
}

/* --- Layout containers --- */

      /* Adjust pagination dot container */
      .swiper-pagination {
  display: none !important;
      }
      .swiper-pagination-bullet {
  display: none !important;
      }


/* Orange container */
.container-fluid.d-flex {
  justify-content: flex-start; /* yellow container now sticks to left edge */
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

/* Yellow container (swiper zone) */
.swiper-container {
position: relative;
  width: 100%;
  max-width: 1820px; /* 9×200 + 2×20 for arrows */
  margin: 0; /* no centering */
  flex: 0 1 auto;
  overflow: hidden;  /* Prevent horizontal overflow */
  box-sizing: border-box;
  left: 320px;
  padding-right: 20px;

}


/* Each slide (blue border area) */
.swiper-slide {
  width: 200px;
  justify-content: center;
  align-items: center;
  padding-left: 20px;
}

      .swiper-container .swiper-slide img {
          height: 50px;
          width: 150px;
          left: 15px;
      }
  /* Adjust the visibility of images */
  .swiper-container .swiper-slide img.visible {
      visibility: visible;
      opacity: 1;
  }
/* --- Navigation arrows --- */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  z-index: 20;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  pointer-events: auto;

  top: 50%;

}
.swiper-button-prev {
  left: 0;
  transform: translateX(-5px) translateY(7.5px);
  background-image: url('/static/images/arrows/prevArrow_idle.png');
}
.swiper-button-next {
  right: 0;
  transform: translateX(5px) translateY(7.5px);
  background-image: url('/static/images/arrows/nextArrow_idle.png');
}
}

/* Hover / active */
.swiper-button-prev:hover { background-image: url('/static/images/arrows/prevArrow_hover.png'); }
.swiper-button-next:hover { background-image: url('/static/images/arrows/nextArrow_hover.png'); }
.swiper-button-prev:active { background-image: url('/static/images/arrows/prevArrow_active.png'); }
.swiper-button-next:active { background-image: url('/static/images/arrows/nextArrow_active.png'); }

/* --- Responsive widths --- */

@media (min-width: 1980px) and (max-width: 2179px) { .swiper-container { width: 1820px; left: 0px;} }
@media (min-width: 1780px) and (max-width: 1979px) { .swiper-container { width: 1620px;  left: 0px;} }
@media (min-width: 1580px) and (max-width: 1779px) { .swiper-container { width: 1420px;left: 0px; } }
@media (min-width: 1380px) and (max-width: 1579px) { .swiper-container { width: 1220px; left: 0px;} }
@media (min-width: 1180px) and (max-width: 1379px) { .swiper-container { width: 1020px; left: 0px;} }
@media (min-width: 980px) and (max-width: 1179px)  { .swiper-container { width: 820px; left: 0px; } }
@media (min-width: 780px) and (max-width: 979px)   { .swiper-container { width: 620px; left: 0px; } }
@media (min-width: 580px) and (max-width: 779px)   { .swiper-container { width: 420px; left: 0px; } }
@media (max-width: 579px)                          { .swiper-container { width: 220px; left: 0px; } }


      @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 */
}