/*
Fix
para
o
fundo
lilás
no
iPhone
14
Pro
Max
e
outros
dispositivos
iOS
*/
@supports (-webkit-touch-callout: none) {
  /* CSS específico para iOS */
  :root {
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
    --safe-area-inset-right: env(safe-area-inset-right);
  }
  
  /* Corrigir posicionamento do body para evitar que fique escondido sob a barra de status */
  body {
    padding-top: var(--safe-area-inset-top, 0);
    padding-bottom: var(--safe-area-inset-bottom, 0);
    min-height: -webkit-fill-available;
    width: 100%;
    position: relative;
    overflow-x: hidden;
  }
  
  /* Classe específica para o modo standalone */
  body.standalone-mode {
    /* Aumenta padding para garantir que conteúdo esteja acessível */
    padding-top: calc(var(--safe-area-inset-top) + 20px);
    /* Escurece a barra de status para destacar o conteúdo */
    background-color: #f8f6f6;
  }
  
  html {
    height: -webkit-fill-available;
  }
  
  /* Corrigir o cabeçalho para que fique visível */
  .header {
    position: sticky;
    top: 0;
    padding-top: var(--safe-area-inset-top, 0);
    background-color: #f8f6f6;
    z-index: 100; 
    width: 100%;
  }
  
  /* Quando em modo standalone, o cabeçalho precisa ser fixo */
  body.standalone-mode .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: calc(var(--safe-area-inset-top) + 15px); /* Ajuste para mais espaço acima */
  }
  
  /* Quando em modo standalone, ajustar o espaço para o conteúdo principal */
  body.standalone-mode .categories-nav {
    margin-top: calc(70px + var(--safe-area-inset-top)); /* Altura aproximada do header + safe area */
  }
  
  /* Corrigir o posicionamento dos elementos dentro do cabeçalho */
  .logo, .search-bar, .header-controls {
    margin-top: 0;
  }
  
  /* Garantir que o conteúdo principal comece abaixo do cabeçalho */
  .categories-nav {
    padding-top: 10px;
  }
  
  /* Adicionar botão de voltar no modo standalone */
  @media all and (display-mode: standalone) {
    .standalone-back {
      display: flex !important;
    }
  }
  
  /* Estilo do botão de voltar */
  .standalone-back {
    display: none;
    position: fixed;
    bottom: max(20px, var(--safe-area-inset-bottom));
    left: max(20px, var(--safe-area-inset-left));
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
  
  /* ===== CORREÇÕES PARA MODAIS EM IOS ===== */
  
  /* Posicionar modal corretamente */
  .modal, .view-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: var(--safe-area-inset-top, 0);
    padding-bottom: var(--safe-area-inset-bottom, 0);
    z-index: 1000;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Corrigir modais para não serem cortados */
  .modal-content, .view-modal-content {
    max-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 40px);
    margin-top: calc(var(--safe-area-inset-top) + 10px);
    margin-bottom: calc(var(--safe-area-inset-bottom) + 10px);
    padding-top: 50px; /* Espaço extra para botão fechar */
    position: relative;
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  /* Prevenir zoom em dispositivos móveis */
  .view-modal-content * {
    font-size: 16px !important;
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    touch-action: pan-x pan-y;
  }
  
  /* Exceções para o título no modal de visualização */
  .view-modal-content .view-modal-title {
    font-size: 1.3rem !important;
  }
  
  /* Ajustar tamanho da fonte para outros elementos no modal */
  .view-modal-content .price-block h3 {
    font-size: 0.95rem !important;
  }
  
  .view-modal-content .view-modal-details h3,
  .view-modal-content .view-modal-category h3,
  .view-modal-content .view-modal-availability h3,
  .view-modal-content .view-modal-quantity h3 {
    font-size: 0.95rem !important;
  }
  
  .view-modal-content .discounted-price,
  .view-modal-content .regular-price {
    font-size: 1rem !important;
  }
  
  .view-modal-content .original-price {
    font-size: 0.85rem !important;
  }
  
  .view-modal-content .discount-badge {
    font-size: 0.85rem !important;
  }
  
  /* Manter botão de fechar sempre visível, mesmo em iOS */
  .modal .close, .view-modal .modal-close {
    position: fixed;
    top: calc(var(--safe-area-inset-top) + 15px);
    right: 15px;
    width: 44px;
    height: 44px;
    background-color: var(--primary-color, #9d4edd);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1010;
    cursor: pointer;
  }
  
  /* Estilo específico para botão de fechar no modal de visualização de produto para iOS */
  .view-modal .ios-close-btn {
    position: fixed !important;
    top: calc(var(--safe-area-inset-top) + 10px) !important;
    right: 10px !important;
    width: 50px !important;
    height: 50px !important;
    background-color: rgba(244, 67, 54, 0.95) !important; /* Vermelho mais visível */
    color: white !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2000 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    border: 2px solid white !important;
    transition: transform 0.2s !important;
  }
  
  /* Efeito de hover/active para o botão flutuante */
  .view-modal .ios-close-btn:active {
    transform: scale(0.95) !important;
  }
  
  /* Botão adicional no final do modal para iOS */
  .ios-bottom-close-btn {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  
  /* Adicionar botão secundário de fechar no final dos modais */
  .modal-content::after {
    content: "×";
    display: block;
    width: 44px;
    height: 44px;
    margin: 20px auto 0;
    background-color: #f44336;
    color: white;
    border-radius: 50%;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
  }
  
  /* Usar altura visual real em vez da altura da janela que pode ser imprecisa no iOS */
  .modal, .view-modal, .cart-sidebar, .fullscreen-overlay {
    height: calc(var(--vh, 1vh) * 100);
  }
  
  /* Fixar problemas específicos em diferentes modelos de iPhone */
  @media screen and (device-width: 430px) and (device-height: 932px),
         screen and (device-width: 393px) and (device-height: 852px),
         screen and (device-width: 428px) and (device-height: 926px),
         screen and (device-width: 390px) and (device-height: 844px) {
    .header {
      padding-top: var(--safe-area-inset-top);
      top: var(--safe-area-inset-top);
    }

    /* Elemento para cobrir a barra de status com a cor correta */
    body::before {
      background-color: #f8f6f6;
    }
    
    /* Ajustes específicos para modal de produto */
    .view-modal .ios-close-btn {
      top: calc(var(--safe-area-inset-top) + 15px) !important;
    }
  }
  
  /* Estilos específicos para modo standalone */
  @media all and (display-mode: standalone) {
    /* Ajustes para o modal de visualização em modo standalone */
    .view-modal .view-modal-content {
      padding-top: calc(var(--safe-area-inset-top) + 40px);
    }
    
    /* Garantir visibilidade do botão de fechar */
    .view-modal .ios-close-btn {
      opacity: 1 !important;
    }
  }
  
  /* Estilos específicos para iOS em modo standalone */
  body.ios-standalone {
    /* Garantir bastante espaço acima para a barra de status */
    padding-top: calc(var(--safe-area-inset-top, 50px) + 20px) !important;
  }
  
  body.ios-standalone .header {
    /* Posicionamento fixo com espaço seguro */
    position: fixed !important;
    top: 0 !important;
    padding-top: calc(var(--safe-area-inset-top, 50px) + 15px) !important;
    background-color: #f8f6f6 !important;
    z-index: 100 !important;
    width: 100% !important;
  }
  
  body.ios-standalone .categories-nav {
    /* Empurrar o conteúdo para baixo */
    margin-top: calc(70px + var(--safe-area-inset-top, 50px)) !important;
    padding-top: 20px !important;
  }
  
  /* Ajuste específico para alguns modelos de iPhone com notch/dynamic island */
  @media screen and (device-width: 430px) and (device-height: 932px),
         screen and (device-width: 393px) and (device-height: 852px),
         screen and (device-width: 428px) and (device-height: 926px),
         screen and (device-width: 390px) and (device-height: 844px),
         screen and (device-width: 414px) and (device-height: 896px),
         screen and (device-width: 375px) and (device-height: 812px) {
    
    body.ios-standalone {
      padding-top: 70px !important;
    }
    
    body.ios-standalone .header {
      padding-top: 60px !important;
    }
    
    body.ios-standalone .categories-nav {
      margin-top: 130px !important; /* Valor maior para garantir visibilidade */
    }
  }
  
  /* Garantir espaço suficiente para iOS, independente do modo de exibição */
  @media all and (display-mode: standalone) {
    body {
      padding-top: max(50px, env(safe-area-inset-top)) !important;
    }
    
    .header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      padding-top: max(45px, env(safe-area-inset-top)) !important;
      z-index: 1000 !important;
    }
    
    .categories-nav {
      margin-top: calc(70px + max(50px, env(safe-area-inset-top))) !important;
    }
  }
  
  /* Garantir que o botão X do modal de produto fique sempre visível */
  .view-modal .modal-close {
    position: fixed !important;
    top: max(50px, env(safe-area-inset-top)) !important;
    right: 15px !important;
    width: 50px !important;
    height: 50px !important;
    background-color: rgba(244, 67, 54, 0.95) !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3000 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    border: 2px solid white !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* Otimizar performance em dispositivos móveis */
  .view-modal {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translate3d(0,0,0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
    transform: translate3d(0,0,0);
    transform: translateZ(0);
  }
  
  /* Melhorar rolagem em iOS */
  .view-modal-content {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    max-height: 100vh;
    padding-bottom: 50px;
  }
  
  /* Desativar animações complexas em iOS para evitar travamentos */
  @media (-webkit-min-device-pixel-ratio: 0) {
    .view-modal * {
      animation-duration: 0.001s !important;
      animation-delay: 0s !important;
      transition-duration: 0.001s !important;
      transition-delay: 0s !important;
    }
    
    /* Limitar o carregamento de imagens ao estritamente necessário */
    .view-modal-carousel img:not(:first-of-type) {
      opacity: 0;
      position: absolute;
      pointer-events: none;
    }
    
    .view-modal-carousel img.active {
      opacity: 1;
      position: static;
      pointer-events: auto;
    }
  }
  
  /* Garantir que todos os botões de navegação permaneçam clicáveis */
  .view-nav-btn, .thumbnail-img {
    pointer-events: auto !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Regra para ocultar botões de backup quando não há modal visível */
  body:not(:has(.view-modal[style*="display: block"], .modal[style*="display: block"])) .backup-close-btn {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Backup para navegadores que não suportam :has */
  @media screen {
    html:not(:has(body:empty)) + body .backup-close-btn:not(:hover) {
      animation: hideBackupButton 0.5s forwards;
      animation-delay: 1s;
    }
    
    @keyframes hideBackupButton {
      to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }
    }
  }
}