/*#####################
  #  Regole generali  #
  #####################*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
    margin: 0em;
    padding: 0em;
}

:root {

    --hcolor: #263161;
    --bgcolor: #020617;
    /* background */
    --txtcolor: #F8FAFC;
    /* testo su blu */
    --breadcolor: #163f77;
    --bgonover: #1C519B;
    --linkcolor: #FACC15;
    /* link non visitati */
    --visitedcolor: #4ADE80;
    /* link visitati */

}

body {
    font-size: 1em;
    font-family: 'Montserrat', Helvetica, sans-serif;
    background-color: var(--bgcolor);
    color: var(--txtcolor); 
    margin: auto;
    display: flex;           
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/*Link come bottoni*/
.a-btn {
    display: inline-block;
    padding: 0.8em 1.5em;
    background-color: var(--linkcolor);
    color: black;
    text-decoration: none;
    border-radius: 0.5em;
    font-weight: bold;
    margin-top: 1em;
    transition: transform 0.3s ease;
}

.a-btn:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* ######################
   #Stile delle tabelle #
   ######################
*/

article.visual-table, article.modifica-immagine{
    padding: 1em 2em;
    width: auto;
    display: flex;              /* Attiva la modalità Flexbox */
    flex-direction: column; 
    align-items: center;        /* Allinea verticalmente al centro (stessa altezza) */
    justify-content: center;    
    gap: 1em;
}

thead{
    display: none;
}

.generic-table, .table-admin-prodotti{
    background-color: var(--hcolor);
    border-radius: 1em;
    width: 100%;
}

.generic-table *, 
.generic-table *:before, 
.table-admin-prodotti * ,
.table-admin-prodotti *:before{
    box-sizing: border-box;
}

.generic-table tr, 
.table-admin-prodotti tr{
    display: block;
    margin-bottom: 3em; 
    border-top: 1px solid var(--linkcolor);
}

.generic-table td, 
.table-admin-prodotti td,
.generic-table th[scope="row"],
.table-admin-prodotti th[scope="row"]{
    display: block;
    padding: 0.6em; 
    white-space: normal;
    border-bottom: 1px solid var(--linkcolor);
    text-align: right; 
}

td.no-pren{
    text-align: center;
}

.generic-table tr:first-child, 
.table-admin-prodotti tr:first-child{
    border-top: none;
}

.generic-table td:last-child, 
.table-admin-prodotti td:last-child{
    border-bottom: none;
}

.generic-table td:before, 
.table-admin-prodotti td:before, 
.generic-table th[scope="row"]:before, 
.table-admin-prodotti th[scope="row"]:before {
    content: attr(data-title);
    float: left; 
    font-weight: bold;
    color: var(--linkcolor);
    text-transform: uppercase;
    font-size: 0.85em;
}

.table-prenotazioni th, 
.table-admin-prodotti th {
    display: none; 
}

.table-caption{
    font-size: 1.5em;
    margin-bottom: 0.5em;
    color: var(--linkcolor);
}

.table-btn{
    font-size: 1em;
    padding: 0.4em;
    margin: 0.2em;
    background-color: var(--linkcolor);
    color: var(--bgcolor);
    font-weight: bold;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.table-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);
}

.table-btn:active {
    transform: scale(0.98);
}

.form-error-message, .form-good-message {
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
}

.hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none; 
}






/* ######################
   #  Stile delle form  #
   ######################
*/

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.5em;
}

.form-group label {
    font-weight: bold;
    margin-bottom: 0.5em;
    color: var(--txtcolor);
    font-size: 1em;
}

.form-group input {
    padding: 0.8em 1em;
    border-radius: 0.5em;
    border: 2px solid var(--linkcolor);
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    font-size: 50%;
    font: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group select{
    padding: 1.3em 1em;
    border-radius: 0.5em;
    border: 2px solid var(--linkcolor);
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    font-size: 50%;
    font: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus, select:focus{
    outline: none;
    border-color: var(--bgonover);
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}

.form-group input:hover, select:hover{
    border-color: var(--bgonover);
}

/* Validazione e stati di errore */
.form-group input[aria-invalid="true"] {
    border-color: #EF4444;
}

.form-group input[aria-invalid="true"]:focus {
    border-color: #DC2626;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.login-form .error {
    display: block;
    color: #FCA5A5;
    font-size: 0.9em;
    margin-top: 0.5em;
    font-weight: 600;
}

.error.none {
    display: none;
}

.error.toggleOn {
    display: block;
}

input::file-selector-button {
    font-weight: bold;
    color: var(--bgcolor);
    background-color: var(--linkcolor);
    padding: 0.5em;
    border: thin solid grey;
    border-radius: 3px;
}

/* Messaggio di errore generale del form */
.form-error-message {
    background-color: rgba(239, 68, 68, 0.15);
    border: 2px solid #EF4444;
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 1.5em;
    color: #FCA5A5;
    font-weight: 600;
}

.form-good-message {
    background-color: rgba(122, 239, 68, 0.15);
    border: 2px solid #86ef44;
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 1.5em;
    color: #a9fca5;
    font-weight: 600;
}

.form-good-message:empty{
    display: none;
}

.form-error-message:empty {
    display: none;
}

/*#######################
  #  Stile dei bottoni  #
  #######################*/

.form-btn{
    width: 100%;
    padding: 0.9em 1.5em;
    background-color: var(--linkcolor);
    color: var(--bgcolor);
    font-weight: bold;
    font-size: 1.1em;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 0.5em;
}

.form-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 20px rgba(250, 204, 21, 0.3);
}

.form-btn:active {
    transform: scale(0.98);
}

/* ################# */
/*   SKIP TO CONTENT */
/* ################# */

.skip-link {
    position: absolute;
    top: -900px;
    left: 0;
    background: var(--linkcolor);
    color: var(--bgcolor);
    padding: 0.5em 1em;
    text-decoration: none;
    font-weight: bold;
    z-index: 2000;
    border-radius: 0 0 0.25em 0;
}

.skip-link:focus {
    top: 0;
}

/* ###################### */
/*   BACK TO TOP BUTTON   */
/* ###################### */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    background-color: var(--linkcolor);
    color: var(--bgcolor);
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.back-to-top:hover {
    background-color: #f0b90a;
    transform: translateY(-3px);
}

.back-to-top:active {
    transform: translateY(-1px);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}


/* ################# */
/*      HEADER       */
/* ################# */

header {
    background-color: var(--hcolor);
    position: sticky;
    top: 0px;
    width: 100%;
    padding: 0px;
    overflow: hidden;
    z-index: 1000;
}

header h1 {
    font-size: 2.0em;
    overflow: hidden;
    float: left;
    position: relative;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 0.25em;
}

header #menu {
    text-decoration: none;
    list-style-type: none;
    clear: both;
    animation: fadeOut .5s;
    transition: max-height .4s ease-out;
    margin: 0;
    height: calc(100vh - 2.5em);
    max-height: 0;
}

header #menu a {
    display: block;
    padding: 10px;
}


/* MENU BUTTON */
header .menu-icon {
    /* border: 1px solid red; */
    padding: 28px 25px 28px 10px;
    position: relative;
    float: right;
    cursor: pointer;
}

header .menu-icon .nav-icon {
    background-color: var(--txtcolor);
    display: block;
    width: 24px;
    height: 2.8px;
    position: relative;
    transition: background-color .2s ease-out;
}


header .menu-icon .nav-icon::before,
header .menu-icon .nav-icon::after {
    background-color: var(--txtcolor);
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transition: all .2s;
    position: absolute;
}

header .menu-icon .nav-icon::after {
    top: -5px;
}

header .menu-icon .nav-icon::before {
    top: 5px;
}

header .menu-btn {
    display: none;
}

header .menu-btn:checked~#menu {
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6vh;
    align-content: center;
    align-items: center;
    animation: fadeIn 5s;
}

header .menu-btn:checked~.menu-icon .nav-icon {
    background-color: transparent;
}

header .menu-btn:checked~.menu-icon .nav-icon::before {
    transform: rotate(-45deg);
    top: 0;
}

header .menu-btn:checked~.menu-icon .nav-icon::after {
    transform: rotate(45deg);
    top: 0;
}

header a {
    text-decoration: none;
    color: var(--txtcolor);
}

header #menu a:hover {
    background-color: var(--bgonover);
    border-radius: 1.5em;
    color: var(--txtcolor);
}

header #menu a:active {
    color: var(--txtcolor);

}

header #menu a:focus {
    outline: none;
    background-color: var(--bgonover);
    border-radius: 1.5em;
}

#currentLink{
    font-weight: 900;
}


/* ################# */
/*     BREADCRUMB    */
/* ################# */

#breadcrumb {
    width: fit-content;
    margin: 0.5em auto;
    background-color: var(--hcolor);
    border-radius: 1em;
    text-align: center;
}

#breadcrumb p {
    padding: 0.5em;
}

#breadcrumb a:link{
    color: var(--linkcolor);
}

#breadcrumb a:visited{
    color: var(--visitedcolor);
}


/* ################# */
/*     FOOTER        */
/* ################# */

.footer_text{
  background: var(--hcolor);
  color: var(--txtcolor) ;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

/* Link tel dentro footer_text */
.footer_text a[href^="tel:"] {
    color: var(--linkcolor);
}

/* Link mailto dentro footer_text */
.footer_text a[href^="mailto:"] {
    color: var(--linkcolor);
}

.footer_text ul{
    list-style: none;
}



/*#######################
  #  INDEX  #
  #######################*/

/* ################# */
/*  PRENOTA IN INDEX - ARTICLE */
/* ################# */

main article {
    text-align: center;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
}

article h2{
    font-size: 2em;
    margin-bottom: 1em;
    padding: 0 0.2em 0 0.2em;
}


/* ########################## */
/*  LANDING SECTION. in index */
/* ########################## */

article.landing {
    padding: 1em 2em;
    width: auto;
    display: flex;              /* Attiva la modalità Flexbox */
    flex-direction: row; 
    align-items: center;        /* Allinea verticalmente al centro (stessa altezza) */
    justify-content: center;    
    gap: 2rem;
}

.landing h2{
    font-size: 3em;
    margin-bottom: 0.2em;
}

.landing img {
    display: none;
}

.motto {
    font-family: 'Montserrat', sans-serif;
}


/* ########################## */
/*      PRENOTA in index     */
/* ########################## */

.reserve img{
    display: none;
}

article.reserve {
    display: flex;              /* Attiva la modalità Flexbox */
    flex-direction: column; 
    align-items: center;        /* Allinea verticalmente al centro (stessa altezza) */
    justify-content: center;    
    gap: 2rem;
    margin-bottom: 5em;
}

.reserve-content{
    display: flex;              /* Attiva la modalità Flexbox */
    flex-direction: column; 
    align-items: center;        /* Allinea verticalmente al centro (stessa altezza) */
    justify-content: center;    
    gap: 1rem;
    width: 70%;
    padding: 1em;
    background-color: var(--hcolor);
    border-radius: 1em;
}

.reserve-content p{
    font-size: 1.2em;
    padding-top: 1em;
    color: var(--txtcolor);
    width: 100%;
}




/*#######################
  #      ESPLORA        #
  #######################*/

main h2.titolo-pagina{
    text-align: center;
    font-size: 2.0em;
    margin-top: 0.2em;
    margin-bottom: 0.4em;
}

/* ################# */
/*  PRODUCT CARDS  in esplora  */
/* ################# */

.ml-products {
    background-color: var(--hcolor);
}

.lista-prodotti {
    justify-content: center;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 20em));
    gap: 1.5em;
    margin: 1em 4em 1em 4em;
}

.card-prodotto {
    background-color: var(--txtcolor);
    display: flex;
    flex-direction: column;
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-prodotto:hover, .card-prodotto:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-prodotto:focus {
    outline: 2px solid var(--linkcolor);
}

.card-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


.card-text {
    padding: 1.2em;
    color: #000;
    text-align: left;
    flex: 1; /* flex grow, riempie il restante con il testo */
}

.card-text h3 {
    font-size: 1.3em;
    margin-bottom: 0.5em;
    color: var(--hcolor);
}

.card-text p {
    font-size: 1em;
    line-height: 1.5;
    color: var(--bgcolor);
}

/* ########################## */
/*      FILTRO IN ESPLORA     */
/* ########################## */

.filtro-container {
    margin: 1.5em 0;
    padding: 1em;
}

.filtro-container form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: wrap;
    gap: 1em;
    width: 100%;
}

.filtro-group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5em;
    width: 100%;
}

.filtro-container label {
    font-weight: bold;
    color: var(--txtcolor);
    white-space: normal;
    margin: auto 0;
}

.filtro-container select,
.filtro-container input[type="text"] {
    padding: 0.5em 1em;
    border-radius: 0.5em;
    border: 2px solid var(--linkcolor);
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    font-size: 1em;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.filtro-container input[type="text"] {
    cursor: text;
    min-width: 100px;
    flex-grow: 1;
    margin: auto 0;
}

.filtro-container input[type="text"]::placeholder {
    color: rgba(248, 250, 252, 0.5);
}

.filtro-container select:hover,
.filtro-container input[type="text"]:hover {
    border-color: var(--hcolor);
}

.filtro-container select:focus,
.filtro-container input[type="text"]:focus {
    outline: none;
    border-color: var(--hcolor);
    box-shadow: 0 0 2px rgba(255, 192, 21, 0.5);
}

.filtro-container select option {
    background-color: var(--bgcolor);
    color: var(--txtcolor);
}



/*-------------------------
    ACCEDI - LOGIN FORM
---------------------------*/

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2em 1em;
    min-height: 50vh;
}

.login-form {
    background-color: var(--hcolor);
    border-radius: 1em;
    padding: 2em 1.5em;
    width: auto;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 2em auto;
}

.form-footer {
    text-align: center;
    margin-top: 1.5em;
    font-size: 0.95em;
}

.form-footer a {
    color: var(--linkcolor);
    text-decoration: none;
    font-weight: bold;
}

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

.form-footer a:visited {
    color: var(--visitedcolor);
}



/*##########################
  #  PRENOTAZIONE No Login #
  ##########################*/

#prenota-registrati, #prenota-accedi{
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

#pesceStop{
    margin: 0.5em;
}

/*##################
  #    PRENOTA     #
  ################*/

#inPageTitle{
    text-align: center;
    font-size: 2.5em;
}

#subtitle{
    text-align: center;
}

#form-prenotazione{
    background-color: var(--hcolor);
    border-radius: 1em;
    padding: 2em 1.5em;
    width: auto;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 2em auto;
}

/*Selezione dell'icona per selezionare data e ora*/
input[type="date"]::-webkit-calendar-picker-indicator {
    width: 30px; 
    height: 30px;
    cursor: pointer;
    margin-left: 10px;
    filter: invert(1); /*Inverto il colore per mantenere alto il contrasto*/
}

#selezione-ora {

    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    
    background-position: right 1.2em center;
    background-size: 30px 30px;
}

#dettagli-visita{
    resize: none;
    font: inherit;
    font-size: 40%;
    padding: 0.8em 1em;
    border-radius: 0.5em;
    border: 2px solid var(--linkcolor);
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.none{
    display: none;
}

/*#############################
  #  PAGINA DI REGISTRAZIONE  #
  #############################*/

#form-registrazione{
    background-color: var(--hcolor);
    border-radius: 1em;
    padding: 2em 1.5em;
    width: auto;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 2em auto;
}

.oblg{
    color: #ff7a7a;
}

.helper{
    margin-top: 0.3em;
    filter: opacity(90%);
    font-size: 0.9em;
}

.registration-error-message {
    background-color: rgba(239, 68, 68, 0.15);
    border: 2px solid #EF4444;
    border-radius: 0.5em;
    padding: 0.5em;
    color: #FCA5A5;
    font-weight: 600;
    margin-top: 0.3em;
    font-size: 0.9em;
}

/*#######################
  #  PAGINE CHI SIAMO   #
  #######################*/

.presentation{
    margin: auto;
}

.presentation p{
    padding: 1em;
}

.story-timeline {   
    margin: auto;
}

.timeline {
    position: relative;
    padding: 2em;
    list-style: none;
}

/* La linea verticale */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 1em;
    width: 3px;
    background: #e0e0e0;
}

.timeline-item h3 {
    position: relative;
    z-index: 2;
    margin-left: -1.5em;
    padding: 0.2em 0.5em 0.2em 1em;
    color: black;
    background-color: var(--linkcolor);
    border-radius: 1em;
    width: fit-content;
    margin-bottom: 0.3em;
}

.timeline-item p {
    color: white;
    background-color: var(--hcolor);
    border-radius: 1em;
    margin-bottom: 2em;
    padding: 0.5em;
    
}

/*#######################
  #  PAGINA PROFILO     #
  #######################*/
.info-profilo{
    background-color: var(--hcolor);
}

.info-profilo li{
    margin-bottom: 0.2em;
    font-size: 1.3em;
}

.info-profilo li strong{
    font-size: 0.9em;
    color: var(--linkcolor);
}


/*#######################
  #   PAGINE PRODOTTO   #
  #######################*/

main article.product {
    display: flex;
    flex-direction: column;
}

.product_img {
    width: 100%;
    position: relative;
    margin-bottom: 2em; 
    border-radius: 4%;
    }

.nascosto {
  position: absolute;
  left: -9999px;
}

.nascosto:focus {
  left: 2%;
  top: 5%;
  background-color: #fff;
  padding: 0.5em;
  z-index: 10;
}

.slideshow {
  display: flex;
  overflow-x: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  /*nascoste scrollbar, spero sia giusto*/
}

.slideshow::-webkit-scrollbar {
  display: none;
}

.product_img img{
    max-width: 92%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 5%;
}

.slideshow > div {
    flex: 0 0 100%; 
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
}

.product_text a:link {
    padding: 0;
    margin: 0;
    color: var(--linkcolor);
    background-color: transparent;
}

.product_text a:visited {
    color: var(--visitedcolor);
}

.product_text {
    width: 90%;
    padding-left: 5%;
}

.product_text h2 {
    padding-bottom: 0.1em;
    margin: 0 0 0.2em 0; /* annulla il margin di article h2 */
}

.product_text p{
    margin-top: 0.4em;
    text-align: center;  

}

/* --- BOTTONI FRECCIA --- */
.slideshow_pre, .slideshow_post {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centratura verticale */
    z-index: 10;
    
    border: none;
    background-color: var(--linkcolor);
    color: var(--hcolor);
    
    border-radius: 50%;
    
    font-size: 1.3em; 
    width: 2em;       
    height: 2em;      
    line-height: 1;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 0.12em 0.3em rgba(0,0,0,0.3);
    
    transition: background-color 0.2s, color 0.2s;
}


.slideshow_pre { left: 0.6em; } 
.slideshow_post { right: 0.6em; }

.slideshow_pre:hover, .slideshow_post:hover {
    background-color: var(--linkcolor);
    color: var(--hcolor);
}

/*#######################
  #   PAGINE ERRORE     #
  #######################*/

main article.error {
    display: flex;
    flex-direction: column;
}

.error_img {
    width: 100%;
}

.error_img img{
    max-width: 92%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.error_testo a:link {
    padding: 0;
    margin: 0;
    color: var(--linkcolor);
    background-color: transparent;
}

.error_testo a:visited {
    color: var(--visitedcolor);
}

.error_testo {
    margin-top: 1em;
    width: 90%;
    padding: 5%;
}

.error_testo p{
    margin-top: 0.5em;
    text-align: center;  

}

/*
    ####################
    #   PAGINE ADMIN   #
    ####################
*/

.admin-img{
    width: 8em;
    border-radius: 4%;
}

#form-prodotto, #form-immagini{
    background-color: var(--hcolor);
    border-radius: 1em;
    padding: 2em 1.5em;
    width: calc(100% - 2em);
    max-width: 700px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 2em auto;
}

#descr-modifica-prodotto, #descr-aggiungi-prodotto, #keywords, #modifica-testo-alternativo, #aggiungi-testo-alternativo{
    resize: none;
    height: 5em;
    font: inherit;
    font-size: 40%;
    padding: 0.8em 1em;
    border-radius: 0.5em;
    border: 2px solid var(--linkcolor);
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#immagine-in-modifica, #immagine-in-aggiunta{
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4%;
    margin-bottom: 1em;
}

select{
    font: inherit;
    padding: 0.8em 1em;
    border-radius: 0.5em;
    border: 2px solid var(--linkcolor);
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


/* ANIMATION */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}