/* CITYLUXE additions, loaded after the Lavender Shore template CSS. Keep the template CSS itself untouched. */

/* Logo: ours is wider than the template's stacked mark */
.nav-brand { width: 150px; }
.brand-footer { width: 170px; }
.nav-logo, .logo-footer { height: auto; }

/* Draft builds: amber dot = fact still to confirm with the hotel */
.tbc-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: #f0a020;
  vertical-align: middle; position: relative; top: -1px; box-shadow: 0 0 0 3px rgba(240, 160, 32, .25); cursor: help; }

/* "Made by GEO AI" credit */
.geo-credit { display: inline-flex; align-items: center; gap: 6px; }
.geo-credit img { width: 18px; height: 18px; border-radius: 5px; display: block; }

/* Date fields: the whole field opens the native picker, the template's calendar icon stays visible */
input[type="date"].text-field, input[type="date"].text-field-form { position: relative; min-height: 1.4em; }
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Greek has wider letters than the condensed Latin headline fonts: loosen the tight tracking a little */
html[lang="el"] h1, html[lang="el"] h2, html[lang="el"] .text-h1, html[lang="el"] .text-h3, html[lang="el"] .text-h6 { letter-spacing: -.01em; }

/* room-card tags with our icons are drawn in the template accent colour already */
.room-card-tag img.icon-room-card-tag, .amenity-tile img.icon-amenity { width: 24px; height: 24px; }

/* footer credit line: keep the copyright and "Made by GEO AI" on one baseline */
.left-bottom-footer { align-items: center; }
.left-bottom-footer .link-footer { display: inline-flex; align-items: center; gap: 6px; }

/* contact cards and legal text: links keep the text colour (no browser blue) */
.contact-card-text a, .body-legal a { color: inherit; text-decoration: none; }
.contact-card-text a:hover, .body-legal a:hover { text-decoration: underline; }

/* the template uses <h1> for several section titles; we keep one real h1 per page and demote the rest to h2.as-h1 with the same look */
h2.as-h1 { font-family: var(--_text---h1--font-family); font-size: var(--_text---h1--font-size); line-height: var(--_text---h1--line-height);
  font-weight: var(--_text---h1--font-weight); letter-spacing: var(--_text---h1--letter-spacing); margin-top: 0; margin-bottom: 0; }

/* Metric-matched fallbacks: the system font is scaled to the web font's metrics so the swap does not move the layout (CLS).
   Latin fallbacks only cover Latin, Greek fallbacks only Greek, so each script still falls through to the right web font. */
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 103.25%; ascent-override: 93.95%; descent-override: 24.21%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Times");
  size-adjust: 84.64%; ascent-override: 116.97%; descent-override: 36.63%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Instrument Serif Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("Liberation Serif Italic"), local("Times New Roman");
  size-adjust: 84.64%; ascent-override: 116.97%; descent-override: 36.63%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "EB Garamond Fallback"; src: local("Times New Roman"), local("Liberation Serif"), local("Times");
  size-adjust: 88.43%; ascent-override: 113.88%; descent-override: 33.70%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "EB Garamond Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("Liberation Serif Italic"), local("Times New Roman");
  size-adjust: 88.43%; ascent-override: 113.88%; descent-override: 33.70%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 110.21%; ascent-override: 87.90%; descent-override: 21.89%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+0370-03FF, U+1F00-1FFF; }

/* Greek pages: one heading face and one text face. The theme's Instrument Serif and Instrument Sans have no Greek, so a Greek heading with a
   Latin word in it ("boutique", the room names) was set in two typefaces. Greek pages use EB Garamond and Inter for every character (both
   self-hosted with their Latin and Greek subsets); English pages keep the theme's pair. */
html[lang="el"] {
  --font--secondary: "EB Garamond", "EB Garamond Fallback", Georgia, serif;
  --font--main: "Inter", "Inter Fallback", system-ui, sans-serif;
}

/* Cookie banner (vanilla-cookieconsent, loaded by consent.js) in the site's colours. Accept and Reject are styled alike on purpose. */
html #cc-main {
  --cc-font-family: var(--font--main);
  --cc-bg: #fdfcfb; --cc-primary-color: #081c2b; --cc-secondary-color: #3b4753;
  --cc-modal-border-radius: 24px; --cc-btn-border-radius: 16px;
  --cc-btn-primary-bg: #081c2b; --cc-btn-primary-color: #fff; --cc-btn-primary-border-color: #081c2b;
  --cc-btn-primary-hover-bg: #492c57; --cc-btn-primary-hover-color: #fff; --cc-btn-primary-hover-border-color: #492c57;
  --cc-btn-secondary-bg: #e8e0f0; --cc-btn-secondary-color: #081c2b; --cc-btn-secondary-border-color: #e8e0f0;
  --cc-btn-secondary-hover-bg: #d7d3f8; --cc-btn-secondary-hover-color: #081c2b; --cc-btn-secondary-hover-border-color: #d7d3f8;
  --cc-toggle-on-bg: #492c57; --cc-toggle-off-bg: #6b6f78;
  --cc-separator-border-color: #ece7e1;
  --cc-cookie-category-block-bg: #f5f0ea; --cc-cookie-category-block-border: #f5f0ea;
  --cc-cookie-category-block-hover-bg: #ede6dd; --cc-cookie-category-block-hover-border: #ede6dd;
  --cc-cookie-category-expanded-block-hover-bg: #e6dfd5; --cc-section-category-border: #f5f0ea;
  --cc-footer-bg: #f5f0ea; --cc-footer-color: #3b4753; --cc-footer-border-color: #ece7e1;
  --cc-overlay-bg: rgba(8, 28, 43, .6);
}
.link-footer[data-cc] { cursor: pointer; }
html #cc-main .cm__btn, html #cc-main .pm__btn, html #cc-main .pm__close-btn { border-radius: 999px; }
html #cc-main .cm--inline .cm__btn-group { column-gap: .375rem; }          /* Accept and Reject exactly the same width: */
html #cc-main .cm--inline .cm__btn + .cm__btn { margin-left: 0; }          /* a gap instead of the library's margin */   /* pill buttons like the template's, calmer corners elsewhere */

/* Home map: the <picture> wrapper must not break the template's full-bleed image; the credit sits bottom right, above the next section's rounded overlap and clear of the centred nav pill */
.home-a-map-image picture { display: contents; }
.map-credit { position: absolute; right: 12px; bottom: 47px; z-index: 5; padding: 5px 4px; color: rgba(255, 255, 255, .55); font-size: 10px; line-height: 14px; text-decoration: none; }   /* 24 px high: WCAG 2.2 target size */
.map-credit:hover { color: #fff; text-decoration: underline; }

/* Home hero on phones. The template pins the hero (position: sticky) and slides the next section over it. A phone screen with its browser bars
   showing is shorter than the hero (headline, three stacked booking fields and the button), so the date fields sat under the fold, could
   never be scrolled up, and the next section simply covered them. Here the hero scrolls like any other section, so the booking bar can be
   moved up to where it is easy to reach (and clear of the native date picker), with room below it. The next section is still pulled up by its
   corner radius, so the rounded edge over the video stays. A phone held sideways is short but wide, hence the second condition. */
@media screen and (max-width: 767px), screen and (max-height: 640px) {
  .sticky-home-a { position: relative; margin-bottom: calc(var(--_spacing---radius--24) * -1); transform: none; will-change: auto; transform-style: flat; }
  .video-home-a { padding-bottom: 88px; }
}

/* Home hero: a photo of the hotel (pages.hero_photo) where the template had a stock background video. It covers the box the way the video
   did, under the template's own top and bottom gradients; a light navy wash over it keeps the white headline readable on a bright room. */
.hero-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.video-home-a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 28, 43, .32); pointer-events: none; }

/* Desktop nav from 992 px (below that the template shows its menu button) to 1365 px: the five pills on the left ran under the centred logo
   (on 2026-10-19 already, in English up to 1100 px and in Greek up to 1180 px; the plain names of 2026-10-21 are longer). Tighter pills there,
   and below 1200 px a slightly smaller logo. Checked every 16 px from 992 to 1440 in both languages. */
@media screen and (min-width: 992px) and (max-width: 1365px) {
  .nav-menu-inner { grid-column-gap: 6px; grid-row-gap: 6px; }
  .nav-menu-inner .nav-link { padding-left: 9px; padding-right: 9px; }
  .nav-menu-inner .button-text-small { font-size: 11px; letter-spacing: 1px; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav-menu-inner { grid-column-gap: 4px; grid-row-gap: 4px; }
  .nav-menu-inner .nav-link { padding-left: 7px; padding-right: 7px; }
  .nav-menu-inner .button-text-small { letter-spacing: .5px; }
  .navbar .nav-brand { width: 110px; }
}

/* Room cards: "Check rates" and "Learn more" are always visible. On desktops the template showed them only on mouse-over (Webflow interaction
   "Room Card / Hover", inline styles), which hid them from keyboard users and touch-screen laptops; tablets and phones already show them, so
   desktops get the same layout. */
@media screen and (min-width: 992px) {
  .button-wrap-room-card { position: static; display: flex !important; opacity: 1 !important; }
  .room-card-bottom-tile { transform: none !important; }
}

/* End of the page: the fixed nav pill covers roughly the last 80 px of the screen, so the footer keeps that much room below its logo and
   legal line (otherwise the pill sits on top of them when you reach the bottom) */
.footer { padding-bottom: 112px; }
@media screen and (max-width: 767px) { .footer { padding-bottom: 104px; } }

/* "How your stay works" (pages.stay_info): the hotel is automated, and guests are told who answers when. Cream panel with white cards inside, in the template's
   own colours and type; three sizes ("full" on Experience, "compact" on Home, "contact" under the Contact cards). */
.stay-info { margin-top: 48px; text-align: left; color: var(--_colors---color--dark); }
.stay-panel { background: var(--_colors---color--bg-2); border: 1px solid var(--_colors---color--dark-8); border-radius: var(--_spacing---radius--24); padding: 40px; display: grid; gap: 32px; }
.stay-head { display: grid; gap: 12px; align-content: start; }
.stay-label { color: var(--_colors---color--accent-2); }
.stay-title { margin: 0; font-family: var(--_text---h4--font-family); font-size: var(--_text---h4--font-size); line-height: var(--_text---h4--line-height);
  font-weight: var(--_text---h4--font-weight); letter-spacing: var(--_text---h4--letter-spacing); }
.stay-lead { margin: 0; max-width: 560px; color: var(--_colors---color--dark-64); font-size: 18px; line-height: 150%; }
.stay-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stay-step { background: #fff; border-radius: 16px; padding: 24px 20px; display: grid; gap: 8px; align-content: start; }
.stay-step-n { font-family: var(--font--secondary); font-size: 40px; line-height: 1; letter-spacing: -1px; color: var(--_colors---color--accent-1); }
.stay-step-t { margin: 0; font-family: var(--font--main); font-size: 20px; line-height: 120%; font-weight: var(--font-weight--medium); letter-spacing: -.4px; }
.stay-step-d { margin: 0; color: var(--_colors---color--dark-64); font-size: 15px; line-height: 150%; }
.stay-help { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.stay-help-item { background: #fff; border-radius: 16px; padding: 20px; display: grid; gap: 6px; align-content: start; }
.stay-help-l { color: var(--_colors---color--accent-2); }
.stay-help-v { font-family: var(--font--main); font-size: 22px; line-height: 120%; font-weight: var(--font-weight--medium); letter-spacing: -.6px; }
.stay-help-v a { color: inherit; text-decoration: none; }
.stay-help-v a:hover { text-decoration: underline; }
.stay-help-d { margin: 0; color: var(--_colors---color--dark-64); font-size: 14px; line-height: 145%; }
html[lang="el"] .stay-title { letter-spacing: -.01em; }
/* full: centred intro like the template's section headers */
.stay-full { margin-top: 0; }
.stay-full .stay-panel { padding: 56px 40px; gap: 40px; }
.stay-full .stay-head { justify-items: center; text-align: center; }
.stay-full .stay-title { font-family: var(--_text---h2--font-family); font-size: var(--_text---h2--font-size); line-height: var(--_text---h2--line-height);
  font-weight: var(--_text---h2--font-weight); letter-spacing: var(--_text---h2--letter-spacing); }
.stay-full .stay-lead { max-width: 640px; }
.stay-section { padding-top: 0; padding-bottom: 0; }
/* compact / contact: title and intro on the left, the three ways to reach us on the right */
.stay-compact .stay-panel, .stay-contact .stay-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.stay-contact { margin-top: 12px; }
/* one-liners: booking card on room pages, booking modal */
.stay-note { margin: 16px 0 0; color: var(--_colors---color--dark-64); font-size: 13px; line-height: 150%; }
.stay-note-link { color: inherit; text-decoration: underline; }
.footer-hours { margin-top: 4px; color: var(--_colors---color--dark-64); font-size: 14px; line-height: 140%; }
.footer-hours a { color: inherit; text-decoration: underline; }
@media screen and (max-width: 991px) {
  .stay-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stay-compact .stay-panel, .stay-contact .stay-panel { grid-template-columns: 1fr; gap: 28px; }
}
@media screen and (max-width: 767px) {
  .stay-info { margin-top: 32px; }
  .stay-panel { padding: 24px; gap: 24px; }
  .stay-full .stay-panel { padding: 32px 20px; }
  .stay-steps, .stay-help { grid-template-columns: 1fr; grid-auto-flow: row; }
  .stay-step { grid-template-columns: auto 1fr; column-gap: 16px; padding: 18px 16px; }
  .stay-step-n { grid-row: 1 / span 2; font-size: 32px; }
}

/* Top banner: the whole strip is a link that opens the booking pop-up, like the Book button */
.banner-link { color: inherit; text-decoration: none; }
.banner-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.banner-link:hover, .banner-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.banner-link:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }

/* Guest stories: the platform's logo (the template's own) links to its listing without changing the card's layout; a platform without a logo file
   shows its name in the same place, at the logos' size */
.story-top-tile > a.review-logo { display: flex; line-height: 0; }
.review-logo-text { display: flex; align-items: center; height: 32px; font-family: var(--font--main); font-size: 26px; font-weight: var(--font-weight--medium);
  letter-spacing: -1px; line-height: 1; color: var(--_colors---color--dark); }
/* the template's grey line under a guest's name is 3.2:1 on white; this keeps the look and reaches 5.2:1 (WCAG AA needs 4.5:1) */
.story-bottom-tile .label-small { color: var(--_colors---color--dark-64); }
/* Elena chat button (cityluxe.js). The site's own button: the Voiceflow widget loads only when it is clicked, then its round launcher
   takes over in the same place and size (48 px, 20 px from the right and the bottom), so nothing jumps. The label shows only where it
   clears the floating nav pill (centred, up to about 730 px wide in Greek); below that the button is the round icon. On phones under
   375 px the pill reaches the corner, so the button (and the widget, see cityluxe.js) sits above it. Under the floating nav (997)
   and the booking pop-up (998). */
.cl-chat { position: fixed; right: 20px; bottom: 20px; z-index: 996; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: var(--_colors---color--dark); color: #fff;
  font-family: var(--font--main); font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 16px var(--_colors---color--dark-8), 0 8px 24px var(--_colors---color--dark-8); }
.cl-chat[hidden] { display: none; }
.cl-chat svg { flex: none; }
.cl-chat-label { display: none; white-space: nowrap; }
.cl-chat:hover { background: #12324a; }
/* navy ring with a white gap: visible on light pages and over the dark videos */
.cl-chat:focus-visible { outline: 2px solid var(--_colors---color--dark); outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff, 0 4px 16px var(--_colors---color--dark-8), 0 8px 24px var(--_colors---color--dark-8); }
.cl-chat[aria-busy="true"] { cursor: progress; opacity: .8; }
/* home page (cityluxe.js): just above the hero's booking bar while the hero is pinned, out of the way while the bar scrolls past */
.cl-chat.cl-chat-lift { width: 48px; padding: 0; }
.cl-chat.cl-chat-lift .cl-chat-label { display: none; }
.cl-chat.cl-chat-away { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .cl-chat { transition: opacity .2s, visibility .2s; } }
@media (max-width: 374px) {
  .cl-chat { bottom: 82px; }
  .cl-chat-note { bottom: 142px; }
  .footer { padding-bottom: 150px; }        /* room for the lifted button / widget launcher (82 + 48 px) under "Cookie settings" */
}
@media (min-width: 1280px) {
  .cl-chat { width: auto; padding: 0 20px 0 14px; }
  .cl-chat-label { display: inline; }
}
.cl-chat-note { position: fixed; right: 20px; bottom: 80px; z-index: 996; max-width: min(320px, calc(100vw - 40px)); margin: 0; padding: 12px 16px;
  border-radius: 12px; background: #fff; color: var(--_colors---color--dark); font-size: 14px; line-height: 1.45;
  box-shadow: 0 4px 16px var(--_colors---color--dark-8), 0 8px 24px var(--_colors---color--dark-8); }
.cl-chat-note:empty { padding: 0; box-shadow: none; }       /* stays in the page as a live region, invisible until it has text */
.cl-chat-note a { color: inherit; text-decoration: underline; }