/* ===== Wild One Quizz – CSS “desbloqueado” para cores/transparências ===== */

/* Cartão principal do quiz */
.wild-quiz{
  background-color: var(--woq-form-card-bg, var(--e-global-color-background, transparent));
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,.08);
  max-width: 600px;
  margin: 40px auto;
  font-family: var(--e-global-typography-primary-font-family, sans-serif);
  color: var(--woq-text, var(--e-global-color-text, inherit));
  transition: all .3s ease;
}

/* Mensagem de bloqueio (fallback) */
.wild-quiz-locked{display:flex;justify-content:center;align-items:center;padding:24px;margin:0 auto;max-width:640px}
.wild-quiz-locked .locked-card{background:#fff3cd;border:1px solid #ffe8a1;color:#856404;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,.06);width:100%}
.wild-quiz-locked h3{margin:0 0 8px;font-size:18px;line-height:1.3}
.wild-quiz-locked p{margin:0}

/* Gate (pré-quiz) – permite transparências */
.wild-quiz-gate .gate-card{
  background-color: var(--woq-gate-bg, transparent);
}

/* Perguntas */
.question-block{
  margin-bottom:25px;
  background-color: var(--woq-question-bg, inherit);
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  padding:15px;
}
.question-title{
  color: var(--woq-text, var(--e-global-color-text, inherit));
  font-size: var(--e-global-typography-text-font-size, 18px);
  font-weight:600;
  margin-bottom:10px;
}
.response-msg{
  margin-top:6px;font-size:14px;font-style:italic;
  color: var(--e-global-color-danger, #f2622e);
}

/* Resultado (wrapper) – herda por omissão */
#quiz-result{
  margin-top:30px;
  background: var(--woq-result-wrapper-bg, inherit);
  color: var(--woq-text, var(--e-global-color-text, inherit));
  border-radius:10px;
  box-shadow: inset 0 0 5px rgba(0,0,0,.05);
}

/* Texto do resultado e do reward – sem !important */
#result-text,
#final-reward{
  color: var(--woq-result-text, inherit);
  background: var(--woq-result-bg-color, transparent);
  border-radius:7px;
  padding:12px 15px;
  font-weight:bold;
  margin-bottom:18px;
  font-size:1.1em;
  text-align:center;
}
#result-text:focus{outline:2px solid var(--e-global-color-accent, #f2622e);outline-offset:3px}

/* Form pós-quiz */
#user-form input,
#user-form button{
  display:block;margin:12px 0;padding:12px 16px;width:100%;max-width:450px;
  border-radius:6px;border:1px solid var(--e-global-color-border,#ccc);
  font-size: var(--e-global-typography-text-font-size,16px);
  color: var(--woq-input-text, inherit);
  background-color: var(--woq-input-bg-color, transparent);
}
#user-form input:focus{border-color:var(--e-global-color-primary,#bf2a2a);outline:none}

/* Botões (escopados ao quiz) */
.wild-quiz #user-form button,
.wild-quiz #submit-quiz,
.wild-quiz .quiz-submit-btn,
.wild-quiz .elementor-button{
  background-color: var(--woq-button, var(--e-global-color-primary,#bf2a2a));
  color: var(--woq-button-text, #fff);
  border:none;cursor:pointer;font-weight:bold;border-radius:6px;
  text-transform:uppercase;padding:12px 22px;transition:background .3s,color .3s;
  font-size:16px;margin-top:10px;
}
.wild-quiz #user-form button:hover,
.wild-quiz #submit-quiz:hover,
.wild-quiz .quiz-submit-btn:hover,
.wild-quiz .elementor-button:hover{
  background-color: var(--woq-button-hover, var(--e-global-color-accent,#f2622e));
}

/* CTA – fica escondido até o JS dar fadeIn() */
#cta-message{display:none}
.wild-cta{
  background-color: var(--woq-cta-bg, transparent);
  color: var(--woq-cta-text, inherit);
  padding:25px 20px;border-radius:16px;text-align:center;margin-top:40px;
  border:1px solid var(--woq-cta-border, rgba(0,0,0,.12));
}
.wild-cta h3{
  font-size: var(--e-global-typography-primary-font-size,22px);
  font-weight:700;margin-bottom:10px;
  color: var(--woq-cta-title, inherit);
}
.wild-cta p{
  font-size: var(--e-global-typography-text-font-size,16px);
  color: var(--woq-cta-text, inherit);
}
.wild-cta a{
  background: var(--woq-social-bg, var(--e-global-color-background,#fff));
  color: var(--woq-social-text, inherit);
  padding:10px 20px;border-radius:25px;text-decoration:none;font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.1);margin:6px;display:inline-block;
  transition:background-color .3s,color .3s,filter .3s;
}
.wild-cta a:hover{
  filter:brightness(.96);
}

/* Botões “externos” (ex.: Google Review) */
.wild-cta button,
#cta-message button,
#google-review{
  background-color: var(--woq-cta-button, var(--e-global-color-primary,#008ec2));
  color: var(--woq-cta-button-text, #fff);
  border:none;padding:10px 20px;border-radius:6px;font-weight:700;cursor:pointer;margin-top:15px;
  transition:filter .3s;
}
.wild-cta button:hover,
#cta-message button:hover,
#google-review:hover{filter:brightness(.92)}

/* YouTube “accent” (mantido) */
.wild-cta a.woq-youtube,.woq-youtube{color:#f00}
.wild-cta a.woq-youtube i,.woq-youtube i{color:#f00;margin-right:7px}
.wild-cta a.woq-youtube:hover,.woq-youtube:hover{background:#f00;color:#fff}

/* Spinner */
.spinner{
  display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);
  border-top-color:currentColor;color:#fff;border-radius:50%;animation:spin .6s linear infinite;
  vertical-align:middle;margin-right:8px;
}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* Estados desativados */
#user-form input[disabled],
#user-form button[disabled],
#submit-quiz[disabled]{
  background: #e9ecef;color:#6c757d;cursor:not-allowed;opacity:.9;border-color:#e2e2e2;
}

/* Responsivo */
@media (prefers-reduced-motion: reduce){
  .wild-quiz,.wild-cta a{transition:none!important}
}
@media (max-width:700px){
  .wild-quiz{padding:10px;margin:10px 0}
  #user-form input,#user-form button{font-size:15px;padding:10px 12px;max-width:100%}
  .question-block{padding:8px}
}