/**
 * evov-sub — Page transition + navigation spinner styles v1.8.1
 *
 * #evov-pjax-container fade: applied to the content area during AJAX nav.
 * #evov-page-spinner: full-viewport spinner rendered outside the container
 *   so the container's opacity: 0 never hides it. Ported from flex-ux
 *   Spinner component (spinnerRotate keyframe).
 * .evov-grid-spinner: product-grid-scoped overlay for filter/pagination nav.
 */

/* ── Container fade ───────────────────────────────────────────────────── */

#evov-pjax-container {
  opacity:    1;
  transition: opacity 0.15s ease;
}

#evov-pjax-container.evov-pjax-loading {
  opacity:        0;
  pointer-events: none;
}


/* ── Spinner keyframe (ported from flex-ux dashboard.php) ────────────── */

@keyframes evovSpinnerRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ── Page-load spinner ────────────────────────────────────────────────── */

/* opacity + visibility transition gives a smooth fade both on show AND
   on hide. display:none/flex cannot be transitioned so removal was instant. */
#evov-page-spinner {
  position:         fixed;
  top:              0;   /* overridden by JS: #evov-pjax-container rect.top */
  right:            0;
  bottom:           0;
  left:             0;  /* overridden by JS: #evov-pjax-container rect.left */
  z-index:          392; /* one below .wd-sticky-nav (393) so the nav renders on top */
  display:          flex;
  align-items:      center;
  justify-content:  center;
  pointer-events:   none;
  opacity:          0;
  visibility:       hidden;
  transition:       opacity 0.25s ease, visibility 0.25s;

  /* Background is set dynamically by pjax-nav.js at navigation time:
     it reads the computed background of .wd-page-content so the spinner
     always matches whichever WoodMart page-background option is active
     (All Pages, Product Archive, Single Product, etc.).
     This fallback only shows for the first hard-load spinner before JS runs. */
  background-color: var(--wd-main-bgcolor, #1a1a1a);
}

#evov-page-spinner.evov-spinner-active {
  opacity:    1;
  visibility: visible;
}

.evov-spinner-ring {
  width:            50px;
  height:           50px;
  border-radius:    50%;

  /* Track: primary color at 18% opacity — matches flex-ux Spinner */
  border:           4px solid color-mix(in srgb, var(--wd-primary-color, #6366f1) 18%, transparent);
  /* Arc: full primary color on the top segment */
  border-top-color: var(--wd-primary-color, #6366f1);

  animation: evovSpinnerRotate 0.7s linear infinite;
}


/* ── Filter navigation: product-grid overlay ──────────────────────────── */

/* Fade the product/project grid while the new content loads */
.wd-content-layout.evov-filter-loading .wd-products[data-source],
.wd-content-layout.evov-filter-loading .wd-projects[data-source] {
  opacity:        0;
  pointer-events: none;
  transition:     opacity 0.15s ease;
}

/* Injected as a sibling immediately before .wd-products — sits in normal
   flow so it scrolls with the page rather than being fixed to the viewport.
   text-align centers the ring; display:flex would break position:sticky
   on flex children in some browsers. */
.evov-grid-spinner {
  display:        block;
  text-align:     center;
  line-height:    0;
  padding:        200px 0 40px;
  pointer-events: none;
}

/* Sticky keeps the ring visible in the center of the viewport as the user
   scrolls — mirrors WoodMart's .wd-sticky-loader/.wd-loader pattern.
   inline-block is required for text-align: center to work. */
.evov-grid-spinner .evov-spinner-ring {
  display:  inline-block;
  position: sticky;
  top:      calc(50vh + 135px);
}


/* ── Sort toolbar + result count skeleton during PJAX filter/pagination ─ */

/* Applied in pjax-nav.js immediately after the DOM swap so there is never
   a visible frame where an uninitialised or wrong-width Select2 is shown.
   Removed in the setTimeout(0) callback once evovForceInitSelect2 has set
   the correct width and the correct widget is ready to display. */

/* translateX sweep — GPU-composited, works regardless of background colours.
   overflow:hidden on the parent clips the band at element edges so it only
   appears while passing through the visible area. */

@keyframes evovSkeletonShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}

.woocommerce-ordering.evov-ordering-skeleton {
  position:         relative;
  overflow:         hidden; /* clips the sweeping ::after to element bounds */
  border-radius:    var(--wd-form-brd-radius, 4px);
  pointer-events:   none;
  /* Keep the dropdown background visible behind the shimmer so it sweeps
     over the correct surface rather than the bare page background. */
  background-color: var(--wd-form-bg, #12141f);
}

/* Hide only the widget content (text, arrow) — the wrapper bg above stays. */
.woocommerce-ordering.evov-ordering-skeleton .select2-container,
.woocommerce-ordering.evov-ordering-skeleton select {
  opacity: 0;
}

/* Fade the widget back in when the skeleton class is removed. */
.woocommerce-ordering .select2-container,
.woocommerce-ordering select {
  transition: opacity 0.2s ease;
}

/* Sweeping highlight band — fills the element, then translateX moves it
   entirely across from left to right on each cycle. */
.woocommerce-ordering.evov-ordering-skeleton::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.00)  0%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.00) 100%
  );
  animation: evovSkeletonShimmer 1.4s ease-in-out infinite;
}


/* ── Price label + filter link skeleton during PJAX ──────────────────── */

/* Price range label (.price_label inside .widget_price_filter) */
.price_label.evov-price-skeleton {
  position:         relative;
  overflow:         hidden;
  border-radius:    var(--wd-form-brd-radius, 4px);
  pointer-events:   none;
  /* !important: WoodMart's higher-specificity color rule wins without it */
  color:            transparent !important;
  /* Re-declare the variable to override WoodMart's widget-container value */
  --wd-form-bg:     #0b0d14;
  background-color: var(--wd-form-bg);
  min-height:       1.2em;             /* preserve row height          */
  transition:       color 0.2s ease;
}

/* Hide the $0 / $130 span values */
.price_label.evov-price-skeleton span {
  visibility: hidden !important;
}

.price_label.evov-price-skeleton::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.00)  0%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.00) 100%
  );
  animation: evovSkeletonShimmer 1.4s ease-in-out infinite;
}

/* Layered-nav / brand swatch links (.layered-nav-link) */
/* Each link is shimmer'd individually so the swatch grid shimmers per-tile. */
.layered-nav-link.evov-filter-link-skeleton {
  position:         relative;
  overflow:         hidden;
  pointer-events:   none;
  border-radius:    var(--wd-form-brd-radius, 4px);
  /* Re-declare the variable to override WoodMart's widget-container value.
     !important guards against any WoodMart rule that might win on background-color. */
  --wd-form-bg:     #0b0d14;
  background-color: var(--wd-form-bg) !important;
}

/* Hide the scrollbar on the brand/filter swatch list while loading */
.wd-content-layout.evov-filter-loading .wd-swatches-filter {
  overflow-y: hidden;
}

/* Hide children + ::before checkbox behind the shimmer.
   !important needed: WoodMart has higher-specificity rules for .wd-swatch.
   ::before is the checkbox pseudo-element and is NOT covered by > *. */
.layered-nav-link.evov-filter-link-skeleton > *,
.layered-nav-link.evov-filter-link-skeleton::before {
  opacity:    0 !important;
  transition: opacity 0.15s ease;
}

/* Graceful fade-in when the class is removed */
.layered-nav-link > *,
.layered-nav-link::before {
  transition: opacity 0.15s ease;
}

.layered-nav-link.evov-filter-link-skeleton::after {
  content:    '';
  position:   absolute;
  inset:      0;
  z-index:    5;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.00)  0%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.00) 100%
  );
  animation: evovSkeletonShimmer 1.4s ease-in-out infinite;
}


/* ── Layered-nav filter search inputs ────────────────────────────────── */

/* Hidden by default — JS (updateFilterSearchVisibility) reveals only those
   whose filter list exceeds 5 items, preventing a flash-then-hide on load. */
.wd-filter-search {
  display: none;
}

/* WoodMart overrides --wd-form-bg inside .elementor-widget-container, so
   these inputs inherit rgb(18,20,32) instead of the correct #0b0d14.
   Re-declare the variable on the input to restore the intended form colour. */
.wd-filter-search input {
  --wd-form-bg: #0b0d14;
  background-color: var(--wd-form-bg);
}


/* ── Search bar loading spinner ───────────────────────────────────────── */

/* WoodMart adds .wd-search-loading to the <form> while the AJAX request is
   in flight. It uses ::before on .searchsubmit for the spinner (sized to
   calc(var(--wd-form-height) / 2.5) and centered via absolute positioning)
   and fades the ::after search icon out via opacity.
   We keep WoodMart's sizing/positioning and just replace the border colors
   and animation with our own so the arc style is consistent site-wide. */
.searchform.wd-search-loading .searchsubmit::before {
    border-color:     color-mix(in srgb, var(--wd-primary-color, #6366f1) 18%, transparent) !important;
    border-top-color: var(--wd-primary-color, #6366f1) !important;
    border-radius:    50% !important;
    animation-name:            evovSpinnerRotate !important;
    animation-duration:        0.7s              !important;
    animation-timing-function: linear            !important;
    animation-iteration-count: infinite          !important;
    animation-play-state:      var(--wd-anim-state, running) !important;
}


/* ── Result count skeleton ────────────────────────────────────────────── */

/* Hide the count text and show the same shimmer over the element background. */
.woocommerce-result-count.evov-result-count-skeleton {
  position:         relative;
  overflow:         hidden;
  border-radius:    var(--wd-form-brd-radius, 4px);
  pointer-events:   none;
  color:            transparent;
  background-color: var(--wd-form-bg, #12141f);
  transition:       color 0.2s ease;
}

.woocommerce-result-count.evov-result-count-skeleton::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.00)  0%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.00) 100%
  );
  animation: evovSkeletonShimmer 1.4s ease-in-out infinite;
}


/* ── Breadcrumb skeleton during PJAX filter/pagination ───────────────────── */

/* Shimmer <a> links and .wd-last (current page); .wd-delimiter separators are
   not targeted so the / characters remain visible throughout. */
.wd-breadcrumbs.evov-breadcrumb-skeleton a,
.wd-breadcrumbs.evov-breadcrumb-skeleton .wd-last {
  position:         relative;
  overflow:         hidden;
  display:          inline-block;
  border-radius:    var(--wd-form-brd-radius, 4px);
  color:            transparent !important;
  background-color: var(--wd-form-bg, #12141f);
  pointer-events:   none;
  transition:       color 0.2s ease;
}

.wd-breadcrumbs.evov-breadcrumb-skeleton a::after,
.wd-breadcrumbs.evov-breadcrumb-skeleton .wd-last::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.00)  0%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.00) 100%
  );
  animation: evovSkeletonShimmer 1.4s ease-in-out infinite;
}


/* ── Search dropdown: keep history/requests visible alongside AJAX results ── */
/* WoodMart adds wd-searched to .wd-search-form when autocomplete initialises, */
/* then its own CSS hides .wd-search-history / .wd-search-requests / .wd-search-area. */
/* Override so those elements stay visible alongside search results — matching  */
/* the dropdown appearance when the user clicks the search bar without typing.  */

.wd-searched .wd-dropdown-results :is(.wd-search-history, .wd-search-requests, .wd-search-area) {
  display: block !important;
}