/* UI clara, modal com largura contida (não 100%) */
.otz-quiz-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;z-index:9999}
.otz-quiz-modal{width:min(760px,92vw);max-height:86vh;background:#fff;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden}
.otz-quiz-topbar{height:6px;background:#1a63d1;width:0}
/*.otz-quiz-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}*/
.otz-quiz-header{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 0px 0px}
.otz-quiz-title{font-weight:700}
/*.otz-quiz-close{border:0;background:#f2f4f7;border-radius:8px;padding:6px 10px;cursor:pointer}*/
.otz-quiz-close{border:0;background:#f2f4f7;border-radius:10px;padding:6px 10px;cursor:pointer;color: gray !important}
.otz-quiz-close:hover {background: rgb(214,214,214);}
.otz-quiz-body{padding:18px 16px;overflow:auto}
/*.otz-quiz-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #f1f5f9}*/
.otz-quiz-actions{padding:12px 16px;}
.otz-quiz-btn{border:0;border-radius:12px;padding:12px 16px;font-weight:600;background:#1a63d1;color:#fff;cursor:pointer}
.otz-qa-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.otz-qa-item{border:1px solid #e5e7eb;border-radius:12px;padding:12px;cursor:pointer;background:#f6f7fb}
.otz-leads-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.otz-leads-form label{display:flex;flex-direction:column;font-size:13px}
.otz-loader{display:flex;align-items:center;justify-content:center;gap:10px;height:120px}

.spinner {font-size: 10px;width: 1em;height: 1em;border-radius: 50%;position: relative;text-indent: -9999em;animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);}
@keyframes mulShdSpin {0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2), 2.5em 0em 0 0em rgba(90, 167, 245, 0.2), 1.75em 1.75em 0 0em rgba(90, 167, 245, 0.2), 0em 2.5em 0 0em rgba(90, 167, 245, 0.2), -1.8em 1.8em 0 0em rgba(90, 167, 245, 0.2), -2.6em 0em 0 0em rgba(90, 167, 245, 0.5), -1.8em -1.8em 0 0em rgba(90, 167, 245, 0.9);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(90, 167, 245, 0.9), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(90, 167, 245, 0.2), 1.75em 1.75em 0 0em rgba(90, 167, 245, 0.2), 0em 2.5em 0 0em rgba(90, 167, 245, 0.2), -1.8em 1.8em 0 0em rgba(90, 167, 245, 0.2), -2.6em 0em 0 0em rgba(90, 167, 245, 0.2), -1.8em -1.8em 0 0em rgba(90, 167, 245, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(90, 167, 245, 0.5), 1.8em -1.8em 0 0em rgba(90, 167, 245, 0.9), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(90, 167, 245, 0.2), 0em 2.5em 0 0em rgba(90, 167, 245, 0.2), -1.8em 1.8em 0 0em rgba(90, 167, 245, 0.2), -2.6em 0em 0 0em rgba(90, 167, 245, 0.2), -1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(90, 167, 245, 0.2), 1.8em -1.8em 0 0em rgba(90, 167, 245, 0.5), 2.5em 0em 0 0em rgba(90, 167, 245, 0.9), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(90, 167, 245, 0.2), -1.8em 1.8em 0 0em rgba(90, 167, 245, 0.2), -2.6em 0em 0 0em rgba(90, 167, 245, 0.2), -1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(90, 167, 245, 0.2), 1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2), 2.5em 0em 0 0em rgba(90, 167, 245, 0.5), 1.75em 1.75em 0 0em rgba(90, 167, 245, 0.9), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(90, 167, 245, 0.2), -2.6em 0em 0 0em rgba(90, 167, 245, 0.2), -1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(90, 167, 245, 0.2), 1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2), 2.5em 0em 0 0em rgba(90, 167, 245, 0.2), 1.75em 1.75em 0 0em rgba(90, 167, 245, 0.5), 0em 2.5em 0 0em rgba(90, 167, 245, 0.9), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(90, 167, 245, 0.2), -1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(90, 167, 245, 0.2), 1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2), 2.5em 0em 0 0em rgba(90, 167, 245, 0.2), 1.75em 1.75em 0 0em rgba(90, 167, 245, 0.2), 0em 2.5em 0 0em rgba(90, 167, 245, 0.5), -1.8em 1.8em 0 0em rgba(90, 167, 245, 0.9), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(90, 167, 245, 0.2), 1.8em -1.8em 0 0em rgba(90, 167, 245, 0.2), 2.5em 0em 0 0em rgba(90, 167, 245, 0.2), 1.75em 1.75em 0 0em rgba(90, 167, 245, 0.2), 0em 2.5em 0 0em rgba(90, 167, 245, 0.2), -1.8em 1.8em 0 0em rgba(90, 167, 245, 0.5), -2.6em 0em 0 0em rgba(90, 167, 245, 0.9), -1.8em -1.8em 0 0em #ffffff;
  }
}


/* Button launcher */
.otz-quiz-wrapper .otz-quiz-open{border:0;border-radius:10px;padding:8px 12px;background:#1a63d1;color:#fff;font-weight:700;cursor:pointer}

/* === LEADS (UI genérica) === */
.otz-leads-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px 16px;
  margin-top:8px;
}
@media (max-width: 720px){
  .otz-leads-form{ grid-template-columns: 1fr; }
}
.otz-leads-form label{ display:flex; flex-direction:column; gap:6px; }
.otz-leads-form .label{ font-size:14px; font-weight:600; opacity:.9; }

/* inputs do leads (sem depender de classe) */
.otz-leads-form input[type="text"],
.otz-leads-form input[type="email"],
.otz-leads-form input[type="tel"],
.otz-leads-form input{
  appearance:none;
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  font-size:16px;
  line-height:1.3;
  outline:0;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.otz-leads-form input:focus{
  border-color: rgba(26,99,209,.55);
  box-shadow: 0 0 0 4px rgba(26,99,209,.12);
}
.otz-leads-form input.is-error{
  border-color:#d93025;
  box-shadow:0 0 0 4px rgba(217,48,37,.10);
}
.otz-leads-form .field-error{
  font-size:12px;
  color:#d93025;
  margin-top:4px;
  display:block;
}

/* botão padrão do modal (sem mudar seu HTML) */
.otz-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px; padding:12px 18px; font-weight:700; cursor:pointer; }
.otz-btn-primary{ background:#1A63D1; color:#fff; }
.otz-btn-primary:hover{ filter:brightness(1.05); }
.otz-btn-primary[disabled]{ opacity:.55; cursor:not-allowed; }

#stylesSection .two-col .style-field {
  flex-direction: row; /* Coloca label e input lado a lado */
  align-items: center; /* Alinha eles verticalmente */
  justify-content: space-between; /* Empurra label p/ esquerda e input p/ direita */
  gap: 16px; /* Um espaço seguro entre eles */
}
#stylesSection .two-col .style-field input[type='text'],
#stylesSection .two-col .style-field input[type='number'],
#stylesSection .two-col .style-field input[type='color'] {width: 160px; max-width: 100%;}

#stylesSection .two-col .style-field input[type='color']::-webkit-color-swatch-wrapper {
  padding: 4px;
}
#stylesSection .two-col .style-field input[type='color']::-moz-color-swatch {
  margin: 4px;
}

/* Shell básico — não interfere nas variáveis atuais */
.otz-topbar{ height:8px; border-radius:999px; background:rgba(2,6,23,.10); overflow:hidden; margin:-12px 0 18px; }
.otz-topbar .bar{ height:100%; width:0; transition: width .35s ease; }

.otzq-title{ text-align:center; font-weight:900; letter-spacing:-.01em; line-height:1.2; margin:6px 0 32px; color:#111827; font-size:clamp(22px, 2.8vw, 32px); }
.otzq-desc{ text-align:center; color:#6B7280; font-size:16px; margin:6px auto 20px; max-width:56ch; }

/* Respostas em “pill” (mantém .answers para compat) */
.answers{ display:grid; gap:14px; }
.answers .otzq-answer, .answers button{
  text-align:left; padding:18px 22px; border-radius:16px;
  background:#fff; border:1px solid #E5E7EB; color:#111827; font-weight:800; font-size:16px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent, #d6d6d6) 15%, transparent);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
.answers .otzq-answer:hover, .answers button:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--accent, #1a63d1) 30%, #E5E7EB);
  box-shadow:0 14px 28px rgba(2,6,23,.10);
  color:color-mix(in srgb, var(--accent, #1a63d1) 50%, #111827);
}

/* Leads */
.otz-leads-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px; }
@media (max-width:760px){ .otz-leads-form{ grid-template-columns:1fr; } }
.otz-leads-form label{ display:flex; flex-direction:column; gap:8px; font-weight:700; color:#111827; }
.otz-leads-form input{
  appearance:none; width:100%; padding:14px 16px; background:#fff;
  border:1.5px solid #E5E7EB; border-radius:14px; font-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.otz-leads-form input::placeholder{ color:#9AA3B2; }
.otz-leads-form input:focus{
  border-color:color-mix(in srgb, var(--accent, #1a63d1) 55%, #94A3B8);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent, #1a63d1) 18%, transparent);
}
.otz-leads-form input.is-error{ border-color:#DC2626; box-shadow:0 0 0 4px rgba(220,38,38,.12); }
.field-error{ color:#DC2626; font-size:12px; }

/* Botão primário “pill” (usando a cor do usuário) */
.otzq-btn.otzq-btn-primary{
  border:0; width:100%; padding:16px 22px; border-radius:999px; color:#fff; font-weight:900;
  background:linear-gradient(135deg, var(--accent, #1a63d1) 0%, color-mix(in srgb, var(--accent, #1a63d1) 60%, #A78BFA) 100%);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent, #d6d6d6) 15%, transparent); border:1px solid #E5E7EB;
}
.otzq-btn.otzq-btn-primary:hover{ filter:brightness(1.03); transform:translateY(-1px);}

.otzq-btn.otz-quiz-btn {
  border:1px solid #E5E7EB;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent, #d6d6d6) 15%, transparent);
}


.otz-quiz-modal .otzq-rec-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
  gap: 20px !important; 
  margin-top: 16px !important;
}
@media (max-width: 480px) {
  .otz-quiz-modal .otzq-rec-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

.otz-quiz-modal .otzq-rec-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px; 
  overflow: hidden; 
  text-decoration: none;
  color: inherit;
  width: 100%; 
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  padding: 8px;
}


.otz-quiz-modal .otzq-rec-card:hover {
  transform: translateY(-4px); 
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}


.otz-quiz-modal .otzq-rec-card .thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden; 
  border-radius: 6px; 
}
.otz-quiz-modal .otzq-rec-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-out; 
}

.otz-quiz-modal .otzq-rec-card:hover .thumb img {
  transform: scale(1.05); 
}


.otz-quiz-modal .otzq-rec-card .title {
  padding: 12px 8px 8px 8px; /* Ajusta padding (menos embaixo para dar espaço ao botão) */
  text-align: left; 
  font-weight: 600; 
  font-size: 15px; 
  line-height: 1.4; 
  color: #1f2937; 
  background-color: #ffffff; 
  flex-grow: 1; 
}

.otz-quiz-modal .otzq-rec-card .otzq-rec-link {
  display: inline-block; 
  margin: 0 8px 12px 8px; 
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--accent, #1a63d1);
  background-color: color-mix(in srgb, var(--accent, #1a63d1) 1%, transparent); /* Fundo BEM sutil */
  border: 1px solid #1a63d1;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.otz-quiz-modal .otzq-rec-card .otzq-rec-link:hover {
  background-color: color-mix(in srgb, var(--accent, #1a63d1) 15%, transparent); /* Fundo um pouco mais forte no hover */
  color: var(--accent, #1a63d1); 
}




.otz-quiz-modal{ position: relative; }

/* TOP BAR */
.otz-topbar{position: absolute;top: 12px;left: 0px;right: 0px;height: 8px;border-radius: 999px;background: rgba(2,6,23,.10);overflow: hidden;
  pointer-events: none;z-index: 1;}
.otz-topbar .bar{height: 100%;width: 0;transition: width .35s ease;background: var(--accent, #1a63d1);}
.otz-quiz-header{ padding-top: 16px; }

.otz-quiz-body p {
  text-align: center;
}

.otz-quiz-overlay{ overscroll-behavior: contain; }
body.otz-quiz-lock{ overflow: hidden; }


/* Centralizar botões “simples” (Informativo, Rewarded etc.) dentro do modal */
.otz-quiz-modal .otz-quiz-body > .otzq-btn,
.otz-quiz-modal .otz-quiz-body > button.otz-quiz-btn {
  display: block;                 /* vira bloco… */
  width: -moz-fit-content;        /* …com largura do conteúdo */
  width: fit-content;
  max-width: 100%;
  margin: 12px auto 0;            /* centraliza no container */
}

/* Se algum tema/vendor tiver forçado alinhamento por texto, garantimos que o botão não “estica” */
.otz-quiz-modal .otz-quiz-body > .otzq-btn:where(*) {
  text-align: center;
}

/* INFO ACTION — centraliza o título quando vier como <div> puro */
.otz-quiz-modal .otz-quiz-body > div:not([class]):first-child{
  text-align: center;
  margin: 0 .5rem 12px;   /* mantém a margem lateral que já vem inline e dá respiro embaixo */
}

/* (já deixamos as ações centralizadas antes; fica aqui por garantia) */
.otz-quiz-modal .otz-quiz-actions{
  justify-content: center;
}

.otzq-rec-card .otzq-rec-link {
  display: inline-block; /* Comportamento de link/botão */
  margin: 0 8px 12px 8px; /* Espaçamento abaixo do título, dentro do padding do card */
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--accent, #1a63d1); /* Usa a cor de destaque definida no modal */
  /* Fundo BEM sutil da cor de destaque */
  background-color: color-mix(in srgb, var(--accent, #1a63d1) 8%, transparent); 
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  /* Garante que fique acima de qualquer fundo do card */
  position: relative; 
  z-index: 1;
}

.otzq-rec-card .otzq-rec-link:hover {
  /* Fundo um pouco mais forte no hover */
  background-color: color-mix(in srgb, var(--accent, #1a63d1) 15%, transparent); 
  color: var(--accent, #1a63d1); /* Mantém a cor do texto */
}








/* AJUSTES PARA MANTER NO DEFAULT */ /* AJUSTES PARA MANTER NO DEFAULT */

.otz-quiz-modal{
  padding-bottom: 30px;
  padding-top: 30px;
}

.otzq-answer {
  width: 90%;
  margin: auto;
}

/*
.otz-quiz-topbar {
  background: linear-gradient(to right, rgb(0, 119, 255,.65), rgb(64, 201, 255,.58)) !important; 
}

.otz-quiz-body h2 {
  border: none;
  padding-bottom: 15px;
  font-weight: 600;
  color: rgba(0, 0, 0, .60); 
  padding: 0px;
  margin: 0px 0px 15px 0px;
  font-weight: 1000;
}
*/

.otz-quiz-body h1 {
  border-bottom: 1px solid rgb(214,214,214,.37);
  padding-bottom: 22px;
  font-weight: 600;
  font-size: 21px;
  margin-bottom: 40px;
}

/* AJUSTES PARA MANTER NO DEFAULT */ /* AJUSTES PARA MANTER NO DEFAULT */