/*
* Moteur de réservation – UI moderne (front)
*
* Objectif:
* - Une identité plus douce: cartes, ombres légères, bords arrondis
* - Des interactions plus modernes: transitions en fondu
* - Datepicker plus lisible et plus "premium"
*
* NB: On reste volontairement "neutre" sur les couleurs pour ne pas casser
* les réglages de couleurs existants (boutons / champs).
*/
/* -----------------------------
Tokens (scopés)
------------------------------ */
.hbook-wrapper,
.hb-accom-listing-shortcode-wrapper,
.hb-payment-link-form-wrapper {
/* Elementor-friendly typography tokens (fallback to theme defaults) */
/* Some themes expose these variables (example: --font-primary / --font-secondary).
We use them as fallbacks BEFORE Elementor globals.
*/
--hb-ui-font-family: var(--font-primary, var(--e-global-typography-text-font-family, inherit));
--hb-ui-font-size: var(--e-global-typography-text-font-size, 16px);
--hb-ui-font-weight: var(--e-global-typography-text-font-weight, 400);
--hb-ui-heading-font-family: var(--font-secondary, var(--e-global-typography-primary-font-family, var(--hb-ui-font-family)));
--hb-ui-heading-font-weight: var(--e-global-typography-primary-font-weight, 700);
--hb-ui-heading-font-size: var(--e-global-typography-primary-font-size, calc(var(--hb-ui-font-size) * 1.25));
--hb-ui-color-text: var(--e-global-color-text, #0f172a);
/* Muted + borders: keep them neutral (Elementor secondary can be a strong brand color) */
--hb-ui-color-muted: rgba(15, 23, 42, 0.62);
/* Default border color requested: #e5e0e0 */
--hb-ui-color-border: #e5e0e0;
/* Primary action color (Elementor accent if available, else neutral dark) */
--hb-ui-primary: var(--e-global-color-accent, #111827);
--hb-ui-primary-contrast: #ffffff;
/* Form controls */
--hb-ui-control-height: 44px;
--hb-ui-control-padding-x: 14px;
--hb-ui-control-icon-padding: 46px;
--hb-ui-radius: 16px;
--hb-ui-radius-sm: 12px;
--hb-ui-radius-xs: 10px;
--hb-ui-border: var(--hb-ui-color-border);
--hb-ui-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
--hb-ui-shadow-sm: 0 12px 28px rgba(15, 23, 42, 0.08);
--hb-ui-shadow-xs: 0 8px 18px rgba(15, 23, 42, 0.06);
--hb-ui-bg: #ffffff;
--hb-ui-bg-soft: rgba(15, 23, 42, 0.04);
--hb-ui-text: var(--hb-ui-color-text);
--hb-ui-muted: var(--hb-ui-color-muted);
--hb-ui-focus: rgba(14, 165, 233, 0.35);
}
/* Base typography inside the booking engine wrappers */
.hbook-wrapper,
.hb-accom-listing-shortcode-wrapper,
.hb-payment-link-form-wrapper {
font-family: var(--hb-ui-font-family);
font-size: var(--hb-ui-font-size);
font-weight: var(--hb-ui-font-weight);
color: var(--hb-ui-text);
}
/* Screen-reader only utility */
.hb-sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
white-space: nowrap !important;
}
/* -----------------------------
Inputs / Buttons
------------------------------ */
.hbook-wrapper input[type="text"],
.hbook-wrapper input[type="number"],
.hbook-wrapper input[type="email"],
.hbook-wrapper input[type="tel"],
.hbook-wrapper select,
.hbook-wrapper textarea,
.hb-payment-link-form-wrapper input[type="text"],
.hb-payment-link-form-wrapper input[type="number"],
.hb-payment-link-form-wrapper input[type="email"],
.hb-payment-link-form-wrapper input[type="tel"],
.hb-payment-link-form-wrapper select,
.hb-payment-link-form-wrapper textarea {
border-radius: var(--hb-ui-radius-sm);
padding: 12px 14px;
border-width: 1px;
border-style: solid;
border-color: var(--hb-ui-border);
background: var(--hb-ui-bg);
box-shadow: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
/* Consistent sizing (search form & key actions)
We only apply fixed heights when helper classes are present, to avoid
unexpectedly affecting third-party layouts.
*/
.hbook-wrapper .hb-ui-control,
.hb-accom-listing-shortcode-wrapper .hb-ui-control,
.hb-payment-link-form-wrapper .hb-ui-control {
box-sizing: border-box;
height: var(--hb-ui-control-height);
min-height: var(--hb-ui-control-height);
padding: 0 var(--hb-ui-control-padding-x);
font-family: var(--hb-ui-font-family);
font-size: var(--hb-ui-font-size);
font-weight: var(--hb-ui-font-weight);
}
.hbook-wrapper input.hb-ui-control,
.hb-accom-listing-shortcode-wrapper input.hb-ui-control,
.hb-payment-link-form-wrapper input.hb-ui-control {
line-height: calc(var(--hb-ui-control-height) - 2px);
}
.hbook-wrapper .hb-ui-control--date {
padding-left: var(--hb-ui-control-icon-padding);
}
.hbook-wrapper .hb-ui-control--people {
padding-left: var(--hb-ui-control-icon-padding);
}
.hbook-wrapper .hb-ui-btn,
.hb-accom-listing-shortcode-wrapper .hb-ui-btn,
.hb-payment-link-form-wrapper .hb-ui-btn {
padding-left: 18px;
padding-right: 18px;
}
.hbook-wrapper input[type="text"]:focus,
.hbook-wrapper input[type="number"]:focus,
.hbook-wrapper input[type="email"]:focus,
.hbook-wrapper input[type="tel"]:focus,
.hbook-wrapper select:focus,
.hbook-wrapper textarea:focus,
.hb-payment-link-form-wrapper input[type="text"]:focus,
.hb-payment-link-form-wrapper input[type="number"]:focus,
.hb-payment-link-form-wrapper input[type="email"]:focus,
.hb-payment-link-form-wrapper input[type="tel"]:focus,
.hb-payment-link-form-wrapper select:focus,
.hb-payment-link-form-wrapper textarea:focus {
outline: none;
border-color: rgba(14, 165, 233, 0.55);
box-shadow: 0 0 0 4px var(--hb-ui-focus);
}
/* -----------------------------
Country select (Selectize)
Fix: dropdown/input was visually higher than other fields
------------------------------ */
.hbook-wrapper .hb-country-iso-select.selectize-control .selectize-input {
/* Keep it aligned with the other form fields.
We do NOT rely on a fixed line-height, because some themes inject inline styles
(e.g. line-height: 56px) which can push the text too high.
*/
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
height: auto !important;
min-height: var(--hb-ui-control-height) !important;
line-height: 1.2 !important;
padding: 12px var(--hb-ui-control-padding-x) !important;
border-radius: var(--hb-ui-radius-sm) !important;
border-color: var(--hb-ui-border) !important;
background: var(--hb-ui-bg) !important;
box-shadow: none !important;
}
.hbook-wrapper .hb-country-iso-select.selectize-control .selectize-input input {
height: auto !important;
line-height: 1.2 !important;
padding: 0 !important;
margin: 0 !important;
}
.hbook-wrapper .hb-country-iso-select.selectize-control.single .selectize-input:after {
right: 14px;
}
.hbook-wrapper .hb-country-iso-select.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
}
.hbook-wrapper .hb-country-iso-select.selectize-dropdown {
border-radius: var(--hb-ui-radius-sm) !important;
border-color: var(--hb-ui-border) !important;
}
.hbook-wrapper .hb-country-iso-select.selectize-dropdown .option {
padding: 10px var(--hb-ui-control-padding-x);
}
.hbook-wrapper input[type="submit"],
.hb-accom-listing-shortcode-wrapper input[type="submit"],
.hb-payment-link-form-wrapper input[type="submit"] {
-webkit-appearance: none;
appearance: none;
background: var(--hb-ui-primary);
color: var(--hb-ui-primary-contrast);
border: 1px solid transparent;
cursor: pointer;
box-shadow: var(--hb-ui-shadow-xs);
border-radius: var(--hb-ui-radius-sm);
box-sizing: border-box;
/* Avoid forcing a fixed height + large line-height.
Some fonts (and some themes) make the text look "too low".
Padding-based sizing is more robust.
*/
height: auto;
min-height: var(--hb-ui-control-height);
padding: 13px 18px;
font-family: var(--hb-ui-font-family);
font-size: var(--hb-ui-font-size);
font-weight: 700;
line-height: 1.1;
white-space: nowrap;
transition: filter 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.hbook-wrapper input[type="submit"][disabled],
.hb-accom-listing-shortcode-wrapper input[type="submit"][disabled],
.hb-payment-link-form-wrapper input[type="submit"][disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.hbook-wrapper input[type="submit"]:hover,
.hb-accom-listing-shortcode-wrapper input[type="submit"]:hover,
.hb-payment-link-form-wrapper input[type="submit"]:hover {
filter: brightness(0.97);
}
.hbook-wrapper input[type="submit"]:active,
.hb-accom-listing-shortcode-wrapper input[type="submit"]:active,
.hb-payment-link-form-wrapper input[type="submit"]:active {
transform: translateY(1px);
}
/* -----------------------------
Step navigation (Next / Previous)
------------------------------ */
.hbook-wrapper .hb-step-button{
/* Keep the CTA visually anchored at the bottom of each step */
margin: 22px 0 0;
padding: 0;
clear: both;
width: 100%;
display: flex;
justify-content: flex-end;
}
.hbook-wrapper .hb-step-button.hb-previous-step{
justify-content: flex-start;
}
/* Previous step is a secondary action (outline) */
.hbook-wrapper .hb-step-button.hb-previous-step input[type="submit"]{
background: transparent;
border-color: var(--hb-ui-primary);
color: var(--hb-ui-primary);
box-shadow: none;
}
.hbook-wrapper .hb-step-button.hb-previous-step input[type="submit"]:hover{
background: var(--hb-ui-bg-soft);
}
.hbook-wrapper .hb-step-button input[type="submit"]{
width: auto;
min-width: 180px;
}
@media (max-width: 600px){
.hbook-wrapper .hb-step-button{
justify-content: stretch;
}
.hbook-wrapper .hb-step-button input[type="submit"]{
width: 100%;
min-width: 0;
}
}
/* -----------------------------
Search form layout (booking form)
------------------------------ */
.hbook-wrapper .hb-booking-search-form {
background: var(--hb-ui-bg);
border: none;
border-radius: var(--hb-ui-radius);
box-shadow: var(--hb-ui-shadow-xs);
padding: 16px;
}
/* Ensure the search form title is visible (some themes hide .hb-title by default) */
.hbook-wrapper .hb-title.hb-title-search-form {
display: block !important;
}
/* Make the search fields feel modern with flex + gap (while keeping compatibility) */
.hbook-wrapper .hb-search-fields {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
}
.hbook-wrapper p.hb-check-dates-wrapper,
.hbook-wrapper p.hb-accom-number-wrapper,
.hbook-wrapper p.hb-people-wrapper,
.hbook-wrapper p.hb-search-button-wrapper {
float: none;
margin-right: 0;
margin-bottom: 0;
}
.hbook-wrapper .hb-search-fields > p {
flex: 1 1 180px;
min-width: 180px;
}
.hbook-wrapper .hb-search-submit-wrapper {
flex: 0 0 220px;
min-width: 220px;
}
@media (max-width: 720px) {
.hbook-wrapper .hb-search-fields > p {
min-width: 150px;
}
.hbook-wrapper .hb-search-submit-wrapper {
flex: 1 1 100%;
min-width: 100%;
}
}
/* -----------------------------
Datepicker triggers (icons inside date fields)
------------------------------ */
.hbook-wrapper .hb-check-dates-wrapper {
position: relative;
}
/* Date inputs (calendar icon on the left) */
.hbook-wrapper .hb-input-datepicker {
padding-left: var(--hb-ui-control-icon-padding);
padding-right: var(--hb-ui-control-padding-x);
}
.hbook-wrapper .hb-datepick-check-in-out-trigger {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: auto;
left: 10px;
bottom: calc((var(--hb-ui-control-height) - 34px) / 2);
width: 34px;
height: 34px;
border-radius: var(--hb-ui-radius-xs);
cursor: pointer;
color: var(--hb-ui-muted);
background: transparent;
transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.hbook-wrapper .hb-datepick-check-in-out-trigger:before {
content: 'calendar_month';
font-family: 'Material Symbols Outlined';
font-size: 22px;
line-height: 1;
font-variation-settings:
'FILL' 0,
'wght' 200,
'GRAD' 0,
'opsz' 24;
-webkit-font-smoothing: antialiased;
}
.hbook-wrapper .hb-datepick-check-in-out-trigger:hover {
background: var(--hb-ui-bg-soft);
color: var(--hb-ui-text);
}
.hbook-wrapper .hb-datepick-check-in-out-trigger:active {
transform: translateY(1px);
}
/* -----------------------------
Datepicker popup (jq-datepick)
------------------------------ */
.hb-datepick-popup-wrapper {
background: var(--hb-ui-bg);
border: 1px solid var(--hb-ui-border);
border-radius: var(--hb-ui-radius);
box-shadow: var(--hb-ui-shadow);
overflow: hidden;
}
.hb-datepick-legend {
background: rgba(15, 23, 42, 0.035);
border-bottom: 1px solid var(--hb-ui-border);
padding: 10px 44px 10px 12px;
font-size: 13px;
color: var(--hb-ui-muted);
}
.hb-dp-month {
padding: 6px 10px 10px;
width: 300px;
}
.hb-dp-month-header {
font-size: 16px;
font-weight: 700;
line-height: 44px;
color: var(--hb-ui-text);
}
.hb-dp-week-header {
font-size: 11px;
letter-spacing: 0.06em;
color: var(--hb-ui-muted);
margin-top: 0;
}
.hb-dp-week-header div {
padding-bottom: 6px;
}
.hb-dp-day {
height: 38px;
line-height: 36px;
}
.hb-dp-day > a,
.hb-dp-day > span {
border-radius: 10px;
transition: background 140ms ease, color 140ms ease;
}
.hb-dp-day > a:hover {
background: var(--hb-ui-bg-soft);
}
.hb-dp-today > a {
box-shadow: inset 0 0 0 2px rgba(14, 165, 233, 0.35);
}
.hb-dp-selected > a,
.hb-dp-highlight > a {
background: rgba(14, 165, 233, 0.16);
color: var(--hb-ui-text);
font-weight: 700;
}
.hb-dp-day-check-in > a,
.hb-dp-day-check-out > a {
background: rgba(14, 165, 233, 0.22);
font-weight: 800;
}
.hb-dp-cmd-wrapper a {
border-radius: 999px;
width: 34px;
height: 34px;
line-height: 32px;
transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
}
.hb-dp-cmd-wrapper a:hover:not(.hb-dp-disabled) {
background: var(--hb-ui-bg-soft);
}
.hb-dp-cmd-wrapper a:active:not(.hb-dp-disabled) {
transform: translateY(1px);
}
/* -----------------------------
Accommodation cards (booking results)
------------------------------ */
.hbook-wrapper .hb-accom {
border: none;
border-radius: var(--hb-ui-radius);
box-shadow: var(--hb-ui-shadow-xs);
background: var(--hb-ui-bg);
padding: 16px;
margin-bottom: 18px;
}
/* Add breathing room before the very first result card (otherwise it can look "too glued" to the header/summary) */
.hbook-wrapper.hb-ui-modern .hb-accom-list .hb-accom:first-child {
margin-top: 18px;
}
/* Rounded thumbnails inside booking results when rounded corners are enabled */
.hbook-wrapper.hb-ui-modern.hb-kit-shape-rounded img.hb-accom-img {
border-radius: var(--hb-ui-radius-sm);
}
.hbook-wrapper .hb-accom:hover {
box-shadow: var(--hb-ui-shadow-sm);
}
.hbook-wrapper .hb-accom-title {
font-size: 20px;
font-weight: 800;
color: var(--hb-ui-text);
margin-bottom: 6px;
}
.hbook-wrapper .hb-accom-desc {
color: var(--hb-ui-muted);
}
.hbook-wrapper .hb-accom-price-total {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
}
.hbook-wrapper .hb-accom-price {
font-weight: 900;
font-size: 22px;
}
.hbook-wrapper .hb-select-accom-wrapper {
margin-top: 12px;
}
/* -----------------------------
Accommodation listing shortcode
------------------------------ */
.hb-accom-listing-column {
padding: 12px;
margin-bottom: 28px;
}
.hb-accom-listing-item {
border: none;
border-radius: var(--hb-ui-radius);
box-shadow: var(--hb-ui-shadow-xs);
background: var(--hb-ui-bg);
overflow: hidden;
}
.hb-accom-listing-desc-wrapper {
padding: 14px 14px 0;
}
.hb-accom-listing-thumb {
float: none;
width: 100%;
height: auto;
display: block;
margin: 0;
border-radius: calc(var(--hb-ui-radius) - 2px);
object-fit: cover;
}
.hb-accom-listing-item h2,
.hb-accom-listing-item h3,
.hb-accom-listing-item h4 {
margin-top: 6px;
margin-bottom: 6px;
}
.hb-accom-listing-actions-wrapper {
padding: 0 14px 14px;
gap: 10px;
}
.hb-accom-listing-actions-wrapper p {
margin: 0;
}
.hb-accom-listing-booking-form {
padding: 0 14px 14px;
}
/* -----------------------------
Features icons (front)
------------------------------ */
.hb-accom-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 12px;
padding: 0;
list-style: none;
}
.hb-accom-feature {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid var(--hb-ui-border);
border-radius: 999px;
background: rgba(15, 23, 42, 0.03);
color: var(--hb-ui-muted);
font-size: 13px;
line-height: 1;
}
.hb-accom-feature .hb-mi {
font-size: 18px;
}
.hb-accom-feature-value {
font-weight: 800;
color: var(--hb-ui-text);
}
/* Smaller features chips on very narrow screens */
@media (max-width: 420px) {
.hb-accom-feature {
padding: 5px 8px;
font-size: 12px;
}
.hb-accom-feature .hb-mi {
font-size: 16px;
}
}
/* ============================================================
Booky UI refinements (2.1.98)
- Consistent widths between search and results
- Left icons in date & people fields
- Search form: no shadow
- Features list: 2 columns (responsive)
- Design kits (font + corners) applied via wrapper classes
- Extra services: toggle-style cards
- Buttons: unified primary/secondary styling
- Selectize country field aligned with other inputs
============================================================ */
/* Design kit: fonts */
.hb-kit-font-system {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.hb-kit-font-serif {
font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}
/* Design kit: corners */
.hb-kit-shape-square {
--hb-ui-radius: 0px;
--hb-ui-radius-sm: 0px;
--hb-ui-radius-xs: 0px;
}
.hb-kit-shape-rounded {
--hb-ui-radius: 16px;
--hb-ui-radius-sm: 12px;
--hb-ui-radius-xs: 10px;
}
/* Optional force mode: make the chosen font hard to override */
.hb-kit-force.hb-kit-font-system {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
.hb-kit-force.hb-kit-font-serif {
font-family: ui-serif, Georgia, "Times New Roman", Times, serif !important;
}
/* Consistent width between search + results */
.hbook-wrapper.hbook-wrapper-booking-form {
width: 100%;
max-width: var(--hb-ui-max-width, 1100px);
margin-left: auto;
margin-right: auto;
}
/* Ensure children stretch full-width inside the wrapper */
.hbook-wrapper.hbook-wrapper-booking-form .hb-booking-search-form,
.hbook-wrapper.hbook-wrapper-booking-form .hb-searched-summary,
.hbook-wrapper.hbook-wrapper-booking-form .hb-accom-list {
width: 100%;
box-sizing: border-box;
}
/* Search summary block (after search) */
.hbook-wrapper .hb-searched-summary {
/*
* Default state is hidden (classic Booky CSS uses display:none).
* booking-form.js will display it after a successful search.
*/
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
padding: 0;
margin: 0 0 16px;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
.hbook-wrapper .hb-searched-summary p {
margin: 0;
width: auto;
display: flex;
align-items: baseline;
gap: 6px;
color: var(--hb-ui-muted);
font-family: var(--hb-ui-font-family);
font-size: calc(var(--hb-ui-font-size) * 0.95);
}
.hbook-wrapper .hb-searched-summary p span {
color: var(--hb-ui-text);
font-weight: 600;
}
.hbook-wrapper .hb-searched-summary .hb-change-search-wrapper {
margin-left: auto;
}
.hbook-wrapper .hb-searched-summary .hb-change-search-wrapper input[type="submit"] {
height: auto;
min-height: var(--hb-ui-control-height);
padding: 13px 16px;
border: none;
border-radius: var(--hb-ui-radius-xs);
background: var(--hb-ui-primary, #0ea5e9);
color: #fff;
font-family: var(--hb-ui-font-family);
font-size: var(--hb-ui-font-size);
font-weight: 700;
line-height: 1.1;
cursor: pointer;
box-shadow: var(--hb-ui-shadow-xs);
transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.hbook-wrapper .hb-searched-summary .hb-change-search-wrapper input[type="submit"]:hover {
filter: brightness(0.97);
}
/* Search form card: no hard border, subtle shadow */
.hbook-wrapper .hb-booking-search-form {
border: none;
box-shadow: var(--hb-ui-shadow-xs);
}
/* Datepicker: icon on the left */
.hbook-wrapper .hb-check-dates-wrapper {
position: relative;
}
.hbook-wrapper .hb-check-dates-wrapper .hb-datepick-check-in-out-trigger {
left: 10px;
right: auto;
pointer-events: auto;
}
.hbook-wrapper .hb-check-dates-wrapper .hb-input-datepicker {
padding-left: var(--hb-ui-control-icon-padding);
padding-right: var(--hb-ui-control-padding-x);
}
/* Adults / children: left icon inside the field */
.hbook-wrapper p.hb-people-wrapper {
position: relative;
}
.hbook-wrapper p.hb-people-wrapper select {
padding-left: var(--hb-ui-control-icon-padding);
}
.hbook-wrapper p.hb-people-wrapper::before {
position: absolute;
left: 10px;
bottom: calc((var(--hb-ui-control-height) - 34px) / 2);
width: 34px;
height: 34px;
border-radius: var(--hb-ui-radius-xs);
display: flex;
align-items: center;
justify-content: center;
color: var(--hb-ui-muted);
font-family: 'Material Symbols Outlined';
font-size: 22px;
line-height: 1;
font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
pointer-events: none;
}
.hbook-wrapper p.hb-people-wrapper-adults::before {
content: 'person';
}
.hbook-wrapper p.hb-people-wrapper-children::before {
content: 'child_care';
}
/* Features: 2-column list like the requested screenshot */
.hbook-wrapper .hb-accom-features,
.hb-accom-listing-shortcode-wrapper .hb-accom-features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Requested: vertical spacing between features = 4px */
gap: 4px 10px;
margin: 12px 0 14px;
padding: 0;
list-style: none;
}
.hbook-wrapper .hb-accom-feature,
.hb-accom-listing-shortcode-wrapper .hb-accom-feature {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
border: none;
border-radius: 0;
background: transparent;
color: var(--hb-ui-text);
font-family: var(--hb-ui-font-family);
font-size: calc(var(--hb-ui-font-size) * 0.95);
line-height: 1.2;
}
.hbook-wrapper .hb-accom-feature .hb-mi,
.hb-accom-listing-shortcode-wrapper .hb-accom-feature .hb-mi {
font-size: 22px;
line-height: 1;
color: var(--hb-ui-text);
opacity: 0.9;
}
.hbook-wrapper .hb-accom-feature-text,
.hb-accom-listing-shortcode-wrapper .hb-accom-feature-text {
min-width: 0;
}
/* Responsive: switch to 1 column on small screens */
@media (max-width: 640px) {
.hbook-wrapper .hb-accom-features,
.hb-accom-listing-shortcode-wrapper .hb-accom-features {
grid-template-columns: 1fr;
}
}
/* Extra services: optional image per service */
.hbook-wrapper .hb-option-label {
display: inline-flex;
align-items: center;
gap: 10px;
}
.hbook-wrapper .hb-option-image {
width: 34px;
height: 34px;
flex: 0 0 34px;
border-radius: var(--hb-ui-radius-xs);
overflow: hidden;
background: var(--hb-ui-bg-soft);
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}
.hbook-wrapper .hb-option-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hbook-wrapper .hb-option-label-text {
min-width: 0;
}
/* -----------------------------
Extra services selection (front)
- IMPORTANT: keep the native input types
(checkbox / radio / quantity / select)
- We only improve layout + spacing.
------------------------------ */
.hbook-wrapper .hb-title-extra {
font-family: var(--hb-ui-heading-font-family);
font-weight: var(--hb-ui-heading-font-weight);
font-size: calc(var(--hb-ui-heading-font-size) * 1.05);
margin: 0 0 16px;
}
.hbook-wrapper .hb-options-form {
margin-top: 8px;
}
/* Card wrappers for each type */
.hbook-wrapper .hb-options-form .hb-single-option,
.hbook-wrapper .hb-options-form .hb-quantity-option,
.hbook-wrapper .hb-options-form .hb-multiple-option {
margin: 10px 0;
padding: 12px 14px;
border: 1px solid var(--hb-ui-border);
border-radius: var(--hb-ui-radius);
background: var(--hb-ui-bg);
box-shadow: var(--hb-ui-shadow-xs);
}
.hbook-wrapper .hb-options-form .hb-single-option:hover,
.hbook-wrapper .hb-options-form .hb-quantity-option:hover,
.hbook-wrapper .hb-options-form .hb-multiple-option:hover {
box-shadow: var(--hb-ui-shadow-sm);
}
/* Remove legacy
layout gaps inside the extras form */
.hbook-wrapper .hb-options-form .hb-quantity-option br,
.hbook-wrapper .hb-options-form .hb-multiple-option br,
.hbook-wrapper .hb-options-form br.hb-options-gap {
display: none;
}
/* Checkbox + radio rows */
.hbook-wrapper .hb-options-form .hb-checkbox-wrapper,
.hbook-wrapper .hb-options-form .hb-radio-wrapper {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.hbook-wrapper .hb-options-form .hb-checkbox-wrapper input[type="checkbox"],
.hbook-wrapper .hb-options-form .hb-radio-wrapper input[type="radio"] {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--hb-ui-primary);
}
.hbook-wrapper .hb-options-form .hb-checkbox-wrapper label,
.hbook-wrapper .hb-options-form .hb-radio-wrapper label {
flex: 1;
min-width: 0;
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}
/* Quantity options: label on the left, quantity input on the right */
.hbook-wrapper .hb-options-form .hb-quantity-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.hbook-wrapper .hb-options-form .hb-quantity-option label {
margin: 0;
flex: 1;
}
.hbook-wrapper .hb-options-form .hb-quantity-option input[type="number"] {
width: 120px;
max-width: 100%;
}
/* Multiple options: add a bit of spacing between the group title and first radio */
.hbook-wrapper .hb-options-form .hb-multiple-option .hb-radio-wrapper {
padding: 8px 0;
}
.hbook-wrapper .hb-options-form .hb-multiple-option .hb-radio-wrapper:first-of-type {
margin-top: 10px;
}
/* Make the service name feel consistent with accommodation/search typography */
.hbook-wrapper .hb-options-form .hb-option-label b {
font-family: var(--hb-ui-heading-font-family);
font-weight: 700;
}
/* Accommodation card typography (title / description / price / buttons)
Uses Elementor global variables when available.
*/
.hbook-wrapper .hb-ui-accom-title,
.hb-accom-listing-shortcode-wrapper .hb-ui-accom-title {
font-family: var(--hb-ui-heading-font-family);
font-weight: var(--hb-ui-heading-font-weight);
/* Requested: bigger accommodation name */
font-size: calc(var(--hb-ui-heading-font-size) * 1.22);
line-height: 1.15;
color: var(--hb-ui-text);
margin: 0 0 10px;
}
.hbook-wrapper .hb-ui-accom-title a,
.hb-accom-listing-shortcode-wrapper .hb-ui-accom-title a {
color: inherit;
text-decoration: none;
}
.hbook-wrapper .hb-ui-accom-title a:hover,
.hb-accom-listing-shortcode-wrapper .hb-ui-accom-title a:hover {
text-decoration: underline;
}
.hbook-wrapper .hb-ui-accom-desc,
.hb-accom-listing-shortcode-wrapper .hb-ui-accom-desc {
font-family: var(--hb-ui-font-family);
font-size: var(--hb-ui-font-size);
font-weight: var(--hb-ui-font-weight);
line-height: 1.55;
color: var(--hb-ui-color-muted);
margin: 0;
}
.hbook-wrapper .hb-ui-accom-price,
.hb-accom-listing-shortcode-wrapper .hb-ui-accom-price {
font-family: var(--hb-ui-heading-font-family);
font-weight: 700;
/* Requested: bigger price */
font-size: calc(var(--hb-ui-font-size) * 1.75);
color: var(--hb-ui-text);
}
.hbook-wrapper .hb-ui-accom-price-caption,
.hb-accom-listing-shortcode-wrapper .hb-ui-accom-price-caption {
font-family: var(--hb-ui-font-family);
font-size: calc(var(--hb-ui-font-size) * 0.95);
font-weight: var(--hb-ui-font-weight);
color: var(--hb-ui-color-muted);
}
.hbook-wrapper .hb-ui-accom-btn,
.hb-accom-listing-shortcode-wrapper .hb-ui-accom-btn {
font-family: var(--hb-ui-font-family);
font-size: var(--hb-ui-font-size);
font-weight: var(--hb-ui-font-weight);
}
/* Force mode: ensure corners are applied even if theme overrides */
.hb-kit-force .hb-booking-search-form,
.hb-kit-force .hb-searched-summary,
.hb-kit-force .hb-accom,
.hb-kit-force .hb-accom-listing-item,
.hb-payment-link-form-wrapper.hb-kit-force {
border-radius: var(--hb-ui-radius) !important;
}
/* Force mode: remove hard borders on engine cards (clean SaaS look) */
.hb-kit-force .hb-booking-search-form,
.hb-kit-force .hb-searched-summary,
.hb-kit-force .hb-accom,
.hb-kit-force .hb-accom-listing-item {
border: none !important;
}
.hbook-wrapper.hb-kit-force input[type="text"],
.hbook-wrapper.hb-kit-force input[type="number"],
.hbook-wrapper.hb-kit-force input[type="email"],
.hbook-wrapper.hb-kit-force input[type="tel"],
.hbook-wrapper.hb-kit-force select,
.hbook-wrapper.hb-kit-force textarea,
.hb-payment-link-form-wrapper.hb-kit-force input[type="text"],
.hb-payment-link-form-wrapper.hb-kit-force input[type="number"],
.hb-payment-link-form-wrapper.hb-kit-force input[type="email"],
.hb-payment-link-form-wrapper.hb-kit-force input[type="tel"],
.hb-payment-link-form-wrapper.hb-kit-force select,
.hb-payment-link-form-wrapper.hb-kit-force textarea {
border-radius: var(--hb-ui-radius-sm) !important;
}
.hbook-wrapper.hb-kit-force input[type="submit"],
.hb-payment-link-form-wrapper.hb-kit-force input[type="submit"],
.hb-kit-force .hb-accom input[type="submit"],
.hb-kit-force .hb-accom-listing-actions-wrapper input[type="submit"] {
border-radius: var(--hb-ui-radius-xs) !important;
}
/* Force mode: ensure Elementor (or theme) styles do not break our layout */
.hbook-wrapper.hb-kit-force .hb-ui-control,
.hb-accom-listing-shortcode-wrapper.hb-kit-force .hb-ui-control,
.hb-payment-link-form-wrapper.hb-kit-force .hb-ui-control {
box-sizing: border-box;
height: var(--hb-ui-control-height) !important;
min-height: var(--hb-ui-control-height) !important;
padding: 0 var(--hb-ui-control-padding-x) !important;
font-family: var(--hb-ui-font-family) !important;
font-size: var(--hb-ui-font-size) !important;
font-weight: var(--hb-ui-font-weight) !important;
}
.hbook-wrapper.hb-kit-force input.hb-ui-control,
.hb-accom-listing-shortcode-wrapper.hb-kit-force input.hb-ui-control,
.hb-payment-link-form-wrapper.hb-kit-force input.hb-ui-control {
line-height: calc(var(--hb-ui-control-height) - 2px) !important;
}
.hbook-wrapper.hb-kit-force .hb-ui-control--date {
padding-left: var(--hb-ui-control-icon-padding) !important;
padding-right: var(--hb-ui-control-padding-x) !important;
}
.hbook-wrapper.hb-kit-force .hb-ui-control--people {
padding-left: var(--hb-ui-control-icon-padding) !important;
}
.hbook-wrapper.hb-kit-force .hb-ui-btn,
.hb-accom-listing-shortcode-wrapper.hb-kit-force .hb-ui-btn,
.hb-payment-link-form-wrapper.hb-kit-force .hb-ui-btn {
padding-left: 18px !important;
padding-right: 18px !important;
}
.hb-kit-force .hb-ui-accom-title {
font-family: var(--hb-ui-heading-font-family) !important;
font-weight: var(--hb-ui-heading-font-weight) !important;
font-size: calc(var(--hb-ui-heading-font-size) * 1.08) !important;
color: var(--hb-ui-text) !important;
}
.hb-kit-force .hb-ui-accom-desc {
font-family: var(--hb-ui-font-family) !important;
font-size: var(--hb-ui-font-size) !important;
font-weight: var(--hb-ui-font-weight) !important;
color: var(--hb-ui-color-muted) !important;
}
.hb-kit-force .hb-ui-accom-price {
font-family: var(--hb-ui-heading-font-family) !important;
font-weight: 700 !important;
font-size: calc(var(--hb-ui-font-size) * 1.45) !important;
color: var(--hb-ui-text) !important;
}
.hb-kit-force .hb-ui-accom-price-caption {
font-family: var(--hb-ui-font-family) !important;
font-size: calc(var(--hb-ui-font-size) * 0.95) !important;
color: var(--hb-ui-color-muted) !important;
}
/* -------------------------------------------------------------------------
* BOOKY — UI tweaks
* ------------------------------------------------------------------------- */
/* Remove search form shadow (cleaner look) */
.hbook-wrapper .hb-booking-search-form{
box-shadow: unset !important;
}
/* Extra services / options: 2 per row on desktop only
IMPORTANT: The