/* ========================================================
 * FONT LOCALI
 * ======================================================== */

@font-face {
    font-family: "Dancing Script";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/dancing-script-400.ttf") format("truetype");
}

@font-face {
    font-family: "Dancing Script";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/dancing-script-500.ttf") format("truetype");
}

@font-face {
    font-family: "Dancing Script";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/dancing-script-600.ttf") format("truetype");
}


/*
 * Senigallia Language Exchange
 *
 * STILI COMUNI
 *
 * Questo file contiene tutto ciò che viene utilizzato
 * sia dalla versione desktop sia dalla versione mobile.
 */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;
}


body {
    min-height: 100vh;

    background: #ffffff;

    overflow-x: hidden;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}



/* ========================================================
 * INTRO
 * ======================================================== */

.intro {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100vh;

    background: #ffffff;

    opacity: 1;

    transition:
        opacity 1.4s ease;
}


.intro.intro-hide {
    opacity: 0;

    pointer-events: none;
}


.intro.intro-removed {
    display: none;
}


.intro-content {
    width: min(92vw, 1400px);

    margin: 0 auto;
}


.intro-writing {
    display: block;

    width: 100%;
    height: auto;

    overflow: visible;
}



/*
 * Testo calligrafico.
 *
 * All'inizio il testo non ha riempimento.
 * Viene mostrato solamente il tratto.
 */

.handwriting {
    fill: transparent;

    stroke: #36506B;

    stroke-width: 1.4;

    stroke-linecap: round;
    stroke-linejoin: round;

    paint-order: stroke;

    /*
     * Un valore molto grande permette di nascondere
     * inizialmente l'intero tratto.
     */

    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
}


.handwriting-welcome {
    font-family:
        "Dancing Script",
        cursive;

    font-size: 72px;

    font-weight: 500;

    font-style: normal;

    letter-spacing: 1px;

    stroke-linecap: round;
    stroke-linejoin: round;


}


.handwriting-title {
    font-family:
        "Dancing Script",
        cursive;

    font-size: 100px;

    font-weight: 500;

    font-style: normal;

    letter-spacing: 1px;

    stroke-linecap: round;
    stroke-linejoin: round;


}


.handwriting-aka {
    font-family:
        "Dancing Script",
        cursive;

    font-size: 62px;

    font-weight: 500;

    font-style: normal;

    letter-spacing: 1px;

    stroke-linecap: round;
    stroke-linejoin: round;


}


.handwriting-flourish {
    fill: none;

    stroke: #36506B;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-dasharray: 800;
    stroke-dashoffset: 800;


}



/*
 * Quando il disegno del contorno termina,
 * viene progressivamente introdotto anche
 * il riempimento del carattere.
 */

/*
 * ========================================================
 * AVVIO ANIMAZIONE SOLO DOPO IL CARICAMENTO DEL FONT
 * ========================================================
 *
 * JavaScript aggiunge .font-ready all'intro soltanto
 * quando Dancing Script è realmente disponibile.
 */

.intro.font-ready .handwriting-welcome {
    animation:
        write-welcome 2.4s
        ease-in-out
        forwards;
}


.intro.font-ready .handwriting-title {
    animation:
        write-title 3.8s
        ease-in-out
        2.2s
        forwards;
}


.intro.font-ready .handwriting-aka {
    animation:
        write-aka 2.7s
        ease-in-out
        5.8s
        forwards;
}


.intro.font-ready .handwriting-flourish {
    animation:
        write-flourish 1.2s
        ease-out
        8.3s
        forwards;
}


@keyframes write-welcome {

    0% {
        stroke-dashoffset: 5000;
        fill: transparent;
    }

    82% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #36506B;
    }
}


@keyframes write-title {

    0% {
        stroke-dashoffset: 5000;
        fill: transparent;
    }

    82% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #36506B;
    }
}


@keyframes write-aka {

    0% {
        stroke-dashoffset: 5000;
        fill: transparent;
    }

    82% {
        stroke-dashoffset: 0;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 0;
        fill: #36506B;
    }
}


@keyframes write-flourish {

    from {
        stroke-dashoffset: 800;
    }

    to {
        stroke-dashoffset: 0;
    }
}



/* ========================================================
 * SITO
 * ======================================================== */

.site-content {
    width: 100%;

    min-height: auto;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    padding: 25px 20px;

    opacity: 0;

    transform: translateY(18px);

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;
}


.site-content.site-visible {
    opacity: 1;

    transform: translateY(0);
}



/* ========================================================
 * CAROUSEL
 * ======================================================== */

.carousel {
    position: relative;

    /*
     * Prima era 1920px.
     *
     * 1920 × 0.70 = 1344
     *
     * quindi il carousel è ridotto del 30%.
     */

    width: 70%;
    max-width: 1344px;

    margin: 0 auto;

    overflow: hidden;

    background: #ffffff;

    border-radius: 34px;
}


.carousel-track {
    position: relative;

    width: 100%;
}



/* ========================================================
 * SLIDE
 * ======================================================== */

.carousel-slide {
    position: absolute;

    inset: 0;

    width: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.2s ease-in-out,
        visibility 1.2s ease-in-out;
}


.carousel-slide.active {
    position: relative;

    opacity: 1;
    visibility: visible;
}



/* ========================================================
 * IMMAGINI
 * ======================================================== */

.carousel-slide img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    border-radius: 34px;
}



/* ========================================================
 * FRECCE
 * ======================================================== */

.carousel-arrow {
    position: absolute;

    top: 50%;

    z-index: 10;

    transform: translateY(-50%);

    border: 0;

    padding: 18px;

    color: #ffffff;

    background:
        rgba(0, 0, 0, 0.18);

    font-size: 42px;

    line-height: 1;

    cursor: pointer;

    opacity: 0.75;

    transition:
        opacity 0.2s ease,
        background 0.2s ease;
}


.carousel-arrow:hover {
    opacity: 1;

    background:
        rgba(0, 0, 0, 0.35);
}


.carousel-prev {
    left: 18px;
}


.carousel-next {
    right: 18px;
}



/* ========================================================
 * INDICATORI
 * ======================================================== */

.carousel-indicators {
    position: absolute;

    left: 50%;
    bottom: 22px;

    z-index: 10;

    display: flex;

    gap: 10px;

    transform: translateX(-50%);
}


.carousel-dot {
    width: 12px;
    height: 12px;

    padding: 0;

    border:
        2px solid
        #ffffff;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    opacity: 0.85;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.carousel-dot.active {
    background: #ffffff;

    transform: scale(1.15);
}



/* ========================================================
 * MOBILE
 * ======================================================== */





/* ========================================================
 * ACCESSIBILITÀ
 * ======================================================== */

@media (prefers-reduced-motion: reduce) {

    .handwriting-welcome,
    .handwriting-title,
    .handwriting-aka,
    .handwriting-flourish {
        animation-duration: 0.01ms;
        animation-delay: 0ms;

        stroke-dashoffset: 0;

        fill: #36506B;
    }


    .intro,
    .site-content {
        transition-duration: 0.01ms;
    }
}



/* ========================================================
 * SLE NAVIGATION
 * ======================================================== */

.site-header {
    width: 100%;

    background: #ffffff;

    border-bottom:
        1px solid rgba(54, 80, 107, 0.18);

    z-index: 100;
}


.header-after-intro {
    opacity: 0;

    transform: translateY(-12px);

    pointer-events: none;

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}


.header-after-intro.header-visible {
    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;
}


.navigation-container {
    width: 100%;
    max-width: 1344px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    padding: 18px 24px;
}


.site-brand {
    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    text-decoration: none;

    white-space: nowrap;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.brand-title {

    display: block;

    font-size: 36px;

    font-weight: 600;

    line-height: 1.15;
}


.brand-subtitle {

    display: block;

    margin-top: 2px;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.2;
}


.main-navigation {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-left: auto;
}


.nav-link {
    display: inline-flex;

    justify-content: center;
    align-items: center;

    min-height: 44px;

    padding: 9px 18px;

    border-radius: 22px;

    color: #36506B;

    text-decoration: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    font-weight: 600;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}


.nav-link:hover,
.nav-link:focus-visible {
    color: #ffffff;

    background: #36506B;
}


.nav-link.active {
    color: #ffffff;

    background: #36506B;
}


.mobile-menu-button {
    display: none;

    width: 46px;
    height: 44px;

    padding: 9px;

    margin-left: auto;

    border: 0;
    border-radius: 10px;

    background: transparent;

    cursor: pointer;
}


.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    border-radius: 2px;

    background: #36506B;
}



/* ========================================================
 * PAGINE INTERNE
 * ======================================================== */

.internal-page {
    width: 100%;

    padding:
        70px
        24px;
}


.page-content {
    width: min(100%, 1000px);

    margin: 0 auto;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #333333;
}


.page-content h1 {
    margin:
        0
        0
        28px;

    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    font-size: 56px;
    font-weight: 600;
}


.page-content p {
    margin: 0;

    font-size: 18px;

    line-height: 1.7;
}



/* ========================================================
 * SLE EDITIONS INFO
 * ======================================================== */

.editions-info {
    width: fit-content;
    max-width: calc(100% - 40px);

    margin:
        24px
        auto
        0;

    text-align: center;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.editions-line {
    width: 100%;
    height: 1px;

    margin:
        0
        auto
        12px;

    background: #36506B;
}


.editions-info p {
    margin: 0;

    color: #36506B;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.5;
}


/* ========================================================
 * LINK DEL SITO
 * ======================================================== */

.internal-page a:not(.site-brand):not(.nav-link) {
    display: inline-block;

    color: #36506B;
    background: transparent;

    border: 1px solid #36506B;
    border-radius: 8px;

    padding: 7px 12px;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}


.internal-page a:not(.site-brand):not(.nav-link):hover,
.internal-page a:not(.site-brand):not(.nav-link):focus-visible {
    color: #ffffff;
    background: #36506B;
}



/* ========================================================
 * SLE EDITIONS RESPONSIVE VISIBILITY
 * ======================================================== */

/*
 * Desktop:
 *
 * viene mostrata la frase originale:
 *
 * Sunset ... | Moon ...
 *
 * La tabella mobile rimane nascosta.
 */

.editions-desktop {
    display: block;
}


.editions-mobile {
    display: none;
}



/* ========================================================
 * SLE RESPONSIVE INTRO SVG
 * ======================================================== */

/*
 * Default / desktop:
 * lo SVG mobile rimane nascosto.
 */

.intro-writing-mobile {
    display: none;
}


/* ========================================================
 * SLE AUTH FORMS
 * ======================================================== */

.auth-page {
    max-width: 560px;
}

.auth-form,
.account-card {
    width: 100%;
    box-sizing: border-box;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    color: #36506B;
    font-weight: 600;
}

.auth-field input {
    width: 100%;
    box-sizing: border-box;

    padding: 11px 13px;

    border: 1px solid rgba(54, 80, 107, 0.55);
    border-radius: 8px;

    font: inherit;
}

.auth-field input:focus {
    outline: 2px solid rgba(54, 80, 107, 0.25);
    border-color: #36506B;
}

.auth-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 44px;

    padding: 9px 22px;

    border: 1px solid #36506B;
    border-radius: 22px;

    color: #ffffff;
    background: #36506B;

    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.auth-message {
    margin-bottom: 20px;
    padding: 12px 14px;

    border-radius: 8px;
}

.auth-error {
    color: #36506B;
    border: 1px solid #36506B;
    background: #ffffff;
}

.account-card h2 {
    margin-top: 28px;
}

.account-card form {
    margin-top: 28px;
}

/* SLE USER AREA - START */

.account-page {
    width: min(1180px, 92%);
    margin: 40px auto 80px;

    color: #36506B;
}

.account-section {
    margin-top: 38px;
}

.account-section h2 {
    margin-bottom: 18px;
}


/*
 * Riquadri
 */

.account-card,
.event-booking-card,
.booking-history-card,
.language-row {
    box-sizing: border-box;

    margin-bottom: 16px;
    padding: 20px;

    border: 1px solid rgba(54, 80, 107, 0.20);
    border-radius: 14px;

    background: #fff;
}


/*
 * Profilo
 */

.account-profile-label {
    display: block;

    margin-bottom: 5px;

    font-size: 0.82rem;
    font-weight: 600;

    opacity: 0.75;
}

.account-profile-value {
    display: block;

    font-size: 1rem;
    font-weight: 600;

    overflow-wrap: anywhere;
}


/*
 * Lingue e form
 */

.language-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;
}

.language-row form,
.account-inline-form {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


/*
 * Select
 */

.account-page select {
    min-height: 42px;

    padding: 8px 34px 8px 14px;

    color: #36506B;
    background: #fff;

    border: 1px solid #36506B;
    border-radius: 8px;

    font: inherit;
}

.account-page select:focus {
    outline: 2px solid rgba(54, 80, 107, 0.20);
    outline-offset: 2px;
}


/*
 * Pulsanti:
 * stesso linguaggio grafico dei pulsanti del sito/login.
 */

.account-page button {
    min-height: 42px;

    padding: 9px 20px;

    color: #fff;
    background: #36506B;

    border: 1px solid #36506B;
    border-radius: 22px;

    font: inherit;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.account-page button:hover,
.account-page button:focus-visible {
    color: #36506B;
    background: #fff;
}


/*
 * Azioni distruttive.
 * Manteniamo la stessa palette del sito:
 * niente rosso estraneo alla grafica generale.
 */

.account-page .button-danger {
    color: #36506B;
    background: #fff;

    white-space: nowrap;
}

.account-page .button-danger:hover,
.account-page .button-danger:focus-visible {
    color: #fff;
    background: #36506B;
}


/*
 * Eventi / storico
 */

.event-booking-card h3,
.booking-history-card h3 {
    margin-top: 0;
}

/* SLE USER AREA - END */

/* SLE ACCOUNT SITE STYLE - START */


/*
 * L'account usa internal-page e quindi eredita
 * tipografia e impostazione grafica delle altre
 * pagine del sito.
 */


/*
 * Titoli delle sezioni.
 *
 * Il titolo H1 rimane quello della internal-page,
 * quindi con lo stesso carattere grande/calligrafico
 * delle altre pagine.
 *
 * Gli H2 mantengono la stessa famiglia tipografica
 * del sito e il colore principale.
 */

.account-page .account-section h2 {
    margin-top: 0;
    margin-bottom: 20px;

    color: #36506B;

    font-family: inherit;
    font-size: 28px;
    font-weight: 600;
}


/*
 * Titolo interno "Aggiungi lingua".
 */

.account-page .account-card h3 {
    margin-top: 0;
    margin-bottom: 16px;

    color: #36506B;

    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
}


/*
 * Le lingue devono essere immediatamente leggibili.
 */

.account-page .language-row strong {
    min-width: 150px;

    color: #36506B;

    font-size: 16px;
    font-weight: 600;
}


/*
 * Select coerenti con la palette del sito.
 */

.account-page select {
    color: #36506B;

    background-color: #fff;

    border: 1px solid #36506B;
    border-radius: 22px;

    padding-left: 16px;
    padding-right: 34px;
}


/*
 * Tutti i pulsanti dell'account riprendono
 * l'impostazione della navigazione e del login.
 */

.account-page button {
    color: #fff;

    background: #36506B;

    border: 1px solid #36506B;
    border-radius: 22px;

    padding-left: 20px;
    padding-right: 20px;

    font-family: inherit;
    font-weight: 600;
}

.account-page button:hover,
.account-page button:focus-visible {
    color: #36506B;

    background: #fff;
}


/*
 * Elimina / Cancella:
 * rimangono graficamente coerenti,
 * ma invertiti per distinguerli dalle azioni principali.
 */

.account-page .button-danger {
    color: #36506B;

    background: #fff;

    border: 1px solid #36506B;
}

.account-page .button-danger:hover,
.account-page .button-danger:focus-visible {
    color: #fff;

    background: #36506B;
}


/*
 * Area aggiunta lingua.
 */

.account-page .account-inline-form {
    width: 100%;
}


/*
 * Migliore separazione delle sezioni.
 */

.account-page .account-section {
    margin-top: 44px;
}


/* SLE ACCOUNT SITE STYLE - END */

/* SLE ACCOUNT FONT FIX - START */

/*
 * L'area account deve utilizzare la stessa tipografia
 * generale del resto del sito.
 */

.account-page,
.account-page p,
.account-page span,
.account-page strong,
.account-page label,
.account-page select,
.account-page option,
.account-page button,
.account-page input {
    font-family: inherit;
}


/*
 * Anche i controlli HTML devono ereditare esplicitamente
 * il font: alcuni browser altrimenti utilizzano il proprio
 * font predefinito.
 */

.account-page select,
.account-page button,
.account-page input {
    font: inherit;
}


/* SLE ACCOUNT FONT FIX - END */

/* SLE ACCOUNT TYPOGRAPHY - START */


/*
 * ========================================================
 * LOGO
 * ========================================================
 *
 * Deve rimanere Dancing Script anche nell'area account.
 */

.account-page ~ * .site-brand,
.site-brand {
    font-family:
        "Dancing Script",
        cursive;
}


/*
 * ========================================================
 * TESTO ACCOUNT
 * ========================================================
 *
 * NON deve ereditare Georgia / Times New Roman dal body.
 * Utilizziamo la stessa famiglia di .page-content.
 */

.account-page,
.account-page p,
.account-page span:not(.brand-title):not(.brand-subtitle),
.account-page strong,
.account-page label,
.account-page form,
.account-page select,
.account-page option,
.account-page input,
.account-page button,
.account-page .account-profile-value,
.account-page .language-row,
.account-page .event-booking-card,
.account-page .booking-history-card {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/*
 * ========================================================
 * TITOLO PRINCIPALE
 * ========================================================
 *
 * "Il mio account"
 *
 * Stesso stile degli H1 delle altre pagine.
 */

.account-page h1 {
    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    font-size: 56px;
    font-weight: 600;
    font-style: normal;

    line-height: 1.15;
}


/*
 * ========================================================
 * TITOLI SEZIONI
 * ========================================================
 *
 * Profilo
 * Le mie lingue
 * Eventi disponibili
 * Le mie prenotazioni
 */

.account-page .account-section > h2 {
    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    font-size: 38px;
    font-weight: 600;
    font-style: normal;

    line-height: 1.15;
}


/*
 * ========================================================
 * TITOLI INTERNI
 * ========================================================
 *
 * Esempio:
 * Aggiungi lingua
 */

.account-page .account-card > h3 {
    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    font-size: 29px;
    font-weight: 600;
    font-style: normal;

    line-height: 1.15;
}


/*
 * ========================================================
 * CONTROLLI
 * ========================================================
 *
 * Select e bottoni devono usare Arial,
 * non il font predefinito del browser.
 */

.account-page select,
.account-page option,
.account-page input,
.account-page button {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/*
 * Il precedente fix usava "inherit".
 * Queste regole hanno la precedenza e impediscono
 * il ritorno a Georgia / Times New Roman.
 */

.account-page .account-profile-label,
.account-page .account-profile-value {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* SLE ACCOUNT TYPOGRAPHY - END */

/* SLE ACCOUNT DEFINITIVE STYLE - START */


/* ========================================================
 * ACCOUNT - SPAZIATURA GENERALE
 * ======================================================== */

.internal-page.account-page {
    width: 100%;

    padding:
        30px
        24px
        55px;
}

.account-page {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ========================================================
 * LOGO HEADER
 * ======================================================== */

.site-header .site-brand,
.site-header .site-brand .brand-title,
.site-header .site-brand .brand-subtitle {
    font-family:
        "Dancing Script",
        cursive;
}


/* ========================================================
 * TITOLO PRINCIPALE
 * ======================================================== */

.account-page h1 {
    margin:
        0
        0
        24px;

    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    font-size: 56px;
    font-weight: 600;
    font-style: normal;

    line-height: 1.05;
}


/* ========================================================
 * SEZIONI
 * ======================================================== */

.account-page .account-section {
    margin-top: 26px;
}

.account-page .account-section:first-of-type {
    margin-top: 0;
}


/*
 * Profilo
 * Le mie lingue
 * Eventi disponibili
 * Le mie prenotazioni
 */

.account-page .account-section > h2 {
    margin:
        0
        0
        14px;

    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    font-size: 38px;
    font-weight: 600;
    font-style: normal;

    line-height: 1.05;
}


/* ========================================================
 * H3 ACCOUNT
 * ======================================================== */

/*
 * Aggiungi lingua
 * ed eventuali altri sottotitoli.
 */

.account-page .account-card > h3 {
    margin:
        0
        0
        14px;

    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    font-size: 29px;
    font-weight: 600;
    font-style: normal;

    line-height: 1.05;
}


/* ========================================================
 * TESTO NORMALE
 * ======================================================== */

.account-page p,
.account-page label,
.account-page strong,
.account-page select,
.account-page option,
.account-page input,
.account-page button,
.account-page .account-profile-label,
.account-page .account-profile-value,
.account-page .language-row,
.account-page .event-booking-card,
.account-page .booking-history-card {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* ========================================================
 * BOX
 * ======================================================== */

.account-page .account-card,
.account-page .event-booking-card,
.account-page .booking-history-card,
.account-page .language-row {
    margin-bottom: 14px;
}


/* ========================================================
 * PROFILO
 * ======================================================== */

.account-page .account-profile-label {
    font-size: 13px;
    font-weight: 600;
}

.account-page .account-profile-value {
    font-size: 16px;
    font-weight: 600;
}


/* ========================================================
 * LINGUE
 * ======================================================== */

.account-page .language-row strong {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    font-weight: 600;
}


/* ========================================================
 * SELECT
 * ======================================================== */

.account-page select {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #36506B;

    background: #ffffff;

    border:
        1px solid
        #36506B;

    border-radius: 22px;
}


/* ========================================================
 * BUTTON
 * ======================================================== */

.account-page button {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #ffffff;

    background: #36506B;

    border:
        1px solid
        #36506B;

    border-radius: 22px;

    cursor: pointer;
}

.account-page button:hover,
.account-page button:focus-visible {
    color: #36506B;

    background: #ffffff;
}


.account-page .button-danger {
    color: #36506B;

    background: #ffffff;
}

.account-page .button-danger:hover,
.account-page .button-danger:focus-visible {
    color: #ffffff;

    background: #36506B;
}


/* SLE ACCOUNT DEFINITIVE STYLE - END */

/* SLE ACCOUNT NO TITLE - START */

/*
 * Non essendoci più "Il mio account",
 * Profilo parte subito sotto la testata.
 */

.internal-page.account-page {
    padding-top: 18px;
}

/*
 * La prima sezione non deve aggiungere
 * ulteriore spazio sopra Profilo.
 */

.account-page .account-section:first-of-type {
    margin-top: 0;
}

/*
 * Profilo resta vicino alla testata,
 * mantenendo un piccolo spazio sotto
 * prima della scheda utente.
 */

.account-page .account-section:first-of-type > h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

/* SLE ACCOUNT NO TITLE - END */

/* SLE ACCOUNT CARD LAYOUT - START */


/* ========================================================
 * DASHBOARD
 * ======================================================== */

.account-dashboard {
    width: 100%;
}


/* ========================================================
 * PANNELLI PRINCIPALI
 * ======================================================== */

.account-page .account-panel {
    margin-top: 18px;

    padding: 20px;

    border:
        1px solid
        rgba(54, 80, 107, 0.22);

    border-radius: 15px;

    background: #ffffff;
}


.account-page .account-dashboard > .account-panel {
    margin-top: 0;
}


/* ========================================================
 * TITOLI PANNELLI
 * ======================================================== */

.account-page .account-panel > h2,
.account-page .account-panel-heading > h2 {
    margin: 0 0 16px;

    color: #36506B;

    font-family:
        "Dancing Script",
        cursive;

    font-size: 38px;
    font-weight: 600;

    line-height: 1.05;
}


/* ========================================================
 * HEADER PANNELLO LINGUE
 * ======================================================== */

.account-panel-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 16px;
}


.account-page .account-panel-heading > h2 {
    margin-bottom: 0;
}


/* ========================================================
 * PULSANTE +
 * ======================================================== */

.account-page .language-add-toggle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    padding: 0;

    color: #36506B;

    background: #ffffff;

    border:
        1px solid
        #36506B;

    border-radius: 50%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 25px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;
}


.account-page .language-add-toggle:hover,
.account-page .language-add-toggle:focus-visible {
    color: #ffffff;

    background: #36506B;
}


/* ========================================================
 * PROFILO VERTICALE
 * ======================================================== */

.account-page .account-profile {
    display: flex;

    flex-direction: column;

    gap: 0;

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;
}


.account-page .account-profile-item {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 12px 0;
}


.account-page .account-profile-item:first-child {
    padding-top: 0;
}





.account-page .account-profile-label {
    color: rgba(54, 80, 107, 0.75);

    font-size: 13px;
    font-weight: 600;
}


.account-page .account-profile-value {
    color: #36506B;

    font-size: 16px;
    font-weight: 600;
}


/* ========================================================
 * LINGUE
 * ======================================================== */

.account-page .language-row {
    display: flex;

    align-items: center;

    gap: 8px;

    width: 100%;

    margin: 0;

    padding: 10px 0;

    border: 0;

    border-top:
        1px solid
        rgba(54, 80, 107, 0.14);

    border-radius: 0;

    background: transparent;
}


.account-page .language-row:first-of-type {
    border-top: 0;
}


.account-page .language-row > form:first-child {
    display: flex;

    align-items: center;

    gap: 8px;

    flex: 1 1 auto;

    min-width: 0;
}


.account-page .language-row > form:last-child {
    display: flex;

    flex: 0 0 auto;

    margin: 0;
}


.account-page .language-row strong {
    flex: 1 1 auto;

    min-width: 110px;

    color: #36506B;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    font-weight: 600;
}


.account-page .language-row select {
    flex: 0 0 130px;

    width: 130px;

    min-width: 0;
}


.account-page .language-row button {
    flex: 0 0 auto;
}


/* ========================================================
 * AGGIUNTA LINGUA
 * ======================================================== */

.account-page .language-add-panel {
    margin-top: 10px;

    padding-top: 14px;

    border-top:
        1px solid
        rgba(54, 80, 107, 0.18);
}


.account-page .language-add-panel[hidden] {
    display: none !important;
}


.account-page .language-add-form {
    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0;
}


.account-page .language-add-form select:first-of-type {
    flex: 1 1 auto;

    min-width: 150px;
}


.account-page .language-add-form select:nth-of-type(2) {
    flex: 0 0 130px;

    width: 130px;
}


/* SLE ACCOUNT CARD LAYOUT - END */

/* SLE ACCOUNT EDIT MODE - START */


/* ========================================================
 * PANNELLI
 * ======================================================== */

.account-page .account-panel {
    box-sizing: border-box;

    min-width: 0;

    padding: 20px;

    border:
        1px solid
        rgba(54, 80, 107, 0.22);

    border-radius: 15px;

    background: #ffffff;
}


/* ========================================================
 * HEADER PANNELLI
 * ======================================================== */

.account-page .account-panel-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 16px;
}


.account-page .account-panel-heading h2 {
    margin: 0;
}


/* ========================================================
 * PENNA MODIFICA
 * ======================================================== */

.account-page .account-edit-toggle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    padding: 0;

    color: #36506B;

    background: transparent;

    border:
        1px solid
        rgba(54, 80, 107, 0.35);

    border-radius: 50%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;
}


.account-page .account-edit-toggle:hover,
.account-page .account-edit-toggle:focus-visible {
    color: #ffffff;

    background: #36506B;

    border-color: #36506B;
}


/* ========================================================
 * PROFILO - VISUALIZZAZIONE
 * ======================================================== */

.profile-view {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        150px;

    gap: 22px;

    align-items: start;
}


.profile-data {
    min-width: 0;

    text-align: left;
}


.profile-data .account-profile-item {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    padding: 11px 0;

    text-align: left;
}


.profile-data .account-profile-item:first-child {
    padding-top: 0;
}



.profile-photo {
    display: flex;

    justify-content: flex-end;

    align-items: flex-start;
}


.profile-photo img,
.profile-photo-placeholder {
    display: block;

    width: 140px;
    height: 140px;

    border-radius: 15px;

    object-fit: cover;
}


.profile-photo img {
    border:
        1px solid
        rgba(54, 80, 107, 0.18);
}


.profile-photo-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    color: #36506B;

    background:
        rgba(54, 80, 107, 0.08);

    border:
        1px solid
        rgba(54, 80, 107, 0.18);

    font-family:
        "Dancing Script",
        cursive;

    font-size: 54px;
    font-weight: 600;
}


/* ========================================================
 * PROFILO - MODIFICA
 * ======================================================== */

.profile-edit-form[hidden],
.languages-edit[hidden],
.languages-view[hidden],
.profile-view[hidden],
.language-add-panel[hidden] {
    display: none !important;
}


.profile-edit-fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


.profile-edit-fields label {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 6px;
}


.profile-edit-fields label > span {
    color: #36506B;

    font-size: 13px;
    font-weight: 600;
}


.profile-edit-fields input[type="text"],
.profile-edit-fields input[type="email"],
.profile-edit-fields input[type="file"] {
    box-sizing: border-box;

    width: 100%;

    min-width: 0;

    padding: 9px 12px;

    color: #36506B;

    background: #ffffff;

    border:
        1px solid
        rgba(54, 80, 107, 0.4);

    border-radius: 10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}


.profile-photo-input small {
    color: #666666;

    font-size: 12px;
}


.profile-edit-actions {
    display: flex;

    gap: 8px;

    margin-top: 16px;
}


/* ========================================================
 * LINGUE - VISUALIZZAZIONE
 * ======================================================== */

.language-view-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 20px;

    align-items: center;

    padding: 11px 0;

    color: #36506B;
}


.language-view-row +
.language-view-row {
    border-top:
        1px solid
        rgba(54, 80, 107, 0.12);
}


.language-view-row strong {
    min-width: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
}


.language-view-row span {
    text-align: right;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
}


/* ========================================================
 * LINGUE - MODIFICA
 * ======================================================== */

.language-edit-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 8px;

    align-items: center;

    padding: 9px 0;
}


.language-edit-row +
.language-edit-row {
    border-top:
        1px solid
        rgba(54, 80, 107, 0.12);
}


.language-save-form {
    display: grid;

    grid-template-columns:
        minmax(110px, 1fr)
        120px
        auto;

    gap: 8px;

    align-items: center;

    min-width: 0;
}


.language-save-form strong {
    min-width: 0;

    color: #36506B;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.language-save-form select {
    width: 120px;
}


.language-delete-form {
    margin: 0;
}


.languages-edit >
.language-add-toggle {
    width: auto;
    height: auto;

    margin-top: 14px;

    padding: 8px 14px;

    border-radius: 20px;

    font-size: 14px;
}


.language-add-panel {
    margin-top: 12px;

    padding-top: 12px;

    border-top:
        1px solid
        rgba(54, 80, 107, 0.15);
}


.language-add-form {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        120px
        auto;

    gap: 8px;

    align-items: center;
}


/* ========================================================
 * PULSANTE SECONDARIO
 * ======================================================== */

.account-page .button-secondary {
    color: #36506B;

    background: #ffffff;
}


.account-page .button-secondary:hover,
.account-page .button-secondary:focus-visible {
    color: #ffffff;

    background: #36506B;
}


/* SLE ACCOUNT EDIT MODE - END */


/* Logout nella navigazione */
.nav-logout-form {
    margin: 0;
    padding: 0;
}

.nav-logout-button {
    border: 0;
    cursor: pointer;
}


/* SLE ADMIN EVENTS - START */


/* Matita perfettamente circolare */

.account-page .account-edit-toggle {
    min-width: 36px;
    min-height: 36px;

    flex: 0 0 36px;

    aspect-ratio: 1 / 1;
}


/* Gestione eventi */

.admin-events-edit[hidden],
.admin-events-preview[hidden] {
    display: none !important;
}


.admin-events-period {
    display: grid;

    grid-template-columns:
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        auto;

    gap: 12px;

    align-items: end;
}


.admin-events-period label {
    display: flex;

    flex-direction: column;

    gap: 6px;
}


.admin-events-period label > span {
    color: #36506B;

    font-size: 13px;
    font-weight: 600;
}


.admin-events-period input[type="date"] {
    box-sizing: border-box;

    width: 100%;

    padding: 9px 12px;

    color: #36506B;

    background: #ffffff;

    border:
        1px solid
        rgba(54, 80, 107, 0.4);

    border-radius: 10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}


.admin-events-preview {
    margin-top: 18px;
}


.admin-events-preview-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 10px;
}


.admin-events-list {
    max-height: 360px;

    overflow-y: auto;

    padding: 4px 12px;

    border:
        1px solid
        rgba(54, 80, 107, 0.18);

    border-radius: 12px;

    background: #ffffff;
}


.admin-event-row {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    gap: 12px;

    align-items: start;

    padding: 12px 2px;

    border-bottom:
        1px solid
        rgba(54, 80, 107, 0.12);

    cursor: pointer;
}


.admin-event-row:last-child {
    border-bottom: 0;
}


.admin-event-checkbox {
    margin-top: 3px;
}


.admin-event-content {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


.admin-event-content strong {
    color: #36506B;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}


.admin-event-content > span {
    color: #666666;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
}


.admin-events-summary {
    margin:
        10px
        0
        0;

    color: #36506B;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
}


/* SLE ADMIN EVENTS - END */


/*
 * ========================================================
 * FILTRO EVENTI DISPONIBILI
 * ========================================================
 */

.events-filter-form {
    margin-bottom: 18px;
}

.events-filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.events-filter-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.events-filter-fields label span {
    font-weight: 600;
}

.events-filter-fields input[type="date"] {
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #9aaabd;
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

.events-filter-fields button,
.events-filter-fields .account-secondary-button {
    min-height: 38px;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
}


/* Filtro Eventi disponibili: etichette e date sulla stessa riga */

.events-filter-fields {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.events-filter-fields label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.events-filter-fields label span {
    margin: 0;
    white-space: nowrap;
}

.events-filter-fields input[type="date"] {
    width: auto;
}


/*
 * ========================================================
 * CONTROLLI PRENOTAZIONE EVENTO
 * ========================================================
 */

.account-page .event-booking-card .account-inline-form {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
}

.account-page .event-booking-card
.account-inline-form select[name="language_id"] {
    flex: 0 0 225px;
    width: 225px;
    min-width: 0;
}

.account-page .event-booking-card
.account-inline-form .booking-guest-mode {
    flex: 0 0 120px;
    width: 120px;
    min-width: 0;
}

.account-page .event-booking-card
.account-inline-form .booking-additional-guests {
    flex: 0 0 65px;
    width: 65px;
    min-width: 65px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #36506B;
    border-radius: 20px;
    background: #fff;
    font: inherit;
}

.account-page .event-booking-card
.account-inline-form .booking-additional-guests[hidden] {
    display: none;
}

.account-page .event-booking-card
.account-inline-form button[type="submit"] {
    flex: 0 0 90px;
    width: 90px;
    min-width: 90px;
}

/*
 * ========================================================
 * ADMIN LOCALI
 * ========================================================
 */

.admin-venues-edit[hidden],
.admin-venue-form[hidden] {
    display: none !important;
}

.admin-venues-edit {
    margin-top: 14px;
}

.admin-venue-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.admin-venue-selector > span,
.admin-venue-fields label > span {
    color: #36506B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.admin-venue-selector select {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px;
    color: #36506B;
    background: #ffffff;
    border: 1px solid rgba(54, 80, 107, 0.4);
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.admin-venue-fields {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-venue-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.admin-venue-fields input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    color: #36506B;
    background: #ffffff;
    border: 1px solid rgba(54, 80, 107, 0.4);
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.admin-venue-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.admin-venue-actions-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

@media (max-width: 768px) {
    .admin-venue-fields {
        grid-template-columns: 1fr;
    }

    .admin-venue-actions {
        flex-wrap: wrap;
    }

    .admin-venue-actions-left {
        flex-wrap: wrap;
    }
}
/*
 * ========================================================
 * ADMIN AGGIUNGI LOCALE
 * ========================================================
 */

.account-page .venue-add-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 8px 14px;

    color: #36506B;
    background: #ffffff;

    border: 1px solid #36506B;
    border-radius: 18px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 500;

    cursor: pointer;
}

.account-page .venue-add-toggle:hover,
.account-page .venue-add-toggle:focus-visible {
    color: #ffffff;
    background: #36506B;
}

.account-page .venue-add-panel {
    margin-top: 10px;
    padding-top: 14px;

    border-top:
        1px solid
        rgba(54, 80, 107, 0.18);
}

.account-page .venue-add-panel[hidden] {
    display: none !important;
}

.account-page .venue-add-form {
    margin: 0;
}

.account-page .venue-add-form select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;

    padding: 9px 12px;

    color: #36506B;
    background: #ffffff;

    border:
        1px solid
        rgba(54, 80, 107, 0.4);

    border-radius: 10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}


/*
 * ========================================================
 * ADMIN LOCALI - LISTA ESPANDIBILE
 * ========================================================
 */

.admin-venue-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.admin-venue-item {
    padding: 8px 0;

    border-bottom:
        1px solid
        rgba(54, 80, 107, 0.18);
}

.admin-venue-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        140px;

    gap: 18px;
    align-items: end;
}

.account-page .admin-venue-expand {
    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 8px 0;

    color: #36506B;
    background: transparent;

    border: 0;
    border-radius: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    font-weight: 600;

    text-align: left;
    cursor: pointer;
}

.admin-venue-expand-symbol {
    flex: 0 0 18px;

    width: 18px;

    font-size: 18px;
    font-weight: 400;
    line-height: 1;

    text-align: center;
}

.admin-venue-row-name {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-venue-row-status {
    display: flex;
    flex-direction: column;
    gap: 4px;

    margin: 0;
}

.admin-venue-row-status > span {
    color: #36506B;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
    font-weight: 600;
}

.admin-venue-row-status select {
    box-sizing: border-box;

    width: 100%;

    margin: 0;
    padding: 7px 9px;

    color: #36506B;
    background: #fff;

    border:
        1px solid
        rgba(54, 80, 107, 0.4);

    border-radius: 9px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
}

.admin-venue-item .admin-venue-form {
    margin-top: 10px;
    padding-top: 14px;

    border-top:
        1px solid
        rgba(54, 80, 107, 0.12);
}

.admin-venue-item .admin-venue-actions {
    display: flex;
    justify-content: flex-end;

    margin-top: 16px;
}

.account-page #venue-add-toggle {
    margin-top: 8px;
}

@media (max-width: 768px) {

    .admin-venue-row {
        grid-template-columns:
            minmax(0, 1fr)
            115px;

        gap: 10px;
    }
}
/*
 * ========================================================
 * SLE CONTACT FORM
 * ========================================================
 */

.contact-page {
    max-width: 850px;
    color: #36506B;
}

.contact-page p,
.contact-page label,
.contact-page .contact-note,
.contact-page .contact-reach-note,
.contact-page .form-privacy,
.contact-page .contact-email {
    color: #36506B;
}

.contact-intro {
    margin: 25px 0 30px;
    line-height: 1.6;
}

.contact-note {
    font-size: 0.92rem;
    color: #666666;
}

.contact-form {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 22px;

    max-width: 720px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-row label {
    font-size: 0.95rem;
}

.form-row input,
.form-row textarea {
    box-sizing: border-box;

    width: 100%;
    padding: 12px 14px;

    border: 1px solid #cccccc;
    border-radius: 12px;

    background: #ffffff;
    color: #222222;

    font: inherit;
}

.form-row textarea {
    resize: vertical;
    min-height: 160px;
}

.form-row input:focus,
.form-row textarea:focus {
    outline: 1px solid #36506B;
    border-color: #36506B;
}

.contact-reach-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-reach-note {
    margin: -12px 0 0;

    color: #666666;

    font-size: 0.85rem;
}

.form-privacy label {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    line-height: 1.5;
    font-size: 0.9rem;
}

.form-privacy input {
    margin-top: 3px;
}

.contact-submit {
    align-self: flex-start;

    padding: 12px 24px;

    border: 1px solid #36506B;
    border-radius: 24px;

    background: #ffffff;
    color: #36506B;

    font: inherit;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.contact-submit:hover {
    background: #36506B;
    color: #ffffff;
}

.form-message {
    max-width: 720px;

    margin: 25px 0;
    padding: 14px 16px;

    border-radius: 12px;
}

.form-success {
    border: 1px solid #789678;
}

.form-error {
    border: 1px solid #a87878;
}

.form-honeypot {
    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}

.contact-email {
    margin-top: 32px;
}

@media (max-width: 768px) {

    .contact-reach-row {
        grid-template-columns: 1fr;
    }
}
/* Contact form - azioni finali */

.contact-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
}

.contact-actions .contact-submit {
    flex: 0 0 auto;
}

.contact-actions .contact-email {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

@media (max-width: 768px) {

    .contact-actions {
        flex-wrap: wrap;
    }

    .contact-actions .contact-email {
        white-space: normal;
        flex-wrap: wrap;
    }
}


/* ========================================================
   CONFIGURAZIONE EMAIL ADMIN
   ======================================================== */

.email-config-item {
    margin: 14px 0;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 0 14px;
}

.email-config-item summary {
    cursor: pointer;
    padding: 14px 0;
    font-weight: 600;
}

.email-config-item .admin-venue-form {
    padding: 4px 0 16px;
}

.email-config-new {
    margin-bottom: 28px;
}

.email-purpose-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.email-purpose-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.email-purpose-fields select,
.email-purpose-fields input {
    width: 100%;
}

@media (max-width: 768px) {

    .email-purpose-fields {
        grid-template-columns: 1fr;
    }
}

/* Configurazione email - campi uniformemente arrotondati */

#email-config-edit input[type="text"],
#email-config-edit input[type="email"],
#email-config-edit input[type="password"],
#email-config-edit input[type="number"],
#email-config-edit select {
    border-radius: 22px;
    min-height: 42px;
    padding: 8px 14px;
}


/* ========================================================
 * EVENTI PUBBLICI
 * ======================================================== */

.public-events {
    width: 100%;
    max-width: 1400px;

    margin: 48px auto 0;
}

.public-events h2 {
    margin-bottom: 24px;

    color: #36506B;

    font-size: 28px;
    font-weight: 600;
}

.public-events-list {
    display: grid;

    gap: 18px;
}

.public-event {
    padding: 22px 24px;

    border:
        1px solid rgba(54, 80, 107, 0.18);

    border-radius: 22px;

    background: #ffffff;
}

.public-event-date {
    margin-bottom: 8px;

    color: #36506B;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: 600;
}

.public-event h3 {
    margin: 0 0 8px;

    color: #36506B;

    font-size: 23px;
}

.public-event-venue {
    margin-bottom: 3px;

    font-weight: 600;
}

.public-event-address,
.public-events-empty {
    color: #5d6670;
}

@media (max-width: 768px) {

    .public-events {
        margin-top: 32px;
    }

    .public-events h2 {
        font-size: 24px;
    }

    .public-event {
        padding: 18px;

        border-radius: 18px;
    }

    .public-event h3 {
        font-size: 21px;
    }
}


/* Eventi pubblici raggruppati per giorno */

.public-events-days {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.public-events-day-title {
    margin: 0 0 10px;
    color: #36506B;
    font-size: 18px;
    font-weight: 600;
}

.public-events-day-list {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.public-events-day-list .public-event h4 {
    margin: 0 0 8px;
    color: #36506B;
    font-size: 23px;
}

@media (max-width: 768px) {

    .public-events-day-list {
        grid-template-columns: 1fr;
    }

    .public-events-day-list .public-event h4 {
        font-size: 21px;
    }
}

/* Eventi pubblici: due date per riga su desktop */

.public-events-days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
}

.public-events-day {
    min-width: 0;
}

.public-events-day-list {
    grid-template-columns: 1fr;
}

@media (max-width: 768px) {

    .public-events-days {
        grid-template-columns: 1fr;
    }
}

/* Nome locale negli eventi pubblici */

.public-event-venue {
    color: #36506B;
}

/* Navigazione mensile eventi */

.events-month-navigation {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.events-month-navigation h2 {
    margin: 0;
}

.events-month-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #36506B;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    line-height: 1;
}

.events-month-arrow:hover {
    background: rgba(54, 80, 107, 0.08);
}

.events-month-arrow-disabled {
    opacity: 0.22;
    cursor: default;
}

/* Navigazione mese: frecce semplici */

.events-month-arrow {
    width: auto;
    height: auto;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.events-month-arrow:hover {
    background: transparent;
}

/* Indirizzo locale negli eventi pubblici */

.public-event-address {
    color: #36506B;
}

/* Titolo Eventi con navigazione mensile */

.events-page-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.events-page-title h1 {
    margin: 0;
    color: #36506B;
    font-family: "Dancing Script", cursive;
    font-size: 56px;
    font-weight: 600;
}

.public-events {
    margin-top: 32px;
}

/* ========================================================
 * PRENOTAZIONE PUBBLICA EVENTI
 * ======================================================== */

.public-event {
    cursor: pointer;
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.public-event:hover {
    border-color: rgba(54, 80, 107, 0.35);
    box-shadow: 0 6px 18px rgba(54, 80, 107, 0.08);
}

.public-event-booking-toggle {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #36506B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.public-event-booking-toggle::after {
    content: " +";
}

.public-event-booking-toggle[aria-expanded="true"]::after {
    content: " −";
}

.public-event-booking {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(54, 80, 107, 0.16);
    cursor: default;
}

.public-event-booking[hidden] {
    display: none;
}

.public-event-booking form {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 1.3fr)
        minmax(82px, 0.65fr)
        auto;
    gap: 8px;
    align-items: end;
}

.public-event-booking label {
    min-width: 0;
}

.public-event-booking label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #36506B;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.public-event-booking input,
.public-event-booking select {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(54, 80, 107, 0.28);
    border-radius: 22px;
    background: #ffffff;
    color: #36506B;
    font: inherit;
}

.public-booking-submit {
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    border-radius: 22px;
    background: #36506B;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.public-booking-success,
.public-booking-error {
    margin: 0 0 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.public-booking-success {
    color: #36506B;
}

.public-booking-error {
    color: #9b2c2c;
}

.public-event-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0;
    row-gap: 4px;
}

.public-event-heading .public-event-date {
    margin-bottom: 0;
}

.public-event-heading-separator {
    margin: 0 6px;
    color: #36506B;
}

.public-events-day-list .public-event-heading h4 {
    margin: 0;
}

.public-event-booking form {
    grid-template-columns:
        minmax(180px, 2fr)
        minmax(145px, 1.3fr)
        minmax(110px, 0.65fr)
        auto;
}

@media (min-width: 769px) and (max-width: 900px) {
    .public-event-booking form {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 768px) {

    .public-event-booking form {
        grid-template-columns: 1fr;
    }

    .public-booking-submit {
        width: 100%;
    }
}


/* ========================================================
 * ACCOUNT - MODIFICA PARTECIPANTI PRENOTAZIONE
 * ======================================================== */

.account-page .booking-history-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.account-page .booking-history-actions form {
    margin: 0;
}

.account-page .booking-edit-toggle {
    white-space: nowrap;
}

.account-page .booking-edit-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.account-page .booking-edit-form[hidden] {
    display: none;
}

.account-page .booking-edit-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.account-page .booking-edit-form input[name="guests"] {
    width: 65px;
    min-width: 65px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #36506B;
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

@media (max-width: 768px) {

    .account-page .booking-edit-form {
        width: 100%;
        margin-left: 0;
    }
}


/* Pulsanti azione prenotazione sulla stessa riga */

.account-page .booking-history-actions {
    flex-wrap: nowrap;
}

.account-page .booking-history-actions > form:first-child {
    flex: 0 0 auto;
    width: auto;
}

.account-page .booking-edit-toggle {
    flex: 0 0 auto;
    width: auto;
}

/* ========================================================
 * AVVISO COOKIE
 * ======================================================== */

.site-info {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10000;
    width: min(460px, calc(100% - 48px));
    padding: 18px 20px;
    border: 1px solid rgba(54, 80, 107, 0.22);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
    color: #36506B;
    font-family: Arial, Helvetica, sans-serif;
}

.site-info[hidden] {
    display: none;
}

.site-info-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-info-text {
    flex: 1;
}

.site-info-title {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

.site-info p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.site-info-close {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 18px;
    border: 0;
    border-radius: 22px;
    background: #36506B;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.site-info-close:hover,
.site-info-close:focus-visible {
    opacity: 0.88;
}

@media (max-width: 768px) {

    .site-info {
        right: 16px;
        bottom: 16px;
        width: calc(100% - 32px);
        padding: 16px;
    }

    .site-info-content {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .site-info-close {
        width: 100%;
    }
}

/* Eventi: intestazione compatta */
.public-event-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
}

.public-event-heading .public-event-date {
    flex: 0 0 auto;
    white-space: nowrap;
}

.public-event-heading-separator {
    display: none;
}

.public-events-day-list .public-event-heading h4 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

/* Modulo prenotazione: due colonne nella scheda */
.public-event-booking form {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 12px 10px;
}

.public-event-booking form > label,
.public-event-booking form > button {
    min-width: 0;
}

.public-event-booking form > label:nth-of-type(3) {
    grid-column: 1;
}

.public-event-booking form > .public-booking-submit {
    grid-column: 2;
    width: 100%;
}

@media (max-width: 768px) {
    .public-event-heading {
        flex-wrap: wrap;
    }
}

/* SLE ABOUT TEXT COLOR START */
.internal-page .page-content p {
    color: #36506B;
}
/* SLE ABOUT TEXT COLOR END */