@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');



:root {
    --color-site-1: #0088CC;
    --color-site-2: #0E0E0F;
    --color-site-3: #626568;

    --green-btn: #85B919;
    --orange-btn: #FB5B32;
    --red-btn: #E40624;
    --gold-btn: #B47A1F;

    --text-color: #626568;
    --bg-color: #F7F8F9;
    --color-border: #E5E7EB;

    --container-max-width: 1420px;
    --container-padding: 24px;

    --font: "Geist", sans-serif;
    --border-radius: 16px;
}


body {
    font-family: var(--font);
    background-color: #fff;
    color: var(--text-color);
    font-size: 14px;
}

section {
    padding: 3rem 0;
}

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

img {
    object-fit: cover;
}



/* --- LUXURY MONO PRO STYLE --- */

.daterangepicker {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    padding: 20px !important;
    width: auto !important;
    overflow: hidden !important;
}

.daterangepicker:before,
.daterangepicker:after {
    display: none !important;
}

/* --- CALENDRIER --- */
.daterangepicker .calendar-table {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.daterangepicker .calendar-table table {
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Mois / Année */
.daterangepicker th.month {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--red-btn) !important;
    padding-bottom: 15px !important;
}

/* Jours de la semaine (Lu, Ma...) */
.daterangepicker thead tr:last-child th {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #a1a1aa !important; /* Gris neutre pro */
    text-transform: uppercase;
    padding-bottom: 10px !important;
}

/* --- LES DATES (CERLES) --- */
.daterangepicker td {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #3f3f46 !important;
    border: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover : Cercle Noir */
.daterangepicker td.available:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

/* Dates désactivées */
.daterangepicker td.off,
.daterangepicker td.disabled {
    color: #e4e4e7 !important;
}

/* --- LE RANGE (L'INTERVALLE) --- */

/* Zone entre les dates (Gris très léger) */
.daterangepicker td.in-range {
    background-color: #f4f4f5 !important;
    color: #000000 !important;
    border-radius: 0 !important;
}

/* Date de début et de fin (Cercle Noir Plein) */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
}

/* --- FOOTER & BOUTONS --- */
.daterangepicker .drp-buttons {
    border-top: 1px solid #f4f4f5 !important;
    padding: 15px 0 0 0 !important;
    margin-top: 10px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Texte de sélection en bas */
.daterangepicker .drp-selected {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #71717a !important;
}

/* Bouton Valider (Noir Arrondi) */
.daterangepicker .applyBtn {
    background-color: var(--red-btn) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 50px !important; /* Forme pilule */
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
}

/* Bouton Annuler (Discret) */
.daterangepicker .cancelBtn {
    background-color: transparent !important;
    color: #71717a !important;
    border: 1px solid #e4e4e7 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.daterangepicker .cancelBtn:hover {
    background-color: #fafafa !important;
    color: #000 !important;
}

/* Flèches de navigation (Chevron look) */
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: #000000 !important;
    border-width: 0 2px 2px 0 !important;
}

@media (max-width: 767px) {
    .daterangepicker.show-calendar {
        left: 12px !important;
        right: 12px !important;
        top: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        max-height: calc(100% - 24px);
        margin: 0 !important;
        border-radius: 20px !important;
    }
}

/* --- TYPEAHEAD --- */

.typeahead__list,
.typeahead__dropdown {
    top: calc(100% + 8px) !important;
    z-index: 30 !important;
    width: max(100%, 340px) !important;
    min-width: 280px !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: auto !important;
    max-height: 360px !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
}

.typeahead__list > li,
.typeahead__list > .typeahead__group,
.typeahead__list > li.typeahead__group + li.typeahead__item {
    border: 0 !important;
}

.typeahead__list .typeahead__item > a,
.typeahead__dropdown .typeahead__dropdown-item > a {
    display: block !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    color: #1c2430 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}

.typeahead__list .typeahead__item:not([disabled]) > a:hover,
.typeahead__list .typeahead__item:not([disabled]) > a:focus,
.typeahead__list .typeahead__item:not([disabled]).active > a,
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]) > a:hover,
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]) > a:focus,
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]).active > a {
    background: #f4f4f5 !important;
    color: #1c2430 !important;
}

.typeahead__list > .typeahead__group > a,
.typeahead__list > .typeahead__group > a:hover,
.typeahead__list > .typeahead__group > a:focus,
.typeahead__list > .typeahead__group.active > a {
    padding: 8px 12px 4px !important;
    background: transparent !important;
    color: #8b919a !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    cursor: default !important;
}

.typeahead__list.empty > li {
    padding: 12px !important;
    color: #8b919a !important;
    font-size: 13px !important;
}

.typeahead__highlight,
.typeahead__list mark {
    background: transparent !important;
    color: var(--red-btn) !important;
    font-weight: 700 !important;
}

.suggestion-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.suggestion-content .icon-hotel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f4f4f5;
    color: #1c2430;
}

.suggestion-content .icon-hotel .fa {
    display: block;
    width: 16px;
    height: 16px;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask: var(--melia-suggestion-icon) center / contain no-repeat;
    mask: var(--melia-suggestion-icon) center / contain no-repeat;
    --melia-suggestion-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.suggestion-content .icon-hotel .fa::before {
    content: none !important;
}

.suggestion-content .icon-hotel .fa-hotel,
.suggestion-content .icon-hotel .fa-bed {
    --melia-suggestion-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 20V9l9-5 9 5v11h-6v-6H9v6H3zm2-2h4v-4h6v4h4v-8.2L12 6.2 5 9.8V18z'/%3E%3C/svg%3E");
}

.suggestion-content .hotel-info {
    min-width: 0;
}

.suggestion-content .hotel-info strong {
    display: block;
    color: #1c2430;
    font-size: 14px;
    font-weight: 600;
}

.suggestion-content .hotel-info span {
    display: block;
    color: #8b919a;
    font-size: 12px;
    font-weight: 500;
}

.melia-field .typeahead__field input,
.melia-field .typeahead__hint {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* --- JSUITES --- */

.jdropdown-default .jdropdown-container {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: max(100%, 340px) !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04) !important;
}

.jdropdown-default .jdropdown-content {
    max-height: 360px !important;
    border: 0 !important;
    background: #fff !important;
}

.jdropdown-default .jdropdown-group-name {
    padding: 10px 16px 4px !important;
    background: transparent !important;
    color: #8b919a !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.jdropdown-default .jdropdown-item {
    margin: 4px 8px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color: #1c2430 !important;
}

.jdropdown-default .jdropdown-item:hover,
.jdropdown-default .jdropdown-cursor {
    background: #f4f4f5 !important;
}

.jdropdown-default .jdropdown-selected {
    background: rgba(228, 6, 36, .08) !important;
}

.jdropdown-description {
    color: #1c2430 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.jdropdown-title {
    color: #8b919a !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.melia-field .jdropdown-header {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #1c2430 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}