/* MobiliConnect · ios.css — blindagem iPhone / navegador interno do Instagram e Facebook (08/10).
 * Quase tudo vale só com as classes que o js/ios.js põe no <html>: .mc-ios (iPhone/iPad), .mc-inapp (Instagram/Facebook),
 * .mc-toque (tela de toque). Em computador o visual não muda. Cada regra está no IOS-CHECKLIST.md. */

/* toque: sem os 300 ms e sem zoom por toque duplo nos controles (não muda nada visual) */
.mc-toque button, .mc-toque a, .mc-toque input, .mc-toque select, .mc-toque textarea, .mc-toque label, .mc-toque summary,
.mc-toque [role="button"] { touch-action: manipulation; }
/* galeria: o deslizar lateral troca a foto; vertical continua rolando */
.mc-toque .gal-palco { touch-action: pan-y pinch-zoom; }

/* iPhone: tap-highlight discreto (o cinza padrão pinta o card inteiro ao tocar num chip) */
.mc-ios button, .mc-ios a, .mc-ios label, .mc-ios summary { -webkit-tap-highlight-color: rgba(15, 26, 43, .08); }
.mc-ios input, .mc-ios select, .mc-ios textarea { -webkit-tap-highlight-color: transparent; }

/* diálogos em tela cheia: altura da tela de verdade (dvh acompanha a barra do Safari), nada de 100vh */
@supports (height: 100dvh) {
  .mc-ios .gaveta[open], .mc-ios .checkout[open], .mc-ios .galeria[open] { height: 100dvh; max-height: 100dvh; }
}
/* teclado aberto: o diálogo passa a ter o tamanho da área visível (visualViewport); o conteúdo rola dentro dele e o
   botão do fim (Continuar / Fazer pedido) chega acima do teclado */
.mc-ios.mc-teclado .gaveta[open], .mc-ios.mc-teclado .checkout[open], .mc-ios.mc-teclado .galeria[open] {
  top: var(--mc-vvt, 0px); bottom: auto; height: var(--mc-vvh, 100%); max-height: var(--mc-vvh, 100%);
}
.mc-ios.mc-teclado .ck-grade { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
.mc-ios.mc-teclado .gav-corpo { padding-bottom: 120px; }

/* fundo travado com diálogo aberto (overflow:hidden no html não segura o toque no iOS) */
.mc-ios body.mc-travado { position: fixed; top: var(--mc-sy, 0px); left: 0; right: 0; width: 100%; overflow: hidden; }

/* rolagem não "vaza" do diálogo para a página de trás; no navegador interno, menos elástico (puxar para baixo fecha a aba) */
.mc-ios dialog[open], .mc-ios .gav-corpo, .mc-ios .ck-grade, .mc-ios .gal-palco, .mc-ios .gal-miniaturas { overscroll-behavior: contain; }
.mc-ios.mc-inapp { overscroll-behavior-y: none; }

/* área segura embaixo (iPhone sem botão): toast e aviso de cookies não ficam atrás da barra do sistema */
.mc-ios .toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.mc-ios body.com-barra .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.mc-ios .cookies { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 760px) {
  .mc-ios body.com-barra .toast, .mc-ios body.com-barra .cookies { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
/* laterais em paisagem com recorte */
.mc-ios .cab-in, .mc-ios .barra-carrinho { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* campos: letra nunca abaixo de 16px no iPhone (abaixo disso o Safari dá zoom ao focar); o js/ios.js confere em tempo real,
   esta regra é a rede de segurança para campos sem tamanho próprio */
.mc-ios :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: max(16px, 1em); }
/* o iOS inventa cantos e sombra interna em campos; a loja usa os seus */
.mc-ios input:not([type="checkbox"]):not([type="radio"]), .mc-ios textarea { -webkit-appearance: none; appearance: none; border-radius: var(--raio-s, 8px); }
.mc-ios .stepper input { border-radius: 0; }

/* remendo do <dialog> (Safari antigo, sem showModal): o diálogo aparece por cima e com o fundo escuro */
.mc-dialog-remendo dialog { display: none; }
.mc-dialog-remendo dialog[open] { display: flex; position: fixed; z-index: 60; }
.mc-dialog-remendo dialog[open]::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(9, 18, 36, .55); }

/* vigia da loja (js/ios.js): aviso com botão de 44px, só aparece quando a loja não ficou pronta em 10 s */
.mc-aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-radius: var(--raio, 12px); background: var(--alerta-bg, #FFF4D6); color: var(--ink, #0F1A2B); font-size: .9375rem; }
.mc-aviso button { min-height: 44px; }