/**
 * mee-table Frontend Styles v3.0
 * Light theme — default accent gold #c9a96e, dark text. Accent color is
 * a CSS custom property (--mt-accent / --mt-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
 * mt-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.
 */

.mt-booking {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
    color: #1a1a1a !important;
}
.mt-booking * { box-sizing: border-box !important; }
.mt-booking *:not(.mt-title):not(.mt-panel-title) { text-transform: none !important; letter-spacing: normal !important; }
/* .mt-title/.mt-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 */
.mt-booking-header { text-align: center !important; margin-bottom: 2rem !important; }
.mt-booking-header .mt-title { font-size: 24px !important; color: #1a1a1a !important; margin: 0 0 4px !important; }
.mt-booking-header .mt-subtitle { font-size: 14px !important; color: #6b7280 !important; margin: 0 !important; font-weight: 400 !important; }

/* STEPS */
.mt-steps { display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 2rem !important; gap: 0 !important; }
.mt-step { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; color: #9ca3af !important; font-weight: 500 !important; }
.mt-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; }
.mt-step.active { color: #1a1a1a !important; }
.mt-step.active span { background: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; color: #fff !important; border-color: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.mt-step-line { width: 48px !important; height: 1px !important; background: #e5e7eb !important; margin: 0 10px !important; }

/* PANEL */
.mt-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; }
#mt-panel-2 { padding: 1.75rem 0.5rem !important; }
.mt-panel.hidden { display: none !important; }
.mt-panel-title { font-size: 17px !important; color: #1a1a1a !important; margin: 0 0 1.25rem !important; }

/* GUESTS */
.mt-guests-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; margin-bottom: 1.5rem !important; }
.mt-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;
}
.mt-guest-btn:hover { border-color: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.mt-guest-btn.selected { border: 2px solid var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--mt-accent-tint, #fdf8f0) !important; color: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.mt-continue-btn { width: 100% !important; padding: 16px !important; background: var(--mt-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; }
.mt-continue-btn:hover { background: #b8946a !important; }

/* CALENDAR */
.mt-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; }
.mt-cal-nav {
    /* Same theme-button-padding leak as .mt-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;
}
.mt-cal-nav:hover { border-color: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.mt-cal-grid { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 3px !important; width: 100% !important; }
.mt-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; }
.mt-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;
}
.mt-cal-day:hover { background: var(--mt-accent-tint, #fdf8f0) !important; color: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.mt-cal-day.selected { background: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; color: #fff !important; font-weight: 700 !important; }
.mt-cal-day.disabled { color: #d1d5db !important; cursor: default !important; pointer-events: none !important; }

/* SLOTS */
.mt-slots-grid-full {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 4px !important;
    padding-top: 16px !important;
}
.mt-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;
}
.mt-slot-btn:hover { border-color: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--mt-accent-tint, #fdf8f0) !important; }
.mt-slot-btn.selected { border: 2px solid var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; background: var(--mt-accent-tint, #fdf8f0) !important; color: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }

/* BADGE SCONTO */
.mt-badge {
    position: absolute !important;
    top: -10px !important;
    right: -8px !important;
    background: var(--mt-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 */
.mt-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; }
.mt-form-field { margin-bottom: 1rem !important; }
.mt-form-field label { display: block !important; font-size: 13px !important; font-weight: 500 !important; color: #6b7280 !important; margin-bottom: 6px !important; }
.mt-form-field input, .mt-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; }
.mt-form-field input:focus, .mt-form-field textarea:focus { border-color: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important; }
.mt-error { color: #ef4444 !important; font-size: 14px !important; margin-top: 8px !important; }
.mt-confirm-title { font-size: 22px !important; font-weight: 700 !important; text-align: center !important; color: #1a1a1a !important; margin-bottom: 1rem !important; }

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

@media (max-width: 600px) {
    .mt-booking { padding: 1rem 8px !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
    .mt-booking-header { margin-bottom: 0.75rem !important; }
    .mt-booking-header .mt-title { font-size: 20px !important; }
    .mt-panel { padding: 1.25rem 12px !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
    .mt-slots-grid-full { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .mt-slot-btn { padding: 18px 8px !important; font-size: 16px !important; }
    .mt-badge { top: -14px !important; font-size: 10px !important; }
    .mt-guests-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; width: 100% !important; }
    .mt-guest-btn { padding: 16px 2px !important; font-size: 18px !important; }
    .mt-step { font-size: 12px !important; }
    .mt-step span { width: 28px !important; height: 28px !important; font-size: 12px !important; }
    .mt-cal-grid { gap: 2px !important; width: 100% !important; }
    .mt-cal-day { min-height: 32px !important; font-size: 13px !important; }
    .mt-cal-day-name { font-size: 11px !important; padding: 4px 0 !important; }
    .mt-calendar-header { margin-bottom: 1rem !important; }

    /* [2026-08-06] I bottoni dei locali, in colonna, larghi uguale.
       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.

       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. */
    .mt-location-btn {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

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

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

.ui-datepicker-selected a {
    background: var(--mt-accent, var(--wp--preset--color--primary, #c9a96e)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-color: var(--mt-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.
   --------------------------------------------------------------------------- */
.mt-event-teaser-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mt-event-teaser-btn .mt-teaser-emoji { font-size: 19px; line-height: 1; }
/* The arrow shifts on hover so the affordance reads even for anyone who
   cannot distinguish the two purples. */
.mt-event-teaser-btn .mt-teaser-arrow { transition: transform .18s ease; }
.mt-event-teaser-btn:hover .mt-teaser-arrow,
.mt-event-teaser-btn:focus-visible .mt-teaser-arrow { transform: translateX(4px); }
.mt-event-teaser-btn:hover,
.mt-event-teaser-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.26);
}
.mt-event-teaser-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mt-event-teaser-btn--cooking { background: #7c3aed; }
.mt-event-teaser-btn--cooking:hover,
.mt-event-teaser-btn--cooking:focus-visible { background: #5b21b6; }

.mt-event-teaser-btn--dating { background: #dc2626; }
.mt-event-teaser-btn--dating:hover,
.mt-event-teaser-btn--dating:focus-visible { background: #991b1b; }

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