/* ──────────────────────────────────────────────────────────────────────────
   FerreteRowp Mayoreo — Frontend Toggle
   ────────────────────────────────────────────────────────────────────────── */

/* ── Barra del botón toggle ──────────────────────────────────────────────── */
.fwp-mayoreo-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 16px;
    flex-wrap: wrap;
    /* Garantiza que la barra quede por encima de overlays del filtro AJAX */
    position: relative;
    z-index: 20;
    pointer-events: auto !important;
}

/* ── Botón ───────────────────────────────────────────────────────────────── */
.fwp-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 12px;
    border: 2px solid #d0d0d0;
    border-radius: 50px;
    background: #fff;
    /* !important garantiza ganar contra pointer-events:none del tema durante carga AJAX */
    cursor: pointer !important;
    pointer-events: auto !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    letter-spacing: .2px;
    transition: border-color .2s, background .2s, color .2s,
                box-shadow .25s, transform .2s;
    white-space: nowrap;
    user-select: none;
    position: relative;
    z-index: 1;
}

.fwp-toggle-btn:hover {
    border-color: #FF6700;
    color: #FF6700;
    /* Sombra mucho más intensa y visible */
    box-shadow: 0 6px 24px rgba(255, 103, 0, .45),
                0 0 0 3px rgba(255, 103, 0, .18);
    transform: translateY(-2px);
}

/* ── Ícono SVG (etiqueta de precio / mayoreo) ────────────────────────────── */
.fwp-btn-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex-shrink: 0;
    transition: fill .2s, transform .2s;
}

.fwp-toggle-btn:hover .fwp-btn-icon {
    transform: scale(1.15);
}

.fwp-toggle-btn.fwp-btn--active .fwp-btn-icon {
    fill: #fff;
}

/* Track (el "riel" del switch) */
.fwp-btn-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 22px;
    background: #ccc;
    flex-shrink: 0;
    transition: background .2s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
}

/* Thumb (la bolita) */
.fwp-btn-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.30);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

/* Estado activo */
.fwp-toggle-btn.fwp-btn--active {
    border-color: #FF6700;
    background: #FF6700;
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 103, 0, .35);
}

.fwp-toggle-btn.fwp-btn--active .fwp-btn-track {
    background: rgba(255, 255, 255, .35);
    box-shadow: inset 0 1px 3px rgba(0,0,0,.10);
}

.fwp-toggle-btn.fwp-btn--active .fwp-btn-thumb {
    transform: translateX(16px);
    background: #fff;
}

.fwp-toggle-btn.fwp-btn--active:hover {
    background: #e55a00;
    border-color: #e55a00;
    box-shadow: 0 6px 24px rgba(255, 103, 0, .55),
                0 0 0 3px rgba(255, 103, 0, .22);
    transform: translateY(-2px);
}

/* ── Texto de ayuda junto al botón ───────────────────────────────────────── */
.fwp-mayoreo-hint {
    font-size: 12px;
    color: #999;
}

/* ── Precio mayorista ────────────────────────────────────────────────────── */
.fwp-price-may {
    color: #FF6700 !important;
    font-weight: 700;
}

.product-block.fwp-modo-mayoreo .price {
    position: relative;
}

/* ── Insignia de cantidad mínima ─────────────────────────────────────────── */
.fwp-min-qty-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: #fff3e8;
    border: 1px solid #ffd4aa;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #c85000;
    letter-spacing: .3px;
}

.fwp-min-qty-badge[hidden] {
    display: none !important;
}

/* ── Producto sin precio mayorista (atenuado) ────────────────────────────── */
/* Cards en catálogo y áreas de loop (product-block, li.product) */
.product-block.fwp-sin-mayoreo,
li.product.fwp-sin-mayoreo {
    opacity: .6;
}

/* Precio en gris para todos los contextos (cards, single product, quickview) */
.fwp-sin-mayoreo .price {
    color: #bbb !important;
}

/* En página de producto individual: solo el precio, no todo el summary */
.entry-summary.fwp-sin-mayoreo,
.information-wrapper.fwp-sin-mayoreo {
    opacity: 1;
}

/* ── Dato oculto inyectado por PHP ───────────────────────────────────────── */
.fwp-mayoreo-data {
    display: none !important;
}

/* ── Botón añadir al carrito deshabilitado (sin precio mayorista) ─────────── */
.fwp-cart-disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    user-select: none !important;
}