/* DTF Meta Ads Quiz – styles lean on your theme + Inter */
.dtf-quiz {
  --dtf-primary: var(--wp--preset--color--primary, #1d2b4f); /* safely falls back to navy */
  --dtf-accent: var(--wp--preset--color--accent, #00a3ff);
  --dtf-bg: var(--wp--preset--color--background, #ffffff);
  --dtf-surface: var(--wp--preset--color--base-2, #f5f7fb);
  --dtf-text: var(--wp--preset--color--foreground, #0b132b);
  --dtf-border: rgba(0,0,0,.08);
  --dtf-radius: 16px;
  --dtf-shadow: 0 8px 24px rgba(0,0,0,.06);

  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--dtf-text);
}

.dtfq-card {
  background: var(--dtf-bg);
  border: 1px solid var(--dtf-border);
  border-radius: var(--dtf-radius);
  box-shadow: var(--dtf-shadow);
  padding: 1.25rem;
}

.dtfq-progress {
  font-size: .95rem;
  margin-bottom: .5rem;
  opacity: .8;
}

.dtfq-question {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
  margin-bottom: .75rem;
}

.dtfq-options {
  display: grid;
  gap: .5rem;
  margin-bottom: 1rem;
}

.dtfq-option {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .75rem .85rem;
  background: var(--dtfq-option-bg, var(--dtf-surface));
  border: 1px solid var(--dtf-border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .06s ease;
}
.dtfq-option:hover { transform: translateY(-1px); }
.dtfq-option input { margin-top: .2rem; }

.dtfq-controls {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.dtfq-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .6rem 1rem;
  background: var(--dtf-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.dtfq-btn[disabled] { opacity: .5; cursor: not-allowed; }
.dtfq-btn.secondary {
  background: transparent;
  border-color: var(--dtf-border);
  color: inherit;
}

.dtfq-footer {
  margin-top: .75rem;
  font-size: .9rem;
  opacity: .8;
}

.dtfq-result {
  border-left: 4px solid var(--dtf-primary);
  padding-left: .75rem;
  margin: .75rem 0 1rem;
}

.dtfq-badge {
  display: inline-block;
  font-weight: 700;
  background: var(--dtf-accent);
  color: #fff;
  border-radius: 999px;
  padding: .25rem .6rem;
  font-size: .8rem;
  margin-left: .4rem;
}