/* ===================================
   Mobile Fixes for All Screen Sizes
   Ensures proper alignment and spacing
   =================================== */

/* Global mobile adjustments */
@media (max-width: 991.98px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  /* Container fixes */
  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Row fixes */
  .row {
    margin-left: -12px;
    margin-right: -12px;
  }

  .row > * {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Section spacing */
  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Image responsiveness */
  img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  /* Tablet adjustments */
  .container,
  .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Heading adjustments */
  h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.5rem;
  }

  /* Button adjustments */
  .btn {
    padding: 10px 20px;
    font-size: 0.95rem;
  }

  /* Card spacing */
  .card {
    margin-bottom: 20px;
  }

  /* Remove excessive padding */
  .py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (max-width: 576px) {
  /* Mobile phones */
  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .row > * {
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Typography */
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  p {
    font-size: 1rem;
  }

  /* Buttons */
  .btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    width: auto;
  }

  /* Full-width buttons on mobile if needed */
  .btn-block,
  .d-block {
    width: 100%;
  }

  /* Spacing adjustments */
  .mb-4 {
    margin-bottom: 1.5rem !important;
  }

  .mb-5 {
    margin-bottom: 2rem !important;
  }

  .py-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Card adjustments */
  .card {
    margin-bottom: 16px;
  }

  .card-body {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  /* Small mobile devices */
  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.35rem;
  }

  h3 {
    font-size: 1.15rem;
  }

  /* Tighter spacing */
  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .mb-5 {
    margin-bottom: 1.5rem !important;
  }
}

@media (max-width: 360px) {
  /* Very small devices */
  .container,
  .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }

  h1 {
    font-size: 1.35rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  /* Minimal padding */
  .card-body {
    padding: 12px;
  }
}

/* Fix for overflow issues */
* {
  box-sizing: border-box;
}

/* Ensure no elements exceed viewport width */
.row, .container, .container-fluid, section, div {
  max-width: 100%;
}

/* Fix carousel on mobile - Prevent size changes */
@media (max-width: 768px) {
  .carousel {
    position: relative;
    width: 100%;
  }

  .carousel-inner {
    padding: 0;
    width: 100%;
    min-height: 200px;
    position: relative;
  }

  .carousel-item {
    width: 100%;
  }

  .carousel-item img {
    width: 100%;
    height: auto;
    min-height: 200px;
    object-fit: cover;
    object-position: center;
  }

  /* Prevent layout shift during transitions - only for non-active items */
  .carousel-item-next,
  .carousel-item-prev {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  /* Keep active item in normal flow */
  .carousel-item.active {
    position: relative;
    display: block;
  }

  /* Smooth transitions without size changes */
  .carousel-item {
    transition: transform 0.6s ease-in-out;
  }

  /* Disable hover effects that might cause size changes */
  .property-card:hover,
  .property-card:active {
    transform: none;
  }

  .property-card:hover img,
  .property-card:active img {
    transform: none;
  }
}

/* Fix forms on mobile */
@media (max-width: 576px) {
  .form-control {
    font-size: 1rem;
  }

  input, select, textarea {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}