/* 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. */
/*
 * فلشِ جهت‌نما.
 *
 * ⚠ نسخه‌ی پیشین با ترفندِ border کشیده می‌شد:
 *     width/height: 8px · border-top + border-left · border-radius: 8px
 * و همان `border-radius: 8px` روی جعبه‌ی ۸×۸ فاجعه بود — شعاع برابرِ کلِ
 * جعبه یعنی گوشه کاملاً گرد می‌شود و دو ضلع به یک کمان تبدیل می‌شوند.
 * نتیجه روی صفحه هلالِ ماه بود، نه فلش.
 *
 * حالا با mask یک chevron واقعی کشیده می‌شود: زاویه‌ی تیز، سرهای گرد،
 * دقیقاً همان شکلی که انتظار می‌رود.
 *
 * ضخامت: stroke=3 در viewBox 24، پس روی ۱۲px برابر ۱٫۵px رندر می‌شود —
 * عمداً کمی پررنگ‌تر از آیکون‌های اطلاعاتی (۱٫۲px)، چون این یک نشانه‌ی
 * تعاملی است و باید دیده شود.
 */
.salonto-ui-chevron {
  box-sizing: border-box;
  display: inline-block !important;
  flex: 0 0 auto;
  width: 12px !important;
  height: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  -webkit-mask: var(--salonto-chevron-mask) center / contain no-repeat;
  mask: var(--salonto-chevron-mask) center / contain no-repeat;
  color: inherit;
  line-height: 1;
  font-size: 0 !important;
  pointer-events: none;
}

/* chevron رو به راست؛ جهت‌ها فقط چرخش ساده‌اند. */
:root {
  --salonto-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}

.salonto-ui-chevron--right { transform: none; }
.salonto-ui-chevron--left  { transform: rotate(180deg); }
.salonto-ui-chevron--up    { transform: rotate(-90deg); }
.salonto-ui-chevron--down  { transform: rotate(90deg); }

/* مرورگرِ بدون پشتیبانی mask: به همان ترفندِ border برمی‌گردیم، ولی این
   بار بدون شعاعِ مخرب — گوشه تیز می‌ماند و دست‌کم فلش خوانده می‌شود. */
@supports not ((-webkit-mask: none) or (mask: none)) {
  .salonto-ui-chevron {
    width: 8px !important;
    height: 8px !important;
    background: transparent !important;
    border-top: 2px solid currentColor !important;
    border-inline-start: 2px solid currentColor !important;
    border-radius: 1px !important;
  }
  .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: var(--s-space-2);
  color: currentColor;
}
.salonto-lesson-single__back .salonto-ui-chevron {
  margin-inline-start: 0;
  margin-inline-end: var(--s-space-2);
}


/* 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: var(--s-space-2);
  vertical-align: middle;
}
:is(.salonto-lesson-single__back,.salonto-growth-single__back) .salonto-ui-chevron {
  margin-inline-end: var(--s-space-2);
  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;
}