/**
 * Poncho Dynamic Pricing - Frontend Styles
 */

/* Ocultar campo de cantidad estándar */
.woocommerce div.product form.cart div.quantity,
.woocommerce-variation-add-to-cart .quantity {
    display: none !important;
}

/* Estilos del contenedor principal */
.poncho-product-dimension {
    background: #FBF9EC;
    /* Color de fondo solicitado */
    border-radius: 8px;
    padding: 25px 10px 20px;
    /* Reducido padding horizontal */
    margin-bottom: 20px;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    color: #333;
    /* Mantener texto principal en tono oscuro para legibilidad */
    box-sizing: border-box;
}

/* Layout de columnas: siempre una debajo de la otra */
.poncho-dimension-flex-container {
    display: block;
    /* Cambiado de flex a block */
    /* Eliminadas propiedades flex: flex-wrap, gap, align-items */
    padding-top: 25px;
    /* Añadido padding-top para crear espacio arriba */
    margin-bottom: 10px;
    margin-top: 0;
    width: 100%;
}

.poncho-dimension-left-column {
    /* Eliminadas propiedades flex: flex, margin-right, align-self */
    display: flex;
    /* Convertir en flex container */
    align-items: flex-start;
    /* Alinear elementos hijos al inicio (superior) */
    gap: 10px;
    /* Espacio entre el bloque título/input y el bloque de precio */
    width: 100%;
    margin-bottom: 20px;
    min-width: unset;
    padding-top: 0;
}

/* Nuevo: Contenedor para el título y el área de input */
.poncho-title-input-area {
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    /* No crecer */
    flex-shrink: 0;
    /* No encoger */
    flex-basis: auto;
    /* Ancho basado en contenido */
    height: 85px;
    /* Aumentada altura de 70px a 85px */
    justify-content: space-between;
    /* Distribuir espacio entre título e input */
    padding: 0;
}

.poncho-dimension-right-column {
    /* Eliminadas propiedades flex: flex, align-self */
    width: 100%;
    /* Ocupar todo el ancho */
    min-width: unset;
    /* Resetear min-width si no es necesario */
    /* display: block !important; puede permanecer o ser eliminado */
}

/* Título de la dimensión */
.poncho-dimension-header {
    margin: 0;
    /* Quitamos márgenes ya que usamos justify-content */
    line-height: 22px;
    /* Altura fija para el título */
}

.poncho-dimension-label {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #013D2C;
    line-height: 1.4;
}

/* Contenedor de entrada con reset */
.poncho-dimension-input-container {
    margin-bottom: 0;
    /* Ya no es necesario aquí si .poncho-title-input-area maneja el espaciado inferior */
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.poncho-input-with-reset {
    display: flex;
    gap: 8px;
    max-width: 240px;
}

/* Estilo del campo de entrada - MUY COMPACTO */
#poncho_dimension {
    width: 80px;
    flex: 0 0 auto;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 6px 8px;
    height: 38px;
    font-size: 15px;
    text-align: center;
    background-color: white;
    color: #333;
    box-sizing: border-box;
    /* Mantener texto de input legible */
}

/* Botón de reset - NUEVO NOMBRE DE CLASE Y MAYOR ESPECIFICIDAD */
.poncho-product-dimension .poncho-dimension-reset-button,
.single-product .poncho-product-dimension .poncho-dimension-reset-button,
body .poncho-product-dimension .poncho-dimension-reset-button {
    padding: 6px 10px !important;
    background: #013D2C !important;
    /* Color fuerte para el botón - FORZADO */
    border-radius: 4px !important;
    text-decoration: none !important;
    color: #fff !important;
    /* Texto en blanco para el botón - FORZADO */
    font-size: 13px !important;
    border: 1px solid #013D2C !important;
    cursor: pointer !important;
    height: 38px !important;
    transition: all 0.2s ease !important;
    line-height: normal !important;
    min-height: unset !important;
    box-shadow: none !important;
    text-transform: none !important;
    box-sizing: border-box;
}

.poncho-product-dimension .poncho-dimension-reset-button:hover,
.single-product .poncho-product-dimension .poncho-dimension-reset-button:hover,
body .poncho-product-dimension .poncho-dimension-reset-button:hover {
    background: #015D42 !important;
    /* Versión ligeramente más clara al pasar el ratón - FORZADO */
    color: #fff !important;
    border-color: #015D42 !important;
    opacity: 1 !important;
}

/* Mantener el estilo antiguo para compatibilidad con versiones anteriores */
.poncho-reset-price,
.single-product .poncho-reset-price,
body .poncho-reset-price {
    padding: 6px 10px !important;
    background: #013D2C !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    color: #fff !important;
    border: 1px solid #013D2C !important;
    cursor: pointer !important;
}

.poncho-reset-price:hover,
.single-product .poncho-reset-price:hover,
body .poncho-reset-price:hover {
    background: #015D42 !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* Sección de precio ajustada */
.poncho-price-display {
    flex-grow: 1;
    /* Ocupar espacio restante */
    flex-basis: 0;
    /* Base de cero para que grow funcione bien */
    flex-shrink: 0;
    background: rgba(1, 61, 44, 0.08);
    height: 85px;
    /* Aumentada altura de 70px a 85px */
    padding: 0 15px;
    /* Solo padding horizontal */
    border-radius: 6px;
    border: none;
    margin: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centrar el contenido verticalmente */
}

/* Nuevos elementos para la estructura del precio */
.price-main-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.price-details-row {
    display: flex;
    gap: 8px;
    font-size: 14px;
    color: #555;
    align-items: center;
}

.dimension-info {
    background: rgba(1, 61, 44, 0.15);
    /* Versión translúcida del color fuerte */
    border-radius: 4px;
    padding: 3px 8px;
    /* Restaurado padding original */
    font-size: 13px;
    /* Restaurado tamaño de fuente original */
    color: #013D2C;
    /* Color fuerte para el texto */
    line-height: 1.4;
}

.discount-info {
    background: rgba(1, 61, 44, 0.08);
    /* Versión translúcida del color fuerte */
    border-radius: 4px;
    padding: 3px 8px;
    /* Restaurado padding original */
    font-size: 13px;
    /* Restaurado tamaño de fuente original */
    color: #013D2C;
    /* Color fuerte para el texto */
    line-height: 1.4;
}

#poncho-calculated-price {
    font-size: 16px;
    line-height: 1.3;
}

#poncho-calculated-price .price-label {
    color: #013D2C;
    margin-right: 6px;
    font-weight: 600;
    display: inline-block;
    min-width: 50px;
}

#poncho-calculated-price .woocommerce-Price-amount {
    font-weight: 700;
    font-size: 16px;
    color: #013D2C;
    /* Color fuerte para el precio */
}

/* Estilo de los detalles de precio */
.dimension-price-note,
.quantity-rule-note {
    color: #777;
    font-size: 0.9em;
}

/* Nota de precio */
.poncho-pricing-note {
    margin: 10px 0 0;
    padding: 0;
    font-size: 14px;
    color: #555;
    position: relative;
    bottom: 0;
}

/* Reglas de precio - MEJOR INTEGRADAS */
.poncho-pricing-rules-display {
    display: none;
    /* Oculto por defecto */
    background: rgba(1, 61, 44, 0.04);
    border-radius: 6px;
    padding: 15px 18px !important;
    /* Padding uniforme */
    height: auto !important;
    /* Altura automática basada en el contenido */
    box-sizing: border-box;
    border: 1px solid rgba(1, 61, 44, 0.1);
    min-height: 150px;
    /* Reducido ligeramente */
    margin-top: 10px !important;
    /* Añadir un pequeño margen superior */
}

.poncho-pricing-rules-display h4,
#poncho-external-rules-container h4 {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 16px !important;
    color: #013D2C !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* Asegurar que el contenedor externo sea visible */
#poncho-external-rules-container,
.poncho-pricing-rules-display {
    display: block !important;
    visibility: visible !important;
}

/* Tablas más limpias y alineadas */
.poncho-rules-table,
#poncho-external-rules-container table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 14px !important;
    display: table !important;
    margin: 0 !important;
    border: none !important;
    table-layout: fixed !important;
    /* Asegurar columnas de ancho uniforme */
}

.poncho-rules-table th,
#poncho-external-rules-container th {
    text-align: left !important;
    padding: 8px 12px 12px 0 !important;
    /* Padding ajustado */
    border-bottom: 1px solid rgba(1, 61, 44, 0.1) !important;
    color: #013D2C !important;
    font-weight: 600 !important;
    display: table-cell !important;
    background: transparent !important;
    font-size: 15px !important;
    vertical-align: bottom !important;
}

.poncho-rules-table td,
#poncho-external-rules-container td {
    padding: 10px 12px 10px 0 !important;
    /* Padding ajustado */
    border-bottom: 1px solid rgba(1, 61, 44, 0.08) !important;
    color: #555 !important;
    display: table-cell !important;
    background: transparent !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

.poncho-rules-table tr:last-child td,
#poncho-external-rules-container tr:last-child td {
    border-bottom: none !important;
}

/* Ajustar las dimensiones de columnas */
.poncho-rules-table th:first-child,
.poncho-rules-table td:first-child,
#poncho-external-rules-container table th:first-child,
#poncho-external-rules-container table td:first-child {
    width: 60%;
    text-align: left !important;
}

.poncho-rules-table th:last-child,
.poncho-rules-table td:last-child,
#poncho-external-rules-container table th:last-child,
#poncho-external-rules-container table td:last-child {
    width: 40%;
    text-align: right !important;
    padding-right: 0 !important;
}

/* Ajuste específico para tablas externas de WooCommerce */
#poncho-external-rules-container table.shop_table {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#poncho-external-rules-container table.shop_table th,
#poncho-external-rules-container table.shop_table td {
    background: transparent !important;
    box-shadow: none !important;
}

/* Ocultar tabla de reglas existente de WooCommerce */
.product .quantity_pricing,
.woocommerce-product-price-rules,
.quantity-pricing-totals {
    display: none !important;
}

/* Mantener compatibilidad con la versión anterior */
.poncho-rules-list {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
}

.poncho-rules-list li {
    margin-bottom: 6px;
    font-size: 14px;
    color: #555;
}

/* Responsive - AJUSTADO */
@media (max-width: 840px) {
    .poncho-product-dimension {
        padding: 15px;
        /* Padding uniforme para todos los lados en móvil */
        width: 100%;
        /* Ocupar el ancho disponible del contenedor padre */
        /* Quitar max-width, margin-left, margin-right si estaban de la prueba anterior */
        /* max-width: calc(100% - 30px); */
        /* margin-left: auto; */
        /* margin-right: auto; */
        box-sizing: border-box;
    }

    /* .poncho-dimension-flex-container ya es display: block por defecto,
       así que flex-direction y gap no aplican aquí a menos que lo vuelvas flex.
       Si es block, estos estilos no tienen efecto o podrían eliminarse de la media query. */
    .poncho-dimension-flex-container {
        /* flex-direction: column; No es necesario si es display: block */
        /* gap: 15px; No es necesario si es display: block y los márgenes se manejan individualmente */
    }

    .poncho-title-input-area {
        /* NUEVA REGLA PARA MÓVIL */
        flex-grow: 1;
        /* Permitir que crezca para igualar al price-display */
        flex-basis: 0;
        /* Distribuir espacio desde una base cero */
        /* flex-shrink: 0; ya está heredado de la regla general */
    }

    .poncho-dimension-left-column,
    .poncho-dimension-right-column {
        /* flex: 0 0 100%; No es necesario si es display: block y width: 100% */
        /* width: 100%; Ya está definido arriba */
    }

    .poncho-pricing-rules-display {
        min-height: auto;
        /* Altura automática en móvil */
        margin-top: 0 !important;
    }

    .poncho-input-with-reset {
        flex-wrap: nowrap;
        max-width: none;
        /* Permitir que ocupe el ancho de su columna padre */
        width: 100%;
        /* Asegurar que intente llenar el espacio */
    }

    #poncho_dimension {
        /* width: 80px; */
        /* Quitar ancho fijo anterior en móvil */
        flex-grow: 1;
        /* Permitir que el campo de texto crezca */
        width: auto;
        /* El ancho será determinado por flex-grow */
        min-width: 60px;
        /* Asegurar un tamaño mínimo razonable */
    }

    .poncho-dimension-reset-button,
    .poncho-reset-price {
        width: auto;
    }

    .price-details-row {
        flex-direction: column;
        gap: 5px;
    }
}

/* Ocultar en sticky add-to-cart del tema Flatsome */
.sticky-add-to-cart .poncho-product-dimension {
    display: none !important;
}

/* Ocultar la sección de reglas de precio cuando no está habilitada */
.poncho-pricing-rules-display:empty,
#poncho-external-rules-container:empty {
    display: none !important;
}

#poncho-external-rules-container {
    display: none;
    /* Oculto por defecto */
}

/* Ocultar la nota de precio por defecto */
.poncho-pricing-note {
    display: none;
}