/* ============================================================================
   SimpleSpa Online Booking v5 - Mobile Enhancements CSS
   
   DROP-IN: Add this AFTER your main online_booking_v5 CSS
   
   Features:
   - Touch-optimized tap targets (44x44px)
   - Better mobile spacing
   - Smooth animations
   - iOS safe area support
   - Performance optimizations
   ============================================================================ */

/* ============================================================================
   1. TOUCH TARGET OPTIMIZATION (44x44px minimum)
   ============================================================================ */
@media (max-width: 768px) {
  /* Buttons */
  #sspaOnlineBookingV5 .btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 16px; /* Prevents iOS zoom */
  }
  
  #sspaOnlineBookingV5 .btn-sm {
    min-height: 44px;
    padding: 0.65rem 0.9rem;
    font-size: 15px;
  }
  
  #sspaOnlineBookingV5 .btn-lg {
    min-height: 56px;
    padding: 0.95rem 1.5rem;
    font-size: 18px;
  }
  
  /* Form controls */
  #sspaOnlineBookingV5 .form-control,
  #sspaOnlineBookingV5 .form-select {
    min-height: 44px;
    padding: 0.75rem 0.9rem;
    font-size: 16px; /* CRITICAL: prevents iOS zoom */
  }
  
  #sspaOnlineBookingV5 textarea.form-control {
    min-height: 88px; /* 2 lines minimum */
  }
  
  /* Checkboxes and radios */
  #sspaOnlineBookingV5 .form-check-input {
    width: 24px;
    height: 24px;
    margin-top: 0.1rem;
  }
  
  #sspaOnlineBookingV5 .form-check-label {
    padding-left: 0.5rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ============================================================================
   2. SERVICE LIST - MOBILE IMPROVEMENTS
   ============================================================================ */
@media (max-width: 768px) {
  /* Service cards - better spacing */
  #sspaOnlineBookingV5 #obServiceList .list-group-item {
    padding: 1rem !important;
    margin-bottom: 0.75rem;
    border-radius: 12px;
  }
  
  /* Service title - larger, more readable */
  #sspaOnlineBookingV5 #obServiceList .ob-svc-title {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;
  }
  
  /* Service meta (duration, price) */
  #sspaOnlineBookingV5 #obServiceList .ob-svc-meta {
    font-size: 14px;
    margin-top: 0.5rem;
  }
  
  /* Add button - full width on mobile */
  #sspaOnlineBookingV5 #obServiceList [data-ob-add] {
    width: 100%;
    margin-top: 0.75rem;
  }
  
  /* Service notes - better contrast */
  #sspaOnlineBookingV5 #obServiceList .ob-svc-notes {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 0.5rem;
    color: #6c757d;
  }
}

/* ============================================================================
   3. CATEGORY CHIPS - HORIZONTAL SCROLL
   ============================================================================ */
@media (max-width: 768px) {
  #sspaOnlineBookingV5 #obCategoryList {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }
  
  #sspaOnlineBookingV5 #obCategoryList .list-group-item {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  
  /* Hide scrollbar but keep functionality */
  #sspaOnlineBookingV5 #obCategoryList::-webkit-scrollbar {
    display: none;
  }
  
  #sspaOnlineBookingV5 #obCategoryList {
    scrollbar-width: none;
  }
}

/* ============================================================================
   4. TIME SLOTS - BIGGER, BETTER
   ============================================================================ */
@media (max-width: 768px) {
  #sspaOnlineBookingV5 #obSlotsMorning button,
  #sspaOnlineBookingV5 #obSlotsAfternoon button,
  #sspaOnlineBookingV5 #obSlotsEvening button {
    width: 100%;
    min-height: 56px;
    padding: 0.85rem 1rem;
    font-size: 16px;
    margin-bottom: 0.75rem;
    border-radius: 12px;
    font-weight: 500;
  }
  
  /* Icon spacing */
  #sspaOnlineBookingV5 #obSlotsMorning button i,
  #sspaOnlineBookingV5 #obSlotsAfternoon button i,
  #sspaOnlineBookingV5 #obSlotsEvening button i {
    margin-right: 0.5rem;
  }
}

/* ============================================================================
   5. WEEK STRIP - SMOOTH SCROLLING
   ============================================================================ */
@media (max-width: 768px) {
  #sspaOnlineBookingV5 #obWeekStrip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scroll-padding: 0 1rem;
  }
  
  #sspaOnlineBookingV5 #obWeekStrip .ob-daychip {
    flex: 0 0 auto;
    min-width: 80px;
    padding: 0.65rem 0.85rem;
    scroll-snap-align: start;
    border-radius: 12px;
  }
  
  /* Hide scrollbar */
  #sspaOnlineBookingV5 #obWeekStrip::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================================================
   6. CART - BOTTOM SHEET BEHAVIOR
   ============================================================================ */
@media (max-width: 992px) {
  /* Reserve space for cart */
  #sspaOnlineBookingV5 {
    padding-bottom: 140px;
  }
  
  /* Fixed bottom positioning */
  #sspaOnlineBookingV5 #obCartCol {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: linear-gradient(to top, #f6f7fb 70%, rgba(246, 247, 251, 0));
    padding: 10px 12px 12px;
    transition: transform 0.3s ease-out;
  }
  
  /* Cart card - rounded top corners */
  #sspaOnlineBookingV5 #obCartCol > .border.rounded-3 {
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.1);
  }
  
  /* Collapsed state */
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed {
    transform: translateY(0);
  }
  
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obCartList,
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed #obCartEmpty,
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .list-group {
    display: none !important;
  }
  
  /* Chevron indicator */
  #sspaOnlineBookingV5 #obCartCol .fa-chevron-up {
    transition: transform 0.3s ease;
  }
  
  #sspaOnlineBookingV5 #obCartCol.ob-cart-collapsed .fa-chevron-up {
    transform: rotate(180deg);
  }
  
  /* Tap area for header */
  #sspaOnlineBookingV5 #obCartCol .fw-semibold {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* iOS safe area */
@supports (padding: max(0px)) {
  @media (max-width: 992px) {
    #sspaOnlineBookingV5 #obCartCol {
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
  }
}

/* ============================================================================
   7. FORMS - MOBILE KEYBOARD FRIENDLY
   ============================================================================ */
@media (max-width: 768px) {
  /* Step 3 form spacing */
  #sspaOnlineBookingV5 #obStepInfo .card-body {
    padding: 1rem !important;
  }
  
  /* Input fields - prevent zoom */
  #sspaOnlineBookingV5 input[type="email"],
  #sspaOnlineBookingV5 input[type="tel"],
  #sspaOnlineBookingV5 input[type="text"],
  #sspaOnlineBookingV5 input[type="date"] {
    font-size: 16px !important; /* CRITICAL */
  }
  
  /* Labels - better spacing */
  #sspaOnlineBookingV5 .form-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 15px;
  }
  
  /* Form text / hints */
  #sspaOnlineBookingV5 .form-text {
    font-size: 13px;
    margin-top: 0.25rem;
  }
}

/* ============================================================================
   8. MODALS - MOBILE FULLSCREEN
   ============================================================================ */
@media (max-width: 576px) {
  #formBookModal .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100%;
  }
  
  #formBookModal .modal-content {
    height: 100%;
    border-radius: 0;
  }
  
  #formBookModal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   9. LOADING STATES - BETTER UX
   ============================================================================ */
#sspaOnlineBookingV5 .ob-loading-indicator {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}

#sspaOnlineBookingV5 .ob-loading-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ob-spin 0.6s linear infinite;
}

@keyframes ob-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   10. FOCUS STATES - ACCESSIBILITY
   ============================================================================ */
#sspaOnlineBookingV5 button:focus-visible,
#sspaOnlineBookingV5 .form-control:focus,
#sspaOnlineBookingV5 .list-group-item:focus-visible {
  outline: 3px solid rgba(13, 110, 253, 0.5);
  outline-offset: 2px;
}

/* Remove default browser focus */
#sspaOnlineBookingV5 button:focus:not(:focus-visible),
#sspaOnlineBookingV5 .list-group-item:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   11. SMOOTH ANIMATIONS
   ============================================================================ */
#sspaOnlineBookingV5 .list-group-item,
#sspaOnlineBookingV5 .btn,
#sspaOnlineBookingV5 .form-control {
  transition: all 0.2s ease-out;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  #sspaOnlineBookingV5 *,
  #sspaOnlineBookingV5 *::before,
  #sspaOnlineBookingV5 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   12. PERFORMANCE - HARDWARE ACCELERATION
   ============================================================================ */
#sspaOnlineBookingV5 #obCartCol,
#sspaOnlineBookingV5 #obWeekStrip,
#sspaOnlineBookingV5 .ob-cat-menu {
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ============================================================================
   13. DARK MODE SUPPORT (Optional)
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  #sspaOnlineBookingV5 {
    /* Add dark mode styles if desired */
  }
}

/* ============================================================================
   14. PRINT STYLES
   ============================================================================ */
@media print {
  #sspaOnlineBookingV5 #obCartCol,
  #sspaOnlineBookingV5 #obRestartBtn,
  #sspaOnlineBookingV5 #obServicesToolbar {
    display: none !important;
  }
  
  #sspaOnlineBookingV5 #obMainCol {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================================
   15. HIGH DPI / RETINA DISPLAYS
   ============================================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Crisper borders on retina */
  #sspaOnlineBookingV5 .border {
    border-width: 0.5px;
  }
}

/* ============================================================================
   END MOBILE ENHANCEMENTS
   ============================================================================ */