/* ============================================================
   BAGFUL v4 — THEME PATCH v3
   Load AFTER nuclear-dark.css in header.tpl
   Contains: Order Summary dark fix, Light mode, Theme toggle
   Palette matched: bg #1e2636, card #2c3a4d, border #3d5068
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   DARK MODE: ORDER SUMMARY SIDEBAR FIX
   ══════════════════════════════════════════════════════════════ */
html body .order-summary,
html body #orderSummary,
html body .order-summary .panel,
html body .order-summary .panel-body,
html body .order-summary .panel-default,
html body .order-summary .panel-heading,
html body .order-summary .panel-footer,
html body .cart-sidebar,
html body .cart-body,
html body .pull-right .panel,
html body .pull-md-right .panel,
html body .col-md-4 .panel,
html body .col-md-3 .panel,
html body #order-standard_cart .panel,
html body #order-standard_cart .panel-default,
html body #order-standard_cart .panel-body,
html body #order-standard_cart .panel-heading,
html body #order-standard_cart .panel-footer,
html body #order-standard_cart .well,
html body #order-boxes .panel,
html body .store-product-configure .panel,
html body .product-configure .panel,
html body .order-summary .clearfix,
html body .summary-totals,
html body .total-due-today,
html body .order-review,
html body .summary-container,
html body .panel.panel-default.order-summary {
    background: #2c3a4d !important;
    border-color: #3d5068 !important;
    color: #e2e6f0 !important;
}

/* Nuclear catch-all for any sidebar element with inline styles */
html body .col-md-4 > div,
html body .col-md-3 > div,
html body .pull-right > div,
html body .pull-md-right > div,
html body .order-summary > div,
html body .order-summary > .panel > div,
html body #orderSummary > div,
html body .order-summary .well,
html body .order-summary .media,
html body .order-summary .media-body,
html body .order-summary .list-group,
html body .order-summary .list-group-item {
    background: #2c3a4d !important;
    border-color: #3d5068 !important;
    color: #e2e6f0 !important;
}

/* Kill any white/light backgrounds leaking via inline styles in sidebar */
html body .order-summary [style*="background"],
html body #orderSummary [style*="background"],
html body .col-md-4 .panel[style],
html body .col-md-3 .panel[style],
html body .order-summary .panel[style] {
    background: #2c3a4d !important;
    color: #e2e6f0 !important;
}
html body .order-summary .panel-heading,
html body #order-standard_cart .panel-heading,
html body .order-summary .header,
html body .order-summary h2,
html body .order-summary h3,
html body .order-summary h4 {
    background: #344558 !important;
    color: #8fb8d4 !important;
    border-bottom: 1px solid #3d5068 !important;
}
html body .order-summary .line-item,
html body .order-summary .row,
html body .order-summary table td,
html body .order-summary table th,
html body .order-summary hr {
    color: #8fa0b8 !important;
    border-color: #334460 !important;
}
html body .order-summary .total-due-today,
html body .order-summary .amt,
html body .order-summary .total,
html body .order-summary .price,
html body .total-due-today .amount {
    color: #4a8db5 !important;
}
html body .order-summary .btn-primary,
html body .order-summary .btn-success,
html body #orderSummary .btn-primary,
html body #order-standard_cart .btn-primary,
html body .btn-block.btn-primary {
    background: #4a8db5 !important;
    border-color: #4a8db5 !important;
    color: #fff !important;
    font-weight: 600;
}
html body .order-summary .btn-primary:hover,
html body .btn-block.btn-primary:hover {
    background: #5aa3cf !important;
}
html body .order-summary a,
html body #orderSummary a {
    color: #4a8db5 !important;
}

/* Addon cards */
html body .panel-addon,
html body .addon,
html body .available-addons .panel,
html body .product-addon,
html body .addon-products .panel,
html body .available-addons .panel-body,
html body .available-addons .panel-heading,
html body .available-addons .panel-footer {
    background: #2c3a4d !important;
    border: 1px solid #3d5068 !important;
    color: #e2e6f0 !important;
}
html body .addon .pricing,
html body .addon .price,
html body .addon-price,
html body .available-addons .panel-footer,
html body .available-addons .pricing,
html body .addon-products .pricing {
    background: #344558 !important;
    color: #8fa0b8 !important;
    border-color: #3d5068 !important;
}

/* Questions bar */
html body .questions-bar,
html body .contact-bar,
html body .help-link,
html body .alert.alert-info.text-center {
    background: rgba(74,141,181,.12) !important;
    border: 1px solid rgba(74,141,181,.2) !important;
    color: #7eb8d9 !important;
}

/* Inline style overrides */
html body .panel[style],
html body .panel-default[style],
html body div[style*="background"][style*="white"],
html body div[style*="background"][style*="#fff"] {
    background: #2c3a4d !important;
    color: #e2e6f0 !important;
}


/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — body.bf-light
   ══════════════════════════════════════════════════════════════ */

/* ── Override CSS variables for light mode ── */
html body.bf-light {
    --bg:          #f4f6f9;
    --surface:     #ffffff;
    --card:        #ffffff;
    --card-raised: #f8f9fb;
    --border:      #e0e5ec;
    --border-soft: #edf0f5;
    --text:        #2c3e50;
    --text-muted:  #5a6a7a;
    --text-dim:    #7f8c9b;
    --shadow:      0 1px 6px rgba(0,0,0,0.05);
    --shadow-lg:   0 4px 16px rgba(0,0,0,0.08);
}

/* ── Foundation ── */
html body.bf-light,
html body.bf-light #main-body,
html body.bf-light .body-content,
html body.bf-light .main-content,
html body.bf-light .container-fluid,
html body.bf-light .container,
html body.bf-light section,
html body.bf-light #order-standard_cart,
html body.bf-light #order-boxes,
html body.bf-light [class*="order-"],
html body.bf-light .row {
    background: #f4f6f9 !important;
    color: #2c3e50 !important;
}

/* ── Top nav bar — hidden in both modes ── */
html body.bf-light .top_nav {
    display: none !important;
}

/* ── Main nav — stays dark blue in light mode (matches WP) ── */
html body.bf-light #navigation,
html body.bf-light #navigation .navbar,
html body.bf-light #navigation .navbar .container {
    background: #0f4c81 !important;
    border: none !important;
    box-shadow: none !important;
}
html body.bf-light #navigation .nav > li > a,
html body.bf-light #navigation .navbar-nav > li > a,
html body.bf-light #navigation .navbar-right > li > a,
html body.bf-light #navigation .navbar-nav > li > .dropdown-toggle {
    color: rgba(255,255,255,0.85) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}
html body.bf-light #navigation .nav > li > a:hover,
html body.bf-light #navigation .navbar-nav > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
}
html body.bf-light #navigation .nav > li.open > a {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}
html body.bf-light #navigation .caret { border-top-color: rgba(255,255,255,0.6) !important; }
html body.bf-light #navigation li:hover .caret { border-top-color: #fff !important; }
html body.bf-light #navigation .dropdown-menu {
    background: #0d3d66 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
html body.bf-light #navigation .dropdown-menu > li > a {
    color: rgba(255,255,255,0.8) !important;
}
html body.bf-light #navigation .dropdown-menu > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
}

/* ── Secondary nav — stays dark blue in light mode ── */
html body.bf-light #main-menu,
html body.bf-light #main-menu .navbar,
html body.bf-light .navbar-default.navbar-main {
    background: #0a3a63 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}
html body.bf-light #main-menu .container,
html body.bf-light #main-menu .navbar-collapse,
html body.bf-light #main-menu .navbar-header,
html body.bf-light #main-menu .navbar-nav,
html body.bf-light #main-menu .navbar-nav > li,
html body.bf-light #main-menu .navbar-right,
html body.bf-light #main-menu .row {
    background: transparent !important;
    color: inherit !important;
}
html body.bf-light #main-menu .navbar-nav > li > a,
html body.bf-light .navbar-main .navbar-nav > li > a {
    color: rgba(255,255,255,0.65) !important;
    font-weight: 500;
}
html body.bf-light #main-menu .navbar-nav > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.06) !important;
}
html body.bf-light .navbar-main .navbar-right > li > a {
    color: rgba(255,255,255,0.65) !important;
}
html body.bf-light .navbar-main .navbar-right > li > a:hover {
    color: #fff !important;
}
html body.bf-light #main-menu .dropdown-menu {
    background: #0d3d66 !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
html body.bf-light #main-menu .dropdown-menu > li > a {
    color: rgba(255,255,255,0.8) !important;
}
html body.bf-light #main-menu .dropdown-menu > li > a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
}

/* ── Headings ── */
html body.bf-light h1, html body.bf-light h2, html body.bf-light h3,
html body.bf-light h4, html body.bf-light h5, html body.bf-light h6 {
    color: #1a2332 !important;
}

/* ── Text ── */
html body.bf-light p { color: #5a6a7a !important; }
html body.bf-light strong, html body.bf-light b { color: #1a2332 !important; }
html body.bf-light .text-muted, html body.bf-light small { color: #7f8c9b !important; }
html body.bf-light a { color: #2d7fab !important; }
html body.bf-light a:hover { color: #1a5f8a !important; }

/* ── Panels / Cards ── */
html body.bf-light .panel,
html body.bf-light .panel-default,
html body.bf-light .panel-primary,
html body.bf-light .panel-info,
html body.bf-light .panel-success,
html body.bf-light .panel-warning,
html body.bf-light .panel-danger,
html body.bf-light .card,
html body.bf-light .well,
html body.bf-light .product,
html body.bf-light .product-item,
html body.bf-light [class*="product"],
html body.bf-light .order-summary,
html body.bf-light #orderSummary,
html body.bf-light #order-standard_cart .panel,
html body.bf-light #order-boxes .panel,
html body.bf-light .store-product-configure .panel,
html body.bf-light .product-configure .panel,
html body.bf-light .col-md-4 .panel,
html body.bf-light .col-md-3 .panel,
html body.bf-light .pull-right .panel,
html body.bf-light .pull-md-right .panel,
html body.bf-light .cart-sidebar,
html body.bf-light .cart-body,
html body.bf-light .order-summary .panel,
html body.bf-light .order-summary .panel-default,
html body.bf-light .order-summary .panel-body,
html body.bf-light #orderSummary .panel,
html body.bf-light #orderSummary > div,
html body.bf-light .order-summary > div,
html body.bf-light .order-summary > .panel > div,
html body.bf-light .order-summary .well,
html body.bf-light .order-summary .list-group,
html body.bf-light .order-summary .list-group-item,
html body.bf-light .order-summary .clearfix,
html body.bf-light .summary-totals,
html body.bf-light .total-due-today,
html body.bf-light .order-review,
html body.bf-light .summary-container,
html body.bf-light .col-md-4 > div,
html body.bf-light .col-md-3 > div,
html body.bf-light .order-summary [style*="background"],
html body.bf-light #orderSummary [style*="background"],
html body.bf-light .thumbnail,
html body.bf-light .list-group,
html body.bf-light .box {
    background: #ffffff !important;
    border: 1px solid #e0e5ec !important;
    color: #2c3e50 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}
html body.bf-light .panel-heading,
html body.bf-light #order-standard_cart .panel-heading,
html body.bf-light .order-summary .panel-heading,
html body.bf-light .order-summary .header,
html body.bf-light .order-summary h2,
html body.bf-light .order-summary h3,
html body.bf-light .order-summary h4,
html body.bf-light #orderSummary h2,
html body.bf-light #orderSummary h3,
html body.bf-light .col-md-4 .panel-heading,
html body.bf-light .col-md-3 .panel-heading {
    background: #f0f4f8 !important;
    border-bottom: 1px solid #e0e5ec !important;
    color: #1a2332 !important;
}
html body.bf-light .panel-body,
html body.bf-light .order-summary .panel-body,
html body.bf-light #orderSummary .panel-body,
html body.bf-light .col-md-4 .panel-body,
html body.bf-light .col-md-3 .panel-body { background: transparent !important; color: #2c3e50 !important; }
html body.bf-light .panel-footer,
html body.bf-light .order-summary .panel-footer,
html body.bf-light #orderSummary .panel-footer,
html body.bf-light .col-md-4 .panel-footer,
html body.bf-light .col-md-3 .panel-footer {
    background: #f8f9fb !important;
    border-top: 1px solid #e0e5ec !important;
    color: #5a6a7a !important;
}

/* Order summary text & prices */
html body.bf-light .order-summary .line-item,
html body.bf-light .order-summary .row,
html body.bf-light .order-summary table td,
html body.bf-light .order-summary table th,
html body.bf-light .order-summary hr,
html body.bf-light #orderSummary td,
html body.bf-light #orderSummary th,
html body.bf-light .order-summary span,
html body.bf-light .order-summary p,
html body.bf-light .order-summary div {
    color: #3d5068 !important;
    border-color: #e0e5ec !important;
}
html body.bf-light .order-summary .total-due-today,
html body.bf-light .order-summary .amt,
html body.bf-light .order-summary .total,
html body.bf-light .order-summary .price,
html body.bf-light .total-due-today .amount,
html body.bf-light #orderSummary .total-due-today {
    color: #c0392b !important;
}
html body.bf-light .order-summary a,
html body.bf-light #orderSummary a {
    color: #2d7fab !important;
}

/* ── Addon cards ── */
html body.bf-light .panel-addon,
html body.bf-light .addon,
html body.bf-light .available-addons .panel,
html body.bf-light .addon-products .panel,
html body.bf-light .available-addons .panel-body,
html body.bf-light .available-addons .panel-heading,
html body.bf-light .available-addons .panel-footer,
html body.bf-light .product-addon,
html body.bf-light .addon-products .panel-body,
html body.bf-light .addon-products .panel-heading,
html body.bf-light .available-addons .panel-default,
html body.bf-light .available-addons .panel-primary,
html body.bf-light .available-addons .panel-info,
html body.bf-light .available-addons .well,
html body.bf-light .available-addons .card {
    background: #ffffff !important;
    border: 1px solid #e0e5ec !important;
    color: #2c3e50 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}
html body.bf-light .addon p,
html body.bf-light .addon span,
html body.bf-light .addon label,
html body.bf-light .addon div,
html body.bf-light .available-addons p,
html body.bf-light .available-addons span,
html body.bf-light .available-addons label,
html body.bf-light .available-addons div:not(.bf-fcols):not(.bf-fcol):not(.bf-footer-inner):not(.bf-ftop):not(.bf-ftrust):not(.bf-fcopy),
html body.bf-light .panel-addon p,
html body.bf-light .panel-addon span,
html body.bf-light .panel-addon div { color: #3d5068 !important; }
html body.bf-light .addon h4,
html body.bf-light .addon h5,
html body.bf-light .addon h3,
html body.bf-light .available-addons h4,
html body.bf-light .available-addons h5,
html body.bf-light .available-addons h3,
html body.bf-light .panel-addon h4,
html body.bf-light .panel-addon h5 { color: #1a2332 !important; }
html body.bf-light .addon .pricing,
html body.bf-light .addon-price,
html body.bf-light .available-addons .pricing,
html body.bf-light .addon-products .pricing,
html body.bf-light .available-addons .panel-footer {
    background: #f4f8fc !important;
    color: #3d5068 !important;
    border-color: #e0e5ec !important;
}
html body.bf-light .addon a,
html body.bf-light .available-addons a:not(.btn) { color: #2d7fab !important; }
html body.bf-light .addon .btn-success,
html body.bf-light .available-addons .btn-success {
    background: #27ae60 !important;
    border-color: #27ae60 !important;
    color: #fff !important;
}
html body.bf-light .addon input[type="checkbox"],
html body.bf-light .available-addons input[type="checkbox"] {
    accent-color: #4a8db5;
}

/* ── "Have questions?" bar ── */
html body.bf-light .questions-bar,
html body.bf-light .contact-bar,
html body.bf-light .alert.alert-info.text-center {
    background: #fef9e7 !important;
    border: 1px solid #f5e6a3 !important;
    color: #856404 !important;
}

/* ── Order summary light mode ── */
html body.bf-light .order-summary .panel-heading,
html body.bf-light .order-summary h3,
html body.bf-light .order-summary h4 {
    background: #f0f4f8 !important;
    color: #3d5068 !important;
    border-bottom: 1px solid #e0e5ec !important;
}
html body.bf-light .order-summary table td,
html body.bf-light .order-summary table th,
html body.bf-light .order-summary hr {
    color: #3d5068 !important;
    border-color: #e0e5ec !important;
}
html body.bf-light .order-summary .total-due-today,
html body.bf-light .order-summary .amt,
html body.bf-light .total-due-today .amount {
    color: #2d7fab !important;
}

/* ── Tables ── */
html body.bf-light .table { color: #2c3e50 !important; }
html body.bf-light .table thead th {
    background: #e8edf4 !important;
    color: #3d5068 !important;
    border-bottom: 2px solid #d0d8e4 !important;
}
html body.bf-light .table > tbody > tr > td {
    border-top: 1px solid #edf0f5 !important;
    color: #3d5068 !important;
    background: transparent !important;
}
html body.bf-light .table-striped > tbody > tr:nth-child(odd) > td { background: #f8f9fb !important; }
html body.bf-light .table > tbody > tr:hover > td { background: #edf4fa !important; }
html body.bf-light .table td a { color: #2d7fab !important; }

/* ── Forms ── */
html body.bf-light .form-control,
html body.bf-light input[type="text"],
html body.bf-light input[type="email"],
html body.bf-light input[type="password"],
html body.bf-light select,
html body.bf-light textarea,
html body.bf-light select.form-control,
html body.bf-light .form-control option,
html body.bf-light select.form-control option {
    background: #ffffff !important;
    border: 1px solid #d0d8e4 !important;
    color: #2c3e50 !important;
}
html body.bf-light .form-control:focus {
    border-color: #4a8db5 !important;
    box-shadow: 0 0 0 2px rgba(74,141,181,.12) !important;
}
html body.bf-light label { color: #3d5068 !important; }
html body.bf-light .form-control::placeholder { color: #8fa0b8 !important; }

/* Select arrow for light mode */
html body.bf-light select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%233d5068' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

/* ── Buttons ── */
html body.bf-light .btn-default {
    background: #ffffff !important;
    border: 1px solid #d0d8e4 !important;
    color: #3d5068 !important;
}
html body.bf-light .btn-default:hover { background: #f0f2f5 !important; }
html body.bf-light .btn-primary,
html body.bf-light .btn-block.btn-primary {
    background: #4a8db5 !important;
    border-color: #4a8db5 !important;
    color: #fff !important;
}
html body.bf-light .btn-primary:hover { background: #3a7da5 !important; }
html body.bf-light .btn-success { background: #28a745 !important; border-color: #28a745 !important; color: #fff !important; }
html body.bf-light .btn-danger { background: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; }
html body.bf-light .table .btn { background: #f4f6f9 !important; border: 1px solid #d0d8e4 !important; color: #5a6a7a !important; }
html body.bf-light .table .btn:hover { background: #e8f4fa !important; color: #2d7fab !important; }

/* ── Sidebar ── */
html body.bf-light .sidebar .panel { background: #ffffff !important; border: 1px solid #e0e5ec !important; }
html body.bf-light .sidebar .panel-heading { background: #f0f3f7 !important; color: #3d5068 !important; }
html body.bf-light .sidebar .list-group-item { background: transparent !important; border-color: #edf0f5 !important; color: #5a6a7a !important; }
html body.bf-light .sidebar .list-group-item:hover { background: #f4f8fc !important; color: #2d7fab !important; }
html body.bf-light .sidebar .list-group-item.active { background: #edf4fa !important; color: #2d7fab !important; }
html body.bf-light .sidebar .badge { background: #e8f4fa !important; color: #2d7fab !important; }

/* ── Alerts ── */
html body.bf-light .alert-info { background: #e8f4fa !important; border: 1px solid #c4dff0 !important; color: #2d6b8e !important; }
html body.bf-light .alert-success { background: #e8f8ee !important; border: 1px solid #b8e6c8 !important; color: #1d6b3a !important; }
html body.bf-light .alert-warning { background: #fef9e7 !important; border: 1px solid #f5e6a3 !important; color: #856404 !important; }
html body.bf-light .alert-danger { background: #fce8e8 !important; border: 1px solid #f0b8b8 !important; color: #8b2020 !important; }

/* ── Badges ── */
html body.bf-light .label-danger { background: #fce8e8 !important; color: #c0392b !important; }
html body.bf-light .label-success { background: #e8f8ee !important; color: #1d8348 !important; }
html body.bf-light .label-warning { background: #fef9e7 !important; color: #9a7d0a !important; }
html body.bf-light .label-info { background: #e8f4fa !important; color: #2d7fab !important; }
html body.bf-light .text-danger { color: #c0392b !important; }
html body.bf-light .text-success { color: #1d8348 !important; }

/* ── DataTables ── */
html body.bf-light .dataTables_wrapper { color: #5a6a7a !important; }
html body.bf-light .dataTables_filter input,
html body.bf-light .dataTables_length select {
    background: #fff !important;
    border: 1px solid #d0d8e4 !important;
    color: #2c3e50 !important;
}
html body.bf-light .dataTables_paginate .paginate_button { background: #fff !important; border: 1px solid #e0e5ec !important; color: #5a6a7a !important; }
html body.bf-light .dataTables_paginate .paginate_button.current,
html body.bf-light .dataTables_paginate .paginate_button:hover { background: #4a8db5 !important; border-color: #4a8db5 !important; color: #fff !important; }

/* ── Tabs ── */
html body.bf-light .nav-tabs { border-bottom: 1px solid #e0e5ec !important; }
html body.bf-light .nav-tabs > li > a { color: #5a6a7a !important; }
html body.bf-light .nav-tabs > li > a:hover { background: #f4f6f9 !important; color: #2d7fab !important; }
html body.bf-light .nav-tabs > li.active > a { background: #ffffff !important; border-color: #e0e5ec !important; border-bottom-color: #ffffff !important; color: #2d7fab !important; }
html body.bf-light .tab-content { background: #ffffff !important; border: 1px solid #e0e5ec !important; border-top: none !important; color: #2c3e50 !important; }

/* ── Modals ── */
html body.bf-light .modal-content { background: #ffffff !important; border-color: #e0e5ec !important; color: #2c3e50 !important; }
html body.bf-light .modal-header { background: #f8f9fb !important; border-bottom-color: #e0e5ec !important; }
html body.bf-light .modal-title { color: #1a2332 !important; }
html body.bf-light .modal-footer { background: #f8f9fb !important; border-top-color: #e0e5ec !important; }

/* ── Dropdowns ── */
html body.bf-light .dropdown-menu { background: #ffffff !important; border: 1px solid #e0e5ec !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; }
html body.bf-light .dropdown-menu > li > a { color: #3d5068 !important; }
html body.bf-light .dropdown-menu > li > a:hover { background: #f0f3f7 !important; color: #2d7fab !important; }

/* ── Breadcrumbs ── */
html body.bf-light .breadcrumb { background: #edf0f5 !important; border: 1px solid #e0e5ec !important; }
html body.bf-light .breadcrumb a { color: #2d7fab !important; }

/* ── Pagination ── */
html body.bf-light .pagination > li > a { background: #fff !important; border: 1px solid #e0e5ec !important; color: #5a6a7a !important; }
html body.bf-light .pagination > .active > a { background: #4a8db5 !important; border-color: #4a8db5 !important; color: #fff !important; }

/* ── Nuclear: kill ALL dark leaks in light mode ── */
html body.bf-light .panel[style],
html body.bf-light div[style*="background"][style*="#1"],
html body.bf-light div[style*="background"][style*="#2"],
html body.bf-light div[style*="background"][style*="#3"] {
    background: #ffffff !important;
    color: #2c3e50 !important;
}
html body.bf-light [class*="col-"] { background: transparent; }

/* Override nuclear-dark.css html body selectors */
html body.bf-light .product,
html body.bf-light .product-item,
html body.bf-light .product-card,
html body.bf-light [class*="product"]:not(.btn):not(a),
html body.bf-light .thumbnail,
html body.bf-light .list-group,
html body.bf-light .box,
html body.bf-light .media,
html body.bf-light .media-body {
    background: #ffffff !important;
    border-color: #e0e5ec !important;
    color: #2c3e50 !important;
}

/* Override nuclear-dark headings/text in light */
html body.bf-light h1, html body.bf-light h2, html body.bf-light h3,
html body.bf-light h4, html body.bf-light h5, html body.bf-light h6 {
    color: #1a2332 !important;
}
html body.bf-light p { color: #5a6a7a !important; }
html body.bf-light strong, html body.bf-light b { color: #1a2332 !important; }
html body.bf-light a:not(.btn):not(.bf-ftop-wa):not(.bf-wa-float) { color: #2d7fab !important; }
html body.bf-light a:not(.btn):hover { color: #1a5f8a !important; }
html body.bf-light .text-muted, html body.bf-light small, html body.bf-light .help-block {
    color: #7f8c9b !important;
}

/* ── Home banner ── */
html body.bf-light #home-banner { background: #1e3044 !important; }
html body.bf-light .home-shortcuts { background: #ffffff !important; border-bottom: 1px solid #e0e5ec !important; }
html body.bf-light .home-shortcuts ul li a { color: #3d5068 !important; }

/* ── Page headers / banners / Configure header ── */
html body.bf-light .header-lined,
html body.bf-light .page-header,
html body.bf-light .page-title,
html body.bf-light .order-form h1,
html body.bf-light #order-standard_cart > .row > div > h1,
html body.bf-light #order-standard_cart h1,
html body.bf-light #order-boxes h1,
html body.bf-light .main-content > h1,
html body.bf-light .main-content > .header-lined,
html body.bf-light .body-content h1.page-header,
html body.bf-light h1.page-header {
    background: #edf0f5 !important;
    color: #1a2332 !important;
    border-bottom: 1px solid #e0e5ec !important;
}
html body.bf-light .header-lined h1,
html body.bf-light .page-title h1 {
    color: #1a2332 !important;
}

/* ── Top nav stays dark, but main content area must be light ── */
html body.bf-light #main-body,
html body.bf-light .body-content > .container,
html body.bf-light .main-content,
html body.bf-light .content-area {
    background: #f4f6f9 !important;
    color: #2c3e50 !important;
}

/* ── Configure page specifics ── */
html body.bf-light .product-info,
html body.bf-light .product-details,
html body.bf-light .product-info-container,
html body.bf-light .configurable-options,
html body.bf-light .domain-config,
html body.bf-light .sub-heading,
html body.bf-light .sub-heading h2,
html body.bf-light .product-configure,
html body.bf-light .store-product-configure {
    background: #ffffff !important;
    color: #2c3e50 !important;
    border-color: #e0e5ec !important;
}
html body.bf-light .product-info h3,
html body.bf-light .product-info h4,
html body.bf-light .configurable-options label {
    color: #1a2332 !important;
}
html body.bf-light .product-info li,
html body.bf-light .product-info p,
html body.bf-light .product-info span,
html body.bf-light .product-info td {
    color: #3d5068 !important;
}

/* ── Continue button footer bar ── */
html body.bf-light .order-summary .panel-footer,
html body.bf-light #orderSummary .panel-footer,
html body.bf-light .order-summary .btn-block.btn-primary,
html body.bf-light .col-md-4 .panel-footer,
html body.bf-light .col-md-3 .panel-footer {
    background: #f8f9fb !important;
    color: #5a6a7a !important;
}
html body.bf-light .order-summary .btn-primary,
html body.bf-light .order-summary .btn-success,
html body.bf-light #orderSummary .btn-primary,
html body.bf-light .btn-block.btn-primary {
    background: #4a8db5 !important;
    border-color: #4a8db5 !important;
    color: #fff !important;
}

/* ── Kill any remaining dark backgrounds in light mode ── */
html body.bf-light [style*="background-color: #1"],
html body.bf-light [style*="background-color: #2"],
html body.bf-light [style*="background-color:#1"],
html body.bf-light [style*="background-color:#2"],
html body.bf-light [style*="background: #1"],
html body.bf-light [style*="background: #2"],
html body.bf-light [style*="background:#1"],
html body.bf-light [style*="background:#2"] {
    background: #ffffff !important;
    color: #2c3e50 !important;
}

/* ── Catch any var(--bg), var(--surface), var(--card) leaks ── */
html body.bf-light .wrapper,
html body.bf-light .layout-boxed,
html body.bf-light section,
html body.bf-light .container-fluid {
    background: #f4f6f9 !important;
}

/* ── Login / Register ── */
html body.bf-light .login-container,
html body.bf-light .register-container { background: #ffffff !important; border: 1px solid #e0e5ec !important; }

/* ── Footer stays dark ── */
html body.bf-light .bf-footer { background: #111822 !important; color: rgba(255,255,255,0.4) !important; }
html body.bf-light .bf-footer a { color: rgba(255,255,255,0.35) !important; }
html body.bf-light .bf-footer a:hover { color: #4a8db5 !important; }
html body.bf-light .bf-footer h4, html body.bf-light .bf-fcol-title { color: rgba(255,255,255,0.7) !important; }
html body.bf-light .bf-ftop-phone { color: #4a8db5 !important; }

/* ── Light scrollbar ── */
html body.bf-light ::-webkit-scrollbar-track { background: #f4f6f9; }
html body.bf-light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* ── NUCLEAR CATCH-ALL: Override any remaining dark panels in light ── */
/* This targets every panel/card/div inside the main content area */
html body.bf-light #main-body .panel,
html body.bf-light #main-body .panel-default,
html body.bf-light #main-body .panel-body,
html body.bf-light #main-body .panel-heading,
html body.bf-light #main-body .panel-footer,
html body.bf-light #main-body .well,
html body.bf-light #main-body .card,
html body.bf-light #main-body .thumbnail,
html body.bf-light .body-content .panel,
html body.bf-light .body-content .panel-default,
html body.bf-light .body-content .panel-body,
html body.bf-light .body-content .well,
html body.bf-light #order-standard_cart .panel,
html body.bf-light #order-standard_cart .panel-default,
html body.bf-light #order-standard_cart .panel-body,
html body.bf-light #order-standard_cart .panel-heading,
html body.bf-light #order-standard_cart .panel-footer,
html body.bf-light #order-standard_cart .well,
html body.bf-light #order-boxes .panel,
html body.bf-light #order-boxes .panel-body,
html body.bf-light #order-boxes .well,
html body.bf-light form .panel,
html body.bf-light form .panel-default,
html body.bf-light form .panel-body,
html body.bf-light form .panel-heading,
html body.bf-light form .panel-footer,
html body.bf-light .main-content .panel,
html body.bf-light .main-content .panel-default,
html body.bf-light .main-content .panel-body,
html body.bf-light .main-content .panel-heading,
html body.bf-light .main-content .panel-footer,
html body.bf-light .main-content .well {
    background: #ffffff !important;
    border-color: #e0e5ec !important;
    color: #2c3e50 !important;
}
html body.bf-light #main-body .panel-heading,
html body.bf-light .body-content .panel-heading,
html body.bf-light .main-content .panel-heading,
html body.bf-light form .panel-heading {
    background: #f0f4f8 !important;
    border-color: #e0e5ec !important;
    color: #1a2332 !important;
}
html body.bf-light #main-body .panel-footer,
html body.bf-light .body-content .panel-footer,
html body.bf-light .main-content .panel-footer,
html body.bf-light form .panel-footer {
    background: #f8f9fb !important;
    border-color: #e0e5ec !important;
    color: #5a6a7a !important;
}
/* Force all text inside panels to be dark in light mode */
html body.bf-light #main-body .panel p,
html body.bf-light #main-body .panel span,
html body.bf-light #main-body .panel div,
html body.bf-light #main-body .panel td,
html body.bf-light #main-body .panel th,
html body.bf-light #main-body .panel li,
html body.bf-light #main-body .panel label,
html body.bf-light .main-content .panel p,
html body.bf-light .main-content .panel span,
html body.bf-light .main-content .panel div,
html body.bf-light .main-content .panel td,
html body.bf-light .main-content .panel label,
html body.bf-light form .panel p,
html body.bf-light form .panel span,
html body.bf-light form .panel div,
html body.bf-light form .panel td,
html body.bf-light form .panel label {
    color: #3d5068 !important;
}
html body.bf-light #main-body .panel h1,
html body.bf-light #main-body .panel h2,
html body.bf-light #main-body .panel h3,
html body.bf-light #main-body .panel h4,
html body.bf-light #main-body .panel h5,
html body.bf-light #main-body .panel strong,
html body.bf-light .main-content .panel h1,
html body.bf-light .main-content .panel h2,
html body.bf-light .main-content .panel h3,
html body.bf-light .main-content .panel h4,
html body.bf-light .main-content .panel h5,
html body.bf-light .main-content .panel strong,
html body.bf-light form .panel h4,
html body.bf-light form .panel h5,
html body.bf-light form .panel strong {
    color: #1a2332 !important;
}
html body.bf-light #main-body .panel a:not(.btn),
html body.bf-light .main-content .panel a:not(.btn),
html body.bf-light form .panel a:not(.btn) {
    color: #2d7fab !important;
}

/* ── ABSOLUTE NUCLEAR: catch dark bg on ANY element in light mode ── */
/* If nuclear-dark.css forces bg on generic selectors, this kills it */
html body.bf-light [style*="background-color: #1"],
html body.bf-light [style*="background-color: #2"],
html body.bf-light [style*="background-color:#1"],
html body.bf-light [style*="background-color:#2"],
html body.bf-light [style*="background: #1"],
html body.bf-light [style*="background: #2"],
html body.bf-light [style*="background:#1"],
html body.bf-light [style*="background:#2"] {
    background: #ffffff !important;
    color: #2c3e50 !important;
}

/* Target WHMCS Eight template specific structures */
html body.bf-light .order-form .panel,
html body.bf-light .order-form .panel-body,
html body.bf-light .order-form .panel-heading,
html body.bf-light .order-form .panel-footer,
html body.bf-light .order-form .well,
html body.bf-light #product-addons,
html body.bf-light #product-addons .panel,
html body.bf-light #product-addons .panel-body,
html body.bf-light #product-addons .panel-heading,
html body.bf-light #product-addons .panel-footer,
html body.bf-light #addons,
html body.bf-light #addons .panel,
html body.bf-light #addons .panel-body,
html body.bf-light .addons-container,
html body.bf-light .addons-container .panel,
html body.bf-light .addons-container .panel-body,
html body.bf-light .row .col-sm-6 .panel,
html body.bf-light .row .col-sm-6 .panel-body,
html body.bf-light .row .col-sm-6 .panel-heading,
html body.bf-light .row .col-sm-6 .panel-footer,
html body.bf-light .row .col-md-6 .panel,
html body.bf-light .row .col-md-6 .panel-body,
html body.bf-light .row .col-md-6 .panel-heading,
html body.bf-light .row .col-md-6 .panel-footer,
html body.bf-light .row .col-lg-6 .panel,
html body.bf-light .row .col-lg-6 .panel-body {
    background: #ffffff !important;
    border-color: #e0e5ec !important;
    color: #2c3e50 !important;
}
html body.bf-light .row .col-sm-6 .panel p,
html body.bf-light .row .col-sm-6 .panel span,
html body.bf-light .row .col-sm-6 .panel div,
html body.bf-light .row .col-sm-6 .panel label,
html body.bf-light .row .col-md-6 .panel p,
html body.bf-light .row .col-md-6 .panel span,
html body.bf-light .row .col-md-6 .panel div,
html body.bf-light .row .col-md-6 .panel label {
    color: #3d5068 !important;
}
html body.bf-light .row .col-sm-6 .panel h4,
html body.bf-light .row .col-sm-6 .panel h5,
html body.bf-light .row .col-md-6 .panel h4,
html body.bf-light .row .col-md-6 .panel h5 {
    color: #1a2332 !important;
}


/* ══════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════ */
.bf-theme-toggle {
    position: fixed;
    bottom: 88px;
    right: 18px;
    z-index: 99998;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #2c3a4d;
    border: 1px solid #3d5068;
    color: #8fa0b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    transition: all 0.2s ease;
    padding: 0;
    outline: none;
}
.bf-theme-toggle:hover {
    background: #344558;
    color: #4a8db5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
html body.bf-light .bf-theme-toggle {
    background: #ffffff;
    border: 1px solid #d0d8e4;
    color: #5a6a7a;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
html body.bf-light .bf-theme-toggle:hover {
    background: #f0f3f7;
    color: #2d7fab;
}
.bf-theme-toggle .bf-icon-sun { display: block; }
.bf-theme-toggle .bf-icon-moon { display: none; }
html body.bf-light .bf-theme-toggle .bf-icon-sun { display: none; }
html body.bf-light .bf-theme-toggle .bf-icon-moon { display: block; }