/*
 Theme Name:   Lorenzago Child Theme (colibri)
 Description:  Tema Child personalizzato per Colibri WP
 Author:       Tommaso Tremonti
 Template:     colibri-wp
 Version:      3.1.4
*/

html {
    scroll-behavior: smooth;
}

/* Variabili Globali Brand */
:root,
.tribe-common,
.tribe-events {
    --tec-color-accent-primary: #62ad75 !important;
    --tec-color-accent-primary-hover: #4f9660 !important;
    --tec-color-accent-primary-active: #4f9660 !important;
    --tec-color-accent-primary-background: #f0fdf4 !important;
}

/* ==========================================================================
   1. PULIZIA ELEMENTI ALTI NON DESIDERATI
   ========================================================================== */
.tribe-events-header__content-title,
.tribe-events-header__title,
.tribe-events-c-top-bar__nav,
.tribe-events-c-top-bar__today-button,
.tribe-events-c-events-bar__views,
.tribe-events-c-view-selector,
.tribe-events-c-events-bar--border::after {
    display: none !important;
}

.tribe-events-c-events-bar--border {
    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================================
   2. BOX UNICO: HEADER E TOP BAR (PROSSIMI EVENTI + CATEGORIE)
   ========================================================================== */
.tribe-events .tribe-events-header {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    margin-bottom: 25px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    display: block !important; /* FIX CRUCIALE: Sovrascrive il flex nativo e sblocca il layout */
}

.custom-top-bar-layout {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding-top: 20px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.tribe-events-c-top-bar__datepicker {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
}

.tribe-events-c-top-bar__datepicker-button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 0 12px !important;
    height: 44px !important;
    line-height: 44px !important;
    border-radius: 12px !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: none !important;
    box-sizing: border-box !important;
}

.tribe-events-c-top-bar__datepicker-button:hover {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #dcfce7 !important;
}

.tribe-events-c-top-bar__datepicker-button svg,
.tribe-events-c-top-bar__datepicker-button path,
.tribe-events-c-top-bar__datepicker-button-icon-svg,
.tribe-events-c-top-bar__datepicker-button-icon-svg path {
    fill: #1e293b !important;
    stroke: #1e293b !important;
    color: #1e293b !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    transition: transform 0.25s ease !important;
}

.tribe-events-c-top-bar__datepicker-button:hover svg,
.tribe-events-c-top-bar__datepicker-button:hover path,
.tribe-events-c-top-bar__datepicker-button:hover .tribe-events-c-top-bar__datepicker-button-icon-svg,
.tribe-events-c-top-bar__datepicker-button:hover .tribe-events-c-top-bar__datepicker-button-icon-svg path {
    fill: #15803d !important;
    stroke: #15803d !important;
    color: #15803d !important;
    transition: transform 0.25s ease !important;
}

.tribe-events-c-top-bar__datepicker-button[aria-expanded="true"] .tribe-events-c-top-bar__datepicker-button-icon-svg,
.tribe-events-c-top-bar__datepicker.is-open .tribe-events-c-top-bar__datepicker-button-icon-svg {
    transform: rotate(180deg) !important;
    fill: #15803d !important;
    stroke: #15803d !important;
}

.tribe-events-c-top-bar__datepicker-button[aria-expanded="true"] path,
.tribe-events-c-top-bar__datepicker.is-open .tribe-events-c-top-bar__datepicker-button path {
    fill: #15803d !important;
    stroke: #15803d !important;
}

.custom-top-bar-category-select {
    flex: 0 1 250px !important;
    position: relative !important;
}

.custom-dropdown-container {
    position: relative !important;
}

.custom-dropdown-btn {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    width: 100% !important;
    height: 44px !important;
    cursor: pointer !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.custom-dropdown-btn:hover {
    border-color: #62ad75 !important;
    background-color: #f8fafc !important;
}

.custom-dropdown-container.is-open .custom-dropdown-btn {
    border-color: #62ad75 !important;
    box-shadow: 0 0 0 3px rgba(98, 173, 117, 0.15) !important;
}

.custom-dropdown-btn-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
    flex: 1 !important;
}

.custom-dropdown-btn-arrow {
    color: #64748b !important;
    transition: transform 0.25s ease, color 0.2s ease !important;
    flex-shrink: 0 !important;
}

.custom-dropdown-container.is-open .custom-dropdown-btn-arrow {
    transform: rotate(180deg) !important;
    color: #62ad75 !important;
}

/* Pannello Menu a Discesa */
.custom-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 250px !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    padding: 8px !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) scale(0.98) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    max-height: 320px !important;
    overflow-y: auto !important;
}

.custom-dropdown-container.is-open .custom-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* Voci del Menu */
.custom-dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    color: #334155 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    gap: 8px !important;
}

.custom-dropdown-item:hover {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
}

.custom-dropdown-item.is-active {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    font-weight: 700 !important;
}

.custom-dropdown-check {
    stroke: #62ad75 !important;
    flex-shrink: 0 !important;
}

.custom-dropdown-divider {
    height: 1px !important;
    background-color: #f1f5f9 !important;
    margin: 6px 4px !important;
}

/* Scrollbar personalizzata per il menu */
.custom-dropdown-menu::-webkit-scrollbar {
    width: 6px !important;
}

.custom-dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important;
    border-radius: 10px !important;
}

.custom-dropdown-menu::-webkit-scrollbar-track {
    background: transparent !important;
}

/* --- FIX MOBILE PER HEADER E TOP BAR --- */
@media (max-width: 768px) {
    .tribe-events .tribe-events-header {
        padding: 16px !important; /* Margini interni compatti ed equilibrati */
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 14px !important;
    }
    
    .custom-top-bar-layout {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-top: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid #f1f5f9 !important;
    }
    
    .tribe-events-c-top-bar__datepicker-button {
        font-size: 1.15rem !important;
    }

    .custom-top-bar-category-select {
        width: 100% !important;
        flex: 1 1 auto !important;
    }

    .custom-dropdown-btn {
        height: 44px !important;
        font-size: 0.92rem !important;
    }

    .custom-dropdown-menu {
        min-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}


/* ==========================================================================
   3. BARRA DI RICERCA SUPERIORE (Interna al box unico)
   ========================================================================== */
.tribe-events-c-events-bar {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: block !important;
}

.custom-search-container-fix {
    display: block !important;
    position: relative !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.tribe-events-c-events-bar__search {
    display: block !important;
}

/* Nasconde icone native della ricerca */
.tribe-events-c-events-bar__search-button,
.tribe-events-c-search__input-control-icon-svg {
    display: none !important;
}

.tribe-events-c-events-bar__search-form {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Azzera padding/margini nativi che spostavano l'input a destra */
.tribe-events-c-search__input-group,
.tribe-events-c-search__input-control {
    flex-grow: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tribe-events-c-search__input {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    height: 48px !important;
    line-height: 48px !important;
    box-sizing: border-box !important;
}

.tribe-events-c-search__input:focus {
    border-color: #62ad75 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(98, 173, 117, 0.15) !important;
}

.tribe-events-c-search__button {
    background-color: #62ad75 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 0 30px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    margin: 0 !important;
    box-shadow: 0 2px 6px rgba(98, 173, 117, 0.2) !important;
}

.tribe-events-c-search__button:hover {
    background-color: #4f9660 !important;
    box-shadow: 0 4px 12px rgba(98, 173, 117, 0.35) !important;
}

/* --- FIX MOBILE PER LA BARRA DI RICERCA (INLINE E COMPATTA) --- */
@media (max-width: 768px) {
    .tribe-events-c-events-bar__search-form {
        display: flex !important;
        flex-direction: row !important; /* Dispone campo di testo e pulsante CERCA affiancati */
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .tribe-events-c-search__input-group,
    .tribe-events-c-search__input-control {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .tribe-events-c-search__input {
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 14px !important;
        font-size: 0.92rem !important;
        border-radius: 10px !important;
    }

    .tribe-events-c-search__button {
        flex: 0 0 auto !important;
        width: auto !important;
        height: 44px !important;
        padding: 0 18px !important;
        font-size: 0.85rem !important;
        border-radius: 10px !important;
    }
}


/* ==========================================================================
   4. LAYOUT A GRIGLIA PER GLI EVENTI
   ========================================================================== */
.tribe-common .tribe-events-calendar-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 25px !important;
    padding: 0 !important;
}

.custom-grid-item-container,
.custom-grid-item-container:focus,
.custom-grid-item-container:active,
.custom-grid-item-container:focus-within {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    list-style: none !important;
    display: block !important;
}

/* ==========================================================================
   4.1 ULTIMI EVENTI PASSATI (QUANDO NON CI SONO EVENTI FUTURI)
   ========================================================================== */
.tribe-events-calendar-latest-past {
    width: 100% !important;
}

.custom-latest-past-heading-wrapper {
    background-color: #62ad75 !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 30px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    margin: 0 0 25px 0 !important;
}

.custom-latest-past-heading {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Messaggio di avviso semplice e pulito con icona SVG (perfettamente centrato) */
.tribe-events .tribe-events-c-messages,
.tribe-events .custom-notice-wrapper,
.custom-notice-wrapper {
    margin: 0 auto 30px auto !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}

.tribe-events .custom-notice-item,
.custom-notice-item {
    margin: 0 auto !important;
    display: inline-flex !important;
    width: auto !important;
    max-width: fit-content !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px 22px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 30px !important;
    color: #475569 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03) !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.custom-notice-svg {
    stroke: #62ad75 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.custom-notice-text {
    display: inline-block !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.custom-notice-item a {
    color: #3b82f6 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}


/* ==========================================================================
   5. FASCIA DEL MESE (BARRA VERDE CON CONTEGGIO)
   ========================================================================== */
.tribe-events-calendar-list__month-separator,
li:has(.tribe-events-calendar-list__month-separator) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: block !important;
    margin: 40px 0 20px 0 !important; /* Spazio fisso sopra le barre successive */
    background: none !important;
    border: none !important;
}

/* Evita lo spazio doppio rimuovendo il margine solo dalla prima barra in alto */
.tribe-common .tribe-events-calendar-list > li:first-child .tribe-events-calendar-list__month-separator,
.tribe-common .tribe-events-calendar-list > li:first-child:has(.tribe-events-calendar-list__month-separator) {
    margin-top: 0 !important;
}

.tribe-events-calendar-list__month-separator {
    background-color: #62ad75 !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 30px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    gap: 20px !important;
}

.tribe-events-calendar-list__month-separator::after,
.tribe-events-calendar-list__month-separator::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
}

.tribe-events-calendar-list__month-separator h3 {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 1 auto !important;
    border: none !important;
}

.tribe-events-calendar-list__month-separator-text {
    color: #ffffff !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.custom-month-events-count {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    opacity: 0.9 !important;
}


/* ==========================================================================
   6. DESIGN DELLE CARD EVENTO INTERAMENTE CLICCABILI
   ========================================================================== */
.custom-event-card-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    outline: none !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.custom-event-card-link:focus,
.custom-event-card-link:active,
.custom-event-card-link:focus-visible,
.custom-event-card-link:visited,
.custom-event-card-link:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.custom-event-card {
    position: relative !important;
    height: 300px !important;
    border-radius: 20px !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #1e1e1e !important;
    display: block !important;
    overflow: hidden !important;
    outline: none !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.custom-event-card:focus,
.custom-event-card:active,
.custom-event-card:focus-visible {
    outline: none !important;
    border: none !important;
}

.custom-event-card-link:hover .custom-event-card,
.custom-event-card-link:focus .custom-event-card,
.custom-event-card-link:active .custom-event-card,
.custom-event-card-link:focus-visible .custom-event-card {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important;
}


/* ==========================================================================
   7. CONTENUTO DELLE CARD (TITOLO E METADATI)
   ========================================================================== */
.custom-card-details {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 20px !important;
    z-index: 2 !important;
    text-align: left !important;
}

.custom-card-details .tribe-events-calendar-list__event-title {
    margin: 0 0 6px 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    display: block !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.custom-card-meta {
    font-size: 0.85rem !important;
    opacity: 0.95 !important;
    color: #ffffff !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 5px !important;
}


/* ==========================================================================
   8. LUOGO (CON ICONA PIN) E ORARIO
   ========================================================================== */
.custom-grid-venue-name {
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 500 !important;
}

.custom-grid-venue-name::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 4px !important;
    background-color: #ffffff !important;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/></svg>") !important;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/></svg>") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
}

.custom-grid-time {
    color: #ffffff !important;
    font-weight: 400 !important;
}


/* ==========================================================================
   9. BOLLINO DELLA DATA (VERDE)
   ========================================================================== */
.custom-card-badge-wrapper {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 3 !important;
}

.custom-card-badge-wrapper .tribe-events-calendar-list__event-date-tag,
.custom-card-badge-wrapper .custom-card-badge {
    background-color: #62ad75 !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    width: auto !important;
    min-width: 55px !important;
    text-align: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.custom-card-badge-wrapper .tribe-events-calendar-list__event-date-tag-weekday,
.custom-card-badge-wrapper .custom-card-badge-weekday {
    font-size: 0.75rem !important;
    text-transform: lowercase !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.custom-card-badge-wrapper .tribe-events-calendar-list__event-date-tag-daynum,
.custom-card-badge-wrapper .custom-card-badge-daynum {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: block !important;
    line-height: 1 !important;
}


/* ==========================================================================
   10. NAVIGAZIONE INFERIORE E BOTTONE CALENDARIO
   ========================================================================== */
.tribe-events-c-nav {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 40px !important; /* Distanza costante dalla griglia eventi sopra */
    margin-bottom: 40px !important; /* Distanza dal bottone di iscrizione sotto */
}

.tribe-events-c-nav__prev,
.tribe-events-c-nav__next {
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

/* Stile per i bottoni attivi (Cliccabili) */
.tribe-events-c-nav__prev:not([disabled]),
.tribe-events-c-nav__next:not([disabled]),
a.tribe-events-c-nav__prev,
a.tribe-events-c-nav__next {
    background-color: #62ad75 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(98, 173, 117, 0.25) !important;
    cursor: pointer !important;
}

.tribe-events-c-nav__prev:not([disabled]) .tribe-events-c-nav__prev-label,
.tribe-events-c-nav__next:not([disabled]) .tribe-events-c-nav__next-label,
a.tribe-events-c-nav__prev span,
a.tribe-events-c-nav__next span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.tribe-events-c-nav__prev:not([disabled]) .tribe-events-c-nav__prev-icon-svg,
.tribe-events-c-nav__next:not([disabled]) .tribe-events-c-nav__next-icon-svg,
.tribe-events-c-nav__prev:not([disabled]) svg,
.tribe-events-c-nav__next:not([disabled]) svg,
.tribe-events-c-nav__prev:not([disabled]) path,
.tribe-events-c-nav__next:not([disabled]) path,
a.tribe-events-c-nav__prev svg,
a.tribe-events-c-nav__next svg,
a.tribe-events-c-nav__prev path,
a.tribe-events-c-nav__next path {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
}

.tribe-events-c-nav__prev:not([disabled]):hover,
.tribe-events-c-nav__next:not([disabled]):hover,
a.tribe-events-c-nav__prev:hover,
a.tribe-events-c-nav__next:hover {
    background-color: #4f9660 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(98, 173, 117, 0.38) !important;
}

/* Stile per i bottoni inattivi (Grigio chiaro, non cliccabili) */
.tribe-events-c-nav__prev[disabled],
.tribe-events-c-nav__next[disabled] {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

.tribe-events-c-nav__prev[disabled] .tribe-events-c-nav__prev-label,
.tribe-events-c-nav__next[disabled] .tribe-events-c-nav__next-label {
    color: #94a3b8 !important;
}

.tribe-events-c-nav__prev[disabled] .tribe-events-c-nav__prev-icon-svg,
.tribe-events-c-nav__next[disabled] .tribe-events-c-nav__next-icon-svg,
.tribe-events-c-nav__prev[disabled] path,
.tribe-events-c-nav__next[disabled] path {
    fill: #94a3b8 !important;
    stroke: #94a3b8 !important;
    width: 14px !important;
    height: 14px !important;
}


/* ==========================================================================
   11. PAGINA SINGOLO EVENTO PERSONALIZZATA
   ========================================================================== */
.custom-single-event-layout {
    max-width: 1200px !important;
    margin: 0 auto 60px auto !important;
    padding: 0 20px !important;
    text-align: left !important; /* Forza l'allineamento a sinistra su tutto il layout */
}

.custom-single-featured-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 550px !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    margin-bottom: 50px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}

.custom-single-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 50px !important;
}

.custom-single-main-content {
    flex: 1 1 60% !important;
}

.custom-single-sidebar {
    flex: 1 1 30% !important;
    min-width: 320px !important;
}

.custom-single-section-title {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    text-align: left !important; /* Blocca il titolo a sinistra */
}

.tribe-events-single-event-description {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
    color: #475569 !important;
    text-align: left !important;
}

.custom-single-box {
    background-color: #f8fafc !important;
    border-radius: 16px !important;
    padding: 35px !important;
    margin-bottom: 30px !important;
    border: 1px solid #f1f5f9 !important;
    text-align: left !important; /* Blocca i testi nel box a sinistra */
}

.custom-single-box-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-align: left !important; /* Blocca il titolo del box a sinistra */
}

.custom-detail-item {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important; /* Impedisce che le icone si centrino */
    gap: 12px !important;
    margin-bottom: 16px !important;
    font-size: 0.95rem !important;
    color: #475569 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.custom-detail-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
    color: #64748b !important;
}

.custom-detail-icon svg {
    width: 18px !important;
    height: 18px !important;
}

.custom-detail-text a,
.custom-organizer-website {
    color: #3b82f6 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.custom-detail-text a:hover,
.custom-organizer-website:hover {
    color: #2563eb !important;
}

.custom-tax-group {
    margin-top: 25px !important;
}

.custom-tax-label {
    display: block !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}

.custom-tax-bubbles {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.custom-tax-bubble {
    display: inline-flex !important;
    background-color: #eff6ff !important; 
    color: #3b82f6 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: 1px solid #dbeafe !important;
    transition: all 0.2s ease !important;
}

.custom-tax-bubble:hover {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* Stili Profilo Organizzatore */
.custom-organizer-profile {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 15px !important;
}

.custom-organizer-image-wrapper {
    flex-shrink: 0 !important;
}

.custom-organizer-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important; 
    object-fit: cover !important;
    border: 2px solid #e2e8f0 !important;
}

.custom-organizer-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 6px !important;
}

.custom-organizer-info strong {
    font-size: 1.1rem !important;
    color: #1e293b !important;
    display: block !important;
    margin: 0 !important;
}

.custom-organizer-desc {
    font-size: 0.9rem !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.custom-organizer-website {
    display: inline-block !important;
    margin-top: 4px !important;
    font-size: 0.9rem !important;
}

@media (max-width: 900px) {
    .custom-single-grid {
        flex-direction: column !important;
        gap: 30px !important;
    }
    .custom-single-main-content,
    .custom-single-sidebar {
        width: 100% !important;
        flex: none !important;
    }
}

/* ==========================================================================
   12. FIX PAGINAZIONE MOBILE (Testi ridotti e bottoni separati)
   ========================================================================== */

/* Nasconde definitivamente l'elemento "Oggi" dalla barra di navigazione */
.tribe-events .tribe-events-c-nav__list-item--today {
    display: none !important;
}

/* Regole esclusive per smartphone */
@media (max-width: 768px) {
    /* Imposta un contenitore flessibile per i due bottoni */
    .tribe-events .tribe-events-c-nav__list {
        display: flex !important;
        justify-content: space-between !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Distribuisce i bottoni in modo proporzionato */
    .tribe-events .tribe-events-c-nav__list-item {
        flex: 1 1 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Margini dedicati per distanziare i tasti su mobile */
    .tribe-events .tribe-events-c-nav__list-item--prev {
        margin-right: 8px !important;
    }

    .tribe-events .tribe-events-c-nav__list-item--next {
        margin-left: 8px !important;
    }

    /* Centra il contenuto interno dei link */
    .tribe-events .tribe-events-c-nav__prev-link,
    .tribe-events .tribe-events-c-nav__next-link {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        padding: 12px 5px !important; 
    }

    /* 1. Nasconde il testo lungo originale riducendo il font a zero */
    .tribe-events .tribe-events-c-nav__prev-label,
    .tribe-events .tribe-events-c-nav__next-label {
        font-size: 0 !important;
        letter-spacing: 0 !important;
    }

    /* 2. Scrive le nuove parole corte e ripristina la leggibilità */
    .tribe-events .tribe-events-c-nav__prev-label::after {
        content: "PRECEDENTI" !important;
        font-size: 0.85rem !important;
    }

    .tribe-events .tribe-events-c-nav__next-label::after {
        content: "SUCCESSIVI" !important;
        font-size: 0.85rem !important;
    }
}


/* ==========================================================================
   13. SELETTORE DATA E POPUP CALENDARIO PERSONALIZZATO
   ========================================================================== */

/* Contenitore e Popup del Calendario Datepicker */
.tribe-events-c-top-bar__datepicker {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
}

.tribe-events-c-top-bar__datepicker-container {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 1000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Animazione Fluida Popup Datepicker (Apertura e Chiusura) */
@keyframes datepickerPopupFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes datepickerPopupFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

.datepicker.datepicker-dropdown,
.tribe-events-c-top-bar__datepicker-container .datepicker,
.tribe-ui-datepicker.ui-datepicker {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    padding: 12px 14px 14px 14px !important;
    width: 280px !important;
    max-width: 95vw !important;
    box-sizing: border-box !important;
    z-index: 1000 !important;
    animation: datepickerPopupFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    transform-origin: top left !important;
}

.datepicker.datepicker-dropdown.is-closing,
.tribe-events-c-top-bar__datepicker-container .datepicker.is-closing {
    animation: datepickerPopupFadeOut 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    pointer-events: none !important;
}

/* Freccetta del popup (triangolino superiore allineato a sinistra) */
.datepicker-dropdown:before {
    left: 24px !important;
    right: auto !important;
    border-bottom: 7px solid #e2e8f0 !important;
}
.datepicker-dropdown:after {
    left: 25px !important;
    right: auto !important;
    border-bottom: 6px solid #ffffff !important;
}

/* Tabella interna */
.datepicker table,
.tribe-ui-datepicker.ui-datepicker table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* Header del Mese / Anno con Frecce */
.datepicker thead tr:first-child {
    height: auto !important;
}

.datepicker th.datepicker-switch,
.datepicker .datepicker-switch,
.tribe-ui-datepicker .ui-datepicker-title {
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: #1e293b !important;
    border-radius: 8px !important;
    padding: 4px 6px !important;
    text-transform: capitalize !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-align: center !important;
    vertical-align: middle !important;
    width: 100% !important;
    line-height: 1.2 !important;
}

.datepicker th.datepicker-switch:hover,
.datepicker .datepicker-switch:hover,
.tribe-ui-datepicker .ui-datepicker-title:hover {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
}

/* Frecce Mese Precedente / Successivo */
.datepicker th.prev,
.datepicker th.next,
.datepicker th.prev button,
.datepicker th.next button,
.datepicker .prev,
.datepicker .next,
.datepicker .prev button,
.datepicker .next button,
.tribe-ui-datepicker .ui-datepicker-prev,
.tribe-ui-datepicker .ui-datepicker-next {
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    color: #64748b !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.datepicker th.prev:hover,
.datepicker th.next:hover,
.datepicker th.prev button:hover,
.datepicker th.next button:hover {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
}

.datepicker th.prev svg,
.datepicker th.next svg,
.datepicker th.prev path,
.datepicker th.next path,
.datepicker .prev svg,
.datepicker .next svg,
.datepicker .prev path,
.datepicker .next path,
.tribe-events-c-top-bar__datepicker-nav-icon-svg {
    width: 12px !important;
    height: 12px !important;
    fill: #64748b !important;
    stroke: #64748b !important;
    color: #64748b !important;
    display: inline-block !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
}

.datepicker th.prev:hover svg,
.datepicker th.next:hover svg,
.datepicker th.prev:hover path,
.datepicker th.next:hover path {
    fill: #15803d !important;
    stroke: #15803d !important;
}

/* Intestazione Giorni della Settimana (L, M, M, G, V, S, D) */
.datepicker table th.dow,
.tribe-ui-datepicker.ui-datepicker th {
    color: #94a3b8 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 10px 0 6px 0 !important;
    text-align: center !important;
    border: none !important;
}

.datepicker table th.dow abbr,
.datepicker table th.dow abbr[title],
.tribe-ui-datepicker.ui-datepicker th abbr {
    text-decoration: none !important;
    border-bottom: none !important;
    cursor: default !important;
}

/* Rimuove qualsiasi outline o focus ring nero/blu/di sistema dai bottoni del calendario */
.datepicker *,
.datepicker *:focus,
.datepicker *:focus-visible,
.datepicker *:active,
.datepicker button,
.datepicker button:focus,
.datepicker button:focus-visible,
.datepicker table tr td,
.datepicker table tr td:focus,
.datepicker table tr td:focus-visible,
.datepicker table tr td button,
.datepicker table tr td button:focus,
.datepicker table tr td button:focus-visible,
.datepicker table tr td button:focus-within,
.datepicker table tr td.day,
.datepicker table tr td.day:focus,
.datepicker table tr td.day:focus-visible,
.datepicker table tr td button.day,
.datepicker table tr td button.day:focus,
.datepicker table tr td button.day:focus-visible,
.datepicker table tr td button.day.focused,
.datepicker table tr td.day.focused,
.tribe-ui-datepicker .ui-visual-focus,
.tribe-events-c-top-bar__datepicker-container * {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Celle dei Giorni */
.datepicker table tr td {
    padding: 2px !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
}

.datepicker table tr td button.day,
.datepicker table tr td.day,
.tribe-ui-datepicker.ui-datepicker td a,
.tribe-ui-datepicker.ui-datepicker td span {
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    cursor: pointer !important;
}

/* Hover sui giorni normali */
.datepicker table tr td button.day:hover,
.datepicker table tr td.day:hover,
.tribe-ui-datepicker.ui-datepicker td a:hover {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
}

/* Disattiva qualsiasi bordo blu da .today, .current o classi native */
.datepicker table tr td.today,
.datepicker table tr td.current,
.datepicker table tr td.day.today,
.datepicker table tr td.day.current,
.datepicker table tr td button.today,
.datepicker table tr td button.current,
.datepicker table tr td button.day.today,
.datepicker table tr td button.day.current,
.datepicker table tr td.today button,
.datepicker table tr td.current button,
.datepicker table tr td.today:before,
.datepicker table tr td.current:before,
.datepicker table tr td.today:after,
.datepicker table tr td.current:after,
.tribe-ui-datepicker .ui-state-highlight {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Stile per il giorno di OGGI (quando non è quello selezionato/attivo) - Bordo verde pulito */
.tribe-events .datepicker .day.current:before,
.tribe-events .datepicker .month.current:before,
.tribe-events .datepicker .year.current:before,
.tribe-events .datepicker .day.today:before,
.tribe-events .datepicker .month.today:before,
.tribe-events .datepicker .year.today:before,
.datepicker .day.current:before,
.datepicker .month.current:before,
.datepicker .year.current:before,
.datepicker .day.today:before {
    border: 1.5px solid #62ad75 !important;
    border-radius: 8px !important;
}

/* Quando il giorno corrente è anche ATTIVO / SELEZIONATO, togli :before */
.tribe-events .datepicker .day.current.active:before,
.tribe-events .datepicker .month.current.active:before,
.tribe-events .datepicker .year.current.active:before,
.tribe-events .datepicker .day.today.active:before,
.datepicker .day.current.active:before,
.datepicker .month.current.active:before,
.datepicker .year.current.active:before,
.datepicker .day.today.active:before {
    border: none !important;
    display: none !important;
}

.datepicker table tr td.today:not(.active) button:not(.active),
.datepicker table tr td.current:not(.active) button:not(.active),
.datepicker table tr td.day.today:not(.active),
.datepicker table tr td.day.current:not(.active),
.datepicker table tr td button.today:not(.active),
.datepicker table tr td button.current:not(.active),
.datepicker table tr td.today:not(.active),
.datepicker table tr td.current:not(.active),
.datepicker table tr td.day.today:not(.active) button,
.datepicker table tr td.day.current:not(.active) button {
    color: #15803d !important;
    font-weight: 800 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Giorno ATTIVO / SELEZIONATO (Pillola verde piena #62ad75) */
.datepicker table tr td button.active,
.datepicker table tr td.active,
.datepicker table tr td.selected,
.datepicker table tr td.day.active,
.datepicker table tr td button.day.active,
.datepicker table tr td.current.active,
.datepicker table tr td.today.active,
.datepicker table tr td.current.active button,
.datepicker table tr td.today.active button,
.datepicker table tr td button.current.active,
.datepicker table tr td button.today.active,
.tribe-ui-datepicker .ui-state-active,
.datepicker table tr td button.active:hover,
.datepicker table tr td.active:hover {
    background-color: #62ad75 !important;
    background-image: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 8px rgba(98, 173, 117, 0.4) !important;
    border: none !important;
    outline: none !important;
}

/* Giorni dei mesi adiacenti (Precedente e Successivo) */
.datepicker table tr td button.old,
.datepicker table tr td button.new,
.datepicker table tr td.old,
.datepicker table tr td.new {
    color: #cbd5e1 !important;
    opacity: 0.55 !important;
}

/* Selezione Mese e Anno a griglia */
.datepicker-months .datepicker-grid,
.datepicker-years .datepicker-grid {
    gap: 6px !important;
    padding: 8px 0 !important;
}

.datepicker-months span.month,
.datepicker-years span.year,
.datepicker-grid > button {
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #334155 !important;
    padding: 8px 4px !important;
    transition: all 0.15s ease !important;
    outline: none !important;
}

.datepicker-months span.month:hover,
.datepicker-years span.year:hover,
.datepicker-grid > button:hover {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
}

.datepicker-months span.month.active,
.datepicker-years span.year.active,
.datepicker-grid > button.active {
    background-color: #62ad75 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}