/*
 * ===================================================================
 * ESTILOS PARA POPUP DE PRODUCTO A脩ADIDO - SONATA COLLECTION
 * ===================================================================
 */

#sonata-cart-popup-overlay {
  /* Oculto por defecto */
  display: none;
  
  /* Posici贸n y fondo */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999; /* Alto z-index para estar sobre todo */

  /* Centrado */
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Estado visible (lo activamos con JS) */
#sonata-cart-popup-overlay.sonata-visible {
  display: flex;
}

#sonata-cart-popup-contenido {
  background: #fff;
  padding: 30px 40px;
  border-radius: 5px;
  max-width: 400px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  
  /* Animaci贸n */
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.2s ease-out;
}

#sonata-cart-popup-overlay.sonata-visible #sonata-cart-popup-contenido {
  transform: scale(1);
  opacity: 1;
}

#sonata-cart-popup-cerrar {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  color: #aaa;
}
#sonata-cart-popup-cerrar:hover {
  color: #000;
}

#sonata-cart-popup-titulo {
  font-size: 20px;
  color: #333;
  margin-top: 0;
  margin-bottom: 5px;
}

/* Estilo para la descripción corta en el popup de carrito */
#sonata-cart-popup-mensaje .popup-short-desc {
    font-size: 1em; /* Mismo tamaño que el texto alrededor */
    color: #333; 
    font-weight: normal; 
    margin: 0;
    /* Esto es clave: añade un espacio después del título */
    margin-left: 0.3em; 
}

/* Estilo Específico para el Botón "View Bag" */
#sonata-cart-popup-boton {
    /* Fondo oscuro como en la imagen */
    background-color: #333333 !important; 
    color: #ffffff !important; /* Texto blanco */
    
    /* Forma y padding (simula estilo Divi) */
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    transition: background-color 0.3s;
    border: none !important; 
}

#sonata-cart-popup-boton:hover {
    background-color: #555555 !important; /* Un ligero cambio al pasar el ratón */
    color: #ffffff !important;
}

/* Ocultar el botón del popup de carrito */
#sonata-cart-popup-boton {
    display: none !important;
}

/*
 * ===================================================================
 * AUMENTAR TAMAÑO DE IMAGEN EN CARRITO Y VISIBILIDAD EN MÓVIL
 * ===================================================================
 */

/* 1. Aumentar el tamaño de la imagen del producto en el carrito */
.woocommerce-cart-form .product-thumbnail {
    /* Aumenta el contenedor de la imagen */
    width: 100px !important; 
    /* Alineación vertical para que se vea mejor */
    vertical-align: middle !important; 
}

.woocommerce-cart-form .product-thumbnail img {
    /* Asegura que la imagen ocupe el contenedor y define un mínimo */
    width: 100% !important; 
    height: auto !important;
    min-width: 80px; 
}

/* 2. Solución para MÓVIL: Forzar la visibilidad de la imagen */
@media only screen and (max-width: 767px) {
    
    /* Mostrar la columna de la imagen en móvil */
    .woocommerce-cart-form table.shop_table.cart th.product-thumbnail,
    .woocommerce-cart-form table.shop_table.cart td.product-thumbnail {
        display: table-cell !important;
        width: 80px; /* Tamaño de la imagen en móvil */
        padding-left: 0;
    }
    
    /* Asegurar que la columna del nombre también se vea bien y tome el espacio restante */
    .woocommerce-cart-form table.shop_table.cart th.product-name,
    .woocommerce-cart-form table.shop_table.cart td.product-name {
        display: table-cell !important;
        width: auto; 
    }
    
    /* Ocultar las columnas menos importantes para ahorrar espacio */
    .woocommerce-cart-form table.shop_table.cart th.product-price,
    .woocommerce-cart-form table.shop_table.cart td.product-price,
    .woocommerce-cart-form table.shop_table.cart th.product-quantity,
    .woocommerce-cart-form table.shop_table.cart td.product-quantity,
    .woocommerce-cart-form table.shop_table.cart th.product-subtotal,
    .woocommerce-cart-form table.shop_table.cart td.product-subtotal {
        /* Puedes comentar las líneas de abajo si quieres que se vean más columnas, pero puede ser muy apretado */
        /* display: none !important; */
    }
}