/* Custom styles for HLC Connect */

/* Safe area padding for iPhone notch and Dynamic Island */
/* This works properly in PWA mode (home screen app) */
/* Using !important to override Tailwind's p-6 class */
/* Reduced base padding to 8px for cleaner look */
.safe-top {
  padding-top: 8px !important;
  padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
}

.safe-bottom {
  padding-bottom: 8px !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Ensure keyboard input fields have stable appearance */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  caret-color: #4a6da7;
}

/* Prevent zoom on input focus for iOS */
input,
select,
textarea {
  font-size: 16px;
}

/* Responsive filter panel (mobile-first bottom sheet, desktop dialog width) */
.filter-panel {
  height: min(92dvh, 880px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
  transform: translateY(100%);
  will-change: transform;
}

.filter-panel.is-open {
  transform: translateY(0);
}

.filter-scroll {
  -webkit-overflow-scrolling: touch;
}

.filter-footer {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .filter-panel {
    left: 50% !important;
    right: auto !important;
    width: min(760px, calc(100vw - 2rem));
    border-radius: 1rem;
    transform: translate(-50%, 100%);
  }

  .filter-panel.is-open {
    transform: translate(-50%, 0);
  }
}