/* public/css/_ux-base.css — Polimento UX mobile global
   Carregado em todos os layouts (landing, app, admin, checkout). */

/* ============================================
   ANTI-ZOOM iOS — inputs com font-size >= 16px
   ============================================ */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ============================================
   ANTI DOUBLE-TAP ZOOM em elementos clicáveis
   ============================================ */
button,
a,
[role="button"],
.btn,
.method-tab,
.phone-cat,
.cat-card,
.showcase-cat-card,
.classroom-slide,
.bell-btn,
.team-card,
[onclick] {
  touch-action: manipulation;
}

/* ============================================
   REMOVER tap highlight cinza do Android
   ============================================ */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Mantém feedback visual com :active */
button:active,
a:active,
.btn:active,
[role="button"]:active {
  opacity: 0.85;
}

/* ============================================
   IMAGENS DE UI (logo/icones/mockups) sem long-press
   NÃO aplica em fotos de classroom/social-proof.
   ============================================ */
.logo img,
.brand-logo img,
.land-brand img,
.phone-mockup img,
.phone-card-emoji,
.method-tab-icon img,
.btn img,
nav img,
header img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* Restaurar pointer-events nos containers clicáveis (links/botões pais) */
.btn,
button,
a {
  pointer-events: auto;
}

/* ============================================
   PULL-TO-REFRESH desabilitado dentro do app
   ============================================ */
html, body {
  overscroll-behavior-y: contain;
}

/* ============================================
   SMOOTH SCROLL global
   ============================================ */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================
   FOCO VISÍVEL — só teclado, não mouse (a11y)
   ============================================ */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--primary, #FF6B6B);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   TOUCH TARGETS mínimos 44×44 (Apple HIG)
   ============================================ */
@media (max-width: 768px) {
  button:not(.btn-link):not(.btn-inline),
  .btn:not(.btn-link):not(.btn-inline),
  a.nav-link,
  [role="button"]:not(.btn-inline) {
    min-height: 44px;
  }
  .help-modal-close,
  .pix-copied-close,
  .install-modal-close,
  .install-close,
  .bell-btn,
  .carousel-arrow,
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ============================================
   SAFE AREA iOS (notch)
   ============================================ */
.topbar,
.app-header,
.public-header {
  padding-top: max(14px, env(safe-area-inset-top));
}
.bottom-nav,
.sticky-cta,
.app-bottom-bar {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* ============================================
   BODY-SCROLL-LOCK quando modal aberto
   ============================================ */
body:has(dialog[open]),
body:has(.install-modal:not([hidden])),
body:has(.permission-popup:not([hidden])) {
  overflow: hidden;
}
/* Fallback (browsers sem :has()) */
body.modal-open {
  overflow: hidden;
}

/* ============================================
   SR-ONLY (acessibilidade — esconde visual mas screen reader lê)
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   SPINNER de loading nos botões (FASE 3)
   ============================================ */
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pi-ux-spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}
@keyframes pi-ux-spin { to { transform: rotate(360deg); } }

/* Variante escura pra botões claros */
.btn-ghost .btn-spinner,
.btn-link .btn-spinner,
.btn-secondary .btn-spinner {
  border-color: rgba(45, 49, 66, 0.2);
  border-top-color: var(--text, #2D3142);
}

/* ============================================
   CATEGORIA ATIVA + PULSE (FASE 2)
   ============================================ */
.cat-card,
.phone-cat {
  transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.cat-card.cat-active,
.phone-cat.cat-active {
  background: var(--primary, #FF6B6B);
  color: #fff;
  border-color: var(--primary, #FF6B6B);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 107, 107, 0.25);
}

@keyframes pi-cat-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.cat-card.cat-clicked,
.phone-cat.cat-clicked {
  animation: pi-cat-pulse 0.25s ease-out;
}