/*
Theme Name: Your Antiquarian Child
Theme URI: https://www.yourantiquarian.com/
Description: Hey Motherfucker!
Author: Your Antiquarian
Author URI: https://www.yourantiquarian.com/
Template: shopkeeper
Version: 1.0
*/

@import url("../shopkeeper/style.css");

/****************************************************************/
/*************** ADD YOUR CUSTOM CSS IN THIS AREA ***************/
/****************************************************************/

/* Quitar en producto si hay o no stock */
.woocommerce div.product .stock, .woocommerce-page div.product .stock, .wishlist_table tr td.product-stock-status span.wishlist-in-stock {display: none;}

/* Quitar en producto Category y Tags [metadatos] */
.product_meta {
display:none;
}

/* Customización Contact Form - Contact us page */
.wpcf7-form {
	margin-left: 25px;
}

#wpcf7-f117-p18-o1 {
	display: block;
    margin-left: auto;
    margin-right: auto;
}

#wpcf7-f117-p18-o1 input {
	width: 90%;
	border: 3px solid #D7D7D7;
}

.wpcf7-textarea {
	width: 90%;
	border: 3px solid #D7D7D7;
}

/* Responsive Contact Form - Contact us page */

@media only screen and (min-width: 1024px) {
	#wpcf7-f1774-p230-o1 {
		width: 30%;
	}
	#wpcf7-f117-p18-o1 {
		width: 30%;
	}
}

/* Responsive & FiX Booster WooCommerce Make Offer Menu */
.wcj-offer-price-modal-content {
padding-top: 10px;
margin-bottom: 100px;
}

.wcj-offer-price-modal {
padding-top: 50px;
}

@media only screen and (min-width: 1024px) {
.wcj-offer-price-modal-content {
	width: 50% !important;
	}
}

/* Responsive Booster WooCommerce Make Offer Button */
@media only screen and (max-width: 767px) {
.wcj-offer-price-button.button {
  float: left !important;
  padding: 16px 45px !important;
  min-width: auto !important;
  width: auto !important;
  margin-bottom: 16px !important;
  }
}

/* Borders in Category title - menu */
.category_name {
text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */
}

.categories_grid {
text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */
}

.category_list {
text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */
}

.category_name {
text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */
}

.category_list.category_thumbs {
text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1); /* IE<10 */
}

/* Table, tr, td product */

table.product {
height: 192px;
width: 500px;
display: table;
}

tr.product {
height: 24px;
}

td.product-item {
width: 140px;
height: 24px;
}

td.product-description {
width: 360px;
height: 24px;
}

@media only screen and (min-width: 1500px) {
table.product {
	width: 650px !important;
	}
td.product-description {
width: 510px !important;
}
}

/****************************************************************/
/****************************************************************/
/****************************************************************/

/* SEL */

#new_categories {
	margin: 80px auto 0px auto;
}

#new_categories .categories_grid{
	text-align:center;
}

#new_categories .category_more_than_6 {
	float:unset;
	display:inline-block;
}

/* Visody Styles */

.vsd-loop-wrapper { display: none; }

/* Parallels texto justificado */

.full-text {
  display: block;
  text-align: center;
}

/* ======================================================= */
/* FIX CHECKOUT ANCHO Y ALINEACIÓN (Para Order Pay Page)   */
/* ======================================================= */

/* 1. ANULA EL MAX-WIDTH INCORRECTO (45%) 
   Esto asegura que el contenedor principal ocupe todo el espacio disponible (100%), 
   resolviendo el problema de que el formulario de revisión se vea pequeño. */
.woocommerce-checkout.woocommerce-order-pay .woocommerce:not(.widget_shopping_cart) {
    /* Forzamos el ancho máximo al 100% para que se expanda en todos los dispositivos */
    max-width: 100% !important; 
    
    /* Mantenemos el centrado del margen, pero aseguramos el ancho completo */
    margin: 0 auto 100px !important;
}

/* 2. ALINEACIÓN DEL ENCABEZADO "PRODUCT TOTAL" 
   Esto asegura que el texto del encabezado de la columna de totales en 
   la tabla de revisión del pedido se alinee a la izquierda. */
.woocommerce-order-pay #order_review .shop_table tr th.product-total {
    text-align: left;
}

/* 3. TAMAÑO DE FUENTE Y ESPACIO DEL TOTAL FINAL 
   Aumenta y fuerza el tamaño del monto del Total Final a 22px. */
.woocommerce-order-pay #order_review .shop_table tfoot tr:last-child td span {
    font-size: 20px !important; /* Ahora está forzado a 22px */
}

/* ======================================================= */
/*              PRODUCTOS TABLAS TR TH RESPONSIVE          */
/* ======================================================= */

/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    
    /* Aseguramos que el layout de la tabla respete los anchos de columna */
    .product[align="center"] {
        table-layout: fixed !important;
        width: 100% !important;
    }

    /* 1. Asignar anchos fijos flexibles a las celdas */
    .product td.product-item,
    .product td.product-description {
        display: table-cell !important;
        vertical-align: top !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        word-break: normal; /* Reiniciamos para evitar conflictos */
    }

    /* Columna de la etiqueta: 35% de ancho */
    .product td.product-item {
        width: 35% !important; 
        min-width: 90px !important;
        font-weight: bold !important;
    }

    /* Columna de la descripción: 65% de ancho */
    .product td.product-description {
        width: 65% !important; 
        
        /* 2. Propiedades para ruptura por palabras completas (la solución deseada) */
        /* Permite que el navegador rompa palabras solo en puntos lógicos (espacios) */
        word-wrap: break-word !important; 
        /* Es una propiedad más moderna, sinónimo de word-wrap */
        overflow-wrap: break-word !important; 
        
        /* Esta es la clave. Si el texto es demasiado largo para caber, 
           lo rompe en el siguiente punto de guionación lógica (espacio o guion) */
        word-break: break-word !important; 
    }
}

/* ======================================================== */
/* CENTRADO BOTONES ADD TO CART Y MAKE AN OFFER  Responsive */
/* ======================================================== */

@media (max-width: 768px) {
    /* 1. Ocultar el mensaje de Stock */
    .product_infos p.stock.in-stock {
        display: none !important;
    }

    /* 2. Contenedores de los botones (para centrar) */
    .product_infos .product_summary_middle + .price + .stock + form.cart,
    .product_infos p:nth-of-type(2) {
        text-align: center !important; 
        display: block !important;
    }

    /* 3. Botón "Add to cart" */
    .product_infos form.cart button.single_add_to_cart_button {
        display: block !important;
        margin: 10px auto !important;
        width: 100% !important;
        max-width: 300px !important;
        float: none !important;
    }

    /* 4. Botón "Make an offer" */
    .product_infos p button.wcj-offer-price-button {
        display: block !important;
        margin: 10px auto !important;
        width: 100% !important;
        max-width: 300px !important;
        float: none !important;
    }
    
    /* 5. Ajuste adicional para centrar el formulario Add to Cart */
    .product_infos form.cart {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 10px auto !important; 
    }
}

/* ======================================================== */
/*          Centrado Tab DESCRIPTION  Responsive            */
/* ======================================================== */

/* Centra el ítem de la pestaña ACTIVA SÓLO en el rango de tableta (entre 1024px y 768px) */
@media (max-width: 1024px) and (min-width: 768px) {
    
    /* Selector específico para cualquier pestaña que esté activa */
    ul.tabs li.active {
        /* Propiedades solicitadas: */
        display: flex !important;
        justify-content: center !important;
        float: none !important;
        
        /* Ajustes adicionales necesarios para el centrado de bloques */
        width: auto !important; /* Permite que el LI ocupe solo el ancho del contenido */
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Como respaldo, centramos el contenedor UL para centrar el LI */
    ul.tabs {
        text-align: center !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}



/*
 * ESTILOS RESPONSIVE PARA EL AUCTION-CONTAINER
 * Estos estilos deben ser inyectados en tu archivo CSS o en un bloque <style>
 */
@media (max-width: 768px) {
    /* 1. La tarjeta de subasta ocupa todo el ancho y APILA elementos */
    .auctions-container .auction-card {
        width: 95% !important; 
        flex-direction: column !important; 
        margin-left: auto;
        margin-right: auto;
    }

    /* 2. La imagen ocupa el 100% de su espacio y va arriba */
    .auction-card .auction-image-container {
        width: 100% !important;
        min-width: unset !important;
        order: -1; 
    }

    /* 3. Los detalles también ocupan el 100% */
    .auction-card .auction-details-container {
        width: 100% !important;
    }
}

/*
 * ESTILOS LIMPIOS PARA EL AUCTION-CONTAINER
 * Estos estilos deben ser inyectados en tu archivo CSS o en un bloque <style>
 */
 
.auction-card {
    width: 48%; 
    margin: 0 1%; 
    margin-bottom: 20px; 
    box-sizing: border-box;
    display: flex; 
    flex-direction: row; /* Layout horizontal por defecto (escritorio) */
    border: 1px solid #eee; /* Borde opcional */
}

.auction-image-container {
    width: 45%; 
    min-width: 150px;
}

/* Estilos para el texto y detalles (suponiendo que usas esta clase después) */
.auction-details-container {
    width: 55%; 
    padding: 10px; 
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Estilos Responsive para apilar en móviles */
@media (max-width: 768px) {
    .auction-card {
        width: 95% !important; 
        flex-direction: column !important; /* APILA: Imagen arriba, Texto abajo */
        margin-left: auto;
        margin-right: auto;
    }

    .auction-image-container {
        width: 100% !important;
        min-width: unset !important;
        order: -1; 
    }

    .auction-details-container {
        width: 100% !important;
    }
}

.auction-details-container {
    width: 55%; 
    padding: 10px; 
    text-align: center;
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Coloca los elementos uno debajo del otro */
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
}