/*
Theme Name:   Flatsome Child
Theme URI:    https://fiorifunebrimilano.it
Description:  Fiori Funebri Milano — Florista funeraria en Milán
Author:       Flor10
Template:     flatsome
Version:      1.0.0
Text Domain:  flatsome-child
*/

/* ============================================================
   FIORI FUNEBRI MILANO — Estilos personalizados
   Prefijo de clases custom: ffm-

   Índice:
     1.  VARIABLES DE COLOR
     2.  TIPOGRAFÍA GLOBAL
     3.  ENLACES
     4.  BOTONES
     5.  HEADER Y NAVEGACIÓN
     6.  SECCIONES OSCURAS (banners hero)
     7.  SECCIONES CREMA
     8.  TARJETAS DE CATEGORÍA (Featured Boxes)
     9.  ACORDEÓN / FAQ
    10.  PÁGINA DE PRODUCTO
    11.  PÁGINA DE CATEGORÍA (cuadrícula de productos)
    12.  CARRITO Y CHECKOUT
    13.  PÁGINA 404
    14.  CARRITO VACÍO
    15.  FOOTER
    16.  UTILIDADES
    17.  RESPONSIVE — TABLET
    18.  RESPONSIVE — MÓVIL
   ============================================================ */


/* =============================================================
   1. VARIABLES DE COLOR
   Paleta principal del sitio. Se usan en todo el CSS
   para mantener coherencia visual.
   - dark / dark-secondary: azul corporativo para fondos,
     botones principales y títulos.
   - gold / gold-light: dorado sobrio para enlaces,
     botones secundarios y acentos.
   - cream: fondo suave para secciones alternadas.
   - border: línea sutil para separadores.
   ============================================================= */
:root {
    --ffm-dark:           #021fa1;
    --ffm-dark-secondary: #011470;
    --ffm-gold:           #C4A35A;
    --ffm-gold-light:     #d4b468;
    --ffm-cream:          #FAF7F4;
    --ffm-text:           #1A1A1A;
    --ffm-text-light:     #5C5C5C;
    --ffm-white:          #ffffff;
    --ffm-border:         #e5e0d8;
}


/* =============================================================
   2. TIPOGRAFÍA GLOBAL
   Tamaño base 16px con interlineado amplio (1.7) para
   mejorar la legibilidad. Los encabezados usan el azul
   corporativo y peso 600.
   ============================================================= */
body {
    color: var(--ffm-text);
    font-size: 16px;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ffm-dark);
    font-weight: 600;
    line-height: 1.3;
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.6em; margin-bottom: 15px; }
h3 { font-size: 1.25em; }


/* =============================================================
   3. ENLACES
   Color dorado con transición suave al hacer hover.
   Aporta elegancia sin ser llamativo — acorde al tono
   sobrio del sector funerario.
   ============================================================= */
a {
    color: var(--ffm-gold);
    transition: color 0.3s ease;
}
a:hover {
    color: var(--ffm-gold-light);
}


/* =============================================================
   4. BOTONES
   Tres variantes:
   - primary: fondo azul corporativo, para CTAs principales
     ("Ver Corone", "Ordina", checkout).
   - secondary: fondo dorado, para CTAs secundarios.
   - white: borde blanco transparente, para CTAs sobre
     fondos oscuros (banners hero).
   ============================================================= */
.button.primary,
button.primary,
.button.checkout,
input[type="submit"].button.primary {
    background-color: var(--ffm-dark) !important;
    border-color: var(--ffm-dark) !important;
    color: var(--ffm-white) !important;
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}
.button.primary:hover,
button.primary:hover,
input[type="submit"].button.primary:hover {
    background-color: var(--ffm-dark-secondary) !important;
    border-color: var(--ffm-dark-secondary) !important;
}

.button.secondary {
    background-color: var(--ffm-gold) !important;
    border-color: var(--ffm-gold) !important;
    color: var(--ffm-white) !important;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s ease;
}
.button.secondary:hover {
    background-color: var(--ffm-gold-light) !important;
    border-color: var(--ffm-gold-light) !important;
}

.button.white {
    background-color: transparent !important;
    border: 2px solid var(--ffm-white) !important;
    color: var(--ffm-white) !important;
    border-radius: 4px;
}
.button.white:hover {
    background-color: var(--ffm-white) !important;
    color: var(--ffm-dark) !important;
}


/* =============================================================
   5. HEADER Y NAVEGACIÓN
   Fondo blanco limpio con borde inferior sutil.
   Los enlaces del menú sin mayúsculas forzadas
   (text-transform: none) para un aspecto más elegante.
   ============================================================= */
.header-main {
    background-color: var(--ffm-dark);
    border-bottom: 0px solid var(--ffm-border);
}

.nav > li > a {
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
}

/* Cursor "default" en los ítems del menú con submenú */
.nav li.menu-item-has-children a.nav-top-link {
    cursor: default !important;
}


/* =============================================================
   6. SECCIONES OSCURAS (banners hero)
   Fuerza texto blanco en encabezados y párrafos dentro
   de las secciones con clase "dark" de Flatsome
   (shortcode [section dark="true"]).
   ============================================================= */
.section.dark h1,
.section.dark h2,
.section.dark h3 {
    color: var(--ffm-white);
}
.section.dark p {
    color: rgba(255, 255, 255, 0.9);
}


/* =============================================================
   7. SECCIONES CREMA
   Añade bordes sutiles arriba y abajo a las secciones
   con fondo crema (#FAF7F4) para separarlas visualmente
   del contenido blanco.
   ============================================================= */
.section[style*="FAF7F4"],
.section[style*="faf7f4"],
.section[style*="f9f7f4"] {
    border-top: 1px solid var(--ffm-border);
    border-bottom: 1px solid var(--ffm-border);
}


/* =============================================================
   8. TARJETAS DE CATEGORÍA (Featured Boxes)
   Usadas en la homepage para mostrar las categorías
   principales (Corone, Fiori, Composizioni).
   Efecto hover: sube 3px y añade sombra para dar
   sensación de profundidad.
   ============================================================= */
.featured-box {
    padding: 25px;
    border-radius: 6px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.featured-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Fila de iconos — tarjeta de 4 iconos (Flatsome featured_box nativos) */
.ffr-icon-row {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (max-width: 768px) {
    /* En móvil reducimos el padding interior de la tarjeta */
    .ffr-icon-row { padding: 24px !important; }
}


/* =============================================================
   9. ACORDEÓN / FAQ
   Estilo para los bloques [accordion faq_schema="true"]
   de Flatsome. Título con peso medio, interior con fondo
   crema para distinguir la respuesta de la pregunta.
   ============================================================= */
.accordion-title {
    font-weight: 500;
    font-size: 1.05em;
    padding: 15px 20px;
    border-color: var(--ffm-border);
}
.accordion-inner {
    padding: 15px 20px;
    background-color: var(--ffm-cream);
}
.accordion .toggle {
    position: static !important;
}


/* =============================================================
   10. PÁGINA DE PRODUCTO
   Estilos para la ficha de producto individual.
   ============================================================= */

/* Tamaño del código de producto (SKU) */
.sku_wrapper {
    font-size: 23px;
}

/* Ocultar badge "SALE!" — inapropiado en el sector funerario */
.woocommerce span.onsale {
    display: none !important;
}

/* Ocultar botón "Añadir al carrito" debajo de la imagen en el catálogo */
.add-to-cart-button {
    display: none !important;
}

/* Ocultar categorías y etiquetas en el meta superior del producto;
   mostrar solo en el meta inferior (debajo de las variaciones) */
div.product-gallery + div.product-summary .posted_in {
    display: none !important;
}
div.product-gallery + div.product-summary .tagged_as {
    display: none !important;
}
form.variations_form + div.product_meta .posted_in {
    display: block !important;
}
form.variations_form + div.product_meta .tagged_as {
    display: block !important;
}
form.cart + div.product_meta .posted_in {
    display: block !important;
}
form.cart + div.product_meta .tagged_as {
    display: block !important;
}

/* Botón principal "Ordina" en la ficha de producto */
.single_add_to_cart_button {
    width: 100%;
    height: 66px;
    background: var(--ffm-dark);
    color: var(--ffm-white);
    border: 0;
    border-radius: 5px !important;
    font-size: 1.5rem !important;
    text-transform: uppercase;
    font-weight: 600;
}
.single_add_to_cart_button:hover {
    background: var(--ffm-dark-secondary) !important;
}

/* Ocultar botón "Limpiar" en las variaciones del producto */
.variations_form .reset_variations {
    visibility: hidden !important;
}

/* Botón más ancho en páginas con layout personalizado */
.custom-product-page .single_variation_wrap button.single_add_to_cart_button {
    width: 97% !important;
}

/* Fila de imágenes de confianza (entrega garantizada, pago seguro) */
.ffm-trust-badges {
    margin-bottom: 1.5em !important;
    margin-top: -1.5em !important;
    text-align: center !important;
}


/* =============================================================
   11. PÁGINA DE CATEGORÍA (cuadrícula de productos)
   Estilos para la cuadrícula de productos en las
   páginas de categoría WooCommerce.
   ============================================================= */

/* Tarjetas de producto en la cuadrícula */
.product-small .box-text {
    padding: 15px;
    text-align: center;
}
.product-small .product-title {
    font-weight: 500;
}
.product-small .price {
    color: var(--ffm-dark);
    font-weight: 600;
}
.product-small .add_to_cart_button {
    background-color: var(--ffm-dark) !important;
    color: var(--ffm-white) !important;
    border-radius: 4px;
}
.product-small .add_to_cart_button:hover {
    background-color: var(--ffm-gold) !important;
}

/* SKU y metadatos en la cuadrícula de categorías */
div.product-small div.box-image + div.box-text .sku_wrapper {
    font-size: 1.3em !important;
}
div.product-small div.box-image + div.box-text .posted_in {
    display: none !important;
}
div.product-small div.box-image + div.box-text .tagged_as {
    display: none !important;
}
div.product-small div.box-image + div.box-text .product_meta {
    margin-bottom: 1% !important;
}

/* Título del producto en las páginas de categoría y tienda */
.shop-container .product-small .title-wrapper .woocommerce-loop-product__title a {
    color: var(--ffm-dark);
    font-size: 1.5em;
    font-weight: bold;
}


/* =============================================================
   12. CARRITO Y CHECKOUT
   Estilos para las páginas de carrito y checkout de
   WooCommerce: campos, términos y condiciones,
   calendario de entrega, etc.
   ============================================================= */

/* Botón "Conferma l'Ordine" — ancho completo */
#place_order {
    width: 100%;
    border-radius: 5px !important;
}

/* Ocultar campo "País" en el formulario de checkout */
#billing_country_field,
#shipping_country_field {
    display: none;
}

/* Botón y texto "Rimuovi prodotto" en el checkout */
div.removeProductContainer {
    display: inline-flex;
}
a.removeProductLink {
    margin-bottom: 0.5em;
}
span.removeProductText {
    margin-left: 0.5em;
    padding-top: 0.2em;
}

/* Nombre y precio del producto en el resumen de pedido */
.woocommerce-checkout-review-order .product-total .woocommerce-Price-amount {
    font-size: 1.5em;
}
.woocommerce-checkout-review-order .product-total .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
    font-size: 1em !important;
}
.woocommerce-checkout-review-order .product-item-thumbnail {
    margin-bottom: 1em;
}
.woocommerce-checkout-review-order .productItemName {
    display: contents;
    font-weight: bold;
}

/* Caja "Términos y condiciones" — borde verde */
.woocommerce-terms-and-conditions-wrapper .validate-required {
    margin-bottom: 1.5em;
}
.woocommerce-terms-and-conditions-wrapper p label {
    border: 2px solid #28A745 !important;
    font-size: 0.8em;
    padding-bottom: 2%;
}

/* Checkbox de términos — tamaño doble para facilitar el clic */
.woocommerce-terms-and-conditions-wrapper input[type=checkbox] {
    -ms-transform: scale(2) !important;
    -moz-transform: scale(2) !important;
    -webkit-transform: scale(2) !important;
    -o-transform: scale(2) !important;
    margin-left: 3% !important;
    margin-top: 3% !important;
    padding: 10px !important;
}

/* Texto de los términos — tamaño mayor */
.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
    font-size: 1.2em !important;
    margin-left: 3% !important;
}

/* Texto del suplemento por agencia funeraria privada
   Se muestra en el resumen del pedido cuando hay una tasa extra
   por la entrada de flores en el tanatorio */
.fee th {
    visibility: hidden !important;
}
.fee th:after {
    visibility: visible !important;
    content: "Importo addebitato dall'agenzia funebre privata per l'ingresso dei fiori:" !important;
    display: block !important;
    margin-top: -0.4em !important;
    padding-bottom: 0.5em !important;
}

/* Total de la compra en checkout */
.checkout .shipping__table tbody tr th {
    color: black !important;
    font-weight: bold !important;
}
.checkout .shipping__list_label {
    color: black !important;
    font-weight: bold !important;
    opacity: 1;
}
.checkout .shipping__list_label .woocommerce-Price-amount bdi {
    color: black !important;
    font-weight: bold !important;
}
.checkout #order_review .order-total th {
    font-size: 1.3em !important;
    width: 50%;
}
.checkout #order_review .order-total td strong .woocommerce-Price-amount {
    font-size: 1.5em;
}

/* Calendario de entrega (plugin Order Delivery Date)
   El color del header del calendario usa el azul corporativo */
#orddd_datepicker_0 .ui-datepicker {
    width: 85% !important;
}
#orddd_datepicker_0 .ui-datepicker .ui-datepicker-header {
    background-color: var(--ffm-dark) !important;
}
#orddd_datepicker_0 .ui-datepicker .ui-datepicker-buttonpane {
    display: none !important;
}
#orddd_time_slot_0_field {
    margin-top: 5%;
}
#orddd_datepicker_0 td.ui-datepicker-today {
    background-color: #f0f0c0 !important;
}

/* Centrar título en la página de carrito */
.woocommerce-cart h1 {
    text-align: center;
}

/* Centrar textos en la página de carrito vacío */
.woocommerce-notices-wrapper .woocommerce-message .message-container {
    text-align: center !important;
}
.woocommerce-notices-wrapper .woocommerce-message .cart-empty {
    text-align: center !important;
}
.woocommerce-notices-wrapper .cart-empty {
    text-align: center !important;
}


/* =============================================================
   13. PÁGINA 404
   Estilos para la página de error 404.
   ============================================================= */
.error-404 {
    margin-top: -3% !important;
}
.error-404 #divLogo404 {
    font-size: 6em;
    font-weight: bold;
    opacity: .3;
}
.error-404 #divLogo404 img {
    height: 1em;
    margin-left: 15% !important;
}
.error-404 #divTexto404 {
    margin-top: 8% !important;
}


/* =============================================================
   14. CARRITO VACÍO
   Estilos para cuando el carrito no tiene productos.
   ============================================================= */
#divContImgsCartEmpty {
    margin-top: -0.5%;
    padding-top: 0;
}
#divContImgsCartEmpty > p {
    text-align: center;
    font-variant: small-caps;
}


/* =============================================================
   15. FOOTER
   Fondo azul corporativo que cierra visualmente la página.
   Texto y enlaces en blanco semitransparente (80%),
   con hover en dorado para coherencia con la marca.
   ============================================================= */
.footer-wrapper {
    background-color: var(--ffm-dark);
}
.footer-wrapper,
.footer-wrapper p,
.footer-wrapper a {
    color: rgba(255, 255, 255, 0.8);
}
.footer-wrapper a:hover {
    color: var(--ffm-gold);
}


/* =============================================================
   16. UTILIDADES
   Clases auxiliares reutilizables.
   ============================================================= */

/* Separador decorativo dorado (60px de ancho, 3px de alto) */
.ffm-separator {
    width: 60px;
    height: 3px;
    background-color: var(--ffm-gold);
    margin: 20px auto;
}

/* Título de sección con líneas laterales decorativas */
.section-title-sep {
    display: flex;
    align-items: center;
    gap: 16px;
}
.section-title-sep::before,
.section-title-sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ffm-border);
}


/* =============================================================
   17. RESPONSIVE — TABLET (768px a 1024px)
   ============================================================= */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Botón "Ordina" — tamaño de texto en tablet */
    .cart .quantity + button {
        font-size: 1.3rem !important;
    }
}


/* =============================================================
   18. RESPONSIVE — MÓVIL (< 768px)
   ============================================================= */
@media only screen and (max-width: 767px) {

    /* --- Tipografía global móvil --- */
    h1 { font-size: 1.7em; }
    h2 { font-size: 1.3em; }

    /* --- Secciones: padding lateral reducido en móvil --- */
    .section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* --- Botones grandes: tamaño de texto reducido --- */
    .button.is-large {
        font-size: 0.9em;
        padding: 10px 20px;
    }

    /* --- Checkout: checkbox de términos vuelve a tamaño normal en móvil --- */
    .woocommerce-terms-and-conditions-wrapper input[type=checkbox] {
        -ms-transform: scale(1) !important;
        -moz-transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
        -o-transform: scale(1) !important;
        padding: 0 !important;
    }
    .woocommerce-terms-and-conditions-wrapper .form-row .checkbox {
        line-height: 1.2 !important;
        padding-left: 3% !important;
    }
    .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text {
        font-size: 1em !important;
    }
    .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
        padding-bottom: 2% !important;
    }

    /* --- Producto: centrar variaciones en móvil --- */
    .variations_form {
        text-align: center !important;
    }
    .woocommerce-variation-price {
        font-size: 1.2em;
        margin-top: 3%;
        padding-top: 5%;
    }
    .variations td:first-child {
        text-align: center;
    }
}