so it opens with JavaScript disabled: the browser
toggles it natively and every entry inside is a plain link.
It sits above the cookie banner's z-index while the banner is visible, so
the two never fight; cookie-consent.js adds .fab-lifted once the visitor
has answered, which clears the banner's space. */
.book-fab{
position:fixed;right:20px;bottom:var(--fab-bottom,20px);z-index:1300;
font-size:1rem;line-height:1;
}
.book-fab[hidden]{display:none;}
.book-fab>summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;gap:9px;
min-height:52px;padding:0 22px;
border-radius:999px;
background:var(--accent-dark);color:#fff;font-weight:700;
letter-spacing:.4px;
box-shadow:0 10px 26px rgba(168,92,48,.45);
transition:transform .18s ease,box-shadow .18s ease;
}
.book-fab>summary::-webkit-details-marker{display:none;}
.book-fab>summary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(168,92,48,.52);}
.book-fab>summary:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.book-fab-ico{font-size:1.15rem;}
/* The menu opens upwards, out of the bottom-right corner. */
.book-fab-menu{
position:absolute;right:0;bottom:calc(100% + 10px);
min-width:210px;
background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow-lg);padding:8px;
display:flex;flex-direction:column;gap:2px;
}
.book-fab-item{
display:flex;align-items:center;gap:10px;
min-height:48px;padding:0 14px;border-radius:10px;
color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;
}
.book-fab-item:hover{background:var(--soft);}
.book-fab-item:focus-visible{outline:2px solid var(--accent-dark);outline-offset:-2px;}
/* Keep clear of the cookie banner. cookie-consent.js measures the banner and
raises --fab-bottom; if the script never runs, the plain 20px above applies. */
.book-fab.fab-lifted{--fab-bottom:20px;}
@media (max-width:600px){
.book-fab{right:14px;--fab-bottom:14px;}
.book-fab>summary{min-height:48px;padding:0 18px;gap:0;}
.book-fab-txt{display:none;} /* icon only on narrow phones */
.book-fab-ico{font-size:1.35rem;}
.book-fab>summary{min-width:48px;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
.book-fab>summary{transition:none;}
.book-fab>summary:hover{transform:none;}
}
/* ------------------------------------------------------- touch target sizes
Small text links measured under the minimum hit area. Each one gets real
padding for the thumb, cancelled by an equal negative margin, so the hit area
grows while the layout stays pixel-identical. Touch screens get 44px; a mouse
is more precise, so desktop only needs WCAG 2.2 AA's 24px. */
.socials a,.footer-legal a,.linklike,.row a,.social a{
display:inline-flex;align-items:center;min-height:24px;
padding:1px 2px;margin:-1px -2px;
}
@media (pointer:coarse),(max-width:900px){
.nav-toggle{padding:12px;margin:-4px;}
.socials a,.footer-legal a,.linklike,.row a,.social a{
min-height:44px;padding:0 2px;margin:-11px -2px;
}
.call-btn{padding:12px 18px !important;}
.btn-pro{padding:12px 14px;}
.tab-btn{min-height:46px;}
}
/* Two links were missing from the lists above, so they stayed the only controls
under the 24px minimum: the footer's weather link (alone in a , 20px tall)
and the cookie banner's "Πολιτική Cookies" (23px). The padding is picked per
element so the margin box keeps exactly the old height - the hit area grows,
the flow does not move. The banner link is a flex item, where a taller box
would raise the whole row, so it gets an absolute overlay instead: the same
trick .room-link::after already uses to make a whole card clickable. */
footer p a{
display:inline-flex;align-items:center;min-height:24px;
padding:2px;margin:-2px;
}
.cookie-more{position:relative;}
.cookie-more::after{
content:"";position:absolute;left:-4px;right:-4px;top:50%;
height:24px;transform:translateY(-50%);
}
@media (pointer:coarse),(max-width:900px){
footer p a{min-height:44px;padding:12px 2px;margin:-12px -2px;}
.cookie-more::after{height:44px;}
}