/* VM Wishlist Pro – style.css v2.1 – diseño optimizado */

/* Variables base */
:root{
    --vmwl-green: #404E15;
    --vmwl-border: rgba(0,0,0,.08);
    --vmwl-gray: #6b7280;
    --vmwl-bg-light: #f8fafc;
}

/* === Tarjeta principal === */
.vmwl-card{
    background:#fff;
    border:1px solid var(--vmwl-border);
    border-radius:14px;
    padding:20px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

/* === Botones genéricos === */
.vmwl-btn{
    background:var(--vmwl-green);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:7px 12px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:0.08s ease-in-out;
}
.vmwl-btn:hover{
    opacity:.9;
}
.vmwl-btn.outline{
    background:#fff;
    color:var(--vmwl-green);
    border:1px solid var(--vmwl-green);
}
.vmwl-btn.outline:hover{
    background:var(--vmwl-green);
    color:#fff;
}

/* Botón pequeño (detalles de lista, ver/añadir/suprimir) */
.vmwl-btn-small{
    padding:4px 10px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    border-radius:6px !important;
}

/* === Textos, inputs === */
.vmwl-input,
.vmwl-select,
.vmwl-modal__content select{
    width:100%;
    border:1px solid #d1d5db;
    border-radius:8px;
    padding:8px 10px;
    font-size:14px;
}

/* === Mensajes === */
.vmwl-notice{
    background:var(--vmwl-bg-light);
    border:1px dashed var(--vmwl-border);
    padding:10px 12px;
    border-radius:10px;
    text-align:center;
}

/* =======================================================
   ================== CORAZÓN PRODUCTO ====================
   ======================================================= */

.vmwl-heart-row{
    margin-top:6px;
}

.vmwl-heart-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    color:var(--vmwl-green);
    font-size:14px;
}

.vmwl-heart-icon{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#f3f4f6;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.vmwl-heart-icon::before{
    content:"❤";
    font-size:11px;
    color:var(--vmwl-green);
}

.vmwl-heart-text{
    text-decoration:none;
}

.vmwl-heart-btn:hover .vmwl-heart-text{
    text-decoration:underline;
}


/* =======================================================
   ====================== MODALES =========================
   ======================================================= */

.vmwl-modal[hidden]{ 
    display:none; 
}

.vmwl-modal{
    position:fixed;
    inset:0;
    z-index:99999;
}
.vmwl-modal__overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}
.vmwl-modal__dialog{
    position:relative;
    z-index:2;
    width:min(92vw,480px);
    margin:8vh auto;
    background:#fff;
    border-radius:16px;
    padding:20px 20px 18px;
    border:1px solid var(--vmwl-border);
    box-shadow:0 18px 48px rgba(0,0,0,.25);
}

.vmwl-modal__dialog h3{
    margin:0;
    font-size:18px;
    margin-bottom:6px;
}

.vmwl-modal__close{
    position:absolute;
    right:10px;
    top:10px;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid var(--vmwl-border);
    background:#fff;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
}

/* Modal content */
.vmwl-modal__content{
    margin-top:12px;
    display:grid;
    gap:16px; /* más espacio entre elementos */
}

.vmwl-modal__content label{
    font-size:14px;
    color:var(--vmwl-gray);
}

.vmwl-row-inline{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}

/* Crear lista link */
.vmwl-link{
    margin-top:6px;
    font-size:14px;
    text-decoration:underline;
    color:var(--vmwl-green);
    background:none;
    border:none;
    cursor:pointer;
}

/* =======================================================
   ===================== TABLAS ===========================
   ======================================================= */

.vmwl-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 10px;
}

.vmwl-table th{
    text-align:left;
    color:var(--vmwl-gray);
    font-weight:600;
    font-size:13px;
    padding-bottom:6px;
}

.vmwl-row{
    background:#fff;
    border:1px solid var(--vmwl-border);
    border-radius:12px;
}
.vmwl-row td{
    padding:10px 12px;
}

/* =======================================================
   ============ TABLA DETALLADA DE WISHLIST ===============
   ======================================================= */

.vmwl-table.vmwl-wide{
    width:100%;
    table-layout:fixed;
}

.vmwl-table.vmwl-wide th,
.vmwl-table.vmwl-wide td{
    padding:12px 8px;
    vertical-align:middle;
    text-align:center;
    font-size:13px;
}

.vmwl-table.vmwl-wide .product-thumbnail{
    width:70px;
}

.vmwl-table.vmwl-wide .product-name{
    min-width:200px;
    text-align:left;
}

.vmwl-table.vmwl-wide .product-price,
.vmwl-table.vmwl-wide .product-quantity,
.vmwl-table.vmwl-wide .product-m2,
.vmwl-table.vmwl-wide .product-subtotal{
    width:120px;
    white-space:nowrap;
}

/* === Estilo especial para m² === */
.vmwl-table.vmwl-wide .product-m2{
    background:#f8fafc;
    border-left:1px solid #e5e7eb;
    border-right:1px solid #e5e7eb;
}

/* Nota m² */
.product-m2 small{
    font-size:11px;
    color:#6b7280;
    display:block;
}

/* === Form editar cantidad === */
.vmwl-edit-form{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
}

.vmwl-edit-form .qty{
    width:70px !important;
    text-align:center;
}

/* === Acciones === */
.vmwl-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:10px 0;
}

.vmwl-actions .vmwl-btn{
    padding:6px 10px;
}

/* Botones dentro de la tabla detallada (Añadir / Supprimer) */
.vmwl-table.vmwl-wide .product-remove .vmwl-btn{
    font-size:12px;
    padding:6px 8px;
    width:auto;                 /* antes 100%, ahora tamaño contenido */
    display:inline-flex;
    justify-content:center;
    margin-bottom:4px;
}

/* =======================================================
   ========= ESTILOS PARA NUEVO TEMPLATE (vmwl-lists) ====
   ======================================================= */

/* Contenedor general en Mi cuenta */
.vmwl-account{
    margin-top:20px;
}

/* Listado de listas */
.vmwl-lists,
.vmwl-items{
    width:100%;
    margin-top:12px;
}

.vmwl-lists th,
.vmwl-items th{
    font-size:14px;
}

.vmwl-lists td,
.vmwl-items td{
    font-size:13px;
    vertical-align:middle;
}

/* Botones dentro de tablas (voir / ajouter / supprimer) */
.vmwl-lists .button,
.vmwl-items .button{
    background:var(--vmwl-green);
    color:#fff !important;
    border:none;
    border-radius:999px;
    padding:4px 12px;
    font-size:12px;
    line-height:1.3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.vmwl-lists .button:hover,
.vmwl-items .button:hover{
    background:#2f3810;
    color:#fff !important;
}

.vmwl-items td:last-child{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-start;
}

/* En detalle de lista, que "Ajouter" y "Supprimer" no se vean gigantes */
.vmwl-items td:last-child .button{
    margin-bottom:4px;
}

/* Ocultar cualquier columna extra (como ese m² final con “–”) */
.vmwl-items thead th:last-child,
.vmwl-items tbody td:last-child{
    /* IMPORTANTE: esto solo funciona si nuestra última columna es Acciones,
       y el tema añade una columna extra al final. Si en tu código
       la última columna ES Acciones, no pongas este bloque. */
    /* display:none; */
}


/* Imagen de producto en detalle */
.vmwl-items .product-name img{
    max-width:70px;
    height:auto;
    margin-bottom:4px;
}

/* =======================================================
   ================== LOADER DE CARGA =====================
   ======================================================= */

.vmwl-loader{
    position:fixed;
    top:50%;
    left:50%;
    width:32px;
    height:32px;
    margin-top:-16px;
    margin-left:-16px;
    border-radius:50%;
    border:3px solid #ccc;
    border-top-color:var(--vmwl-green);
    animation:vmwl-spin 0.7s linear infinite;
    z-index:999999;
    display:none;
}
/* Ocultar la columna extra de m² que agrega el tema */
.vmwl-items thead th.product-m2,
.vmwl-items tbody td.product-m2{
    display:none !important;
}


@keyframes vmwl-spin{
    to{ transform:rotate(360deg); }
}

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

@media (max-width: 768px){

    .vmwl-table.vmwl-wide{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    .vmwl-edit-form{
        flex-direction:row;
    }

    .vmwl-edit-form .qty{
        width:50px !important;
    }

    .vmwl-btn{
        padding:6px 8px;
        font-size:11px;
    }

    .vmwl-table.vmwl-wide .product-thumbnail{
        width:50px;
    }
}