/* =========================================================
   ASSET.CSS - TEMA "OCEAN ELEGANCE" (Ristorante di Pesce)
   ========================================================= */

/* Importiamo i font da Google Fonts: Playfair (Titoli), Montserrat (Corpo testuale), Cormorant Garamond (Accenti eleganti non corsivi) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;1,400;1,600&family=Montserrat:wght@300;400;500&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
    /* Palette Colori: Sfondo perla, testi blu navy profondo, accenti oro champagne */
    --bg-color: #f5efe7d1 !important; /* Bianco perla luminosissimo */
    --text-main: #0B2545 !important; /* Blu Oceano scuro/Navy per alto contrasto ed eleganza (Adattato da #2C2C2C per rispettare il "Navy") */
    --text-muted: #4A5B6D !important; /* Blu lavagna/grigio per le descrizioni */
    --accent-menu: #3f3f40 !important; /* Oro scuro/Grigio antracite per accenti di lusso */
    --line-color: #C5A880 !important; /* Linee e bordi in oro champagne */
    --wine-red: #5b1d28;
    /* Variabile ponte per il PHP: allineiamo l'accent di default al color champagne */
    --accent: #C5A880 !important;
    --accent-light: rgba(197, 168, 128, 0.08) !important;
    
    /* Font: Titoli importanti, corpo testo moderno, accenti puliti ed eleganti */
    --font-heading: 'Cormorant Garamond', serif !important;
    --font-body: 'Montserrat', sans-serif !important;
    --font-accent: 'Cormorant Garamond', serif !important;
}

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

body {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
}

/* Rimuoviamo o ammorbidiamo elementi non necessari */
.menu-cover-container::before {
    display: none !important;
}

/* =========================================================
   2. CATEGORIE E ACCORDION (Food & Vini)
   ========================================================= */

.category-section-title {
    background-color: transparent !important;
    color: var(--text-main) !important;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 400;
	padding-top: 25px !important; 
    padding-bottom: 25px !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: none !important; 
    margin: 60px 0 30px 0 !important;
    padding: 0 15px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important; 
    flex-wrap: wrap; 
}

/* Fix per gli header della carta vini che fungono da accordion */
.accordion-header.category-section-title {
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(197, 168, 128, 0.3) !important;
    padding-bottom: 15px !important;
}

/* Stile per l'ultima parola della categoria (elegante, non corsiva) */
.category-script {
    font-family: var(--font-accent) !important;
    font-style: italic !important; 
    text-transform: none !important; 
    font-size: 2.4rem !important; 
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    margin-left: 12px; 
    color: var(--accent-menu) !important;
    transform: translateY(-2px);
}

/* Formati e Provenienze (Carta Vini) */
.formato-container {
    background: transparent !important;
    border-left: none !important;
}

.formato-header {
    color: var(--text-muted) !important;
    font-family: var(--font-body) !important;
    letter-spacing: 2px !important;
}

.formato-header::before, .formato-header::after {
    background-color: var(--line-color) !important;
}

.provenienza-header {
    font-family: var(--font-heading) !important;
    font-size: 1.4rem !important;
    font-style: italic !important;
    color: var(--accent-menu) !important;
    border: none !important;
    border-bottom: 1px dashed rgba(197, 168, 128, 0.4) !important;
    background: transparent !important;
}

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

.dish-row {
    border-bottom: 1px solid rgba(197, 168, 128, 0.2) !important; /* Linea divisoria oro molto leggera */
    padding: 18px 5px !important;
    align-items: flex-start !important;
    background-color: transparent !important;
}

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

/* Nome del piatto o vino */
.dish-name {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    text-transform: none !important; 
    letter-spacing: 0.5px !important;
}

/* Descrizione / Ingredienti / Info Vino */
.dish-desc, .wine-info {
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    font-weight: 300 !important;
    color: var(--text-muted) !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

/* Allergeni */
.dish-allergeni {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-style: italic !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
    opacity: 0.8;
}
.dish-allergeni span {
    text-transform: none !important;
    font-weight: 300 !important;
}

/* Prezzi (es. €18,00) */
.dish-price, .wine-price, .drink-price {
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    font-weight: 300 !important; 
    color: var(--accent-menu) !important; 
    margin-top: -2px !important; 
}

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

/* Navbar Categorie in alto */
.category-nav {
    background: rgba(250, 250, 248, 0.95) !important; /* var(--bg-color) con opacità */
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(11, 37, 69, 0.1) !important;
}
.category-nav a {
    color: var(--text-muted) !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 0.9rem !important;
}
.category-nav a.active {
    color: var(--text-main) !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--line-color) !important;
}

/* Pulsanti "Aggiungi/Seleziona" resi delicati e stondati */
.click-to-select-tag {
    border: 1px solid var(--line-color) !important;
    color: var(--line-color) !important;
    font-family: var(--font-body) !important;
    font-weight: 300 !important;
    border-radius: 20px !important; 
    background: transparent !important;
    padding: 4px 16px !important;
    transition: all 0.3s ease !important;
}

.dish-row.selected {
    background-color: var(--accent-light) !important; 
    border-radius: 8px !important;
    border-bottom: 1px solid transparent !important;
}

.dish-row.selected .click-to-select-tag {
    background-color: var(--line-color) !important;
    color: var(--bg-color) !important;
}

/* Floating Actions e Moduli di Selezione */
.selection-prompt { 
    background: rgba(250, 250, 248, 0.95) !important;
    border: 1px solid var(--line-color) !important;
    color: var(--text-main) !important;
    font-size: 0.95rem !important; 
    box-shadow: 0 10px 30px rgba(11, 37, 69, 0.1) !important;
}

.selection-active-wrapper {
    background: var(--bg-color) !important;
    border: 1px solid rgba(11, 37, 69, 0.1) !important;
    box-shadow: 0 15px 35px rgba(11, 37, 69, 0.15) !important;
}

.matching-btn {
    background-color: var(--text-main) !important;
    color: var(--bg-color) !important;
    border: 1px solid var(--text-main) !important;
}
.matching-btn:hover {
    background-color: var(--accent-menu) !important;
    border-color: var(--accent-menu) !important;
}

/* Stile bottoni menù extra a fondo pagina */
.extra-menus-footer .category-section-title {
    background-color: transparent !important;
    border: 1px solid var(--line-color) !important;
    color: var(--text-main) !important;
    border-radius: 4px !important;
	padding-top: 15px !important; 
    padding-bottom: 15px !important;
    font-size: 1.2rem !important;
    margin: 15px 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)
   ========================================================= */

.pre-title {
    color: var(--text-muted) !important;
    font-family: var(--font-body) !important;
}
.pre-title::after {
    background-color: var(--line-color) !important;
}

.cover-text-top { 
    font-family: var(--font-heading) !important; 
    color: var(--text-main) !important;
    font-size: 2.6rem !important; 
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 5px !important; 
    line-height: 1.2 !important;
}

.cover-text-bottom { 
    font-family: var(--font-accent) !important; 
    font-style: italic !important;
    font-size: 2rem !important; 
    font-weight: 400 !important;
    text-transform: none !important; 
    letter-spacing: 1.5px !important; 
    color: var(--line-color) !important; 
}

/* =========================================================
   6. MODALE CHAT E BUBBLE (Navy/Gold)
   ========================================================= */

#chatBody {
    background: var(--bg-color) !important; 
    font-family: var(--font-body) !important;
}
.modal-content { 
    border-radius: 12px !important; 
    border: none !important; 
    box-shadow: 0px 20px 40px rgba(11, 37, 69, 0.1) !important; 
    background: white !important;
}
.modal-header-custom {
    border-bottom: 1px solid rgba(197, 168, 128, 0.3) !important;
}

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

/* Fumetti Chat Esterni (VinAI Aiuto) */
.chat-bubble { 
    font-size: 0.95rem !important; 
	background-color: rgba(250, 250, 248, 0.95) !important;
    border: 1px solid var(--line-color) !important;
    color: var(--text-main) !important;
    box-shadow: 0 5px 15px rgba(11, 37, 69, 0.1) !important;
}

/* Chat Messaggi Interni */
#chatBody div[style*="align-self: flex-start"] {
    background: #F0F4F8 !important; 
    border: 1px solid transparent !important;
    color: var(--text-main) !important; 
    border-radius: 18px 18px 18px 4px !important;
    font-weight: 400 !important;
}

#chatBody div[style*="align-self: flex-end"] {
    background: var(--text-main) !important; 
    color: #FFFFFF !important; 
    border-radius: 18px 18px 4px 18px !important;
    box-shadow: 0 4px 10px rgba(11, 37, 69, 0.15) !important;
    font-weight: 300 !important;
}

/* Indicatore di scrittura */
.typing-indicator { 
    background: #F0F4F8 !important; 
    border: none !important; 
    border-radius: 18px !important; 
}
.typing-indicator span { 
    background: var(--line-color) !important; 
}

/* Chips Suggerimenti */
.chat-suggestion-btn { 
    background: transparent !important; 
    color: var(--text-main) !important; 
    border: 1px solid rgba(11, 37, 69, 0.2) !important; 
    font-family: var(--font-body) !important; 
    font-weight: 500 !important; 
    font-size: 0.85rem !important; 
    border-radius: 20px !important; 
    text-transform: none !important;
}
.chat-suggestion-btn:hover { 
    background: var(--text-main) !important; 
    color: #FFFFFF !important; 
    border-color: var(--text-main) !important;
}

/* Input Chat e Footer */
.form-control { 
    border-radius: 20px !important; 
    box-shadow: none !important; 
    border: 1px solid rgba(11, 37, 69, 0.2) !important; 
    background: #FFFFFF !important;
    font-family: var(--font-body) !important; 
    color: var(--text-main) !important;
    padding: 10px 15px !important;
}
.form-control:focus {
    border-color: var(--line-color) !important;
}
.modal-footer {
    background: var(--bg-color) !important;
    border-top: none !important;
    padding: 15px 20px !important;
}

/* Bottone di Invio Manuale */
#btnSendManual {
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: var(--text-main) !important;
    color: #FFFFFF !important;
    border: none !important;
    margin-left: 10px !important;
}

/* =========================================================
   STILE SEPARATORE ELEGANTE (Ocean Elegance)
   ========================================================= */

.elegant-separator {
    display: flex !important; 
    align-items: center;
    justify-content: center;
    margin: 40px auto 20px auto !important;
    width: 80%;
    max-width: 400px;
    color: var(--line-color) !important; 
    font-size: 1.5rem;
}

.elegant-separator::before,
.elegant-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--line-color) !important; 
    margin: 0 20px; 
    opacity: 0.6;
}

.elegant-separator span {
    display: inline-block;
    transform: translateY(-2px); 
    animation: gentlePulse 3s infinite ease-in-out; 
}

@keyframes gentlePulse {
    0% { transform: scale(1) translateY(-2px); opacity: 0.8; }
    50% { transform: scale(1.1) translateY(-2px); opacity: 1; }
    100% { transform: scale(1) translateY(-2px); opacity: 0.8; }
}

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

#vinai-elegant-loader {
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #006090 !important; /* Blu Oceano / Navy per coprire lo schermo */
    display: flex; flex-direction: column;
    justify-content: center; align-items: center; 
    z-index: 99999;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}

#top-logo-locale-loader {
    height: 100px; 
    width: auto;
    max-width: 450px; 
    margin-bottom: 25px;        
    display: block;        
    animation: fadeInLocale 1.5s ease-out;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08)); 
}

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

.vinai-loader-logo {
    width: 120px; 
    height: auto;
    animation: gentleFloat 3s ease-in-out infinite; 
}

.vinai-loader-text {
    margin-top: 35px;
    color: var(--bg-color) !important; 
    font-family: var(--font-heading) !important;
    font-size: 0.85rem !important; 
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 600 !important;
    animation: elegantFade 3s ease-in-out infinite;
}

@keyframes gentleFloat {
    0% { transform: translateY(0px); opacity: 0.9; }
    50% { transform: translateY(-8px); opacity: 1; }
    100% { transform: translateY(0px); opacity: 0.9; }
}

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

.loader-hidden { 
    opacity: 0 !important; 
    visibility: hidden !important; 
}

#main-content { 
    opacity: 0; 
    transition: opacity 1.5s ease-in; 
}
.content-visible { 
    opacity: 1 !important; 
}

.cover-text-bottom{
	display: none;
}

.category-nav{
	background-color: #f5efe7d1 !important;
}

#chatBody, .modal-footer{
	background-color: white !important;
}