/* ============================================================
   ALBACOM B2B - REDESIGN CSS
   Paleta: Primar #0F4C81 | Accent #F59E0B | Neutru #F5F7FA/#FFFFFF
   ============================================================ */

:root{
  --primary:#0F4C81;
  --primary-dark:#0b3a63;
  --accent:#F59E0B;
  --accent-dark:#d97f06;
  --neutral:#F5F7FA;
}

body, input, button, a, .categorii_tab, #meniudrop{
  font-family:'Poppins', Arial, sans-serif;
}

/* ---------- HEADER / MENIU ----------
   NOTA ECHIPA TEHNICA: cauta in sursa CSS/LESS culorile originale
   #00A9E0 si #008FE0 pentru a recolora orice element ramas netestat */
#barasus, #meniudrop, #meniuincentru, .categorii_tab{
  background:var(--primary) !important;
  color:#fff !important;
}
#barasus, #meniudrop{
  box-shadow:0 2px 8px rgba(15,76,129,.25);
}

/* ---------- BUTON CTA (Cumpara acum) ---------- */
a.logpret{
  background:var(--accent) !important;
  border:none !important;
  border-radius:8px !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:0 2px 6px rgba(245,158,11,.35);
  transition:all .2s ease;
}
a.logpret:hover{
  background:var(--accent-dark) !important;
  transform:translateY(-1px);
}

/* ---------- CARDURI PRODUSE ---------- */
.containerarticol{
  border:1px solid #E7ECF2 !important;
  border-radius:16px !important;
  box-shadow:0 2px 10px rgba(15,76,129,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  background:#fff;
}
.containerarticol:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 20px rgba(15,76,129,.15);
}

/* ---------- FOOTER ---------- */
#footer{
  border-top:4px solid var(--accent) !important;
}

::selection{ background:var(--accent); color:#fff; }

/* ---------- MENIU LATERAL STANGA ---------- */
#oferte_stanga, #categoriileft{
  background:#fff;
  border:1px solid #E7ECF2;
  border-radius:0 0 12px 12px;
  box-shadow:0 2px 10px rgba(15,76,129,.06);
}
#oferte_stanga{
  overflow:hidden;
}
#categoriileft{
  /* overflow:hidden ar taia flyout-ul de subcategorii (pozitionat absolut,
     iese in dreapta sidebar-ului la hover pe desktop) - nu se poate folosi aici */
  overflow:visible;
}
#oferte_stanga ul li a, #categoriileft ul li a{
  border-bottom:none !important; /* elimina vechiul border punctat care dubla cu noul border solid */
}
#oferte_stanga ul li, #categoriileft ul li{
  border-bottom:1px solid #EEF2F7;
  transition:all .15s ease;
}
#oferte_stanga ul li:hover, #categoriileft ul li:hover{
  border-left:3px solid var(--accent);
  padding-left:23px;
  background:var(--neutral);
}

/* sageata categorii - centrare verticala (fix bug: float:right cauza dezaliniere) */
.cusageata > a{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
}
.cusageata > a::after{
  color:var(--primary);
}
.cusageata > a:hover::after{
  color:var(--accent);
}

/* ---------- ICOANE TOP (cont, favorite, cos) ---------- */
.cosbutoane{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
}

.acb-icon-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--neutral);
  border:1px solid #E7ECF2;
  box-shadow:0 2px 6px rgba(15,76,129,.08);
  transition:all .2s ease;
}
.acb-icon-btn:hover{
  background:#fff;
  box-shadow:0 4px 10px rgba(15,76,129,.18);
}

.acb-badge{
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 16px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* ============================================================
   EXTINDERE ACOPERIRE - elemente ramase cu albastrul vechi
   (#00A9E0 / #008FE0), gasite printr-un audit complet al
   public/css/style.css si responsive.css. Adaugate ca sa nu
   ramana amestec vizibil de albastru vechi + bleumarin nou.
   ============================================================ */

/* Buton "Adauga in cos" / "La comanda" pe fiecare produs.
   NOTA: .cumparaholderbuton e doar wrapper flex (coloana qty + buton), nu se
   mai coloreaza - culoarea o poarta butonul .cumparaarticole. */
.cumparaarticole{
  background-color:var(--accent) !important;
  color:#fff !important;
}

/* Buton "Comanda tot" (cumparare in masa) */
.comandatot{
  background-color:var(--accent) !important;
  color:#fff !important;
}

/* Toggle-uri mobil (Filtre / Meniu si categorii) */
.btn-toggle-filtre, .btn-toggle-stanga{
  background-color:var(--primary) !important;
}

/* Selector limba/moneda din header */
.langCoinsContainer{
  background-color:var(--primary) !important;
}

/* Fix conflict hover categorii: pachetul de baza recoloreaza <li>,
   dar <a>-ul din interior avea propriul background-color vechi,
   care se vedea o clipa la hover. */
#categoriileft ul li:hover>a{
  background-color:var(--neutral) !important;
  color:var(--primary) !important;
}

/* Iconite cont sus (alerta stoc / favorite / cos) - text/culoare */
#shopholder, #shopholder a{
  color:var(--primary);
}

/* Widget-uri sidebar dreapta, blog, filtre, paginare, pagini statice */
.righttitlu, .rightverde, .carierefirst, .farmaciemesaj, .farmacieimagine,
.overde, #feedlinkuri, #shoptoprezentare a:last-child, #meniuincentru, #meniushop{
  background-color:var(--primary) !important;
}
.hverde{
  border-bottom-color:var(--primary) !important;
}
.datablogholder, .articolcriterii i{
  color:var(--primary) !important;
}
.paginare select{
  border-color:var(--primary) !important;
}
.nrv, .nmv, .nlv{
  color:var(--accent) !important;
}
#meniumobil{
  color:var(--primary) !important;
}

/* ============================================================
   MENIU MOBIL - DRAWER STANGA (stil global-electric)
   Buton 3 linii (#meniumobil) deschide un panou din stanga cu:
   cont (Admin / Contul meu / Iesire) + categorii accordion + linkuri
   ============================================================ */
body.mdNoScroll{ overflow:hidden; }

#mobileDrawerOverlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  z-index:100000; /* peste #barasus (99999) ca sa acopere tot */
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
#mobileDrawerOverlay.open{
  opacity:1;
  visibility:visible;
}

#mobileDrawer{
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:320px;
  max-width:86%;
  background:#fff;
  z-index:100001; /* peste overlay (100000) si #barasus (99999) */
  transform:translateX(-100%);
  transition:transform .3s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:2px 0 18px rgba(0,0,0,.25);
  display:none; /* ascuns pe desktop; afisat in media query mobil */
}
#mobileDrawer.open{
  transform:translateX(0);
}

/* Header drawer: titlu "Meniu" + buton inchidere */
#mobileDrawer .mdHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 18px 14px;
  border-bottom:1px solid #e6ebef;
  position:sticky;
  top:0;
  background:#fff;
  z-index:2;
}
#mobileDrawer .mdTitle{
  font-size:20px;
  font-weight:700;
  color:var(--primary);
}
#mobileDrawer .mdClose{
  background:none !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  color:#8a97a3 !important;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:4px 8px;
  width:auto;
  height:auto;
}
#mobileDrawer .mdClose:hover{
  color:var(--primary) !important;
}

/* Sectiune cont */
.mdAccount{
  display:flex;
  flex-direction:column;
  padding:8px 0;
  border-bottom:6px solid #f1f4f8;
}
.mdAccount a{
  padding:11px 20px;
  color:var(--primary);
  font-weight:600;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:10px;
}
.mdAccount a:hover{
  background:var(--neutral);
}
.mdAccount a i{
  width:18px;
  text-align:center;
  color:var(--accent);
}

/* Categorii - accordion */
.mdCats{
  padding:4px 0;
}
.mdCat{
  border-bottom:1px solid #eef2f7;
}
.mdCatBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 20px;
  background:none !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  text-align:left;
  font-size:15px;
  font-weight:600;
  color:#1c2831 !important;
  cursor:pointer;
  text-transform:none;
}
.mdCatBtn:hover{
  background:var(--neutral) !important;
}
.mdChevron{
  color:#9aa6b1;
  font-size:13px;
  transition:transform .25s ease;
  flex:0 0 auto;
}
.mdCat.open > .mdCatBtn{
  color:var(--primary) !important;
}
.mdCat.open > .mdCatBtn .mdChevron{
  transform:rotate(180deg);
  color:var(--primary);
}
.mdCatBody{
  display:none;
  padding:2px 0 10px;
  background:#fafbfc;
}
.mdCat.open > .mdCatBody{
  display:block;
}
.mdGroup{
  padding:5px 0;
}
.mdGroupTitle{
  display:block;
  padding:7px 20px 7px 24px;
  font-weight:700;
  color:var(--primary);
  font-size:14px;
}
.mdSub{
  display:block;
  padding:6px 20px 6px 34px;
  color:#4a5760;
  font-size:13.5px;
}
.mdGroupTitle:hover,
.mdSub:hover{
  color:var(--accent);
}
.mdCatLink{
  display:block;
  padding:13px 20px;
  border-bottom:1px solid #eef2f7;
  font-size:15px;
  font-weight:600;
  color:#1c2831;
}
.mdCatLink:hover{
  background:var(--neutral);
  color:var(--primary);
}

/* Linkuri jos */
.mdLinks{
  display:flex;
  flex-direction:column;
  padding:8px 0 30px;
  border-top:6px solid #f1f4f8;
}
.mdLinks a{
  padding:11px 20px;
  color:#1c2831;
  font-size:14.5px;
  display:flex;
  align-items:center;
  gap:10px;
}
.mdLinks a:hover{
  background:var(--neutral);
  color:var(--primary);
}
.mdLinks a i{
  width:18px;
  text-align:center;
  color:var(--accent);
}

/* Afisare pe mobil/tableta + layout header (hamburger + logo pe un rand, search dedesubt) */
@media (max-width:750px){
  #mobileDrawer{ display:block; }

  /* HEADER FIX: #meniusus era lipit la top:34px, dar #barasus e in realitate
     ~42px inalt -> randul cu logo aluneca cativa px in sus si intra sub bara
     albastra. Bara de contact nu mai e sticky (nici numar magic de potrivit),
     iar randul cu [meniu][logo][cos] se fixeaza singur la top:0. */
  #barasus{
    position:static;
    z-index:auto;
  }
  #meniusus{
    top:0;
  }

  /* Bara de cautare mai joasa - ocupa mai putin din ecran */
  #meniushop{
    padding:6px 0;
  }
  #searchholder form{
    height:36px;
  }
  #cautah #ce{
    height:100%;
    padding:0 10px;
    font-size:14px;
  }
  #cauta{
    width:42px;
    background-size:17px;
  }
  #meniumobil{
    display:block !important;
    position:static;
    font-size:26px;
    padding:0;
    width:auto;
    height:auto;
    line-height:1;
    cursor:pointer;
  }
  #meniusus .centru{
    flex-wrap:wrap;
    align-items:center;
  }
  #logoholder{
    display:flex;
    align-items:center;
    gap:6px;
    width:auto;
    text-align:left;
  }
  #meniu{
    order:5;
    width:100%;
    display:block;
    padding-left:0;
  }
  /* dupa ce JS-ul a mutat search-ul in bara albastra, containerul gol dispare.
     Daca JS-ul nu ruleaza, search-ul ramane aici ca fallback. */
  body.acb-search-moved #meniu{
    display:none;
  }
  /* drawer inlocuieste butonul in-content de categorii pe mobil */
  .btn-toggle-stanga{ display:none !important; }

  /* Hamburgerul din bara de sus (dreapta) dispare - nu mai comuta
     telefon/email cu contul. Datele de contact raman mereu vizibile. */
  .showmenu{ display:none !important; }

  /* Bara de sus: contact in stanga, selectorul de limba/moneda mereu in
     coltul din dreapta. Linkurile de cont sunt in drawer, deci se ascund. */
  #barasusright{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    margin-right:0;
  }
  #barasusright > a,
  #barasusright > span{
    display:none !important;
  }
  #barasusleft{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:12px;
  }
  #barasus > .centru{
    gap:10px;
  }

  /* Din cele 3 iconuri (alerte stoc / favorite / cos) ramane doar cosul */
  .cosbutoane a:nth-child(1),
  .cosbutoane a:nth-child(2),
  .coscantitati .cantitatecos:nth-child(1),
  .coscantitati .cantitatecos:nth-child(2){
    display:none !important;
  }

  /* Rand unic: [buton meniu] [logo centrat] [cos] */
  #meniusus > .centru{
    position:relative;
  }
  #logoholder{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    text-align:left;
    /* static, ca logo-ul absolut sa se raporteze la .centru (bara intreaga),
       nu la #logoholder care e position:relative in style.css */
    position:static;
  }
  /* logo-ul centrat exact pe bara, indiferent de latimea butonului si a cosului */
  #logoholder > a{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
  #logoholder > a img{
    display:block;
    max-height:40px;
    width:auto;
  }

  /* Bara albastra de sub logo devine bara de cautare.
     "Meniu" si celelalte linkuri dispar - sunt in drawer. */
  #meniudrop,
  #meniuinshop{
    display:none !important;
  }
  #meniushop{
    height:auto;
    padding:8px 0;
  }
  #meniuincentru{
    padding:0;
    display:block;
  }
  #meniuincentru #searchholder{
    width:100%;
    max-width:none;
    margin:0;
  }
  /* Badge-ul cu numarul de produse e mutat deja in interiorul iconului
     de albacom-redesign.js (.acb-badge), iar .coscantitati e ascuns de el. */
  #shopholder{
    display:flex;
    align-items:center;
    margin-left:auto;
    width:auto;
    flex:0 0 auto;
    padding:0;
  }
  .cosbutoane{
    margin:0;
    display:flex;
    align-items:center;
  }
}