/* ============================================================
   WARMING NEON — dev-hire-mobile.css
   Mobile rules for Customer Storefront (dev-hire.html)
   Breakpoint: max-width 767.98px
   ============================================================ */

/* Brand subtitle hide below 600px per Phase 2 spec */
@media (max-width: 600px) {
  .brand-text-subtitle {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  /* Inactive modals and drawers are hidden from accessibility and layout */
  .modal-backdrop:not(.active) {
    visibility: hidden !important;
  }
  .modal-backdrop.active {
    visibility: visible !important;
  }
  .drawer-backdrop:not(.active) {
    visibility: hidden !important;
  }
  .drawer-backdrop.active {
    visibility: visible !important;
  }
  .modal-container {
    transform: none !important;
  }
  /* 1. Category Filter Pills: single horizontally scrolling row, no wrapping, hidden scrollbar */
  .filter-bar {
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 1rem !important;
  }
  .filter-row-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  .search-box {
    width: 100% !important;
    min-width: 0 !important;
  }
  .filter-controls {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }
  .select-control {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
  #categoryPills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: 6px !important;
    gap: 0.5rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #categoryPills::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .cat-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-height: 38px !important;
  }

  /* 2. Product Grid: single column on mobile with full-width 44px+ action buttons */
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .card-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .btn-hire {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
  }

  /* 3. Global Date Modal: fluid square day cells, single-letter weekday headers, fits 360px */
  #globalDateModal.modal-backdrop {
    padding: 12px !important;
    align-items: center !important;
  }
  #globalDateModal .modal-container {
    width: 100% !important;
    max-width: 360px !important;
    padding: 14px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
    text-align: center !important;
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .calendar-days-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
  }
  .cal-day-cell {
    aspect-ratio: 1 / 1 !important;
    min-height: 44px !important;
    min-width: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px !important;
    box-sizing: border-box !important;
  }
  .cal-day-num {
    font-size: 0.85rem !important;
  }
  .cal-stock-badge {
    font-size: 0.55rem !important;
  }
  #btnConfirmGlobalDates {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 4. Item Detail Modal: full-screen sheet with sticky bottom action bar showing live price & Add to Basket */
  #detailModal.modal-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #detailModal .modal-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #detailModal .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    background: var(--navy) !important;
    border-bottom: 1px solid var(--line-dk) !important;
    padding: 12px 16px !important;
  }
  #detailModal .detail-grid {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px !important;
    gap: 16px !important;
  }
  #detailModal .total-preview-box {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: var(--navy) !important;
    border-top: 1px solid var(--line-dk-strong) !important;
    border-radius: 0 !important;
    margin: 0 -16px -16px -16px !important;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom)) 16px !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4) !important;
    flex-shrink: 0 !important;
  }
  #btnAddBasket {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #btnContinueShopping,
  #btnProceedToCheckoutFromModal {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5. Quantity Steppers: >= 44x44 hit areas */
  .btn-qty {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .qty-val {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
  }

  /* 6. Basket Drawer: 100% width on mobile with checkout actions pinned above bottom safe area */
  #basketDrawer .drawer-panel {
    max-width: 100% !important;
    width: 100% !important;
    height: 100dvh !important;
  }
  #basketDrawer .drawer-footer {
    padding: 1rem 1rem max(16px, env(safe-area-inset-bottom)) 1rem !important;
    flex-shrink: 0 !important;
  }
  #basketDrawer .btn-checkout {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 7. Checkout, Order Confirmation & Clash Modals */
  #confirmationModal.modal-backdrop,
  #dateClashModal.modal-backdrop,
  #accountModal.modal-backdrop {
    padding: 12px !important;
  }
  #confirmationModal .modal-container,
  #dateClashModal .modal-container,
  #accountModal .modal-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #btnCloseConfirmation,
  #btnViewClashOrder,
  #btnHireMoreAnyway {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #confirmationModal table.confirm-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
  }
}