/* Custom styles */
.filter-btn {
    @apply px-6 py-2 rounded-full border border-gray-300 text-gray-700 hover:bg-blue-600 hover:text-white transition-all duration-300;
}

.filter-btn.active {
    @apply bg-blue-600 text-white border-blue-600;
}

.property-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-all duration-300 cursor-pointer;
}

.property-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.property-image {
    @apply w-full h-48 object-cover;
}

.property-price {
    @apply text-2xl font-bold text-blue-600;
}

.property-features {
    @apply flex items-center space-x-4 text-gray-600 text-sm;
}

.feature-item {
    @apply flex items-center space-x-1;
}

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

/* Loading animation */
.loading {
    @apply animate-pulse;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .property-card {
        transform: none;
    }
    
    .property-card:hover {
        transform: none;
    }
}

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

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Contact form focus styles */
.form-input:focus {
    @apply ring-2 ring-blue-500 ring-opacity-50;
}

/* Button hover effects */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors duration-300;
}

.btn-secondary {
    @apply bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-colors duration-300;
}

/* Modal animations */
.modal-enter {
    animation: modalEnter 0.3s ease-out;
}

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Property status badges */
.status-badge {
    @apply px-3 py-1 rounded-full text-xs font-semibold;
}

.status-available {
    @apply bg-green-100 text-green-800;
}

.status-sold {
    @apply bg-red-100 text-red-800;
}

.status-reserved {
    @apply bg-yellow-100 text-yellow-800;
}

/* Image gallery styles */
.gallery-thumbnail {
    @apply w-20 h-20 object-cover rounded-lg cursor-pointer opacity-70 hover:opacity-100 transition-opacity;
}

.gallery-thumbnail.active {
    @apply opacity-100 ring-2 ring-blue-500;
}
/* ===== Button 17 – Google style ===== */
.button-17 {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border-radius: 24px;
  border-style: none;
  box-shadow:
    rgba(0, 0, 0, .2) 0 3px 5px -1px,
    rgba(0, 0, 0, .14) 0 6px 10px 0,
    rgba(0, 0, 0, .12) 0 1px 18px 0;
  box-sizing: border-box;
  color: #3c4043;
  cursor: pointer;
  display: inline-flex;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  justify-content: center;
  letter-spacing: .25px;
  padding: 2px 24px;
  text-align: center;
  transition:
    box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
    transform 270ms cubic-bezier(0, 0, .2, 1);
  user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
}

.button-17:hover {
  background: #F6F9FE;
  color: #174ea6;
}

.button-17:active {
  transform: scale(0.98);
  box-shadow:
    rgba(60, 64, 67, .3) 0 4px 4px 0,
    rgba(60, 64, 67, .15) 0 8px 12px 6px;
}

.button-17:focus {
  outline: none;
  border: 2px solid #4285f4;
}

.button-17:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.hero-static {
    position: relative;
    overflow: hidden;               /* IMPORTANT */
    border-radius: 10%;            /* arrondi global */
    margin: 0 20px;                 /* optionnel : effet carte */
}

/* image floutée */
.hero-bg {
    position: absolute;
    inset: 0;
    background: url("images/static.png") center / cover no-repeat;
    filter: blur(18px);
    transform: scale(1.1);
    z-index: 1;
    border-radius: 32px;            /* même rayon */
}

/* voile sombre */
.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 32px;            /* même rayon */
}