/** TS Design System: recommended Elementor Tabs component. */

/* Only the three documented size presets activate the component. */
.elementor :is(.elementor-widget-tabs, .elementor-widget-n-tabs, .e-tabs-base):is(.tab-s, .tab-m, .tab-l) {
  --tsds-tabs-text: var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417)));
  --tsds-tabs-accent: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-tabs-hover: color-mix(in srgb, var(--tsds-tabs-text) 4%, transparent);
  --tsds-tabs-duration: var(--hover-speed, 180ms);
  --tsds-tabs-easing: var(--hover-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.elementor :is(.elementor-widget-tabs, .elementor-widget-n-tabs, .e-tabs-base).tab-s {
  --tsds-tabs-pad-block: var(--flow-xs);
  --tsds-tabs-pad-inline: var(--flow-m);
  --tsds-tabs-title-gap: var(--ui-gap-xs);
  --tsds-tabs-nav-content-gap: var(--flow-xs);
  --tsds-tabs-default-icon-gap: var(--ui-gap-xs);
}

.elementor :is(.elementor-widget-tabs, .elementor-widget-n-tabs, .e-tabs-base).tab-m {
  --tsds-tabs-pad-block: var(--flow-s);
  --tsds-tabs-pad-inline: var(--flow-l);
  --tsds-tabs-title-gap: var(--ui-gap-s);
  --tsds-tabs-nav-content-gap: var(--flow-s);
  --tsds-tabs-default-icon-gap: var(--ui-gap-s);
}

.elementor :is(.elementor-widget-tabs, .elementor-widget-n-tabs, .e-tabs-base).tab-l {
  --tsds-tabs-pad-block: var(--flow-m);
  --tsds-tabs-pad-inline: var(--flow-xl);
  --tsds-tabs-title-gap: var(--ui-gap-m);
  --tsds-tabs-nav-content-gap: var(--flow-m);
  --tsds-tabs-default-icon-gap: var(--ui-gap-m);
}

/* Classic Tabs: support the current widget-container and older direct structure. */
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .elementor-tabs,
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-tabs {
  display: flex;
  flex-direction: column;
  row-gap: var(--tsds-tabs-nav-content-gap);
}

/* Inline margins preserve Elementors display ownership at its mobile breakpoint. */
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title,
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title {
  display: inline-flex;
  align-items: center;
  padding-block: var(--tsds-tabs-pad-block);
  padding-inline: var(--tsds-tabs-pad-inline);
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--tsds-tabs-text);
  transition:
    background-color var(--tsds-tabs-duration) var(--tsds-tabs-easing),
    border-color var(--tsds-tabs-duration) var(--tsds-tabs-easing),
    color var(--tsds-tabs-duration) var(--tsds-tabs-easing);
}

.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title:not(:last-child),
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title:not(:last-child) {
  margin-inline-end: var(--tsds-tabs-title-gap);
}

.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .elementor-tabs > .elementor-tabs-content-wrapper > .elementor-tab-mobile-title,
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-tabs > .elementor-tabs-content-wrapper > .elementor-tab-mobile-title {
  align-items: center;
  padding-block: var(--tsds-tabs-pad-block);
  padding-inline: var(--tsds-tabs-pad-inline);
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--tsds-tabs-text);
  transition:
    background-color var(--tsds-tabs-duration) var(--tsds-tabs-easing),
    border-color var(--tsds-tabs-duration) var(--tsds-tabs-easing),
    color var(--tsds-tabs-duration) var(--tsds-tabs-easing);
}

.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) .elementor-tab-title:hover {
  background: var(--tsds-tabs-hover);
}

.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) .elementor-tab-title.elementor-active {
  border-block-end-color: var(--tsds-tabs-accent);
  color: var(--tsds-tabs-accent);
}

.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) .elementor-tab-title:focus-visible {
  outline: 2px solid var(--tsds-tabs-accent);
  outline-offset: -2px;
}

.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) .elementor-tab-mobile-title.elementor-active {
  margin-block-end: var(--tsds-tabs-nav-content-gap);
}

.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .elementor-tabs > .elementor-tabs-content-wrapper,
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-tabs > .elementor-tabs-content-wrapper,
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) .elementor-tab-content {
  border: 0;
  background: transparent;
  color: var(--tsds-tabs-text);
}

.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l) .elementor-tab-content {
  padding: 0;
}

/* Nested Tabs: consume Elementors own responsive variables and structure. */
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) {
  --n-tabs-title-gap: var(--tsds-tabs-title-gap);
  --n-tabs-gap: var(--tsds-tabs-nav-content-gap);
  --n-tabs-icon-gap: var(--tsds-icon-gap, var(--tsds-tabs-default-icon-gap));
}

.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title,
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title {
  padding-block: var(--tsds-tabs-pad-block);
  padding-inline: var(--tsds-tabs-pad-inline);
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--tsds-tabs-text);
  transition:
    background-color var(--tsds-tabs-duration) var(--tsds-tabs-easing),
    border-color var(--tsds-tabs-duration) var(--tsds-tabs-easing),
    color var(--tsds-tabs-duration) var(--tsds-tabs-easing);
}

.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:hover,
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:hover {
  background: var(--tsds-tabs-hover);
}

.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"],
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] {
  border-block-end-color: var(--tsds-tabs-accent);
  color: var(--tsds-tabs-accent);
}

.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:focus-visible,
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:focus-visible {
  outline: 2px solid var(--tsds-tabs-accent);
  outline-offset: -2px;
}

/* Elementor keeps ownership of icon size, color, order and active glyphs. */
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) .e-n-tab-title > .e-n-tab-icon {
  flex: 0 0 auto;
}

.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .e-n-tabs > .e-n-tabs-content > .e-con[role="tabpanel"],
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .e-n-tabs > .e-n-tabs-content > .e-con[role="tabpanel"] {
  border: 0;
  background: transparent;
  color: var(--tsds-tabs-text);
}

.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .elementor-widget-container > .e-n-tabs > .e-n-tabs-content > .e-con[role="tabpanel"].e-active,
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l) > .e-n-tabs > .e-n-tabs-content > .e-con[role="tabpanel"].e-active {
  color: var(--tsds-tabs-text);
}

/* Elementor v4 Atomic Tabs. Existing Classic and Nested selectors stay active. */
.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) {
  display: flex;
  flex-direction: column;
  row-gap: var(--tsds-tabs-nav-content-gap);
}

.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) > .e-tabs-menu-base {
  display: flex;
  gap: var(--tsds-tabs-title-gap);
}

.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) > .e-tabs-menu-base > .e-tab-base {
  display: inline-flex;
  align-items: center;
  column-gap: var(--tsds-icon-gap, var(--tsds-tabs-default-icon-gap));
  padding-block: var(--tsds-tabs-pad-block);
  padding-inline: var(--tsds-tabs-pad-inline);
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--tsds-tabs-text);
  transition:
    background-color var(--tsds-tabs-duration) var(--tsds-tabs-easing),
    border-color var(--tsds-tabs-duration) var(--tsds-tabs-easing),
    color var(--tsds-tabs-duration) var(--tsds-tabs-easing);
}

.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) > .e-tabs-menu-base > .e-tab-base:hover {
  background: var(--tsds-tabs-hover);
}

.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) > .e-tabs-menu-base > .e-tab-base[aria-selected="true"] {
  border-block-end-color: var(--tsds-tabs-accent);
  color: var(--tsds-tabs-accent);
}

.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) > .e-tabs-menu-base > .e-tab-base:focus-visible {
  outline: 2px solid var(--tsds-tabs-accent);
  outline-offset: -2px;
}

.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) > .e-tabs-content-area-base,
.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) > .e-tabs-content-area-base > .e-tab-content-base {
  border: 0;
  background: transparent;
  color: var(--tsds-tabs-text);
}

.elementor .e-tabs-base:is(.tab-s, .tab-m, .tab-l) > .e-tabs-content-area-base > .e-tab-content-base {
  padding: 0;
}

/* Utility adapters stay independent from the complete tab-* component. */
.elementor :is(.elementor-widget-tabs, .elementor-widget-n-tabs):is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) {
  gap: 0 !important;
}

/* Classic horizontal titles need an inline layout because Elementor uses table-cell. */
.elementor .elementor-widget-tabs.elementor-tabs-view-horizontal:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-widget-container > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title,
.elementor .elementor-widget-tabs.elementor-tabs-view-horizontal:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title {
  display: inline-flex;
}

.elementor .elementor-widget-tabs.elementor-tabs-view-horizontal:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-widget-container > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title:not(:last-child),
.elementor .elementor-widget-tabs.elementor-tabs-view-horizontal:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title:not(:last-child) {
  margin-inline-end: var(--tsds-gap);
}

.elementor .elementor-widget-tabs.elementor-tabs-view-vertical:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-widget-container > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title:not(:last-child),
.elementor .elementor-widget-tabs.elementor-tabs-view-vertical:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) > .elementor-tabs > .elementor-tabs-wrapper > .elementor-tab-desktop-title:not(:last-child) {
  margin-block-end: var(--tsds-gap);
}

.elementor .elementor-widget-n-tabs:is(.gap-0, .gap-xxxs, .gap-xxs, .gap-xs, .gap-s, .gap-m, .gap-l, .gap-xl, .gap-xxl, .gap-xxxl) {
  --n-tabs-title-gap: var(--tsds-gap);
}

.elementor .elementor-widget-n-tabs:is(.ig-0, .ig-xxxs, .ig-xxs, .ig-xs, .ig-s, .ig-m, .ig-l, .ig-xl, .ig-xxl, .ig-xxxl) {
  --n-tabs-icon-gap: var(--tsds-icon-gap);
  column-gap: 0 !important;
}