/* ============================================
   CUSTOM CSS - TRAVELGIARDININAXOS.COM
   Adattato da traveltaormina.com/templates/yootheme_traveltaormina/css/custom.css
   Include SOLO le parti generiche riutilizzabili:
   - Componente descrizione/accordion escursione (iCagenda)
   - FAQ
   - Datepicker (pico)
   - Card griglia elenco escursioni
   - Widget WhatsApp

   ESCLUSO deliberatamente (specifico di Taormina, da ricreare se/quando servirà):
   - Form RSForm con ID numerici propri di Taormina (#rsform_13_page_0, #rsform_7_page_0...)
   - Landing page Palermo transfer (.transfer-hero-*, .transfer-comparison-table, ecc.)
   - Breadcrumbs/immagini specifiche del Godfather Tour (.godfather-*)
   - .formContainer-booking (form di prenotazione multi-step, ID specifici Taormina)
   ============================================ */

/* ============================================
   0. FONT ESTERNI RICHIESTI
   Aggiungere nel <head> del template (YOOtheme: Personalizza > Head Data
   > Custom Code, oppure index.php del template):

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Vidaloka&display=swap" rel="stylesheet">

   Non erano caricati su travelgiardininaxos.com: senza questo <link>
   il CSS sottostante ricade sui fallback (sans-serif / serif di sistema).
   ============================================ */

@media only screen and (min-width: 1px) {

    body {
        overflow: initial;
    }

    /* ============================================
       1. ACCORDION DESCRIZIONE ESCURSIONE (iCagenda)
       ============================================ */

    /* Reset elenco puntato sul <ul> esterno dell'accordion: l'attributo
       uk-accordion attiva solo il comportamento JS, non lo stile — senza
       questo reset restano i pallini di default del browser prima di
       ogni titolo di sezione (DESCRIPTION, HIGHLIGHTS, ecc.) */
    .descrizione-escursione > ul,
    .descrizione-escursione ul.uk-accordion {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .descrizione-escursione > ul > li {
        list-style: none;
        margin: 0 0 2px 0;
    }

    .description-tour .buttonprice {
        margin-bottom: 20px;
    }

    .buttonprice {
        display: block;
        padding: 5px 10px;
        margin: 28px auto 18px;
        background: rgba(0, 128, 128, 0.55);
        border: 0;
        color: #FFF;
        font: normal 1.5rem 'Quicksand', sans-serif;
        line-height: 40px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    /* Il primo titolo dell'accordion non deve avere spazio extra sopra */
    .descrizione-escursione > ul > li:first-child .buttonprice {
        margin-top: 0;
    }

    .highlights ul {
        list-style: none;
    }

    .highlights li {
        line-height: 2rem !important;
    }

    .highlights li::before {
        content: "•";
        display: block;
        width: 20px;
        height: 20px;
        float: left;
        margin: 0 20px 0 0;
        color: #008080;
        font-size: 2rem;
    }

    .fa-times::before {
        color: #ff000f !important;
    }

    #ic-detail-desc ul {
        padding: 0.5rem;
        margin: 0 0 2rem 0;
        list-style-type: none;
    }

    #ic-detail-desc .info {
        list-style: none;
        padding: 15px 0;
        font: normal 1 'Quicksand', sans-serif !important;
        line-height: 1.5rem !important;
        border-bottom: 2px #ccc solid;
    }

    #ic-detail-desc ul li i:before,
    #ic-detail-desc ul li i:after {
        background-color: #fff;
        width: 0px;
        color: #008080;
        margin-right: 15px;
    }

    .included ul li .fa-check:before,
    .included ul li .fa-check:after {
        color: #3DC372 !important;
    }

    #ic-detail-desc ul li .fa-bars:before,
    #ic-detail-desc ul li .fa-bars:after,
    #ic-detail-desc ul li .fa-highlighter:before,
    #ic-detail-desc ul li .fa-highlighter:after,
    #ic-detail-desc ul li .fa-map:before,
    #ic-detail-desc ul li .fa-map:after,
    #ic-detail-desc ul li .fa-info-circle:before,
    #ic-detail-desc ul li .fa-info-circle:after,
    #ic-detail-desc ul li .fa-check:before,
    #ic-detail-desc ul li .fa-check:after,
    #ic-detail-desc ul li .fa-shopping-cart:before,
    #ic-detail-desc ul li .fa-shopping-cart:after,
    #ic-detail-desc ul li .fa-money-bill-wave:before,
    #ic-detail-desc ul li .fa-money-bill-wave:after,
    #ic-detail-desc ul li .fa-star:before,
    #ic-detail-desc ul li .fa-star:after,
    #ic-detail-desc ul li .fa-question:before,
    #ic-detail-desc ul li .fa-question:after {
        width: 40px !important;
        background-color: transparent !important;
        color: #fff !important;
    }

    .prices ul {
        padding: 0.5rem;
        margin: 0 0 1rem 0;
    }

    .prices ul li {
        display: block;
        overflow: hidden;
        padding: 15px 0;
        line-height: 1.5rem !important;
        border-bottom: 2px #ccc solid;
    }

    .prices ul li strong {
        float: right;
        padding-right: 0.5rem;
        font-size: 1rem;
        color: #006666;
        font-weight: normal;
    }

    .prices em {
        color: #006666;
    }

    .prenota-escursione {
        margin-bottom: 0px;
        position: sticky;
        bottom: 0px;
        left: 0px;
        width: 100%;
        background-color: #D1D8DE;
        box-shadow: 0 0 4rem 0 rgba(0, 0, 0, 0.25);
        padding: 10px 60px;
        z-index: 99;
        display: block;
        align-items: center;
    }

    .prenota-escursione button,
    .prenota-escursione button:active,
    .prenota-escursione button:visited {
        background-color: #FF9E45;
    }

    .costo-lista {
        color: #006666;
        font-size: 1.1rem;
        margin-top: -5px;
        font-weight: 600;
    }

    .events_page_cancellation {
        color: #3DC372;
        font-weight: 300;
        line-height: 16px;
        margin-top: 2px;
        clear: both;
        font-size: 1rem;
        font-family: 'Vidaloka', serif;
        margin-bottom: 5px;
    }

    [class*="uk-width"] {
        margin-bottom: 30px !important;
    }

    .ic-info {
        background-color: #fff;
    }

    /* Immagine header nativa di iCagenda sulla pagina del singolo tour
       (sopra la descrizione): di default viene mostrata alla dimensione
       naturale del file dentro un contenitore molto più largo, lasciando
       uno spazio vuoto a destra. Altezza fissa + object-fit:cover invece
       di height:auto, così tutte le immagini hero hanno proporzioni
       uniformi indipendentemente dal rapporto larghezza/altezza della
       foto originale di ciascun tour (alcune sono molto panoramiche,
       altre quasi quadrate per via di loghi/badge incorporati). */
    .icinfo .ic-image img {
        width: 100% !important;
        height: 420px !important;
        max-height: 420px !important;
        object-fit: cover !important;
        display: block;
        border-radius: 8px;
    }

    @media (max-width: 640px) {
        .icinfo .ic-image img {
            height: 240px !important;
            max-height: 240px !important;
        }
    }

    .ic-detail-desc {
        padding: 0;
        margin: 0;
    }

    .uk-open {
        border-top: none !important;
        margin-top: 0 !important;
    }

    .ic-info-box {
        display: none !important;
    }

    #icagenda em {
        color: #c65d00;
    }

    .descrizione-escursione ol {
        list-style: none;
    }

    .descrizione-escursione ol li {
        border-bottom: 2px #ccc solid;
        line-height: 3.5rem;
    }

    .uk-panel .info {
        background-color: #f8f8f8;
        padding: 10px;
    }

    .uk-panel .info p {
        margin-top: 0;
    }

    .hinfo {
        border-bottom: 3px solid #FF9E45;
        font-family: 'Vidaloka', serif;
        padding-bottom: 5px;
        font-size: 2rem !important;
    }

    h6 {
        border-bottom: 3px solid #FF9E45;
        font-family: 'Vidaloka', serif;
        padding-bottom: 5px;
        font-size: 2rem;
        margin-bottom: 10px;
    }

    /* ============================================
       2. FAQ (accordion domande frequenti)
       ============================================ */

    .faq h3,
    .faq h4 {
        color: #008080;
        font-family: 'Vidaloka', serif;
        font-size: 1.2rem;
        padding-bottom: 0 !important;
        line-height: 25px;
        font-weight: 300;
        letter-spacing: 1px;
        display: block;
        margin: 0;
        cursor: pointer;
    }

    .faq h3 {
        font-size: 1.5rem !important;
    }

    .bigtable h3,
    .bigtable h4 {
        padding-bottom: 50px !important;
    }

    .faq .bigtable {
        border-width: thin;
        border-color: black;
        border-style: solid;
        margin-bottom: 20px;
        padding-left: 5px;
    }

    .faq .transition,
    .faq p,
    .faq ul li i:before,
    .faq ul li i:after {
        transition: all 0.25s ease-in-out;
    }

    .faq p {
        color: rgba(48, 69, 92, 0.8);
        font-size: 17px;
        line-height: 26px;
        letter-spacing: 1px;
        position: relative;
        overflow: hidden;
        max-height: 800px;
        opacity: 1;
        transform: translate(0, 0);
        margin-top: 14px;
        z-index: 2;
    }

    .faq ul {
        list-style: none;
        perspective: 900;
        padding: 0;
        margin: 0;
    }

    .faq ul li {
        position: relative;
        padding: 0;
        margin: 0;
        padding-bottom: 4px;
        padding-top: 18px;
        transition-duration: 2s;
        padding-left: 5px;
    }

    .faq ul li:hover {
        background-color: #ADD9C24D;
    }

    .faq ul li:last-of-type {
        padding-bottom: 0;
    }

    .faq ul li i {
        position: absolute;
        transform: translate(-6px, 0);
        margin-top: 16px;
        right: 0;
    }

    .faq ul li i:before,
    .faq ul li i:after {
        content: "";
        position: absolute;
        background-color: #ff6873 !important;
        width: 3px !important;
        height: 9px;
        right: 0;
    }

    .faq ul li i:before {
        transform: translate(-2px, 0) rotate(45deg);
    }

    .faq ul li i:after {
        transform: translate(2px, 0) rotate(-45deg);
    }

    .faq ul li input[type=checkbox] {
        position: absolute;
        cursor: pointer;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
    }

    .faq ul li input[type=checkbox]:checked ~ p {
        margin-top: 0;
        max-height: 0;
        opacity: 0;
        transform: translate(0, 50%);
    }

    .faq ul li input[type=checkbox]:checked ~ i:before {
        transform: translate(2px, 0) rotate(45deg);
    }

    .faq ul li input[type=checkbox]:checked ~ i:after {
        transform: translate(-2px, 0) rotate(-45deg);
    }

    /* ============================================
       3. WHATSAPP WIDGET
       ============================================ */

    .whatsapp-button-enhanced {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .whatsapp-button-enhanced:hover {
        transform: scale(1.1);
        box-shadow: 0 5px 20px rgba(37, 211, 102, 0.5);
    }

    .whatsapp-tooltip {
        position: absolute;
        right: 70px;
        top: 50%;
        transform: translateY(-50%);
        background: #25d366;
        color: white;
        padding: 10px 15px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

    .whatsapp-tooltip::after {
        content: '';
        position: absolute;
        right: -8px;
        top: 50%;
        transform: translateY(-50%);
        border: 8px solid transparent;
        border-left-color: #25d366;
    }

    .whatsapp-button-enhanced:hover .whatsapp-tooltip {
        opacity: 1;
        visibility: visible;
        right: 80px;
    }

    .whatsappchat .popup-section .popup .popuptext {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .whatsappchat .popup-section .popup .popuptext strong {
        color: #008080;
        font-weight: 600;
    }

    @media only screen and (max-width: 960px) {
        .whatsapp-button-enhanced {
            bottom: 80px;
            right: 15px;
        }

        .whatsapp-tooltip {
            display: none;
        }
    }
}

/* ============================================
   4. CARD GRIGLIA ELENCO ESCURSIONI (iCagenda)
   Rinominato da .traveltaormina-tour-card a .gn-tour-card
   ============================================ */

.ic_eventlist .ic-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 40px 0;
}

.ic_eventlist .ic-section.ic-group {
    display: flex !important;
    flex-wrap: wrap !important;
}

.gn-tour-card.ic-col {
    width: calc(33.333% - 20px) !important;
    float: none !important;
    margin: 0 !important;
}

.gn-tour-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gn-tour-card * {
    box-sizing: border-box;
}

.gn-tour-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 40px rgba(37, 99, 168, 0.2);
}

.gn-tour-card .tour-card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

.gn-tour-card .ic-event-div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gn-tour-card .tour-image-header {
    width: 100%;
    height: 240px;
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    margin: 0;
}

.gn-tour-card:hover .tour-image-header {
    background-size: 110% !important;
}

.gn-tour-card .tour-date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    min-width: 60px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.gn-tour-card .ic-day {
    font-size: 1.5rem;
    font-weight: 700;
    color: #008080;
    line-height: 1;
    margin-bottom: 2px;
}

.gn-tour-card .ic-month {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gn-tour-card .tour-category-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(231, 137, 53, 0.95);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    z-index: 2;
}

.gn-tour-card .tour-price-badge {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    color: #008080;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.gn-tour-card .tour-content-wrapper {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gn-tour-card .tour-title {
    font-family: 'Vidaloka', serif;
    font-size: 1.3rem;
    color: #008080;
    line-height: 1.3;
    margin: 0 0 15px 0;
    min-height: 65px;
    font-weight: 400;
    transition: color 0.3s ease;
}

.gn-tour-card:hover .tour-title {
    color: #FF9E45;
}

.gn-tour-card .tour-description {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex: 1;
}

.gn-tour-card .tour-meta-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.gn-tour-card .tour-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #666;
}

.gn-tour-card .meta-icon {
    font-size: 1rem;
    color: #FF9E45;
}

.gn-tour-card .tour-footer {
    margin-top: auto;
}

.gn-tour-card .tour-location {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gn-tour-card .tour-button-wrapper {
    text-align: center;
}

.gn-tour-card .tour-button {
    display: inline-block;
    background: linear-gradient(135deg, #008080 0%, #005f5f 100%);
    color: white;
    padding: 10px 24px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.gn-tour-card:hover .tour-button {
    background: linear-gradient(135deg, #005f5f 0%, #153a70 100%);
    transform: translateX(5px);
}

@media (max-width: 960px) {
    .gn-tour-card.ic-col {
        width: calc(50% - 15px) !important;
    }

    .ic_eventlist .ic-section {
        gap: 20px;
    }

    .gn-tour-card .tour-title {
        font-size: 1.2rem;
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .gn-tour-card.ic-col {
        width: 100% !important;
    }

    .ic_eventlist .ic-section {
        gap: 20px;
        margin: 20px 0;
    }

    .gn-tour-card .tour-image-header {
        height: 220px;
    }

    .gn-tour-card .tour-content-wrapper {
        padding: 20px;
    }

    .gn-tour-card .tour-title {
        font-size: 1.1rem;
        min-height: auto;
    }

    .gn-tour-card .tour-meta-row {
        flex-wrap: wrap;
        gap: 12px;
    }
}

.uk-container-small {
    max-width: 1200px;
}

#tm-main .uk-container {
    max-width: 1440px;
}

/* ============================================
   4b. GRIGLIA A CARD PER LA LISTA EXCURSIONS (iCagenda)
   Trasforma la lista nativa .ic-list-events / .ic-list-event in una
   griglia di card affiancate, senza toccare i file PHP del theme pack:
   la struttura HTML generata da iCagenda basta già così com'è.
   ============================================ */

.ic-list-events {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px;
    margin: 30px 0;
}

.ic-list-events > .ic-list-event {
    width: 100% !important;
    max-width: 100% !important;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    -webkit-box-orient: horizontal !important;
    position: relative;
    float: none !important;
    transition: box-shadow 0.3s ease;
}

.ic-list-events > .ic-list-event > a {
    display: block !important;
    position: relative !important;
    width: 300px !important;
    flex: 0 0 300px !important;
    overflow: hidden !important;
    align-self: stretch !important;
}

.ic-list-events > .ic-list-event > .ic-content {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.ic-list-event:hover {
    box-shadow: 0 14px 34px rgba(0, 128, 128, 0.2);
}

@media (max-width: 800px) {
    .ic-list-events > .ic-list-event {
        flex-direction: column !important;
    }

    .ic-list-events > .ic-list-event > a {
        width: 100% !important;
        flex: 0 0 220px !important;
    }
}

.ic-list-event .ic-box-date {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Badge intervallo date: pillola teal in overlay sull'angolo dell'immagine.
   Il box .ic-date ha line-height:0 di default (pensato per cifre impilate):
   qui lo resettiamo per il nostro testo su due righe. */
.ic-list-event .ic-date-range {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #008080;
    padding: 8px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    line-height: 1.25 !important;
    text-align: left;
    font-size: inherit;
}

.ic-avail-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.9;
    line-height: 1.2 !important;
    margin-bottom: 2px;
    color: #fff;
}

.ic-avail-range {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2 !important;
    white-space: nowrap;
    color: #fff;
}

/* Categoria (es. "Etna People"): nel layout orizzontale sta in flusso
   normale accanto al titolo, non più in overlay sulla foto (con
   position:absolute finiva nell'angolo della card intera, sovrapposta
   al prezzo) */
.ic-list-event .ic-title-cat {
    display: inline-block;
    margin-top: 6px;
}

.ic-list-event .ic-title-cat-btn {
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Contenuto testuale accanto all'immagine: due colonne (info | prezzo) +
   fascia disponibilità mesi a piena larghezza sotto */
.ic-list-event .ic-content {
    padding: 22px 24px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px;
    flex: 1;
}

.ic-info-col {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ic-price-col {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #eee;
    padding-left: 20px;
}

@media (max-width: 640px) {
    .ic-price-col {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid #eee;
        padding-top: 16px;
    }
}

.ic-availability-strip {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 16px;
    margin-top: 4px;
    border-top: 1px solid #eee;
    font-size: 0.85rem;
}

.ic-availability-label {
    color: #5b6560;
    font-weight: 600;
    margin-right: 4px;
}

.ic-availability-month {
    color: #ccc;
    text-decoration: line-through;
}

.ic-availability-month.is-available {
    color: #01121d;
    font-weight: 700;
    text-decoration: none;
}

.ic-tour-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.ic-tag-pill {
    background: #e6f2f2;
    color: #006666;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
}

.ic-tour-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #444;
}

.ic-meta-row i {
    color: #008080;
    width: 16px;
    text-align: center;
    margin-right: 4px;
}

.ic-next-departures {
    margin-top: 14px;
    font-size: 0.8rem;
}

.ic-next-departures-title {
    font-weight: 700;
    color: #01121d;
    margin-bottom: 6px;
}

.ic-departure-row {
    color: #444;
    margin-bottom: 3px;
}

.ic-departure-row i {
    color: #2e7d4f;
    margin-right: 4px;
}

.ic-departure-row em {
    color: #5b6560;
    font-style: italic;
}

.ic-list-event .ic-event-title {
    margin-bottom: 4px;
}

.ic-list-event .ic-title-header h2,
.ic-list-event .ic-title-header h3 {
    font-size: 1.15rem;
    line-height: 1.35;
    margin: 0;
    color: #01121d;
}

.ic-list-event .ic-title-header a {
    color: #008080;
}

.ic-list-event .ic-title-header a:hover {
    color: #005f5f;
}

/* Prezzo/Durata come campi separati (da Custom Fields, via $item->version_customfields) */
.ic-price-col .ic-tour-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.ic-stat {
    display: flex;
    flex-direction: column;
}

.ic-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #5b6560;
}

.ic-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #01121d;
}

.ic-stat-price .ic-stat-value {
    font-size: 1.3rem;
    color: #008080;
}

.ic-list-event .nextdate.ic-next-date {
    font-size: 0.82rem;
    color: #5b6560;
    margin-bottom: 8px;
}

.ic-list-event .descshort.ic-descshort {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
    margin-bottom: 16px;
}

.ic-price-col .ic-actionbar {
    display: block;
}

.ic-price-col .ic-actionbar-readmore {
    display: block;
}

.ic-list-event .ic-actionbar-readmore .btn {
    background: #008080;
    border-color: #008080;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    width: 100%;
    text-align: center;
}

.ic-list-event .ic-actionbar-readmore .btn:hover {
    background: #005f5f;
    border-color: #005f5f;
}

/* ============================================
   5. DATEPICKER (pico) - date escursione
   ============================================ */

.pico .picker[aria-hidden="true"] {
    display: none !important;
}

.pico .picker__holder {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    background: transparent !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(0px) !important;
    transition: backdrop-filter 0.3s ease !important;
}

.pico .picker--opened .picker__holder {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(8px) !important;
}

.pico .picker__frame {
    position: relative !important;
    margin: 20px auto !important;
    min-width: 320px !important;
    max-width: 666px !important;
    width: 100% !important;
    opacity: 0 !important;
    transform: scale(0.95) translateY(-20px) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.pico .picker--opened .picker__frame {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}

.pico ul li {
    list-style: none !important;
}

.pico .picker__wrap {
    width: 100% !important;
}

.pico .picker__box {
    padding: 0 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-radius: 20px !important;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset !important;
    overflow: hidden !important;
}

.pico .picker__header {
    text-align: center !important;
    position: relative !important;
    padding: 18px 70px !important;
    background: linear-gradient(135deg, #008080 0%, #005f5f 100%) !important;
    color: #fff !important;
    margin: 0 !important;
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(37, 99, 168, 0.3) !important;
}

.pico .picker__header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%) !important;
}

.pico .picker__month,
.pico .picker__year {
    display: inline-block !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #fff !important;
    margin: 0 6px !important;
    font-style: normal !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.pico .picker__nav--prev,
.pico .picker__nav--next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    cursor: pointer !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    backdrop-filter: blur(10px) !important;
}

.pico .picker__nav--prev {
    left: 12px !important;
}

.pico .picker__nav--next {
    right: 12px !important;
}

.pico .picker__nav--prev:hover,
.pico .picker__nav--next:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.pico .picker__nav--prev:active,
.pico .picker__nav--next:active {
    transform: translateY(-50%) scale(0.95) !important;
}

.pico .picker__nav--prev::before,
.pico .picker__nav--next::before {
    content: " " !important;
    display: block !important;
    border-top: 7px solid transparent !important;
    border-bottom: 7px solid transparent !important;
    border-right: 9px solid #fff !important;
    width: 0 !important;
    height: 0 !important;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)) !important;
}

.pico .picker__nav--next::before {
    border-right: 0 !important;
    border-left: 9px solid #fff !important;
}

.pico .picker__nav--disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.pico .picker__table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    table-layout: fixed !important;
}

.pico .picker__table td {
    margin: 0 !important;
    padding: 0 !important;
}

.pico .picker__table thead {
    position: relative !important;
}

.pico .picker__table thead::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    left: 28px !important;
    right: 28px !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        #e0e0e0 20%,
        #e0e0e0 80%,
        transparent 100%) !important;
    border-radius: 2px !important;
}

.pico .picker__weekday {
    width: 14.2857% !important;
    padding: 10px 6px !important;
    text-align: center !important;
    color: #888 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.pico .picker__day {
    padding: 0 !important;
    height: 46px !important;
    border: 2px solid transparent !important;
    text-align: center !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    font-size: 24px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
}

.pico .picker__day--infocus {
    color: #1a1a1a !important;
}

.pico .picker__day--outfocus {
    color: #d0d0d0 !important;
}

.pico .picker__day--infocus:hover,
.pico .picker__day--outfocus:hover {
    background: linear-gradient(135deg, #e3f2fd 0%, #d1e7fd 100%) !important;
    border-color: #008080 !important;
    color: #1a1a1a !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 8px 16px rgba(37, 99, 168, 0.2),
        0 0 0 4px rgba(37, 99, 168, 0.1) !important;
}

.pico .picker__day--today {
    position: relative !important;
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    color: #1b5e20 !important;
    font-weight: 800 !important;
    border: 2px solid #4caf50 !important;
}

.pico .picker__day--today::before {
    content: "★" !important;
    position: absolute !important;
    top: 2px !important;
    right: 4px !important;
    font-size: 10px !important;
    color: #4caf50 !important;
    animation: twinkle 2s infinite !important;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

.pico .picker__day--today:hover {
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%) !important;
    border-color: #2e7d32 !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 8px 16px rgba(76, 175, 80, 0.3),
        0 0 0 4px rgba(76, 175, 80, 0.1) !important;
}

.pico .picker__day--selected,
.pico .picker__day--selected:hover {
    background: linear-gradient(135deg, #008080 0%, #005f5f 100%) !important;
    color: #fff !important;
    border-color: #008080 !important;
    font-weight: 800 !important;
    transform: scale(1.05) !important;
    box-shadow:
        0 12px 24px rgba(37, 99, 168, 0.4),
        0 0 0 4px rgba(37, 99, 168, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.2) inset !important;
}

.pico .picker__day--selected::after {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent) !important;
    pointer-events: none !important;
}

.pico .picker__day--disabled,
.pico .picker__day--disabled:hover {
    background: #fafafa !important;
    border-color: transparent !important;
    color: #e0e0e0 !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 0.5 !important;
}

.pico .picker__day--highlighted {
    border-color: #ffa000 !important;
    background: #fff8e1 !important;
    color: #f57f17 !important;
    font-weight: 700 !important;
}

.pico .picker__day--highlighted:hover {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%) !important;
    border-color: #ff8f00 !important;
    color: #e65100 !important;
    transform: translateY(-3px) !important;
}

.pico .picker__footer {
    text-align: center !important;
    padding: 16px 20px 18px !important;
    background: linear-gradient(180deg, transparent 0%, #f8f9fa 50%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
}

.pico .picker__button--today,
.pico .picker__button--clear,
.pico .picker__button--close {
    background: #fff !important;
    padding: 10px 18px !important;
    font-weight: 700 !important;
    flex: 1 !important;
    max-width: 120px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: 2px solid #008080 !important;
    color: #008080 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 168, 0.15) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
}

.pico .picker__button--today:hover,
.pico .picker__button--clear:hover,
.pico .picker__button--close:hover {
    background: linear-gradient(135deg, #008080 0%, #005f5f 100%) !important;
    color: #fff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 168, 0.3) !important;
}

.pico .picker__button--today:active,
.pico .picker__button--clear:active,
.pico .picker__button--close:active {
    transform: translateY(-2px) !important;
}

.pico .picker__button--clear {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

.pico .picker__button--clear:hover {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3) !important;
}

.pico .picker__button--close {
    border-color: #6c757d !important;
    color: #6c757d !important;
}

.pico .picker__button--close:hover {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    box-shadow: 0 8px 20px rgba(108, 117, 125, 0.3) !important;
}

.pico .picker__button--today[disabled],
.pico .picker__button--today[disabled]:hover {
    background: #f5f5f5 !important;
    border-color: #e0e0e0 !important;
    color: #bbb !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.pico .picker__button--today::before,
.pico .picker__button--clear::before,
.pico .picker__button--close::before {
    display: none !important;
}

.pico .picker__table thead tr td:nth-child(7),
.pico .picker__weekday:nth-child(7) {
    color: #d32f2f !important;
    font-weight: 800 !important;
}

.pico .picker__table tbody tr td:nth-child(7) .picker__day--infocus {
    color: #d32f2f !important;
    font-weight: 700 !important;
}

.pico .picker__table tbody tr td:nth-child(7) .picker__day--outfocus {
    color: #ffcdd2 !important;
}

.pico .picker__table tbody tr td:nth-child(7) .picker__day--infocus:hover {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%) !important;
    border-color: #d32f2f !important;
    color: #b71c1c !important;
}

.pico .picker__table tbody tr td:nth-child(7) .picker__day--today {
    border-color: #d32f2f !important;
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%) !important;
    color: #b71c1c !important;
}

.pico .picker__table tbody tr td:nth-child(7) .picker__day--today::before {
    border-top-color: #d32f2f !important;
}

.pico .picker__table tbody tr td:nth-child(7) .picker__day--selected,
.pico .picker__table tbody tr td:nth-child(7) .picker__day--selected:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%) !important;
    border-color: #d32f2f !important;
    color: #fff !important;
    box-shadow:
        0 12px 24px rgba(211, 47, 47, 0.4),
        0 0 0 4px rgba(211, 47, 47, 0.2) !important;
}

.pico .picker__table tbody tr td:nth-child(7) .picker__day--disabled,
.pico .picker__table tbody tr td:nth-child(7) .picker__day--disabled:hover {
    color: #ffcdd2 !important;
    opacity: 0.4 !important;
}

@media (max-width: 640px) {
    .pico .picker__frame {
        max-width: 95vw !important;
        margin: 10px !important;
    }

    .pico .picker__box {
        border-radius: 16px !important;
    }

    .pico .picker__header {
        padding: 24px 60px !important;
        min-height: 70px !important;
    }

    .pico .picker__month,
    .pico .picker__year {
        font-size: 20px !important;
    }

    .pico .picker__nav--prev,
    .pico .picker__nav--next {
        width: 40px !important;
        height: 40px !important;
    }

    .pico .picker__table {
        padding: 20px !important;
        border-spacing: 4px !important;
    }

    .pico .picker__weekday {
        padding: 12px 4px !important;
        font-size: 11px !important;
    }

    .pico .picker__day {
        height: 44px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .pico .picker__footer {
        padding: 20px !important;
        gap: 8px !important;
    }

    .pico .picker__button--today,
    .pico .picker__button--clear,
    .pico .picker__button--close {
        padding: 12px 16px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
    }
}

.pico .picker *,
.pico .picker *::before,
.pico .picker *::after {
    box-sizing: border-box !important;
}

.pico .picker__holder::-webkit-scrollbar {
    width: 8px !important;
}

.pico .picker__holder::-webkit-scrollbar-track {
    background: transparent !important;
}

.pico .picker__holder::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
}

.pico .picker__holder::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

@media only screen and (min-width: 960px) {
    .prenota-escursione {
        display: none;
    }

    .displaynonemobile {
        display: none;
    }
}

/* ============================================
   6. PAGINE SPIAGGE (YOOtheme) - icona accanto al titolo
   Applicare la classe "beach-feature-icon-left" ai Panel
   "Beach Facilities" / "What's Nearby" / "When to Visit"
   (posizione immagine del Panel: Top, non Left)
   ============================================ */

.beach-feature-icon-left .el-image {
    float: left;
    margin-right: 10px;
    margin-top: 2px;
}

.beach-feature-icon-left .el-title {
    display: inline-block;
    margin-top: 0 !important;
}

.beach-feature-icon-left .el-content {
    clear: both;
}

/* ============================================
   7. PAGINE BEACH CLUB (articolo Joomla classico, non YOOtheme builder)
   ============================================ */

.beach-club-page .bc-hero {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 22px;
    display: block;
}

.beach-club-page .bc-badge {
    display: inline-block;
    background: #008080;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 18px;
    border-radius: 100px;
    margin-bottom: 24px;
}

.beach-club-page .bc-content h3 {
    color: #008080;
    margin-top: 32px;
    margin-bottom: 10px;
}

.beach-club-page .bc-content p {
    line-height: 1.7;
    margin-bottom: 16px;
}

.beach-club-page .bc-content ul {
    margin: 0 0 16px;
    padding-left: 20px;
}

.beach-club-page .bc-content ul li {
    line-height: 1.7;
    margin-bottom: 6px;
}

.beach-club-page h2 {
    color: #01121d;
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 1.4rem;
}

/* Layout a due colonne: Description a sinistra, sidebar a destra */
.beach-club-page .bc-two-col {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.beach-club-page .bc-main-col {
    flex: 1 1 60%;
    min-width: 280px;
}

.beach-club-page .bc-main-col h2 {
    margin-top: 0;
}

.beach-club-page .bc-side-col {
    flex: 1 1 30%;
    min-width: 240px;
    background: #f4f8f8;
    border-radius: 16px;
    padding: 24px;
}

.beach-club-page .bc-side-col h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

@media (max-width: 760px) {
    .beach-club-page .bc-two-col {
        flex-direction: column;
    }
}

/* Lista servizi con pallino circolare colorato (nessuna dipendenza da icon font) */
.beach-club-page .bc-services-icons {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.beach-club-page .bc-services-icons li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: #01121d;
    border-bottom: 1px solid #e2e8e8;
}

.beach-club-page .bc-services-icons li:last-child {
    border-bottom: none;
}

.beach-club-page .bc-service-dot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #008080;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}

.beach-club-page .bc-beach-type {
    display: inline-block;
    color: #006666;
    font-weight: 700;
    font-style: italic;
    font-size: 1.05rem;
    margin: 0;
}

.beach-club-page .bc-map-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #008080;
    color: #fff;
    padding: 14px 26px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.beach-club-page .bc-map-link:hover {
    background: #005f5f;
    color: #fff;
}

.beach-club-page .bc-map iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 16px;
}

.beach-club-page .bc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 30px;
}

.beach-club-page .bc-gallery a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.beach-club-page .bc-gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: transform 0.25s ease;
}

.beach-club-page .bc-gallery a:hover img {
    transform: scale(1.06);
}

/* Compatibilità con la vecchia lista a griglia (usata su pagine non ancora aggiornate) */
.beach-club-page .bc-services {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.beach-club-page .bc-services li {
    background: #f4f8f8;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.92rem;
    color: #01121d;
}

.beach-club-page .bc-services li::before {
    content: "\2713  ";
    color: #008080;
    font-weight: 700;
}

@media (max-width: 600px) {
    .beach-club-page .bc-services {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   8. PAGINA OVERVIEW BEACH CLUBS (griglia di card)
   ============================================ */

.bc-list-page {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    margin: 20px 0;
}

.bc-list-page .bc-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.bc-list-page .bc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0, 128, 128, 0.2);
}

.bc-list-page .bc-card > a:first-child {
    display: block;
    height: 200px;
    overflow: hidden;
}

.bc-list-page .bc-card > a:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bc-list-page .bc-card-tags {
    display: inline-block;
    margin: 16px 20px 0;
    background: #e6f2f2;
    color: #006666;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 100px;
}

.bc-list-page .bc-card h3 {
    padding: 12px 20px 0;
    margin: 0;
    font-size: 1.15rem;
}

.beach-club-page .bc-card-tags {
    display: inline-block;
    position: relative;
    top: -25px;
    margin: 0 0 4px;
    background: #e6f2f2;
    color: #006666;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 100px;
}

.bc-list-page .bc-card h3 a {
    color: #01121d;
    text-decoration: none;
}

/* ============================================
   9. PAGINE ATTRAZIONI "WHAT TO SEE" (articolo Joomla classico)
   ============================================ */

.attraction-page .bc-card-tags {
    display: inline-block;
    position: relative;
    top: -14px;
    margin: 0 0 4px;
    background: #e6f2f2;
    color: #006666;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 100px;
}

.attraction-page .bc-hero {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 22px;
    display: block;
}

.attraction-page .bc-content h3 {
    color: #008080;
    margin-top: 32px;
    margin-bottom: 10px;
}

.attraction-page .bc-content p {
    line-height: 1.7;
    margin-bottom: 16px;
}

.attraction-page .bc-content ul {
    margin: 0 0 16px;
    padding-left: 20px;
}

.attraction-page .bc-content ul li {
    line-height: 1.7;
    margin-bottom: 6px;
}

.attraction-page h2 {
    color: #01121d;
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 1.4rem;
}

.attraction-page .bc-two-col {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start;
}

.attraction-page .tgn-sticky-inner {
    position: sticky;
    top: 100px;
}

.attraction-page .bc-main-col {
    flex: 1 1 60%;
    min-width: 280px;
}

.attraction-page .bc-main-col h2 {
    margin-top: 0;
}

.attraction-page .bc-side-col {
    flex: 1 1 30%;
    min-width: 240px;
    background: #f4f8f8;
    border-radius: 16px;
    padding: 24px;
}

.attraction-page .bc-side-col h2 {
    margin-top: 0;
    font-size: 1.2rem;
}

@media (max-width: 760px) {
    .attraction-page .bc-two-col {
        flex-direction: column;
    }

    .attraction-page .tgn-sticky-inner {
        position: static;
    }
}

.attraction-page .bc-services-icons {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.attraction-page .bc-services-icons li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-weight: 600;
    font-size: 0.92rem;
    color: #01121d;
    border-bottom: 1px solid #e2e8e8;
}

.attraction-page .bc-services-icons li:last-child {
    border-bottom: none;
}

.attraction-page .bc-service-dot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #008080;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}

.attraction-page .bc-highlight {
    display: inline-block;
    color: #006666;
    font-weight: 700;
    font-style: italic;
    font-size: 1.05rem;
    margin: 0;
}

.attraction-page .bc-map iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 16px;
}

.attraction-page .bc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 0 0 30px;
}

.attraction-page .bc-gallery a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.attraction-page .bc-gallery img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: transform 0.25s ease;
}

.attraction-page .bc-gallery a:hover img {
    transform: scale(1.06);
}

.bc-list-page .bc-card h3 a:hover {
    color: #008080;
}

.bc-list-page .bc-card p {
    padding: 8px 20px 0;
    margin: 0;
    font-size: 0.9rem;
    color: #5b6560;
    line-height: 1.5;
    flex: 1;
}

.bc-list-page .bc-card .bc-readmore {
    display: block;
    margin: 16px 20px 20px;
    color: #008080;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bc-list-page .bc-card .bc-readmore:hover {
    color: #005f5f;
}

/* ============================================
   10. PAGINA TOUR CON WIDGET IN SIDEBAR (Excursions/iCagenda)
   ============================================ */

.tour-page .tour-two-col {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.tour-page .tour-main-col {
    flex: 1 1 60%;
    min-width: 280px;
}

.tour-page .tour-side-col {
    flex: 1 1 340px;
    max-width: 380px;
    min-width: 280px;
}

.tour-page .tour-widget-sticky {
    position: sticky;
    top: 100px;
}

@media (max-width: 900px) {
    .tour-page .tour-two-col {
        flex-direction: column;
    }

    .tour-page .tour-side-col {
        max-width: 100%;
        order: -1;
    }

    .tour-page .tour-widget-sticky {
        position: static;
    }
}

.tgn-mobile-book-bar {
    display: none;
}

@media (max-width: 900px) {
    .tour-page {
        padding-bottom: 76px;
    }

    .tgn-mobile-book-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: #fff;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    }

    .tgn-mobile-book-bar a {
        display: block;
        width: 100%;
        background: #008080;
        color: #fff;
        text-align: center;
        padding: 14px;
        border-radius: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        text-decoration: none;
        font-size: 0.95rem;
    }

    .tgn-mobile-book-bar a:hover,
    .tgn-mobile-book-bar a:active {
        background: #005f5f;
    }
}

/* Nasconde la sezione "All Dates" generata automaticamente da iCagenda.
   Da quando le date vengono sincronizzate come "date esplicite" (per
   supportare l'esclusione di singole date), questa sezione elenca ogni
   singola data aperta una per una invece del formato compatto
   "intervallo + giorni della settimana" - con mesi di disponibilità
   diventa una lista lunghissima. Il vero calendario di prenotazione
   (widget TravelTaormina) mostra già le date disponibili in modo
   corretto, quindi questa sezione è ridondante. */
#ic_event_dates.ic-event-dates {
    display: none;
}

/* ============================================
   11. FORM RSFORM - TRANSFER CATANIA AIRPORT (Pagina 2)
   Ricrea in puro CSS il comportamento delle classi Bootstrap
   (row/col-md-*/col-sm-*) generate dal layout RSForm, dato che
   questo sito usa YOOtheme/UIkit e non carica Bootstrap.
   ============================================ */

.formContainer {
    max-width: 760px;
}

.formContainer .row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0 0 20px;
}

.formContainer .row > [class*="col-"] {
    flex: 1 1 0;
    min-width: 240px;
}

.formContainer .col-md-12 {
    flex: 1 1 100%;
}

.formContainer .rsform-block {
    display: block;
}

.formContainer .formControlLabel {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #01121d;
    margin-bottom: 6px;
}

.formContainer .formRequired {
    color: #c0392b;
    margin-left: 4px;
    font-weight: 400;
}

.formContainer .formControls {
    width: 100%;
}

.formContainer .formControls input[type="text"],
.formContainer .formControls input[type="email"],
.formContainer .formControls input[type="tel"],
.formContainer .formControls textarea,
.formContainer .formControls select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #d0d8d8;
    border-radius: 8px;
    font-size: 0.95rem;
    background: #fff;
    color: #01121d;
}

.formContainer .formControls input:focus,
.formContainer .formControls textarea:focus,
.formContainer .formControls select:focus {
    outline: none;
    border-color: #008080;
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.12);
}

.formContainer .formControls textarea {
    min-height: 90px;
    resize: vertical;
}

.formContainer .formValidation {
    display: block;
    color: #c0392b;
    font-size: 0.8rem;
    margin-top: 4px;
}

.formContainer .rsform-block-informazionipagamento {
    background: #f4f8f8;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 0.88rem;
    color: #5b6560;
    line-height: 1.5;
}

.formContainer .rsform-type-submitbutton {
    margin-top: 10px;
}

.formContainer .rsform-type-submitbutton input[type="submit"],
.formContainer .rsform-type-submitbutton button {
    width: 100%;
    background: #008080;
    color: #fff;
    border: none;
    padding: 15px 32px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-transform: uppercase;
}

.formContainer .rsform-type-submitbutton input[type="submit"]:hover,
.formContainer .rsform-type-submitbutton button:hover {
    background: #005f5f;
}

.formContainer .rsform-type-submitbutton input[type="submit"]:disabled,
.formContainer .rsform-type-submitbutton button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .formContainer .row {
        flex-direction: column;
        gap: 18px;
    }
}

.tgn-summary-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: #dce8e8;
    border: 1px solid #dce8e8;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0 28px;
    width: 100%;
}

.tgn-summary-item {
    background: #f4f8f8;
    padding: 14px 18px;
}

.tgn-summary-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5b6560;
    margin-bottom: 4px;
}

.tgn-summary-value {
    font-size: 0.98rem;
    font-weight: 700;
    color: #01121d;
}

/* ============================================
   12. HOMEPAGE (articolo Joomla classico)
   ============================================ */

.tgn-home .tgn-hero {
    position: relative;
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
}

.tgn-home .tgn-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(1, 18, 29, 0.45);
}

.tgn-home .tgn-hero-overlay {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 20px;
    max-width: 640px;
}

.tgn-home .tgn-hero-overlay h1 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.tgn-home .tgn-hero-sub {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 4px 0 18px;
    color: rgba(255, 255, 255, 0.85);
}

.tgn-home .tgn-hero-tagline {
    font-size: 1.15rem;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.95);
}

.tgn-home .tgn-hero-search input[type="search"] {
    width: 100%;
    max-width: 440px;
    height: 54px;
    padding: 0 20px;
    border: none;
    border-radius: 100px;
    font-size: 1rem;
}

.tgn-home .tgn-features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 1040px;
    margin: 50px auto;
    padding: 0 20px;
}

.tgn-home .tgn-feature {
    flex: 1 1 200px;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8e8;
    border-radius: 12px;
    padding: 28px 20px;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tgn-home .tgn-feature:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.tgn-home .tgn-feature img {
    margin-bottom: 14px;
}

.tgn-home .tgn-feature h3 {
    margin: 0;
    color: #01121d;
    font-size: 1.05rem;
}

.tgn-home .tgn-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

.tgn-home .tgn-section-muted {
    background: #f4f8f8;
    max-width: 100%;
}

.tgn-home .tgn-section-title {
    text-align: center;
    color: #01121d;
    font-size: 1.8rem;
    margin: 0 0 8px;
}

.tgn-home .tgn-section-tagline {
    text-align: center;
    color: #5b6560;
    margin: 0 0 30px;
}

.tgn-home .tgn-section .bc-list-page {
    max-width: 1200px;
    margin: 30px auto 0;
}

.tgn-home .tgn-section-cta {
    text-align: center;
    margin-top: 30px;
}

.tgn-home .tgn-btn-outline {
    display: inline-block;
    border: 2px solid #008080;
    color: #008080;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 100px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.tgn-home .tgn-btn-outline:hover {
    background: #008080;
    color: #fff;
}

@media (max-width: 600px) {
    .tgn-home .tgn-hero-overlay h1 {
        font-size: 2.1rem;
    }
}

/* ============================================
   13. FOOTER (modulo Custom HTML)
   ============================================ */

.tgn-footer {
    background: #1a1a1a;
    color: #fff;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.tgn-footer-cta {
    text-align: center;
    padding: 36px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tgn-footer-cta h3 {
    margin: 0 0 16px;
    font-size: 1.3rem;
    color: #fff;
}

.tgn-footer-cta-btn {
    display: inline-block;
    background: #fff;
    color: #01121d;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 12px 28px;
    border-radius: 100px;
    text-decoration: none;
}

.tgn-footer-cta-btn:hover {
    background: #e2e8e8;
    color: #01121d;
}

.tgn-footer-main {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.tgn-footer-col {
    flex: 1 1 200px;
}

.tgn-footer-logo img {
    opacity: 0.85;
}

.tgn-footer h4 {
    color: #fff;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 14px;
}

.tgn-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tgn-footer ul li {
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
}

.tgn-footer ul li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.tgn-footer ul li a:hover {
    color: #fff;
    text-decoration: underline;
}

.tgn-footer p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.tgn-footer p a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.tgn-footer p a:hover {
    text-decoration: underline;
}

/* ============================================
   14. SUMUP CARD WIDGET (verifica carta - garanzia prenotazione)
   Selettori data-sumup-id / data-testid come documentati da SumUp:
   https://developer.sumup.com/online-payments/checkouts/card-widget/
   ATTENZIONE: non nascondere [data-sumup-id="widget_header"] con
   display:none - è il contenitore padre dei campi carta, nasconderlo
   fa collassare l'intero form a larghezza/altezza zero (verificato).
   ============================================ */

#sumup-section .formControlLabel {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #01121d;
    margin-bottom: 6px;
}

/* Nasconde solo l'icona carte (VISA/MC/AMEX), non l'header intero */
#sumup-card-widget [data-sumup-id="widget_header__icon"] {
    display: none;
}

#sumup-card-widget [data-sumup-id="widget_header__title"] {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #01121d !important;
}

/* Box di consenso "Save for future payments" - va reso ben visibile:
   se il cliente non lo spunta non viene generato nessun token e la
   garanzia prenotazione non funziona. */
#sumup-card-widget [data-testid="form-consent_checkbox"] {
    background: #fff4e5 !important;
    border: 1.5px solid #e8a33d !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin: 14px 0 !important;
}

#sumup-card-widget [data-testid="form-consent_checkbox--input"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #008080 !important;
}

#sumup-card-widget [data-sumup-id="submit_button"] {
    width: 100% !important;
    background: #008080 !important;
    border: none !important;
    padding: 15px 32px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase !important;
}

#sumup-card-widget [data-sumup-id="submit_button"]:hover {
    background: #005f5f !important;
}

#sumup-card-widget [data-testid="footer"] {
    font-size: 0.72rem !important;
    opacity: 0.6 !important;
    text-align: center;
    margin-top: 10px;
}