/* Critical CSS for CLS optimization - Bartouchy */

/* Font loading optimization */
@font-face {
  font-family: 'Cairo';
  src: url('/fonts/Cairo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('/fonts/Cairo-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('/fonts/Cairo-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Layout stability classes */
.property-card {
  min-height: 280px;
  aspect-ratio: 1/1.2;
}

.property-image {
  height: 112px;
  width: 100%;
}

.property-content {
  min-height: 168px;
}

.section-container {
  min-height: 400px;
}

.why-choose-section {
  min-height: 500px;
}

.feature-card {
  min-height: 280px;
}

/* Skeleton loading optimization */
.skeleton-card {
  min-height: 280px;
  aspect-ratio: 1/1.2;
}

.skeleton-image {
  height: 112px;
}

.skeleton-content {
  min-height: 168px;
}

/* Grid stability */
.properties-grid {
  min-height: 320px;
}

.features-grid {
  min-height: 320px;
}

/* Header stability */
.section-header {
  min-height: 120px;
}

.badge-container {
  height: 32px;
}

/* Animation performance */
.hover-scale {
  transition: transform 0.3s ease;
  will-change: transform;
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Image container stability */
.image-container {
  position: relative;
  overflow: hidden;
}

.image-placeholder {
  position: absolute;
  inset: 0;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading states */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top: 4px solid #ea580c;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Prevent layout shift on dynamic content */
.dynamic-content {
  min-height: 1em;
}

/* RTL optimizations */
[dir="rtl"] {
  text-align: right;
  font-family: 'Cairo', 'Noto Sans Arabic', sans-serif;
}

[dir="ltr"] {
  text-align: left;
  font-family: 'Inter', 'Roboto', sans-serif;
}

/* Performance optimizations */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Container queries for responsive design */
@container (max-width: 640px) {
  .property-card {
    min-height: 240px;
  }
  
  .property-content {
    min-height: 128px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hover-scale {
    transition: none;
  }
  
  .loading-spinner {
    animation: none;
  }
}