/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


/* General */

html {
    scroll-padding-top: var(--header-height, 100px);
    scrollbar-gutter: stable;
}

h1 {
    text-box-trim: trim-both;
}

ul,li {
margin: 0;
padding: 0;
list-style-type: none;
}

button {
line-height: inherit;
}

/*
p:not(.price) {
margin-block: 1em;
margin-block: 1lh;
}
*/

::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.bricks-is-frontend {  display: flex; flex-direction: column; min-height: 100vh;}
#brx-footer {margin-top: auto;}

#brx-header.scrolling #topbar {
  transform: translateY(calc(-1 * var(--topbar-height)));
  margin-bottom: calc(-1 * var(--topbar-height));
}

/* @media (max-width: 991px) {
#brx-header.scrolling #topbar {
transform: translateY(0px);
}
} */

.ajax-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    z-index: 5;
}

.ajax-loading::after {
    content: '';
    position: fixed;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.2);
    border-top: 4px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ==========================================================================
   BOTONES — sistema único para Bricks (.btn) y WooCommerce (.button)
   Estilo B "Sombra pop".

   Pegar en: Apariencia → Editor de archivos del tema (tema hijo) → style.css
   Reemplaza los bloques viejos de "button.button, a.button, a.checkout-button…"

   VARIANTES
   Bricks:
     - Primary ........... .btn (sin nada más)
     - Primary outline ... .btn--primary-outline · variante "Primary outline" del componente
     - Secondary ......... .btn--secondary       · variante "Secondary" del componente
     - Secondary outline . .btn--secondary-outline · variante "Secondary outline" (fondos oscuros)
     - Dinámica .......... un contenedor con data-btn-variant="primary|primary-outline|secondary|secondary-outline"
   WooCommerce:
     - Acciones principales (.alt, "Finalizar compra", "Realizar pedido", "Añadir al carrito" del producto) → Primary
     - Acciones secundarias (resto de .button: "Actualizar carrito", "Aplicar cupón", "Ver carrito"…) → Primary outline
   ========================================================================== */

/* ---------- Base ---------- */
.btn,
a.button,
button.button,
input.button,
a.checkout-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-s);
  width: fit-content;
  padding: 1rem 2.8rem;
  font-family: "Roboto Condensed", sans-serif;
  font-size: var(--text-m);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  color: var(--btn-fg, var(--color-white));
  background-color: var(--btn-bg, var(--color-primary));
  border: 1.5px solid var(--btn-border, var(--color-primary));
  border-radius: 0;
  box-shadow: 4px 4px 0 0 var(--btn-shadow, var(--color-secondary));
  cursor: pointer;
  transition:
    color .3s,
    background-color .3s,
    border-color .3s,
    transform .25s cubic-bezier(.2, .8, .2, 1),
    box-shadow .25s cubic-bezier(.2, .8, .2, 1);
}

/* Los .btn de Bricks son de bloque (como antes) */
.btn {
  display: flex;
}

.btn i {
  font-size: var(--text-m);
}

:is(.btn, a.button, button.button) :is(i, svg) {
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

:is(.btn, a.button, button.button) path {
  fill: currentColor;
}

/* ---------- Hover / foco: se levanta y la sombra crece ---------- */
:is(.btn, a.button, button.button, input.button, a.checkout-button):is(:hover, :focus-visible) {
  background-color: var(--btn-hover-bg, var(--btn-bg, var(--color-primary)));
  color: var(--btn-hover-fg, var(--btn-fg, var(--color-white)));
  border-color: var(--btn-border, var(--color-primary));
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 0 var(--btn-shadow, var(--color-secondary));
}

:is(.btn, a.button, button.button):is(:hover, :focus-visible) :is(i, svg) {
  transform: translate(2px, -2px);
}

/* ---------- Clic: se hunde sobre su sombra ---------- */
:is(.btn, a.button, button.button, input.button, a.checkout-button):active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 var(--btn-shadow, var(--color-secondary));
  transition-duration: .08s;
}

:is(.btn, a.button, button.button, input.button, a.checkout-button):focus-visible {
  outline: 2px solid var(--btn-border, var(--color-primary));
  outline-offset: 4px;
}

/* ---------- Deshabilitado (ej. "Actualizar carrito" sin cambios) ---------- */
:is(.btn, a.button, button.button, input.button):is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 4px 4px 0 0 var(--btn-shadow, var(--color-secondary));
}

/* ==========================================================================
   VARIANTES (solo cambian variables; el estilo de arriba no se toca)
   ========================================================================== */

/* Primary */
.btn.btn--primary,
[data-btn-variant="primary"] .btn,
:is(a.button, button.button, input.button).alt,
a.checkout-button,
button.single_add_to_cart_button,
#place_order {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-white);
  --btn-border: var(--color-primary);
  --btn-hover-bg: var(--color-primary);
  --btn-hover-fg: var(--color-white);
  --btn-shadow: var(--color-secondary);
}

/* Primary outline (y botones secundarios de WooCommerce) */
.btn.btn--primary-outline,
.btn[data-brx-variant="srywnw"],
[data-btn-variant="primary-outline"] .btn,
:is(a.button, button.button, input.button):not(.alt, .checkout-button, .single_add_to_cart_button, #place_order) {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary);
  --btn-border: var(--color-primary);
  --btn-hover-bg: var(--color-primary);
  --btn-hover-fg: var(--color-white);
  --btn-shadow: var(--color-primary);
}

/* Secondary */
.btn.btn--secondary,
.btn[data-brx-variant="ffxzya"],
[data-btn-variant="secondary"] .btn {
  --btn-bg: var(--color-secondary);
  --btn-fg: var(--color-primary);
  --btn-border: var(--color-secondary);
  --btn-hover-bg: var(--color-secondary);
  --btn-hover-fg: var(--color-primary);
  --btn-shadow: var(--color-primary);
}

/* Secondary outline (usar sobre fondos oscuros o violetas) */
.btn.btn--secondary-outline,
.btn[data-brx-variant="edqtso"],
[data-btn-variant="secondary-outline"] .btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-secondary);
  --btn-border: var(--color-secondary);
  --btn-hover-bg: var(--color-secondary);
  --btn-hover-fg: var(--color-primary);
  --btn-shadow: var(--color-secondary);
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(.btn, a.button, button.button, input.button, a.checkout-button),
  :is(.btn, a.button, button.button) :is(i, svg) {
    transition: color .2s, background-color .2s;
  }
  :is(.btn, a.button, button.button, input.button, a.checkout-button):is(:hover, :focus-visible, :active),
  :is(.btn, a.button, button.button):is(:hover, :focus-visible) :is(i, svg) {
    transform: none;
  }
}


/* ==========================================================================
   RESET WooCommerce de Bricks (woocommerce-layer.min.css)
   Bricks separa el botón de la cantidad con 10px arriba y fija la cantidad
   en 200px de ancho. Lo anulamos en todo el sitio.
   ========================================================================== */

form.cart .quantity + button,
form.woocommerce-cart-form .quantity + button {
  margin-top: 0;
}

/* La cantidad oculta (productos "vendidos individualmente") debe seguir oculta
   aunque otra regla le ponga display */
.quantity.hidden {
  display: none !important;
}

.cart-collaterals .wc-proceed-to-checkout .button {
	line-height: inherit;
}

/* WooCommerce notices */
/* Contenedor sticky abajo */
.woocommerce-notices-wrapper {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 100;

    display: flex;
    flex-direction: column;
    gap: 10px;

    width: fit-content;
    max-width: calc(100vw - 40px);
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;

    width: fit-content;
    margin: 0;
}

:root {
    /* =========================
       WOOCOMMERCE NOTICES
    ========================== */

	/* Success */
  --notice-success-bg: var(--color-secondary);
	--notice-success-color: var(--color-white);

   /* Info */
   --notice-info-bg: var(--color-secondary);
   --notice-info-color: var(--color-white);

    /* Error */
    --notice-error-bg: var(--color-secondary);
   --notice-error-color: var(--color-white);

    /* Shared */
    --notice-radius: var(--radius-m);
  	--notice-padding: 12px 24px;
}

/* Success */
.woocommerce-message {
    background-color: var(--notice-success-bg);
    color: var(--notice-success-color);
    border-radius: var(--notice-radius);
  	padding: var(--notice-padding);
}

/* Info */
.woocommerce-info {
    background-color: var(--notice-info-bg);
    color: var(--notice-info-color);
    border-radius: var(--notice-radius);
	padding: var(--notice-padding);
}

/* Error */
.woocommerce-error {
    background-color: var(--notice-error-bg);
    color: var(--notice-error-color);
    border-radius: var(--notice-radius);
	padding: var(--notice-padding);
}

/*Oculta el boton que aparece en los avisos*/
.woocommerce-message a {
    display: none !important;
}


/* Transferencias bancarias */

.peprodev_woocommerce_receipt_uploader table {
  background: var(--color-offwhite);
  padding-block: 3rem;
}

.peprodev_woocommerce_receipt_uploader h2 {
  font-size: var(--h4);
}

.peprodev_woocommerce_receipt_uploader {
  display: grid;
  gap: var(--space-l);
}

.peprodev_woocommerce_receipt_uploader table, .peprodev_woocommerce_receipt_uploader .receipt-img-preview {
  display:grid;
  gap: var(--space-m);
}


/* Input quantity grid */

/* Mostrar siempre los controles */
/* .qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button {
  opacity: 1;
  height: auto;
} */