/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 0 !important;
}

:root {
    --color-1: #3e4944;
    --color-2: #b5a89a;
    --color-3: #8c704a;
    --color-4: #ffffff;
    --color-5: #000000;
}

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--color-1);
    overflow-x: hidden !important;
}

a {
    text-decoration: none;
    color: var(--color-3);
}

a:hover {
    color: var(--color-2);
}

/* Custom Properties */

.slideshow-page {
    width: 100%;
    height: 100vh;
    position: relative;
}

.slideshow-hotel {
    width: 100%;
    height: 100vh;
    position: relative;
}

.slideshow-hotel-reservation {
    width: 100%;
    height: 280px;
    position: relative;
}

.slideshow-page-mobile {
    width: 100%;
    height: 50vh;
    position: relative;
}

.slideshow-hotel-mobile {
    width: 100%;
    height: 50vh;
    position: relative;
}

.text-title {
    font-size: 2rem;
    color: var(--color-3);
    font-weight: bold;
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.page-link {
    color: var(--color-3);
}

.page-link:hover {
    color: var(--color-2);
}

.btn-sh {
    color: var(--color-4) !important;
    background-color: var(--color-3) !important;
    border: 1px solid var(--color-3) !important;
}

.btn-sh:hover {
    color: var(--color-4) !important;
    background-color: var(--color-2) !important;
    border: 1px solid var(--color-3) !important;
}

.languages a:hover {
    background-color: var(--color-2);
}

.nav-link {
    color: var(--color-3);
}

.nav-link:hover {
    color: var(--color-2);
}

/** Autocomplete */
.ui-autocomplete {
    max-height: 320px;
    max-width: 50%;
    overflow-y: auto;
    overflow-x: hidden;
}

/** Pagination */
.active > .page-link, .page-link.active {
    color: var(--color-4);
    background-color: var(--color-2);
    border-color: var(--color-3);
}

.logo {
    font-size: 2rem;
    font-weight: bold;
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--color-4);
}

.text-shadow {
    text-shadow: 2px 2px 4px var(--color-5);
}

input::placeholder {
    font-size: 13px; /* Imposta la dimensione del testo del placeholder */
    color: var(--color-2); /* Opzionale: Cambia il colore del testo del placeholder */
}

.background-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 480px;
}

.bg-footer {
    background-color: var(--color-2);
}

.bg-footer a:hover {
    color: var(--color-1);
}

.breadcrumb {
    margin-top: 3px;
    margin-bottom: 3px;
}

.scrollable-div {
    height: 280px; /* Imposta l'altezza fissa del div */
    padding-right: 15px; /* Aggiunge spazio per la barra di scorrimento verticale */
    overflow-y: scroll; /* Mostra la barra di scorrimento se il contenuto supera l'altezza */
}

/* Sovrascrivi lo z-index per il datepicker di jQuery UI */
.ui-datepicker {
    z-index: 1000 !important; /* Assicurati che sia maggiore degli altri z-index nella tua pagina */
}

/* Sovrascrivi lo z-index per l'autocomplete di jQuery UI */
.ui-autocomplete {
    z-index: 1000 !important; /* Usa lo stesso valore o uno differente, a seconda delle necessità */
}

.text-stars {
    color: var(--color-3);
}

.summary ul {
    margin-bottom: 0;
}

#js-checkin, #js-checkout, #checkin-calendar, #checkout-calendar {
    cursor: pointer !important;
}

/* End of style.css */