@charset "UTF-8";
/**
 * @file
 * Subtheme specific CSS.
 */
/* Colori Brand */
/* General */
body #page-wrapper {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

.offcanvas {
  background-color: #464953;
}

.offcanvas-title {
  color: #ffffff;
}

.offcanvas-header .btn-close {
  filter: invert(1) brightness(2); /* Inverte e aumenta la luminosità per renderlo bianco */
  opacity: 10;
}

.navbar-brand img {
  height: 80px;
}

.navbar-toggler {
  border: none;
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}

.navbar > .container {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #ffffff !important;
    /*border-bottom: 1px solid $thirdgray;*/
  }
  .navbar > .container {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 100%;
  }
  /* Stile di base per gli <li> del menu */
  #block-bottegaprogetti-account-menu .nav-item {
    position: relative;
    padding-bottom: 5px; /* Per lasciare spazio per il bordo */
  }
  /* Effetto al passaggio del mouse su <li> */
  #block-bottegaprogetti-account-menu .nav-item::after {
    content: "";
    position: absolute;
    bottom: -5px; /* Posiziona inizialmente la linea più in basso rispetto al link */
    left: 50%; /* Posiziona la linea al centro orizzontalmente */
    width: 70%; /* Aumenta la larghezza del bordo al 70% del link */
    height: 2px; /* Altezza del bordo */
    background-color: #B2B5BE; /* Colore del bordo usando la variabile SCSS */
    transform: translateX(-50%) translateY(10px); /* Centra la linea e la sposta inizialmente più in basso */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Aumenta la durata della transizione */
    opacity: 0; /* Inizialmente il bordo non è visibile */
  }
  /* Aggiungi l'animazione al passaggio del mouse sugli <li> */
  #block-bottegaprogetti-account-menu .nav-item:hover::after {
    transform: translateX(-50%) translateY(0); /* La linea sale verso l'alto e si posiziona sotto l'elemento */
    opacity: 1; /* Rende il bordo visibile */
  }
  /* Escludi l'animazione del bordo solo per la terza voce (con l'icona in before) */
  #block-bottegaprogetti-account-menu .nav-item:nth-child(3)::after {
    content: none; /* Rimuove il bordo per la terza voce */
    transition: none; /* Disabilita l'animazione del bordo */
  }
}
.main-content {
  /*border-radius: 10px;*/
  background: #ffffff;
  padding: 2rem;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  margin: 2rem 1rem;
  height: auto;
}

.site-footer {
  padding: 0;
  background-color: #ffffff;
  min-height: 100px;
}

.site-footer .container-xxl {
  width: 90% !important;
  max-width: 100%;
}

.site-footer .block {
  padding: 0;
  margin: 0;
  border: none;
}

.site-footer .content {
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
}

a.nav-link {
  color: #464953;
}

.layout-main-wrapper, .layout-no-sidebars {
  background-image: linear-gradient(180deg, #e9f0f5, #f5f5f5); /* Gradient uniforme */
  background-repeat: no-repeat;
  background-attachment: fixed; /* Fissa il gradiente in posizione */
}

/* User page */
body.path-user .field--label-above .field__item {
  padding: 10px;
  border-radius: 15px;
}

/* Aggiungi icona "user" prima del titolo degli user */
.path-user .main-content h1.title::before {
  content: "\f007"; /* Icona "user" di Font Awesome */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Stile solido */
  margin-right: 8px; /* Spazio tra icona e titolo */
  font-size: 1em; /* Dimensione dell'icona */
  color: #979BA7; /* Colore dell'icona */
}

/* Stile del titolo */
.path-user .main-content h1.title {
  font-size: 1.5em;
  color: #979BA7;
  border-bottom: 1px solid #EFEFEF;
}

/* User menu */
#block-bottegaprogetti-account-menu .nav-link.nav-link--it-elenco-immobili::before,
#block-bottegaprogetti-account-menu .nav-link.nav-link--en-property-listing::before {
  content: "\f015"; /* Codice dell'icona Font Awesome */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 8px;
  font-size: 1.3em;
  color: #979BA7;
}

#block-bottegaprogetti-account-menu {
  background: transparent;
  border-radius: 0;
  margin-right: 0;
  box-shadow: none;
}

#block-bottegaprogetti-account-menu ul.nav {
  display: inherit;
  align-items: normal;
}

#block-bottegaprogetti-account-menu ul.nav li.nav-item {
  padding: 0;
}

#block-bottegaprogetti-account-menu ul.nav a.nav-link {
  font-size: 1.2rem;
  padding: 0;
  margin-bottom: 1rem;
  color: #ffffff;
}

#block-bottegaprogetti-account-menu .nav-item:last-child a::after {
  content: "\f2f5"; /* Codice dell'icona Font Awesome per "sign-out-alt" */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Necessario per visualizzare l'icona solida */
  margin-left: 8px; /* Spazio tra il testo e l'icona */
  display: inline-block; /* Per garantire che l'icona sia in linea col testo */
  vertical-align: middle; /* Allinea l'icona al centro rispetto al testo */
  line-height: 12px;
}

/* Language selector */
#block-bottegaprogetti-languagedropdownswitcher select {
  border-radius: 15px;
  border: 1px solid #CCCCCC;
  padding: 10px;
  box-shadow: none;
  width: 100% !important;
  font-size: 14px;
}

/* Welcome message */
#block-bottegaprogetti-views-block-benvenuto-utente-block-1 h3 {
  font-weight: normal;
  font-size: 1.3rem;
}

/* (desktop) */
@media (min-width: 992px) {
  /* User menu */
  #block-bottegaprogetti-account-menu {
    background: #ffffff;
    border-radius: 35px;
    margin-right: 1rem;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
  }
  #block-bottegaprogetti-account-menu ul.nav {
    display: flex;
    align-items: center;
  }
  #block-bottegaprogetti-account-menu ul.nav li.nav-item {
    padding: 5px 5px;
  }
  #block-bottegaprogetti-account-menu ul.nav a.nav-link {
    padding: 0 10px;
    border: none;
    font-size: 16px;
    margin-bottom: 0rem;
    color: #464953;
    font-weight: 300;
  }
  /* Language selector */
  #block-bottegaprogetti-languagedropdownswitcher select {
    /*border-radius: 35px;*/
    border-radius: 0;
    border: 1px solid #CCCCCC;
    padding: 10px;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
    width: 165px !important;
  }
  /* Welcome message */
  #block-bottegaprogetti-views-block-benvenuto-utente-block-1 h3 {
    font-weight: normal;
    font-size: 1.3rem;
  }
}
/* View elenco immobili */
/* Aggiungi icona "casa" prima del titolo degli immobili */
.page-view-elenco-immobili .main-content h1.title::before {
  content: "\f015"; /* Icona "home" di Font Awesome */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Stile solido */
  margin-right: 8px; /* Spazio tra icona e titolo */
  font-size: 1em; /* Dimensione dell'icona */
  color: #979BA7; /* Colore dell'icona */
  font-weight: 700;
}

/* Stile del titolo */
.page-view-elenco-immobili .main-content h1.title {
  font-size: 1.5em;
  color: #979BA7;
  border-bottom: 1px solid #EFEFEF;
  font-weight: 700;
}

.page-view-elenco-immobili h3 a {
  font-size: 0.8em;
  color: #979BA7;
  text-decoration: none;
  font-weight: 700;
}

@media (min-width: 992px) {
  .page-view-elenco-immobili h3 a {
    font-size: 0.9em;
    color: #979BA7;
    text-decoration: none;
  }
}
.page-view-elenco-immobili .views-row {
  border-bottom: 1px solid #EFEFEF;
  padding-bottom: 1rem;
}

.page-view-elenco-immobili .views-row .rounded {
  display: none;
}

@media (min-width: 992px) {
  .page-view-elenco-immobili .views-row .rounded {
    border-radius: 5px; /* Bordo arrotondato */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombra leggera */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transizione per l’effetto zoom e ombra */
    display: inherit;
  }
}
/* Effetto hover */
.page-view-elenco-immobili .views-row .rounded:hover {
  transform: scale(1.05); /* Leggero zoom al passaggio del mouse */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombra leggermente più intensa */
}

.page-view-elenco-immobili .btn.btn-primary {
  background-image: linear-gradient(to right, #0078D4, #005A9E); /* Sfumatura blu in stile Fluent Design */
  color: #FFFFFF;
  border: none;
  border-radius: 35px; /* Bordo arrotondato */
  padding: 10px 20px;
  font-size: 1em;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Ombra più leggera */
  transition: background-color 0.3s, box-shadow 0.3s; /* Transizione fluida */
}

/* Effetto hover */
.page-view-elenco-immobili .btn.btn-primary:hover {
  background-image: linear-gradient(to right, #005A9E, #004578); /* Colore leggermente più scuro */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Ombra leggermente più intensa all'hover */
  text-decoration: none; /* Rimuove eventuali sottolineature */
}

/* Effetto focus */
.page-view-elenco-immobili .btn.btn-primary:focus {
  outline: 2px solid #0078D4; /* Bordo di messa a fuoco */
  outline-offset: 2px;
}

/* Node immobili */
.node--type-immobile .main-content {
  /*border-radius: 10px;*/
  background: #ffffff;
  padding: 2rem;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  margin: 2rem 1rem;
}

/* (desktop) */
@media (min-width: 992px) {
  .node--type-immobile .main-content {
    margin: 2rem 1rem;
  }
}
.block-views-blockultima-modifica-immobile-block-1 {
  background: #f5f5f5;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  max-width: 100%;
  padding: 0.5em;
  border-bottom: 1px solid #EFEFEF;
  font-size: 0.9rem;
}

.block-views-blockultima-modifica-immobile-block-1 .field-content {
  font-weight: bold;
  font-size: 0.9rem;
}

.block-views-blockcomune-immobile-block-1 {
  background: #f5f5f5;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  max-width: 100%;
  padding: 0.5em;
  font-size: 0.9rem;
}

/* (desktop) */
@media (min-width: 992px) {
  .block-views-blockultima-modifica-immobile-block-1,
  .block-views-blockcomune-immobile-block-1 {
    width: 30%; /* Larghezza relativa (30% dello schermo) */
    max-width: 500px; /* Imposta una larghezza massima fissa, es. 400px */
  }
}
.block-views-blockcomune-immobile-block-1 .field-content {
  font-weight: bold;
  font-size: 0.9rem;
}

.node--type-immobile .views-field-changed .views-label-changed::before {
  content: "\f073"; /* Codice unicode per l'icona "fa-calendar-alt" */
  font-family: "Font Awesome 5 Free"; /* Font Awesome family */
  font-weight: 900; /* Peso per visualizzare l'icona piena (solido) */
  font-size: 1em; /* Dimensione dell'icona */
  color: #B2B5BE; /* Colore dell'icona, puoi cambiarlo secondo necessità */
  margin-right: 5px; /* Spazio tra icona e testo */
}

.node--type-immobile .views-field-term-node-tid .views-label-term-node-tid::before {
  content: "\f19c"; /* Codice unicode per l'icona "fa-university" */
  font-family: "Font Awesome 5 Free"; /* Assicurati di avere Font Awesome */
  font-weight: 900; /* Peso per l'icona piena (solido) */
  font-size: 1em; /* Dimensione dell'icona */
  color: #B2B5BE; /* Colore dell'icona */
  margin-right: 5px; /* Spazio tra icona e testo */
}

/* Aggiungi icona "casa" prima del titolo degli immobili */
.node--type-immobile h1.title::before {
  content: "\f015"; /* Icona "home" di Font Awesome */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Stile solido */
  margin-right: 8px; /* Spazio tra icona e titolo */
  font-size: 1em; /* Dimensione dell'icona */
  color: #979BA7; /* Colore dell'icona */
}

/* Stile del titolo */
.node--type-immobile h1.title {
  font-size: 1.5em;
  color: #979BA7;
  font-weight: 700;
}

/* Aggiungi icona "documento" prima del titolo del blocco Documenti */
.node--type-immobile #block-bottegaprogetti-views-block-documenti-immobile-block-1 h2:not(.accordion-header)::before {
  content: "\f15c"; /* Icona "file" di Font Awesome */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Stile solido */
  margin-right: 8px; /* Spazio tra icona e titolo */
  font-size: 1em; /* Dimensione dell'icona */
  color: #979BA7; /* Colore dell'icona */
}

/* Stile del titolo */
.node--type-immobile #block-bottegaprogetti-views-block-documenti-immobile-block-1 h2 {
  font-size: 1.5em;
  color: #979BA7; /* Sostituisci $secondaryblue con il colore hex */
  font-weight: 700;
}

/* Documenti */
/* Colore del link di base */
#views-bootstrap-documenti-immobile-block-1 a {
  color: #464953;
  text-decoration: none;
  transition: color 0.3s ease; /* Transizione sul colore */
}

/* Colore del link al passaggio del mouse */
#views-bootstrap-documenti-immobile-block-1 a:hover {
  color: #3176c0; /* Sostituisci con il tuo blu/azzurro moderno */
  text-decoration: underline;
}

/* Stile di base per l'icona della cartella chiusa */
#views-bootstrap-documenti-immobile-block-1 .accordion-button::before {
  content: "\f07b"; /* Icona "folder" chiusa (variante) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Icona solida */
  margin-right: 10px; /* Spazio tra icona e testo */
  font-size: 1.2em;
  color: #464953; /* Colore della cartella */
  transition: transform 0.2s ease; /* Animazione */
}

/* Cambia l'icona in cartella aperta quando l'accordion è espanso */
#views-bootstrap-documenti-immobile-block-1 .accordion-button:not(.collapsed)::before {
  content: "\f07c"; /* Icona "folder" aperta */
  color: #979BA7; /* Colore diverso per la cartella aperta */
}

.file--application-pdf {
  background-image: url(/web/themes/custom/bottegaprogetti/images/icons/application-pdf.png);
}

/* Titolo Fotogallery */
/* Aggiungi icona "documento" prima del titolo del blocco Documenti */
.node--type-immobile #block-bottegaprogetti-views-block-fotogalllery-immobile-block-1 h2:not(.accordion-header)::before {
  content: "\f1c5"; /* Codice Font Awesome per l'icona "file-image" */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Stile solido */
  margin-right: 8px; /* Spazio tra icona e titolo */
  font-size: 1em; /* Dimensione dell'icona */
  color: #979BA7; /* Colore dell'icona */
}

/* Stile del titolo */
.node--type-immobile #block-bottegaprogetti-views-block-fotogalllery-immobile-block-1 h2 {
  font-size: 1.5em;
  color: #979BA7; /* Sostituisci $secondaryblue con il colore hex */
  font-weight: 700;
}

/* Stile di base per l'icona della cartella chiusa */
#views-bootstrap-fotogalllery-immobile-block-1 .accordion-button::before {
  content: "\f07b"; /* Icona "folder" chiusa (variante) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Icona solida */
  margin-right: 10px; /* Spazio tra icona e testo */
  font-size: 1.2em;
  color: #464953; /* Colore della cartella */
  transition: transform 0.2s ease; /* Animazione */
}

/* Cambia l'icona in cartella aperta quando l'accordion è espanso */
#views-bootstrap-fotogalllery-immobile-block-1 .accordion-button:not(.collapsed)::before {
  content: "\f07c"; /* Icona "folder" aperta */
  color: #979BA7; /* Colore diverso per la cartella aperta */
}

#views-bootstrap-fotogalllery-immobile-block-1 .views-field-field-foto-immobile img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0.2rem;
  border-radius: 8px; /* Opzionale, per un bordo più morbido */
}

#views-bootstrap-fotogalllery-immobile-block-1 .views-field-field-foto-immobile img:hover {
  transform: scale(1.05); /* Zoom leggero */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); /* Ombra più intensa all'hover */
}

#views-bootstrap-fotogalllery-immobile-block-1 .list-group-item {
  border: none;
}

#views-bootstrap-fotogalllery-immobile-block-1 .item-list .list-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Login */
.page-user-login .layout-main-wrapper,
.page-user-login .layout-no-sidebars {
  background-image: linear-gradient(180deg, #e9f0f5 0%, #f2f0f4 50%, #f5f5f5 100%) !important;
  height: 100vh;
}

/* Applica Flexbox al div che contiene il contenuto principale */
.page-user-login .dialog-off-canvas-main-canvas, .page-user-password .dialog-off-canvas-main-canvas {
  display: flex;
  justify-content: center; /* Centra orizzontalmente */
  align-items: center; /* Centra verticalmente */
  height: 100vh; /* Imposta l'altezza del div al 100% della finestra */
  margin: 0; /* Rimuove eventuali margini predefiniti */
}

.page-user-login .dialog-off-canvas-main-canvas h1, .page-user-password .dialog-off-canvas-main-canvas h1 {
  font-size: 1.6rem;
  color: #464953;
}

#auth_box a {
  color: #464953;
}

#auth_box {
  width: 80%; /* Larghezza predefinita per mobile */
  margin: 0 auto;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}

/* (desktop) */
@media (min-width: 992px) {
  #auth_box {
    width: 30%; /* Larghezza relativa (30% dello schermo) */
    max-width: 500px; /* Imposta una larghezza massima fissa, es. 400px */
  }
}
#auth_box h1#the_logo {
  text-align: center;
  margin: 0;
  padding: 0 0 25px;
}

#auth_box h1#the_logo img {
  max-width: 200px;
}

#auth_box h2.title {
  margin: 0;
  padding: 0 0 15px;
  font-size: 1.5em;
}

#auth_box input[type=text],
#auth_box input[type=password] {
  width: 100%;
  border: 1px solid #EFEFEF; /* Bordo grigio chiaro */
  border-radius: 18px; /* Angoli arrotondati */
  padding: 10px; /* Padding interno per migliorare l'usabilità */
  font-size: 16px; /* Dimensione del font */
  background-color: #FFFFFF; /* Sfondo bianco */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombra leggera per dare profondità */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transizione fluida per gli effetti al focus */
}

#auth_box input[type=text]:focus,
#auth_box input[type=password]:focus {
  border-color: #CCCCCC; /* Colore del bordo al focus */
  box-shadow: 0 0 5px rgba(172, 172, 172, 0.5); /* Ombra più intensa al focus */
  outline: none; /* Rimuove l'outline predefinito del browser */
}

#auth_box input[type=submit] {
  float: right;
}

#auth_box #middle_part {
  /*border-radius: 15px;*/
  background: #fff;
  padding: 25px;
  overflow: hidden;
  /*box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;*/
  box-shadow: none;
  border-radius: 0;
}

#auth_box .back_link {
  padding: 15px 0 0;
}

#auth_box #bottom_part {
  font-size: 13px;
  padding: 15px 0 0;
}

#auth_box .btn-primary {
  background: linear-gradient(to right, #0078D4, #00BCF2); /* Colori Fluent Design */
  border: none;
  color: #fff; /* Colore del testo */
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 35px; /* Angoli arrotondati */
  font-weight: bold;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombra leggera per l'effetto Fluent */
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#auth_box .btn-primary:hover {
  background: linear-gradient(to right, #005A9E, #0078D4); /* Colori più scuri al passaggio del mouse */
  color: #ffffff;
  transform: translateY(-2px); /* Leggera animazione di sollevamento */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Aumenta l'ombra al passaggio del mouse */
}