/* === Iconița de coș din antet ========================================
   Coșul nu mai e pe site-ul ăsta, e la shop.rdndata.ro. Iconița îl duce
   pe om acolo, dar o desenăm noi, nu o luăm din fontul temei: așa putem
   s-o punem în mișcare și n-avem nevoie de încă un font.

   Mișcarea e rară și scurtă - o dată la vreo opt secunde coșul se
   clatină puțin, iar un produs îi cade înăuntru. Cât să prinzi cu
   coada ochiului că e acolo, nu cât să te zgârie când citești. Cine a
   cerut sistemului mai puțină mișcare nu primește niciuna. */

.rdn-cos{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .18s ease;
}
.rdn-cos:hover,
.rdn-cos:focus-visible{ background: rgba(106, 61, 232, .1) }
.rdn-cos:focus-visible{ outline: 2px solid #6a3de8; outline-offset: 2px }

.rdn-cos svg{
  width: 23px;
  height: 23px;
  overflow: visible;                 /* ca produsul să se vadă și deasupra */
}
.rdn-cos .rdn-cos-trup{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rdn-cos .rdn-cos-roata{ fill: currentColor }

/* produsul care cade în coș: stă ascuns și apare numai în timpul mișcării */
.rdn-cos .rdn-cos-produs{
  fill: #f0563f;
  opacity: 0;
  transform-origin: 11px 3px;
}

/* coșul se clatină ca și cum ar porni din loc */
.rdn-cos-desen{
  transform-origin: 12px 20px;
  animation: rdn-cos-clatina 8s ease-in-out infinite;
}
@keyframes rdn-cos-clatina{
  0%, 74%, 100% { transform: translateX(0) rotate(0) }
  78%           { transform: translateX(-1.5px) rotate(-6deg) }
  84%           { transform: translateX(1px) rotate(4deg) }
  90%           { transform: translateX(0) rotate(0) }
}

.rdn-cos .rdn-cos-produs{
  animation: rdn-cos-cade 8s ease-in-out infinite;
}
@keyframes rdn-cos-cade{
  0%, 58%  { opacity: 0; transform: translateY(-9px) scale(.6) }
  64%      { opacity: 1; transform: translateY(-9px) scale(1) }
  72%      { opacity: 1; transform: translateY(0) scale(1) }
  76%      { opacity: 1; transform: translateY(-1.5px) scale(1) }  /* săltat */
  80%, 100%{ opacity: 0; transform: translateY(0) scale(.9) }
}

/* pe hover se mișcă o dată, scurt, ca să răspundă la atingere */
.rdn-cos:hover .rdn-cos-desen{ animation: rdn-cos-clatina 1.1s ease-in-out }

@media (prefers-reduced-motion: reduce){
  .rdn-cos-desen,
  .rdn-cos .rdn-cos-produs,
  .rdn-cos:hover .rdn-cos-desen{ animation: none }
  .rdn-cos .rdn-cos-produs{ opacity: 0 }
}

/* în antetul de pe ecran lat stă în rând cu celelalte iconițe */
.fusion-main-menu .rdn-cos{ width: 40px; height: 40px }

/* Avada copiază meniul de pe ecran lat în cel de telefon, deci iconița
   ar ieși de două ori acolo: o dată în bara de sus, unde am pus-o, și
   încă o dată ca rând în meniul desfășurat. Pe cea din meniu o ascundem
   - un rând cu o iconiță și fără scris nu spune nimic. */
.fusion-mobile-nav-holder .rdn-cos-item,
.fusion-mobile-nav-holder .rdn-cos{ display: none !important }

/* === Coșul plin ======================================================
   Când omul are ceva în coș, iconița nu mai stă goală: coșul se umple,
   capătă culoarea firmei și primește o bulină cu numărul produselor.
   Mișcarea de „vino-ncoace" se oprește - n-are rost să-l mai chemi pe
   om într-un coș în care a pus deja. */
.rdn-cos-numar{
  position: absolute;
  top: 5px;
  right: 4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #f0563f;
  color: #fff;
  font: 700 9px/14px system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 0 0 2px #fff;
  text-align: center;
  letter-spacing: 0;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}
.rdn-cos{ position: relative }

.rdn-cos--plin .rdn-cos-numar{
  opacity: 1;
  transform: scale(1);
  animation: rdn-cos-bulina .45s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes rdn-cos-bulina{
  0%  { opacity: 0; transform: scale(.3) }
  60% { opacity: 1; transform: scale(1.18) }
  100%{ opacity: 1; transform: scale(1) }
}

/* coșul se umple: trupul primește fundal, iar marfa se vede înăuntru */
.rdn-cos .rdn-cos-marfa{
  fill: currentColor;
  opacity: 0;
  transition: opacity .2s ease;
}
.rdn-cos--plin .rdn-cos-trup{ stroke-width: 1.9 }
.rdn-cos--plin .rdn-cos-marfa{ opacity: 1 }

/* plin fiind, nu mai dă din el */
.rdn-cos--plin .rdn-cos-desen,
.rdn-cos--plin .rdn-cos-produs{ animation: none }
.rdn-cos--plin .rdn-cos-produs{ opacity: 0 }
/* dar răspunde la atingere */
.rdn-cos--plin:hover .rdn-cos-desen{ animation: rdn-cos-clatina 1.1s ease-in-out }

@media (prefers-reduced-motion: reduce){
  .rdn-cos--plin .rdn-cos-numar{ animation: none }
}

/* Dacă magazinul ne spune doar „e ceva în coș", fără număr, bulina n-are
   ce scrie: atunci e doar un punct, și-l facem mai mic. */
.rdn-cos--plin .rdn-cos-numar:empty{
  min-width: 9px;
  width: 9px;
  height: 9px;
  padding: 0;
  top: 7px;
  right: 7px;
}

/* === Așezarea în antet ================================================
   În bara de sus de pe telefon, celelalte două iconițe ale temei au
   21px, iar coșul 44px - cât cere degetul. Fiind toate pe același rând
   de scris, coșul atârna cu 23px mai jos decât ele, iar antetul creștea
   de la 98px la 121px.

   Rândul devine un rând adevărat, cu toate trei pe mijloc, iar coșul
   își păstrează zona mare de apăsat fără să mai împingă rândul.

   Totul numai sub 1000px: acolo arată tema bara asta. Pe ecran lat o
   ține ascunsă, și trebuie să rămână ascunsă - altfel hamburgerul și
   „+" ies peste logo. */
@media (max-width: 1000px){
  .fusion-mobile-menu-icons{
    display: flex !important;
    /* tema le așeza de la dreapta la stânga, cu hamburgerul lângă
       margine, unde îl caută omul; păstrăm ordinea aceea */
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    line-height: 1;
  }
  .fusion-mobile-menu-icons > a{ margin: 0 !important }
  .fusion-mobile-menu-icons .rdn-cos{
    width: 34px;
    height: 34px;
    margin: -6px 0 !important;      /* cutia crește fără să înalțe rândul */
  }
  .fusion-mobile-menu-icons .rdn-cos svg{ width: 21px; height: 21px }
  .fusion-mobile-menu-icons .rdn-cos .rdn-cos-numar{ top: 0; right: -1px }
  .fusion-mobile-menu-icons .rdn-cos--plin .rdn-cos-numar:empty{
    top: 2px; right: 2px;
  }
}

/* ======================================================================
   Panoul coșului
   ======================================================================
   Se deschide peste pagină, din dreapta. Nu e o pagină nouă dinadins:
   omul trebuie să-și vadă coșul fără să piardă locul în care era.
   Se construiește din cos.js, ca să nu fie nevoie de markup în cele 21
   de pagini. */
.rdn-panou{
  position:fixed; inset:0; z-index:100000;
  visibility:hidden; pointer-events:none;
}
.rdn-panou--deschis{visibility:visible; pointer-events:auto}

.rdn-panou-fundal{
  position:absolute; inset:0; background:rgba(9,41,51,.45);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s var(--rdn-arc,ease);
}
.rdn-panou--deschis .rdn-panou-fundal{opacity:1}

.rdn-panou-cutie{
  position:absolute; top:0; right:0; bottom:0; width:min(420px,100%);
  display:flex; flex-direction:column;
  background:#ffffff; box-shadow:-24px 0 60px -30px rgba(9,41,51,.6);
  transform:translateX(100%); transition:transform .32s var(--rdn-arc,ease);
  font-family:'Open Sans',Arial,sans-serif;
}
.rdn-panou--deschis .rdn-panou-cutie{transform:none}

.rdn-panou-cap{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 22px; border-bottom:1px solid rgba(98,57,189,.12);
}
.rdn-panou-cap h2{
  margin:0; font-family:Teko,'Open Sans',sans-serif; font-size:30px;
  line-height:1; font-weight:500; color:#19233f;
}
.rdn-panou-cap h2::after{display:none !important}
.rdn-panou-x{
  border:none; background:none; font-size:30px; line-height:1; cursor:pointer;
  color:#55607a; padding:4px 10px; border-radius:8px;
}
.rdn-panou-x:hover{background:rgba(98,57,189,.08); color:#6239bd}

.rdn-panou-corp{flex:1; overflow-y:auto; padding:8px 22px}
.rdn-panou-gol{margin:34px 0; text-align:center; color:#55607a; font-size:15px}

.rdn-randuri{list-style:none; margin:0; padding:0}
.rdn-rand{
  display:grid; grid-template-columns:1fr auto auto auto; align-items:center;
  gap:10px; padding:16px 0; border-bottom:1px solid rgba(98,57,189,.10);
}
.rdn-rand:last-child{border-bottom:none}
.rdn-rand-nume{font-size:14px; line-height:1.4; color:#19233f; font-weight:600}
.rdn-rand-perioada{display:block; font-weight:400; font-size:12px; color:#7a8399}
.rdn-rand-cate{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid rgba(98,57,189,.20); border-radius:8px; overflow:hidden;
}
.rdn-rand-cate button{
  border:none; background:none; cursor:pointer; width:28px; height:30px;
  font-size:16px; color:#6239bd; line-height:1;
}
.rdn-rand-cate button:hover{background:rgba(98,57,189,.08)}
.rdn-rand-cate span{min-width:24px; text-align:center; font-size:13.5px; font-weight:700}
.rdn-rand-pret{font-size:14px; font-weight:700; color:#19233f; white-space:nowrap}
.rdn-rand-x{
  border:none; background:none; cursor:pointer; font-size:20px; line-height:1;
  color:#a8b0c2; padding:2px 4px; border-radius:6px;
}
.rdn-rand-x:hover{color:#cc0000; background:rgba(204,0,0,.08)}

.rdn-panou-jos{padding:18px 22px 22px; border-top:1px solid rgba(98,57,189,.12)}
.rdn-total{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:0 0 4px; font-size:14px; color:#55607a;
}
.rdn-total strong{
  font-family:Teko,'Open Sans',sans-serif; font-size:30px; line-height:1;
  color:#6239bd; font-weight:500;
}
.rdn-panou-nota{margin:0 0 14px; font-size:12px; color:#7a8399}
.rdn-panou-buton{
  display:block; width:100%; text-align:center; padding:14px; border-radius:11px;
  font-size:14.5px; font-weight:700; text-decoration:none; cursor:pointer;
  border:2px solid transparent; box-sizing:border-box; margin:0 0 10px;
  font-family:inherit;
}
.rdn-panou-buton:last-child{margin-bottom:0}
.rdn-panou-buton--plin{
  background:linear-gradient(100deg,#6239bd,#7a52d4 48%,#74c5da); color:#fff !important;
  box-shadow:0 14px 30px -14px rgba(98,57,189,.8);
}
.rdn-panou-buton--sters{
  background:transparent; color:#6239bd !important; border-color:rgba(98,57,189,.35);
}
.rdn-panou-buton--sters:hover{background:rgba(98,57,189,.07)}

body.rdn-panou-blocat{overflow:hidden}

@media (max-width:480px){
  .rdn-panou-cutie{width:100%}
  .rdn-rand{grid-template-columns:1fr auto auto; row-gap:8px}
  .rdn-rand-x{grid-column:3; grid-row:1}
  .rdn-rand-pret{grid-column:2 / span 2; text-align:right}
}

@media (prefers-reduced-motion:reduce){
  .rdn-panou-cutie,.rdn-panou-fundal{transition:none}
}