/**
 * Estilos del frontend
 * Advanced Quantity & Unit Control
 *
 * @package AdvancedQuantityUnit
 */

/* ========================================
   LABEL DE UNIDAD
======================================== */

.aquc-unit-label {
    display: inline-block;
    font-weight: 600;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    vertical-align: middle;
    padding: 0 5px;
}

.aquc-unit-before {
    margin-right: 5px;
}

.aquc-unit-after {
    margin-left: 5px;
}

/* Mejor alineación con el input */
.quantity {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.quantity .aquc-unit-label {
    padding: 0 8px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    line-height: 2;
    min-width: 30px;
    text-align: center;
}

/* Asegurar que el input tenga buen aspecto junto al label */
.quantity input.qty {
    text-align: center;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    min-width: 60px;
}

/* Para el carrito */
.woocommerce-cart-form .quantity .aquc-unit-label {
    background: #fff;
    border: 1px solid #ddd;
    padding: 6px 10px;
    font-size: 12px;
}

/* Variante alternativa más discreta (opcional) */
.quantity .aquc-unit-label.aquc-subtle {
    background: transparent;
    border: none;
    color: #666;
    font-weight: normal;
    padding: 0 5px;
}

/* ========================================
   INPUT DE CANTIDAD
======================================== */

.quantity input.qty {
    text-align: center;
}

/* Asegurar que el input de cantidad se vea bien con el label */
.quantity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ========================================
   PRECIO CALCULADO EN TIEMPO REAL
======================================== */

.aquc-calculated-price {
    display: block;
    margin-top: 10px;
    padding: 10px 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.aquc-calculated-price strong {
    color: #2271b1;
    font-size: 16px;
}

.aquc-price-breakdown {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}

/* ========================================
   NOTIFICACIONES DE ERROR
======================================== */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    position: relative;
}

.woocommerce-error li::marker,
.woocommerce-message li::marker,
.woocommerce-info li::marker {
    font-size: 0;
}

/* ========================================
   SELECTOR DE CANTIDAD EN LOOP/ARCHIVE
======================================== */

.products .quantity {
    margin-bottom: 10px;
}

.products .quantity .aquc-unit-label {
    font-size: 12px;
}

/* ========================================
   CARRITO
======================================== */

.woocommerce-cart-form .quantity {
    display: inline-flex;
}

.cart-item-aquc-info {
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* ========================================
   RESPONSIVE
======================================== */

@media screen and (max-width: 768px) {
    .aquc-unit-label {
        font-size: 12px;
    }
    
    .aquc-calculated-price {
        font-size: 13px;
    }
    
    .quantity {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ========================================
   MODO OSCURO
======================================== */

@media (prefers-color-scheme: dark) {
    .aquc-unit-label {
        color: #f0f0f0;
    }
    
    .aquc-calculated-price {
        background: #2c2c2c;
        border-color: #444;
        color: #f0f0f0;
    }
    
    .aquc-calculated-price strong {
        color: #5b9dd9;
    }
    
    .aquc-price-breakdown {
        color: #b4b4b4;
    }
}

/* ========================================
   ANIMACIONES
======================================== */

@keyframes aquc-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.aquc-calculating {
    animation: aquc-pulse 1s ease-in-out infinite;
}

/* ========================================
   COMPATIBILIDAD CON TEMAS POPULARES
======================================== */

/* Storefront */
.storefront .quantity .aquc-unit-label {
    line-height: 2.5em;
}

/* Astra */
.ast-woocommerce-container .quantity .aquc-unit-label {
    line-height: 40px;
}

/* OceanWP */
.oceanwp-theme .quantity .aquc-unit-label {
    line-height: 36px;
}

/* Flatsome */
.theme-flatsome .quantity .aquc-unit-label {
    line-height: 1.8;
}
/* ========================================
   CARRITO - OCULTAR SOLO PRECIO UNITARIO
======================================== */

/* OCULTAR: El precio unitario pequeño (0,02€) que está en span.price */
.wc-block-cart-item__prices, .wc-block-components-order-summary-item__individual-prices {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}



/* ========================================
   ESTRUCTURA DE LA TABLA
======================================== */

/* Asegurar que la tabla se vea correctamente */
table.wc-block-cart-items {
    width: 100%;
    border-collapse: collapse;
}

table.wc-block-cart-items thead,
table.wc-block-cart-items tbody {
    display: table-header-group;
}

table.wc-block-cart-items thead,
table.wc-block-cart-items tbody {
    display: table-row-group;
}

table.wc-block-cart-items tr {
    display: table-row;
}

table.wc-block-cart-items th,
table.wc-block-cart-items td {
    display: table-cell;
    padding: 12px;
    vertical-align: middle;
}

/* Columna TOTAL alineada a la derecha */
td.wc-block-cart-item__total {
    text-align: right !important;
    font-weight: 600;
}

/* ========================================
   RESPONSIVE
======================================== */

@media screen and (max-width: 768px) {
    /* Ocultar precio unitario en móvil también */
    span.price.wc-block-components-product-price {
        display: none !important;
    }
    
    /* Mantener total visible */
    td.wc-block-cart-item__total {
        display: table-cell !important;
    }
}