/* General Body Styles */
body {
    background-image: url('../../photos/gallery.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh; /* Use min-height for better mobile compatibility */
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Gallery Container */
.gallery-container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    margin: 20px;
}

.gallery-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.gallery-container img:hover {
    transform: scale(1.05);
}

/* Navigation Button */
.nav-btn img {
	width: 60px;
	height: 60px;
}


/* From Uiverse.io by adamgiebl */ 
.select-all-btn {
  --purple: #9B7EDA;
  font-size: 18px;
  padding: 0.8em 3em;
  letter-spacing: 0.08em;
  position: relative;
  font-family: inherit;
  border-radius: 0.6em;
  overflow: hidden;
  transition: all 0.3s;
  line-height: 1.4em;
  border: 2px solid var(--purple);
  background: linear-gradient(to right, rgba(155, 126, 218, 0.1) 1%, transparent 40%, transparent 60%, rgba(155, 126, 218, 0.1) 100%);
  color: var(--purple);
  box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.4), 0 0 9px 3px rgba(155, 126, 218, 0.1);
}

.select-all-btn:hover {
  color: #BFA3F3;
  box-shadow: inset 0 0 10px rgba(155, 126, 218, 0.6), 0 0 9px 3px rgba(155, 126, 218, 0.2);
}

.select-all-btn:before {
  content: "";
  position: absolute;
  left: -4em;
  width: 4em;
  height: 100%;
  top: 0;
  transition: transform .4s ease-in-out;
  background: linear-gradient(to right, transparent 1%, rgba(155, 126, 218, 0.1) 40%, rgba(155, 126, 218, 0.1) 60%, transparent 100%);
}

.select-all-btn:hover:before {
  transform: translateX(15em);
}

/* From Uiverse.io by vk-uiux */ 
/* MAIN */
/* =============================================== */
.radio-label {
  display: flex;
  align-items: center;
  border-radius: 100px;
  padding: 8px 10px;
  margin: 0;
  cursor: pointer;
  transition: .3s;
}

.radio-label:hover,
.radio-label:focus-within,
.radio-label:active {
  background: hsla(0, 0%, 80%, .14);
}

.radio-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  z-index: -1;
}

.radio-design {
  width: 16px;
  height: 16px;
  border-radius: 100px;
  background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));
  position: relative;
}

.radio-design::before {
  content: '';
  display: inline-block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: hsl(0, 0%, 90%);
  transform: scale(1.1);
  transition: .3s;
}

.radio-input:checked+.radio-design::before {
  transform: scale(0);
}

.label-text {
  color: hsl(0, 0%, 60%);
  margin-left: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  transition: .3s;
}

.radio-input:checked~.label-text {
  color: hsl(0, 0%, 40%);
}

/* Colorful Text */
.colorful-text {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* From Uiverse.io by Enashpinal */
.checkbox-wrapper {
  --checkbox-shadow: rgba(0, 255, 136, 0.3);
  --checkbox-border: rgba(0, 255, 136, 0.7);
  --checkbox-size: 20px; /* Reduced size */
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  padding: 5px; /* Reduced padding */
}

.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-wrapper .checkmark {
  position: relative;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 1px solid black;
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.checkbox-wrapper .checkmark::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    #ff7e5f,
    #feb47b,
    #ff7e5f,
    #86e3ce,
    #00a1ff,
    #ff8c00
  );
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scale(0) rotate(-45deg);
}

.checkbox-wrapper input:checked ~ .checkmark::before {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.checkbox-wrapper .checkmark svg {
  width: 0;
  height: 0;
  color: #fff;
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.checkbox-wrapper input:checked ~ .checkmark svg {
  width: 18px;
  height: 18px;
  transform: rotate(360deg);
}

.checkbox-wrapper:hover .checkmark {
  border-color: transparent; /* 悬停时边框透明 */
  transform: scale(1.1);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.5),
    0 0 40px rgba(255, 255, 255, 0.5),
    inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.checkbox-wrapper input:checked ~ .checkmark {
  animation: pulse 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }
  50% {
    transform: scale(0.9);
    box-shadow:
      0 0 30px rgba(255, 255, 255, 0.5),
      0 0 50px rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  }
}

.checkbox-wrapper .label {
  margin-left: 10px; /* Reduced margin */
  font-family: "Segoe UI", sans-serif;
  font-size: 16px; /* Reduced font size */
  color: black;
  opacity: 0.9;
  transition: all 0.3s;
}

.checkbox-wrapper:hover .label {
  opacity: 1;
  transform: translateX(5px);
}

/* Glowing dots animation */
.checkbox-wrapper::after,
.checkbox-wrapper::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff7e5f; /* 初始点颜色 */
  opacity: 0;
  transition: all 0.5s;
}

.checkbox-wrapper::before {
  left: -10px;
  top: 50%;
}

.checkbox-wrapper::after {
  right: -10px;
  top: 50%;
}

/* Explore Button */
.explore-btn {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border-radius: 9999px;
  padding: 2px;
  background: transparent;
  border: none;
}

.explore-btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.explore-btn .spinner {
  position: absolute;
  top: -1000%;
  right: -1000%;
  bottom: -1000%;
  left: -1000%;
  animation: spin 2s linear infinite;
  background-image: linear-gradient(to right, #ec4899, #8b5cf6, #3b82f6);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.explore-btn .button-content {
  display: inline-flex;
  height: 100%;
  width: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #020617;
  padding: 0.75rem 2rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  backdrop-filter: blur(24px);
  transition: all 300ms;
}

.explore-btn:hover .button-content {
  background-color: rgba(2, 6, 23, 0.9);
}

.explore-btn .button-content svg {
  margin-right: 0.5rem;
  height: 1.25rem;
  width: 1.25rem;
  color: #ec4899;
  transition: transform 300ms;
}

.explore-btn:hover .button-content svg:first-of-type {
  transform: translateX(-0.25rem);
}

.explore-btn:hover .button-content svg:last-of-type {
  transform: translateX(0.25rem);
}

.explore-btn .text {
  position: relative;
  background-image: linear-gradient(to right, #ec4899, #8b5cf6, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

.explore-btn .button-content svg:last-of-type {
  margin-left: 0.5rem;
  color: #3b82f6;
}

/* Photo Container & Card Frame */
#photo-container {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 15px;
}

.card-frame {
  --card-width: 120px;
  --card-height: 120px;
  --frame-offset: 5px;

  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  cursor: pointer;
  flex-shrink: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.3s ease;
}

.card-photo {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.card-frame.selected .card-photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    border-radius: 8px;
    z-index: 2;
}

.card-frame::before {
  content: '';
  position: absolute;
  top: calc(var(--frame-offset) * -1);
  left: calc(var(--frame-offset) * -1);
  width: calc(var(--card-width) + (var(--frame-offset) * 2));
  height: calc(var(--card-height) + (var(--frame-offset) * 2));
  border-radius: 10px;
  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
  z-index: 0;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--frame-offset) * -1);
  left: calc(var(--frame-offset) * -1);
  width: calc(var(--card-width) + (var(--frame-offset) * 2));
  height: calc(var(--card-height) + (var(--frame-offset) * 2));
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: none;
}

.card-frame:hover::before {
  transform: rotate(-90deg);
}

.card-frame.selected {
    box-shadow: 0 0 15px 5px rgba(232, 28, 255, 0.7);
}

/* Photo Gallery Scrollbar & Fade */
#photo-gallery::-webkit-scrollbar {
  display: none;
}
#photo-gallery {
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
}

#photo-gallery.active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  user-select: none;
}

.viewer-placeholder {
    width: 206px !important;
    height: 206px !important;
    flex-shrink: 0;
}

/* Like Button */
#heart {
  display: none;
}

.like-button {
  position: absolute;
  bottom: 15px;
  right: 15px;
  cursor: pointer;
  display: flex;
  height: 48px;
  width: 136px;
  border-radius: 16px;
  border: none;
  background-color: #1d1d1d;
  overflow: hidden;
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.2),
    inset 2px 2px 5px rgba(0, 0, 0, 0.1),
    4px 4px 10px rgba(0, 0, 0, 0.4),
    -2px -2px 8px rgba(255, 255, 255, 0.1);
    z-index: 10;
}

body.fullscreen-active > *:not(#fullscreen-viewer) {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

#close-fullscreen {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 60px; /* Increased size */
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    text-shadow: 0 0 10px rgba(0,0,0,0.7); /* Added shadow for visibility */
}

#close-fullscreen:hover {
    transform: scale(1.1);
    color: #ff5555; /* Change color on hover */
}

.like {
  width: 70%;
  height: 100%;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-evenly;
}

.like-icon {
  fill: #505050;
  height: 28px;
  width: 28px;
}

.like-text {
  color: #fcfcfc;
  font-size: 16px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.like-count {
  position: absolute;
  right: 0;
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #717070;
  font-size: 16px;
  border-left: 2px solid #4e4e4e;
  transition: all 0.5s ease-out;
}

.on:checked ~ .like .like-icon {
  fill: #fc4e4e;
  animation: enlarge 0.2s ease-out 1;
  transition: all 0.2s ease-out;
}

.on:checked ~ .like-count {
  color: #fcfcfc;
}

@keyframes enlarge {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.2);
  }
}

/* Fullscreen Viewer */
#fullscreen-viewer img {
    cursor: zoom-out;
    transition: transform 0.2s ease-out;
}

#fullscreen-viewer img.draggable {
    cursor: grab;
}

#fullscreen-viewer img.dragging {
    cursor: grabbing;
}

#fullscreen-content-wrapper {
    transition: transform 0.2s ease-out;
}

/* Service Info */
#fullscreen-viewer .service-info {
    position: absolute;
    top: -30px; /* Position above the image */
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    color: white;
    padding: 0;
    border-radius: 0;
    font-size: 22px;
    font-family: Arial, sans-serif;
    z-index: 2001;
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    white-space: nowrap;
}

.service-info-side {
    display: none; /* Hidden by default, shown on larger screens */
}

.photo-service-info-container {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
}

.button {
  height: 50px;
  width: auto; /* Auto width */
  min-width: 160px; /* Minimum width for the button */
  padding: 0 20px; /* Add padding */
  border: none;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  text-decoration: none; /* Remove underline from link */
  display: inline-block; /* For proper sizing */
  color: transparent; /* Hide the sizing text */
}

.button:hover {
  box-shadow: .5px .5px 150px #252525;
}

.type1::after {
  content: attr(data-hover);
  height: 100%;
  width: 100%;
  background-color: #fff;
  color: #008080;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(0px) scale(1);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
  white-space: nowrap; /* Prevent text wrapping */
}

.type1::before {
  content: attr(data-text);
  height: 100%;
  width: 100%;
  background-color: #008080;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(50px);
  font-size: 1.0rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-in-out;
  white-space: nowrap; /* Prevent text wrapping */
}

.type1:hover::after {
  transform: translateY(-50px) scale(0) rotate(120deg);
}

.type1:hover::before {
  transform: translateY(0) scale(1);
}

/* --- Responsive Design --- */

/* Tablet Styles */
@media (max-width: 900px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        margin: 15px;
        padding: 15px;
    }

    .nav-btn span {
        padding: 14px 20px;
    }

    .select-all-btn {
        padding: 0.8em 2.5em;
        font-size: 14px;
    }

    .colorful-text {
        font-size: 18px;
    }
}

/* Mobile Styles */
@media (max-width: 600px) {
    .gallery-container {
        grid-template-columns: 1fr; /* Single column on mobile */
        margin: 10px;
        padding: 10px;
    }

    .nav-btn {
        font-size: 16px;
        min-width: 120px;
    }

    .nav-btn span {
        padding: 12px 18px;
    }

    .select-all-btn {
        font-size: 13px;
        padding: 0.7em 2em;
    }

    .like-button {
        height: 40px;
        width: 110px;
        bottom: 10px;
        right: 10px;
    }

    .like-icon {
        height: 24px;
        width: 24px;
    }

    .like-text, .like-count {
        font-size: 14px;
    }

    .service-info {
        font-size: 14px;
        padding: 8px 12px;
        bottom: 10px;
        right: 10px;
    }

    .terminal-loader {
        width: 10em;
        font-size: 0.9em;
    }
}

/* Desktop and larger screens */
@media (min-width: 1200px) {
    .service-info-side {
        display: block; /* Show side info on large screens */
        position: fixed;
        top: 100px;
        right: 20px;
        width: 250px;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 20px;
        border-radius: 10px;
        font-size: 16px;
        font-family: Arial, sans-serif;
    z-index: 2001;
  }
}

/* --- Popup Styles --- */

#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* From Uiverse.io by zanina-yassine */ 
.popup {
  position: relative;
  width: 320px;
  height: fit-content;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 13px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centering form items */
  padding: 20px;
  gap: 20px;
}

#popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}

/* From Uiverse.io by Pradeepsaranbishnoi */ 
:focus {
  outline: 0;
  border-color: #2260ff;
  box-shadow: 0 0 0 4px #b5c9fc;
}

.mydict div {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  justify-content: center;
}

.mydict input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.mydict input[type="radio"]:checked + span {
  box-shadow: 0 0 0 0.0625em #0043ed;
  background-color: #dee7ff;
  z-index: 1;
  color: #0043ed;
}

.mydict label span {
  display: block;
  cursor: pointer;
  background-color: #fff;
  padding: 0.375em .75em;
  position: relative;
  margin-left: .0625em;
  box-shadow: 0 0 0 0.0625em #b5bfd9;
  letter-spacing: .05em;
  color: #3e4963;
  text-align: center;
  transition: background-color .5s ease;
}

.mydict label:first-child span {
  border-radius: .375em 0 0 .375em;
}

.mydict label:last-child span {
  border-radius: 0 .375em .375em 0;
}

.popup .form p {
  color: black;
}

/* From Uiverse.io by niat786 */ 
.popup-nav-btn {
 border: none;
 color: #fff;
 background-image: linear-gradient(30deg, #0400ff, #4ce3f7);
 border-radius: 20px;
 background-size: 100% auto;
 font-family: inherit;
 font-size: 17px;
 padding: 0.6em 1.5em;
 cursor: pointer;
 text-decoration: none;
 margin: 5px;
 display: inline-block;
}

.popup-nav-btn:hover {
 background-position: right center;
 background-size: 200% auto;
 -webkit-animation: pulse 2s infinite;
 animation: pulse512 1.5s infinite;
}

@keyframes pulse512 {
 0% {
  box-shadow: 0 0 0 0 #05bada66;
 }

 70% {
  box-shadow: 0 0 0 10px rgb(218 103 68 / 0%);
 }

 100% {
  box-shadow: 0 0 0 0 rgb(218 103 68 / 0%);
 }
}

@keyframes blinkCursor {
  50% {
    border-right-color: transparent;
  }
}

@keyframes typeAndDelete {
  0%,
  10% {
    width: 0;
  }
  45%,
  55% {
    width: 10em;
  } /* adjust width based on content */
  90%,
  100% {
    width: 0;
  }
}

.terminal-loader {
  border: none;
  background-color: transparent;
  /* color is now set on individual elements */
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
  padding: 1.5em 1em;
  width: 12em;
  box-shadow: none;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.terminal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background-color: transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 0 0.4em;
  box-sizing: border-box;
}


.terminal-title {
  float: left;
  line-height: 1.5em;
  background: linear-gradient(to right, #ff8c00, #ffc837);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.terminal-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.2em solid #ff8c00; /* Cursor */
  animation: typeAndDelete 4s steps(11) infinite,
    blinkCursor 0.5s step-end infinite alternate;
  margin-top: 1.5em;
  background: linear-gradient(to right, #ff8c00, #ffc837);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}