/* ═══════════════════════════════════════════════════════════
   FLEXSHOP HAITI — Dark Mode (Client Side)
   Fichye sa ajoute nan main.css — pa ranplase l
   ═══════════════════════════════════════════════════════════ */

/* ── DARK MODE VARIABLES ─────────────────────────────────── */
html.dark {
  --white: #1e293b;
  --gray-50: #0f172a;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #64748b;
  --gray-500: #94a3b8;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;

  --blue-50: #172554;
  --blue-100: #1e3a8a;
  --red-50: #450a0a;
  --green-50: #052e16;
}

/* ── BODY + HTML ─────────────────────────────────────────── */
html.dark body {
  background: var(--gray-50);
  color: var(--gray-800);
}

/* ── NAVBAR ──────────────────────────────────────────────── */
html.dark .nb-root,
html.dark .navbar {
  background: var(--white);
  border-bottom-color: var(--gray-200);
}

html.dark .nb-top {
  border-bottom-color: var(--gray-200);
}

html.dark .nb-search {
  border-color: var(--gray-300);
  background: var(--gray-100);
}

html.dark .nb-search-cat {
  background: var(--gray-200);
  color: var(--gray-700);
  border-right-color: var(--gray-300);
}

html.dark .nb-search-input {
  background: transparent;
  color: var(--gray-800);
}

html.dark .nb-search-input::placeholder {
  color: var(--gray-500);
}

html.dark .nb-user-btn:hover {
  background: var(--gray-200);
}

html.dark .nb-uname {
  color: var(--gray-700);
}

html.dark .nb-avatar {
  background: var(--blue-100);
}

html.dark .nb-dropdown {
  background: var(--white);
  border-color: var(--gray-200);
}

html.dark .nb-hamburger {
  background: var(--gray-200);
}

html.dark .nb-hamburger span {
  background: var(--gray-700);
}

/* Drawer mobile */
html.dark .nb-drawer {
  background: #1e293b;
}

html.dark .nb-drawer-header {
  border-bottom-color: var(--gray-200);
}

html.dark .nb-drawer-close {
  background: var(--gray-200);
  color: var(--gray-700);
}

html.dark .nb-drawer-link {
  color: var(--gray-700);
}

html.dark .nb-drawer-link:hover {
  background: var(--blue-50);
  color: #93c5fd;
}

html.dark .nb-drawer-divider {
  background: var(--gray-200);
}

html.dark .nb-drawer-footer {
  border-top-color: var(--gray-200);
}

/* ── NAVBAR BOTTOM (cat bar) ─────────────────────────────── */
html.dark .navbar-bottom {
  border-top-color: var(--gray-200);
}

html.dark .nav-link {
  color: var(--gray-500);
}

html.dark .nav-link:hover,
html.dark .nav-link.active {
  color: #93c5fd;
}

html.dark .nav-icon-btn {
  background: var(--gray-200);
  color: var(--gray-600);
}

html.dark .nav-icon-btn:hover {
  background: var(--blue-50);
  color: #93c5fd;
}

/* ── DARK MODE TOGGLE BUTTON ─────────────────────────────── */
.dark-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gray-600);
  background: var(--gray-100);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.dark-toggle:hover {
  background: var(--blue-50);
  color: var(--blue);
}

html.dark .dark-toggle {
  background: var(--gray-200);
  color: var(--gray-700);
}

html.dark .dark-toggle:hover {
  background: var(--blue-50);
  color: #93c5fd;
}

/* ── CARDS ───────────────────────────────────────────────── */
html.dark .card,
html.dark .balance-card,
html.dark .quick-actions,
html.dark .order-summary {
  background: var(--white);
  border-color: var(--gray-200);
}

html.dark .card-header,
html.dark .card-footer {
  border-color: var(--gray-200);
  background: var(--gray-100);
}

html.dark .card-title {
  color: var(--gray-800);
}

/* ── DASHBOARD ───────────────────────────────────────────── */
html.dark .dashboard-main,
html.dark .dashboard-sidebar {
  background: var(--gray-50);
  border-color: var(--gray-200);
}

html.dark .dash-sidebar {
  background: var(--white);
  border-right-color: var(--gray-200);
}

html.dark .dash-sidebar-user {
  background: var(--gray-100);
}

html.dark .dash-sidebar-link {
  color: var(--gray-600);
}

html.dark .dash-sidebar-link:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

html.dark .dash-sidebar-link.active {
  background: var(--blue-50);
  color: #93c5fd;
}

html.dark .dash-sidebar-help {
  background: var(--blue-50);
}

html.dark .sidebar-user {
  background: var(--gray-100);
}

html.dark .sidebar-nav-item {
  color: var(--gray-600);
}

html.dark .sidebar-nav-item:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

html.dark .sidebar-nav-item.active {
  background: var(--blue-50);
  color: #93c5fd;
}

html.dark .sidebar-help {
  background: var(--blue-50);
}

html.dark .user-dash-layout> :first-child {
  background: var(--white);
  border-right-color: var(--gray-200);
}

/* Welcome banner — keep gradient, just darken overlay */
html.dark .welcome-banner {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

/* ── PRODUCT CARDS ───────────────────────────────────────── */
html.dark .product-card,
html.dark .carousel-product,
html.dark .cat-card {
  background: var(--white);
  border-color: var(--gray-200);
}

html.dark .product-image-wrap,
html.dark .product-image-placeholder {
  background: var(--gray-100);
}

html.dark .product-title {
  color: var(--gray-800);
}

html.dark .product-title:hover {
  color: #93c5fd;
}

html.dark .product-category {
  color: var(--gray-500);
}

html.dark .carousel-product-name {
  color: var(--gray-800);
}

html.dark .carousel-product-sub {
  color: var(--gray-500);
}

html.dark .cat-name {
  color: var(--gray-700);
}

/* ── FORMS ───────────────────────────────────────────────── */
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea,
html.dark .sort-select {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-800);
}

html.dark .form-input:focus,
html.dark .form-select:focus,
html.dark .form-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

html.dark .form-input::placeholder,
html.dark .form-textarea::placeholder {
  color: var(--gray-500);
}

html.dark .form-label {
  color: var(--gray-700);
}

/* ── BUTTONS ─────────────────────────────────────────────── */
html.dark .btn-secondary {
  background: var(--gray-200);
  color: var(--gray-700);
  border-color: var(--gray-300);
}

html.dark .btn-secondary:hover {
  background: var(--gray-300);
}

html.dark .btn-ghost {
  color: var(--gray-600);
}

html.dark .btn-ghost:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

html.dark .btn-google {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

html.dark .btn-google:hover {
  background: var(--gray-200);
}

html.dark .btn-wishlist {
  background: rgba(30, 41, 59, 0.85);
  color: var(--gray-500);
}

html.dark .btn-wishlist:hover {
  background: var(--gray-100);
}

/* ── BADGES ──────────────────────────────────────────────── */
html.dark .badge-blue {
  background: var(--blue-100);
  color: #93c5fd;
}

html.dark .badge-green {
  background: #052e16;
  color: #4ade80;
}

html.dark .badge-red {
  background: #450a0a;
  color: #f87171;
}

html.dark .badge-gold {
  background: #451a03;
  color: #fbbf24;
}

html.dark .badge-purple {
  background: #2e1065;
  color: #c4b5fd;
}

html.dark .badge-gray {
  background: var(--gray-200);
  color: var(--gray-600);
}

html.dark .badge-orange {
  background: #431407;
  color: #fb923c;
}

/* ── ALERTS ──────────────────────────────────────────────── */
html.dark .alert-success {
  background: #052e16;
  border-color: #166534;
  color: #4ade80;
}

html.dark .alert-info {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: #93c5fd;
}

html.dark .alert-warning {
  background: #451a03;
  border-color: #92400e;
  color: #fbbf24;
}

html.dark .alert-error {
  background: #450a0a;
  border-color: #991b1b;
  color: #f87171;
}

/* ── MODALS ──────────────────────────────────────────────── */
html.dark .modal {
  background: var(--white);
}

html.dark .modal-header,
html.dark .modal-footer {
  border-color: var(--gray-200);
}

html.dark .modal-close {
  background: var(--gray-200);
  color: var(--gray-600);
}

html.dark .modal-close:hover {
  background: var(--gray-300);
  color: var(--gray-800);
}

/* ── TOASTS ──────────────────────────────────────────────── */
html.dark .toast {
  background: var(--white);
  border-color: var(--gray-200);
}

html.dark .toast-text {
  color: var(--gray-500);
}

/* ── TRUST BAR ───────────────────────────────────────────── */
html.dark .trust-bar {
  background: var(--white);
  border-bottom-color: var(--gray-200);
}

html.dark .trust-bar-inner {
  border-left-color: var(--gray-200);
}

html.dark .trust-item {
  border-right-color: var(--gray-200);
}

html.dark .trust-icon {
  background: var(--blue-50);
  color: #93c5fd;
}

html.dark .trust-widget {
  background: var(--blue-50);
  border-color: var(--blue-100);
}

/* ── PAGINATION ──────────────────────────────────────────── */
html.dark .page-btn {
  background: var(--white);
  border-color: var(--gray-300);
  color: var(--gray-600);
}

html.dark .page-btn:hover {
  border-color: #3b82f6;
  color: #93c5fd;
}

html.dark .page-btn.nav {
  background: var(--gray-100);
}

/* ── SEARCH BAR (old style) ──────────────────────────────── */
html.dark .search-bar {
  border-color: var(--gray-300);
  background: var(--white);
}

html.dark .search-cat {
  background: var(--gray-100);
  color: var(--gray-700);
  border-right-color: var(--gray-300);
}

html.dark .search-input {
  background: transparent;
  color: var(--gray-800);
}

html.dark .search-input::placeholder {
  color: var(--gray-500);
}

/* ── AUTH ────────────────────────────────────────────────── */
html.dark .auth-right {
  background: var(--white);
}

html.dark .auth-left {
  background: linear-gradient(145deg, #172554 0%, #1e3a8a 50%, #1d4ed8 100%);
}

html.dark .auth-form-icon {
  background: var(--blue-50);
  color: #93c5fd;
}

/* ── QUICK ACTIONS ───────────────────────────────────────── */
html.dark .quick-action {
  border-color: var(--gray-200);
  background: transparent;
}

html.dark .quick-action:hover {
  border-color: #3b82f6;
  background: var(--blue-50);
}

html.dark .quick-action-label {
  color: var(--gray-700);
}

/* ── SHOP PAGE ───────────────────────────────────────────── */
html.dark .shop-layout {
  background: var(--gray-50);
}

html.dark .sidebar-item:hover {
  background: var(--blue-50);
  color: #93c5fd;
}

html.dark .sidebar-item.active {
  background: var(--blue-50);
  color: #93c5fd;
}

html.dark .sidebar-count {
  background: var(--gray-200);
  color: var(--gray-600);
}

html.dark .sidebar-item.active .sidebar-count {
  background: #1d4ed8;
}

html.dark .view-btn {
  background: var(--white);
  border-color: var(--gray-300);
  color: var(--gray-500);
}

html.dark .view-btn.active,
html.dark .view-btn:hover {
  border-color: #3b82f6;
  color: #93c5fd;
  background: var(--blue-50);
}

/* ── VARIANT + PAYMENT BUTTONS ───────────────────────────── */
html.dark .variant-btn,
html.dark .payment-method {
  background: var(--white);
  border-color: var(--gray-300);
}

html.dark .variant-btn:hover,
html.dark .payment-method:hover {
  border-color: #3b82f6;
}

html.dark .variant-btn.selected,
html.dark .payment-method.selected {
  border-color: #3b82f6;
  background: var(--blue-50);
}

html.dark .v-name {
  color: var(--gray-800);
}

/* ── QTY SELECTOR ────────────────────────────────────────── */
html.dark .qty-selector {
  border-color: var(--gray-300);
}

html.dark .qty-btn {
  background: var(--gray-100);
  color: var(--gray-600);
}

html.dark .qty-btn:hover {
  background: var(--gray-200);
}

html.dark .qty-value {
  color: var(--gray-800);
}

html.dark .qty-total {
  background: var(--blue-50);
  color: #93c5fd;
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
html.dark .breadcrumb {
  color: var(--gray-500);
}

html.dark .breadcrumb a {
  color: var(--gray-500);
}

html.dark .breadcrumb a:hover {
  color: #93c5fd;
}

html.dark .breadcrumb span {
  color: var(--gray-700);
}

/* ── SKELETON ────────────────────────────────────────────── */
html.dark .skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-300) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
}

/* ── DIVIDER TEXT ────────────────────────────────────────── */
html.dark .divider-text::before,
html.dark .divider-text::after {
  background: var(--gray-300);
}

/* ── FEATURES BAR ────────────────────────────────────────── */
html.dark .features-bar {
  background: var(--gray-100);
  border-top-color: var(--gray-200);
}

html.dark .feature-title {
  color: var(--gray-700);
}

/* ── ORDER SUMMARY ───────────────────────────────────────── */
html.dark .order-summary-header {
  border-bottom-color: var(--gray-200);
}

html.dark .summary-divider {
  border-top-color: var(--gray-200);
}

html.dark .summary-row-label {
  color: var(--gray-600);
}

html.dark .summary-total {
  border-top-color: var(--gray-300);
}

html.dark .summary-feature-icon {
  color: #4ade80;
}

html.dark .summary-feature-title {
  color: var(--gray-700);
}

/* ── HARDCODED OVERRIDES (inline styles + specific components) ── */

/* Referral code section + any white card that slipped through */
html.dark .referral-section,
html.dark .referral-card,
html.dark [class*="referral"],
html.dark .balance-card,
html.dark .stat-card,
html.dark .dash-stat,
html.dark .stat-block {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* Any white box / section inside dashboard content area */
html.dark .dashboard-content>*,
html.dark .user-dash-layout section,
html.dark .dash-main>* {
  background: #1e293b;
  border-color: #334155;
}

/* Generic white background traps */
html.dark section,
html.dark article,
html.dark aside {
  background: inherit;
}

/* Input fields with hardcoded white */
html.dark input,
html.dark textarea,
html.dark select {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

/* Hardcoded #f3f4f6 or similar inline backgrounds */
html.dark [style*="background: #f"],
html.dark [style*="background:#f"],
html.dark [style*="background-color: #f"],
html.dark [style*="background-color:#f"] {
  background: #1e293b !important;
}

/* White background inline */
html.dark [style*="background: white"],
html.dark [style*="background:white"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color: white"],
html.dark [style*="background-color: #fff"] {
  background: #1e293b !important;
}

/* Order card + thumb */
html.dark .order-card {
  border-bottom-color: #334155;
  background: transparent;
}

html.dark .order-thumb {
  background: #334155 !important;
}

html.dark .order-title {
  color: #f1f5f9;
}

html.dark .order-id {
  color: #94a3b8;
}

html.dark .order-date {
  color: #64748b;
}

/* Stats / numbers */
html.dark .dash-balance,
html.dark .balance-amount,
html.dark [class*="amount"],
html.dark [class*="balance-num"] {
  color: #f1f5f9;
}

/* Notification bell area */
html.dark .nb-notif-btn {
  color: var(--gray-600);
}

/* Sidebar user profile box */
html.dark .sidebar-user-name {
  color: #f1f5f9;
}

html.dark .sidebar-user-email {
  color: #94a3b8;
}

/* Page background */
html.dark .page-wrapper,
html.dark .main-content,
html.dark main {
  background: #0f172a;
}

/* ── index.html : koulè ki te kode dirèk nan paj la ── */
html.dark .premium-card,
html.dark .hn-card,
html.dark .cat-pill,
html.dark .social-bar-wrap,
html.dark .ios-sheet,
html.dark #installToast {
  background: var(--white);
  border-color: var(--gray-200);
  color: var(--gray-800);
}

html.dark .social-bar-wrap {
  border-color: var(--gray-200);
}

html.dark .social-bar-label {
  color: var(--gray-500);
}

html.dark .social-bar-divider {
  background: var(--gray-200);
}

html.dark .cat-pill:hover {
  background: var(--blue);
  color: #fff;
}

html.dark .hn-title {
  color: var(--gray-900);
}

html.dark .hn-ex {
  color: var(--gray-500);
}

html.dark .hn-date {
  color: var(--gray-400);
}

html.dark .hn-media {
  background: var(--gray-100);
}

html.dark .faq-item {
  border-bottom-color: var(--gray-200);
}

html.dark .faq-item summary {
  color: var(--gray-800);
}

html.dark .faq-item p {
  color: var(--gray-500);
}

/* Newsletter (degrade inline) */
html.dark section.premium-card[style*="linear-gradient"] {
  background: linear-gradient(135deg, #172554, #2e1065) !important;
}

html.dark #newsletterForm input {
  border-color: var(--gray-300) !important;
}

/* Trustpilot (section ak background:white inline) */
html.dark section[style*="background:white"] {
  background: var(--white) !important;
  border-top-color: var(--gray-200) !important;
}

/* Modal iOS + toast enstalasyon */
html.dark .ios-sheet p,
html.dark #installToast div {
  color: var(--gray-600);
}

html.dark .ios-sheet h3,
html.dark #installToast div[style*="font-weight:800"] {
  color: var(--gray-900);
}

html.dark .ios-steps,
html.dark #iosToastInstr,
html.dark #iosModal .ios-sheet div[style*="background:#f5f7ff"] {
  background: var(--gray-100) !important;
  border-color: var(--gray-200) !important;
}

html.dark .ios-close,
html.dark #installToast button[style*="background:#f3f4f6"] {
  background: var(--gray-200) !important;
  color: var(--gray-700) !important;
}

/* Gradient inline jeneral (eleman ki gen "linear-gradient(...#eff6ff...)") */
html.dark [style*="#eff6ff"],
html.dark [style*="#f5f3ff"] {
  background: var(--blue-50) !important;
}

/* ── Style ki mete pa JS (cssText) — navigatè a konvèti #fff an rgb() ── */
html.dark [style*="background: rgb(255, 255, 255)"],
html.dark [style*="background-color: rgb(255, 255, 255)"] {
  background: var(--white) !important;
}

html.dark [style*="border: 1px solid rgb(226, 232, 240)"],
html.dark [style*="border: 1.5px solid rgb(226, 232, 240)"] {
  border-color: var(--gray-200) !important;
}

/* Tèks nwa (#0f172a) ak gri (#64748b) ki te kode dirèk */
html.dark [style*="color: rgb(15, 23, 42)"] {
  color: var(--gray-900) !important;
}

html.dark [style*="color: rgb(100, 116, 139)"] {
  color: var(--gray-500) !important;
}

/* Pa touche tèks sou imaj pub yo (yo deja sou degrade nwa) */
html.dark .pub-overlay,
html.dark .pub-overlay * {
  color: #fff !important;
}

html.dark .why-grid>div:nth-child(3) {
  background: #451a03 !important;
}

/* ── Navbar: dropdown notifikasyon + drawer (koulè inline nan main.js) ── */
html.dark #userNotifDropdown,
body.dark #userNotifDropdown {
  background: var(--white) !important;
  border-color: var(--gray-200) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
}

html.dark #userNotifDropdown a,
body.dark #userNotifDropdown a {
  border-top-color: var(--gray-200) !important;
}

/* chak notifikasyon: deja li (blan) / pa li (#eef2ff) */
html.dark #userNotifList>div,
body.dark #userNotifList>div {
  background: var(--white) !important;
  border-bottom-color: var(--gray-200) !important;
}

html.dark #userNotifList>div[style*="#eef2ff"],
body.dark #userNotifList>div[style*="#eef2ff"] {
  background: var(--blue-50) !important;
}

/* ranje notifikasyon nan drawer mobil */
html.dark .nb-drawer-user div[onclick*="toggleUserNotifications"],
body.dark .nb-drawer-user div[onclick*="toggleUserNotifications"] {
  background: var(--blue-50) !important;
}

/* skeleton kat pwodwi */
html.dark .product-card>div[style*="#f3f4f6"],
body.dark .product-card>div[style*="#f3f4f6"] {
  background: var(--gray-100) !important;
}

/* ===== FIKS DARK MODE ===== */

/* Variab pou koulè kreyèm/oranj */
:root {
  --gold-50: #fffbeb;
  --orange-50: #fff7ed;
}

html.dark,
body.dark {
  --gold-50: #451a03;
  --orange-50: #431407;
}

/* Navbar: bwat notifikasyon */
html.dark #userNotifDropdown,
body.dark #userNotifDropdown {
  background: var(--white) !important;
  border-color: var(--gray-200) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
}

html.dark #userNotifDropdown a,
body.dark #userNotifDropdown a {
  border-top-color: var(--gray-200) !important;
}

html.dark #userNotifList>div,
body.dark #userNotifList>div {
  background: var(--white) !important;
  border-bottom-color: var(--gray-200) !important;
}

html.dark #userNotifList>div[style*="#eef2ff"],
body.dark #userNotifList>div[style*="#eef2ff"] {
  background: var(--blue-50) !important;
}

html.dark .nb-drawer-user div[onclick*="toggleUserNotifications"],
body.dark .nb-drawer-user div[onclick*="toggleUserNotifications"] {
  background: var(--blue-50) !important;
}

html.dark .product-card>div[style*="#f3f4f6"],
body.dark .product-card>div[style*="#f3f4f6"] {
  background: var(--gray-100) !important;
}

html.dark .nb-drawer,
body.dark .nb-drawer {
  background: var(--white) !important;
}

html.dark [style*="#eff6ff"],
html.dark [style*="#f0f9ff"],
html.dark [style*="#f5f3ff"],
html.dark [style*="#eef2ff"],
html.dark [style*="#f0f7ff"] {
  background: var(--blue-50) !important;
  border-color: var(--gray-200) !important;
}