/*
 * WCTP Woocommerce - CSS Loader tablas v1.0
 *
 * FUNCION:
 * - Oculta temporalmente tablas WCPT durante la carga inicial.
 * - Reserva altura minima para evitar saltos visuales.
 * - Muestra un spinner mientras el JS confirma que la tabla ya tiene contenido.
 * - Aplica un fade-in suave cuando aparece la clase qr-wcpt-ready.
 */

/* QRM WCPT initial loader only */

/* Contenedores WCPT conocidos */
[id^="wcpt-"],
.wcpt,
.wcpt-table,
.wcpt-products,
.wcpt-wrap,
.wcpt-container {
  position: relative;
}

/* Altura mínima solo durante la carga inicial */
body:not(.qr-wcpt-page-ready) [id^="wcpt-"],
body:not(.qr-wcpt-page-ready) .wcpt,
body:not(.qr-wcpt-page-ready) .wcpt-table,
body:not(.qr-wcpt-page-ready) .wcpt-products,
body:not(.qr-wcpt-page-ready) .wcpt-wrap,
body:not(.qr-wcpt-page-ready) .wcpt-container {
  min-height: 300px;
}

/* Oculta solo durante la carga inicial, nunca después */
body:not(.qr-wcpt-page-ready) [id^="wcpt-"]:not(.qr-wcpt-ready) > *,
body:not(.qr-wcpt-page-ready) .wcpt:not(.qr-wcpt-ready) > *,
body:not(.qr-wcpt-page-ready) .wcpt-table:not(.qr-wcpt-ready) > *,
body:not(.qr-wcpt-page-ready) .wcpt-products:not(.qr-wcpt-ready) > *,
body:not(.qr-wcpt-page-ready) .wcpt-wrap:not(.qr-wcpt-ready) > *,
body:not(.qr-wcpt-page-ready) .wcpt-container:not(.qr-wcpt-ready) > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Spinner solo durante la carga inicial */
body:not(.qr-wcpt-page-ready) [id^="wcpt-"]:not(.qr-wcpt-ready)::before,
body:not(.qr-wcpt-page-ready) .wcpt:not(.qr-wcpt-ready)::before,
body:not(.qr-wcpt-page-ready) .wcpt-table:not(.qr-wcpt-ready)::before,
body:not(.qr-wcpt-page-ready) .wcpt-products:not(.qr-wcpt-ready)::before,
body:not(.qr-wcpt-page-ready) .wcpt-wrap:not(.qr-wcpt-ready)::before,
body:not(.qr-wcpt-page-ready) .wcpt-container:not(.qr-wcpt-ready)::before {
  content: "";
  position: absolute;
  top: 90px;
  left: 50%;
  width: 42px;
  height: 42px;
  margin-left: -21px;
  border: 4px solid #e5e5e5;
  border-top-color: #8fcc0c;
  border-radius: 50%;
  animation: qrspin .8s linear infinite;
  z-index: 10;
}

/* Fade-in inicial */
[id^="wcpt-"].qr-wcpt-ready > *,
.wcpt.qr-wcpt-ready > *,
.wcpt-table.qr-wcpt-ready > *,
.wcpt-products.qr-wcpt-ready > *,
.wcpt-wrap.qr-wcpt-ready > *,
.wcpt-container.qr-wcpt-ready > * {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .25s ease;
}

@keyframes qrspin {
  to {
    transform: rotate(360deg);
  }
}