/**
 * fs_zuschnitte Plugin - Custom Styles (Cleaned)
 * Only includes CSS rules that are actually used
 */

/* Restore Items Container (versteckt) */
#restoreItems {
    display: none !important;
}

/* Variations Wrapper - found in HTML structure */
#varwrap-material,
#varwrap-vlies,
#varwrap-stoff,
#varwrap-zuschnittnr,
#varwrap-scale,
#varwrap-boundsc {
    margin-bottom: 15px;
}

/* Animation keyframe that's referenced */
@keyframes zuschnitt-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Konfigurator Navigation Buttons - Nutzt Brand-Variablen */
section[role="tabpanel"] .button--primary.konfig-btn,
section[role="tabpanel"] div[data-action="next"].konfig-btn,
section[role="tabpanel"] div[data-action="prev"].konfig-btn,
.config-form div[data-action="next"].konfig-btn,
.config-form div[data-action="prev"].konfig-btn {
    background-color: var(--brand-button, var(--brand-primary)) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
}

section[role="tabpanel"] .button--primary.konfig-btn:hover,
section[role="tabpanel"] div[data-action="next"].konfig-btn:hover,
section[role="tabpanel"] div[data-action="prev"].konfig-btn:hover,
.config-form div[data-action="next"].konfig-btn:hover,
.config-form div[data-action="prev"].konfig-btn:hover {
    background-color: var(--brand-button-hover, var(--brand-primary-hover)) !important;
}

/* Warenkorb Button - Immer sichtbar, nutzt Brand-Variablen */
.buyBox .btn-primary,
.buyBox .sn-addBasket,
.buyBox button[name="inWarenkorb"],
.buyBox .button--primary {
    background-color: var(--brand-button, var(--brand-primary)) !important;
    color: #ffffff !important;
    border: 1px solid var(--brand-button, var(--brand-primary)) !important;
}

.buyBox .btn-primary:hover,
.buyBox .sn-addBasket:hover,
.buyBox button[name="inWarenkorb"]:hover,
.buyBox .button--primary:hover {
    background-color: var(--brand-button-hover, var(--brand-primary-hover)) !important;
    border-color: var(--brand-button-hover, var(--brand-primary-hover)) !important;
}

/* Stoff-Navigationsleiste verstecken wenn nur 1 Link vorhanden */
.stoffListWrapper:has(a.nav-link:only-child) {
    display: none !important;
}

/* Stoff-Label-Überschrift verstecken wenn nur 1 Stoff vorhanden */
#varwrap-stoff:has(.stoffLabelHeader:only-of-type) .stoffLabelHeader {
    display: none !important;
}

/* Swatches höher machen wenn nur 1 Stoff vorhanden */
#varwrap-stoff:has(.stoffLabelHeader:only-of-type) .swatches {
    max-height: 34rem !important;
}

/* Swatches höher machen wenn keine Stoffgruppen-Navigation (.stoffListHeader) existiert
   (z. B. Outdoorschaum-Zuschnitt mit nur einer Stoffgruppe) oder die Navigation wegen
   nur einem Link ausgeblendet ist – sonst endet die .form-group über dem Ende von #varwrap-stoff */
#varwrap-stoff:not(:has(.stoffListHeader)) .swatches,
#varwrap-stoff:has(.stoffListWrapper a.nav-link:only-child) .swatches {
    max-height: 34rem !important;
}

/* Step-Validation: Korrektur-Hinweis bei Nicht-0,5er-Eingaben */
.step-corrected {
    border-color: #e6a200 !important;
    box-shadow: 0 0 0 2px rgba(230, 162, 0, 0.3) !important;
}

.step-correction-hint {
    background: #fff8e1;
    border-left: 3px solid #e6a200;
    color: #5d4e37;
    font-size: 12px;
    padding: 8px 12px;
    margin: 4px 0 8px 0;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
}

.step-correction-hint--fadeout {
    opacity: 0;
}

/* Genereller Step-Hinweis dezenter gestalten */
#formauswahl > div > h5.alert {
    font-size: 12px;
    color: #888;
    background: none;
    border: none;
    padding: 4px 0;
    margin: 0;
    font-weight: 400;
}

/* Responsive Design - keep media queries that affect used elements */
@media (max-width: 768px) {
    /* Any mobile-specific rules for elements that are actually used */
}

/* ================================================================
   Stoff-Orientierung (Laufrichtung, z.B. Cord: Kunde wählt Längs/Quer)
   ================================================================ */
.stoff-orientierung {
    margin: 1rem 0 0.5rem;
    padding: 0.75rem;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    background: #fafafa;
    width: 100%;
}
.stoff-orientierung-titel {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}
.stoff-orientierung-pflicht {
    color: #d9534f;
    font-weight: 400;
    font-size: 0.85rem;
}
.stoff-orientierung-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.stoff-orientierung-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border: 2px solid #d5d5d5;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.stoff-orientierung-btn small {
    display: block;
    color: #777;
    font-size: 0.75rem;
    line-height: 1.2;
}
.stoff-orientierung-btn.active {
    border-color: var(--brand-primary, #19A68C);
    box-shadow: 0 0 0 2px rgba(25, 166, 140, 0.15);
}
.stoff-orientierung-icon {
    flex-shrink: 0;
    width: 34px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid #cfcfcf;
    /* Längs: Rippen parallel zur langen Seite (horizontale Linien) */
    background: repeating-linear-gradient(0deg, #b5b5b5 0 3px, #eee 3px 6px);
}
.stoff-orientierung-btn[data-orientierung="quer"] .stoff-orientierung-icon {
    /* Quer: Rippen quer zur langen Seite (vertikale Linien) */
    background: repeating-linear-gradient(90deg, #b5b5b5 0 3px, #eee 3px 6px);
}
.stoff-orientierung-error {
    border-color: #d9534f;
}
.stoff-orientierung-shake {
    animation: stoffOrientShake 0.5s ease;
}
@keyframes stoffOrientShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.stoff-orientierung-sum {
    font-size: 0.85rem;
    color: #555;
    margin-top: 0.25rem;
}
.stoff-orientierung-mittelnaht {
    margin-top: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-left: 3px solid #f0ad4e;
    background: #fdf6ec;
    font-size: 0.85rem;
    color: #6a5220;
    border-radius: 0 0.25rem 0.25rem 0;
}

/* ==========================================================================
   Kompakt-Modus: Lagen-Editor für den Mehrschicht-Zuschnitt (99_zuschnitt)
   Markup: configurator-main.tpl ($zuschnittKompakt), Logik: fs-kompakt-lagen.js
   ========================================================================== */
.fs-kompakt .bemassungItem.c { display: none !important; }   /* Dicke ergibt sich aus dem Aufbau */
.fs-lagen { display: flex; flex-direction: column; gap: .75rem; }
.fs-lagen-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.fs-lagen-title { display: block; font-weight: 600; font-size: 1.05rem; color: var(--fs-text-primary, #1a1a1a); }
.fs-lagen-sub { display: block; font-size: .85rem; color: var(--fs-text-secondary, #525252); }
.fs-lagen-total { font-size: .9rem; color: var(--fs-text-secondary, #525252); white-space: nowrap; }
.fs-lagen-total b { font-size: 1.1rem; color: var(--fs-text-primary, #1a1a1a); }
.fs-lage { border: 1px solid var(--fs-border-default, #e5e5e5); border-radius: .75rem; padding: .75rem; background: var(--fs-bg-primary, #fff); }
.fs-lage[hidden] { display: none !important; }
.fs-lage-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; cursor: pointer; }
.fs-lage-head:focus-visible { outline: 2px solid var(--fs-brand, #b81818); outline-offset: 2px; border-radius: .5rem; }
/* Akkordeon: nur die bearbeitete Lage zeigt ihre Swatches, die anderen nur Kopfzeile + Auswahl-Chip */
.fs-lage.is-collapsed .var-wrap { display: none; }
.fs-lage.is-collapsed .fs-lage-head { margin-bottom: 0; }
.fs-lage-chevron { display: inline-flex; color: var(--fs-text-tertiary, #737373); transition: transform .2s; }
.fs-lage:not(.is-collapsed) .fs-lage-chevron { transform: rotate(180deg); }
.fs-lage-sel { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--fs-text-secondary, #525252); }
.fs-lage-sel[hidden] { display: none; }
.fs-lage-sel img { width: 1.75rem; height: 1.75rem; border-radius: .3rem; object-fit: cover; }
.fs-lage-sel.is-empty { color: var(--fs-warning, #f59e0b); }
.fs-lage-title { font-weight: 600; margin-right: auto; }
.fs-lage-title small { font-weight: 400; color: var(--fs-text-tertiary, #737373); }
.fs-lage-dicke { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; font-weight: 400; }
.fs-lage-dicke-input { width: 5.5rem; padding: .35rem .5rem; border: 1px solid var(--fs-border-strong, #d4d4d4); border-radius: .5rem; font-size: 1rem; text-align: right; background: #fff; }
.fs-lage-dicke-input:focus { outline: 2px solid var(--fs-brand, #b81818); outline-offset: 1px; }
.fs-lage-remove, .fs-lage-add { border: 1px dashed var(--fs-border-strong, #d4d4d4); background: transparent; border-radius: .5rem; padding: .4rem .75rem; font-size: .9rem; cursor: pointer; color: var(--fs-text-secondary, #525252); }
.fs-lage-add { align-self: flex-start; }
.fs-lage-add:hover, .fs-lage-remove:hover { border-color: var(--fs-brand, #b81818); color: var(--fs-brand, #b81818); }
.fs-lage-add[disabled] { opacity: .4; cursor: not-allowed; }
.fs-lage-remove[hidden] { display: none !important; }
.fs-lage .var-head { display: none; }                          /* "Material"/"material2" ersetzt der Lagen-Kopf */
#km_konfig .fs-lage .swatches { max-height: 16rem; min-height: 0; }
.fs-lage.fs-lage-error { border-color: var(--fs-error, #ef4444); animation: fs-lage-shake .5s; }
@keyframes fs-lage-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.fs-lagen-hint { margin: .25rem 0 0; font-size: .9rem; color: var(--fs-error, #ef4444); }
.fs-lagen-hint[hidden] { display: none; }
.fs-lage label.variation[data-original="keine" i],
.fs-lage label.variation[data-original="none" i] { display: none !important; }   /* "keine" ist keine Wahl im Editor (Lage entfernen) */
.fs-bezug-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.fs-bezug-panel .var-wrap { margin: 0; }
.fs-bezug-titel { font-weight: 600; font-size: 1.05rem; margin-bottom: .35rem; color: var(--fs-text-primary, #1a1a1a); }
#km_konfig .fs-bezug-panel .swatches { max-height: 18rem; min-height: 0; }
/* Zusammenfassung: Aufbau über die volle Breite, Lagen als kleine Karten (oberste zuerst) */
/* paper.css gibt .varSumItem und .varsum>div ein 1:1-Seitenverhältnis (quadratische Swatch-Kacheln) —
   der Aufbau-Block läuft über die volle Breite und würde damit 600 px hoch (Warenkorb-Box rutscht ab) */
#km_konfig .var-wrap.sum .varSumItem.fs-sum-aufbau { flex: 0 0 100%; width: 100%; max-width: 100%; margin-bottom: .75rem; aspect-ratio: auto; }
#km_konfig .var-wrap.sum .varSumItem.fs-sum-aufbau .varsum > div:not(:empty) { aspect-ratio: auto; margin-top: 0; }
/* Freifelder liegen im Kompakt-Modus in einem eigenen Container (Werte werden weiterhin gesendet) */
.fs-kompakt-freifelder { display: none; }
.fs-aufbau-summary { text-align: left; }
.fs-aufbau-sum-title { font-weight: 600; margin-bottom: .4rem; }
.fs-aufbau-sum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.fs-aufbau-sum-list li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; padding: .35rem .6rem; border: 1px solid var(--fs-border-default, #e5e5e5); border-radius: .5rem; background: var(--fs-bg-primary, #fff); }
.fs-aufbau-sum-list img { width: 2.25rem; height: 2.25rem; border-radius: .35rem; object-fit: cover; flex: none; }
.fs-aufbau-sum-total { margin-top: .4rem; font-size: .85rem; color: var(--fs-text-secondary, #525252); }
@media (max-width: 640px) {
    .fs-lagen-head { align-items: flex-start; }
    #km_konfig .fs-lage .swatches { max-height: 12rem; }
}


/* ==========================================================================
   Viewer-Toolbar (#fs3dBar): Pill unten im Canvas — 2D/3D, Ansichten, Drehen, Maße, Textur
   Alte Einzelknöpfe bleiben für die Handler im DOM, sind aber unsichtbar.
   ========================================================================== */
#paperContainer #threeDtwoDtoggle,
#paperContainer #dimToggleBtn,
#paperContainer #zoomToggleBtn { display: none !important; }
.fs3d-bar {
    position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: .25rem; padding: .3rem;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--fs-border-default, #e5e5e5); border-radius: .75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08);
    z-index: 12; max-width: calc(100% - 1.5rem); overflow-x: auto; scrollbar-width: none;
    font-family: var(--fs-font-mono, inherit);
}
.fs3d-bar::-webkit-scrollbar { display: none; }
.fs3d-bar-group { display: flex; align-items: center; gap: .15rem; padding: 0 .3rem; }
.fs3d-bar-group + .fs3d-bar-group { border-left: 1px solid var(--fs-border-default, #e5e5e5); }
.fs3d-bar:not(.is-3d) .fs3d-only { display: none; }
.fs3d-btn {
    display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; padding: 0 .65rem;
    border: 0; border-radius: .5rem; background: transparent; color: var(--fs-text-primary, #1a1a1a);
    font-size: .85rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; cursor: pointer;
    transition: background .15s, color .15s, transform .1s;
}
.fs3d-btn i { font-size: 1.05rem; line-height: 1; }
.fs3d-btn.fs3d-icon { padding: 0 .5rem; }
.fs3d-btn:hover { background: var(--fs-gray-100, #f5f5f5); }
.fs3d-btn:active { transform: scale(.96); }
.fs3d-btn:focus-visible { outline: 2px solid var(--bad-b, #2563eb); outline-offset: 1px; }
.fs3d-btn[aria-pressed="true"] { background: var(--bad-b, #2563eb); color: #fff; box-shadow: 0 2px 6px rgba(37, 99, 235, .35); }
.fs3d-btn[aria-pressed="true"]:hover { background: var(--bad-b, #2563eb); filter: brightness(1.06); }
.fs3d-btn[disabled] { opacity: .35; cursor: not-allowed; }
.fs3d-bar--compact .fs3d-btn:not([aria-pressed="true"]) span { display: none; }
.fs3d-bar--compact .fs3d-btn { padding: 0 .5rem; }
@media (max-width: 640px) {
    .fs3d-bar { bottom: .5rem; padding: .2rem; gap: .1rem; border-radius: .6rem; }
    .fs3d-bar-group { padding: 0 .15rem; }
    .fs3d-btn { height: 1.9rem; padding: 0 .45rem; font-size: .75rem; }
    .fs3d-btn span { display: none; }              /* mobil nur Icons */
    .fs3d-btn.fs3d-btn--label span { display: inline; }
    /* in der Mobil-Vorschau: 2D/3D-Umschalter weg (Tabs steuern das), Leiste nur im 3D-Zustand */
    .fs3d-bar--mobile .fs3d-bar-mode { display: none; }
    .fs3d-bar--mobile:not(.is-3d) { display: none; }
    .mobile-canvas-preview { position: relative; }
}