/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   BLUE DOLPHIN (Αίγινα) — DESIGN TOKENS
   Single source of truth for colors used across header, footer, hero,
   and content components. Change a value here once instead of hunting
   hardcoded hex codes.

   Deliberately DISTINCT from other client sites (Caviro: dark teal +
   gold; Limneo Kerkini: forest green/wood-tones) — same technical
   methodology, own visual identity.
   ========================================================================== */

:root {
  /* --- Values below are EXACT conversions from the real Lovable-generated
     OKLCH values (see bluedolphin-lovable-source.css for the originals),
     not estimates from a screenshot. --- */

  --bd-dark: #193a56;              /* navy: oklch(0.339 0.062 246) */
  --bd-dark-soft: rgba(25, 58, 86, 0.28);
  --bd-dark-soft-scrolled: rgba(25, 58, 86, 0.44);
  --bd-dropdown-bg: rgba(18, 42, 62, 0.92);

  --bd-pistachio: #919c76;         /* pistachio: oklch(0.673 0.055 121) */
  --bd-pistachio-hover: #a8b38e;   /* pistachio-hover: oklch(0.749 0.053 121) */

  --bd-terracotta: #d58755;        /* terracotta: oklch(0.694 0.117 52) */
  --bd-terracotta-hover: #e29f70;  /* terracotta-hover: oklch(0.756 0.101 55) */

  --bd-ivory: #faf8f2;             /* ivory: oklch(0.978 0.008 92) */
  --bd-sand: #f0ebdf;              /* sand: oklch(0.941 0.017 87) */
  --bd-stone: #e1ddd4;             /* stone: oklch(0.897 0.012 85) */
  --bd-charcoal: #2c2825;          /* foreground: oklch(0.28 0.008 60) */
  --bd-muted-text: #68625c;        /* muted-foreground: oklch(0.5 0.012 70) */
  --bd-border: #ddd9cf;            /* border: oklch(0.885 0.014 85) */

  --bd-text-on-dark: #ffffff;
  --bd-text-on-dark-soft: rgba(255, 255, 255, 0.85);
  --bd-text-on-dark-mid: rgba(255, 255, 255, 0.8);
  --bd-text-on-dark-faint: rgba(255, 255, 255, 0.5);

  --bd-border-on-dark: rgba(255, 255, 255, 0.22);
  --bd-border-on-dark-soft: rgba(255, 255, 255, 0.14);

  --bd-glass-blur: blur(22px) saturate(160%);
  --bd-glass-blur-mobile: blur(12px) saturate(140%);
  --bd-dropdown-blur: blur(16px);

  --bd-overlay-strong: rgba(25, 58, 86, 0.55);
  --bd-overlay-mid: rgba(25, 58, 86, 0.25);
  --bd-overlay-soft: rgba(25, 58, 86, 0.15);
  --bd-fade-target: #faf8f2; /* matches --bd-ivory */

  --bd-body-font-size: clamp(16px, 1.8vw, 18px);
  --bd-card-radius: 18px;

  /* --- Typography, straight from the Lovable source --- */
  --bd-font-serif: "Cormorant Garamond", Georgia, serif;
  --bd-font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
}

/* ==========================================================================
   BLUE DOLPHIN — CUSTOM HEADER
   Same glassmorphism approach as Caviro's header, ported to bd-* tokens.
   ========================================================================== */

.bd-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  height: 40px;
  background: var(--bd-dark);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.bd-topbar__inner {
  max-width: 1320px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.bd-topbar__info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.bd-topbar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bd-text-on-dark-mid);
  font-size: clamp(12px, 1vw, 13px);
  text-decoration: none;
}

a.bd-topbar__item:hover {
  color: var(--bd-terracotta-hover);
}

.bd-topbar__book {
  background: var(--bd-pistachio);
  color: #ffffff !important;
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: transform 0.2s ease, background 0.2s ease;
}

.bd-topbar__book:hover {
  background: var(--bd-pistachio-hover);
  transform: translateY(-1px);
}

body.bd-header-scrolled .bd-topbar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 620px) {
  .bd-topbar__location {
    display: none;
  }
}

.bd-custom-header {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 1320px);
  z-index: 9000;
  background: var(--bd-dark-soft);
  backdrop-filter: var(--bd-glass-blur);
  -webkit-backdrop-filter: var(--bd-glass-blur);
  border: 1px solid var(--bd-border-on-dark);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(10, 25, 38, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: top 0.35s ease, width 0.35s ease, border-radius 0.35s ease,
              background 0.35s ease, box-shadow 0.35s ease;
}

body.bd-header-scrolled .bd-custom-header {
  top: 0;
  width: 100%;
  border-radius: 0 0 8px 8px;
  background: var(--bd-dark-soft-scrolled);
  box-shadow: 0 8px 24px rgba(10, 25, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

@media (max-width: 768px) {
  .bd-custom-header {
    backdrop-filter: var(--bd-glass-blur-mobile);
    -webkit-backdrop-filter: var(--bd-glass-blur-mobile);
  }
}

body.admin-bar .bd-topbar { top: 32px; }
body.admin-bar .bd-custom-header { top: calc(54px + 32px); }
body.admin-bar.bd-header-scrolled .bd-topbar { top: 32px; }
body.admin-bar.bd-header-scrolled .bd-custom-header { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .bd-topbar { top: 46px; }
  body.admin-bar .bd-custom-header { top: calc(54px + 46px); }
  body.admin-bar.bd-header-scrolled .bd-custom-header { top: 46px; }
}

.bd-custom-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 24px;
}

.bd-custom-header__logo {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  padding: 6px 14px;
  flex-shrink: 0;
}

.bd-custom-header__logo img {
  height: 52px;
  width: auto;
  display: block;
  transition: height 0.25s ease;
}

body.bd-header-scrolled .bd-custom-header__logo img {
  height: 56px;
}

.bd-custom-menu {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--bd-font-sans);
}

.bd-custom-menu > li {
  position: relative;
}

.bd-custom-menu > li > a {
  color: var(--bd-text-on-dark);
  text-decoration: none;
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 600;
  transition: color 0.15s ease;
}

.bd-custom-menu > li > a:hover {
  color: var(--bd-pistachio-hover);
}

.bd-custom-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  min-width: 220px;
  background: var(--bd-dropdown-bg);
  backdrop-filter: var(--bd-dropdown-blur);
  border: 1px solid var(--bd-border-on-dark-soft);
  border-radius: 6px;
  padding: 8px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.bd-custom-menu .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bd-custom-menu .sub-menu li a {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  color: var(--bd-text-on-dark-soft);
  font-size: clamp(13px, 1vw, 14px);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.bd-custom-menu .sub-menu li a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--bd-pistachio-hover);
}

/* Desktop submenu arrow */
@media (min-width: 861px) {
  .bd-custom-menu .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .bd-custom-menu .menu-item-has-children > a::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .bd-custom-menu .menu-item-has-children:hover > a::after {
    transform: rotate(225deg);
  }
}

.bd-lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}

.bd-lang-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bd-text-on-dark-soft);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.bd-lang-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.bd-lang-item.is-active {
  background: var(--bd-pistachio);
  color: #ffffff;
}

.bd-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.bd-mobile-toggle:hover{
      background-color: transparent !important;
}

.bd-mobile-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--bd-text-on-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.bd-custom-header.is-open .bd-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bd-custom-header.is-open .bd-mobile-toggle span:nth-child(2) { opacity: 0; }
.bd-custom-header.is-open .bd-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .bd-mobile-toggle {
    display: flex;
    margin-left: auto; /* same fix as Caviro: keeps toggle+switcher grouped right, not centered */
  }

  .bd-custom-nav {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: var(--bd-dropdown-bg);
    backdrop-filter: var(--bd-dropdown-blur);
    border-radius: 8px;
    border: 1px solid var(--bd-border-on-dark-soft);
    padding: 16px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }

  .bd-custom-header.is-open .bd-custom-nav {
    max-height: 80vh;
    opacity: 1;
    overflow-y: auto;
  }

  .bd-custom-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .bd-custom-menu > li { width: 100%; }
  .bd-custom-menu > li > a { display: block; padding: 10px 4px; }

  .bd-custom-menu .menu-item-has-children { position: relative; }
  .bd-custom-menu .menu-item-has-children > a { padding-right: 30px !important; }

    .bd-submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 40px; /* όσο και το ύψος του link — μεγάλο, πατήσιμο hit area */
    cursor: pointer;
    z-index: 2;
  }

  .bd-submenu-toggle::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg);
    transition: transform 0.2s ease, border-color 0.15s ease;
  }

  .menu-item-has-children.is-expanded .bd-submenu-toggle::after {
    transform: rotate(225deg);
    top: 19px;
  }

  .bd-custom-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    margin: 4px 0 4px 12px;
    background: rgba(255, 255, 255, 0.05);
  }

  .bd-custom-menu .menu-item-has-children.is-expanded .sub-menu {
    display: block;
  }
}

/* ==========================================================================
   BLUE DOLPHIN — FOOTER
   Same 3-column layout pattern as Caviro (minus the FAQ accordion column —
   not requested yet), ported to bd-* tokens.
   ========================================================================== */

.bd-new-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 992px) {
  .bd-new-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .bd-new-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.bd-footer-logo {
  margin-bottom: 16px;
  width: 180px;
  max-width: 100%;
  height: auto;
}

.bd-footer-brand-text {
  color: var(--bd-text-on-dark-soft);
  margin-bottom: 20px;
  line-height: 1.6;
  font-size: clamp(13.5px, 1.1vw, 14.5px);
}

.bd-new-footer .bd-footer-heading {
  margin: 0 0 20px;
  font-family: var(--bd-font-serif);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.1;
  font-weight: 500;
  color: #ffffff;
  position: relative;
  padding-bottom: 14px;
}

.bd-new-footer .bd-footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--bd-terracotta);
}

.bd-footer-socials {
  display: flex;
  gap: 12px;
}

.bd-social-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.bd-social-badge svg {
  width: 18px;
  height: 18px;
}

.bd-social-badge:hover {
  border-color: var(--bd-text-on-dark) !important;
  transform: translateY(-3px);
}

.bd-footer-info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bd-footer-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.bd-footer-info-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color:var(--bd-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-footer-info-text {
  color: var(--bd-text-on-dark-soft);
  line-height: 1.5;
  padding-top: 5px;
  font-size: clamp(13.5px, 1.1vw, 14.5px);
}

.bd-new-footer .bd-footer-info-text a {
  color: var(--bd-text-on-dark-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.bd-new-footer .bd-footer-info-text a:hover {
  color: var(--bd-text-on-dark) !important;
}

.bd-footer-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bd-footer-linklist li {
  margin-bottom: 12px;
}

.bd-new-footer .bd-footer-linklist a {
  color: var(--bd-text-on-dark-soft);
  text-decoration: none;
  font-size: clamp(13.5px, 1.1vw, 14.5px);
  transition: color 0.15s ease;
}

.bd-new-footer .bd-footer-linklist a:hover {
  color: var(--bd-text-on-dark) !important;
  text-decoration: underline;
}

.bd-footer-legal-row {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 24px;
  margin-top: 20px;
}

.bd-footer-legal-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: clamp(0.76rem, 0.7vw, 0.82rem);
  color: var(--bd-text-on-dark-faint);
}

.bd-footer-powered a {
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   BLUE DOLPHIN — HERO SHELL
   Same structural approach as Caviro's hero, ported to bd-* tokens with
   the editorial serif/sans pairing from the Lovable source instead of
   Caviro's single sans-serif treatment.
   ========================================================================== */

.bd-hero-shell {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bd-hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--bd-overlay-strong) 0%,
    var(--bd-overlay-mid) 45%,
    var(--bd-overlay-soft) 100%);
  z-index: 0;
  pointer-events: none;
}

.bd-hero-minimal,
.bd-scroll-down {
  position: relative;
  z-index: 1;
}

.bd-hero-minimal {
  position: relative;
  z-index: 20;
  max-width: 760px;
  /* Aligns with the same left inset the fixed header uses for the logo:
     header width is min(86%, 1320px), centered, with 24px inner padding.
     Using the identical formula here (instead of an unrelated clamp())
     keeps the hero title's left edge locked to the logo's left edge at
     every viewport size, including very large (4K+) screens. */
  margin-left: calc((100% - min(86%, 1320px)) / 2 + 24px);
  margin-right: 0;
  padding-top: 140px;
  padding-right: 20px;
  color: #ffffff;
}

.bd-breadcrumbs {
  margin-bottom: 16px;
  font-size: clamp(11.5px, 1vw, 12.5px);
  font-family: var(--bd-font-sans);
}

.bd-breadcrumbs a,
.bd-breadcrumbs span {
  color: rgba(255, 255, 255, 0.6);
}

.bd-breadcrumbs a {
  text-decoration: none;
  transition: color 0.15s ease;
}

.bd-breadcrumbs a:hover {
  color: var(--bd-terracotta-hover);
}

.bd-breadcrumbs .separator {
  margin: 0 6px;
  color: rgba(255, 255, 255, 0.4);
}

.bd-breadcrumbs .last {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.bd-hero-tag {
  display: inline-block;
  font-family: var(--bd-font-sans);
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: 600;
  letter-spacing: 0.22em; /* wider tracking, matches the Lovable "eyebrow" utility */
  text-transform: uppercase;
  color: var(--bd-text-on-dark-soft);
  margin-bottom: 22px;
}

.bd-hero-minimal h1 {
  font-family: var(--bd-font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 20px;
}

.bd-hero-minimal p {
  font-family: var(--bd-font-sans);
  margin: 0 0 34px;
  max-width: 640px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
}

.bd-scroll-down {
  position: absolute;
  left: 50%;
  bottom: clamp(50px, 6vh, 80px);
  transform: translate(-50%, 0);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--bd-font-sans);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(11px, 0.9vw, 12px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  opacity: 0;
  animation: bd-emerge 1.4s ease-out 0.8s forwards;
}

@keyframes bd-emerge {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.bd-scroll-down__arrow {
  display: inline-block;
  margin-top: 4px;
  animation: bdBounce 1.8s infinite ease-in-out;
}

@keyframes bdBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.bd-scroll-down:hover {
  color: var(--bd-terracotta-hover);
}

.bd-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 260px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(250, 248, 242, 0) 0%,
    rgba(250, 248, 242, .03) 30%,
    rgba(250, 248, 242, .12) 55%,
    rgba(250, 248, 242, .35) 75%,
    rgba(250, 248, 242, .68) 90%,
    var(--bd-fade-target) 100%);
}

@media (max-width: 900px) {
  .bd-hero-shell {
      min-height: 54vh;
  }
}

@media (max-width: 600px) {
  .bd-hero-shell {
    padding: 110px 24px 80px;
    min-height: 480px;
  }
  .bd-hero-minimal {
    /* .bd-hero-shell already provides 24px of side padding at this
       breakpoint — zeroing these out here avoids stacking a second,
       unrelated left inset on top of it, which was causing the
       excess left margin on mobile. */
    margin-left: 0;
    max-width: 100%;
    padding-right: 0;
  }
  .bd-scroll-down {
    bottom: 36px;
  }
}

/* ==========================================================================
   BLUE DOLPHIN — CONTACT PAGE
   Same contact-cards + form layout as Caviro's Contact page.
   ========================================================================== */

.bd-contact-wrap {
  padding: 70px 24px;
  background: var(--bd-ivory);
}

.bd-contact-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 32px;
  align-items: stretch;
}

.bd-contact-side,
.bd-contact-form-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bd-contact-list {
  flex: 1;
}

@media (max-width: 900px) {
  .bd-contact-grid {
    grid-template-columns: 1fr;
  }
  .bd-contact-side,
  .bd-contact-form-card {
    height: auto;
  }
}

.bd-contact-side__title {
  font-family: var(--bd-font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.3vw, 30px);
  color: var(--bd-dark);
  margin: 0 0 10px;
}

.bd-contact-side__text {
  font-family: var(--bd-font-sans);
  font-size: var(--bd-body-font-size);
  color: var(--bd-muted-text);
  line-height: 1.6;
  margin: 0 0 24px;
}

.bd-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bd-contact-card {
  display: block;
  padding: 16px 18px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  background: #ffffff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bd-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(25, 58, 86, 0.08);
}

.bd-contact-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.bd-contact-card__icon {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1;
}

.bd-contact-card__name {
  font-family: var(--bd-font-sans);
  font-weight: 700;
  font-size: clamp(14px, 1.1vw, 15px);
  color: var(--bd-dark);
}

#cmplz-document p{font-size: clamp(14px, 1.1vw, 15px);}

.bd-contact-card__label {
  font-family: var(--bd-font-sans);
  margin: 0 0 8px;
  font-size: clamp(12.5px, 1vw, 13.5px);
  color: var(--bd-charcoal);
}

.bd-contact-card__cta {
  font-family: var(--bd-font-sans);
  font-size: clamp(11px, 0.9vw, 12px);
  color: var(--bd-muted-text);
}

.bd-contact-card--book { border-left-color: var(--bd-pistachio); }
.bd-contact-card--book .bd-contact-card__icon { color: var(--bd-pistachio); }
.bd-contact-card--call { border-left-color: var(--bd-terracotta); }
.bd-contact-card--location { border-left-color: var(--bd-dark); }
.bd-contact-card--email { border-left-color: var(--bd-stone); }

.bd-contact-side__footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bd-border);
  font-family: var(--bd-font-sans);
  font-size: clamp(11.5px, 1vw, 12.5px);
  color: var(--bd-muted-text);
  line-height: 1.6;
}

.bd-contact-form-card {
  background: #ffffff;
  border-radius: 6px;
  padding: 0;
  margin: 0;
  box-shadow: 0 12px 28px rgba(25, 58, 86, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.bd-contact-form-card > * {
  width: 100%;
  margin: 0;
  padding: 0;
}

.bd-contact-form-card__title {
  font-family: var(--bd-font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.3vw, 30px);
  color: var(--bd-dark);
  padding: 34px 34px 0 !important;
}

#cmplz-document h2{
  font-size: clamp(24px, 2.3vw, 30px);
}

.bd-contact-form-card__text {
  font-family: var(--bd-font-sans);
  font-size: var(--bd-body-font-size);
  color: var(--bd-muted-text);
  line-height: 1.6;
  padding: 8px 34px 24px !important;
}

.bd-map-wrap {
  padding: 0 24px 70px;
  background: var(--bd-ivory);
}

.bd-map-inner {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
}

/* ==========================================================================
   BLUE DOLPHIN — SIGHTSEEING/ACTIVITIES PAGE
   Reuses the same two component patterns as Caviro: card grid (for short,
   homogeneous items) + alternating spotlight cards (for richer content).
   ========================================================================== */

.bd-intro-wrap {
  padding: 70px 24px 10px;
  text-align: center;
}

.bd-intro-title {
  font-family: var(--bd-font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  color: var(--bd-dark);
  margin: 0;
}

.bd-intro-subtitle {
  font-family: var(--bd-font-sans);
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--bd-muted-text);
  margin: 8px 0 0;
}

/* --- Card grid (Αξιοθέατα & Εκδρομές) --- */

.bd-cards-wrap {
  padding: 0 24px 60px;
}

.bd-cards-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.bd-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 640px) {
  .bd-cards-grid {
    grid-template-columns: 1fr;
  }
}

.bd-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.4;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 24px rgba(25, 58, 86, 0.08);
}

.bd-card__zoom {
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease, filter 0.4s ease;
  z-index: 0;
}

.bd-card:hover .bd-card__zoom {
  transform: scale(1.06);
  filter: brightness(0.6);
}

.bd-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25,58,86,0) 40%, rgba(25,58,86,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.bd-card__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 20px 22px;
  color: #ffffff;
}

.bd-card__title {
  font-family: var(--bd-font-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.3;
  margin: 0 0 6px;
  color: #ffffff;
}

.bd-card__extra {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}

.bd-card:hover .bd-card__extra {
  max-height: 180px;
  opacity: 1;
  margin-top: 8px;
}

.bd-card__text {
  font-family: var(--bd-font-sans);
  font-size: clamp(13px, 1.1vw, 14px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 8px;
}

.bd-card__distance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--bd-font-sans);
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: 600;
  color: var(--bd-terracotta-hover);
}

/* --- Alternating spotlight cards (Ταξίδια / Δραστηριότητες) --- */

.bd-spotlight-wrap {
  padding: 10px 24px 60px;
}

.bd-spotlight-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.bd-spotlight-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.bd-spotlight-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(25, 58, 86, 0.08);
  background: #ffffff;
}

@media (max-width: 768px) {
  .bd-spotlight-card {
    grid-template-columns: 1fr;
  }
}

.bd-spotlight-card--reverse .bd-spotlight-image {
  order: 2;
}
.bd-spotlight-card--reverse .bd-spotlight-content {
  order: 1;
}

@media (max-width: 768px) {
  .bd-spotlight-card--reverse .bd-spotlight-image,
  .bd-spotlight-card--reverse .bd-spotlight-content {
    order: initial;
  }
}

.bd-spotlight-image {
  background-size: cover;
  background-position: center;
  min-height: 260px;
}

/* Two-photo variant — for activities that had 2 source images */
.bd-spotlight-image--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: none;
}

.bd-spotlight-image--split > div {
  background-size: cover;
  background-position: center;
}

.bd-spotlight-content {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bd-spotlight-tag {
  font-family: var(--bd-font-sans);
  font-size: clamp(10.5px, 0.9vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bd-terracotta);
  margin-bottom: 10px;
}

.bd-spotlight-title {
  font-family: var(--bd-font-serif);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 25px);
  color: var(--bd-dark);
  margin: 0 0 12px;
}

.bd-spotlight-text {
  font-family: var(--bd-font-sans);
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.7;
  color: var(--bd-charcoal);
  margin: 0 0 10px;
}

.bd-spotlight-info {
  font-family: var(--bd-font-sans);
  font-size: clamp(11.5px, 1vw, 12.5px);
  color: var(--bd-muted-text);
  margin-top: 4px;
}

.bd-spotlight-video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bd-font-sans);
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 600;
  color: var(--bd-pistachio);
  text-decoration: none;
  margin-top: 8px;
}

.bd-spotlight-video-link:hover {
  color: var(--bd-pistachio-hover);
}

div#wpforms-67, div#wpforms-88{
  width: 85% !important;
}

/* ==========================================================================
   BLUE DOLPHIN — EDITORIAL BENTO GRID
   Replaces the alternating-rows spotlight pattern for Ταξίδια/Δραστηριότητες
   — asymmetric grid (one large "feature" tile + smaller supporting tiles),
   large index numbers, minimal chrome. More editorial/magazine, less
   "generic hotel template" than uniform alternating rows.
   ========================================================================== */

.bd-bento-wrap {
  padding: 10px 24px 70px;
}

.bd-bento-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.bd-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 320px 220px;
  gap: 16px;
}

.bd-bento-item {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}

.bd-bento-item--large {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.bd-bento-item--wide {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

.bd-bento-item--small {
  grid-column: span 1;
  grid-row: 2 / 3;
}

@media (max-width: 900px) {
  .bd-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .bd-bento-item--large { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16/9; }
  .bd-bento-item--wide { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16/9; }
  .bd-bento-item--small { grid-column: span 1; grid-row: auto; aspect-ratio: 4/3; }
}

@media (max-width: 560px) {
  .bd-bento-grid {
    grid-template-columns: 1fr;
  }
  .bd-bento-item--large,
  .bd-bento-item--wide,
  .bd-bento-item--small {
    grid-column: 1 / 2;
    aspect-ratio: 4/3;
  }
}

.bd-bento-item__zoom {
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease, filter 0.4s ease;
}

.bd-bento-item:hover .bd-bento-item__zoom {
  transform: scale(1.05);
  filter: brightness(0.55);
}

.bd-bento-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25,58,86,0) 35%, rgba(25,58,86,0.88) 100%);
  z-index: 1;
  pointer-events: none;
}

.bd-bento-item__index {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 2;
  font-family: var(--bd-font-serif);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
}

.bd-bento-item__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 20px 22px;
  color: #ffffff;
}

.bd-bento-item--large .bd-bento-item__content {
  padding: 30px;
}

.bd-bento-item__title {
  font-family: var(--bd-font-serif);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.25;
  margin: 0 0 6px;
  color:var(--bd-text-on-dark);
}

.bd-bento-item--large .bd-bento-item__title {
  font-size: clamp(24px, 2.6vw, 32px);
}

.bd-bento-item__text {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
  font-family: var(--bd-font-sans);
  font-size: clamp(12.5px, 1.1vw, 14px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.bd-bento-item:hover .bd-bento-item__text {
  max-height: 160px;
  opacity: 1;
  margin-top: 8px;
}

.bd-bento-item__meta {
  display: block;
  margin-top: 6px;
  font-family: var(--bd-font-sans);
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: 600;
  color: var(--bd-terracotta-hover);
}

/* ==========================================================================
   BLUE DOLPHIN — VILLAGE PAGE (Vagia)
   Access-card pairs, fact pills, and a literary spotlight block for the
   Zorz Sarri connection. (Gallery is handled separately via Modula.)
   ========================================================================== */

.bd-about-wrap {
  padding: 60px 24px 30px;
}

.bd-about-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.bd-about-inner p {
  font-family: var(--bd-font-sans);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.8;
  color: var(--bd-charcoal);
  margin: 0 0 20px;
}

/* --- Access-card pair (Πρόσβαση + Υγρότοπος) --- */

.bd-access-wrap {
  padding: 10px 24px 60px;
}

.bd-access-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 700px) {
  .bd-access-inner { grid-template-columns: 1fr; }
}

.bd-access-card {
  background: var(--bd-sand);
  border-radius: 8px;
  padding: 28px 30px;
}

.bd-access-card__icon {
  font-size: clamp(24px, 2.4vw, 28px);
  margin-bottom: 10px;
}

.bd-access-card__title {
  font-family: var(--bd-font-serif);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 20px);
  color: var(--bd-dark);
  margin: 0 0 12px;
}

.bd-access-card__text {
  font-family: var(--bd-font-sans);
  font-size: clamp(14px, 1.2vw, 15px);
  line-height: 1.7;
  color: var(--bd-charcoal);
  margin: 0;
}

/* --- Fact pills (Παραλίες) --- */

.bd-facts-wrap {
  padding: 10px 24px 60px;
}

.bd-facts-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.bd-facts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.bd-fact-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid var(--bd-border);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--bd-font-sans);
  font-size: clamp(13px, 1.1vw, 14px);
  font-weight: 500;
  color: var(--bd-dark);
  box-shadow: 0 4px 12px rgba(25, 58, 86, 0.04);
}

/* --- Literary spotlight (Zorz Sarri) --- */

.bd-lit-spotlight-wrap {
  padding: 20px 24px 60px;
}

.bd-lit-spotlight-inner {
  max-width: 780px;
  margin: 0 auto;
  background: var(--bd-dark);
  border-radius: 8px;
  padding: 44px 40px;
  text-align: center;
}

.bd-lit-spotlight-tag {
  font-family: var(--bd-font-sans);
  font-size: clamp(11px, 0.9vw, 12px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bd-terracotta-hover);
  margin-bottom: 14px;
}

.bd-lit-spotlight-title {
  font-family: var(--bd-font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  color: #ffffff;
  margin: 0 0 16px;
}

.bd-lit-spotlight-text {
  font-family: var(--bd-font-sans);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}

.bd-lit-spotlight-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bd-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-terracotta-hover);
  text-decoration: none;
}

.bd-lit-spotlight-link:hover {
  color: #ffffff;
}

/* --- Further reading list --- */

.bd-reading-wrap {
  padding: 0 24px 70px;
}

.bd-reading-inner {
  max-width: 700px;
  margin: 0 auto;
}

.bd-reading-title {
  font-family: var(--bd-font-serif);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--bd-dark);
  margin: 0 0 14px;
}

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

.bd-reading-list li {
  border-bottom: 1px solid var(--bd-border);
}

.bd-reading-list a {
  display: block;
  padding: 10px 0;
  font-family: var(--bd-font-sans);
  font-size: clamp(13.5px, 1.2vw, 14.5px);
  color: var(--bd-dark);
  text-decoration: none;
}

.bd-reading-list a:hover {
  color: var(--bd-terracotta);
  text-decoration: underline;
}


/* Constrains the Modula gallery shortcode to the same width as the rest
   of the page's content sections — Modula's own gallery otherwise
   stretches full viewport width. */
.bd-gallery-constrain {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   BLUE DOLPHIN — EXTRAS ROW (literary spotlight + further reading sidebar)
   Replaces the two separate, full-width stacked sections with a single
   2-column layout: the Zorz Sarri story as the main feature, further
   reading as a genuine boxed sidebar next to it.
   ========================================================================== */

.bd-extras-wrap {
  padding: 20px 24px 70px;
}

.bd-extras-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 800px) {
  .bd-extras-grid {
    grid-template-columns: 1fr;
  }
}

.bd-extras-grid .bd-lit-spotlight-inner {
  margin: 0;
  max-width: none;
}

.bd-reading-sidebar {
  background: var(--bd-sand);
  border-radius: 8px;
  padding: 26px 24px;
}

.bd-reading-sidebar .bd-reading-title {
  margin: 0 0 14px;
}

.bd-reading-sidebar .bd-reading-list a {
  padding: 9px 0;
  font-size: clamp(13px, 1.1vw, 14px);
}

/* ==========================================================================
   BLUE DOLPHIN — AEGINA PAGE
   3-column variant of the access-card pattern + a video/image banner.
   ========================================================================== */

.bd-access-inner--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  .bd-access-inner--three {
    grid-template-columns: 1fr;
  }
}

.bd-video-banner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.bd-video-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(25, 58, 86, 0.5);
}

.bd-video-banner__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #ffffff;
}

.bd-video-banner__title {
  font-family: var(--bd-font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 16px;
  color:var(--bd-text-on-dark);
}

.bd-video-banner__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--bd-dark);
  font-size: 20px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.bd-video-banner__play:hover {
  background: var(--bd-terracotta-hover);
  color: #ffffff;
  transform: scale(1.08);
}

/* ==========================================================================
   BLUE DOLPHIN — AEGINA PAGE (v2, more visual variety)
   Lite YouTube embed + horizontal journey/timeline component, replacing
   uniform stacked cards.
   ========================================================================== */

/* --- Lite YouTube embed: real thumbnail + play button, iframe only
     loads after a real click (keeps YouTube's JS off the critical path) --- */

.bd-yt-wrap {
  padding: 60px 24px 60px;
}

.bd-yt-lite {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  min-height: auto;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.bd-yt-lite::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(25, 58, 86, 0.35);
  transition: background 0.2s ease;
}

.bd-yt-lite:hover::before {
  background: rgba(25, 58, 86, 0.2);
}

.bd-yt-lite__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.bd-yt-lite__title {
  font-family: var(--bd-font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 20px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.bd-yt-lite__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bd-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.bd-yt-lite:hover .bd-yt-lite__play {
  transform: scale(1.1);
  background: var(--bd-terracotta-hover);
  color: #ffffff;
}

.bd-yt-lite iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --- Journey / timeline (Πώς να πάτε στο νησί) --- */

.bd-journey-wrap {
  padding: 10px 24px 60px;
}

.bd-journey-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.bd-journey-title {
  font-family: var(--bd-font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  color: var(--bd-dark);
  text-align: center;
  margin: 0 0 40px;
}

.bd-journey-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.bd-journey-row::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 26px;
  right: 26px;
  height: 2px;
  background: var(--bd-border);
  z-index: 0;
}

.bd-journey-step {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  padding: 0 8px;
}

.bd-journey-step__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bd-dark);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 14px;
}

.bd-journey-step__label {
  font-family: var(--bd-font-sans);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 14.5px);
  color: var(--bd-dark);
  margin-bottom: 4px;
}

.bd-journey-step__time {
  font-family: var(--bd-font-sans);
  font-size: clamp(11.5px, 1vw, 12.5px);
  color: var(--bd-muted-text);
}

@media (max-width: 700px) {
  .bd-journey-row {
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
  }
  .bd-journey-row::before {
    top: 0; bottom: 0; left: 26px; right: auto; width: 2px; height: auto;
  }
  .bd-journey-step {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    width: 100%;
  }
  .bd-journey-step__icon {
    margin: 0;
    flex-shrink: 0;
  }
}

.bd-journey-links {
  text-align: center;
  margin-top: 30px;
}

.bd-journey-links a {
  font-family: var(--bd-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-terracotta);
  text-decoration: none;
  margin: 0 12px;
}

.bd-journey-links a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   SINGLE ROOM PAGE — fixes for the plugin's own default template output
   (boc-* classes, not ours — these come straight from the plugin itself).
   ========================================================================== */

/* --- 1. Hero text readability on bright photos ---
   The plugin's own overlay (rgba .75 at bottom fading to .1 at top) isn't
   always enough contrast against a very bright photo. Strengthen the
   bottom stop, and add a text-shadow as a second, photo-independent
   layer of insurance regardless of overlay strength. */
.boc-hero-overlay {
  background: linear-gradient(0deg,
    rgba(10, 20, 30, 0.88) 0%,
    rgba(10, 20, 30, 0.5) 45%,
    rgba(10, 20, 30, 0.15) 100%) !important;
}

.boc-hero-title,
.boc-hero-subtitle,
.boc-breadcrumb,
.boc-hero-meta {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* --- 2. Booking form cut off in height ---
   The BookOnCloud iframe has a static min-height (420px), but the real
   widget grows taller once the calendar picker or rooms dropdown opens.
   Static height can't account for that — needs dynamic resizing (see
   the matching JS block below, same iframeResizer approach used
   elsewhere in this project). This CSS just makes sure nothing clips it
   once the JS starts adjusting the height. */
.boc-single-sidebar,
.boc-booking-card {
  overflow: visible !important;
}

.boc-booking-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(25, 58, 86, 0.12);
  padding: 20px;
}

.boc-booking-card .boc-booking-embed-wrap iframe {
  min-height: 0 !important; /* let iframeResizer set the real height instead of the static default */
  border-radius: 0 !important; /* the plugin's own 50px radius + shadow on the iframe itself
                                   was creating a visible "double border" once the height
                                   became dynamic — the outer .boc-booking-card is now the
                                   single source of the rounded-card look */
  box-shadow: none !important;
}

/* --- 3. Gallery arrow/expand icons AND lightbox nav/close ---
   The REAL cause of the oval/stretched shape (found after two rounds of
   feedback): Astra's global button styling adds padding to every
   <button>, and none of these classes had box-sizing: border-box — so
   that padding was being added ON TOP of the fixed width/height instead
   of being contained within it (e.g. 38px + theme padding = a much
   wider-than-tall box, hence "oval" instead of circular). Locking down
   box-sizing + zeroing the padding fixes the actual shape for every
   round icon button on the room page, not just the main gallery. */
.boc-gallery-arrow,
.boc-gallery-expand,
.boc-lightbox-close,
.boc-lightbox-prev,
.boc-lightbox-next {
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.boc-gallery-arrow,
.boc-gallery-expand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bd-dark) !important;
}

.boc-gallery-arrow {
  width: 38px !important;
  height: 38px !important;
}

.boc-gallery-expand {
  width: 36px !important;
  height: 36px !important;
}

.boc-lightbox-close {
  width: 42px !important;
  height: 42px !important;
}

.boc-lightbox-prev,
.boc-lightbox-next {
  width: 48px !important;
  height: 48px !important;
}

.boc-gallery-arrow svg,
.boc-gallery-expand svg {
  display: block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}

.boc-gallery-expand svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
}

/* Lightbox must render above our own fixed header/topbar (z-index
   99999/100000) — the plugin's own default (9999) was much lower,
   which is why the close button was ending up hidden behind our
   header. */
.boc-lightbox {
  z-index: 999999 !important;
}

/* --- 4. "You may also like" cards — add a proper hover effect ---
   These come from [boc_rooms_grid] and currently use the plugin's plain
   default styling with no interaction feedback. Adds a calm lift + shadow
   + border-color, matching the editorial (not flashy) Blue Dolphin tone. */
.boc-section--similar .boc-room-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 1px solid transparent;
}

.boc-section--similar .boc-room-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(25, 58, 86, 0.14);
  border-color: var(--bd-terracotta);
}

.boc-section--similar .boc-room-card .boc-room-image img {
  transition: transform 0.6s ease;
}

.boc-section--similar .boc-room-card:hover .boc-room-image img {
  transform: scale(1.06);
}

/* ==========================================================================
   [boc_rooms_grid] SHORTCODE — main width constraint
   Was missing entirely, so the grid stretched full viewport width when
   used bare (e.g. on the main Accommodation hub page), unlike everywhere
   else on the site which is consistently capped at ~1200px.
   ========================================================================== */

.boc-rooms-grid {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px;
  box-sizing: border-box;
}

@media (max-width: 782px) {
  .boc-rooms-grid {
    padding: 0 16px;
  }
}

/* Explicit fixed height (not just aspect-ratio) — guarantees every room
   card's photo is exactly the same height regardless of the source
   image's own orientation/crop, or how the grid resolves row heights. */
.boc-room-image {
  height: 240px !important;
  aspect-ratio: unset !important;
}

/* ==========================================================================
   BLUE DOLPHIN — FOOTER FAQ ACCORDION (4th column)
   Same mechanism as Caviro's footer FAQ, ported to bd- tokens.
   ========================================================================== */

.bd-footer-faq-col {
  min-width: 0;
}

.bd-footer-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.bd-new-footer .bd-footer-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--bd-font-sans);
  font-weight: 600;
  font-size: clamp(13.5px, 1.1vw, 14.5px);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.bd-new-footer .bd-footer-faq-question:hover {
  color: var(--bd-text-on-dark) !important;
}

.bd-footer-faq-arrow {
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.bd-footer-faq-question:hover .bd-footer-faq-arrow {
  border-color: var(--bd-text-on-dark) !important;
}

.bd-footer-faq-item.is-open .bd-footer-faq-arrow {
  transform: rotate(225deg);
}

.bd-footer-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.bd-footer-faq-item.is-open .bd-footer-faq-answer {
  max-height: 300px;
}

.bd-footer-faq-answer p {
  padding: 0 0 14px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  font-family: var(--bd-font-sans);
  font-size: clamp(12.5px, 1vw, 13.5px);
  line-height: 1.55;
}

/* ==========================================================================
   BLUE DOLPHIN — CSS-ONLY MOSAIC GRID (re-added)
   This was removed earlier when we switched the Vagia village gallery to
   Modula, but is needed again here for the homepage's "When to Visit"
   nature photo mosaic (no plugin used for this one — plain CSS Grid).
   ========================================================================== */

.bd-mosaic-wrap {
  padding: 20px 24px 60px;
}

.bd-mosaic-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.bd-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 90px;
  gap: 10px;
}

.bd-mosaic-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bd-sand);
  cursor: pointer;
}

.bd-mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.4s ease;
}

.bd-mosaic-item:hover img {
  transform: scale(1.06);
  filter: brightness(0.85);
}

.bd-mosaic-item--large  { grid-column: span 2; grid-row: span 4; }
.bd-mosaic-item--wide   { grid-column: span 2; grid-row: span 2; }
.bd-mosaic-item--tall   { grid-column: span 1; grid-row: span 2; }
.bd-mosaic-item--square { grid-column: span 1; grid-row: span 1; }
.bd-mosaic-item--huge   { grid-column: span 3; grid-row: span 4; }

@media (max-width: 900px) {
  .bd-mosaic-grid { grid-template-columns: repeat(4, 1fr); }
  .bd-mosaic-item--huge { grid-column: span 4; grid-row: span 3; }
  .bd-mosaic-item--large { grid-column: span 2; grid-row: span 3; }
}

@media (max-width: 560px) {
  .bd-mosaic-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 100px; }
  .bd-mosaic-item--huge,
  .bd-mosaic-item--large,
  .bd-mosaic-item--wide { grid-column: span 2; grid-row: span 2; }
  .bd-mosaic-item--tall,
  .bd-mosaic-item--square { grid-column: span 1; grid-row: span 1; }
}

/* ==========================================================================
   BLUE DOLPHIN — SIMPLE 3-COLUMN PHOTO GRID
   Replaces the asymmetric mosaic for the homepage's "When to Visit"
   photos — uniform, calmer layout instead of mixed tile sizes.
   ========================================================================== */

.bd-photo-grid-3-wrap {
  padding: 20px 24px 60px;
}

.bd-photo-grid-3-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.bd-photo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bd-photo-grid-3 .bd-photo-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
}

.bd-photo-grid-3 .bd-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.bd-photo-grid-3 .bd-photo-item:hover img {
  transform: scale(1.06);
}

@media (max-width: 700px) {
  .bd-photo-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 460px) {
  .bd-photo-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BLUE DOLPHIN — FOOTER: force left alignment
   Astra's Footer Builder widget area sometimes applies its own centering
   defaults — these overrides guarantee every column reads left-aligned
   regardless of that.
   ========================================================================== */
 
.bd-new-footer,
.bd-new-footer * {
  text-align: left !important;
}
 
.bd-footer-socials {
  justify-content: flex-start !important;
}
 
.bd-footer-legal-right a {
  font-family: var(--bd-font-sans);
  font-size: clamp(12px, 1vw, 13px);
  color: var(--bd-text-on-dark-faint);
  text-decoration: none;
  margin-right: 18px;
  transition: color 0.15s ease;
}
 
.bd-footer-legal-right a:hover {
  color: var(--bd-terracotta) !important;
}

.page-id-392 .site-main, .page-id-398 .site-main, .page-id-401 .site-main, .page-id-403 .site-main, .page-id-405 .site-main, .page-id-407 .site-main{
      padding-top: 7em;
}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
    max-width: 100%;
}

#wpforms-submit-67, #wpforms-submit-88{
  background-color: var(--bd-pistachio);
  border-color: var(--bd-pistachio);
}

/* ==========================================================================
   BLUE DOLPHIN — HOMEPAGE "Γνωρίστε το Blue Dolphin" 3-VIDEO GRID
   Was inline grid-template-columns in the HTML block — moved here so it
   can respond properly on mobile instead of staying fixed at 3 columns.
   ========================================================================== */

.bd-home-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.bd-yt-lite--grid-item {
  aspect-ratio: 16 / 10;
  min-height: 220px;
  width: 100%;
  max-width: none;
  margin: 0;
}

@media (max-width: 700px) {
  .bd-home-videos-grid {
    grid-template-columns: 1fr;
  }

  .bd-yt-lite--grid-item {
    min-height: 200px;
  }
}

/* ================= MAP EMBED — αντικαθιστά το inline style="border:0;" ================= */
.bd-map-iframe {
  border: 0;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 4 / 3;
}

/* ================= ΠΑΡΑΛΙΕΣ — αντικαθιστά τα inline styles ================= */
.bd-intro-title--sm {
  font-size: clamp(24px, 2.6vw, 32px);
}

.bd-facts-intro {
  font-family: var(--bd-font-sans);
  color: var(--bd-muted-text);
  margin-top: 10px;
}

/* ================= WELCOME ================= */
.bd-lit-spotlight-link--pistachio, .bd-lit-spotlight-link--pistachio:hover {
  color: var(--bd-pistachio);
}

/* ================= AEGINA BANNER ================= */
.bd-video-banner--aegina {
  min-height: 340px;
}

.bd-video-banner__text {
  font-family: var(--bd-font-sans);
  max-width: 560px;
  margin: 0 auto 14px;
  font-size: 15px;
  line-height: 1.7;
}

.bd-lit-spotlight-link--white {
  color: #fff;
}

/* ================= AEGINA PHOTO TOURS ================= */
.bd-lit-spotlight-inner--wide {
  max-width: 900px;
  margin: 0 auto;
}

/* ================= WHEN TO VISIT ================= */
.bd-about-wrap--flush {
  padding-top: 0;
}

/* ================= BOOK NOW ================= */
.bd-contact-wrap--tight {
  padding-top: 20px;
}

.bd-contact-form-card--booking {
  max-width: 700px;
  margin: 0 auto;
  padding: 34px;
  justify-content: flex-start;
}

.bd-booking-iframe {
  width: 100%;
}