/* ========================================
   RESET
======================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ========================================
   BODY
======================================== */

body{
  font-family:Arial, sans-serif;
  background:#08110d;
}

/* ========================================
   OVERLAY
======================================== */

.poll-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  z-index:999;
}

/* ========================================
   MODAL
======================================== */

.poll-modal{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  width:92%;
  max-width:650px;
  max-height:90vh;

  overflow-y:auto;

  background:#0d1713;

  border-radius:28px;

  padding:30px;

  border:1px solid rgba(124,255,178,0.15);

  box-shadow:
    0 25px 80px rgba(0,0,0,0.65);

  z-index:1000;
}

/* ========================================
   HEADER
======================================== */

.poll-header{
  text-align:center;
}

.poll-mascot{
  width:140px;
  display:block;
  margin:0 auto 20px auto;
}

.poll-header h2{
  color:#ffffff;
  font-size:34px;
  margin-bottom:10px;
}

.poll-header p{
  color:#b8c5be;
  font-size:16px;
  line-height:1.5;
}

/* ========================================
   OPÇÕES
======================================== */

.poll-options{
  margin-top:35px;

  display:grid;

  grid-template-columns:
    repeat(auto-fit, minmax(160px,1fr));

  gap:18px;
}

/* ========================================
   CARD
======================================== */

.poll-card{
  background:#13211b;

  border-radius:22px;

  padding:18px;

  text-align:center;

  cursor:pointer;

  transition:0.3s ease;

  border:2px solid transparent;

  position:relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}

/* hover */

.poll-card:hover{
  transform:translateY(-6px);

  background:#1a2d25;

  box-shadow:
    0 15px 35px rgba(124,255,178,0.12);
}

/* input escondido */

.poll-card input{
  display:none;
}

/* foto */

.poll-card img{
  width:90px;
  height:90px;

  border-radius:50%;

  object-fit:cover;

  margin-bottom:14px;

  border:3px solid rgba(124,255,178,0.35);
}

/* nome */

.poll-card span{
  display:block;

  color:#ffffff;

  font-size:15px;

  font-weight:bold;
}

/* selecionado */

.poll-card input:checked + img{
  border-color:#7CFFB2;

  box-shadow:
    0 0 25px rgba(124,255,178,0.55);
}

.poll-card input:checked ~ span{
  color:#7CFFB2;
}

/* ========================================
   BOTÃO VOTAR
======================================== */

.vote-btn{
  width:100%;

  margin-top:30px;

  padding:16px;

  border:none;

  border-radius:16px;

  background:#7CFFB2;

  color:#08110d;

  font-size:16px;

  font-weight:bold;

  cursor:pointer;

  transition:0.3s ease;
}

.vote-btn:hover{
  transform:translateY(-3px);

  background:#98ffbf;
}

/* ========================================
   RESULTADOS
======================================== */

.poll-result{
  margin-top:30px;

  color:#fff;
}

.result-item{
  margin-bottom:18px;
}

.result-item strong{
  display:block;
  margin-bottom:8px;
}

.result-bar{
  width:100%;

  height:12px;

  background:#1a2722;

  border-radius:20px;

  overflow:hidden;
}

.result-fill{
  height:100%;

  background:#7CFFB2;

  border-radius:20px;
}

/* ========================================
   BOTÃO FECHAR
======================================== */

.poll-close{
  width:100%;

  margin-top:24px;

  padding:14px;

  border:none;

  border-radius:14px;

  background:#1a2722;

  color:#fff;

  cursor:pointer;

  transition:0.3s ease;

}

.poll-close:hover{
  background:#24352d;
}

/* ========================================
   RESPONSIVIDADE
======================================== */

@media(max-width:768px){

  .poll-modal{
    padding:22px;
  }

  .poll-header h2{
    font-size:28px;
  }

  .poll-options{
    grid-template-columns:
      repeat(2,1fr);
  }

}

@media(max-width:520px){

  .poll-options{
    grid-template-columns:1fr;
  }

  .poll-mascot{
    width:110px;
  }

  .poll-header h2{
    font-size:24px;
  }

}

/* =========================================
   SCROLLBAR PREMIUM (CHROME / EDGE / SAFARI)
========================================= */

/* largura da barra */
::-webkit-scrollbar {
  width: 10px;
}

/* trilho (fundo da barra) */
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

/* “polegar” (parte que desliza) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #7CFFB2,
    #3adf8f
  );
  border-radius: 20px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}

/* hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #9dffd0,
    #3adf8f
  );
}

::-webkit-scrollbar-thumb {
  box-shadow: 0 0 10px rgba(124, 255, 178, 0.3);
}

#poll-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:99998;
}

#poll-modal{
  position:fixed;
  z-index:99999;
}

/* =========================================
   MOBILE VERTICAL
========================================= */

@media screen and (max-width: 768px) {

  .poll-options {

    display: flex;
    flex-direction: column;
    gap: 12px;

  }

  .poll-card {

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    width: 100%;
    padding: 15px;

    border-radius: 16px;

  }

  .poll-card img {

    width: 80px;
    height: 80px;

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 10px;

  }

  .poll-card span {

    font-size: 15px;
    line-height: 1.3;

  }

}