/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/* Marquee: tall enough for the full text (template clipped it at 100px) and lifted higher */
.marquee {
    height: 150px;
    margin-top: -90px;
}
@media (max-width: 767px) {
    .marquee { height: 100px; margin-top: -50px; font-size: 76px; }
}

/* Pinned-image overlay: softer than the template's 0.6 so the photo shows through */
.pinned-image__container-overlay {
    background: rgba(0, 0, 0, 0.3);
}

/* "Naxos around us" pager (Bootstrap carousel on white background) */
.naxos-pager { padding: 0 56px 56px; }
.naxos-pager .carousel-control-prev,
.naxos-pager .carousel-control-next { width: 44px; opacity: .9; }
.naxos-pager .carousel-control-prev-icon,
.naxos-pager .carousel-control-next-icon { filter: invert(1) grayscale(1); }
.naxos-pager .carousel-indicators { bottom: -8px; }
.naxos-pager .carousel-indicators [data-bs-target] {
    background-color: #222;
    width: 26px;
    height: 3px;
}
@media (max-width: 767px) {
    .naxos-pager { padding: 0 0 56px; }
    .naxos-pager .carousel-control-prev,
    .naxos-pager .carousel-control-next { display: none; }
}

/* Dropdown submenu (template has none) */
nav#mainNav ul li.has-submenu { position: relative; }
nav#mainNav ul li.has-submenu > ul.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    padding: 8px 0;
    margin: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: 6px;
    z-index: 99;
}
nav#mainNav ul li.has-submenu:hover > ul.submenu,
nav#mainNav ul li.has-submenu:focus-within > ul.submenu { display: block; }
nav#mainNav ul li.has-submenu > ul.submenu li { display: block; float: none; margin: 0; }
nav#mainNav ul li.has-submenu > ul.submenu li a {
    display: block;
    padding: 8px 20px;
    color: #222 !important;
    white-space: nowrap;
    text-align: left;
}
nav#mainNav ul li.has-submenu > ul.submenu li a:hover { opacity: .7; }
@media (max-width: 991px) {
    nav#mainNav ul li.has-submenu > ul.submenu {
        display: block;
        position: static;
        box-shadow: none;
        background: transparent;
        padding: 0 0 0 18px;
        min-width: 0;
    }
    nav#mainNav ul li.has-submenu > ul.submenu li a { color: inherit !important; padding: 6px 0; }
}

/* Gallery carousel: uniform height, natural aspect (portraits stay narrow), clickable slides */
.carousel_item_centered .item img {
    height: 480px;
    object-fit: cover;
    display: block;
}
.carousel_item_centered .item.is-portrait img { width: 320px; }
.carousel_item_centered .item.is-landscape img { width: 720px; }
.carousel_item_centered .item a {
    display: block;
    cursor: pointer;
}
@media (max-width: 991px) {
    .carousel_item_centered .item img { height: 340px; }
    .carousel_item_centered .item.is-portrait img { width: 227px; }
    .carousel_item_centered .item.is-landscape img { width: 510px; }
}
@media (max-width: 575px) {
    .carousel_item_centered .item img { height: 240px; }
    .carousel_item_centered .item.is-portrait img { width: 160px; }
    .carousel_item_centered .item.is-landscape img { width: 360px; }
}

/* Static map (image linking to Google Maps) */
.static-map { position: relative; }
.static-map a { display: block; }
.static-map img { width: 100%; height: 450px; object-fit: cover; display: block; }
.static-map .map-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,.95);
    color: #222;
    padding: 12px 22px;
    border-radius: 30px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    white-space: nowrap;
}
.static-map .map-attribution {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 11px;
    background: rgba(255,255,255,.8);
    padding: 1px 6px;
    border-radius: 3px;
}
.static-map .map-attribution a { color: inherit; text-decoration: underline; }

/* Floating contact bubble (bottom-right) */
.contact-bubble {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.contact-bubble .cb-toggle {
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(0,0,0,.28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.contact-bubble .cb-toggle:hover { transform: scale(1.06); }
.contact-bubble .cb-action {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    opacity: 0;
    transform: translateY(14px) scale(.6);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}
.contact-bubble.open .cb-action {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
/* Hover-open only where a real pointer exists; on touch the tap toggles .open */
@media (hover: hover) {
    .contact-bubble:hover .cb-action {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
}
.contact-bubble .cb-action:nth-of-type(1) { transition-delay: .1s; }
.contact-bubble .cb-action:nth-of-type(2) { transition-delay: .05s; }
.contact-bubble .cb-action:nth-of-type(3) { transition-delay: 0s; }
.contact-bubble .cb-call { background: #2f6fb2; }
.contact-bubble .cb-email { background: #b08d3f; }
.contact-bubble .cb-whatsapp { background: #25d366; }
.contact-bubble .cb-action:hover { color: #fff; filter: brightness(1.08); }

/* Boat icon (no bundled icon-font glyph for boat/ship/sail/ferry/anchor exists,
   so a small inline-SVG sailboat is used instead, matching .box_facilities i sizing/color) */
i.svg-boat-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23978667' d='M11.25 2h1.5v12.25H19c.5 0 .74.62.37.96L14 20V2.9c0-.5.4-.9.9-.9h.35zM11.25 6.5v7.75H7l4.25-7.75zM3.3 16.25h17.4c.55 0 .9.6.62 1.08l-1.55 2.68c-.4.68-1.13 1.1-1.92 1.1H6.15c-.79 0-1.52-.42-1.92-1.1L2.68 17.33a.72.72 0 0 1 .62-1.08z'/%3E%3C/svg%3E");
}
.box_facilities.white i.svg-boat-icon,
.white i.svg-boat-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ebd7b2' d='M11.25 2h1.5v12.25H19c.5 0 .74.62.37.96L14 20V2.9c0-.5.4-.9.9-.9h.35zM11.25 6.5v7.75H7l4.25-7.75zM3.3 16.25h17.4c.55 0 .9.6.62 1.08l-1.55 2.68c-.4.68-1.13 1.1-1.92 1.1H6.15c-.79 0-1.52-.42-1.92-1.1L2.68 17.33a.72.72 0 0 1 .62-1.08z'/%3E%3C/svg%3E");
}

/* Align the inline-SVG icon exactly like the font icons in .box_facilities:
   font glyphs occupy a ~1.226em line box (76px at 62px font-size), so give
   the SVG the same box and seat the drawing toward the baseline. */
.box_facilities i.svg-boat-icon {
    display: inline-block;
    height: 1.468em;
    width: 1em;
    vertical-align: baseline;
    background-size: 0.95em 0.95em;
    background-position: center bottom 0.2em;
    margin-bottom: 0;
}

/* Cookie banner */
.cookie-banner {
    position: fixed;
    left: 22px;
    bottom: 22px;
    right: 100px;
    max-width: 620px;
    z-index: 998;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.cookie-banner p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.5; }
.cookie-banner p a { text-decoration: underline; }
.cookie-banner .cookie-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-banner .btn_1 { padding: 8px 18px; font-size: 13px; }
@media (max-width: 575px) {
    .cookie-banner { left: 12px; right: 12px; bottom: 92px; }
}

/* GDPR click-to-load map placeholder */
.map-consent { background: #ece7df; }
.map-consent__placeholder {
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 20px;
}
.map-consent__placeholder i { font-size: 44px; color: #978667; }
.map-consent__placeholder h3 { margin: 0; }
.map-consent__placeholder p { max-width: 480px; font-size: 14px; }
.map-consent__placeholder .btn_1 { margin-top: 8px; }

/* Hamburger: pull away from the screen edge */
.hamburger_2 { margin-right: 12px; }

/* Footer dev credit */
.copy .dev-credit { white-space: nowrap; }

/* Accessibility: contrast bumps for small text flagged by Lighthouse */
.title small { color: #7c6c4e; }
.nav-tabs .nav-link:not(.active) { color: #555; }
.easepick-wrapper .dayname, .calendar .daynames-row .dayname { color: #5c5c5c !important; }

/* Hero images wrapped in <picture> (mobile/desktop art direction):
   mirror the theme's .jarallax > .jarallax-img rule one level deeper */
.jarallax > picture > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* ---- Mobile/tablet compactness: shorter sections, no dead vertical space ---- */
@media (max-width: 991px) {
    /* Tighter section rhythm than the theme's 90/65 */
    .margin_120_95 { padding-top: 70px; padding-bottom: 50px; }
    /* Parallax banners: statement, not a full screen */
    .pinned-image--medium { height: 45vh; min-height: 320px; }
    /* Apartment carousels: 4:3 crop instead of full-width natural height */
    #rooms .carousel_item_1 .item img { aspect-ratio: 4 / 3; object-fit: cover; }
    #rooms .row_list_version_2.mt-5 { margin-top: 2.5rem !important; }
}
@media (max-width: 767px) {
    .marquee { display: none; }
    /* Facility cards render two-up on phones: scale type and icons to fit */
    .box_facilities { padding: 0 8px 18px 8px; }
    .box_facilities i { font-size: 2.375rem; }
    .box_facilities h3 { font-size: 1rem; }
    .box_facilities p { font-size: 0.8125rem; line-height: 1.45; }
}


/* Apartment cards: a flush continuation of the photo, not a floating card on top
   (the theme pulls .box_item_info over the carousel with negative margins) */
.row_list_version_2 .box_item_info {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ---- Apartment rows read as ONE card: photo + info share a surface ---- */
#rooms .row_list_version_2 .row {
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}
#rooms .row_list_version_2 .rounded-img,
#rooms .row_list_version_2 .rounded-img img,
#rooms .row_list_version_2 .owl-item,
#rooms .row_list_version_2 .owl-stage-outer {
    border-radius: 0 !important;
}
.row_list_version_2 .box_item_info { box-shadow: none; }

.apt-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.apt-toggle {
    display: none;
    border: none;
    background: none;
    color: #978667;
    font-size: 1.5rem;
    line-height: 1;
    padding: 4px 6px;
}
.apt-toggle i {
    display: inline-block;
    transition: transform 0.3s ease;
}
.box_item_info.open .apt-toggle i { transform: rotate(180deg); }

@media (max-width: 991px) {
    .apt-toggle { display: inline-flex; }
    .apt-head { cursor: pointer; }
    .apt-details { display: none; }
    .box_item_info.open .apt-details { display: block; padding-top: 14px; }
    .row_list_version_2 .box_item_info { padding: 18px 22px; }
    .row_list_version_2 .box_item_info h2 { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .apt-toggle i { transition: none; }
}


/* ---- Forms: honeypot, inline alerts, secondary Booking link ---- */
.hp-field {
    position: absolute !important;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.form-alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 18px;
    line-height: 1.5;
}
.form-alert.success {
    background: #eef7ee;
    border: 1px solid #bfe0bf;
    color: #1e4a1a;
}
.form-alert.error {
    background: #fbeeee;
    border: 1px solid #eac3c3;
    color: #742020;
}
.form-alert a { color: inherit; text-decoration: underline; }
.apt-alt-link {
    margin-top: 10px;
    font-size: 0.875rem;
}
.apt-alt-link a { color: #5f5f5f; text-decoration: underline; }

/* Reduced motion: the ambient zoom/parallax effects stop entirely */
@media (prefers-reduced-motion: reduce) {
    .kenburns, .kenburns-2, .kenburns-3, .kenburns-4 { animation: none !important; }
}

/* Floating labels: the theme's .booking_wrapper placeholder color outranks
   Bootstrap's transparent placeholder, so label + placeholder rendered doubled */
.booking_wrapper .form-floating > .form-control::placeholder,
.contacts_wrapper .form-floating > .form-control::placeholder {
    color: transparent !important;
}
.booking_wrapper .form-floating > .form-control::-moz-placeholder,
.contacts_wrapper .form-floating > .form-control::-moz-placeholder {
    color: transparent !important;
}