/* BASE */

body{
font-family:Arial;
background:#f5f5f5;
text-align:center;
margin:0;
padding:0;
}

/* BOX PRINCIPAL */

.box{
background:white;
max-width:400px;
margin:auto;
margin-top:30px;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

/* INPUTS */

input,select{
width:100%;
padding:12px;
margin-top:10px;
border-radius:5px;
border:1px solid #ccc;
}

/* BOTÃO */

button{
background:#16a34a;
color:white;
padding:14px;
border:none;
width:100%;
margin-top:15px;
font-size:16px;
border-radius:5px;
cursor:pointer;
transition:0.3s;
}

button:hover{
background:#15803d;
}

/* QR CODE */

#qrcode{
margin-top:20px;
width:200px;
}

/* NUMEROS (caso use depois) */

.numeros{
display:flex;
flex-wrap:wrap;
gap:5px;
margin-top:30px;
}

.numero{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
border-radius:6px;
font-weight:bold;
}

.livre{
background:#2ecc71;
color:#fff;
}

.reservado{
background:#f39c12;
color:#fff;
}

.vendido{
background:#e74c3c;
color:#fff;
}

/* TIMER */

#timer{
font-size:20px;
font-weight:bold;
margin:10px 0;
}

/* CORES TIMER */

.timer-verde{
color:#00a000;
}

.timer-amarelo{
color:#ff9900;
}

.timer-vermelho{
color:#ff0000;
animation:piscando 1s infinite;
}

@keyframes piscando{
0%{opacity:1;}
50%{opacity:0.3;}
100%{opacity:1;}
}

/* NOTIFICAÇÕES */

.notificacao{
background:#16a34a;
color:white;
padding:10px;
margin-top:5px;
border-radius:5px;
font-size:14px;
box-shadow:0px 2px 8px rgba(0,0,0,0.2);
opacity:0.95;
transition: all 0.5s;
}

/* CONTAINER PRINCIPAL */

.container-rifa{
max-width:500px;
margin:auto;
background:#fff;
padding:20px;
border-radius:12px;
box-shadow:0 10px 20px rgba(0,0,0,0.1);
}

/* TÍTULO */

.titulo-rifa{
font-size:26px;
margin-bottom:15px;
}

/* BANNER */

.banner-premio img{
width:100%;
border-radius:10px;
cursor:pointer;
margin-bottom:10px;
}

/* MODAL IMAGEM */

#modal-premio{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;
z-index:999;
}

#modal-premio img{
max-width:90%;
max-height:90%;
}

/* INFO RIFA */

.info-rifa{
font-size:16px;
margin:15px 0;
}

/* PROGRESSO */

.progresso{
margin-top:10px;
}

/* BARRA EXTERNA */

.barra{
width:100%;
height:25px;
background:#ddd;
border-radius:20px;
overflow:hidden;
margin-top:10px;
}

/* BARRA INTERNA (CONTROLADA PELO PHP) */

#barra-vendas{
height:100%;
background:linear-gradient(90deg,#00ff88,#00cc66);
transition:1s;
box-shadow:0 0 10px rgba(0,255,100,0.5);
}

#online{
margin-top:5px;
font-weight:bold;
}

.notificacao{
animation: subir 0.5s ease;
}

@keyframes subir{
from{transform:translateY(20px);opacity:0;}
to{transform:translateY(0);opacity:1;}
}