/* Responsive Enhancements */

/* Base Mobile-First Approach */
html {
  font-size: 16px;
}

body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* Mobile Navigation */
.navbar-toggler {
  padding: 0.5rem;
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

.navbar-toggler-animation {
  transition: all 0.3s ease;
}

.navbar-collapse {
  transition: all 0.3s ease;
}

/* Mobile Hero Section */
@media (max-width: 767.98px) {
  .hero-section {
    min-height: 80vh;
    padding: 5rem 0 3rem !important;
  }
  
  .hero-section h1 {
    font-size: 2.25rem;
  }
  
  .hero-section h5 {
    font-size: 1rem;
  }
}

/* Mobile Destination Cards */
@media (max-width: 767.98px) {
  .destination-card-tropical .destination-image,
  .destination-card-safari .destination-image {
    height: 250px !important;
  }
  
  .destination-card-safari-main .destination-image {
    height: 350px !important;
  }
  
  .destination-card-tropical-small .destination-image,
  .destination-card-safari-small .destination-image {
    height: 150px !important;
  }
}

/* Mobile Package Cards */
@media (max-width: 767.98px) {
  .pkg-card {
    margin-bottom: 1rem;
  }
  
  .pkg-overlay {
    padding: 15px;
  }
  
  .pkg-title {
    font-size: 1.1rem;
  }
  
  .pkg-meta {
    font-size: 0.85rem;
  }
  
  .pkg-price {
    padding: 3px 6px;
    font-size: 0.85rem;
  }
}

/* Mobile Form Elements */
@media (max-width: 767.98px) {
  .form-control, 
  .form-select, 
  .form-guest-selector {
    font-size: 16px; /* Prevents iOS zoom on focus */
    height: 48px;
  }
  
  .flatpickr-calendar {
    width: 100%;
    max-width: 307px;
  }
  
  .guest-selector-dropdown {
    width: 100%;
  }
}

/* Mobile Offcanvas */
@media (max-width: 767.98px) {
  .offcanvas {
    width: 100% !important;
  }
  
  .offcanvas-w-500px {
    width: 100% !important;
  }
}

/* Mobile Travel Tips */
@media (max-width: 767.98px) {
  .card-title {
    font-size: 1.1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
}

/* Mobile Instagram Section */
@media (max-width: 767.98px) {
  .instagram-card {
    margin-bottom: 1rem;
  }
}

/* Mobile Footer */
@media (max-width: 767.98px) {
  footer {
    text-align: center;
  }
  
  footer .nav {
    justify-content: center;
  }
  
  footer .list-inline {
    margin-bottom: 1rem;
  }
}

/* Tablet Adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-section {
    min-height: 60vh;
  }
  
  .hero-section h1 {
    font-size: 2.5rem;
  }
}

/* Touch-friendly Elements */
@media (max-width: 991.98px) {
  .btn, 
  .nav-link, 
  .dropdown-item {
    padding: 0.5rem 0.75rem;
  }
  
  input[type="checkbox"], 
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }
}

/* Carousel Adjustments */
@media (max-width: 767.98px) {
  .custom-carousel {
    height: 400px;
  }
  
  .custom-carousel-card {
    width: 250px;
    height: 350px;
  }
  
  .custom-carousel-controls {
    bottom: 1rem;
  }
}

/* Fix for fixed positioning issues on mobile */
@media (max-width: 767.98px) {
  .sticky-top, 
  .position-sticky {
    position: relative !important;
  }
}

/* Improve table responsiveness */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Better tap targets */
@media (max-width: 767.98px) {
  .nav-link, 
  .btn, 
  .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}