body.SiteBackground{background-image:url('https://resx.octorate.com/content/251526/1777815353418.jpg')}@media (min-width: 1220px) {.SearchLabel .fa{background:#000000;color:#fff}}.BoxHover:hover{box-shadow:1px 1px 10px #000000}.SearchBar .GreenButton .ui-button-text{background-color:#000000}.SiteTopBar{background-color:rgba(0,0,0,0.8)}:root{--color:#000000!important;--color-rotation:0.0deg!important;}.button, .button span.ui-button-text, .customButton span.ui-button-text{background-color:#000000!important;}/* ==========================================================
   ADRIANA 5
   OCTORATE BOOKING ENGINE - PALETTE MARMO VERDE

   Versione:        1.1.0
   Data:            27 agosto 2026
   Struttura:       Adriana 5 Luxury Rooms
   Site key:        9ab0c3dc47125e34248f16c9ded6c927
   Compatibilità:   verificata sul booking engine Octorate corrente
                     (result.xhtml) al momento della scrittura; da riverificare
                     a ogni collaudo (vedi docs/octorate-customization-history.md).

   Non fa parte del build del sito: è il foglio di stile da incollare
   nel pannello di personalizzazione di Octorate, perché il motore di
   prenotazione somigli al sito da cui arriva l'ospite. I valori sono
   gli stessi ruoli di styles/tokens.css — se la palette del sito
   cambia, va riallineato anche questo file. Storico delle versioni
   distribuite e degli esiti dei collaudi in
   docs/octorate-customization-history.md.
   ========================================================== */


/* ==========================================================
   PALETTE
   ========================================================== */

:root {
    --a5-bg: #EFEDE7;
    --a5-white: #FFFFFF;
    --a5-soft: #E7E4DE;

    --a5-ink: #22201E;
    --a5-muted: #666460;
    --a5-light-text: #6F6D68;

    --a5-line: #D9D6D0;
    --a5-line-strong: #A8A49B;

    /* Accento unico: il verde del marmo */
    --a5-accent: #4A6B5D;
    --a5-accent-dark: #3A574B;
    --a5-accent-soft: #8FAA9C;
    --a5-accent-on: #FFFFFF;
    --a5-focus: #4A6B5D;
}


/* ==========================================================
   CONTENITORE HEADER
   ========================================================== */

#SiteMain .HotelHeader,
#SiteMain .HotelHeader2 {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    /* Non var(--a5-white): l'intestazione e i box data/pax/valuta sotto sono
       entrambi bianchi. Sullo stesso bianco i box perdono ogni contrasto e
       restano leggibili solo dal loro bordo di 1px — qui l'intestazione
       prende il beige della pagina, così i controlli bianchi tornano a
       leggersi come caselle, non come testo libero. */
    background: var(--a5-bg) !important;
    background-image: none !important;

    border: 0 !important;

    box-shadow:
        0 4px 20px rgba(36, 33, 31, .06) !important;
}


#SiteMain .HotelHeader > .class1400,
#SiteMain .HotelHeader2 > .class1400 {
    display: block !important;

    width: 100% !important;
    max-width: 1180px !important;

    margin: 0 auto !important;
    padding: 0 28px !important;

    float: none !important;
}


/* ==========================================================
   PRIMA RIGA
   LOGO + CONTATTI + INFO
   ========================================================== */

#SiteMain .customHeaderLeft {
    display: grid !important;

    grid-template-columns:
        150px
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    gap: 28px !important;

    width: 100% !important;
    min-height: 72px !important;

    margin: 0 !important;
    padding: 10px 0 !important;

    float: none !important;

    border-bottom:
        1px solid var(--a5-line) !important;
}


/* ==========================================================
   LOGO
   ========================================================== */

#SiteMain .customHeaderLeft > a:first-child {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


#SiteMain img.headerLogo {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 105px !important;
    max-height: 54px !important;

    margin: 0 !important;

    object-fit: contain !important;
}


/* ==========================================================
   CONTATTI
   ========================================================== */

#SiteMain .customHeaderLeft .contacts {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    flex-wrap: wrap !important;

    gap: 8px 24px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}


#SiteMain .customHeaderLeft .contacts a {
    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--a5-muted) !important;

    font-size: 13px !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
}


#SiteMain .customHeaderLeft .contacts a em {
    margin: 0 !important;

    color: var(--a5-muted) !important;

    font-size: 13px !important;
    font-style: normal !important;

    white-space: nowrap !important;
}


#SiteMain .customHeaderLeft .contacts svg {
    width: 15px !important;
    height: 15px !important;

    color: var(--a5-accent) !important;
    fill: var(--a5-accent) !important;

    opacity: .9 !important;
}


/* sito web ridondante */

#SiteMain .customHeaderLeft .contacts .website {
    display: none !important;
}


/* ==========================================================
   INFORMAZIONI STRUTTURA
   ========================================================== */

#SiteMain .customHeaderLeft > a.ui-link {
    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    text-decoration: none !important;
}


#SiteMain .customHeaderLeft .information {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: auto !important;
    height: 38px !important;

    margin: 0 !important;
    padding: 0 13px !important;

    background: transparent !important;

    border:
        1px solid var(--a5-line) !important;

    border-radius: 4px !important;

    opacity: .75 !important;

    filter: grayscale(1) !important;

    float: none !important;
}


#SiteMain .customHeaderLeft .information img {
    width: 17px !important;
    height: 17px !important;

    margin: 0 !important;

    opacity: .7 !important;
}


#SiteMain .customHeaderLeft .information p {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--a5-muted) !important;

    font-size: 11px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
}


/* ==========================================================
   SECONDA RIGA
   DATE + PAX + CTA
   ========================================================== */

#SiteMain .customHeaderRight {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items: center !important;

    gap: 20px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 12px 0 !important;

    float: none !important;
}


/* ==========================================================
   BLOCCO DATE / PAX
   ========================================================== */

#SiteMain #dateAndPax {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}


/*
   HTML OCTORATE:

   class600
      ├── wrapper
      │     ├── Arrivo
      │     └── Partenza
      │
      └── paxSelection
            ├── Adulti
            └── Camere

   display:contents ci permette di trasformarli
   correttamente in quattro colonne.
*/


#SiteMain #dateAndPax > .class600 {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(105px, 1fr)) !important;

    align-items: stretch !important;

    gap: 8px !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Wrapper Arrivo + Partenza */

#SiteMain #dateAndPax > .class600 > span:first-child {
    display: contents !important;
}


/* Wrapper Adulti + Camere */

#SiteMain [id="SiteHeader:paxSelection"] {
    display: contents !important;
}


/* Arrivo */

#SiteMain [id="SiteHeader:checkinSelection"] {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
}


/* Partenza */

#SiteMain [id="SiteHeader:checkoutSelection"] {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
}


/* Adulti e Camere */

#SiteMain [id="SiteHeader:paxSelection"] > span {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
}


/* ==========================================================
   CARD DATA / ADULTI / CAMERE
   ========================================================== */

#SiteMain .datetheme2 {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        auto 1fr !important;

    grid-template-rows:
        auto 1fr !important;

    align-items: end !important;

    column-gap: 9px !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 9px 31px 9px 12px !important;

    background: var(--a5-white) !important;
    background-image: none !important;

    border:
        1px solid var(--a5-line-strong) !important;

    border-radius: 4px !important;

    color: var(--a5-ink) !important;

    cursor: pointer !important;

    box-shadow: none !important;
}


/* hover leggero */

#SiteMain .datetheme2:hover {
    border-color:
        var(--a5-accent-soft) !important;
}


/* ==========================================================
   LABEL: ARRIVO / PARTENZA / ADULTI / CAMERE
   ========================================================== */

#SiteMain .datetheme2 > label,
#SiteMain .datetheme2 > em {
    grid-column:
        1 / -1 !important;

    grid-row:
        1 !important;

    position: static !important;

    display: block !important;

    width: auto !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    color: var(--a5-muted) !important;

    font-size: 10px !important;
    line-height: 1 !important;

    font-style: normal !important;
    font-weight: 600 !important;

    letter-spacing: .055em !important;

    text-transform: uppercase !important;
}


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

#SiteMain .datetheme2 .checkinSelection2,
#SiteMain .datetheme2 .checkoutSelection2,
#SiteMain .datetheme2 .paxSelection2,
#SiteMain .datetheme2 > span.flex {
    grid-column:
        1 !important;

    grid-row:
        2 !important;

    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


#SiteMain .datetheme2 .customSpan {
    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--a5-ink) !important;

    font-size: 25px !important;
    line-height: 24px !important;

    font-weight: 500 !important;
}


/* ==========================================================
   MESE / ANNO
   ========================================================== */

#SiteMain .datetheme2 > span[id*="PanelGroup"] {
    grid-column:
        2 !important;

    grid-row:
        2 !important;

    position: static !important;

    display: flex !important;

    align-items: flex-end !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 0 2px !important;
}


#SiteMain .datetheme2 > span[id*="PanelGroup"] em {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--a5-muted) !important;

    font-size: 10px !important;
    line-height: 1.1 !important;

    font-style: normal !important;
}


/* ==========================================================
   FRECCIA
   ========================================================== */

#SiteMain .datetheme2 > svg {
    position: absolute !important;

    top: 50% !important;
    right: 11px !important;

    width: 9px !important;
    height: 5px !important;

    margin: 0 !important;

    transform:
        translateY(-50%) !important;

    opacity: .55 !important;
}


/* vecchi triangolini Octorate */

#SiteMain .class1400ChangeColorArrow {
    display: none !important;
}


/* ==========================================================
   BLOCCO CTA + LOGIN + LINGUA / VALUTA
   ========================================================== */

#SiteMain #terzoDiv {
    display: flex !important;

    align-items: stretch !important;
    justify-content: flex-end !important;

    gap: 8px !important;

    width: auto !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
}


/* ==========================================================
   CERCA + LOGIN
   ========================================================== */

#SiteMain #iconDiv {
    display: flex !important;

    align-items: stretch !important;
    justify-content: flex-end !important;

    gap: 7px !important;

    width: auto !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   CTA CERCA
   ========================================================== */

#SiteMain button.headerButton,
#SiteMain button.headerButton.customButton,
#SiteMain .customButton.button.headerButton {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 120px !important;
    min-width: 120px !important;

    height: 64px !important;
    min-height: 64px !important;

    margin: 0 !important;
    padding: 0 18px !important;

    background:
        var(--a5-accent) !important;

    background-image:
        none !important;

    border:
        1px solid var(--a5-accent) !important;

    border-radius:
        4px !important;

    box-shadow:
        none !important;

    text-shadow:
        none !important;

    animation:
        none !important;

    color:
        var(--a5-accent-on) !important;
}


#SiteMain button.headerButton:hover {
    background:
        var(--a5-accent-dark) !important;

    border-color:
        var(--a5-accent-dark) !important;
}


#SiteMain button.headerButton .ui-button-text,
#SiteMain button.headerButton span {
    margin: 0 !important;
    padding: 0 !important;

    background:
        transparent !important;

    color:
        var(--a5-accent-on) !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        .055em !important;

    text-transform:
        uppercase !important;
}


/* ==========================================================
   LOGIN
   ========================================================== */

#SiteMain #iconDiv > .information {
    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 54px !important;
    min-width: 54px !important;

    height: 64px !important;

    margin: 0 !important;
    padding: 5px !important;

    background:
        var(--a5-white) !important;

    border:
        1px solid var(--a5-line) !important;

    border-radius:
        4px !important;

    opacity:
        .65 !important;

    filter:
        grayscale(1) !important;
}


#SiteMain #iconDiv > .information a {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;
}


#SiteMain #iconDiv > .information svg {
    display: block !important;

    width: 19px !important;
    height: 19px !important;

    margin: 0 auto !important;
}


#SiteMain #iconDiv > .information p {
    margin:
        5px 0 0 !important;

    padding:
        0 !important;

    color:
        var(--a5-muted) !important;

    font-size:
        9px !important;

    line-height:
        1 !important;
}


/* ==========================================================
   LINGUA + VALUTA
   ========================================================== */

#SiteMain #commandDiv {
    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;
    justify-content: center !important;

    gap: 4px !important;

    width: 76px !important;
    min-width: 76px !important;

    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;
}


#SiteMain #commandDiv .languages {
    display: flex !important;

    align-items: center !important;

    width: 100% !important;
    height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;
}


#SiteMain #commandDiv .ui-inputgroup-addon {
    display: none !important;
}


#SiteMain #commandDiv .ui-selectonemenu {
    width: 100% !important;
    min-width: 0 !important;

    height: 30px !important;

    margin: 0 !important;

    background:
        var(--a5-white) !important;

    border:
        1px solid var(--a5-line-strong) !important;

    border-radius:
        3px !important;

    box-shadow:
        none !important;
}


#SiteMain #commandDiv .ui-selectonemenu-label {
    width: 100% !important;
    height: 28px !important;

    margin: 0 !important;

    padding:
        6px 25px 5px 7px !important;

    background:
        var(--a5-white) !important;

    color:
        var(--a5-ink) !important;

    font-size:
        10px !important;

    line-height:
        16px !important;
}


#SiteMain #commandDiv .ui-selectonemenu-trigger {
    width:
        24px !important;

    background:
        var(--a5-soft) !important;

    border-left:
        1px solid var(--a5-line) !important;
}


/* ==========================================================
   STICKY SUMMARY
   ========================================================== */

#SiteMain #stickyPanel {
    width: 100% !important;

    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        rgba(255, 255, 255,.97) !important;

    border:
        0 !important;

    border-top:
        1px solid var(--a5-line) !important;

    border-bottom:
        1px solid var(--a5-line) !important;

    box-shadow:
        0 3px 10px rgba(36, 33, 31,.05) !important;
}


#SiteMain #stickyPanel > .stickyPanel {
    display: grid !important;

    grid-template-columns:
        1fr auto auto !important;

    align-items:
        center !important;

    gap:
        42px !important;

    width:
        100% !important;

    max-width:
        1180px !important;

    min-height:
        46px !important;

    margin:
        0 auto !important;

    padding:
        0 28px !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;
}


#SiteMain #stickyPanel > .stickyPanel > div {
    margin: 0 !important;
    padding: 0 !important;
}


#SiteMain #stickyPanel i {
    color:
        var(--a5-accent) !important;
}


#SiteMain #stickyPanel .FontAutoSize {
    color:
        var(--a5-muted) !important;

    font-size:
        12px !important;
}


#SiteMain #stickyPanel .Fs13 {
    color:
        var(--a5-muted) !important;

    font-size:
        11px !important;
}


#SiteMain #stickyPanel .text1SubHeader {
    color:
        var(--a5-muted) !important;

    font-size:
        12px !important;
}


#SiteMain #stickyPanel .textBoldSubHeader {
    color:
        var(--a5-ink) !important;

    font-size:
        17px !important;

    font-weight:
        600 !important;
}


/* ==========================================================
   RIMUOVE ALTEZZE / FLOAT LEGACY OCTORATE
   ========================================================== */

#SiteMain .customHeaderLeft,
#SiteMain .customHeaderRight,
#SiteMain #dateAndPax,
#SiteMain #terzoDiv,
#SiteMain #iconDiv,
#SiteMain #commandDiv {
    max-height: none !important;

    float: none !important;

    clear: none !important;
}


#SiteMain .customHeaderRight.flex-auto,
#SiteMain #dateAndPax.flex-auto,
#SiteMain #terzoDiv.flex-auto,
#SiteMain #iconDiv.flex-auto,
#SiteMain #commandDiv.flex-auto {
    flex: none !important;
}



/* ==========================================================
   FOCUS E STATI INTERATTIVI
   ========================================================== */

#SiteMain .datetheme2:focus-within,
#SiteMain #commandDiv .ui-selectonemenu.ui-state-focus {
    border-color: var(--a5-focus) !important;
    /* rgba(74, 107, 93) è --a5-accent: qui non può leggere la variabile
       perché un box-shadow con alpha non accetta var() dentro rgba(). Prima
       era un mauve (117, 96, 115) rimasto da Tacito: nessun anello di focus
       viola su un sito che non ha mai un altro colore oltre al verde. */
    box-shadow: 0 0 0 3px rgba(74, 107, 93, .16) !important;
}

#SiteMain button.headerButton:focus-visible,
#SiteMain .customHeaderLeft a:focus-visible,
#SiteMain #iconDiv a:focus-visible {
    outline: 2px solid var(--a5-focus) !important;
    outline-offset: 3px !important;
}

#SiteMain button.headerButton:active {
    background: var(--a5-accent-dark) !important;
    border-color: var(--a5-accent-dark) !important;
    transform: translateY(1px) !important;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1000px) {

    #SiteMain .HotelHeader > .class1400,
    #SiteMain .HotelHeader2 > .class1400 {
        padding:
            0 18px !important;
    }


    #SiteMain .customHeaderLeft {
        grid-template-columns:
            120px
            minmax(0,1fr)
            auto !important;

        gap:
            16px !important;
    }


    #SiteMain .customHeaderLeft .contacts {
        gap:
            6px 14px !important;
    }


    #SiteMain .customHeaderRight {
        grid-template-columns:
            minmax(0,1fr)
            auto !important;

        gap:
            10px !important;
    }


    #SiteMain #dateAndPax > .class600 {
        grid-template-columns:
            repeat(4, minmax(88px,1fr)) !important;

        gap:
            6px !important;
    }


    #SiteMain .datetheme2 {
        padding-left:
            9px !important;

        padding-right:
            25px !important;
    }


    #SiteMain .datetheme2 .customSpan {
        font-size:
            22px !important;
    }


    #SiteMain button.headerButton {
        width:
            100px !important;

        min-width:
            100px !important;
    }


    #SiteMain #iconDiv > .information {
        display:
            none !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    #SiteMain .HotelHeader > .class1400,
    #SiteMain .HotelHeader2 > .class1400 {
        padding:
            0 14px !important;
    }


    /* prima riga */

    #SiteMain .customHeaderLeft {
        grid-template-columns:
            1fr
            auto !important;

        min-height:
            60px !important;

        gap:
            10px !important;

        padding:
            7px 0 !important;
    }


    #SiteMain .customHeaderLeft .contacts {
        display:
            none !important;
    }


    #SiteMain .customHeaderLeft > a.ui-link {
        grid-column:
            2 !important;
    }


    #SiteMain img.headerLogo {
        max-width:
            94px !important;

        max-height:
            46px !important;
    }


    #SiteMain .customHeaderLeft .information {
        width:
            36px !important;

        height:
            36px !important;

        padding:
            0 !important;
    }


    #SiteMain .customHeaderLeft .information p {
        display:
            none !important;
    }


    /* seconda riga */

    #SiteMain .customHeaderRight {
        display:
            block !important;

        padding:
            9px 0 12px !important;
    }


    #SiteMain #dateAndPax > .class600 {
        grid-template-columns:
            1fr 1fr !important;

        gap:
            7px !important;
    }


    #SiteMain .datetheme2 {
        height:
            58px !important;

        min-height:
            58px !important;
    }


    #SiteMain #terzoDiv {
        display:
            grid !important;

        grid-template-columns:
            1fr
            auto !important;

        width:
            100% !important;

        height:
            48px !important;

        gap:
            7px !important;

        margin-top:
            8px !important;
    }


    #SiteMain #iconDiv {
        display:
            block !important;

        width:
            100% !important;

        height:
            48px !important;
    }


    #SiteMain button.headerButton,
    #SiteMain button.headerButton.customButton {
        width:
            100% !important;

        min-width:
            0 !important;

        height:
            48px !important;

        min-height:
            48px !important;
    }


    #SiteMain #iconDiv > .information {
        display:
            none !important;
    }


    #SiteMain #commandDiv {
        flex-direction:
            row !important;

        width:
            142px !important;

        min-width:
            142px !important;

        height:
            48px !important;

        gap:
            5px !important;
    }


    #SiteMain #commandDiv .languages {
        flex:
            1 1 0 !important;

        width:
            auto !important;

        height:
            48px !important;
    }


    #SiteMain #commandDiv .ui-selectonemenu {
        height:
            48px !important;
    }


    #SiteMain #commandDiv .ui-selectonemenu-label {
        height:
            46px !important;

        padding-top:
            14px !important;
    }


    #SiteMain #commandDiv .ui-selectonemenu-trigger {
        height:
            46px !important;
    }


    /* sticky */

    #SiteMain #stickyPanel > .stickyPanel {
        grid-template-columns:
            1fr
            auto !important;

        gap:
            12px !important;

        padding:
            0 14px !important;
    }


    #SiteMain #stickyPanel > .stickyPanel > div:first-child {
        display:
            none !important;
    }

}


/* ==========================================================
   TELEFONI PICCOLI
   ========================================================== */

@media (max-width: 430px) {

    #SiteMain .HotelHeader > .class1400,
    #SiteMain .HotelHeader2 > .class1400 {
        padding:
            0 10px !important;
    }


    #SiteMain .datetheme2 {
        padding:
            8px 25px 8px 9px !important;
    }


    #SiteMain .datetheme2 .customSpan {
        font-size:
            21px !important;
    }


    #SiteMain #commandDiv {
        width:
            126px !important;

        min-width:
            126px !important;
    }

}