/* Body Styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: whitesmoke;
}

h1 {
  margin-top: 20px;
  text-align: center;
  font-family: "Bebas Neue", sans-serif;
  font-optical-sizing: auto;
}

/* Error and Loading */
#error-message {
  font-size: 16px;
  color: red;
  margin: 20px 0;
  text-align: center;
  display: none;
}

/* Loading Spinner Styling */
#loading {
  text-align: center;
  display: none;
  margin-top: 20px;
}

.spinner,
.spinner-full {
  border: 8px solid #f3f3f3; /* Light gray */
  border-top: 8px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Gallery Styling */
.gallery {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(200px, 1fr)
  ); /* Default responsive grid */
  gap: 20px;
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4); /* Soft dark shadow */
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  cursor: pointer;
}

.gallery img:hover {
  transform: scale(1.03);
  border-color: rgba(100, 100, 100, 0.8); /* Slightly darker gray on hover */
  box-shadow: 0 12px 16px rgba(0, 0, 0, 0.5); /* Stronger shadow on hover */
}

/* Full-Screen Modal Styles */
/* Full-Screen Modal Styles */
#full-screen-modal {
  display: none; /* Initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow: auto; /* To ensure that image fits within modal */
}

#full-screen-modal img {
  max-width: 100%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 15px;

  /* ✨ Beige Glow Effect */
  box-shadow: 0 0 20px rgba(245, 222, 179, 0.8),
    /* Light beige */ 0 0 40px rgba(222, 184, 135, 0.6),
    /* Burlywood */ 0 0 60px rgba(210, 180, 140, 0.4); /* Tan */
}

#full-screen-modal .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
}

/* Pagination Button Styling */
button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}

/* Media Queries for Different Screen Sizes */

/* Medium screens: 3 images per row */
@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr); /* 3 images per row */
  }
}

/* Adjust gallery layout on small screens (1 image per row) */
@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr; /* 1 image per row on smaller screens */
  }
  #full-screen-modal img {
    max-width: 100%; /* Make sure it takes up the full width of the screen */
    max-height: 100%; /* Adjust height to ensure it's within view */
    object-position: center; /* Center the image in the modal */
  }
}

/* Container and labels */
#sort-container {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.sort-label {
  font-size: 16px;
  font-weight: 500;
  color: #999;
  transition: color 0.3s ease;
}

#asc-label.active,
#desc-label.active {
  color: #444;
}

/* Switch Container */
.switch {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 38px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Background Track */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 50px;
}

/* Toggle Knob */
.slider:before {
  position: absolute;
  content: "";
  height: 36px;
  width: 36px;
  top: 1px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* When checked */
input:checked + .slider {
  background-color: #888; /* neutral dark gray */
}

input:checked + .slider:before {
  transform: translateX(29px);
  background-color: #333;
}

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  display: none;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: rgba(68, 68, 68, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.3s, background-color 0.3s;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
}

/* Desktop behavior */
#back-to-top:hover {
  background-color: rgba(68, 68, 68, 0.95);
}

/* Mobile fix: disable hover effect on touch screens */
@media (hover: none) and (pointer: coarse) {
  #back-to-top:hover {
    background-color: rgba(68, 68, 68, 0.6); /* Same as normal */
  }
}