/* CS Lumise top bar restyle: dark navy + smaller logo */

/* Keep Lumise's native bar height — only swap colors and shrink logo */
#lumise-navigations {
    background: linear-gradient(180deg, #0F1E2E 0%, #0B1626 100%) !important;
    border-bottom: 1px solid rgba(96, 165, 250, .18) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important;
}

#lumise-navigations a[data-view="logo"] {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    vertical-align: top !important;
}
#lumise-navigations a[data-view="logo"] img {
    max-height: 22px !important;
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 18px !important;
    filter: brightness(1.05);
}

#lumise-navigations ul[data-block="left"] li > span,
#lumise-navigations ul[data-block="right"] li > span,
#lumise-navigations li[data-tool] > span {
    color: #E5EAF2 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

#lumise-navigations li[data-tool]:hover > span,
#lumise-navigations li[data-tool].active > span {
    color: #64B5F6 !important;
}

#lumise-navigations li[data-view="sp"] {
    background: rgba(96, 165, 250, .15) !important;
}

/* Submenu dropdowns */
#lumise-navigations ul[data-view="sub"] {
    background: #0F1E2E !important;
    border: 1px solid rgba(96, 165, 250, .15) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55) !important;
}
#lumise-navigations ul[data-view="sub"] li > span,
#lumise-navigations ul[data-view="sub"] li {
    color: #E5EAF2 !important;
    line-height: normal !important;
    height: auto !important;
}
#lumise-navigations ul[data-view="sub"] li:hover {
    background: rgba(37, 99, 235, .15) !important;
}
#lumise-navigations ul[data-view="sub"] header h3 {
    color: #F3F6FA !important;
    border-bottom: 1px solid rgba(96, 165, 250, .15) !important;
}
#lumise-navigations ul[data-view="sub"] small {
    color: #9CA3AF !important;
}

/* Cart / add-to-cart button — keep brand blue */
#lumise-navigations [class*="cart"],
#lumise-navigations [class*="add-to-cart"],
.lumise-add-to-cart,
button[class*="cart"] {
    background: #2196f3 !important;
    color: #FFFFFF !important;
    border-color: #2196f3 !important;
    border-radius: 99px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-family: "Inter", system-ui, sans-serif !important;
}
#lumise-navigations [class*="cart"]:hover,
.lumise-add-to-cart:hover {
    background: #1D4ED8 !important;
}

#lumise-navigations ul[data-block="right"] li {
    color: #E5EAF2 !important;
}

#lumise-navigations li.disabled > span,
#lumise-navigations li[data-active="false"] > span {
    color: #6B7280 !important;
}

/* ==========================================================
   CS Lumise dark theme extensions
   Added rules only. Do not duplicate selectors above.
   ========================================================== */

/* ---------- 1. Left tools panel + tab body ---------- */
#lumise-workspace,
#lumise-main {
    background: #0B1626 !important;
}

.lumise-left-nav-wrp {
    background: #0F1E2E !important;
    border-right: 1px solid rgba(96, 165, 250, .15) !important;
}

ul.lumise-left-nav {
    background: #0F1E2E !important;
}

ul.lumise-left-nav > li {
    color: #E5EAF2 !important;
    border-bottom: 1px solid rgba(96, 165, 250, .08) !important;
    background: transparent !important;
}

ul.lumise-left-nav > li > i,
ul.lumise-left-nav > li [class*="lumisex-"],
ul.lumise-left-nav > li [class*="lumise-icon-"] {
    color: #64B5F6 !important;
}

ul.lumise-left-nav > li:hover {
    background: rgba(96, 165, 250, .08) !important;
}

ul.lumise-left-nav > li.active,
ul.lumise-left-nav > li[data-active="true"] {
    background: rgba(37, 99, 235, .18) !important;
    border-left: 3px solid #2196f3 !important;
}

ul.lumise-left-nav > li.active > i,
ul.lumise-left-nav > li.active [class*="lumisex-"],
ul.lumise-left-nav > li[data-active="true"] [class*="lumisex-"] {
    color: #93C5FD !important;
}

.lumise-tabs-nav {
    background: #0F1E2E !important;
    border-bottom: 1px solid rgba(96, 165, 250, .15) !important;
    color: #E5EAF2 !important;
}

.lumise-tabs-nav > li,
.lumise-tabs-nav li > span,
.lumise-tabs-nav li > a {
    color: #9CA3AF !important;
}

.lumise-tabs-nav li.active,
.lumise-tabs-nav li[data-active="true"] {
    color: #64B5F6 !important;
    border-bottom: 2px solid #2196f3 !important;
}

.lumise-tab-body-wrp,
.lumise-tab-body-wrp.smooth,
.lumise-tab-body-wrp.lumise-x-thumbn {
    background: #0B1626 !important;
    color: #E5EAF2 !important;
    scrollbar-color: #2196f3 #0F1E2E;
}

.lumise-tab-body-wrp h1,
.lumise-tab-body-wrp h2,
.lumise-tab-body-wrp h3,
.lumise-tab-body-wrp h4,
.lumise-tab-body-wrp label,
.lumise-tab-body-wrp .lumise-label,
.lumise-tab-body-wrp p,
.lumise-tab-body-wrp small {
    color: #E5EAF2 !important;
}

.lumise-tab-body-wrp ::-webkit-scrollbar { width: 8px; height: 8px; }
.lumise-tab-body-wrp ::-webkit-scrollbar-track { background: #0F1E2E; }
.lumise-tab-body-wrp ::-webkit-scrollbar-thumb { background: rgba(96,165,250,.3); border-radius: 4px; }
.lumise-tab-body-wrp ::-webkit-scrollbar-thumb:hover { background: rgba(96,165,250,.5); }

/* ---------- 2. Stage / canvas wash ---------- */
#lumise-main,
#lumise-stage-nav,
#lumise-zoom-wrp {
    background: #0B1626 !important;
}

#lumise-stage-nav {
    color: #E5EAF2 !important;
    border-top: 1px solid rgba(96, 165, 250, .15) !important;
}

#lumise-stage-nav a,
#lumise-stage-nav span,
#lumise-stage-nav i {
    color: #E5EAF2 !important;
}

#lumise-stage-nav a:hover,
#lumise-stage-nav i:hover {
    color: #64B5F6 !important;
}

#lumise-zoom-thumbn {
    background: #0F1E2E !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
}

/* ---------- 3. Buttons ---------- */
.lumise-btn-primary,
button.lumise-btn-primary {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    border-radius: 6px !important;
    transition: background .15s ease !important;
}
.lumise-btn-primary:hover,
button.lumise-btn-primary:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    color: #FFFFFF !important;
}

.lumise-btn,
button.lumise-btn {
    background-color: #1F2D40 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
    color: #E5EAF2 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    border-radius: 6px !important;
}
.lumise-btn:hover {
    background-color: #283851 !important;
    border-color: rgba(96, 165, 250, .45) !important;
    color: #FFFFFF !important;
}

.lumise-btn.gray,
.lumise-btn.white {
    background-color: #1F2D40 !important;
    color: #E5EAF2 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
}
.lumise-btn.gray:hover,
.lumise-btn.white:hover {
    background-color: #283851 !important;
    color: #FFFFFF !important;
}

/* Add-to-cart CTA in cart panel matches top bar cart button */
#lumise-cart-action .lumise-btn-primary,
#lumise-cart-action button,
.lumise-cart-options .lumise-btn-primary,
.lumise-cart-options button[type="submit"] {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #FFFFFF !important;
    border-radius: 99px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}
#lumise-cart-action .lumise-btn-primary:hover,
.lumise-cart-options .lumise-btn-primary:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}

/* ---------- 4. Loading / processing overlay ---------- */
#LumiseDesign[data-processing=true]:after {
    background: rgba(11, 22, 38, 0.92) !important;
}
#LumiseDesign[data-processing=true]:before {
    background-color: #0F1E2E !important;
    color: #E5EAF2 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .6) !important;
}
.lumise-loading {
    background-color: #0F1E2E !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
}

/* Pre-init wrapper: kill the white flash before Lumise paints */
#LumiseDesign,
#lumise-no-product {
    background: #0B1626 !important;
    color: #E5EAF2 !important;
}

/* ---------- 5. Right-side cart options panel ---------- */
#lumise-cart-wrp,
.lumise-cart-options,
#lumise-cart-options,
.lumise-cart-attributes,
#lumise-cart-attributes,
#lumise-cart-items {
    background: #0F1E2E !important;
    color: #E5EAF2 !important;
    border-left: 1px solid rgba(96, 165, 250, .15) !important;
}

.lumise-cart-option-label,
.lumise-cart-options label,
.lumise-cart-attributes label {
    color: #E5EAF2 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 500 !important;
}

.lumise-cart-options select,
.lumise-cart-options input[type="text"],
.lumise-cart-options input[type="number"],
.lumise-cart-options input[type="email"],
.lumise-cart-options textarea,
.lumise-cart-attributes select,
.lumise-cart-attributes input,
.lumise-tab-body-wrp select,
.lumise-tab-body-wrp input[type="text"],
.lumise-tab-body-wrp input[type="number"],
.lumise-tab-body-wrp input[type="search"],
.lumise-tab-body-wrp textarea {
    background: #0B1626 !important;
    color: #F3F6FA !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
    border-radius: 6px !important;
    font-family: "Inter", system-ui, sans-serif !important;
}
.lumise-cart-options select:focus,
.lumise-cart-options input:focus,
.lumise-cart-options textarea:focus,
.lumise-cart-attributes select:focus,
.lumise-cart-attributes input:focus,
.lumise-tab-body-wrp select:focus,
.lumise-tab-body-wrp input:focus,
.lumise-tab-body-wrp textarea:focus {
    outline: none !important;
    border-color: #64B5F6 !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .25) !important;
}

.lumise-price,
.lumise-product-price,
.lumise-price.lumise-product-price {
    color: #F3F6FA !important;
    font-weight: 700 !important;
}

/* ---------- 6. Color presets, prints, switches, toggles ---------- */
.lumise-color-presets,
#lumise-color-presets,
.lumise-prints {
    background: transparent !important;
}
.lumise-color-presets li,
#lumise-color-presets li {
    border: 1px solid rgba(96, 165, 250, .25) !important;
    box-shadow: 0 0 0 2px transparent !important;
}
.lumise-color-presets li.active,
#lumise-color-presets li.active {
    box-shadow: 0 0 0 2px #64B5F6 !important;
    border-color: #64B5F6 !important;
}
.lumise-save-color {
    background-color: #1F2D40 !important;
    color: #64B5F6 !important;
    border: 1px dashed rgba(96, 165, 250, .35) !important;
}

/* Switches and toggles */
.lumise-switch,
.lumise-switch.mr2 {
    background-color: #1F2D40 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
    color: #9CA3AF !important;
    border-radius: 6px !important;
}
.lumise-switch > * {
    color: #9CA3AF !important;
}
.lumise-switch .active,
.lumise-switch [data-active="true"],
.lumise-switch > .selected {
    background: #2196f3 !important;
    color: #FFFFFF !important;
}

.lumise-toggle-button {
    background-color: #1F2D40 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
}
.lumise-toggle-button.active,
.lumise-toggle-button[data-active="true"] {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
}
.lumise-toggle-handle {
    background: #E5EAF2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5) !important;
}
.lumise-toggle-button.active .lumise-toggle-handle,
.lumise-toggle-button[data-active="true"] .lumise-toggle-handle {
    background: #FFFFFF !important;
}
.lumise-toggle-label {
    color: #E5EAF2 !important;
    font-family: "Inter", system-ui, sans-serif !important;
}

/* Radios used in tab bodies */
.lumise-radio,
.lumise_radios li {
    color: #E5EAF2 !important;
}
.lumise_radios li.active,
.lumise-radio.active {
    background: rgba(37, 99, 235, .18) !important;
    color: #93C5FD !important;
}

/* List items (uploads, designs, fonts) */
.lumise-list-items,
#lumise-upload-list,
#lumise-saved-designs,
#lumise-fonts {
    background: transparent !important;
    color: #E5EAF2 !important;
}
.lumise-list-items > li,
#lumise-upload-list > li,
#lumise-saved-designs > li,
#lumise-fonts > li {
    background-color: #1F2D40 !important;
    border: 1px solid rgba(96, 165, 250, .12) !important;
    color: #E5EAF2 !important;
}
.lumise-list-items > li:hover,
#lumise-upload-list > li:hover,
#lumise-saved-designs > li:hover,
#lumise-fonts > li:hover {
    background-color: #283851 !important;
    border-color: rgba(96, 165, 250, .3) !important;
}

/* Top tools bar inside the stage (text/transform tools when an object is selected) */
#lumise-top-tools,
#lumise-text-tools,
#lumise-position-wrp {
    background: #0F1E2E !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
    color: #E5EAF2 !important;
}
#lumise-top-tools [class*="lumisex-"],
#lumise-text-tools [class*="lumisex-"] {
    color: #E5EAF2 !important;
}
#lumise-top-tools [class*="lumisex-"]:hover,
#lumise-text-tools [class*="lumisex-"]:hover {
    color: #64B5F6 !important;
}

/* Notices */
#lumise-notices {
    background: #0F1E2E !important;
    color: #E5EAF2 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
}

/* ==========================================================
   CS Lumise dark theme — mobile / tablet overrides
   Targets responsive.css fallbacks that revert to teal #00acc1.
   Selectors here intentionally mirror responsive.css specificity
   so we win without resorting to broader !important hammers.
   ========================================================== */
@media only screen and (max-width: 1170px) {
    /* Top-bar "file" submenu when toggled open on tablet */
    div#LumiseDesign div#lumise-navigations ul[data-block][data-resp="file"].active {
        background: linear-gradient(180deg, #0F1E2E 0%, #0B1626 100%) !important;
        border-bottom: 1px solid rgba(96, 165, 250, .15) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important;
    }

    /* back_mobile link sits on the navy bar — keep text readable */
    div#LumiseDesign div#lumise-navigations ul[data-block]>li a.back_mobile,
    div#LumiseDesign div#lumise-navigations ul[data-block]>li.back_mobile a {
        color: #E5EAF2 !important;
    }
    div#LumiseDesign div#lumise-navigations ul[data-block]>li a.back_mobile:hover,
    div#LumiseDesign div#lumise-navigations ul[data-block]>li.back_mobile a:hover {
        color: #64B5F6 !important;
    }
}

@media only screen and (max-width: 736px) {
    /* Bottom-docked left nav active item: brand blue, not teal */
    html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li.active {
        background: #2196f3 !important;
        color: #FFFFFF !important;
    }
    html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li.active i,
    html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li.active [class*="lumisex-"] {
        color: #FFFFFF !important;
    }
    html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li:not(.active):hover {
        background: rgba(96, 165, 250, .12) !important;
        color: #E5EAF2 !important;
    }

    /* Whole bottom nav strip should match the navy panel */
    div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp {
        background: #0F1E2E !important;
        border-top: 1px solid rgba(96, 165, 250, .15) !important;
    }
}


/* === CS brand override: kill Lumise greens/oranges === */
.woocommerce a.lumise-edit-design,
a.lumise-edit-design {
    background-color: #2196f3 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 600 !important;
}
a.lumise-edit-design:hover {
    background: #1976d2 !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -4px rgba(33,150,243,.5) !important;
}
body .lumise-button.alt,
.lumise-button.alt {
    background: #2196f3 !important;
    color: #fff !important;
    border-radius: 999px !important;
}
body .lumise-button.alt:hover,
.lumise-button.alt:hover {
    background: #1976d2 !important;
    color: #fff !important;
}