/* Mighty Forms – formularer i butikken. Følger themets farver via --color-*-variablerne. */
.msf {
  --f-ink: var(--color-heading, var(--color-text, #1f2421));
  --f-text: var(--color-text, #1f2421);
  --f-muted: var(--color-muted, #6b726e);
  --f-line: var(--color-line, #e3e1da);
  --f-surface: var(--color-surface, #fff);
  --f-accent: var(--color-primary, #2c5e4f);
  --f-error: #b4382f;
  --f-radius: var(--radius, 10px);
  margin: 28px 0;
  max-width: 760px;
  scroll-margin-top: 90px;
}
.msf *, .msf *::before, .msf *::after { box-sizing: border-box; }
.msf-title { margin: 0 0 8px; }
.msf-intro { margin: 0 0 18px; color: var(--f-muted); }
.msf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.msf-full { grid-column: 1 / -1; }
.msf-half { grid-column: span 1; }
.msf-heading { margin: 10px 0 0; font-size: 1.15em; }
.msf-paragraph { margin: 0; color: var(--f-muted); }
.msf-field label, .msf-group legend { display: block; font-weight: 600; font-size: 14px; color: var(--f-ink); margin-bottom: 6px; padding: 0; }
.msf-field input[type=text], .msf-field input[type=email], .msf-field input[type=tel], .msf-field input[type=number], .msf-field input[type=date], .msf-field select, .msf-field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--f-text); background: var(--f-surface);
  border: 1px solid var(--f-line); border-radius: var(--f-radius); padding: 11px 13px; min-height: 46px;
}
.msf-field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.msf-field input:focus, .msf-field select:focus, .msf-field textarea:focus { outline: none; border-color: var(--f-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--f-accent) 20%, transparent); }
.msf-field input[type=file] { width: 100%; font: inherit; font-size: 14px; padding: 10px; border: 1px dashed var(--f-line); border-radius: var(--f-radius); background: var(--f-surface); }
.msf-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.msf-check { display: flex !important; align-items: flex-start; gap: 9px; font-weight: 400 !important; font-size: 15px !important; margin: 0 0 6px !important; cursor: pointer; color: var(--f-text) !important; }
.msf-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--f-accent); }
.msf-req { color: var(--f-error); }
.msf-help { font-size: 13px; color: var(--f-muted); margin-top: 5px; }
.msf-error { font-size: 13px; color: var(--f-error); margin-top: 5px; }
.msf-error:empty { display: none; }
.msf-field.has-error input, .msf-field.has-error select, .msf-field.has-error textarea { border-color: var(--f-error); }
.msf-alert { background: #fbeae8; color: var(--f-error); border-radius: var(--f-radius); padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.msf-alert[hidden] { display: none; }
.msf-success { background: color-mix(in srgb, var(--f-accent) 12%, #fff); color: var(--f-ink); border-radius: var(--f-radius); padding: 18px 20px; font-size: 16px; outline: none; }
.msf-privacy { font-size: 13px; color: var(--f-muted); margin: 16px 0 0; }
.msf-privacy a, .msf-check a { color: inherit; text-decoration: underline; }
.msf-actions { margin-top: 18px; }
.msf-submit[disabled] { opacity: .6; cursor: progress; }
.msf-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.msf form[inert] { pointer-events: none; opacity: .85; }
.msf-missing { padding: 14px; border: 1px dashed #c9ccca; border-radius: 10px; color: #6b726e; }
@media (max-width: 600px) {
  .msf-grid { grid-template-columns: 1fr; }
  .msf-half { grid-column: 1 / -1; }
  .msf-submit { width: 100%; }
}