/*
 * Mother Charger CRM — Brand Theme Override
 * Colors: Yellow-Lime #D4E600 | Black #0D0D0D | White #FFFFFF
 */

/* ═══════════════════════════════════════════════════════════════════════════
 * FONT FAMILY — Kanit (Thai-optimized)
 * ═══════════════════════════════════════════════════════════════════════════ */
body,
html,
* {
    font-family:
        "Kanit",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif !important;
}

/* Monospace elements (code, pre, input[type="number"], order IDs) */
code,
pre,
.font-monospace,
.order-id-cell,
input[type="number"],
.diag-order-id {
    font-family: "SF Mono", "Fira Code", "Courier New", monospace !important;
}

/* ─── Override Bootstrap/Metronic CSS variables (must come first) ────────── */
:root {
    --mc-yellow: #d4e600;
    --mc-yellow-dark: #b8cc00;
    --mc-yellow-soft: #f0f7a0;
    --mc-black: #0d0d0d;
    --mc-black-soft: #1a1a1a;
    --mc-white: #ffffff;
    --mc-gray: #f5f5f5;

    /* Override Metronic/Bootstrap primary → yellow */
    --bs-primary: #d4e600 !important;
    --bs-primary-rgb: 212, 230, 0 !important;
    --bs-primary-active: #b8cc00 !important;
    --bs-primary-inverse: #0d0d0d !important;
    --bs-primary-light: #f0f7a0 !important;
    --kt-primary: #d4e600 !important;
    --kt-primary-active: #b8cc00 !important;
    --kt-primary-light: #f0f7a0 !important;
    --kt-primary-inverse: #0d0d0d !important;
}

/* ─── Primary color override (high specificity to beat style.bundle.css) ─── */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.show > .btn.btn-primary.dropdown-toggle,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #d4e600 !important;
    border-color: #d4e600 !important;
    color: #0d0d0d !important;
}

.btn.btn-primary i,
.btn.btn-primary .svg-icon,
.btn-primary .indicator-label,
.btn-primary .indicator-progress {
    color: #0d0d0d !important;
}

.btn.btn-light-primary,
.btn-light-primary {
    background-color: #f0f7a0 !important;
    color: #0d0d0d !important;
    border-color: transparent !important;
}
.btn.btn-light-primary:hover,
.btn-light-primary:hover {
    background-color: #d4e600 !important;
    color: #0d0d0d !important;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.app-sidebar {
    background-color: var(--mc-black) !important;
    border-right: none !important;
}

.app-sidebar-logo {
    border-bottom: 1px solid rgba(212, 230, 0, 0.15) !important;
}

/* Menu items */
.app-sidebar .menu-link {
    color: rgba(255, 255, 255, 0.6) !important;
}
.app-sidebar .menu-link:hover,
.app-sidebar .menu-link.active {
    background-color: rgba(212, 230, 0, 0.12) !important;
    color: var(--mc-yellow) !important;
}
.app-sidebar .menu-link.active .menu-icon .svg-icon,
.app-sidebar .menu-link.active .menu-icon i {
    color: var(--mc-yellow) !important;
}
.app-sidebar .menu-link:hover .menu-icon .svg-icon,
.app-sidebar .menu-link:hover .menu-icon i {
    color: var(--mc-yellow) !important;
}

/* Section labels */
.app-sidebar .menu-section {
    color: rgba(212, 230, 0, 0.4) !important;
}

/* Sidebar toggle button */
.app-sidebar-toggle {
    background-color: var(--mc-black) !important;
    border: 1px solid rgba(212, 230, 0, 0.3) !important;
    color: var(--mc-yellow) !important;
}
.app-sidebar-toggle:hover {
    background-color: var(--mc-yellow) !important;
    color: var(--mc-black) !important;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.app-header {
    background-color: var(--mc-white) !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

/* ─── Logo text ──────────────────────────────────────────────────────────── */
.app-sidebar-logo-default,
.app-sidebar-logo-minimize {
    color: var(--mc-yellow) !important;
}

/* ─── Badges & status ────────────────────────────────────────────────────── */
.badge-primary,
.badge.bg-primary {
    background-color: var(--mc-yellow) !important;
    color: var(--mc-black) !important;
}

/* ─── Links ──────────────────────────────────────────────────────────────── */
a.text-primary,
.text-primary,
.link-primary {
    color: var(--mc-black) !important;
}
a.text-primary:hover,
.link-primary:hover {
    color: var(--mc-yellow-dark) !important;
}

/* ─── Nav tabs (active) ──────────────────────────────────────────────────── */
.nav-line-tabs .nav-link.active,
.nav-line-tabs .nav-link:hover {
    color: var(--mc-black) !important;
    border-bottom-color: var(--mc-yellow) !important;
}
.nav-line-tabs-2x .nav-link.active {
    border-bottom: 2px solid var(--mc-yellow) !important;
    color: var(--mc-black) !important;
}
.nav-tabs .nav-link.active {
    border-bottom-color: var(--mc-yellow) !important;
    color: var(--mc-black) !important;
}

/* ─── Form controls focus ────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--mc-yellow) !important;
    box-shadow: 0 0 0 0.2rem rgba(212, 230, 0, 0.2) !important;
}
.form-control-solid:focus,
.form-select-solid:focus {
    background-color: #f5f8fa !important;
    border-color: var(--mc-yellow) !important;
}

/* ─── Checkbox / Radio checked ───────────────────────────────────────────── */
.form-check-input:checked {
    background-color: var(--mc-yellow) !important;
    border-color: var(--mc-yellow) !important;
}
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230D0D0D' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* ─── Toolbar page title ─────────────────────────────────────────────────── */
.page-heading {
    color: var(--mc-black) !important;
}

/* ─── Card header title ──────────────────────────────────────────────────── */
.card-title h2,
.card-title h3 {
    color: var(--mc-black) !important;
}

/* ─── DataTable selected row ─────────────────────────────────────────────── */
table.dataTable tbody tr.selected > * {
    background-color: rgba(212, 230, 0, 0.08) !important;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */
.page-item.active .page-link {
    background-color: var(--mc-yellow) !important;
    border-color: var(--mc-yellow) !important;
    color: var(--mc-black) !important;
}
.page-link {
    color: var(--mc-black) !important;
}
.page-link:hover {
    background-color: var(--mc-yellow-soft) !important;
    color: var(--mc-black) !important;
}

/* ─── Select2 ────────────────────────────────────────────────────────────── */
.select2-container--bootstrap5 .select2-results__option--highlighted {
    background-color: var(--mc-yellow) !important;
    color: var(--mc-black) !important;
}
.select2-container--bootstrap5 .select2-results__option--selected {
    background-color: var(--mc-yellow-soft) !important;
    color: var(--mc-black) !important;
}

/* ─── Notification badge ─────────────────────────────────────────────────── */
.badge-danger,
.badge.bg-danger {
    background-color: #f1416c !important;
}

/* ─── Scrollbar (sidebar) ────────────────────────────────────────────────── */
.app-sidebar ::-webkit-scrollbar-thumb {
    background-color: rgba(212, 230, 0, 0.2) !important;
}
.app-sidebar ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(212, 230, 0, 0.4) !important;
}

/* ─── Auth page (login) ──────────────────────────────────────────────────── */
.app-blank {
    background-color: var(--mc-white) !important;
}

/* ─── Symbol / Avatar bg ─────────────────────────────────────────────────── */
.symbol-label.bg-primary {
    background-color: var(--mc-yellow) !important;
    color: var(--mc-black) !important;
}

/* ─── Metronic svg-icon primary ──────────────────────────────────────────── */
.svg-icon-primary {
    color: var(--mc-yellow) !important;
}

/* ─── Alert / Notice primary ─────────────────────────────────────────────── */
.alert-primary {
    background-color: var(--mc-yellow-soft) !important;
    border-color: var(--mc-yellow) !important;
    color: var(--mc-black) !important;
}

/* ─── Spinner / Loading ──────────────────────────────────────────────────── */
.spinner-border.text-primary {
    color: var(--mc-yellow) !important;
}

/* ─── Toolbar actions btn ────────────────────────────────────────────────── */
#kt_app_toolbar .btn-primary {
    background-color: var(--mc-yellow) !important;
    border-color: var(--mc-yellow) !important;
    color: var(--mc-black) !important;
    font-weight: 700 !important;
}

/* ─── Status dot (product) ───────────────────────────────────────────────── */
#statusDot[style*="50cd89"] {
    background: var(--mc-yellow) !important;
}

/* ─── Login aside background ─────────────────────────────────────────────── */
[style*="auth-bg.png"] {
    background-color: var(--mc-black) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * DARK MODE — ใช้สีเดียวกับ Sidebar (#0D0D0D base)
 * ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    /* ─── Background ─────────────────────────────────────────────────────── */
    --bs-body-bg: #0d0d0d;
    --bs-body-bg-rgb: 13, 13, 13;
    --bs-secondary-bg: #1a1a1a;
    --bs-tertiary-bg: #222222;

    /* ─── Text ───────────────────────────────────────────────────────────── */
    --bs-body-color: #e0e0e0;
    --bs-heading-color: #ffffff;

    /* ─── Card ───────────────────────────────────────────────────────────── */
    --bs-card-bg: #141414;
    --bs-card-border-color: rgba(255, 255, 255, 0.06);
}

/* Page background */
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .app-default {
    background-color: #0d0d0d !important;
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .card {
    background-color: #141414 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
    background-color: transparent !important;
}
[data-bs-theme="dark"] .card-footer {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
    background-color: transparent !important;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .app-header {
    background-color: #141414 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ─── Toolbar ────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] #kt_app_toolbar {
    background-color: #0d0d0d !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ─── Text colors ────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .text-gray-800,
[data-bs-theme="dark"] .text-dark {
    color: #e8e8e8 !important;
}
[data-bs-theme="dark"] .text-gray-700 {
    color: #c8c8c8 !important;
}
[data-bs-theme="dark"] .text-gray-600 {
    color: #a8a8a8 !important;
}
[data-bs-theme="dark"] .text-gray-500 {
    color: #888888 !important;
}
[data-bs-theme="dark"] .text-muted {
    color: #666666 !important;
}

/* ─── Form controls ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .form-control-solid,
[data-bs-theme="dark"] .form-select-solid {
    background-color: #1e1e1e !important;
    border-color: transparent !important;
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme="dark"] .form-select::placeholder {
    color: #555555 !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-control-solid:focus,
[data-bs-theme="dark"] .form-select-solid:focus {
    background-color: #222222 !important;
    border-color: var(--mc-yellow) !important;
    color: #e0e0e0 !important;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: #c8c8c8;
    --bs-table-border-color: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] thead.table-light tr {
    background-color: #1a1a1a !important;
    color: #888888 !important;
}
[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(212, 230, 0, 0.04) !important;
}
[data-bs-theme="dark"] .table-row-dashed tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-light {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #c8c8c8 !important;
}
[data-bs-theme="dark"] .btn-light:hover {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .btn-active-light:hover,
[data-bs-theme="dark"] .btn-active-light.active {
    background-color: #1e1e1e !important;
}

/* ─── Badges ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .badge-light {
    background-color: #1e1e1e !important;
    color: #c8c8c8 !important;
}
[data-bs-theme="dark"] .badge-light-success {
    background-color: rgba(80, 205, 137, 0.15) !important;
}
[data-bs-theme="dark"] .badge-light-danger {
    background-color: rgba(241, 65, 108, 0.15) !important;
}
[data-bs-theme="dark"] .badge-light-warning {
    background-color: rgba(255, 199, 0, 0.15) !important;
}
[data-bs-theme="dark"] .badge-light-primary {
    background-color: rgba(212, 230, 0, 0.15) !important;
    color: var(--mc-yellow) !important;
}
[data-bs-theme="dark"] .badge-light-info {
    background-color: rgba(0, 158, 247, 0.15) !important;
}

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(80, 205, 137, 0.1) !important;
    border-color: rgba(80, 205, 137, 0.2) !important;
}
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(241, 65, 108, 0.1) !important;
    border-color: rgba(241, 65, 108, 0.2) !important;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(255, 199, 0, 0.1) !important;
    border-color: rgba(255, 199, 0, 0.2) !important;
}

/* ─── Separator ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .separator {
    border-color: rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .separator-dashed {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ─── Dropdown / Menu ────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .menu-sub-dropdown,
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .menu-item .menu-link:hover,
[data-bs-theme="dark"] .menu-item .menu-link.active {
    background-color: rgba(212, 230, 0, 0.08) !important;
    color: var(--mc-yellow) !important;
}
[data-bs-theme="dark"] .menu-gray-800 .menu-item .menu-link {
    color: #c8c8c8 !important;
}

/* ─── Select2 dark ───────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .select2-container--bootstrap5 .select2-selection {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap5 .select2-dropdown {
    background-color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-bs-theme="dark"] .select2-container--bootstrap5 .select2-results__option {
    color: #c8c8c8 !important;
}
[data-bs-theme="dark"]
    .select2-container--bootstrap5
    .select2-results__option--highlighted {
    background-color: var(--mc-yellow) !important;
    color: #0d0d0d !important;
}

/* ─── DataTable dark ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .dataTables_info,
[data-bs-theme="dark"] .dataTables_paginate .paginate_button {
    color: #888888 !important;
}
[data-bs-theme="dark"] .dataTables_paginate .paginate_button.current {
    background: var(--mc-yellow) !important;
    color: #0d0d0d !important;
    border-color: var(--mc-yellow) !important;
}

/* ─── Scrollbar dark ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] ::-webkit-scrollbar-track {
    background: #0d0d0d;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 4px;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #3a3a3a;
}

/* ─── Input group ────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .input-group-text {
    background-color: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #888888 !important;
}

/* ─── bg-light / bg-secondary ────────────────────────────────────────────── */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light-primary,
[data-bs-theme="dark"] .bg-light-success,
[data-bs-theme="dark"] .bg-light-danger,
[data-bs-theme="dark"] .bg-light-warning,
[data-bs-theme="dark"] .bg-light-info {
    background-color: #1a1a1a !important;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .app-footer {
    background-color: #141414 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
[data-bs-theme="dark"] .app-footer .text-dark,
[data-bs-theme="dark"] .app-footer .text-gray-800 {
    color: #888888 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BUTTON LOADING / INDICATOR STATE
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Spinner inside btn-primary → ดำ (contrast กับเหลือง) */
.btn-primary .spinner-border,
.btn-primary .spinner-grow {
    color: var(--mc-black) !important;
    border-color: var(--mc-black) !important;
    border-right-color: transparent !important;
}

/* Metronic indicator-progress text */
.btn-primary .indicator-progress {
    color: var(--mc-black) !important;
}

/* btn-light / btn-secondary spinner → เหลือง */
.btn-light .spinner-border,
.btn-light .spinner-grow,
.btn-secondary .spinner-border,
.btn-secondary .spinner-grow {
    color: var(--mc-yellow) !important;
    border-color: var(--mc-yellow) !important;
    border-right-color: transparent !important;
}

/* Standalone spinner (page loading, DataTable processing) */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--mc-yellow) !important;
}

/* DataTable processing overlay */
.dataTables_processing {
    background: rgba(13, 13, 13, 0.85) !important;
    color: var(--mc-yellow) !important;
    border: none !important;
    box-shadow: none !important;
}
.dataTables_processing .spinner-border {
    color: var(--mc-yellow) !important;
    border-color: var(--mc-yellow) !important;
    border-right-color: transparent !important;
}

/* Metronic overlay / blockUI */
.blockui-overlay,
.overlay-layer {
    background-color: rgba(13, 13, 13, 0.6) !important;
}
.blockui .spinner-border,
.overlay-layer .spinner-border {
    color: var(--mc-yellow) !important;
    border-color: var(--mc-yellow) !important;
    border-right-color: transparent !important;
}

/* Page-level loading bar (NProgress style if used) */
#nprogress .bar {
    background: var(--mc-yellow) !important;
}
#nprogress .peg {
    box-shadow:
        0 0 10px var(--mc-yellow),
        0 0 5px var(--mc-yellow) !important;
}
#nprogress .spinner-icon {
    border-top-color: var(--mc-yellow) !important;
    border-left-color: var(--mc-yellow) !important;
}

/* Dark mode — spinner ยังคงเหลือง */
[data-bs-theme="dark"] .spinner-border.text-primary,
[data-bs-theme="dark"] .spinner-grow.text-primary,
[data-bs-theme="dark"] .btn-light .spinner-border,
[data-bs-theme="dark"] .btn-light .spinner-grow {
    color: var(--mc-yellow) !important;
    border-color: var(--mc-yellow) !important;
    border-right-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * ACTIONS BUTTON — เทา ไม่มี hover น้ำเงิน
 * ═══════════════════════════════════════════════════════════════════════════ */

/* btn-bg-light (ปุ่ม ⋯ three-dots) */
.btn-bg-light {
    background-color: #f5f5f5 !important;
    border-color: transparent !important;
    color: #5e6278 !important;
}
.btn-bg-light:hover,
.btn-bg-light:focus,
.btn-bg-light:active {
    background-color: #e8e8e8 !important;
    border-color: transparent !important;
    color: #1e1e2d !important;
}

/* btn-active-color-primary → เปลี่ยนเป็นเทาเข้ม ไม่ใช่น้ำเงิน */
.btn-active-color-primary:hover,
.btn-active-color-primary:focus,
.btn-active-color-primary:active,
.btn-active-color-primary.active {
    color: #1e1e2d !important;
}

/* btn-active-light-primary → เปลี่ยน hover เป็นเทา */
.btn-active-light-primary:hover,
.btn-active-light-primary:focus,
.btn-active-light-primary:active {
    background-color: #f0f0f0 !important;
    color: #1e1e2d !important;
}

/* ─── Sidebar menu hover/active ──────────────────────────────────────────── */
/* ยกเว้น sidebar ที่ต้องการสีเหลือง (ใช้ .app-sidebar scope) */
.app-sidebar .menu-link.btn-active-light-primary:hover,
.app-sidebar .menu-link.btn-active-light-primary.active {
    background-color: rgba(212, 230, 0, 0.12) !important;
    color: var(--mc-yellow) !important;
}

/* ─── DataTable / Table row hover ────────────────────────────────────────── */
.table-hover tbody tr:hover td {
    background-color: #fafafa !important;
}
[data-bs-theme="dark"] .table-hover tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ─── Nav tabs hover ─────────────────────────────────────────────────────── */
.nav-line-tabs .nav-link:not(.active):hover {
    color: #1e1e2d !important;
    border-bottom-color: #d0d0d0 !important;
}
.nav-line-tabs-2x .nav-link:not(.active):hover {
    color: #1e1e2d !important;
    border-bottom-color: #d0d0d0 !important;
}

/* ─── Menu item hover (dropdown menus) ───────────────────────────────────── */
.menu-state-bg-light-primary .menu-item .menu-link:hover,
.menu-state-bg-light-primary .menu-item.show > .menu-link {
    background-color: #f5f5f5 !important;
    color: #1e1e2d !important;
}

/* ─── btn-light-primary → เทา ────────────────────────────────────────────── */
/* ยกเว้น btn-primary ที่ต้องการเหลือง */
.btn-light-primary:not(.keep-yellow) {
    background-color: #f5f5f5 !important;
    color: #1e1e2d !important;
    border-color: transparent !important;
}
.btn-light-primary:not(.keep-yellow):hover,
.btn-light-primary:not(.keep-yellow):focus {
    background-color: #e8e8e8 !important;
    color: #1e1e2d !important;
}

/* ─── Dark mode adjustments ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-bg-light {
    background-color: #2a2a2a !important;
    color: #a0a0a0 !important;
}
[data-bs-theme="dark"] .btn-bg-light:hover {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .btn-light-primary:not(.keep-yellow) {
    background-color: #2a2a2a !important;
    color: #c0c0c0 !important;
}
[data-bs-theme="dark"] .btn-light-primary:not(.keep-yellow):hover {
    background-color: #333333 !important;
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"]
    .menu-state-bg-light-primary
    .menu-item
    .menu-link:hover {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * BROKEN IMAGE FALLBACK
 * ซ่อน broken icon และแสดง background logo แทน
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ซ่อน broken image icon ด้วย CSS */
img.mc-product-img[src=""],
img.mc-product-img:not([src]) {
    visibility: hidden;
}

/* symbol-label ที่ใช้ background-image — fallback ถ้าโหลดไม่ได้ */
.symbol-label {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}