/**
 * myschaumstoff Theme - Gelb/Dunkel
 * Brand: myschaumstoff.live
 *
 * Diese Datei wird von configurator.tpl als LETZTES Stylesheet geladen und ist
 * damit die einzige Stelle, an der myschaumstoff vom Basis-Stand abweicht.
 * Alles Shop-Spezifische gehört hierher und nicht in paper.css - sonst
 * kollidiert es bei jedem Abgleich mit frankenschaum.
 */

/*
 * TODO: Speichern & Teilen Button ausgeblendet (2026-02-05)
 * Restore-Funktionalität funktioniert noch nicht korrekt mit dynamischen Variationen.
 * Wenn gefixt, diese Zeile entfernen um Button wieder anzuzeigen.
 */
#saveDrawing {
  display: none !important;
}

:root {
  --brand-primary: #ffb300;
  --brand-primary-hover: #e6a200;
  --brand-primary-active: #cc9000;
  --brand-primary-rgb: 255, 179, 0;
  --brand-color: 42, 100%, 50%; /* HSL für #ffb300 - Underline-Hover */
  --brand-button: #2b3131;
  --brand-button-hover: #1f1f1f;
  --brand-accent: #ffb300;
  --brand-dark: #2b3131;
  --brand-text: #333;
  --brand-disabled: #666;

  /* Der Konfigurator läuft im Poppins-Shop, die Space-Mono-Optik der Basis
     passt dort nicht. Ersetzt den früheren --konfig-font-Umbau in paper.css:
     die Basis liest die Schrift inzwischen überall aus --fs-font-mono. */
  --fs-font-mono: 'Poppins', sans-serif;

  /* Buchstaben-Kreise A, B, … in der 2D-Zeichnung (KonvaRenderer), wie die Badges
     und die Zurück-/Weiter-Knöpfe */
  --fs-bemassung-badge: #2b3131;
}

/* Zeichenfläche weiß statt hellgrau (auch im Vollbild-Fenster auf dem Tablet) */
#myCanvas,
.canvas-modal__canvas,
#threeContainer,
#threeContainer canvas {
  background-color: #ffffff;
}

/* Bemaßungs-Badges in Schwarzgrau statt Brand-Gelb - Gelb auf Weiß liest sich
   auf der Zeichenfläche schlecht. */
.talk-bubble {
  background: linear-gradient(135deg, #2b3131 0%, #1f1f1f 100%);
  box-shadow: 0 2px 4px rgba(43, 49, 49, 0.25);
}

/* Mobil setzt paper.css die Badges mit !important auf den Brand-Verlauf
   (bei uns Gelb) - dieselben Selektoren hier, damit sie dunkel bleiben. */
@media only screen and (max-width: 640px) {
  .bemassungScroll .talk-bubble,
  #formenBemassung > .bemassungItem.c .talk-bubble {
    background: linear-gradient(135deg, #2b3131 0%, #1f1f1f 100%) !important;
    box-shadow: 0 1px 3px rgba(43, 49, 49, 0.2) !important;
  }
}

/* Pill-Style Kategorie-Navigation in der Stoffauswahl */
.stoffListHeader {
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
}

.stoffListHeader a {
  flex: 0 0 auto;
  background: #f0f0f0;
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.stoffListHeader a::after {
  display: none;
}

.stoffListHeader a:hover,
.stoffListHeader a.selected {
  background: hsl(var(--brand-color));
  color: #fff;
}

/* Kombinations-Einschraenkung: Swatches, die zum gewaehlten Schaum nicht passen.
   Die Regeln selbst stehen in configurator-variations.tpl. */
label.variation.kombi-gesperrt {
  opacity: 0.25;
  pointer-events: none;
  cursor: not-allowed;
  position: relative !important;
}

label.variation.kombi-gesperrt .kombi-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
}