/* Prijsmatch-popup. Compact, rustig, één merk-accent (rood), sluit aan op de shop. */
.sf-pm-overlay{
  --sf-red:#b0121a; --sf-red-dark:#8f0e15;
  --sf-ink:#26221f; --sf-muted:#6f6a64; --sf-line:#d8d3ce;
  --sf-surface:#f6f4f2; --sf-ok:#1a7a3c;
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow:auto;
  background:rgba(20,18,16,.5);
}
.sf-pm-overlay[hidden]{display:none}

.sf-pm-dialog{
  position:relative; width:100%; max-width:440px;
  background:#fff; color:var(--sf-ink);
  border-radius:12px; padding:22px 22px 18px;
  box-shadow:0 14px 44px rgba(20,18,16,.26);
  font:inherit; line-height:1.4;
}

.sf-pm-close{
  position:absolute; top:10px; right:10px;
  width:32px; height:32px; padding:0;
  border:0; background:none; cursor:pointer;
  font-size:24px; line-height:1; color:var(--sf-muted);
  border-radius:8px; transition:background .12s,color .12s;
}
.sf-pm-close:hover{background:var(--sf-surface); color:var(--sf-ink)}

.sf-pm-dialog h2{margin:0 28px 4px 0; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--sf-ink)}
.sf-pm-lead{margin:0 0 3px; font-size:13.5px; color:var(--sf-ink)}
.sf-pm-promise{margin:0 0 16px; font-size:12.5px; color:var(--sf-muted)}

.sf-pm-product{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  margin:0 0 16px; padding:8px 11px;
  background:var(--sf-surface); border-radius:8px; font-size:13.5px;
}
.sf-pm-product .k{color:var(--sf-muted)}
.sf-pm-product a{color:var(--sf-red); font-weight:600; text-decoration:none}
.sf-pm-product a:hover{text-decoration:underline}

.sf-prijsmatch .sf-field{display:block; margin:0 0 12px}
.sf-prijsmatch .sf-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.sf-prijsmatch .sf-row .sf-field{margin:0 0 12px}
.sf-prijsmatch .sf-field>span{display:block; margin:0 0 4px; font-size:12.5px; font-weight:600; color:var(--sf-ink)}
.sf-prijsmatch .sf-field>span em{color:var(--sf-red); font-style:normal}
.sf-prijsmatch .sf-field small{display:block; margin:-1px 0 5px; font-size:11.5px; font-weight:400; color:var(--sf-muted)}
.sf-pm-note{margin:-6px 0 12px; font-size:11.5px; color:var(--sf-muted)}

.sf-prijsmatch input[type=text],
.sf-prijsmatch input[type=email],
.sf-prijsmatch input[type=tel],
.sf-prijsmatch input[type=url],
.sf-prijsmatch textarea{
  width:100%; box-sizing:border-box;
  padding:8px 10px; font:inherit; font-size:14px; color:var(--sf-ink);
  background:#fff; border:1px solid var(--sf-line); border-radius:8px;
  transition:border-color .12s, box-shadow .12s;
}
.sf-prijsmatch input:focus,
.sf-prijsmatch textarea:focus{
  outline:none; border-color:var(--sf-red);
  box-shadow:0 0 0 3px rgba(176,18,26,.13);
}
.sf-prijsmatch textarea{min-height:54px; resize:vertical}
.sf-prijsmatch input[type=file]{width:100%; box-sizing:border-box; font:inherit; font-size:12.5px; color:var(--sf-muted); padding:6px 0}

.sf-pm-urls input{margin:0 0 6px}
.sf-pm-add-url{margin:2px 0 0; padding:0; border:0; background:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:600; color:var(--sf-red)}
.sf-pm-add-url:hover{text-decoration:underline}

.sf-pm-result{margin:0 0 10px; font-size:13px}
.sf-pm-result:empty{margin:0}
.sf-pm-result.is-error{color:var(--sf-red)}
.sf-pm-result.is-ok{color:var(--sf-ok)}
.sf-pm-field-error{margin:4px 0 0; font-size:11.5px; color:var(--sf-red)}

.sf-pm-submit{
  width:100%; padding:11px 18px;
  border:0; border-radius:8px; cursor:pointer;
  font:inherit; font-size:14.5px; font-weight:600; color:#fff;
  background:var(--sf-red); transition:background .12s;
}
.sf-pm-submit:hover{background:var(--sf-red-dark)}
.sf-pm-submit:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(176,18,26,.35)}
.sf-pm-submit[disabled]{opacity:.55; cursor:default}

.sf-pm-privacy{margin:10px 0 0; font-size:11px; color:var(--sf-muted); text-align:center}

/* Zorgt dat verbergen werkt, ongeacht wat het thema met [hidden] doet. */
.sf-pm-dialog [hidden]{display:none !important}

/* Bevestiging na verzenden: het formulier maakt plaats voor deze melding. */
.sf-pm-success{text-align:center; padding:18px 6px 10px}
.sf-pm-success-icon{display:flex; align-items:center; justify-content:center; width:54px; height:54px; margin:0 auto 14px; border-radius:50%; background:#e7f4ec; color:var(--sf-ok)}
.sf-pm-success-icon svg{width:28px; height:28px}
.sf-pm-success h3{margin:0 0 6px; font-size:18px; font-weight:700; color:var(--sf-ink)}
.sf-pm-success p{margin:0 auto 18px; max-width:36ch; font-size:14px; line-height:1.5; color:var(--sf-muted)}
.sf-pm-success-close{padding:9px 22px; border:1px solid var(--sf-line); border-radius:8px; background:#fff; color:var(--sf-ink); cursor:pointer; font:inherit; font-size:14px; font-weight:600; transition:background .12s, border-color .12s}
.sf-pm-success-close:hover{background:var(--sf-surface); border-color:#c9c4bf}
.sf-pm-success-close:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(176,18,26,.2)}

.sf-hp{position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden}

/* Knop op de productpagina */
.sf-pm-trigger{
  display:inline-flex; align-items:center; gap:6px; margin:8px 0;
  padding:6px 12px; border:1px solid #d8d3ce; border-radius:6px;
  background:#fff; color:#b0121a; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; line-height:1.2;
  transition:border-color .12s, color .12s;
}
.sf-pm-trigger:hover{border-color:#b0121a; color:#8f0e15}
.sf-pm-trigger:focus-visible{outline:none; border-color:#b0121a; box-shadow:0 0 0 3px rgba(176,18,26,.18)}

@media (max-width:400px){
  .sf-prijsmatch .sf-row{grid-template-columns:1fr; gap:0}
  .sf-pm-dialog{padding:18px 16px 16px}
}
@media (prefers-reduced-motion:reduce){
  .sf-pm-overlay *, .sf-pm-trigger{transition:none !important}
}