/* Hotel Wayira Beach - styles owned by this project */

/* ---------- Gallery lightbox ---------- */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(0, 0, 0, .9);
}

.lightbox.is-open {
    display: flex;
}

.lightbox__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.lightbox__figure img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
}

.lightbox__figure figcaption {
    margin-top: 12px;
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}

.lightbox button {
    position: absolute;
    border: 0;
    background: none;
    color: #ffffff;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
}

.lightbox button:hover {
    opacity: 1;
}

.lightbox__prev,
.lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 20px;
    font-size: 48px;
}

.lightbox__prev {
    left: 10px;
}

.lightbox__next {
    right: 10px;
}

.lightbox__close {
    top: 16px;
    right: 16px;
    padding: 8px 14px;
    font-size: 36px;
}

/* ---------- Gallery carousel arrows ---------- */

/* The gallery theme drew the arrows with Font Awesome glyphs. Draw them with
   borders instead, so the carousel does not depend on an icon font. The
   selectors carry the .mod-image-gallery prefix to outrank the theme rules. */

.mod-image-gallery .slick-prev,
.mod-image-gallery .slick-next {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background .2s;
}

.mod-image-gallery .slick-prev:hover,
.mod-image-gallery .slick-next:hover {
    background: rgba(0, 0, 0, .75);
}

/* Chevron: two borders of an empty square, rotated 45 degrees. */
.mod-image-gallery .slick-prev::before,
.mod-image-gallery .slick-next::before {
    content: "";
    display: block;
    position: static;
    width: 11px;
    height: 11px;
    border-top: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    font-family: inherit;
}

.mod-image-gallery .slick-prev {
    left: 12px;
}

.mod-image-gallery .slick-prev::before {
    transform: translateX(3px) rotate(-135deg);
}

.mod-image-gallery .slick-next {
    right: 12px;
}

.mod-image-gallery .slick-next::before {
    transform: translateX(-3px) rotate(45deg);
}

.slick-list {
    overflow: hidden;
}

.slick-track {
    display: flex;
}

.slick-slide {
    flex: 0 0 auto;
}

/* ---------- /404 ---------- */

.sp-page-builder .page-content #notfound-hero {
    padding: 50px 0;
    background-color: #9a7d21;
}

.sp-page-builder .page-content #notfound-hero .sppb-addon-title {
    color: #ffffff;
    font-family: "Playfair Display", serif;
    font-size: 45px;
    font-weight: 700;
    text-shadow: 1px 1px #1c1c1c;
}

.sp-page-builder .page-content #notfound {
    padding: 60px 0 80px;
}

.notfound {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.notfound__code {
    margin: 0;
    color: rgba(154, 125, 33, .25);
    font-family: "Playfair Display", serif;
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
}

.notfound__title {
    margin: 10px 0 0;
    color: #9a7d21;
    font-family: "Playfair Display", serif;
    font-size: 40px;
    font-weight: 700;
}

.notfound__text {
    margin: 18px auto 0;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.7;
}

.notfound__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 32px 0 0;
}

.notfound__btn {
    display: inline-block;
    padding: 13px 30px;
    border: 2px solid #2d9c9a;
    border-radius: 30px;
    background-color: #2d9c9a;
    color: #ffffff;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.notfound__btn:hover,
.notfound__btn:focus {
    border-color: #125554;
    background-color: #125554;
    color: #ffffff;
    text-decoration: none;
}

.notfound__btn--ghost {
    background-color: transparent;
    color: #125554;
}

.notfound__btn--ghost:hover,
.notfound__btn--ghost:focus {
    background-color: #125554;
    color: #ffffff;
}

.notfound__map {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 60px;
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    text-align: left;
}

.notfound__group-title {
    margin: 0 0 12px;
    color: #125554;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    font-weight: 700;
}

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

.notfound__links li + li {
    margin-top: 6px;
}

.notfound__links a {
    color: #4a4a4a;
    font-size: 15px;
    text-decoration: none;
    transition: color .2s;
}

.notfound__links a:hover,
.notfound__links a:focus {
    color: #2d9c9a;
}

.notfound__help {
    margin: 40px 0 0;
    color: #6a6a6a;
    font-size: 15px;
}

.notfound__help a {
    color: #125554;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .sp-page-builder .page-content #notfound-hero .sppb-addon-title {
        font-size: 32px;
    }

    .notfound__code {
        font-size: 80px;
    }

    .notfound__title {
        font-size: 28px;
    }

    .notfound__map {
        gap: 26px 40px;
    }
}

/* ---------- WhatsApp widget ---------- */

/* The agent's name was an <h2>, which put the only h2 of every page inside a
   popup that starts hidden. It is a label, not a section, so it is a div now —
   and these are the theme's rules for the heading it used to be. */

.wa_agent .wa_agent_title {
    margin: 0 0 5px;
    color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
}


/* ---------- Heading levels ---------- */

/* The content headings moved up a level so that the document outline runs h1,
   h2, h3 without gaps. Their size should not have moved with them: a heading
   the page-builder export gives no size of its own would otherwise be drawn as
   whatever the theme says the new tag is. These rules hand back the size the
   old tag had. They name no id on purpose — every export rule does, so every
   heading that was styled explicitly still is.

   /404 is exempt: it was written by hand, already ran h1, h2, h3, and styles
   its own headings below. */

body:not(.styles-404) .sp-page-builder h2 {
    font-size: calc(1.3rem + .6vw);
}

body:not(.styles-404) .sp-page-builder h3 {
    font-size: calc(1.275rem + .3vw);
}

@media (min-width: 1200px) {
    body:not(.styles-404) .sp-page-builder h2 {
        font-size: 1.75rem;
    }

    body:not(.styles-404) .sp-page-builder h3 {
        font-size: 1.5rem;
    }
}