/*! qm-consent 1.1.0 – kortet för samtycke till statistik. Tematiseras med --qm-consent-* (se README). */
.qmc {
  --_bg: var(--qm-consent-bg, #fffdfa);
  --_fg: var(--qm-consent-fg, #1b1a17);
  --_muted: var(--qm-consent-muted, #37332e);
  --_line: var(--qm-consent-line, #e4dbcf);
  --_accent: var(--qm-consent-accent, #ad6a34);
  --_action: var(--qm-consent-action, #1f332a);
  --_action-fg: var(--qm-consent-action-fg, #fbf9f6);
  --_action-hover: var(--qm-consent-action-hover, #2b463a);
  --_link: var(--qm-consent-link, #8a4f22);
  --_focus: var(--qm-consent-focus, #2b463a);
  --_radius: var(--qm-consent-radius, 14px);
  --_btn-radius: var(--qm-consent-button-radius, 8px);
  --_shadow: var(--qm-consent-shadow, 0 18px 40px -24px rgba(27, 26, 23, .38), 0 2px 6px -2px rgba(27, 26, 23, .08));
  --_serif: var(--qm-consent-serif, Georgia, 'Times New Roman', serif);
  --_sans: var(--qm-consent-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --_secondary-hover: var(--qm-consent-secondary-hover, rgba(127, 127, 127, .12));
  /* Nere till höger på större skärmar (med marginal för skärmens säkra område); i mobil ett kort längs nederkanten. */
  position: fixed; z-index: var(--qm-consent-z, 44); right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box; width: min(400px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: auto;
  padding: 22px 20px 16px; border: 1px solid var(--_line); border-radius: var(--_radius);
  background: var(--_bg); color: var(--_fg); box-shadow: var(--_shadow); font-family: var(--_sans);
  transition: opacity .2s ease, transform .2s ease;
}
.qmc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--_accent); }
.qmc--enter { opacity: 0; transform: translateY(8px); }
.qmc__title { margin: 0 0 6px; font-family: var(--_serif); font-size: 1.16rem; font-weight: 600; line-height: 1.25; color: var(--_fg); outline: none; }
.qmc__state { margin: 0 0 8px; font-size: .92rem; font-weight: 600; color: var(--_action); }
.qmc__body { margin: 0 0 16px; font-size: .94rem; line-height: 1.5; color: var(--_muted); }
.qmc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Två lika tillgängliga val på första nivån: samma storlek, typsnitt, vikt och klickyta, samma ram i sajtens
   handlingsfärg och full läsbarhet. Godkännandet är fyllt (huvudval); "Endast nödvändiga" har ram och text i samma
   färg (sekundärt val) – tydligt synligt, aldrig grått, aldrig som en inaktiv knapp, aldrig gömt bakom ett extra steg. */
.qmc__btn {
  appearance: none; margin: 0; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--_action); border-radius: var(--_btn-radius);
  background: var(--_action); color: var(--_action-fg); font: 600 .97rem/1.2 var(--_sans); cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.qmc__btn:hover { background: var(--_action-hover); border-color: var(--_action-hover); }
.qmc__btn[data-qm-choice="denied"] { background: transparent; color: var(--_action); }
.qmc__btn[data-qm-choice="denied"]:hover { background: var(--_secondary-hover); color: var(--_action-hover); border-color: var(--_action-hover); }
.qmc__btn[aria-pressed="true"]::before { content: '✓ '; }
.qmc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.qmc__more { font-size: .9rem; font-weight: 600; color: var(--_link); text-decoration: underline; text-underline-offset: 3px; }
.qmc__close { appearance: none; margin: 0 0 0 auto; padding: 6px 2px; border: 0; background: none; color: var(--_muted); font: 600 .9rem/1 var(--_sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qmc__btn:focus-visible, .qmc__more:focus-visible, .qmc__close:focus-visible, .qmc__title:focus-visible { outline: 3px solid var(--_focus); outline-offset: 2px; }
@media (max-width: 759px) {
  .qmc {
    left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto; max-height: calc(100vh - 24px); padding: 16px 16px 10px;
  }
  .qmc__title { margin-bottom: 4px; font-size: 1.04rem; }
  .qmc__body { margin-bottom: 12px; font-size: .875rem; line-height: 1.42; }
  .qmc__btn { min-height: 44px; }
  .qmc__foot { margin-top: 8px; }
}
@media (max-width: 330px) { .qmc__actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .qmc { transition: none; } .qmc--enter { opacity: 1; transform: none; } }
@media print { .qmc { display: none; } }
