/**
 * mee-table Frontend Styles v3.0
 * Light theme: default accent gold #c9a96e, dark text. Accent color is
 * a CSS custom property (--meetab-accent / --meetab-accent-tint, set inline per
 * site from the "Colore principale del widget" setting) so each site can
 * match its own brand color instead of always showing gold.
 *
 * Font-family is deliberately NOT set here: it lives in the separate
 * meetab-style-font.css, enqueued only when "Usa il font e lo stile del tema
 * del sito" is off. Everything else in this file (colors, layout,
 * spacing, buttons) must always load regardless of that setting: it was
 * previously skipped entirely along with the font, which is why the
 * booking widget rendered as an unstyled list on any site with that
 * option enabled.
 */

.meetab-booking {
    /* [24/9/2026] Senza un tetto, su desktop questo blocco prende tutta la
       larghezza della pagina: la griglia del calendario (7 colonne, vedi
       .meetab-cal-grid) diventa enorme, caselle giganti col numero piccolo
       in mezzo. 480px e' lo stesso tetto gia' usato per il widget React
       gemello (BookingWidget.tsx). Sotto i 600px (media query piu' sotto)
       torna 100%: sul telefono deve riempire lo schermo. */
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
    color: #1a1a1a !important;
    /* [24/9/2026, terzo giro] SENZA QUESTO, IL BOX SBORDA DI 16px E LO
       SBORDO FINISCE TUTTO SU UN LATO SOLO. Trovato misurando su
       Playground a 375px: la riga sotto rende border-box SOLO i figli di
       .meetab-booking (".meetab-booking *"), non lui stesso. A mobile
       questo elemento ha il suo padding orizzontale (8px per lato, dalla
       media query piu' sotto): con box-sizing:content-box (il default) i
       browser sommano quel padding a width:100%, e la scatola vera e'
       larga 16px piu' del genitore. Con margin:0 auto e un solo lato che
       puo' assorbire la differenza, Chrome mette tutto il -16px sul
       margine DESTRO: bianco a sinistra normale, bianco a destra 16px in
       meno, "non centrato" a occhio. box-sizing:border-box qui fa
       coincidere width:100% con la scatola VERA (padding incluso): niente
       sbordo, niente margine negativo, i due bianchi restano sempre
       uguali qualunque padding abbia in futuro. */
    box-sizing: border-box !important;
}
.meetab-booking * { box-sizing: border-box !important; }
/* [25/9/2026] LA REGOLA CHE ANNULLAVA IL MAIUSCOLO DEL TEMA E' TRASLOCATA
   in meetab-style-font.css, che si carica solo quando il ristoratore NON ha
   spuntato «Usa il font e lo stile del tema del sito». Ordine del titolare:
   «se uno usa quel bottone, non dovrebbe ereditare anche questa opzione dal
   tema?». Si', ed e' il posto giusto: maiuscole e spaziatura sono tipografia
   come il carattere, e chi ha chiesto il tema li vuole tutti e due.
   A caselle spente non cambia niente: il file si carica come sempre. */
/* .meetab-title/.meetab-panel-title are real h2/h3 tags specifically so themes that
   style headings (font-family, weight, letter-spacing, italic: e.g. this
   theme's font-family:Eccentric on h1-h4, or another theme's italic/weight
   on its own heading rule) cascade through naturally.
   Deliberately excluded from the blanket reset above rather than set to
   `inherit` here: the `inherit` keyword takes the literal computed value
   of the immediate parent element, bypassing the CSS cascade entirely:
   it is NOT the same as "let the theme's own matching rule win". A theme
   that sets font-weight/letter-spacing/font-style on its own heading
   selector (not just font-family, as this one does) would be silently
   missed by `inherit` here, since it would read the wrapping <div>'s
   plain value instead of the heading rule. Simply having no competing
   !important declaration at all is the only way that's actually correct
   for any theme, not just the two tested tonight. */

/* HEADER */
.meetab-booking-header { text-align: center !important; margin-bottom: 2rem !important; }
.meetab-booking-header .meetab-title { font-size: 24px !important; color: #1a1a1a !important; margin: 0 0 4px !important; }
.meetab-booking-header .meetab-subtitle { font-size: 14px !important; color: #6b7280 !important; margin: 0 !important; font-weight: 400 !important; }

/* STEPS */
.meetab-steps { display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 2rem !important; gap: 0 !important; }
.meetab-step { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; color: #9ca3af !important; font-weight: 500 !important; }
.meetab-step span { width: 30px !important; height: 30px !important; border-radius: 50% !important; border: 1.5px solid #d1d5db !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 600 !important; color: #9ca3af !important; background: transparent !important; }
.meetab-step.active { color: #1a1a1a !important; }
.meetab-step.active span { background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; color: #fff !important; border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-step-line { width: 48px !important; height: 1px !important; background: #e5e7eb !important; margin: 0 10px !important; }
/* [28/9/2026] Il passo guarda il SUO box, non lo schermo. Dentro una colonna
   stretta di un sito largo le regole @media non scattano e le etichette si
   spezzavano a meta' parola ("Ospit / i"). container-type sta su .meetab-steps
   stesso: e' un blocco che prende la larghezza dal genitore, quindi non puo'
   stringere il layout del tema. Sotto 420px restano i numeri e l'etichetta del
   passo attivo, mai una parola spezzata. La soglia e' 420 e non 600: il
   widget ha gia' un tetto di 480px, a 600 le etichette sparivano sempre.
   Le quattro etichette italiane stanno in ~370px con le linee accorciate. */
.meetab-steps { container-type: inline-size !important; }
.meetab-step { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; }
@container (max-width: 420px) {
    .meetab-step:not(.active) { font-size: 0 !important; gap: 0 !important; }
    .meetab-step-line { flex: 0 1 48px !important; min-width: 12px !important; margin: 0 6px !important; }
}

/* PANEL */
.meetab-panel { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 16px !important; padding: 1.75rem !important; margin-bottom: 12px !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; }
/* [28/9/2026] Audit sulle larghezze: in un box di 280-320px dentro un sito
   largo il calendario usciva di 59px e la terza colonna degli orari di 76px.
   Le regole @media guardano lo schermo e qui non scattano. La container
   query sta sul pannello e non su .meetab-booking: il pannello prende la
   larghezza dal widget, quindi non puo' schiacciare il layout di un tema. */
.meetab-panel { container-type: inline-size !important; }
@container (max-width: 270px) {
    .meetab-panel .meetab-cal-grid { gap: 2px !important; width: 100% !important; }
    .meetab-panel .meetab-cal-grid > * { min-width: 0 !important; }
    .meetab-panel .meetab-cal-day { min-height: 0 !important; min-width: 0 !important; font-size: 12px !important; }
    .meetab-panel .meetab-cal-day-name { font-size: 11px !important; padding: 4px 0 !important; }
}
/* [28/9/2026] Ordine del titolare: il bollino sta ACCANTO all'orario e si
   legge; quando il box e' stretto il widget passa a due colonne come sul
   telefono, invece di spremere i bottoni. Un bottone con orario e bollino,
   misurato: 134px col padding normale, ~118 con quello ridotto. Con i
   bollini: sotto 460px padding ridotto, tre colonne fino a 400px, poi due
   fino a 280px, sotto una. Le griglie SENZA bollini non cambiano. */
@container (max-width: 460px) {
    .meetab-panel .meetab-slots-grid-full:has(> .meetab-slot-btn > span + span) { gap: 8px !important; }
    .meetab-panel .meetab-slots-grid-full:has(> .meetab-slot-btn > span + span) > .meetab-slot-btn { padding: 18px 8px !important; }
}
@container (max-width: 400px) {
    .meetab-panel .meetab-slots-grid-full:has(> .meetab-slot-btn > span + span) { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Senza bollini la griglia resta a tre colonne come prima; solo sotto
   270px (calendario e orari uscivano dal box, audit del 28/9) passa a due. */
@container (max-width: 270px) {
    .meetab-panel .meetab-slots-grid-full { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .meetab-panel .meetab-slot-btn { padding: 18px 8px !important; }
}
@container (max-width: 280px) {
    .meetab-panel .meetab-slots-grid-full:has(> .meetab-slot-btn > span + span) { grid-template-columns: 1fr !important; }
}
#meetab-panel-2 { padding: 1.75rem 0.5rem !important; }
.meetab-panel.hidden { display: none !important; }
.meetab-panel-title { font-size: 17px !important; color: #1a1a1a !important; margin: 0 0 1.25rem !important; }

/* GUESTS */
.meetab-guests-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin-bottom: 1.5rem !important; }
.meetab-guest-btn {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 22px 4px !important;
    text-align: center !important;
    cursor: pointer !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    background: #fff !important;
    color: #1a1a1a !important;
    transition: all .15s !important;
}
.meetab-guest-btn:hover { border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-guest-btn.selected { border: 2px solid var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--meetab-accent-tint, #fdf8f0) !important; color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-continue-btn { width: 100% !important; padding: 16px !important; background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; }
.meetab-continue-btn:hover { filter: brightness(0.88) !important; }

/* CALENDAR */
.meetab-calendar-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 1.25rem !important; font-weight: 600 !important; font-size: 16px !important; color: #1a1a1a !important; }
/* [24/9/2026] Senza queste due righe, un mese lungo in inglese ("September
   2026") andava a capo su due righe sul telefono: la riga si alzava e le
   frecce, larghe fisse, sembravano storte rispetto al testo. Una riga sola,
   sempre, e il testo centrato tra le due frecce. */
.meetab-cal-month { flex: 1 1 auto !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.meetab-cal-nav { flex-shrink: 0 !important; }
.meetab-cal-nav {
    /* Same theme-button-padding leak as .meetab-cal-day (see its comment):
       found by auditing every real <button> element after that bug, not
       yet reported broken live, but the same root cause applies here. */
    padding: 0 !important;
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1a1a1a !important;
}
.meetab-cal-nav:hover { border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-cal-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 3px !important; width: 100% !important; }
.meetab-cal-day-name { font-size: 12px !important; font-weight: 600 !important; color: #9ca3af !important; text-align: center !important; padding: 6px 0 !important; text-transform: uppercase !important; }
.meetab-cal-day {
    /* This is a real <button> element: without this reset, the theme's
       own global button padding (the same rule styling "PRENOTA UN
       TAVOLO", ~7px 38px) wins since nothing here overrode it. That forced
       each of the 7 grid columns to a ~90px content-driven minimum width
       (grid items don't shrink below content+padding by default), blowing
       the whole calendar past mobile width and producing wildly tall,
       uneven rows: found live on a real phone. */
    padding: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    color: #1a1a1a !important;
    transition: all .12s !important;
}
.meetab-cal-day:hover { background: var(--meetab-accent-tint, #fdf8f0) !important; color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-cal-day.selected { background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; color: #fff !important; font-weight: 700 !important; }
.meetab-cal-day.disabled { color: #d1d5db !important; cursor: default !important; pointer-events: none !important; }

/* SLOTS */
.meetab-slots-grid-full {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 4px !important;
    padding-top: 16px !important;
}
.meetab-slot-btn {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 18px 16px !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: visible !important;
    background: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    transition: all .12s !important;
}
.meetab-slot-btn:hover { border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--meetab-accent-tint, #fdf8f0) !important; }
.meetab-slot-btn.selected { border: 2px solid var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--meetab-accent-tint, #fdf8f0) !important; color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }

/* [28/9/2026] Ameria Pizzeria: con lo sconto l'orario usciva "17:0 / 0".
   Il bollino (secondo span creato dal JS) resta accanto all'orario, come
   pillola leggibile; orario e bollino non vanno mai a capo. Lo spazio lo
   garantiscono le colonne del pannello qui sopra, non il bottone. */
.meetab-slot-btn { white-space: nowrap !important; }
.meetab-slot-btn > span { white-space: nowrap !important; }
.meetab-slot-btn > span + span { display: inline-block !important; margin-left: 4px !important; vertical-align: middle !important; font-size: 12px !important; padding: 3px 8px !important; border-radius: 20px !important; }

/* BADGE SCONTO */
.meetab-badge {
    position: absolute !important;
    top: -10px !important;
    right: -8px !important;
    background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    z-index: 2 !important;
}

/* FORM */
.meetab-summary { background: #f9fafb !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; padding: 14px !important; margin-bottom: 1.25rem !important; font-size: 14px !important; color: #6b7280 !important; line-height: 1.6 !important; }
.meetab-form-field { margin-bottom: 1rem !important; }
.meetab-form-field label { display: block !important; font-size: 13px !important; font-weight: 500 !important; color: #6b7280 !important; margin-bottom: 6px !important; }
.meetab-form-field input, .meetab-form-field textarea { width: 100% !important; border: 1.5px solid #e5e7eb !important; border-radius: 10px !important; padding: 12px 14px !important; font-size: 15px !important; background: #fff !important; color: #1a1a1a !important; outline: none !important; font-family: inherit !important; }
.meetab-form-field input:focus, .meetab-form-field textarea:focus { border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.meetab-error { color: #ef4444 !important; font-size: 14px !important; margin-top: 8px !important; }
.meetab-confirm-title { font-size: 22px !important; font-weight: 700 !important; text-align: center !important; color: #1a1a1a !important; margin-bottom: 1rem !important; }

/* POWERED BY */
.meetab-powered { text-align: center !important; font-size: 12px !important; color: #d1d5db !important; margin-top: 1.5rem !important; }

@media (max-width: 600px) {
    .meetab-booking { padding: 1rem 8px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
    .meetab-booking-header { margin-bottom: 0.75rem !important; }
    .meetab-booking-header .meetab-title { font-size: 20px !important; }
    .meetab-panel { padding: 1.25rem 12px !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
    .meetab-slots-grid-full { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .meetab-slot-btn { padding: 18px 8px !important; font-size: 16px !important; }
    .meetab-badge { top: -14px !important; font-size: 10px !important; }
    .meetab-guests-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; width: 100% !important; }
    .meetab-guest-btn { padding: 16px 2px !important; font-size: 18px !important; }
    .meetab-step { font-size: 12px !important; }
    .meetab-step span { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .meetab-cal-grid { gap: 2px !important; width: 100% !important; }
    .meetab-calendar-header { font-size: 14px !important; gap: 6px !important; }
    /* [31/8/2026] min-width: 0 COMPLETA la correzione del commento su
       .meetab-cal-day. Li' si era tolto il padding del tema, che forzava le
       colonne a ~90px. Restava pero' che una casella di griglia non scende
       sotto il suo contenuto (min-width: auto di serie), e con
       aspect-ratio: 1 l'altezza minima diventa anche larghezza minima: sette
       celle da 32 piu' le distanze fanno 236 punti, che dentro la scheda su un
       telefono stretto non ci stanno, e la colonna della domenica finiva fuori
       dal bordo. Con min-width: 0 le celle si stringono e il quadrato lo
       decide aspect-ratio, non l'altezza minima. */
    .meetab-cal-day { min-height: 32px !important; min-width: 0 !important; font-size: 13px !important; }
    .meetab-cal-grid > * { min-width: 0 !important; }
    .meetab-cal-day-name { font-size: 11px !important; padding: 4px 0 !important; }
    .meetab-calendar-header { margin-bottom: 1rem !important; }

    /* [31/8/2026] SPAZIO SOTTO LA SCHEDA, PERCHE' LA PILLOLA NON COPRA LE
       DATE. La pillola «Prenota» e' fissa in basso a destra (48px di altezza
       piu' 16 di margine) e deve restare anche su questa pagina: due prove in
       tests/bolla.js lo pretendono, ed e' la decisione presa dopo il difetto
       di srwebdemo. Quello che si puo' fare e' non farle trovare sotto niente
       di utile: con questo spazio la scheda finisce sopra la pillola invece
       di continuare sotto, e l'ultima riga del calendario resta leggibile.
       Il titolare ha visto la pillola sopra il calendario, su un telefono,
       il 31/8/2026. */
    .meetab-panel { padding-bottom: 84px !important; }

}

/* [2026-08-06, esteso 24/9/2026] I bottoni dei locali, in colonna, larghi
   uguale, SEMPRE (non solo sotto i 600px). Prima si mandavano a capo
   restando larghi quanto il loro testo, quindi «Osteria Le Vigne» misurava
   186px e «Trattoria Pecora Nera» 222px, e ognuno si centrava nella propria
   riga: due bottoni disallineati, uno piu' corto dell'altro. Misurato a
   430px di viewport, poi visto anche su desktop (il titolare l'ha segnalato
   di nuovo il 24/9/2026): la regola era corretta solo sotto i 600px, sopra
   quei bottoni tornavano a misurarsi sul proprio testo.

   box-sizing: border-box NON E' DECORATIVO, e' la ragione per cui questa
   regola non rompe niente: quei bottoni hanno gli stili in linea nel PHP,
   con padding 16px 28px e bordo 2px, e senza border-box un width:100%
   diventerebbe 100% + 60px e sborderebbe a destra. E' la trappola gia'
   presa tre volte su questo progetto (form dating, gift card, palco
   /esperienze). Se qualcuno tocca questa regola, tenga il border-box. */
.meetab-location-btn {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 400px) {
    .meetab-slots-grid-full { grid-template-columns: repeat(2, 1fr) !important; }
    .meetab-guests-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Location selector buttons */
.meetab-location-btn:hover {
    background: var(--meetab-accent-tint, #fdf8f0) !important;
    border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    transform: translateY(-2px);
}
.meetab-location-btn.active {
    background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
}

.ui-datepicker-selected a {
    background: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-color: var(--meetab-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
}

/* ---------------------------------------------------------------------------
   Event teaser buttons (Dating Aperitivo / Cooking Class).
   Previously inline-styled only, which meant no :hover was possible: the
   button looked inert and, at 14px with a long "find out more" tail, read as
   a caption rather than something clickable. The colour lives here per
   variant so both teasers share one shape, size and interaction.
   --------------------------------------------------------------------------- */
/* [24/9/2026, secondo giro] LARGHI QUANTO IL WIDGET SOPRA, NON PIU' A
   PILLOLA STRETTA. Ordine del titolare guardando srwebdemo: le due barre
   devono essere larghe come il box di prenotazione (.meetab-booking,
   max-width:480px, vedi piu' sotto in questo file), non una pillola da
   400px. Il primo giro (400px fissi) risolveva "diversi fra loro" ma non
   "diversi dal widget sopra": qui il tetto e' lo STESSO valore del widget,
   480px, cosi' i due si allineano sempre, qualunque colonna del tema li
   contenga. width:100% + questo tetto centra da solo (text-align:center sul
   genitore, come prima) senza tornare alla barra a piena colonna del primo
   tentativo, che sforava ben oltre 480px. */
.meetab-event-teaser-btn {
    display: inline-flex;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.meetab-event-teaser-btn .meetab-teaser-emoji { font-size: 21px; line-height: 1; }
/* The arrow shifts on hover so the affordance reads even for anyone who
   cannot distinguish the two purples. */
.meetab-event-teaser-btn .meetab-teaser-arrow { transition: transform .18s ease; }
.meetab-event-teaser-btn:hover .meetab-teaser-arrow,
.meetab-event-teaser-btn:focus-visible .meetab-teaser-arrow { transform: translateX(4px); }
.meetab-event-teaser-btn:hover,
.meetab-event-teaser-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.26);
}
.meetab-event-teaser-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* [24/9/2026, secondo giro] STESSO COLORE DEL WIDGET, NON PIU' TRE TINTE
   FISSE. Ordine del titolare: "non lo so se e' giusto che siano colorati in
   maniera diversa". I tre --cooking/--dating/--menu erano tre esadecimali
   scelti a caso, indipendenti da --meetab-accent: su un sito con un colore
   scelto (o indovinato dal tema) i teaser restavano viola/rosso/marrone
   comunque, stonati col resto. filter:brightness() sull'hover funziona con
   QUALSIASI colore, quindi non serve un secondo esadecimale scritto a mano
   per ogni variante come prima. */
.meetab-event-teaser-btn--cooking,
.meetab-event-teaser-btn--dating,
.meetab-event-teaser-btn--menu {
    background: var(--meetab-accent, #7c3aed);
}
.meetab-event-teaser-btn--cooking:hover,
.meetab-event-teaser-btn--cooking:focus-visible,
.meetab-event-teaser-btn--dating:hover,
.meetab-event-teaser-btn--dating:focus-visible,
.meetab-event-teaser-btn--menu:hover,
.meetab-event-teaser-btn--menu:focus-visible {
    filter: brightness(0.85);
}

@media (prefers-reduced-motion: reduce) {
    .meetab-event-teaser-btn,
    .meetab-event-teaser-btn .meetab-teaser-arrow { transition: none; }
    .meetab-event-teaser-btn:hover { transform: none; }
}

/* ==========================================================================
   [29/8/2026] LA PILLOLA DI PRENOTAZIONE (public/js/meetab-bolla.js).
   Prima queste regole erano un document.createElement('style') scritto dal
   JS a runtime: e' la categoria esatta per cui wordpress.org ha gia'
   rimandato indietro il plugin quattro volte (CSS iniettato fuori da
   wp_enqueue_style). Adesso e' un foglio vero, caricato da accoda_colore()
   in public/class-meetab-public.php cosi' come prima veniva eseguito lo
   script: su ogni pagina dove compare la pillola, anche senza il modulo.
   Nessun valore qui e' dinamico: il colore scelto dal ristoratore non passa
   da questo file, arriva via style.setProperty('--meetab-chat-accent', ...)
   direttamente sull'elemento, in meetab-bolla.js.
   ========================================================================== */
#meetab-bolla{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2147482900;display:flex;align-items:stretch;gap:0;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.22);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;max-width:240px;}
/* [9/9/2026] Quando in basso a destra c'e' gia' un bottone WhatsApp di un
   altro plugin, meetab-bolla.js aggiunge questa classe: la pillola si
   sposta nell'angolo opposto invece di restare sovrapposta. */
#meetab-bolla.meetab-b-sx{right:auto;left:calc(20px + env(safe-area-inset-left,0px));}
/* [4/9/2026] La seconda riga della pallina, il tavolo, quando in pagina c'e'
   gia' un'esperienza: stessa forma ma piu' quieta, perche' li' la cosa che
   l'ospite sta guardando e' il corso. */
#meetab-bolla a.meetab-b-tavolo{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;background:#fff;color:inherit;border:1px solid rgba(0,0,0,0.15);border-radius:999px;font-size:13px;text-decoration:none;margin-top:6px;}
#meetab-bolla a.meetab-b-tavolo:hover{background:#f6f7f7;}
#meetab-bolla:has(a.meetab-b-tavolo){display:flex;flex-direction:column;align-items:stretch;background:transparent;box-shadow:none;}
#meetab-bolla a.meetab-b-prenota{display:flex;align-items:center;min-height:48px;padding:0 22px;background:var(--meetab-chat-accent,#c9a96e);color:#fff;text-decoration:none;font-size:15px;font-weight:600;border-radius:999px;white-space:nowrap;}
#meetab-bolla.meetab-b-doppia a.meetab-b-prenota{border-radius:999px 0 0 999px;padding-right:16px;}
#meetab-bolla button.meetab-b-chat{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;border:0;cursor:pointer;border-radius:0 999px 999px 0;background:var(--meetab-chat-accent,#c9a96e);color:#fff;border-left:1px solid rgba(255,255,255,.35);}
#meetab-bolla a.meetab-b-prenota:focus-visible,#meetab-bolla button.meetab-b-chat:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px;}
@media print{#meetab-bolla{display:none;}}

/* ==========================================================================
   [29/8/2026] L'ASSISTENTE PER GLI OSPITI (public/js/meetab-assistente.js).
   Stessa storia della pillola qui sopra: era un document.createElement('style')
   nel JS, adesso e' qui. Anche qui nessun valore dinamico: il colore arriva
   via style.setProperty('--meetab-chat-accent', ...) sul contenitore, in
   meetab-assistente.js, non da questo foglio.
   ========================================================================== */
#meetab-assistente{position:fixed;right:20px;bottom:20px;z-index:2147483000;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;color:#1f2328;direction:ltr;text-align:left;}
#meetab-assistente *{box-sizing:border-box;margin:0;padding:0;font-family:inherit;}

/* La pallina. */
#meetab-assistente .meetab-a-pallina{display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  background:var(--meetab-chat-accent,#c9a96e);color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.12);
  transition:transform .18s ease,box-shadow .18s ease;margin-left:auto;}
#meetab-assistente .meetab-a-pallina:hover{transform:scale(1.06);box-shadow:0 8px 22px rgba(0,0,0,.22);}
#meetab-assistente .meetab-a-pallina:focus-visible{outline:3px solid var(--meetab-chat-accent,#c9a96e);outline-offset:3px;}

/* Il pannello. */
#meetab-assistente .meetab-a-pannello{display:none;flex-direction:column;width:360px;height:480px;
  max-height:calc(100vh - 120px);margin-bottom:14px;overflow:hidden;
  background:#fff;border-radius:16px;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
  opacity:0;transform:translateY(8px) scale(.98);
  transition:opacity .18s ease,transform .18s ease;}
#meetab-assistente.meetab-a-aperto .meetab-a-pannello{display:flex;opacity:1;transform:none;}

/* Testata. */
#meetab-assistente .meetab-a-testata{display:flex;align-items:center;gap:10px;padding:14px 16px;
  background:var(--meetab-chat-accent,#c9a96e);color:#fff;flex:0 0 auto;}
#meetab-assistente .meetab-a-nome{font-weight:600;font-size:15px;color:#fff;}
#meetab-assistente .meetab-a-stato{font-size:12px;opacity:.85;color:#fff;}
#meetab-assistente .meetab-a-chiudi{margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;}
#meetab-assistente .meetab-a-chiudi:hover{background:rgba(255,255,255,.28);}

/* Conversazione. */
#meetab-assistente .meetab-assistente-conversazione{flex:1 1 auto;overflow-y:auto;padding:16px;
  background:#f7f7f8;display:flex;flex-direction:column;gap:10px;}
#meetab-assistente .meetab-a-bolla{max-width:82%;padding:10px 13px;font-size:14.5px;
  border-radius:16px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}
#meetab-assistente .meetab-a-locale{align-self:flex-start;background:#fff;color:#1f2328;
  border:1px solid rgba(0,0,0,.06);border-bottom-left-radius:5px;}
#meetab-assistente .meetab-a-ospite{align-self:flex-end;background:var(--meetab-chat-accent,#c9a96e);color:#fff;
  border-bottom-right-radius:5px;}

/* I tre puntini mentre pensa. */
#meetab-assistente .meetab-a-puntini{display:inline-flex;gap:4px;align-items:center;height:9px;}
#meetab-assistente .meetab-a-puntini i{width:7px;height:7px;border-radius:50%;background:#b9bcc2;
  animation:meetab-a-salta 1.3s infinite ease-in-out;}
#meetab-assistente .meetab-a-puntini i:nth-child(2){animation-delay:.16s;}
#meetab-assistente .meetab-a-puntini i:nth-child(3){animation-delay:.32s;}
@keyframes meetab-a-salta{0%,60%,100%{opacity:.35;transform:translateY(0);}30%{opacity:1;transform:translateY(-4px);}}

/* Riga di scrittura. */
#meetab-assistente .meetab-assistente-modulo{display:flex;gap:8px;align-items:center;
  padding:12px;background:#fff;border-top:1px solid rgba(0,0,0,.07);flex:0 0 auto;}
#meetab-assistente .meetab-assistente-campo{flex:1 1 auto;min-width:0;height:42px;padding:0 14px;
  font-size:15px;color:#1f2328;background:#f2f3f5;border:1px solid transparent;
  border-radius:21px;outline:none;box-shadow:none;}
#meetab-assistente .meetab-assistente-campo:focus{background:#fff;border-color:var(--meetab-chat-accent,#c9a96e);}
#meetab-assistente .meetab-assistente-campo::placeholder{color:#8b9099;opacity:1;}
#meetab-assistente .meetab-assistente-invia{display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 42px;border:0;border-radius:50%;cursor:pointer;
  background:var(--meetab-chat-accent,#c9a96e);color:#fff;transition:opacity .15s ease;}
#meetab-assistente .meetab-assistente-invia[disabled]{opacity:.45;cursor:default;}

/* Il bottone «prenota» sotto la risposta. */
#meetab-assistente .meetab-a-prenota{align-self:flex-start;margin:-2px 0 2px;padding:9px 15px;
  border:0;border-radius:20px;cursor:pointer;font-size:14px;font-weight:600;
  background:var(--meetab-chat-accent,#c9a96e);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.12);}
#meetab-assistente .meetab-a-prenota:hover{filter:brightness(1.06);}

/* La riga dell'AI Act. */
#meetab-assistente .meetab-assistente-nota{padding:0 14px 11px;background:#fff;
  font-size:11px;line-height:1.45;color:#8b9099;text-align:center;flex:0 0 auto;}

/* Sul telefono il pannello prende la larghezza, ma non tutto lo schermo. */
@media (max-width:480px){
  #meetab-assistente{right:14px;bottom:14px;left:14px;}
  #meetab-assistente .meetab-a-pannello{width:auto;height:70vh;}
}
@media (prefers-reduced-motion:reduce){
  #meetab-assistente .meetab-a-pallina,#meetab-assistente .meetab-a-pannello{transition:none;}
  #meetab-assistente .meetab-a-puntini i{animation:none;}
}

/* [23/9/2026] Il testo della descrizione dei menu speciali, dentro il
   widget, arriva gia' nero (color:#111 scritto in JS), ma alcuni temi
   (pagine costruite con un page builder) mettono un grigio piu' chiaro
   sugli elenchi puntati con una regola piu' specifica della nostra, che
   vince sullo stile in linea. Qui si forza il nero con !important, solo
   dentro il nostro widget, cosi' non tocca il resto del tema. */
.meetab-booking-widget ul li,
.meetab-booking-widget p{color:#111 !important;}
.meetab-booking-widget strong{color:#111 !important;font-weight:700;}

/* [2/10/2026] Dark reading text. The light greys (#9ca3af, #666, #c0c0c0) fail the 4.5:1 contrast of WCAG AA.
   Reading text inside the widget is near black; the inactive step labels keep their grey. */
.meetab-booking-widget [style*="#9ca3af"],
.meetab-booking-widget [style*="#6b7280"],
.meetab-booking-widget [style*="#666"],
.meetab-booking-widget [style*="#c0c0c0"],
.meetab-giftcard [style*="#9ca3af"],
.meetab-giftcard [style*="#6b7280"],
.meetab-giftcard [style*="#666"],
.meetab-giftcard [style*="#c0c0c0"],
.meetab-booking [style*="#9ca3af"],
.meetab-booking [style*="#6b7280"],
.meetab-booking [style*="#666"],
.meetab-booking [style*="#c0c0c0"],
.meetab-booking .meetab-cal-day-name,
.meetab-powered,
.meetab-powered a { color: #1a1a1a !important; }