:root {
  --ff-red: #df0e1a;
  --ff-navy: #0b2a4b;
  --ff-white: #fff;
}

/* Page adjustments */
main { padding-top: 0 !important; }

/* =================== HEADER BAR =================== */
.ff-header {
    position: fixed;
    z-index: 10000;
    background-color: transparent;
    margin-bottom: -98px;
    margin-top: 25px;
    width: 100%;
}




.ff-bar {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto auto;
  align-items: center;
  column-gap: .5rem;
  height: 73px;
  background: var(--ff-navy);
  width: 98%;
  border-radius: 8px;
  margin: auto;
}

.ff-logo {
  display: flex;
  align-items: center;
  background: var(--ff-red);
  height: 73px;
  padding: 0 .75rem;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.ff-logo img {
      height: auto;
    max-width: 230px;
    padding: 0 20px;
    width: 100%;
}

.ff-cta {
  display: inline-flex;
  align-items: center;
  height: 73px;
  background: var(--ff-red);
  color: var(--ff-white);
  text-decoration: none;
  padding: 0 32px;
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 14px;
  font-family: 'light';
}
.ff-cta:hover { color: var(--ff-white); }

.ff-offcanvas-top .ff-lang{
	text-align:end;
}
.ff-cta.ekdromes {
	background:rgba(255, 255, 255, 0.28) !important;
	position:relative;
	padding: 0 45px;
	margin-right:-.5rem;
}

.ff-cta.friends {
    padding: 0 10px;
    background: transparent;
    color: white;
    font-family: 'light';
    font-size: 14px;
	font-weight: 700;
	position:relative;
}

.ff-cta.friends::after {
    content: "";
    width: 1px;
    height: 42px;
    position: absolute;
    left: -5px;
    background-color: #fff;
}

.ff-phone {
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--ff-white);
  text-decoration: none;
  position: relative;
}
.ff-burger::after{
  content: "";
  width: 1px;
  height: 42px;
  position: absolute;
  left: -3px;
  background-color: #fff;
}

.ff-phone-ico {
  width: 22px;
  height: 22px;
  display: inline-block;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24 11.36 11.36 0 003.55.57 1 1 0 011 1v3.61a1 1 0 01-1 1A18 18 0 013 5a1 1 0 011-1h3.61a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.24 1.05z"/></svg>') no-repeat center / contain;
  background: currentColor;
}

.ff-burger {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
.ff-burger-bar {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ff-white);
}
.ff-burger-bar::before,
.ff-burger-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--ff-white);
  transition: .2s;
}
.ff-burger-bar::before { top: -7px; }
.ff-burger-bar::after  { top: 7px;  }
.ff-burger[aria-expanded="true"] .ff-burger-bar { background: transparent; }
.ff-burger[aria-expanded="true"] .ff-burger-bar::before { top: 0; transform: rotate(45deg); }
.ff-burger[aria-expanded="true"] .ff-burger-bar::after  { top: 0; transform: rotate(-45deg); }

/* =================== OFFCANVAS =================== */
.ff-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width:100%;
  background: var(--ff-navy);
  color: var(--ff-white);
  transform: translateX(100%);         /* ← from right, hidden */
  transition: transform .25s ease;
  z-index: 999999999999999999;
  overflow: auto;                       /* scroll if content is tall */
}

.ff-offcanvas.is-open { transform: translateX(0); }

.ff-offcanvas-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: var(--ff-red);
  height: 56px;
  padding: 0 8%;
  gap: .75rem;
}
.ff-logo-mini img { height: 28px; }

.ff-lang a {
  color: #ffdede;
  text-decoration: none;
  margin-left: 0rem;
}
.ff-lang .is-active { color: #fff; font-weight: 700; }

.ff-close{
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* container inside offcanvas */
.ff-mega{
  display: flex;
  gap: 24px;
  padding: 28px 8%;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Section heading */
.one-element-proorismoi {
  width: 100%;
  margin-top: 10px;
  font-size: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding-bottom: 20px;
  display: flex;
  justify-content: space-between;

}
.one-element-proorismoi span{
  color: var(--ff-red);
  font-weight: bold;
  font-family: var(--h2_typography-font-family);
}
.one-element-proorismoi::after {
  content: "›";
  opacity: .9;
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 8px 19.5px;
  font-size: 20px;
    color: white;
}



/* ----- Minimal modern scrollbar for .ff-destinations ----- */
.ff-destinations{
  /* keep your layout */
  height: 50vh;
  overflow-y: auto;
  padding-right: 20px;

  /* quick-tweak vars (same palette as .ff-left) */
  --sb-track: transparent;
  --sb-thumb: rgba(255,255,255,.28);
  --sb-thumb-hover: rgba(255,255,255,.45);
  --sb-thumb-active: var(--ff-red);

  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
  scrollbar-gutter: stable;
}

/* WebKit (Chrome, Edge, Safari, Opera) */
.ff-destinations::-webkit-scrollbar{
  width: 8px;
}
.ff-destinations:hover::-webkit-scrollbar{
  width: 10px;
}
.ff-destinations::-webkit-scrollbar-track{
  background: var(--sb-track);
}
.ff-destinations::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ff-destinations::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
}
.ff-destinations::-webkit-scrollbar-thumb:active{
  background: var(--sb-thumb-active);
}


/* ----- Minimal modern scrollbar for .ff-left ----- */
.ff-left{
  /* handy vars so you can tweak quickly */
  --sb-track: transparent;
  --sb-thumb: rgba(255,255,255,.28);
  --sb-thumb-hover: rgba(255,255,255,.45);
  --sb-thumb-active: var(--ff-red);
height: 70vh; overflow-y: auto; padding-right: 20px;
  /* Firefox */
  scrollbar-width: thin;                         /* thin | auto | none */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
  scrollbar-gutter: stable;                      /* keeps layout from shifting when SB appears */
}

/* WebKit (Chrome, Edge, Safari, Opera) */
.ff-left::-webkit-scrollbar{
  width: 8px;                                    /* keep it slim */
}
.ff-left:hover::-webkit-scrollbar{
  width: 10px;                                   /* a touch wider on hover for usability */
}
.ff-left::-webkit-scrollbar-track{
  background: var(--sb-track);
}
.ff-left::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 8px;                             /* rounded = modern */
  border: 2px solid transparent;                  /* creates an inner gap */
  background-clip: padding-box;
}
.ff-left::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
}
.ff-left::-webkit-scrollbar-thumb:active{
  background: var(--sb-thumb-active);            /* matches your brand red on drag */
}

/* (Optional) hide scrollbar when not needed in very small containers */
.ff-left:has(:not(:scope > *)){ scrollbar-width: thin; }


/* =================== LEFT COLUMN (FULL-ROW LINKS) =================== */
.ff-leftmenu { list-style: none; margin: 0; padding: 0; }
.ff-leftmenu > li{
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.ff-leftmenu > li:last-child { border-bottom: 0; }

.ff-leftmenu > li > a{
  display: flex;                       /* full-row clickable */
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  text-decoration: none;
  color: #fff;
  font-weight: 100;
  letter-spacing: .02em;
  font-size: 32px;
  font-family: 'light';
  text-transform: uppercase;
  gap: 30px;
}
.ff-leftmenu > li > a::after{
  content: "›";
  opacity: .9;
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 8px 19.5px;
  font-size: 20px;
color:white;
}

/* =================== RIGHT COLUMN (DESTINATIONS) =================== */
.ff-right { display: flex; flex-direction: column; gap: 24px; }

.ff-destinations{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 100px;
}

.ff-destinations > li{
  display: block;
  padding: 0;                           /* padding moves to the <a> */
}

/* top-level destination row clickable */
.ff-destinations > li > a{
  display: flex;                        /* full-row clickable */
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff;
  text-decoration: none;
  font-family: 'light';
  font-size: 23px;
  gap:20px;
}
.ff-destinations > li > a::after{
  content: "›";
  opacity: .9;
  font-size: 20px;
color:white;
}

/* children grid */
.ff-destinations .sub-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 8px 28px;
}
.ff-destinations .sub-menu li{ padding: 0; }
.ff-destinations .sub-menu li > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 0;
  color: #d6e6ff;
  text-decoration: none;
}
.ff-destinations .sub-menu li > a::after{
  content: "›";
  opacity: .6;
  margin-left: 6px;
}

/* Phone/support footer */
.ff-support {
  margin-top: auto;
  align-self: end;
  font-size: 20px;
  font-family: 'bold';
}
.ff-support-phone{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  opacity: .9;
}

/* =================== HOVER/FOCUS =================== */
.ff-leftmenu > li > a:hover,
.ff-destinations a:hover{ opacity: .9; }

.ff-leftmenu > li > a:focus-visible,
.ff-destinations a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.ff-cta:hover{
	background:#00143c;
}

.ff-cta.ekdromes:hover{
	background:#00143c!important;
}

.ff-cta.friends:hover{
	color:#df0e1a;
	background:transparent;
}

/* =================== RESPONSIVE =================== */
@media (max-width: 1550px){
  .ff-leftmenu > li > a { font-size: 25px; }
  .ff-leftmenu > li      { padding: 0; }
  .ff-destinations > li > a { font-size: 20px; }
}

@media (max-width: 1024px){
  .ff-mega{ grid-template-columns: 1fr; }
  .ff-left{ order: 2; }
  .ff-right{ order: 1; }
  .ff-destinations .sub-menu{
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

/* helpers */
.sr-only{ position: absolute; left: -9999px; }
body.ff-lock{ overflow: hidden; }

/* WPML small tweaks (keep yours) */
.tbar-rows.lang-row span{
  font-family: 'bold';
  color: #fff;
  font-size: 16px !important;
  position: relative;
}
.wpml-ls-legacy-list-horizontal a span{
  display: block !important;
  padding-bottom: 1px;
  width: 100%;
  max-width: 26px !important;
  color: rgba(255,255,255,.33) !important;
}


/* =================== HOVER/FOCUS =================== */

/* smooth transitions for text and chevrons */
.ff-leftmenu > li > a,
.ff-destinations > li > a,
.ff-destinations .sub-menu li > a,
.ff-leftmenu > li > a::after,
.ff-destinations > li > a::after,
.ff-destinations .sub-menu li > a::after {
  transition: color .2s ease, border-color .2s ease;
}

/* hover state — text & chevrons turn red */
.ff-leftmenu > li > a:hover,
.ff-destinations > li > a:hover,
.ff-destinations .sub-menu li > a:hover {
  color: var(--ff-red);
}
.ff-leftmenu > li > a:hover::after,
.ff-destinations > li > a:hover::after,
.ff-destinations .sub-menu li > a:hover::after {
  color: var(--ff-red);
  border-color: var(--ff-red);
}

/* focus-visible outline for accessibility */
.ff-leftmenu > li > a:focus-visible,
.ff-destinations a:focus-visible {
  outline: 2px solid var(--ff-red);
  outline-offset: 2px;
}

/* hover state — red text + red chevron border/icon */
.one-element-proorismoi:hover {
  color: var(--ff-red);
}
.one-element-proorismoi:hover::after {
  color: var(--ff-red);
  border-color: var(--ff-red);
}

/* focus-visible accessibility outline */
.one-element-proorismoi:focus-visible {
  outline: 2px solid var(--ff-red);
  outline-offset: 2px;
}

 .ff-cta.ff-cta-book {
	 display:none;
 }

/* show desktop mega by default */
.ff-mega-mobile { display: none; }

/* mobile breakpoint */
@media (max-width: 991px){
  .ff-mega.ff-mega-desktop { display: none!important; }
  .ff-mega-mobile { display: flex; height:calc( 100% - 44px); }

  .ff-mega.ff-mega-mobile{
    padding: 20px 5%;
  }


.ff-phone{
	display:inline-flex;
}

.ff-cta {
	display:none;
}

.ff-bar {
	background: var(--ff-red);
	height: 44px;
	    width: 100%;
    border-radius: 0px;
}

.ff-burger {

height: 44px;
}

.ff-logo{
	height: 44px;
}

.ff-logo img {
	height: 14px;
	    width: auto;
    padding: 0 5px;
}


.ff-header {
    position: fixed;
    z-index: 1000;
    background-color: transparent;
    margin-bottom: 0px;
    margin-top: 0px;
    width: 100%;
}


  .ff-mobilemenu{
    list-style: none;
    margin: 0;
    padding: 0;
	        WIDTH: 100%;
  }

  .ff-mobilemenu > li{
    border-bottom: 1px solid rgba(255,255,255,.12);
  }

  .ff-mobilemenu > li > a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    text-decoration: none;
    color: #fff;
    font-family: 'light';
    font-size: 18px;
    text-transform: uppercase;
    gap: 16px;
  }
  .ff-logo-mini img {
    height: 14px;
}

    .tbar-rows.lang-row {
        margin-right: 0px!important;
    }

  /* submenu hidden by default */
  .ff-mobilemenu .sub-menu{
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 10px 0;
	border:0px;
	box-shadow:none;
  }

  /* opened state */
  .ff-mobilemenu li.ff-open > .sub-menu{
    display: block;
  }

  .ff-mobilemenu .sub-menu li a{
    display: block;
    padding: 10px 0;
    color: #d6e6ff;
    text-decoration: none;
    font-size: 16px;
    text-transform: none;
  }
  .ff-offcanvas-top {
	      height: 44px;
		  padding: 0 5%;
  }
  
  .ff-support {
    margin-top: auto;
    align-self: end;
    font-size: 20px;
    font-family: 'bold';
    display: flex;
    justify-content: space-between;
    width: 100%;
}
  
  .ff-offcanvas-top .ff-lang{
	  display:none;
  }

  /* toggle button (we will inject via JS) */
  .ff-subtoggle{
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 18px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  .ff-mobilemenu li.ff-open > a .ff-subtoggle{
    transform: rotate(180deg);
  }
  
  .ff-close {
	     font-size: 20px; 
  }
  
 .ff-alert-wrap {
    display: none;
}
  
  .ff-cta.ff-cta-book {
        display: inline-flex;
        padding: 0px 10px;
        max-width: 101px;
        background: var(--ff-navy);
        margin-left: auto;
        font-size: 12px;
		height: 44px;
    }
  
  .ff-support-phone{
	      font-size: 16px;
  }
  .ff-lang a {
	  margin-left: 0rem;
  }
  
  #book-form {
        flex-direction: column;
        padding: 0px 0px!important;
    }
}