/*
 * Panda Multi Resorts front pages. The colours follow the theme variables
 * (--highlight-color, --main-color); the rest is set here.
 */

:root {
    --mr-accent: var(--highlight-color, #7a6bd1);
    --mr-accent-soft: #f1effb;
    --mr-ink: var(--main-color, #22235a);
    --mr-text: #3f4254;
    --mr-muted: #6b7080;
    --mr-border: #dcdee7;
    --mr-line: #eceef3;
    --mr-soft: #f6f7fb;
    --mr-success: #0f7b52;
    --mr-warning: #a34a06;
    --mr-warning-soft: #fff5e8;
    --mr-danger: #b42318;
    --mr-radius: .75rem;
    --mr-radius-sm: .5rem;
    --mr-field-h: 3rem;
    --mr-shadow: 0 .75rem 2rem rgba(34, 35, 90, .08);
}

@supports (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --mr-accent-soft: color-mix(in srgb, var(--mr-accent) 9%, #fff);
    }
}

/* Theme overrides inside the extension blocks ------------------------- */

.content .mr-hotels li,
.content .mr-hotel li,
.content .mr-booking li,
.content .mr-destinations li {
    margin-bottom: 0;
}

.mr-search .btn,
.mr-selection .btn,
.mr-card .btn,
.mr-booking .btn,
.mr-destinations .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-bottom: 0;
    padding: .9rem 1.4rem;
    border-radius: var(--mr-radius-sm);
    font-size: .85rem;
    letter-spacing: .02em;
}

.mr-search .btn:hover,
.mr-selection .btn:hover,
.mr-card .btn:hover,
.mr-booking .btn:hover,
.mr-destinations .btn:hover {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.mr-search .btn::before,
.mr-selection .btn::before,
.mr-card .btn::before,
.mr-booking .btn::before,
.mr-destinations .btn::before {
    content: none;
}

.mr-search .btn > i,
.mr-selection .btn > i,
.mr-booking .btn > i {
    margin-right: 0;
}

.mr-selection .btn:disabled,
.mr-booking .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Form controls: one height, one border, one arrow -------------------- */

.mr-search select,
.mr-search input[type="date"],
.mr-field__range,
.mr-offer__qty select,
.mr-unit select {
    width: 100%;
    height: var(--mr-field-h);
    padding: 0 .9rem;
    border: 1px solid var(--mr-border);
    border-radius: var(--mr-radius-sm);
    background-color: #fff;
    color: var(--mr-ink);
    font: inherit;
    font-size: 1rem;
    line-height: 1.2;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mr-search select,
.mr-offer__qty select,
.mr-unit select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7080' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: .9rem;
    cursor: pointer;
}

.mr-search select:hover,
.mr-field__range:hover,
.mr-offer__qty select:hover,
.mr-unit select:hover {
    border-color: #b9bccb;
}

.mr-search select:focus,
.mr-search input:focus,
.mr-field__range:focus,
.mr-offer__qty select:focus,
.mr-unit select:focus {
    border-color: var(--mr-accent);
    box-shadow: 0 0 0 3px var(--mr-accent-soft);
    outline: 0;
}

.mr-search option:disabled,
.mr-offer__qty option:disabled,
.mr-unit option:disabled {
    color: #b9bccb;
}

/* Stay search ---------------------------------------------------------- */

.mr-search {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--mr-line);
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-shadow);
}

.mr-search__bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
}

.mr-field {
    min-width: 0;
}

.mr-field > label,
.mr-search__filters label > span {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin-bottom: .35rem;
    color: var(--mr-muted);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mr-field > label i,
.mr-search__filters label > span i {
    color: var(--mr-accent);
}

.mr-field--destination {
    flex: 1 1 12rem;
}

.mr-field--dates {
    flex: 2 1 18rem;
}

.mr-field--small {
    flex: 0 1 7.5rem;
}

.mr-search__submit.btn {
    flex: 0 0 auto;
    height: var(--mr-field-h);
    padding-top: 0;
    padding-bottom: 0;
}

.mr-field__pair {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.mr-field__pair input {
    flex: 1 1 0;
    min-width: 0;
}

.mr-field__pair[hidden] {
    display: none;
}

.mr-field__arrow {
    color: var(--mr-muted);
}

.mr-field__range {
    padding-left: 2.6rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%236b7080' stroke-linecap='round' stroke-width='1.3'%3E%3Crect x='2' y='3' width='12' height='11' rx='1.5'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/g%3E%3C/svg%3E") no-repeat .9rem center / 1rem;
    cursor: pointer;
    text-overflow: ellipsis;
}

.mr-field__range::placeholder {
    color: var(--mr-muted);
}

.mr-search__ages {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--mr-border);
}

.mr-search__ages-hint {
    margin-right: .25rem;
    color: var(--mr-text);
    font-size: .9rem;
}

.mr-search__age {
    margin: 0;
}

.mr-search__age select {
    width: auto;
    min-width: 7.5rem;
    height: 2.5rem;
    font-size: .95rem;
}

.mr-search__age select:invalid {
    border-color: var(--mr-accent);
}

.mr-search__filters {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--mr-line);
}

.mr-search__filters label {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin: 0;
}

.mr-search__filters label > span {
    margin-bottom: 0;
    white-space: nowrap;
}

.mr-search__filters select {
    width: auto;
    min-width: 11rem;
    height: 2.5rem;
    font-size: .95rem;
}

@media (max-width: 767.98px) {
    .mr-search {
        padding: 1rem;
    }

    .mr-field--destination,
    .mr-field--dates,
    .mr-search__submit.btn {
        flex-basis: 100%;
    }

    .mr-field--small {
        flex: 1 1 40%;
    }

    .mr-search__filters label {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .mr-search__filters select {
        flex: 0 1 60%;
    }
}

/* Range calendar */

.flatpickr-calendar {
    border-radius: var(--mr-radius);
    box-shadow: 0 1rem 2.5rem rgba(34, 35, 90, .18);
    font-family: inherit;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--mr-accent);
    border-color: var(--mr-accent);
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: var(--mr-accent-soft);
    border-color: var(--mr-accent-soft);
    box-shadow: -5px 0 0 var(--mr-accent-soft), 5px 0 0 var(--mr-accent-soft);
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--mr-accent);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--mr-ink);
}

/* Results and hotel cards ------------------------------------------- */

.mr-results-count {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    align-items: baseline;
    margin: 0 0 1.25rem;
    color: var(--mr-muted);
}

.mr-results-count strong {
    color: var(--mr-ink);
    font-size: 1.1rem;
}

.mr-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--mr-line);
    border-radius: var(--mr-radius);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.mr-card:hover {
    box-shadow: var(--mr-shadow);
    transform: translateY(-2px);
}

.mr-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--mr-soft);
    overflow: hidden;
}

.mr-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.mr-card:hover .mr-card__media img {
    transform: scale(1.03);
}

.mr-card__badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    padding: .3rem .7rem;
    background: rgba(255, 255, 255, .94);
    border-radius: 2rem;
    color: var(--mr-ink);
    font-size: .8rem;
    font-weight: 600;
}

.mr-card__badge i {
    color: var(--mr-accent);
}

.mr-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 10rem;
    color: #a3a7b7;
    font-size: 2.5rem;
}

.mr-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.1rem 1.25rem 1.25rem;
}

.mr-card__title {
    margin: .2rem 0 .15rem;
    font-size: 1.2rem;
    line-height: 1.3;
}

.mr-card__title a {
    color: var(--mr-ink);
    text-decoration: none;
}

.mr-card__title a:hover {
    color: var(--mr-accent);
}

.mr-card__subtitle {
    margin-bottom: .5rem;
    color: var(--mr-muted);
    font-size: .95rem;
}

.mr-card__text {
    margin: .5rem 0 0;
    color: var(--mr-text);
    font-size: .95rem;
}

.mr-card__footer {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--mr-line);
}

.mr-card__body > :nth-last-child(2) {
    margin-bottom: 1rem;
}

.mr-card__footer {
    flex-wrap: wrap;
}

.mr-card__footer .mr-price small {
    white-space: nowrap;
}

.mr-card__footer .btn {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .75rem 1.1rem;
}

.mr-card__footer .btn:hover {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.mr-card.is-unavailable .mr-card__media img {
    filter: grayscale(.7);
    opacity: .75;
}

.mr-stars {
    color: #f2a900;
    font-size: .85rem;
    letter-spacing: .1rem;
}

.mr-price {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.mr-price small {
    color: var(--mr-muted);
    font-size: .8rem;
}

.mr-price strong {
    color: var(--mr-ink);
    font-size: 1.35rem;
    line-height: 1.2;
}

.mr-price--large strong {
    font-size: 1.75rem;
}

.mr-unavailable {
    color: var(--mr-muted);
    font-size: .9rem;
}

.mr-empty {
    padding: 2rem 1rem;
    color: var(--mr-muted);
    text-align: center;
}

/* Facilities */

.mr-facility-icons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.mr-facility-icons li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: var(--mr-accent-soft);
    border-radius: var(--mr-radius-sm);
    color: var(--mr-accent);
    font-size: .95rem;
}

.mr-facility-icons__more {
    width: auto !important;
    padding: 0 .5rem;
    color: var(--mr-muted) !important;
    font-size: .8rem !important;
    font-weight: 600;
}

.mr-facilities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .6rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-facilities i {
    color: var(--mr-accent);
}

/* Hotel page -------------------------------------------------------- */

.mr-hotel__top {
    padding-top: 2rem;
}

.mr-gallery-hero {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .5rem;
    height: clamp(16rem, 38vw, 29rem);
    margin-bottom: 2rem;
    border-radius: var(--mr-radius);
    overflow: hidden;
}

.mr-gallery-hero__item {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    background: var(--mr-soft);
    overflow: hidden;
}

.mr-gallery-hero__item:first-child {
    grid-row: span 2;
}

.mr-gallery-hero__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, filter .2s ease;
}

.mr-gallery-hero__item:hover img {
    filter: brightness(.92);
    transform: scale(1.02);
}

.mr-gallery-hero--1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.mr-gallery-hero--1 .mr-gallery-hero__item:first-child {
    grid-row: auto;
}

.mr-gallery-hero--2 {
    grid-template-columns: 2fr 1fr;
}

.mr-gallery-hero--3 {
    grid-template-columns: 2fr 1fr;
}

.mr-gallery-hero--4 .mr-gallery-hero__item:nth-child(4) {
    grid-column: span 2;
}

.mr-gallery-hero--2 .mr-gallery-hero__item:nth-child(2) {
    grid-row: span 2;
}

.mr-gallery-hero__more {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    padding: .4rem .8rem;
    background: rgba(255, 255, 255, .94);
    border-radius: 2rem;
    color: var(--mr-ink);
    font-size: .9rem;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .mr-gallery-hero {
        grid-template-columns: 2fr 1fr;
        height: 15rem;
        margin-bottom: 1.5rem;
        border-radius: var(--mr-radius-sm);
    }

    .mr-gallery-hero--1 {
        grid-template-columns: 1fr;
    }

    .mr-gallery-hero--4 .mr-gallery-hero__item:nth-child(4) {
        grid-column: auto;
    }

    .mr-gallery-hero__item:nth-child(n+4) {
        display: none;
    }
}

.mr-hotel__intro {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    margin-bottom: .75rem;
}

.mr-hotel__intro .mr-stars {
    font-size: 1rem;
}

.mr-chip {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    padding: .3rem .8rem;
    background: var(--mr-accent-soft);
    border-radius: 2rem;
    color: var(--mr-accent);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.mr-chip:hover {
    color: var(--mr-ink);
}

.mr-hotel__address {
    color: var(--mr-muted);
    font-size: .95rem;
}

.mr-hotel .mr-facility-icons {
    margin-bottom: 1.5rem;
}

.mr-text {
    color: var(--mr-text);
}

.mr-hotel__facilities {
    margin-top: 2rem;
}

.mr-section-title {
    margin-bottom: 1.25rem;
    color: var(--mr-ink);
    font-size: 1.5rem;
}

.mr-infos {
    position: sticky;
    top: 6rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--mr-line);
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-shadow);
}

.mr-infos .mr-price {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--mr-line);
}

.mr-infos__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-infos__list li {
    padding: .55rem 0;
    border-bottom: 1px solid var(--mr-line);
    color: var(--mr-text);
    overflow-wrap: anywhere;
}

.mr-infos__list li:last-child {
    border-bottom: 0;
}

.mr-infos__list i {
    margin-right: .35rem;
    color: var(--mr-accent);
}

.mr-infos__times {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
}

.mr-map {
    margin-top: 1rem;
}

.mr-map iframe {
    display: block;
    width: 100%;
    height: 13rem;
    border: 0;
    border-radius: var(--mr-radius-sm);
}

.mr-map a {
    display: inline-block;
    margin-top: .5rem;
    font-size: .875rem;
}

.mr-availability {
    margin-top: 3rem;
    padding: 3rem 0 3.5rem;
    background: var(--mr-soft);
}

.mr-availability .mr-search {
    box-shadow: none;
}

.mr-hint {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: .9rem 1.1rem;
    background: #fff;
    border-left: 3px solid var(--mr-accent);
    border-radius: var(--mr-radius-sm);
    color: var(--mr-text);
}

.mr-hint i {
    color: var(--mr-accent);
}

/* Room cards ---------------------------------------------------------- */

.mr-room-card {
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid var(--mr-line);
    border-radius: var(--mr-radius);
    overflow: hidden;
}

.mr-room-card__head {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
}

.mr-room-card__photo {
    position: relative;
    align-self: start;
    aspect-ratio: 4 / 3;
    background: var(--mr-soft);
    border-radius: var(--mr-radius-sm);
    overflow: hidden;
}

.mr-room-card__photo a {
    display: block;
    width: 100%;
    height: 100%;
}

.mr-room-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.mr-room-card__photo a:hover img {
    transform: scale(1.04);
}

.mr-room-card__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3a7b7;
    font-size: 2.25rem;
}

.mr-room-card__count {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .2rem .55rem;
    background: rgba(34, 35, 90, .75);
    border-radius: 2rem;
    color: #fff;
    font-size: .8rem;
}

.mr-room-card__title {
    margin: 0 0 .2rem;
    color: var(--mr-ink);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}

.mr-room-card__subtitle {
    margin: 0 0 .5rem;
    color: var(--mr-muted);
}

.mr-badge {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    margin-bottom: .5rem;
    padding: .2rem .6rem;
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 600;
}

.mr-badge--success {
    background: #e7f6ef;
    color: var(--mr-success);
}

.mr-room-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin: .25rem 0 .6rem;
    padding: 0;
    color: var(--mr-text);
    font-size: .92rem;
    list-style: none;
}

.mr-room-card__specs i {
    color: var(--mr-accent);
}

.mr-room-card__details summary {
    display: inline-block;
    color: var(--mr-accent);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.mr-room-card__details[open] summary {
    margin-bottom: .75rem;
}

.mr-room-card__details .mr-facilities {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    margin-top: .75rem;
    font-size: .92rem;
}

.mr-room-card__text {
    color: var(--mr-text);
    font-size: .95rem;
}

.mr-room-card__info > .mr-price {
    margin-top: .75rem;
}

.mr-room-card__reason {
    margin: 0;
    padding: .9rem 1.25rem;
    background: var(--mr-soft);
    border-top: 1px solid var(--mr-line);
    color: var(--mr-muted);
}

.mr-room-card.is-unavailable .mr-room-card__photo img {
    filter: grayscale(.7);
    opacity: .75;
}

.mr-room-card.is-unavailable .mr-room-card__title {
    color: var(--mr-muted);
}

@media (max-width: 767.98px) {
    .mr-room-card__head {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .mr-room-card__photo {
        aspect-ratio: 16 / 9;
    }
}

/* Offers of a room: plan, price for the stay, number of rooms */

.mr-offers {
    border-top: 1px solid var(--mr-line);
}

.mr-offers__head,
.mr-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem 6rem;
    gap: .5rem 1.25rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

.mr-offers__head {
    padding-top: .5rem;
    padding-bottom: .5rem;
    background: var(--mr-soft);
    color: var(--mr-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mr-offers__head span:nth-child(2) {
    text-align: right;
}

.mr-offer {
    grid-template-areas: "info price qty" "units units units";
    align-items: start;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid var(--mr-line);
}

.mr-offers__head + .mr-offer {
    border-top: 0;
}

.mr-offer__info {
    grid-area: info;
}

.mr-offer__title {
    color: var(--mr-ink);
    font-size: 1.05rem;
}

.mr-offer__terms {
    margin: .3rem 0 0;
    padding: 0;
    color: var(--mr-text);
    font-size: .88rem;
    line-height: 1.45;
    list-style: none;
}

.mr-offer__terms li + li {
    margin-top: .15rem;
}

.mr-offer__flexible {
    color: var(--mr-success);
}

.mr-offer__strict {
    color: var(--mr-warning);
}

.mr-offer__note {
    color: var(--mr-muted);
}

.mr-offer__price {
    display: flex;
    flex-direction: column;
    grid-area: price;
    align-items: flex-end;
    line-height: 1.3;
    text-align: right;
}

.mr-offer__price strong {
    color: var(--mr-ink);
    font-size: 1.3rem;
}

.mr-offer__price small {
    color: var(--mr-muted);
    font-size: .8rem;
}

.mr-offer__qty {
    grid-area: qty;
}

.mr-offer__qty select {
    font-weight: 700;
}

.mr-offer__units {
    display: grid;
    grid-area: units;
    gap: .5rem;
}

.mr-offers__scarcity {
    margin: 0;
    padding: .6rem 1.25rem .9rem;
    color: var(--mr-danger);
    font-size: .9rem;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .mr-offers__head {
        display: none;
    }

    .mr-offers__head + .mr-offer {
        border-top: 1px solid var(--mr-line);
    }

    .mr-offer {
        grid-template-columns: minmax(0, 1fr) 5.5rem;
        grid-template-areas: "info info" "price qty" "units units";
        align-items: center;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .mr-offer__price {
        align-items: flex-start;
        text-align: left;
    }
}

/* One chosen room and its guests */

.mr-unit {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .9rem;
    align-items: center;
    padding: .55rem .8rem;
    background: var(--mr-accent-soft);
    border-left: 3px solid var(--mr-accent);
    border-radius: var(--mr-radius-sm);
    font-size: .92rem;
}

.mr-unit__label {
    min-width: 6.5rem;
    color: var(--mr-ink);
    font-weight: 700;
}

.mr-unit__label i {
    color: var(--mr-accent);
}

.mr-unit__field {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    margin: 0;
    color: var(--mr-text);
}

.mr-unit select {
    width: auto;
    height: 2.25rem;
    padding: 0 1.9rem 0 .65rem;
    background-position: right .55rem center;
    font-size: .92rem;
}

.mr-unit__ages {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.mr-unit__ages select:invalid {
    border-color: var(--mr-warning);
    color: var(--mr-warning);
}

.mr-unit__price {
    margin-left: auto;
    color: var(--mr-ink);
    font-size: 1rem;
    transition: opacity .15s ease;
}

.mr-unit__error {
    flex-basis: 100%;
    color: var(--mr-danger);
    font-size: .85rem;
}

.mr-unit.has-error {
    border-left-color: var(--mr-danger);
}

.mr-unit.is-pending {
    opacity: .65;
}

.mr-unit__loading {
    margin-left: auto;
    color: var(--mr-accent);
}

.mr-selection.is-loading .mr-unit__price,
.mr-selection.is-loading [data-mr-summary-total],
.mr-selection.is-loading [data-mr-summary-taxes] {
    opacity: .4;
}

/* Summary of the choice */

.mr-summary-box {
    position: sticky;
    top: 6rem;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid var(--mr-line);
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-shadow);
}

.mr-summary-box__title {
    margin-bottom: .75rem;
    color: var(--mr-ink);
    font-size: 1.15rem;
}

.mr-summary-box__stay {
    margin-bottom: .35rem;
    color: var(--mr-text);
    font-size: .95rem;
}

.mr-summary-box__stay i {
    color: var(--mr-accent);
}

.mr-summary-box__stay span {
    display: block;
    color: var(--mr-muted);
    font-size: .875rem;
}

.mr-summary-box__rooms {
    margin-bottom: 1rem;
    color: var(--mr-text);
    font-weight: 600;
}

.mr-summary-box__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: .9rem;
    border-top: 1px solid var(--mr-line);
    color: var(--mr-ink);
    font-weight: 700;
}

.mr-summary-box__total strong {
    font-size: 1.75rem;
    transition: opacity .15s ease;
}

.mr-summary-box__taxes {
    margin: .25rem 0 1rem;
    padding: 0;
    color: var(--mr-muted);
    font-size: .85rem;
    list-style: none;
}

.mr-summary-box__taxes li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.mr-summary-box__warning {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    background: var(--mr-warning-soft);
    border-radius: var(--mr-radius-sm);
    color: var(--mr-warning);
    font-size: .875rem;
}

.mr-summary-box__warning[hidden] {
    display: none;
}

.mr-summary-box .btn {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: .95rem;
}

.mr-summary-box__assurance {
    margin: 1rem 0 0;
    padding: 0;
    color: var(--mr-text);
    font-size: .875rem;
    list-style: none;
}

.mr-summary-box__assurance li + li {
    margin-top: .3rem;
}

.mr-summary-box__assurance i {
    margin-right: .3rem;
    color: var(--mr-success);
}

.mr-selection-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .mr-summary-box {
        position: static;
    }

    .mr-selection-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -.5rem 1.5rem rgba(34, 35, 90, .12);
    }

    .mr-selection-bar__total {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.25;
    }

    .mr-selection-bar__total strong {
        color: var(--mr-ink);
        font-size: 1.3rem;
    }

    .mr-selection-bar__total small {
        overflow: hidden;
        color: var(--mr-muted);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mr-selection-bar .btn {
        flex: 0 0 auto;
    }

    body.has-mr-bar {
        padding-bottom: 5rem;
    }

    /* Floating buttons of the theme stay above the bar. */
    body.has-mr-bar #toTop,
    body.has-mr-bar .cookie-open {
        transform: translateY(-4.75rem);
    }
}

/* Booking page -------------------------------------------------------- */

.mr-steps {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin: 0 0 2rem;
    padding: 0;
    counter-reset: none;
    list-style: none;
}

.content .mr-steps li {
    display: flex;
    flex: 1 1 0;
    gap: .6rem;
    align-items: center;
    margin: 0;
    color: var(--mr-muted);
    font-weight: 600;
    white-space: nowrap;
}

.content .mr-steps li::before {
    content: none;
    display: none;
}

.content .mr-steps li:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 1rem;
    height: 2px;
    background: var(--mr-border);
}

.content .mr-steps li:last-child {
    flex: 0 0 auto;
}

.mr-steps a {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.mr-steps a:hover .mr-steps__label {
    text-decoration: underline;
}

.mr-steps__number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--mr-border);
    border-radius: 50%;
    background: #fff;
    font-size: .9rem;
}

.content .mr-steps li.is-done {
    color: var(--mr-success);
}

.content .mr-steps li.is-done .mr-steps__number {
    border-color: var(--mr-success);
    background: var(--mr-success);
    color: #fff;
}

.content .mr-steps li.is-done:not(:last-child)::after {
    background: var(--mr-success);
}

.content .mr-steps li.is-current {
    color: var(--mr-ink);
}

.content .mr-steps li.is-current .mr-steps__number {
    border-color: var(--mr-accent);
    background: var(--mr-accent);
    color: #fff;
}

@media (max-width: 575.98px) {
    .content .mr-steps li:not(.is-current) .mr-steps__label {
        display: none;
    }
}

.mr-panel {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--mr-line);
    border-radius: var(--mr-radius);
}

.mr-summary {
    position: sticky;
    top: 6rem;
    box-shadow: var(--mr-shadow);
}

.mr-stay-dates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}

.mr-stay-dates dt {
    color: var(--mr-muted);
    font-size: .8rem;
    font-weight: 400;
    text-transform: uppercase;
}

.mr-stay-dates dd {
    margin: 0;
    color: var(--mr-ink);
    font-weight: 600;
}

.mr-stay-dates small {
    display: block;
    color: var(--mr-muted);
    font-weight: 400;
}

.mr-lines,
.mr-totals {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-lines li,
.mr-totals li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 0;
    border-top: 1px solid var(--mr-line);
}

.mr-lines small {
    display: block;
    color: var(--mr-muted);
}

.mr-lines li.is-unavailable strong {
    text-decoration: line-through;
}

.mr-totals li.is-included {
    color: var(--mr-muted);
    font-size: .9rem;
}

.mr-totals__total {
    color: var(--mr-ink);
    font-size: 1.25rem;
    font-weight: 700;
}

.mr-totals {
    margin-bottom: 1rem;
}

.mr-change-selection {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    font-weight: 600;
}

.mr-guest-form .form-control {
    padding: .75rem .9rem;
    border-color: var(--mr-border);
    border-radius: var(--mr-radius-sm);
}

.mr-guest-form .form-control:focus {
    border-color: var(--mr-accent);
    box-shadow: 0 0 0 3px var(--mr-accent-soft);
}

.mr-guest-form .form-label {
    color: var(--mr-text);
    font-size: .9rem;
    font-weight: 600;
}

.mr-payment-option {
    display: flex;
    gap: .75rem;
    padding: 1rem;
    background: var(--mr-accent-soft);
    border: 2px solid var(--mr-accent);
    border-radius: var(--mr-radius-sm);
}

.mr-payment-option small,
.mr-payment-note {
    display: block;
    color: var(--mr-text);
}

.mr-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mr-empty-cart {
    padding: 3rem 1rem;
    color: var(--mr-muted);
    text-align: center;
}

.mr-empty-cart i {
    margin-bottom: 1rem;
    font-size: 3rem;
}

.mr-booking-status {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.mr-booking-status > i {
    font-size: 1.75rem;
}

.mr-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--mr-line);
    color: var(--mr-muted);
}

.mr-reference {
    color: var(--mr-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.3rem;
    letter-spacing: .08em;
}