/* Mobile Responsive Styles */

/* Base Mobile Styles */
@media (max-width: 640px) {
  /* Typography */
  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  h2 {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  /* Header adjustments */
  #mainHeader {
    padding: 0.75rem 1rem !important;
  }

  #mainHeader img {
    height: 3rem !important;
    max-height: 3rem !important;
  }

  /* Menu panel width */
  #mobileMenuPanel {
    width: 85vw !important;
    max-width: 320px !important;
  }

  /* Forms and inputs */
  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  select {
    font-size: 16px !important;
    padding: 0.75rem !important;
  }

  /* Buttons */
  button,
  .btn-primary {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important;
    min-height: 44px;
  }

  /* Cards */
  .section-card,
  .passenger-card,
  .summary-box {
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Trip cards */
  .bg-card {
    padding: 0.875rem !important;
  }

  /* Grid adjustments */
  .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Spacing */
  .space-y-5 > * + * {
    margin-top: 1rem !important;
  }

  .space-y-4 > * + * {
    margin-top: 0.875rem !important;
  }

  .space-y-3 > * + * {
    margin-top: 0.75rem !important;
  }

  .space-y-2 > * + * {
    margin-top: 0.5rem !important;
  }

  /* Padding adjustments */
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-6 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }

  /* Icon sizes */
  iconify-icon {
    min-width: 1.25rem;
    min-height: 1.25rem;
  }

  /* Fixed bottom bar */
  .fixed.bottom-0 {
    padding: 0.875rem !important;
    z-index: 50;
  }

  /* Modal and popups */
  .modal-content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 0.5rem !important;
  }

  /* Seat selection grid */
  .seat-grid {
    gap: 0.5rem !important;
  }

  .seat-item {
    width: 2.5rem !important;
    height: 2.5rem !important;
    font-size: 0.75rem !important;
  }

  /* Price display */
  .price-display {
    font-size: 1.25rem !important;
  }

  /* Summary items */
  .summary-item {
    font-size: 0.875rem !important;
    padding: 0.375rem 0 !important;
  }

  /* Passenger counter */
  #passengerCount {
    font-size: 1.5rem !important;
  }

  /* Time display in trip results */
  .time-display {
    font-size: 1.125rem !important;
  }

  /* Footer adjustments */
  footer {
    font-size: 0.8125rem !important;
    padding: 1rem !important;
  }

  /* Flex adjustments for small screens */
  .flex-wrap-mobile {
    flex-wrap: wrap;
  }

  /* Hide on mobile */
  .hide-mobile {
    display: none !important;
  }

  /* Full width on mobile */
  .full-width-mobile {
    width: 100% !important;
  }

  /* Stack items vertically on mobile */
  .stack-mobile {
    flex-direction: column !important;
  }

  /* Reduce gap on mobile */
  .gap-4 {
    gap: 0.75rem !important;
  }

  .gap-3 {
    gap: 0.5rem !important;
  }

  .gap-2 {
    gap: 0.375rem !important;
  }

  /* Rounded corners adjustment */
  .rounded-3xl {
    border-radius: 1.5rem !important;
  }

  .rounded-2xl {
    border-radius: 1rem !important;
  }

  .rounded-xl {
    border-radius: 0.75rem !important;
  }
}

/* Small mobile devices */
@media (max-width: 375px) {
  html {
    font-size: 13px;
  }

  #mainHeader img {
    height: 2.5rem !important;
  }

  .seat-item {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  .btn-primary {
    font-size: 0.875rem !important;
  }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  .container {
    max-width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Grid for tablets */
  .grid-cols-1 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #mobileMenuPanel {
    width: 360px !important;
  }
}

/* Landscape mobile orientation */
@media (max-width: 900px) and (orientation: landscape) {
  .min-h-screen {
    min-height: 100vh !important;
  }

  .fixed.bottom-0 {
    position: relative !important;
  }

  #mainHeader img {
    height: 2.5rem !important;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  button,
  a,
  .clickable {
    min-height: 44px;
    min-width: 44px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Safe area adjustments for devices with notches */
@supports (padding: max(0px)) {
  .safe-top {
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  .safe-bottom {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .safe-left {
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .safe-right {
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Prevent zoom on input focus (iOS) */
@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Scrollbar styling for mobile */
@media (max-width: 640px) {
  ::-webkit-scrollbar {
    width: 4px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  }
}