/* client/lumi-inspiration.css */

/* --- Contêiner Principal: Dark Theme --- */
.lumi-inspiration-section {
    background-color: #000;
    background-image: 
        radial-gradient(at 50% 100%, rgba(120, 20, 150, 0.1) 0%, transparent 70%),
        url('https://images.unsplash.com/photo-1614850523296-d8c1af93d400?q=100&w=3840&auto=format&fit=crop'); /* 4K Max Quality */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: soft-light; /* Preserva as altas luzes e a nitidez */
    image-rendering: -webkit-optimize-contrast; /* Força nitidez no Chrome/Safari */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    position: relative;
    padding: 100px 40px 100px;
    text-align: center;
    border: none;
    overflow: hidden;
}

/* Luxury Gradient Divider Top */

/* Luxury Gradient Divider Bottom */

/* --- Título Principal --- */
.lumi-inspiration-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    /* Gradiente dourado para o texto */
    background: linear-gradient(90deg, #FFD700, #F0B90B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0 0 15px hsla(45, 100%, 50%, 0.3); /* Brilho sutil */
    margin-bottom: 1rem;
}

/* --- Subtítulo --- */
.lumi-subtitle {
    font-size: 1.1rem;
    color: #a0a0a0; /* Cinza claro para o texto de apoio */
    max-width: 60ch;
    margin: 0 auto 2rem auto;
}

/* --- Contêiner do Input: Efeito "Gold Glass" --- */
.lumi-input-container {
    background: rgba(20, 20, 20, 0.6); /* Fundo de vidro escuro e semitransparente */
    backdrop-filter: blur(10px); /* O efeito de desfoque do vidro */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.2); /* Borda dourada sutil */
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 0 0 40px rgba(255, 215, 0, 0.1); /* Sombra e brilho */
    max-width: 700px;
    margin: 0 auto;
}

/* --- Textarea: Estilo Terminal --- */
#lumi-prompt-input {
    background: transparent;
    border: none;
    width: 100%;
    min-height: 80px;
    font-family: 'Courier New', Courier, monospace; /* Fonte de terminal */
    font-size: 1.1rem;
    color: #FFD700; /* Cor do texto dourada */
    text-shadow: 0 0 5px hsla(51, 100%, 50%, 0.5); /* Efeito de brilho do texto */
    resize: vertical;
}

@media (max-width: 768px) {
    #lumi-prompt-input {
        min-height: 120px; /* Aumenta a altura mínima para mobile */
    }
}

#lumi-prompt-input::placeholder {
    color: rgba(255, 215, 0, 0.4); /* Placeholder dourado e semitransparente */
    font-style: italic;
}

#lumi-prompt-input:focus {
    outline: none;
}

/* --- Botão --- */
#lumi-generate-btn {
    background: linear-gradient(90deg, #F0B90B, #FFD700);
    color: #000000; /* Cor do texto alterada para preto */
    font-weight: bold;
    border: none;
    border-radius: 4px;
    padding: 0.8rem 1.5rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

#lumi-generate-btn:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); /* Efeito de brilho ao passar o mouse */
    transform: translateY(-2px);
}

/* --- Estilo da Justificativa da IA (Dark Theme) --- */
.ai-justification {
    font-size: 0.9rem;
    color: #ccc;
    background-color: rgba(255, 255, 255, 0.05); /* Fundo sutil para destaque */
    border-top: 1px solid rgba(255, 215, 0, 0.2); /* Linha dourada */
    padding: 12px;
    margin-top: 12px;
    border-radius: 4px;
    text-align: left;
}

.ai-justification i.fas.fa-robot {
    margin-right: 8px;
    color: #FFD700; /* Ícone dourado */
}

/* --- Grid de Resultados da IA --- */
.lumi-inspiration-section .product-grid {
    display: flex;
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    gap: 1.5rem;
    margin-top: 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* --- Sobrescrita dos Cards de Produto para o Tema Escuro --- */
.lumi-inspiration-section .product-card {
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: none;
    color: #f0f0f0; /* Cor de texto padrão para o card */
    opacity: 1; /* FORÇA A VISIBILIDADE */
    transform: translateY(0); /* RESETA A POSIÇÃO DA ANIMAÇÃO */
}

.lumi-inspiration-section .product-card h3 {
    color: #f5f5f5; /* Título do produto mais brilhante */
}

.lumi-inspiration-section .product-card .product-price {
    color: #FFD700; /* Preço dourado para destaque */
    font-weight: bold;
}

.lumi-inspiration-section .product-card .add-to-cart-button {
    background-color: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    border: 1px solid #FFD700;
}

.lumi-inspiration-section .product-card .add-to-cart-button:hover {
    background-color: #FFD700;
    color: #000;
}