/**
 * Estilos responsivos para o gerador de prompts
 * Ajustes específicos para dispositivos móveis e tablets
 */

/* Melhorias de contraste para o campo de pesquisa */
#search-options {
    background-color: #2d3748 !important;
    color: #ffffff !important;
    border: 1px solid #4a5568 !important;
}

#search-options::placeholder {
    color: #a0aec0 !important;
    opacity: 1;
}

.input-group-text.bg-dark-input {
    background-color: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    border-right: none !important;
}

/* Ajustes gerais para dispositivos móveis */
@media (max-width: 767px) {
    /* Reduzir tamanho do título principal */
    h1.display-4 {
        font-size: 1.8rem;
    }
    
    /* Ajustar espaçamento dos cards */
    .card {
        margin-bottom: 1rem;
    }
    
    /* Ajustar tamanho dos botões */
    .btn {
        padding: 0.375rem 0.75rem;
    }
}

/* Ajustes específicos para o cabeçalho da categoria */
@media (max-width: 767px) {
    /* Melhorar layout do cabeçalho da categoria */
    .card-header {
        padding: 0.75rem;
        flex-direction: column;
    }
    
    /* Reorganizar cabeçalho da categoria para dispositivos móveis */
    .card-header .d-flex {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        margin-bottom: 8px;
    }
    
    /* Ajustar título da categoria */
    .card-header h3 {
        font-size: 1.2rem;
        margin-bottom: 0 !important;
        margin-right: auto;
        display: flex;
        align-items: center;
        flex: 1;
    }
    
    .card-header h3 .category-icon {
        margin-right: 8px;
        font-size: 1.1rem;
    }
    
    /* Ajustar botões do cabeçalho - NOVO LAYOUT */
    .card-header .gap-2 {
        display: flex;
        flex-direction: column;
        gap: 8px !important;
        margin-top: 8px;
        width: 100%;
    }
    
    /* Ajustar botões de ação */
    .card-header .btn-sm {
        width: 100%;
        padding: 10px 15px;
        font-size: 1rem;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        white-space: nowrap;
    }
    
    /* Botão Adicionar */
    .card-header .btn-outline-success {
        background-color: rgba(80, 250, 123, 0.1);
        border: 1px solid #50fa7b;
        color: #50fa7b;
    }
    
    /* Botão Aleatório */
    .card-header .btn-outline-primary {
        background-color: rgba(189, 147, 249, 0.1);
        border: 1px solid #bd93f9;
        color: #bd93f9;
    }
    
    /* Ajustar ícones nos botões */
    .card-header .btn-sm i {
        font-size: 1rem;
        margin-right: 6px;
    }
    
    /* Ajustar o título da categoria e o ícone */
    .card-header .justify-content-between {
        width: 100%;
    }
    
    /* Estilo especial para o cabeçalho da categoria de cores */
    .card-header[data-category="color"] h3,
    .card-header[data-category="hair_color"] h3,
    .card-header[data-category="object_color"] h3,
    .card-header[data-category="bear_color"] h3 {
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        line-height: 1.3;
    }
    
    /* Ajuste específico para o ícone de estrela */
    .card-header h3 .bi-stars,
    .card-header h3 .bi-palette,
    .card-header h3 .bi-brush {
        margin-right: 6px;
        font-size: 1rem;
    }
    
    /* Ajuste para o toggle switch */
    .form-check-input {
        margin-left: 8px;
    }
}

/* Ajustes para os botões de opção */
@media (max-width: 767px) {
    /* Melhorar visualização dos botões de opção */
    .btn-option {
        padding: 6px 10px;
        font-size: 0.9rem;
        margin-bottom: 5px;
        margin-right: 5px;
        min-height: 36px;
        display: flex;
        align-items: center;
        white-space: normal;
        text-align: left;
        line-height: 1.2;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        transition: all 0.2s ease;
    }
    
    /* Ajustar wrapper de opções */
    .option-wrapper {
        margin-bottom: 5px;
        margin-right: 5px;
        max-width: calc(50% - 5px);
        display: inline-block;
        position: relative;
    }
    
    /* Ajustar botão de favorito */
    .btn-favorite {
        width: 18px;
        height: 18px;
        top: -3px;
        right: -3px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #343654;
        border: 1px solid #44475a;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    
    .btn-favorite i {
        font-size: 0.7rem;
    }
    
    /* Melhorar a visualização dos emojis nos botões */
    .btn-option span.emoji,
    .btn-option .emoji {
        margin-right: 4px;
        font-size: 1rem;
    }
    
    /* Ajustar o corpo do card para melhor espaçamento */
    .card-body {
        padding: 0.75rem;
    }
    
    /* Ajustar a área de botões de opção */
    .option-buttons {
        padding: 0;
        margin: 0;
    }
    
    /* Estilo para botões selecionados */
    .btn-option.selected {
        transform: scale(1.02);
        box-shadow: 0 2px 4px rgba(255, 107, 203, 0.3);
    }
    
    /* Ajuste para o contador de seleções múltiplas */
    .btn-option.selected::before {
        top: -4px;
        right: -4px;
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
    
    /* Ajuste para botões mais largos como "Casal (Homem e Mulher)" */
    .option-wrapper:first-child {
        max-width: 100%;
        width: 100%;
    }
    
    /* Ajuste para o grid de botões */
    .option-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        width: 100%;
    }
    
    /* Ajuste para o primeiro botão (geralmente o mais largo) */
    .option-buttons > .option-wrapper:first-child {
        grid-column: 1 / -1;
    }
    
    /* Ajustes para os botões no grid */
    .option-buttons > .option-wrapper {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* Ajuste para os botões dentro do wrapper */
    .option-buttons > .option-wrapper .btn-option {
        width: 100%;
        margin: 0;
        justify-content: center;
    }
}

/* Ajustes para o modal */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-title {
        font-size: 1.2rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    /* Ajustar botões nos cards de prompts salvos */
    #saved-prompts-container .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    #saved-prompts-container .card-title {
        font-size: 1rem;
    }
}

/* Ajustes para o layout da área de prompt */
@media (max-width: 767px) {
    #prompt-output {
        min-height: 120px;
    }
    
    .action-buttons .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Ajustes específicos para telas muito pequenas */
@media (max-width: 375px) {
    .btn-option {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .card-header h3 {
        font-size: 1.1rem;
    }
    
    .card-header .btn-sm {
        font-size: 0.75rem;
    }
}