/* Mini-cos: adaugarea in cos nu mai intrerupe cumparatorul.
   Scris o data, folosit pe nutrienergie.ro si radiantaura.ro. */

/* Modalul implicit al PrestaShop nu mai apare. Daca vreun modul il mai
   injecteaza, nu se vede si nu blocheaza pagina. */
#blockcart-modal { display: none !important; }

.mc-anchor { position: relative; display: inline-flex; }

/* Numarul de pe iconita. Culoarea o ia din butonul principal al temei, la
   pornire, ca sa se potriveasca pe fiecare site fara s-o scriu aici. Asta de
   mai jos e doar plasa de siguranta daca tema n-are buton colorat. */
.mc-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #2f2f2d;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0;
  pointer-events: none;
  transform: scale(0);
  transition: transform .18s cubic-bezier(.2,.9,.3,1.3);
}
.mc-badge.on { transform: scale(1); }
.mc-badge.bump { animation: mc-bump .35s ease; }
@keyframes mc-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Panoul */
.mc-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 330px;
  background: #fff;
  border: 1px solid #e3e3df;
  border-radius: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,.13);
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  /* Fontul vine de la site, nu de la mine: altfel panoul ar fi scris cu alta
     litera decat restul paginii, si s-ar vedea ca e pus pe deasupra. */
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: #2f2f2d;
  text-align: left;
}
.mc-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }

.mc-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid #e3e3df;
  border-top: 1px solid #e3e3df;
  transform: rotate(45deg);
}

.mc-head {
  padding: 13px 16px 11px;
  border-bottom: 1px solid #efefeb;
  font-weight: 600;
  font-size: 14px;
}

.mc-list { max-height: 290px; overflow-y: auto; }

.mc-item {
  display: flex;
  gap: 11px;
  padding: 11px 16px;
  border-bottom: 1px solid #f4f4f0;
  align-items: flex-start;
}
.mc-item:last-child { border-bottom: 0; }

.mc-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 6px;
  border: 1px solid #eee;
  object-fit: cover;
  background: #fafaf8;
}

.mc-info { flex: 1 1 auto; min-width: 0; }
.mc-name {
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-meta { font-size: 12px; color: #77776f; }
.mc-price { font-weight: 600; color: #2f2f2d; }

.mc-del {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  color: #a8a89f;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.mc-del:hover { background: #f6f6f2; color: #b02020; }
.mc-del svg { width: 15px; height: 15px; }

.mc-foot { padding: 12px 16px 14px; border-top: 1px solid #efefeb; }
.mc-tot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 11px;
  font-size: 13px;
}
.mc-tot b { font-size: 16px; }

/* Butonul e mereu plin, ca sa se vada pe fundalul alb al panoului. Culoarea
   vine din accentul temei, pus din JS; asta de aici e plasa de siguranta. */
.mc-foot .mc-go {
  background: #2f2f2d;
  color: #fff;
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.mc-foot .mc-go:hover { filter: brightness(.92); color: #fff; }

.mc-gol { padding: 26px 16px; text-align: center; color: #85857c; font-size: 13px; }

/* Temele astea curata fundalurile din antet cu o regula lata:
     body .header * { background: transparent !important; }
   Panoul si numarul stau in antet, deci erau sterse si ele. Dublez clasa ca
   sa urc specificitatea peste `body .header *` si pun si `!important`.
   Nu e eleganta, dar e singura cale fara sa umblu in CSS-ul temei. */
.mc-badge.mc-badge          { background: #2f2f2d !important; color: #fff !important; }
.mc-panel.mc-panel          { background: #fff !important; color: #2f2f2d !important; }
.mc-panel.mc-panel::before  { background: #fff !important; }
.mc-thumb.mc-thumb          { background: #fafaf8 !important; }
.mc-del.mc-del:hover        { background: #f6f6f2 !important; }
.mc-foot .mc-go.mc-go       { background: #2f2f2d !important; color: #fff !important; }

/* Si culorile de text sunt sterse de aceeasi regula, deci le fixez pe fiecare
   element in parte. Fara asta numele produselor ies in culoarea meniului si
   textul butonului dispare pe fundalul plin. */
.mc-head.mc-head            { color: #2f2f2d !important; }
.mc-name.mc-name            { color: #2f2f2d !important; }
.mc-meta.mc-meta            { color: #77776f !important; }
.mc-price.mc-price          { color: #2f2f2d !important; }
.mc-tot.mc-tot              { color: #2f2f2d !important; }
.mc-tot.mc-tot span         { color: #6f6f67 !important; }
.mc-tot.mc-tot b            { color: #2f2f2d !important; }
.mc-del.mc-del              { color: #a8a89f !important; }
.mc-del.mc-del:hover        { color: #b02020 !important; }
.mc-gol.mc-gol              { color: #85857c !important; }

@media (max-width: 575px) {
  .mc-panel {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
  }
  .mc-panel::before { display: none; }
  .mc-list { max-height: 46vh; }
}