/* Mobile Responsive Enhancements */
/* Solo Soul Experiences - 2026-07-16 */

/* ============================================ */
/* 1. General Mobile Fixes                     */
/* ============================================ */

@media (max-width: 768px) {
  /* Header and Navigation */
  .navbar {
    padding: 12px 20px;
    height: 60px;
    overflow: hidden;
  }

  .nav-container {
    max-width: 100%;
    padding: 0 10px;
  }

  .hamburger {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  /* Buttons - Larger tap targets (≥48px) */
  .btn, button[class*="btn"], [onclick*="openBookingModal"] {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 24px !important;
    font-size: 15px !important;
  }

  .btn-primary {
    padding: 14px 32px !important;
  }

  .hero-actions .btn {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Form Fields - touch-friendly sizing */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 15px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
  }

  #booking-experience,
  #booking-date,
  #booking-guests {
    width: 100%;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* Modal resizing */
  .modal {
    width: 96% !important;
    max-width: 600px !important;
    margin: 2% auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .booking-modal {
    padding: 12px !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 0px !important;
  }

  /* Testimonial Slider */
  .testimonial-card {
    min-width: 280px !important;
    margin: 0 14px !important;
  }

  .testimonials-nav {
    margin-top: 30px;
  }

  .testi-btn {
    width: 50px !important;
    height: 50px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .testi-dot {
    width: 8px !important;
    height: 8px !important;
  }

  /* Event table on mobile */
  .events-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .events-table th {
    font-size: 13px !important;
  }

  /* Hide desktop elements on mobile */
  .hidemb {
    display: none !important;
  }

  .br-mobile {
    display: none;
  }

  .br-desktop {
    display: block;
  }

  /* WhatsApp / Newsletter section */
  .newsletter {
    padding: 20px 10px !important;
  }

  /* Contact form section */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  /* Portal modal on small screens */
  .portal-modal {
    width: 98% !important;
    max-width: none !important;
  }
}

/* ============================================ */
/* 2. Small Screens (iPhone SE / <480px)        */
/* ============================================ */

@media (max-width: 480px) {
  :root {
    --btn-tap-min: 44px;
  }

  .btn, button {
    min-height: var(--btn-tap-min) !important;
    min-width: var(--btn-tap-min) !important;
    padding: 12px 24px !important;
  }

  .hero-headline {
    font-size: 40px !important;
    line-height: 1.2 !important;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px !important;
  }

  .booking-modal {
    padding: 8px !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 0px !important;
  }
}

/* ============================================ */
/* 3. Desktop Overrides (769px+)               */
/* ============================================ */

@media (min-width: 769px) {
  .hidemb {
    display: flex !important;
  }

  .br-desktop {
    display: none;
  }
}

/* ============================================ */
/* 4. Touch & Interaction Enhancements          */
/* ============================================ */

[onclick]:active,
[onclick]:hover,
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

button {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--sage) !important;
  outline-offset: 2px !important;
}

/* ============================================ */
/* 5. Testimonial Button Improvements          */
/* ============================================ */

.testi-btn {
  transition: all 0.3s ease;
  background: var(--forest) !important;
  border: 2px solid var(--border) !important;
  color: white;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

.testi-btn:hover {
  background: var(--sage) !important;
  transform: scale(1.05);
}

.testi-btn:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  .testi-btn {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
  }

  .testimonials-nav {
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}