/* ==========================================================================
   Accessibility layer: keyboard focus ring + reduced motion.
   Loaded last so it sits above the stacked theme layers without adding more
   overrides to them.
   ========================================================================== */

:root {
  --focus-ring-color: hsl(var(--base, 173 100% 21%));
}

/* --------------------------------------------------------------------------
   Focus ring. :focus-visible only matches keyboard focus on buttons, links and
   toggles, so mouse and touch users see no change. Text fields are excluded:
   browsers treat every click into them as focus-visible, and they already
   show a focus border. Elements with tabindex="-1" are also excluded: they
   are focused by scripts (modals, menu containers), never reached by Tab,
   and a script focusing one on page load would otherwise show a ring until
   the first click. The :not(#_never_) raises specificity above the many
   `outline: none !important` resets in the theme files.
   -------------------------------------------------------------------------- */
html body :focus-visible:not(#_never_):not([tabindex="-1"]):not(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="color"]), textarea, select, [contenteditable]:not([contenteditable="false"])) {
  outline: 2px solid var(--focus-ring-color) !important;
  outline-offset: var(--focus-ring-offset, 2px) !important;
}

/* Full-width rows sit inside scroll or overflow-hidden containers that would
   clip an outer ring, so draw theirs inside the element. */
.dropdown-item,
.sidebar-menu-list__link,
.chat-list__item,
.select2-results__option,
.list-group-item {
  --focus-ring-offset: -2px;
}

/* --------------------------------------------------------------------------
   Reduced motion: fewer and gentler, not zero. Colour and opacity transitions
   stay; looping or entrance keyframes and hover lifts go. Loaders keep
   spinning because they tell the user something is happening.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *:not(.loader, .brand-loader__ring, .spinner-border, .spinner-grow, .fa-spin, .la-spin),
  *:not(.loader)::before,
  *:not(.loader)::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }

  /* Hover lifts and grows. Each selector matches the rule it cancels, with
     the same specificity and importance, so it wins only by coming later and
     never overrides a more specific transform (e.g. centring translates). */
  .social-list__link:hover,
  .download-list__link img:hover,
  .blog-item:hover .blog-item__thumb img,
  .social-link-wrapper .social-link-list .social-btn-link:hover,
  .chatbox-area__body .chat-box__header .header-action-btn:hover,
  .top-button .btn--base:hover,
  .header .top-button .btn--base:hover,
  .btn--base-two:hover,
  .btn--dark:hover,
  .btn--danger:hover,
  .btn--success:hover,
  .banner-content__button .btn--base-two:hover,
  .feature-item:hover,
  .how-work-item:hover,
  .cta-section .cta-wrapper__btn .btn--base:hover,
  .pricing-card:hover,
  .dashboard .dashboard-body .btn--base:hover,
  .dashboard .dashboard-body .btn--info:hover,
  .dashboard .dashboard-body .btn--base-two:hover,
  .dashboard .dashboard-widget:hover,
  .dashboard .active-card .btn--base:hover,
  button:hover,
  .cookies-card__btn:hover,
  .payment-item__btn:hover,
  .wa-card:hover,
  .btn--primary:hover,
  .btn-apple-simple:hover,
  .pricing-card:not(.popular) .pricing-card__btn .btn:hover,
  .pricing-card.popular .pricing-card__btn .btn:hover,
  .markdown-btn-group button.markdown-btn:hover,
  .dash-v2-card:hover,
  .mesh-banner .btn--white:hover,
  html body .flow-builder-container .flow_top_button_wrapper .top_btn:hover,
  html body .flow-builder-container .flow_sidebar_button:hover,
  body.is-homepage .feature-item:hover,
  body.is-homepage .how-work-item:hover,
  body.is-homepage .blog-item:hover,
  body.is-homepage .feedback-item:hover,
  body.is-homepage .pricing-plan:hover,
  html body > .reaction-popup .reaction-item:hover,
  .frontend .mx-hero-actions .btn-hero-glow:hover,
  .mx-card-hover:hover,
  .frontend .pricing-card:hover,
  .frontend .cta-wrapper__btn .btn--base:hover,
  .frontend .blog-item:hover .blog-item__thumb img,
  .hp-btn--solid:hover,
  .hp-btn--ghost:hover,
  .hp-btn--ghost-light:hover,
  .hp-btn--outline-light:hover,
  .hp-bento__item:hover,
  .hp-pricing .pricing-card:hover {
    transform: none;
  }

  .dashboard-widget:hover,
  .pricing-card .btn--base:hover,
  .wa-btn-primary:hover,
  .wa-account-card:hover,
  .profile-page-wrapper .profile-list__link:not(.active):hover,
  .btn--base:hover,
  .btn-primary:hover,
  .btn--info:hover,
  .table tbody tr:hover,
  .custom--table tbody tr:hover,
  html body .dashboard-container .pricing-card .pricing-card__btn .btn:hover,
  html body .dashboard-container .pricing-card .pricing-card__btn .btn--base:hover,
  html body .dashboard-container .pricing-card .pricing-card__btn .purchaseBtn:hover,
  html body .dashboard-container .plan-wrapper .active-card .btn--base:hover,
  html body .dashboard-container .plan-wrapper .active-card .purchaseBtn:hover,
  .wa-audio-player .play-pause-btn:hover,
  .btn:hover,
  html body .wa-account-page-modern .wa-account-card:hover,
  html body .deposit-page-modern .payment-item:hover {
    transform: none !important;
  }

  /* Featured pricing cards are scaled at rest; keep that, drop the lift. */
  .pricing-card.popular:hover {
    transform: scale(1.02);
  }
  .hp-pricing .pricing-card.popular:hover {
    transform: scale(1.03);
  }
}