/* ==================== CUSTOM CSS STYLES ==================== */

/* Hero gradient overlay */
.hero-gradient {
  background: linear-gradient(
    to bottom,
    rgba(251, 146, 60, 0.4),
    rgba(251, 146, 60, 0.3),
    rgba(251, 191, 36, 0.2)
  );
}

/* Text shadow for better readability on hero */
.nav-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Enhanced search bar shadow */
.search-shadow {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Mobile menu animation */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.mobile-menu.active {
  max-height: 500px;
}

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

/* Hero background image */
.hero-bg {
  background-image: url("/wiserent/assets/images/hom.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Property card hover effect */
.property-card img {
  transition: transform 0.3s ease;
}

.property-card:hover img {
  transform: scale(1.05);
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

.animate-fadeInUp-1 { animation: fadeInUp 0.6s ease-out 0s backwards; }
.animate-fadeInUp-2 { animation: fadeInUp 0.6s ease-out 0.2s backwards; }
.animate-fadeInUp-3 { animation: fadeInUp 0.6s ease-out 0.4s backwards; }
.animate-fadeIn { animation: fadeIn 0.8s ease-out; }

/* ==================== THEME VARIABLES ==================== */
:root {
  --color-primary: #4169e1;
  --color-secondary: #ffd700;
}

.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.text-primary { color: var(--color-primary); }

/* ==================== LOGIN DROPDOWN ==================== */
.mobile-menu { display: none; }
.mobile-menu.active { display: block; }

.login-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  z-index: 1000;
}
.login-dropdown.active { display: block; }

/* ==================== SIGNUP MODAL (FIXED) ==================== */

/* MODAL OVERLAY */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  overflow-y: auto;
  animation: fadeIn 0.3s ease;

  /* ALWAYS FLEX — DO NOT TOGGLE DISPLAY IN JS */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hidden by default */
  visibility: hidden;
  opacity: 0;
}

/* ACTIVE STATE */
.modal.active {
  visibility: visible;
  opacity: 1;
}

/* MODAL CONTENT */
.modal-content {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.3s ease;

  /* HARD CENTERING */
  margin: auto;
  box-sizing: border-box;
}

/* ==================== UPLOAD AREA ==================== */
.upload-area {
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: var(--color-primary);
  background: #f9fafb;
}

.upload-area.has-file {
  border-color: #10b981;
  background: #f0fdf4;
}

/* FILE PREVIEW */
.file-preview {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 14px;
}

.file-preview.active,
.file-preview[style*="flex"] {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* PASSWORD TOGGLE */
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6b7280;
}

.password-toggle:hover {
  color: var(--color-primary);
}




/* Add to your existing CSS */
.role-switcher {
  justify-content: center; /* Center the single button */
}

.role-btn[style*="display: none"] {
  display: none !important;
}



/* ==================== SUBSCRIPTION CAROUSEL ==================== */

/* Base card */
.carousel-card {
  position: absolute;
  width: 100%;
  max-width: 28rem;
  transition: transform 0.45s ease, opacity 0.45s ease;
  will-change: transform, opacity;
  z-index: 10;
}

/* Active (center) card */
.carousel-card.active {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 15;
}

/* Previous card (left) */
.carousel-card.prev {
  transform: translateX(-120%) scale(0.9);
  opacity: 0.6;
}

/* Next card (right) */
.carousel-card.next {
  transform: translateX(120%) scale(0.9);
  opacity: 0.6;
}

/* Fully hidden cards */
.carousel-card.hidden-card {
  opacity: 0;
  pointer-events: none;
}

/* Ensure arrows always clickable */
#prevBtn,
#nextBtn {
  z-index: 30;
  pointer-events: auto;
}




/* Add these animations to your existing CSS */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Contact unlock button pulse effect */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}