/* DESKTOP.CSS - Media queries para desktop */

@media (min-width: 1024px) {

    /* === MELHORIAS GERAIS DE MODAL (Espaçamento e Tamanho) === */
    
    /* 1. Container Principal mais espaçoso */
    .support-modal {
        /* Aumenta a largura máxima para dar conforto */
        max-width: 600px !important; 
        /* Sombra suave e profunda para destacar do fundo */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
        /* Garante que o modal não fique colado nas bordas se a tela for pequena na altura */
        margin: auto;
    }

    /* 2. Cabeçalho com mais ar */
    .support-modal-header {
        padding: 2rem 2.5rem 1.5rem !important; /* Mais padding nas laterais e topo */
        border-bottom: 1px solid var(--gray-100);
    }

    .support-modal-header h2 {
        font-size: 1.5rem !important; /* Título maior */
        gap: 1rem; /* Afasta o ícone do texto */
    }

    /* 3. Corpo com muito mais respiro */
    .support-modal-body {
        padding: 2rem 2.5rem 2.5rem !important; /* Padding generoso */
    }

    /* === FORMULÁRIOS E INPUTS (Adeus visual espremido) === */
    
    /* Inputs e Textareas maiores */
    .support-modal input,
    .support-modal textarea,
    .support-modal select {
        padding: 1rem !important; /* Área de digitação maior */
        font-size: 1rem !important; /* Texto mais legível */
        margin-top: 0.5rem;
    }

    .form-group label {
        font-size: 0.95rem !important;
        font-weight: 500;
        color: var(--gray-700);
    }

    .form-group {
        margin-bottom: 1.5rem !important; /* Mais espaço entre campos */
    }

    /* === CARDS DE OPÇÃO (Denúncia e Report) === */
    /* Transforma a lista vertical num Grid de 2 colunas */
    .option-cards {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Duas colunas lado a lado */
        gap: 1rem;
    }

    .option-card {
        margin-bottom: 0 !important; /* Remove margem antiga pois usamos gap */
        padding: 1rem !important;
        height: 100%; /* Garante altura igual */
        align-items: center;
    }

    /* === MODAL DE SHARE (Ícones maiores) === */
    /* Aumenta a área de clique e visual dos botões de partilha */
    .share-options {
        gap: 2rem !important; /* Mais espaço entre ícones */
        padding: 1rem 0;
    }

    .share-option div {
        width: 64px !important;  /* Ícone maior (era 48px) */
        height: 64px !important;
        font-size: 1.2rem !important;
    }
    
    .share-preview {
        padding: 1.5rem !important;
        margin-bottom: 2rem !important;
    }

    /* === MODAL DE SUPORTE (Abas e FAQ) === */
    .support-tabs {
        padding: 0 2.5rem !important; /* Alinha as abas com o padding do corpo */
        margin-top: 1rem;
    }

    .support-tab {
        padding: 1rem 1rem !important;
        font-size: 1rem !important;
    }

    .faq-item {
        margin-bottom: 1rem !important;
        border: 1px solid var(--gray-200); /* Adiciona borda para separar melhor */
        border-radius: var(--radius-md);
        padding: 0.5rem;
    }
    
    .faq-question {
        padding: 1rem !important;
        font-weight: 500;
    }
    
    .faq-answer {
        padding: 0 1rem 1rem !important;
    }

    /* Botão de envio grande e confortável */
    .submit-button {
        padding: 1rem !important;
        font-size: 1.1rem !important;
        margin-top: 2rem !important;
    }

    /* Container maior */
    .container, .main-content {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    /* === PÁGINA DE PRODUTO & RESULTADO === */
    /* Cria um grid: Imagem na Esquerda, Detalhes na Direita */
    .product-content, 
    .result-content {
        display: grid;
        grid-template-columns: 1fr 450px; /* Coluna flexível + Coluna fixa de 450px */
        gap: 4rem;
        align-items: start;
        margin-top: 2rem;
    }

    /* Ajuste da Imagem/Slider no Desktop */
    .image-comparison-container, 
    .result-image-container {
        width: 100%;
        max-width: 600px; /* Limite para não ficar gigante */
        margin: 0 auto; /* Centraliza se a coluna for maior */
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        aspect-ratio: 3/4; /* Mantém proporção vertical */
    }

    /* Coluna de Detalhes (Sticky) */
    .product-details, 
    .result-details {
        position: sticky;
        top: 100px; /* Fica fixo ao rolar a página */
        background: white;
        padding: 2rem;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-200);
        box-shadow: var(--shadow-sm);
    }

    /* Ajuste de Títulos e Textos */
    .product-title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .product-description {
        font-size: 1.1rem;
        line-height: 1.6;
        color: var(--gray-600);
    }

    /* Botão de Ação Gigante */
    .action-button-fixed {
        position: static; /* Remove o fixed do mobile */
        transform: none;
        width: 100%;
        margin-top: 2rem;
        box-shadow: none;
    }

    /* ============== */

    /* Galeria - 3 colunas */
    .masonry-grid {
        column-count: 3;
        column-gap: var(--space-5);
    }

    /* Produto - layout centralizado similar ao mobile/tablet */
    .product-showcase {
        max-width: 600px;
        margin: 0 auto !important;
    }

    /* Upload/Pagamento centralizados */
    .upload-page,
    .payment-page {
        max-width: 700px;
        margin: 0 auto;
    }

    /* Bottom nav - comportamento adaptativo */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--space-3) var(--space-4);
        background: white;
        box-shadow: var(--shadow-lg);
        justify-content: center;
        gap: var(--space-4);
        max-width: 800px;
        margin: 0 auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* Nav actions (resultado, pagamento) centralizados no desktop */
    .nav-actions {
        position: fixed;
        bottom: var(--space-4);
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: auto;
        max-width: 600px;
        flex-direction: row;
        gap: var(--space-3);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: var(--space-3) var(--space-4);
        background: white;
    }

    /* Sugestões em grid 3 colunas */
    .horizontal-scroll {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    /* Cards com hover mais visível */
    .card-wrapper:hover .card-overlay {
        opacity: 1;
    }

    /* Modais centralizados */
    .modal {
        max-width: 600px;
    }

    /* Toast no centro superior */
    .toast-container {
        left: 50%;
        transform: translateX(-50%);
        max-width: 500px;
        top: var(--space-6);
    }

    /* Header sticky melhorado */
    .page-sticky-header {
        padding: var(--space-2) 0;
    }

    /* Search bar maior */
    .search-bar {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Feedback section melhorado */
    .feedback-section {
        max-width: 700px;
        margin: var(--space-6) auto !important;
    }

    /* Loading state centralizado */
    .loading-state {
        min-height: 70vh;
    }

    .product-meta {
        justify-content: space-around !important;
    }
}

/* Desktop extra large (1440px+) */
@media (min-width: 1440px) {
    .container {
        max-width: 1440px;
    }

    /* 4 colunas em telas muito grandes */
    .masonry-grid {
        column-count: 4;
        column-gap: var(--space-6);
    }

    /* Sugestões em 4 colunas */
    .horizontal-scroll {
        grid-template-columns: repeat(4, 1fr);
    }
}