/* ==========================================================================
   STYLE.CSS - DESIGN PREMIUM SHITBOT 3.0 WITH COMET BORDER & GLASSMORPHISM
   ========================================================================== */

html, body {
    margin: 0; padding: 0;
    height: 100vh; width: 100vw;
    overflow-x: hidden; box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #fff;
    color: #000;
    text-transform: uppercase;
    background: url('imagens/bg_mobile.png') no-repeat center center fixed !important;
    background-size: cover !important;
}

@media (min-width: 768px) {
    body {
        background: url('imagens/bg_desktop.png') no-repeat center center fixed !important;
        background-size: cover !important;
        padding: 40px;
    }
}

/* TELA DE CARREGAMENTO (SPLASH) */
#splashScreen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #fff; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#splashScreen img { max-width: 150px; margin-bottom: 30px; filter: drop-shadow(0 0 10px rgba(0,0,0,0.1)); }
.spinner-splash { border: 4px solid rgba(0,0,0,0.05); border-top: 4px solid #d32f2f; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
.splash-text { margin-top: 20px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: 2px; color: #000; }

/* EMBALAGEM COM BORDA ANIMADA (COMETAS) */
.box-wrapper {
    position: relative; max-width: 500px; margin: auto; padding: 3px; border-radius: 20px;
    background: #fff; overflow: hidden; box-shadow: 0 15px 50px rgba(0,0,0,0.15); display: none;
}
.box-wrapper::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0%, #000 20%, #000 25%, transparent 25%, transparent 50%, #d32f2f 70%, #d32f2f 75%, transparent 75%);
    animation: spinComets 10s linear infinite;
}
@keyframes spinComets { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* CONTAINER PRINCIPAL TRANSPARENTE */
.container { position: relative; background: rgba(255, 255, 255, 0.93); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 25px; border-radius: 18px; z-index: 1; display: flex; flex-direction: column; }
h3 { font-family: 'Montserrat', sans-serif; font-size: 16px; text-align: center; margin: 15px 0; letter-spacing: 1px; color: #000; }
.logo { max-width: 100px; display: block; margin: 0 auto 10px; }

/* TRANSIÇÃO SUAVE ENTRE ETAPAS */
.etapa { display: none; }
.etapa.ativa { display: flex; flex-direction: column; animation: blurFadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
@keyframes blurFadeIn { 0% { opacity: 0; filter: blur(8px); transform: scale(0.98); } 100% { opacity: 1; filter: blur(0); transform: scale(1); } }

/* GALERIA DINÂMICA DE IMAGENS */
.dynamic-gallery-container { position: relative; width: 100%; max-width: 420px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.gallery-image-wrapper { position: relative; aspect-ratio: 1 / 1; height: auto; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.08); cursor: pointer; background: #fcfcfc; transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease; will-change: width, opacity; box-sizing: border-box; }
.gallery-image-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.gallery-image-wrapper.main { width: 75%; opacity: 1; cursor: default; }
.gallery-image-wrapper.thumb { width: 25%; opacity: 0.5; }
.gallery-image-wrapper.thumb:hover { opacity: 0.8; }
.gallery-image-wrapper.main::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid rgba(211,47,47,0.3); border-radius: 12px; box-sizing: border-box; pointer-events: none;}

/* GRADE DE TAMANHOS */
.grid-tamanhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.btn-tamanho { border: 1.5px solid #ddd; border-radius: 8px; padding: 12px 0; text-align: center; font-size: 14px; font-weight: bold; color: #555; cursor: pointer; transition: 0.2s; position: relative; overflow: hidden; background: rgba(255,255,255,0.6); }
.btn-tamanho:hover:not(.esgotado) { border-color: #000; color: #000; background: #fff; }
.btn-tamanho.esgotado { opacity: 0.25; cursor: not-allowed; border-color: #eee; background: #fafafa; }
.btn-tamanho.esgotado::after { content: ''; position: absolute; top: 50%; left: -10%; width: 120%; height: 1.5px; background: #888; transform: rotate(-30deg); }
.btn-tamanho.ativo { background: #000 !important; color: #fff !important; border-color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); transform: translateY(-2px); opacity: 1 !important; }

/* CARRINHO DE COMPRAS */
#areaCarrinho { margin-top: 25px; padding-top: 20px; border-top: 2px dashed #ddd; display: none; }
#carrinhoPreview { margin-top: 10px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #fcfcfc; border: 1px solid #eee; margin-bottom: 8px; border-radius: 8px; font-size: 12px; font-weight: bold; }
.btn-remove { color: #d32f2f; cursor: pointer; font-size: 11px; padding: 4px 8px; border: 1px solid #d32f2f; border-radius: 4px; transition: 0.2s;}
.btn-remove:hover { background: #d32f2f; color: #fff; }

/* INPUTS E FORMULÁRIOS */
input { width: 100%; padding: 12px; margin-top: 5px; border: 2px solid #eee; border-radius: 8px; box-sizing: border-box; font-weight: bold; text-transform: uppercase; font-size: 16px !important; background: rgba(255,255,255,0.8); }
input:focus { outline: none; border-color: #000; background: #fff; }
label { display: block; margin-top: 15px; font-weight: bold; font-size: 10px; color: #666; }

/* BOTÕES DE ACÇÃO */
button { width: 100%; background: #000; color: #fff; border: none; padding: 16px; font-weight: bold; border-radius: 10px; cursor: pointer; margin-top: 20px; font-family: 'Montserrat'; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
button:hover { background: #d32f2f; transform: scale(1.02); }
.btn-secundario { background: #fff; color: #000; border: 2px solid #000; margin-top: 10px; padding: 12px; box-shadow: none; }
.btn-secundario:hover { background: #f5f5f5; }

/* CARREGAMENTO / TIMERS */
.spinner { border: 4px solid rgba(0,0,0,0.05); border-top: 4px solid #d32f2f; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 30px auto; filter: drop-shadow(0 0 5px #d32f2f); }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.link-manual { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: bold; color: #d32f2f; cursor: pointer; text-decoration: underline; }
.separador { border: 0; border-top: 2px dashed #eee; margin: 25px 0 10px 0; }

/* INTERFACE MULTI-ABAS DE PAGAMENTO */
.tabs-pagamento { display: flex; gap: 10px; margin-top: 15px; }
.tab-btn { flex: 1; padding: 12px; background: #eee; border: 1px solid #ccc; border-radius: 8px; font-family: 'Montserrat'; font-size: 12px; font-weight: bold; cursor: pointer; transition: 0.2s; text-transform: uppercase; color: #333; }
.tab-btn.active { background: #000; color: #fff; border-color: #000; }
.conteudo-pagamento { display: none; margin-top: 15px; }
.conteudo-pagamento.active { display: block; }
.caixa-pagamento { text-align:center; padding:20px; border:2px dashed #d32f2f; border-radius:12px; background: #fff5f5; }