/**
 * Module: Modern Dark Cart
 * Trigger: .is-modern-dark-cart
 * Description: "Pill" layout with Flattened DOM and 2:3 Images.
 */

/* ---------------------------------------------------------
   1. RESET & STRUCTURE
--------------------------------------------------------- */
table.is-modern-dark-cart,
.is-modern-dark-cart .wc-block-cart-items {
    display: block !important;
    border: none !important;
    background: transparent !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    width: 100%;
}

.is-modern-dark-cart thead {
    display: none !important;
}

.is-modern-dark-cart tbody {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* Disable focus outlines */
.wc-block-cart-items__row:focus,
.wc-block-cart-items__row:focus-visible,
.wc-block-cart-items__row:active,
.wc-block-cart-items__row:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ---------------------------------------------------------
   2. THE ROW (Grid Container)
--------------------------------------------------------- */
.is-modern-dark-cart .wc-block-cart-items__row {
    display: grid !important;
    /* 
       Desktop Grid:
       Col 1: Image (70px)
       Col 2: Name (Flexible)
       Col 3: Price (Auto)
       Col 4: Quantity (Auto)
    */
    grid-template-columns: 70px 1fr max-content max-content;
    grid-template-rows: auto 1px auto;
    align-items: center;
    gap: 0.5rem 1.5rem;

    background-color: var(--wp--preset--color--custom-gris) !important;
    border-radius: 12px;
    padding: 1rem;
    position: relative;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

/* 
   FLATTEN THE DOM
   Unwrap all containers so children sit directly on the Grid.
*/
.is-modern-dark-cart .wc-block-cart-items__row td.wc-block-cart-item__product,
.is-modern-dark-cart .wc-block-cart-items__row .wc-block-cart-item__wrap,
.is-modern-dark-cart .wc-block-cart-items__row .wc-block-cart-item__quantity,
.is-modern-dark-cart .wc-block-cart-items__row td.wc-block-cart-item__total {
    display: contents !important;
}

.is-modern-dark-cart .wc-block-cart-items__row td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: auto !important;
}

/* ---------------------------------------------------------
   3. CELL PLACEMENT & STYLING (Desktop Defaults)
--------------------------------------------------------- */

/* --- IMAGE (Col 1) - 2:3 RATIO --- */
/* CONTENEDOR */
.is-modern-dark-cart .wc-block-cart-item__image {
    grid-column: 1;
    grid-row: 1 / span 3;

    height: 70px;
    aspect-ratio: 2 / 3;

    width: auto !important;
    /* rompe el 70px que mete Woo */
    align-self: start;
}

/* IMG */
.is-modern-dark-cart .wc-block-cart-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* --- NAME (Col 2) --- */
.is-modern-dark-cart .wc-block-components-product-name {
    grid-column: 2;
    grid-row: 1 / span 3;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wp--preset--color--accent-3);
    text-decoration: none;
    display: block;
    margin: 0;
    padding-right: 1rem;
    transition: color 0.2s ease;
}

/* --- PRICE (Col 3, Row 1) --- */
.is-modern-dark-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    align-self: center;
}

.is-modern-dark-cart .wc-block-formatted-money-amount {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp--preset--color--accent-3);
}

/* --- QUANTITY DROPDOWN (Col 4, Row 1) --- */
.modern-cart-qty-dropdown {
    grid-column: 4;
    grid-row: 1;
    align-self: center;

    appearance: none;
    background-color: transparent;
    color: var(--wp--preset--color--accent-3);
    border: 1px solid var(--wp--preset--color--custom-gris-resaltado);
    padding: 0.3rem 1.8rem 0.3rem 0.8rem;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    min-width: 64px;
    height: 32px;

    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 0.3rem center;
    background-size: 1rem;
}

/* --- DROPDOWN OPTIONS STYLING --- */
/* 
   Force dark background on the dropdown list options.
   Note: This works on Chrome/Edge/Firefox Desktop. 
   Mobile browsers (iOS/Android) use native OS pickers which handle contrast automatically.
*/
.modern-cart-qty-dropdown {
    /* 
       IMPORTANTE: Esto le dice al navegador (Chrome/Edge) que renderice 
       los controles nativos (scrollbars, bordes del popup) en modo oscuro.
    */
    color-scheme: dark;
}

.modern-cart-qty-dropdown option {
    border-radius: 6px;
    background-color: var(--wp--preset--color--custom-gris);
    color: var(--wp--preset--color--accent-3);
    padding: 4px;
}

.modern-cart-qty-dropdown:hover,
.modern-cart-qty-dropdown:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent-5);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.is-modern-dark-cart .wc-block-components-quantity-selector {
    display: none !important;
}

/* --- DIVIDER (Col 3-4, Row 2) --- */
.is-modern-dark-cart .wc-block-cart-items__row::after {
    content: '';
    grid-column: 3 / span 2;
    grid-row: 2;
    width: 100%;
    height: 1px;
    background-color: var(--wp--preset--color--accent-3);
    opacity: 0.2;
    margin: 0;
}

/* --- TRASH ICON (Col 4, Row 3) --- */
.is-modern-dark-cart .wc-block-cart-item__remove-link {
    grid-column: 4;
    grid-row: 3;
    justify-self: end;

    display: block !important;
    font-size: 0 !important;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0 !important;
    border: none !important;

    background-color: var(--wp--preset--color--custom-gris-resaltado) !important;

    -webkit-mask-image: 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");
    mask-image: 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");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.is-modern-dark-cart .wc-block-cart-item__remove-link:hover {
    opacity: 1;
    background-color: var(--wp--preset--color--accent-5) !important;
    transform: scale(1.1);
}

/* --- HIDE UNWANTED ELEMENTS --- */
.is-modern-dark-cart .wc-block-cart-item__prices,
.is-modern-dark-cart .wc-block-components-product-metadata,
.is-modern-dark-cart .wc-block-components-product-metadata__description,
.is-modern-dark-cart .wc-block-cart-item__product dl {
    display: none !important;
}

.wc-block-components-sale-badge {
    /* "Save $X" Badge */
    display: none !important;
}



/* ---------------------------------------------------------
   4. LOADING STATES
--------------------------------------------------------- */
.is-modern-dark-cart .wc-block-components-skeleton {
    width: 100%;
    height: 100%;
    min-height: 20px;
}

.is-modern-dark-cart .wc-block-cart-items__row.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ---------------------------------------------------------
   5. RESPONSIVE (MOBILE / TABLET)
   Trigger: 780px (Fixes the 778px break)
--------------------------------------------------------- */
@media (max-width: 780px) {
    .is-modern-dark-cart .wc-block-cart-items__row {
        /* 
           Mobile Grid Definition:
           Col 1: Image Width (70px)
           Col 2: Flexible Space
           Col 3: Auto (Price/Qty)
        */
        grid-template-columns: 70px 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        gap: 0.75rem 1rem !important;
        padding: 1.25rem !important;
        /* Restored padding */
        align-items: center;
    }

    /* --- ROW 1: HEADER (Image + Name) --- */

    /* Image: Top Left */
    .is-modern-dark-cart .wc-block-cart-item__image {
        grid-column: 1;
        grid-row: 1;
        width: 70px;
        margin-bottom: 0.25rem;
    }

    /* Name: Top Right (Spans rest) */
    .is-modern-dark-cart .wc-block-components-product-name {
        grid-column: 2 / span 2;
        grid-row: 1;
        align-self: start;
        padding-right: 0;
        margin-bottom: 0.25rem;
    }

    /* --- ROW 2: DIVIDER --- */

    /* Re-enable and position divider */
    .is-modern-dark-cart .wc-block-cart-items__row::after {
        display: block !important;
        grid-column: 1 / span 3;
        grid-row: 2;
        width: 100%;
        height: 1px;
        background-color: var(--wp--preset--color--accent-3);
        opacity: 0.15;
        margin: 0.5rem 0;
    }

    /* --- ROW 3: ACTIONS (Trash | Price | Qty) --- */

    /* Trash: Bottom Left (Under Image) */
    .is-modern-dark-cart .wc-block-cart-item__remove-link {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        /* Aligned Left */
        align-self: center;
        margin: 0;
        transform: none;
        /* Reset desktop hover scale if needed */
    }

    /* Price: Bottom Right (Next to Qty) */
    .is-modern-dark-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
        align-self: center;
        text-align: right;
        margin-right: 0.75rem;
        /* Space between Price and Qty */
    }

    /* Quantity: Bottom Far Right */
    .modern-cart-qty-dropdown {
        grid-column: 3;
        grid-row: 3;
        justify-self: end;
        align-self: center;
        margin: 0;
    }
}