/*
 * Mobile UX + accessibility patch layer.
 * Loaded AFTER survivecart.css so these rules can safely override sizing
 * without rewriting the existing dashboard stylesheet wholesale.
 */

/* Touch targets: WCAG 2.5.5 / iOS & Android HIG both want ~44x44px minimum
   for anything tappable. Several existing buttons are smaller than that. */
.amazon-btn,
.modal-close,
.btn-alert,
.signup-submit,
.modal-submit,
.pcard-num,
.scr-cta-primary,
.scr-cta-secondary,
.scr-table-cta {
  min-height: 44px;
  min-width: 44px;
}
.amazon-btn { padding: 12px 16px; }
.modal-close { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
.ctab { min-height: 44px; }

/* Visible focus rings — the theme has no :focus-visible treatment at all,
   which fails keyboard/switch-device navigation (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.ctab:focus-visible,
.amazon-btn:focus-visible,
.pcard:focus-within {
  outline: 3px solid var(--red, #D63031);
  outline-offset: 2px;
}

/* Respect reduced-motion preference — the pulsing logo dot and modal
   transitions currently ignore it entirely. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Screen-reader-only utility (used by table captions, icon-only links) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Small-screen refinements for the country tabs and product grid — avoids
   cramped tap targets and horizontal cramping below ~380px widths common
   on Android devices. */
@media (max-width: 420px) {
  .ctab { padding: 12px 14px; font-size: 13px; }
  .nav { padding: 0 14px; }
  .btn-alert { padding: 10px 12px; font-size: 12px; }
  .product-grid { padding: 12px !important; }
}

/* Prevent iOS Safari auto-zoom on form focus (inputs under 16px trigger it) */
input[type="email"], input[type="text"], input[type="url"], textarea {
  font-size: max(16px, 1rem);
}