/* Custom styles for the property website - complements Tailwind */

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Navbar shadow on scroll */
.navbar-scrolled {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
}

/* Hero overlay gradient for better text readability */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.65) 0%,
    rgba(15, 23, 42, 0.35) 40%,
    rgba(15, 23, 42, 0.75) 100%
  );
}

/* Amenity card hover effect */
.amenity-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.amenity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Gallery image hover */
.gallery-img {
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), 
              box-shadow 0.3s ease;
  cursor: pointer;
}

.gallery-img:hover {
  transform: scale(1.03);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}

/* Lightbox modal */
#lightbox {
  animation: fadeIn 0.2s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox-img {
  max-height: 85vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

/* Form input focus styles */
.form-input {
  transition: all 0.2s ease;
}

.form-input:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

/* Spec card */
.spec-card {
  transition: transform 0.2s ease;
}

.spec-card:hover {
  transform: translateY(-2px);
}

/* Mobile menu animation */
#mobile-menu {
  transition: all 0.3s ease;
}

/* Map container */
#map {
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  z-index: 1;
}

/* Footer link hover */
.footer-link {
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #059669;
}

/* WhatsApp button pulse effect */
.whatsapp-btn {
  transition: all 0.3s ease;
}

.whatsapp-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 15px -3px rgb(16 185 129 / 0.3);
}

/* Success message */
.success-toast {
  animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), fadeOut 0.3s ease 3.5s forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Print styles - hide interactive elements when printing */
@media print {
  .no-print {
    display: none !important;
  }
}