/* Estilos para el Frontend de Ñercadona */

/* Aplicamos las fuentes personalizadas */
.nercadona-shop-wrapper {
    font-family: 'Cinzel', serif;
    background-color: #f5eadd;
    background-image: url('https://www.transparenttextures.com/patterns/cracks.png');
    padding: 2rem 1rem;
}

.nercadona-shop-wrapper h1,
.nercadona-shop-wrapper h2,
.nercadona-shop-wrapper h3,
.nercadona-shop-wrapper h4,
.nercadona-shop-wrapper h5,
.nercadona-shop-wrapper h6,
.nercadona-shop-wrapper .font-title {
    font-family: 'MedievalSharp', cursive;
    letter-spacing: 1px;
}

/* Estilo para simular un botón de madera/metal */
.nercadona-shop-wrapper .btn-fantasy {
    font-family: 'Cinzel', serif;
    background-color: #855b32;
    color: #f5eadd;
    border: 2px solid #4a311a;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 -2px 3px rgba(0,0,0,0.1);
}

.nercadona-shop-wrapper .btn-fantasy:hover {
    background-color: #a16e3f;
    border-color: #5e3c20;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25), inset 0 -2px 3px rgba(0,0,0,0.1);
}

.nercadona-shop-wrapper .btn-fantasy:active {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), inset 0 -2px 3px rgba(0,0,0,0.1);
}

/* Estilo para los contenedores (pergamino) */
.nercadona-shop-wrapper .parchment-bg {
    background-color: #fcf8e8;
    border: 4px solid #c7a77b;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Estilo para el modal */
#nercadona-checkout-modal {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Estilo para el área de texto del pedido */
#nercadona-order-summary {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f5eadd;
    border: 2px dashed #855b32;
    color: #333;
}

/* Corrección para botones de filtro activos */
.nercadona-shop-wrapper .btn-fantasy.active {
    background-color: #5e3c20;
    border-color: #311a0b;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    transform: translateY(1px);
}

/* Estilos para las tarjetas de productos */
.nercadona-shop-wrapper .product-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.nercadona-shop-wrapper .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}