/* Shared understated navigation controls across Salonto. */
.salonto-ui-arrow,
.salonto-home-carousel-controls button,
.salonto-concern__carousel-controls button,
.salonto-product__carousel-controls button,
.salonto-content-pagination button,
.salonto-products-pagination button,
.salonto-results-pagination button,
.salonto-growth-pagination button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0 !important;
  border: 1px solid var(--salonto-teal-75) !important;
  border-radius: 12px !important;
  color: var(--salonto-text-subtle) !important;
  background: var(--salonto-surface) !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}
.salonto-ui-arrow:hover,
.salonto-ui-arrow:focus-visible,
.salonto-home-carousel-controls button:hover,
.salonto-home-carousel-controls button:focus-visible,
.salonto-concern__carousel-controls button:hover,
.salonto-concern__carousel-controls button:focus-visible,
.salonto-product__carousel-controls button:hover,
.salonto-product__carousel-controls button:focus-visible {
  outline: none !important;
  color: var(--salonto-primary, #087f79) !important;
  border-color: color-mix(in srgb, var(--salonto-primary, #087f79) 24%, var(--salonto-teal-75) 76%) !important;
  background: color-mix(in srgb, var(--salonto-primary, #087f79) 5%, var(--salonto-surface) 95%) !important;
  transform: translateY(-1px);
}
.salonto-ui-arrow svg,
.salonto-ui-arrow > span,
.salonto-home-carousel-controls button::before,
.salonto-concern__carousel-controls button::before,
.salonto-product__carousel-controls button::before {
  pointer-events: none;
}
.salonto-ui-arrow svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Legacy text arrows are visually replaced by the same soft chevron. */
.salonto-home-carousel-controls button,
.salonto-concern__carousel-controls button,
.salonto-product__carousel-controls button {
  font-size: 0 !important;
}
.salonto-home-carousel-controls button::before,
.salonto-concern__carousel-controls button::before,
.salonto-product__carousel-controls button::before {
  content: "";
  width: 8px;
  height: 8px;
  display: block;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
}
.salonto-home-carousel-controls button[data-home-carousel-next]::before,
.salonto-concern__carousel-controls button[data-carousel-next]::before,
.salonto-product__carousel-controls button[data-product-carousel-next]::before {
  transform: rotate(135deg);
}
.salonto-home-carousel-controls button > span,
.salonto-concern__carousel-controls button > span,
.salonto-product__carousel-controls button > span {
  display: none !important;
}


/* --------------------------------------------------------------------------
 * Salonto Design System v2 — final interaction guard (Phase 40)
 * -------------------------------------------------------------------------- */
:root {
  --salonto-danger: var(--salonto-warning);
  --salonto-danger-soft: var(--salonto-warning-soft);
  --salonto-ui-chevron-color: var(--salonto-text-subtle);
  --salonto-ui-chevron-active: var(--salonto-primary, #0b8f87);
  --salonto-ui-icon-bg: var(--salonto-teal-50);
  --salonto-ui-icon-border: var(--salonto-border);
}

/* One visual language for every navigational chevron. */
.salonto-ui-chevron {
  box-sizing: border-box;
  display: inline-block !important;
  flex: 0 0 auto;
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-top: 2px solid currentColor !important;
  border-left: 2px solid currentColor !important;
  border-radius: 8px;
  background: transparent !important;
  color: inherit;
  line-height: 1;
  font-size: 0 !important;
  pointer-events: none;
}
.salonto-ui-chevron--left { transform: rotate(-45deg); }
.salonto-ui-chevron--right { transform: rotate(135deg); }
.salonto-ui-chevron--down { transform: rotate(-135deg); }
.salonto-ui-chevron--up { transform: rotate(45deg); }

/* Shared arrow container: same size/alignment in product, concern and training. */
.salonto-ui-chevron-button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  display: inline-grid !important;
  place-items: center;
  padding: 0 !important;
  border: 1px solid var(--salonto-ui-icon-border) !important;
  border-radius: 12px !important;
  background: var(--salonto-ui-icon-bg) !important;
  color: var(--salonto-ui-chevron-active) !important;
  box-shadow: none !important;
}
.salonto-ui-chevron-button:hover,
.salonto-ui-chevron-button:focus-visible {
  border-color: color-mix(in srgb, var(--salonto-primary, #0b8f87) 34%, var(--salonto-ui-icon-border)) !important;
  background: var(--salonto-primary-soft) !important;
  color: var(--salonto-primary-hover, #08766f) !important;
}

/* Legacy carousel controls are normalized even before markup migration is complete. */
:is(
  .salonto-home-carousel-controls,
  .salonto-concern__carousel-controls,
  .salonto-product__carousel-controls
) button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 12px !important;
  border-color: var(--salonto-ui-icon-border) !important;
  background: var(--salonto-ui-icon-bg) !important;
  color: var(--salonto-ui-chevron-active) !important;
}

/* Product / concern / education: Elementor/theme must never inject red hover states. */
:is(
  .salonto-product,
  .salonto-products-archive,
  .salonto-concern,
  .salonto-concerns-archive,
  .salonto-academy,
  .salonto-customer-training,
  .salonto-course,
  .salonto-courses,
  .salonto-lesson-single,
  .salonto-network-hub,
  .salonto-quick-center,
  .salonto-qa-modal
) {
  --salonto-danger: var(--salonto-warning);
  --salonto-danger-soft: var(--salonto-warning-soft);
}

/* Error/attention states intentionally use amber-brown instead of red. */
:is(
  .salonto-network-hub,
  .salonto-quick-center,
  .salonto-qa-modal,
  .salonto-account,
  .salonto-support
) :is(.is-error, [data-state="error"], [aria-invalid="true"]) {
  --salonto-state-attention: var(--salonto-warning);
}

/* Standard inline action chevrons on the canonical content families. */
:is(
  .salonto-concern-card__single,
  .salonto-customer-training-card__action,
  .salonto-lesson-related-card__action,
  .salonto-lesson-single__back
) .salonto-ui-chevron {
  margin-inline-start: 7px;
  color: currentColor;
}
.salonto-lesson-single__back .salonto-ui-chevron {
  margin-inline-start: 0;
  margin-inline-end: 7px;
}


/* Phase 40 — canonical content/action navigation alignment. */
:is(
  .salonto-academy-card__action,
  .salonto-academy__subbranch,
  .salonto-content-card__action,
  .salonto-blog-card__action,
  .salonto-growth-card__action,
  .salonto-customer-training-card__action,
  .salonto-concern-card__single,
  .salonto-home-card__action,
  .salonto-account-wide-link,
  .salonto-account-learning-simple__cta,
  .salonto-guided-empty__action,
  .salonto-onboarding-step__primary,
  [data-team-member]
) .salonto-ui-chevron {
  margin-inline-start: 8px;
  vertical-align: middle;
}
:is(.salonto-lesson-single__back,.salonto-growth-single__back) .salonto-ui-chevron {
  margin-inline-end: 8px;
  margin-inline-start: 0;
}
.salonto-home-slider__arrow .salonto-ui-chevron,
.salonto-home-carousel-controls button .salonto-ui-chevron,
.salonto-concern__carousel-controls button .salonto-ui-chevron {
  margin: 0 !important;
}