/* From Uiverse.io by liyaxu123 */
.form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 100%; /* Adapting to full width for our layout */
}

.form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
}

.form-control input:focus,
.form-control input:valid {
  outline: 0;
  border-bottom-color: #ff0000; /* Changed lightblue to Brand Red */
}

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
  pointer-events: none;
}

.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  color: #fff;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
  color: #ff0000; /* Changed lightblue to Brand Red */
  transform: translateY(-30px);
}

/* --- GALLERY IMAGE SHADOWS --- */
.gallery-item img {
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.5);
  border-radius: 8px; /* Ensure they have rounded corners if not already */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item img:hover {
  transform: scale(1.02);
  box-shadow: 12px 12px 25px 0px rgba(0, 0, 0, 0.6); /* Slightly deeper on hover */
}

/* ================================
   SCROLL LOCK CORECT (iOS + Android)
   ================================ */
html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  height: 100dvh !important;
}

/* ================================
   HERO SECTION – STABIL PE MOBIL
   ================================ */
.hero {
  min-height: 80svh;
  background-attachment: fixed;
  padding-top: calc(clamp(72px, 10vh, 110px) + env(safe-area-inset-top));
  box-sizing: border-box;
}

/* ================================
   MOBILE OPTIMIZATION ≤ 768px
   ================================ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  .hero {
    min-height: 60svh;
    background-attachment: scroll !important;
    padding-top: calc(clamp(72px, 10vh, 110px) + env(safe-area-inset-top));
  }

  .card {
    width: 92% !important;
    max-width: 380px !important;
    box-sizing: border-box;
  }
}

/* ================================
   GRID ROBUST PENTRU TOATE MOBILE
   ================================ */
.gallery-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  box-sizing: border-box;
}

/* ================================
   FLEX ROWS – PREVIN OVERFLOW
   ================================ */
.buttons-row,
.cards-row,
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ================================
   TELEFOANE FOARTE MICI ≤ 360px
   ================================ */
@media (max-width: 360px) {
  .hero {
    padding-top: calc(84px + env(safe-area-inset-top));
  }

  .card,
  .btn3d,
  .tile3d {
    width: 100% !important;
  }

  .gallery-grid {
    gap: 6px !important;
  }
}

/* ================================
   ABOUT MODAL SPECIFIC SCROLL
   ================================ */
@media (max-width: 768px) {
  #about-modal .about-content {
    max-height: 50vh !important; /* Use viewport height for better scaling */
    overflow-y: auto !important; /* Enable vertical scroll */
    padding: 0 5px 0 10px !important; /* 10px Left, 5px Right, 0 Top/Bottom */
    width: 100%;
  }
}

/* Scrollbar Styling for About Modal */
#about-modal .about-content::-webkit-scrollbar {
  width: 8px;
}

#about-modal .about-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

#about-modal .about-content::-webkit-scrollbar-thumb {
  background: #ff0000; /* Brand Red */
  border-radius: 4px;
}

#about-modal .about-content::-webkit-scrollbar-thumb:hover {
  background: #cc0000;
}

@media (max-width: 768px) {
  #about-modal .about-content {
    max-height: 60vh !important; /* Consistent mobile height */
  }
}