/* Dog-Haus Konfigurator-Info-Felder (D-029) — Redesign von INFO-Button + Hilfe-Modal.
   Lädt nur auf Konfigurator-Produktseiten (build-injiziert). Überschreibt die
   WP-Inline-Styles der hzk-Klassen; Markenfarben wie Checkout (#166534-Familie). */

/* ---------- INFO-Button: Dashicons-Font fehlt im Klon -> Inline-SVG-Icon ---------- */
.hzk-help-button {
  background: #166534 !important;
  border-radius: 999px !important;
  width: auto !important;
  height: 24px !important;
  padding: 0 10px 0 6px !important;
  gap: 4px;
  box-shadow: none !important;
}
.hzk-help-button:hover { background: #14532d !important; transform: none !important; box-shadow: 0 2px 6px rgba(22, 101, 52, 0.35) !important; }
.hzk-help-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.3) !important; }
.hzk-help-button .dashicons {
  display: inline-block;
  width: 14px !important;
  height: 14px !important;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hzk-help-button .dashicons::before { content: none !important; }
.hzk-help-button-text {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Werte-Ebene (z. B. Gerätehaus in der Extras-Gruppe): kompakte Pille
   oben rechts in der Options-Karte; der <button> fängt den Klick ab,
   ohne die Checkbox des Labels zu schalten */
.hzk-option-value.hzk-has-help { position: relative; }
.hzk-help-button--value {
  position: absolute !important;
  top: 6px;
  right: 6px;
  z-index: 2;
  height: 24px !important;
  padding: 0 9px 0 6px !important;
}
/* unsichtbare Tap-Fläche >= 44px (D-030: Fehl-Taps toggelten die 1.150-€-Option) —
   Klicks auf das Pseudo-Element treffen den Button, nie das Options-Label */
.hzk-help-button--value::after { content: ""; position: absolute; inset: -10px; }
.hzk-help-button--value .dashicons { width: 12px !important; height: 12px !important; }
.hzk-help-button--value .hzk-help-button-text { font-size: 10px; }

/* ---------- Modal-Shell ---------- */
/* sticky .dh-header hat z-index 99999 — Modal muss darüber liegen */
#hzk-help-modal.hzk-modal { z-index: 1000000 !important; }
.hzk-modal .hzk-modal-overlay { background: rgba(17, 24, 28, 0.55); }
.hzk-modal .hzk-modal-content {
  max-width: 560px;
  width: calc(100% - 32px);
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  animation: hzk-modal-in 0.22s ease-out;
}
@keyframes hzk-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.hzk-modal .hzk-modal-header {
  background: linear-gradient(135deg, #166534 0%, #14532d 100%) !important;
  padding: 14px 18px;
  /* WP-Original: block-Header + absolut positioniertes X — lange (dynamische)
     Titel laufen unter den Button. Fix: Flex-Reihe, das X bekommt festen Platz. */
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
}
.hzk-modal .hzk-modal-header-content { flex: 1 1 auto; min-width: 0; }
.hzk-modal .hzk-modal-title { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; overflow-wrap: break-word; }
.hzk-modal .hzk-modal-close {
  position: static !important;
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 22px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}
.hzk-modal .hzk-modal-close:hover { opacity: 1; transform: scale(1.08); }
.hzk-modal .hzk-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hzk-modal .hzk-modal-body {
  overflow-y: auto;
  padding: 20px 22px 24px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #374151;
}

/* Mobile: Bottom-Sheet statt Mittel-Modal */
@media (max-width: 575.98px) {
  .hzk-modal { align-items: flex-end !important; }
  .hzk-modal .hzk-modal-content {
    width: 100%;
    max-width: none;
    max-height: 86vh;
    border-radius: 14px 14px 0 0;
    animation-name: hzk-sheet-in;
  }
  @keyframes hzk-sheet-in {
    from { opacity: 0.6; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
  }
  .hzk-modal .hzk-modal-body { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); }
}

/* ---------- Inhalts-Bausteine (Struktur aus configurator-help.json) ---------- */
.hzk-help-intro { margin: 0 0 14px; color: #1f2937; }
.hzk-help-tip {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #edf3ef;
  border-left: 3px solid #166534;
  border-radius: 0 6px 6px 0;
  color: #1f2937;
}
.hzk-help-tip strong { color: #166534; }
.hzk-help-list { margin: 0 0 14px; padding: 0 0 0 2px; list-style: none; }
.hzk-help-list li {
  position: relative;
  padding: 4px 0 4px 24px;
  margin: 0;
}
.hzk-help-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 14px;
  height: 14px;
  background-color: #166534;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hzk-help-list li strong { color: #1f2937; }
.hzk-help p { margin: 0 0 12px; }
.hzk-help p:last-child { margin-bottom: 0; }
.hzk-help-figure {
  margin: 16px 0 0;
  padding: 0;
}
.hzk-help-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
}
.hzk-help-figure figcaption {
  margin-top: 6px;
  font-size: 0.78rem;
  color: #6b7280;
  text-align: center;
}

/* Mehrbild-Galerie: erstes Bild volle Breite, Rest zweispaltig */
.hzk-help-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
  margin-top: 16px;
}
.hzk-help-gallery .hzk-help-figure { margin: 0; }
.hzk-help-gallery .hzk-help-figure:first-child { grid-column: 1 / -1; }
.hzk-help-gallery .hzk-help-figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.hzk-help-gallery .hzk-help-figure:first-child img { aspect-ratio: auto; }
@media (max-width: 419.98px) {
  .hzk-help-gallery { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hzk-modal .hzk-modal-content { animation: none !important; }
  .hzk-help-button, .hzk-modal-close { transition: none !important; }
}