/* ROLDEN - meniu categorii desktop cu delimitatori (Costel+Claude, 2026-11-06)
   - delimitator vertical intre categorii
   - trece automat pe 2 randuri centrate cand sunt multe categorii (10-12), in aceeasi inaltime de header
   - pe mobil (<=992px) nu se schimba nimic */
@media (min-width: 993px) {
  /* logo-ul nu se mai micsoreaza cand meniul are multe categorii */
  #header-wrap .navbar-brand.logo { flex-shrink: 0; }
  #navbarNavDropdown > .navbar-nav {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    min-height: 90px;
    row-gap: 2px;
    padding: 6px 0;
  }
  #navbarNavDropdown > .navbar-nav > .nav-item {
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
  }
  /* delimitatorul */
  #navbarNavDropdown > .navbar-nav > .nav-item + .nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    margin-top: -8px;
    background: rgba(34, 27, 27, 0.22);
  }
  /* primul element de pe fiecare rand nu are delimitator (clasa pusa de js/rolden-header.js) */
  #navbarNavDropdown > .navbar-nav > .nav-item.row-start::before { display: none; }

  #navbarNavDropdown > .navbar-nav .nav-link {
    line-height: 1.25 !important;
    padding: 9px 15px !important;
    font-size: 15px;
    white-space: nowrap;
  }
  #navbarNavDropdown > .navbar-nav .nav-link .menu-label { position: relative; display: inline-block; }
  /* linie portocalie sub categoria la hover */
  #navbarNavDropdown > .navbar-nav .nav-link .menu-label::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 2px;
    background: #ee4000;
    transform: scaleX(0);
    transition: transform .2s ease;
  }
  #navbarNavDropdown > .navbar-nav .nav-link:hover .menu-label::after,
  #navbarNavDropdown > .navbar-nav .nav-item.active .menu-label::after { transform: scaleX(1); }
  #navbarNavDropdown > .navbar-nav .nav-link:hover { color: #ee4000; }

  /* cand meniul e pe 2 randuri: putin mai compact */
  #navbarNavDropdown > .navbar-nav.is-multirow .nav-link { padding: 6px 14px !important; }
}
@media (min-width: 993px) and (max-width: 1199px) {
  #navbarNavDropdown > .navbar-nav .nav-link { font-size: 14px; padding: 7px 10px !important; }
  #navbarNavDropdown > .navbar-nav.is-multirow .nav-link { padding: 5px 10px !important; }
}
/* intre 993 si 1299px vechiul hack .custom-size (111% / left:-64px) taia logo-ul in stanga - il neutralizam */
@media (min-width: 993px) and (max-width: 1299px) {
  #header-wrap .custom-size { flex: 0 0 100% !important; max-width: 100% !important; left: 0 !important; }
  #header-wrap .navbar-brand.logo img { height: 40px; }
}

/* ===== Mobil + tableta (<=992px): sigla stanga, butonul MENIU dreapta, pe acelasi rand (2026-11-06) ===== */
@media (max-width: 992px) {
  #header-wrap { padding: 8px 0; }
  #header-wrap .custom-size {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    left: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  #header-wrap .navbar {
    flex: 1 1 auto;
    justify-content: space-between !important;
    align-items: center;
    padding: 0;
    width: auto;
    position: static;
  }
  #header-wrap .navbar-brand.logo { margin: 0; padding: 0; text-align: left !important; flex: 0 1 auto; min-width: 0; }
  #header-wrap .navbar-brand.logo img { height: 40px; width: auto; max-width: 100%; margin: 0 !important; display: block; }
  /* butonul MENIU impins la dreapta */
  #header-wrap .option-white { margin-left: auto; padding: 0 12px; height: 44px; border-radius: 3px; cursor: pointer; flex: 0 0 auto; }
  #header-wrap .option-white .meniu-mobile { padding: 0 0 0 6px; }
  /* meniul deschis coboara pe toata latimea, sub rand */
  #header-wrap #navbarNavDropdown { position: absolute; left: 0 !important; right: 0; top: 100%; width: 100%; z-index: 1000; }
}
@media (max-width: 767px) {
  /* pe telefon sigla din nav e ascunsa (hidden-xs) si se foloseste cea .hidden-lg din fata nav-ului */
  #header-wrap .navbar { flex: 0 0 auto; }
  #header-wrap .navbar-brand.logo.hidden-lg { display: block !important; max-width: calc(100% - 150px); }
  #header-wrap .navbar-brand.logo img { height: 34px; }
}
@media (max-width: 359px) {
  #header-wrap .navbar-brand.logo img { height: 28px; }
  #header-wrap .option-white .meniu-mobile { display: none; }
}

/* ===== Bara de sus (email / telefon / linkuri) ordonata pe mobil si tableta (2026-11-06) ===== */
@media (max-width: 992px) {
  #site-header .top-bar { height: auto; padding: 6px 0 4px; border-bottom: 1px solid #efefef; }
  #site-header .top-bar .row > div { flex: 0 0 100%; max-width: 100%; text-align: center !important; }
  /* rand 1: email + telefon pe acelasi rand */
  #site-header .topbar-link { display: block !important; }
  #site-header .topbar-link .list-inline { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin: 0; text-align: center !important; }
  #site-header .topbar-link .list-inline-item { margin: 0; font-size: 14px; line-height: 22px; white-space: nowrap; }
  #site-header .topbar-link li span { margin-right: 6px; }
  /* rand 2: linkurile, pe un singur rand compact, cu delimitatori */
  #site-header .topbar-right { margin-top: 2px; }
  #site-header .topbar-menu { position: static !important; height: auto; display: flex; justify-content: center; flex-wrap: wrap; margin: 0; padding: 0; border-radius: 0; }
  #site-header .topbar-menu > li { display: flex; align-items: center; min-width: 0; padding: 0 10px !important; border-right: 1px solid #e3e3e3; }
  #site-header .topbar-menu > li:last-child { border-right: none; }
  #site-header .topbar-menu > li > a { line-height: 30px; font-size: 12px; letter-spacing: .3px; white-space: nowrap; }
}
@media (max-width: 767px) {
  /* pe telefon ascundem etichetele "Email" / "Telefon": raman adresa si numarul, cu iconite */
  #site-header .topbar-link li span { display: none; }
  #site-header .topbar-link .list-inline-item a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; color: #ee4000; margin-right: 6px; font-size: 12px; }
  #site-header .topbar-link .list-inline-item:first-child a::before { content: "\f0e0"; }
  #site-header .topbar-link .list-inline-item:last-child a::before { content: "\f095"; }
  #site-header .topbar-link .list-inline-item { font-size: 13px; }
  #site-header .topbar-menu > li { padding: 0 7px !important; }
  #site-header .topbar-menu > li > a { font-size: 11px; }
}

/* ===== Butonul "Promotia noastra" (dreapta): simbol % care se roteste 360 grade (2026-11-06) ===== */
.color-customizer a.promo-opener { background: #ee4000; overflow: visible; }
.color-customizer a.promo-opener .promo-spin {
  display: inline-block;
  font-size: 21px;
  line-height: 45px;
  animation: rolden-promo-spin 2.8s cubic-bezier(.45, .05, .25, 1) infinite;
  transform-origin: 50% 50%;
}
/* puls discret in jurul butonului */
.color-customizer a.promo-opener::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 5px 0 0 5px;
  box-shadow: 0 0 0 0 rgba(238, 64, 0, .55);
  animation: rolden-promo-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes rolden-promo-spin {
  0%   { transform: rotate(0deg) scale(1); }
  35%  { transform: rotate(360deg) scale(1.15); }
  45%  { transform: rotate(360deg) scale(1); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes rolden-promo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(238, 64, 0, .55); }
  45%  { box-shadow: 0 0 0 12px rgba(238, 64, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(238, 64, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .color-customizer a.promo-opener .promo-spin, .color-customizer a.promo-opener::after { animation: none; }
}

/* ===== Turcoazul de pe prima pagina, adus pe toate paginile (2026-11-06) ===== */
#site-header #header-wrap,
#site-header #header-wrap.fixed-header { background: #e7f4f4 !important; }
/* banda turcoaz sub poza wide de sub header (categorii, culori, contact etc.) */
section.page-title { border-bottom: 40px solid #9fd3d6; }
@media (max-width: 767px) { section.page-title { border-bottom-width: 24px; } }