/* Shared control appearance. Page CSS owns placement and visibility only. */
:is(.fenix-button, .fenix-home-button, .fenix-home-cases__button,
  .fenix-case-study-cta__button, .fenix-case-detail-related__button,
  .fenix-careers-job__button, .fenix-job-detail-summary__button,
  .fenix-resources-company__button, .fenix-not-found-hero__button,
  .fenix-case-study-filter__apply, .fenix-case-study-filter__cancel) {
  --button-bg: var(--fenix-primary-500);
  --button-fg: var(--fenix-white);
  --button-border: transparent;
  --button-hover-bg: var(--fenix-primary-100);
  --button-hover-fg: var(--fenix-neutral-900);
  --button-stroke: url('../../images/design-system/button-stroke.svg') center / 100% 100% no-repeat;
  --button-disabled-opacity: 0.4;
  position: relative !important;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: var(--fenix-control-gap);
  height: var(--fenix-button-height);
  min-height: var(--fenix-button-height);
  padding: 0 var(--fenix-button-padding);
  border: 0;
  border-radius: var(--fenix-button-radius);
  background: var(--button-bg);
  color: var(--button-fg);
  box-shadow: inset 0 0 0 1px var(--button-border);
  text-shadow: none;
  font-family: var(--fenix-font);
  font-size: var(--button-font-size, 16px);
  line-height: var(--button-line-height, 24px);
  font-weight: var(--fenix-weight-bold);
  letter-spacing: var(--fenix-letter-spacing);
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms, color 160ms, opacity 160ms;
}

.fenix-button { display: inline-flex; }

/* The shared CTA uses the primary variant on every page and locale. */
  html body .fenix-case-study-cta__button {
    --button-bg: var(--fenix-primary-500);
    --button-fg: var(--fenix-white);
    --button-hover-bg: var(--fenix-primary-100);
    --button-hover-fg: var(--fenix-neutral-900);
    --button-stroke: url('../../images/design-system/button-stroke.svg') center / 100% 100% no-repeat;
    --button-stroke-content: '';
    background: var(--button-bg) !important;
    color: var(--button-fg) !important;
  }
  html body .fenix-case-study-cta__button:hover {
    background: var(--button-hover-bg) !important;
    color: var(--button-hover-fg) !important;
    --button-stroke-content: none;
  }
@media (max-width: 767px) {
  html body.fenix-figma-case-studies-page .fenix-case-study-filter__apply { color: var(--button-fg) !important; }
  html body.fenix-figma-case-studies-page .fenix-case-study-filter__apply:hover { color: var(--button-hover-fg) !important; }
}

:is(.fenix-button--secondary, .fenix-home-button--hero) {
  --button-bg: var(--fenix-primary-100);
  --button-fg: var(--fenix-neutral-900);
  --button-hover-bg: var(--fenix-primary-500);
  --button-hover-fg: var(--fenix-white);
  --button-stroke: none;
  --button-stroke-content: none;
}

:is(.fenix-button--ghost, .fenix-button--outline, .fenix-home-button--outline,
  .fenix-home-cases__button, .fenix-case-detail-related__button,
  .fenix-case-study-filter__cancel) {
  --button-bg: transparent;
  --button-fg: var(--fenix-primary-800);
  --button-border: var(--fenix-primary-800);
  --button-disabled-opacity: 0.5;
  --button-hover-bg: var(--fenix-primary-100);
  --button-hover-fg: var(--fenix-primary-800);
  --button-stroke: none;
  --button-stroke-content: none;
}

.fenix-button--inverse,
.fenix-header.is-over-hero .fenix-header__button--ghost {
  --button-bg: transparent;
  --button-fg: var(--fenix-white);
  --button-border: var(--fenix-white);
  --button-disabled-opacity: 0.5;
  --button-hover-bg: color-mix(in srgb, var(--fenix-white) 33%, transparent);
  --button-hover-fg: var(--fenix-white);
  --button-stroke: none;
  --button-stroke-content: none;
}

.fenix-button--text {
  --button-bg: transparent;
  --button-fg: var(--fenix-primary-500);
  --button-hover-bg: transparent;
  --button-hover-fg: var(--fenix-primary-800);
  --button-stroke: none;
  --button-stroke-content: none;
}

html body .fenix-header[data-fenix-header] .fenix-header__button {
  background: var(--button-bg) !important;
  color: var(--button-fg) !important;
  border-color: var(--button-border) !important;
  text-shadow: none !important;
}

html body .fenix-header[data-fenix-header] .fenix-header__button:hover:not([aria-disabled='true']) {
  background: var(--button-hover-bg) !important;
  color: var(--button-hover-fg) !important;
}

:is(.fenix-button--large, .fenix-button--52, .fenix-home-button--hero,
  .fenix-home-button[type='submit'], .fenix-case-study-cta__button) {
  --fenix-button-height: var(--fenix-button-large-height);
  --fenix-button-radius: var(--fenix-button-large-radius);
  --fenix-button-padding: var(--fenix-button-large-padding);
}

html:is([lang^='en'], [lang^='vi']) body .fenix-case-study-cta .fenix-case-study-cta__button {
  width: max-content !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
  padding-inline: var(--fenix-button-large-padding) !important;
}

html:is([lang^='en'], [lang^='vi']) body .fenix-case-study-cta .fenix-case-study-cta__button > span:first-child {
  flex: 0 0 auto;
}

html:is([lang^='en'], [lang^='vi']) body .fenix-case-study-cta .fenix-case-study-cta__button > span:last-child {
  flex: 0 0 24px;
}

@media (min-width: 1280px) {
  html[lang^='vi'] body .fenix-case-study-cta .fenix-case-study-cta__content h2 {
    width: 600px !important;
  }
}

.fenix-button--40 { --fenix-button-height: 40px; --button-font-size: 14px; --button-line-height: 20px; }
.fenix-button--36 { --fenix-button-height: 36px; --button-font-size: 12px; --button-line-height: 16px; }
.fenix-button--32 { --fenix-button-height: 32px; --fenix-button-radius: 8px; --button-font-size: 12px; --button-line-height: 16px; }

/* Figma INSIDE strokes do not add to the control's hug width or height. */
:is(.fenix-button, .fenix-home-button, .fenix-home-cases__button,
  .fenix-case-study-cta__button, .fenix-case-detail-related__button,
  .fenix-careers-job__button, .fenix-job-detail-summary__button,
  .fenix-resources-company__button, .fenix-not-found-hero__button,
  .fenix-case-study-filter__apply, .fenix-case-study-filter__cancel)::before {
  content: var(--button-stroke-content, '');
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--button-stroke);
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

:is(.fenix-button, .fenix-home-button, .fenix-home-cases__button,
  .fenix-case-study-cta__button, .fenix-case-detail-related__button,
  .fenix-careers-job__button, .fenix-job-detail-summary__button,
  .fenix-resources-company__button, .fenix-not-found-hero__button,
  .fenix-case-study-filter__apply, .fenix-case-study-filter__cancel):hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--button-hover-bg);
  color: var(--button-hover-fg);
  --button-stroke-content: none;
}

:is(.fenix-button, .fenix-home-button, .fenix-home-cases__button,
  .fenix-case-study-cta__button, .fenix-case-detail-related__button,
  .fenix-careers-job__button, .fenix-job-detail-summary__button,
  .fenix-resources-company__button, .fenix-not-found-hero__button,
  .fenix-case-study-filter__apply, .fenix-case-study-filter__cancel):is(:disabled, [aria-disabled='true']) {
  opacity: var(--button-disabled-opacity);
  --button-stroke-content: none;
  cursor: not-allowed;
}

:is(.fenix-button, .fenix-home-button, .fenix-home-cases__button,
  .fenix-case-study-cta__button, .fenix-case-detail-related__button,
  .fenix-careers-job__button, .fenix-job-detail-summary__button,
  .fenix-resources-company__button, .fenix-not-found-hero__button,
  .fenix-case-study-filter__apply, .fenix-case-study-filter__cancel):focus-visible {
  outline: 2px solid var(--fenix-focus-ring);
  outline-offset: 2px;
}

:is(.fenix-button, .fenix-home-button) svg [stroke] { stroke: currentColor; }

:is(.fenix-tab, .fenix-resources-tab, .fenix-testimonials-tabs__button, .fenix-home-article-tabs > span) {
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fenix-neutral-600);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-label-size);
  font-weight: var(--fenix-weight-bold);
  line-height: var(--fenix-text-label-line-height);
  white-space: nowrap;
}

:is(.fenix-tab, .fenix-resources-tab, .fenix-testimonials-tabs__button, .fenix-home-article-tabs > span):hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--fenix-primary-50);
}

:is(.fenix-tab, .fenix-resources-tab, .fenix-testimonials-tabs__button, .fenix-home-article-tabs > span):is(.is-active, [aria-selected='true']) {
  background: var(--fenix-primary-500);
  color: var(--fenix-white);
}

:is(.fenix-tab, .fenix-resources-tab, .fenix-testimonials-tabs__button):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--fenix-focus-ring);
}

:is(.fenix-tab, .fenix-resources-tab, .fenix-testimonials-tabs__button):focus-visible:not(.is-active):not([aria-selected='true']) {
  color: var(--fenix-primary-500);
  background: var(--fenix-white);
}

:is(.fenix-tab, .fenix-resources-tab, .fenix-testimonials-tabs__button):is(:disabled, [aria-disabled='true']) {
  color: var(--fenix-neutral-400);
  background: transparent;
  cursor: not-allowed;
}

:is(.fenix-tag, .fenix-home-tags > span, .fenix-resources-tags > span,
  .fenix-case-study-card__tags > span, .fenix-case-detail-tags > span,
  .fenix-blog-detail-tags > span, .fenix-blog-detail-services__tags > a) {
  --tag-fill: var(--fenix-primary-500);
  --tag-hover-fill: var(--fenix-primary-800);
  --tag-soft: var(--fenix-primary-50);
  --tag-ink: var(--fenix-primary-500);
  --tag-line: var(--fenix-primary-400);
  --tag-on-fill: var(--fenix-white);
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  width: auto;
  flex: 0 1 auto;
  height: auto;
  padding: 12px;
  gap: var(--fenix-control-gap);
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--tag-line);
  border-radius: 8px;
  background: var(--tag-soft);
  color: var(--tag-ink);
  font-family: var(--fenix-font);
  font-size: var(--fenix-text-body-small-size);
  font-weight: var(--fenix-weight-bold);
  line-height: var(--fenix-text-body-small-line-height);
  white-space: normal;
}

:is(.fenix-home-tags, .fenix-resources-tags, .fenix-case-study-card__tags,
  .fenix-case-detail-tags, .fenix-blog-detail-tags, .fenix-blog-detail-services__tags) {
  flex-wrap: wrap !important;
  gap: var(--fenix-control-gap) !important;
}

.fenix-tag { display: inline-flex; }
.fenix-tag.fenix-tag--danger {
  --tag-fill: var(--fenix-danger-500);
  --tag-hover-fill: var(--fenix-danger-600);
  --tag-soft: var(--fenix-danger-100);
  --tag-ink: var(--fenix-danger-600);
  --tag-line: var(--fenix-danger-500);
}
.fenix-tag.fenix-tag--success {
  --tag-fill: var(--fenix-success-500);
  --tag-hover-fill: var(--fenix-success-600);
  --tag-soft: var(--fenix-success-100);
  --tag-ink: var(--fenix-success-600);
  --tag-line: var(--fenix-success-500);
  --tag-hover-ink: var(--fenix-tag-success-hover-text);
}
.fenix-tag.fenix-tag--warning {
  --tag-fill: var(--fenix-warning-500);
  --tag-hover-fill: var(--fenix-warning-600);
  --tag-soft: var(--fenix-warning-100);
  --tag-ink: var(--fenix-warning-600);
  --tag-line: var(--fenix-warning-500);
  --tag-on-fill: var(--fenix-neutral-900);
}
.fenix-tag.fenix-tag--neutral {
  --tag-fill: var(--fenix-neutral-300);
  --tag-hover-fill: var(--fenix-neutral-400);
  --tag-soft: var(--fenix-neutral-100);
  --tag-ink: var(--fenix-neutral-600);
  --tag-line: var(--fenix-neutral-500);
  --tag-on-fill: var(--fenix-neutral-900);
}
.fenix-tag.fenix-tag--filled { background: var(--tag-fill); box-shadow: none; color: var(--tag-on-fill); font-weight: var(--fenix-weight-regular); }
.fenix-tag--filled:is(a, button):hover:not(:disabled):not([aria-disabled='true']) { background: var(--tag-hover-fill); color: var(--tag-hover-ink, var(--tag-on-fill)); }
.fenix-tag:is(a, button):focus-visible { outline: 2px solid var(--fenix-focus-ring); outline-offset: 2px; }
.fenix-tag:is(:disabled, [aria-disabled='true']) { opacity: 0.4; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  :is(.fenix-button, .fenix-home-button) { transition: none; }
}