/* Desk Boo mobile hardening (PWA task #11).
 * Drop-in stylesheet for the dashboard + app shells and public booking pages.
 * Rules enforced: 44px touch targets, no hover-only controls, 16px inputs
 * (kills iOS auto-zoom), keyboard-aware chat panels, safe-area insets. */

/* 1. Universal tap-target helper — apply to every interactive element. */
.tap-target,
button.tap-target,
a.tap-target {
  min-height: 44px;
  min-width: 44px;
}

/* 2. Known offenders bumped to 44px. */
.book-btn {
  min-height: 44px; /* was 40px — public booking CTAs */
}
#booHelpSend {
  width: 44px;  /* was 40px circle */
  height: 44px; /* was 40px circle */
  min-width: 44px;
  min-height: 44px;
}
.mkt-chat-form button {
  min-height: 44px; /* chat send on marketing pages */
  padding: 10px 18px;
}

/* 3. iOS auto-zoom fix: any text input under 16px zooms on focus. */
.mkt-chat-form input {
  font-size: 16px; /* was 14px — iOS zoomed on focus */
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea {
  font-size: max(16px, 1em);
}

/* 4. Keyboard-aware chat panels — REMOVED 2026-10-01 (ios-pwa-recovery).
 * The old keyboard-offset/class contract was dead: no JS ever set the
 * offset variable or added the open class, and the selectors matched no
 * served markup (see hidden_files/ios-pwa-asset-verdict-2026-10-01.md and
 * the pre-removal snapshot for the exact deleted text). The LIVE keyboard
 * contract is keyboard-aware.js setting --kb on documentElement, consumed
 * by the pages.js inline CSS for #mktChatPanel/.chat/.chat-box — do not
 * re-add a parallel contract here. */

/* 5. PWA standalone: no overscroll bounce-through, tap highlight off. */
@media (display-mode: standalone) {
  body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* 6. No hover-only controls: anything that only appears on :hover must also
 * appear on :focus-visible and always on touch (hover: none). */
@media (hover: none) {
  .hover-only {
    display: revert !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
.hover-reveal:focus-visible .hover-only {
  display: revert !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 7. Touch-friendly form rows on small screens. */
@media (max-width: 480px) {
  .form-row {
    gap: 12px;
  }
  label {
    display: block;
    margin-bottom: 6px;
  }
}