:root {
  --freskor-cta-green: #84c344;
  --freskor-cta-green-dark: #639d34;
  --freskor-cta-blue: #2c387d;
  --freskor-cta-yellow: #f8dc08;
}

.freskor-cta-wrapper {
  display: flex;
  width: 100%;
  margin: 26px 0 36px;
}

.freskor-cta-align-left { justify-content: flex-start; }
.freskor-cta-align-center { justify-content: center; }
.freskor-cta-align-right { justify-content: flex-end; }

.freskor-cta-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 46px;
  padding: 13px 22px 13px 24px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px;
  background: linear-gradient(128deg, #2c387d 0%, #38547b 42%, #84c344 100%);
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none !important;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 24px rgba(44,56,125,.16), 0 3px 8px rgba(99,157,52,.10), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, border-color .22s ease, color .22s ease;
}

.freskor-cta-button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 34%;
  background: linear-gradient(112deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 42%, rgba(255,255,255,.30) 52%, rgba(255,255,255,.10) 62%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  opacity: .38;
  pointer-events: none;
  transition: left .42s ease, opacity .25s ease;
  z-index: 0;
}

.freskor-cta-button::after {
  position: relative;
  z-index: 1;
  content: "";
  display: inline-flex;
  flex: 0 0 auto;
  width: 2.25em;
  height: 2.25em;
  margin-left: 14px;
  border-radius: 999px;
  background-color: var(--freskor-cta-yellow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M6.5 14h14.5' stroke='%232c387d' stroke-width='4.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.5 8.5L21 14l-5.5 5.5' stroke='%232c387d' stroke-width='4.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 68% 68%;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 14px rgba(31,40,89,.20), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.freskor-cta-button:hover,
.freskor-cta-button:focus {
  color: #fff !important;
  transform: translateY(-2px);
  filter: saturate(1.04) brightness(1.015);
  box-shadow: 0 13px 28px rgba(44,56,125,.20), 0 4px 10px rgba(99,157,52,.12), inset 0 1px 0 rgba(255,255,255,.20);
  text-decoration: none !important;
}

.freskor-cta-button:hover::before,
.freskor-cta-button:focus::before {
  left: 108%;
  opacity: .65;
}

.freskor-cta-button:hover::after,
.freskor-cta-button:focus::after {
  transform: translate(4px,-1px) scale(1.06);
  background-color: #ffe72d;
  box-shadow: 0 8px 18px rgba(31,40,89,.22), inset 0 1px 0 rgba(255,255,255,.55);
}

.freskor-cta-button:focus-visible {
  outline: 3px solid rgba(132,195,68,.32);
  outline-offset: 3px;
}

.freskor-cta-button--compact {
  max-width: 100%;
  padding: 11px 19px 11px 21px;
  font-size: 16px;
}

.freskor-cta-button--wide {
  width: 100%;
  max-width: 880px;
  min-height: 54px;
  padding: 17px 26px 17px 29px;
  font-size: 18px;
  line-height: 1.45;
}

.freskor-cta-button--outline {
  background: #fff;
  color: var(--freskor-cta-blue) !important;
  border: 2px solid rgba(132,195,68,.68);
  box-shadow: 0 7px 18px rgba(44,56,125,.08);
}

.freskor-cta-button--outline::before {
  background: linear-gradient(112deg, rgba(132,195,68,0) 0%, rgba(132,195,68,.06) 42%, rgba(132,195,68,.18) 52%, rgba(132,195,68,.06) 62%, rgba(132,195,68,0) 100%);
}

.freskor-cta-button--outline::after {
  background-color: var(--freskor-cta-yellow);
  border-color: rgba(44,56,125,.08);
  box-shadow: 0 5px 12px rgba(44,56,125,.12);
}

.freskor-cta-button--outline:hover,
.freskor-cta-button--outline:focus {
  background: linear-gradient(128deg, #2c387d 0%, #38547b 42%, #84c344 100%);
  color: #fff !important;
  border-color: transparent;
}

.freskor-cta-button--full,
.freskor-cta-width-full .freskor-cta-button {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .freskor-cta-wrapper {
    margin: 22px 0 32px;
  }

  .freskor-cta-button,
  .freskor-cta-button--compact,
  .freskor-cta-button--wide {
    width: 100%;
    padding: 14px 17px 14px 19px;
    font-size: 16px;
    line-height: 1.42;
    border-radius: 14px;
  }

  .freskor-cta-button::after {
    width: 2.15em;
    height: 2.15em;
    margin-left: 11px;
  }
}