/* DM Survey Frontend UI (modern) */
.dm-survey{ 
  --dm-accent: var(--dm-accent, #111);
  --dm-bg: var(--dm-bg, #fff);
  --dm-bc: var(--dm-bc, #e9e9e9);
  --dm-radius: var(--dm-radius, 18px);
  --dm-maxw: var(--dm-maxw, 760px);
  --dm-font: var(--dm-font, 16px);
  --dm-gap: var(--dm-gap, 14px);
  --dm-inpr: var(--dm-inpr, 14px);
  --dm-btnr: var(--dm-btnr, 14px);

  max-width: var(--dm-maxw);
  margin: 0 auto;
  font-size: var(--dm-font);
  line-height: 1.4;
  background: var(--dm-bg);
  border-radius: var(--dm-radius);
  padding: clamp(16px, 2.6vw, 26px);
  border: 1px solid var(--dm-bc);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  color:#111827;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

.dm-survey *{ box-sizing:border-box; }
.dm-survey a{ color: var(--dm-accent); }

.dm-survey-head{
  display:flex; gap:14px; align-items:flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dm-bc);
  margin-bottom: 16px;
}
.dm-survey-head .dm-icon{
  width:52px;height:52px; border-radius: 16px;
  display:flex;align-items:center;justify-content:center;
  background: var(--dm-accent);
  color:#fff; flex:0 0 auto;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.dm-survey-head h2{ margin:0; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .2px; }
.dm-survey-head p{ margin:.35em 0 0 0; color:#6b7280; font-size: .98em; }

.dm-q{ margin-top: var(--dm-gap); }
.dm-q label{ display:block; font-weight: 650; color:#111827; margin-bottom: 8px; }
.dm-q .dm-help{ display:block; font-size:.92em; color:#6b7280; margin-top:8px; }
.dm-req{ color:#dc2626; font-weight: 800; }

.dm-q input[type="text"],
.dm-q input[type="email"],
.dm-q input[type="number"],
.dm-q input[type="date"],
.dm-q input[type="time"],
.dm-q input[type="datetime-local"],
.dm-q textarea,
.dm-q select{
  width:100%;
  padding: 12px 14px;
  border-radius: var(--dm-inpr);
  border: 1px solid #d5dae2;
  background:#fff;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.dm-q textarea{ min-height: 120px; resize: vertical; }
.dm-q input:focus,
.dm-q select:focus,
.dm-q textarea:focus{
  border-color: color-mix(in srgb, var(--dm-accent) 55%, #000 0%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dm-accent) 16%, transparent 84%);
}
.dm-q input::placeholder,
.dm-q textarea::placeholder{ color:#9ca3af; }

/* Choice chips (radio/checkbox) */
.dm-inline{
  display:flex; flex-wrap:wrap;
  gap:10px 12px;
  margin-top: 8px;
}
.dm-choice{
  display:inline-flex; align-items:center;
  border: 1px solid #d5dae2;
  border-radius: 999px;
  padding: 10px 12px;
  background: #fff;
  cursor:pointer;
  user-select:none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, transform .05s ease;
}
.dm-choice:hover{ border-color:#b8c0cb; transform: translateY(-1px); }
.dm-choice input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
}
.dm-choice span{
  display:inline-flex; align-items:center;
  font-weight: 600;
  color:#111827;
  line-height: 1;
}
.dm-choice span:before{
  content:"";
  width: 14px; height: 14px;
  border: 2px solid #c7cdd6;
  border-radius: 999px;
  margin-right: 10px;
  box-sizing:border-box;
  background:#fff;
}
.dm-check span:before{ border-radius: 5px; }

.dm-choice input:checked + span:before{
  border-color: var(--dm-accent);
  background: radial-gradient(circle at 50% 50%, var(--dm-accent) 0 55%, transparent 58% 100%);
}
.dm-check input:checked + span:before{
  background: var(--dm-accent);
  border-color: var(--dm-accent);
  mask: none;
}
.dm-choice input:checked + span{
  color:#0b1220;
}
.dm-choice:has(input:checked){
  border-color: color-mix(in srgb, var(--dm-accent) 55%, #000 0%);
  background: color-mix(in srgb, var(--dm-accent) 8%, #fff 92%);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Buttons + nav */
.dm-nav{
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--dm-bc);
}
.dm-btn{
  appearance:none;
  border-radius: var(--dm-btnr);
  padding: 12px 16px;
  font-weight: 750;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.04);
  cursor:pointer;
  transition: transform .05s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.dm-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.07); }
.dm-btn:active{ transform: translateY(0px); box-shadow:none; }
.dm-btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }

.dm-btn-primary{
  background: var(--dm-accent);
  color:#fff;
  border-color: var(--dm-accent);
}
.dm-btn-primary:hover{
  background: color-mix(in srgb, var(--dm-accent) 92%, #000 8%);
  border-color: color-mix(in srgb, var(--dm-accent) 92%, #000 8%);
}

/* Progress */
.dm-progress{
  height: 10px;
  background: rgba(17,24,39,.10);
  border-radius: 999px;
  overflow:hidden;
  margin-top: 12px;
}
.dm-progress > div{
  height:100%;
  width:0%;
  background: var(--dm-accent);
  transition: width .25s ease;
}

/* Pagebreak visual (optional) */
.dm-pagebreak{ height: 1px; background: var(--dm-bc); margin: 18px 0; }

/* Templates */
.dm-tpl-minimal{
  border:none; box-shadow:none; padding:0; background:transparent;
}
.dm-tpl-minimal .dm-survey-head{ border:none; padding:0; margin:0 0 12px 0; }
.dm-tpl-minimal .dm-nav{ border-top:none; padding-top:12px; }

.dm-tpl-clean{
  box-shadow:none;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
}

/* Contact wrapper */
.dm-contact{ margin-bottom: 10px; }

/* Small screens */
@media (max-width: 520px){
  .dm-survey-head{ flex-direction: column; align-items:flex-start; }
  .dm-nav{ flex-direction: column; align-items: stretch; }
  .dm-nav .dm-btn{ width:100%; }
}