/* Importiamo un font corsivo/calligrafico da Google Fonts per la parola finale */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

/* =========================================================
   ASSET.CSS - TEMA "CLASSIC PAPER" (Menu + Welcome + Loader)
   ========================================================= */

:root {
    /* Palette Colori: Sfondo crema e testi neri */
    --bg-color: #f6f3ec !important; /* Colore crema/panna dello sfondo cartaceo */
    --text-main: #000000 !important; /* Nero assoluto per massimizzare il contrasto */
    --text-muted: #111111 !important; /* Nero quasi assoluto anche per le descrizioni */
    --accent-menu: #000000 !important; /* Forza i dettagli di accento al nero */
    --line-color: #000000 !important; /* Linee e bordi in nero puro */
    
    /* Font: Forziamo un font Serif classico ovunque */
    --font-heading: 'Times New Roman', 'Playfair Display', 'Cormorant Garamond', serif !important;
    --font-body: 'Times New Roman', 'Playfair Display', 'Cormorant Garamond', serif !important;
}

/* =========================================================
   1. IMPOSTAZIONI GLOBALI
   ========================================================= */

body {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
}

.info-row:hover {
    border-bottom: none !important;
}

/* Rimuoviamo linee separatrici o elementi non presenti nel menu cartaceo */
.elegant-separator, 
.menu-cover-container::before {
    display: none !important;
}

/* =========================================================
   2. CATEGORIE (es. LA FRIGGITORIA homemade)
   ========================================================= */

.category-section-title {
    background-color: transparent !important;
    color: var(--text-main) !important;
    font-family: var(--font-heading) !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    text-transform: none !important; 
    letter-spacing: 0.5px !important;
    border: none !important; 
    margin: 50px 0 25px 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important; /* Fondamentale per allineare il testo normale e il corsivo */
    flex-wrap: wrap; /* Utile se il titolo è molto lungo sui dispositivi mobili */
}

/* Stile per l'ultima parola della categoria (es. "homemade") */
.category-script {
    font-family: 'Dancing Script', cursive !important;
    text-transform: lowercase !important; /* Forza il minuscolo per un effetto più naturale */
    font-size: 2.5rem !important; /* Leggermente più grande per bilanciare le proporzioni */
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin-left: 10px; /* Spazio tra la parola Serif e quella Script */
    color: var(--text-main) !important;
}

/* =========================================================
   3. STILE DEI PIATTI / PRODOTTI
   ========================================================= */

.dish-row {
    border-bottom: none !important; /* Rimosse le linee tra i piatti come in foto */
    padding: 12px 0 !important;
    align-items: flex-start !important;
}

/* Nome del piatto (es. IL CROCCHETTONE) */
.dish-name {
    font-family: var(--font-heading) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important; /* Grassetto visibile */
    color: var(--text-main) !important;
    text-transform: uppercase !important; /* Tutto maiuscolo come in foto */
    letter-spacing: 0px !important;
}

/* Descrizione / Ingredienti */
.dish-desc {
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    color: var(--text-main) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* Allergeni (In corsivo e più piccoli) */
.dish-allergeni {
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-style: italic !important;
    color: var(--text-main) !important;
    margin-top: 2px !important;
}
.dish-allergeni span {
    text-transform: none !important;
    font-weight: normal !important;
}

/* Prezzi (es. €10,00) */
.dish-price {
    font-family: var(--font-heading) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important; /* Grassetto */
    color: var(--text-main) !important;
    margin-top: -2px !important; /* Allineamento ottico col nome del piatto */
}

/* =========================================================
   4. ELEMENTI DI INTERFACCIA E MENU
   ========================================================= */

/* Navbar Categorie in alto */
.category-nav {
    background: var(--bg-color) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
.category-nav a {
    color: var(--text-muted) !important;
    font-family: var(--font-heading) !important;
    text-transform: none !important;
    font-size: 1.1rem !important;
}
.category-nav a.active {
    color: var(--text-main) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--text-main) !important; 
}

/* Pulsanti "Aggiungi/Seleziona" resi squadrati, neri e minimali */
.click-to-select-tag {
    border: 1px solid var(--text-main) !important;
    color: var(--text-main) !important;
    font-family: var(--font-heading) !important;
    border-radius: 0 !important; 
    background: transparent !important;
    padding: 3px 12px !important;
}
.dish-row.selected {
    background-color: rgba(0,0,0,0.04) !important;
}
.dish-row.selected .click-to-select-tag {
    background-color: var(--text-main) !important;
    color: var(--bg-color) !important;
}

.chat-bubble { font-size: 1rem !important; }
.selection-prompt { font-size: 1rem !important; }

/* Stile bottoni menù extra a fondo pagina */
.extra-menus-footer .category-section-title {
    background-color: transparent !important;
    border: 1px solid var(--text-main) !important;
    color: var(--text-main) !important;
    border-radius: 0 !important;
}
.extra-menus-footer .category-section-title img {
    filter: invert(100%) grayscale(100%) brightness(0) !important;
}

.bg-modal-piatti, .bg-modal-vino, .bg-modal-birra, .bg-modal-drink {
    background-image: none !important;
    background-color: var(--bg-color) !important;
}


/* =========================================================
   5. STILI PAGINA BENVENUTO (Welcome Header & Bottoni)
   ========================================================= */

/* Header Benvenuto */
.welcome-header {
    text-align: center;
    margin-bottom: 50px;
}
.welcome-logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 20px;
}

/* Titoli Pagina Welcome */
.cover-text-top { 
    font-family: var(--font-heading) !important; 
    color: var(--text-main) !important;
    font-size: 2.8rem !important; 
    font-weight: 400 !important;
    text-transform: none !important;
    margin-bottom: 5px !important; 
    line-height: 1.1 !important;
}
.cover-text-bottom { 
    font-family: 'Dancing Script', cursive !important; 
    font-size: 1.8rem !important; 
    font-weight: 700 !important;
    text-transform: capitalize !important; 
    letter-spacing: 1px !important; 
    color: var(--text-main) !important; 
}

/* Bottoni Navigazione (Es. Menu Piatti, Carta Vini) */
.btn-nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    width: 100% !important;
    height: 70px !important;
    padding: 0 20px !important;
    margin-bottom: 15px !important;
    background-color: transparent !important;
    border: 1px solid var(--text-main) !important;
    border-radius: 0 !important; /* Spigoli netti */
    text-decoration: none !important;
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--text-main) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}
.btn-nav-menu:hover, .btn-nav-menu:active {
    background-color: rgba(0,0,0,0.05) !important;
    transform: none !important;
    box-shadow: none !important;
}
.btn-nav-menu img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    display: block !important;
    filter: invert(100%) grayscale(100%) brightness(0) !important; /* Icone nere */
}
.icon-menu{
	width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
    display: block !important;
    filter: invert(100%) grayscale(100%) brightness(0) !important; /* Icone nere */
}
.btn-nav-menu .icon-menu {
    font-size: 1.5rem !important;
    line-height: 1 !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Bottone Speciale "Chiedi un consiglio" (Invertito) */
.btn-consiglio {
    background-color: var(--text-main) !important;
    color: var(--bg-color) !important;
}
.btn-consiglio:hover, .btn-consiglio:active {
    background-color: #333333 !important;
}
.btn-consiglio .icon-menu, .btn-consiglio img { 
    filter: brightness(0) invert(1) !important; 
}


/* =========================================================
   6. MODALE CHAT (Stile Cartaceo, Squadrato, B/N)
   ========================================================= */

#chatBody {
    background: var(--bg-color) !important; 
    font-family: var(--font-body) !important;
}
.modal-content { 
    border-radius: 0 !important; /* Rimuove arrotondamenti base */
    border: 1px solid var(--text-main) !important; 
    box-shadow: 10px 10px 0px rgba(0,0,0,0.1) !important; /* Ombra netta offset */
    background: var(--bg-color) !important;
}
.modal-header-custom {
    background: var(--bg-color) !important; 
    border-bottom: 1px solid var(--text-main) !important;
}

.modal-logo{
	height: 80px !important;
}

.floating-home-btn{
	margin-top: 2% !important;
}

/* Fumetti Chat Squadrati */
.chat-bubble-msg { 
    border-radius: 0 !important; 
    font-family: var(--font-body) !important;
}
.chat-bubble-msg.bot { 
    background: transparent !important; 
    border: 1px solid var(--text-main) !important;
    color: var(--text-main) !important; 
}
.chat-bubble-msg.user { 
    background: var(--text-main) !important; 
    color: var(--bg-color) !important; 
}

/* Per i fumetti generati da chat generica nel menu (inline styles override) */
#chatBody > div[style*="background: #eee"] {
    background: transparent !important; 
    border: 1px solid var(--text-main) !important;
    color: var(--text-main) !important;
    border-radius: 0 !important; 
    font-family: var(--font-body) !important;
}
#chatBody > div[style*="background: var(--accent)"] {
    background: var(--text-main) !important; 
    color: var(--bg-color) !important; 
    border-radius: 0 !important; 
    font-family: var(--font-body) !important;
}

/* Indicatore di scrittura */
.typing-indicator { 
    background: transparent !important; 
    border: 1px solid var(--text-main) !important; 
    border-radius: 0 !important; 
}
.typing-indicator span { 
    background: var(--text-main) !important; 
    border-radius: 0 !important; 
}

/* Chips Suggerimenti */
.chat-suggestion-btn { 
    background: transparent !important; 
    color: var(--text-main) !important; 
    border: 1px solid var(--text-main) !important; 
    font-family: var(--font-heading) !important; 
    font-weight: 700 !important; 
    font-size: 0.9rem !important; 
    border-radius: 0 !important; 
    text-transform: uppercase !important;
}
.chat-suggestion-btn:hover { 
    background: var(--text-main) !important; 
    color: var(--bg-color) !important; 
}

/* Input Chat e Footer */
.form-control { 
    border-radius: 0 !important; 
    box-shadow: none !important; 
    border: 1px solid var(--text-main) !important; 
    background: transparent !important;
    font-family: var(--font-body) !important; 
    color: var(--text-main) !important;
}
.form-control:focus {
    border-color: var(--text-main) !important;
}
.modal-footer {
    background: var(--bg-color) !important;
    border-top: none !important;
}

/* Bottone di Invio Manuale */
#btnSendManual {
    border-radius: 0 !important;
    background: var(--text-main) !important;
    color: var(--bg-color) !important;
    border: 1px solid var(--text-main) !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
}


/* =========================================================
   7. STILI LOADER
   ========================================================= */

#vinai-elegant-loader {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color) !important; /* Si abbina esattamente allo sfondo carta */
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; 
    z-index: 99999;
    /* Transizione di uscita morbida */
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

/* Logo dinamico del locale */
#top-logo-locale-loader {
    height: 60px; 
    width: auto;
    max-width: 250px; 
    margin-bottom: 20px;       
    display: block;        
    animation: fadeInLocale 1s ease-out;
}

@keyframes fadeInLocale {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.vinai-loader-logo {
    width: 140px; 
    height: auto;
    animation: elegantPulse 2.5s ease-in-out infinite;
}

.vinai-loader-text {
    margin-top: 30px;
    color: var(--text-main) !important; 
    font-family: var(--font-heading) !important;
    font-size: 0.9rem !important; 
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700 !important;
    animation: elegantFade 2.5s ease-in-out infinite;
}

@keyframes elegantPulse {
    0% { transform: scale(0.98); opacity: 0.8; }
    50% { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(0.98); opacity: 0.8; }
}

@keyframes elegantFade {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* Classi applicate via JS per far sparire il loader */
.loader-hidden { 
    opacity: 0 !important; 
    visibility: hidden !important; 
}

/* Prepara il contenitore principale per l'entrata morbida */
#main-content { 
    opacity: 0; 
    transition: opacity 1.2s ease-in; 
	padding-bottom: 20px;
}
.content-visible { 
    opacity: 1 !important; 
}