/* ==========================================================================
   FAKC – Klebebuchstaben Konfigurator
   Sauberer Neuaufbau (responsive, zugänglich, Theme-agnostisch)
   ========================================================================== */

/* ------------------------------
   Design-Tokens (lokal für FAKC)
   ------------------------------ */
.fakc-theme {
  /* Farben */
  --fakc-bg: #ffffff;
  --fakc-card: #ffffff;
  --fakc-bg-soft: #f8fafc;
  --fakc-text: #111827;
  --fakc-muted: #6b7280;
  --fakc-line: #e5e7eb;
  --fakc-line-soft: #f1f5f9;
  --fakc-brand: #22c55e;
  --fakc-brand-2: #3b82f6;
  
  /* Layout */
  --fakc-radius: 10px;
  --fakc-gap: 12px;
  
  /* Schatten */
  --fakc-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  --fakc-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.fakc-theme,
.fakc-theme * {
  box-sizing: border-box;
}

/* ------------------------------
   Grundcontainer / Formular
   ------------------------------ */
.fakc-kb-config {
  background: var(--fakc-card);
  border: 1px solid var(--fakc-line);
  border-radius: var(--fakc-radius);
  padding: 16px;
  margin: 14px 0;
}

.fakc-kb-config .form-row {
  margin-bottom: var(--fakc-gap);
}

.fakc-kb-config label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--fakc-text);
}

/* Form-Elemente */
.fakc-kb-config select,
.fakc-kb-config input[type="text"],
.fakc-kb-config textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--fakc-line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  color: var(--fakc-text);
}

.fakc-kb-config textarea {
  min-height: 90px;
  resize: vertical;
}

/* ------------------------------
   Vorschau (Canvas + Maße)
   ------------------------------ */
.fakc-preview-wrap {
  position: relative;
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  padding: 14px;
}

.fakc-preview-grid {
  position: relative;
  border: 1px solid var(--fakc-line);
  border-radius: 6px;
  
  background:
    repeating-linear-gradient(0deg, #fafafa 0 9px, #e8e8e8 9px 10px),
    repeating-linear-gradient(90deg, #fafafa 0 9px, #e8e8e8 9px 10px);
}

.fakc-preview-grid canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: transparent;
  box-shadow: 
    0 1px 0 rgba(0, 0, 0, 0.03),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.fakc-preview-grid.is-mirrored canvas {
  transform: scaleX(-1);
}

.fakc-preview-wrap .dims {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fakc-text);
}

/* Fullscreen Button */
.fakc-preview-fullscreen {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: #eef2f7;
  cursor: pointer;
}

/* Fullscreen Zustände */
.fakc-preview-wrap:fullscreen,
.fakc-preview-wrap:-webkit-full-screen,
.fakc-preview-wrap.is-fullscreen {
  background: #fff;
  padding: 24px;
  width: 100%;
  height: 100%;
}

.fakc-preview-wrap:fullscreen canvas,
.fakc-preview-wrap:-webkit-full-screen canvas,
.fakc-preview-wrap.is-fullscreen canvas {
  width: 100% !important;
  height: calc(100% - 36px) !important;
}

/* Fallback-Overlay für blockierte Fullscreen-API */
.fakc-fs-fallback {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 999999;
  padding: 24px;
  overflow: auto;
}

.fakc-fs-fallback .fakc-fs-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 4px;
  background: #eee;
  font-size: 24px;
  line-height: 36px;
  cursor: pointer;
}

/* ------------------------------
   Bemaßung & Preisdarstellung
   ------------------------------ */
.fakc-dims {
  margin: 10px auto 6px;
  text-align: center;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.2;
  color: var(--wd-success-color, #16a34a);
  background: var(--wd-form-brd-color, #f3f4f6);
  border: 1px solid var(--wd-form-brd-color, #e5e7eb);
}

/* Rechteckmaß unter der Vorschau – ersetzt die Pillen-Maße */
.fakc-rect-dims {
  margin: 16px auto 6px;
  text-align: center;
  font-weight: 700;
  line-height: 1.25;
  /* Größere, responsive Schrift: passt sich Viewportbreite an */
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--fakc-text, #111827);
}
.fakc-rect-dims strong {
  font-weight: 800;
  margin-right: 4px;
}

/* =============================================================================
   FAKC Produktmodus – Segmented Control
   -----------------------------------------------------------------------------
   Die Modusumschaltung (Standard vs. Bootskennzeichen) nutzt eine einfache
   Segmented Control. Damit sie sich nahtlos in das bestehende Design einfügt,
   definieren wir hier grundlegende Layout‑Attribute. Diese Styles können bei
   Bedarf überschrieben werden.
   ==========================================================================
*/
.fakc-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
}
.fakc-segmented input {
  display: none;
}
.fakc-segmented label {
  padding: 6px 10px;
  border: 1px solid var(--fakc-line, #e5e7eb);
  border-radius: 9999px;
  cursor: pointer;
  background: #fff;
  white-space: nowrap;
}
.fakc-segmented input:checked + label {
  border-color: var(--fakc-brand, #22c55e);
  background: var(--fakc-brand-2, #e6fbe5);
  color: var(--fakc-text, #111827);
}

/* Kleinere Variante der Segmented Control für Boots-Presets. Die Labels sind enger
   und die Lücke zwischen den Optionen reduziert. */
.fakc-segmented--small {
  gap: 6px;
}
.fakc-segmented--small label {
  padding: 4px 8px;
  font-size: 13px;
}

.fakc-price-block {
  margin: 10px auto 0;
  text-align: center;
}

.fakc-price-label {
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--wd-muted-color, #6b7280);
  letter-spacing: 0.02em;
}

.fakc-price-value {
  margin-top: 2px;
  font-weight: 800;
  font-size: clamp(20px, 3.4vw, 32px);
  line-height: 1.1;
  color: var(--wd-success-color, #16a34a);
}

.fakc-price {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 8px;
}

/* ------------------------------
   Größenkarte unter der Vorschau
   ------------------------------ */
.fakc-sizecard {
  display: none !important; /* Ausgeblendet in Version 0.2.12 */
  margin: 10px 0 0;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: var(--fakc-radius);
  padding: 10px 12px;
  box-shadow: 
    0 1px 0 rgba(0, 0, 0, 0.03),
    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.fakc-sizecard-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 4px;
}

.fakc-sizecard-title {
  font-weight: 700;
  margin-right: 6px;
}

.fakc-sizecard-mm {
  font-weight: 700;
}

.fakc-sizecard-cm {
  font-weight: 700;
  color: #0ea5e9;
}

.fakc-sizecard-note {
  color: #6b7280;
  font-size: 12px;
  margin-top: 4px;
}

/* ------------------------------
   Sticky Aktionsleiste (unten)
   ------------------------------ */
.fakc-sticky {
  display: none !important; /* Ausgeblendet in Version 0.2.12 */
  position: sticky;
  bottom: 0;
  z-index: 50;
  background: #0ea5e9;
  color: #fff;
  border-radius: var(--fakc-radius);
  margin-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.fakc-sticky .fakc-qtybox {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 6px;
  border-radius: 8px;
}

.fakc-sticky .fakc-qtybox input.qty {
  width: 64px;
  height: 34px;
  text-align: center;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.fakc-sticky .fakc-qtybtn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  line-height: 34px;
}

.fakc-sticky .fakc-qtybtn:focus {
  outline: 2px solid rgba(255, 255, 255, 0.6);
}

.fakc-sticky .fakc-cta {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 10px;
  align-items: center;
}

.fakc-sticky .fakc-price-big {
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 22px);
  line-height: 1;
  margin: 0;
}

.fakc-sticky .fakc-price-sub {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 2px;
}

.fakc-sticky .fakc-add {
  background: #fff;
  color: #0ea5e9;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.fakc-sticky .fakc-add:hover {
  background: #f0f9ff;
}

/* ------------------------------
   Schritte / Accordion
   ------------------------------ */
.fakc-layout--steps .fakc-step {
  border: 1px solid var(--fakc-line);
  border-radius: 8px;
  background: #fff;
  margin: 14px 0;
  overflow: hidden;
}

.fakc-step__hd {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f2f4f7;
  padding: 10px 12px;
  border-bottom: 1px solid var(--fakc-line);
}

.fakc-step__nr {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--fakc-brand);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

.fakc-step__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.fakc-step__toggle {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: 12px;
  transform: rotate(-90deg);
  transition: 0.15s;
}

.fakc-step.fakc-open .fakc-step__toggle {
  transform: rotate(0deg);
}

.fakc-step__bd {
  padding: 16px;
}

.fakc-help {
  margin: 0.25rem 0 0;
  color: var(--fakc-muted);
  font-size: 12px;
}

/* 3-Spalten-Reihe */
.fakc-row--cols {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr auto;
}

@media (max-width: 900px) {
  .fakc-row--cols {
    grid-template-columns: 1fr;
  }
}

.fakc-col--compact .fakc-radio-line {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 38px;
}

/* ------------------------------
   Farbe – Palette-only Modus
   ------------------------------ */
.fakc-color-select {
  position: relative;
}

.fakc-color-select .fakc-hint {
  display: block;
  margin-top: 0.35rem;
  color: var(--fakc-muted);
  font-size: 12px;
}

.fakc-select--locked {
  pointer-events: none;
  opacity: 0.95;
  background: #f8f8f8;
}

.fakc-color-swatches {
  display: none;
}

.fakc-color-select.has-swatches .fakc-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.fakc-swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
}

/* ------------------------------
   Modals – generisch
   ------------------------------ */
.fakc-modal[hidden] {
  display: none !important;
}

.fakc-modal-open {
  overflow: hidden;
}

.fakc-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.fakc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
}

.fakc-modal-dialog {
  position: relative;
  margin: 6vh auto;
  background: #fff;
  border-radius: 12px;
  width: min(960px, 95vw);
  box-shadow: var(--fakc-shadow);
  overflow: hidden;
}

.fakc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fakc-line);
}

.fakc-modal-body {
  padding: 16px;
}

.fakc-btn-icon {
  border: 0;
  background: #f3f4f6;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
}

.fakc-search {
  width: 100%;
  height: 38px;
  border: 1px solid var(--fakc-line);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 14px;
  margin-bottom: 12px;
}

/* ------------------------------
   Farbpalette-Modal
   ------------------------------ */
#fakc-palette .fakc-modal-dialog {
  width: min(980px, 95vw);
}

#fakc-palette .fakc-modal-body {
  max-height: 75vh;
  overflow: auto;
  overscroll-behavior: contain;
}

#fakc-color-search {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 10px 0;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--fakc-line);
}

.fakc-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.fakc-color-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--fakc-line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.fakc-color-tile:hover {
  box-shadow: var(--fakc-shadow-sm);
  border-color: #ddd;
}

.fakc-color-tile .swatch {
  width: 80px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.fakc-color-tile .meta strong {
  display: block;
  line-height: 1.1;
}

.fakc-color-tile .meta em {
  display: block;
  line-height: 1.1;
  font-style: normal;
  color: #555;
}

.fakc-color-tile .meta small {
  display: block;
  line-height: 1.1;
  color: #777;
}

/* ------------------------------
   Fonts-Overlay
   ------------------------------ */
#fakc-fonts .fakc-modal-dialog {
  width: min(960px, 95vw);
  max-width: 960px;
}

#fakc-fonts .fakc-modal-body {
  max-height: 75vh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px;
}

#fakc-font-search {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 10px 0;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--fakc-line);
}

#fakc-fonts-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 560px) {
  #fakc-fonts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  #fakc-fonts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .fakc-fonts-grid.fakc-fonts-grid--list {
    grid-template-columns: 1fr 1fr;
  }
}

.fakc-font-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid var(--fakc-line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  min-height: 84px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.fakc-font-card:hover {
  box-shadow: var(--fakc-shadow-sm);
  border-color: #ddd;
}

.fakc-font-card:active {
  transform: scale(0.98);
}

.fakc-font-card.is-active {
  border-color: var(--fakc-brand);
  box-shadow: 0 0 0 2px #22c55e33;
}

.fakc-font-card__name {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #5f6368;
  text-transform: uppercase;
}

.fakc-font-card__sample {
  font-size: 28px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fakc-font-card__choose {
  justify-self: end;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
}

.fakc-font-card.is-active .fakc-font-card__choose {
  background: var(--fakc-brand-2);
  color: #fff;
}

/* ------------------------------
   Produktseite auf Vollbreite
   ------------------------------ */
.fakc-fullwidth .woocommerce-product-gallery,
.fakc-fullwidth .product-image-summary-inner .product-images {
  display: none !important;
}

.fakc-fullwidth .product-image-summary-inner .summary.entry-summary {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

.fakc-fullwidth .summary.entry-summary {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.fakc-fullwidth .summary.entry-summary .fakc-kb-config {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------
   Utility-Klassen
   ------------------------------ */
.fakc-hidden {
  display: none !important;
}

.fakc-muted {
  color: var(--fakc-muted);
}

/* ------------------------------------------------------------------------- */
/* CTA-Container (Mengensteuerung + Button + Preisbox)                       */
/* ------------------------------------------------------------------------- */
.fakc-row--cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mengenregler (qty) innerhalb der CTA-Zeile */
.fakc-row--cta .fakc-qty {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}
.fakc-row--cta .fakc-qty button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--fakc-line);
  background: #ffffff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fakc-row--cta .fakc-qty button:hover {
  background: var(--fakc-bg-soft);
}
.fakc-row--cta .fakc-qty input[type="number"] {
  width: 70px;
  border: 1px solid var(--fakc-line);
  border-radius: 8px;
  padding: 4px 6px;
  text-align: center;
  font-size: 15px;
}

/* CTA Button innerhalb der CTA-Zeile */
.fakc-row--cta .fakc-add-to-cart {
  flex-grow: 1;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #22c55e;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.06s ease, opacity 0.18s ease;
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.22);
}
.fakc-row--cta .fakc-add-to-cart:hover {
  background: #16a34a;
}
.fakc-row--cta .fakc-add-to-cart:active {
  transform: scale(0.995);
}
.fakc-row--cta .fakc-add-to-cart.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fakc-row--cta .fakc-add-to-cart.is-busy {
  opacity: 0.85;
}

/* ------------------------------------------------------------------------- */
/* Inline-Preisbox rechts vom CTA – Stückpreis & Gesamtpreis                */
/* ------------------------------------------------------------------------- */
.fakc-price-inline {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 14px;
}
.fakc-price-inline span { color: var(--fakc-muted); }
.fakc-price-inline strong { font-weight: 800; color: var(--fakc-text); }

/* ------------------------------------------------------------------------- */
/* Blende WooCommerce-Standardfelder aus, wenn der Konfigurator aktiv ist    */
/* ------------------------------------------------------------------------- */
/*
   Das originale WooCommerce-Mengenfeld und der Standard-Add-to-Cart-Button
   bleiben im DOM, werden jedoch ausgeblendet. Der benutzerdefinierte CTA
   löst den Klick über JavaScript aus. Die Selektoren greifen nur, wenn
   .fakc-kb-config innerhalb des Formulars form.cart vorhanden ist.
*/
form.cart .fakc-kb-config ~ .quantity,
form.cart .fakc-kb-config ~ .single_add_to_cart_button {
  display: none !important;
}

/*
 * Zeichen‑Staffelpreise
 *
 * Diese Box wird am Ende des Konfigurators angezeigt, sobald für die
 * gewählte Versalhöhe eine Zeichenstaffel definiert ist. Die Darstellung
 * orientiert sich an den bestehenden Formular-Styles und verwendet eine
 * kompakte Tabelle für bessere Übersicht. Die Box bleibt verborgen, bis
 * sie per JavaScript (fakcBuildTierTable) sichtbar gemacht wird.
 */
.fakc-tier-wrap {
  margin: 16px 0 8px;
  padding: 12px;
  border: 1px solid var(--fakc-line, #e5e7eb);
  border-radius: 8px;
  background: #fff;
}

.fakc-tier-head {
  margin: 0 0 8px;
  font-size: 16px;
}

.fakc-tier-note {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}

.fakc-tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fakc-tier-table th,
.fakc-tier-table td {
  padding: 6px 8px;
  border-top: 1px solid #eee;
  text-align: right;
}

.fakc-tier-table th:first-child,
.fakc-tier-table td:first-child {
  text-align: left;
}