/* VPL - Vendor Product Lists - Divi-ready */

.vpl-manager {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;
    margin: 30px 0;
    max-width: 1400px;
}

.vpl-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.vpl-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.vpl-section-title,
.vpl-list-title {
    margin: 0 0 18px 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: #1f2937;
}

.vpl-list-title {
    margin-bottom: 8px;
}

.vpl-muted {
    color: #6b7280;
}

.vpl-list-nav a {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 8px;
    background: #f8fafc;
    color: #374151;
    transition: 0.2s;
}

.vpl-list-nav a:hover {
    background: #f1f5f9;
}

.vpl-list-nav a.is-active {
    background: #111827;
    color: #fff;
}

.vpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px;
}

.vpl-product-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 14px;
}

.vpl-product-card h4,
.vpl-card h3 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

.vpl-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vpl-actions form,
.vpl-list-actions form {
    margin: 0;
}

.vpl-btn,
.vpl-button,
.vpl-actions .button {
    width: 100%;
    padding: 12px;
    font-size: 0.98rem;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

.vpl-btn-view,
.vpl-button {
    background: #f3f4f6;
    color: #111827 !important;
}

.vpl-btn-add,
.vpl-btn-create {
    background: #111827 !important;
    color: #ffffff !important;
}

.vpl-btn-remove {
    background: #e5e7eb !important;
    color: #111827 !important;
}

/* .vpl-btn-copy / .vpl-copy-link (Link-kopieren-Icon) wird in
   divi-child/style.css gestylt — hier bewusst KEINE Regel mehr,
   damit das !important nicht das Icon + den weissen BG ueberschreibt. */

/* "Liste kopieren"-Button (inline-style raus aus dem PHP).
   .vpl-header-actions + 2 Klassen = (0,3,0) > WC button.button (0,2,1),
   ganz ohne !important. .is-copied = gruener Erfolgs-State (per JS). */
.vpl-header-actions .vpl-btn.vpl-copy-list-btn {
    background: #ffffff;
    color: #1d2327;
    border: 1px solid #8c8f94;
}

.vpl-header-actions .vpl-btn.vpl-copy-list-btn.is-copied {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
}

/* "Liste loeschen" — von !important auf (0,3,0) umgestellt. */
.vpl-btn.vpl-btn-delete.vpl-delete-btn {
    background: #ef4444;
    color: #ffffff;
}


/* === Manager-Produktkarten: Icon-Buttons (ansehen / hinzufuegen / entfernen) ===
   Frische Klassen, kein !important. Actions als Icon-Reihe statt voller Balken.
   Icons als SVG-background, faerben pro State um. */
.vpl-manager-product-card .vpl-product-card-actions {
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.vpl-icon-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .2s, border-color .2s, opacity .2s;
}

.vpl-icon-btn:disabled {
    cursor: default;
}

.vpl-icon-btn.is-loading {
    opacity: .5;
    pointer-events: none;
}

/* Ansehen (Auge) — Markup kommt aus VPL_Base, drum gescopt ueber die
   bestehende Klasse. (0,3,0) schlaegt die width:100%-Regeln ohne !important. */
.vpl-manager-product-card .vpl-product-card-actions .vpl-product-view-button {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    font-size: 0;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.vpl-manager-product-card .vpl-product-card-actions .vpl-product-view-button:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

/* Hinzufuegen (Plus) — dunkel/primaer */
.vpl-icon-add {
    background-color: #111827;
    border-color: #111827;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.vpl-icon-add:hover {
    background-color: #1f2937;
    border-color: #1f2937;
}

.vpl-icon-add.is-added {
    background-color: #16a34a;
    border-color: #16a34a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.vpl-icon-add.is-error {
    background-color: #fee2e2;
    border-color: #dc2626;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

/* Entfernen (Minus, rot) */
.vpl-icon-remove {
    background-color: #ffffff;
    border-color: #fecaca;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.vpl-icon-remove:hover {
    background-color: #fef2f2;
    border-color: #dc2626;
}

.vpl-list-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 16px;
}

.vpl-list-actions {
    display: flex;
    gap: 12px;
}

.vpl-create-form {
    margin-bottom: 18px;
}

.vpl-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.vpl-section-spacing {
    margin-bottom: 24px;
}

.vpl-wrap {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.vpl-list h1 {
    margin-bottom: 20px;
}

.vpl-card .added_to_cart {
    display: inline-block;
    margin-left: 8px;
}

.vpl-add-to-list-box {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}

@media (max-width: 992px) {
    .vpl-manager {
        grid-template-columns: 1fr;
    }

    .vpl-list-actions {
        width: 100%;
    }
}


.vpl-cart-corner {
    position: fixed;
    top: 45px;
    right: 20px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff !important;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.vpl-cart-corner-text {
    line-height: 1;
}

.vpl-cart-count {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 767px) {
    .vpl-cart-corner {
        top: 14px;
        right: 14px;
        padding: 10px 14px;
    }
}


body.vpl-modal-open {
    overflow: hidden;
}

.vpl-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 10050;
}

.vpl-modal.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vpl-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.65);
}

.vpl-modal-dialog {
    position: relative;
    width: min(920px, calc(100% - 32px));
    margin: 5vh auto;
    max-height: 90vh;
    overflow: auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.24);
    padding: 28px;
    margin: 0;
}

.vpl-modal-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 28px;
}

.vpl-modal-media img,
.vpl-modal-image-placeholder {
    width: 100%;
    border-radius: 16px;
}

.vpl-modal-image-placeholder {
    min-height: 280px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.vpl-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
}

.vpl-modal-title {
    margin: 0 0 10px;
    font-size: 1.7rem;
    color: #111827;
}


.vpl-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.vpl-modal-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 0.92rem;
    font-weight: 600;
}

.vpl-modal-description {
    color: #374151;
}

.vpl-modal-description p:first-child {
    margin-top: 0;
}

.vpl-modal-actions {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .vpl-modal-dialog {
        width: calc(100% - 20px);
        margin: 10px auto;
        padding: 20px;
    }

    .vpl-modal-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


.vpl-share-link {
    margin: 0;
}

.vpl-share-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.vpl-share-link-row a {
    word-break: break-all;
}

.vpl-share-link-row .vpl-copy-link {
    width: auto;
    white-space: nowrap;
    flex: 0 0 auto;
}


/* More granular editing hooks */
.vpl-manager-layout {}
.vpl-sidebar-panel {}
.vpl-sidebar-title {}
.vpl-create-list-form {}
.vpl-list-navigation {}
.vpl-manager-content {}
.vpl-list-header-panel {}
.vpl-list-header-row {}
.vpl-list-heading-group {}
.vpl-current-list-title {}
.vpl-share-box {}
.vpl-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.vpl-share-actions a {
    word-break: break-all;
}
.vpl-header-actions {}
.vpl-selected-products-panel {}
.vpl-other-products-panel {}
.vpl-products-grid {}
.vpl-products-grid-other {}
.vpl-manager-product-card {}
.vpl-shared-product-card {}
.vpl-product-card-media {
    margin-bottom: 14px;
}
.vpl-product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.vpl-product-card-title {}

.vpl-product-card-actions {}
.vpl-product-card-cart {}
.vpl-product-card-view {}
.vpl-product-view-button {}
.vpl-shared-list {}
.vpl-shared-list-header {
    margin-bottom: 24px;
}
.vpl-list-header-block {}
.vpl-list-page-title {
    margin: 0 0 12px;
}
.vpl-list-vendor {
    margin: 0 0 16px;
}
.vpl-label {}
.vpl-label-vendor {}
.vpl-vendor-name {}
.vpl-list-top-actions {
    margin-top: 8px;
}
.vpl-home-button {
    max-width: 220px;
}
.vpl-empty-state {}
.vpl-shared-products-grid {}
.vpl-shared-product-media {}
.vpl-shared-product-body {}
.vpl-shared-product-title {}

.vpl-shared-product-actions {}
.vpl-btn-cart {}
.vpl-product-modal {}
.vpl-product-modal-dialog {}
.vpl-product-modal-grid {}
.vpl-product-modal-media {}
.vpl-product-modal-content {}
.vpl-product-modal-meta {}
.vpl-product-modal-description {}
.vpl-product-modal-actions {}

.vpl-share-link-row .vpl-btn,
.vpl-header-actions .vpl-btn {
    width: auto;
}

.vpl-product-card-actions .vpl-btn,
.vpl-product-card-actions .button,
.vpl-shared-product-actions .vpl-btn,
.vpl-shared-product-actions .button {
    width: 100%;
}

@media (max-width: 767px) {
    .vpl-share-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vpl-home-button {
        max-width: none;
    }
}

/* Language switcher */
.vpl-lang-switch {
    position: fixed;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
    font-size: 0.9rem;
    font-weight: 600;
}

.vpl-lang-link {
    text-decoration: none;
    color: #6b7280;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    transition: 0.15s;
}

.vpl-lang-link:hover {
    color: #111827;
    background: #f3f4f6;
}

.vpl-lang-link.vpl-lang-active {
    color: #ffffff !important;
    background: #111827;
}

.vpl-lang-sep {
    color: #d1d5db;
    font-weight: 400;
}

.woocommerce .vpl-lang-switch,
.woocommerce-cart .vpl-lang-switch,
.woocommerce-checkout .vpl-lang-switch {
    position: fixed;
    top: 90px;            /* clears the admin bar + Divi header */
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    float: none;
    margin: 0;
    width: fit-content;
    z-index: 9999;
}

/* ===== DARK MODE ===== */
body.dark-mode { background:#1a1a1a; color:#e0e0e0; }

body.dark-mode #page-container,
body.dark-mode #main-content,
body.dark-mode .et_builder_inner_content,
body.dark-mode .et_pb_section,
body.dark-mode .et_pb_row,
body.dark-mode .et_pb_column,
body.dark-mode .entry-content { background:#1a1a1a; }

/* surfaces */
body.dark-mode .vpl-panel,
body.dark-mode .vpl-card,
body.dark-mode .vpl-add-to-list-box { background:#2a2a2a; border-color:#444; }

/* headings / labels */
body.dark-mode .vpl-section-title,
body.dark-mode .vpl-list-title,
body.dark-mode .vpl-list-page-title,
body.dark-mode .vpl-current-list-title,
body.dark-mode .vpl-product-card-title,
body.dark-mode .vpl-shared-product-title,
body.dark-mode .vpl-product-card h4,
body.dark-mode .vpl-card h3,
body.dark-mode .vpl-modal-title,
body.dark-mode .vpl-list-header-panel label,
body.dark-mode .vpl-list-header-panel strong,
body.dark-mode .vpl-list h1 { color:#e0e0e0; }

body.dark-mode .vpl-muted,
body.dark-mode .vpl-list-vendor,
body.dark-mode .vpl-list-event-meta p,
body.dark-mode .vpl-vendor-name,
body.dark-mode .vpl-label,
body.dark-mode .vpl-empty-state,
body.dark-mode .vpl-modal-description { color:#aaa; }

/* woo cart / checkout */
body.dark-mode .woocommerce h1,
body.dark-mode .woocommerce h2,
body.dark-mode .woocommerce h3,
body.dark-mode #order_review_heading,
body.dark-mode .cart_totals h2 { color:#e0e0e0; }
body.dark-mode .woocommerce table.shop_table,
body.dark-mode .woocommerce table.shop_table th,
body.dark-mode .woocommerce table.shop_table td { border-color:#444; color:#e0e0e0; }

/* inputs */
body.dark-mode .vpl-input,
body.dark-mode .vpl-list-header-panel input[type="text"],
body.dark-mode .vpl-list-header-panel input[type="date"] { background:#333; color:#e0e0e0; border-color:#555; }

/* list nav */
body.dark-mode .vpl-list-nav a { background:#333; color:#e0e0e0; }
body.dark-mode .vpl-list-nav a:hover { background:#3d3d3d; }
body.dark-mode .vpl-list-nav a.is-active { background:#c5a985; color:#1a1a1a; }

/* manager icon buttons — darken + relight the icons */
body.dark-mode .vpl-icon-btn,
body.dark-mode .vpl-manager-product-card .vpl-product-card-actions .vpl-product-view-button { background-color:#2a2a2a; border-color:#555; }
body.dark-mode .vpl-icon-btn:hover,
body.dark-mode .vpl-manager-product-card .vpl-product-card-actions .vpl-product-view-button:hover { background-color:#333; border-color:#777; }
body.dark-mode .vpl-manager-product-card .vpl-product-card-actions .vpl-product-view-button {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
body.dark-mode .vpl-icon-add { background-color:#c5a985; border-color:#c5a985; }
body.dark-mode .vpl-icon-add:hover { background-color:#d4b896; border-color:#d4b896; }
body.dark-mode .vpl-icon-add.is-added { background-color:#16a34a; border-color:#16a34a; }
body.dark-mode .vpl-icon-remove { background-color:#2a2a2a; border-color:#7a3a3a; }
body.dark-mode .vpl-icon-remove:hover { background-color:#3a2222; border-color:#dc2626; }

/* cart corner */
body.dark-mode .vpl-cart-corner { background:#c5a985; color:#1a1a1a; }
body.dark-mode .vpl-cart-count { background:#1a1a1a; color:#c5a985; }

/* modal — this beats BOTH base rules (.vpl-modal-dialog and .vpl-modal.is-open .vpl-modal-dialog) */
body.dark-mode .vpl-modal.is-open .vpl-modal-dialog,
body.dark-mode .vpl-modal-dialog { background:#2a2a2a; }
body.dark-mode .vpl-modal-backdrop { background:rgba(0,0,0,0.75); }
body.dark-mode .vpl-modal-close { background:#333; color:#e0e0e0; }
body.dark-mode .vpl-modal-badge { background:#1f1f1f; color:#c5a985; }
body.dark-mode .vpl-modal-image-placeholder { background:#2a2a2a; color:#aaa; }

/* lang switcher */
body.dark-mode .vpl-lang-switch { background:#2a2a2a; border-color:#444; }
body.dark-mode .vpl-lang-link { color:#aaa; }
body.dark-mode .vpl-lang-link:hover { color:#e0e0e0; background:#333; }
body.dark-mode .vpl-lang-link.vpl-lang-active { background:#c5a985; color:#1a1a1a; }
body.dark-mode .vpl-lang-sep { color:#555; }

/* ===== COPY-LINK ICON ===== */
button.vpl-copy-icon-btn.vpl-copy-link {
    width:40px; height:40px; flex:0 0 auto; padding:0;
    border-radius:8px; border:1px solid #d0d0d0;
    background-color:#fff; background-repeat:no-repeat; background-position:center;
    cursor:pointer; box-sizing:border-box; transition:background-color .2s,border-color .2s;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
button.vpl-copy-icon-btn.vpl-copy-link:hover { background-color:#f3f4f6; border-color:#b5b5b5; }
button.vpl-copy-icon-btn.vpl-copy-link.is-copied {
    background-color:#16a34a; border-color:#16a34a;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
body.dark-mode button.vpl-copy-icon-btn.vpl-copy-link {
    background-color:#333; border-color:#555;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
body.dark-mode button.vpl-copy-icon-btn.vpl-copy-link:hover { background-color:#3d3d3d; border-color:#777; }
body.dark-mode button.vpl-copy-icon-btn.vpl-copy-link.is-copied { background-color:#16a34a; border-color:#16a34a; }

/* ===== VARIANT PICKER (card style) ===== */
.vpl-modal-main-image { width:100%; border-radius:16px; object-fit:contain; background:#f3f4f6; }
.vpl-variation-picker { margin-top:8px; }
.vpl-variation-picker-label { margin:0 0 10px; font-weight:600; color:#111827; }
.vpl-variation-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.vpl-variation-card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px; border:2px solid #e5e7eb; border-radius:12px; background:#fff; cursor:pointer; text-align:center; transition:border-color .15s, box-shadow .15s; }
.vpl-variation-card:hover { border-color:#c5a985; }
.vpl-variation-card.is-selected { border-color:#111827; box-shadow:inset 0 0 0 1px #111827; }
.vpl-variation-card:disabled { opacity:.45; cursor:not-allowed; }
.vpl-variation-card-image { width:100%; height:90px; object-fit:contain; border-radius:8px; }
.vpl-variation-card-label { font-size:.85rem; font-weight:600; color:#1f2937; }
.vpl-variation-card-price { font-size:.8rem; color:#6b7280; }
.vpl-variation-added p { margin:0; font-weight:600; color:#16a34a; }

body.dark-mode .vpl-modal-main-image { background:#1f1f1f; }
body.dark-mode .vpl-variation-picker-label { color:#e0e0e0; }
body.dark-mode .vpl-variation-card { background:#2a2a2a; border-color:#444; }
body.dark-mode .vpl-variation-card.is-selected { border-color:#c5a985; box-shadow:inset 0 0 0 1px #c5a985; }
body.dark-mode .vpl-variation-card-label { color:#e0e0e0; }
body.dark-mode .vpl-variation-card-price { color:#aaa; }



/* ===== DARK MODE: Woo checkout / cart form fields ===== */
body.dark-mode .woocommerce form .form-row input.input-text,
body.dark-mode .woocommerce form .form-row textarea,
body.dark-mode .woocommerce input.input-text,
body.dark-mode .woocommerce textarea,
body.dark-mode .woocommerce-checkout input[type="text"],
body.dark-mode .woocommerce-checkout input[type="email"],
body.dark-mode .woocommerce-checkout input[type="tel"],
body.dark-mode .woocommerce-checkout input[type="password"],
body.dark-mode .woocommerce select,
body.dark-mode .woocommerce-checkout select {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}

body.dark-mode .woocommerce input.input-text::placeholder,
body.dark-mode .woocommerce textarea::placeholder {
    color: #8a8a8a;
}

/* select2 dropdowns (Country / Kanton) */
body.dark-mode .select2-container--default .select2-selection--single {
    background: #2a2a2a;
    border-color: #444;
}
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e0e0e0;
}
body.dark-mode .select2-dropdown {
    background: #2a2a2a;
    border-color: #444;
}
body.dark-mode .select2-results__option {
    color: #e0e0e0;
}
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #c5a985;
    color: #1a1a1a;
}
body.dark-mode .select2-search--dropdown .select2-search__field {
    background: #1f1f1f;
    color: #e0e0e0;
    border-color: #444;
}

/* Place-order / payment panel */
body.dark-mode .woocommerce #payment,
body.dark-mode .woocommerce-checkout #payment,
body.dark-mode .woocommerce-checkout-payment {
    background: #222;
    border-color: #444;
}

/* Order-notes textarea (target by ID to beat Divi's id rule) */
body.dark-mode #order_comments {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}
body.dark-mode #order_comments::placeholder { color: #8a8a8a; }

/* Place-order box */
body.dark-mode .woocommerce #payment,
body.dark-mode .woocommerce-checkout #payment,
body.dark-mode .woocommerce-checkout-payment,
body.dark-mode #order_review #payment {
    background: #222;
    border-color: #444;
}

/* Empty payment-info notice renders as a giant box over the order column
   and steals clicks from the notes field — let clicks pass through it */
body.woocommerce-checkout .wc_payment_methods .woocommerce-info {
    pointer-events: none;
}



/* "Additional information" heading sits outside .woocommerce — brighten directly */
body.dark-mode .woocommerce-additional-fields h3 {
    color: #e0e0e0;
}

body.dark-mode #payment,
body.dark-mode #payment.woocommerce-checkout-payment {
    background: #222;
    border-color: #444;
}

body.dark-mode #order_review #payment {
    background: #222;
    border-color: #444;
}

/* Save button stays greyed out until the list is actually edited */
.vpl-btn-save:disabled,
.vpl-btn-save.is-disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ===== MANAGER PRODUCT FILTER (search + category) ===== */
.vpl-product-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 4px 0 24px;
}
.vpl-product-search,
.vpl-product-cat-filter {
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.95rem;
    background-color: #fff;
    color: #111827;
    box-sizing: border-box;
}
.vpl-product-search {
    flex: 1 1 240px;
    min-width: 200px;
    padding-left: 40px;
    background-repeat: no-repeat;
    background-position: 13px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
.vpl-product-cat-filter {
    flex: 0 0 auto;
    cursor: pointer;
}
.vpl-product-search:focus,
.vpl-product-cat-filter:focus {
    outline: none;
    border-color: #111827;
}
.vpl-filter-empty {
    margin: 4px 0 12px;
}


body.dark-mode .vpl-product-search,
body.dark-mode .vpl-product-cat-filter {
    background-color: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}
body.dark-mode .vpl-product-search::placeholder {
    color: #8a8a8a;
}
body.dark-mode .vpl-product-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
body.dark-mode .vpl-product-search:focus,
body.dark-mode .vpl-product-cat-filter:focus {
    border-color: #c5a985;
}