/* ------------------------------------------------------------------
   Michelangelo Resort Apartments - landing promozionale
   Palette ripresa dal materiale del cliente (mail Carla del 21/09/2026):
   blu istituzionale #1f4e79, fasce azzurre #bdd7ee, box prezzo giallo #ffe599
   ------------------------------------------------------------------ */

:root{
    --mra-blu:        #1f4e79;
    --mra-blu-chiaro: #2e75b6;
    --mra-fascia:     #bdd7ee;
    --mra-riga:       #dce6f1;
    --mra-giallo:     #ffe599;
}

body, html{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: var(--mra-blu);
}

/* ---- testata ---- */
.mra-header{
    border-bottom: 3px solid var(--mra-fascia);
}
.mra-header img{
    max-height: 90px;
    width: auto;
}
.mra-header a{
    color: inherit;
    text-decoration: none;
}

/* ---- fasce titolo di sezione ---- */
.mra-section-title{
    background: var(--mra-fascia);
    color: var(--mra-blu);
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 6px 16px;
    margin: 40px 0 20px;
}
.mra-section-title--promo{
    background: var(--mra-giallo);
}

/* ---- corpo delle sezioni ---- */
.mra-section p{
    text-align: justify;
}
.mra-section img{
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
/* elenchi puntati su righe azzurre, come nel PDF della promozione */
.mra-section ul{
    list-style: none;
    padding-left: 0;
}
.mra-section ul > li{
    background: var(--mra-riga);
    padding: 6px 16px;
    margin-bottom: 6px;
}

/* ---- box prezzo (editabile da admin: chiave mra_prezzo) ---- */
.mra-box-prezzo{
    background: var(--mra-giallo);
    color: var(--mra-blu);
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.35;
    padding: 30px 25px;
    margin: 35px 0;
}
.mra-box-prezzo p{
    margin-bottom: 14px;
}
.mra-box-prezzo p:last-child{
    margin-bottom: 0;
}
/* il prezzo vero e proprio: <strong> dentro il box */
.mra-box-prezzo strong{
    color: var(--mra-blu-chiaro);
    font-size: 28px;
}

/* ---- call to action verso la scheda di prenotazione ---- */
.mra-cta{
    display: block;
    text-align: center;
    background: #fff;
    border: 2px solid var(--mra-blu-chiaro);
    color: var(--mra-blu);
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
    padding: 18px 25px;
    margin: 35px 0;
}
.mra-cta:hover{
    background: var(--mra-fascia);
    color: var(--mra-blu);
    text-decoration: none;
}

/* ---- piede pagina ---- */
.mra-footer{
    border-top: 3px solid var(--mra-fascia);
    margin-top: 50px;
    padding-top: 25px;
    text-align: center;
    font-size: 14px;
}
.mra-footer img{
    max-height: 80px;
    width: auto;
    margin-bottom: 15px;
}
.mra-footer a{
    color: var(--mra-blu);
}

/* ---- scheda di prenotazione (form) ---- */
.mra-form h1{
    font-size: 22px;
    color: var(--mra-blu);
}
.select-date{
    color: #ff4200;
    font-size: 16px;
    font-weight: bold;
}
.custom-checkbox{
    display: inline-block;
    margin-right: 20px;
}
.custom-checkbox input{
    margin-right: 5px;
}

/* ---- cookie banner (ereditato dal vecchio skin) ---- */
#cookieChoiceInfo{
    top: unset !important;
    bottom: 20px;
    left: unset !important;
    right: 20px;
    width: 25% !important;
    min-width: 300px;
    padding: 10px 20px;
    border: 2px solid rgba(100,100,100,0.7);
}

@media (max-width: 767px){
    .mra-section-title{ font-size: 20px; }
    .mra-box-prezzo{ font-size: 19px; padding: 20px 15px; }
    .mra-box-prezzo strong{ font-size: 22px; }
    .mra-cta{ font-size: 16px; }
}