/* ============================================================================
   SD-Link — Geteilte Dialog-Hülle ("Dialog Chrome")
   Scrim · Wrap · Karte · Schließen · Kopf · Felder · Consent · Aktionen · Erfolg
   ----------------------------------------------------------------------------
   Quelle: ehemals der Abschnitt "NOTIFY DIALOG" in sdlink-shop.css. Ausgelagert,
   weil sich zwei Dialoge dieselbe Hülle teilen und auf unterschiedlichen Seiten
   leben:
     - Benachrichtigungs-Dialog (#sd-notify, inc/notify.php) — Shop-Übersicht.
     - Einsende-Dialog       (#sd-submit, inc/einsende.php) — Galerie + Produktseiten.
   Beide Enqueues laden dieses Stylesheet (Handle 'sdlink-dialog'); die
   dialog-spezifischen Blöcke liegen daneben (Notify: sdlink-shop.css,
   Einsende: sdlink-einsende.css).
   ============================================================================ */
.sd-drawer-scrim { position: fixed; inset: 0; background: rgba(10,27,46,.4); z-index: 90; backdrop-filter: blur(2px); }
.sd-notify-scrim { z-index: 90; }
.sd-notify-wrap { position: fixed; inset: 0; z-index: 91; display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; }
.sd-notify {
  position: relative; pointer-events: auto; width: 100%; max-width: 520px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-3); padding: 28px; opacity: 1;
  animation: sd-notify-in var(--dur-base) var(--ease-out) both;
}
@keyframes sd-notify-in { from { transform: translateY(12px) scale(.985); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sd-notify { animation: none; } }
.sd-notify-x {
  position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--sd-navy-050); color: var(--sd-navy-700);
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast); padding: 0;
}
.sd-notify-x:hover { background: var(--sd-navy-100); }
.sd-notify-x svg { width: 20px; height: 20px; }

.sd-notify-head { display: flex; gap: 18px; margin-bottom: 22px; padding-right: 28px; }
.sd-notify-thumb {
  position: relative; flex: none; width: 96px; height: 96px; background: var(--sd-navy-050); border-radius: var(--r-lg);
  overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 8px;
}
.sd-notify-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; }
.sd-notify-intro .eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sd-amber-600); margin-bottom: 6px;
}
.sd-notify-intro .eyebrow svg { width: 13px; height: 13px; }
.sd-notify-intro h3 { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--fg-brand); margin: 0 0 8px; line-height: 1.2; }
.sd-status-soon {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; height: 26px; padding: 0 12px; border-radius: 999px;
  background: var(--sd-navy-050); border: 1px solid var(--sd-line-soft); font-size: 12px; font-weight: 600; color: var(--sd-navy-700);
}
.sd-status-soon .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sd-amber-600); box-shadow: 0 0 0 3px rgba(215,107,20,.18); }
.sd-notify-intro p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }

.sd-notify-form { display: flex; flex-direction: column; gap: 16px; }
.sd-field { display: flex; flex-direction: column; gap: 6px; }
.sd-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sd-field label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; color: var(--fg-2); margin: 0; }
.sd-field label .req { font-size: 11px; font-weight: 600; color: var(--sd-amber-600); text-transform: uppercase; letter-spacing: .04em; }
.sd-field label .opt { font-size: 11px; font-weight: 500; color: var(--fg-3); }
.sd-field input {
  height: 44px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--sd-line); background: #fff; color: var(--fg-1);
  font-family: var(--font-body); font-size: 15px; outline: none; box-shadow: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.sd-field input::placeholder { color: var(--fg-3); }
.sd-field input:focus, .sd-field input:focus-visible { border-color: var(--sd-navy-500); box-shadow: var(--shadow-focus); }
.sd-field.is-error input { border-color: var(--sd-danger); }
.sd-field-err { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--sd-danger); }
.sd-field-err svg { width: 13px; height: 13px; flex: none; }

.sd-consent { display: flex; gap: 11px; cursor: pointer; align-items: flex-start; margin: 0; font-weight: 400; }
.sd-consent-box { position: relative; flex: none; margin-top: 1px; }
.sd-consent-box input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.sd-consent-box .box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--sd-line); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all var(--dur-fast) var(--ease-out);
}
.sd-consent-box .box svg { width: 13px; height: 13px; opacity: 0; }
.sd-consent-box input:checked + .box { background: var(--sd-amber-600); border-color: var(--sd-amber-600); }
.sd-consent-box input:checked + .box svg { opacity: 1; }
.sd-consent-box input:focus-visible + .box { box-shadow: var(--shadow-focus); }
.sd-consent-txt { font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.sd-consent-txt a { color: var(--sd-navy-600); text-decoration: underline; text-underline-offset: 2px; }
.sd-consent.is-error .sd-consent-box .box { border-color: var(--sd-danger); }

/* Buttons im Dialog — auf .sd-notify gescoped, damit sie unabhängig von den
   seiten-spezifischen .btn-Regeln (z. B. .sd-gallery-page .btn) korrekt aussehen:
   der Dialog rendert im Footer, AUSSERHALB dieser Seiten-Wrapper, und auf der
   Galerie-Seite gibt es kein globales .btn. */
.sd-notify .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  height: 44px; padding: 0 20px; border-radius: var(--r-md);
  cursor: pointer; user-select: none; border: 1px solid transparent;
  text-decoration: none; line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sd-notify .btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.sd-notify .btn-primary { background: var(--sd-amber-600); color: #fff; border-color: rgba(0,0,0,.08); box-shadow: var(--shadow-1); }
.sd-notify .btn-primary:hover { background: var(--sd-amber-500); box-shadow: var(--shadow-2); color: #fff; }
.sd-notify .btn-secondary { background: transparent; color: var(--sd-navy-700); border-color: var(--sd-navy-700); }
.sd-notify .btn-secondary:hover { background: var(--sd-navy-100); }
.sd-notify .btn svg { width: 16px; height: 16px; flex: none; }

.sd-notify-actions { display: flex; gap: 10px; margin-top: 2px; }
.sd-notify-actions .btn { flex: 1; }
.sd-notify-actions .btn[disabled] { opacity: .55; cursor: not-allowed; }
.sd-notify-fineprint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; font-size: 12px; color: var(--fg-3); }
.sd-notify-fineprint svg { width: 12px; height: 12px; }

.sd-notify-done { text-align: center; padding: 14px 8px 6px; }
.sd-notify-check {
  width: 64px; height: 64px; border-radius: 999px; margin: 0 auto 16px;
  background: var(--sd-success-bg); color: var(--sd-success);
  display: flex; align-items: center; justify-content: center;
}
.sd-notify-check svg { width: 30px; height: 30px; }
.sd-notify-done h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--fg-brand); margin: 0 0 8px; }
.sd-notify-done p { margin: 0 auto 20px; font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 38ch; }
.sd-notify-done .mono { font-family: var(--font-mono); color: var(--fg-1); }

/* Honeypot unsichtbar halten */
.sd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 480px) {
  .sd-notify { padding: 22px; }
  .sd-notify-head { flex-direction: column; gap: 14px; padding-right: 20px; }
  .sd-field-row { grid-template-columns: 1fr; }
}
.is-hidden { display: none !important; }