/* ============================================================
   Design system — Charcoal + Orange
   Bootstrap color overrides (apply everywhere without changing templates)
   ============================================================ */

/* Override Bootstrap's blue "primary" with orange throughout */
.text-primary { color: var(--primary) !important; }
a.text-primary:hover { color: var(--primary-d) !important; }

.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

/* Buttons */
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--primary-d) !important; border-color: var(--primary-d) !important; color: #fff !important; }
.btn-primary:disabled { background: var(--primary); border-color: var(--primary); opacity: .55; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); font-weight: 500; }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Category filter buttons on search */
.btn-outline-secondary { color: var(--dark-3); border-color: var(--border); font-size: .8rem; }
.btn-outline-secondary:hover { background: var(--dark); border-color: var(--dark); color: #fff; }

/* Pagination */
.page-link { color: var(--primary); border-color: var(--border); }
.page-link:hover { color: var(--primary-d); background: #fff8f3; border-color: var(--border); }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Badges */
.bg-success { background-color: #16a34a !important; }
.badge.bg-primary { background: var(--primary) !important; }

/* Form controls focus ring */
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(249,115,22,.2); }

/* Links */
a { color: var(--primary); }
a:hover { color: var(--primary-d); }
.text-decoration-none { color: inherit; }
.text-decoration-none:hover { color: inherit; }
:root {
  --primary:   #f97316;
  --primary-d: #ea6400;
  --dark:      #111827;
  --dark-2:    #1f2937;
  --dark-3:    #374151;
  --muted:     #9ca3af;
  --border:    #e5e7eb;
  --bg:        #f9fafb;
  --accent:    #f97316;
  /* legacy alias used elsewhere */
  --primary-blue: #1e3a5f;
}

/* ============================================================
   Base
   ============================================================ */
html { height: 100%; }
body {
  background: var(--bg);
  font-family: 'Segoe UI', Tahoma, sans-serif;
  padding-top: 64px;
  padding-bottom: 44px;
  min-height: 100vh;
  color: #1f2937;
}

/* ============================================================
   Navbar (overrides Bootstrap)
   ============================================================ */
.navbar { background: var(--dark) !important; min-height: 64px; box-shadow: 0 2px 12px rgba(0,0,0,0.28); }
.navbar .nav-link { color: #e5e7eb !important; font-size: 0.88rem; font-weight: 500; padding: 0.45rem 0.65rem !important; border-radius: 6px; transition: color .15s, background .15s; }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #fff !important; background: rgba(249,115,22,.15); }
.navbar .navbar-brand { color: #fff !important; }

/* Produse button */
#catDropdownTrigger { border-right: 2px solid rgba(255,255,255,.12) !important; transition: background .15s; }
#catDropdownTrigger:hover { background: var(--primary-d) !important; }
#catDropdownTrigger::after { display: none; }

/* Category dropdown */
.category-dropdown { border-radius: 0 0 10px 10px !important; box-shadow: 0 12px 32px rgba(0,0,0,0.22) !important; border: 1px solid rgba(255,255,255,.06) !important; background: var(--dark-2) !important; }
.category-dropdown .dd-item { color: #e5e7eb !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.category-dropdown .dd-item:hover { background: rgba(249,115,22,.12) !important; color: #fff !important; }
.category-dropdown .dd-item i.bi:not(.dd-arrow) { color: var(--primary) !important; }
.category-dropdown .dd-sub { background: rgba(0,0,0,.15) !important; padding-left: 32px; }
.category-dropdown .dd-sub a { color: #9ca3af !important; font-size: 0.8rem; padding: 5px 12px; display: block; text-decoration: none; }
.category-dropdown .dd-sub a:hover { color: var(--primary) !important; }
.category-dropdown .dd-arrow { color: #6b7280 !important; }
.category-dropdown .badge { background: rgba(249,115,22,.18) !important; color: var(--primary) !important; }

/* Search input */
#searchInput { background: rgba(255,255,255,.10) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.15) !important; }
#searchInput::placeholder { color: rgba(255,255,255,.45) !important; }
#searchInput:focus { background: rgba(255,255,255,.18) !important; border-color: var(--primary) !important; }

/* Cart button in nav */
.cart-btn-nav { height: 52px !important; border-radius: 8px !important; color: #e5e7eb !important; }
.cart-btn-nav:hover { background: rgba(249,115,22,.15) !important; color: #fff !important; }
.cart-btn-nav #cartCount { background: var(--primary) !important; color: #fff !important; }

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-d); border-color: var(--primary-d); color: #fff; }

.btn-accent {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 6px 20px rgba(249,115,22,.35);
}
.btn-accent:hover { background: linear-gradient(135deg, var(--primary-d), #d35400); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(249,115,22,.45); }

.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ============================================================
   Hero Banner
   ============================================================ */
.hero-section {
  background: linear-gradient(135deg, #111827 0%, #1f2937 60%, #111827 100%);
  border-radius: 16px;
  padding: 56px 32px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -5%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(249,115,22,.22) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -25%;
  left: -5%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(249,115,22,.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; }
.hero-content h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.hero-content p { font-size: 1.05rem; line-height: 1.7; color: #d1d5db; }
.hero-badge {
  display: inline-block;
  background: rgba(249,115,22,.18);
  color: var(--primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid rgba(249,115,22,.3);
  margin-bottom: 12px;
}

/* ============================================================
   Trust badges
   ============================================================ */
.trust-badges { display: flex; flex-wrap: wrap; gap: 0; border-radius: 14px; overflow: hidden; background: var(--dark); border: 1px solid rgba(255,255,255,.06); }
.trust-badge {
  flex: 1;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.trust-badge:last-child { border-right: none; }
.trust-badge-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: rgba(249,115,22,.14); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--primary); }
.trust-badge-text strong { display: block; font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.2; }
.trust-badge-text span { font-size: .78rem; color: #9ca3af; }

/* ============================================================
   Category cards
   ============================================================ */
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 24px 12px;
  text-decoration: none;
  color: var(--dark);
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
  height: 100%;
  min-height: 115px;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(249,115,22,.16);
  border-color: var(--primary);
  background: #fff8f3;
  color: var(--dark);
  text-decoration: none;
}
.category-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: #fff5ec; color: var(--primary); margin-bottom: 10px;
}
.category-icon i { font-size: 1.45rem; }
.category-name { font-size: .88rem; font-weight: 600; text-align: center; line-height: 1.3; color: var(--dark-2); }

/* ============================================================
   Section titles
   ============================================================ */
.section-title {
  font-size: 1.3rem; font-weight: 700; color: var(--dark);
  position: relative; padding-bottom: 8px;
}
.section-title::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 36px; height: 3px;
  background: var(--primary); border-radius: 2px;
}

/* ============================================================
   Product cards
   ============================================================ */
.product-card {
  transition: transform .2s, box-shadow .2s;
  border: 1.5px solid var(--border) !important;
  box-shadow: none;
  border-radius: 12px !important;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.10); border-color: var(--primary) !important; }

.card-img-wrapper {
  height: 175px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fafafa; padding: 10px;
  border-radius: 10px 10px 0 0;
}
.card-img-wrapper img { max-height: 100%; max-width: 100%; object-fit: contain; }
.cat-img-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px 8px 0 0;
}
.cat-img-ph .bi { font-size: 3.2rem; }

/* ============================================================
   Footer — fixed compact bar (like header)
   ============================================================ */
.site-footer-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 44px;
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 1030;
  font-size: .72rem;
}

/* Left */
.sfb-left { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; flex-shrink: 1; min-width: 0; }
.sfb-logo { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .85; flex-shrink: 0; }
.sfb-name-link { color: var(--primary); font-weight: 700; font-size: .76rem; white-space: nowrap; text-decoration: none; transition: opacity .15s; }
.sfb-name-link:hover { opacity: .8; color: var(--primary); }
.sfb-sep  { color: rgba(255,255,255,.35); flex-shrink: 0; }
.sfb-loc  { color: #c9d0db; font-size: .72rem; }
.sfb-company-data { color: rgba(255,255,255,.3); font-size: .65rem; }
.sfb-copy { color: rgba(255,255,255,.3); font-size: .65rem; }

/* Center: legal links */
.sfb-center { display: flex; align-items: center; gap: 12px; position: absolute; left: 50%; transform: translateX(-50%); flex-shrink: 0; }
.sfb-center a { color: #e5e7eb; text-decoration: none; font-size: .71rem; font-weight: 600; transition: color .15s; white-space: nowrap; }
.sfb-center a:hover { color: var(--primary); }

/* Right: payment logos */
.sfb-right-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Mobile rows container */
.sfb-mobile-rows {
  display: flex; flex-direction: column; width: 100%; gap: 5px;
}

/* Mobile links row */
.sfb-mobile-links-row {
  display: flex; align-items: center; gap: 4px 8px;
  flex-wrap: wrap; justify-content: center;
}
.sfb-mobile-links-row a { color: #e5e7eb; text-decoration: none; font-size: .68rem; font-weight: 600; transition: color .15s; white-space: nowrap; }
.sfb-mobile-links-row a:hover { color: var(--primary); }

/* Mobile brand row (two columns: brand | payment) */
.sfb-mobile-brand-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap;
}
.sfb-mobile-brand-col {
  display: flex; align-items: center; gap: 4px;
  overflow: hidden; white-space: nowrap; min-width: 0;
}
.sfb-mobile-brand-col .sfb-logo { height: 20px; }
.sfb-mobile-brand-col .sfb-name-link { font-size: .7rem; }
.sfb-mobile-brand-col .sfb-copy { font-size: .55rem; color: rgba(255,255,255,.3); }

/* Mobile payment logos column */
.sfb-mobile-pay-col {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}

/* Contact tab — styles now inline in main.ejs */

/* Search results */
#searchResults a:hover { background: #fff8f3 !important; }
#searchResults { font-size: .88rem; }

/* ============================================================
   Partner cards
   ============================================================ */
.partner-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 24px 16px; text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.partner-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.09); border-color: var(--primary); }
a.partner-card-link { text-decoration: none; }
a.partner-card-link .partner-name { color: #374151; }
a.partner-card-link:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
.partner-logo { max-height: 60px; max-width: 100%; margin-bottom: 10px; object-fit: contain; }
.partner-name { font-size: .82rem; color: #374151; margin: 0; }
.partners-page { padding: 40px 0; }

/* ============================================================
   Admin
   ============================================================ */
.admin-card .card-header { background: #fff; border-bottom: 2px solid var(--primary); font-weight: 600; padding: 12px 16px; }
.admin-card .card-body { padding: 0; }
.admin-table th { background: #f9fafb; font-size: .8rem; text-transform: uppercase; letter-spacing: .3px; color: #6b7280; border-bottom: 2px solid #e5e7eb; }
.admin-table td { vertical-align: middle; font-size: .9rem; }
.admin-table tr:hover { background: #fff8f3; }

/* ============================================================
   Page layout utilities
   ============================================================ */
.page-content { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.page-wrapper { max-width: 1000px; margin: 0 auto; }
.page-wrapper .card { border: none; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.sidebar-content { flex: 1; min-width: 0; padding: 20px 24px; }
.page-fit { height: calc(100vh - 64px); overflow: hidden; display: flex; flex-direction: column; }
.page-fit .scrollable-content { flex: 1; overflow-y: auto; min-height: 0; }
.has-cta { padding-bottom: 200px !important; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991px) { .sidebar-content { padding: 16px 12px; width: 100%; } }

@media (max-width: 991px) {
  /* Category grid: 3 per row on tablet/mobile instead of 2 */
  .category-card { min-height: 90px; padding: 16px 8px; }
  .category-icon { width: 40px; height: 40px; }
  .category-icon i { font-size: 1.2rem; }
  .category-name { font-size: .8rem; }
}

@media (max-width: 768px) {
  /* Header — mobile layout: menu | search (centered) | cart */
  .navbar .container-fluid { flex-wrap: nowrap !important; }
  .navbar .container-fluid > .d-flex.align-items-center {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .navbar .container-fluid > .d-flex.align-items-center > .d-flex.align-items-center.gap-1 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #searchForm { flex: 1 !important; min-width: 0 !important; max-width: 180px !important; margin: 0 auto !important; }
  #searchInput { width: 100% !important; font-size: .78rem !important; }

  /* Mobile menu button — more prominent */
  #mobileMenuBtn {
    background: var(--primary) !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 2px 8px rgba(249,115,22,.35);
  }

  /* Cart button — right edge */
  .cart-btn-nav { min-width: 44px !important; padding: 4px 8px !important; }

  /* Layout */
  body { padding-bottom: 72px; }
  .page-fit { height: auto !important; overflow: visible !important; }
  .page-fit .scrollable-content { overflow: visible !important; }

  /* Hero */
  .hero-section { padding: 28px 16px; }
  .hero-content h1 { font-size: 1.55rem; }
  .hero-content p { font-size: .88rem; }
  .hero-badge { font-size: .68rem; }

  /* Trust badges: 2x2 grid instead of vertical stack */
  .trust-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .trust-badge { border-right: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
  .trust-badge:nth-child(2n) { border-right: none; }
  .trust-badge:nth-child(3), .trust-badge:nth-child(4) { border-bottom: none; }
  .trust-badge-icon { width: 32px; height: 32px; font-size: .95rem; }
  .trust-badge-text strong { font-size: .82rem; }
  .trust-badge-text span { font-size: .72rem; }

  /* Category dropdown fullscreen */
  .category-dropdown { position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; max-height: calc(100vh - 64px) !important; min-width: auto !important; border-radius: 0 !important; }

  /* Product cards: 2 per row stays but tighter */
  .card-img-wrapper { height: 130px; }

  /* Footer: 2 rows only on mobile — payment logos + links */
  .site-footer-bar { height: auto; flex-wrap: wrap; padding: 4px 12px; gap: 0; }
  .sfb-left { display: none !important; }

  /* Blob: stay above mobile footer */
  :root { --blob-bottom: 68px; }
}

/* ============================================================
   Cookie Consent Banner
   ============================================================ */
.cookie-consent-banner {
  position: fixed;
  bottom: 44px;
  left: 0; right: 0;
  background: var(--dark);
  border-top: 2px solid var(--primary);
  padding: 12px 16px;
  z-index: 1050;
  box-shadow: 0 -4px 20px rgba(0,0,0,.25);
}
.cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-text {
  color: #d1d5db;
  font-size: .82rem;
  line-height: 1.5;
  flex: 1;
}
.cookie-text a { color: var(--primary); text-decoration: underline; }
.cookie-accept-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: .82rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s;
}
.cookie-accept-btn:hover { background: var(--primary-d); }

@media (max-width: 768px) {
  .cookie-consent-banner { bottom: 68px; padding: 10px 12px; }
  .cookie-inner { flex-direction: column; text-align: center; gap: 10px; }
  .cookie-text { font-size: .78rem; }
}



@media (max-width: 576px) {
  body { padding-bottom: 72px; }
  #searchInput { width: 100% !important; }
  .cart-btn-nav small { display: none !important; } /* hide cart subtotal text on tiny screens */
  .hero-section { padding: 22px 12px; border-radius: 10px; }
  .hero-content h1 { font-size: 1.3rem; }
  .hero-content .btn { font-size: .85rem; padding: .5rem 1.2rem; }

  /* 3 columns for categories on small phones */
  .category-card { min-height: 80px; padding: 12px 6px; }
  .category-icon { width: 34px; height: 34px; margin-bottom: 6px; }
  .category-icon i { font-size: 1rem; }
  .category-name { font-size: .72rem; }
}

/* === Touch targets: ensure minimum 44x44px for interactive elements === */
@media (pointer: coarse) {
  .sfb-mobile-brand a,
  .footer-heading + ul li a,
  .sidebar-subcat,
  .scat-pill,
  .desktop-cat-pills .btn,
  .search-layout .btn,
  #sortSelect,
  #inStockFilter + span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* === Accessibility: respect reduced motion preference === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}