/**
 * MAUP manifest.
 * @maup-path: assets/css/components/buttons.css
 * @maup-version: 1.30.0
 * @maup-mode: replace
 * @maup-role: Shared public button primitives
 */
/* Component: reusable buttons, icon buttons and directional arrows. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.button:hover { transform: scale(1.018); }
.button:active { transform: scale(.985); }
.button:disabled { opacity: .42; pointer-events: none; }
.button--primary { background: #f7f7f4; color: #09090a; box-shadow: 0 10px 34px rgba(255,255,255,.08); }
.button--primary:hover { background: #fff; box-shadow: 0 14px 38px rgba(255,255,255,.12); }
.button--ghost { background: #1c1c1f; color: var(--text); }
.button--light-ghost { background: rgba(12,12,13,.075); color: var(--ink); }
.button--dark { background: var(--ink); color: white; }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1d1d20;
  color: #fff;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s ease;
}
.icon-button:hover { transform: scale(1.04); background: #28282b; }
.icon-button--light { background: rgba(0,0,0,.07); color: var(--ink); }

.button--header {
  min-height: 46px;
  max-width: 190px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transform-origin: 100% 50%;
  background: var(--header-cta-bg);
  color: var(--header-cta-fg);
  z-index: 15010 !important;
  transition: max-width .72s cubic-bezier(.22,.8,.24,1), padding .72s cubic-bezier(.22,.8,.24,1), opacity .46s ease, transform .68s cubic-bezier(.22,.8,.24,1), background-color .68s cubic-bezier(.22,.8,.24,1), color .68s cubic-bezier(.22,.8,.24,1) !important;
}
.button:not(.button--header) > span[aria-hidden="true"],
.button:not(.button--header):hover > span[aria-hidden="true"],
.button:not(.button--header):focus-visible > span[aria-hidden="true"] { transform: none !important; }

.ui-arrow {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.2em;
  height: 1.2em;
  transition: transform .34s var(--ease);
}
.ui-arrow--ne { width: 1.05em; height: 1.05em; }
.button:hover .ui-arrow--ne,
.button:focus-visible .ui-arrow--ne { transform: translate3d(2px,-2px,0); }

@media (min-width: 1025px) {
  .button--header {
    position: relative !important;
    inset: auto !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    align-self: center !important;
    transform: none;
  }
}
@media (max-width: 1024px) {
  .button--header {
    min-height: 44px !important;
    width: auto !important;
    padding-inline: 15px !important;
    font-size: .78rem !important;
    align-self: center !important;
  }
  .button--header span:first-child { display: inline !important; }
}
@media (max-width: 700px) {
  .button--header {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px;
    padding: 0 !important;
  }
  .button--header span:first-child { display: none !important; }
}
@media (max-width: 1024px) and (hover: none) {
  .button:hover { box-shadow: inherit !important; }
}

@keyframes wesleyCtaLightPass {
  0%,60% { left: -42%; opacity: 0; }
  66% { opacity: .52; }
  82% { left: 118%; opacity: .18; }
  86%,100% { left: 118%; opacity: 0; }
}