/**
 * Don Food — theme overrides (per-client CSS)
 *
 * Incarcat dupa toate CSS-urile shared + dupa :root inline din layout.php,
 * deci tot ce pun aici castiga cascada.
 *
 * Ultima modificare: 2026-04-23 21:40
 * Modificari:
 *   2026-04-23 21:40 — Creare initiala: logo mare, header distinct pe toate
 *                       paginile, FAQ fundal dark, hero dots pe primary.
 */

/* ==========================================================================
   1. Logo dimensions — logo mare, dar header NU creste in inaltime
   --------------------------------------------------------------------------
   Logo-ul se incadreaza in bara; padding-ul navbar-inner e redus ca header-ul
   sa ramana compact si consistent pe toate paginile.
   ========================================================================== */
:root {
  --logo-height: 68px;          /* dimensiune fizica in layout */
  --logo-height-mobile: 52px;
  --logo-scale: 1.55;           /* factor vizual — logo pare ~105px fara sa umfle header-ul */
  --logo-scale-mobile: 1.4;
}

/* Header stays compact; logo "sare" vizual peste limite folosind transform:scale
   — scale nu afecteaza layout, deci header-ul ramane la aceeasi inaltime. */
body .site-navbar .navbar-inner {
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  min-height: 76px;
  overflow: visible;
}

body .site-navbar {
  overflow: visible !important;
}

body .navbar-logo {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: visible;
}

body .navbar-logo img {
  height: var(--logo-height, 68px);
  width: auto;
  object-fit: contain;
  display: block;
  transform: scale(var(--logo-scale, 1));
  transform-origin: left center;
  transition: transform 0.25s ease;
}

@media (max-width: 767.98px) {
  body .site-navbar .navbar-inner {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    min-height: 58px;
  }
  body .navbar-logo img {
    height: var(--logo-height-mobile, 52px);
    transform: scale(var(--logo-scale-mobile, 1));
  }
}

/* ==========================================================================
   2. Header / navbar — distinct fata de body dark, CONSISTENT pe toate paginile
   --------------------------------------------------------------------------
   Body bg = #1A1A1D (color-bg). Header il fac mai DARK (#0E0E10) + bottom
   accent rosu subtil si shadow premium, ca sa "sar a" de pe dark-ul paginii.
   `body .site-navbar` forteaza peste orice override per-pagina.
   ========================================================================== */
body .site-navbar {
  background-color: #0E0E10 !important;
  border-bottom: 1px solid rgba(239, 68, 68, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  /* NU aplicam backdrop-filter aici: creeaza containing block pentru position:fixed
     din interior (ex: .navbar-search-overlay), blocand overlay-ul la dimensiunile
     header-ului in loc de tot ecranul. */
}

body .site-navbar.navbar-scrolled {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}

/* Hover/active pe nav links — mai clar pe dark */
.nav-link:hover {
  color: var(--color-primary) !important;
}
.nav-link.active {
  color: var(--color-primary) !important;
}

/* Mini-cart dropdown si nav-dropdown — bg dark cu border subtil */
.nav-dropdown,
.mini-cart {
  background-color: #15151A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}
.nav-dropdown-item {
  color: var(--color-text) !important;
}
.nav-dropdown-item:hover {
  background-color: rgba(239, 68, 68, 0.1) !important;
  color: var(--color-primary-light) !important;
}

/* ==========================================================================
   3. FAQ section (avea inline style="background:#ffffff" in home.php) + alte
      sectiuni cu fundal albit
   ========================================================================== */
.section-faq,
section.section-faq {
  background: var(--color-bg) !important;
  color: var(--color-text);
}
.section-faq .faq-item,
.section-faq details,
.section-faq summary {
  background-color: var(--color-white) !important;
  color: var(--color-text);
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   4. Hero slider — dots si arrows mai evidenti pe dark
   ========================================================================== */
.hero-dot {
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-dot.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary);
  transform: scale(1.2);
}
.hero-arrow {
  background: rgba(14, 14, 16, 0.7) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-arrow:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary);
}

/* Hero slide text shadow pe poze intense */
.hero-title,
.hero-subtitle {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
/* Overlay mai blând pe stanga (text readable) + aproape transparent pe dreapta */
.hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0) 100%
  ) !important;
}
/* Pozele sa fie vizibile, nu filtrate */
.hero-slide-image {
  filter: brightness(0.95) saturate(1.1);
}

/* Button pe slide: invatam btn-light sa fie "brand" pe dark hero */
.hero-content .btn-light {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  padding: 0.875rem 1.75rem !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
  transition: all 0.25s ease;
}
.hero-content .btn-light:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(239, 68, 68, 0.5);
}

/* ==========================================================================
   5. Categorii — card dark (nu #f3f4f6), icon rosu mare, hover primary
   --------------------------------------------------------------------------
   home.php are inline <style> cu background:#f3f4f6. Il suprascriem aici.
   ========================================================================== */
.section-categories {
  background: linear-gradient(
    180deg,
    rgba(14, 14, 16, 0) 0%,
    rgba(36, 36, 40, 0.5) 100%
  ) !important;
}

.section-categories .category-card {
  background: linear-gradient(
    145deg,
    #1f1f23 0%,
    #15151A 100%
  ) !important;
  border: 1px solid rgba(239, 68, 68, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.3s ease !important;
}

.section-categories .category-card:hover {
  background: linear-gradient(
    145deg,
    #2a2a30 0%,
    #1a1a20 100%
  ) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 14px 36px rgba(239, 68, 68, 0.25), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-8px) !important;
}

/* Cand nu exista imagine pe categorie, iconul rosu Fa sa fie mare & centrat */
.section-categories .category-card .category-card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.section-categories .category-card .category-card-icon i {
  font-size: 3.75rem !important;
  color: var(--color-primary) !important;
  filter: drop-shadow(0 4px 16px rgba(239, 68, 68, 0.4));
  transition: transform 0.3s ease, color 0.3s ease;
}
.section-categories .category-card:hover .category-card-icon i {
  transform: scale(1.12);
  color: var(--color-primary-light, #F87171) !important;
}

/* Titlul categoriei cu overlay darker + typography lift */
.section-categories .category-card .category-card-title {
  background: linear-gradient(0deg,
    rgba(10, 10, 12, 0.92) 0%,
    rgba(10, 10, 12, 0.55) 55%,
    rgba(10, 10, 12, 0) 100%) !important;
  padding: 2.5rem 0.75rem 1.1rem !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   6. Blog / Category / generic page hero — eliminam albul mostenit unde este
   ========================================================================== */
.breadcrumb,
.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   6.5 BESTSELLERS — fundal cinematic cu blur si overlay in loc de gradient
   ========================================================================== */
.section-products.section-bg-gradient {
  position: relative;
  background: #0c0c0f !important;
  overflow: hidden;
  isolation: isolate;
}
.section-products.section-bg-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/uploads/home/bestsellers-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(12px) brightness(0.45) saturate(1.1);
  transform: scale(1.08); /* elimina marginile blur */
  z-index: -2;
}
.section-products.section-bg-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse at center,
      rgba(239, 68, 68, 0.10) 0%,
      rgba(10, 10, 12, 0.85) 65%,
      rgba(10, 10, 12, 0.96) 100%
  );
  z-index: -1;
}
.section-products.section-bg-gradient .section-title,
.section-products.section-bg-gradient .section-subtitle {
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.85);
}

/* ==========================================================================
   6.6 STORY SECTION — "Povestea noastra"
   ========================================================================== */
.section-story {
  padding: 6rem 0;
  background: var(--color-bg);
}
.story-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.story-image-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  aspect-ratio: 4 / 5;
}
.story-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.story-image-wrap:hover .story-image {
  transform: scale(1.05);
}
.story-image-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(239, 68, 68, 0.22) 0%, transparent 60%);
  pointer-events: none;
}
.story-content {
  padding: 1rem 0;
}
.story-title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}
.story-text {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: 2rem;
}
.story-btn {
  padding: 0.95rem 2rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.32);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.story-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(239, 68, 68, 0.45);
}

/* ==========================================================================
   6.7 CATERING SECTION — mozaic 2 imagini + listă beneficii
   ========================================================================== */
.section-catering {
  padding: 6rem 0;
  background: linear-gradient(180deg, #0f0f12 0%, #16161a 100%);
  position: relative;
}
.section-catering::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.5), transparent);
}
.catering-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.catering-content .section-badge {
  margin-bottom: 1rem;
}
.catering-title {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.catering-text {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}
.catering-features {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
}
.catering-features li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.98rem;
  color: var(--color-text);
}
.catering-features li i {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.14);
  color: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
}
.catering-btn {
  padding: 0.95rem 2rem !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 28px rgba(239, 68, 68, 0.32);
}
.catering-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(239, 68, 68, 0.45);
}
.catering-mosaic {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 560px;
}
.catering-img-1,
.catering-img-2 {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}
.catering-img-1 {
  width: 68%;
  height: 68%;
  top: 0;
  right: 0;
  z-index: 2;
}
.catering-img-2 {
  width: 58%;
  height: 58%;
  bottom: 0;
  left: 0;
  border: 4px solid #0f0f12;
  z-index: 3;
}
.catering-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.catering-mosaic:hover .catering-img-1 img,
.catering-mosaic:hover .catering-img-2 img {
  transform: scale(1.06);
}

/* ==========================================================================
   6.8 RESPONSIVE — story + catering pe mobil (WOW, nu ramane rupt)
   ========================================================================== */
@media (max-width: 991.98px) {
  .story-grid,
  .catering-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .section-story,
  .section-catering {
    padding: 4rem 0;
  }
  .catering-mosaic {
    max-width: 100%;
    aspect-ratio: 4 / 3;
  }
  .catering-features {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   6.9 ANIMATII SCROLL REVEAL — fade-in cinematic pentru toate sectiunile
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hover feedback pe butoanele primary — translateY DOAR pe butoanele standalone.
   In .input-group (ex: cupon "Aplica", newsletter, search inline) butonul trebuie
   sa ramana aliniat cu input-ul pe orizontala, deci folosim brightness+shadow. */
.btn-primary {
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, filter 0.22s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
}
/* Exceptii: in input-group sau cand au clasa .btn-inline, nu ridica butonul */
.input-group .btn-primary:hover,
.input-group-append .btn-primary:hover,
.btn-primary.btn-inline:hover {
  transform: none !important;
  filter: brightness(1.1);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}

/* ==========================================================================
   6.10 BLOG PAGES — hero dark cu accent rosu + cards dark
   ========================================================================== */
.blog-hero {
  background: linear-gradient(135deg, #0a0a0c 0%, #1a1a20 50%, #0a0a0c 100%) !important;
  position: relative;
}
.blog-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(239, 68, 68, 0.18) 0%, transparent 55%);
  pointer-events: none;
}
.blog-hero-title,
.blog-hero-subtitle,
.blog-hero-stat-number,
.blog-hero-stat-label {
  position: relative;
  z-index: 1;
}
.blog-hero-stats {
  position: relative;
  z-index: 1;
}
.blog-card {
  background: linear-gradient(145deg, #1f1f23, #15151A) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease !important;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-primary) !important;
  box-shadow: 0 20px 45px rgba(239, 68, 68, 0.25), 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.blog-card-title a {
  color: var(--color-text) !important;
}
.blog-card-title a:hover {
  color: var(--color-primary) !important;
}
.blog-card-excerpt {
  color: var(--color-text-secondary) !important;
}
.blog-card-category {
  background: var(--color-primary) !important;
  color: #fff !important;
}
/* Blog filter chips */
.blog-filter-item,
.blog-filter-link {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text) !important;
}
.blog-filter-item:hover,
.blog-filter-link:hover,
.blog-filter-item.active,
.blog-filter-link.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   6.11 NEWSLETTER — butonul "Aboneaza-te" cu culori din identitate
   --------------------------------------------------------------------------
   Bug shared: butonul avea background alb si culoare `--color-primary-dark`
   care pe unele setari ajungea sa fie alb-pe-alb. Folosim identitate donfood
   clar: bg alb cu text rosu (contrast max pe sectiunea red newsletter),
   hover cu bg primary-dark + text alb.
   ========================================================================== */
.newsletter-submit {
  background: #ffffff !important;
  color: var(--color-primary) !important;
  border: 2px solid #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-shadow: none !important;
}
.newsletter-submit-text {
  color: var(--color-primary) !important;
  font-weight: 800 !important;
}
.newsletter-submit i {
  color: var(--color-primary) !important;
}

.newsletter-submit:hover {
  background: var(--color-primary-dark) !important;
  color: #ffffff !important;
  border-color: var(--color-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.newsletter-submit:hover .newsletter-submit-text,
.newsletter-submit:hover i {
  color: #ffffff !important;
}

/* ==========================================================================
   6.12 ABOUT PAGE — carduri categorii + imagini cu glow + hover move
   ========================================================================== */
/* Cards categorii din pagina /despre-noi (cele 8 din grid) */
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"],
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"] {
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.35, 1),
              box-shadow 0.45s ease,
              border-color 0.35s ease !important;
  position: relative;
  overflow: hidden;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"]::before,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"]::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(239, 68, 68, 0) 0%,
    rgba(239, 68, 68, 0) 40%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  border-radius: inherit;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"]:hover,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"]:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: var(--color-primary) !important;
  box-shadow:
    0 20px 45px rgba(239, 68, 68, 0.28),
    0 8px 20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(239, 68, 68, 0.35) !important;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"]:hover::before,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"]:hover::before {
  background: radial-gradient(ellipse at 50% 0%,
    rgba(239, 68, 68, 0.20) 0%,
    rgba(239, 68, 68, 0) 60%);
  opacity: 1;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"] i,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"] i {
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.35, 1), filter 0.4s ease;
}
.page-despre-noi [style*="linear-gradient(145deg,#1f1f23"]:hover i,
.page-despre-noi [style*="linear-gradient(145deg, #1f1f23"]:hover i {
  transform: scale(1.18) translateY(-3px);
  filter: drop-shadow(0 6px 20px rgba(239, 68, 68, 0.55));
}

/* Imaginile mari din despre-noi (burger, ingrediente fresh, chef) */
.page-despre-noi img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.35, 1),
              box-shadow 0.45s ease !important;
  will-change: transform;
}
.page-despre-noi img:hover {
  transform: scale(1.025) translateY(-6px);
  box-shadow:
    0 30px 70px rgba(239, 68, 68, 0.22),
    0 15px 40px rgba(0, 0, 0, 0.7) !important;
}

/* ==========================================================================
   6.13 BLOG FILTER CHIPS — WOW state of the art pe tema dark
   --------------------------------------------------------------------------
   Cheile: `.blog-filters-section` (bg banda cu gradient alb urat) +
   `.blog-filter-btn` (chipset). Scoatem gradientul alb, punem glassmorphism +
   gradient red activ + count badge.
   ========================================================================== */
.blog-filters-section {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(239, 68, 68, 0.12) !important;
  padding: 1.5rem 0 1.75rem !important;
  margin-bottom: 1rem !important;
  /* NU sticky — in shared CSS era position:sticky + top:73px, dar asta o
     aducea peste breadcrumbs cand scrollai pe pagina single-articol. */
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
}
.blog-grid-section {
  padding-top: 1rem !important;
}
.blog-filters-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(239, 68, 68, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.blog-filters {
  position: relative;
  z-index: 2;
  gap: 0.65rem !important;
}

.blog-filter-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: var(--color-text) !important;
  padding: 0.65rem 1.35rem !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  transition: all 0.32s cubic-bezier(0.25, 1, 0.35, 1) !important;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none !important;
}
.blog-filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  border-radius: inherit;
}
.blog-filter-btn > * {
  position: relative;
  z-index: 1;
}
.blog-filter-btn:hover {
  transform: translateY(-3px) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  background: rgba(239, 68, 68, 0.08) !important;
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.28),
              0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
.blog-filter-btn:hover::before {
  opacity: 0.15;
}
.blog-filter-btn.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow:
    0 10px 28px rgba(239, 68, 68, 0.5),
    0 0 0 3px rgba(239, 68, 68, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px) !important;
  font-weight: 700 !important;
}
.blog-filter-btn.active::before {
  opacity: 0;
}

/* Count badge din filter chips (cifra de lângă nume categorie) */
.blog-filter-count {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-secondary) !important;
  font-size: 0.72rem !important;
  padding: 0.1rem 0.5rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  min-width: 1.4rem;
  text-align: center;
  transition: all 0.3s ease;
}
.blog-filter-btn:hover .blog-filter-count {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.blog-filter-btn.active .blog-filter-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   6.14 BUTOANE GLOBALE — unificate cu identitate (roșu + hover WOW)
   ========================================================================== */
/* Primary buttons — red cu glow hover + lift */
.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 0.8rem 1.75rem !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.35, 1) !important;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* stacking context — ::before ramane sub text fara sa afecteze body */
}
.btn-primary::before,
.btn.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, #a61b1b 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1; /* sub textul direct al butonului (text nodes nu accepta z-index) */
  border-radius: inherit;
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
  transform: scale(1.025) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.38),
              0 0 0 3px rgba(239, 68, 68, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.btn-primary:hover::before,
.btn.btn-primary:hover::before {
  opacity: 1;
}
.btn-primary:active {
  transform: scale(0.98) !important;
}

/* ==========================================================================
   Outline buttons — fix hover invisible pe dark theme
   --------------------------------------------------------------------------
   Ambele butoane (Aplica cupon, Continua cumparaturile) foloseau
   `color: #fff` pe hover dar aparent alt rule (Bootstrap default sau alt
   override) impingea inapoi culoarea initiala. Fortam cu specificitate
   mai mare pe element+class + rgba explicit.
   ========================================================================== */
a.btn-outline-primary,
button.btn-outline-primary,
.btn.btn-outline-primary,
.btn-outline-primary,
.btn-outline {
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 0.6rem 1.5rem !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}
a.btn-outline-primary:hover,
a.btn-outline-primary:focus,
a.btn-outline-primary:active,
button.btn-outline-primary:hover,
button.btn-outline-primary:focus,
button.btn-outline-primary:active,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
  background: #ef4444 !important;
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35) !important;
  text-decoration: none !important;
}
a.btn-outline-primary:hover *,
a.btn-outline-primary:focus *,
button.btn-outline-primary:hover *,
button.btn-outline-primary:focus *,
.btn-outline-primary:hover *,
.btn-outline-primary:focus * {
  color: #ffffff !important;
}

/* ==========================================================================
   Product page — icoane & share WOW pe dark
   --------------------------------------------------------------------------
   Stock badge: icon alb pe fundal rosu (era rosu pe rosu, invizibil).
   Trust badges: iconitele raman rosii dar lucesc putin.
   Social share: butoane colorate reale (Facebook albastru, WhatsApp verde,
   Copy gri) cu text alb si glow la hover — pe dark arata elegant.
   ========================================================================== */

/* Stock "Disponibil" / "In stoc" — icon ALB pe track rosu */
.product-stock-status {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
  color: #fff !important;
}
.product-stock-status i,
.product-stock-status .fa-circle-check,
.product-stock-status .fa-circle-xmark,
.product-stock-status [class*="fa-"] {
  color: #ffffff !important;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}

/* ==========================================================================
   Universal — orice element cu BG ROSU (primary, danger, sale, gradient)
   are TOATE iconitele si TEXTUL FORTATE ALBE pe donfood
   ========================================================================== */
.product-add-to-cart,
.product-add-to-cart i,
.product-add-to-cart [class*="fa-"],
.product-add-to-cart [class*="icon-"],
.product-add-to-cart span,
#addToCartBtn,
#addToCartBtn i,
#addToCartBtn [class*="fa-"],
#addToCartBtn [class*="icon-"],
#addToCartBtn span {
  color: #ffffff !important;
}
.btn-primary,
.btn-primary i,
.btn-primary [class*="fa-"],
.btn-primary [class*="icon-"],
.btn-add-to-cart,
.btn-add-to-cart i,
.btn-add-to-cart [class*="fa-"],
.btn-add-to-cart [class*="icon-"],
.btn-add-cart,
.btn-add-cart i,
.btn-add-cart [class*="fa-"],
.btn-add-cart [class*="icon-"],
.btn-danger,
.btn-danger i,
.btn-danger [class*="fa-"],
.btn-danger [class*="icon-"],
.product-card-badge.badge-sale,
.product-card-badge.badge-sale i,
.product-card-badge.badge-sale::before,
.product-card-badge.badge-new,
.product-card-badge.badge-new i,
.product-card-badge.badge-new::before,
.cs-toast-success,
.cs-toast-success i,
#placeOrderBtn,
#placeOrderBtn i,
#placeOrderBtn [class*="fa-"],
#placeOrderBtn [class*="icon-"],
#checkoutBtn,
#checkoutBtn i,
.product-card-overlay .btn,
.product-card-overlay .btn i,
.product-card-overlay .btn [class*="fa-"],
.product-card-overlay .btn [class*="icon-"],
.cross-sell-add,
.cross-sell-add i,
.checkout-trust-item.bg-primary i,
.swal2-confirm,
.swal2-confirm i {
  color: #ffffff !important;
}

/* Pe Stock badge (rosu translucid) — icon alb cu glow */
.product-stock-status,
.product-stock-status i,
.product-stock-status [class*="fa-"],
.product-stock-status [class*="icon-"] {
  color: #ffffff !important;
}
.product-stock-status.out-of-stock {
  background: rgba(107, 114, 128, 0.15) !important;
  border-color: rgba(107, 114, 128, 0.35) !important;
  color: #9ca3af !important;
}
.product-stock-status.out-of-stock i { color: #9ca3af !important; filter: none; }

/* Trust badges (transport / retur / securizata / calitate) — icon rosu cu glow */
.product-trust-badges .trust-badge i,
.product-features-list li i {
  color: var(--color-primary) !important;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3));
}

/* Social share — buttons WOW cu branduri reale */
.social-share-label { color: #94a3b8 !important; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.social-share-label i { color: var(--color-primary) !important; margin-right: 0.35rem; }
.social-share-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }

.social-share-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  cursor: pointer;
}
.social-share-btn i { color: #ffffff !important; font-size: 0.95rem; }
.social-share-btn span { color: #ffffff !important; }

/* Facebook blue */
.social-share-facebook {
  background: linear-gradient(135deg, #1877f2, #0b5fcc) !important;
  border-color: #1877f2 !important;
}
.social-share-facebook:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.45) !important;
}

/* WhatsApp green */
.social-share-whatsapp {
  background: linear-gradient(135deg, #25d366, #1aaa50) !important;
  border-color: #25d366 !important;
}
.social-share-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45) !important;
}

/* Copy link — outline rosu din identitate */
.social-share-copy {
  background: transparent !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.social-share-copy i,
.social-share-copy span { color: var(--color-primary) !important; }
.social-share-copy:hover {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.45) !important;
}
.social-share-copy:hover i,
.social-share-copy:hover span { color: #ffffff !important; }

/* ==========================================================================
   Admin dashboard — status bar SOLID dark, fara gradient
   ========================================================================== */
.dashboard-status-bar {
  background: #16161a !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  color: #e2e8f0 !important;
}
.dashboard-status-bar i,
.dashboard-status-bar [class*="fa-"],
.dashboard-status-bar [class*="icon-"] {
  color: var(--color-primary) !important;
}
.dashboard-status-bar strong,
.dashboard-status-bar .text-muted,
.dashboard-status-bar small {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   PRODUCT CARDS — WOW state-of-the-art pe donfood (dark cinematic)
   --------------------------------------------------------------------------
   Tema: card cinematic cu gradient subtil, hover cu glow rosu, categorie
   subliniata, titlu bold luminos, pret prominent cu accent rosu, separatoare
   subtile între secțiuni, padding generos.
   ========================================================================== */
.product-card {
  background: #16161a !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  /* PADDING interior — imaginea + body floata in interior cu spatiu fata de border */
  padding: 0.6rem !important;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.3s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  position: relative;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0) 0%, transparent 55%);
  transition: background 0.4s ease;
  z-index: 0;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: rgba(239, 68, 68, 0.35) !important;
  box-shadow: 0 20px 45px rgba(239, 68, 68, 0.22),
              0 8px 18px rgba(0, 0, 0, 0.55);
}
.product-card:hover::before {
  background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.12) 0%, transparent 60%);
}

/* ==========================================================================
   Product image — fill edge-to-edge, FARA bg propriu (cardul are deja gradient)
   ========================================================================== */
.product-card .product-card-image {
  /* Imaginea = doar rounded + margin, FARA bg/border/shadow propriu (curata) */
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 0.5rem 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
  position: relative;
  border-radius: 12px !important;
  aspect-ratio: 1 / 1;
  box-shadow: none !important;
}
.product-card .product-card-image > a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px !important; /* match parent radius — toate 4 colturi */
}
.product-card .product-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
  border-radius: 12px !important;
}
.product-card:hover .product-card-image img {
  transform: scale(1.08);
  filter: saturate(1.08) brightness(1.02);
}
/* Glow subtil ambient peste imagine la hover */
.product-card .product-card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0) 0%, rgba(239, 68, 68, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 2;
}
.product-card:hover .product-card-image::before {
  opacity: 1;
}
/* Fade inferior — mascheaza tranzitia dintre placeholder si body
   (placeholder PNG are propriu fundal, body are #16161a — fade-ul le uneste) */
.product-card .product-card-image::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, #16161a 90%, #16161a 100%);
  pointer-events: none;
  z-index: 3;
}

/* ==========================================================================
   Badges (Nou / Bestseller / Sale) — WOW glass chips, distinct, animate
   --------------------------------------------------------------------------
   Inainte erau lipite intr-un dreptunghi negru in colt. Acum: chip-uri
   plutitoare separate, fiecare cu glassmorphism + iconita + culoare distincta.
   Animate la entry (fade slide).
   ========================================================================== */
.product-card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  display: flex !important;
  flex-direction: row !important;  /* badge-urile UNA LANGA ALTA, nu stacked */
  gap: 0.35rem;
  align-items: center;
  pointer-events: none;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.product-card-badge {
  position: static !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.7rem !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  /* FARA backdrop-filter — crea efect de "card" in spate; folosim culori solide */
  border: 0;
  transform: translateX(-4px);
  opacity: 0;
  animation: cardBadgeIn 0.45s ease forwards;
  pointer-events: auto;
}
.product-card-badge::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.6rem;
}
/* Stagger animation pentru cele 3 badge-uri */
.product-card-badge:nth-child(1) { animation-delay: 0.05s; }
.product-card-badge:nth-child(2) { animation-delay: 0.15s; }
.product-card-badge:nth-child(3) { animation-delay: 0.25s; }
@keyframes cardBadgeIn {
  to { transform: translateX(0); opacity: 1; }
}

/* NOU — verde solid */
.product-card-badge.badge-new {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}
.product-card-badge.badge-new::before { content: '\f005'; color: #ffffff; }

/* BESTSELLER — gold solid */
.product-card-badge.badge-bestseller {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #1a1a1f !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
}
.product-card-badge.badge-bestseller::before { content: '\f521'; color: #1a1a1f; }

/* SALE — rosu solid */
.product-card-badge.badge-sale {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.5);
  font-size: 0.7rem !important;
  padding: 0.35rem 0.7rem !important;
}
.product-card-badge.badge-sale::before { content: '\f02b'; color: #ffffff; }

/* ORGANIC — verde leaf solid */
.product-card-badge.badge-organic {
  background: #22c55e !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
}
.product-card-badge.badge-organic::before { content: '\f06c'; color: #ffffff; }

/* Wishlist heart — buton glass cerc, top-right */
.product-card .product-card-wishlist {
  position: absolute !important;
  top: 0.75rem !important;
  right: 0.75rem !important;
  z-index: 3;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  cursor: pointer;
}
.product-card .product-card-wishlist:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5);
}
.product-card .product-card-wishlist.is-favorite,
.product-card .product-card-wishlist[data-favorite="1"] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}
.product-card .product-card-wishlist.is-favorite i,
.product-card .product-card-wishlist[data-favorite="1"] i {
  font-weight: 900;
}
/* Overlay "Adauga in cos" — banda de jos peste imagine, vizibil pe hover */
.product-card .product-card-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  inset: auto !important;
  padding: 1rem 0.75rem !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  pointer-events: none;
}
.product-card:hover .product-card-overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}
/* Buton ÎN overlay — gradient rosu plin, lizibil */
.product-card .product-card-overlay .btn,
.product-card .product-card-overlay .btn-add-cart,
.product-card .product-card-overlay .btn-pick-variant {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  background-color: #ef4444 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.25rem !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  width: auto !important;
  height: auto !important;
  backdrop-filter: none !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.5) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.product-card .product-card-overlay .btn:hover,
.product-card .product-card-overlay .btn-add-cart:hover,
.product-card .product-card-overlay .btn-pick-variant:hover {
  transform: scale(1.04);
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.65) !important;
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #ffffff !important;
}
.product-card .product-card-overlay .btn i,
.product-card .product-card-overlay .btn span { color: #ffffff !important; }

/* Body — padding mai mic (cardul are deja padding 0.6rem). Centrat pe orizontala */
.product-card .product-card-body {
  padding: 0.5rem 0.25rem 0.25rem !important;
  background: transparent !important;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center !important;     /* centrare orizontala items */
  text-align: center !important;
  gap: 0.55rem;
  border: 0 !important;
  margin: 0 !important;
}

/* Categoria — capitalizata, rosie, subtila, centrata */
.product-card .product-card-category {
  display: inline-block;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--color-primary) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  position: relative;
  align-self: center;     /* centrat in body */
  text-align: center;
  transition: color 0.2s ease, letter-spacing 0.2s ease;
}
.product-card .product-card-category::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  margin: 4px auto 0;     /* centrat sub categorie */
  border-radius: 2px;
  transition: width 0.3s ease;
}
.product-card:hover .product-card-category::after {
  width: 40px;
}

/* Titlu — mare, bold, alb, 2 linii cu ellipsis */
.product-card .product-card-title {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.product-card .product-card-title a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.product-card .product-card-title a:hover {
  color: var(--color-primary) !important;
}

/* Pret — rosu prominent cu font mai mare, separator sus */
.product-card .product-card-price {
  background: transparent !important;
  padding: 0.5rem 0 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.product-card .product-card-price .current-price {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  letter-spacing: -0.01em;
  text-shadow: 0 0 14px rgba(239, 68, 68, 0.2);
}
.product-card .product-card-price .old-price {
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  text-decoration: line-through;
}
.product-card .product-card-price .price-prefix {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Button "Adauga in cos" din overlay — gradient rosu, padding generos */
.product-card .product-card-btn {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.65rem 1.25rem !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.product-card .product-card-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.55) !important;
}

/* Reset agresiv — evita "pillele" vizibile pe cele 3 sectiuni din card */
.product-card .product-card-category,
.product-card .product-card-title,
.product-card .product-card-title a,
.product-card .product-card-price,
.product-card .product-card-price .current-price,
.product-card .product-card-price .old-price,
.product-card .product-card-price .price-prefix {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Pastram doar separatorul subtil pe pret */
.product-card .product-card-price {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
.product-card .product-card-category,
.product-card .product-card-title,
.product-card .product-card-title a {
  border: 0 !important;
}

/* Coupon + Referral "Aplica" buttons din checkout — gradient rosu plin,
   nu outline (mai vizibil pe dark langa inputs).  */
#checkoutCouponBtn,
#checkoutReferralBtn,
#referralBtn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 0.4rem 0.9rem !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.25s ease !important;
}
#checkoutCouponBtn:hover,
#checkoutReferralBtn:hover,
#referralBtn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, #a61b1b 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.45) !important;
  transform: translateY(-1px);
}
#checkoutCouponBtn i,
#checkoutReferralBtn i,
#referralBtn i {
  color: #fff !important;
}

/* Add to cart buttons */
.btn-add-to-cart,
.product-card-btn,
.add-to-cart-btn {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.3s ease !important;
}
.btn-add-to-cart:hover,
.product-card-btn:hover,
.add-to-cart-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 26px rgba(239, 68, 68, 0.4) !important;
}

/* Iconbuttons din navbar (search / account / wishlist / cart) */
.navbar-icon-btn {
  transition: all 0.25s ease !important;
}
.navbar-icon-btn:hover {
  color: var(--color-primary) !important;
  transform: translateY(-1px);
}

/* Cart button — pe dark theme icon-ul rosu este vizibil fara border permanent.
   Border apare doar la hover, sa nu pareze ca e selectat tot timpul. */
.navbar-icon-btn.cart-btn {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid transparent !important;
}
.navbar-icon-btn.cart-btn:hover {
  background-color: rgba(239, 68, 68, 0.18) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}
.navbar-icon-btn.cart-btn:hover .badge {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
.navbar-icon-btn.cart-btn i {
  color: inherit !important;
}
/* Cand suntem efectiv pe pagina /cos/ — atunci aratam border activ */
body[data-page="cart"] .navbar-icon-btn.cart-btn,
.navbar-icon-btn.cart-btn.active {
  border-color: var(--color-primary) !important;
  background-color: rgba(239, 68, 68, 0.12) !important;
}

/* Search overlay — fortam acoperire totala (header + main + footer).
   Default-ul se poate pierde pe dark theme din cauza z-index-ului navbar-ului. */
.navbar-search-overlay {
  z-index: 9999 !important;
  background: rgba(0, 0, 0, 0.78) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  width: 100vw !important;
  height: 100vh !important;
}
/* Dark input pe peste-overlay */
.navbar-search-overlay .navbar-search-input {
  background: rgba(20, 20, 23, 0.95) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}
.navbar-search-overlay .navbar-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Hero slider arrows + dots au deja styling — polish hover */
.hero-arrow {
  transition: all 0.3s ease !important;
}
.hero-arrow:hover {
  transform: translateY(-50%) scale(1.1) !important;
}

/* Contact form submit */
#contactSubmitBtn,
.contact-submit-btn,
button[type="submit"] {
  transition: all 0.3s ease !important;
}

/* ==========================================================================
   6.15 CATEGORY HERO — dark minimalist (shop + categorie), donfood-only
   --------------------------------------------------------------------------
   Old version avea 2 radial ellipses + dots pattern + text gradient pink —
   arata SF/kitsch. Rewrite complet: card dark clean, un singur glow subtil
   top-right, text alb curat, count badge rosu plin.
   ========================================================================== */
.category-hero {
  padding: 1rem 0 2rem !important;
}
.category-hero-inner {
  background: linear-gradient(145deg, #1a1a1f 0%, #141418 70%, #18181d 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.22) !important;
  border-radius: 20px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 20px 50px -20px rgba(239, 68, 68, 0.25) !important;
  overflow: hidden;
  isolation: isolate;
}
/* Un singur glow subtil sus-dreapta, fara ellipses si fara dots */
.category-hero-inner::before {
  content: '';
  position: absolute;
  top: -40px !important;
  right: -40px !important;
  width: 320px !important;
  height: 320px !important;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.14) 0%, transparent 55%) !important;
  border-radius: 50% !important;
  z-index: 0;
  pointer-events: none;
}
.category-hero-inner::after {
  display: none !important;
}
.category-hero-content,
.category-hero-image {
  position: relative;
  z-index: 2;
}

/* Badge discret rosu pal */
.category-hero .category-hero-badge {
  display: inline-flex !important;
  background: rgba(239, 68, 68, 0.12) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

/* Titlu — alb curat, fara gradient text */
.category-hero-title {
  font-size: clamp(2.4rem, 5vw, 3.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 0.75rem !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(239, 68, 68, 0.18);
}

/* Descriere gri deschis */
.category-hero-desc {
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: #b8bcc3 !important;
  max-width: 640px;
  margin: 0 0 1.25rem !important;
  text-shadow: none !important;
}

.category-hero-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.category-hero-count {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45) !important;
}

/* Imaginea categoriei (daca exista) — fara rotate pe hover */
.category-hero-image img {
  filter: drop-shadow(0 16px 32px rgba(239, 68, 68, 0.25));
  transition: transform 0.35s ease;
}
.category-hero-image:hover img {
  transform: scale(1.03);
}

/* ==========================================================================
   6.16 PRICE SLIDER — fix pt donfood (default native track + border vizibile)
   --------------------------------------------------------------------------
   Pe tema dark, input[type=range] native arata cu white box + red border.
   Suprimam COMPLET default-urile: track, progress, border, outline, focus.
   ========================================================================== */
.price-slider-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
.price-slider-input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.price-slider-input::-webkit-slider-runnable-track {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: 24px;
}
.price-slider-input::-moz-range-track {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.price-slider-input::-moz-range-progress {
  background: transparent !important;
}
.price-slider-input::-ms-track {
  background: transparent !important;
  border-color: transparent !important;
  color: transparent !important;
}
.price-slider-input::-ms-fill-lower,
.price-slider-input::-ms-fill-upper {
  background: transparent !important;
}

/* Track wrapper: vizibil mai clar pe dark (mai multa opacitate) */
.price-slider-track {
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   6.17 FORM CHECKBOX + FORM SWITCH — comportament complet pe dark theme
   --------------------------------------------------------------------------
   CHECKBOX standard (.form-check-input NU are .form-switch parent):
     - off: border gri, bg transparent
     - on:  bg rosu + checkmark alb la mijloc
   SWITCH (.form-switch .form-check-input):
     - off: track transparent, thumb gri la stanga
     - on:  track rosu, thumb alb la dreapta
   Fiecare stare (hover/focus inclusiv dupa toggle) e declarata explicit ca sa
   nu existe "buline fantoma" din combinatii defaults Bootstrap + overrides.
   SVG-uri inline ca data:uri — fara dependinte externe.
   ========================================================================== */

/* ---- Base (toate, CHECKBOX + SWITCH) ---- */
.form-check-input {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-position 0.15s ease !important;
}
.form-check-input:hover { border-color: var(--color-primary) !important; }
.form-check-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

/* ---- CHECKBOX STANDARD (NOT form-switch) ---- */
/* Off: fara background-image, doar border */
.form-check-input[type="checkbox"]:not(.form-switch .form-check-input) {
  background-image: none !important;
}
/* On: bg rosu + checkmark alb la mijloc */
.form-check-input[type="checkbox"]:checked:not(.form-switch .form-check-input) {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  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='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3E%3C/svg%3E") !important;
  background-size: 70% 70% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.form-check-input[type="checkbox"]:checked:focus:not(.form-switch .form-check-input) {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* ---- RADIO (tot checkbox style la noi, dar pastram cerc) ---- */
.form-check-input[type="radio"]:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
}

/* ---- FORM SWITCH (track + thumb) ---- */
/* Off: track transparent-ish, thumb gri stanga */
.form-switch .form-check-input {
  width: 2em !important;
  height: 1em !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba%28255,255,255,0.7%29'/%3E%3C/svg%3E") !important;
  background-position: left center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.form-switch .form-check-input:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--color-primary) !important;
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba%28255,255,255,0.7%29'/%3E%3C/svg%3E") !important;
  background-position: left center !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
/* On: track rosu, thumb alb dreapta */
.form-switch .form-check-input:checked,
.form-switch .form-check-input:checked:focus,
.form-switch .form-check-input:checked:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !important;
  background-position: right center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22) !important;
}

/* ==========================================================================
   6.18 ACCOUNT PAGE (contul meu) — polish dark + meniu lateral modern
   --------------------------------------------------------------------------
   Bug-uri shared: .account-nav-link.active are gradient brown→mint green urât
   pe donfood; dash-card-header albastru deschis; text rgb(100,116,139) ilizibil.
   Aici overrides complete pe dark.
   ========================================================================== */

/* Sidebar: card dark rotunjit */
.account-section .col-lg-3 > .bg-white,
.account-section .col-lg-3 > [class*="bg-"],
.account-section .account-sidebar-card,
.account-section .card {
  background: linear-gradient(180deg, #1a1a20 0%, #141418 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  color: var(--color-text) !important;
}

/* User header din sidebar */
.account-user,
.account-user + * {
  color: var(--color-text) !important;
}
.account-user .text-muted,
.account-section .text-muted {
  color: var(--color-text-secondary) !important;
}

/* Nav items — meniu lateral modern */
.account-nav-link {
  color: rgba(255, 255, 255, 0.75) !important;
  border-left: 3px solid transparent !important;
  border-radius: 10px !important;
  padding: 0.7rem 0.95rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.2rem;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.35, 1) !important;
  background: transparent !important;
}
.account-nav-link i {
  color: rgba(255, 255, 255, 0.55) !important;
}
.account-nav-link:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: var(--color-primary-light, #F87171) !important;
  border-left-color: var(--color-primary) !important;
  transform: translateX(2px);
}
.account-nav-link:hover i {
  color: var(--color-primary) !important;
}
.account-nav-link.active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.06) 100%) !important;
  color: #fff !important;
  border-left-color: var(--color-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.18),
              inset 0 0 0 1px rgba(239, 68, 68, 0.18) !important;
}
.account-nav-link.active i {
  color: var(--color-primary) !important;
}
.account-nav-link.text-danger {
  color: #ff6b6b !important;
}
.account-nav-link.text-danger:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #ff8080 !important;
}

/* Stats cards (Comenzi / Favorite / Adrese / Cheltuit) */
.account-section .dash-stat-card,
.account-section .stat-card,
.account-section [class*="bg-primary-lightest"],
.account-section [class*="bg-light"] {
  background: linear-gradient(145deg, #1f1f23, #15151A) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  color: var(--color-text) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.account-section .dash-stat-card:hover,
.account-section .stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary) !important;
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.2) !important;
}

/* Dashboard card (Comenzi recente + altele) */
.dash-card {
  background: linear-gradient(180deg, #1a1a20 0%, #141418 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  color: var(--color-text) !important;
  overflow: hidden;
}
.dash-card-header {
  background: rgba(239, 68, 68, 0.05) !important;
  border-bottom: 1px solid rgba(239, 68, 68, 0.14) !important;
  color: var(--color-text) !important;
  padding: 1rem 1.25rem !important;
}
.dash-card-header h5 {
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

/* Tabele din account */
.account-section .table,
.dash-orders-table {
  color: var(--color-text) !important;
}
.account-section .table thead th,
.dash-orders-table thead th {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--color-text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.account-section .table tbody td,
.dash-orders-table tbody td {
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--color-text) !important;
  padding: 0.9rem 0.75rem !important;
}
.account-section .table-hover tbody tr:hover,
.dash-orders-table tbody tr:hover {
  background: rgba(239, 68, 68, 0.06) !important;
}
.dash-orders-table tbody td[style*="color:#64748b"] {
  color: var(--color-text-secondary) !important;
}

/* Empty state */
.account-section .text-muted,
.account-section p[style*="color:#64748b"],
.dash-card p[style*="color:#64748b"] {
  color: var(--color-text-secondary) !important;
}
.dash-card .fa-box-open {
  color: rgba(239, 68, 68, 0.4) !important;
}

/* Titlu "Bun venit, Nume!" */
.account-section h1,
.account-section h2,
.account-section h3,
.account-section h4,
.account-section h5 {
  color: var(--color-text) !important;
}

/* Outline-primary buttons din account */
.account-section .btn-outline-primary {
  background: transparent !important;
  border: 1.5px solid var(--color-primary) !important;
  color: var(--color-primary-light, #F87171) !important;
}
.account-section .btn-outline-primary:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* Avatar wrapper în sidebar (cercul alb cu user) */
.account-user img,
.account-user .avatar,
.account-section .rounded-circle {
  border: 3px solid rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25);
}

/* Badges status comandă pe dark */
.account-section .badge {
  padding: 0.4rem 0.7rem !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   6.19 ACCOUNT STAT CARDS — 4 chestii de sus (Comenzi/Favorite/Adrese/Cheltuit)
   ========================================================================== */
.account-stat-card {
  background: linear-gradient(145deg, #1f1f23, #15151A) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  color: var(--color-text) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.account-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary) !important;
  box-shadow: 0 14px 36px rgba(239, 68, 68, 0.25) !important;
}
.account-stat-value {
  color: var(--color-text) !important;
  font-weight: 800 !important;
}
.account-stat-label {
  color: var(--color-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Icon box din stat cards — inlocuim hardcoded light bg (#eff6ff, #fef2f2, #fffbeb) */
.account-stat-icon[style*="#eff6ff"],
.account-stat-icon[style*="#fef2f2"],
.account-stat-icon[style*="#fffbeb"],
.account-stat-icon[style*="var(--color-primary-lightest)"] {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--color-primary) !important;
}

/* ==========================================================================
   6.20 SELECT2 PE FRONTEND (checkout + account addresses) — dark theme
   --------------------------------------------------------------------------
   Dropdown + optiuni + search input, toate pe dark. Optiuni hover/selected
   cu rosu identity. Folosit la Judet/Oras in formularul adresa.
   ========================================================================== */
.select2-container--default .select2-dropdown,
.select2-dropdown {
  background: #141418 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-search__field {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: var(--color-text) !important;
  border-radius: 8px !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0.5rem !important;
  width: calc(100% - 1rem) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}
.select2-container--default .select2-results__option,
.select2-results__option {
  color: var(--color-text) !important;
  padding: 0.65rem 1rem !important;
  background: transparent !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-results__option[aria-selected="true"] {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
  color: rgba(255, 255, 255, 0.3) !important;
}
/* Selected option fara hover */
.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fff !important;
  font-weight: 600;
}
/* Selection (pill-ul cu valoarea aleasa) — transparent, bordered */
.select2-container--default .select2-selection--single {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text) !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
/* Scrollbar in dropdown optiuni */
.select2-container--default .select2-results__options::-webkit-scrollbar {
  width: 8px;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
  background: rgba(239, 68, 68, 0.35);
  border-radius: 4px;
}

/* ==========================================================================
   6.21 CART TABLE (Cos de cumparaturi) — tabel dark + text readable
   ========================================================================== */
.cart-table,
.cart-section table,
.page-cart table {
  color: var(--color-text) !important;
  background: transparent !important;
}
.cart-table thead th,
.cart-section table thead th,
.page-cart table thead th {
  background: rgba(239, 68, 68, 0.06) !important;
  color: var(--color-text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.cart-table tbody tr,
.cart-section table tbody tr,
.page-cart table tbody tr {
  background: linear-gradient(180deg, #1a1a20 0%, #141418 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.cart-table tbody td,
.cart-section table tbody td,
.page-cart table tbody td {
  color: var(--color-text) !important;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  padding: 1rem 0.75rem !important;
  vertical-align: middle !important;
}

/* Product title + price in cart row — forteaza visibilitatea */
.cart-table .cart-product-title,
.cart-table .product-title,
.cart-table a[href*="/produs/"],
.cart-section .cart-product-title,
.cart-section .product-title,
.cart-section a[href*="/produs/"] {
  color: var(--color-text) !important;
  font-weight: 600;
}
.cart-table .cart-product-title:hover,
.cart-section .cart-product-title:hover {
  color: var(--color-primary) !important;
}
.cart-table .cart-price,
.cart-table .product-price,
.cart-section .cart-price,
.cart-section .product-price {
  color: var(--color-text) !important;
  font-weight: 600;
}

/* Box sumar comanda din cart */
.cart-summary,
.cart-sidebar-card,
.order-summary {
  background: linear-gradient(180deg, #1a1a20 0%, #141418 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--color-text) !important;
  border-radius: 14px;
}

/* ==========================================================================
   6.22 CHECKOUT — payment method cards + terms row + toate zonele albe
   ========================================================================== */
/* Payment method cards (Plata cu cardul / Plata ramburs) */
.checkout-payment-method,
label.checkout-payment-method {
  background: linear-gradient(145deg, #1f1f23, #15151A) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease !important;
}
.checkout-payment-method *,
label.checkout-payment-method * {
  color: inherit !important;
}
.checkout-payment-method strong,
.checkout-payment-method .fw-bold {
  color: var(--color-text) !important;
  font-weight: 700;
}
.checkout-payment-method small,
.checkout-payment-method .text-muted {
  color: var(--color-text-secondary) !important;
}
.checkout-payment-method:hover {
  border-color: var(--color-primary) !important;
  background: linear-gradient(145deg, #25252a, #18181e) !important;
}
.checkout-payment-method.selected {
  border-color: var(--color-primary) !important;
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.28),
              inset 0 0 0 1px rgba(239, 68, 68, 0.28) !important;
}

/* Termeni row (avea inline style="background:#f8fafc") */
.checkout-step[style*="background:#f8fafc"],
.checkout-step[style*="background: #f8fafc"] {
  background: linear-gradient(145deg, #1f1f23, #15151A) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  color: var(--color-text) !important;
}
.checkout-step[style*="background:#f8fafc"] .form-check-label,
.checkout-step[style*="background: #f8fafc"] .form-check-label {
  color: var(--color-text) !important;
}

/* Alte zone albe din checkout (step-uri cu bg alb) */
.checkout-step:not([class*="selected"]),
.checkout-left-column .bg-white,
.checkout-left-column [style*="background:#fff"],
.checkout-left-column [style*="background: #fff"],
.checkout-left-column [style*="background:#ffffff"] {
  background: linear-gradient(180deg, #1a1a20 0%, #141418 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  color: var(--color-text) !important;
}

/* Inputs din checkout pe dark */
#checkoutForm input.form-control,
#checkoutForm textarea.form-control,
#checkoutForm select.form-control,
.checkout-form input,
.checkout-form textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text) !important;
}
#checkoutForm input.form-control::placeholder,
#checkoutForm textarea.form-control::placeholder,
.checkout-form input::placeholder,
.checkout-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
#checkoutForm input.form-control:focus,
#checkoutForm textarea.form-control:focus {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
  color: var(--color-text) !important;
}

/* Input-group-text (addon cu icon in formulare) */
.checkout-form .input-group-text,
#checkoutForm .input-group-text {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--color-text-secondary) !important;
}

/* Icon prepend pentru select2 (Judet/Oras) — la fel dark ca input-group-text */
#checkoutForm .select2-icon-prepend,
.select2-icon-prepend {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: none !important;
  color: var(--color-text-secondary) !important;
}
#checkoutForm .select2-icon-prepend i,
.select2-icon-prepend i {
  color: var(--color-text-secondary) !important;
}
/* Cand select2 e open/focus, prepend-ul se evidentiaza cu red border la fel */
#checkoutForm .select2-icon-wrapper:has(.select2-container--open) .select2-icon-prepend,
#checkoutForm .select2-icon-wrapper:has(.select2-container--focus) .select2-icon-prepend {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
#checkoutForm .select2-icon-wrapper:has(.select2-container--open) .select2-icon-prepend i,
#checkoutForm .select2-icon-wrapper:has(.select2-container--focus) .select2-icon-prepend i {
  color: var(--color-primary) !important;
}

/* ==========================================================================
   7. Footer — pastram separat de body (subtil mai dark)
   ========================================================================== */
.site-footer {
  background-color: #0B0B0D !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1.5rem !important;
  padding-bottom: 1rem !important;
}
.site-footer .container > .row {
  padding-top: 0.75rem !important;
}
.site-footer .footer-bottom {
  padding-top: 1rem !important;
  margin-top: 1rem !important;
}

/* Footer logo — mare vizual fara sa umfle containerul (scale trick ca in header).
   Fara filter brightness (care alba logo-ul colorat). */
.site-footer .footer-brand {
  overflow: visible !important;
  margin-bottom: 0.5rem !important;
}
.site-footer .footer-brand img {
  filter: none !important;
  height: 80px !important;
  max-height: 80px !important;
  width: auto !important;
  object-fit: contain;
  display: block;
  transform: scale(1.6);
  transform-origin: left center;
}

@media (max-width: 767.98px) {
  .site-footer {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
  }
  .site-footer .footer-brand img {
    height: 60px !important;
    max-height: 60px !important;
    transform: scale(1.45);
  }
}