/* ============================================================
   EC-INFOBOX — informační box s barevným štítkem nahoře
   - 4 varianty: --tip / --note / --warn / --important
   - štítek: ikona (z varianty) + popisek (píše se ručně do .ec-infobox__tag)
   - nadpis volitelný; text 1–3 věty
   - font i velikost se dědí z webu, barvy z palety Dupeto
   ============================================================ */


.ec-infobox {
  margin: 20px 0;
  padding: 14px 18px 16px;
  border-radius: 8px;
  border: 1px solid #E2E2E2;
  background: #fafafa;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.5;
  color: #424242;
}


/* štítek – popisek napíšeš ručně do spanu, ikonu doplní varianta */
.ec-infobox__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  padding: 4px 11px 4px 9px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  background: #E2E2E2;
  color: #424242;
}
.ec-infobox__tag::before {
  content: "";
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}


.ec-infobox__title {
  margin: 0 0 4px;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}


/* reset Shoptet defaultů pro text uvnitř */
.ec-infobox__text,
.ec-infobox p {
  margin: 0;
  color: inherit;
}
.ec-infobox__text + .ec-infobox__text,
.ec-infobox p + p {
  margin-top: 6px;
}


/* odkazy uvnitř – drží barvu a zůstávají čitelné */
.ec-infobox a {
  color: inherit;
  text-decoration: underline;
}


/* ---------- TIP (olivová) ---------- */
.ec-infobox--tip .ec-infobox__tag {
  background: #999903;
  color: #fff;
}
.ec-infobox--tip .ec-infobox__tag::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 21h4'/><path d='M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z'/></svg>");
}


/* ---------- POZNÁMKA (šedá) ---------- */
.ec-infobox--note .ec-infobox__tag {
  background: #6e6e6e;
  color: #fff;
}
.ec-infobox--note .ec-infobox__tag::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8h.01'/><path d='M12 11v5'/></svg>");
}


/* ---------- VAROVÁNÍ (žlutá) ---------- */
.ec-infobox--warn .ec-infobox__tag {
  background: #fec700;
  color: #424242;
}
.ec-infobox--warn .ec-infobox__tag::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23424242' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 2 20h20L12 3z'/><path d='M12 10v4'/><path d='M12 17h.01'/></svg>");
}


/* ---------- DŮLEŽITÉ (tmavý štítek + žlutý rámeček) ---------- */
.ec-infobox--important {
  border-color: #fec700;
}
.ec-infobox--important .ec-infobox__tag {
  background: #424242;
  color: #fec700;
}
.ec-infobox--important .ec-infobox__tag::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fec700' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v6'/><path d='M12 16h.01'/></svg>");
}


/* ---------- Mobil ---------- */
@media (max-width: 480px) {
  .ec-infobox {
    padding: 12px 14px 14px;
  }
}