/** TS Design System: recommended Surface, Outline and Radius utilities. */

/* Public utilities paint the classed HTML element directly. Elementor hosts
 * whose visible renderer lives deeper in the widget remain adapter-owned. */
:where(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) {
  --tsds-surface-page: var(--ts-color-background, var(--c-surface-page, var(--c-bg, #fff)));
  --tsds-surface-text: var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417)));
  --tsds-surface-primary: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-surface-secondary: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
}

.sf-page { --tsds-surface-background: var(--tsds-surface-page); --tsds-surface-color: var(--tsds-surface-text); }
.sf-subtle { --tsds-surface-background: color-mix(in srgb, var(--tsds-surface-page) 94%, var(--tsds-surface-neutral-contrast)); --tsds-surface-color: var(--tsds-surface-text); }
.sf-card { --tsds-surface-background: color-mix(in srgb, var(--tsds-surface-page) 86%, var(--tsds-surface-neutral-contrast)); --tsds-surface-color: var(--tsds-surface-text); }
.sf-elev { --tsds-surface-background: color-mix(in srgb, var(--tsds-surface-page) 75%, var(--tsds-surface-neutral-contrast)); --tsds-surface-color: var(--tsds-surface-text); }
.sf-strong { --tsds-surface-background: color-mix(in srgb, var(--tsds-surface-page) 60%, var(--tsds-surface-neutral-contrast)); --tsds-surface-color: var(--tsds-surface-text); }
.sf-inverse { --tsds-surface-background: var(--ts-color-inverse-bg, var(--ts-color-surface-inverse, var(--c-surface-inverse, color-mix(in srgb, var(--tsds-surface-text) 92%, transparent)))); --tsds-surface-color: var(--ts-color-inverse-text, var(--ts-color-on-inverse, var(--c-bg, var(--tsds-surface-page)))); }
.sf-primary-soft { --tsds-surface-background: var(--ts-color-surface-primary-soft, color-mix(in srgb, var(--tsds-surface-primary) var(--surface-brand-soft-mix), var(--tsds-surface-brand-soft-base))); --tsds-surface-color: var(--tsds-surface-text); }
.sf-secondary-soft { --tsds-surface-background: var(--ts-color-surface-secondary-soft, color-mix(in srgb, var(--tsds-surface-secondary) var(--surface-brand-soft-mix), var(--tsds-surface-brand-soft-base))); --tsds-surface-color: var(--tsds-surface-text); }

/* The class plus one neutral attribute weight beats ordinary one-class host
 * defaults without blocking later two-class or inline overrides. Widget
 * wrappers with deeper visible renderers stay adapter-owned. */
:is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft)[class]:not(:where(.elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs)) {
  background: var(--tsds-surface-background);
  color: var(--tsds-surface-color);
}

:where(.ol, .ol-primary, .ol-secondary) {
  --tsds-outline-color: var(--ts-color-border, var(--c-border, rgba(18, 20, 23, 0.1)));
}

.ol-primary { --tsds-outline-color: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000))); }
.ol-secondary { --tsds-outline-color: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000))); }

:is(.ol, .ol-primary, .ol-secondary)[class]:not(:where(.elementor-widget-image, .elementor-widget-accordion, .elementor-widget-n-accordion)) {
  border: var(--outline-width) solid var(--tsds-outline-color);
}

/* Photos use the global standard radius unless an explicit ro-* follows. */
img {
  border-radius: var(--ts-radius-standard, var(--radius-l, 24px));
}

/* Elementor paints the visible image below the Widget wrapper. Keep this
 * default non-important so deliberate Elementor image styling can still win. */
.elementor .elementor-widget-image img {
  border-radius: var(--ts-radius-standard, var(--radius-l, 24px));
}

.ro-xxs { --tsds-radius: var(--radius-xxs); }
.ro-xs { --tsds-radius: var(--radius-xs); }
.ro-s { --tsds-radius: var(--radius-s); }
.ro-m { --tsds-radius: var(--radius-m); }
.ro-l { --tsds-radius: var(--radius-l); }
.ro-xl { --tsds-radius: var(--radius-xl); }
.ro-xxl { --tsds-radius: var(--radius-xxl); }
.ro-0 { --tsds-radius: var(--radius-0); }

:is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl)[class]:not(:where(.elementor-widget-image, .elementor-widget-button, .elementor-widget-accordion, .elementor-widget-n-accordion)) {
  border-radius: var(--tsds-radius);
}

/* Match native control specificity so the later explicit ro-* utility keeps
 * its documented priority over Button radius and btn-pill. */
:is(a, button):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) {
  border-radius: var(--tsds-radius);
}

/* Known surfaces receive local values so nested surfaces resolve independently. */
.elementor :is(
  .e-con,
  .e-con-inner,
  .elementor-container,
  .elementor-widget-accordion,
  .elementor-widget-n-accordion,
  .elementor-widget-tabs,
  .elementor-widget-n-tabs
):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) {
  --tsds-surface-page: var(--ts-color-background, var(--c-surface-page, var(--c-bg, #fff)));
  --tsds-surface-text: var(--ts-color-text, var(--c-text, var(--e-global-color-text, #121417)));
  --tsds-surface-primary: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
  --tsds-surface-secondary: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs).sf-page {
  --tsds-surface-background: var(--tsds-surface-page);
  --tsds-surface-color: var(--tsds-surface-text);
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs).sf-subtle {
  --tsds-surface-background: color-mix(in srgb, var(--tsds-surface-page) 94%, var(--tsds-surface-neutral-contrast));
  --tsds-surface-color: var(--tsds-surface-text);
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs).sf-card {
  --tsds-surface-background: color-mix(in srgb, var(--tsds-surface-page) 86%, var(--tsds-surface-neutral-contrast));
  --tsds-surface-color: var(--tsds-surface-text);
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs).sf-elev {
  --tsds-surface-background: color-mix(in srgb, var(--tsds-surface-page) 75%, var(--tsds-surface-neutral-contrast));
  --tsds-surface-color: var(--tsds-surface-text);
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs).sf-strong {
  --tsds-surface-background: color-mix(in srgb, var(--tsds-surface-page) 60%, var(--tsds-surface-neutral-contrast));
  --tsds-surface-color: var(--tsds-surface-text);
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs).sf-inverse {
  --tsds-surface-background: var(--ts-color-inverse-bg, var(--ts-color-surface-inverse, var(--c-surface-inverse, color-mix(in srgb, var(--tsds-surface-text) 92%, transparent))));
  --tsds-surface-color: var(--ts-color-inverse-text, var(--ts-color-on-inverse, var(--c-bg, var(--tsds-surface-page))));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs).sf-primary-soft {
  --tsds-surface-background: var(--ts-color-surface-primary-soft, color-mix(in srgb, var(--tsds-surface-primary) var(--surface-brand-soft-mix), var(--tsds-surface-brand-soft-base)));
  --tsds-surface-color: var(--tsds-surface-text);
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-accordion, .elementor-widget-n-accordion, .elementor-widget-tabs, .elementor-widget-n-tabs).sf-secondary-soft {
  --tsds-surface-background: var(--ts-color-surface-secondary-soft, color-mix(in srgb, var(--tsds-surface-secondary) var(--surface-brand-soft-mix), var(--tsds-surface-brand-soft-base)));
  --tsds-surface-color: var(--tsds-surface-text);
}

/* General surfaces only paint the real container carrying the class. */
.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) {
  background: var(--tsds-surface-background) !important;
  color: var(--tsds-surface-color) !important;
}

/* Outline is a border utility and deliberately does not alter box-shadow. */
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-accordion, .elementor-widget-n-accordion):is(.ol, .ol-primary, .ol-secondary) {
  --tsds-outline-color: var(--ts-color-border, var(--c-border, rgba(18, 20, 23, 0.1)));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-accordion, .elementor-widget-n-accordion).ol-primary {
  --tsds-outline-color: var(--ts-color-primary, var(--c-accent, var(--e-global-color-primary, #000)));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-accordion, .elementor-widget-n-accordion).ol-secondary {
  --tsds-outline-color: var(--ts-color-secondary, var(--c-accent-2, var(--e-global-color-secondary, #000)));
}

.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.ol, .ol-primary, .ol-secondary) {
  border: var(--outline-width) solid var(--tsds-outline-color) !important;
}

/* Radius mapping is shared by containers and the explicit component bridges. */
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-button, .elementor-button, .elementor-widget-accordion, .elementor-widget-n-accordion).ro-xxs { --tsds-radius: var(--radius-xxs); }
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-button, .elementor-button, .elementor-widget-accordion, .elementor-widget-n-accordion).ro-xs { --tsds-radius: var(--radius-xs); }
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-button, .elementor-button, .elementor-widget-accordion, .elementor-widget-n-accordion).ro-s { --tsds-radius: var(--radius-s); }
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-button, .elementor-button, .elementor-widget-accordion, .elementor-widget-n-accordion).ro-m { --tsds-radius: var(--radius-m); }
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-button, .elementor-button, .elementor-widget-accordion, .elementor-widget-n-accordion).ro-l { --tsds-radius: var(--radius-l); }
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-button, .elementor-button, .elementor-widget-accordion, .elementor-widget-n-accordion).ro-xl { --tsds-radius: var(--radius-xl); }
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-button, .elementor-button, .elementor-widget-accordion, .elementor-widget-n-accordion).ro-xxl { --tsds-radius: var(--radius-xxl); }
.elementor :is(.e-con, .e-con-inner, .elementor-container, .elementor-widget-image, .elementor-widget-button, .elementor-button, .elementor-widget-accordion, .elementor-widget-n-accordion).ro-0 { --tsds-radius: var(--radius-0); }

.elementor :is(.e-con, .e-con-inner, .elementor-container):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) {
  border-radius: var(--tsds-radius) !important;
}

/* An explicit ro-* wins over the earlier btn-pill modifier. */
.elementor :is(.elementor-widget-button, .elementor-button):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) {
  --tsds-button-radius-override: var(--tsds-radius);
}

/* Image Widgets paint Appearance on the visible image, never on the wrapper. */
.elementor .elementor-widget-image:is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) img {
  border-radius: var(--tsds-radius) !important;
}

.elementor .elementor-widget-image:is(.ol, .ol-primary, .ol-secondary) img {
  box-sizing: border-box;
  border: var(--outline-width) solid var(--tsds-outline-color) !important;
}

/* Accordion utilities paint each direct visible item, not nested Accordions. */
.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) > .elementor-widget-container > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) > .elementor-widget-container > .e-n-accordion > details.e-n-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) > .e-n-accordion > details.e-n-accordion-item {
  background: var(--tsds-surface-background) !important;
}

.elementor :is(.elementor-widget-accordion, .elementor-widget-n-accordion):is(.acc-s, .acc-m, .acc-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) {
  --tsds-acc-text: var(--tsds-surface-color);
}

.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l):is(.ol, .ol-primary, .ol-secondary) > .elementor-widget-container > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l):is(.ol, .ol-primary, .ol-secondary) > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l):is(.ol, .ol-primary, .ol-secondary) > .elementor-widget-container > .e-n-accordion > details.e-n-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l):is(.ol, .ol-primary, .ol-secondary) > .e-n-accordion > details.e-n-accordion-item {
  border: var(--outline-width) solid var(--tsds-outline-color) !important;
}

.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) > .elementor-widget-container > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) > .elementor-widget-container > .e-n-accordion > details.e-n-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l):is(.ro-0, .ro-xxs, .ro-xs, .ro-s, .ro-m, .ro-l, .ro-xl, .ro-xxl) > .e-n-accordion > details.e-n-accordion-item {
  border-radius: var(--tsds-radius) !important;
}

/* Tabs receive one surface on their direct root; panels and nested content stay untouched. */
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) > .elementor-widget-container > .elementor-tabs,
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) > .elementor-tabs,
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) > .elementor-widget-container > .e-n-tabs,
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) > .e-n-tabs {
  background: var(--tsds-surface-background) !important;
  color: var(--tsds-surface-color) !important;
}

.elementor :is(.elementor-widget-tabs, .elementor-widget-n-tabs):is(.tab-s, .tab-m, .tab-l):is(.sf-page, .sf-subtle, .sf-card, .sf-elev, .sf-strong, .sf-inverse, .sf-primary-soft, .sf-secondary-soft) {
  --tsds-tabs-text: var(--tsds-surface-color);
}

/* Resets are intentionally last and match the same visible targets. */
.elementor :is(.e-con, .e-con-inner, .elementor-container).no-bg {
  background: transparent !important;
  background-image: none !important;
}

.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l).no-bg > .elementor-widget-container > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l).no-bg > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l).no-bg > .elementor-widget-container > .e-n-accordion > details.e-n-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l).no-bg > .e-n-accordion > details.e-n-accordion-item,
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l).no-bg > .elementor-widget-container > .elementor-tabs,
.elementor .elementor-widget-tabs:is(.tab-s, .tab-m, .tab-l).no-bg > .elementor-tabs,
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l).no-bg > .elementor-widget-container > .e-n-tabs,
.elementor .elementor-widget-n-tabs:is(.tab-s, .tab-m, .tab-l).no-bg > .e-n-tabs {
  background: transparent !important;
  background-image: none !important;
}

.elementor :is(.e-con, .e-con-inner, .elementor-container).no-border {
  border: 0 !important;
}

.elementor .elementor-widget-image.no-border img {
  border: 0 !important;
}

.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l).no-border > .elementor-widget-container > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-accordion:is(.acc-s, .acc-m, .acc-l).no-border > .elementor-accordion > .elementor-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l).no-border > .elementor-widget-container > .e-n-accordion > details.e-n-accordion-item,
.elementor .elementor-widget-n-accordion:is(.acc-s, .acc-m, .acc-l).no-border > .e-n-accordion > details.e-n-accordion-item {
  border: 0 !important;
}