.hbw-widget {
--hbw-warm-white: #F8F5F0;
--hbw-bone: #EFE9DF;
--hbw-sand: #E0D4BF;
--hbw-clay: #C9A98C;
--hbw-olive: #6B6850;
--hbw-charcoal: #2B2A26;
--hbw-ink: #1A1917;
font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--hbw-charcoal);
background: var(--hbw-warm-white);
padding: 12px 14px;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(43, 42, 38, 0.04), 0 16px 48px rgba(43, 42, 38, 0.10);
max-width: 1240px;
margin: 0 auto;
box-sizing: border-box;
line-height: 1.4;
}
.hbw-widget *, .hbw-widget *::before, .hbw-widget *::after { box-sizing: border-box; }
.hbw-row { display: flex; align-items: stretch; gap: 0; }
.hbw-field {
position: relative;
flex: 1 1 0;
padding: 10px 18px;
border-right: 1px solid var(--hbw-sand);
cursor: pointer;
transition: background-color 240ms ease-out;
min-width: 0;
}
.hbw-field:first-child { padding-left: 14px; }
.hbw-field--property { flex: 1.25 1 0; }
.hbw-field--promo { flex: 0.85 1 0; }
.hbw-field--last { border-right: none; }
.hbw-label {
display: block;
font-family: 'Jost', sans-serif;
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hbw-olive);
margin: 0 0 6px;
pointer-events: none;
}
.hbw-value {
display: block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.3rem;
font-weight: 400;
color: var(--hbw-ink);
letter-spacing: 0.005em;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.hbw-chevron {
position: absolute;
right: 14px;
top: 50%;
width: 8px; height: 8px;
border-right: 1px solid var(--hbw-olive);
border-bottom: 1px solid var(--hbw-olive);
transform: translateY(-75%) rotate(45deg);
pointer-events: none;
transition: transform 200ms ease-out;
}
.hbw-field.hbw-is-open .hbw-chevron { transform: translateY(-25%) rotate(-135deg); }
.hbw-date-input {
position: absolute; inset: 0;
opacity: 0; cursor: pointer;
border: 0; padding: 0; margin: 0;
background: transparent;
font-family: inherit; font-size: 16px;
color: transparent; width: 100%; height: 100%;
}
.hbw-date-input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.hbw-promo-input {
display: block; width: 100%;
border: 0; background: transparent;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.3rem; color: var(--hbw-ink);
padding: 0; margin: 0; outline: none;
letter-spacing: 0.005em; line-height: 1.2;
}
.hbw-promo-input::placeholder { color: var(--hbw-clay); font-style: italic; opacity: 1; }
.hbw-popover {
position: absolute;
top: calc(100% + 14px); left: -1px; right: -1px;
background: var(--hbw-bone);
border: 1px solid var(--hbw-sand);
border-radius: 3px;
padding: 6px 22px;
box-shadow: 0 12px 32px rgba(43, 42, 38, 0.14);
z-index: 100;
display: none;
cursor: default;
min-width: 240px;
}
.hbw-popover.hbw-is-open { display: block; }
.hbw-prop-option {
display: block;
width: 100%;
text-align: left;
background: transparent !important;
border: 0;
box-shadow: none !important;
padding: 14px 0;
cursor: pointer;
font-family: inherit;
transition: color 180ms ease-out;
}
.hbw-prop-option:hover,
.hbw-prop-option:focus,
.hbw-prop-option:focus-visible,
.hbw-prop-option:active {
background: transparent !important;
box-shadow: none !important;
outline: none;
}
.hbw-prop-option + .hbw-prop-option { border-top: 1px solid var(--hbw-sand); }
.hbw-prop-name {
display: block;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.2rem;
color: var(--hbw-ink);
line-height: 1.1;
margin-bottom: 3px;
}
.hbw-prop-sub {
display: block;
font-family: 'Jost', sans-serif;
font-size: 0.66rem; font-weight: 400;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--hbw-olive);
}
.hbw-prop-option:hover .hbw-prop-name { font-style: italic; }
.hbw-prop-option.hbw-is-active .hbw-prop-name { font-style: italic; }
.hbw-prop-option.hbw-is-active .hbw-prop-name::before {
content: '\00B7 ';
color: var(--hbw-clay);
font-style: normal;
margin-right: 2px;
}
.hbw-prop-option.hbw-is-active .hbw-prop-sub { color: var(--hbw-clay); }
.hbw-pop-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0;
}
.hbw-pop-row + .hbw-pop-row { border-top: 1px solid var(--hbw-sand); }
.hbw-pop-label {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.15rem; color: var(--hbw-ink); line-height: 1;
}
.hbw-pop-sub-inline {
display: block;
font-family: 'Jost', sans-serif;
font-size: 0.66rem; font-weight: 400;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--hbw-olive); margin-top: 3px;
}
.hbw-stepper { display: flex; align-items: center; gap: 16px; }
.hbw-step-btn {
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid var(--hbw-charcoal);
background: transparent;
color: var(--hbw-charcoal);
font-family: 'Jost', sans-serif;
font-size: 1rem; font-weight: 300;
cursor: pointer;
transition: background-color 200ms ease-out, color 200ms ease-out;
display: flex; align-items: center; justify-content: center;
padding: 0; line-height: 1;
}
.hbw-step-btn:hover:not(:disabled) { background: var(--hbw-charcoal); color: var(--hbw-warm-white); }
.hbw-step-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.hbw-step-count {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.2rem; color: var(--hbw-ink);
min-width: 18px; text-align: center;
}
.hbw-cta {
flex-shrink: 0;
background: var(--hbw-charcoal);
color: var(--hbw-warm-white);
border: 0;
padding: 0 36px;
margin: 6px 6px 6px 12px;
font-family: 'Jost', sans-serif;
font-size: 0.74rem; font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
transition: background-color 240ms ease-out;
min-width: 170px;
white-space: nowrap;
}
.hbw-cta:hover { background: var(--hbw-ink); }
.hbw-cta:focus-visible { outline: 2px solid var(--hbw-ink); outline-offset: 2px; }
.hbw-field--property .hbw-value,
.hbw-field--guests .hbw-value { padding-right: 18px; }
@media (max-width: 1024px) {
.hbw-widget { padding: 8px; }
.hbw-row { flex-direction: column; }
.hbw-chevron { display: none; }
.hbw-field {
border-right: 0;
border-bottom: 1px solid var(--hbw-sand);
padding: 16px 18px;
flex: 1 1 auto;
}
.hbw-field:first-child { padding-left: 18px; }
.hbw-field--last { border-bottom: 0; }
.hbw-popover {
position: static;
box-shadow: none; border: 0;
border-top: 1px solid var(--hbw-sand);
margin: 14px -18px -16px;
padding: 0 18px;
border-radius: 0;
min-width: 0;
}
.hbw-cta {
margin: 14px 6px 6px;
padding: 18px;
width: calc(100% - 12px);
}
}
(function () {
// ================================================================
// CONFIGURATION — customize here
// ================================================================
var CONFIG = {
// All bookable properties. Add/remove freely.
properties: [
{
id: 'tochni',
name: 'Tochni',
subtitle: 'Cyprus Villages',
baseUrl: 'https://us2.cloudbeds.com/en/reservation/Dp2HwT/'
},
{
id: 'archontias',
name: 'Archontias',
subtitle: 'Kalavasos',
baseUrl: 'https://us2.cloudbeds.com/en/reservation/R5qNZP/'
},
{
id: 'takis',
name: 'Takis',
subtitle: 'Kalavasos',
baseUrl: 'https://us2.cloudbeds.com/en/reservation/NJVIY8/'
}
],
defaultPropertyId: 'tochni',
paramNames: {
checkin: 'checkin',
checkout: 'checkout',
guests: 'guests',
promo: 'promo'
},
extraParams: { currency: 'eur' },
minAdults: 1, maxAdults: 8, maxChildren: 6,
defaultCheckinOffsetDays: 1,
defaultStayLengthDays: 3,
openInNewTab: true,
displayLocale: 'en-GB'
};
// ================================================================
var root = document.getElementById('hbw-widget');
if (!root) return;
var propertyField = root.querySelector('#hbw-property-field');
var propertyPop = root.querySelector('#hbw-property-popover');
var propertyDisp = root.querySelector('#hbw-property-display');
var checkinInput = root.querySelector('#hbw-checkin');
var checkoutInput = root.querySelector('#hbw-checkout');
var checkinDisp = root.querySelector('#hbw-checkin-display');
var checkoutDisp = root.querySelector('#hbw-checkout-display');
var guestsField = root.querySelector('#hbw-guests-field');
var guestsPop = root.querySelector('#hbw-guests-popover');
var guestsDisp = root.querySelector('#hbw-guests-display');
var adultsCount = root.querySelector('#hbw-adults-count');
var childrenCount = root.querySelector('#hbw-children-count');
var promoInput = root.querySelector('#hbw-promo');
var cta = root.querySelector('#hbw-cta');
var state = {
propertyId: CONFIG.defaultPropertyId,
checkin: null,
checkout: null,
adults: 2,
children: 0,
promo: ''
};
function getProperty(id) {
for (var i = 0; i < CONFIG.properties.length; i++) {
if (CONFIG.properties[i].id === id) return CONFIG.properties[i];
}
return CONFIG.properties[0];
}
function addDays(date, days) {
var d = new Date(date.getTime()); d.setDate(d.getDate() + days); return d;
}
function toISO(date) {
return date.getFullYear() + '-' +
String(date.getMonth() + 1).padStart(2, '0') + '-' +
String(date.getDate()).padStart(2, '0');
}
function parseISO(str) {
if (!str) return null;
var p = str.split('-');
if (p.length !== 3) return null;
return new Date(+p[0], +p[1] - 1, +p[2]);
}
function formatDisplay(date) {
return date.toLocaleDateString(CONFIG.displayLocale, {
weekday: 'short', day: 'numeric', month: 'short'
});
}
function closeAllPopovers() {
propertyPop.classList.remove('hbw-is-open');
propertyField.classList.remove('hbw-is-open');
guestsPop.classList.remove('hbw-is-open');
guestsField.classList.remove('hbw-is-open');
}
// Property dropdown
function renderPropertyOptions() {
propertyPop.innerHTML = '';
CONFIG.properties.forEach(function (prop) {
var btn = document.createElement('button');
btn.type = 'button';
btn.className = 'hbw-prop-option';
btn.setAttribute('role', 'option');
btn.dataset.propId = prop.id;
if (prop.id === state.propertyId) btn.classList.add('hbw-is-active');
btn.innerHTML =
'
' + prop.name + '' +
'
' + prop.subtitle + '';
btn.addEventListener('click', function (e) {
e.stopPropagation();
state.propertyId = prop.id;
updatePropertyDisplay();
propertyPop.classList.remove('hbw-is-open');
propertyField.classList.remove('hbw-is-open');
});
propertyPop.appendChild(btn);
});
}
function updatePropertyDisplay() {
var p = getProperty(state.propertyId);
propertyDisp.textContent = p.name;
propertyPop.querySelectorAll('.hbw-prop-option').forEach(function (b) {
b.classList.toggle('hbw-is-active', b.dataset.propId === state.propertyId);
});
}
propertyField.addEventListener('click', function (e) {
if (propertyPop.contains(e.target)) return;
var wasOpen = propertyPop.classList.contains('hbw-is-open');
closeAllPopovers();
if (!wasOpen) {
propertyPop.classList.add('hbw-is-open');
propertyField.classList.add('hbw-is-open');
}
e.stopPropagation();
});
renderPropertyOptions();
updatePropertyDisplay();
// Dates
var today = new Date(); today.setHours(0, 0, 0, 0);
state.checkin = addDays(today, CONFIG.defaultCheckinOffsetDays);
state.checkout = addDays(state.checkin, CONFIG.defaultStayLengthDays);
checkinInput.min = toISO(today);
checkinInput.value = toISO(state.checkin);
checkoutInput.min = toISO(addDays(state.checkin, 1));
checkoutInput.value = toISO(state.checkout);
checkinDisp.textContent = formatDisplay(state.checkin);
checkoutDisp.textContent = formatDisplay(state.checkout);
function openPicker(input) {
try {
if (typeof input.showPicker === 'function') input.showPicker();
else input.focus();
} catch (err) { input.focus(); }
}
checkinInput.addEventListener('click', function () { openPicker(checkinInput); });
checkoutInput.addEventListener('click', function () { openPicker(checkoutInput); });
checkinInput.addEventListener('focus', function () { openPicker(checkinInput); });
checkoutInput.addEventListener('focus', function () { openPicker(checkoutInput); });
checkinInput.addEventListener('change', function () {
var d = parseISO(checkinInput.value); if (!d) return;
state.checkin = d;
checkinDisp.textContent = formatDisplay(d);
var minCheckout = addDays(d, 1);
checkoutInput.min = toISO(minCheckout);
if (state.checkout <= d) {
state.checkout = minCheckout;
checkoutInput.value = toISO(minCheckout);
checkoutDisp.textContent = formatDisplay(minCheckout);
}
});
checkoutInput.addEventListener('change', function () {
var d = parseISO(checkoutInput.value); if (!d) return;
if (d 0) {
t += ' \u00B7 ' + state.children + ' ' + (state.children === 1 ? 'Baby' : 'Babies');
}
guestsDisp.textContent = t;
adultsCount.textContent = state.adults;
childrenCount.textContent = state.children;
root.querySelectorAll('.hbw-step-btn').forEach(function (btn) {
var type = btn.dataset.type, op = btn.dataset.op, d = false;
if (type === 'adults' && op === 'inc') d = state.adults >= CONFIG.maxAdults;
if (type === 'adults' && op === 'dec') d = state.adults = CONFIG.maxChildren;
if (type === 'children' && op === 'dec') d = state.children <= 0;
btn.disabled = d;
});
}
root.querySelectorAll('.hbw-step-btn').forEach(function (btn) {
btn.addEventListener('click', function (e) {
e.stopPropagation();
var type = btn.dataset.type, op = btn.dataset.op;
if (type === 'adults') {
if (op === 'inc' && state.adults CONFIG.minAdults) state.adults--;
} else if (type === 'children') {
if (op === 'inc' && state.children 0) state.children--;
}
updateGuestsDisplay();
});
});
updateGuestsDisplay();
// Global close
document.addEventListener('click', function (e) {
if (!propertyField.contains(e.target) && !guestsField.contains(e.target)) {
closeAllPopovers();
}
});
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') closeAllPopovers();
});
// Promo
promoInput.addEventListener('click', function (e) { e.stopPropagation(); });
promoInput.addEventListener('input', function () { state.promo = promoInput.value.trim(); });
// Booking redirect — uses selected property's baseUrl
cta.addEventListener('click', function () {
var property = getProperty(state.propertyId);
var params = new URLSearchParams();
Object.keys(CONFIG.extraParams).forEach(function (k) {
params.set(k, CONFIG.extraParams[k]);
});
params.set(CONFIG.paramNames.checkin, toISO(state.checkin));
params.set(CONFIG.paramNames.checkout, toISO(state.checkout));
params.set(CONFIG.paramNames.guests, String(state.adults + state.children));
if (state.promo) params.set(CONFIG.paramNames.promo, state.promo);
var separator = property.baseUrl.indexOf('?') > -1 ? '&' : '?';
var url = property.baseUrl + separator + params.toString();
if (CONFIG.openInNewTab) window.open(url, '_blank', 'noopener,noreferrer');
else window.location.href = url;
});
})();
