/* ===== MAIN CSS - Import all component styles ===== */

/* Import global styles first */

/* ===== GLOBAL STYLES - Core variables and base styles ===== */

:root {
  /* Color System */
  --primary-blue: #00aeff;
  --dark-blue: #004274;
  --darker-blue: #00335a;
  --hero-overlay: #002E51;
  --light-gray: #f7f8f9;
  --text-gray: #7a7a7a;
  --border-gray: #dce0e0;
  --success-green: #77c720;
  
  /* Layout System */
  --border-radius: 4px;
  --header-height: 91px;
  --header-padding: 1rem;
  --header-z-index: 1000;
  
  /* Spacing System */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Typography System */
  --font-family-primary: 'Montserrat', Arial, sans-serif;
  --font-family-secondary: 'Noto Serif JP', serif;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 28px;
  
  /* Transition System */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-cubic: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Shadow System */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ===== GLOBAL RESET & BASE STYLES ===== */

* {
  box-sizing: border-box;
}
span.btn.btn-warning.btn-sm:empty {
    display: none;
}

body {
  font-family: var(--font-family-primary) !important;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f7f8f9;
  font-weight: 400;
}

/* ===== LAYOUT WRAPPER STYLES ===== */

.layout-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
}

/* Home page specific styles */

.home-page {
  position: relative;
}

/* ===== TYPOGRAPHY SYSTEM ===== */

/* Apply Roboto font to all text elements */

h1, h2, h3, h4, h5, h6,
p, span, div, a, button, input, textarea, select, label,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.lead, .text-muted, .small, .fw-bold, .fw-medium, .fw-light {
  font-family: var(--font-family-primary) !important;
}

/* Font weight classes */

.fw-light { font-weight: 300 !important; }

.fw-normal { font-weight: 400 !important; }

.fw-medium { font-weight: 500 !important; }

.fw-bold { font-weight: 700 !important; }

/* ===== GLOBAL BORDER RADIUS OVERRIDE ===== */

.btn,
.form-control,
.form-select,
.card,
.badge,
.nav-tabs .nav-link,
.input-group .form-control,
.input-group .btn {
  border-radius: var(--border-radius) !important;
}

/* ===== FORM STANDARDIZATION ===== */

/* Standardized form inputs */

.form-control,
.form-select {
  border: 1px solid #dce0e0 !important;
  border-radius: 4px !important;
  height: 42px;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-family-primary) !important;
  font-size: 14px;
  transition: all var(--transition-normal);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25) !important;
  outline: none;
}

/* Search form specific styling */

.search-filters .form-control,
.search-filters .form-select {
  border: 1px solid #dce0e0 !important;
  border-radius: 4px !important;
  height: 42px;
  padding: 0.5rem 0.75rem;
}

/* ===== PAGINATION DESIGN ===== */

/* Modern pagination styling */

.pagination-modern {
  gap: 0.5rem;
}

.pagination-modern .page-item {
  margin: 0;
}

.pagination-modern .page-link {
  color: var(--primary-blue);
  border: 1px solid #e9ecef;
  border-radius: 6px !important;
  padding: 0.75rem 1rem;
  font-weight: 500;
  font-size: 14px;
  transition: all var(--transition-normal);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
}

.pagination-modern .page-link:hover {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3);
}

.pagination-modern .page-item.active .page-link {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3);
}

.pagination-modern .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #f8f9fa;
  border-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.6;
}

.pagination-modern .page-item.disabled .page-link:hover {
  transform: none;
  box-shadow: none;
  background-color: #f8f9fa;
  border-color: #e9ecef;
  color: #6c757d;
}

/* Previous/Next button styling */

.page-link-prev,
.page-link-next {
  padding: 0.75rem 1.25rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
}

/* ===== UTILITY CLASSES ===== */

/* Color Utilities */

.text-primary-custom {
  color: var(--primary-blue) !important;
}

.text-gray {
  color: var(--text-gray) !important;
}

.bg-light-gray {
  background-color: var(--light-gray) !important;
}

.border-gray {
  border-color: var(--border-gray) !important;
}

/* Spacing Utilities */

.gap-xs { gap: var(--spacing-xs) !important; }

.gap-sm { gap: var(--spacing-sm) !important; }

.gap-md { gap: var(--spacing-md) !important; }

.gap-lg { gap: var(--spacing-lg) !important; }

.gap-xl { gap: var(--spacing-xl) !important; }

/* Animation Utilities */

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

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

.fade-in {
  animation: fadeIn var(--transition-slow) ease-in;
}

.slide-up {
  animation: slideUp 0.6s ease-out;
}

/* ===== GLOBAL ACCESSIBILITY ===== */

/* Enhanced focus states for accessibility */

.btn:focus,
.form-control:focus,
.form-select:focus,
.nav-link:focus,
.navbar-brand:focus,
.navbar-toggler:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Smooth scroll behavior */

html {
  scroll-behavior: smooth;
}

/* Icon styling for consistency */

svg {
  vertical-align: middle;
}

/* Lazy loading optimization */

img[loading="lazy"] {
  opacity: 0;
  transition: opacity var(--transition-normal);
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Loading states */

.loading {
  opacity: 0.7;
  pointer-events: none;
}
/* DJ Prime dropdown styling */
.djprime-menu{
  min-width: 340px;      /* similar width to screenshot */
  border: 0;
  background: transparent; /* we draw the card ourselves */
}
.djprime-card{
  background: #fff;     /* dark slate */
  color: #1f2733;
  border-radius: 16px;
  padding: 16px 18px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.djprime-title{ font-size: 18px; line-height: 1.1; }
.djprime-sub{ font-size: 12.5px; color: #5e5e5e; }
.djprime-features span{ font-size: 14px; color: #5e5e5e; }
.djprime-join{
  background: #00AEFF;      /* red CTA */
  color: #fff;
  border: none;
  border-radius: 999px;      /* pill */
  font-weight: 700;
  padding: 10px 16px;
}
.djprime-join:hover{ background:#0087C6; color:#fff; }

/* make sure dropdown renders above header and isn't clipped */
.header-section, .navbar, .container { overflow: visible; }
.navbar .dropdown-menu { z-index: 1080; }
/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Mobile-first responsive design variables */

:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}

/* ===== RESPONSIVE FORM ADJUSTMENTS ===== */

/* Mobile form adjustments */

@media (max-width: 767px) {
  .form-control,
  .form-select {
    height: 40px;
    font-size: 13px;
  }
  
  .search-filters .form-control,
  .search-filters .form-select {
    height: 40px;
    margin-bottom: 0.75rem;
  }
  
  .pagination-modern .page-link {
    padding: 0.5rem 0.75rem;
    min-width: 40px;
    height: 40px;
    font-size: 13px;
  }
  
  .page-link-prev,
  .page-link-next {
    padding: 0.5rem 1rem !important;
    font-size: 11px;
  }
}

/* Small mobile adjustments */

@media (max-width: 575px) {
  .form-control,
  .form-select {
    height: 38px;
    font-size: 12px;
    padding: 0.375rem 0.5rem;
  }
  
  .pagination-modern {
    gap: 0.25rem;
  }
  
  .pagination-modern .page-link {
    padding: 0.375rem 0.5rem;
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }
  
  .page-link-prev,
  .page-link-next {
    padding: 0.375rem 0.75rem !important;
    font-size: 10px;
  }
}

/* ===== ACCESSIBILITY & MOTION PREFERENCES ===== */

/* High contrast mode support */

@media (prefers-contrast: high) {
  :root {
    --primary-blue: #0066cc;
    --text-gray: #333;
    --border-gray: #666;
  }
  
  .form-control,
  .form-select {
    border-width: 2px !important;
  }
  
  .pagination-modern .page-link {
    border-width: 2px;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .pagination-modern .page-link:hover {
    transform: none !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .header-section,
  .navbar-toggler,
  .btn,
  .custom-slider .slider-controls,
  .pagination {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    font-family: var(--font-family-primary) !important;
  }
  
  .hero-section {
    background: none !important;
    color: #000 !important;
  }
}

/* Import component styles */

/* ===== BUTTON COMPONENTS ===== */

/* Base Button Styles */

.btn {
  height: 42px;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-transform: uppercase;
  border-radius: var(--border-radius) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-md);
  transition: all var(--transition-normal);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary Button */

.btn-primary-custom {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  height: 42px;
}

.btn-primary-custom:hover:not(:disabled) {
  background-color: #0090d9;
  border-color: #0090d9;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary-custom:active {
  transform: translateY(0);
}

/* Outline Primary Button */

.btn-outline-primary-custom {
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  background-color: transparent;
  height: 42px;
}

.btn-outline-primary-custom:hover:not(:disabled) {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Login Button - Icon only with circular design */

.btn-login {
  width: 42px;
  height: 42px;
  border-radius: 90px !important;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  background: transparent;
  border: 1px solid var(--primary-blue);
}

.btn-login:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
  border-color: var(--primary-blue);
}

.btn-login:active {
  transform: scale(0.98);
}

/* Create Listing Button with Plus Icon - REDUCED SPACING */

.btn-create-listing {
  height: 42px;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  color: white;
  transition: all var(--transition-normal);
  gap: 0.25rem; /* Reduced from var(--spacing-xs) for tighter spacing */
}

.header-trasperent .btn-create-listing:hover:not(:disabled) {
  border-color: #fff !important;
}

.btn-create-listing:hover:not(:disabled) {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-create-listing:active {
  transform: translateY(0);
}

/* Button Size Variations */

.btn-sm {
  height: 36px;
  font-size: var(--font-size-xs);
  padding: 0 var(--spacing-sm);
}

.btn-lg {
  height: 48px;
  font-size: var(--font-size-md);
  padding: 0 var(--spacing-lg);
}

/* Button Loading State */

.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ===== RESPONSIVE BUTTON ADJUSTMENTS ===== */

/* Tablet adjustments */

@media (max-width: 991px) {
  .btn-create-listing {
    gap: 0.2rem; /* Even tighter on tablet */
  }
}

/* Mobile adjustments */

@media (max-width: 767px) {
  .btn-create-listing {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    height: 32px;
    gap: 0.15rem; /* Very tight spacing on mobile */
  }

  .btn-login {
    width: 36px;
    height: 36px;
  }
}

/* Small mobile adjustments */

@media (max-width: 575px) {
  .btn-create-listing {
    font-size: 9px;
    padding: calc(var(--spacing-xs) * 0.8) calc(var(--spacing-sm) * 0.8);
    height: 28px;
    gap: 0.1rem; /* Minimal spacing on small mobile */
  }

  .btn-login {
    width: 32px;
    height: 32px;
  }
}

/* ===== BUTTON GROUP STYLES ===== */

.btn-group .btn:not(:last-child) {
  border-right: none;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.btn-group .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

.btn:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .btn-outline-primary-custom {
    border-width: 2px;
  }
  
  .btn-create-listing {
    border-width: 2px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-login,
  .btn-create-listing {
    transition: none !important;
  }
  
  .btn:hover,
  .btn-login:hover,
  .btn-create-listing:hover {
    transform: none !important;
  }
}

/* ===== HEADER COMPONENT STYLES ===== */

/* Header Container - Different styles for home vs other pages */

.header-trasperent .header-section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--header-z-index);
  background: transparent;
  min-height: var(--header-height);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-cubic);
  box-shadow: none;
}

.header-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--header-z-index);
  background: white;
  min-height: var(--header-height);
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-cubic);
}

.header-section .site-logo {
    width: 182px;
    background: transparent;
}

/* Text colors for different page types */

.header-trasperent .header-section .navbar-brand,
.header-trasperent .header-section .nav-link,
.header-trasperent .header-section .phone-number {
  color: white !important;
}

.header-trasperent .header-section .navbar-brand:hover {
  color: var(--primary-blue) !important;
}

.navbar-brand:hover {
  color: var(--primary-blue) !important;
}

.header-trasperent  .header-section .nav-link:hover {
  color: #fff !important;
  background-color: rgba(0, 174, 255, 0.1);
}

/* Button styles for different page types */

.header-trasperent .btn-login {
  color: white;
  border-color: #fff;
}

.btn-login {
  color: #333;
  border-color: var(--primary-blue);
}
.header-trasperent .btn-login svg{
    stroke: #ffffff;
}
.btn-login svg{
    stroke: var(--primary-blue);
}

.header-trasperent .btn-login:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-login:hover {
  background-color: rgba(0, 174, 255, 0.1);
  border-color: rgba(0, 174, 255, 0.2);
}

.header-trasperent .btn-create-listing {
  border-color: rgba(255, 255, 255, 0.8);
  color: white;
}

.btn-create-listing {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.header-trasperent .btn-create-listing:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: white;
}

.btn-create-listing:hover {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
}

/* Mobile menu styles for different page types */

.header-trasperent .navbar-toggler {
    border-color: rgb(255 255 255);
    width: 42px;
    height: 42px;
    border-radius: 999px;
}
.header-trasperent .navbar-toggler:hover {
    border-color: #fff;
}
.header-trasperent .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.header-other-pages .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgb(0 174 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

/* Navbar Structure */

.header-section .navbar {
  padding: var(--header-padding) 0;
  min-height: var(--header-height);
}

.header-section .container-fluid {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

/* Header Row Alignment */

.header-section .row {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-section .row > [class*="col-"] {
  padding: 0;
}

/* ===== LOGO STYLING ===== */

.navbar-brand {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-xxxl);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.5px;
  transition: all var(--transition-normal);
  margin: 0;
  padding: 0;
  line-height: 1;
  gap: 0.375rem;
}

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

.navbar-brand svg {
  color: var(--primary-blue);
  transition: all var(--transition-normal);
}

.navbar-brand:hover svg {
  transform: scale(1.1);
}

/* ===== NAVIGATION MENU ===== */

/* Desktop Navigation */

.header-section .navbar-nav {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-section .navbar-nav.flex-row {
  flex-direction: row;
  gap: var(--spacing-sm);
}

.header-section .nav-item {
  margin: 0;
}

.header-section .nav-link {
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  padding: 0.75rem var(--spacing-md);
  transition: all var(--transition-normal);
  text-decoration: none;
  border-radius: var(--border-radius);
  color: #000;
}
.header-section .nav-link:hover{
    color: var(--primary-blue);
}

/* ===== MOBILE NAVIGATION ===== */

/* Mobile/Tablet hamburger menu button */

.navbar-toggler {
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  transition: all var(--transition-normal);
  background: transparent;
}

.navbar-toggler:hover {
  border-color: #00aeff;
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
  outline: none;
}

.navbar-toggler-icon {
  width: 1.2em;
  height: 1.2em;
}

/* Mobile Navigation Collapse */

.header-section .navbar-collapse {
  background: rgba(0, 46, 81, 0.95);
  border-radius: var(--border-radius);
  margin-top: var(--spacing-md);
  padding: 0 var(--spacing-md) var(--spacing-md);
}

/* CRITICAL: Hide mobile menu on desktop */

@media (min-width: 992px) {
  .header-section .navbar-collapse {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  .navbar-toggler {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Mobile Navigation Links */

.mobile-nav-link {
  color: white !important;
  font-weight: 500;
  font-size: var(--font-size-md);
  text-transform: uppercase;
  padding: 0.75rem 0;
  transition: all var(--transition-normal);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
}

.mobile-nav-link:hover {
  color: var(--primary-blue) !important;
  padding-left: var(--spacing-md);
  background-color: rgba(255, 255, 255, 0.05);
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

/* ===== HEADER ACTIONS ===== */

/* Header actions container spacing - Reduced gaps */

.header-section .d-flex.gap-3 {
  gap: 0.75rem !important;
}

.header-section .d-flex.gap-2 {
  gap: 0.5rem !important;
}

/* Phone number styling */

.phone-number {
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* Login Button - Icon only with circular design */

.btn-login {
  width: 42px;
  height: 42px;
  border-radius: 90px !important;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  background: transparent;
  border: 1px solid var(--primary-blue);
}

.btn-login:active {
  transform: scale(0.98);
}

/* Create Listing Button with Plus Icon - REDUCED SPACING */

.btn-create-listing {
  height: 42px;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-transform: uppercase;
  background: transparent;
  transition: all var(--transition-normal);
  gap: 0.25rem;
}

.btn-create-listing:active {
  transform: translateY(0);
}

/* ===== LAYOUT ADJUSTMENTS FOR DIFFERENT PAGE TYPES ===== */

/* Home page content - No top padding since header overlaps */

.home-page-content {
  padding-top: 0;
}

/* Other pages content - Add padding to account for fixed header */

.other-page-content {
  padding-top: var(--header-height);
}

/* ===== RESPONSIVE HEADER ADJUSTMENTS ===== */

/* Large Desktop (1200px+) */

@media (min-width: 1200px) {
  .header-section .container-fluid {
    max-width: 1200px;
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
  
  /* Force hide mobile elements */
  .navbar-toggler,
  .header-section .navbar-collapse {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Desktop (992px to 1199px) */

@media (min-width: 992px) and (max-width: 1199px) {
  .header-section .container-fluid {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
  
  .navbar-brand {
    font-size: var(--font-size-xxl);
    gap: 0.3rem;
  }
  
  /* Force hide mobile elements */
  .navbar-toggler,
  .header-section .navbar-collapse {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Tablet (768px to 991px) */

@media (max-width: 991px) {
  .navbar-brand {
    font-size: 22px;
    gap: 0.3rem;
  }

  .header-section .d-flex.gap-3 {
    gap: 0.5rem !important;
  }

  /* Mobile navigation adjustments for tablet */
  .header-section .navbar-collapse {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(0, 46, 81, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .mobile-nav-link {
    font-size: 13px;
    padding: 0.875rem 0;
  }

  /* Adjust content padding for tablet */
  .other-page-content {
    padding-top: 70px;
  }

  .header-other-pages .navbar-toggler {
    border-color: rgb(0 174 255);
      width: 42px;
      height: 42px;
      border-radius: 999px;
  }
}

/* Mobile (768px and below) */

@media (max-width: 767px) {
  :root {
    --header-height: 70px;
    --header-padding: 0.75rem;
  }
  
  .header-section {
    min-height: var(--header-height);
  }
  
  .header-section .navbar {
    min-height: var(--header-height);
  }
  
  .navbar-brand {
    font-size: 20px;
    gap: 0.25rem;
  }

  .header-section .container-fluid {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .header-section .d-flex.gap-3 {
    gap: 0.375rem !important;
  }

  .header-section .d-flex.gap-2 {
    gap: 0.25rem !important;
  }

  /* Mobile navigation adjustments */
  .header-section .navbar-collapse {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 46, 81, 0.98);
  }

  .mobile-nav-link {
    font-size: var(--font-size-sm);
    padding: 0.75rem 0;
  }

  .navbar-toggler {
    padding: 0.375rem;
  }

  .navbar-toggler-icon {
    width: 1em;
    height: 1em;
  }

  /* Adjust content padding for mobile */
  .other-page-content {
    padding-top: 70px;
  }
}

/* Small Mobile (576px and below) */

@media (max-width: 575px) {
  .navbar-brand {
    font-size: 18px;
    gap: 0.2rem;
  }

  .header-section .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .header-section .d-flex.gap-3 {
    gap: 0.25rem !important;
  }

  .mobile-nav-link {
    font-size: 11px;
    padding: 0.625rem 0;
  }

  .navbar-toggler {
    padding: var(--spacing-xs);
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus states */

.navbar-brand:focus,
.nav-link:focus,
.mobile-nav-link:focus,
.navbar-toggler:focus {
  outline: 0px solid var(--primary-blue);
  outline-offset: 0px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .header-other-pages .header-section {
    background: white;
    border-bottom: 2px solid #333;
  }
  
  .nav-link:hover,
  .mobile-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.8);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .header-section,
  .navbar-brand,
  .nav-link,
  .mobile-nav-link,
  .navbar-toggler {
    transition: none !important;
  }
  
  .navbar-brand:hover,
  .nav-link:hover,
  .mobile-nav-link:hover {
    transform: none !important;
  }
}

/* ===== GLOBAL CLASS ===== */
.w-fit {
  width: fit-content !important;
}

/* ===== FORM COMPONENTS ===== */

/* Base Form Controls */

.form-control,
.form-select {
  height: 42px;
  border-radius: var(--border-radius) !important;
  border: 2px solid var(--border-gray);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  padding: 0.5rem 0.75rem;
  transition: all var(--transition-normal);
  background-color: white;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
  outline: none;
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--light-gray);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Form Labels */

.form-label {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: #333;
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Form Validation States */

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--success-green);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--success-green);
  box-shadow: 0 0 0 0.2rem rgba(119, 199, 32, 0.25);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #dc3545;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Validation Feedback */

.valid-feedback {
  color: var(--success-green);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

.invalid-feedback {
  color: #dc3545;
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-xs);
}

/* Form Check (Checkboxes & Radio) */

.form-check {
  margin-bottom: var(--spacing-md);
}

.form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.125em;
  border: 2px solid var(--border-gray);
  border-radius: var(--spacing-xs);
  transition: all var(--transition-normal);
}

.form-check-input:checked {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.form-check-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
  outline: none;
}

.form-check-label {
  font-size: var(--font-size-md);
  color: #333;
  margin-left: var(--spacing-sm);
  cursor: pointer;
}

/* Input Groups */

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none;
}

.input-group .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group .btn:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Form Floating Labels */

.form-floating {
  position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Search Form Specific Styling */

.search-form .form-control,
.search-form .form-select {
  border-radius: var(--border-radius) !important;
  height: 48px;
  font-size: var(--font-size-md);
}

.search-form .form-label {
  font-weight: 700;
  font-size: var(--font-size-xs);
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Form Row Spacing */

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

/* Textarea Specific */

.form-control[type="textarea"],
textarea.form-control {
  height: auto;
  min-height: 100px;
  resize: vertical;
}

/* File Input */

.form-control[type="file"] {
  padding: 0.375rem 0.75rem;
  height: auto;
}

/* Range Input */

.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  appearance: none;
}

.form-range::-webkit-slider-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--light-gray);
  border-color: transparent;
  border-radius: 1rem;
}

.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: var(--primary-blue);
  border: 0;
  border-radius: 1rem;
  cursor: pointer;
  appearance: none;
}

/* ===== RESPONSIVE FORM ADJUSTMENTS ===== */

/* Mobile adjustments */

@media (max-width: 767px) {
  .form-control,
  .form-select {
    height: 40px;
    font-size: var(--font-size-sm);
  }
  
  .search-form .form-control,
  .search-form .form-select {
    height: 44px;
  }
  
  .form-floating > .form-control,
  .form-floating > .form-select {
    height: calc(3rem + 2px);
  }
}

/* Small mobile adjustments */

@media (max-width: 575px) {
  .form-control,
  .form-select {
    height: 38px;
    font-size: var(--font-size-sm);
    padding: 0.375rem 0.5rem;
  }
  
  .form-label {
    font-size: var(--font-size-xs);
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus visible for better keyboard navigation */

.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .form-control,
  .form-select {
    border-width: 2px;
    border-color: #333;
  }
  
  .form-control:focus,
  .form-select:focus {
    border-color: #000;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .form-control,
  .form-select,
  .form-check-input,
  .form-floating > label {
    transition: none !important;
  }
}

/* ===== CARD COMPONENTS ===== */

/* Base Card Styles */

.card {
  border-radius: var(--border-radius) !important;
  border: none;
  background-color: white;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* REMOVE hover effect for search form cards */

.search-form .card:hover {
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
}

/* Card Header */

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--border-gray);
  padding: var(--spacing-lg);
  font-weight: 600;
}

.card-header:first-child {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Card Body */

.card-body {
  padding: var(--spacing-lg);
}

/* Card Footer */

.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--border-gray);
  padding: var(--spacing-lg);
}

.card-footer:last-child {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* Card Title */

.card-title {
  margin-bottom: var(--spacing-md);
  font-weight: 600;
  color: #333;
}

.card-subtitle {
  margin-bottom: var(--spacing-sm);
  color: var(--text-gray);
  font-weight: 400;
}

/* Card Text */

.card-text {
  color: #666;
  line-height: 1.6;
}

.card-text:last-child {
  margin-bottom: 0;
}

/* ===== PROPERTY CARD SPECIFIC STYLES ===== */

.property-card {
  border-radius: var(--border-radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  background: white;
}

.property-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

/* Property Image Container */

.property-image {
  height: 305px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.property-overlay {
  background: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.75));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Property Badges */

.badge {
  border-radius: var(--border-radius) !important;
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: var(--spacing-xs) 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-featured {
  background-color: var(--success-green) !important;
  color: white;
}

.badge-rent {
  background-color: rgba(0, 0, 0, 0.65) !important;
  color: white;
}

.badge-sale {
  background-color: var(--primary-blue) !important;
  color: white;
}

/* ===== CITY CARD SPECIFIC STYLES ===== */

.city-card {
  height: 339px;
  border-radius: var(--border-radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
  cursor: pointer;
}

.city-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.city-image {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: var(--border-radius);
}

.city-overlay {
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--border-radius);
  transition: all var(--transition-normal);
}

.city-card:hover .city-overlay {
  background: rgba(0, 0, 0, 0.4);
}

/* ===== TESTIMONIAL CARD SPECIFIC STYLES ===== */

.testimonial-card {
  background-color: #edf9ff;
  border: none;
  padding: var(--spacing-xxl);
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.testimonial-card .card-body {
  padding: 0;
}

/* ===== CARD VARIATIONS ===== */

/* Bordered Card */

.card-bordered {
  border: 1px solid var(--border-gray);
}

/* Shadow Variations */

.card-shadow-none {
  box-shadow: none !important;
}

.card-shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.card-shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

.card-shadow-xl {
  box-shadow: var(--shadow-xl) !important;
}

/* Card with Image Top */

.card-img-top {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  width: 100%;
  height: auto !important;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* Card Groups */

.card-group .card {
  border-radius: 0;
}

.card-group .card:first-child {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.card-group .card:last-child {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

/* ===== RESPONSIVE CARD ADJUSTMENTS ===== */

/* Tablet adjustments */

@media (max-width: 991px) {

  .city-card {
    height: 300px;
  }
  
  .testimonial-card {
    padding: var(--spacing-xl);
  }
}

/* Mobile adjustments */

@media (max-width: 767px) {
  .city-card {
    height: 250px;
  }
  
  .card-body {
    padding: var(--spacing-md);
  }
  
  .card-header,
  .card-footer {
    padding: var(--spacing-md);
  }
  
  .testimonial-card {
    padding: var(--spacing-lg);
  }
}

/* Small mobile adjustments */

@media (max-width: 575px) {

  .city-card {
    height: 220px;
  }
  
  .card-body {
    padding: var(--spacing-sm);
  }
  
  .card-header,
  .card-footer {
    padding: var(--spacing-sm);
  }
  
  .testimonial-card {
    padding: var(--spacing-md);
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus states for interactive cards */

.property-card:focus,
.city-card:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .card {
    border: 1px solid #333;
  }
  
  .card-header,
  .card-footer {
    border-color: #333;
  }
  
  .property-overlay,
  .city-overlay {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .card,
  .property-card,
  .city-card,
  .testimonial-card {
    transition: none !important;
  }
  
  .card:hover,
  .property-card:hover,
  .city-card:hover,
  .testimonial-card:hover {
    transform: none !important;
  }
}

/* ===== PROFESSIONAL FOOTER STYLES ===== */

/* Footer Separator */

.footer-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0e0e0 20%, #e0e0e0 80%, transparent);
  margin: 0;
}

/* Main Footer Container */

.site-footer {
  background: linear-gradient(135deg, var(--dark-blue) 0%, var(--darker-blue) 100%);
  color: white;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding-top: 0;
}

/* Footer Main Section */

.footer-main {
  padding: var(--spacing-xxl) 0;
  position: relative;
  z-index: 1;
}

/* Footer Sections */

.footer-section {
  height: 100%;
}

/* Footer Brand/Logo */

.footer-brand {
  margin-bottom: var(--spacing-lg);
}

.footer-logo-text {
  font-family: var(--font-family-primary);
  font-size: 1.75rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
}

/* Footer Titles */

.footer-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  margin-bottom: var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--primary-blue);
  border-radius: 1px;
}

.footer-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Footer Description */

.footer-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
  font-size: 0.95rem;
}

/* Footer Navigation */

.footer-nav {
  margin-bottom: var(--spacing-lg);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: var(--spacing-sm);
}

.footer-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  transition: all var(--transition-normal);
  padding: 0.25rem 0;
}

.footer-link:hover {
  color: var(--primary-blue);
  transform: translateX(5px);
  text-decoration: none;
}

.footer-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Quick Links Tabs */
.quick-links-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--spacing-md);
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.quick-link-tab {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-link-tab:hover {
  color: rgba(255, 255, 255, 0.9);
}

.quick-link-tab.active {
  color: white;
}

.quick-link-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-blue);
}

/* Quick Links Content */
.quick-links-content {
  margin-top: var(--spacing-md);
}

.quick-links-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.quick-links-columns::-webkit-scrollbar {
  width: 6px;
}

.quick-links-columns::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.quick-links-columns::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.quick-links-columns::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.quick-links-column {
  min-width: 0;
}

.quick-links-group-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-links-column .footer-nav {
  margin-bottom: 0;
}

.quick-links-column .footer-links li {
  margin-bottom: 0.5rem;
}

.quick-links-column .footer-link {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-links-column .footer-link:hover {
  color: var(--primary-blue);
  transform: translateX(3px);
}

/* Responsive Styles for Quick Links */
@media (max-width: 992px) {
  .quick-links-columns {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    max-height: 350px;
  }
  
  .quick-link-tab {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .quick-links-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    max-height: 300px;
  }
  
  .quick-links-group-title {
    font-size: 0.8rem;
  }
  
  .quick-links-column .footer-link {
    font-size: 0.8rem;
  }
  
  .quick-link-tab {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .quick-links-columns {
    grid-template-columns: 1fr;
    max-height: 250px;
  }
  
  .quick-links-tabs {
    margin-bottom: var(--spacing-sm);
  }
}

/* Home Page Quick Links Section */
.quick-links-home-section {
  margin: 0;
  padding: 4rem 0;
  background-color: #ffffff;
}

.quick-links-card-home {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quick-links-card-home:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.quick-links-card-header {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 2px solid #f7f8f9;
}

.quick-links-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.quick-links-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.quick-links-icon-agriculture {
  background: #1e7d32;
}

.quick-links-icon-na {
  background: #f39c12;
}

.quick-links-icon-commercial {
  background: #3498db;
}

.quick-links-card-body {
  padding: 1rem 1.5rem 1.5rem;
  flex: 1;
  overflow-y: auto;
  max-height: 450px;
}

.quick-links-card-body::-webkit-scrollbar {
  width: 6px;
}

.quick-links-card-body::-webkit-scrollbar-track {
  background: #f7f8f9;
  border-radius: 3px;
}

.quick-links-card-body::-webkit-scrollbar-thumb {
  background: #dce0e0;
  border-radius: 3px;
}

.quick-links-card-body::-webkit-scrollbar-thumb:hover {
  background: #bdc3c7;
}

.quick-links-nav-home {
  margin: 0;
}

.quick-links-list-home {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.quick-links-list-home li {
  margin-bottom: 0.5rem;
  list-style: none !important;
}

.quick-link-item-home {
  color: #7a7a7a;
  text-decoration: none !important;
  font-size: 0.9rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  transition: all var(--transition-normal);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  line-height: 1.5;
}

.quick-link-item-home:link,
.quick-link-item-home:visited,
.quick-link-item-home:active {
  text-decoration: none !important;
}

.quick-link-item-home svg {
  opacity: 0;
  transform: translateX(-5px);
  transition: all var(--transition-normal);
  color: var(--primary-blue);
}

.quick-link-item-home:hover {
  color: var(--primary-blue);
  background-color: #f7f8f9;
  text-decoration: none !important;
  transform: translateX(3px);
}

.quick-link-item-home:hover svg {
  opacity: 1;
  transform: translateX(0);
}

.quick-link-item-home:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.quick-link-item-home span {
  flex: 1;
}

/* Responsive Styles for Home Quick Links */
@media (max-width: 992px) {
  .quick-links-home-section {
    padding: 3rem 0;
  }
  
  .quick-links-card-body {
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  .quick-links-home-section {
    padding: 2.5rem 0;
  }
  
  .quick-links-card-header {
    padding: 1.25rem 1.25rem 0.75rem;
  }
  
  .quick-links-card-body {
    padding: 0.75rem 1.25rem 1.25rem;
    max-height: 350px;
  }
  
  .quick-links-card-title {
    font-size: 1rem;
  }
  
  .quick-link-item-home {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }
}

@media (max-width: 576px) {
  .quick-links-home-section {
    padding: 2rem 0;
  }
  
  .quick-links-card-header {
    padding: 1rem 1rem 0.75rem;
  }
  
  .quick-links-card-body {
    padding: 0.75rem 1rem 1rem;
    max-height: 300px;
  }
  
  .quick-links-card-title {
    font-size: 0.95rem;
  }
  
  .quick-link-item-home {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
  }
}

/* Social Media Links */

.footer-social {
  margin-top: var(--spacing-lg);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 50%;
  text-decoration: none;
  transition: all var(--transition-normal);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-link:hover {
  background: var(--primary-blue);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 174, 255, 0.3);
  border-color: var(--primary-blue);
}

.social-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Contact Information */

.footer-contact {
  margin-bottom: var(--spacing-lg);
}

.contact-item {
  margin-bottom: var(--spacing-md);
}

.contact-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  transition: all var(--transition-normal);
  padding: 0.25rem 0;
}

.contact-link:hover {
  color: var(--primary-blue);
  text-decoration: none;
}

.contact-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Newsletter Section */

.footer-newsletter {
  margin-top: var(--spacing-lg);
}

.newsletter-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

.newsletter-form {
  margin-top: var(--spacing-md);
}

.newsletter-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--primary-blue);
  color: white;
  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
  outline: none;
}

.btn-newsletter {
  background: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  transition: all var(--transition-normal);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.btn-newsletter:hover {
  background: #0090d9;
  border-color: #0090d9;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3);
}

.btn-newsletter:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Footer Bottom Section */

.footer-bottom {
  background: var(--darker-blue);
  padding: var(--spacing-lg) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.copyright-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  margin: 0;
  font-weight: 400;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

.footer-bottom-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all var(--transition-normal);
  padding: 0.25rem 0.5rem;
}

.footer-bottom-link:hover {
  color: var(--primary-blue);
  text-decoration: none;
}

.footer-bottom-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.separator {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
}

/* ===== RESPONSIVE FOOTER ADJUSTMENTS ===== */

/* Large Desktop */

@media (min-width: 1200px) {
  .footer-main {
    padding: 4rem 0;
  }
  
  .social-links {
    gap: var(--spacing-md);
  }
  
  .social-link {
    width: 44px;
    height: 44px;
  }
}

/* Desktop */

@media (min-width: 992px) and (max-width: 1199px) {
  .footer-main {
    padding: 3.5rem 0;
  }
}

/* Tablet */

@media (max-width: 991px) {
  .footer-main {
    padding: 3rem 0;
  }
  
  .footer-section {
    margin-bottom: var(--spacing-xl);
  }
  
  .footer-section:last-child {
    margin-bottom: 0;
  }
  
  .social-links {
    justify-content: flex-start;
    margin-top: var(--spacing-lg);
  }
  
  .footer-bottom-links {
    margin-top: var(--spacing-md);
    justify-content: center;
  }
}

/* Mobile */

@media (max-width: 767px) {
  .footer-main {
    padding: 2.5rem 0;
  }
  
  .footer-logo-text {
    font-size: 1.5rem;
  }
  
  .footer-title {
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
  }
  
  .footer-subtitle {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .footer-description {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
  }
  
  .footer-link,
  .contact-link {
    font-size: 0.85rem;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
  }
  
  .newsletter-input,
  .btn-newsletter {
    font-size: 0.85rem;
    padding: 0.625rem 0.875rem;
  }
  
  .footer-bottom {
    padding: var(--spacing-md) 0;
  }
  
  .copyright-text,
  .footer-bottom-link {
    font-size: 0.8rem;
  }
}

/* Small Mobile */

@media (max-width: 575px) {
  .footer-main {
    padding: 2rem 0;
  }
  
  .footer-brand {
    text-align: center;
    margin-bottom: var(--spacing-lg);
  }
  
  .footer-title::after {
    left: 20px;
    transform: translateX(-20px);
  }
  
  .footer-section {
    text-align: left;
    margin-bottom: var(--spacing-lg);
  }
  
  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .footer-link {
    justify-content: flex-start;
  }
  
  
  .social-link {
    width: 32px;
    height: 32px;
  }
  
  .newsletter-form .input-group {
    flex-direction: column;
  }
  
  .newsletter-input {
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xs);
  }
  
  .btn-newsletter {
    border-radius: var(--border-radius);
    width: 100%;
  }
  
  .footer-bottom-links {
    flex-direction: row;
    gap: var(--spacing-xs);
  }
  
  .separator {
    display: none;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus states for better keyboard navigation */

.footer-link:focus-visible,
.contact-link:focus-visible,
.social-link:focus-visible,
.footer-bottom-link:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .site-footer {
    background: #000;
    border-top: 2px solid #fff;
  }
  
  .footer-separator {
    background: #fff;
    height: 2px;
  }
  
  .footer-link,
  .contact-link,
  .social-link {
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
  
  .footer-link:hover,
  .contact-link:hover,
  .social-link:hover {
    border-color: var(--primary-blue);
    background: rgba(0, 174, 255, 0.2);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .footer-link,
  .contact-link,
  .social-link,
  .btn-newsletter {
    transition: none !important;
  }
  
  .footer-link:hover,
  .social-link:hover,
  .btn-newsletter:hover {
    transform: none !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .site-footer {
    background: none !important;
    color: #000 !important;
    border-top: 2px solid #000;
  }
  
  .footer-separator {
    display: none;
  }
  
  .footer-social,
  .footer-newsletter {
    display: none !important;
  }
  
  .footer-link,
  .contact-link {
    color: #000 !important;
  }
  
  .footer-title {
    color: #000 !important;
  }
  
  .footer-description,
  .copyright-text {
    color: #333 !important;
  }
}

/* ===== PROFESSIONAL WEBSITE SECTIONS STYLES ===== */

/* ===== EXPERT AGENTS SECTION ===== */

.agents-section {
  background-color: var(--light-gray);
}

.agent-card {
  transition: all var(--transition-normal);
  border-radius: var(--border-radius) !important;
  overflow: hidden;
  background: white;
}

.agent-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

.agent-image-container {
  overflow: hidden;
  height: 280px;
}

.agent-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition-normal);
}

.agent-card:hover .agent-image {
  transform: scale(1.05);
}

.verified-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 15px !important;
  padding: 0.25rem 0.75rem;
}

.agent-description {
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 3rem;
}

.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.social-btn:hover {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  transform: translateY(-2px);
}

.contact-agent-btn {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.5rem 1.5rem;
  border-radius: 25px !important;
  transition: all var(--transition-normal);
}

.contact-agent-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 174, 255, 0.3);
}

/* ===== TESTIMONIALS SECTION ===== */

.testimonials-section {
  background: white;
}

.testimonial-item {
  border-radius: var(--border-radius) !important;
  transition: all var(--transition-normal);
  border: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
}

.testimonial-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--primary-blue), #0090d9);
  opacity: 0;
  transition: all var(--transition-normal);
}

.testimonial-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--primary-blue);
}

.testimonial-item:hover::before {
  opacity: 1;
}

.quote-icon {
  opacity: 0.7;
}

.star-rating {
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.star.filled {
  color: #ffc107;
}

.star.empty {
  color: #e9ecef;
}

.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  min-height: 4rem;
}

.client-avatar {
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.client-name {
  color: #333;
  font-weight: 600;
}

.client-role,
.client-location,
.testimonial-date {
  font-size: 0.8rem;
  color: #666;
}

/* ===== DISCOVER PLACES SECTION ===== */

.discover-places {
  background-color: var(--light-gray);
}

.city-card {
  transition: all var(--transition-normal);
  border-radius: var(--border-radius) !important;
  overflow: hidden;
  cursor: pointer;
  height: 300px;
}

.city-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.city-image-container {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.city-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition-slow);
}

.city-card:hover .city-image {
  transform: scale(1.1);
}

.city-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.3), transparent) !important;
  transition: all var(--transition-normal);
}

.city-card:hover .city-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.4), transparent) !important;
}

.city-info {
  padding: 1.5rem;
}

.property-count {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.city-description {
  font-size: 0.85rem;
  line-height: 1.4;
  opacity: 0.9;
}

.city-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
}

.average-price,
.popular-areas {
  font-size: 0.8rem;
}

.city-hover-indicator {
  opacity: 0;
  transform: translateX(20px);
  transition: all var(--transition-normal);
}

.city-card:hover .city-hover-indicator {
  opacity: 1;
  transform: translateX(0);
}

.city-hover-indicator .badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 15px !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet */

@media (max-width: 991px) {
  .agent-image-container {
    height: 250px;
  }
  
  .agent-description {
    min-height: 2.5rem;
    font-size: 0.85rem;
  }
  
  .social-btn {
    width: 32px;
    height: 32px;
  }
  
  .testimonial-text {
    min-height: 3.5rem;
    font-size: 0.9rem;
  }
  
  .city-card {
    height: 350px;
  }
  
  .city-info {
    padding: 1.25rem;
  }
}

/* Mobile */

@media (max-width: 767px) {
  .agent-image-container {
    height: 220px;
  }
  
  .agent-description {
    min-height: 2rem;
    font-size: 0.8rem;
  }
  
  .social-btn {
    width: 30px;
    height: 30px;
  }
  
  .contact-agent-btn {
    font-size: 0.8rem;
    padding: 0.4rem 1.2rem;
  }
  
  .testimonial-text {
    min-height: 3rem;
    font-size: 0.85rem;
  }
  
  .client-avatar {
    width: 50px;
    height: 50px;
  }
  
  .city-card {
    height: 300px;
  }
  
  .city-info {
    padding: 1rem;
  }
  
  .city-stats {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .popular-areas {
    text-align: center !important;
  }
}

/* Small Mobile */

@media (max-width: 575px) {
  .agent-image-container {
    height: 200px;
  }
  
  .social-links {
    gap: 0.5rem;
  }
  
  .social-btn {
    width: 28px;
    height: 28px;
  }
  
  .testimonial-item {
    padding: 1rem !important;
  }
  
  .testimonial-text {
    min-height: 2.5rem;
    font-size: 0.8rem;
  }
  
  .city-card {
    height: 280px;
  }
  
  .city-info {
    padding: 0.875rem;
  }
  
  .city-description {
    display: none;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus states */

.agent-card:focus-within,
.city-card:focus-within {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.social-btn:focus,
.contact-agent-btn:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .agent-card,
  .testimonial-item,
  .city-card {
    border: 2px solid #333;
  }
  
  .verified-badge {
    border: 1px solid white;
  }
  
  .city-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
  }
  
  .testimonial-item::before {
    opacity: 1;
    width: 6px;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .agent-card,
  .testimonial-item,
  .city-card,
  .agent-image,
  .city-image,
  .social-btn,
  .contact-agent-btn,
  .city-hover-indicator {
    transition: none !important;
  }
  
  .agent-card:hover,
  .testimonial-item:hover,
  .city-card:hover {
    transform: none !important;
  }
  
  .agent-card:hover .agent-image,
  .city-card:hover .city-image {
    transform: none !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .agents-section,
  .testimonials-section,
  .discover-places {
    background: white !important;
    color: #000 !important;
  }
  
  .agent-card,
  .testimonial-item,
  .city-card {
    break-inside: avoid;
    margin-bottom: 20pt;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  
  .social-links,
  .contact-agent-btn,
  .city-hover-indicator {
    display: none !important;
  }
  
  .city-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
  }
}

/* ===== LOGIN MODAL STYLES ===== */

/* Modal Overlay */

.login-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: var(--spacing-md);
  animation: fadeInOverlay 0.3s ease-out;
}

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

/* Modal Container */

.login-modal-container {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideInModal 0.3s ease-out;
}

@keyframes slideInModal {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Modal Header */

.login-modal-header {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #0090d9 100%);
  color: white;
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.login-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  font-family: var(--font-family-primary);
}

.login-modal-close {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  width: 32px;
  height: 32px;
}

.login-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.login-modal-close:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Modal Body */

.login-modal-body {
  padding: var(--spacing-xl);
}

/* Login Form */

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Form Groups */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Input Wrapper */

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: var(--spacing-md);
  color: #999;
  z-index: 1;
  pointer-events: none;
}

/* Form Inputs */

.form-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--spacing-md) 0 3rem;
  border: 2px solid #e9ecef;
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  font-family: var(--font-family-primary);
  background: #f8f9fa;
  transition: all var(--transition-normal);
  outline: none;
}

.form-input:focus {
  border-color: var(--primary-blue);
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.1);
}

.form-input.error {
  border-color: #dc3545;
  background: #fff5f5;
}

.form-input.error:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.form-input::placeholder {
  color: #999;
  font-weight: 400;
}

/* Password Toggle */

.password-toggle {
  position: absolute;
  right: var(--spacing-md);
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  z-index: 1;
}

.password-toggle:hover {
  color: var(--primary-blue);
  background: rgba(0, 174, 255, 0.1);
}

.password-toggle:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Error Messages */

.error-message {
  color: #dc3545;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.general-error {
  background: #fff5f5;
  border: 1px solid #fecaca;
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

/* Form Options */

.form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* Checkbox */

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  user-select: none;
}

.checkbox-input {
  width: 16px;
  height: 16px;
  border: 2px solid #ddd;
  border-radius: 3px;
  background: white;
  cursor: pointer;
  position: relative;
  appearance: none;
  transition: all var(--transition-normal);
}

.checkbox-input:checked {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
}

.checkbox-input:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.checkbox-input:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.checkbox-label {
  font-size: var(--font-size-sm);
  color: #666;
  font-weight: 500;
}

/* Forgot Password Link */

.forgot-password-link {
  background: transparent;
  border: none;
  color: var(--primary-blue);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-normal);
  padding: var(--spacing-xs) 0;
}

.forgot-password-link:hover {
  color: #0090d9;
  text-decoration: underline;
}

.forgot-password-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Submit Button */

.login-submit-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, #0090d9 100%);
  border: none;
  border-radius: var(--border-radius);
  color: white;
  font-size: var(--font-size-md);
  font-weight: 600;
  font-family: var(--font-family-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3);
}

.login-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0090d9 0%, #007bb5 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 174, 255, 0.4);
}

.login-submit-btn:active {
  transform: translateY(0);
}

.login-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none !important;
}

.login-submit-btn.loading {
  pointer-events: none;
}

/* Loading Spinner */

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Login Footer */

.login-footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid #e9ecef;
  text-align: center;
}

.signup-prompt {
  font-size: var(--font-size-sm);
  color: #666;
  margin: 0;
}

.signup-link {
  background: transparent;
  border: none;
  color: var(--primary-blue);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-left: var(--spacing-xs);
  transition: all var(--transition-normal);
}

.signup-link:hover {
  color: #0090d9;
  text-decoration: underline;
}

.signup-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet */

@media (max-width: 768px) {
  .login-modal-overlay {
    padding: var(--spacing-sm);
  }
  
  .login-modal-container {
    max-width: 100%;
  }
  
  .login-modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  .login-modal-title {
    font-size: 1.1rem;
  }
  
  .login-modal-body {
    padding: var(--spacing-lg);
  }
  
  .form-input {
    height: 44px;
    font-size: var(--font-size-sm);
  }
  
  .login-submit-btn {
    height: 44px;
    font-size: var(--font-size-sm);
  }
}

/* Mobile */

@media (max-width: 576px) {
  .login-modal-overlay {
    padding: var(--spacing-xs);
    align-items: flex-start;
    padding-top: 10vh;
  }
  
  .login-modal-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .login-modal-title {
    font-size: 1rem;
  }
  
  .login-modal-close {
    width: 28px;
    height: 28px;
  }
  
  .login-modal-body {
    padding: var(--spacing-md);
  }
  
  .form-input {
    height: 42px;
    padding: 0 var(--spacing-sm) 0 2.5rem;
  }
  
  .input-icon {
    left: var(--spacing-sm);
  }
  
  .password-toggle {
    right: var(--spacing-sm);
  }
  
  .login-submit-btn {
    height: 42px;
  }
  
  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .checkbox-label,
  .forgot-password-link {
    font-size: var(--font-size-xs);
  }
  
  .signup-prompt {
    font-size: var(--font-size-xs);
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus trap for modal */

.login-modal-container:focus {
  outline: none;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .login-modal-container {
    border: 2px solid #000;
  }
  
  .form-input {
    border-color: #333;
  }
  
  .form-input:focus {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
  }
  
  .checkbox-input {
    border-color: #333;
  }
  
  .error-message {
    background: #fff;
    border: 2px solid #dc3545;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .login-modal-overlay,
  .login-modal-container,
  .form-input,
  .login-submit-btn,
  .password-toggle,
  .checkbox-input,
  .loading-spinner {
    animation: none !important;
    transition: none !important;
  }
  
  .login-submit-btn:hover {
    transform: none !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .login-modal-overlay {
    display: none !important;
  }
}

/* ===== PROPERTY PAGES STYLES ===== */

/* ===== PROPERTY DETAILS PAGE ===== */

.property-details-page {
  background-color: #f7f8f9;
  min-height: 100vh;
  padding-top: var(--header-height);
}

/* Property Title Section - No background, shadow, or padding */

.property-title-section {
  /* Removed background, shadow, and box-shadow */
}

.price-section .h2 {
  color: var(--primary-blue);
  font-weight: 700;
}

/* ===== HEADER SECTION ENHANCEMENTS ===== */

/* Enhanced Share and Love buttons with larger icons and reduced padding */

.share-love-btn {
  border: 1px solid #e5e5e5 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 4px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  padding: 8px !important;
}

.share-love-btn:hover {
  border-color: var(--primary-blue) !important;
  background-color: rgba(0, 174, 255, 0.1);
  color: var(--primary-blue);
}

/* ===== GALLERY TABS - ABSOLUTE POSITIONING ===== */

.gallery-tabs-absolute {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  gap: 8px;
}

.gallery-tab-btn {
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 4px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gallery-tab-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
}

.gallery-tab-btn.active {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ===== ENHANCED SLIDER SECTION ===== */

/* Main Slider - 600px height */

.property-main-slider {
  height: 600px;
  border-radius: 4px;
  overflow: hidden;
}

.property-main-slider img {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.3));
}

/* Gallery Navigation - 42x42 buttons with 4px border radius */

.gallery-nav-btn {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 4px !important;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gallery-nav-btn:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Thumbnail Slider - 80px height */

.thumbnail-slider {
  margin-top: 1rem;
}

.thumbnail-slider .thumbnail {
  height: auto !important;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: all var(--transition-normal);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}

.thumbnail-slider .thumbnail:hover {
  border-color: var(--primary-blue);
  opacity: 0.8;
}

.thumbnail-slider .thumbnail.active {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(0, 174, 255, 0.2);
}

/* ===== SECTION STYLING ===== */

/* Section Titles - 18px font size, 400 weight */

.section-title {
  font-size: 18px !important;
  font-weight: 400 !important;
  margin-bottom: 1rem;
  color: #333;
}

/* Section Separators - 1px line below titles */

.section-separator {
  width: 100%;
  height: 1px;
  background-color: #dce0e0;
  margin-bottom: 1.5rem;
}

/* Property Sections with consistent styling and 24px padding */

.property-section {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-normal);
  padding: 24px !important;
}

.property-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Property Gallery Section - No background, shadow, or padding */

.property-gallery-section {
  /* Removed all styling - clean gallery section */
}

/* Property Content - Remove top padding */

.property-content {
  padding-top: 0 !important;
  padding-bottom: var(--spacing-xxl);
}

/* Enhanced Property Statistics */

.stat-card {
  transition: all var(--transition-normal);
  border: 1px solid transparent;
}

.stat-card:hover {
  background: rgba(0, 174, 255, 0.1) !important;
  border-color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 174, 255, 0.2);
}

.stat-icon {
  transition: all var(--transition-normal);
}

.stat-card:hover .stat-icon {
  transform: scale(1.1);
}

/* Video Tour Section */

.video-container {
  border-radius: 4px;
  overflow: hidden;
}

.video-container iframe {
  border: none;
}

/* Virtual Tour Section */

.virtual-tour-container {
  border-radius: 4px;
  overflow: hidden;
}

.virtual-tour-container iframe {
  border: none;
}

/* Reviews Section */

.review-form {
  border: 1px solid #e9ecef;
  border-radius: 4px;
}

.review-item {
  padding: 1rem 0;
}

.review-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0;
}

.star-rating {
  gap: 2px;
}

.star-rating .cursor-pointer:hover {
  transform: scale(1.1);
}

.review-title {
  color: #333;
  font-weight: 600;
}

.review-comment {
  color: #666;
  line-height: 1.6;
}

/* Similar Properties - Remove bottom margin */

.property-section .card {
  transition: all var(--transition-normal);
  border-radius: 4px !important;
}

.property-section .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Sticky Sidebar */

.sticky-top {
  position: sticky;
  top: calc(var(--header-height) + 20px);
}

/* ===== ENHANCED AGENT CONTACT CARD ===== */

.agent-contact-card {
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Agent Header */

.agent-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.agent-avatar {
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.verification-badge {
  top: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.agent-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.view-listings-btn {
  background: none;
  border: none;
  color: #007bff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.view-listings-btn:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Contact Form Section */

.contact-form-section {
  background: #fff;
}

.contact-input,
.contact-textarea,
.contact-select {
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--font-family-primary) !important;
  background: #fff;
  transition: all 0.2s ease;
}

.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus {
  border-color: #007bff !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
  outline: none;
}

.contact-textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}

/* Terms Agreement */

.terms-agreement {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.terms-text {
  margin: 0;
}

.terms-link {
  color: #007bff;
  text-decoration: none;
}

.terms-link:hover {
  text-decoration: underline;
}

/* Action Buttons - Side by Side Layout */

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-send-message {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-send-message:hover {
  background: #218838;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-call {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-call:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.btn-whatsapp {
  background: #25d366;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  height: 44px;
}

.btn-whatsapp:hover {
  background: #128c7e;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Image Modal */

.image-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.image-modal-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.image-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  transition: all var(--transition-normal);
}

.image-modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  z-index: 10001;
}

.modal-nav-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.modal-prev {
  left: 20px;
}

.modal-next {
  right: 20px;
}

.modal-image-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* ===== PROPERTY LISTINGS PAGE ===== */

.property-listings-page {
  background-color: #f7f8f9;
  min-height: 100vh;
  padding-top: var(--header-height);
}

.listings-header {
  border-bottom: 1px solid #e9ecef;
}

.search-filters {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Property Listing Cards */

.property-listing-card {
  transition: all var(--transition-normal);
}

.property-listing-card:hover {
  transform: translateY(-4px);
}

.property-listing-card .card {
  border-radius: 4px !important;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.property-listing-card:hover .card {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.property-listing-card .property-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
  opacity: 0;
  transition: all var(--transition-normal);
}

.property-listing-card:hover .property-overlay {
  opacity: 1;
}

/* List View Specific */

.property-listing-card.list-view {
  margin-bottom: var(--spacing-lg);
}

.property-listing-card.list-view .card {
  flex-direction: row;
  align-items: stretch;
}

.property-listing-card.list-view .card-img-top {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px 0 0 4px !important;
}

.property-listing-card.list-view .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Grid View Specific */

.property-listing-card.grid-view .card-img-top {
  height: 250px;
  object-fit: cover;
}

/* Property Badges */

.property-listing-card .badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.4rem 0.8rem;
  border-radius: 15px !important;
}

/* View Mode Toggle */

.btn-group .btn {
  border-radius: 4px !important;
}

.btn-group .btn:not(:last-child) {
  border-right: 1px solid rgba(0, 174, 255, 0.3);
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.btn-group .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet */

@media (max-width: 991px) {
  .property-details-page,
  .property-listings-page {
    padding-top: 70px;
  }
  
  .sticky-top {
    top: calc(70px + 20px);
  }
  
  .property-title-section {
    margin-top: 0 !important;
  }
  
  .property-title-section .row {
    text-align: left;
  }
  
  .property-title-section .col-lg-4 {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  
  .property-main-slider {
    height: 400px;
  }
  
  .property-main-slider img {
    height: 400px;
  }
  
  .thumbnail-slider .thumbnail {
    height: 60px;
  }
  
  .gallery-tab-btn {
    width: 36px;
    height: 36px;
  }
  
  .gallery-nav-btn {
    width: 38px;
    height: 38px;
  }
  
  .share-love-btn {
    width: 44px !important;
    height: 44px !important;
  }
  
  .gallery-tabs-absolute {
    top: 15px;
    right: 15px;
    gap: 6px;
  }
  
  .property-listing-card.list-view .card {
    flex-direction: column;
  }
  
  .property-listing-card.list-view .card-img-top {
    width: 100%;
    height: 200px;
    border-radius: 4px 4px 0 0 !important;
  }
  
  .modal-nav-btn {
    width: 40px;
    height: 40px;
  }
  
  .modal-prev {
    left: 10px;
  }
  
  .modal-next {
    right: 10px;
  }
  
  .image-modal-close {
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
  }
}

/* Mobile */

@media (max-width: 767px) {
  .property-title-section .container {
    padding: var(--spacing-md);
  }
  
  .property-main-slider {
    height: 300px;
  }
  
  .property-main-slider img {
    height: 300px;
  }
  
  .thumbnail-slider .thumbnail {
    height: 50px;
  }
  
  .gallery-tab-btn {
    width: 32px;
    height: 32px;
  }
  
  .gallery-nav-btn {
    width: 36px;
    height: 36px;
  }
  
  .share-love-btn {
    width: 40px !important;
    height: 40px !important;
  }
  
  .gallery-tabs-absolute {
    top: 10px;
    right: 10px;
    gap: 4px;
  }
  
  .property-content .container {
    padding: var(--spacing-md);
  }
  
  .sticky-top {
    position: static;
    margin-top: var(--spacing-xl);
  }
  
  .listings-header .row {
    text-align: center;
  }
  
  .listings-header .col-md-6:last-child {
    margin-top: var(--spacing-md);
  }
  
  .search-filters .row {
    gap: var(--spacing-sm);
  }
  
  .search-filters .col-lg-3,
  .search-filters .col-lg-2,
  .search-filters .col-lg-1 {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  .property-listing-card.grid-view .card-img-top {
    height: 200px;
  }
  
  .modal-nav-btn {
    width: 35px;
    height: 35px;
  }
  
  .image-modal-close {
    width: 30px;
    height: 30px;
  }
  
  .property-section {
    margin-bottom: 1rem !important;
    padding: 1rem !important;
  }
  
  .similar-properties .col-md-6 {
    width: 100%;
  }
  
  /* Mobile Contact Card Adjustments */
  .agent-contact-card {
    margin-bottom: 2rem;
  }
  
  .agent-header {
    padding: 1rem !important;
  }
  
  .contact-form-section {
    padding: 1rem !important;
  }
  
  .contact-input,
  .contact-textarea,
  .contact-select {
    padding: 10px 14px;
    font-size: 13px;
  }
  
  .btn-send-message,
  .btn-call,
  .btn-whatsapp {
    padding: 10px 16px;
    font-size: 13px;
    height: 40px;
  }
  
  /* Mobile stat cards */
  .stat-card {
    padding: 1rem !important;
  }
  
  .stat-icon {
    margin-bottom: 0.5rem !important;
  }
}

/* Small Mobile */

@media (max-width: 575px) {
  .property-title-section h1 {
    font-size: 1.5rem;
  }
  
  .property-title-section .d-flex.gap-4 {
    flex-direction: column;
    gap: var(--spacing-sm) !important;
    align-items: flex-start !important;
  }
  
  .property-main-slider {
    height: 250px;
  }
  
  .property-main-slider img {
    height: 250px;
  }
  
  .thumbnail-slider .thumbnail {
    height: 40px;
  }
  
  .gallery-tab-btn {
    width: 28px;
    height: 28px;
  }
  
  .gallery-nav-btn {
    width: 32px;
    height: 32px;
  }
  
  .share-love-btn {
    width: 36px !important;
    height: 36px !important;
  }
  
  .gallery-tabs-absolute {
    top: 8px;
    right: 8px;
    gap: 3px;
  }
  
  .property-section .table {
    font-size: 0.875rem;
  }
  
  .property-section .row .col-md-6:last-child {
    margin-top: var(--spacing-md);
  }
  
  .listings-header .d-flex {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .btn-group {
    width: 100%;
  }
  
  .btn-group .btn {
    flex: 1;
  }
  
  .modal-nav-btn {
    width: 30px;
    height: 30px;
  }
  
  .image-modal-close {
    width: 28px;
    height: 28px;
  }
  
  .agent-avatar {
    width: 50px !important;
    height: 50px !important;
  }
  
  .agent-name {
    font-size: 1rem;
  }
  
  .view-listings-btn {
    font-size: 0.8rem;
  }
  
  /* Small mobile stat cards */
  .stat-card {
    padding: 0.75rem !important;
  }
  
  .stat-card .h4 {
    font-size: 1.25rem;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus states */

.property-listing-card:focus-within {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.thumbnail-slider .thumbnail:focus,
.gallery-tab-btn:focus,
.gallery-nav-btn:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.image-modal-close:focus,
.modal-nav-btn:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.btn-send-message:focus,
.btn-call:focus,
.btn-whatsapp:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

.stat-card:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.share-love-btn:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .property-listing-card .card,
  .property-section,
  .agent-contact-card {
    border: 2px solid #333;
  }
  
  .thumbnail-slider .thumbnail {
    border-width: 3px;
  }
  
  .gallery-tab-btn,
  .gallery-nav-btn {
    border: 1px solid white;
  }
  
  .property-overlay,
  .slider-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
  }
  
  .image-modal-overlay {
    background: rgba(0, 0, 0, 0.95);
  }
  
  .contact-input,
  .contact-textarea,
  .contact-select {
    border-width: 2px !important;
  }
  
  .stat-card {
    border-width: 2px;
  }
  
  .share-love-btn {
    border-width: 2px !important;
  }
  
  .gallery-tabs-absolute .gallery-tab-btn {
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .property-listing-card,
  .property-listing-card .card,
  .thumbnail-slider .thumbnail,
  .gallery-tab-btn,
  .gallery-nav-btn,
  .image-modal-close,
  .modal-nav-btn,
  .property-section,
  .btn-send-message,
  .btn-call,
  .btn-whatsapp,
  .stat-card,
  .share-love-btn {
    transition: none !important;
  }
  
  .property-listing-card:hover,
  .property-section:hover,
  .stat-card:hover,
  .gallery-tab-btn:hover,
  .gallery-nav-btn:hover {
    transform: none !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .search-filters,
  .btn,
  .pagination,
  .image-modal-overlay,
  .sticky-top .card,
  .agent-contact-card,
  .gallery-tabs-absolute {
    display: none !important;
  }
  
  .property-details-page,
  .property-listings-page {
    background: white !important;
    padding-top: 0 !important;
  }
  
  .property-listing-card .card,
  .property-section {
    break-inside: avoid;
    margin-bottom: 20pt;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  
  .property-overlay,
  .slider-overlay {
    display: none !important;
  }
  
  .sticky-top {
    position: static !important;
  }
}

/* ===== STATIC PAGES STYLES ===== */

/* ===== ABOUT US PAGE ===== */

.about-us-page {
  background-color: #f7f8f9;
  min-height: 100vh;
  padding-top: var(--header-height);
}

.about-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.stat-card {
  transition: all var(--transition-normal);
  border: 1px solid transparent;
}

.stat-card:hover {
  background: rgba(0, 174, 255, 0.1) !important;
  border-color: var(--primary-blue);
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 174, 255, 0.2);
}

.stat-icon {
  transition: all var(--transition-normal);
}

.stat-card:hover .stat-icon {
  transform: scale(1.1);
}

.mission-card,
.vision-card {
  transition: all var(--transition-normal);
}

.mission-card:hover,
.vision-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.value-card {
  transition: all var(--transition-normal);
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.value-icon {
  transition: all var(--transition-normal);
}

.value-card:hover .value-icon {
  transform: scale(1.1);
}

.team-card {
  transition: all var(--transition-normal);
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}

.timeline-item {
  position: relative;
}

.timeline-year .badge {
  font-size: 0.9rem;
  font-weight: 600;
}

.timeline-content {
  transition: all var(--transition-normal);
}

.timeline-content:hover {
  transform: translateX(10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

/* ===== CONTACT US PAGE ===== */

.contact-us-page {
  background-color: #f7f8f9;
  min-height: 100vh;
  padding-top: var(--header-height);
}

.contact-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.contact-form-card {
  transition: all var(--transition-normal);
}

.contact-form-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.contact-info-card {
  transition: all var(--transition-normal);
}

.contact-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.contact-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
}

.business-hours {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 1rem;
}

.office-card {
  transition: all var(--transition-normal);
}

.office-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

.map-container {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  overflow: hidden;
}

/* ===== CONTACT US PAGE ===== */

.dashboard-page {
  background-color: #f7f8f9;
  min-height: 100vh;
  padding-top: var(--header-height);
}

.dashboard-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}


/* ===== FAQ PAGE ===== */

.faq-page {
  background-color: #f7f8f9;
  min-height: 100vh;
  padding-top: var(--header-height);
}

.faq-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.faq-categories {
  top: calc(var(--header-height) + 20px);
}

.faq-categories .btn-link {
  text-decoration: none;
  border: 1px solid transparent;
  transition: all var(--transition-normal);
}

.faq-categories .btn-link:hover {
  background-color: rgba(0, 174, 255, 0.1) !important;
  border-color: var(--primary-blue);
  color: var(--primary-blue) !important;
}

.accordion-item {
  border: 1px solid #e9ecef !important;
  margin-bottom: 1rem;
  transition: all var(--transition-normal);
}

.accordion-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.accordion-button {
  background-color: white;
  border: none;
  padding: 1.25rem;
  font-weight: 500;
  transition: all var(--transition-normal);
}

.accordion-button:not(.collapsed) {
  background-color: rgba(0, 174, 255, 0.1);
  color: var(--primary-blue);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
  border-color: var(--primary-blue);
}

.accordion-body {
  padding: 1.25rem;
  background-color: #f8f9fa;
}

/* ===== 404 NOT FOUND PAGE ===== */

.not-found-page {
  background-color: #f7f8f9;
  min-height: 100vh;
  padding-top: var(--header-height);
}

.error-code {
  font-family: var(--font-family-primary);
  line-height: 1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.error-illustration img {
  transition: all var(--transition-normal);
}

.error-illustration img:hover {
  transform: scale(1.05);
}

.quick-link-card {
  transition: all var(--transition-normal);
}

.quick-link-card:hover {
  transform: translateY(-5px);
  text-decoration: none;
}

.quick-link-card:hover .card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}

.quick-link-icon {
  transition: all var(--transition-normal);
}

.quick-link-card:hover .quick-link-icon {
  transform: scale(1.1);
}

.help-illustration img {
  transition: all var(--transition-normal);
}

.help-illustration img:hover {
  transform: scale(1.05);
}

/* ===== BREADCRUMB STYLES ===== */

.breadcrumb-nav {
  display: none;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
}

.breadcrumb-item {
  font-size: 0.875rem;
}

.breadcrumb-link {
  color: var(--primary-blue);
  transition: all var(--transition-normal);
}

.breadcrumb-link:hover {
  color: #0090d9;
  text-decoration: underline;
}

.breadcrumb-separator {
  color: #6c757d;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet */

@media (max-width: 991px) {
  .about-us-page,
  .contact-us-page,
  .faq-page,
  .not-found-page {
    padding-top: 70px;
  }
  
  .faq-categories {
    top: calc(70px + 20px);
    position: static !important;
    margin-bottom: 2rem;
  }
  
  .timeline-content:hover {
    transform: none;
  }
  
  .error-code {
    font-size: 4rem;
  }
  
  .team-card .row {
    flex-direction: column;
  }
  
  .team-card .col-md-4,
  .team-card .col-md-8 {
    width: 100%;
  }
  
  .team-card img {
    height: 200px !important;
    width: 100% !important;
  }
}

/* Mobile */

@media (max-width: 767px) {
  .stat-card,
  .value-card,
  .office-card {
    margin-bottom: 1rem;
  }
  
  .timeline-item .row {
    text-align: center;
  }
  
  .timeline-content {
    margin-top: 1rem;
  }
  
  .error-code {
    font-size: 3rem;
  }
  
  .quick-links .col-6 {
    margin-bottom: 1rem;
  }
  
  .contact-form-card,
  .contact-info-card {
    margin-bottom: 1.5rem;
  }
  
  .business-hours {
    margin-bottom: 1rem;
  }
  
  .accordion-button {
    padding: 1rem;
    font-size: 0.9rem;
  }
  
  .accordion-body {
    padding: 1rem;
  }
}

/* Small Mobile */

@media (max-width: 575px) {
  .error-code {
    font-size: 2.5rem;
  }
  
  .quick-links .col-6 {
    width: 100%;
  }
  
  .team-card .card-body {
    padding: 1rem;
  }
  
  .timeline-year .badge {
    font-size: 0.8rem;
  }
  
  .contact-item {
    padding: 0.5rem 0;
  }
  
  .office-card .card-body {
    padding: 1rem;
  }
  
  .accordion-button {
    padding: 0.75rem;
    font-size: 0.85rem;
  }
  
  .accordion-body {
    padding: 0.75rem;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus states */

.quick-link-card:focus,
.team-card:focus,
.office-card:focus,
.accordion-button:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.breadcrumb-link:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .stat-card,
  .value-card,
  .team-card,
  .office-card,
  .contact-form-card,
  .contact-info-card {
    border: 2px solid #333;
  }
  
  .accordion-item {
    border: 2px solid #333 !important;
  }
  
  .breadcrumb-nav {
    border-bottom: 2px solid #333;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .value-card,
  .team-card,
  .office-card,
  .contact-form-card,
  .contact-info-card,
  .timeline-content,
  .quick-link-card,
  .accordion-item,
  .accordion-button {
    transition: none !important;
  }
  
  .stat-card:hover,
  .value-card:hover,
  .team-card:hover,
  .office-card:hover,
  .contact-form-card:hover,
  .contact-info-card:hover,
  .quick-link-card:hover {
    transform: none !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .about-us-page,
  .contact-us-page,
  .faq-page,
  .not-found-page {
    background: white !important;
    padding-top: 0 !important;
  }
  
  .breadcrumb-nav,
  .faq-categories,
  .quick-links,
  .help-section {
    display: none !important;
  }
  
  .stat-card,
  .team-card,
  .office-card {
    break-inside: avoid;
    margin-bottom: 20pt;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  
  .accordion-item {
    break-inside: avoid;
    margin-bottom: 10pt;
  }
  
  .accordion-collapse {
    display: block !important;
  }
}

/* ===== CREATE LISTING PAGE STYLES ===== */

.create-listing-page {
  background-color: #f7f8f9;
  min-height: 100vh;
}

.listing-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* ===== NARROWER CONTAINER ===== */

.container-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ===== PROGRESS BAR ===== */

.progress-section {
  border-bottom: 1px solid #e9ecef;
}

.progress-container {
  position: relative;
}

.progress {
  height: 8px;
  background-color: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  transition: width 0.3s ease;
}

/* ===== FORM SECTION CARDS ===== */

.form-section-card {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 2rem;
  transition: all var(--transition-normal);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 174, 255, 0.3);
}

.section-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f8f9fa;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-number {
  background: var(--primary-blue);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.section-description {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
}

/* ===== FORM STYLES ===== */

.form-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 14px;
}

.form-control,
.form-select {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 14px;
  transition: all var(--transition-normal);
  background-color: white;
  line-height:1em;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.1);
  outline: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #dc3545;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 12px;
  margin-top: 0.25rem;
}

.form-text {
  color: #6c757d;
  font-size: 12px;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
}

/* ===== AMENITIES GRID ===== */

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.amenity-item {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 0.75rem;
  transition: all var(--transition-normal);
  margin: 0;
}

.amenity-item:hover {
  background: rgba(0, 174, 255, 0.05);
  border-color: var(--primary-blue);
}

.amenity-item .form-check-input {
  margin-top: 0.125rem;
}

.amenity-item .form-check-input:checked + .form-check-label {
  color: var(--primary-blue);
  font-weight: 600;
}

.amenity-item .form-check-label {
  font-size: 14px;
  margin-left: 0.5rem;
  cursor: pointer;
}

/* ===== MEDIA SECTION STYLES ===== */

.media-subsection {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1.5rem;
  background: #f8f9fa;
}

.media-subsection-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

/* ===== IMAGE UPLOAD ===== */

.upload-section {
  margin-bottom: 1.5rem;
}

.upload-area {
  border: 2px dashed #e9ecef;
  border-radius: 8px;
  padding: 3rem 2rem;
  text-align: center;
  background: white;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.upload-area:hover {
  border-color: var(--primary-blue);
  background: rgba(0, 174, 255, 0.05);
}

.upload-label {
  cursor: pointer;
  margin: 0;
  width: 100%;
  height: 100%;
}

.upload-icon {
  color: var(--primary-blue);
  margin-bottom: 1rem;
}

.upload-area h4 {
  color: #333;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.upload-area p {
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.upload-area small {
  color: #999;
}

/* ===== UPLOADED IMAGES ===== */

.uploaded-images {
  margin-top: 1.5rem;
}

.uploaded-images h6 {
  color: #333;
  font-weight: 600;
  margin-bottom: 1rem;
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e9ecef;
  transition: all var(--transition-normal);
}

.image-item:hover {
  border-color: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-photo-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--success-green);
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transition: all var(--transition-normal);
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.image-overlay .btn {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== MEDIA PREVIEW STYLES ===== */

.media-preview {
  background: white;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
}

.youtube-preview {
  text-align: center;
}

.preview-thumbnail {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  position: relative;
}

.preview-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.virtual-tour-preview {
  text-align: center;
}

.preview-placeholder {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 2rem 1rem;
  margin-bottom: 1rem;
}

.preview-placeholder p {
  margin: 0;
  color: #6c757d;
  font-weight: 500;
}

/* ===== UPLOAD TIPS ===== */

.upload-tips {
  background: #e7f3ff;
  border: 1px solid #b3d9ff;
  border-radius: 6px;
  padding: 1rem;
  margin-top: 1rem;
}

.upload-tips h6 {
  color: var(--primary-blue);
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 14px;
}

.upload-tips ul {
  margin: 0;
  padding-left: 1.25rem;
}

.upload-tips li {
  color: #333;
  font-size: 13px;
  margin-bottom: 0.25rem;
}

/* ===== TERMS AGREEMENT ===== */

.terms-agreement {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 6px;
  padding: 1rem;
}

.terms-agreement .form-check-label {
  font-size: 13px;
  color: #333;
  margin-left: 0.5rem;
}

.terms-agreement a {
  color: var(--primary-blue);
  text-decoration: none;
  font-weight: 600;
}

.terms-agreement a:hover {
  text-decoration: underline;
}

/* ===== PREVIEW MODAL ===== */

.preview-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.preview-modal-container {
  background: white;
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.preview-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: between;
  align-items: center;
}

.preview-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  flex: 1;
}

.preview-modal-body {
  padding: 1.5rem;
}

.preview-card {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}

.preview-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.preview-content {
  padding: 1.5rem;
}

.preview-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.preview-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-blue);
}

.preview-location {
  color: #6c757d;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.preview-features {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.feature-badge {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
}

.preview-description {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet */

@media (max-width: 991px) {
  .container-narrow {
    max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  .form-section-card {
    padding: 1.5rem;
  }
  
  .amenities-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  
  .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  
  .upload-area {
    padding: 2rem 1rem;
  }
  
  .media-subsection {
    padding: 1.25rem;
  }
}

/* Mobile */

@media (max-width: 767px) {
  .container-narrow {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .form-section-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .section-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }
  
  .section-title {
    font-size: 1.1rem;
  }
  
  .section-number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .upload-area {
    padding: 1.5rem 1rem;
  }
  
  .upload-area h4 {
    font-size: 1rem;
  }
  
  .amenities-grid {
    grid-template-columns: 1fr;
  }
  
  .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
  }
  
  .preview-modal-overlay {
    padding: 1rem;
  }
  
  .preview-modal-header,
  .preview-modal-body {
    padding: 1rem;
  }
  
  .progress-section .row {
    flex-direction: column;
    gap: 1rem;
  }
  
  .media-subsection {
    padding: 1rem;
  }
  
  .media-preview {
    margin-top: 1rem;
  }
}

/* Small Mobile */

@media (max-width: 575px) {
  .form-section-card {
    padding: 0.75rem;
  }
  
  .section-title {
    font-size: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .section-number {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  
  .upload-area {
    padding: 1rem 0.75rem;
  }
  
  .images-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }
  
  .image-overlay .btn {
    width: 28px;
    height: 28px;
  }
  
  .preview-modal-header,
  .preview-modal-body {
    padding: 0.75rem;
  }
  
  .preview-content {
    padding: 1rem;
  }
  
  .media-subsection {
    padding: 0.75rem;
  }
  
  .media-subsection-title {
    font-size: 1rem;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

.form-control:focus,
.form-select:focus,
.upload-area:focus-within,
.amenity-item .form-check-input:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

.btn:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .form-section-card,
  .amenity-item,
  .upload-area,
  .image-item,
  .media-subsection,
  .media-preview {
    border-width: 2px;
  }
  
  .form-control,
  .form-select {
    border-width: 2px;
  }
  
  .section-number {
    border: 2px solid white;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .form-section-card,
  .amenity-item,
  .upload-area,
  .image-item,
  .progress-bar {
    transition: none !important;
  }
  
  .image-item:hover {
    transform: none !important;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .create-listing-page {
    background: white !important;
    padding-top: 0 !important;
  }
  
  .progress-section,
  .help-section,
  .upload-section,
  .images-grid,
  .preview-modal-overlay,
  .media-preview {
    display: none !important;
  }
  
  .form-section-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    margin-bottom: 20pt;
  }
  
  .container-narrow {
    max-width: 100% !important;
  }
}

/* Import section styles */

/* ===== HERO SECTION STYLES ===== */

.hero-section {
  position: relative;
  background: url('https://dekhojamin.com/images/original_bbec2fd6-bfc7-4194-9822-bfc8bc6379e5-jpeg.webp') center/cover;
  max-height: 600px;
  min-height: 600px;
  padding-top: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Dark blue overlay with exact specifications */

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--hero-overlay);
  opacity: 0.5;
  mix-blend-mode: multiply;
  z-index: 1;
}

.hero-section .container {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
}

/* Hero Content */

.hero-section h1 {
  font-size: 3.5rem;
  font-weight: 300;
  margin-bottom: var(--spacing-lg);
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-section .lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
  /* max-width: 600px; */
  margin: 0 auto;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== INQUIRY FORM SECTION ===== */

.inquiry-form-section {
  padding: 40px 0;
  position: relative;
  z-index: 10;
  margin-top: -140px;
}

.inquiry-form-section .container {
  padding: 0 40px;
}

/* Tab Navigation - Updated Design with NO focus styles */

.nav-tabs {
  border-bottom: none;
  margin-bottom: 0;
  justify-content: center;
  gap: 2px;
}

.nav-tabs .nav-link {
  border-radius: 4px 4px 0 0 !important;
  border: none !important;
  background-color: rgba(255, 255, 255, 0.9);
  color: #666;
  font-weight: 500;
  margin-right: 0;
  padding: 12px 24px;
  font-size: 14px;
  text-transform: none;
  transition: none !important;
  position: relative;
  min-width: 120px;
  text-align: center;
  outline: none !important;
  box-shadow: none !important;
}

.nav-tabs .nav-link.active {
  background-color: #00aeff;
  color: white;
  border: none !important;
  font-weight: 600;
  outline: none !important;
  box-shadow: none !important;
}

.nav-tabs .nav-link:hover:not(.active) {
  border: none !important;
  background-color: rgba(255, 255, 255, 1);
  color: #333;
  outline: none !important;
  box-shadow: none !important;
}

.nav-tabs .nav-link:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.nav-tabs .nav-link:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Tab Content - Updated Design with INSTANT transitions */

.tab-content .card {
  border-radius: 4px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border: none;
  background: white;
}

.tab-content .card-body {
  padding: 30px;
}

/* INSTANT tab transitions - NO fade effect */

.tab-content .tab-pane {
  transition: none !important;
  animation: none !important;
}

.tab-content .tab-pane.fade {
  transition: none !important;
  animation: none !important;
}

.tab-content .tab-pane.fade.show {
  transition: none !important;
  animation: none !important;
}

/* Override Bootstrap's fade transition */

.fade {
  transition: none !important;
}

.fade:not(.show) {
  opacity: 0;
}

.fade.show {
  opacity: 1;
  transition: none !important;
}

/* Search Form Styling - Updated to match image */

.search-form .row.g-3 {
  gap: 0;
  margin: 0;
}

.search-form .row.g-3 > * {
  margin-bottom: 0;
  padding-left: 8px;
  padding-right: 8px;
}

.search-form .row.g-3 > *:first-child {
  padding-left: 0;
}

.search-form .row.g-3 > *:last-child {
  padding-right: 0;
}

.search-form .form-control,
.search-form .form-select {
  border-radius: 6px !important;
  height: 50px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  background-color: white;
  color: #666;
  padding: 0 16px;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.search-form .form-control:focus,
.search-form .form-select:focus {
  border-color: #00aeff;
  box-shadow: 0 0 0 3px rgba(0, 174, 255, 0.1);
  outline: none;
}

.search-form .form-control::placeholder,
.search-form .form-select option:first-child {
  color: #999;
  font-weight: 400;
}

.search-form .form-label {
  font-weight: 600;
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: block;
}

/* Search Button - Updated Design with NO hover effects */

.search-form .btn-primary-custom {
  height: 50px;
  background: linear-gradient(135deg, #00aeff 0%, #0088cc 100%);
  border: none;
  border-radius: 6px !important;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: none !important;
  box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3);
  gap: 8px;
}

/* REMOVED all hover effects */

.search-form .btn-primary-custom:hover {
  background: linear-gradient(135deg, #00aeff 0%, #0088cc 100%);
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3);
}

.search-form .btn-primary-custom:active {
  transform: none !important;
}

/* Form Grid Layout */

.search-form .col-md-3 {
  flex: 0 0 auto;
  width: 20%;
}

.search-form .col-md-3:last-child {
  display: flex;
  align-items: end;
}

/* ===== RESPONSIVE HERO ADJUSTMENTS ===== */

/* Large Desktop */

@media (min-width: 1200px) {
  .hero-section h1 {
    font-size: 4rem;
  }
  
  .hero-section .lead {
    font-size: 1.375rem;
  }
}

/* Desktop */

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-section h1 {
    font-size: 3.25rem;
  }
  
  .hero-section .lead {
    font-size: 1.2rem;
  }
}

/* Tablet */

@media (max-width: 991px) {
  .hero-section {
    max-height: 500px;
    min-height: 500px;
    background-attachment: scroll;
  }
  
  .hero-section h1 {
    font-size: 2.75rem;
  }
  
  .hero-section .lead {
    font-size: 1.125rem;
  }
  
  .inquiry-form-section {
    padding: 30px 0;
    margin-top: -60px;
  }
  
  .inquiry-form-section .container {
    padding: 0 30px;
  }
  
  .tab-content .card-body {
    padding: 25px;
  }
  
  .search-form .col-md-3 {
    width: 50%;
    margin-bottom: 15px;
  }
  
  .search-form .col-md-3:nth-child(3),
  .search-form .col-md-3:nth-child(4) {
    margin-bottom: 15px;
  }
  
  .search-form .col-md-3:last-child {
    width: 100%;
    margin-bottom: 0;
  }
}

/* Mobile */

@media (max-width: 767px) {
  :root {
    --header-height: 70px;
  }
  
  .hero-section {
    max-height: 400px;
    min-height: 400px;
    background-attachment: scroll;
    padding-top: var(--header-height);
  }
  
  .hero-section h1 {
    font-size: 2.25rem;
    margin-bottom: var(--spacing-md);
  }
  
  .hero-section .lead {
    font-size: 1rem;
    padding: 0 var(--spacing-md);
  }
  
  .inquiry-form-section {
    padding: 20px 0;
    margin-top: -53px;
  }
  
  .inquiry-form-section .container {
    padding: 0 20px;
  }
  
  .tab-content .card-body {
    padding: 20px;
  }
  
  .nav-tabs .nav-link {
    padding: 10px 16px;
    font-size: 12px;
    min-width: 100px;
  }
  
  .search-form .form-control,
  .search-form .form-select {
    height: 46px;
    font-size: 14px;
  }
  
  .search-form .btn-primary-custom {
    height: 46px;
    font-size: 13px;
  }
  
  .search-form .col-md-3 {
    width: 100%;
    margin-bottom: 15px;
  }
  
  .search-form .col-md-3:last-child {
    margin-bottom: 0;
  }
}

/* Small Mobile */

@media (max-width: 575px) {
  .hero-section h1 {
    font-size: 1.875rem;
  }
  
  .hero-section .lead {
    font-size: 0.9rem;
  }
  
  .inquiry-form-section .container {
    padding: 0 var(--spacing-md);
  }
  
  .tab-content .card-body {
    padding: 15px;
  }
  
  .nav-tabs .nav-link {
    padding: 8px 12px;
    font-size: 11px;
    min-width: 80px;
  }
  
  .search-form .form-control,
  .search-form .form-select {
    height: 44px;
    font-size: 13px;
  }
  
  .search-form .btn-primary-custom {
    height: 44px;
    font-size: 12px;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* REMOVED focus states for tab navigation */

.nav-tabs .nav-link:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.nav-tabs .nav-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* High contrast mode */

@media (prefers-contrast: high) {
  .hero-section::before {
    opacity: 0.8;
  }
  
  .nav-tabs .nav-link {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
  }
  
  .nav-tabs .nav-link.active {
    border: 1px solid var(--primary-blue) !important;
  }
  
  .search-form .form-control,
  .search-form .form-select {
    border-color: #666;
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .nav-tabs .nav-link,
  .search-form .form-control,
  .search-form .form-select,
  .search-form .btn-primary-custom,
  .tab-content .tab-pane,
  .fade {
    transition: none !important;
    animation: none !important;
  }
  
  .hero-section {
    background-attachment: scroll !important;
  }
  
  .search-form .btn-primary-custom:hover {
    transform: none !important;
  }
}

/* Import slider styles */

/* Custom Slider Styles - Clean and Simple */

.custom-slider {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Slider Controls - Perfectly aligned */

.btn-slider-control {
  background-color: rgba(0, 174, 255, 0.1);
  border: 1px solid rgba(0, 174, 255, 0.3);
  color: var(--primary-blue);
  height: 42px;
  min-width: 42px;
  border-radius: var(--border-radius);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-shadow: none !important;
}

.btn-slider-control:hover:not(:disabled) {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  transform: translateY(-2px);
  box-shadow: none !important;
}

/* Slider Container - Clean layout */

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.slider-item {
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Property Card Wrapper - Handles spacing */

.property-card-wrapper {
  padding: 0 15px;
  height: 100%;
}

/* Property Card - Clean design without shadows */

.property-card {
  background: white;
  border-radius: var(--border-radius) !important;
  box-shadow: none !important;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.property-card:hover {
  transform: translateY(-8px);
  box-shadow: none !important;
  border-color: var(--primary-blue);
}

/* Property Image */

.property-image {
  height: auto;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  flex-shrink: 0;
}

.property-overlay {
  background: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.75));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Property Badges */

.badge-featured {
  background-color: var(--success-green) !important;
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  box-shadow: none !important;
}

.badge-rent {
  background-color: rgba(0, 0, 0, 0.65) !important;
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  box-shadow: none !important;
}

/* Card Body and Footer */

.property-card .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.property-card .card-footer {
  margin-top: auto;
  padding: 1rem 1.5rem;
  background-color: transparent !important;
  border-top: 1px solid #dee2e6;
}

.property-card .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #333;
}

/* Agent Image */

.property-card .card-footer img {
  object-fit: cover;
  border: 2px solid white;
  box-shadow: none !important;
}

/* Slide Indicators */

.slider-indicators {
  gap: 8px;
  margin-top: 30px;
}

.slider-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 174, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none !important;
}

.slider-indicator:hover {
  background-color: rgba(0, 174, 255, 0.5);
  transform: scale(1.1);
  box-shadow: none !important;
}

.slider-indicator.active {
  background-color: var(--primary-blue);
  transform: scale(1.2);
  box-shadow: none !important;
}

/* Remove all shadows globally */

.custom-slider .card,
.custom-slider .btn,
.custom-slider .badge,
.custom-slider .form-control,
.custom-slider .form-select,
.custom-slider .dropdown-menu,
.custom-slider .modal,
.custom-slider .popover,
.custom-slider .tooltip {
  box-shadow: none !important;
}

/* Responsive adjustments */

@media (max-width: 991px) {
  .btn-slider-control {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 11px;
  }
  
  .property-card {
    height: 450px;
  }
}

@media (max-width: 767px) {
  .btn-slider-control {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 10px;
  }

  .featured-section .property-card {
    height: auto;
    aspect-ratio: 149 / 100;
  }
  
  .property-card .card-body {
    padding: 1rem;
  }
  
  .property-card .card-footer {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 576px) {
  .btn-slider-control span {
    display: none !important;
  }
  
  .btn-slider-control {
    min-width: 32px;
    height: 32px;
    padding: 0;
  }
 
}

/* Accessibility improvements */

.btn-slider-control:focus,
.slider-indicator:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .btn-slider-control {
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid var(--primary-blue);
  }
  
  .slider-indicator {
    border: 1px solid var(--primary-blue);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .slider-track,
  .property-card,
  .btn-slider-control,
  .slider-indicator {
    transition: none !important;
  }
  
  .property-card:hover {
    transform: none;
  }
}

/* ===== SWIPER SLIDER STYLES ===== */

/* Container */

.swiper-slider-container,
.testimonials-swiper-container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Swiper Wrapper */

.property-swiper,
.testimonials-swiper {
  width: 100%;
  padding-bottom: 20px;
  overflow: visible;
}

/* Custom Slide Styling */

.swiper-slide-custom,
.testimonial-swiper-slide {
  height: auto;
  display: flex;
  align-items: stretch;
}

/* Property Card - Enhanced for Swiper */

.swiper-slide-custom .property-card {
  background: white;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e9ecef;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.swiper-slide-custom .property-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--primary-blue);
}

/* Testimonial Card - Enhanced for Swiper */

.testimonial-swiper-slide .testimonial-item {
  border-radius: var(--border-radius) !important;
  transition: all var(--transition-normal);
  border: 1px solid #f0f0f0;
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial-swiper-slide .testimonial-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--primary-blue), #0090d9);
  opacity: 0;
  transition: all var(--transition-normal);
}

.testimonial-swiper-slide .testimonial-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--primary-blue);
}

.testimonial-swiper-slide .testimonial-item:hover::before {
  opacity: 1;
}

/* Property Image */

.swiper-slide-custom .property-image {
  height: 305px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  flex-shrink: 0;
}

.swiper-slide-custom .property-overlay {
  background: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.75));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Property Badges */

.swiper-slide-custom .badge-featured {
  background-color: var(--success-green) !important;
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.swiper-slide-custom .badge-rent {
  background-color: rgba(0, 0, 0, 0.65) !important;
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Card Body and Footer */

.swiper-slide-custom .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.swiper-slide-custom .card-footer {
  margin-top: auto;
  padding: 1rem 1.5rem;
  background-color: transparent !important;
  border-top: 1px solid #dee2e6;
}

.swiper-slide-custom .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #333;
  line-height: 1.3;
}

/* Agent Image */

.swiper-slide-custom .card-footer img {
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Testimonial Specific Styles */

.testimonial-swiper-slide .quote-icon {
  opacity: 0.7;
}

.testimonial-swiper-slide .star-rating {
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.testimonial-swiper-slide .star.filled {
  color: #ffc107;
}

.testimonial-swiper-slide .star.empty {
  color: #e9ecef;
}

.testimonial-swiper-slide .testimonial-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  flex-grow: 1;
}

.testimonial-swiper-slide .client-avatar {
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-swiper-slide .client-name {
  color: #333;
  font-weight: 600;
}

.testimonial-swiper-slide .client-role {
  font-size: 0.8rem;
  color: #666;
}

/* ===== CUSTOM NAVIGATION BUTTONS ===== */

.btn-slider-control {
  background-color: rgba(0, 174, 255, 0.1);
  border: 1px solid rgba(0, 174, 255, 0.3);
  color: var(--primary-blue);
  height: 42px;
  min-width: 42px;
  border-radius: var(--border-radius);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-shadow: none !important;
  cursor: pointer;
}

.btn-slider-control:hover:not(:disabled) {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 174, 255, 0.3) !important;
}

.btn-slider-control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  background-color: rgba(0, 174, 255, 0.05);
  border-color: rgba(0, 174, 255, 0.1);
}

/* ===== CUSTOM PAGINATION ===== */

.swiper-pagination-custom,
.testimonials-pagination-custom {
  position: relative;
  bottom: auto;
  left: auto;
  width: auto;
  margin-top: 30px;
  gap: 8px;
}

.swiper-pagination-bullet-custom {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(0, 174, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;
  margin: 0 4px;
  opacity: 1;
}

.swiper-pagination-bullet-custom:hover {
  background-color: rgba(0, 174, 255, 0.5);
  transform: scale(1.1);
}

.swiper-pagination-bullet-active-custom {
  background-color: var(--primary-blue) !important;
  transform: scale(1.2);
}

/* ===== SWIPER OVERRIDES ===== */

/* Hide default Swiper navigation */

.property-swiper .swiper-button-next,
.property-swiper .swiper-button-prev,
.testimonials-swiper .swiper-button-next,
.testimonials-swiper .swiper-button-prev {
  display: none !important;
}

/* Hide default Swiper pagination */

.property-swiper .swiper-pagination,
.testimonials-swiper .swiper-pagination {
  display: none !important;
}

/* Swiper wrapper adjustments */

.property-swiper .swiper-wrapper,
.testimonials-swiper .swiper-wrapper {
  align-items: stretch;
}

/* Ensure slides maintain equal height */

.property-swiper .swiper-slide,
.testimonials-swiper .swiper-slide {
  height: auto;
  display: flex;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablet */

@media (max-width: 991px) {
  .btn-slider-control {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 11px;
  }
  
  .swiper-slide-custom .property-image {
    height: 280px;
  }
  
  .swiper-slide-custom .property-card {
    height: 450px;
  }
  
  .swiper-slide-custom .card-body {
    padding: 1.25rem;
  }
}

/* Mobile */

@media (max-width: 767px) {
  .btn-slider-control {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: 10px;
  }
  
  .swiper-slide-custom .property-image {
    height: 250px;
  }
  
  .swiper-slide-custom .property-card {
    height: 400px;
  }
  
  .swiper-slide-custom .card-body {
    padding: 1rem;
  }
  
  .swiper-slide-custom .card-footer {
    padding: 0.75rem 1rem;
  }
  
  .swiper-pagination-custom,
  .testimonials-pagination-custom {
    margin-top: 20px;
  }
  
  .swiper-pagination-bullet-custom {
    width: 10px;
    height: 10px;
  }
  
  .testimonial-swiper-slide .testimonial-item {
    padding: 1rem !important;
  }
  
  .testimonial-swiper-slide .testimonial-text {
    font-size: 0.85rem;
  }
  
  .testimonial-swiper-slide .client-avatar {
    width: 50px;
    height: 50px;
  }
}

/* Small Mobile */

@media (max-width: 576px) {
  .btn-slider-control span {
    display: none !important;
  }
  
  .btn-slider-control {
    min-width: 32px;
    height: 32px;
    padding: 0;
  }
  
  .swiper-slide-custom .property-image {
    height: 220px;
  }
  
  .swiper-slide-custom .property-card {
    height: 350px;
  }
  
  .swiper-slide-custom .card-body {
    padding: 0.875rem;
  }
  
  .swiper-slide-custom .card-footer {
    padding: 0.625rem 0.875rem;
  }
  
  .testimonial-swiper-slide .testimonial-text {
    font-size: 0.8rem;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

.btn-slider-control:focus,
.swiper-pagination-bullet-custom:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .btn-slider-control {
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px solid var(--primary-blue);
  }
  
  .swiper-pagination-bullet-custom {
    border: 1px solid var(--primary-blue);
  }
  
  .swiper-slide-custom .property-card,
  .testimonial-swiper-slide .testimonial-item {
    border: 2px solid #333;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .swiper-slide-custom .property-card,
  .testimonial-swiper-slide .testimonial-item,
  .btn-slider-control,
  .swiper-pagination-bullet-custom {
    transition: none !important;
  }
  
  .swiper-slide-custom .property-card:hover,
  .testimonial-swiper-slide .testimonial-item:hover {
    transform: none;
  }
  
  .btn-slider-control:hover {
    transform: none !important;
  }
}

/* ===== SLICK CAROUSEL STYLES ===== */

/* Slick Container */
.slick-slider-container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Slick Slider Wrapper */
.property-slick {
  width: 100%;
  padding-bottom: 20px;
  overflow: visible;
}

/* Slick Slide Item */
.slick-slide-item {
  height: auto;
  display: flex;
  align-items: stretch;
  padding: 0 15px;
}

/* Property Card in Slick */
.slick-slide-item .property-card {
  background: white;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e9ecef;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slick-slide-item .property-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--primary-blue);
}

/* Property Image in Slick */
.slick-slide-item .property-image {
  height: 305px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  flex-shrink: 0;
}

.slick-slide-item .property-overlay {
  background: linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.75));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Property Badges in Slick */
.slick-slide-item .badge-featured {
  background-color: var(--success-green) !important;
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.slick-slide-item .badge-rent {
  background-color: rgba(0, 0, 0, 0.65) !important;
  color: white;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Card Body and Footer in Slick */
.slick-slide-item .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.slick-slide-item .card-footer {
  margin-top: auto;
  padding: 1rem 1.5rem;
  background-color: transparent !important;
  border-top: 1px solid #dee2e6;
}

.slick-slide-item .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #333;
  line-height: 1.3;
}

/* Agent Image in Slick */
.slick-slide-item .card-footer img {
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Slick Navigation Buttons */
.slick-button-prev-custom,
.slick-button-next-custom {
  position: static;
  transform: none;
  width: auto;
  height: auto;
  z-index: 1;
  /* Inherit btn-slider-control styles - no overrides needed */
}

.slick-button-prev-custom:before,
.slick-button-next-custom:before {
  display: none;
}

/* Slick Pagination - Hidden */
.slick-pagination-custom {
  display: none !important;
}

.slick-pagination-custom .slick-dots-custom {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.slick-pagination-custom .slick-dots-custom li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(0, 174, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
}

.slick-pagination-custom .slick-dots-custom li button {
  display: none;
}

.slick-pagination-custom .slick-dots-custom li.slick-active {
  background-color: var(--primary-blue) !important;
  transform: scale(1.2);
}

.slick-pagination-custom .slick-dots-custom li:hover {
  background-color: rgba(0, 174, 255, 0.5);
  transform: scale(1.1);
}

/* Hide default Slick arrows */
.property-slick .slick-arrow {
  display: none !important;
}

/* Slick wrapper adjustments */
.property-slick .slick-list {
  overflow: visible;
}

.property-slick .slick-track {
  display: flex;
  align-items: stretch;
}

.property-slick .slick-slide {
  height: auto;
  display: flex;
}

/* Slick responsive adjustments */
@media (max-width: 991px) {
  .slick-slide-item {
    padding: 0 12px;
  }
  
  .slick-slide-item .property-image {
    height: 280px;
  }
  
  .slick-slide-item .property-card {
    height: 450px;
  }
  
  .slick-slide-item .card-body {
    padding: 1.25rem;
  }
}

@media (max-width: 767px) {
  .slick-slide-item {
    padding: 0 10px;
  }
  
  .slick-slide-item .property-image {
    height: 250px;
  }
  
  .slick-slide-item .property-card {
    height: 400px;
  }
  
  .slick-slide-item .card-body {
    padding: 1rem;
  }
  
  .slick-slide-item .card-footer {
    padding: 0.75rem 1rem;
  }
  
  .slick-pagination-custom {
    margin-top: 20px;
  }
  
  .slick-pagination-custom .slick-dots-custom li {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 576px) {
  .slick-slide-item {
    padding: 0 8px;
  }
  
  .slick-slide-item .property-image {
    height: 220px;
  }
  
  .slick-slide-item .property-card {
    height: 350px;
  }
  
  .slick-slide-item .card-body {
    padding: 0.875rem;
  }
  
  .slick-slide-item .card-footer {
    padding: 0.625rem 0.875rem;
  }
  
  .slick-pagination-custom .slick-dots-custom li {
    width: 8px;
    height: 8px;
  }
}

/* Slick accessibility enhancements */
.slick-button-prev-custom:focus,
.slick-button-next-custom:focus,
.slick-pagination-custom .slick-dots-custom li:focus {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* High contrast mode support for Slick */
@media (prefers-contrast: high) {
  .slick-slide-item .property-card {
    border: 2px solid #333;
  }
  
  .slick-pagination-custom .slick-dots-custom li {
    border: 1px solid var(--primary-blue);
  }
}

/* Reduced motion support for Slick */
@media (prefers-reduced-motion: reduce) {
  .slick-slide-item .property-card,
  .slick-button-prev-custom,
  .slick-button-next-custom,
  .slick-pagination-custom .slick-dots-custom li {
    transition: none !important;
  }
  
  .slick-slide-item .property-card:hover {
    transform: none;
  }
  
  .slick-button-prev-custom:hover,
  .slick-button-next-custom:hover {
    transform: none !important;
  }
}

/* ===== LOADING STATES ===== */

.swiper-slider-container.loading,
.testimonials-swiper-container.loading {
  opacity: 0.7;
  pointer-events: none;
}

.swiper-slider-container.loading::after,
.testimonials-swiper-container.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid rgba(0, 174, 255, 0.3);
  border-top-color: var(--primary-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10;
}

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

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

.swiper-slide-custom .property-card,
.testimonial-swiper-slide .testimonial-item {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

.property-swiper,
.testimonials-swiper {
  transform: translateZ(0);
}

/* ===== SECTION-SPECIFIC STYLES ===== */

/* Featured Properties Section */

.featured-section {
  padding: var(--spacing-xxl) 0;
  background-color: #FFFFFF;
  background-image: url(../src/img/bg-marker-left.jpg);
  background-position: center left;
  background-repeat: no-repeat;
}

/* Contact Form Section */

.contact-section {
  background: linear-gradient(rgba(0, 51, 90, 0.85), rgba(0, 51, 90, 0.85)), 
              url('https://images.pexels.com/photos/1450360/pexels-photo-1450360.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop') center/cover;
  padding: 40px 0;
  color: white;
}

/* Cities Section */

.cities-section {
  background: white;
  padding: var(--spacing-xxl) 0;
}

/* ===== LAYOUT UTILITIES ===== */

/* Property Grid Layout */

.property-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 30px;
}

.property-grid .tall-card {
  grid-row: span 2;
  aspect-ratio: 9 / 16;
}

.property-grid .property-card {
  border-radius: var(--border-radius) !important;
}

/* Gallery Items */

.gallery-item {
  border-radius: var(--border-radius) !important;
  overflow: hidden;
}

/* Partner Logos Section */

.partners-section {
  border-radius: var(--border-radius) !important;
}

/* ===== RESPONSIVE LAYOUT ADJUSTMENTS ===== */

.navbar-dark .nav-link.active {
    color: #000;
}
/* Tablet adjustments */

@media (max-width: 991px) {
  .contact-section {
    padding: 30px 0;
  }
  
  .featured-section,
  .cities-section {
    padding: var(--spacing-xl) 0;
  }
}

/* Mobile adjustments */

@media (max-width: 767px) {
  .contact-section {
    padding: 20px 0;
  }
  
  .featured-section,
  .cities-section {
    padding: var(--spacing-lg) 0;
  }
  
  .property-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: var(--spacing-lg);
  }
  
  .property-grid .tall-card {
    grid-row: span 1;
    height: 100%;
    aspect-ratio: 9 / 16;
  }
}

/* ===== ENHANCED SLIDER INTEGRATION ===== */

.custom-slider,
.swiper-slider-container,
.testimonials-swiper-container {
  margin-top: var(--spacing-xl);
}

/* ===== SECTION SPACING IMPROVEMENTS ===== */

section {
  position: relative;
}

.section-transition {
  transition: all var(--transition-normal);
}

/* ===== LOGO STYLING ===== */

.logo-img {
  border-radius: var(--border-radius);
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-img.loaded {
  opacity: 1;
}

/* ===== IMAGE LOADING OPTIMIZATION ===== */

/* Global image loading states */

img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([style*="opacity: 0"]) {
  opacity: 1;
}

/* Image fade-in animation */

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

.image-fade-in {
  animation: fadeInImage 0.5s ease-out;
}

/* Fallback for broken images */

img {
  background-color: #f8f9fa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f8f9fa'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='.3em' fill='%23dee2e6' font-family='Arial, sans-serif' font-size='12'%3EImage%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ===== ENHANCED ACCESSIBILITY ===== */

/* Skip to content link */

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-blue);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: var(--border-radius);
  z-index: 9999;
}

.skip-to-content:focus {
  top: 6px;
}

/* Screen reader only content */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Will-change for animated elements */

.property-card,
.city-card,
.btn,
.property-listing-card {
  will-change: transform;
}

/* GPU acceleration for smooth animations */

.property-card:hover,
.city-card:hover,
.btn:hover,
.property-listing-card:hover {
  transform: translateZ(0);
}

/* ===== PRINT STYLES ===== */

@media print {
  .header-section,
  .navbar-toggler,
  .btn,
  .custom-slider .slider-controls,
  .swiper-slider-container .swiper-navigation-wrapper,
  .testimonials-swiper-container .swiper-navigation-wrapper,
  .login-modal-overlay {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.4;
    color: #000;
    font-family: var(--font-family-primary) !important;
  }
  
  .hero-section {
    background: none !important;
    color: #000 !important;
    min-height: auto !important;
    padding: 20pt 0;
  }
  
  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  
  .property-card,
  .city-card,
  .property-listing-card {
    break-inside: avoid;
    margin-bottom: 20pt;
  }
}


.select2-container--default .select2-selection--single {
    border: 1px solid #dce0e0 !important;
}

/* ===== VIDEO SLIDER SECTION ===== */

.videos-section {
    background-color: var(--light-gray);
}

.video-slider-container {
    position: relative;
    padding: 0 60px;
    width: 100%;
}

.video-slider {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 1rem 0;
    width: 100%;
}

.video-slider::-webkit-scrollbar {
    display: none;
}

.video-slide {
    flex: 0 0 auto;
    width: 200px; /* Base width, will be overridden by media queries */
}

.video-card {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 177%; /* 1:2 aspect ratio (width:height) */
    overflow: hidden;
    background: #000;
}

.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.video-card:hover .video-thumbnail {
    transform: scale(1.1);
}

.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background var(--transition-normal);
}

.video-card:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.play-button {
    transition: transform var(--transition-normal);
}

.video-card:hover .play-button {
    transform: scale(1.1);
}

.video-info {
    padding: 0.5rem;
}

.video-title {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
    line-height: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-description {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin: 0;
    line-height: 1.5;
}

.video-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 2px solid var(--border-gray);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-md);
}

.video-slider-btn:hover {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
    box-shadow: var(--shadow-lg);
}

.video-slider-prev {
    left: 0;
}

.video-slider-next {
    right: 0;
}

.video-slider-btn svg {
    width: 24px;
    height: 24px;
}

/* Video Modal */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.video-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    z-index: 10000;
    pointer-events: none;
}

.video-modal-content > * {
    pointer-events: auto;
}

.video-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.video-modal-close:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.video-modal-close:active {
    transform: scale(0.95);
}

.video-modal-close svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

.video-modal-iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
}

.video-modal-iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Mobile Video Modal - Popup Style (Not Fullscreen) */
@media (max-width: 767px) {
    .video-modal-content {
        width: 95%;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .video-modal-close {
        top: -50px;
        right: 0;
        width: 45px;
        height: 45px;
        background: rgba(0, 0, 0, 0.8);
        border: 2px solid rgba(255, 255, 255, 0.5);
        z-index: 10001;
        position: absolute;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
    
    .video-modal-close svg {
        width: 22px;
        height: 22px;
        stroke: white;
        stroke-width: 2.5;
    }
    
    .video-modal-iframe-wrapper {
        width: 100%;
        padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
        border-radius: var(--border-radius);
    }
    
    .video-modal-iframe-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Responsive Video Slider */
@media (min-width: 992px) {
    .video-slider-container {
        padding: 0 60px;
    }
    
    .video-slide {
        /* Show exactly 4 videos on desktop */
        /* Calculation: (slider width - 3 gaps) / 4 videos */
        width: calc((100% - 4.5rem) / 4);
        /* 4.5rem = 3 gaps × 1.5rem (gap between 4 videos) */
        min-width: 220px;
        max-width: 280px;
        flex-shrink: 0;
    }
}

@media (max-width: 991px) {
    .video-slider-container {
        padding: 0 50px;
    }
    
    .video-slide {
        width: calc((100% - 3rem) / 3); /* Show 3 videos on tablet */
        max-width: 280px;
    }
}

@media (max-width: 767px) {
    .video-slider-container {
        padding: 0 40px;
    }
    
    .video-slide {
        width: calc((100% - 1.5rem) / 2); /* Show 2 videos on mobile */
        min-width: 200px;
    }
    
    .video-slider-btn {
        width: 40px;
        height: 40px;
    }
    
    .video-slider-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .video-modal-content {
        width: 95%;
    }
    
    .video-modal-close {
        top: -40px;
        width: 35px;
        height: 35px;
    }
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-top: 5px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px !important;
}
.select2-container .select2-selection--single {
    height: 40px !important;
}