/* Voetbalmaatjes – Tekstuele Voetbal Quiz (light, v1.4) */
:root{
  --vm-primary:#FB9D1C;
  --vm-accent:#1F5599;
  --vm-bg:#ffffff;
  --vm-text:#0b2233;
  --vm-muted:#5b6b7a;
  --vm-border:#e6ecf1;
}

.vmtq-wrap{ max-width: 720px; margin: 0 auto; padding: 16px; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--vm-text); }
.vmtq-card{ background: var(--vm-bg); border:1px solid var(--vm-border); border-radius: 16px; box-shadow: 0 10px 20px rgba(0,0,0,.06); overflow: hidden; }

.vmtq-header{ padding: 18px 18px 10px; text-align: center; }
.vmtq-logo{ display:block; margin: 0 auto 10px; height: 36px; width: auto; object-fit: contain; } /* logo groter gemaakt */
.vmtq-title{ margin: 0; font-size: 26px; color: var(--vm-primary); letter-spacing:.2px; }

.vmtq-progressbar{ position: relative; height: 10px; margin: 12px 18px; background: #f1f5f9; border-radius: 999px; }
.vmtq-progress-fill{ position:absolute; inset:0; width:0%; background: var(--vm-primary); border-radius: 999px; transition: width .3s ease; }
.vmtq-progress-count{ position:absolute; right: 0; top: -20px; font-weight: 700; font-size: 13px; color: var(--vm-muted); }

.vmtq-main{ padding: 8px 18px 18px; }
.vmtq-question{ background: #e9f0fb; border: 1px solid #d5e2fb; color: #10365b; padding: 14px; border-radius: 10px; font-size: 18px; min-height: 56px; display:flex; align-items:center; }

.vmtq-choices{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (max-width:560px){ .vmtq-choices{ grid-template-columns: 1fr; } }

.vmtq-choice{ border:0; border-radius: 12px; padding: 12px; font-weight:800; cursor:pointer; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.vmtq-choice--primary{ background: #fff7ea; border: 1px solid #ffd7a6; color: #6a3c00; }
.vmtq-choice--accent{ background: #eef4ff; border: 1px solid #cfe0ff; color: #0b2e66; }
.vmtq-choice:active{ transform: translateY(1px); }

.vmtq-feedback{ margin-top: 10px; border: 1px solid var(--vm-border); border-radius: 10px; padding: 10px; background: #f8fafc; }
.vmtq-feedback-status{ font-weight: 800; margin-bottom: 6px; }
.vmtq-feedback-status.ok{ color: #198754; }
.vmtq-feedback-status.err{ color: #c03530; }

.vmtq-actions{ display:flex; gap: 10px; justify-content: center; padding: 12px 18px 18px; }
.vmtq-btn{ border:0; border-radius: 12px; padding: 10px 14px; font-weight:800; cursor:pointer; background: var(--vm-primary); color: #fff; display:none; }
.vmtq-btn:active{ transform: translateY(1px); }