/* ============================================================
   Template Builder - Stylesheet (Visual Editor Port)
   Portiert aus visual_editor.css + visual_editor_products.css.
   Generische/kollidierende Selektoren (:root, *, body, html, .btn,
   .form-control, .form-select, .navbar, button, input[type=file],
   .toast-container) sind unter .template-builder gescopt, damit das
   CRM-Layout-Chrome (Sidebar/Topbar/Buttons) unberuehrt bleibt.
   Wird in layout.php NUR fuer page=template_builder geladen.
   ============================================================ */


/* ===== source: visual_editor.css ===== */
/* InvictusQuotes Visual Editor - COMPLETE CSS with ALL Features */
/* Based on Template Builder v4.0 */

.template-builder {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-bg: #f8f9fa;
    --border-color: #dee2e6;
    --hover-bg: #f8f9ff;
    --active-bg: #e7f3ff;
    --edited-bg: #f0fff4;
    --navbar-bg: #1e293b;
    --iq-orange: #e07a2b;
    --alternative-color: #6c757d;
}

.template-builder * {
    box-sizing: border-box;
}

.template-builder {
    /* Kein eigener Hintergrund/Font: nutzt den CRM-Hintergrund (.page-content) */
    background: transparent;
}

/* ==================== NAVBAR ==================== */
.template-builder .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==================== A4 PAGE SIMULATION ==================== */
.preview-section {
    width: 210mm;
    min-height: 297mm;
    max-width: 100%;
    padding: 15mm;
    margin: 0 auto 30px auto;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;
}

/* Official pages: extra top for header (25mm), extra bottom for footer (48mm) */
.preview-section.pdf-official-page {
    padding-top: 25mm;
    padding-bottom: 50mm;
}

/* ==================== PDF OFFICIAL HEADER (Briefkopf) ==================== */
/* Matches PDF: logo at X=150,Y=10,W=40; sender line at X=15,Y=10,8pt gray; accent line at Y=20 */
.pdf-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20mm;
    padding: 10mm 15mm 0 15mm;
    z-index: 5;
}

.pdf-header-company-line {
    font-size: 7.5pt;
    color: rgb(80, 80, 80);
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1;
}

.pdf-header-logo {
    position: absolute;
    top: 10mm;
    right: 15mm;
    width: 40mm;
    height: auto;
}

.pdf-header-accent-line {
    position: absolute;
    bottom: 0;
    left: 15mm;
    right: 15mm;
    height: 0.5px;
    background: rgb(16, 6, 159);
}

/* ==================== PDF OFFICIAL FOOTER (4 Spalten) ==================== */
/* Matches PDF: footerHeight=45mm, 4 equal columns, accent line 3mm above, 6pt font */
.pdf-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 45mm;
    padding: 0 20mm 0 20mm;
    z-index: 5;
}

.pdf-footer-accent-line {
    height: 0.5px;
    background: rgb(16, 6, 159);
    margin-bottom: 3mm;
}

.pdf-footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2mm;
    font-size: 5.5pt;
    line-height: 1.5;
    color: #000;
    font-family: Helvetica, Arial, sans-serif;
}

.pdf-footer-columns div {
    white-space: pre-line;
}

.pdf-footer-page {
    text-align: center;
    font-size: 7.5pt;
    font-style: italic;
    color: rgb(16, 6, 159);
    margin-top: 2mm;
}

/* ==================== PDF MINIMAL FOOTER (nur Seitenzahl) ==================== */
/* Matches PDF: Y=-12, 7pt italic gray, centered */
.pdf-footer-minimal {
    position: absolute;
    bottom: 10mm;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 6.5pt;
    font-style: italic;
    color: rgb(150, 150, 150);
    font-family: Helvetica, Arial, sans-serif;
}

/* ==================== DECKBLATT (Cover) - PDF replica ==================== */
/* PDF: isOfficial=false, blue bar left 8mm, white bg, no header/footer */
.pdf-cover {
    padding: 0 !important;
    position: relative;
}

.pdf-cover-blue-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 8mm;
    height: 100%;
    background: rgb(16, 6, 159);
    z-index: 1;
}

.pdf-cover-logo {
    position: absolute;
    top: 15mm;
    right: 15mm;
    z-index: 2;
}

.pdf-cover-logo img {
    width: 50mm;
    height: auto;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pdf-cover-logo img:hover {
    opacity: 0.7;
}

.pdf-cover-content {
    margin-left: 8mm;
    padding: 0 20mm 0 12mm;
    position: relative;
}

/* PDF: Y=40, helvetica B 36, color 16,6,159, centered */
.pdf-cover-title {
    margin-top: 40mm;
    text-align: center;
    font-size: 36pt;
    font-weight: bold;
    color: rgb(16, 6, 159);
    font-family: Helvetica, Arial, sans-serif;
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
}

.pdf-cover-title:hover,
.pdf-cover-title:focus {
    background: rgba(16, 6, 159, 0.03);
    border: 1px dashed rgba(16, 6, 159, 0.3);
}

/* PDF: Y=65, helvetica 16, color 80,80,80, centered */
.pdf-cover-subtitle {
    margin-top: 5mm;
    text-align: center;
    font-size: 16pt;
    color: rgb(80, 80, 80);
    font-family: Helvetica, Arial, sans-serif;
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
}

.pdf-cover-subtitle:hover,
.pdf-cover-subtitle:focus {
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(0, 0, 0, 0.2);
}

/* PDF: Y=78, helvetica B 11, mosca blue, centered */
.pdf-cover-quote-nr {
    text-align: center;
    margin-top: 3mm;
    font-size: 11pt;
    font-weight: bold;
    color: rgb(16, 6, 159);
    font-family: Helvetica, Arial, sans-serif;
}

/* PDF: Line X=70 to X=140 at Y=90, 0.5pt width, mosca blue */
.pdf-cover-separator {
    width: 70mm;
    height: 0.5px;
    background: rgb(16, 6, 159);
    margin: 3mm auto 0 auto;
}

/* PDF: Rect at Y=110, H=120, blue border 0.3 alpha */
.pdf-cover-image-frame {
    margin-top: 10mm;
    height: 120mm;
    border: 0.3mm solid rgba(16, 6, 159, 0.3);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-cover-image-frame .image-slot {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5mm;
}

.pdf-cover-image-frame .slot-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Layout selector overlay on frame */
.pdf-cover-layout-selector {
    position: absolute;
    top: -7mm;
    right: 0;
    z-index: 5;
    display: flex;
    gap: 3px;
    align-items: center;
}

/* ==================== ANSCHREIBEN (Cover Letter) - PDF replica ==================== */
/* PDF: isOfficial=true, addresses left starting Y=30, info box at X=125,Y=30,W=70,H=60 */
.pdf-letter-layout {
    display: flex;
    gap: 5mm;
    margin-bottom: 5mm;
}

.pdf-letter-addresses {
    flex: 1;
}

.pdf-letter-addr-label {
    font-size: 9pt;
    font-weight: bold;
    color: #000;
    font-family: Helvetica, Arial, sans-serif;
    margin-bottom: 1mm;
}

.pdf-letter-addr-field {
    font-size: 9pt !important;
    font-family: Helvetica, Arial, sans-serif;
    padding: 1px 0 !important;
    height: auto !important;
    border: none !important;
    border-bottom: 1px dashed transparent !important;
    background: transparent;
    line-height: 1.4;
}

.pdf-letter-addr-field:hover,
.pdf-letter-addr-field:focus {
    border-bottom: 1px dashed #ccc !important;
    background: rgba(0, 0, 0, 0.01);
}

/* PDF: gray box X=125, Y=30, W=70, H=60, fill 245,245,245 */
.pdf-letter-infobox {
    width: 75mm;
    min-height: 60mm;
    background: rgb(245, 245, 245);
    padding: 5mm;
    flex-shrink: 0;
    font-family: Helvetica, Arial, sans-serif;
}

.pdf-letter-infobox-title {
    font-size: 10pt;
    font-weight: bold;
    color: rgb(16, 6, 159);
    margin-bottom: 3mm;
}

.pdf-letter-infobox-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 1mm;
    font-size: 8pt;
}

.pdf-letter-infobox-row label {
    font-weight: bold;
    width: 25mm;
    flex-shrink: 0;
    font-size: 8pt;
}

.pdf-letter-infobox-row span.colon {
    margin: 0 1mm;
    font-size: 8pt;
}

.pdf-letter-infobox-field {
    flex: 1;
    font-size: 8pt !important;
    padding: 0 !important;
    height: auto !important;
    border: none !important;
    background: transparent;
    font-family: Helvetica, Arial, sans-serif;
}

.pdf-letter-infobox-field:hover,
.pdf-letter-infobox-field:focus {
    background: rgba(255, 255, 255, 0.5);
    border-bottom: 1px dashed #aaa !important;
}

/* PDF: horizontal separator line */
.pdf-letter-separator {
    height: 0.5px;
    background: #000;
    margin: 3mm 0;
}

/* ==================== PRODUKTSEITEN (Product Pages) - PDF replica ==================== */
/* PDF: isOfficial=false, manufacturer logo top-right, product name 16pt bold colored, accent underline, price 11pt */
.pdf-product-page {
    padding: 15mm;
}

.pdf-product-logo {
    position: absolute;
    top: 15mm;
    right: 15mm;
    z-index: 2;
}

.pdf-product-logo img {
    width: 40mm;
    height: auto;
}

/* PDF: helvetica B 16, colored text, Line from X=15 to X=130 */
.pdf-product-name-field {
    font-size: 16pt !important;
    font-weight: bold !important;
    color: var(--brand-color, rgb(16, 6, 159));
    border: none !important;
    background: transparent;
    padding: 0 !important;
    font-family: Helvetica, Arial, sans-serif;
    width: 65%;
}

.pdf-product-name-field:hover,
.pdf-product-name-field:focus {
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(0, 0, 0, 0.2) !important;
}

.pdf-product-accent-line {
    height: 1mm;
    background: var(--brand-color, rgb(16, 6, 159));
    width: 115mm;
    margin: 1mm 0 3mm 0;
}

/* PDF: helvetica B 11, color 60,60,60 */
.pdf-product-price {
    font-size: 11pt;
    font-weight: bold;
    color: rgb(60, 60, 60);
    font-family: Helvetica, Arial, sans-serif;
    margin-bottom: 4mm;
}

/* Two-column layout: text left 100mm, image right starting at X=120 */
.pdf-product-two-col {
    display: flex;
    gap: 5mm;
    margin-top: 3mm;
}

.pdf-product-two-col .col-text {
    width: 100mm;
    flex-shrink: 0;
    font-size: 9pt;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

.pdf-product-two-col .col-image {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.pdf-product-two-col .col-image img {
    max-width: 65mm;
    max-height: 60mm;
    object-fit: contain;
}

/* Features with checkmarks */
.pdf-product-features {
    margin-top: 4mm;
}

.pdf-product-features-title {
    font-size: 10pt;
    font-weight: bold;
    color: var(--brand-color, rgb(16, 6, 159));
    margin-bottom: 2mm;
}

.pdf-product-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 2mm;
    margin-bottom: 1mm;
    font-size: 8pt;
    line-height: 1.4;
}

.pdf-product-feature-check {
    color: var(--brand-color, rgb(16, 6, 159));
    font-size: 7pt;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Technical data table */
.pdf-product-tech-table {
    width: 100%;
    font-size: 7pt;
    font-family: Helvetica, Arial, sans-serif;
    border-collapse: collapse;
    margin-top: 3mm;
}

.pdf-product-tech-table th {
    background: var(--brand-color, rgb(16, 6, 159));
    color: #fff;
    padding: 2mm 3mm;
    font-weight: bold;
    font-size: 8pt;
    text-align: left;
}

.pdf-product-tech-table td {
    padding: 1.5mm 3mm;
    border-bottom: 0.3px solid #e0e0e8;
}

.pdf-product-tech-table tr:nth-child(even) td {
    background: rgb(245, 245, 250);
}

/* ==================== BROSCHÜRENSEITEN (Brochure Pages) - PDF replica ==================== */
/* PDF: colored banner H=28mm full width, diagonal separator, product image right, features left, zigzag photos */

.pdf-brochure-page {
    padding: 0 !important;
    overflow: hidden;
}

/* PDF: banner Rect 0,0,pageW,28 filled with brand color */
.pdf-brochure-banner {
    width: 100%;
    height: 28mm;
    padding: 4mm 15mm;
    position: relative;
    color: #fff;
}

.pdf-brochure-banner-dark {
    color: #1e1e1e;
}

.pdf-brochure-model {
    font-size: 22pt;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.1;
}

.pdf-brochure-title {
    font-size: 11pt;
    font-family: Helvetica, Arial, sans-serif;
    margin-top: 1mm;
}

.pdf-brochure-subtitle {
    font-size: 9pt;
    font-family: Helvetica, Arial, sans-serif;
}

/* Diagonal separator */
.pdf-brochure-diag {
    width: 55%;
    height: 12mm;
    background: rgb(235, 235, 240);
    clip-path: polygon(0 0, 100% 0, calc(100% - 12mm) 100%, 0 100%);
}

.pdf-brochure-content-area {
    padding: 0 15mm;
    position: relative;
}

/* Product image right side */
.pdf-brochure-product-img {
    position: absolute;
    top: 0;
    right: 15mm;
    width: 75mm;
}

.pdf-brochure-product-img img {
    width: 100%;
    height: auto;
}

/* Features list left */
.pdf-brochure-features {
    width: 90mm;
    margin-top: 5mm;
    font-size: 8pt;
    font-family: Helvetica, Arial, sans-serif;
}

/* Second diagonal separator (from right) */
.pdf-brochure-diag2 {
    height: 10mm;
    background: rgb(235, 235, 240);
    clip-path: polygon(40% 0, 100% 0, 100% 100%, calc(40% - 10mm) 100%);
    margin-top: 5mm;
}

/* Zigzag photos */
.pdf-brochure-photos {
    padding: 5mm 15mm;
}

.pdf-brochure-photo-row {
    display: flex;
    margin-bottom: 5mm;
    gap: 5mm;
}

.pdf-brochure-photo-row.left .photo-img {
    order: 0;
}

.pdf-brochure-photo-row.right .photo-img {
    order: 1;
}

.pdf-brochure-photo-row .photo-img {
    width: 80mm;
    height: 50mm;
    overflow: hidden;
    flex-shrink: 0;
}

.pdf-brochure-photo-row .photo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdf-brochure-photo-row .photo-callout {
    flex: 1;
    font-size: 8pt;
    font-style: italic;
    color: rgb(80, 80, 80);
    padding-top: 5mm;
}

/* Specs table bottom-right */
.pdf-brochure-specs-row {
    display: flex;
    gap: 5mm;
    padding: 0 15mm;
}

.pdf-brochure-specs-table {
    width: 85mm;
    font-size: 7pt;
    font-family: Helvetica, Arial, sans-serif;
    border-collapse: collapse;
}

.pdf-brochure-specs-table .spec-header {
    padding: 1.5mm 3mm;
    font-weight: bold;
    font-size: 8pt;
    color: #fff;
}

.pdf-brochure-specs-table td {
    padding: 1.5mm 3mm;
    border-bottom: 0.2px solid #ddd;
}

.pdf-brochure-specs-table tr:nth-child(even) td {
    background: rgb(245, 245, 250);
}

.pdf-brochure-specs-table td:first-child {
    font-weight: bold;
    text-transform: uppercase;
    width: 35mm;
}

/* ==================== PREISZUSAMMENFASSUNG (Summary) - PDF replica ==================== */
/* PDF: isOfficial=true, blue header bar, table, totals box right */

/* PDF: Rect fillColor 16,6,159, H=10, white text 13pt bold */
.pdf-summary-header-bar {
    background: rgb(16, 6, 159);
    padding: 2mm 4mm;
    margin-bottom: 2mm;
}

.pdf-summary-header-bar input {
    font-size: 13pt;
    font-weight: bold;
    color: #fff;
    background: transparent;
    border: none;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
}

/* PDF: table header with fill 235,237,250, 8pt bold */
.pdf-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 8pt;
}

.pdf-summary-table thead th {
    background: rgb(235, 237, 250);
    border-bottom: 1px solid rgb(200, 200, 215);
    font-size: 8pt;
    font-weight: bold;
    color: rgb(60, 60, 80);
    padding: 2mm 2mm;
    text-align: left;
}

.pdf-summary-table thead th:nth-child(4) {
    text-align: center;
}

.pdf-summary-table thead th:nth-child(5),
.pdf-summary-table thead th:nth-child(6) {
    text-align: right;
}

.pdf-summary-table tbody td {
    padding: 1.5mm 2mm;
    font-size: 7pt;
    border-bottom: 0.15px solid rgb(230, 230, 235);
    vertical-align: top;
}

.pdf-summary-table tbody tr:nth-child(even) {
    background: rgb(248, 248, 252);
}

.pdf-summary-table .desc-main {
    font-weight: bold;
    font-size: 8pt;
    color: rgb(30, 30, 40);
}

.pdf-summary-table .desc-sub {
    font-size: 7pt;
    color: rgb(100, 100, 110);
}

/* PDF: RoundedRect sumW=90, light bg 245,246,252, blue accent bar left 2.5mm */
.pdf-summary-totals-box {
    width: 90mm;
    margin-left: auto;
    background: rgb(245, 246, 252);
    border-radius: 3mm;
    padding: 4mm 5mm;
    position: relative;
    margin-top: 4mm;
    font-family: Helvetica, Arial, sans-serif;
}

.pdf-summary-totals-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.5mm;
    background: rgb(16, 6, 159);
    border-radius: 3mm 0 0 3mm;
}

.pdf-summary-totals-row {
    display: flex;
    justify-content: space-between;
    font-size: 9pt;
    color: rgb(80, 80, 90);
    margin-bottom: 1mm;
}

.pdf-summary-totals-row.discount {
    font-size: 8pt;
    color: rgb(180, 50, 50);
}

.pdf-summary-totals-row.subtotal {
    font-size: 11pt;
    font-weight: bold;
    color: rgb(30, 30, 40);
}

/* Nettobetrag row (no discount) - same size as grand-total */
#subtotalRow {
    font-size: 11pt;
    font-weight: bold;
    color: rgb(30, 30, 40);
}

.pdf-summary-totals-row.tax {
    font-size: 8pt;
}

.pdf-summary-divider {
    height: 0.5px;
    background: rgb(200, 200, 210);
    margin: 1mm 0;
}

.pdf-summary-divider-blue {
    height: 0.5px;
    background: rgb(16, 6, 159);
    margin: 1.5mm 0;
}

/* PDF: 11pt bold mosca blue */
.pdf-summary-totals-row.grand-total {
    font-size: 11pt;
    font-weight: bold;
    color: rgb(16, 6, 159);
    margin-top: 1mm;
}

/* Delivery & Payment section */
.pdf-summary-delivery {
    margin-top: 6mm;
    font-family: Helvetica, Arial, sans-serif;
}

.pdf-summary-delivery-title {
    font-size: 10pt;
    font-weight: bold;
    color: rgb(16, 6, 159);
}

.pdf-summary-delivery-line {
    height: 0.4px;
    width: 35mm;
    background: rgb(16, 6, 159);
    margin: 1mm 0 3mm 0;
}

.pdf-summary-delivery-row {
    display: flex;
    align-items: baseline;
    margin-bottom: 2mm;
    font-size: 9pt;
}

.pdf-summary-delivery-row label {
    font-weight: bold;
    color: rgb(80, 80, 90);
    width: 40mm;
    flex-shrink: 0;
    font-size: 9pt;
}

/* ==================== AGB (Terms) - PDF replica ==================== */
/* PDF: isOfficial=true, title 16pt bold mosca blue, accent line full width, 9pt content */
.pdf-terms-title-field {
    font-size: 16pt !important;
    font-weight: bold !important;
    color: rgb(16, 6, 159);
    border: none !important;
    background: transparent;
    padding: 0 !important;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
}

.pdf-terms-title-field:hover,
.pdf-terms-title-field:focus {
    background: rgba(16, 6, 159, 0.03);
    border: 1px dashed rgba(16, 6, 159, 0.3) !important;
}

.pdf-terms-accent-line {
    height: 0.5px;
    background: rgb(16, 6, 159);
    margin: 2mm 0 5mm 0;
}

/* Editable field hover style for all PDF fields */
.pdf-edit-field {
    border: none !important;
    background: transparent;
    padding: 1px 2px !important;
    font-family: Helvetica, Arial, sans-serif;
    transition: background 0.15s, border 0.15s;
}

.pdf-edit-field:hover {
    background: rgba(16, 6, 159, 0.03);
    border: 1px dashed rgba(16, 6, 159, 0.2) !important;
}

.pdf-edit-field:focus {
    background: rgba(16, 6, 159, 0.05);
    border: 1px solid rgba(16, 6, 159, 0.3) !important;
    outline: none;
}

.section-label {
    position: absolute;
    top: 5mm;
    right: 5mm;
    background: var(--primary-color);
    color: white;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

#quotePreview {
    background: #e9ecef;
    padding: 20px 10px;
}

/* ==================== COVER PAGE ==================== */
.cover-page-content {
    text-align: center;
    padding-top: 60px;
}

.cover-page-content h1 {
    font-size: 48px;
    font-weight: bold;
}

.cover-page-content .lead {
    font-size: 24px;
    color: #6c757d;
}

/* ==================== SELECTION BOXES (Start Page) ==================== */
.selection-box {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 30px;
    min-height: 400px;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.selection-box .collapse,
.selection-box .collapsing {
    position: relative;
    z-index: 100;
}

.selection-box .list-group {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.selection-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
    transition: height 0.3s ease;
}

.selection-box-new::before {
    background: linear-gradient(90deg, var(--primary-color), #0056b3);
}

.selection-box-load::before {
    background: linear-gradient(90deg, var(--success-color), #146c43);
}

.selection-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.selection-box:hover::before {
    height: 6px;
}

.selection-icon {
    text-align: center;
    font-size: 64px;
    color: var(--primary-color);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.selection-box-new .selection-icon {
    color: var(--primary-color);
}

.selection-box-load .selection-icon {
    color: var(--success-color);
}

.selection-box:hover .selection-icon {
    transform: scale(1.1);
}

.selection-box h4 {
    font-weight: 700;
    margin-bottom: 15px;
}

.selection-box .btn {
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
}

.selection-box .list-group {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.selection-box .list-group-item {
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.selection-box-new .list-group-item:hover {
    border-left-color: var(--primary-color);
    background-color: rgba(13, 110, 253, 0.05);
}

.selection-box-load .list-group-item:hover {
    border-left-color: var(--success-color);
    background-color: rgba(25, 135, 84, 0.05);
}

.selection-box .badge {
    padding: 6px 12px;
    font-weight: 600;
}

/* ==================== EDITABLE HEADINGS ==================== */
.editable-heading {
    background-color: transparent;
    border: 1px dashed transparent;
    transition: all 0.3s ease;
}

.editable-heading:hover {
    border-color: var(--primary-color);
    background-color: rgba(13, 110, 253, 0.05);
}

.editable-heading:focus {
    border-color: var(--primary-color);
    background-color: white;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    outline: none;
}

/* ==================== INFO BOX ==================== */
.info-box {
    background: var(--light-bg);
    padding: 20px;
    border-radius: 6px;
    border-left: 4px solid var(--primary-color);
}

/* ==================== QUOTE INFO TABLE ==================== */
.quote-info-label {
    width: 120px;
}

/* ==================== CONTENT BLOCKS CONTAINER ==================== */
.content-blocks-container {
    margin: 15px 0;
    min-height: 50px;
}

/* ==================== QUILL BLOCKS ==================== */
.quill-block {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    margin: 15px 0;
    position: relative;
    transition: all 0.3s ease;
}

.quill-block:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.quill-block.active {
    border-color: var(--primary-color);
    background-color: var(--active-bg);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.quill-block.edited {
    border-left: 4px solid var(--success-color);
}

.quill-block.edited::after {
    content: "✓ Edited";
    position: absolute;
    top: -10px;
    right: 10px;
    background: var(--success-color);
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    z-index: 5;
}

.block-toolbar {
    position: absolute;
    left: -40px;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 100;
}

.quill-block:hover .block-toolbar,
.quill-block.active .block-toolbar {
    opacity: 1;
}

.template-builder .btn-tool {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
}

.template-builder .btn-tool:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

/* ==================== QUILL EDITOR CONTENT ==================== */
.ql-editor {
    min-height: 150px;
    font-size: 14px;
    line-height: 1.8;
    padding: 15px;
}

.ql-editor p {
    margin-bottom: 10px;
    text-indent: 0 !important;
    padding-left: 0 !important;
}

.ql-editor.ql-blank::before {
    font-style: italic;
    color: #adb5bd;
}

/* Specific min-heights for different sections */
#coverLetterBlocks .ql-editor {
    min-height: 400px;
}

.variant-block .ql-editor {
    min-height: 300px;
}

.option-block .ql-editor {
    min-height: 150px;
}

#termsBlocks .ql-editor {
    min-height: 500px;
}

/* ==================== QUILL TOOLBAR ==================== */
.ql-toolbar {
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid var(--border-color);
}

.ql-container {
    border-radius: 0 0 8px 8px;
}

/* ==================== PAGE BREAK ==================== */
.page-break {
    border-top: 3px dashed var(--border-color);
    margin: 40px auto;
    position: relative;
    text-align: center;
    max-width: 210mm;
}

.page-break span {
    background: var(--light-bg);
    padding: 8px 20px;
    position: relative;
    top: -15px;
    color: #6c757d;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

/* ==================== OPTION ITEM ==================== */
.option-item {
    background: white;
    padding: 20px;
    margin: 15px 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.option-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ==================== OPTION IMAGE UPLOAD ==================== */
.option-image-upload {
    cursor: pointer;
}

.option-image-preview {
    margin-top: 10px;
    padding: 10px;
    background: var(--light-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    display: inline-block;
}

.option-image-preview img {
    display: block;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.option-image-preview .btn-danger {
    margin-top: 8px;
}

/* ==================== QUOTE SUMMARY TABLE ==================== */
.quote-summary-table {
    width: 100%;
    border-collapse: collapse;
}

.quote-summary-table thead {
    background-color: var(--primary-color);
    color: white;
}

.quote-summary-table thead th {
    padding: 10px;
    font-weight: 600;
    font-size: 0.9em;
    text-align: left;
}

.quote-summary-table tbody td {
    padding: 10px;
    font-size: 0.85em;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.quote-summary-table .description-cell {
    max-width: 300px;
    line-height: 1.6;
}

.quote-summary-table .table-row-even {
    background-color: #f8f9fa;
}

.quote-summary-table .table-row-odd {
    background-color: white;
}

/* ==================== PRICE SUMMARY BOX ==================== */
.price-summary-box {
    background: #f8f9fa;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-row.total-row {
    border-top: 2px solid var(--primary-color);
    margin-top: 10px;
    padding-top: 15px;
    font-size: 1.1em;
    color: var(--primary-color);
}

/* ==================== STICKY TOOLBAR ==================== */
.sticky-toolbar {
    position: sticky;
    top: 20px;
    z-index: 100;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #adb5bd #f1f1f1;
}

.sticky-toolbar::-webkit-scrollbar {
    width: 5px;
}

.sticky-toolbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.sticky-toolbar::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 3px;
}

.sticky-toolbar::-webkit-scrollbar-thumb:hover {
    background: #0d6efd;
}

/* ==================== TEMPLATE LIBRARY ==================== */
.template-library {
    max-height: 500px;
    overflow-y: auto;
    padding: 5px;
}

.template-category {
    margin-bottom: 20px;
}

.template-category-title {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-color);
}

.template-block-item {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px;
    margin: 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.template-block-item:hover {
    border-color: var(--primary-color);
    background-color: var(--hover-bg);
    transform: translateX(4px);
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.15);
}

.template-block-item:active {
    transform: translateX(2px);
}

.template-block-label {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.template-block-preview {
    font-size: 0.85em;
    color: #6c757d;
    line-height: 1.4;
}

/* Click-to-expand full text + dedicated insert button (Option B) */
.template-block-full {
    font-size: 0.85em;
    color: #343a40;
    line-height: 1.45;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-color);
    white-space: pre-wrap;
    word-break: break-word;
}

.template-block-item.expanded {
    cursor: zoom-out;
}

.template-block-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
}

.template-block-insert-btn {
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.template-block-insert-btn:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

.template-block-insert-btn:active {
    transform: translateY(0);
}

/* ==================== CARDS ==================== */
.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
    font-weight: 600;
    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
}

.card-body {
    padding: 20px;
}

/* ==================== LIST GROUP ==================== */
.list-group-item {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.list-group-item:hover {
    background-color: var(--light-bg);
    transform: translateX(4px);
    border-left-color: var(--primary-color);
}

/* ==================== ALERTS ==================== */
.alert {
    border-radius: 6px;
    border-left: 4px solid;
}

.alert-info {
    border-left-color: var(--info-color);
    background-color: #cff4fc;
}

.alert-success {
    border-left-color: var(--success-color);
    background-color: #d1e7dd;
}

.alert-warning {
    border-left-color: var(--warning-color);
    background-color: #fff3cd;
}

.alert-secondary {
    border-left-color: #6c757d;
    background-color: #e2e3e5;
}

/* ==================== BADGES ==================== */
.badge {
    font-size: 0.85em;
    padding: 6px 10px;
    font-weight: 500;
}

/* ==================== BUTTONS ==================== */
.template-builder .btn {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.template-builder .btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.template-builder .btn:active:not(:disabled) {
    transform: translateY(0);
}

.template-builder .btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.template-builder .btn-sm {
    padding: 6px 12px;
    font-size: 0.875em;
}

.template-builder .btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.template-builder .btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* ==================== FORM CONTROLS ==================== */
.template-builder .form-select,
.template-builder .form-control {
    border-radius: 6px;
    transition: all 0.3s ease;
}

.template-builder .form-select:focus,
.template-builder .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-text {
    font-size: 0.875em;
    color: #6c757d;
}

input.customer-field,
input.quote-field,
input.product-field,
input.option-field,
input.terms-field,
textarea.terms-field,
input.product-name-field {
    transition: all 0.2s ease;
}

input.customer-field:focus,
input.quote-field:focus,
input.product-field:focus,
input.option-field:focus,
input.terms-field:focus,
textarea.terms-field:focus,
input.product-name-field:focus {
    background-color: #fffef0;
    border-color: var(--warning-color);
}

/* Product Name Field Special Styling */
input.product-name-field {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #0d6efd;
    padding: 8px 0;
}

input.product-name-field:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

input.product-name-field:focus {
    background-color: white;
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.1);
}

/* ==================== MODAL ==================== */
.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.modal-body {
    padding: 30px;
}

/* Legacy styles only for template list modal */
#templateListModal .modal-body .btn {
    text-align: left;
    padding: 20px;
    border: 2px solid var(--border-color);
    background: white;
}

#templateListModal .modal-body .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#templateListModal .modal-body .btn i {
    display: block;
    margin-bottom: 10px;
}

#templateListModal .modal-body .btn strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1em;
}

#templateListModal .modal-body .btn small {
    color: #6c757d;
}

#templateListModal .modal-body .btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

#templateListModal .modal-body .btn-outline-primary:hover small {
    color: rgba(255, 255, 255, 0.8);
}

#templateListModal .modal-body .btn-outline-success:hover {
    background-color: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

#templateListModal .modal-body .btn-outline-success:hover small {
    color: rgba(255, 255, 255, 0.8);
}

#templateListModal .modal-body .btn-outline-info:hover {
    background-color: var(--info-color);
    color: white;
    border-color: var(--info-color);
}

#templateListModal .modal-body .btn-outline-info:hover small {
    color: rgba(255, 255, 255, 0.8);
}

/* ==================== CUSTOM SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInBlock {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.template-block-item {
    animation: slideIn 0.2s ease;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .sticky-toolbar {
        position: relative;
        top: 0;
        margin-top: 30px;
        max-height: none;
        overflow-y: visible;
    }

    .preview-section {
        width: 100%;
        min-height: auto;
        padding: 15px;
    }

    .block-toolbar {
        left: 5px;
        opacity: 1;
    }
}

@media (max-width: 992px) {
    .sticky-toolbar {
        position: relative;
        top: 0;
        margin-top: 30px;
        max-height: none;
        overflow-y: visible;
    }

    .template-library {
        max-height: 300px;
    }
}

@media (max-width: 768px) {
    .info-box {
        padding: 15px;
    }

    .template-library {
        max-height: 250px;
    }

    .card-body {
        padding: 15px;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-body .btn {
        padding: 15px;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {

    .sticky-toolbar,
    .template-builder .navbar,
    .page-break,
    .block-toolbar,
    .template-builder .btn,
    .alert,
    .ql-toolbar {
        display: none !important;
    }

    .card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--border-color);
        margin-bottom: 10px;
    }

    .template-builder {
        background: white;
    }

    .quill-block {
        border: none;
        padding: 10px 0;
        box-shadow: none;
    }

    .quill-block.edited {
        background-color: white;
        border-left: none;
    }

    .quill-block.edited::after {
        display: none;
    }
}

/* ==================== DRAG AND DROP ==================== */
.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.drag-over {
    border-style: dashed;
    border-width: 3px;
    border-color: var(--primary-color);
    background-color: var(--hover-bg);
}

/* ==================== UTILITIES ==================== */
.text-primary {
    color: var(--primary-color) !important;
}

.text-success {
    color: var(--success-color) !important;
}

.text-danger {
    color: var(--danger-color) !important;
}

.text-muted {
    color: #6c757d !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-success {
    background-color: var(--success-color) !important;
}

.bg-light {
    background-color: var(--light-bg) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

/* ==================== SPINNER ==================== */
.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.15em;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== LOADING STATES ==================== */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ==================== TABLES ==================== */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
}

.table-sm td,
.table-sm th {
    padding: 0.3rem;
}

.table-borderless td,
.table-borderless th {
    border: 0;
}

/* ==================== VISUAL FEEDBACK ==================== */
.success-flash {
    animation: successFlash 0.5s ease;
}

@keyframes successFlash {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: var(--edited-bg);
    }

    100% {
        background-color: transparent;
    }
}

.error-shake {
    animation: errorShake 0.5s ease;
}

@keyframes errorShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

/* ==================== FOCUS VISIBLE (Accessibility) ==================== */
.template-builder *:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.template-builder button:focus-visible,
.template-builder .btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ==================== HIGH CONTRAST MODE SUPPORT ==================== */
@media (prefers-contrast: high) {
    .template-builder {
        --border-color: #000;
    }

    .template-block-item {
        border-width: 2px;
    }
}

/* ==================== REDUCED MOTION SUPPORT ==================== */
@media (prefers-reduced-motion: reduce) {

    .template-builder *,
    .template-builder *::before,
    .template-builder *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== FILE INPUT STYLING ==================== */
.template-builder input[type="file"].form-control {
    padding: 0.375rem 0.75rem;
}

.template-builder input[type="file"].form-control::-webkit-file-upload-button {
    padding: 0.375rem 0.75rem;
    margin: -0.375rem -0.75rem;
    margin-inline-end: 0.75rem;
    color: #212529;
    background-color: #e9ecef;
    pointer-events: none;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-inline-end-width: 1px;
    border-radius: 0;
    transition: all 0.15s ease-in-out;
}

.template-builder input[type="file"].form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background-color: #dde0e3;
}

/* ==================== IMAGE PREVIEW IMPROVEMENTS ==================== */
.option-image-preview {
    animation: fadeIn 0.3s ease;
}

.option-image-preview img {
    transition: transform 0.3s ease;
}

.option-image-preview img:hover {
    transform: scale(1.05);
}

/* ==================== UPLOAD BUTTON STYLING ==================== */
.input-group .btn-outline-secondary {
    border-color: var(--border-color);
}

.input-group .btn-outline-secondary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* ==================== TOOLTIP-LIKE LABELS ==================== */
label.small {
    font-weight: 500;
    color: #6c757d;
    margin-bottom: 0.5rem;
}

/* ==================== ENHANCED FOCUS STATES ==================== */
.template-builder .form-control:focus,
.template-builder .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* ==================== BUTTON GROUP IMPROVEMENTS ==================== */
.input-group>.form-control:focus {
    z-index: 3;
}

/* ==================== SMOOTH TRANSITIONS ==================== */
.option-item,
.quill-block,
.template-block-item,
.card,
.template-builder .btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== ENHANCED SHADOWS ==================== */
.card:hover,
.option-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* ==================== IMPROVED SPACING ==================== */
.mb-custom {
    margin-bottom: 1.5rem;
}

.mt-custom {
    margin-top: 1.5rem;
}

/* ==================== COVER PAGE IMAGE MANAGEMENT ==================== */
.cover-page-preview {
    min-height: 297mm !important;
}

.cover-image-section {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
}

.cover-logo-preview {
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 6px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-logo-img {
    max-width: 200px;
    max-height: 80px;
    object-fit: contain;
}

.product-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.product-images-grid.images-1 {
    grid-template-columns: 1fr;
}

.product-images-grid.images-2 {
    grid-template-columns: repeat(2, 1fr);
}

.product-images-grid.images-3 {
    grid-template-columns: repeat(3, 1fr);
}

.product-images-grid.images-4 {
    grid-template-columns: repeat(2, 1fr);
}

.product-image-item {
    position: relative;
    background: white;
    border-radius: 6px;
    padding: 10px;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-image-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-image-item:hover .product-image-controls {
    opacity: 1;
}

.product-image-controls .btn {
    padding: 4px 8px;
    font-size: 12px;
}

.product-images-grid .alert {
    grid-column: 1 / -1;
    margin: 0;
}

@media (max-width: 768px) {
    .product-images-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-images-grid.images-1 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SLOT-BASED GRID SYSTEM - ALL LAYOUTS
   ============================================ */

.product-images-grid-new {
    display: grid;
    gap: 20px;
    margin-top: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
    transition: all 0.3s ease;
}

/* Layout 1: Single Large Image */
.product-images-grid-new[data-layout="1"] {
    grid-template-columns: 1fr;
}

/* Layout 2: Two Images Side by Side */
.product-images-grid-new[data-layout="2"] {
    grid-template-columns: repeat(2, 1fr);
}

/* Layout 3: Three Images in a Row */
.product-images-grid-new[data-layout="3"] {
    grid-template-columns: repeat(3, 1fr);
}

/* Layout 4: Four Images in 2x2 Grid */
.product-images-grid-new[data-layout="4"] {
    grid-template-columns: repeat(2, 1fr);
}

/* Image Slot */
.image-slot {
    position: relative;
    background: white;
    border-radius: 8px;
    border: 2px solid #dee2e6;
    padding: 15px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

.image-slot:hover {
    border-color: #0d6efd;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.15);
}

/* Slot Image */
.slot-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Placeholder */
.slot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    text-align: center;
    width: 100%;
    height: 100%;
}

.slot-placeholder i {
    font-size: 48px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.slot-placeholder span {
    font-size: 14px;
    font-weight: 500;
}

/* Slot Controls */
.slot-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-slot:hover .slot-controls {
    opacity: 1;
}

.slot-controls .btn {
    padding: 6px 10px;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slot-controls .btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white;
}

.slot-controls .btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

/* Layout Button Group */
.template-builder .btn-group .btn-check:checked+label {
    background-color: #0d6efd;
    color: white;
}

/* Loading State */
.image-slot.uploading {
    pointer-events: none;
    opacity: 0.6;
}

.image-slot.uploading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0d6efd;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Single Image - Larger */
.product-images-grid-new[data-layout="1"] .image-slot {
    aspect-ratio: 16/9;
    max-height: 400px;
}

/* Success Animation */
@keyframes successPulse {

    0%,
    100% {
        border-color: #dee2e6;
    }

    50% {
        border-color: #198754;
        box-shadow: 0 0 20px rgba(25, 135, 84, 0.3);
    }
}

.image-slot.upload-success {
    animation: successPulse 0.6s ease;
}

/* Image Selection Modal */
.image-option {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    aspect-ratio: 1;
}

.image-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-option-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 110, 253, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-option:hover .image-option-overlay {
    opacity: 1;
}

.image-option-overlay i {
    font-size: 48px;
    color: white;
}

#imageGrid {
    max-height: 60vh;
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 768px) {

    .product-images-grid-new[data-layout="2"],
    .product-images-grid-new[data-layout="3"],
    .product-images-grid-new[data-layout="4"] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .image-slot {
        aspect-ratio: 4/3;
    }

    .slot-controls {
        opacity: 1;
    }

    .product-images-grid-new[data-layout="1"] .image-slot {
        aspect-ratio: 4/3;
    }
}

/* ==================== DISCOUNT INPUT FIELD ==================== */
.discount-input {
    width: 60px !important;
    text-align: right;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.3s ease;
}

.discount-input:hover {
    border-color: var(--primary-color) !important;
    background-color: rgba(13, 110, 253, 0.05);
}

.discount-input:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    background-color: white;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Hide number input spinners for a cleaner look */
.discount-input::-webkit-outer-spin-button,
.discount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.discount-input[type=number] {
    -moz-appearance: textfield;
}

#addDiscountBtn {
    font-size: 13px;
    padding: 4px 12px;
}

#addDiscountBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ==================== v2 VARIANT ALTERNATIVES (LAYOUT-SAFE) ==================== */
/* Added for Template Builder v5.0.2 - Variant Alternatives Support */
/* These styles preserve the original A4 layout while adding alternative styling */

.preview-section.variant-is-alternative {
    position: relative;
    /* IMPORTANT: Keep all original layout properties intact! */
}

/* Visual indicator badge for alternative variants */
.preview-section.variant-is-alternative::before {
    content: '↳ ALTERNATIVE';
    position: absolute;
    top: 80px;
    /* Below the "Page X" label */
    right: 20mm;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: var(--alternative-color);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 700;
    border: 2px solid var(--alternative-color);
    letter-spacing: 1px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Alternative product name styling */
.preview-section.variant-is-alternative .product-name-field {
    color: var(--alternative-color);
    font-style: italic;
    border-color: var(--alternative-color) !important;
}

/* Alternative price styling with strikethrough */
.preview-section.variant-is-alternative .variant-price-field {
    color: var(--alternative-color);
    text-decoration: line-through;
}

/* Slight transparency for alternative variant content */
.preview-section.variant-is-alternative .product-field,
.preview-section.variant-is-alternative .editable-heading {
    opacity: 0.8;
}

/* Alternative quill blocks in variants */
.preview-section.variant-is-alternative .quill-block {
    background-color: #f8f9fa;
    border-left: 4px solid var(--alternative-color);
}

.preview-section.variant-is-alternative .ql-editor {
    color: var(--alternative-color);
    font-style: italic;
}

/* Hover effect for alternative variants */
.preview-section.variant-is-alternative:hover {
    background-color: rgba(248, 249, 250, 0.5);
}

/* Drag handle color for alternative variants */
.preview-section.variant-is-alternative .drag-handle {
    color: var(--alternative-color);
}

/* ==================== v2 ITEM CONTROLS ==================== */
.item-controls {
    padding: 15px;
    background-color: var(--light-bg);
    border-radius: 6px;
    margin-bottom: 15px;
    margin-right: 200px;
    /* Abstand zum Logo rechts oben */
}

.item-controls .row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    /* Ermöglicht Umbruch bei kleinen Bildschirmen */
}

.item-controls label {
    margin-bottom: 0;
}

/* Drag Handle Styling */
.drag-handle {
    cursor: move;
    color: #adb5bd;
    transition: color 0.2s ease;
    opacity: 0.6;
}

.drag-handle:hover {
    color: var(--primary-color);
    opacity: 1;
}

/* Alternative Dropdown Selector */
.alternative-selector {
    display: none;
}

.alternative-selector select {
    max-width: 300px;
    border-color: var(--border-color);
    font-size: 0.9em;
}

/* Sortable.js Styles */
.sortable-ghost {
    opacity: 0.3;
    background: var(--light-bg);
    border: 3px dashed var(--primary-color) !important;
    /* Kompaktere Darstellung während Drag */
    min-height: 100px !important;
    overflow: hidden;
}

.sortable-ghost .quill-editor-wrapper,
.sortable-ghost .content-blocks-container,
.sortable-ghost .row.mb-4,
.sortable-ghost .option-item {
    display: none !important;
}

.sortable-ghost::after {
    content: '↕ Wird verschoben...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
    background: white;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sortable-chosen {
    cursor: grabbing !important;
    background: var(--active-bg) !important;
    border: 2px solid var(--primary-color) !important;
}

.sortable-drag {
    opacity: 0.9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    transform: rotate(2deg) scale(0.95);
    transition: all 0.2s ease;
    cursor: grabbing !important;
}

/* Drop Zone Highlights */
#quotePreview.sortable-chosen .preview-section[data-is-variant-item="true"]:not(.sortable-chosen)::before,
#quotePreview.sortable-chosen .preview-section[data-is-variant-item="true"]:not(.sortable-chosen)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom,
            transparent,
            rgba(13, 110, 253, 0.1),
            transparent);
    border: 2px dashed rgba(13, 110, 253, 0.3);
    border-left: none;
    border-right: none;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#quotePreview.sortable-chosen .preview-section[data-is-variant-item="true"]:not(.sortable-chosen):hover::before,
#quotePreview.sortable-chosen .preview-section[data-is-variant-item="true"]:not(.sortable-chosen):hover::after {
    opacity: 1;
}

#quotePreview.sortable-chosen .preview-section[data-is-variant-item="true"]:not(.sortable-chosen)::before {
    top: -20px;
}

#quotePreview.sortable-chosen .preview-section[data-is-variant-item="true"]:not(.sortable-chosen)::after {
    bottom: -20px;
}

/* Smooth scrolling during drag */
.template-builder {
    scroll-behavior: smooth;
}

/* Drag handle cursor enhancement */
.drag-handle {
    cursor: grab;
    user-select: none;
    transition: all 0.2s ease;
}

.drag-handle:hover {
    color: var(--primary-color);
    transform: scale(1.2);
}

.drag-handle:active {
    cursor: grabbing;
}

.sortable-chosen .drag-handle {
    cursor: grabbing;
    color: var(--primary-color);
}

/* Clipboard Badge */
.floating-clipboard-badge {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    color: white;
    padding: 15px 20px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.floating-clipboard-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

.floating-clipboard-badge i {
    font-size: 20px;
}

/* ==================== v2 RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
    .item-controls {
        padding: 10px;
        margin-right: 0;
        /* Kein margin-right auf mobilen Geräten */
    }

    .item-controls .row {
        flex-direction: column;
        gap: 10px;
    }

    .alternative-selector {
        width: 100%;
    }

    .alternative-selector select {
        max-width: 100% !important;
    }

    .floating-clipboard-badge {
        bottom: 20px;
        right: 20px;
        padding: 12px 16px;
        font-size: 14px;
    }

    .drag-handle {
        opacity: 1 !important;
    }

    /* Alternative badge positioning on mobile */
    .preview-section.variant-is-alternative::before {
        top: 60px;
        right: 10mm;
        font-size: 0.75em;
        padding: 6px 12px;
    }
}

/* ==================== v2 PRINT ADJUSTMENTS ==================== */
@media print {

    .item-controls,
    .alternative-selector {
        display: none !important;
    }

    /* Show alternative variants with reduced opacity in print */
    .preview-section.variant-is-alternative {
        opacity: 0.7;
    }

    /* Keep alternative badge visible in print */
    .preview-section.variant-is-alternative::before {
        display: block !important;
    }
}

/* ==================== END OF v2 ADDITIONS ==================== */
/* ==================== LOGO SELECTION MODAL ==================== */

.logo-option {
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.logo-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
    border-color: #0d6efd !important;
}

.logo-option.border-primary {
    background-color: rgba(13, 110, 253, 0.05);
}

.logo-option img {
    transition: transform 0.2s ease;
}

.logo-option:hover img {
    transform: scale(1.05);
}

#logoSelectionGrid {
    max-height: 400px;
    overflow-y: auto;
}

#logoSelectionModal .modal-body {
    background: #f8f9fa;
}

/* ==================== END LOGO SELECTION ==================== */

/* ==================== PRODUCT IMAGE SELECTION MODAL ==================== */

#imageSelectionModal .image-option {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

#imageSelectionModal .image-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.25);
    border-color: #0d6efd;
}

#imageSelectionModal .image-option .image-option-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 110, 253, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

#imageSelectionModal .image-option:hover .image-option-overlay {
    opacity: 1;
}

#imageSelectionModal .image-option .image-option-overlay i {
    font-size: 2rem;
    color: white;
}

#imageSelectionModal .modal-body h6 {
    border-bottom: 2px solid currentColor;
    padding-bottom: 8px;
}

/* ==================== END PRODUCT IMAGE SELECTION ==================== */
/* ==================== BROCHURE SECTIONS ==================== */

/* --- Global Page Toggles in Sidebar --- */
.page-toggle-item {
    padding: 4px 8px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.page-toggle-item .form-check {
    display: flex;
    align-items: center;
    padding-left: 0;
    gap: 6px;
}

.page-toggle-item .form-check-input {
    margin-left: 0;
    margin-top: 0;
    float: none;
    flex-shrink: 0;
}

.page-toggle-item:last-child {
    border-bottom: none;
}

.page-toggle-item:hover {
    background-color: #f8f9fa;
}

.page-toggle-item .form-check-label {
    cursor: pointer;
    font-size: 13px;
}

.page-toggle-item .form-check-label i {
    width: 18px;
    display: inline-block;
    text-align: center;
}

/* Hidden page sections */
.page-section.page-hidden {
    display: none !important;
}

.page-section.page-hidden+.page-break {
    display: none !important;
}

/* --- Brochure Page Container --- */
.brochure-page {
    position: relative;
}

.brochure-page .brochure-logo {
    position: absolute;
    top: 20mm;
    right: 20mm;
    z-index: 2;
}

.brochure-page .brochure-header {
    padding-right: 50mm;
}

/* --- Section Structure --- */
.brochure-section {
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.brochure-section.section-disabled {
    opacity: 0.4;
    max-height: 42px;
    overflow: hidden;
}

/* Ausgeblendete Standalone-Broschuerenseite: deutlich erkennbar (grau),
   erscheint nicht im PDF. Die Toggle-Steuerung oben bleibt bedienbar. */
.brochure-standalone-page.section-disabled {
    opacity: 0.45;
    filter: grayscale(1);
    position: relative;
}

.brochure-standalone-page.section-disabled::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(120,120,120,0.06) 0 10px, rgba(120,120,120,0.12) 10px 20px);
    pointer-events: none;
    z-index: 1;
}

.brochure-section.section-disabled .brochure-section-body {
    display: none;
}

.brochure-section.section-disabled .brochure-section-header {
    border-bottom: none;
    background-color: #f8f9fa;
}

.brochure-section-header {
    padding: 8px 14px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
}

.brochure-section-header .form-check {
    margin-bottom: 0;
}

.brochure-section-header .form-check-label {
    font-size: 13px;
    color: #495057;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.brochure-section-header .form-check-label i {
    margin-right: 6px;
    color: var(--brand-color, #0d6efd);
}

.brochure-section-header .form-check-input:checked~.form-check-label {
    color: #212529;
}

.brochure-section-body {
    padding: 14px;
    background: #fff;
}

/* --- Two-Column Layout (Overview) --- */
.two-column-layout {
    display: grid;
    grid-template-columns: 100mm 1fr;
    gap: 5mm;
    align-items: start;
}

.two-column-layout .col-text {
    min-height: 80px;
    font-size: 9pt;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

.two-column-layout .col-text .ql-container {
    min-height: 80px;
    font-size: 9pt;
}

.two-column-layout .col-image {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 60px;
    overflow: hidden;
}

.brochure-product-img {
    max-width: 65mm;
    max-height: 60mm;
    object-fit: contain;
}

.two-column-layout .image-placeholder {
    text-align: center;
    color: #adb5bd;
    padding: 20px;
}

.two-column-layout .image-placeholder i {
    font-size: 36px;
    display: block;
    margin-bottom: 4px;
}

/* --- Features List --- */
.brochure-features-list,
.brochure-standard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.brochure-features-list li,
.brochure-standard-list li {
    padding: 6px 10px 6px 28px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
    line-height: 1.5;
}

.brochure-features-list li:last-child,
.brochure-standard-list li:last-child {
    border-bottom: none;
}

.brochure-features-list li::before {
    content: '✓';
    position: absolute;
    left: 6px;
    color: var(--brand-color, #198754);
    font-weight: bold;
}

.brochure-standard-list li::before {
    content: '●';
    position: absolute;
    left: 8px;
    color: var(--brand-color, #0d6efd);
    font-size: 8px;
    top: 11px;
}

.brochure-features-list li[contenteditable]:hover,
.brochure-standard-list li[contenteditable]:hover {
    background-color: #f8f9fa;
}

.brochure-features-list li[contenteditable]:focus,
.brochure-standard-list li[contenteditable]:focus {
    background-color: #e8f4fd;
    outline: 1px solid #86b7fe;
    border-radius: 3px;
}

.brochure-features-list li.placeholder-item::before,
.brochure-standard-list li.placeholder-item::before {
    content: '';
}

/* Feature list controls */
.feature-list-controls {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #dee2e6;
}

/* --- Technical Data Table --- */
.brochure-tech-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.brochure-tech-table th {
    background: var(--brand-color, #343a40);
    color: #fff;
    padding: 8px 12px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.brochure-tech-table td {
    padding: 6px 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
}

.brochure-tech-table tr:nth-child(even) td {
    background-color: #f8f9fa;
}

.brochure-tech-table td:first-child {
    font-weight: 600;
    color: #495057;
    width: 40%;
    white-space: nowrap;
}

.brochure-tech-table td[contenteditable]:hover {
    background-color: #e8f4fd;
}

.brochure-tech-table td[contenteditable]:focus {
    outline: 2px solid var(--brand-color, #0d6efd);
    outline-offset: -2px;
}

.brochure-tech-table .tech-section-header td {
    background: #e9ecef;
    font-weight: 700;
    color: #212529;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 10px 12px 4px;
    border-bottom: 2px solid var(--brand-color, #343a40);
}

/* --- Components Accordion --- */
.brochure-components-accordion .component-item {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    margin-bottom: 6px;
    overflow: hidden;
}

.brochure-components-accordion .component-header {
    padding: 8px 12px;
    background: #f8f9fa;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brochure-components-accordion .component-header:hover {
    background: #e9ecef;
}

.brochure-components-accordion .component-header::after {
    content: '▸';
    transition: transform 0.2s;
}

.brochure-components-accordion .component-item.open .component-header::after {
    transform: rotate(90deg);
}

.brochure-components-accordion .component-body {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    display: none;
    border-top: 1px solid #e9ecef;
}

.brochure-components-accordion .component-item.open .component-body {
    display: block;
}

.brochure-components-accordion .component-body[contenteditable]:focus {
    outline: 1px solid #86b7fe;
    background-color: #f0f7ff;
}

/* --- Technologies List --- */
.brochure-technologies-list .tech-item {
    padding: 8px 12px;
    border-left: 3px solid var(--brand-color, #0d6efd);
    margin-bottom: 8px;
    background: #fafbfc;
    border-radius: 0 6px 6px 0;
}

.brochure-technologies-list .tech-item-title {
    font-weight: 700;
    font-size: 13px;
    color: #212529;
    margin-bottom: 4px;
}

.brochure-technologies-list .tech-item-desc {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.5;
}

.brochure-technologies-list .tech-item-desc[contenteditable]:focus {
    outline: 1px solid #86b7fe;
    background-color: #f0f7ff;
}

/* --- Application Photos Grid --- */
.brochure-photos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.photo-upload-slot {
    aspect-ratio: 4/3;
    border: 2px dashed #ced4da;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #adb5bd;
    transition: all 0.2s;
    background: #fafbfc;
}

.photo-upload-slot:hover {
    border-color: var(--brand-color, #0d6efd);
    color: var(--brand-color, #0d6efd);
    background: #f0f4ff;
}

.photo-upload-slot i {
    font-size: 28px;
    margin-bottom: 4px;
}

.photo-upload-slot small {
    font-size: 11px;
}

/* --- Brochure Section - Brand Color Accents --- */
.brochure-page[data-manufacturer="Reisopack"] {
    --brand-color: rgb(255, 204, 0);
}

.brochure-page[data-manufacturer="Mosca"] {
    --brand-color: rgb(16, 6, 159);
}

.brochure-page[data-manufacturer="Movitec"] {
    --brand-color: rgb(204, 0, 0);
}

.brochure-page[data-manufacturer="Reisopack"] .brochure-section-header .form-check-input:checked {
    background-color: rgb(255, 204, 0);
    border-color: rgb(230, 184, 0);
}

.brochure-page[data-manufacturer="Mosca"] .brochure-section-header .form-check-input:checked {
    background-color: rgb(16, 6, 159);
    border-color: rgb(16, 6, 159);
}

.brochure-page[data-manufacturer="Movitec"] .brochure-section-header .form-check-input:checked {
    background-color: rgb(204, 0, 0);
    border-color: rgb(180, 0, 0);
}

/* ==================== END BROCHURE SECTIONS ==================== */

/* --- Brochure Color Selector --- */
.brochure-color-selector .btn-group .btn {
    font-size: 11px;
    padding: 3px 10px;
}

.brochure-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* --- Page Order Sortable --- */
.page-order-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    cursor: grab;
    transition: background 0.15s, transform 0.15s;
    user-select: none;
}

.page-order-item:last-child {
    border-bottom: none;
}

.page-order-item:hover {
    background: #f0f4ff;
}

.page-order-item.dragging {
    opacity: 0.4;
    background: #e3e8f0;
}

.page-order-item.drag-over {
    border-top: 2px solid var(--brand-color, #0d6efd);
    padding-top: 4px;
}

.page-order-handle {
    color: #bbb;
    font-size: 16px;
    margin-right: 6px;
    cursor: grab;
}

.page-order-item:hover .page-order-handle {
    color: #666;
}

.page-order-number {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dee2e6;
    color: #495057;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
    margin-right: 6px;
    flex-shrink: 0;
}

.page-order-toggle {
    flex: 1;
    margin-bottom: 0;
}

.page-order-toggle .form-check-label {
    font-size: 12px;
}

.page-order-arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: 4px;
}

.page-order-btn {
    border: none;
    background: none;
    padding: 0 4px;
    font-size: 11px;
    color: #999;
    line-height: 1;
    cursor: pointer;
}

.page-order-btn:hover {
    color: var(--brand-color, #0d6efd);
}

/* --- Brochure Style Page Section --- */
.brochure-stylepage-section .brochure-section-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}

.brochure-stylepage-section .brochure-section-header .form-check-label {
    color: #fff !important;
    text-transform: none;
}

.brochure-stylepage-section .brochure-section-header .form-check-input:checked {
    background-color: #00d4aa;
    border-color: #00d4aa;
}

/* Slot Row: 3 drop targets */
.brochure-slots-row {
    display: flex;
    gap: 10px;
}

.brochure-slot {
    flex: 1;
    min-height: 100px;
    border: 2px dashed #ced4da;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}

.brochure-slot.slot-active {
    border-color: var(--brand-color, #0d6efd);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.brochure-slot-label {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 1px 6px;
    border-radius: 3px;
    z-index: 2;
}

.brochure-slot-preview {
    width: 100%;
    height: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brochure-slot-preview img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
}

.brochure-slot-empty {
    text-align: center;
    color: #adb5bd;
    cursor: pointer;
    padding: 20px 10px;
    width: 100%;
}

.brochure-slot-empty:hover {
    color: var(--brand-color, #0d6efd);
    background: rgba(13, 110, 253, 0.04);
}

.brochure-slot-clear {
    position: absolute;
    top: 3px;
    right: 5px;
    background: rgba(220, 53, 69, 0.85);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    padding: 0;
}

.brochure-slot-clear:hover {
    background: #dc3545;
}

/* Image Gallery: scrollable grid of available images */
.brochure-image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.brochure-gallery-thumb {
    width: 110px;
    height: 85px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.2s;
    flex-shrink: 0;
}

.brochure-gallery-thumb:hover {
    border-color: var(--brand-color, #0d6efd);
    transform: scale(1.03);
}

.brochure-gallery-thumb.selected {
    border-color: #198754;
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.3);
}

.brochure-gallery-thumb img {
    width: 100%;
    height: 65px;
    object-fit: cover;
    display: block;
}

.brochure-gallery-name {
    font-size: 9px;
    text-align: center;
    padding: 2px 3px;
    background: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;
}

.brochure-gallery-check {
    position: absolute;
    top: 3px;
    right: 3px;
    color: #198754;
    font-size: 16px;
    display: none;
    text-shadow: 0 0 3px #fff;
}

.brochure-gallery-thumb.selected .brochure-gallery-check {
    display: block;
}

.brochure-callout-field {
    font-size: 12px;
}

/* ==================== END BROCHURE STYLE PAGE ==================== */
/* ── VAT input styling ── */
#vatPercentageInput {
    width: 35px; font-size: 8pt;
    border: 1px dashed #999; text-align: center;
    background: #fff; border-radius: 2px;
    cursor: text; vertical-align: middle;
    pointer-events: auto !important;
}
#vatPercentageInput:hover { border-color: #0d6efd; }
#vatPercentageInput:focus { border-color: #0d6efd; outline: none; border-style: solid; }
#vatPercentageInput::-webkit-inner-spin-button,
#vatPercentageInput::-webkit-outer-spin-button { -webkit-appearance: none; }
#vatPercentageInput[type=number] { -moz-appearance: textfield; }

/* ── Print/screen visibility ── */
@media print {
    #vatScreenRow { display: none !important; }
    #vatPrintRow  { display: flex !important; }
}
@media screen {
    #vatPrintRow  { display: none !important; }
    /* Footer is purely visual on screen – must not block clicks on inputs */
    .pdf-footer, .pdf-footer-minimal { pointer-events: none; }
}
/* Save option cards hover effect */
.save-option-card { transition: transform 0.15s, box-shadow 0.15s; }
.save-option-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; }


/* ===== source: visual_editor_products.css ===== */
/* ========================================
   TEMPLATE BUILDER PRODUCTS - CSS v2
   Optimiert für bessere Benutzerführung
   ======================================== */

/* ========================================
   MODAL STYLING
   ======================================== */

   .modal-header.bg-primary {
    background: linear-gradient(135deg, #0d6efd, #0056b3) !important;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}

.modal-header.bg-success {
    background: linear-gradient(135deg, #198754, #146c43) !important;
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
}

.modal-body {
    background: #f9f9f9;
}

/* ========================================
   LIST GROUP STYLING
   ======================================== */

.list-group-item {
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 8px;
}

.list-group-item:hover {
    border-left-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.08);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
}

.list-group-item.active {
    border-left-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.12);
    color: #0056b3;
}

/* ========================================
   FORM CONTROLS
   ======================================== */

.form-check-input {
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.3em;
    border: 2px solid #dee2e6;
    transition: all 0.2s ease;
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-check-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
    margin-left: 8px;
}

/* ========================================
   INPUT FIELDS IN MODAL
   ======================================== */

.modal-body .form-control,
.modal-body .form-select {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

/* ========================================
   MODAL BUTTONS
   ======================================== */

.modal-footer .btn {
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-footer .btn-primary,
.modal-footer .btn-success {
    background: linear-gradient(135deg, #0d6efd, #0056b3);
    border: none;
}

.modal-footer .btn-primary:hover,
.modal-footer .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.modal-footer .btn-secondary {
    background: #6c757d;
    border: none;
}

.modal-footer .btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

/* Configuration Card */
.card.bg-light {
    border: 1px solid rgba(13, 110, 253, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-body h6 {
    color: #0056b3;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* ========================================
   PRICE DISPLAY
   ======================================== */

.price-summary {
    padding: 12px;
    border-radius: 6px;
    font-size: 0.95em;
    line-height: 1.6;
    background: linear-gradient(135deg, #e7f5ff, #f0f7ff);
    border: 1px solid rgba(13, 110, 253, 0.2);
}

.price-summary strong {
    color: #0056b3;
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

.template-builder .toast-container {
    z-index: 9999;
}

.toast {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    min-width: 300px;
}

.toast.bg-success {
    background: linear-gradient(135deg, #198754, #146c43) !important;
}

.toast.bg-danger {
    background: linear-gradient(135deg, #dc3545, #bb2d3b) !important;
}

.toast.bg-info {
    background: linear-gradient(135deg, #0dcaf0, #0ba3cc) !important;
}

.toast-body {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ========================================
   SCROLLABLE LISTS
   ======================================== */

#variantsList {
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

#variantsList::-webkit-scrollbar {
    width: 6px;
}

#variantsList::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

#variantsList::-webkit-scrollbar-thumb {
    background: #0d6efd;
    border-radius: 3px;
    transition: all 0.2s ease;
}

#variantsList::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

/* Firefox Scrollbar */
#variantsList {
    scrollbar-color: #0d6efd #f1f1f1;
    scrollbar-width: thin;
}

/* ========================================
   FORM LABELS
   ======================================== */

.modal-body .form-label {
    color: #333;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

.modal-body .form-label.small {
    font-size: 0.875rem;
}

/* ========================================
   INPUT GROUPS
   ======================================== */

.modal-body .input-group {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.modal-body .input-group:focus-within {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.modal-body .input-group-text {
    background: #f8f9fa;
    border: none;
    color: #0d6efd;
    font-weight: 600;
}

/* ========================================
   MODAL ANIMATION
   ======================================== */

.modal.fade .modal-dialog {
    transition: all 0.3s ease;
}

.modal.show .modal-dialog {
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
    }

    .modal-body .row {
        flex-direction: column;
    }

    .card.bg-light {
        margin-top: 15px;
    }

    .list-group-item {
        padding: 10px;
        font-size: 0.9em;
    }

    .list-group-item strong {
        font-size: 0.95em;
    }

    .list-group-item small {
        font-size: 0.8em;
    }

    .modal-body .form-control,
    .modal-body .form-select {
        font-size: 1rem;
    }

    .template-builder .btn-group {
        flex-direction: column;
    }

    .template-builder .btn-group .btn {
        width: 100%;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .toast {
        min-width: 90vw;
        margin: 10px auto;
    }

    .modal .modal-content {
        border-radius: 8px;
    }

    .list-group-item {
        padding: 8px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-muted {
    color: #6c757d !important;
}

.text-primary {
    color: #0d6efd !important;
}

.text-success {
    color: #198754 !important;
}

.text-danger {
    color: #dc3545 !important;
}

/* ========================================
   ICON STYLING
   ======================================== */

.bi {
    display: inline-block;
    margin-right: 6px;
}

.modal-header .bi {
    font-size: 1.2em;
}

/* ========================================
   FORM GROUP SPACING
   ======================================== */

.form-group {
    margin-bottom: 15px;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* ========================================
   LOADING STATE
   ======================================== */

.template-builder .btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ========================================
   FOCUS MANAGEMENT
   ======================================== */

.template-builder *:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.template-builder button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* ========================================
   BROCHURE LANGUAGE TOGGLE
   ======================================== */

/* Standalone brochure page (in banner) */
.brochure-standalone-page .brochure-lang-toggle .brochure-lang-btn {
    font-size: 7pt !important;
    padding: 1px 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.3);
    color: inherit;
    transition: all 0.2s ease;
    line-height: 1.4;
}

.brochure-standalone-page .brochure-lang-toggle .brochure-lang-btn:hover {
    background: rgba(255, 255, 255, 0.6);
}

.brochure-standalone-page .brochure-lang-toggle .brochure-lang-btn.active {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #333 !important;
    font-weight: bold !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Product detail page toggle */
.brochure-page .brochure-lang-toggle .brochure-lang-btn {
    transition: all 0.2s ease;
}

.brochure-page .brochure-lang-toggle .brochure-lang-btn.active {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
    font-weight: bold !important;
}

.brochure-page .brochure-lang-toggle .brochure-lang-btn:not(.active):hover {
    background: #e9ecef;
}

/* Editable banner fields */
.brochure-banner-title,
.brochure-banner-subtitle {
    outline: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.2s ease;
    cursor: text;
}

.brochure-banner-title:hover,
.brochure-banner-subtitle:hover {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.brochure-banner-title:focus,
.brochure-banner-subtitle:focus {
    border-bottom-color: rgba(255, 255, 255, 0.7);
}

/* ========================================
   DELETE ITEM BUTTON
   ======================================== */

.delete-item-btn,
.edit-options-btn {
    opacity: 0.4;
    transition: all 0.2s ease;
}

.delete-item-btn:hover,
.edit-options-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

tr:hover .delete-item-btn,
tr:hover .edit-options-btn {
    opacity: 0.8;
}

/* Edit Options Modal */
#editOptionsModal .list-group-item {
    transition: background-color 0.15s ease;
    cursor: pointer;
}

#editOptionsModal .list-group-item:hover {
    background-color: #f0f4ff;
}

#editOptionsModal .form-check-input:checked + .form-check-label strong {
    color: #0d6efd;
}

/* Add Option buttons on options page */
.add-option-buttons-bar .btn {
    transition: all 0.2s ease;
}

.add-option-buttons-bar .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Options placeholder (when no options exist yet) */
.add-options-placeholder {
    border: 2px dashed #dee2e6 !important;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.01) 10px,
        rgba(0, 0, 0, 0.01) 20px
    );
}

.add-options-placeholder:hover {
    border-color: #0d6efd !important;
    background: #f8f9ff;
}

/* Compatible option modal checkboxes */
#addCompatibleOptionModal .list-group-item {
    transition: background-color 0.15s ease;
    cursor: pointer;
}

#addCompatibleOptionModal .list-group-item:hover {
    background-color: #f0f4ff;
}

/* Custom option modal */
#addCustomOptionModal .form-control:focus {
    border-color: #6c757d;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

/* Hide delete column in print */
@media print {
    .no-print {
        display: none !important;
    }
}

/* ========================================
   ITEM DELETE BUTTONS (features, components, tech items, tech rows)
   ======================================== */

/* Delete button on feature list items */
li[contenteditable] {
    position: relative;
}

li[contenteditable] .item-delete-btn {
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    color: #dc3545;
    cursor: pointer;
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.15s ease;
    z-index: 5;
    user-select: none;
    -webkit-user-select: none;
}

li[contenteditable]:hover .item-delete-btn {
    opacity: 0.6;
}

li[contenteditable] .item-delete-btn:hover {
    opacity: 1 !important;
    background: #dc3545;
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* Delete button on component headers */
.component-header .item-delete-btn {
    float: right;
    opacity: 0;
    color: #dc3545;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.component-header:hover .item-delete-btn {
    opacity: 0.6;
}

.component-header .item-delete-btn:hover {
    opacity: 1 !important;
    background: #dc3545;
    color: #fff;
}

/* Delete button on technology items */
.tech-item-title .item-delete-btn {
    float: right;
    opacity: 0;
    color: #dc3545;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.tech-item-title:hover .item-delete-btn,
.tech-item:hover .tech-item-title .item-delete-btn {
    opacity: 0.6;
}

.tech-item-title .item-delete-btn:hover {
    opacity: 1 !important;
    background: #dc3545;
    color: #fff;
}

/* Delete button on tech data table rows */
.tech-row-delete {
    width: 24px !important;
    padding: 2px !important;
    text-align: center;
    vertical-align: middle;
}

.tech-row-delete .item-delete-btn {
    opacity: 0;
    color: #dc3545;
    cursor: pointer;
    font-size: 9px;
    transition: all 0.15s ease;
}

tr:hover .tech-row-delete .item-delete-btn {
    opacity: 0.5;
}

.tech-row-delete .item-delete-btn:hover {
    opacity: 1 !important;
    color: #fff;
    background: #dc3545;
    border-radius: 3px;
    padding: 1px 3px;
}

/* Delete button on tech section headers */
.tech-section-header .item-delete-btn {
    float: right;
    opacity: 0;
    color: #dc3545;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.tech-section-header:hover .item-delete-btn {
    opacity: 0.6;
}

.tech-section-header .item-delete-btn:hover {
    opacity: 1 !important;
    background: #dc3545;
    color: #fff;
}

/* Per-section add row button */
.tech-section-add-row td {
    background: transparent !important;
    border-bottom: none !important;
}

.tech-section-add-btn {
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

.tech-section-add-row:hover .tech-section-add-btn,
.tech-section-add-btn:hover {
    opacity: 0.8 !important;
}

/* ========================================
   CLICKABLE LOGOS
   ======================================== */

.clickable-logo {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 2px;
}

.clickable-logo:hover {
    border-color: rgba(13, 110, 253, 0.4);
    box-shadow: 0 0 8px rgba(13, 110, 253, 0.2);
    opacity: 0.85;
}

/* ========================================
   PRINT: HIDE ALL DELETE BUTTONS
   ======================================== */

@media print {

    .item-delete-btn,
    .tech-row-delete,
    .feature-list-controls,
    .clickable-logo {
        cursor: default !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }
}

/* ========================================
   SECTION LABELS: Don't overlap logos
   ======================================== */

/* On official pages with header logos, move label above page */
.pdf-official-page>.section-label {
    top: -10px !important;
    right: 10px !important;
    z-index: 15;
}

/* On cover page, move label above page */
.pdf-cover>.section-label {
    top: -10px !important;
    right: 10px !important;
    z-index: 15;
}

/* On product/brochure pages, ensure label doesn't cover content */
.brochure-page>.section-label,
.brochure-standalone-page>.section-label {
    top: -10px !important;
    right: auto !important;
    left: 10px !important;
}

/* Header logo: keep original absolute positioning, just add z-index */
.pdf-header .pdf-header-logo {
    z-index: 8;
    max-height: 9mm;
    width: auto;
    max-width: 40mm;
    object-fit: contain;
}

/* Cover page logo: constrain height */
.pdf-cover-logo img {
    max-height: 15mm;
    width: auto;
    max-width: 50mm;
    object-fit: contain;
}

/* Ensure page-header-logos are visible and clickable */
.page-header-logo {
    transition: opacity 0.2s ease;
}

.page-header-logo:hover {
    opacity: 0.75;
    cursor: pointer;
}