/*
  XGrupos Design System
  Scope: frontend only via `body.xgrupos`
  Goals: premium identity, moderate specificity, minimal !important, mobile-first.
*/

/* =======================
   1) Tokens + Branding
   ======================= */
body.xgrupos{
  /* Core tokens */
  /* "Apple minimal": primary UI is B/N. Category colors are separate tokens. */
  --brand: #121212;
  --brand-hover: #0c0c0c;
  --brand-weak: rgba(0,0,0,.08);
  --accent: #111111;

  --text: #0b0b0b;
  --muted: rgba(0,0,0,.65);

  --bg: #fafafa;
  --surface: #ffffff;

  --radius-lg: 18px;
  --radius-md: 14px;

  /* Slightly more lift for cards/surfaces (still minimal). */
  --shadow-1: 0 2px 6px rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.06);
  --shadow-2: 0 14px 36px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);

  /* Neutral focus ring (no blue) */
  --ring: 0 0 0 3px rgba(0,0,0,.16);

  --motion-fast: 160ms;
  --motion-normal: 220ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);

  /* Category palette (soft, premium) */
  --cat-telegram: #229ED9;
  --cat-whatsapp: #25D366;
  --cat-signal: #3B87FF;
  --cat-discord: #5865F2;

  /* Shared primitives */
  --x-border: rgba(0,0,0,.06);
  --x-border-strong: rgba(0,0,0,.10);
  --x-surface-tint: rgba(0,0,0,.02);

  /* Sync existing GX UI variables so legacy MU-plugin CSS inherits our system. */
  --gx-radius: var(--radius-lg);
  --gx-border: var(--x-border);
  --gx-shadow: var(--shadow-2);
  --gx-overlay: rgba(0,0,0,.44);

  /* Search FAB token override (used by inline CSS). */
  --hp-search-shadow: 0 10px 28px rgba(0,0,0,.14);

  /* Shared page gradient so body + sticky header stay visually aligned. */
  --xg-page-gradient:
    radial-gradient(1200px 760px at 0% 0%, rgba(0,0,0,.055), rgba(0,0,0,0) 58%),
    radial-gradient(980px 640px at 100% 10%, rgba(0,0,0,.028), rgba(0,0,0,0) 56%);

  color: var(--text);
  background-color: var(--bg);
  background-image: var(--xg-page-gradient);
}

/* Category context backgrounds (ONLY when body has the context class). */
body.xgrupos.xg-ctx-cat-telegram{
  --xg-page-gradient:
    radial-gradient(1200px 760px at 0% 0%, rgba(34,158,217,.13), rgba(34,158,217,0) 62%),
    radial-gradient(1200px 760px at 0% 0%, rgba(0,0,0,.045), rgba(0,0,0,0) 58%),
    radial-gradient(980px 640px at 100% 10%, rgba(0,0,0,.028), rgba(0,0,0,0) 56%);
}
body.xgrupos.xg-ctx-cat-whatsapp{
  --xg-page-gradient:
    radial-gradient(1200px 760px at 0% 0%, rgba(37,211,102,.11), rgba(37,211,102,0) 62%),
    radial-gradient(1200px 760px at 0% 0%, rgba(0,0,0,.045), rgba(0,0,0,0) 58%),
    radial-gradient(980px 640px at 100% 10%, rgba(0,0,0,.028), rgba(0,0,0,0) 56%);
}
body.xgrupos.xg-ctx-cat-signal{
  --xg-page-gradient:
    radial-gradient(1200px 760px at 0% 0%, rgba(59,135,255,.12), rgba(59,135,255,0) 62%),
    radial-gradient(1200px 760px at 0% 0%, rgba(0,0,0,.045), rgba(0,0,0,0) 58%),
    radial-gradient(980px 640px at 100% 10%, rgba(0,0,0,.028), rgba(0,0,0,0) 56%);
}
body.xgrupos.xg-ctx-cat-discord{
  --xg-page-gradient:
    radial-gradient(1200px 760px at 0% 0%, rgba(88,101,242,.12), rgba(88,101,242,0) 62%),
    radial-gradient(1200px 760px at 0% 0%, rgba(0,0,0,.045), rgba(0,0,0,0) 58%),
    radial-gradient(980px 640px at 100% 10%, rgba(0,0,0,.028), rgba(0,0,0,0) 56%);
}

/* Sticky header should show the same gradient origin as the page background. */
body.xgrupos :where(#masthead, .site-header, .ast-main-header-wrap, .ast-mobile-header-wrap, .main-header-bar-wrap){
  background-image: var(--xg-page-gradient);
  background-color: rgba(250,250,250,.74);
  background-repeat: no-repeat;
  background-position: top left;
}

/* Internal Astra header bars often paint opaque backgrounds; make them transparent. */
body.xgrupos :where(.main-header-bar, .ast-primary-header-bar, .ast-above-header-bar, .ast-below-header-bar, .ast-builder-grid-row, .ast-builder-grid-row-container){
  background: transparent !important;
}

/* Sticky state: keep gradient continuity, but raise opacity so page content doesn't bleed through. */
body.xgrupos :where(
  .main-header-bar.ast-sticky-active,
  #ast-fixed-header.ast-header-sticked .main-header-bar,
  .ast-primary-sticky-header-active .main-header-bar.ast-sticky-active,
  .ast-primary-sticky-header-active .main-header-bar.ast-header-sticked
){
  background-image: var(--xg-page-gradient) !important;
  background-color: rgba(250,250,250,.94) !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Paint the full sticky shell (including lateral zones outside inner containers). */
body.xgrupos :where(
  #ast-fixed-header,
  #ast-fixed-header.ast-header-slide,
  #ast-fixed-header.ast-header-fade,
  .ast-sticky-active,
  .ast-header-sticked
){
  background-image: var(--xg-page-gradient) !important;
  background-color: rgba(250,250,250,.96) !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
}

/* Astra sticky can render through extra wrappers/rows; fill them too. */
body.xgrupos :where(
  #ast-fixed-header,
  #ast-fixed-header .ast-main-header-wrap,
  #ast-fixed-header .ast-mobile-header-wrap,
  #ast-fixed-header .ast-desktop-header-content,
  #ast-fixed-header .site-primary-header-wrap,
  #ast-fixed-header .ast-builder-grid-row,
  #ast-fixed-header .ast-builder-grid-row-container,
  .ast-sticky-active .site-primary-header-wrap,
  .ast-sticky-active .ast-builder-grid-row,
  .ast-sticky-active .ast-builder-grid-row-container
){
  background-image: var(--xg-page-gradient) !important;
  background-color: rgba(250,250,250,.96) !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
}

/* Premium imperceptible noise (no external assets). */
body.xgrupos::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23000' fill-opacity='.22'%3E%3Ccircle cx='7' cy='11' r='1'/%3E%3Ccircle cx='21' cy='27' r='1'/%3E%3Ccircle cx='42' cy='17' r='1'/%3E%3Ccircle cx='63' cy='33' r='1'/%3E%3Ccircle cx='86' cy='25' r='1'/%3E%3Ccircle cx='15' cy='61' r='1'/%3E%3Ccircle cx='34' cy='52' r='1'/%3E%3Ccircle cx='58' cy='70' r='1'/%3E%3Ccircle cx='79' cy='58' r='1'/%3E%3Ccircle cx='90' cy='84' r='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode:multiply;
}

/* Make sure typical site wrappers sit above our noise layer. */
body.xgrupos :where(#page, #content, .site, .site-content, .elementor, .elementor-section, .elementor-container){
  position:relative;
  z-index:1;
}

/* =======================
   2) Depth / Surfaces
   ======================= */
body.xgrupos :where(.x-surface, .x-panel){
  background: var(--surface);
  border: 1px solid var(--x-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

body.xgrupos .x-card{
  background: var(--surface);
  border: 1px solid var(--x-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transform: translateY(0);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
@media (hover:hover){
  body.xgrupos .x-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.055), 0 18px 44px rgba(0,0,0,0.075);
    border-color: rgba(0,0,0,.10);
  }
}
body.xgrupos .x-card:active{
  transform: translateY(-1px) scale(.995);
}

/* Signature: soft glow + lateral highlight for interactive surfaces */
body.xgrupos :where(.x-card, .x-panel, .x-surface, article.directorist-listing-single, .directorist-single-contents-area .gx-dir-single-card, .gx-selector-list){
  position: relative;
  isolation: isolate;
}

/* Keep the filter sheet layout intact: it must stay `position: fixed` from its own CSS. */
body.xgrupos .gx-sheet{
  position: fixed;
  isolation: isolate;
}

body.xgrupos :where(.x-card, article.directorist-listing-single, .directorist-single-contents-area .gx-dir-single-card, .gx-sheet, .gx-selector-list)::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  /* very subtle: glow + left highlight */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.035),
    0 12px 30px rgba(0,0,0,.035);
  background:
    /* reduce lateral line intensity + width; keep signature but neutral */
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,0) 55%) left / 2px 100% no-repeat;
  opacity:.9;
  z-index:0;
}

body.xgrupos :where(.x-card, article.directorist-listing-single, .directorist-single-contents-area .gx-dir-single-card, .gx-sheet, .gx-selector-list) > *{
  position: relative;
  z-index:1;
}

/* =======================
   3) Typography / Links
   ======================= */
body.xgrupos{
  line-height: 1.55;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.xgrupos :where(.directorist-listing-single__info__excerpt, .gx-dir-single-card__desc, .xgrupos-heading__subtitle){
  color: var(--muted);
  line-height: 1.6;
}

/* Links: no blue. Stay close to text; rely on underline for affordance. */
body.xgrupos :where(.site-content, .site-main, .elementor, .directorist-archive-items, .directorist-single-contents-area, .xgrupos-heading) :where(a){
  color: inherit;
  text-decoration-thickness: from-font;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,0,0,.22);
}
body.xgrupos :where(.site-content, .site-main, .elementor, .directorist-archive-items, .directorist-single-contents-area, .xgrupos-heading) :where(a:hover){
  color: rgba(0,0,0,.82);
  text-decoration-color: rgba(0,0,0,.34);
}

/* =======================
   4) Focus Ring (A11y)
   ======================= */
body.xgrupos :where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: max(6px, .6em);
}

/* =======================
   5) Buttons (Surgical Reset)
   ======================= */
body.xgrupos :where(
  .x-btn,
  button,
  .elementor-button,
  .directorist-btn,
  .directorist-form-submit__btn,
  input[type="submit"],
  a.button,
  .gx-btn,
  .gx-filter-trigger,
  .gx-join-btn,
  #hp-search-submit
){
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

body.xgrupos :where(.x-btn){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  user-select:none;
}

/* Primary button mapping */
body.xgrupos :where(.x-btn--primary, .directorist-btn-primary, .gx-btn--primary, .gx-join-btn, #hp-search-submit){
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
body.xgrupos :where(.x-btn--primary, .directorist-btn-primary, .gx-btn--primary, .gx-join-btn, #hp-search-submit):hover{
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
body.xgrupos :where(.x-btn--primary, .directorist-btn-primary, .gx-btn--primary, .gx-join-btn, #hp-search-submit):active{
  transform: scale(.98);
}

/* Ghost / neutral buttons */
body.xgrupos :where(.x-btn--ghost, .gx-btn--ghost, .gx-filter-trigger, .elementor-button, .directorist-btn:not(.directorist-btn-primary)){
  background: rgba(255,255,255,.9);
  border: 1px solid var(--x-border-strong);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
body.xgrupos :where(.x-btn--ghost, .gx-btn--ghost, .gx-filter-trigger):hover{
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}
body.xgrupos :where(.x-btn--ghost, .gx-btn--ghost, .gx-filter-trigger):active{
  transform: scale(.98);
}

/* Ensure CTA in single stays readable even if theme link rules run. */
body.xgrupos .directorist-single-contents-area .gx-join-btn:hover,
body.xgrupos .directorist-single-contents-area .gx-join-btn:visited,
body.xgrupos .directorist-single-contents-area .gx-join-btn:active{
  color:#fff !important;
  text-decoration:none !important;
}

/* =======================
   6) Inputs (Forms + Select2)
   ======================= */
body.xgrupos :where(
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea,
  .directorist-form-element
){
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: none;
}
body.xgrupos :where(.directorist-form-element):focus{
  border-color: rgba(0,0,0,.28);
  box-shadow: var(--ring);
}

/* Select2 (Directorist often uses it) */
body.xgrupos .select2-container--default .select2-selection--single,
body.xgrupos .select2-container--default .select2-selection--multiple{
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,.12);
  min-height: 44px;
}
body.xgrupos .select2-container--default.select2-container--focus .select2-selection--single,
body.xgrupos .select2-container--default.select2-container--focus .select2-selection--multiple{
  border-color: rgba(0,0,0,.28);
  box-shadow: var(--ring);
}

/* =======================
   Components: Chips
   ======================= */
body.xgrupos :where(.x-chip, .xg-chip, .gx-chip){
  border-radius: 999px;
  border: 1px solid var(--x-border-strong);
  background: rgba(255,255,255,.92);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
body.xgrupos :where(.x-chip, .xg-chip, .gx-chip):active{
  transform: scale(.98);
}

/* Active/selected chip states (subheader + filter UI) */
body.xgrupos :where(.xg-chip--active, .gx-filter-ui .gx-chip.is-selected){
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}

/* Filter modal uses aggressive `!important` rules; override explicitly. */
body.xgrupos .gx-filter-ui .gx-chip.is-selected,
body.xgrupos .gx-filter-ui .gx-chip.is-selected:hover,
body.xgrupos .gx-filter-ui .gx-chip.is-selected:focus,
body.xgrupos .gx-filter-ui .gx-chip.is-selected:active{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

body.xgrupos .gx-seg.is-selected,
body.xgrupos .gx-seg.is-selected:hover,
body.xgrupos .gx-seg.is-selected:focus,
body.xgrupos .gx-seg.is-selected:active{
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

/* Filter trigger + sheet chrome should stay neutral (no theme "primary" colors). */
body.xgrupos .gx-filter-trigger,
body.xgrupos .gx-btn--ghost,
body.xgrupos .gx-sheet__close{
  color: var(--text) !important;
}

/* "Filtrar" button: secondary, but more interactive (hover lift + clearer border). */
body.xgrupos .gx-filter-trigger{
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}
@media (hover:hover){
  body.xgrupos .gx-filter-trigger:hover{
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transform: translateY(-1px);
  }
}

/* =======================
   Components: Cards (Directorist listings)
   ======================= */
body.xgrupos article.directorist-listing-single{
  border-radius: var(--radius-lg);
  border: 1px solid var(--x-border);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  background: var(--surface);
  transform: translateY(0);
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}
@media (hover:hover){
  body.xgrupos article.directorist-listing-single:hover{
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.055), 0 18px 44px rgba(0,0,0,0.075);
    border-color: rgba(0,0,0,.10);
  }
}
body.xgrupos article.directorist-listing-single:active{
  transform: translateY(-1px) scale(.995);
}

/* Category tints for list view without thumbnail (uses gx-cat-{slug} class). */
body.xgrupos article.directorist-listing-single.directorist-listing-no-thumb.gx-cat-telegram{ --gx-card-tint: linear-gradient(135deg, rgba(34,158,217,.18), rgba(34,158,217,.06) 36%, rgba(34,158,217,0) 72%); }
body.xgrupos article.directorist-listing-single.directorist-listing-no-thumb.gx-cat-whatsapp{ --gx-card-tint: linear-gradient(135deg, rgba(37,211,102,.14), rgba(37,211,102,.05) 36%, rgba(37,211,102,0) 72%); }
body.xgrupos article.directorist-listing-single.directorist-listing-no-thumb.gx-cat-signal{ --gx-card-tint: linear-gradient(135deg, rgba(59,135,255,.16), rgba(59,135,255,.06) 36%, rgba(59,135,255,0) 72%); }
body.xgrupos article.directorist-listing-single.directorist-listing-no-thumb.gx-cat-discord{ --gx-card-tint: linear-gradient(135deg, rgba(88,101,242,.16), rgba(88,101,242,.06) 36%, rgba(88,101,242,0) 72%); }
/* Back-compat for historical typo slug observed in existing UI overrides */
body.xgrupos article.directorist-listing-single.directorist-listing-no-thumb.gx-cat-whatssap{ --gx-card-tint: linear-gradient(135deg, rgba(37,211,102,.14), rgba(37,211,102,.05) 36%, rgba(37,211,102,0) 72%); }

/* Guardrail for no-thumb cards: enforce 2-line truncation even if Directorist/theme applies single-line ellipsis. */
body.xgrupos .directorist-archive-contents .directorist-single-line article.directorist-listing-single.directorist-listing-no-thumb .directorist-listing-single__info__excerpt,
body.xgrupos article.directorist-listing-single.directorist-listing-no-thumb .directorist-listing-single__info__excerpt{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  text-overflow:ellipsis;
}

body.xgrupos .directorist-archive-contents .directorist-single-line article.directorist-listing-single.directorist-listing-no-thumb .directorist-listing-title,
body.xgrupos article.directorist-listing-single.directorist-listing-no-thumb .directorist-listing-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-overflow:ellipsis;
}

/* Chips inside Directorist list cards inherit system chip styling */
body.xgrupos .gx-tax-chips :where(.gx-chip){
  background: rgba(255,255,255,.90);
}

/* =======================
   Components: Single Listing Card
   ======================= */
body.xgrupos .directorist-single-contents-area .gx-dir-single-card{
  background: var(--surface);
  border: 1px solid var(--x-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow:hidden;
}

body.xgrupos .directorist-single-contents-area .gx-dir-single-card.gx-cat-telegram::before,
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.gx-cat-whatsapp::before,
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.gx-cat-signal::before,
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.gx-cat-discord::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  border-radius: inherit;
}
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.gx-cat-telegram::before{ background: linear-gradient(135deg, rgba(34,158,217,.16), rgba(34,158,217,.05) 40%, rgba(34,158,217,0) 76%); }
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.gx-cat-whatsapp::before{ background: linear-gradient(135deg, rgba(37,211,102,.12), rgba(37,211,102,.045) 40%, rgba(37,211,102,0) 76%); }
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.gx-cat-signal::before{ background: linear-gradient(135deg, rgba(59,135,255,.14), rgba(59,135,255,.05) 40%, rgba(59,135,255,0) 76%); }
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.gx-cat-discord::before{ background: linear-gradient(135deg, rgba(88,101,242,.14), rgba(88,101,242,.05) 40%, rgba(88,101,242,0) 76%); }
body.xgrupos .directorist-single-contents-area .gx-dir-single-card > *{ position:relative; z-index:1; }

/* =======================
   Microinteractions (Consistent Motion)
   ======================= */
body.xgrupos .x-enter{
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes xg-enter-rise{
  from{
    opacity: 0;
    transform: translateY(18px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ensure enter motion wins over card base transform rules. */
body.xgrupos article.directorist-listing-single.x-enter,
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.x-enter,
body.xgrupos .gx-dir-single-card.x-enter{
  animation-name: xg-enter-rise;
  animation-duration: 860ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: var(--xg-enter-delay, 0ms);
  animation-fill-mode: both;
  will-change: transform, opacity;
}
body.xgrupos article.directorist-listing-single.x-enter.x-enter--in,
body.xgrupos .directorist-single-contents-area .gx-dir-single-card.x-enter.x-enter--in,
body.xgrupos .gx-dir-single-card.x-enter.x-enter--in{
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  body.xgrupos :where(*){
    scroll-behavior: auto !important;
  }
  body.xgrupos .x-enter{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}