body.SiteBackground{background-image:url('https://resx.octorate.com/content/437522/1780175258207.jpg')}@media (min-width: 1220px) {.SearchLabel .fa{background:#a59156;color:#fff}}.BoxHover:hover{box-shadow:1px 1px 10px #a59156}.SearchBar .GreenButton .ui-button-text{background-color:#a59156}.SiteTopBar{background-color:rgba(165,145,86,0.8)}:root{--color:#a59156!important;--color-rotation:45.90866575181945deg!important;}.button, .button span.ui-button-text, .customButton span.ui-button-text{background-color:#a59156!important;}/* ==========================================================================
   SECTION 1: PAGINA BENVENUTO & STRUTTURA GENERALE
   ========================================================================== */


/* Lingua e localizzazione */
#j_idt358\:icon .Lang {.customSelect, .customSelect select, .slct select 
    transform: scale(1.5) translateX(-8px);
    transform-origin: left center;
}


/* Footer del sito */
footer.flex-auto {
    visibility: hidden !important;
    /* eventualmente forza un'altezza specifica */
    height: 60px !important;
}



/* Sezione Cover: Immagini e sfondi */
section.cover .picture img {
    max-width: 250px !important;  /* cambia il numero a piacere */
}

section.cover .empty, section.cover .picture {
    background-color: transparent !important;
    box-shadow: none !important;
}

section.cover div.information {
    background-color: transparent !important;
    padding-top: 25px !important;
    box-shadow: none !important;
}

/* Contenuto di benvenuto */
section.welcome div.content {
     text-align: center;
}

section.welcome div.content h1, section.welcome div.content h3 {
    display: none;
}

/* Scorciatoie e Box principali */
section.shortcuts a.box, section.welcome div.content {
    box-shadow: none !important;
    border: 0.5px solid #a59156 !important;
	background-color: rgba(255, 255, 255, 0.7) !important;
}

/* Elementi di intestazione della pagina benvenuto */
header span.count.small {
    box-shadow: none !important;
    border: 0.5px solid #a59156 !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
}


header .datetheme2 p {
    border-bottom: 5px solid #a59156 !important;
}


/* ==========================================================================
   SECTION 2: LOGO E INTESTAZIONE (DESKTOP DI BASE)
   ========================================================================== */

.headerLogo {
    max-height: 300px !important;
    width: 280px !important;
    margin-top: 30px !important;
}

.HotelHeader2 div.information[data-id="6"] {
    height: auto !important;        /* Rimuove l'altezza fissa da 30px */
    min-height: 0 !important;       /* Rimuove il vincolo di altezza minima */
    padding-bottom: 2px !important; /* Questo valore decide la distanza esatta tra testo e linea */
    margin-top: 8px !important;
	margin-bottom: 25px !important;
}

.customHeaderLeft {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Logo centrato */
.customHeaderLeft a:first-child {
    margin: 0 auto !important;
}

/* Nascondi l'icona "i" */
.customHeaderLeft .information img,
.customHeaderLeft .information svg,
.information .headerIconTheme2 > img,
.information .headerIconTheme2 > svg {
    display: none !important;
}

/* Barra di intestazione e pannelli fissi */
.SiteHeader .HotelHeader {
    box-shadow: none !important;
    border-radius: none !important;
    border-bottom-left-radius: none !important;
    border-bottom-right-radius: none !important;
    border-bottom: none !important;
}

.stickyPanel {
    height: 60px !important;
}

header div.contacts {
    display: none !important;
}


/* ==========================================================================
   SECTION 3: BOTTONI, COLORI BEIGE ED ELEMENTI CAMERE/TARIFFE
   ========================================================================== */

/* Colori dei pulsanti principali */
#toTop {
    background: #a59156 !important; 
  bottom: 30px !important;
  right: 25px !important;
}

section.room div.details .offers {
    background-color: #a59156 !important;
}

.customButtonGreen span.ui-button-text {
    background-color: #a59156 !important;
}

.OrangeButton .ui-button-text {
    background-color: #a59156 !important;
}

/* Dettagli e info camera */
.shortDesc {
  margin-top: 15px !important;
  padding-top: 15px !important;
  border-top: 1px solid #a59156 !important;
}

section.room div.details .roominfo {
  margin-top: 15px !important;
  padding-top: 15px !important;
  border-top: 1px solid #a59156 !important;
}

/* Prezzi e valute */
section.room div.offert .box .price {
  color: #a59156 !important;
}

section.room div.options .row .action .price {
    color: #a59156 !important;
}

section.room div.offert .box .price sup, section.room div.options .row .action .price sup {
    color: #a59156 !important;
}

/* Allineamenti e bottoni di gestione */
.wid100px .justifyContentCenter {
  justify-content: flex-start !important;
}

section.room div.offert .button.delete, section.room div.offert .button.edit {
        display: none !important;
}

/* Layout griglia per disponibilità */
.DispFlex.FlexWrap {
  display: grid !important;
  grid-template-columns: repeat(2, auto) !important;
  gap: 2px 5px !important;
  justify-content: start !important;
}

/* Pannello Sticky Variazione Prezzo */
.stickyPanel.PriceChange > div:first-child {
  display: none !important;
}

.stickyPanel.PriceChange {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Bottoni della sezione ospiti */
.justify-content-end button.ui-button-icon-only .ui-button-text {
    background-color: #D3D3D3 !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}


/* ==========================================================================
   SECTION 4: TIPOGRAFIA E CARATTERI (FONT FAMILY)
   ========================================================================== */

.text1SubHeader, .textBoldSubHeader {
    font-family: 'Quicksand','Roboto', sans-serif !important;
    font-size: medium !important;
}

section.relative div.content h1 {
  font-family: 'Quicksand','Roboto', sans-serif !important;
  font-size: 18px !important;
}

section.room div.details h1 {
  font-family: 'Quicksand','Roboto', sans-serif !important;
  color: #a59156;
  font-size: clamp(1.5rem, 5vw, 3rem) !important
} 

.Blue {
   font-family: 'Quicksand','Roboto', sans-serif !important;
}

section.room div.label p {
   font-family: 'Quicksand','Roboto', sans-serif !important;
}

.button, .button span.ui-button-text, .customButton span.ui-button-text {
    font-family: 'Quicksand','Roboto', sans-serif !important;
  	border-radius: 0 !important;
}
 
header div.contacts a em, section.cover div.information a em {
     font-family: 'Quicksand','Roboto', sans-serif !important;
}

header .information {
     font-family: 'Quicksand','Roboto', sans-serif !important;
}

section.room div.details p {
 font-family: 'Quicksand','Roboto', sans-serif !important;
}

section.relative a p {
  font-family: 'Quicksand','Roboto', sans-serif !important;
 }

h1, h2, h3, h4, h5, h6 {
   font-family: 'Quicksand','Roboto', sans-serif !important;
 }

section.room div.details .offers em, section.room div.details .offers strong {
    font-family: 'Quicksand','Roboto', sans-serif !important;
 }

.customButtonGreen span.ui-button-text {
  font-family: 'Quicksand','Roboto', sans-serif !important;  
  background-color: #a59156;
}

.Padding20 {
    font-family: 'Quicksand','Roboto', sans-serif !important;
}

header .datetheme2 label {
   font-family: 'Quicksand','Roboto', sans-serif !important;
   white-space: nowrap !important;
   color: #000000 !important;
}

header .datetheme2 em {
font-family: 'Quicksand','Roboto', sans-serif !important;
}

/* Caratteri Finestre di dialogo / Coupon */
.swal2-styled.swal2-confirm {
    font-family: 'Quicksand', 'Roboto', sans-serif !important;
}

.swal2-styled.swal2-cancel {
    font-family: 'Quicksand', 'Roboto', sans-serif !important;
}


/* ==========================================================================
   SECTION 5: ICONE SERVIZI (OCTORATE AMENITIES DINAMICHE)
   ========================================================================= */

/* 1. Nascondi gli object originali di Octorate (Risolve la doppia icona) */
span.DispFlex.AlignItemsCenter object {
    display: none !important;
}

/* 2. Genera un'icona "sicura" tramite pseudoelemento */
span.DispFlex.AlignItemsCenter::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    transform: translateY(4px);
    background-color: #a59156 !important; 
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

/* 3. Mappe degli SVG associate dinamicamente al contenuto dell'object */
span.DispFlex.AlignItemsCenter:has(object[data*="AC.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/AC.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/AC.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="HAIR_DRYER.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/HAIR_DRYER.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/HAIR_DRYER.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="BED_LINENS.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/BED_LINENS.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/BED_LINENS.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="FREE_PARKING.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/FREE_PARKING.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/FREE_PARKING.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="PATIO_OR_BELCONY.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/PATIO_OR_BELCONY.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/PATIO_OR_BELCONY.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="TOWEL.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/TOWEL.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/TOWEL.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="SHAMPOO.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/SHAMPOO.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/SHAMPOO.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="HOT_WATER.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/HOT_WATER.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/HOT_WATER.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="WIRELESS_INTERNET.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/WIRELESS_INTERNET.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/WIRELESS_INTERNET.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="HANGERS.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/HANGERS.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/HANGERS.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="HOT_WATER_KETTLE.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/HOT_WATER_KETTLE.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/HOT_WATER_KETTLE.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="BIDET.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/BIDET.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/BIDET.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="MINI_FRIDGE.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/MINI_FRIDGE.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/MINI_FRIDGE.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="ESSENTIALS.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/ESSENTIALS.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/ESSENTIALS.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="SAFE.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/SAFE.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/SAFE.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="TV.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/TV.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/TV.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="DEFAULT.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/DEFAULT.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/DEFAULT.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="JACUZZI.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/JACUZZI.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/JACUZZI.svg");
}

span.DispFlex.AlignItemsCenter:has(object[data*="PATIO_OR_BELCONY.svg"])::before {
    -webkit-mask-image: url("https://resx.octorate.com/content/amenities/PATIO_OR_BELCONY.svg");
    mask-image: url("https://resx.octorate.com/content/amenities/PATIO_OR_BELCONY.svg");
}


/* ==========================================================================
   SECTION 6: GESTIONE IMMAGINI DI STRUTTURA ED ERRORI (IPHONE FIX GLOBAL)
   ========================================================================== */

/* 1. Pulizia immagini originali */
span.filterRed img,
span.filterGreen img,
span.filterRed img.floatNone,
span.filterGreen img.floatNone {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. Fix anti-colore per iPhone */
span.filterRed,
span.filterGreen {
    background: transparent !important;
    border: none !important;
    filter: none !important; 
    -webkit-filter: none !important;
}

/* Iniettiamo l'icona grigia globale in Base64 agganciata allo span */
span.filterRed::before,
span.filterGreen::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjMDAwMDAwIj48cGF0aCBkPSJNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTIxNiAzMzZoMjRWMjQwaC0yNGMtMTMuMyAwLTI0LTEwLjctMjQtMjRzMTAuNy0yNCAyNC0yNGg0MGMxMy4zIDAgMjQgMTAuNyAyNCAyNHYxMjBoMjRjMTMuMyAwIDI0IDEwLjcgMjQgMjRzLTEwLjcgMjQtMjQgMjRIMjE2Yy0xMy4zIDAtMjQtMTAuNy0yNC0yNHMxMC43LTI0IDI0LTI0em00MC0yMDhhMzIgMzIgMCAxIDEgMCA2NCAzMiAzMiAwIDEgMSAwLTY0eiIvPjwvc3ZnPg==") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    opacity: 0.4 !important; /* Grigio chiaro */
    vertical-align: middle !important;
}

button#confirmButton2 {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}



/* ==========================================================================
   SECTION 7: MEDIA QUERIES (RESPONSIVE DESIGN)
   ========================================================================== */

/* --- SCHERMI GRANDI / DESKTOP (min-width: 900px) --- */
@media only screen and (min-width: 900px) {
    .arrival > div,
    .departure > div {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
    }

    .row span strong, section.room div.details .view .box strong {
       margin: 5px 0 0 0px !important;
    }

    section.room div.details .view .box p {
       margin: 5px 0 0 0px !important;
    }

.chekinout p,
    .chekinout h6 {
      white-space: nowrap !important;
    }

    /* Allineamento icone iPhone su desktop */
    span.filterRed::before,
    span.filterGreen::before {
        margin-left: 5px !important;
        position: relative !important;
        top: -1px !important;
    }
}


/* --- SCHERMI PICCOLI / TABLET E MOBILE (max-width: 900px) --- */
@media (max-width: 900px) {
    header .information {
        margin: 5px 5px 5px 5px !important;
        float: right !important;
    }

    .HotelHeader2 div.information[data-id="6"] {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 2px !important;
        margin-top: 30px !important;
		margin-bottom: 25px !important;
        border-bottom: 1px solid #a59156 !important;
    }

    .headerLogo {
        max-height: 180px !important;
        width: 220px !important;
        margin-top: 30px !important;
    }

    #iconDiv div.information[data-id="6"] {
        height: 90px !important;
        min-height: 90px !important;
        border-bottom: none !important;
    }
    
    #iconDiv .headerIconTheme2,
    #iconDiv .discount {
        height: 90px !important;
        min-height: 90px !important;
    }

    .customHeaderLeft {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .customHeaderLeft a:first-child {
        margin: 0 auto !important;
    }

    .customHeaderLeft .information img,
    .customHeaderLeft .information svg,
    .information .headerIconTheme2 > img,
    .information .headerIconTheme2 > svg {
        display: none !important;
    }

    .CalendarDay div,.NoWrap,.RoomSummary,.SiteButtons,section.room div.calendar ul li .datetheme2 {
        white-space: normal !important;
    }  

    div.customHeaderLeft {
        padding-left: 15px !important;
    }

    .justifyContentEnd {
        justify-content: normal !important;
    }

    /* Posizionamento filtri in prima pagina su Mobile */
    :not(.detalldiv) > div.infoDetail span.filterRed,
    :not(.detalldiv) > div.infoDetail span.filterGreen {
        display: inline-block !important;
        position: relative !important;
        top: 4px !important; 
        left: -110px !important;       
        margin-right: -15px !important; 
    }  
  
    :not(.detalldiv) > div.infoDetail {
        margin-top: 20px !important; 
    }

    /* Posizionamento filtri in seconda pagina (Checkout) su Mobile */
    div.infoDetail span.filterRed,
    div.infoDetail span.filterGreen,
    .detalldiv span.filterRed,
    .detalldiv span.filterGreen {
        display: inline-block !important;
        position: relative !important;
        left: 0 !important;
        margin-right: 0 !important;
    }
  
    span.groupLabelDispYes {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Comando intestazione per smartphone (ex-600px) */
    header div.commandDiv {
        margin-top: -25px !important;
    }
}


/* ==========================================================================
   SECTION 8: CALENDARIO E DATEPICKER
   ========================================================================== */

.ui-datepicker-header .ui-datepicker-next {
    background-color: #a59156 !important;
}

.ui-datepicker-header .ui-datepicker-prev {
      background-color: #a59156 !important;
}

.ui-datepicker .ui-datepicker-title {
    color: #000000 !important;
    font-family: 'Quicksand', 'Roboto', sans-serif !important;
}

.ui-datepicker-calendar {
   font-family: 'Quicksand', 'Roboto', sans-serif !important;
}


/* Forza l'ingrandimento del testo dentro il tasto CERCA */
button[id*="SiteHeader:j_idt182"] .ui-button-text {
    font-size: 15px !important;    /* Aumenta questo valore se lo vuoi ancora più grande */
    font-weight: 600 !important;   /* Rende il testo più spesso e visibile */
}

/* Mantieni questa per la grandezza del bottone */
button[id*="SiteHeader:j_idt182"] {
    padding: 2px 15px !important; 
    min-width: 90px !important;   
}

.ui-datepicker .ui-datepicker-header {
    background-color: white !important;
}

.ui-datepicker {
    background-color: white !important;
}

.ui-selectonemenu-panel tr.ui-state-highlight td {
    background-color: #d3d3d3 !important;
}

.ui-selectonemenu-panel .ui-selectonemenu-table td {
      border: solid 1px #fff !important;  
  color: #000000 !important;
  
}


.ui-selectonemenu-panel .ui-state-highlight, 
.ui-selectcheckboxmenu-panel .ui-state-highlight {
    color: #fff !important;
    background-color: #a59156 !important;
}

/* ==========================================================================
   SECTION 9: PAGINA PRENOTAZIONE
   ========================================================================== */


/* Stile per DESKTOP (schermi grandi) */
.logo-esclusivo-prenotazione {
    width: 100% !important;
    max-width: 250px !important; /* Forza il logo a non superare i 350px su desktop (regola questo valore come preferisci) */
}

/* Stile per MOBILE (schermi sotto i 640px) */
@media screen and (max-width: 640px) {
    .logo-esclusivo-prenotazione {
        max-width: 50% !important; /* Ritorna al 60% che su mobile si vedeva bene */
    }
}


/* Sovrascrive lo stile dei box principali con angoli spigolosi */
.BoxSection, .BoxSectionSimple {
    box-shadow: none !important;
    border: 0.5px solid #a59156 !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
	font-family: 'Quicksand', 'Roboto', sans-serif !important;
    border-radius: 0 !important; /* Rimuove qualsiasi curvatura e rende l'angolo a spigolo vivo */
    
    /* Manteniamo l'overflow dell'originale */
    overflow: hidden; 
}

.portalLogo {
    display: none !important;
}

.ui-button .ui-button-text {
  font-family: 'Quicksand', 'Roboto', sans-serif !important;
  background-color: #a59156 !important;
  border-radius: 0 !important;
}

/* 1. Ripristina il colore per i pulsanti NON attivi (Sì/No quando non sono selezionati) */
.ui-selectonebutton .ui-button .ui-button-text {
    background-color: #fff !important;
    color: #567a84 !important;
}

/* 2. Ripristina il colore per il pulsante ATTIVO (quello selezionato tra Sì e No) */
.ui-selectonebutton .ui-button.ui-state-active .ui-button-text {
    background-color: #3e5e66 !important;
    color: #fff !important;
}

.RedButton .ui-button-text {
    background-color: #85001a !important;
  	font-family: 'Quicksand', 'Roboto', sans-serif !important;
}

.OrangeButton .ui-button-text {
    background-color: #898686 !important;
}

.ui-divider.ui-divider-solid.ui-divider-horizontal:before {
    border-top-style: solid !important; 
    border-top-color: #d3d3d3 !important; /* Sostituito con un grigio chiaro */
}

button[id="j_idt85:j_idt87"],
    button[id="j_idt85:j_idt89"] {
      background-color: #85001a !important;
}

.ui-selectonemenu-panel {
   	font-family: 'Quicksand', 'Roboto', sans-serif !important;
}


/* Modifica il testo dentro i pulsanti IT e EUR */
label.ui-selectonemenu-label.ui-inputfield {
    background-color: #ffffff !important; /* Colore di sfondo del pulsante */
    color: #000000 !important;             /* Colore del testo (es. Nero) */
}

/* Modifica la freccetta/trigger laterale del pulsante per uniformarla */
.ui-selectonemenu .ui-selectonemenu-trigger {
    background-color: #d3d3d3 !important;
    background-image: none !important;    /* Rimuove eventuali gradienti di default */
    border-left: 1px solid #d3d3d3 !important; /* Linea di separazione sottile */
}

/* Modifica il bordo dell'intero contenitore del pulsante */
.ui-selectonemenu {
    background: #ffffff !important;
    border: 1px solid #d3d3d3 !important; /* Bordo grigio leggero */
}

/* Nasconde l'icona della lente d'ingrandimento nel menu a discesa */
.ui-selectonemenu-filter-container .ui-icon-search {
    display: none !important;
}

/* Opzionale: sistema il padding del campo di testo se noti che lo spazio a sinistra è rimasto vuoto */
.ui-selectonemenu-filter-container .ui-inputfield {
    padding-left: 8px !important;
}

@media (min-width: 900px) {
    .HotelSlogan>div>.RoomPhoto {
        min-width: 380px !important;
    }
}

@media screen and (max-width: 768px) {
  
.HotelSlogan>div>.RoomPhoto {
        max-width: 350px !important;
}
    
.HotelSlogan>div>div {
    padding-top: 15px !important;
}
}



/* ==========================================================================
   SECTION BANDIERE
   ========================================================================== */


/* 1. Reset globale potenziato al massimo per livellare l'altezza ovunque */
i.Lang[class*="Lang"], 
.ui-selectonemenu-trigger i.Lang,
.ui-selectonemenu-label i.Lang {
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-size: contain !important; 
    width: 25px !important;
    height: 20px !important;
    display: inline-block !important;
    margin-right: 10px !important;

    /* Sposta l'elemento verso l'alto indipendentemente dal font circostante */
    position: relative !important;
    top: -5px !important; /* Aumentato da -1px a -4px per spingerla visibilmente su */
    vertical-align: middle !important;
}

@media screen and (min-width: 768px) {
    /* Seleziona il contenitore globale di Lingua + Valuta */
    #commandDiv {
        margin-left: auto !important; /* Spinge l'intero blocco sul bordo destro */
        align-items: flex-end !important; /* Allinea il contenuto a destra al suo interno */
        padding-right: 15px; /* Crea un leggero spazio dal bordo per estetica */
    }
}

/* 2. Allineamento geometrico limitato SOLO al menu delle lingue */

/* Ripristina lo stato nativo per TUTTE le tabelle (incluse le valute) */
.ui-selectonemenu-table tr {
    display: table-row !important;
}
.ui-selectonemenu-table td {
    display: table-cell !important;
    vertical-align: middle !important;
}

/* Applica il Flex solo ed esclusivamente alla tabella che contiene le icone lingua (i.Lang) */
.ui-selectonemenu-table:has(i.Lang) td {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    height: 100% !important;
}

/* Gestione stabile della bandiera */
.ui-selectonemenu-table:has(i.Lang) i.Lang {
    position: static !important;
    margin-right: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

/* 3. Forza il posizionamento centrato dello sfondo (Blocco di sicurezza) */
i.Lang.LangIT, i.Lang.LangEN, i.Lang.LangFR, i.Lang.LangDE, i.Lang.LangES, 
i.Lang.LangRU, i.Lang.LangPT, i.Lang.LangNL, i.Lang.LangJA, i.Lang.LangEL, 
i.Lang.LangTR, i.Lang.LangZH, i.Lang.LangCA, i.Lang.LangRO {
    background-position: center center !important;
}

/* 4. Mappatura dei file SVG (Rimane invariata) */
i.Lang.LangIT { background-image: url('https://unavilla.it/images/flags/it.svg') !important; }
i.Lang.LangEN { background-image: url('https://unavilla.it/images/flags/gb.svg') !important; }
i.Lang.LangFR { background-image: url('https://unavilla.it/images/flags/fr.svg') !important; }
i.Lang.LangDE { background-image: url('https://unavilla.it/images/flags/de.svg') !important; }
i.Lang.LangES { background-image: url('https://unavilla.it/images/flags/es.svg') !important; }
i.Lang.LangRU { background-image: url('https://unavilla.it/images/flags/ru.svg') !important; }
i.Lang.LangPT { background-image: url('https://unavilla.it/images/flags/pt.svg') !important; }
i.Lang.LangNL { background-image: url('https://unavilla.it/images/flags/nl.svg') !important; }
i.Lang.LangJA { background-image: url('https://unavilla.it/images/flags/ja.svg') !important; }
i.Lang.LangEL { background-image: url('https://unavilla.it/images/flags/el.svg') !important; }
i.Lang.LangTR { background-image: url('https://unavilla.it/images/flags/tr.svg') !important; }
i.Lang.LangZH { background-image: url('https://unavilla.it/images/flags/zh.svg') !important; }
i.Lang.LangCA { background-image: url('https://unavilla.it/images/flags/ca.svg') !important; }
i.Lang.LangRO { background-image: url('https://unavilla.it/images/flags/ro.svg') !important; }



/* ==========================================================================
   SECTION PAGAMENTI CON CARTA
   ========================================================================== */


/* 1. Rimuove lo sfondo verde "orrendo" e imposta un testo scuro leggibile */
.GreenBack {
    background-color: transparent !important; 
    background: none !important;              
}

/* 2. Cambia il colore del testo dei riquadri */
.GreenBack .white, 
.GreenBack span[class*="White"] {
    color: #333333 !important; 
}

/* 3. MODIFICATO: Forza l'allineamento a sinistra e unisce descrizione e prezzo */
.GreenBack .ui-g {
    display: flex !important;
    justify-content: flex-start !important; /* Spinge sia testo che prezzo a sinistra */
    align-items: center !important;
}

.GreenBack .TexAlRight {
    text-align: left !important;            /* Annulla l'allineamento a destra del contenitore */
}

.GreenBack .TexAlRight span {
    font-weight: bold !important;           /* Prezzi in grassetto */
    font-size: 2rem;                      /* Regolato (era 2rem, un po' enorme, ma gestiscilo come preferisci!) */
	color: #a59156 !important;
}

@media (max-width: 580px) {
    #ccsFrame {
        height: 500px;
    }
}

.Orange {
    color: #a59156 !important;
}


/* ==========================================================================
   SECTION NASCONDI COLAZIONE TESTO
   ========================================================================== */


/* 1. Nascondiamo il testo orfano modificando il display per non rompere l'allineamento */
section.room div.options .row .name h4 {
    font-size: 0 !important;
    display: inline-flex !important;  /* Evita il crollo del baseline */
    vertical-align: middle !important; /* Mantiene il centramento con le icone */
}

/* 2. Ripristiniamo il testo buono dello strong con le misure responsive */

/* --- VERSIONE DESKTOP --- */
section.room div.options .row .name h4 strong {
    font-size: 20px !important;
}

/* --- VERSIONE TABLET / IPAD (fino a 1024px) --- */
@media screen and (max-width: 1024px) {
    section.room div.options .row .name h4 strong {
        font-size: 17px !important;
    }
}

/* --- VERSIONE MOBILE (fino a 767px) --- */
@media screen and (max-width: 767px) {
    section.room div.options .row .name h4 strong {
        font-size: 15px !important;
    }
}

#chekinout {
    min-width: 230px !important; 
    flex-grow: 1 !important;
}

#otherDetail {
    min-width: 150px !important; 
    flex-grow: 1 !important;
}

#guestPolicies {
    max-width: 230px !important; 
    flex-grow: 1 !important;
}




/* ==========================================================================
   SECTION CORREZIONE ALLINEAMENTO TESTI CAMERE
   ========================================================================== */


/* --- Contenitore Principale della Lista --- */
.RoomBottom.roominfo ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 5px 0 !important; /* Ridotto al minimo lo spazio sopra/sotto la lista */
}

/* Stile per ogni voce (Forziamo l'azzeramento degli spazi ereditati) */
.RoomBottom.roominfo ul li {
    display: flex !important;
    align-items: flex-start !important; 
    margin: 0 !important;               /* Azzera completamente i margini ereditati da Octorate */
    padding: 2px 0 !important;          /* Controllo millimetrico dello spazio verticale (2px sopra e sotto) */
    text-align: left !important;        
    font-size: 13px !important;         
    line-height: 1.3 !important;        /* Testo ancora più compatto se va a capo */
}

/* Pallino personalizzato */
.RoomBottom.roominfo ul li::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #A59156 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;       /* Avvicina il pallino alla prima parola */
    margin-top: 5px !important;         /* Ricentra il pallino con la nuova altezza del testo */
}

/* --- Layout ad Alta Densità a 2 Colonne per Desktop e iPad --- */
@media only screen and (min-width: 768px) {
    .RoomBottom.roominfo ul {
        display: grid !important;
        grid-template-columns: max-content max-content !important; 
        column-gap: 20px !important;    /* Distanza tra le due colonne ridotta quasi al minimo */
        row-gap: 0 !important;          /* Azzera lo spazio della griglia, gestito solo dal padding del li */
        justify-content: start !important; 
    }
}


/* ==========================================================================
   SECTION CARTA DI CREDITO E PARCHEGGIO PAGINA PRENOTAZIONE
   ========================================================================== *

/* Si attiva solo su mobile (sotto i 768px) */
@media screen and (max-width: 768px) {
    
    /* Allinea a sinistra il contenitore dei bottoni della carta */
    form[action*="manage.xhtml"] .MarTop10 {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
        clear: both !important;
        float: none !important;
    }

    /* 1. Il pulsante rosso (Cambia/Inserisci carta) spostato a sinistra con 15px di spazio sotto */
    form[action*="manage.xhtml"] .MarTop10 .ui-button.RedButton {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 0 15px 0 !important; /* Allineato a sinistra (0) e 15px di spazio sotto */
    }

    /* 2. Il pulsante verde ("Paga") spostato a sinistra */
    form[action*="manage.xhtml"] .MarTop10 #payNowButton,
    #payNowButton {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 0 0 0 !important; /* Allineato a sinistra (0) */
    }

    /* Intercetta il contenitore del testo dei servizi extra nella pagina manage.xhtml */
    form[action*="manage.xhtml"] .RoomSection .div.MarBot10.OvAuto,
    form[action*="manage.xhtml"] [id*="panelExtras"] .MarBot10.OvAuto,
    form[action*="manage.xhtml"] .MarBot10.OvAuto {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 15px !important; /* Spinge il testo più sotto rispetto agli elementi accanto */
        margin-bottom: 10px !important;
    }
}

/* --- REGOLA GENERALE: Si applica su DESKTOP (schermi grandi) --- */
form[action*="manage.xhtml"] .ui-panelgrid,
form[action*="manage.xhtml"] .ui-panelgrid tr,
form[action*="manage.xhtml"] .ui-panelgrid td.ui-panelgrid-cell,
form[action*="manage.xhtml"] .ui-panelgrid .ui-widget-content {
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
}

/* Tabella a larghezza piena per distendere il testo su desktop */
form[action*="manage.xhtml"] table[id*="formInvoice"] {
    width: 100% !important;
}

/* Gestione spaziatura su Desktop */
form[action*="manage.xhtml"] table[id*="formInvoice"] td.ui-panelgrid-cell {
    padding: 12px 16px !important; /* Più alto e slanciato su desktop */
}

/* --- REGOLA MOBILE: Si attiva solo sotto i 768px --- */
@media screen and (max-width: 768px) {
    /* Ripristina il padding compatto che funzionava perfettamente */
    form[action*="manage.xhtml"] table[id*="formInvoice"] td.ui-panelgrid-cell {
        padding: 6px 10px !important; 
    }
}



/* --- CONFIGURAZIONE INTEGRALE SPINNER (RIPRISTINO DIMENSIONI E CENTRATURA) --- */

/* 1. Contenitore principale dello spinner */
form[action*="manage.xhtml"] .ui-spinner {
    position: relative !important;
    display: inline-block !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

/* 2. Alziamo il box del prezzo e applichiamo il font Quicksand */
form[action*="manage.xhtml"] .ui-spinner-input {
    height: 46px !important;
    font-family: 'Quicksand', 'Roboto', sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    padding-right: 42px !important; /* Spazio per i bottoni a destra */
    margin: 0 !important;
}

/* 3. Struttura dei pulsanti laterali (Dorati) - Bordi DRITTI e Flexbox per centrare */
form[action*="manage.xhtml"] .ui-spinner-button,
form[action*="manage.xhtml"] .ui-spinner-button.ui-state-default {
    left: auto !important;
    right: -42px !important;
    width: 38px !important;
    height: 23px !important; /* 23px + 23px = 46px complessivi */
    border-radius: 0px !important; /* Elimina qualsiasi bordo arrotondato ereditato */
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    background-image: none !important; /* Pulisce sfondi nativi */
}

/* Posizionamento pulsante PIÙ (+) */
form[action*="manage.xhtml"] .ui-spinner-up {
    top: 0 !important;
}

/* Posizionamento pulsante MENO (-) con linea di divisione */
form[action*="manage.xhtml"] .ui-spinner-down {
    bottom: 0 !important;
    top: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* 4. Reset dello span interno per centrare l'icona con Flexbox */
form[action*="manage.xhtml"] .ui-spinner-button .ui-button-text,
form[action*="manage.xhtml"] .ui-spinner-button span {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. CENTRATURA REALE E RIDUZIONE DELLE ICONE (+ e -) */
form[action*="manage.xhtml"] .ui-spinner-button .ui-icon {
    position: static !important; /* Rimuove posizionamenti assoluti nativi sballati */
    margin: 0 !important;       /* Rimuove i margini nativi negativi */
    display: block !important;
    line-height: 1 !important;
    
    /* ABBIAMO RIDOTTO DRASTICAMENTE QUI LE DIMENSIONI */
    font-size: 12px !important; /* Dimensione piccola e leggibile, non enorme! */
    width: 12px !important;
    height: 12px !important;
}


/* --- APPLICA IL FONT A TUTTO IL DIALOG BOX DI CONFERMA --- */
.ui-confirm-dialog,
.ui-confirm-dialog .ui-dialog-title,
.ui-confirm-dialog .ui-dialog-content,
.ui-confirm-dialog .ui-dialog-buttonpane,
.ui-confirm-dialog .ui-button,
.ui-confirm-dialog .ui-button-text {
    font-family: 'Quicksand', 'Roboto', sans-serif !important;
}