/* ================================================================
   dark-theme.css — Global dark design for all inner pages
   Applied via index.php on all pages except homepage (which has own styles)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── Base ────────────────────────────────────────────── */
:root {
  --dark-bg:      #0a0a14;
  --dark-surface: #12121f;
  --dark-card:    rgba(255,255,255,.05);
  --dark-border:  rgba(255,255,255,.09);
  --dark-text:    #e8eaf6;
  --dark-muted:   rgba(232,234,246,.60);
  --accent:       #6366f1;
  --accent-2:     #8b5cf6;
  --danger:       #f43f5e;
}

body {
  background: var(--dark-bg) !important;
  color: var(--dark-text) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography — override all dark/primary colored text ── */
a { color: var(--dark-text); }
a:hover { color: var(--accent); }
h1, h2, h3, h4, h5, h6 { color: var(--dark-text) !important; font-family: 'Inter', sans-serif !important; font-weight: 700; letter-spacing: -.02em; }
p { color: var(--dark-text); }
.text-muted   { color: var(--dark-muted) !important; }
.text-dark    { color: var(--dark-text) !important; }
.text-primary { color: var(--accent) !important; }
small, .small { color: var(--dark-muted) !important; }

/* ── Header ──────────────────────────────────────────── */
header {
  background: rgba(10,10,20,.9) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--dark-border) !important;
  position: sticky; top: 0; z-index: 1000;
}

header .logo a img { filter: brightness(0) invert(1); opacity: .9; }
header .dropdown-title { color: var(--dark-text) !important; }
header .btn-menu { color: var(--dark-text) !important; }
header .navbar-brand { color: var(--dark-text) !important; }

/* search in header */
header .global-search input {
  background: rgba(255,255,255,.07) !important;
  border: 1.5px solid var(--dark-border) !important;
  color: #fff !important;
  border-radius: 10px 0 0 10px;
  font-family: 'Inter', sans-serif !important;
}
header .global-search input::placeholder { color: var(--dark-muted); }
header .global-search input:focus { border-color: rgba(99,102,241,.5) !important; outline: none; box-shadow: none; }
header .global-search .btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: 0 10px 10px 0;
  font-weight: 600;
}

/* dropdown */
header .dropdown-menu {
  background: #1a1a2e !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
header .dropdown-item { color: var(--dark-text) !important; }
header .dropdown-item:hover { background: rgba(99,102,241,.15) !important; color: #fff !important; }
header .dropdown-header { color: var(--dark-muted) !important; }
header .dropdown-divider { border-color: var(--dark-border) !important; }

/* icons */
.header-icon-menu { color: var(--dark-text) !important; }
.header-icon-menu:hover { color: var(--accent) !important; }

/* ── Content blocks ──────────────────────────────────── */
.content-block, .card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 16px !important;
  color: var(--dark-text) !important;
}
.card-body { color: var(--dark-text) !important; }
.card { box-shadow: none !important; }

/* ── Breadcrumb ──────────────────────────────────────── */
.breadcrumb { background: transparent !important; margin-bottom: .5rem; }
.breadcrumb-item a { color: var(--dark-muted) !important; text-decoration: none; font-size: .85rem; }
.breadcrumb-item a:hover { color: var(--accent) !important; }
.breadcrumb-item.active { color: var(--dark-text) !important; font-size: .85rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--dark-border) !important; }

/* ── Product card ────────────────────────────────────── */
/* Both .product (style.css class) and .product-item/.product-card */
.product, .product-item, .product-card {
  background: var(--dark-card) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 14px !important;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.product:hover, .product-item:hover {
  transform: translateY(-3px);
  border-color: rgba(99,102,241,.3) !important;
  box-shadow: 0 12px 32px rgba(99,102,241,.1) !important;
}

/* Product title — fix: was var(--primary) = #022335 dark navy → INVISIBLE */
.product-title a,
.product-item .product-title a,
.product-card .product-title a {
  color: var(--dark-text) !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  font-family: 'Inter', sans-serif !important;
}
.product-title a:hover { color: var(--accent) !important; text-decoration: none !important; }

/* Product brand — fix: was var(--primary) → invisible */
.product-brand {
  color: var(--dark-muted) !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-bottom: 1px solid var(--dark-border) !important;
}

/* Price */
.product-price .price,
.product-item .product-price,
.price {
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
}
.product-price .on-sale { color: rgba(244,63,94,.85) !important; }

/* Merchant label */
.product-merchant,
.product-item .product-merchant { color: var(--dark-muted) !important; font-size: .8rem !important; }

/* Product images */
.product-item img, .product img { border-radius: 10px; }

/* ── Filters sidebar ─────────────────────────────────── */
.filter, .filters-block {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 14px !important;
  padding: 20px;
}
.filter h6, .filters-block h6,
.filter label, .filters-block label {
  color: var(--dark-text) !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Fix: .filter a was color: var(--primary) = #022335 → invisible */
.filter a, .filters-block a {
  color: var(--dark-muted) !important;
  font-size: .88rem !important;
  text-decoration: none !important;
  transition: color .15s;
}
.filter a:hover, .filter a.active,
.filters-block a:hover, .filters-block a.active {
  color: var(--accent) !important;
}

.form-check-label { color: var(--dark-muted) !important; }
.form-check-input { background-color: var(--dark-surface); border-color: var(--dark-border); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ── Inputs ──────────────────────────────────────────── */
.form-control, .form-select {
  background: rgba(255,255,255,.07) !important;
  border: 1.5px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
}
.form-control:focus, .form-select:focus {
  border-color: rgba(99,102,241,.5) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  background: rgba(255,255,255,.09) !important;
}
.form-control::placeholder { color: var(--dark-muted) !important; }
.form-select option { background: #1a1a2e; color: #e8eaf6; }

/* ── Buttons ─────────────────────────────────────────── */
.btn-danger, .c2a {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #fff !important;
}
.btn-danger:hover {
  box-shadow: 0 8px 24px rgba(99,102,241,.4) !important;
  transform: translateY(-1px);
  color: #fff !important;
}
.btn-outline-dark {
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  border-radius: 12px !important;
}
.btn-outline-dark:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.btn-fav { color: #f43f5e !important; font-size: 1.3rem; background: transparent !important; border: none !important; }
.btn-secondary {
  background: rgba(255,255,255,.1) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  border-radius: 12px !important;
}

/* ── Badges ──────────────────────────────────────────── */
.badge.bg-light { background: rgba(255,255,255,.1) !important; color: var(--dark-text) !important; }
.badge.bg-danger { background: var(--accent) !important; color: #fff !important; }

/* ── Product detail page ─────────────────────────────── */
#product-details h1 { font-size: clamp(1.4rem, 3vw, 2rem); color: #fff !important; font-weight: 800 !important; }
#product-details .text-dark,
#product-details p,
#product-details span,
#product-details small  { color: var(--dark-text) !important; }

/* DETALII / ALTE DETALII labels */
.fw-bold.small.text-uppercase { color: var(--dark-muted) !important; letter-spacing: .06em; font-size: .75rem !important; }
.fw-bold.text-uppercase { color: var(--dark-muted) !important; }

/* Price tag on product page */
.text-danger { color: var(--accent) !important; }
h3.fw-bold.text-danger { color: #fff !important; font-size: 2.2rem; font-weight: 800 !important; }

/* Merchant/Brand on product page */
#product-details a { color: var(--dark-muted) !important; }
#product-details a:hover { color: var(--accent) !important; }

/* ── Sort tabs ───────────────────────────────────────── */
#sort a {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--dark-border) !important;
  color: var(--dark-muted) !important;
  border-radius: 8px !important;
  font-size: .85rem !important;
  text-decoration: none !important;
  padding: 4px 12px !important;
  transition: all .15s;
}
#sort a:hover, #sort a.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ── Pagination ──────────────────────────────────────── */
.page-link {
  background: var(--dark-card) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
}
.page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.page-link:hover { background: rgba(99,102,241,.15) !important; color: var(--accent) !important; }

/* ── Table ───────────────────────────────────────────── */
.table { color: var(--dark-text) !important; }
.table thead th, .bg-light {
  background: rgba(255,255,255,.04) !important;
  color: var(--dark-muted) !important;
  border-color: var(--dark-border) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}
.table td, .table th { border-color: var(--dark-border) !important; color: var(--dark-text) !important; }

/* ── Search headline ─────────────────────────────────── */
#search-headline { color: var(--dark-text) !important; font-weight: 700 !important; }
#search-headline span { color: var(--accent) !important; }
.section-title { color: var(--dark-text) !important; font-size: clamp(1.2rem,3vw,1.8rem); font-weight: 700 !important; }

/* ── Selectize ───────────────────────────────────────── */
.selectize-input {
  background: rgba(255,255,255,.07) !important;
  border: 1.5px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
}
.selectize-dropdown { background: #1a1a2e !important; border-color: var(--dark-border) !important; }
.selectize-dropdown .option { color: var(--dark-text) !important; }
.selectize-dropdown .option:hover, .selectize-dropdown .option.active { background: rgba(99,102,241,.15) !important; }

/* ── Alerts ──────────────────────────────────────────── */
.alert-danger  { background: rgba(244,63,94,.12) !important;  border-color: rgba(244,63,94,.3) !important;  color: #fca5a5 !important; }
.alert-warning { background: rgba(251,191,36,.1) !important;  border-color: rgba(251,191,36,.25) !important; color: #fcd34d !important; }
.alert-success { background: rgba(52,211,153,.1) !important;  border-color: rgba(52,211,153,.25) !important; color: #6ee7b7 !important; }

/* ── Footer ──────────────────────────────────────────── */
footer {
  background: #070710 !important;
  border-top: 1px solid var(--dark-border) !important;
}
footer * { color: var(--dark-muted) !important; font-size: .85rem !important; }
footer a:hover { color: var(--accent) !important; }

/* ── Lightslider gallery ─────────────────────────────── */
.lSSlideOuter, .lSGallery { background: transparent !important; }
.lSGallery li { border-radius: 8px; border: 2px solid var(--dark-border) !important; }
.lSGallery li.active { border-color: var(--accent) !important; }

/* ── Sticky filter for mobile ────────────────────────── */
#filters-modal .modal-content {
  background: #1a1a2e !important;
  border: 1px solid var(--dark-border) !important;
}
#filters-modal .modal-header { border-bottom: 1px solid var(--dark-border) !important; color: var(--dark-text) !important; }
#filters-modal .btn-close { filter: invert(1); }

/* ── Nav tabs (product page) ─────────────────────────── */
#tabs .nav-link { color: var(--dark-muted) !important; background: transparent !important; border: none !important; font-weight: 500 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; padding: .5rem 1rem !important; }
#tabs .nav-link.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; font-weight: 700 !important; }
#tabs .nav-link:hover { color: var(--dark-text) !important; }

/* ── List group (col menu) ───────────────────────────── */
#col-menu .list-group-item { background: transparent !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; }
#col-menu .list-group-item.active { background: rgba(99,102,241,.15) !important; border-color: rgba(99,102,241,.3) !important; color: var(--accent) !important; font-weight: 700 !important; }
#col-menu a { color: var(--dark-text) !important; text-decoration: none; }
#col-menu a:hover { color: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════
   BACKEND / ADMIN PAGES
   ═══════════════════════════════════════════════════════ */

/* ── Card header / footer ────────────────────────────── */
.card-header {
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
  font-weight: 600 !important;
}
.card-footer {
  background: rgba(255,255,255,.04) !important;
  border-top: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
}

/* ── btn-dark on dark bg: use accent instead ─────────── */
.btn-dark {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: var(--dark-text) !important;
  border-radius: 10px !important;
}
.btn-dark:hover {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

/* ── btn-light on dark bg: near-invisible → fix ──────── */
.btn-light {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--dark-text) !important;
  border-radius: 10px !important;
}
.btn-light:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

/* ── btn-success ─────────────────────────────────────── */
.btn-success {
  background: linear-gradient(135deg,#10b981,#059669) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 10px !important;
}
.btn-success:hover { box-shadow: 0 6px 20px rgba(16,185,129,.35) !important; transform: translateY(-1px); color: #fff !important; }

/* ── btn-outline-success / outline-danger / outline-dark  */
.btn-outline-success { border-color: #10b981 !important; color: #10b981 !important; border-radius: 10px !important; }
.btn-outline-success:hover { background: rgba(16,185,129,.15) !important; }
.btn-outline-danger { border-color: var(--danger) !important; color: var(--danger) !important; border-radius: 10px !important; }
.btn-outline-danger:hover { background: rgba(244,63,94,.12) !important; }
.btn-outline-dark { border-color: var(--dark-border) !important; color: var(--dark-text) !important; border-radius: 10px !important; }
.btn-outline-dark:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
/* btn-sm adjustments */
.btn-sm { padding: .25rem .6rem !important; font-size: .8rem !important; }

/* ── Form elements ───────────────────────────────────── */
.form-label { color: var(--dark-text) !important; font-weight: 500 !important; font-size: .88rem !important; }
.input-group-text {
  background: rgba(255,255,255,.07) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-muted) !important;
}
fieldset legend { color: var(--dark-text) !important; }

/* ── Modals ──────────────────────────────────────────── */
.modal-content {
  background: #13131f !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 80px rgba(0,0,0,.6) !important;
}
.modal-header {
  background: rgba(255,255,255,.04) !important;
  border-bottom: 1px solid var(--dark-border) !important;
  color: var(--dark-text) !important;
  border-radius: 16px 16px 0 0 !important;
}
.modal-footer {
  background: rgba(255,255,255,.03) !important;
  border-top: 1px solid var(--dark-border) !important;
  border-radius: 0 0 16px 16px !important;
}
.modal-body { color: var(--dark-text) !important; }
.modal-title { color: var(--dark-text) !important; font-weight: 700 !important; }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; }
.modal-backdrop { background: rgba(0,0,0,.7) !important; }

/* ── Nav tabs (global, any page) ─────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--dark-border) !important; }
.nav-tabs .nav-link {
  color: var(--dark-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  padding: .5rem 1rem !important;
  transition: color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover { color: var(--dark-text) !important; border-bottom-color: var(--dark-border) !important; }
.nav-tabs .nav-link.active {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 700 !important;
  background: transparent !important;
}
.tab-content { color: var(--dark-text) !important; }
.tab-content .border-start, .tab-content .border-end,
.tab-content .border-bottom, .tab-content .border-top {
  border-color: var(--dark-border) !important;
}

/* ── Borders ─────────────────────────────────────────── */
.border, .border-bottom, .border-top, .border-start, .border-end {
  border-color: var(--dark-border) !important;
}
hr { border-color: var(--dark-border) !important; opacity: 1 !important; }

/* ── Status / text colors ────────────────────────────── */
.text-success { color: #34d399 !important; }
.text-warning { color: #fbbf24 !important; }
.text-info    { color: #38bdf8 !important; }
.badge.bg-secondary { background: rgba(255,255,255,.12) !important; color: var(--dark-text) !important; }
.badge.bg-success   { background: rgba(52,211,153,.2) !important; color: #34d399 !important; border: 1px solid rgba(52,211,153,.3) !important; }

/* ── Table enhancements ──────────────────────────────── */
.table-responsive { border-radius: 12px !important; overflow: hidden !important; }
.table tr:hover td { background: rgba(255,255,255,.03) !important; }
.table-striped tbody tr:nth-of-type(odd) td { background: rgba(255,255,255,.02) !important; }

/* ── List group ──────────────────────────────────────── */
.list-group-item {
  background: rgba(255,255,255,.03) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text) !important;
}
.list-group-item:hover { background: rgba(255,255,255,.06) !important; }
.list-group-item.active { background: rgba(99,102,241,.2) !important; border-color: rgba(99,102,241,.4) !important; color: var(--accent) !important; }

/* ── Progress bar ────────────────────────────────────── */
.progress { background: rgba(255,255,255,.08) !important; border-radius: 99px !important; }
.progress-bar { background: var(--accent) !important; }

/* ── Tooltip ─────────────────────────────────────────── */
.tooltip-inner { background: #1a1a2e !important; color: var(--dark-text) !important; border: 1px solid var(--dark-border) !important; }
.tooltip .tooltip-arrow::before { border-top-color: var(--dark-border) !important; }

/* ── Dropdown (general) ──────────────────────────────── */
.dropdown-menu {
  background: #1a1a2e !important;
  border: 1px solid var(--dark-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  border-radius: 12px !important;
}
.dropdown-item { color: var(--dark-text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(99,102,241,.15) !important; color: #fff !important; }
.dropdown-divider { border-color: var(--dark-border) !important; }
.dropdown-header { color: var(--dark-muted) !important; font-size: .75rem !important; }