/* --- UNIVERSAL & MOBILE-FIRST STYLES --- */
html, body {
  height: 100%; width: 100%; background-color: #8C6DE1;
  font-family: Figtree; margin: 0; padding: 0; overflow: hidden;
}
.layout-wrapper { display: none; height: 100%; }
.slider-container { position: relative; width: 100%; height: 100%; }
.content {
  width: 100%; height: 100%; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
.content::-webkit-scrollbar { display: none; }
.thumbnails { display: flex; flex-direction: row; height: 100%; }
.slider-page {
  width: 100vw; height: 100%; flex-shrink: 0;
  scroll-snap-align: start;
  display: flex; align-items: center; box-sizing: border-box;
}
.thumbnail-container { text-align: center; }
h3 { font-size: 18px; color: #FFFFFF; font-weight: 300; }

/* Universal hover effect */
.thumbnails img:hover { transform: scale(1.05); }


/* --- LAYOUT VISIBILITY AND STYLES --- */

/* MOBILE LAYOUT */
#mobile-layout { display: block; background-color: #8C6DE1; /* Green */ }
#mobile-layout .slider-page { flex-direction: column; justify-content: space-evenly; padding: 10px 0; }
#mobile-layout .thumbnail-container { margin: 5px; }
#mobile-layout .thumbnails img {
  width: 200px; height: 140px;
  cursor: pointer; transition: transform 0.2s ease-in-out;
  /* ADDED: Rounded corners and shadow for mobile */
  border-radius: 20px;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
}

/* LAPTOP LAYOUT */
@media (min-width: 940px) {
  #mobile-layout { display: none; }
  #laptop-layout { display: block; background-color: #8C6DE1; /* Blue */ }
  #laptop-layout .slider-page { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 0 20px; }
  #laptop-layout .thumbnail-container { width: 50%; padding: 10px; box-sizing: border-box; }
  #laptop-layout .thumbnails img {
    width: 300px; height: 210px;
    cursor: pointer; transition: transform 0.2s ease-in-out;
    /* ADDED: Rounded corners and shadow for laptop */
    border-radius: 20px;
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
  }
}

/* DESKTOP LAYOUT */
@media (min-width: 1140px) {
  #laptop-layout { display: none; }
  #desktop-layout { display: block; background-color: #8C6DE1; /* Red */ }
  #desktop-layout .slider-page { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 0; }
  #desktop-layout .thumbnail-container { width: 33.33%; padding: 20px; box-sizing: border-box; }
  #desktop-layout .thumbnails img {
    width: 300px; height: 210px;
    cursor: pointer; transition: transform 0.2s ease-in-out;
    /* ADDED: Rounded corners and shadow for desktop */
    border-radius: 20px;
    box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
  }
}

/* --- ARROWS (Universal) --- */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  background-color: rgba(128, 128, 128, 1); border: none; border-radius: 50%;
  width: 44px; height: 44px; cursor: pointer; display: none; /* JS will show them */
  justify-content: center; align-items: center; transition: all 0.2s;
}
.slider-arrow:hover { transform: translateY(-50%) scale(1.1); }
.slider-arrow:disabled { opacity: 0.2; cursor: not-allowed; }
.slider-arrow.left { left: 5px; }
.slider-arrow.right { right: 5px; }
.slider-arrow svg { fill: white; width: 24px; height: 24px; }

/* --- POPUP STYLES (The Final, Correct Version) --- */
#popup {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(184, 166, 233, 0.9);
  z-index: 1000;
  display: none; /* Hidden by default */
  justify-content: center; align-items: center;
  opacity: 0; transition: opacity 0.3s ease;
}
#popup.active { display: flex; opacity: 1; }
#popup-content { width: 90%; height: 90%; border: none; }
.close-popup-btn {
  background-color: #F07455; color: #fff; border: none; padding: 8px 15px;
  cursor: pointer; position: absolute; z-index: 1001; border-radius: 5px;
  font-family: Figtree, sans-serif; font-size: 16px;
}
.close-popup-btn:hover { background-color: #a12c2c; }
.top-right { top: 0px; right: 0px; }
.bottom-left { bottom: 0px; left: 0px; }