:root{--bg:#f8f9fb;--card:#ffffff;--text:#1a1d21;--muted:#6c757d;--primary:#0d6efd;--accent:#7b61ff;--success:#38d9a9;--warning:#ffd43b;--danger:#ff6b6b;--shadow:08px30px rgba(2,6,23,.08);}body{background:var(--bg);color:var(--text);} .card{background:var(--card);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05);} .btn-primary{background:var(--primary);border-color:var(--primary);} .btn-outline-primary{color:var(--primary);border-color:var(--primary);} .form-control,.form-select{background:var(--card);color:var(--text);border-color:rgba(0,0,0,.12);} .navbar,.sidebar{background:var(--card);} /* Neon3D glow utilities */ .neon{position:relative} .neon::after{content:"";position:absolute;inset:-2px;border-radius:12px;filter:blur(12px);background:radial-gradient(60%60% at50%50%,var(--accent)20%,transparent70%);opacity:.35;pointer-events:none} /* Dark theme */ html.dark{color-scheme:dark; --bg:#0b0e14;--card:#0f1420;--text:#e6e9ef;--muted:#9aa3b2;--primary:#42a5ff;--accent:#00e6ff;--success:#2ee6a6;--warning:#ffd43b;--danger:#ff8080;--shadow:none;} html.dark body{background:radial-gradient(1200px600px at20% -10%,#09101d0%,#0b0e1440%,#090c12100%), #0b0e14;} html.dark .card{background:linear-gradient(180deg,rgba(19,26,38,.92),rgba(10,14,22,.92));border:1px solid rgba(255,255,255,.06);} html.dark .btn-primary{background:linear-gradient(135deg,#42a5ff,#00e6ff);border:0;box-shadow:010px30px rgba(0,230,255,.2);} html.dark .btn-primary:hover{box-shadow:012px36px rgba(0,230,255,.3)} html.dark .btn-outline-primary{color:#42a5ff;border-color:#42a5ff} html.dark .form-control, html.dark .form-select{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.12);color:var(--text);} /* Neon glow shadows for3D effect */ .glow, html.dark .card{position:relative} .glow::before, html.dark .card::before{content:"";position:absolute;inset:-2px;border-radius:16px;background:linear-gradient(135deg,rgba(0,230,255,.25),rgba(123,97,255,.25));filter:blur(18px);opacity:.6;z-index:-1} /* Header/nav tweak */ html.dark .main-header{background:linear-gradient(135deg,rgba(18,25,39,.95),rgba(10,14,22,.95));border-bottom:1px solid rgba(255,255,255,.08)} html.dark .nav-section{background:rgba(18,25,39,.7);border:1px solid rgba(255,255,255,.06);box-shadow:08px30px rgba(0,230,255,.08)} /* Text muted */ .text-muted{color:var(--muted)!important} /* Toggle control */ .theme-toggle{position:fixed;right:1rem;bottom:1rem;z-index:1100;}

/* Dark base UI coverage */
html.dark body{color:#e6e9ef;} html.dark a,.btn-link{color:#42a5ff;} html.dark .btn-outline-primary{color:#42a5ff;border-color:#42a5ff} html.dark .btn{color:#e6e9ef}
html.dark .table{color:#e6e9ef;background:transparent}
html.dark .table thead th{border-color:rgba(255,255,255,.08)}
html.dark .table td, html.dark .table th{border-color:rgba(255,255,255,.08)}
html.dark .card{color:#e6e9ef}
html.dark .form-control, html.dark .form-select{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);color:#e6e9ef}
html.dark .form-control::placeholder{color:#9aa3b2}
html.dark .alert{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12);color:#e6e9ef}
html.dark .badge{background:rgba(255,255,255,.08);color:#e6e9ef}
html.dark .dropdown-menu{background:rgba(18,25,39,.98);border-color:rgba(255,255,255,.08);color:#e6e9ef}
html.dark .form-control:focus, html.dark .form-select:focus{box-shadow:000 .2rem rgba(0,230,255,.15)}
html.dark .btn-outline-secondary{color:#e6e9ef;border-color:rgba(255,255,255,.25)}
html.dark .btn-outline-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
html.dark .bg-light{background:rgba(255,255,255,.06)!important}
html.dark .border, html.dark .border-top, html.dark .border-bottom, html.dark .border-start, html.dark .border-end{border-color:rgba(255,255,255,.12)!important}
html.dark hr{border-top:1px solid rgba(255,255,255,.12)}
html.dark .list-group{background:transparent}
html.dark .list-group-item{background:rgba(255,255,255,.03);color:#e6e9ef;border-color:rgba(255,255,255,.08)}
html.dark .list-group-item.active{background:linear-gradient(135deg,#42a5ff,#00e6ff);border-color:transparent;color:#0b0e14}
html.dark .modal-content{background:linear-gradient(180deg,rgba(19,26,38,.95),rgba(10,14,22,.95));color:#e6e9ef;border:1px solid rgba(255,255,255,.08)}
html.dark .modal-header,.dark .modal-footer{border-color:rgba(255,255,255,.08)}
html.dark .input-group-text{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#e6e9ef}
html.dark .table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-accent-bg:rgba(255,255,255,.02);color:#e6e9ef}
html.dark .toast, html.dark .toast-body{background:rgba(255,255,255,.06);color:#e6e9ef;border-color:rgba(255,255,255,.12)}

/* Force transparent table cell backgrounds in dark mode to remove white blocks */
html.dark .table { background-color: transparent !important; }
html.dark .table > :not(caption) > * > * { background-color: transparent !important; }
html.dark .table tfoot th, html.dark .table tfoot td, html.dark .table thead th, html.dark .table tbody td { background-color: transparent !important; }

/* Product grid status glows for dark mode */
.product-card.status-instock{--glow:rgba(46,230,166,.35)}
.product-card.status-oos{--glow:rgba(255,128,128,.35)}
html.dark .product-card.status-instock::before, html.dark .product-card.status-oos::before{
 content:""; position:absolute; inset:-4px; border-radius:14px; filter:blur(14px); opacity:.6; z-index:-1; background:radial-gradient(60%60% at50%50%, var(--glow), transparent70%);
}

/* Light theme fallback for status (subtle) */
.product-card.status-instock{box-shadow:inset0002px rgba(25,135,84,.15)}
.product-card.status-oos{box-shadow:inset0002px rgba(220,53,69,.15)}

/* Cart page specific dark theme tweaks */
html.dark .cart-panel{background:linear-gradient(180deg,rgba(19,26,38,.95),rgba(10,14,22,.95));border:1px solid rgba(255,255,255,.08);position:relative}
html.dark .cart-panel::before{content:"";position:absolute;inset:-3px;border-radius:12px;filter:blur(14px);opacity:.55;z-index:-1;background:linear-gradient(135deg,rgba(0,230,255,.18),rgba(123,97,255,.18))}
html.dark .cart-panel .table{color:#e6e9ef}
html.dark .cart-panel .table td, html.dark .cart-panel .table th{border-color:rgba(255,255,255,.08)}
html.dark .cart-panel .form-control{background:rgba(255,255,255,.03);color:#e6e9ef;border-color:rgba(255,255,255,.12)}
html.dark .cart-panel .btn-outline-secondary{color:#e6e9ef;border-color:rgba(255,255,255,.25)}
html.dark .cart-panel .btn-outline-secondary:hover{background:rgba(255,255,255,.08)}

/* Zebra utility and header/footer emphasis for dark mode tables */
html.dark .zebra tbody tr:nth-child(odd) td{background-color:rgba(255,255,255,.02)!important}
html.dark .zebra tbody tr:nth-child(even) td{background-color:transparent!important}
html.dark .cart-table thead th{border-bottom:2px solid rgba(255,255,255,.16)!important;color:#e6e9ef;font-weight:600}
html.dark .cart-table tfoot td,html.dark .cart-table tfoot th{border-top:2px solid rgba(255,255,255,.16)!important}
html.dark .cart-table tfoot tr.subtotal td{color:#c7d2fe}
/* Qty buttons focus and hover */
html.dark .input-group .btn.btn-outline-secondary{border-color:rgba(255,255,255,.25);color:#e6e9ef}
html.dark .input-group .btn.btn-outline-secondary:hover{background:rgba(255,255,255,.08)}
html.dark .input-group .btn.btn-outline-secondary:focus{box-shadow:000 .2rem rgba(0,230,255,.25)}
/* Danger outline better hover */
html.dark .btn-outline-danger{border-color:rgba(255,128,128,.6);color:#ff8080}
html.dark .btn-outline-danger:hover{background:rgba(255,128,128,.12)}
/* Improve text contrast for cart in dark mode */
html.dark .cart-table{color:#e6e9ef}
html.dark .cart-table a{color:#42a5ff}
html.dark .cart-table thead th{color:#eaf2ff}
html.dark .cart-table .subtotal td{color:#dbe7ff}
html.dark .cart-table .shipping-row td{color:#c0cad9}
html.dark .cart-table .grandtotal td{color:#ffffff}
html.dark .cart-panel label.form-label{color:#e6e9ef}
/* Inputs text & placeholder */
html.dark .cart-panel .form-control{color:#e6e9ef}
html.dark .cart-panel .form-control::placeholder{color:#8ea1b4}
/* Buttons text ensure readable */
html.dark .btn-outline-primary{color:#42a5ff;border-color:#42a5ff}
html.dark .btn-secondary{color:#e6e9ef}

/* Dark theme readability patches for cart item rows */
/*1) Boost numeric column contrast */
html.dark .cart-table tbody td{color:#d5deeb}
html.dark .cart-table tbody td.text-end{color:#e0e8f7}
/*2) Tame row separators to avoid double/bold bands */
html.dark .cart-table tbody td, html.dark .cart-table thead th, html.dark .cart-table tfoot td{border-color:rgba(255,255,255,.08)!important}
/* Hover row aid */
html.dark .cart-table tbody tr:hover td{background-color:rgba(255,255,255,.03)!important}

/*3) Quantity control: larger click targets + accent borders */
html.dark .cart-table .input-group.input-group-sm .btn{min-width:36px;height:34px;line-height:1;border-color:rgba(66,165,255,.6);color:#e6e9ef}
html.dark .cart-table .input-group.input-group-sm .form-control{height:34px;color:#e6e9ef;border-color:rgba(66,165,255,.35);background:rgba(255,255,255,.03)}
html.dark .cart-table .input-group .btn:focus, html.dark .cart-table .input-group .form-control:focus{box-shadow:000 .2rem rgba(0,230,255,.22)}
html.dark .cart-table .input-group .btn:hover{background:rgba(66,165,255,.12)}

/*4) Remove button: keep transparent until hover; subtler hover fill */
html.dark .cart-table .btn-outline-danger{background:transparent;border-color:rgba(255,128,128,.65);color:#ff8a8a}
html.dark .cart-table .btn-outline-danger:hover{background:rgba(255,128,128,.10);color:#ffc1c1}
html.dark .cart-table .btn-outline-danger:active{background:rgba(255,128,128,.16);}

/*5) Link contrast inside item name */
html.dark .cart-table a{color:#6fc7ff}
html.dark .cart-table a:hover{color:#9bddff}
/* Dark theme: fix browser autofill (light blue) on inputs */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark textarea:-webkit-autofill,
html.dark textarea:-webkit-autofill:hover,
html.dark textarea:-webkit-autofill:focus,
html.dark select:-webkit-autofill,
html.dark select:-webkit-autofill:hover,
html.dark select:-webkit-autofill:focus{
 -webkit-text-fill-color:#e6e9ef;
 -webkit-box-shadow:0001000px rgba(255,255,255,.06) inset;
 caret-color:#e6e9ef;
 border:1px solid rgba(255,255,255,.20);
 transition:background-color9999s ease-in-out0s;
}
/* Firefox autofill */
html.dark input:-moz-autofill,
html.dark textarea:-moz-autofill,
html.dark select:-moz-autofill{
 box-shadow:0001000px rgba(255,255,255,.06) inset;
 -moz-text-fill-color:#e6e9ef;
 caret-color:#e6e9ef;
 border:1px solid rgba(255,255,255,.20);
}
/* Slightly darker default control background for readability on very dark pages */
html.dark .form-control{background:rgba(255,255,255,.05)}
/* Auth/login form panel dark theming aligned with checkout */
html.dark .auth-panel{background:linear-gradient(180deg,rgba(19,26,38,.95),rgba(10,14,22,.95));border:1px solid rgba(255,255,255,.08)}
html.dark .auth-panel .form-label{color:#e6e9ef}

/* Darker input background for login matching checkout */
html.dark .auth-panel .form-control{background:rgba(255,255,255,.04)!important;color:#e6e9ef;border-color:rgba(255,255,255,.14)}
html.dark .auth-panel .form-control::placeholder{color:#a7b4c3}
/* Autofill override stays consistent */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus{
 -webkit-box-shadow:0001000px rgba(255,255,255,.04) inset;
 -webkit-text-fill-color:#e6e9ef }
html.dark .bg-white, html.dark .text-bg-light, html.dark .bg-body{background:rgba(255,255,255,.06)!important;color:#e6e9ef}
html.dark .dropdown-menu{background:rgba(18,25,39,.98);color:#e6e9ef;border-color:rgba(255,255,255,.12)}
html.dark .dropdown-item{color:#e6e9ef}
html.dark .dropdown-item:hover, html.dark .dropdown-item:focus{background:rgba(255,255,255,.08);color:#fff}
/* Tables that use .table-light rows */
html.dark .table-light{--bs-table-bg: rgba(255,255,255,.06)!important; --bs-table-color:#e6e9ef!important; background-color:rgba(255,255,255,.06)!important; color:#e6e9ef!important}

/* Global dark readability for headings, labels, cards, pagination */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color:#e6e9ef; }
html.dark label, html.dark .form-label { color:#e6e9ef; }
html.dark .card-header, html.dark .card-footer { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); color:#e6e9ef; }
/* Pagination */
html.dark .pagination .page-link { background:rgba(255,255,255,.06); color:#e6e9ef; border-color:rgba(255,255,255,.12); }
html.dark .pagination .page-link:hover { background:rgba(255,255,255,.1); color:#fff; }
html.dark .pagination .page-item.active .page-link { background:linear-gradient(135deg,#42a5ff,#00e6ff); color:#0b0e14; border-color:transparent; }
html.dark .pagination .page-item.disabled .page-link { color:#9aa3b2; background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }

/* Ensure Bootstrap variables reflect dark palette */
html.dark {
 --bs-body-color: #e6e9ef;
 --bs-body-bg: #0b0e14;
 --bs-secondary-color: #9aa3b2;
 --bs-border-color: rgba(255,255,255,.12);
 /* Tables */
 --bs-table-color: #e6e9ef;
 --bs-table-bg: transparent;
 --bs-table-striped-bg: rgba(255,255,255,.02);
 --bs-table-striped-color: #e6e9ef;
 --bs-table-hover-bg: rgba(255,255,255,.04);
 --bs-table-hover-color: #e6e9ef;
}

/* Harden table text color against Bootstrap defaults */
html.dark table,
html.dark .table,
html.dark .table td,
html.dark .table th,
html.dark .table thead th,
html.dark .table tbody td {
 color: #e6e9ef !important;
}