/*
====================================================
    RESET INIZIALE
==================================================== 
*/

* {
    padding: 0em; 
    margin: 0em;
    box-sizing: border-box;
}

html, body{ 
    font-size: 100%; 
    font-family:"Noto Sans", "Roboto", sans-serif; 
    line-height: 1.5em;
}

body {
    background-color: var(--clearBgColor);
    color: var(--txtcolor);
    padding-top: var(--padding-top-style);
}

*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--txtcolor);
    outline-offset: 2px;
    border-radius: var(--radius-base);
}


/*
====================================================
    VARIABILI
==================================================== 
*/

:root { 
    /*colori*/
    --BgColor: #83adf0; 
    --breadColor: #83adf0;
    --bgclearBlue: #c7daf9;
    --hoverNav: #d8e5fa; 
    --hoverCat: #fcf3ad;
    --txtcolor: #293845; 
    --txtNavColor: #080810; 
    --clearBgColor: #fffacd;
    --clearTxtColor: #fffacd;
    --call-to-actionColor: #16286e;
    --call-to-actionTransp: rgba(22, 40, 110, 0.65); /*0.65 opacità testata con https://codepen.io/yaphi1/pen/oNbEqGV */
    --call-to-actionAction: #fce36b;
    --visited: #931c98;
    --card: #d9e0ec;
    --eventiColor: #0565a8; 
    --esperimentiColor: #8736d1;
    --affittiColor: #c30d43;
    --ripetizioniColor: #0a7053;
    --required: #720b25;
    --caratteristicheImp: #9bbdf3;
    --formbg: #e8f0fd;
    --oscurato: #83888c;
    --altSpiegazione: #aec6ed;
    --altContr: #0565a8;
    --erroriBg: #e6a2a2;
    --erroriContr: #c30d43;
    --salutoBoxColor: #fdf088;

    /* scala tipografica */
    --fs-h2-titolo-sez: 1.5em;
    --fs-h3-titolo-card: 1.2em;
    --fs-base: 1em;
    --fs-breadcrumb-footer: 0.9em;
    --fs-legend: 1.2em;
    --fs-label-dt: 1.1em;
    --fs-spieg-err: 0.9em;

    /* spaziature */
    --padding-top-style: 7em;
    --padding-top-mini: 5em; 
    --padding-base: 0.5em 1em;
    --padding-riq: 0.8em;
    --gap-0-5: 0.5em;
    --gap-1: 1em;
    --gap-1-5: 1.5em;
    --gap-2: 2em;

    /* radius */
    --radius-base: 0.8em;
    --radius-0-5: 0.5em;
    --radius-1-5: 1.5em;
    --radius-round: 50%;


    /* shadow */
    --shadow-base: 0 0.3em 0.7em rgba(0,0,0,0.2);

    /*borders*/
    --btn-border: 2px solid var(--call-to-actionColor);

    /*transitions*/
    --btn-trans: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/*
====================================================
    SCALA TIPOGRAFICA
==================================================== 
*/

h2 {
    font-size: var(--fs-h2-titolo-sez);
    text-align: center;
    font-weight: 700;
}

h3 {
    font-size: var(--fs-h3-titolo-card);
    text-align: center;
    font-weight: 600;
}

label, dt {
    font-size: var(--fs-label-dt);
}

p, li, dd, span, a, button { 
    font-size: var(--fs-base); 
}

legend {
    font-size: var(--fs-legend);
    padding: 0 0.5em;
    font-weight: 600;
}

#breadcrumb, footer p, footer a { 
    font-size: var(--fs-breadcrumb-footer); 
}

body, p, li, dd {
    font-weight: 400;
}

label, button, .btn-base, input, select, textarea, dt {
    font-weight: 500;
}

/*
====================================================
    GENERICI
==================================================== 
*/

main {
    display: flex;
    flex-direction: column;
}

footer {
    margin-top: auto;
    padding: 2em 5em;
    background-color: var(--BgColor);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-0-5);
}

section {
   padding: 2em 6em; 
}

#saluto {
    padding: 1em 2em;
    padding-top: 0;
}

.errore {
   padding: 1em 8em 8em; 
}

#contenuto {
    scroll-margin-top: 6.5em;
    flex: 1; 
}

.aiuti {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); /*area visibile larga zero e alta zero*/
    color: var(--txtcolor);
}

.aiuti:focus {
    position: static; 
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    background: var(--clearBgColor);
    color: var(--txtcolor);
    padding: 0.5em;
}

fieldset:has(> legend.aiuti) {
    border: none;
}

.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-1);
}

.paragraph-link-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-0-5);
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap-0-5);
}

.print-only {
    display: none;
}
/*
====================================================
    BASI
==================================================== 
*/

/*
====================================================
    BASE: CARD-BASE
==================================================== 
*/

.card-base {
    border-radius: var(--radius-base);
    padding: 1.5em 1.5em 3.5em 1.5em;
    text-align: left;
    display: flex;
    position: relative;  
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-base:hover,
.card-base:focus {
    transform: scale(1.04);
    box-shadow: var(--shadow-base); 
}

.card-base a {
    position: absolute;
    inset: 0;           
    z-index: 1;
}

.card-base a:hover span, .card-base a:focus span {
    padding: var(--padding-base);
}

/* ------------- estensione per .categoria  ------------- */
.categoria {
    flex-direction: row;
    align-items: center;
    gap: var(--gap-1-5);
    background-color: var(--clearBgColor);
    color: var(--txtcolor);
    padding: 2.5em 2.5em 3.5em 2.5em;
}

.categoria img {
    width: 6.25em;
    height: auto;
    flex-shrink: 0;
}

li.categoria > div {
    display: flex;
    flex-direction: column;
    gap: var(--gap-0-5);
    flex: 1;
}

.categoria h3 {
    color: var(--clearTxtColor);
    padding: var(--padding-base);
    border-radius: var(--radius-base);
    transition: var(--btn-trans);
}

.categoria p {
    margin: 0;
}

.cat-link:hover  span, .cat-link:focus span{
    background-color: var(--hoverCat);
}

/* ------------- estensione per .carta ------------- */
.carta {
    background-color: var(--card);
    flex-direction: column;
    gap: var(--gap-1);
}

.carta img {
    max-width: 100%;
    border-radius: var(--radius-base);
    object-fit: cover;    
    display: block;
    align-self: center;
}

.carta dt {
    font-weight: 600;
    margin-top: 0.5em;
}

.carta dt::after {
    content: ":";
}

.carta::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5em;
    height: 2.5em;
    background-image: url("../assets/puntina.webp"); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
}

/*
====================================================
    BASE: BTN-BASE
==================================================== 
*/

.btn-base {
    color: var(--clearTxtColor); 
    background-color: var(--call-to-actionColor);
    border: var(--btn-border);
    border-radius: var(--radius-base);
    font-weight: bold;
    transition: var(--btn-trans);
    text-align: center;
}

.btn-base:hover, .btn-base:focus{
    background-color: var(--call-to-actionAction);
    color: var(--call-to-actionColor);
}

/* ------------- estensione per button ------------- */

button {
    align-self: center;
    margin-top: 0.8em; 
    width: 100%;
    min-height: 3em;
}

/* ------------- estensione per .call-to-action ------------- */

.link.call-to-action, #menu .link.call-to-action {
    color: var(--clearTxtColor);
}

.link.call-to-action:visited {
    color: var(--call-to-actionColor);
    background-color: var(--clearBgColor);
}

#menu .link.call-to-action:visited,
.paragraph-link-container .link.call-to-action:visited {
    background-color: var(--BgColor);
    color: var(--txtNavColor);
}

.link.call-to-action.annulla:visited {
    color: var(--clearTxtColor); 
    background-color: var(--call-to-actionColor);
}

#reset-btn {
    display: block;
    width: 100%;
    max-width: 21.25em; 
    margin: 0 auto;
    text-align: center;
}

#reset-btn::before {
    content: "↺";
    margin-right: 0.5em;
    font-size: var(--fs-h3-titolo-card);
}


.link.call-to-action:hover,
.link.call-to-action:focus,
#menu .link.call-to-action:hover,
#menu .link.call-to-action:focus,
#reset-btn.call-to-action:hover,
#reset-btn.call-to-action:focus,
.link.call-to-action.annulla:hover,
.link.call-to-action.annulla:focus,
.paragraph-link-container .link.call-to-action:hover,
.paragraph-link-container .link.call-to-action:focus {
    background-color: var(--call-to-actionAction);
    color: var(--call-to-actionColor);
}

/* ------------- estensione per #preferiti #salvato------------- */

#preferiti, #salvato {
    width: 12.5em;
    text-decoration: none;    
}

#preferiti.btn-base.call-to-action, #salvato.btn-base.call-to-action {
    text-align: center;
}

#preferiti::after {
    content: " Preferiti";
}

#salvato::after {
    content: " Salvato";
}

/*
====================================================
    BASE: RIQUADRO SPIEGAZIONE
==================================================== 
*/

.riquadro-spieg{
    color: var(--txtcolor);
    padding: var(--padding-riq);
    border-radius: var(--radius-base);
    margin-bottom: 0.5em;
    padding-left: 1.5em;
}

/* ------------- estensione per .alt-spiegazione ------------- */

.alt-spiegazione {
    background-color: var(--altSpiegazione);
    border-left: 4px solid var(--altContr);
}

.box-saluto {
    background-color: var(--salutoBoxColor);
    box-shadow: var(--shadow-base);
    color: var(--txtNavColor);
    max-width: 60em;
    margin: 0 auto;
    padding: 1em;
}

/* ------------- estensione per .messaggi-errore-form ------------- */

.messaggi-errore-form{
    background-color: var(--erroriBg);
    border-left: 4px solid var(--erroriContr);
    margin-top: 0.5em;
    align-self: center;
    width: 100%;
}

/*
.esempi, .indicazioni {
    font-size: small;
}
*/
/*
====================================================
    BASE: LINK
==================================================== 
*/

.link, #menu a { 
    text-decoration: underline; 
    text-underline-offset: 0.2em; 
    color: var(--txtNavColor); 
}


/* ============================================
   VISITED UNIVERSALE
   ============================================ */

a:visited {
    color: var(--visited);
}

#reset-btn:visited {
    color: var(--clearTxtColor); 
}

#menu .nav-links li a:visited, 
#breadcrumb li a:visited,
#site-map a:visited {
    color: var(--visited);
}

#menu .nav-links, #site-map {
    border-radius: var(--radius-1-5);
    background-color: var(--bgclearBlue);
    box-shadow: var(--shadow-base);
}


/* ------------- estensione per .card-base a > span ------------- */
.card-base a > span {
    position: absolute;
    bottom: 1em;
    right: 1em;
    z-index: 2;
    font-weight: bold;
    padding: var(--padding-base);
    border-radius: var(--radius-base);
    pointer-events: none;
    text-transform: none;
}

/* ------------- estensione per .call-to-action ------------- */

.call-to-action {
    padding: var(--padding-base);
}

/*
====================================================
    BASE: SEZIONE A COLONNA
==================================================== 
*/
.section-column {
    display: flex;
    flex-direction: column;
    text-align: center;
}

#categorie {
    background-color: var(--BgColor);
    gap: var(--gap-1);
}

.carte-section {
    gap: var(--gap-2);
    background-color: var(--clearBgColor);
}

#esplora {
    gap: var(--gap-1-5);
    padding: 2em;
}

#profilo {
    gap: var(--gap-0-5);
    padding: 2em;
}

#about-us .section-column {
    gap: var(--gap-1);
    padding: 0.5em;
}

.no-underline {
    text-decoration: none;
}


/*
====================================================
    NUMERO RISULTATI
==================================================== 
*/

.titolo-num-risultati {
    display: flex;
    flex-direction: column;
    gap: var(--gap-0-5);
    justify-content: center;
}

.num-risultati { 
    font-weight: 600;
    color: var(--txtcolor); 
}

/*
====================================================
    SEZIONE HEADER
==================================================== 
*/

header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-base); 
    background-color: var(--BgColor);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: var(--shadow-base);
}

#logo-home, 
#logo-link a {
    display: block;
    background-image: url("../assets/logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
    width: 2em;
    height: 1em;
    text-indent: -9999em;
}

#logo-home{
    font-size: 6em;
    margin-right: 0.5em;
}

#logo-link a {
    font-size: 3em;
    margin-right: 0.5em;

}

#menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: var(--gap-1);
}

#menu .nav-links, #menu .nav-auth {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    font-weight: 500;
}

#menu .nav-links {
    flex: 1;
    gap: var(--gap-2);
    justify-content: center;
    padding: 1em;
}

#menu .nav-links li {
    padding: 0;
    color: var(--txtNavColor);
}

#menu .nav-auth {
    justify-content: flex-end;
}

#menu .nav-auth a {
    box-shadow: var(--shadow-base);
}

#menu li{
    padding: var(--padding-base);  
}

#menu a {
    color: var(--txtNavColor);
    padding: 1em;
    font-weight: 600;
}

#menu a.call-to-action {
    padding: var(--padding-base); 
}

.current-link {
    text-decoration: none;
    font-weight: bold; 
    /*text-transform: uppercase;*/
}

.current-link::before { 
    font-size:small;
    content: "✦"; 
    margin-right: 0.35em; 
    color: var(--txtNavColor);
}

.current-link::after { 
    font-size:small;
    content: "✦"; 
    margin-left: 0.35em; 
    color: var(--txtNavColor);
}

#menu a:not(.call-to-action):hover, 
#menu a:not(.call-to-action):focus,
.form-container p a:hover,
.form-container p a:focus {
    border-radius: var(--radius-base);
    background-color: var(--hoverNav);
    padding: var(--padding-base);   
}

#hamburger,
#hamburger-menu,
#hamburger-aperto,
#hamburger-chiuso {
    display: none;
}

/*
====================================================
    HEADER HAMBURGER <1024px
==================================================== 
*/

@media (max-width: 64em) { /* 1024px */

    body {
        padding-top: var(--padding-top-mini);
    }
    
    header {
        flex-direction: row;
        align-items: center;
        text-align: center;
        justify-content: space-between;
        gap: 1em;
    }

    #content-container.attivo {
        margin-top: 22.75em;
    }

    #logo-home{
        font-size: 4em;
    }

    #logo-link a {
        background-position: center;
        font-size: 2em;
    }

    #hamburger {
        all: unset;              
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2em;         
        color: var(--txtcolor);  
        cursor: pointer;  
        padding: 0.3em;
    }

    #hamburger-aperto.attivo,
    #hamburger-chiuso.attivo {
        display: flex;
    }

    #menu {
        display: none;
        width: 100%;
        padding-top: 0.5em;
        box-shadow: 0 -0.5em 0.5em -0.5em rgba(0,0,0,0.3); 
        flex-basis: 100%;
        order: 3;
    }

    #menu.attivo{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap-0-5);
        margin-bottom: 1.2em;
        background-color: var(--bgclearBlue);
        border-radius: var(--radius-base);
        box-shadow: var(--shadow-base);
    }

    #menu .nav-links, 
    #menu .nav-auth {
        flex-direction: column;
    }

    #menu .nav-links{
        gap: var(--gap-1);
        box-shadow: none;
    }

    #menu .nav-auth {
        gap: var(--gap-1);
        margin-bottom: 1em;
    }

    #hamburger:focus-visible {
        outline: 2px solid var(--txtcolor);
        outline-offset: 3px;
        border-radius: 0.2em;
    }
}


/*
====================================================
    SEZIONE BREADCRUMB
==================================================== 
*/

#breadcrumb {
    display: flex;
    justify-content: center;
    background-color: var(--bgclearBlue);
    border-radius: var(--radius-1-5);
    padding: var(--padding-base);
    margin: 1em auto;
    width: fit-content; 
    max-width: 100%;
    box-shadow: var(--shadow-base);
    border: 2px solid var(--BgColor);
}

#breadcrumb ol {
    list-style: none;
    display: flex;
    gap: var(--gap-0-5);
    padding: 0em;
    margin: 0;
}

#breadcrumb li a {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: 20em;
    color: var(--txtNavColor);
    font-weight: bold;
}

.currentPage {
    font-weight: bold;
}

/*
====================================================
    SEZIONE FOOTER
==================================================== 
*/

/*
#footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-0-5);

#footer-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-1);
}
}*/

#site-map {
    list-style: none;
    display: flex;
    gap: var(--gap-2);
    margin: 0.5em 0;
    padding: var(--padding-base);
    color: var(--txtNavColor);

}

#site-map a {
    color: var(--txtNavColor);
}

.logo-footer {
    height: 6em;
}

footer p{
    margin: 0;
    text-align: center;
    font-style: italic;
    color: var(--txtNavColor);
}

/*
====================================================
    FRECCIA TORNA SU
==================================================== 
*/

#freccia-su {
    position: fixed;
    bottom: 1.5em;
    right: 1.5em;
    z-index: 999;
    background-color: var(--call-to-actionColor);
    padding: 0.8em;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-base);
    transition: transform 0.3s ease;
    outline: 2px solid var(--clearBgColor);
    outline-offset: 2px;
}

#freccia-su img {
    height: 1.75em;
    width: auto;
}

#freccia-su:hover,
#freccia-su:focus {
    outline: 2px solid var(--call-to-actionColor);
}
/*
====================================================
    SEZIONE IMG + TESTO (presentazione, errori)
==================================================== 
*/

.img-text-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2);
    margin: 0 auto;
    width: 100%;
    max-width: 75em;
}

.img-text-section > img {
    flex: 1 1 35%;  
    max-width: 35%;
    height: auto;
    object-fit: contain;
    min-width: 0;      
}

.img-text-section > div {
    flex: 1 1 60%;   
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    max-width: 60%;    
}

.img-text-section h2 {
    text-align: left;
}

.img-text-section .azioni,
#contatti .azioni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-1);
    justify-content: flex-start;
}


/*
====================================================
    SEZIONE CATEGORIE
==================================================== 
*/

#categorie ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(18.75em, 1fr));
    gap: var(--gap-2);
    list-style: none;
    padding: 0;
    margin: 1em auto;
    max-width: 100%;
}

/*
===========================================================================
    ETICHETTE CATEGORIA (usate in Categorie, card carte-section)
===========================================================================
*/

.etichettaCategoria {
    display: inline-block;
    font-weight: 600;
    /*text-transform: uppercase;*/
    padding: var(--padding-base);
    border-radius: var(--radius-1-5);
    color: var(--clearTxtColor);
    text-align: center;
    background-color: var(--required); 
    margin: 0.5em 0 1em;
} 

.etichettaCategoria[data-categoria="eventi"] {
    background-color: var(--eventiColor);
}
.etichettaCategoria[data-categoria="esperimenti"] {
    background-color: var(--esperimentiColor);
}
.etichettaCategoria[data-categoria="affitti"] {
    background-color: var(--affittiColor);
}
.etichettaCategoria[data-categoria="ripetizioni"] {
    background-color: var(--ripetizioniColor);
}

/*
===========================================================================
    SEZIONE LINK CATEGORIA (link in Categorie e ulteriori dettagli in card)
===========================================================================
*/

.cat-link[data-categoria="eventi"]:visited span{
    color: var(--eventiColor); 
}

.cat-link[data-categoria="esperimenti"]:visited span{
    color: var(--esperimentiColor);
}

.cat-link[data-categoria="affitti"]:visited span{
    color: var(--affittiColor);  
}

.cat-link[data-categoria="ripetizioni"]:visited span {
    color: var(--ripetizioniColor);
}  

.dettagli:visited span {
    color: var(--visited)
}

/*
====================================================
    CARTE SECTION (utilizzata in ultimi inseriti + annunci pubblicati (PROFILO UTENTE))
==================================================== 
*/

.carte-section ul, #listaCarte {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(12.5em, 17.5em));
    row-gap: var(--gap-2);
    column-gap: var(--gap-1);
    list-style: none;
    padding: 0;
    margin: 0 ;
}

/*
====================================================
    SEZIONE ESPLORA + ASIDE FILTRI
==================================================== 
*/

#layout-sidebar-container { 
    display: flex; 
    flex-direction: row; 
    align-items: flex-start; 
    padding: 1em; 
}

#aside-style-layout{
    flex: 0 0 21.25em; 
    display: flex; 
    flex-direction: column; 
    gap: var(--gap-1);   
    width: 20%;
    min-width: 21.25em;
    margin: 0.5em;
}

#filtri {
    margin: 0;
}

/*
#ricerca fieldset {
    border: none; 
}*/

/*
#ricerca label {
    font-size: 1.2em;
}*/

#toggleFiltri,
#chiudiFiltri {
    display: none;
}

#filtri .form-data .nascondi-filtri{
    display: none;
}

/*
====================================================
    SEZIONE CAROSELLO CON MINIATURE
==================================================== 
*/

#carosello {
    display: flex;
    flex-direction: row;
    gap: var(--gap-1);
    align-items: center;
    justify-content: center; 
    margin: 0;    
    flex-wrap: wrap;
    padding: 0;
}

.carosello-principale {
    width: clamp(17.5em, 60vw, 25em);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-base);
    position: relative;
}

.carosello-principale img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s ease;
    border-radius: var(--radius-base);
}

.carosello-thumbnails img.attiva {
    opacity: 1;
    transform: scale(1.05);
    outline: var(--btn-border);
}

#carosello button.nascosto {
  display: none;
}

#carosello button.attivo {
  display: block; 
}

#carosello-prev,
#carosello-next {
    all: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--call-to-actionTransp);
    color: var(--clearTxtColor);
    border: none;
    padding: 0.3em 0.7em 0.5em;
    cursor: pointer;
    border-radius: var(--radius-0-5); 
    font-size: 1.7em;
    justify-content: center;
}

#carosello-prev { left: 0.5em; }

#carosello-next { right: 0.5em; }

#carosello-prev:hover,
#carosello-next:hover {
  background: var(--call-to-actionColor);
}

#carosello-prev:focus-visible, 
#carosello-next:focus-visible { 
    outline: 2px solid var(--call-to-actionColor); 
    outline-offset: 3px; 
}

.carosello-thumbnails {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    justify-content: center;
    flex: 0 0 auto;
}

.carosello-thumbnails img {
    width: 3.75em;
    height: 3.75em;
    object-fit: cover;
    border-radius: var(--radius-0-5);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/*
===========================================================
    SEZIONE ANNUNCIO
=========================================================== 
*/

#annuncioTop {
    display: flex;
    flex-direction: row;
    gap: var(--gap-2);    
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1em; 
    padding-top: 0;
}

#titolo-preferiti {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-0-5);
}

#info h2 {
    text-align: left;
}

#info {
    flex: 0 1 31.25em; 
    max-width:  31.25em;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);       
    padding: 1.5em;
    align-self: center;
}

#info > dl {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
}

.attrAnnuncio {
    background-color: var(--caratteristicheImp);
    border-radius: var(--radius-base);
    padding: var(--padding-base);
    text-align: center;
    box-shadow: var(--shadow-base);
}

.attrAnnuncio dt {
    font-weight: bold;
}

#descrizioneAnnuncio {
    background-color: var(--card);
    border-radius: var(--radius-base);
    padding: 2.5em;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--gap-1);
    margin: 0 auto 2em;
    width: 100%;          
    max-width: 62.5em;      
    min-height: 12.5em;
    box-sizing: border-box; 
}

.azioni-annuncio {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.5em;
    width: 100%;
    padding: 1em;
}

.azioni-annuncio .btn-base,
.azioni-annuncio a.btn-base {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    margin: 0;
    width: 14em;
    height: 3em;
    padding: 0.8em 1em;
    text-align: center;
}

.azioni-annuncio .btn-base .icon-btn,
.azioni-annuncio a.btn-base .icon-btn {
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
}

/*
======================================================================================
    SEZIONE FORM (usata per accesso, registrazione, filtri, pubblica, dati personali)
====================================================================================== 
*/

.form-container {
    display: flex;
    justify-content: center;
    flex-direction: column;  
    width: 100%;              
    padding: 2em;
    margin: 2em auto;
    background-color: var(--BgColor);
    border-radius: var(--radius-base);
    gap: var(--gap-0-5);
}

.form-container-small {
    max-width: 40em;         
}     

.form-container-large {
    max-width: 60em;
}

.fieldset-base {
    border: 2px solid var(--txtcolor);
    border-radius: var(--radius-base);
    padding: 1em;
    margin-top: 1em;
}

#login-container .form-data , #filtri .form-data fieldset, #register-container .form-data {
    display: flex;
    flex-direction: column;
    gap: var(--gap-1-5);               
}

#register-container .form-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75em, 1fr));
    column-gap: var(--gap-2); 
    row-gap: var(--gap-1-5);
}

#pubblica-container .form-data .aiuti-fieldset {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--gap-1-5); 
}

.form-div {
    display: flex;
    flex-direction: column;
    gap: var(--gap-0-5);
    text-decoration: none;
}

input:not([type="checkbox"]), select {
    border-radius: var(--radius-base);
    min-height: 4em;
    text-indent: 1em;
    background-color: var(--formbg);
    color: var(--txtcolor);
    font-weight: 500;
    border: 1.5px solid var(--call-to-actionColor);
    align-items: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea {
    padding: 0.75rem;
    background-color: var(--formbg);
    color: var(--txtcolor);
    font-weight: 500;
    border-radius: 0.5em;
    border: 1.5px solid var(--call-to-actionColor);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    outline: 2px solid var(--card);
    outline-offset: 2px;
}

input[type="file"] {
    width: 100%;
    cursor: pointer;
    text-indent: 0;
    min-height: 3em;
}

input[type="file"]::file-selector-button {
    background-color: var(--call-to-actionColor);
    color: var(--clearTxtColor);
    border: var(--btn-border);
    border-radius: 0.5em;
    padding: var(--padding-base);
    margin-right: 0.4em;
    line-height: 2em;    
    font-weight: bold;
    cursor: pointer;
    transition: var(--btn-trans);
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::file-selector-button:focus {
    background-color: var(--call-to-actionAction);
    color: var(--call-to-actionColor);
}


.checkbox-inline {
    display: flex;
    align-items: center;
    justify-content: center;   
    gap: var(--gap-0-5);
    font-weight: 500;
    color: var(--txtcolor);
}

#criteriMinimiPassword {
    text-align: left;
}

#criteriMinimiPassword ul {
    margin-left: 1.5em;
}

form > p, form > p{
    text-align: center;
    margin-top: 1.5em;
}

.required {
    color: var(--required)
}

/*
===========================================================================
    SEZIONE PUBBLICA LAYOUT CAMPI
===========================================================================
*/

#attr-generici-container {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: var(--gap-2);
}

#attr-specifici-container fieldset {
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    gap: var(--gap-2);
}

.image-block {
    display: flex;
    flex-direction: column;    
    padding: 0.3em; 
    gap: var(--gap-0-5);
    width: 100%;
}

.img-campi {
    display: flex;
    flex-direction: row;       
    align-items: center;       
    gap: var(--gap-1);
}

.dec-label {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-0-5);
    margin: 0;
}

.img-campi input[type="file"],
.img-campi input[type="text"] {
    flex: 1;
    min-width: 0;
}

.img-campi:has(#decorativa1:checked) #alt1,
.img-campi:has(#decorativa2:checked) #alt2,
.img-campi:has(#decorativa3:checked) #alt3,
.img-campi:has(#decorativa4:checked) #alt4 {
    background-color: var(--oscurato);  
}


#img2, #img3, #img4 {
    display:none;
}

#attr-specifici-container .nascondi-campi{
    display: none;
}

/*
====================================================
    SEZIONE PROFILO - DATI
==================================================== 
*/

#saluto h2 {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.nome-utente {
    font-weight: 700;
}

#dati-personali {
    padding: 0;
}

#dati-pers-container {
    gap: var(--gap-1);
    margin: 0 auto;
    padding: 1.5em 1em 1em;
}

#dati-personali dt::after{
    content:":";
}

.profilo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(10em, 1fr));
    gap: var(--gap-0-5);
}

.profilo-grid div {
    background-color: var(--formbg);
    padding: 1em;
    border-radius: var(--radius-base);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--gap-0-5);
    min-width: 10em; 
    box-shadow: var(--shadow-base);
}

.profilo-pubblico div {
    background-color: var(--formbg);
    padding: 1em 1.2em;
    border-radius: var(--radius-base);
    display: flex;
    flex-direction: column;
    gap: var(--gap-0-5);
    width: 100%;
    box-shadow: var(--shadow-base);
}

/*
====================================================
    SEZIONE CHI SIAMO
==================================================== 
*/

.icon-btn { 
    width: 1.2em; 
    height: 1.2em; 
    margin-right: 0.5em; 
    vertical-align: middle;
    fill: currentColor; 
    display: inline-block;
    flex-shrink: 0;
}

#about-us .azioni {
    justify-content: center;
}

#about-us h2 {
    text-align: center;
}

#about-us {
    padding: 3em 6em; 
}