/* ==========================================================================
   RESPONSIVE DESIGN & ADAPTIVE LAYOUTS - VERO STUDIO NAILS
   ========================================================================== */

/* Large Tablets & Small Laptops (max-width: 1024px) */
@media (max-width: 1024px) {
  .simulator-wrapper {
    grid-template-columns: 1fr;
  }
  
  .simulator-summary-card {
    position: relative;
    top: 0;
    margin-top: var(--space-xl);
  }
  
  .studio-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
  
  .studio-floating-frame {
    right: 20px;
    bottom: -20px;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

/* Intermediate Screens & Tablets (max-width: 1140px) */
@media (max-width: 1140px) {
  .nav-menu {
    display: none !important;
  }
  
  .mobile-toggle {
    display: flex !important;
  }
  
  .header-actions .btn {
    display: none;
  }
}

@media (max-width: 820px) {
  .hero-floating-badges {
    flex-direction: column;
    align-items: center;
  }
  
  .lightbox-dialog {
    grid-template-columns: 1fr;
    max-height: 85vh;
    overflow-y: auto;
  }
  
  .lightbox-image-side {
    max-height: 380px;
  }
  
  .studio-pillars {
    grid-template-columns: 1fr;
  }
}

/* Mobile Devices (max-width: 580px) */
@media (max-width: 580px) {
  .container, .container-sm {
    padding: 0 var(--space-md);
  }
  
  .section {
    padding: var(--space-3xl) 0;
  }
  
  .hero {
    padding: 110px 0 60px;
  }
  
  .hero-title {
    font-size: 2.3rem;
  }
  
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-actions .btn {
    width: 100%;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  
  .sim-options-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .haute-concierge-widget {
    bottom: 20px;
    right: 20px;
  }
  .concierge-text-pill {
    display: none;
  }
  .concierge-badge {
    padding: 4px;
    border-radius: 50%;
  }
  
  .hero-video-toggle {
    bottom: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   ADVANCED MOBILE POLISH & TOUCH OPTIMIZATION (iPhone & Android)
   ========================================================================== */

/* Prevent accidental iOS page zoom-in on input focus */
@media (max-width: 768px) {
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
  
  html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }

  /* Smooth touch scrolling for horizontal pill bars */
  .services-tabs,
  .gallery-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    gap: 8px;
    scrollbar-width: none;
  }
  .services-tabs::-webkit-scrollbar,
  .gallery-tabs::-webkit-scrollbar {
    display: none;
  }

  .service-tab-btn,
  .gallery-tab-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 0.8rem;
  }
}

/* Extra-Compact Screens & Smartphones (max-width: 480px) */
@media (max-width: 480px) {
  /* Booking Modal Mobile Layout */
  .modal-backdrop {
    padding: 8px !important;
  }

  .modal-window {
    padding: 16px 12px !important;
    max-height: 94vh !important;
    border-radius: 14px !important;
  }

  .modal-close-btn {
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .modal-header {
    margin-bottom: 14px !important;
  }

  .modal-title {
    font-size: 1.45rem !important;
  }

  .modal-desc {
    font-size: 0.82rem !important;
  }

  /* Booking Stepper on Small Screens */
  .vsn-booking-stepper {
    margin-bottom: 14px !important;
    padding: 0 2px !important;
  }

  .vsn-booking-stepper::before {
    left: 15px !important;
    right: 15px !important;
  }

  .vsn-step-pill {
    padding: 4px 8px !important;
    gap: 4px !important;
    font-size: 0.68rem !important;
  }

  .vsn-step-pill .step-num {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.68rem !important;
  }

  /* Calendar Card on Mobile */
  .vsn-cal-card {
    padding: 12px 8px !important;
  }

  .vsn-cal-month-title {
    font-size: 1rem !important;
  }

  .vsn-cal-grid {
    gap: 4px !important;
  }

  .vsn-cal-day {
    font-size: 0.8rem !important;
    border-radius: 6px !important;
  }

  .vsn-slots-grid {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 6px !important;
    max-height: 180px !important;
  }

  .vsn-slot-btn {
    padding: 6px 3px !important;
    font-size: 0.78rem !important;
  }

  .vsn-selected-summary {
    padding: 10px 12px !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .vsn-selected-summary-price {
    font-size: 1.15rem !important;
    align-self: flex-end !important;
  }

  /* Lightbox Mobile Enhancements */
  .lightbox-modal {
    padding: 8px !important;
  }

  .lightbox-dialog {
    max-height: 92vh !important;
    border-radius: 12px !important;
  }

  .lightbox-image-side {
    max-height: 250px !important;
  }

  .lightbox-details-side {
    padding: 14px 12px !important;
  }

  .lightbox-nav-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .lightbox-close {
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* Simulator Mobile Grid */
  .sim-options-grid {
    gap: 8px !important;
  }

  .sim-option-card {
    padding: 12px 10px !important;
  }

  .sim-option-title {
    font-size: 0.88rem !important;
  }

  .sim-option-desc {
    font-size: 0.75rem !important;
  }

  /* Service Card Compact Action */
  .service-card {
    padding: 16px 14px !important;
  }

  .service-title {
    font-size: 1.15rem !important;
  }

  .service-footer {
    padding-top: 10px !important;
  }
}