/* =============================================================
   MCC Mobile Fix v13 — Poco X7 Pro (412 px)
   ROOT CAUSE: hero = position:absolute; inset:0 (fora do flow)
   FIX: position:relative; inset:auto — mantém overflow:hidden
   para conter filhos absolutos (dots, ROLAR, decorativos).
   ============================================================= */

@media (max-width: 1024px) {

  /* ── 1. Body scroll ── */
  body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-x: hidden !important;
  }

  /* ── 2. Root layout: libera para body-scroll ── */
  .h-screen {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .h-screen > .flex-1.min-w-0.flex.flex-col {
    height: auto !important;
    overflow: visible !important;
  }

  .flex-1.min-w-0.relative.z-10.overflow-y-auto {
    overflow: visible !important;
    height: auto !important;
  }

  /* ── 3. Hero WRAPPER — escopo só na landing (html.mcc-landing) ── */
  html.mcc-landing div[style*="inset"][style*="overflow: hidden"],
  html.mcc-landing div[style*="inset"][style*="overflow:hidden"] {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    width: 100% !important;
  }

  /* ── 4. SLIDES CONTAINER — escopo só na landing ── */
  html.mcc-landing div[style*="will-change"][style*="top: 0"],
  html.mcc-landing div[style*="will-change"][style*="top:0"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    transition: none !important;
    height: auto !important;
    width: 100% !important;
  }

  /* ── 5. Slides individuais — escopo só na landing ── */
  html.mcc-landing section[style*="height: 100dvh"],
  html.mcc-landing section[style*="height:100dvh"] {
    height: auto !important;
    min-height: unset !important;
  }

  /* ── 6. Dots de navegação — escopo só na landing ── */
  html.mcc-landing div[style*="z-index: 200"],
  html.mcc-landing div[style*="z-index:200"] {
    display: none !important;
  }

  /* ── 7. Hambúrguer ── */
  .sidebar-slide-in {
    width: min(86vw, 330px) !important;
  }

  .sidebar-slide-in .flex-1.p-2.space-y-0\.5.overflow-y-auto button {
    min-height: 46px !important;
    font-size: 14px !important;
  }

  [aria-label="Abrir menu de navegação"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  [aria-label="Abrir menu de navegação"] svg {
    width: 22px !important;
    height: 22px !important;
  }

  nav.lg\:hidden.sticky > div {
    height: 52px !important;
  }

  nav.lg\:hidden button[title="Meu perfil"] {
    width: 36px !important;
    height: 36px !important;
  }

  /* ── 8. Perfil: nav lateral → pills horizontais ── */
  div:has(> nav[style*="width: 168px"]) {
    flex-direction: column !important;
  }

  nav[style*="width: 168px"] {
    width: 100% !important;
    flex-direction: row !important;
    flex-shrink: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-edge, rgba(255,255,255,0.1)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
    height: auto !important;
  }

  nav[style*="width: 168px"]::-webkit-scrollbar { display: none !important; }

  nav[style*="width: 168px"] button {
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
    padding: 8px 18px !important;
    border-radius: 20px !important;
    border: 1px solid var(--color-edge, rgba(255,255,255,0.1)) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    border-left: none !important;
  }

  nav[style*="width: 168px"] button[style*="color: var(--color-accent)"],
  nav[style*="width: 168px"] button[style*="fontWeight: 700"],
  nav[style*="width: 168px"] button[style*="font-weight: 700"] {
    background: var(--color-accent) !important;
    color: var(--color-surface) !important;
    border-color: var(--color-accent) !important;
    font-weight: 700 !important;
  }

  nav[style*="width: 168px"] ~ div {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 16px !important;
  }

  nav[style*="width: 168px"] button > span:first-child {
    display: none !important;
  }

  /* ── 9. Decorativos pesados ── */
  .fixed.rounded-full.pointer-events-none { display: none !important; }
  [style*="right: max(40px"] { display: none !important; }
  [style*="clamp(12rem"], [style*="clamp(8rem"],
  [style*="clamp(14rem"], [style*="clamp(9rem"] { display: none !important; }

  /* ── 10. Animações de entrada: forçar visível ── */
  .hero-animate {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  [style*="opacity: 0"],
  [style*="opacity:0"] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* ── 11. Chat FAB ── */
  .ssm-btn {
    bottom: 76px !important;
    right: 16px !important;
  }

  .ssm-panel {
    width: calc(100vw - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: calc(100dvh - 60px) !important;
  }

  /* ── 12. Scroll-to-top ── */
  [aria-label="Rolar para o topo da página"] {
    bottom: 136px !important;
    right: 16px !important;
  }

  /* ── 13. Painel Admin ── */
  div[style*="height: 100vh"][style*="overflow: hidden"][style*="display: flex"] {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  div[style*="height: 100vh"][style*="overflow: hidden"] > aside {
    width: 100% !important;
    flex-direction: row !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--color-edge) !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    align-items: center !important;
  }

  div[style*="height: 100vh"][style*="overflow: hidden"] > aside > div {
    display: none !important;
  }

  div[style*="height: 100vh"][style*="overflow: hidden"] > aside > nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 8px !important;
    gap: 4px !important;
    flex: 1 !important;
    scrollbar-width: none !important;
  }

  div[style*="height: 100vh"][style*="overflow: hidden"] > aside > nav::-webkit-scrollbar {
    display: none !important;
  }

  div[style*="height: 100vh"][style*="overflow: hidden"] > aside > nav button {
    width: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 7px 12px !important;
    border-radius: 20px !important;
    border-left-width: 0 !important;
    margin-bottom: 0 !important;
    font-size: 12px !important;
    justify-content: center !important;
  }

  div[style*="height: 100vh"][style*="overflow: hidden"] > div:not(aside) {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* ── 14. Formulários ── */
  input, select, textarea { font-size: 16px !important; }
  button { touch-action: manipulation; }

  /* ── 15. Texto muito pequeno: mínimo 13px ── */
  [style*="font-size: 9px"],
  [style*="font-size: 10px"],
  [style*="font-size: 11px"],
  [style*="font-size:9px"],
  [style*="font-size:10px"],
  [style*="font-size:11px"] {
    font-size: 13px !important;
  }

  /* ── 16. "ROLAR" vertical text — esconde em mobile ── */
  [style*="writing-mode"] { display: none !important; }

  /* ── 17. Touch targets: dark-mode toggle e setas carrossel ── */
  button[style*="border-radius: 50%"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ── 18. Scroll-to-top: posição ajustada para não cobrir cards ── */
  [aria-label="Rolar para o topo da página"] {
    bottom: 80px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    opacity: 0.8 !important;
  }

  /* ── 19. Padding-bottom: gerenciado dinamicamente pelo fix-mobile.js ── */

  /* ── 20. Logo: altura definida evita layout shift ── */
  img[src*="logo-domina"] {
    width: auto !important;
    height: 36px !important;
    max-width: 160px !important;
  }
}