body {
  color:#464646;
}
body .body-innerwrapper {
    overflow-x: hidden;
}
a {
    cursor: pointer;
}
h3 {
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 35px;
    margin: 0 0 15px 0;
}
h4 {
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    font-size: 16px;
}


/* --- HEADER / LOGO / MENU / CTA --- */

/* HEADER */

#sp-header {
    background: #485355;
    background: -moz-linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    color:#f6f1ed;
    box-shadow: none !important;
    height: 90px;
    width: 100% !important;
}

.animated.fixed-header #sp-header {
    background: rgba(72, 83, 85, 0.95);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease 0s;
}

#sp-header:not(.fixed-header) #sp-menu {
    width: 81%;
}

#sp-header.fixed-header {
  	background: rgba(72, 83, 85, 0.95);
    height: 70px;
    z-index: 999;
}

.fixed-header #sp-menu {
    padding-left: 0;
    padding-right: 0;
    width: 54%;
}

#sp-header.fixed-header .container:only-child {
    padding-right: 0;
    padding-left: 5px;
}

.fixed-header .sp-megamenu-parent > li > a {
    padding: 0 10px;
    font-weight: 400;
    line-height: 70px;
}

.sp-megamenu-parent > li > a {
    color: #f1f1f2;
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 90px;
    padding: 0 15px;
    text-transform: uppercase;
    font-weight: 600;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: unset;
    text-decoration: none;
}
.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li:hover > a {
    color: #ffffff;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
    background: rgba(72, 83, 85, 1);
    color: #fff;
}

.sp-megamenu-parent .sp-dropdown {
    z-index: 9999;
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {padding: 10px;}

#sp-header.animated.fixed-header img {
    transition: all 0.3s ease 0s;
}

/* MENU */

.fixed-header .sp-megamenu-parent > li {
    margin-top: unset;
}

.fixed-header .sp-megamenu-parent {
    text-align: left;
}

.sp-megamenu-parent {
    display: block;
    float: none;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    z-index: 9;
    text-align: center;
}

.sp-megamenu-parent > li {
    display: inline-block;
    padding: 0;
    position: relative;
}

/* LOGO */



#sp-header:not(.fixed-header) #sp-logo,
.fixed-header #sp-logo {
    width: 19%;
}

#sp-header .logo {
    display: table;
    height: 90px;
    margin: 0 auto;
    float: left;
}

.animated.fixed-header .logo img {
    width: 150px !important;
    margin-top: -20px !important;
}

.fixed-header .sp-menu-item.home-logo.active {
    display: none;
}

/*  CTA menu */
#sp-cta-menu {
    display: none;
}

.fixed-header #sp-cta-menu {
    padding-left: 0;
    padding-right: 0;
    width: 27%;
    display: block;
}

/* NB: le vecchie regole orso .cta-menu (li 85px, img padding-top, span) sono state RIMOSSE:
   forzavano l'altezza li a 85px (nello sticky facevano sforare il logo) e vincolavano img/span
   in conflitto con il nuovo stile flex della CTA (vedi blocco "CTA HEADER" più sotto). */

/* OFFCANVAS */

.offcanvas-menu .offcanvas-inner .sp-module ul > li a:before {
    content: none;
}

.arrow.sp-megamenu-parent img {
    height: 100% !important;
    width: 100% !important;
}

.arrow.sp-megamenu-parent {
    bottom: 10px !important;
    top: unset !important;
}

/* HEADER MOBILE */
.fixed-header #offcanvas-toggler {
    line-height: 70px;
}

#offcanvas-toggler > i {
    color: #fff;
}

@media (max-width: 991px) {
    #sp-header {
        position: relative;
    }

    #sp-top-bar + #sp-header {
        top: 0px;
    }

    #sp-logo-mobile img {
        margin: 20px auto;
        width: 235px;
    }

    #sp-logo-mobile {
        background: #fff;
    }

    #offcanvas-toggler {
        float: unset;
        line-height: 87px;
        margin-left: 0px;
        font-size: 20px;
        text-align: center;
    }

    #offcanvas-toggler > i {
        color: #fff;
        display: block;
        margin-top: 20px;
    }

    #offcanvas-toggler span {
        display: block;
        line-height: 0;
        text-align: center;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 16px;
        margin-top: 27px;
        color: #fff;
    }
    
    /* Header mobile PULITO (HU): logo in flusso a sinistra, non più assoluto/centrato come orso */
    #sp-logo{
        width: auto;
        position: static;
        top: auto;
    }

    #sp-header .logo {
        display: flex;
        align-items: center;
        height: auto;
        margin: 0;
        float: none;
    }

    .fixed-header #sp-logo {
        display: none;
    }
    #sp-header {
        background:rgba(72, 83, 85, 0.95);
        height: 90px; 
    }
    #sp-header.fixed-header {
        background:rgba(72, 83, 85, 0.95);
        height: 90px; 
    }

    #sp-header .container:only-child,
    #sp-header.fixed-header .container:only-child {
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
    }

    /* Menu/hamburger a destra in modo normale (annulla il vecchio width:25%; left:75% di orso) */
    .fixed-header #sp-menu,
    #sp-header:not(.fixed-header) #sp-menu {
        width: auto;
        left: auto;
        position: relative !important;
        margin-left: auto;
    }

    .fixed-header #sp-cta-menu,
    #sp-cta-menu {
        display: block;
        width: 75%;
        right: 25%;
        margin: 0;
        padding: 0;
    }

    .fixed-header ul.cta-menu li,
    ul.cta-menu li {
        display: inline-block;
        width: 33.33333%;
        background: #fff;
        height: 90px;
        margin: 0;
        border-right: 1px solid #8d9b9d;
        border-bottom: 1px solid #8d9b9d;
      	float:left;
    }

    .cta-menu span {
        text-align: center;
        margin: 0 auto;
        margin-top: 0px;
        display: block;
        margin-top: 12px;
        color: #485355;
        font-weight: 500;
        padding-bottom: 10px;
    }

    ul.cta-menu {
        margin: 0;
        padding: 0;
        float: unset;
    }
    
    #sp-header.animated.fixed-header img {
        margin-top: 0px;
    }

    ul.cta-menu li {
    box-shadow: none;
    }
}

/* FINE HEADER MOBILE */

/* CSS carousel #slidehome rimosso (modulo 195 legacy eliminato) — 2026-07-20 */

.datepicker{
    z-index: 999999999;
}

.nomargin{
  margin:0px !important;
}
.nopadding{
  padding:0px !important;
}

.sp-contact-info > ul {
    margin: 0;
}
.btn.btn-standard {
    background-color: #8c8c8c;
    color: #fff;
    border: 3px solid #8c8c8c;
    text-transform: uppercase;
    padding: 10px 20px;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}
.btn.btn-standard:hover {
    background-color: #fff;
    color: #8c8c8c;
    border: 3px solid #8c8c8c;
}
.lingue img{
  display:inline;
}
.center {
  text-align:center;
}
.big {
  font-size:45px;
}
.brown {
  background:#b5a397;
  padding:10px;
}
.brown a{
  color:#f6f1ed;
}
.brown:hover {
  opacity:0.8;
  transition: all 0.2s ease-out 0s;
}
.brown1 {
  color:#8c8c8c;
}

.brown2 {
  color:#f6f1ed;
}
.brown3 {
  color:#464646;
}

/* La home (itemid-101) ora mostra l'ARTICOLO Home nel component: NON va più nascosto.
   (Regola orso originale: display:none, quando il contenuto stava nei moduli.) */
.itemid-101 #sp-main-body {
    display: block;
}

hr.style-eight {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #8c8c8c -moz-use-text-color -moz-use-text-color;
    border-image: none;
    border-style: double none none;
    border-width: medium;
    color: #8c8c8c;
    padding: 0;
    text-align: center;
}
hr.style-eight::after {
    background: #f6f1ed none repeat scroll 0 0;
    content: url("/images/b.png");
    display: inline-block;
    font-size: 1.5em;
    padding: 0 0.25em;
    position: relative;
    top: -0.7em;
}


.ruled {
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1050px;
    overflow: hidden;
    position: relative;
    text-align: center;
    z-index: 1;
}
.ruled::before {
    margin-left: -53% !important;
    text-align: right;
}
.ruled::before, .ruled::after {
    background-color: #8c8c8c;
    content: "";
    height: 1px;
    margin-left: 2%;
    overflow: hidden;
    position: absolute;
    top: 51%;
    width: 50%;
}
.ruled::before, .ruled::after {
    background-color: #8c8c8c;
    content: "";
    height: 1px;
    margin-left: 2%;
    overflow: hidden;
    position: absolute;
    top: 51%;
    width: 50%;
}

.box-scopri:hover img {
  opacity:0.8;
  transition: all 0.2s ease-out 0s;
}

/* BOOKING ONLINE */
.disponibilita {
    background: #b5a397 none repeat scroll 0 0;
    border: medium none;
    color: #f6f1ed;
    font-family: Open Sans,sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin-top: 10px !important;
    padding: 8px 15px;
}
.disponibilita:hover {
  opacity:0.8;
  transition: all 0.2s ease-out 0s;
}
.calendario {
    background: #f0efea url("../images/booking-calendar.png") no-repeat scroll right center !important;
  	cursor:pointer;
    background-size: unset !important;
}
.boxinput {
    margin:0 auto; 
  display: table;
}
#occupancies {
    background-color: #f6f1ed;
    background-image: url("../images/user.png");
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
}
#occupancies {
    -moz-appearance: none;
}
#dpd1, #dpd2, #occupancies {
    display: table;
    margin: 0 auto;
    margin-top:15px;
}
/* FINE BOOKING ONLINE */


.sp-module ul > li {
    border-bottom: 0px solid #e8e8e8;
    display: block;
    transition: all 300ms ease 0s;
}
#sp-main-body {
    padding: 0px 0;
}
.vertical-align {
    display: flex;
    flex-direction: row;
}
.vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] {
    align-items: center;
    display: flex;
    justify-content: center;
}
.vertical-align > [class^="col-"] > div, .vertical-align > [class*=" col-"] > div {
    flex-grow: 1;
}
@media (max-width: 768px) {
.vertical-align {
    display: block !important;
}
}


.center > img {
    display: inline;
}
/* #sp-top-bar + #sp-header {
    top: 0px;
} */
#sp-top-bar {
    background-color: #fff !important;
    color:#8c8c8c !important;
    font-size: 15px;
}
#sp-page-title {
    padding-top: 30px;
}



#sp-footer {
    color: #f6f1ed;
}
#sp-footer .management img {
    width: 100%;
    max-width: 200px;
    text-align: center;
    margin: 0 auto;
}
#sp-info-offerta {
    background: #e8e5db;
    margin-top: 30px;
}
#sp-info-offerta .chronoform textarea, #sp-info-offerta .chronoform select, #sp-info-offerta .chronoform input:not([type='submit']) {
    background-color: #fff;
}
#privacy{
    width: auto;
}

/* INIZIO FORM */
#chronoform-form-it .row, #chronoform-form-de .row {
    margin-top: 10px;
}
.chronoform h4 {
    margin-bottom: 40px;
}
  #chronoform-jobs input#curriculum {
    background-color: transparent !important;
}
#dpd3, #dpd4 {
    cursor: pointer;
    background-color: #ffffff;
    background-image: url("../images/calendar.png");
    background-repeat: no-repeat;
    background-position: right center;
}
.chronoform label {
    font-weight: normal;
    text-transform: uppercase;
    font-size: 13px;
}
.chronoform textarea, .chronoform select, .chronoform input:not([type='submit']) {
    border: 0;
    border-radius: 0;
    background-color:#f0efea;
    width: 100%;
}
.chronoform .btn.btn-standard:disabled {
    background-color: inherit;
    border: inherit;
}
#nome, #cognome, #telefono, #adulti, #n_adults, #bambini, #eta_bambini, #bambini_0_2, #bambini_3_6, #bambini_7_11, #n_camere, #email, #eta_bambini, #messaggio, #captcha1 {
    /* width: 100%; */
}
#messaggio {
    height: 100px;
}
#button3 {
    display: table;
    margin: 0 auto;
}
.gcore-line-tr {
    margin-bottom: 18px;
}



.g-recaptcha > div {
    margin: 0 auto;
}
.chrono_credits {
    display: none;
    visibility: hidden;
}
.chrono_credits > a {
    color: #f6f1ed;
    display: none;
    font-size: 1px;
    visibility: hidden;
}
.gtooltip.gvalidation-error-tip {
    background-color: #8c8c8c !important;
    border-color: #8c8c8c !important;
}
.gtooltip-arrow.gtooltip-arrow-top {
    border-top-color: #8c8c8c !important;
}
.gtooltip-arrow-border.gtooltip-arrow-border-top {
    border-top-color: #8c8c8c !important;
}
.gcore-label-left.required_label > span {
    color: #8c8c8c !important;
    font-weight: 700;
}
.btn-success {
    background-color: #8c8c8c;
    border-color: #8c8c8c;
    color: #f6f1ed;
    font-family: Open Sans;
    font-size: 25px;
}
/* FINE FORM */



#sp-booking {
    background: #8c8c8c none repeat scroll 0 0;
    margin-top: -1px;
}

input#dpd1, input#dpd2, input#dpd3, input#dpd4 {
    display: block !important;
    margin-top:15px;
}

#sp-lingua .sp-module {
    display: table;
    margin: 0 auto;
    width: auto;
}
#sp-lingua .sp-module ul >li >a {
    line-height: 25px;
}
#sp-lingua img {
    border-radius: 50%;
    width: 18px;
    height: 14px;
}

.lang-mob .sp-module-content .mod-languages ul.lang-inline {
    text-align: center;
}

.lang-mob img {
    border-radius: 50%;
    width: 18px;
    height: 14px;
}

#sp-booking .row.hidden-lg.hidden-md {
    padding: 10px;
}

#sp-booking .row.hidden-lg.hidden-md .col-xs-6.col-sm-6.col-md-6 span {
    font-size: 22px;
}

#sp-booking .row.hidden-lg.hidden-md .col-xs-6.col-sm-6.col-md-6 > a {
    display: table;
    margin: 0 auto;
    text-align: center;
    width: auto;
}



#sp-footer {
    font-size: 15px;
}

h4.header-footer {
    border-bottom: 1px solid;
    font-weight: 200;
    margin-bottom: 20px;
    padding-bottom: 10px;
    text-align: left;
}

.block1, .block2, .block3 {
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
    margin-bottom: 30px;
}
.block3 .social {
    text-align: center;
}
.block3 .social > a {
    margin: 5px;
}
.block4 {
    padding-bottom: 20px;
    padding-top: 30px;
}

/* === FOOTER: allineamento a produzione (2026-07-17) === */
/* Sfondo accento #5f6d6e (di default HU era scuro #171717) */
#sp-footer { background-color: #5f6d6e !important; }
/* Sezione "Link": due sotto-colonne affiancate su desktop (camere a sx / offerte-spa-contatti-privacy a dx).
   Il markup usa il grid FLOAT di Bootstrap 3 (col-md-7/col-md-5 senza .row) che su BS5 non affianca → reso flex. */
@media (min-width: 992px) {
    #sp-footer1 .block2 { display: flex; flex-wrap: wrap; }
    #sp-footer1 .block2 > h4.header-footer { flex: 0 0 100%; }
}
/* Testo legale in fondo (block4) centrato come produzione */
#sp-footer1 .block4 { text-align: center !important; }

#sp-footer .block1 a:hover,
#sp-footer .block2 a:hover,
#sp-footer .block3 a:hover {
    color: #999;
}

.TA_cdsscrollingravenarrow .rightBorder {
    display: none;
}
.TA_cdsscrollingravenarrow {
    display: table;
    width: auto;
    margin: 0 auto;
    margin-top: 20px;
}

.srfrRow:nth-child(3n+4) {
    clear: both;
}

.srfrRow {
    margin-bottom: 30px;
}

.layout-blog .entry-image.intro-image {
    height: 0px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    padding-top: 56.25% !important;
    margin: 0;
}

.offerte-rss span.dots {
    display: none;
}

.srfrReadMore {
    margin-top: 10px;
    float: left;
}

.entry-image img {
    margin: 0 auto;
}
#company-profile {
    padding: 40px 0;
}
#company-profile p {
    font-size: 16px;
    line-height: 22px;
}


/***** SLICK SLIDER OFFERTE*****/
.slick-slider {
    margin-bottom: 30px;
}
.slick-slider ul.slick-dots {
    float: left;
    margin-left: 15px;
    width: auto;
}
.slick-slider ul.slick-dots li {
    display: inline-block;
    width: 15px;
    height: 15px;
}
.slick-slider ul.slick-dots li button {
    background: #8c8c8c;
    width: 15px;
    height: 15px;
}
.slick-slider ul.slick-dots li button::before {
    content: none;
}
.slick-slider ul.slick-dots li.slick-active button {
    border: 2px solid #8c8c8c;
    background:#fff;
}
.slick-slider .slick-slide {
    position: relative;
}
.slick-slider .slick-slide .bordo-slide {
    margin: 0 15px;
}
.slick-slider .slick-slide .img-doc {
    width: 60%;
}
.slick-slider .slick-slide .img-doc img {
    width: 100%;
}
.slick-slider .slick-slide .doc {
    display: block;
    position: absolute;
    background:#e6e5e2;
    right: 0;
    width: 60%;
    transform: translateY(-50%);
    top: 50%;
    padding: 40px 25px;
}
.slick-slider .slick-slide .doc .titolo,
body.pagina-offerte #sp-main-body article .entry-header h2 {
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
}
.slick-slider .slick-slide .doc .introtext,
.slick-slider .slick-slide .doc .introtext .introtext-dettagli {
    font-size: 13px;
    min-height: 40px;
    line-height: 16px;
}

.bollino {
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    padding: 5px 10px;
    color:#fff;
    font-weight: 500;
    font-size: 18px;
}

.slick-slider .slick-slide .doc .introtext-dettagli {
    margin: 30px 0 0 0;
}
.slick-slider .slick-slide .doc .introtext .prezzo {
    font-size: 28px;
    line-height: 30px;
    letter-spacing: 1px;
    font-weight: bold;
    margin: 0;
    color: #8c8c8c;
}
.slick-slider .slick-slide .doc .icon-readmore {
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: #fff;
    text-align: center;
    float: right;
    position: absolute;
    right: 35px;
    bottom: 40px;
}
.slick-slider .slick-slide .doc .icon-readmore:hover {
    background-color: #8c8c8c;
}
.slick-slider .slick-slide .doc .icon-readmore::before {
    content: "\f067";
    font-family: FontAwesome;
    color: #8c8c8c;
}
.slick-slider .slick-slide .doc .icon-readmore:hover::before {
    color: #fff;
}
#sp-ultimeofferte {
    margin-bottom: 50px;
}
#sp-ultimeofferte .sp-module:first-child {
    margin-top: 50px;
}
#sp-ultimeofferte p.link-categoria {
    float: right;
    margin-top: -25px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    margin-right: 15px;
}
p.link-categoria::after {
    content: "\f178";
    font-family: FontAwesome;
    padding-left: 10px;
}
.riga-servizio {
    margin: 0 0 60px 0;
}
.riga-servizio div[class*="col-"] {
    padding: 0;
}
.riga-servizio .testo {
    padding: 30px 60px !important;
    font-size: 16px;
    line-height: 22px;
}
.riga-servizio .testo h3 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 35px;
    margin: 0 0 15px 0;
}
.riga-servizio .testo h4 {
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    font-size: 16px;
}
#sp-link-footer .sp-module {
    margin-top: 0;
}
#newsletter-container {
    padding: 50px 0;
    background: rgb(0,0,0);
    background: -moz-linear-gradient(90deg, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0) 90%);
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0) 90%);
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); 
}
#newsletter-footer {
    padding-top: 50px;
    padding-bottom: 50px;
    color: #fff;
}
#newsletter-footer header {
    margin-bottom: 50px;
}
#newsletter-footer input[type='email'] {
    border-radius: 0;
    width: 75%;
    border-radius: 0;
    height: 35px;
    float: left;
    line-height: 35px;
    border: 0;
}
#newsletter-footer input[type='email']:focus, #newsletter-footer input[type='checkbox']:focus {
    box-shadow: 0 0 10px red;
}
#newsletter-footer input[type='submit'] {
    width: 25%;
    float: left;
    height: 35px;
    line-height: 35px;
    border: 0;
    background: #f0efea;
    color: #464646;
    font-size: 14px;
    text-transform: uppercase;
}
#newsletter-footer input[type='submit']::before {
    content: "\f178";
    font-family: FontAwesome;
    padding-left: 10px;
}
#newsletter-footer label {
    font-size: 14px;
    padding-left: 5px;
    margin-top: 10px;
}
#newsletter-footer a {
    color: #fff;
    text-decoration: underline;
}

@media (min-width:992px) {
    .riga-servizio .testo {
        padding: 0px 60px !important;
    }
    .riga-servizio {
        display: flex;
        align-items: center;
    }
}
@media (max-width:991px) {
    #company-profile {
        padding: 40px 20px;
    }
    .riga-servizio .testo {
        padding: 30px !important;
    }
    #sp-footer .block1, #sp-footer .block2, #sp-footer .block3, #sp-footer h4.header-footer {
        text-align: center;
    }
    #sp-footer .block1 img {
        margin: 0 auto;
    }
}
@media (min-width:576px) and (max-width:767px) {
    .slick-slider .slick-slide .doc {
        padding: 20px 15px;
    }
}
@media (max-width:575px) {
    .slick-slider .slick-slide .doc {
        position: relative;
        transform: none;
        top: 0;
        width: 100%;
    }
    .slick-slider .slick-slide .img-doc, .slick-slider .slick-slide .img-doc img {
        width: 100%;
    }
}


/* BOOKING FORM SU HOMEPAGE */

.booking-form-container {
    position: absolute;
    bottom: 150px;
    background: #fff;
    z-index: 99;
    text-align: center;
    left: 10vw;
    right: 10vw;
}
#booking1 {
    width: 100%;
}
#booking1 .label {
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #464646;
}
#booking1 input, #booking1 select, #booking1 button {
    margin-top: 0 !important;
    height: 55px;
    background-position: right center !important;
    box-shadow: none !important;
    font-weight: 700;
    width: 100%;
    background-size: 22px !important;
    -webkit-appearance: button;
    appearance: button;
}
#booking1 select {
    background-image: url('../images/freccia-giu.png');
    background-repeat: no-repeat;
    background-size: unset !important;
}
#booking1 input:not([type='submit']), #booking1 select {
    border: 0;
    border-radius: 0;
    background-color: #fff !important;
    padding: 0;
    text-align: left;
}
#booking1 .calendario {
    background-image: url("../images/booking-calendar.png") !important;
    background-position: left !important;
    background-repeat: no-repeat;
    padding-left: 40px !important;
}
#booking1 > div:last-child {
    padding: 0;
}
#booking1 > div:last-child button {
    width: 100%;
    height: 82px;
}

/* FINE BOOKING FORM SU HOMEPAGE */

/* PAGINA OFFERTE */

body.pagina-offerte.view-category article.item:first-child {
    margin-top: 50px;
}
body.pagina-offerte.view-category #sp-info-offerta {
    display: none;
}
body.pagina-offerte.view-category #sp-main-body article {
    display: flex;
    align-items: center;
    background:#f0efea;    
    padding: 40px 0;
}
body.pagina-offerte.view-category #sp-main-body article > div.col-xs-12:first-child {
    padding: 0;
}
body.pagina-offerte.view-category #sp-main-body article .entry-header h2 a {
    font-size: 20px;
    line-height: 18px;
    font-weight: 700;
    color: #8c8c8c;
}
body.pagina-offerte.view-category #sp-main-body article .introtext-dettagli {
    position: relative;
    margin-top: 40px;
}
body.pagina-offerte.view-category #sp-main-body article .prezzo {
    font-size: 28px;
    line-height: 30px;
    letter-spacing: 1px;
    font-weight: bold;
    margin: 0;
    color: #8c8c8c;
}
body.pagina-offerte.view-category #sp-main-body article .icon-readmore {
    width: 35px;
    height: 35px;
    line-height: 35px;
    background-color: #fff;
    text-align: center;
    float: right;
    position: absolute;
    right: 35px;
    bottom: 0px;
}
body.pagina-offerte.view-category #sp-main-body article .icon-readmore:hover {
    background-color: #8c8c8c;
}
body.pagina-offerte.view-category #sp-main-body article .icon-readmore::before {
    content: "\f067";
    font-family: FontAwesome;
    color: #8c8c8c;
}
body.pagina-offerte.view-category #sp-main-body article .icon-readmore:hover::before {
    color: #fff;
}
body.pagina-offerte.view-category #sp-main-body article span.dots {
    display: none;
}
@media (max-width:767px) {
    body.pagina-offerte.view-category #sp-main-body article {
        display: grid;
        padding-top: 0px;
    }
    body.pagina-offerte.view-category #sp-main-body article .entry-header h2  {
        margin: 30px 0;
    }
    body.pagina-offerte.view-category #sp-main-body article p {
        font-size: 16px;
    }
}
/* FINE PAGINA OFFERTE */


/* PAGINA SINGOLA OFFERTA */

body.pagina-offerte.view-article #sp-main-body article .entry-header h2 {
    font-size: 27px;
    line-height: 25px;
    font-weight: 700;
    color: #8c8c8c;
    text-transform: initial;
}
body.pagina-offerte.view-article #sp-main-body article div[itemprop='articleBody'] {
    font-size: 16px;
}
body.pagina-offerte.view-article #sp-main-body article .entry-image img {
    margin: 0;
    padding: 0;
    width: 100%;
}
/* body.pagina-offerte.view-article #sp-main-body article .container-tasto-info {
    margin: 50px 0;
} */
body.pagina-offerte.view-article #sp-main-body .chronoform {
    margin: 50px 0;
}

/*  FINE PAGINA SINGOLA OFFERTA */

.banner-top-container {
    position: relative;              /* contiene overlay e titolo (erano assoluti rispetto a un antenato lontano) */
    background-size: cover;
    background-position: center center;
    padding-top: 35%
}
.banner-top-overlay {
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.banner-top-container h2 {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    left: 0;
    right: 0;
    color: #fff;
    margin: 0;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
    font-weight: 500;
    text-transform: uppercase;
}
/* Titolo banner-top multilingua SENZA plugin (sostituisce Easy Language / {lang}).
   Il <body> ha la classe lingua di Joomla (it-it / en-gb / fr-fr): mostro solo lo
   span della lingua corrente. Aggiunto 2026-07-20. */
.banner-top-container .hc-blang { display: none; }
body.it-it .banner-top-container .hc-blang-it,
body.en-gb .banner-top-container .hc-blang-en,
body.fr-fr .banner-top-container .hc-blang-fr { display: inline; }

/* PAGINA ELENCO CAMERE */

#elenco-camere .riga-servizio {
    margin-top: 50px;
}
#elenco-camere .riga-servizio img {
    width: 100%;
}
#elenco-camere .riga-servizio button {
    margin-top: 20px;
}
@media (min-width:768px) {
    #elenco-camere .riga-servizio {
        display: flex;
        align-items: center;
    }    
}

/* FINE PAGINA ELENCO CAMERE */

/* PAGINA CAMERA SINGOLA */

#dettaglio-camera > .row:first-child {
    margin-top: 60px;
}
/* Ridotto il vuoto eccessivo (era 70px) fra descrizione e gallery — 2026-07-20 */
#dettaglio-camera > .row:nth-child(2) {
    margin-bottom: 15px;
}
/* Larghezza leggibile della descrizione: spa/ristorante usano col-xs-12 (full 1290px,
   righe troppo lunghe) mentre le camere usano col-md-8. Cap coerente col resto. */
#dettaglio-camera > .row:nth-child(2) p {
    max-width: 900px;
    line-height: 1.7;
}
#dettaglio-camera .gallery-camera,
.gallery-content {
    margin-top: 20px;
    margin-bottom: 30px;   /* spazio prima di newsletter/footer */
}

/* La colonna che contiene la gallery si comporta come una colonna NORMALE
   (padding 15px, margin 0) così le immagini si allineano col testo. Prima
   aveva padding:0 + margin -15px (trucco full-bleed) che su MOBILE spingeva
   la prima immagine a left -15px, fuori dal bordo sinistro. Fix 2026-07-20.
   Vale per col-sm-12 (camere) e col-xs-12 (spa/ristorante). */
.gallery-camera > [class*="col"],
.gallery-content > [class*="col"] {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0;
    margin-right: 0;
}


@media (max-width:991px) {
    #dettaglio-camera * {
        text-align: center !important;
    }
}

/* FINE PAGINA CAMERA SINGOLA */



#form-booking.modal.fade.in {
    top: 0px;
    left: 0;
    right: 0;
}

#form-booking .modal-backdrop {
    height: 100% !important;
    position: fixed;
}

/* @media (min-width: 768px) {
    #form-booking .modal-dialog {
        width: 80%;
    }
}

@media (max-width: 767px) {
    #form-booking .modal-dialog {
        width: 95%;
    }
} */


/* =====================================================================
   Header trasparente sovrapposto alla HERO (come orso J3)
   Aggiunto 2026-07-16, reso update-safe 2026-07-20 con `body:has(#sp-slider .sp-module)`:
   selettore CSS vero SOLO quando la posizione "slider" contiene un modulo
   (slideshow sulla home, banner-top sulle pagine interne). NIENTE modifiche a
   index.php (che Helix sovrascrive all'update): tutto qui in custom.css. Così sia
   la home sia le pagine interne hanno l'header trasparente sovrapposto
   all'immagine hero. Helix Ultimate usa la classe .header-sticky sullo
   scroll (non .fixed-header di Helix3). Il top-bar resta in cima; l'header
   diventa assoluto e si sovrappone alla hero ("va sotto l'header ma
   non il top"). Regolabile: --cristallo-topbar-h = altezza del top-bar.
   Per disattivare: rimuovere questo blocco. */
body:has(#sp-slider .sp-module) { --cristallo-topbar-h: 40px; }

/* Header trasparente sovrapposto (stato non-sticky) */
body:has(#sp-slider .sp-module) #sp-header:not(.header-sticky) {
    position: absolute;
    top: var(--cristallo-topbar-h, 40px);
    left: 0; right: 0; width: 100%; z-index: 100;
    /* Barra scura UNIFORME (non più sfumata a trasparente) così il logo resta dentro la parte scura, come produzione */
    background: rgba(72, 83, 85, .55) !important;
    box-shadow: none !important;
    transition: background .3s ease;
}

/* Menu allineato a SINISTRA subito dopo il logo (come produzione), non spinto a destra come default HU.
   E' la .sp-column dentro #sp-menu (classe HU justify-content-end) che va sovrascritta. */
/* Solo DESKTOP: su mobile il menu diventa hamburger e va tenuto a destra (default HU) */
@media (min-width: 992px) {
    body:has(#sp-slider .sp-module) #sp-header #sp-menu .sp-column {
        justify-content: flex-start !important;
    }
}

/* =====================================================================
   CTA HEADER (SCRIVI / CHIAMA / PRENOTA) — modulo custom in posizione "menu",
   3 riquadri bianchi a destra, come produzione. Su tutte le pagine.
   ===================================================================== */
/* COME PRODUZIONE: la CTA è NASCOSTA quando l'header è in cima (non-sticky),
   e appare SOLO nello sticky, con le scatole bianche che SPORGONO sotto la barra. */
#sp-header:not(.header-sticky) .sp-module.cristallo-cta { display: none; }

/* Spinge il modulo CTA all'estrema destra della barra menu */
#sp-header #sp-menu .sp-module.cristallo-cta { margin-left: auto; }
#sp-header ul.cta-menu {
    display: flex; list-style: none; margin: 0; padding: 0; gap: 3px; align-items: flex-start;
}
#sp-header ul.cta-menu > li { background: #fff; box-shadow: 1px 2px 5px rgba(0,0,0,.25); }
#sp-header ul.cta-menu > li > a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 84px; height: 85px; padding: 10px 6px; gap: 7px;
    color: #485355 !important; text-decoration: none; text-shadow: none;
}
#sp-header ul.cta-menu > li > a:hover { background: #f2efec; }
/* Icone grandi come produzione (~36px) */
#sp-header ul.cta-menu > li > a img { height: 36px; width: auto; margin: 0; }
#sp-header ul.cta-menu > li > a span {
    font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; line-height: 1; color: #485355; white-space: nowrap;
}
/* Nello sticky: il MODULO resta alto 70px (= barra) e allineato in alto, così NON allarga
   la riga interna (il logo non sfora); le scatole (85px) sporgono ~15px sotto grazie a overflow visibile. */
#sp-header.header-sticky .sp-module.cristallo-cta {
    height: 70px; align-self: flex-start; overflow: visible;
}
/* MOBILE: la CTA (Scrivi/Chiama/Prenota) è SEMPRE nascosta, anche nello sticky.
   Le regole sticky sopra la rimostravano a dimensione desktop su mobile, rompendo
   il layout. Aggiunto 2026-07-20. */
@media (max-width: 991px) {
    #sp-header .sp-module.cristallo-cta { display: none !important; }
}


/* Stato sticky: header scuro, COMPATTO 70px, logo ridotto a 63px come produzione */
body:has(#sp-slider .sp-module) #sp-header.header-sticky {
    background: rgba(72, 83, 85, .97) !important;
    min-height: 70px !important;
    height: 70px !important;
}
/* Logo sticky: 63px di altezza (=~150px larghezza), non la dimensione minuscola di default HU */
body:has(#sp-slider .sp-module) #sp-header.header-sticky .logo-image {
    height: 63px !important;
    width: auto !important;
}
/* Contenitore logo sticky centrato verticalmente nei 70px */
body:has(#sp-slider .sp-module) #sp-header.header-sticky .logo {
    height: 70px !important;
    display: flex !important;
    align-items: center;
}

/* Menu BIANCO puro e leggibile in entrambi gli stati (sopra slideshow e sticky scuro) */
body:has(#sp-slider .sp-module) #sp-header .sp-megamenu-parent > li > a {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Peso font menu = 600 come produzione (era troppo fino), su tutte le pagine */
#sp-header .sp-megamenu-parent > li > a {
    font-weight: 600 !important;
}
/* Sticky: gli item menu tornano a 70px (line-height) così la riga interna è 70px e il logo NON sfora sotto (come produzione) */
body:has(#sp-slider .sp-module) #sp-header.header-sticky .sp-megamenu-parent > li > a {
    line-height: 70px !important;
    height: 70px !important;
}

/* Logo più grande e header più alto sulla home (stato non-sticky), come orso.
   Sullo sticky torna alla dimensione compatta di default HU. */
body:has(#sp-slider .sp-module) #sp-header:not(.header-sticky) {
    min-height: 90px;             /* header 90px come J3 */
    display: flex;
    align-items: center;          /* centra verticalmente logo+menu -> margine sopra/sotto */
}
body:has(#sp-slider .sp-module) #sp-header:not(.header-sticky) > .container {
    width: 100%;
}
body:has(#sp-slider .sp-module) #sp-header:not(.header-sticky) .logo-image {
    height: 76px !important;      /* logo 76px come J3 */
    width: auto !important;
}
/* Override della regola orso #sp-header .logo{height:90px;display:table;float:left}
   che teneva il logo allineato in alto: lo centriamo verticalmente nell'header. */
body:has(#sp-slider .sp-module) #sp-header:not(.header-sticky) .logo {
    height: auto !important;
    display: flex !important;
    align-items: center;
    float: none !important;
}
/* =====================================================================
   HOME HEADER MOBILE (<=991px): l'header trasparente sovrapposto è SOLO desktop.
   Su mobile l'header assoluto si sovrapponeva al top-bar e il logo bianco finiva
   fuori posto. Qui lo riportiamo a barra NORMALE in flusso, scura (il logo è bianco),
   sotto il top-bar, con logo a sinistra e hamburger a destra (default HU).
   ===================================================================== */
@media (max-width: 991px) {
    body:has(#sp-slider .sp-module) #sp-header:not(.header-sticky) {
        position: relative !important;
        top: 0 !important;
        min-height: 0 !important;
        display: block !important;
        background: rgba(72, 83, 85, .97) !important;
    }
    /* header compatto e riga centrata verticalmente */
    #sp-header {
        height: 70px !important;
    }
    #sp-header .container-inner > .row {
        min-height: 70px;
        align-items: center;
    }
    /* Il menu (con hamburger) occupa lo spazio e spinge l'hamburger a DESTRA
       (annulla il justify-content:flex-start del menu desktop, che su mobile lo teneva a sinistra) */
    #sp-header #sp-menu {
        flex: 1 1 auto;
    }
    #sp-header #sp-menu .sp-column {
        justify-content: flex-end !important;
    }
}
/* Fine blocco HOME header trasparente */

/* =====================================================================
   SOTTOMENU dropdown megamenu DESKTOP (es. "Camere") allineato a PRODUZIONE.
   Aggiunto 2026-07-20. HU default: font 14px, <a> inline-block, padding 8px 0,
   hover testo arancione -> testo piccolo ed evidenziazione stretta attorno al
   testo. Produzione: font 18px, <a> BLOCK full-width, padding 10px, hover
   sfondo accento #5f6d6e, pagina corrente sfondo scuro #485355, testo bianco.
   Scoped a #sp-header per NON toccare il menu mobile offcanvas (#modal-menu).
   ===================================================================== */
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    display: block;              /* full-width: l'evidenziazione riempie tutta la riga */
    font-size: 18px;             /* era 14px, come produzione */
    line-height: 24px;
    padding: 10px 16px;
    text-align: center;
    border-radius: 2px;
    transition: background .2s ease, color .2s ease;
}
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background: #5f6d6e;         /* accento, come produzione (era testo arancione) */
    color: #fff;
}
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item.current-item > a {
    background: #485355;         /* scuro: pagina corrente, come produzione */
    color: #fff;
}
/* Dropdown più largo: i nomi lunghi (es. "Doppia Standard Montagna") su UNA riga.
   width auto + min-width lascia crescere la tendina fino alla voce più lunga; nowrap evita il ritorno a capo. */
#sp-header .sp-megamenu-parent .sp-dropdown {
    width: auto;
    min-width: 300px;
}
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    white-space: nowrap;
}

/* =====================================================================
   MENU MOBILE OFFCANVAS (.offcanvas-menu) allineato a PRODUZIONE.
   Aggiunto 2026-07-20. Locale HU: pannello BIANCO, testo #252525 mixed-case
   18px, voce attiva e sotto-menu ARANCIONE (#ec430f preset). Produzione:
   pannello SCURO, testo BIANCO UPPERCASE 14px/500, divisori fra le voci,
   voce attiva bianca (niente arancione), sotto-menu Camere 14px indentato.
   Scoped a .offcanvas-menu: NON tocca il menu megamenu desktop.
   ===================================================================== */
.offcanvas-menu {
    background: #3a3a3a;                         /* pannello scuro come produzione */
}
/* Voci di primo livello: bianche, uppercase, 14px/500, con inset orizzontale.
   NB uso il prefisso .offcanvas-inner ul.menu per pareggiare la specificità
   della regola HU (che mette 18px/#252525/opacity:.7) e vincere per ordine. */
.offcanvas-menu .offcanvas-inner ul.menu > li > a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 12px 20px;
    line-height: 1.3;
    opacity: 1;                                 /* HU mette 0.7 -> testo sbiadito */
}
/* Divisori sottili fra le voci (come produzione) */
.offcanvas-menu .offcanvas-inner ul.menu > li { border-bottom: 1px solid rgba(255,255,255,.12); }
.offcanvas-menu .offcanvas-inner ul.menu > li:last-child { border-bottom: none; }
/* Tutti i link del pannello bianchi */
.offcanvas-menu .offcanvas-inner ul.menu li a,
.offcanvas-menu .offcanvas-inner ul.menu li span { color: #fff; }
/* Sotto-menu "Camere": 14px, uppercase, indentato, leggermente più tenue */
.offcanvas-menu .offcanvas-inner ul.menu .menu-child > li > a {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 10px 20px 10px 34px;
    color: rgba(255,255,255,.85);
    opacity: 1;
}
/* Voce ATTIVA / pagina corrente: BIANCA (override arancione preset HU) */
.offcanvas-menu .offcanvas-inner ul.menu li.active > a,
.offcanvas-menu .offcanvas-inner ul.menu li.current > a,
.offcanvas-menu .offcanvas-inner ul.menu li.current-item > a {
    color: #fff !important;
    background: transparent;
    opacity: 1;
}
/* Tap/hover: evidenziazione sottile chiara */
.offcanvas-menu .offcanvas-inner ul.menu li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu li a:focus {
    background: rgba(255,255,255,.08);
    color: #fff;
    opacity: 1;
}
/* Chevron sotto-menu (menu-toggler) bianco */
.offcanvas-menu .menu .menu-toggler::before,
.offcanvas-menu .menu .menu-toggler::after { border-color: #fff !important; color: #fff !important; }
/* Bottone chiudi (burger -> X) bianco su sfondo scuro */
.offcanvas-menu .close-offcanvas .burger-icon span { background: #fff !important; }

/* =====================================================================
   TOP-BAR MOBILE COMPATTA (<=991px) — su tutte le pagine.
   Una sola riga: bandiere lingua a SINISTRA, contatti SOLO-ICONE a DESTRA
   (i testi hanno hidden-sm/hidden-xs che su Bootstrap 5 non nasconde più).
   ===================================================================== */
@media (max-width: 991px) {
    #sp-top-bar .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
    #sp-top1 {
        flex: 0 0 auto;
        width: auto;
    }
    #sp-top1 .sp-column { text-align: left !important; }
    #sp-top1 .lang-inline { margin: 0; }
    #sp-top2 {
        flex: 1 1 auto;
        width: auto;
    }
    #sp-top2 .sp-column { text-align: right !important; }
    /* solo icone: nascondi le etichette testuali dei contatti */
    #sp-top2 .sp-contact-info a.hidden-sm,
    #sp-top2 .sp-contact-info a.hidden-xs { display: none !important; }
    /* icone in riga, spaziate, a destra */
    #sp-top2 .sp-contact-info ul {
        display: flex;
        gap: 18px;
        margin: 0;
        padding: 0;
        justify-content: flex-end;
        align-items: center;
    }
    #sp-top2 .sp-contact-info li { margin: 0; list-style: none; }
    #sp-top2 .sp-contact-info i { font-size: 18px; }

    /* Logo mobile: mantiene le PROPORZIONI (era 44x36 stirato con object-fit:fill; naturale 180x76).
       max-width:none toglie il limite 100% del contenitore che lo comprimeva a 44px. */
    #sp-header .logo-image-phone {
        width: auto !important;
        max-width: none !important;
        height: 34px !important;
        object-fit: contain !important;
    }

    /* Hamburger compatto: la regola orso "#offcanvas-toggler span{margin-top:27px}" (pensata per
       un'etichetta testo) rendeva le 3 linee altissime e spaziate. Qui le riportiamo compatte. */
    #sp-header .burger-icon { height: auto !important; }
    #sp-header .burger-icon span {
        margin: 0 0 5px 0 !important;
        height: 2px !important;
        width: 25px !important;
        background-color: #fff !important;   /* linee bianche: leggibili sul fondo grigio */
    }
    #sp-header .burger-icon span:last-child { margin-bottom: 0 !important; }
}