/* LCP-M4M5M6-A3-B1B2-B2v2-20260813 */
/**
 * LALALO CustomPreview — preview.css
 * M4: Select2 Suchfeld-Hintergrund #c0f0f4
 * M5: Motiv-Dropdown Hoehe min(480px,60vh)
 * M6: IDs auf cpp-preview-* vereinheitlicht
 */

/* Controls */
.lcp-control-row { display:flex; align-items:center; margin-bottom:10px; gap:12px; }
.lcp-control-row .label { min-width:80px; font-weight:600; color:#333; font-size:14px; }
.lcp-control-row .control { flex:1; }

/* Vorschau-Titel (M6: cpp-preview-title-container) */
#cpp-preview-title-container { margin-bottom:8px; }
#cpp-preview-text-title { font-size:16px; font-weight:700; color:#333; text-transform:uppercase; }

/* Hintergrundbild-Container (M6: cpp-preview-bg-container) */
#cpp-preview-bg-container {
    position:relative; width:100%; max-width:370px; min-height:200px;
    aspect-ratio:1/1; background-size:contain; background-position:center;
    background-repeat:no-repeat; margin:0 auto; overflow:hidden;
    border:1px solid #e0e0e0; border-radius:4px;
}

/* Textzeilen (M6: cpp-preview-text-row1/2 — Tippfehler behoben) */
#cpp-preview-text-row1, #cpp-preview-text-row2 {
    position:absolute; left:50%; width:90%; text-align:center;
    line-height:1.2; white-space:nowrap; overflow:hidden;
    pointer-events:none; display:none;
}

/* Motiv (M6: cpp-preview-text-image) */
#cpp-preview-text-image { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:none; pointer-events:none; }
#cpp-preview-text-image .preview-dynimage { max-width:150px; max-height:150px; object-fit:contain; display:block; }

/* Info (M6: cpp-preview-hint-container) */
#cpp-preview-hint-container { margin-top:12px; max-width:370px; margin-left:auto; margin-right:auto; }
/* B2v2: 'message info' aus span entfernt (preview.phtml) — kein Argento-Icon mehr.
 * Kein padding-left fuer Icon noetig, 14px links reicht. */
.cpp-preview-text-descr { display:block; font-size:12px; color:#666; line-height:1.5; padding:10px 14px; background:#f9f9f9; border-radius:4px; border-left:3px solid #c2b4a0; }

/* Lieferdatum (M6: cpp-preview-lieferzeit) */
#cpp-preview-lieferzeit { margin-top:8px; font-size:13px; color:#555; text-align:center; }

/* Mobile */
@media (max-width:768px) {
    #cpp-preview-bg-container { max-width:100%; min-height:150px; }
    #cpp-preview-hint-container { max-width:100%; }
    .lcp-control-row { flex-direction:column; align-items:flex-start; gap:4px; }
    .lcp-control-row .control { width:100%; }
}

/* Select2 Farb/Motiv-Dropdown */
.selectTemplate { display:flex; align-items:center; padding:2px 0; }
.selectTemplateLeft { width:24px; height:24px; border-radius:3px; margin-right:8px; flex-shrink:0; border:1px solid rgba(0,0,0,.12); }
.selectTemplateLeftSelected { width:18px; height:18px; border-radius:2px; margin-right:6px; flex-shrink:0; border:1px solid rgba(0,0,0,.12); }
.selectTemplateimageC { width:24px; height:24px; display:flex; align-items:center; justify-content:center; }
.selectTemplateimageC img { max-width:22px; max-height:22px; object-fit:contain; }
.selectTemplateRight { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* M4: Suchfeld-Hintergrund #c0f0f4 (wie Alt-OPD Delta v3.5/v3.6) */
.select2-search--dropdown .select2-search__field {
    border-radius: 6px !important;
    background-color: #c0f0f4 !important;
    border: 1px solid #ccc !important;
    padding: 6px 10px !important;
}

/* M5: Dropdown-Hoehe min(480px, 60vh) — mehr Motive sichtbar */
.select2-container--default .select2-results > .select2-results__options {
    max-height: min(480px, 60vh) !important;
    overflow-y: auto !important;
}

/* M7: Validierungs-Fehlertext fuer select2-Felder */
.lcp-val-error {
    color: #e02b27;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* LCP-MODAL-20260814: Motiv-Picker Modal ========================================= */
body.lcp-modal-open { overflow: hidden; }

#lcp-motiv-overlay {
    position: fixed; top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,.6); z-index:9999;
    display: flex; align-items:center; justify-content:center;
}
#lcp-motiv-modal {
    background:#fff; border-radius:8px;
    width:85vw; max-width:1000px; max-height:90vh;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 8px 40px rgba(0,0,0,.25);
}
/* Header */
#lcp-motiv-header {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-bottom:1px solid #e0e0e0; flex-shrink:0;
}
#lcp-motiv-title { font-weight:700; font-size:15px; color:#333; white-space:nowrap; }
#lcp-motiv-search {
    flex:1; padding:7px 12px; border:1px solid #ccc; border-radius:6px;
    background:#c0f0f4; font-size:14px; outline:none;
}
#lcp-motiv-search:focus { border-color:#88d8de; box-shadow:0 0 0 2px rgba(192,240,244,.5); }
#lcp-motiv-close {
    background:none; border:none; font-size:24px; line-height:1;
    cursor:pointer; color:#666; padding:0 6px; border-radius:4px; flex-shrink:0;
}
#lcp-motiv-close:hover { background:#f0f0f0; color:#333; }
/* Mobile: Kategorie-Dropdown */
#lcp-motiv-mobile-row { display:none; padding:8px 12px; flex-shrink:0; }
#lcp-motiv-cat-mobile { width:100%; padding:7px 10px; border:1px solid #ccc; border-radius:6px; font-size:14px; }
/* Body */
#lcp-motiv-body { display:flex; flex:1; overflow:hidden; min-height:0; }
/* Sidebar */
#lcp-motiv-sidebar {
    width:240px; min-width:200px; max-width:260px;
    border-right:1px solid #e0e0e0; overflow-y:auto;
    flex-shrink:0; padding:6px 0;
}
.lcp-cat-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 14px; cursor:pointer; font-size:13px; color:#444;
    border-left:3px solid transparent; gap:6px;
}
.lcp-cat-item:hover { background:#f5f5f5; }
.lcp-cat-item.lcp-cat-active {
    background:#e8f8fa; border-left-color:#00a8b5;
    color:#007880; font-weight:600;
}
.lcp-cat-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lcp-cat-count { font-size:11px; color:#888; flex-shrink:0; }
.lcp-cat-item.lcp-cat-active .lcp-cat-count { color:#007880; }
/* Grid wrap */
#lcp-motiv-grid-wrap { flex:1; overflow-y:auto; display:flex; flex-direction:column; min-height:0; }
#lcp-motiv-grid {
    padding:12px;
    display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
    align-content:start;
}
/* Tiles */
.lcp-motiv-tile {
    cursor:pointer; border:2px solid transparent; border-radius:6px;
    padding:6px 4px; text-align:center;
    display:flex; flex-direction:column; align-items:center;
    transition:border-color .1s, background .1s;
}
.lcp-motiv-tile:hover { border-color:#00a8b5; background:#f0fbfc; }
.lcp-motiv-tile.lcp-motiv-selected { border-color:#007880; background:#d8f2f5; }
.lcp-motiv-img {
    width:60px; height:60px;
    display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.lcp-motiv-img img { max-width:56px; max-height:56px; object-fit:contain; display:block; }
.lcp-tile-white .lcp-motiv-img { background:#222; border-radius:4px; }
.lcp-motiv-name {
    font-size:10px; color:#555; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    width:100%; text-align:center;
}
/* Empty state */
#lcp-motiv-empty {
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:14px; padding:40px 20px;
    color:#888; font-size:14px; flex:1;
}
#lcp-motiv-show-all {
    padding:8px 20px; border:1px solid #ccc; border-radius:6px;
    background:#fff; cursor:pointer; font-size:13px; color:#444;
}
#lcp-motiv-show-all:hover { background:#f0f0f0; }
/* Motiv-Trigger im Formular */
#lcp-motiv-trigger {
    display:flex; align-items:center; gap:8px; padding:7px 10px;
    border:1px solid #ccc; border-radius:4px; cursor:pointer;
    background:#fff; min-height:38px; font-size:13px; color:#333;
    user-select:none;
}
#lcp-motiv-trigger:hover, #lcp-motiv-trigger:focus { border-color:#00a8b5; outline:none; }
#lcp-motiv-trigger-img { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
#lcp-motiv-trigger-text { flex:1; color:#888; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lcp-motiv-trigger-arrow { color:#aaa; font-size:11px; flex-shrink:0; }
/* Mobile responsive */
@media (max-width:767px) {
    #lcp-motiv-overlay { align-items:stretch; justify-content:stretch; }
    #lcp-motiv-modal {
        width:100vw; max-width:100vw; max-height:100vh;
        height:100vh; border-radius:0;
    }
    #lcp-motiv-sidebar { display:none; }
    #lcp-motiv-mobile-row { display:block; }
    #lcp-motiv-grid { grid-template-columns:repeat(3,1fr); gap:6px; padding:8px; }
    .lcp-motiv-img { width:50px; height:50px; }
    .lcp-motiv-img img { max-width:44px; max-height:44px; }
}

/* LCP-OVERLAY-20260814: Info-Overlay-Badge auf der Vorschau */
#cpp-preview-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
#cpp-preview-overlay-badge {
    background: rgba(255,255,255,0.85);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 70%;
    text-align: center;
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}