/* Estilos adicionais para garantir responsividade em dispositivos móveis */

/* Ajustes para telas pequenas */
@media (max-width: 480px) {
  /* Ajustes para o cabeçalho */
  header {
    padding: 20px 0;
  }
  
  .logo h1 {
    font-size: 2rem;
  }
  
  .tagline {
    font-size: 0.9rem;
  }
  
  /* Ajustes para o campo de pesquisa */
  .input-group {
    flex-direction: row;
  }
  
  #search-input {
    padding: 12px 15px;
    font-size: 0.9rem;
  }
  
  #search-button {
    padding: 0 20px;
  }
  
  /* Ajustes para os resultados */
  .results-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .movie-info {
    padding: 10px;
  }
  
  .movie-title {
    font-size: 0.8rem;
  }
  
  /* Ajustes para o modal */
  .modal-content {
    width: 95%;
    margin: 10px auto;
  }
  
  .modal-header h3 {
    font-size: 1.2rem;
  }
  
  .modal-footer {
    flex-direction: column;
    gap: 10px;
  }
  
  .modal-footer button {
    width: 100%;
  }
  
  /* Ajustes para as seções de personalização */
  .customize-container,
  .preview-container,
  .final-result-container {
    padding: 15px;
  }
  
  .customize-container h2,
  .final-result-container h2 {
    font-size: 1.3rem;
  }
  
  .upload-area {
    padding: 15px;
  }
  
  .option-group label {
    font-size: 0.9rem;
  }
  
  /* Ajustes para botões */
  .btn {
    padding: 10px 15px;
    font-size: 0.9rem;
  }
  
  /* Ajustes para o link de imagem */
  .link-container {
    flex-direction: column;
  }
  
  .link-container label {
    margin-bottom: 5px;
  }
  
  .link-container input {
    margin-bottom: 5px;
  }
}

/* Ajustes para tablets */
@media (min-width: 481px) and (max-width: 768px) {
  /* Ajustes para os resultados */
  .results-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
  
  /* Ajustes para botões em seções */
  .preview-actions,
  .customize-actions,
  .download-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .btn {
    flex: 1 0 auto;
    min-width: 120px;
  }
}

/* Ajustes para telas médias */
@media (min-width: 769px) and (max-width: 1024px) {
  .results-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ajustes para telas grandes */
@media (min-width: 1025px) {
  .results-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Ajustes para orientação paisagem em dispositivos móveis */
@media (max-height: 500px) and (orientation: landscape) {
  header {
    padding: 10px 0;
  }
  
  .logo h1 {
    font-size: 1.8rem;
  }
  
  .tagline {
    margin-bottom: 10px;
  }
  
  .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .modal-image {
    max-height: 150px;
  }
}

/* Melhorias de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Suporte para modo escuro */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #f0f0f0;
  }
  
  .input-group,
  .preview-container,
  .customize-container,
  .final-result-container,
  .modal-content {
    background: #242535;
    color: #f0f0f0;
  }
  
  #search-input {
    color: #f0f0f0;
  }
  
  .option-group select,
  .option-group input[type="range"] {
    background: #333;
    border-color: #555;
    color: #f0f0f0;
  }
  
  .btn-secondary {
    background: #333;
    color: #f0f0f0;
  }
  
  .btn-secondary:hover {
    background: #444;
  }
  
  .link-container {
    background: #333;
  }
  
  .link-container input {
    color: #f0f0f0;
  }
  
  .modal-header,
  .modal-footer {
    border-color: #444;
  }
  
  .close-modal {
    color: #ccc;
  }
  
  .close-modal:hover {
    color: #fff;
  }
}

/* Melhorias de toque para dispositivos móveis */
@media (hover: none) {
  .movie-card::before {
    opacity: 0.3;
  }
  
  .movie-info {
    transform: translateY(0);
    opacity: 0.9;
  }
  
  .btn {
    padding: 12px 20px;
  }
  
  .input-group:active {
    transform: translateY(-2px);
  }
}

/* Ajustes para telas muito pequenas */
@media (max-width: 320px) {
  .results-container {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .logo h1 {
    font-size: 1.5rem;
  }
}