/*
 * Beach House Aruba
 * Rebuilt for October CMS 4 (2026). Same look as the 2018 theme, without
 * Bootstrap 3, jQuery, slick or Font Awesome. Sizes follow the old theme.
 */

/* Fonts: the old theme used Lato Black as its bold weight. */
@font-face { font-family: 'lato'; src: url('../fonts/lato-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'lato'; src: url('../fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'lato'; src: url('../fonts/lato-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'lato'; src: url('../fonts/lato-900.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }

:root {
    --pink: #ed078c;
    --pink-dark: #bf0861;
    --pink-link: #bf1e61;
    --text: #586667;
    --heading: #1f3f50;
    --link: #3097d1;
    --link-hover: #216a94;
    --shadow: 0 1px 2px #ccc;
    --gutter: 15px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'lato', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--pink);
}
body.side-nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }
p { margin: 0 0 11px; }
ul, ol { margin: 0 0 11px; }
b, strong { font-weight: 700; }
hr { margin: 22px 0; border: 0; border-top: 1px solid #eee; }
table { border-collapse: collapse; border-spacing: 0; }
button { font: inherit; }

h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: var(--heading); }
h1, h2, h3 { margin: 22px 0 11px; }
h4, h5, h6 { margin: 11px 0; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
@media (max-width: 479px) { h2 { font-size: 28px; } }

.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; flex-shrink: 0; }

.container { margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

.card { background-color: #fff; box-shadow: var(--shadow); }

/* Content written in the rich editor */
.rich table td { border: none; }
.rich img { max-width: 100%; height: auto; }
.rich img.fr-dib { display: block; margin: 5px auto; }
.rich img.fr-dii { display: inline-block; margin: 5px; max-width: calc(100% - 10px); }
.rich img.fr-fir { float: right; margin: 5px 0 5px 5px; }
.rich img.fr-fil { float: left; margin: 5px 5px 5px 0; }
.rich p:last-child { margin-bottom: 0; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 50px;
    font-size: 14px;
    line-height: 1.6;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transform: perspective(1px) translateZ(0);
    transition: transform 0.3s;
}
.btn:hover, .btn:focus, .btn:active { transform: scale(1.1); text-decoration: none; }
.btn--primary, .btn--secondary { background-color: var(--pink-dark); border-color: var(--pink-dark); color: #fff; }
.btn--primary:hover, .btn--primary:focus, .btn--secondary:hover, .btn--secondary:focus { color: #fff; }
.btn--secondary { font-size: 20px; font-weight: 900; }

.more-link { display: inline-flex; align-items: center; font-size: 12px; color: inherit; }
.more-link:hover, .more-link:focus { color: inherit; }
.more-link .icon { margin-left: 5px; font-size: 10px; }

/* Navbar */
.navbar { background-color: var(--pink); min-height: 80px; }
@media (min-width: 768px) { .navbar { min-height: 100px; } }
.navbar__inner { display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; }
.navbar__brand {
    display: block;
    width: 200px;
    height: 90px;
    margin-left: -7px;
    background: url('../images/logo.png') no-repeat 7px 3px / auto 90%;
}
.navbar__nav { display: flex; align-items: center; list-style: none; margin: 28px 0 0 auto; padding: 0; }
.navbar__nav a, .side-nav-toggle {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: #fff;
    line-height: 22px;
    text-transform: uppercase;
    transition: color 0.5s ease;
}
.navbar__nav a:hover, .navbar__nav a:focus, .side-nav-toggle:hover { color: #000; text-decoration: none; }
.navbar__nav .icon { font-size: 20px; margin-right: 10px; }
.side-nav-toggle { background: none; border: 0; padding-right: 0; cursor: pointer; }
.bars { display: inline-block; width: 25px; margin-left: 10px; }
.bar { display: block; height: 3px; background-color: #fff; }
.bar + .bar { margin-top: 4px; }
.side-nav-toggle:hover .bar { background-color: #000; }

@media (max-width: 767px) {
    .navbar__inner { display: block; text-align: center; }
    .navbar__brand { display: inline-block; width: 173px; height: 75px; margin-left: 7px; }
    .navbar__nav { justify-content: center; margin: 0; }
    .navbar__wide { display: block; }
    .navbar__menu { position: absolute; top: 20px; right: 15px; }
}
@media (max-width: 499px) {
    .navbar__nav a { padding-left: 8px; padding-right: 8px; }
    .navbar__nav .icon, .navbar__home { display: none; }
}

/* Side nav */
.side-nav-overlay {
    position: fixed; inset: 0; z-index: 9;
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 0; pointer-events: none; transition: opacity 0.5s;
}
.side-nav {
    position: fixed; top: 0; right: 0; z-index: 10;
    height: 100%; min-width: 300px; overflow-x: hidden;
    background-color: var(--pink);
    box-shadow: 2px 0 10px #ccc;
    transform: translateX(100%);
    transition: transform 0.5s;
}
.side-nav-open .side-nav { transform: none; }
.side-nav-open .side-nav-overlay { opacity: 1; pointer-events: auto; }
.side-nav__links { list-style: none; margin: 0; padding: 25px 0; }
.side-nav__links a { display: inline-block; padding: 10px 25px; color: #fff; text-transform: uppercase; transition: color 0.5s ease; }
.side-nav__links a:hover { color: #000; text-decoration: none; }
.side-nav__close {
    position: absolute; top: 8px; right: 10px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 21px; font-weight: 700; line-height: 1; color: #fff;
}

/* Slider (banner, room cards, lightbox) */
.slider { position: relative; overflow: hidden; }
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.slider__slide::before { content: ''; display: block; padding-top: 66.6667%; }
.slider--banner .slider__slide::before { padding-top: 56.2%; }
.slider__slide img {
    position: absolute; top: 50%; left: 50%;
    max-width: 100%; max-height: 100%;
    transform: translate(-50%, -50%);
}
.slider[data-lightbox] .slider__slide:not(.slider__slide--video) { cursor: pointer; }
.slider__player, .slider__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.slider__sound {
    position: absolute; left: 15px; bottom: 10px; z-index: 2;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 20px; color: #fff; opacity: 0.4; transition: opacity 0.5s;
}
.slider__sound:hover { opacity: 1; }
.slider__sound .icon--unmuted, .slider__sound.is-muted .icon--muted { display: inline-block; }
.slider__sound .icon--muted, .slider__sound.is-muted .icon--unmuted { display: none; }
.slider__dots { display: flex; justify-content: center; gap: 12px; position: absolute; left: 50px; right: 50px; bottom: 15px; z-index: 2; }
.slider__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: 0.25; cursor: pointer; }
.slider--banner .slider__dots button { background: #fff; opacity: 0.5; }
.slider__dots button[aria-current="true"] { opacity: 0.75; }
.slider--banner .slider__dots button[aria-current="true"] { opacity: 1; }
.slider__arrow {
    position: absolute; z-index: 2;
    width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 20px; color: var(--pink-link);
}
.slider__empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; background: #ececec; color: #ccc; font-size: 80px; }

/* Banner */
.banner-container { margin-bottom: 30px; }
.banner { position: relative; background-color: #000; }
.banner .slider__slide img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.banner__overlay {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff; text-align: center;
    transition: opacity 5s ease;
}
.banner__overlay.is-ready { opacity: 0; pointer-events: none; }
.banner__title { margin: 22px 0 11px; font-size: 28px; color: #fff; }
.banner__subtitle { margin: 22px 0 11px; font-size: 16px; color: #fff; }
@media (min-width: 500px) {
    .banner__title { font-size: 48px; }
    .banner__subtitle { font-size: 35px; }
}

/* Intro */
.intro { padding: 25px; text-align: center; }
.intro__title { margin: 0 0 5px; }
.intro__text { max-width: 1000px; margin: 0 auto; font-size: 16px; }
.intro__buttons .btn { height: 39px; margin: 10px; }

/* Rooms + sidebar */
.rooms-layout { display: grid; gap: 0 20px; }
@media (min-width: 768px) {
    .rooms-layout { grid-template-columns: 1fr 3fr; }
    .rooms-layout .side-bar { grid-column: 1; grid-row: 1; }
    .rooms-layout .rooms { grid-column: 2; }
}
.room { display: grid; gap: 15px 16px; margin-top: 20px; padding: 15px; }
@media (min-width: 768px) { .room { grid-template-columns: 5fr 7fr; } }
.room__gallery .slider__track { border: 1px solid #ececec; }
.room__gallery .slider__dots { position: static; padding: 12px 30px 0; }
.room__gallery .slider__arrow { bottom: -3px; }
.room__gallery .slider__arrow--prev { left: 0; }
.room__gallery .slider__arrow--next { right: 0; }
.room__name { margin: 0 0 8px; }
.room__info span { display: inline-flex; align-items: center; }
.room__info span + span { margin-left: 15px; }
.room__info .icon { margin-right: 8px; font-size: 20px; color: var(--pink); }
.room__intro { margin-top: 8px; }
.room__prices { display: flex; align-items: center; padding-top: 10px; }
.room__prices > span {
    display: flex; align-items: center; height: 15px;
    margin-right: 10px; padding-right: 10px;
    border-right: 1px solid #000; font-size: 12px;
}
.room__prices > span:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
.room__prices > span > span { margin-left: 10px; font-size: 18px; color: var(--pink); }
@media (max-width: 1200px) {
    .room__prices { display: block; }
    .room__prices > span { display: grid; grid-template-columns: 100px 1fr; height: auto; margin-bottom: 10px; border-right: 0; }
}
.room__buttons { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
@media (max-width: 767px) {
    .room__name, .room__info, .room__intro { text-align: center; }
}

.side-bar__help, .side-bar__why, .side-bar__location { margin-top: 20px; padding: 20px; }
.side-bar__location { padding: 0 0 25px; }
.side-bar__title { display: inline-flex; align-items: center; margin: 0; padding: 0 0 0; font-size: 24px; font-weight: 500; line-height: 1.1; color: var(--heading); }
.side-bar__title .icon { margin-right: 10px; color: var(--pink); }
.side-bar__title--link { padding: 20px 20px 0; }
.side-bar__title--link:hover { text-decoration: none; color: var(--heading); }
.side-bar__text { margin-top: 11px; }
.side-bar__location .side-bar__text { padding: 0 20px 5px; }
.side-bar__text ul { list-style: none; margin: 0; padding: 0; }
.side-bar__text li { display: flex; align-items: center; }
.side-bar__text li + li { margin-top: 8px; }
.side-bar__text li::before {
    content: ''; flex: 0 0 20px; height: 20px; margin-right: 10px;
    background-color: var(--pink);
    -webkit-mask: url('../images/star.svg') no-repeat center / contain;
    mask: url('../images/star.svg') no-repeat center / contain;
}
.side-bar__phone { font-size: 18px; font-weight: 700; color: var(--pink); }
.side-bar__map { position: relative; height: 200px; }
.side-bar__map iframe { width: 100%; height: 100%; border: 0; pointer-events: none; }
.side-bar__map-link { position: absolute; inset: 0; }
.side-bar__directions { padding: 0 0 25px 53px; }
.side-bar__directions a { display: inline-block; color: var(--pink-link); font-weight: 700; }
.side-bar__call { display: flex; justify-content: center; }
@media (max-width: 1200px) { .side-bar__directions { padding-left: 20px; } }
@media (max-width: 992px) { .side-bar__call .btn { padding-left: 10px; padding-right: 10px; } }
@media (max-width: 767px) {
    .side-bar__help, .side-bar__why, .side-bar__location { text-align: center; }
    .side-bar__text li { justify-content: center; }
    .side-bar__directions { padding-left: 28px; }
    .side-bar__call .btn { padding-left: 50px; padding-right: 50px; }
}

/* About, content, gallery */
.about { margin-top: 20px; padding: 20px; }
@media (min-width: 1200px) { .about { padding-left: 70px; padding-right: 70px; } }
.about__title { margin-top: 0; text-align: center; }

.content { margin-top: 20px; padding: 20px; }
@media (min-width: 768px) { body:not(.page-home) .content { padding: 50px; } }
.content__title { margin-top: 0; }

.gallery { margin-top: 20px; }
.gallery__title { color: #fff; }
.gallery__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 767px) { .gallery__grid { grid-template-columns: 1fr; } }
.gallery__item { display: block; aspect-ratio: 1; padding: 0; border: 0; background: #ececec; box-shadow: var(--shadow); overflow: hidden; cursor: pointer; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* Footer */
#layout-footer { margin-top: 20px; }
.footer a { color: #fff; transition: color 0.5s ease; }
.footer a:hover { color: #000; text-decoration: none; }
.footer__top { padding: 20px 0; background-color: var(--pink-dark); color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 0 30px; }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 3fr 5fr 4fr; } }
@media (min-width: 992px) { .footer__grid { grid-template-columns: 2fr 4fr 6fr; } }
@media (max-width: 767px) { .footer__information { grid-column: 1 / -1; } }
@media (max-width: 479px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__quick, .footer__seasons, .footer__information { padding: 15px 0; }
.footer__title { margin-top: 0; color: #fff; }
.footer__quick ul { list-style: none; margin: 0; padding: 0; }
.footer__quick .icon { margin-right: 8px; font-size: 10px; }
.footer__seasons td { padding-right: 4px; vertical-align: top; }
.footer__information ul { margin: 0; padding: 0 0 0 15px; }
.footer__bottom { padding: 20px 0; background-color: var(--pink); color: #fff; text-align: center; font-size: 12px; }
.footer__bottom span { padding: 0 8px; }

/* Modal */
.modal {
    width: 600px; max-width: calc(100% - 20px); max-height: calc(100% - 60px);
    margin: 30px auto auto; padding: 0;
    border: 10px solid var(--pink); border-radius: 0;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    color: var(--text);
}
.modal::backdrop { background-color: rgba(0, 0, 0, 0.5); }
.modal__body { padding: 35px; }
.modal__close {
    position: absolute; top: 8px; right: 10px; z-index: 2;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 40px; font-weight: 700; line-height: 1; color: #000; opacity: 0.2;
}
.modal__close:hover { opacity: 0.5; }
.modal__title { margin-top: 0; text-align: center; color: var(--pink); }
.modal__loading { display: flex; justify-content: center; padding: 40px 0; color: var(--pink); }
.modal__loading::after {
    content: ''; width: 30px; height: 30px; border: 3px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
    .modal { width: 100%; max-width: 100%; margin: 0; max-height: 100%; }
}
@media (max-width: 479px) { .modal__body { padding: 50px 15px 15px; } }

.modal-smoobu iframe { display: block; width: 100%; min-height: 620px; border: 0; }

.modal-rates__table { margin-top: 25px; overflow-x: auto; }
.modal-rates__table table { width: 100%; }
.modal-rates__table th, .modal-rates__table td { padding: 5px; text-align: center; white-space: nowrap; border-top: 1px solid #ddd; }
.modal-rates__table th { border-top: 0; border-bottom: 2px solid #ddd; vertical-align: bottom; }
.modal-rates__table th:first-child, .modal-rates__table td:first-child { text-align: left; }
.modal-rates__table th span { display: block; font-size: 12px; font-style: italic; font-weight: 400; }

/* Lightbox */
.lightbox { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 15px; border: 0; background: #fff; }
.lightbox::backdrop { background-color: rgba(0, 0, 0, 0.5); }
.lightbox .modal__close { color: var(--pink); opacity: 1; font-size: 35px; font-weight: 400; right: 15px; }
.lightbox .slider { height: calc(100% - 65px); }
.lightbox .slider__track { height: 100%; }
.lightbox .slider__slide::before { display: none; }
.lightbox .slider__arrow { top: 50%; margin-top: -20px; width: 40px; height: 40px; font-size: 40px; color: var(--pink); }
.lightbox .slider__arrow--prev { left: 15px; }
.lightbox .slider__arrow--next { right: 15px; }
.lightbox .slider__dots { position: static; padding-top: 25px; }
.lightbox .slider__dots button[aria-current="true"] { background: var(--pink); opacity: 1; }

/* Forms */
.request-form, .modal-form .rich { margin-top: 25px; }
.modal-form .rich { margin-top: 0; }
.request-form h4 { margin-top: 0; }
.request-form hr { margin: 8px 0 15px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row--card { grid-template-columns: 2fr 1fr; }
@media (max-width: 479px) { .form-row, .form-row--3, .form-row--card { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 15px; }
.form-label { display: block; margin-bottom: 2px; font-size: 12px; color: #999; }
.form-control {
    display: block; width: 100%; height: 36px;
    padding: 6px 12px;
    font: inherit; font-size: 14px; line-height: 1.6; color: #555;
    background-color: #fff;
    border: 1px solid #ccc; border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.form-control { height: auto; min-height: 84px; resize: vertical; }
.form-control::placeholder { color: #999; opacity: 1; }
select.form-control:invalid, select.form-control option[value=""] { color: #999; }
.form-control:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.form-control[readonly] { background-color: #eee; }
.form-error { display: block; color: #a94442; font-size: 12px; }
.form-error:empty { display: none; }
.form-check label { font-weight: 400; cursor: pointer; }
.form-check input { margin-right: 4px; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-turnstile { display: flex; justify-content: center; margin-top: 15px; }
.btn--submit { display: flex; width: 200px; margin: 25px auto 0; padding-left: 12px; padding-right: 12px; }
.request-success { margin-top: 25px; text-align: center; font-size: 16px; }

/* Languages and sport shortcuts, top right of the navbar */
.navbar__tools { display: flex; align-items: center; gap: 14px; position: absolute; top: 6px; right: var(--gutter); }
.languages { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.languages a { display: block; line-height: 0; border: 2px solid transparent; border-radius: 2px; opacity: 0.8; transition: opacity 0.3s, border-color 0.3s; }
.languages a:hover, .languages a[aria-current="true"] { opacity: 1; border-color: #fff; }
.languages img { width: 24px; height: 18px; object-fit: cover; display: block; }
@media (min-width: 768px) { .navbar__nav { margin-top: 38px; } }
@media (max-width: 767px) {
    .navbar__tools { position: static; justify-content: center; padding: 4px 0 6px; }
}

/* Sports section on the homepage */
.sports { margin-top: 20px; padding: 20px; text-align: center; }
@media (min-width: 1200px) { .sports { padding-left: 70px; padding-right: 70px; } }
.sports__title { margin-top: 0; }
.sports__intro { max-width: 800px; margin: 0 auto 20px; font-size: 16px; }
.sports__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: left; }
@media (max-width: 767px) { .sports__grid { grid-template-columns: 1fr; text-align: center; } }
.sports__image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #ececec; }
.sports__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.sports__image:hover img { transform: scale(1.05); }
.sports__name { margin: 15px 0 8px; font-size: 22px; }
.sports__text { margin-bottom: 8px; }

/* Sport page */
.sport__title { font-size: 30px; }
.sport__image { margin: 0 0 20px; }
.sport__image img { width: 100%; height: auto; }
.sport__buttons { margin-top: 25px; text-align: center; }
.sport__buttons .btn { height: 39px; margin: 10px; }
.sports-nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 14px 0 0; border-right: 1px solid rgba(255, 255, 255, 0.4); }
.sports-nav a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #fff; font-size: 22px; transition: color 0.5s ease; }
.sports-nav a:hover, .sports-nav a:focus { color: #000; text-decoration: none; }