.wmg-credit-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.wmg-credit {
  --wmg-credit-size: 13px;
  --wmg-main: #111111;
  --wmg-navy: #24345d;
  --wmg-lime: #b8d431;

  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  color: var(--wmg-main);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--wmg-credit-size);
  font-weight: 700;
  line-height: 1.1;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wmg-credit__char {
  display: inline-block;
  animation: wmgCreditCharIn 70ms ease-out both;
}

.wmg-credit__char--brand {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.wmg-credit__char--navy {
  color: var(--wmg-navy);
}

.wmg-credit__char--lime {
  color: var(--wmg-lime);
}

.wmg-credit__char--pipe {
  margin-inline: 0.05em;
}

.wmg-credit__cursor {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 2px;
  background: var(--wmg-navy);
  transform: translateY(0.12em);
  animation: wmgCreditBlink 0.68s steps(1, end) infinite;
}

.wmg-credit__cursor.is-done {
  animation: wmgCreditCursorOut 0.45s ease forwards;
}

@keyframes wmgCreditCharIn {
  from {
    opacity: 0;
    transform: translateY(1px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wmgCreditBlink {
  0%, 48% {
    opacity: 1;
  }

  49%, 100% {
    opacity: 0;
  }
}

@keyframes wmgCreditCursorOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .wmg-credit {
    --wmg-credit-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wmg-credit__char {
    animation: none;
  }

  .wmg-credit__cursor {
    display: none;
  }
}

/* The credit is an inline-flex of per-character spans, so inside an RTL page
   the flex line reverses and the English text renders backwards. Required on
   every Hebrew/Arabic site. */
.wmg-credit-link,
.wmg-credit {
  direction: ltr;
  unicode-bidi: isolate;
}

/* On dark footers override these three on a wrapper, e.g.
   .footer .wmg-credit{--wmg-main:#aeb6c6;--wmg-navy:#fff;--wmg-lime:#bce029} */

/* The credit types itself out one character at a time, so its box grows from
   nothing to full width — and anything laid out beside it slides while that
   happens. Reserving the final width up front keeps the row still. The
   reservation is invisible, has no height, and carries the same weight and
   family so it measures the same string the animation will draw. */
.wmg-credit-link {
  display: inline-block;
  min-width: 0;
}
.wmg-credit-link::after {
  content: "Made With Passion By WMG | WMG.co.il";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--wmg-credit-size, 13px);
  font-weight: 700;
  white-space: nowrap;
  direction: ltr;
}

/* utech: dark footer (#262930) — lift the three brand colours off it. */
.wmg-bottom-bar {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 18px;
  padding: 14px 0 4px;
  text-align: center;
}
/* the footer sets color:#212529, which is all but invisible on its own
   background — the bar has to state its own colour. */
.wmg-bottom-bar { color: #aeb6c6; }
.wmg-bottom-bar .meirot-link { margin: 0 0 8px; color: #aeb6c6; }
.wmg-bottom-bar .meirot-link a { color: #cfd6e4; text-decoration: underline; }
.wmg-bottom-bar .meirot-link a:hover { color: #fff; }
.wmg-bottom-bar .wmg-credit {
  --wmg-main: #aeb6c6;
  --wmg-navy: #ffffff;
  --wmg-lime: #bce029;
}