/* ==========================================================================
   FORGE · VERGLEICHSLISTE (NOVA comparelist/index.tpl; leerer Zustand: comparelist/index.tpl)
   Produkte als Karten im Tabellenkopf, Eigenschaften als ruhige Zeilen, Label-Spalte klebt beim
   horizontalen Scrollen, Filter als Chips mit Checkbox.
   Selektoren mit ">" - die Beschreibung enthaelt oft eigene Tabellen (Technische Daten).
   ========================================================================== */

/* ---------- Werkzeugleiste ---------- */
#filter-checkboxes { margin-bottom: 18px; }
#filter-checkboxes .btn-group {
    display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
    border-radius: 14px; border: 1px solid var(--fg-line); background: var(--fg-surface);
}
#filter-checkboxes .btn-group > .btn,
.comparelist-toolbar .btn,
#switch-label, .comparelist-delete-all {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
    border: 0 !important; border-radius: 10px !important; background: transparent !important;
    color: var(--fg-text-2) !important; font-size: .88rem; font-weight: 600; box-shadow: none !important;
    transition: background-color .25s var(--fg-ease), color .25s var(--fg-ease);
}
#filter-checkboxes .btn-group > .btn:hover, #switch-label:hover { background: var(--fg-surface-2) !important; color: var(--fg-text) !important; }
#filter-checkboxes .btn-group > .btn[aria-expanded="true"] { background: var(--fg-lime) !important; color: var(--fg-lime-ink) !important; }
#switch-label, .comparelist-delete-all { border: 1px solid var(--fg-line-strong) !important; margin-bottom: 14px; }
.comparelist-delete-all:hover { background: var(--fg-danger-bg) !important; color: var(--fg-danger) !important; border-color: var(--fg-danger) !important; }

/* ---------- Filter: Eigenschaften als Chips ---------- */
.comparelist-checkboxes > .row { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.comparelist-checkboxes .comparelist-checkbox-wrapper { flex: 0 0 auto; width: auto; max-width: 100%; padding: 0; }
.comparelist-checkboxes .custom-control {
    margin: 0; padding: 9px 16px 9px 44px; min-height: 0; border-radius: 999px;
    border: 1px solid var(--fg-line-strong); background: var(--fg-surface);
    transition: border-color .25s var(--fg-ease), background-color .25s var(--fg-ease);
}
.comparelist-checkboxes .custom-control:hover { border-color: rgba(255,255,255,.3); }
.comparelist-checkboxes .custom-control:has(.custom-control-input:checked) { border-color: rgba(198,244,50,.45); background: rgba(198,244,50,.06); }
.comparelist-checkboxes .custom-control-label { font-size: .86rem; max-width: 240px; }
.comparelist-checkboxes .custom-control-label::before,
.comparelist-checkboxes .custom-control-label::after { left: -30px; top: 0; }

/* ---------- Tabelle ---------- */
#content .comparelist {
    margin: 0 0 clamp(32px, 4vw, 56px); border: 1px solid var(--fg-line); border-radius: var(--fg-radius-lg);
    background: var(--fg-surface); overflow: auto; overscroll-behavior-x: contain;
}
.comparelist > .table { margin: 0; border: 0; border-collapse: separate; border-spacing: 0; background: transparent; color: var(--fg-text-2); font-size: .9rem; }
.comparelist > .table > thead > tr > th,
.comparelist > .table > tbody > tr > td {
    border: 0 !important; border-left: 1px solid var(--fg-line) !important; border-top: 1px solid var(--fg-line) !important;
    padding: 14px 18px; vertical-align: top; background: transparent;
}
.comparelist > .table > thead > tr > th { border-top: 0 !important; }
.comparelist > .table > thead > tr > :first-child,
.comparelist > .table > tbody > tr > :first-child { border-left: 0 !important; }
.comparelist > .table-hover > tbody > tr:hover { background: rgba(255,255,255,.025); color: inherit; }

/* Label-Spalte: klebt links */
.comparelist > .table > thead > tr > th.comparelist-label,
.comparelist > .table > tbody > tr > td.comparelist-label {
    position: sticky; left: 0; z-index: 2; width: 180px; min-width: 150px;
    background: var(--fg-bg-2) !important; color: var(--fg-text); font-weight: 600; font-size: .84rem;
}
.comparelist > .table > thead > tr > th.comparelist-label { z-index: 3; }

/* Produkt-Karten im Kopf */
.comparelist > .table > thead > tr > th.comparelist-item {
    position: relative; min-width: 230px; padding: 18px; background: var(--fg-surface) !important;
    text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .9rem; text-align: left; color: var(--fg-text-2);
}
.comparelist th.comparelist-item .stretched { position: static; display: flex; flex-direction: column; height: 100%; }
.comparelist th.comparelist-item .stretched > div:first-child { position: static; }
.comparelist th.comparelist-item a.d-block {
    display: flex !important; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: 14px;
    padding: 10%; border-radius: var(--fg-radius); background: var(--fg-surface-2); overflow: hidden;
}
.fg-plate .comparelist th.comparelist-item a.d-block { background: #eceeed; }
.comparelist th.comparelist-item a.d-block picture { display: block; width: 100%; height: 100%; }
.comparelist .comparelist-item-image { width: 100% !important; height: 100% !important; object-fit: contain; transition: transform .6s var(--fg-ease); }
.fg-plate .comparelist .comparelist-item-image { mix-blend-mode: multiply; }
.comparelist th.comparelist-item:hover .comparelist-item-image { transform: scale(1.04); }
.comparelist th.comparelist-item .stretched > span > a {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em;
    color: var(--fg-text) !important; font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: none;
}
.comparelist th.comparelist-item .stretched > span > a:hover { color: var(--fg-lime) !important; }
.comparelist th.comparelist-item .price_wrapper { margin-top: 10px; }
.comparelist th.comparelist-item .price { font-family: var(--fg-display); font-size: 1.4rem; font-weight: 700; color: var(--fg-text); letter-spacing: -0.01em; }
.comparelist th.comparelist-item .price-note, .comparelist th.comparelist-item .vat_info { font-size: .76rem; color: var(--fg-muted); line-height: 1.4; }
.comparelist th.comparelist-item .price-note a { color: var(--fg-muted) !important; text-decoration: underline; text-underline-offset: 2px; }

/* Entfernen */
.comparelist .delete-link-times { position: absolute; top: 26px; right: 26px; z-index: 2; margin: 0; }
.comparelist .delete-link-times a {
    width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(10,12,12,.72); border: 1px solid var(--fg-line-strong); color: var(--fg-text) !important; font-size: .8rem;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background-color .25s var(--fg-ease), border-color .25s var(--fg-ease), color .25s var(--fg-ease);
}
.comparelist .delete-link-times a:hover { background: var(--fg-danger); border-color: var(--fg-danger); color: #fff !important; }

/* Zellinhalte */
.comparelist > .table > tbody > tr > td { line-height: 1.5; }
.comparelist > .table > tbody td h3, .comparelist > .table > tbody td .h3 { font-family: var(--fg-display); font-size: .95rem; margin: 0 0 8px; color: var(--fg-text); }
.comparelist > .table > tbody td p { margin: 0 0 8px; }
.comparelist > .table > tbody td small { color: var(--fg-muted); }
.comparelist > .table > tbody td .table { margin: 0 0 8px; font-size: .84rem; background: transparent; color: var(--fg-text-2); }
.comparelist > .table > tbody td .table th,
.comparelist > .table > tbody td .table td { padding: 6px 8px; border: 0 !important; border-top: 1px solid var(--fg-line) !important; background: transparent !important; color: inherit; }
.comparelist > .table > tbody td .table tr:first-child > * { border-top: 0 !important; }
.comparelist > .table > tbody td .table th { color: var(--fg-muted); font-weight: 500; width: 46%; }
.comparelist > .table > tbody td .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.comparelist > .table > tbody td a:not(.btn) { color: var(--fg-lime); }

/* ---------- Leerer Zustand ---------- */
.fg-compare-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
    max-width: 640px; margin: clamp(12px, 3vw, 40px) auto clamp(40px, 6vw, 80px); padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
    border: 1px solid var(--fg-line); border-radius: var(--fg-radius-lg); background: var(--fg-surface);
}
.fg-compare-empty-icon {
    width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--fg-lime-a10); border: 1px solid rgba(198,244,50,.2); color: var(--fg-lime);
}
.fg-compare-empty-icon .fg-icon { width: 30px; height: 30px; }
.fg-compare-empty .fg-title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: 6px 0 0; }
.fg-compare-empty .fg-lead { margin: 0 0 8px; }

@media (max-width: 767.98px) {
    .comparelist > .table > thead > tr > th.comparelist-label,
    .comparelist > .table > tbody > tr > td.comparelist-label { width: 120px; min-width: 110px; font-size: .78rem; }
    .comparelist > .table > thead > tr > th.comparelist-item { min-width: 190px; }
}