/* ==========================================================================
   STILI GLOBALI MAKI
   Mantengono il visual attuale: font, colori, pulsanti, animazioni.
   Tailwind viene comunque caricato via CDN in ogni pagina.
   ========================================================================== */

/* Font di base */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #2B2B2B; /* maki-soft-black */
    background-color: #F2E9D8; /* maki-nude (fallback) */
    padding-top: 50px !important;
}

html, body, main, header, footer, #header-placeholder, #footer-placeholder {
    width: 100%;
}
/* NUOVA REGOLA: Padding specifico per Mobile */
@media only screen and (max-width: 768px) {
    body {
        padding-top: 70px !important; /* 50px base + 20px extra richiesti */
    }

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* --------------------------------------------------------------------------
   BOTTONI LINGUA (manteniamo lo stile, anche se per ora è tutto in IT)
   -------------------------------------------------------------------------- */


/* Se usi il badge invisibile v3 (quello fluttuante) */
.grecaptcha-badge {display:none;
}

.lang-btn {
    padding: 4px 8px;
    border-radius: 9999px; /* rounded-full */
    transition: all 0.2s ease;
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
}

.lang-btn-mobile {
    padding: 8px 12px;
    border-radius: 9999px;
    transition: all 0.2s ease;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
}

.lang-btn.active,
.lang-btn-mobile.active {
    background-color: #F7C85F; /* maki-yellow */
    font-weight: 700;
    color: #2B2B2B; /* maki-soft-black */
}

.lang-btn:not(.active),
.lang-btn-mobile:not(.active) {
    color: rgba(43, 43, 43, 0.6); /* maki-soft-black/60 */
    font-weight: 500; /* font-medium */
}

.lang-btn:not(.active):hover,
.lang-btn-mobile:not(.active):hover {
    background-color: rgba(201, 166, 122, 0.2); /* maki-brown/20 */
}

/* --------------------------------------------------------------------------
   HEADER / NAV / BADGE CARRELLO
   -------------------------------------------------------------------------- */

/* Evita che lo sticky header faccia “salti” */
.header-shadow {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

/* Badge numero articoli in carrello (in alto a destra sull’icona) */
.cart-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background-color: #F7C85F; /* maki-yellow */
    color: #2B2B2B;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Link del menu desktop */
.nav-link {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Effetto underline soft su hover */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.25rem;
    width: 0;
    height: 2px;
    border-radius: 9999px;
    background-color: #C9A67A; /* maki-brown */
    transition: width 0.18s ease-out;
}

.nav-link:hover::after {
    width: 100%;
}

/* Pulsante "Cianfrusaglie" nel menu */
.nav-cta {
    border-radius: 9999px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------------------------
   MOBILE MENU
   -------------------------------------------------------------------------- */

.mobile-menu-enter {
    opacity: 0;
    transform: translateY(-10px);
}

.mobile-menu-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.mobile-menu-exit {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-exit-active {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.16s ease-in, transform 0.16s ease-in;
}

/* --------------------------------------------------------------------------
   ANIMAZIONI SCROLL: .fade-in-up
   -------------------------------------------------------------------------- */

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1),
        transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: opacity, transform;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* --- MODIFICA: Disabilita animazione su mobile --- */
@media (max-width: 768px) {
    .fade-in-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/* --------------------------------------------------------------------------
   CARD / BOX / TAG CHE RICORRONO NEL SITO
   -------------------------------------------------------------------------- */

.maki-card {
    border-radius: 1.25rem; /* simile a rounded-3xl */
    background-color: #FDF7EA;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.6);
}

.maki-card-soft {
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.05);
}

/* Pill/tag per categorie o etichette */
.maki-pill {
    padding: 0.1rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background-color: rgba(247, 200, 95, 0.16); /* maki-yellow/16 */
    color: #2B2B2B;
}

/* Tag versione “negativa” */
.maki-pill-dark {
    background-color: #2B2B2B;
    color: #F2E9D8;
}

/* --------------------------------------------------------------------------
   SEZIONI HERO / BLOB SFONDI / MINI DECORAZIONI
   -------------------------------------------------------------------------- */

/* Blob decorativi dietro le illustrazioni */
.hero-blob {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(247, 200, 95, 0.45), transparent 55%),
                radial-gradient(circle at 80% 100%, rgba(168, 230, 226, 0.48), transparent 55%);
    filter: blur(12px);
    opacity: 0.9;
    pointer-events: none;
}

/* Cerchio di highlight tipo “badge” a lato testo */
.maki-highlight-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.25rem 0.8rem;
    border: 1px solid rgba(201, 166, 122, 0.6); /* maki-brown */
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   SHOP: CARD PRODOTTO, LISTE, CARRELLO
   -------------------------------------------------------------------------- */

/* Card prodotto nel grid del negozio */
.shop-product-card {
    border-radius: 1.25rem;
    background-color: #FDF7EA;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.shop-product-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.10);
}

/* Immagini prodotto */
.shop-product-image {
    border-radius: 1rem;
    background-color: #F2E9D8;
    object-fit: cover;
}

/* Prezzo */
.shop-product-price {
    font-weight: 700;
    font-size: 1.05rem;
}

/* Pulsanti “aggiungi al carrello” */
.shop-add-to-cart {
    border-radius: 9999px;
    font-weight: 600;
}

/* Riga singolo prodotto nel carrello */
.cart-item-row {
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

/* Input quantità nel carrello */
.cart-qty-input {
    width: 3.2rem;
    text-align: center;
    border-radius: 9999px;
    border: 1px solid rgba(201, 166, 122, 0.7);
    padding: 0.25rem 0.35rem;
    font-size: 0.85rem;
}

/* Pulsante rimozione */
.cart-remove-btn {
    font-size: 0.8rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Totale carrello */
.cart-total-box {
    border-radius: 1.5rem;
    background-color: #2B2B2B;
    color: #F2E9D8;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   FORM (login, registrazione, checkout)
   -------------------------------------------------------------------------- */

.form-card {
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.08);
}

.form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(43, 43, 43, 0.85);
}

.form-input {
    border-radius: 9999px;
    border: 1px solid rgba(201, 166, 122, 0.7); /* maki-brown */
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    outline: none;
    background-color: rgba(255, 255, 255, 0.9);
    transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}

.form-input:focus {
    border-color: #F7C85F;
    box-shadow: 0 0 0 1px rgba(247, 200, 95, 0.4), 0 0 0 4px rgba(247, 200, 95, 0.1);
    background-color: #FFFFFF;
}

/* Messaggi di errore */
.form-error {
    font-size: 0.8rem;
    color: #B91C1C; /* rosso */
}

/* Link secondari (es. “Hai già un account?”) */
.form-secondary-link {
    font-size: 0.85rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Pulsantoni di submit (login/registrazione/checkout) */
.form-submit-btn {
    border-radius: 9999px;
    font-weight: 600;
}

/* Social login fake button */
.form-social-btn {
    border-radius: 9999px;
    border: 1px solid rgba(201, 166, 122, 0.6);
    background-color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   CAROSELLO (se usato in home / shop)
   -------------------------------------------------------------------------- */

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer-link {
    font-size: 0.85rem;
    color: rgba(43, 43, 43, 0.7);
    transition: color 0.16s ease-out;
}

.footer-link:hover {
    color: #2B2B2B;
}

/* Piccola riga di divisione quasi invisibile */
.footer-divider {
    border-top: 1px solid rgba(43, 43, 43, 0.05);
}

/* --------------------------------------------------------------------------
   UTILITÀ MINORI
   -------------------------------------------------------------------------- */

/* Per testi micro (es. disclaimer checkout) */
.text-xxs {
    font-size: 0.7rem;
    line-height: 1rem;
}

/* Nasconde elementi che verranno gestiti da JS in base allo stato login */
[data-auth-only="true"] {
    display: none;
}

/* Per elementi mostrati solo se NON loggato (JS andrà a modificarli) */
[data-guest-only="true"] {
    display: inline-flex;
}}