/* ========================================
   MOBILE & RESPONSIVE - Checkout Ninja
   Media queries e ajustes para dispositivos móveis
======================================== */

/* ========================================
   TABLET (1024px e menores)
======================================== */
@media (max-width: 1024px) {
  .checkout-container-americanas {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .coluna-resumo-pedido {
    position: static;
    order: -1;
  }

  .checkout-steps-horizontal {
    padding: 2rem 1rem 2rem !important;
    margin: 0rem 1rem 2rem !important;
  }

  .checkout-ninja-header-fixed {
      padding: 20px !important;
  }
    /* ORDEM NO MOBILE: */
  .coluna-formularios {
    order: 1; /* Formulários primeiro */
  }

  .coluna-resumo-pedido {
    order: 2; /* Resumo por último */
  }
  .loja-logo-text {
      font-size: 1rem !important;
  }
}

/* ========================================
   MOBILE (768px e menores)
======================================== */
@media (max-width: 768px) {
  
  /* Layout geral */
  .checkout-ninja-principal {
    padding: var(--spacing-md) 0;
  }

  .checkout-container-americanas {
    padding: 0 var(--spacing-md);
    gap: var(--spacing-md);
  }

  /* Header mobile */
  .header-container {
    gap: var(--spacing-md);
    text-align: center;
  }

  /* Steps horizontais mobile */
  .checkout-steps-horizontal {
    padding: 2rem 1rem 2rem !important;
    margin: 0rem var(--spacing-md) 2rem;
  }
  
  .step-horizontal {
      padding: 0 var(--spacing-sm);
      max-width: 150px;
  }
  
  .step-number-horizontal {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .step-title-horizontal {
    font-size: 0.8rem;
  }
  
  .step-subtitle-horizontal {
    font-size: 1rem;
    display: none; /* Esconder subtítulos no mobile */
  }

  /* Seções mobile */
  .secao-header {
    padding: var(--spacing-md);
  }

  .secao-conteudo {
    padding: var(--spacing-md);
  }

  .btn-editar {
    width: 28px;
    height: 28px;
    padding: 0.375rem;
  }

  .btn-editar svg {
    width: 12px;
    height: 12px;
  }

  /* Formulários mobile */
  .campo-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .tipo-pessoa-opcoes {
    flex-direction: column;
    gap: 8px;
  }

  /* Email mobile - CORREÇÃO ESPECIAL */
  .email-input-container {
    flex-direction: column;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    gap: var(--spacing-sm);
  }

  .email-input {
    border: 2px solid var(--color-gray-200) !important;
    border-radius: var(--border-radius-lg) !important;
    padding: var(--spacing-md) 1.25rem !important;
    font-size: 1rem !important;
    width: 100% !important;
    height: auto !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
  }

  .email-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  }

  .email-submit-btn {
    border-radius: var(--border-radius-lg) !important;
    width: 100% !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
    font-size: 1rem !important;
    min-height: 52px !important;
    margin-top: 0 !important;
  }

  /* Cupom mobile */
  .cupom-input-container {
    flex-direction: column;
  }

  .btn-aplicar-cupom {
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
  }

  /* Resumo mobile */
  .resumo-pedido-container .btn-finalizar-compra {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1.3rem;
  }

  .produtos-resumo {
    max-height: 200px;
  }

  /* Produtos no resumo mobile */
  .produto-item {
    gap: 0.75rem;
  }
  
  .produto-imagem {
    width: 50px;
    height: 50px;
  }
  
  .produto-nome {
    font-size: var(--font-size-product);
    -webkit-line-clamp: 1; /* Apenas 1 linha no mobile */
  }
  
  .produto-quantidade-preco {
    font-size: var(--font-size-product);
  }
  
  .produto-preco {
    font-size: var(--font-size-product);
  }
  
  .checkout-ninja-header-fixed {
      padding: 20px !important;
  }
  .loja-logo-text {
    font-size: 1rem !important;
}
}

/* ========================================
   MOBILE PEQUENO (480px e menores)
======================================== */
@media (max-width: 480px) {
  
  /* Email container menor */
  .email-container {
    padding: var(--spacing-lg);
  }

  .email-title {
    font-size: 1.3rem;
  }

  /* Steps ainda menores */
  .step-horizontal {
    flex-direction: column;
    padding: 0 var(--spacing-xs);
  }
  
  .step-number-horizontal {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    margin-bottom: 0.4rem;
  }
  
  .step-title-horizontal {
    font-size: 0.8rem;
    line-height: 1.2;
  }

  /* Resumo menor */
  .resumo-pedido-container {
    padding: var(--spacing-md);
  }

  /* Produtos ainda menores */
  .produto-imagem {
    width: 40px;
    height: 40px;
  }

  .produto-nome {
    font-size: 1rem;
  }
  
  .produto-quantidade-preco {
    font-size: 1rem;
  }
  
  .produto-preco {
    font-size: 1rem;
  }
  .checkout-ninja-header-fixed {
      padding: 20px !important;
  }
  .loja-logo-text {
      font-size: 1rem !important;
  }
}

/* ========================================
   AJUSTES ESPECÍFICOS PARA LANDSCAPE
======================================== */
@media (max-width: 768px) and (orientation: landscape) {
  
  .checkout-steps-horizontal {
    padding: 2rem 1rem 2rem !important;
  }
  
  .step-number-horizontal {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    margin-bottom: var(--spacing-xs);
  }
  
  .step-title-horizontal {
    font-size: 0.8rem;
  }
  
  .email-container {
    padding: var(--spacing-xl);
    max-width: 500px;
  }

  .checkout-ninja-header-fixed {
      padding: 20px !important;
  }
  .loja-logo-text {
      font-size: 1rem !important;
  }
}

/* ========================================
   CORREÇÕES ESPECÍFICAS PARA iOS
======================================== */
@supports (-webkit-touch-callout: none) {
  
  /* Correção para inputs no iOS */
  .email-input,
  .campo-grupo input,
  .campo-metade input,
  .cupom-input-container input {
    -webkit-appearance: none;
    border-radius: var(--border-radius-sm);
  }
  
  /* Correção para botões no iOS */
  .email-submit-btn,
  .btn-avancar,
  .btn-aplicar-cupom,
  .btn-finalizar-compra {
    -webkit-appearance: none;
    border-radius: var(--border-radius-md);
  }
}

/* ========================================
   AJUSTES PARA ALTO CONTRASTE
======================================== */
@media (prefers-contrast: high) {
  
  :root {
    --color-gray-200: #000000;
    --color-gray-300: #333333;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  .secao-container,
  .resumo-pedido-container {
    border: 2px solid var(--color-gray-300);
  }
  
  .campo-grupo input:focus,
  .campo-metade input:focus {
    border-width: 3px;
  }
}

/* ========================================
   AJUSTES PARA MOVIMENTO REDUZIDO
======================================== */
@media (prefers-reduced-motion: reduce) {
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .loading-frete::after {
    animation: none;
  }
  
  .btn-avancar.loading::after,
  .email-submit-btn.loading::after,
  .btn-finalizar-compra.loading::after,
  .btn-aplicar-cupom.loading::after {
    animation: none;
  }
}

/* ========================================
   CORREÇÕES PARA IMPRESSÃO
======================================== */
@media print {
  
  .checkout-ninja-header-fixed,
  .checkout-steps-horizontal,
  .btn-avancar,
  .btn-finalizar-compra,
  .btn-aplicar-cupom,
  .btn-editar {
    display: none !important;
  }
  
  .checkout-ninja-container {
    background: white;
    color: black;
  }
  
  .secao-container,
  .resumo-pedido-container {
    border: 1px solid black;
    box-shadow: none;
  }
  
  .produtos-resumo {
    max-height: none;
    overflow: visible;
  }
}

/* ========================================
   AJUSTES PARA TELAS MUITO GRANDES
======================================== */
@media (min-width: 1440px) {
  
  .checkout-container-americanas, .checkout-steps-horizontal {
    max-width: 1400px;
  }
  
  .checkout-steps-horizontal, .checkout-steps-horizontal {
    margin: 0rem 8rem 2rem;
  }

}

/* ========================================
   AJUSTES PARA TELAS ULTRAWIDE
======================================== */
@media (min-width: 1920px) {
  
  .checkout-container-americanas, .checkout-steps-horizontal {
    max-width: 1600px;
    grid-template-columns: 3fr 1fr;
  }
  
  .checkout-steps-horizontal, .checkout-steps-horizontal {
    margin: 0rem 12rem 2rem;
  }
}