/* Hausnummernschild-Duo (Cross-Sell) — eigenes Stylesheet, damit style.css
   unberührt bleibt. Helles Theme, Akzent Tesla-Blau (#3e6ae1). */

/* ── Cross-Sell-Karte im Optionen-Tab ── */
.lc-hn-crosssell {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #f4f7ff;
    border: 1px solid #d6e0fb;
    border-radius: 12px;
}
.lc-hn-cs-title { font-weight: 600; font-size: 15px; color: #171a20; }
.lc-hn-cs-sub { font-size: 13px; color: #5c5e62; margin-top: 2px; }
.lc-hn-cs-btn {
    margin-left: auto;
    flex-shrink: 0;
    padding: 10px 16px;
    background: #3e6ae1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.lc-hn-cs-btn:hover { background: #3457b1; }

/* ── Duo: beide Schilder nebeneinander in der Vorschau ── */
#lc-hn-wrapper { display: none; }
body.lc-duo-active #preview-background {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
}
/* Der Klingelschild-Wrapper trägt eine Mindestbreite (Stylesheet) — im Duo
   auf Inhaltsbreite zwingen, sonst wrappt das Nebeneinander unnötig. */
body.lc-duo-active #nameplate-wrapper {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto;
}
/* Die Vorschau-Bühne ist auf 600px gedeckelt — im Duo volle Sektionsbreite */
body.lc-duo-active #preview-stage {
    width: 100% !important;
    max-width: none !important;
}
body.lc-duo-active #lc-hn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.lc-hn-plate {
    position: relative;
    border-radius: 3px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    overflow: hidden;
    transition: width .2s ease, height .2s ease, background-color .2s ease;
}
.lc-hn-plate .lc-hn-svg {
    position: absolute;
    inset: 0;
}
.lc-hn-plate .lc-hn-svg svg { width: 100%; height: 100%; display: block; }
/* Löcher/Abdeckkappen-Overlay — nutzt .hole-cap/.hole-bore aus style.css
   (identische Optik wie beim Klingelschild) */
.lc-hn-holes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lc-hn-plate.glossy .glossy-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        rgba(255, 255, 255, 0) 42%,
        rgba(255, 255, 255, .16) 50%,
        rgba(255, 255, 255, 0) 58%);
    pointer-events: none;
}
.lc-hn-plate:not(.glossy) .glossy-overlay { display: none; }
.lc-hn-svg.preview-loading { opacity: .5; transition: opacity .15s ease .15s; }

.lc-duo-plate-label {
    display: none;
    font-size: 12.5px;
    font-weight: 600;
    color: #5c5e62;
    text-align: center;
}
body.lc-duo-active .lc-duo-plate-label { display: block; }

/* Aktiv/Inaktiv-Markierung der beiden Schilder */
body.lc-duo-active .lc-duo-plate-active { position: relative; }
body.lc-duo-active .lc-duo-plate-active > .lc-hn-plate,
body.lc-duo-active #nameplate-wrapper.lc-duo-plate-active #nameplate {
    outline: 3px solid #3e6ae1;
    outline-offset: 5px;
    border-radius: 3px;
}
body.lc-duo-active .lc-duo-plate-inactive { cursor: pointer; }
body.lc-duo-active .lc-duo-plate-inactive:hover { opacity: .95; }
/* Chip unter dem Schild ausrichten (auch beim Klingelschild-Wrapper) */
body.lc-duo-active #nameplate-wrapper.lc-duo-plate-inactive {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.lc-duo-active .lc-duo-plate-inactive::after {
    content: 'zum Bearbeiten klicken';
    display: block;
    margin: 8px auto 0;
    width: max-content;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #d6e0fb;
    color: #3e6ae1;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* ── Duo-Aktionsleiste (schwebend, klein) ── */
.lc-duo-bar { display: none; }
body.lc-duo-active .lc-duo-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 16px;
    bottom: 64px;
    z-index: 20;
}
.lc-duo-both-btn {
    padding: 11px 16px;
    background: #171a20;
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    white-space: nowrap;
}
.lc-duo-both-btn:hover { background: #000; }
.lc-duo-both-btn:disabled { opacity: .6; cursor: default; }
.lc-duo-close {
    width: 32px; height: 32px;
    border: 1px solid #e3e3e6;
    background: #fff;
    color: #5c5e62;
    border-radius: 50%;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.lc-duo-close:hover { color: #c0392b; border-color: #c0392b; }

/* ── Hausnummernschild-Panel (ersetzt die Klingel-Tabs im HN-Modus) ──
   Struktur wie ein Tab-Panel: #tab-hausnummer > .accordion-content — damit
   wandert der Inhalt mobil 1:1 durchs Sheet-System (openMobileSheet). */
#tab-hausnummer.lc-hn-panel { display: none; }
body.lc-hn-mode .config-tabs { display: none !important; }
body.lc-hn-mode .config-content { display: none !important; }
body.lc-hn-mode #tab-hausnummer.lc-hn-panel {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.lc-hn-content { padding: 16px 18px 24px; }
/* Klingelschild-Bestellbutton im HN-Modus ausblenden — die HN-Buttons
   bzw. "Beide in den Warenkorb" übernehmen. (Desktop-Preisleiste) */
body.lc-hn-mode .order-btn { display: none !important; }

.lc-hn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lc-hn-head h2 { font-size: 19px; margin: 0; color: #171a20; }
.lc-hn-back {
    background: none;
    border: none;
    color: #3e6ae1;
    font-size: 13.5px;
    cursor: pointer;
    padding: 6px 0;
}
.lc-hn-back:hover { text-decoration: underline; }
.lc-hn-h4 { margin: 18px 0 8px; font-size: 14px; color: #171a20; }
.lc-hn-opt { font-weight: 400; color: #9a9ca1; font-size: 12.5px; }

.lc-hn-grid { display: grid; gap: 8px; }
.lc-hn-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lc-hn-grid-2 { grid-template-columns: repeat(2, 1fr); }
.lc-hn-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 8px;
    background: #fff;
    border: 2px solid #e3e3e6;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    font-family: inherit;
}
.lc-hn-tile:hover { border-color: #b9c6ee; }
.lc-hn-tile.selected { border-color: #3e6ae1; box-shadow: 0 0 0 2px rgba(62, 106, 225, .15); }
.lc-hn-tile-name { font-size: 13px; font-weight: 600; color: #171a20; line-height: 1.3; }
.lc-hn-tile-sub { font-size: 11.5px; color: #5c5e62; }
.lc-hn-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid #d0d0d4;
}

.lc-hn-textrow input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d0d0d4;
    border-radius: 8px;
    font-size: 14px;
}
.lc-hn-textrow input:focus { outline: none; border-color: #3e6ae1; }
.lc-hn-fontrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.lc-hn-fontlabel { font-size: 12.5px; color: #5c5e62; flex-shrink: 0; }
.lc-hn-font-trigger {
    flex: 1;
    text-align: left;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #d0d0d4;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    color: #171a20;
}
.lc-hn-font-trigger:hover { border-color: #3e6ae1; }

/* Preis-Zusammenfassung: beide Einzelpreise + Gesamt (Feedback Daniel —
   ein einzelner "Gesamtpreis" im HN-Modus wirkte wie die Summe) */
.lc-hn-pricesum {
    margin-top: 20px;
    padding: 12px 14px;
    background: #f7f7f8;
    border: 1px solid #e3e3e6;
    border-radius: 10px;
}
.lc-hn-ps-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: #5c5e62;
    padding: 3px 0;
}
.lc-hn-ps-row.lc-hn-ps-total {
    margin-top: 5px;
    padding-top: 8px;
    border-top: 1px solid #e3e3e6;
    font-weight: 700;
    color: #171a20;
    font-size: 14.5px;
}

.lc-hn-cartrow {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lc-hn-cart-both {
    width: 100%;
    padding: 13px 16px;
    background: #171a20;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.lc-hn-cart-both:hover { background: #000; }
.lc-hn-cart-solo {
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    color: #3e6ae1;
    border: 1.5px solid #3e6ae1;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.lc-hn-cart-solo:hover { background: #f4f7ff; }
.lc-hn-cart-both:disabled, .lc-hn-cart-solo:disabled { opacity: .6; cursor: default; }

/* Font-Picker: das Duo nutzt das BESTEHENDE #font-picker-modal aus app.js
   (generischer Modus von openFontPicker) — kein eigenes Modal-CSS mehr. */

/* ── Mobile ── */
@media (max-width: 900px) {
    /* Beide Schilder verkleinert NEBENEINANDER (die Stage scrollt sonst) */
    body.lc-duo-active #preview-background {
        gap: 14px;
        transform: scale(.72);
        transform-origin: center center;
    }
    body.lc-duo-active .lc-duo-bar {
        left: 50%;
        transform: translateX(-50%);
        bottom: auto;
        top: 56px;
        width: max-content;
        max-width: calc(100vw - 16px);
    }
    .lc-duo-both-btn { font-size: 12.5px; padding: 9px 13px; }
    .lc-hn-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .lc-hn-tile { padding: 8px 6px; }
    .lc-hn-tile-name { font-size: 12px; }
    /* Im Sheet ist der "zurück"-Link überflüssig — Tab-Wechsel läuft über
       die Bottom-Nav bzw. Tipp aufs Klingelschild */
    .mobile-sheet .lc-hn-back { display: none; }
    .mobile-sheet .lc-hn-content { padding: 4px 2px 24px; }
}