/**
 * Module: Mini Cart Modern UI
 * Scope: .is-modern-dark-mini-cart
 * Fixes: Double Title, Ghost Discount, Quantity Visibility
 */

/* ---------------------------------------------------------
   0. GLOBAL VISIBILITY FIXES (CRITICAL)
--------------------------------------------------------- */

/* 
   Fix Double Title:
   Target the specific title elements. If they have the [hidden] attribute,
   they MUST be hidden, regardless of other display rules.
*/
.is-modern-dark-mini-cart .wc-block-components-product-name[hidden],
.is-modern-dark-mini-cart .wc-block-cart-item__image [hidden] {
    display: none !important;
}

/* 
   Fix Ghost Discount:
   Only show the badge if it does NOT have the [hidden] attribute.
   Previously, 'display: inline-block !important' was overriding the hidden state.
*/
.is-modern-dark-mini-cart .wc-block-components-sale-badge {
    display: none !important;
    /* Default to hidden */
}

.is-modern-dark-mini-cart .wc-block-components-sale-badge:not([hidden]) {
    display: inline-block !important;
    /* Only show if valid */
    font-size: 10px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    vertical-align: middle !important;
}

/* ---------------------------------------------------------
   1. RESET & GRID SETUP
--------------------------------------------------------- */
.is-modern-dark-mini-cart .wc-block-cart-items,
.is-modern-dark-mini-cart tbody {
    display: block !important;
    width: 100% !important;
}

.is-modern-dark-mini-cart .wc-block-cart-items__row {
    display: grid !important;
    /* Columns: Image (44px) | Content (Flex) | Actions (Dropdown) */
    grid-template-columns: 44px 1fr auto !important;
    grid-template-areas: "image content actions" !important;
    gap: 12px !important;
    padding: 16px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    align-items: start !important;
    position: relative !important;
    /* --- NUEVO: ESTILO TIPO TARJETA (CARD) --- */
    background-color: rgba(255, 255, 255, 0.03) !important;
    /* Fondo sutil */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    /* Borde muy sutil */
    border-radius: 12px !important;
    /* Bordes redondeados */
    padding: 12px !important;
    /* Padding interno */
    margin-bottom: 8px !important;
    /* Separación entre productos */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    /* Reemplaza la línea divisoria antigua */
    transition: background-color 0.2s ease !important;
}

/* Unwrap TD to allow Grid participation */
.is-modern-dark-mini-cart .wc-block-cart-items__row>td {
    display: contents !important;
}

/* Opcional: Efecto hover en toda la tarjeta del producto */
.is-modern-dark-mini-cart .wc-block-cart-items__row:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}


/* ---------------------------------------------------------
   2. IMAGE
--------------------------------------------------------- */
.is-modern-dark-mini-cart .wc-block-cart-item__image>* {
    grid-area: image;
}

.is-modern-dark-mini-cart .wc-block-cart-item__image img {
    width: 44px !important;
    height: 66px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
}

/* ---------------------------------------------------------
   3. CONTENT (Title, Category, Price)
--------------------------------------------------------- */
.is-modern-dark-mini-cart .wc-block-cart-item__wrap {
    grid-area: content;
    display: block !important;
    padding-right: 8px;
}

/* Title Styling */
.is-modern-dark-mini-cart .wc-block-components-product-name {
    /* Note: We don't force display:block here to avoid overriding the [hidden] rule above */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--accent-3, #fff) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
}

/* Ensure the visible title is block-level */
.is-modern-dark-mini-cart .wc-block-components-product-name:not([hidden]) {
    display: block !important;
}

/* Category */
.is-modern-dark-mini-cart .wc-block-components-product-details {
    display: flex !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    list-style: none !important;
}

.is-modern-dark-mini-cart .wc-block-components-product-details__name {
    display: none !important;
}

.is-modern-dark-mini-cart .wc-block-components-product-details__value {
    font-size: 11px !important;
    color: var(--wp--preset--color--custom-gris-claro, #aaa) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Price Wrapper */
.is-modern-dark-mini-cart .wc-block-cart-item__prices {
    display: inline-block !important;
    font-size: 13px !important;
    color: #fff !important;
    margin-right: 8px !important;
}

/* ---------------------------------------------------------
   4. ACTIONS (Dropdown & Trash)
--------------------------------------------------------- */
.is-modern-dark-mini-cart .vortex-mini-cart-dropdown {
    grid-area: actions;
    justify-self: end;

    /* Align to top to avoid overlapping trash */

    appearance: none;
    background-color: #222;
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;

    /* Compact padding for Mini Cart */
    padding: 0 8px;
    font-size: 12px;
    cursor: pointer;
    min-width: 50px;
    height: 28px;

    /* SVG Arrow from Main Cart */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23F0F0F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 12px;

    transition: border-color 0.2s ease;
}

/* Trash Icon (Absolute Bottom Right) */
.is-modern-dark-mini-cart .wc-block-cart-item__remove-link {
    position: absolute !important;
    bottom: 16px;
    right: 12px;
    /* mismo padding de la card */
    font-size: 0 !important;
    padding: 0 !important;
    width: 20px;
    height: 20px;
    background-color: var(--wp--preset--color--custom-gris-resaltado) !important;
    border: none !important;
    cursor: pointer !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain;
    transition: background-color 0.2s ease !important;
}

.is-modern-dark-mini-cart .wc-block-cart-item__remove-link:hover {
    /* Opción A: Blanco brillante */
    /* background-color: var(--wp--preset--color--accent-3, #fff) !important; */

    /* Opción B: Rojo Alerta (Recomendado para borrar) */
    background-color: var(--wp--preset--color--accent-5) !important;
    transform: scale(1.1);
    /* Efecto sutil de crecimiento */
}

/* ---------------------------------------------------------
   5. HIDE EXTRAS & QUANTITY FIXES
--------------------------------------------------------- */

/* 
   We hide the NATIVE quantity wrapper (buttons + input),
   but we must allow the PARENT (.wc-block-cart-item__quantity) 
   to display our custom dropdown.
*/
.is-modern-dark-mini-cart .wc-block-components-quantity-selector {
    display: none !important;
    /* Hide the +/- and input wrapper */
}

/* Ensure the custom dropdown (injected via JS) is visible and styled */
.is-modern-dark-mini-cart .vortex-mini-cart-dropdown {
    display: block !important;
    width: 60px;
    /* specific width */
    height: 30px;
    background-color: none;
    color: var(--wp--preset--color--accent-3);
    border: 1px solid var(--wp--preset--color--custom-gris-claro);

    border-radius: 4px;
    padding: 0 4px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    /* Place it correctly in the grid/flex layout */
    margin-right: auto;
}

/* Hide Total Column and Metadata (keep your existing rules) */
.is-modern-dark-mini-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper,
.is-modern-dark-mini-cart .wc-block-components-product-metadata,
.is-modern-dark-mini-cart .wc-block-components-product-metadata__description {
    display: none !important;
}

/* HOVER State Dropdown */
.is-modern-dark-mini-cart .vortex-mini-cart-dropdown:hover {
    border-color: var(--wp--preset--color--accent-5) !important;
    /* Borde blanco */
    background-color: none !important;
    /* Fondo muy leve */
}

/* FOCUS State (cuando se hace clic) */
.is-modern-dark-mini-cart .vortex-mini-cart-dropdown:focus {
    border-color: var(--wp--preset--color--accent-5) !important;
    background-color: none !important;
    /* Fondo sólido para leer mejor las opciones */
}

.wc-block-components-sale-badge {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}