#progress-container{position:fixed; top:0; z-index:1; width:100%;}
#progress-bar{width:0%; height:8px; background:linear-gradient(90deg, rgba(255,211,113,1) 21%, rgba(233,164,23,1) 55%, rgba(231,143,0,1) 100%);}

/*pagina quiz*/
.titulo_quiz{width:100%; height:auto; float:left; text-align:center; font-family:arial; font-size:20px; color:#175ea8; text-transform:uppercase; padding-bottom:15px; padding-top:25px;}

.explição_quiz{width: 80%; height: auto; float: left; font-size: 15px; font-family: Arial, Helvetica, sans-serif; text-align: center; color: #333;  margin-bottom: 30px; margin-left: 10%;}

.corpo_quiz{width: 100%; height: auto; float: left; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg); display: flex; justify-content: center; padding: 0px; color: #333;}

#quiz-container {max-width: 650px; width: 100%; background: var(--white); padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);}

.hidden { display: none; }
h1 { text-align: center; color: var(--primary); margin-bottom: 10px; }
p.subtitle { text-align: center; color: #666; margin-bottom: 30px; }
        
.btn-container { display: flex; flex-direction: column; gap: 12px; }
       
.pet-profile {border-radius: 15px; overflow: hidden; margin-top: 20px; animation: fadeIn 0.8s ease;}

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

.pet-header { background: var(--primary); color: rgb(75, 74, 74); padding: 20px; text-align: center; }
.pet-img { width: 100%; height: 350px; object-fit: cover; }
.pet-content { padding: 25px; line-height: 1.6; }
.pet-content h3 { color: var(--primary); border-bottom: 2px solid #f0f0f0; padding-bottom: 8px; }

.disclaimer {margin-top: 30px; font-size: 13px; color: #636e72; background: #dfe6e9; padding: 15px; border-radius: 10px; text-align: center;}


/* Estilos da Barra de Progresso */
.progress-container-quiz {width: 100%; background-color: #eee; border-radius: 10px; margin-bottom: 20px; overflow: hidden;}

#progress-bar-quiz {background-color: #27ae60; width: 0%; height: 10px; transition: width 0.4s ease;}

#options {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 600px; margin: 20px auto;}

/* Estilos das respostas */
#options button {width: 100%; padding: 18px; color: rgb(78, 78, 78); font-weight: 600; font-size: 14px; border-radius: 8px; background-color: #fff; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 60px;}
#options button:hover {transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); background: #175EA8; color:#FFFFFF; transform: scale(1.02); transition: all 0.3s ease;}

/* Estilos selecao entre cao e gato no começo */
.selecao_gato_cao_quiz{width: 100%; min-height: 60px; padding: 18px; color: rgb(78, 78, 78); font-weight: 600; font-size: 16px; border-radius: 8px; background-color: #fff; cursor: pointer;}
.selecao_gato_cao_quiz:hover{background-color: #175EA8; color:#FFFFFF; transform: scale(1.02); transition: all 0.3s ease;}

/* Estilos btn refazer teste */
.btn_refazer_teste{margin-top: 25px; width: 100%; background: #b2bec3; min-height: 60px; padding: 18px; color: rgb(78, 78, 78); font-weight: 600; font-size: 16px; border-radius: 8px; cursor: pointer;}
.btn_refazer_teste:hover{background-color: rgb(99, 98, 98); color:#FFFFFF; transform: scale(1.02); transition: all 0.3s ease;}


/* Responsividade: Em celulares muito pequenos, volta para 1 coluna */
@media (max-width: 400px) {#options {grid-template-columns: 1fr;}}

.btn-share {background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 20px; transition: transform 0.2s; width: 80%; margin-left: 10%;}
.btn-share:hover {transform: scale(1.05); background-color: #45a049;}