/* style.css - Versão Final Hortifruti Horizontal */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;700&display=swap');

* { box-sizing: border-box; }

:root {
    /* [PERSONALIZAÇÃO] Cores Padrão (Serão substituídas pela API) */
    --cor-fundo-principal: #009640;
    --cor-bg-preco: #009640;
    --cor-faixas: #FFC700;
    --cor-destaque-luz-borda: #006825;
    --cor-texto-placa: #000000;
    --cor-texto-preco: #FFFFFF;
    --cor-texto-footer: #FFFFFF;
}

html, body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Oswald', sans-serif;
    background-color: #000;
}

#app { position: relative; width: 100%; height: 100%; }

/* --- 1. FUNDOS --- */
#fundo-principal {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 50% 50%, 
        var(--cor-fundo-principal) 20%, 
        #000000 130%
    );
    z-index: 1;
}

#fundo-efeito {
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: 
        radial-gradient(circle at 50% 50%, var(--cor-destaque-luz-borda) 0%, transparent 40%),
        repeating-conic-gradient(rgba(255,255,255,0.1) 0 15deg, transparent 15deg 30deg);
    z-index: 1;
    opacity: 0.6; 
    mix-blend-mode: screen; 
}

/* --- 2. LOGO (DIREITA) --- */
#logo-container {
    position: absolute;
    top: 3vh;
    right: 4vw; 
    width: 20vw; 
    height: 15vh;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    z-index: 20;
}
#logo-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* --- 3. SELO (ESQUERDA - INCLINADO) --- */
#selo-container {
    position: absolute;
    top: 8vh;
    left: 3vw;  
    width: 30vw; 
    height: 50vh; 
    z-index: 5; 
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transform: rotate(-10deg);
}
#selo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
    animation: pulse 3s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); } 
    100% { transform: scale(1); }
}

/* --- 4. PRODUTO (CENTRO - EFEITO ADESIVO) --- */
#produto-container {
    position: absolute;
    bottom: 10vh; 
    left: 0;
    width: 100%;
    height: 85vh; 
    display: flex;
    justify-content: center; 
    align-items: flex-end;
    z-index: 10;
}

#produto-img {
    max-width: 50%; 
    max-height: 100%;
    object-fit: contain;
    z-index: 3;
    position: relative;
    
    /* Efeito Adesivo Limpo */
    filter: 
        drop-shadow(0.4vh 0 0 white) 
        drop-shadow(-0.4vh 0 0 white) 
        drop-shadow(0 0.4vh 0 white) 
        drop-shadow(0 -0.4vh 0 white)
        drop-shadow(0.3vh 0.3vh 0 white)
        drop-shadow(-0.3vh -0.3vh 0 white)
        drop-shadow(0.3vh -0.3vh 0 white)
        drop-shadow(-0.3vh 0.3vh 0 white)
        drop-shadow(0 0.5vh 0.8vh rgba(0,0,0,0.4));
}

#produto-img-ghost {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    opacity: 0.3;
    filter: blur(20px) brightness(1.5);
    transform: translateX(-50%) scale(0.95); 
}

/* --- 5. PLACA DO NOME (ESQUERDA) --- */
#descricao-container {
    position: absolute;
    bottom: 15vh; 
    left: 4vw;    
    width: 25vw;  
    min-height: 10vh; 
    background: #f0f0f0; 
    border-radius: 1vh;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 15;
    transform: rotate(-2deg); 
    overflow: hidden; 
}

.placa-header {
    width: 100%;
    background-color: var(--cor-faixas);
    color: #ffffff; 
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    text-align: center;
    font-weight: 700;
    font-size: 3.2vh;
    padding: 0.8vh 0;
}

#descricao-texto {
    font-size: 3.5vh; 
    color: var(--cor-texto-placa);
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 1vh; 
    line-height: 1.1;
    text-transform: uppercase;
    font-style: italic;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 6. PREÇO (DIREITA) --- */
#preco-container {
    position: absolute;
    top: 55%; 
    right: 12vw; 
    transform: translateY(-55%) rotate(3deg); 
    
    width: 32vh; 
    height: 32vh; 
    
    background-color: var(--cor-bg-preco);
    border-radius: 50%;
    border: 1vh solid var(--cor-destaque-luz-borda); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;     
    z-index: 20;
    overflow: visible;
}

.label-apenas {
    color: var(--cor-destaque-luz-borda); 
    font-size: 3vh; 
    font-weight: 700;
    margin-top: 0; 
    margin-bottom: 0.5vh; 
    text-transform: uppercase;
    white-space: nowrap;
}

.label-unidade {
    color: var(--cor-destaque-luz-borda);
    font-size: 3.5vh;
    font-weight: 700;
    margin-bottom: 0; 
    margin-top: 0.5vh; 
    text-transform: lowercase;
    white-space: nowrap;
}

.preco-wrapper {
    display: flex;
    align-items: flex-start; 
    justify-content: center;
    line-height: 1;
    white-space: nowrap; 
}

.simbolo-real {
    color: var(--cor-texto-preco);
    font-size: 6vh; 
    margin-right: 0.5vh;
    font-weight: 500;
    margin-top: 1vh; 
    text-shadow: 
        -0.4vh -0.4vh 0 var(--cor-destaque-luz-borda),
         0.4vh -0.4vh 0 var(--cor-destaque-luz-borda),
        -0.4vh  0.4vh 0 var(--cor-destaque-luz-borda),
         0.4vh  0.4vh 0 var(--cor-destaque-luz-borda);
}

#preco-texto {
    color: var(--cor-texto-preco);
    font-size: 16vh; 
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -3px;
    text-shadow: 
        -0.6vh -0.6vh 0 var(--cor-destaque-luz-borda),
         0.6vh -0.6vh 0 var(--cor-destaque-luz-borda),
        -0.6vh  0.6vh 0 var(--cor-destaque-luz-borda),
         0.6vh  0.6vh 0 var(--cor-destaque-luz-borda);
}

/* --- 7. RODAPÉ --- */
#footer-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8vh; 
    background-color: var(--cor-faixas);
    display: flex;
    align-items: center;
    
    justify-content: flex-end; 
    padding-right: 26vh; /* Respiro para o texto não colar no QR */
    padding-left: 0;
    
    z-index: 30;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
}

#footer-text {
    color: var(--cor-texto-footer);
    font-size: 3vh;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}
#footer-text i { margin-right: 1vh; font-size: 3.5vh; }

/* --- 8. QR CODE --- */
#qrcode-container {
    position: absolute;
    bottom: 2vh; 
    right: 3vw; 
    width: 14vh;
    height: 14vh;
    background-color: white;
    padding: 1vh;
    border-radius: 1vh;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 40; 
}
#qrcode-img { width: 100%; height: 100%; object-fit: contain; }

/* --- ANIMAÇÕES --- */
.elemento-animado { position: absolute; opacity: 0; }

#logo-container.slideInDown { animation: slideInDownLogo 0.8s ease-out forwards; }
@keyframes slideInDownLogo { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } }

#selo-container.slideInDown { animation: slideInDownSelo 0.8s ease-out forwards; }
@keyframes slideInDownSelo { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } }

.slideInUp { animation: slideInUp 0.8s ease-out forwards; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }

.slideInLeft { animation: slideInLeft 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes slideInLeft { 
    from { opacity: 0; transform: translateX(-100px) rotate(-10deg); } 
    to { opacity: 1; transform: translateX(0) rotate(-2deg); } 
}

.popIn { animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn { 
    from { opacity: 0; transform: scale(0) rotate(90deg) translateY(-55%); } 
    to { opacity: 1; transform: scale(1) rotate(3deg) translateY(-55%); } 
}

.fadeIn { animation: fadeIn 1s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.slideOutDown { animation: slideOutDown 0.5s ease-in forwards; }
@keyframes slideOutDown { to { opacity: 0; transform: translateY(100px); } }