/* 
 * Correções para centralização de seções no preview modal em dispositivos móveis nativos
 * Este arquivo contém ajustes específicos para garantir que o conteúdo das seções
 * esteja adequadamente centralizado verticalmente em dispositivos móveis.
 */

/* Contêiner principal do modal */
.preview-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: none !important;
    -webkit-overscroll-behavior: none !important;
    touch-action: none !important;
}

.preview-modal.active {
    display: flex !important;
    align-items: center !important; /* Centralização vertical */
    justify-content: center !important; /* Centralização horizontal */
    opacity: 1 !important;
}

.preview-modal-content {
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

.preview-modal-body {
    height: calc(100% - 70px) !important; /* Ajuste para considerar o botão */
    padding: 0 !important;
    display: flex !important;
    align-items: center !important; /* Centralização vertical */
    justify-content: center !important; /* Centralização horizontal */
    overflow: hidden !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
    -webkit-overscroll-behavior: none !important;
}

/* Seções de preview */
.preview-modal .preview-sections {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important; /* Centralização vertical */
    justify-content: center !important; /* Centralização horizontal */
    touch-action: none !important;
    overscroll-behavior: none !important;
    -webkit-overscroll-behavior: none !important;
}

/* Cada seção individual */
.preview-modal .preview-section {
    position: absolute !important;
    width: 100% !important;
    height: auto !important;
    top: 47% !important; /* Pequeno ajuste visual para parecer mais centralizado */
    left: 0 !important;
    transform: translateY(-50%) !important; /* Centraliza exatamente */
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Conteúdo dentro das seções */
.preview-modal .section-content {
    width: 90% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 1.5rem 0 !important;
}

/* ============================================================
   REDESIGN DA SEÇÃO DE MÍDIA PARA MELHOR SUPORTE A SPOTIFY E YOUTUBE
   ============================================================ */

/* Container geral da seção de mídia */
.preview-modal #mediaSection {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
}

.preview-modal #mediaSection .section-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 500px !important; /* Aumentado para melhor exibição */
    padding: 0 !important; /* Removido padding para maximizar espaço */
}

/* Container universal para mídia */
.preview-modal #mediaSection .media-container {
    width: 100% !important;
    position: relative !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Estilos específicos para YouTube (16:9 aspect ratio) */
.preview-modal #mediaSection .media-container[data-media-type="youtube"] {
    aspect-ratio: 16/9 !important; 
}

/* Estilos específicos para Spotify */
.preview-modal #mediaSection .media-container[data-media-type="spotify"] {
    aspect-ratio: 1/1 !important; /* Padrão para albums e capas */
    max-height: 380px !important;
}

/* Ajuste para playlists do Spotify que são mais altas */
.preview-modal #mediaSection .media-container[data-media-type="spotify-playlist"] {
    aspect-ratio: 2/3 !important;
    max-height: 450px !important;
}

/* Estilização universal de iframe */
.preview-modal #mediaSection .media-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 12px !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    transition: opacity 0.3s ease !important;
}

/* Efeito de carregamento para o container de mídia */
.preview-modal #mediaSection .media-container::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(212, 175, 55, 0.3) !important;
    border-top-color: var(--color-accent) !important;
    animation: media-loading 1.2s infinite linear !important;
    opacity: 0.7 !important;
    pointer-events: none !important; /* Permite clicar através do loader */
    z-index: 1 !important;
}

/* Estado quando a mídia está carregada */
.preview-modal #mediaSection .media-container.loaded::after {
    display: none !important;
}

/* Mensagem para quando não há mídia selecionada */
.preview-modal #mediaSection .no-media {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 200px !important;
    color: var(--color-text-secondary) !important;
    opacity: 0.7 !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-radius: 12px !important;
}

.preview-modal #mediaSection .no-media i {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
}

@keyframes media-loading {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Garantir que o botão de voltar não interfira */
.btn-close-preview {
    position: fixed !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 400px !important;
    z-index: 1002 !important;
    margin: 0 !important;
    padding: 0.8rem 1rem !important;
}

/* Correção para provedores de altura real do viewport (iOS) */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific code */
    .preview-modal .preview-section {
        top: 45% !important; /* Centralização ótima para iOS */
    }
}

/* Ajustes para proporções de tela específicas */
@media (max-width: 768px) and (min-aspect-ratio: 2/3) {
    /* Para dispositivos com tela mais alta que larga (proporção comum) */
    .preview-modal .preview-section {
        top: 48% !important; /* Ajuste fino para a maioria dos dispositivos */
    }
}

@media (max-width: 768px) and (max-aspect-ratio: 2/3) {
    /* Para dispositivos com telas mais largas (proporcionalmente) */
    .preview-modal .preview-section {
        top: 46% !important;
    }
}

/* Para dispositivos muito pequenos, ajustar ainda mais */
@media (max-width: 360px) {
    .preview-modal .section-content {
        padding: 1rem 0 !important;
    }
    
    .btn-close-preview {
        bottom: 10px !important;
        padding: 0.7rem !important;
    }
    
    /* Ajustes específicos para mídia em telas pequenas */
    .preview-modal #mediaSection .media-container[data-media-type="youtube"] {
        aspect-ratio: 16/10 !important;
        /* Um pouco mais alto para dispositivos pequenos */
    }

    .preview-modal #mediaSection .media-container[data-media-type="spotify"] {
        max-height: 320px !important;
    }
}

/* Ajustes específicos para o container de mídia em diferentes tamanhos de tela */
@media (min-width: 361px) and (max-width: 480px) {
    .preview-modal #mediaSection .section-content {
        max-width: 95% !important;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .preview-modal #mediaSection .section-content {
        max-width: 450px !important;
    }

    .preview-modal #mediaSection .media-container[data-media-type="spotify-playlist"] {
        max-height: 400px !important; /* Ligeiramente reduzido em telas médias */
    }
}

/* Ajustes específicos para modo paisagem em dispositivos móveis */
@media (max-width: 768px) and (orientation: landscape) {
    .preview-modal #mediaSection .section-content {
        width: 70% !important;
        max-width: 600px !important; /* Maior largura em paisagem */
    }
    
    .preview-modal #mediaSection .media-container[data-media-type="youtube"] {
        aspect-ratio: 16/7 !important; /* Mais panorâmico para paisagem */
    }

    .preview-modal #mediaSection .media-container[data-media-type="spotify"] {
        aspect-ratio: 4/3 !important; /* Mais largo para paisagem */
        max-height: 60vh !important;
    }
    
    .preview-modal #mediaSection {
        top: 50% !important;
    }
}

/* Ajustes para dispositivos iOS que têm comportamentos especiais */
@supports (-webkit-touch-callout: none) {
    .preview-modal #mediaSection .media-container {
        transform: translateZ(0) !important; /* Força o hardware acceleration em iOS */
    }
}

/* Ajustes para dispositivos com tela grande (tablets e desktops) */
@media (min-width: 769px) {
    .preview-modal #mediaSection .section-content {
        max-width: 600px !important;
    }
    
    .preview-modal #mediaSection .media-container[data-media-type="spotify"] {
        max-height: 450px !important;
    }
    
    .preview-modal #mediaSection .media-container[data-media-type="spotify-playlist"] {
        max-height: 500px !important;
    }
}