/* OTIMIZAÇÕES MOBILE AVANÇADAS */

/* Meta viewport já configurado nos templates */

/* MELHORIAS GLOBAIS PARA MOBILE */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Permitir seleção apenas em inputs e textareas */
input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* OTIMIZAÇÕES PARA TABLETS (768px - 1024px) */
@media (min-width: 501px) and (max-width: 1024px) {
    .main-container, .form-container, .success-container {
        max-width: 500px !important;
        margin: 20px auto !important;
        padding: 25px 20px !important;
    }
    
    .logo {
        font-size: 1.8rem !important;
    }
    
    .logo-image {
        width: 140px !important;
        height: 140px !important;
    }
    
    .btn-salao {
        padding: 14px 18px !important;
        font-size: 1.1rem !important;
        min-height: 48px !important;
    }
    
    .btn-group {
        gap: 15px !important;
    }
    
    h1, h2 {
        font-size: 1.5rem !important;
    }
    
    .subtitle {
        font-size: 1rem !important;
    }
    
    /* Formulários em tablets */
    select, input[type="date"], input[type="time"], input[type="text"], input[type="password"] {
        padding: 12px 14px !important;
        font-size: 1rem !important;
        min-height: 44px !important;
    }
    
    .form-group {
        margin-bottom: 18px !important;
    }
    
    label {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
}

/* MELHORIAS ESPECÍFICAS PARA MOBILE */
@media (max-width: 500px) {
    /* Touch targets maiores */
    .btn-salao, button {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 16px !important;
        font-size: 0.95rem !important;
    }
    
    /* Inputs mais amigáveis ao toque */
    select, input[type="date"], input[type="time"], input[type="text"], input[type="password"] {
        min-height: 44px !important;
        padding: 12px 14px !important;
        font-size: 16px !important; /* Evita zoom no iOS */
        border-radius: 8px !important;
    }
    
    /* Labels mais visíveis */
    label {
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
    }
    
    /* Espaçamento melhorado */
    .form-group {
        margin-bottom: 18px !important;
    }
    
    /* Container mais espaçoso */
    .main-container, .form-container, .success-container {
        margin: 10px !important;
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }
    
    /* Texto mais legível */
    .subtitle, .info-text {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    /* Botões de ação pequenos maiores */
    .btn-small, .btn-pequeno, .copy-btn {
        min-height: 36px !important;
        min-width: 36px !important;
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
    
    /* PIX container melhorado */
    .pix-container {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }
    
    .pix-number {
        font-size: 1rem !important;
        padding: 8px 12px !important;
        text-align: center !important;
        word-break: break-all !important;
    }
    
    /* Code box melhorado */
    .code-box {
        font-size: 1.4rem !important;
        padding: 10px 8px !important;
        letter-spacing: 2px !important;
        word-break: break-all !important;
    }
    
    /* Resultado container */
    .resultado-container {
        padding: 16px 12px !important;
        margin-top: 20px !important;
    }
    
    .resultado-container p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
}

/* OTIMIZAÇÕES PARA TELAS MUITO PEQUENAS */
@media (max-width: 360px) {
    .main-container, .form-container, .success-container {
        margin: 5px !important;
        padding: 16px 12px !important;
    }
    
    .logo {
        font-size: 1.3rem !important;
    }
    
    .logo-image {
        width: 90px !important;
        height: 90px !important;
    }
    
    h1, h2 {
        font-size: 1.1rem !important;
    }
    
    .btn-salao {
        font-size: 0.9rem !important;
        padding: 10px 14px !important;
    }
    
    .code-box {
        font-size: 1.2rem !important;
        letter-spacing: 1px !important;
    }
}

/* MELHORIAS PARA LANDSCAPE EM CELULARES */
@media (max-height: 500px) and (orientation: landscape) {
    .main-container, .form-container, .success-container {
        margin: 5px auto !important;
        padding: 15px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    .logo-image {
        width: 80px !important;
        height: 80px !important;
        margin-bottom: 8px !important;
    }
    
    .logo {
        font-size: 1.2rem !important;
        margin-bottom: 2px !important;
    }
    
    .subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 15px !important;
    }
    
    .form-group {
        margin-bottom: 12px !important;
    }
    
    .btn-group {
        gap: 10px !important;
    }
    
    .emoji {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
    }
}

/* LOADING E ESTADOS DE INTERAÇÃO */
.loading-state {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading-state::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* FEEDBACK TÁTIL PARA BOTÕES */
.btn-salao:active, .copy-btn:active, .botao:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* MELHORIAS DE ACESSIBILIDADE */
.btn-salao:focus, .copy-btn:focus, input:focus, select:focus {
    outline: 2px solid #667eea !important;
    outline-offset: 2px !important;
}

/* SMOOTH SCROLLING */
html {
    scroll-behavior: smooth;
}

/* OTIMIZAÇÕES DE PERFORMANCE */
.logo-image, .pix-logo {
    will-change: transform;
    transform: translateZ(0);
}

/* PREVENÇÃO DE ZOOM INDESEJADO NO iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select, textarea, input[type="text"], input[type="password"], 
    input[type="datetime"], input[type="datetime-local"], 
    input[type="date"], input[type="month"], input[type="time"], 
    input[type="week"], input[type="number"], input[type="email"], 
    input[type="url"], input[type="search"], input[type="tel"] {
        font-size: 16px !important;
    }
}

/* DARK MODE SUPPORT (para dispositivos que preferem)
   Mantém imagens de fundo definidas nas páginas; ajusta apenas a cor de fundo. */
@media (prefers-color-scheme: dark) {
    /* Não usar background shorthand aqui para não apagar background-image */
    body {
        background-color: #1a1b2e; /* sem !important para permitir imagem do site */
    }
}

/* REDUÇÃO DE MOVIMENTO PARA USUÁRIOS SENSÍVEIS */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* HIGH CONTRAST SUPPORT */
@media (prefers-contrast: high) {
    .btn-salao, .copy-btn, .botao {
        border: 2px solid #ffffff !important;
    }
    
    input, select {
        border: 2px solid #000000 !important;
    }
}

/* Imagens fluidas sem alterar templates */
img, picture img {
    max-width: 100%;
    height: auto;
}

/* Aprimoramentos suaves para mobile sem alterar HTML */
@media (max-width: 500px) {
    .btn-salao, .btn-voltar, .botao {
        width: 100%;
    }
    .form-container, .main-container, .success-container {
        width: min(95vw, 430px);
    }
    .logo-image {
        width: clamp(70px, 24vw, 100px) !important;
        height: clamp(70px, 24vw, 100px) !important;
    }
}