/* Presentation only. Hotellinx continues to own dates, guests and booking. */
.emilia-booking-widget {
    --emilia-accent: #65584a;
    --emilia-accent-hover: #514638;
    --emilia-surface: #e9e7e3;
    --emilia-border: #bcb6a9;
    --emilia-text: #565043;
    --emilia-range: #e5dfd6;
    --emilia-field-height: 58px;
    position: relative;
    z-index: 30;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    color: var(--emilia-text);
    font-family: "Quattrocento Sans", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    text-align: left;
}

/* These classes are added only to Elementor ancestors of this shortcode. */
.elementor .emilia-booking-layer {
    overflow: visible !important;
    z-index: 30 !important;
}

.emilia-booking-widget hlx-searchmask,
.emilia-booking-widget lib-searchmask,
.emilia-booking-widget .searchmask {
    display: block;
    width: 100%;
    color: var(--emilia-text);
    font-family: inherit;
    font-size: inherit;
    background: transparent !important;
}

.emilia-booking-widget *,
.emilia-booking-widget *::before,
.emilia-booking-widget *::after { box-sizing: border-box; }

/* Prevent the theme's all-button pill style from affecting picker controls. */
.emilia-booking-widget button,
.emilia-booking-widget input,
.emilia-booking-widget select {
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}
.emilia-booking-widget button {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--emilia-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}
.emilia-booking-widget button:disabled { cursor: default; }
/* Hello Elementor also styles custom-element hosts carrying type="button".
   Reset the non-interactive host; the actual button keeps its focus ring. */
.emilia-booking-widget p-button {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.emilia-booking-widget :is(button, input, select, [role="button"]):focus-visible {
    outline: 2px solid var(--emilia-accent) !important;
    outline-offset: 3px;
}
.emilia-booking-widget label {
    display: block;
    margin: 0 0 8px !important;
    color: #272520 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    line-height: 1.35 !important;
    text-transform: none !important;
}

.emilia-booking-widget .sm-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px !important;
    background: var(--emilia-surface) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.emilia-booking-widget .sm-container > .row {
    display: grid !important;
    grid-template-columns: minmax(270px, 1.1fr) minmax(285px, 1.4fr) minmax(285px, 1fr);
    gap: 16px;
    align-items: end;
    margin: 0 !important;
}
.emilia-booking-widget .sm-container > .row > *,
.emilia-booking-widget .sm-bookingcode-and-book-button-parentcolumn > .row > * {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}
.emilia-booking-widget .sm-bookingcode-and-book-button-parentcolumn > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: end !important;
    gap: 16px;
    margin: 0 !important;
}
.emilia-booking-widget .sm-bookingcode-column { flex: 1 1 0; }
.emilia-booking-widget .sm-bookingbutton-column { flex: 1 1 0; min-width: 120px !important; }
.emilia-booking-widget .sm-item,
.emilia-booking-widget .sm-book { margin-top: 0 !important; }

.emilia-booking-widget .p-inputtext,
.emilia-booking-widget .occupancy,
.emilia-booking-widget .p-select {
    height: var(--emilia-field-height) !important;
    min-height: var(--emilia-field-height);
    padding: 14px 16px !important;
    color: var(--emilia-text) !important;
    background: #fff !important;
    border: 1px solid var(--emilia-border) !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
}
.emilia-booking-widget input::placeholder { color: #777267; opacity: 1; }
.emilia-booking-widget .p-datepicker { display: flex !important; width: 100%; }
.emilia-booking-widget .p-datepicker-input {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 7px 0 0 7px !important;
    border-right: 0 !important;
    cursor: pointer;
}
.emilia-booking-widget button.p-datepicker-dropdown {
    display: inline-flex !important;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: var(--emilia-field-height) !important;
    background: #fff !important;
    border: 1px solid var(--emilia-border) !important;
    border-radius: 0 7px 7px 0 !important;
}
.emilia-booking-widget .occupancy {
    display: flex;
    align-items: center;
    padding-right: 48px !important;
    cursor: pointer;
}
.emilia-booking-widget .roomPickerArrow {
    display: flex;
    top: 0;
    right: 0;
    height: 100%;
    align-items: center;
}
.emilia-booking-widget .roomPickerArrow button {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}
.emilia-booking-widget .p-button-icon.pi-check { display: none; }
.emilia-booking-widget .sm-book { display: block; width: 100%; }
.emilia-booking-widget .sm-book button,
.emilia-booking-widget [data-testid="close-room-picker"] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px !important;
    width: 100% !important;
    height: var(--emilia-field-height) !important;
    padding: 0 24px !important;
    color: #fff !important;
    background: var(--emilia-accent) !important;
    border: 1px solid var(--emilia-accent) !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
}
.emilia-booking-widget .sm-book button:hover,
.emilia-booking-widget [data-testid="close-room-picker"] button:hover {
    background: var(--emilia-accent-hover) !important;
}

/* Calendar: opaque panel, quiet headings, clear dates and compact arrows. */
.emilia-booking-widget .p-datepicker-panel {
    width: min(760px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    padding: 16px !important;
    color: var(--emilia-text) !important;
    background: #fff !important;
    border: 1px solid #d2cec6 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.emilia-booking-widget .p-datepicker-calendar-container { gap: 16px !important; }
.emilia-booking-widget .p-datepicker-calendar { flex: 1 1 0; min-width: 0; }
.emilia-booking-widget .p-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 0 10px !important;
    background: #fff !important;
    border-bottom: 1px solid #d2cec6;
}
.emilia-booking-widget .p-datepicker-title { display: flex; justify-content: center; gap: 8px; }
.emilia-booking-widget .p-datepicker-header > p-button {
    display: inline-flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
}
.emilia-booking-widget :is(.p-datepicker-select-month, .p-datepicker-select-year) {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    color: var(--emilia-text) !important;
    font-size: 18px !important;
    opacity: 1 !important;
}
.emilia-booking-widget :is(.p-datepicker-prev-button, .p-datepicker-next-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}
.emilia-booking-widget :is(.p-datepicker-prev-button, .p-datepicker-next-button):hover {
    background: #f3f1ee !important;
}
.emilia-booking-widget .p-datepicker-day-view {
    width: 100% !important;
    margin: 8px 0 0 !important;
    table-layout: fixed;
    border-collapse: collapse;
}
.emilia-booking-widget .p-datepicker-day-view th {
    height: 36px;
    padding: 4px 0 !important;
    color: var(--emilia-text);
    background: #fff !important;
    border: 0 !important;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}
.emilia-booking-widget .p-datepicker-day-view td {
    height: 50px;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #efeeeb !important;
}
.emilia-booking-widget .p-datepicker-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px;
    margin: 0 !important;
    padding: 6px 0 !important;
    color: var(--emilia-text);
    border-radius: 0 !important;
    font-size: 16px !important;
    line-height: 1.3;
}
.emilia-booking-widget .p-datepicker-day:not(.p-disabled):not(.p-datepicker-day-selected):not(.p-datepicker-day-selected-range):not(:has(.selected-range-on-hover, .is-selected-arrival)):hover {
    background: #f0ede8 !important;
}
/* Hotellinx previews a range on an inner span, while PrimeNG paints completed
   selections on the outer day. Paint both states on the same full-size cell. */
.emilia-booking-widget .p-datepicker-day-selected-range,
.emilia-booking-widget .p-datepicker-day:has(.selected-range-on-hover) {
    color: var(--emilia-text) !important;
    background: var(--emilia-range) !important;
}
.emilia-booking-widget .p-datepicker-day-selected,
.emilia-booking-widget .p-datepicker-day:has(.is-selected-arrival) {
    color: #fff !important;
    background: var(--emilia-accent) !important;
    opacity: 1 !important;
}
.emilia-booking-widget .p-datepicker-day > div {
    width: 100%;
    color: inherit !important;
    background: transparent !important;
}
.emilia-booking-widget .p-datepicker-day .selected-range-on-hover,
.emilia-booking-widget .p-datepicker-day .is-selected-arrival {
    height: auto !important;
    color: inherit !important;
    background: transparent !important;
}
.emilia-booking-widget .p-datepicker-day:has(.is-selected-arrival) > div {
    opacity: 1 !important;
}
/* Keep one focus ring on the date cell, never on its number or availability dot. */
.emilia-booking-widget .p-datepicker-day :is(div, span) {
    outline: none !important;
    box-shadow: none !important;
}
.emilia-booking-widget .p-datepicker-day:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
.emilia-booking-widget .p-datepicker-day:focus-visible {
    outline: 2px solid var(--emilia-accent) !important;
    outline-offset: -3px;
    box-shadow: none !important;
}
.emilia-booking-widget .p-datepicker-day-selected:focus-visible,
.emilia-booking-widget .p-datepicker-day:has(.is-selected-arrival):focus-visible {
    outline-color: #fff !important;
}
.emilia-booking-widget .dp-legend-container { flex-wrap: wrap; gap: 8px 14px; padding: 16px 0 2px !important; }
.emilia-booking-widget .dp-legend { margin: 0 !important; font-size: 11px !important; }

/* Occupancy popover, including keyboard-hidden closed state. */
.emilia-booking-widget app-room-picker {
    position: absolute !important;
    top: 8px !important;
    left: 0 !important;
    z-index: 1100 !important;
    width: 100% !important;
    min-width: 320px;
    max-width: calc(100vw - 40px);
    max-height: min(620px, 75vh);
    overflow-y: auto;
    color: var(--emilia-text);
    background: var(--emilia-surface) !important;
    border: 1px solid #d2cec6;
    border-radius: 10px;
    box-shadow: none !important;
}
.emilia-booking-widget app-room-picker.roomPickerHidden { display: none !important; }
.emilia-booking-widget .room-occupants { padding: 20px !important; }
.emilia-booking-widget .room-title { margin: 0 0 16px; }
.emilia-booking-widget .room-title label { font-weight: 700 !important; }
.emilia-booking-widget .room-occupants > .row { margin: 0 -6px !important; row-gap: 16px; }
.emilia-booking-widget .room-occupants > .row > * { padding: 0 6px !important; }
.emilia-booking-widget .incrementor input { padding: 12px 40px !important; }
.emilia-booking-widget .incrementor button {
    width: 40px !important;
    height: 44px !important;
    border-radius: 5px !important;
}
.emilia-booking-widget .incrementor button:hover { background: #f3f1ee !important; }
.emilia-booking-widget .incrementor :is(.incrementor-remove, .incrementor-add) { top: 7px !important; }
.emilia-booking-widget .occupancy-footer {
    display: flex;
    position: sticky;
    bottom: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 !important;
    padding: 16px 20px !important;
    background: var(--emilia-surface);
    border-top: 1px solid #c9c3b8;
}
.emilia-booking-widget [data-testid="add-room"] button {
    height: var(--emilia-field-height) !important;
    padding: 0 18px !important;
    border: 1px solid var(--emilia-border) !important;
    border-radius: 999px !important;
}
.emilia-booking-widget .room-picker-header { display: none; }
.emilia-booking-widget .p-select { display: flex; align-items: center; padding: 0 12px !important; }
.emilia-booking-widget .p-select-label { padding: 0 !important; }

/* Keep the loading/failure route until the actual form is usable. */
.emilia-booking-widget .emilia-booking-fallback { margin: 16px 0 0; text-align: center; }
.emilia-booking-widget.emilia-booking-ready .emilia-booking-fallback { display: none !important; }

@media (max-width: 1100px) {
    .emilia-booking-widget .sm-container > .row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .emilia-booking-widget .sm-bookingcode-and-book-button-parentcolumn { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .emilia-booking-widget { --emilia-field-height: 56px; font-size: 16px; }
    .emilia-booking-widget .sm-container { padding: 20px 16px !important; }
    .emilia-booking-widget .sm-container > .row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .emilia-booking-widget .sm-bookingcode-and-book-button-parentcolumn > .row { flex-direction: column; align-items: stretch !important; gap: 18px; }
    .emilia-booking-widget .sm-bookingcode-and-book-button-parentcolumn > .row > * { flex: auto; width: 100% !important; }
    .emilia-booking-widget .sm-book button { width: 100% !important; }
    .emilia-booking-widget .p-inputtext,
    .emilia-booking-widget .occupancy,
    .emilia-booking-widget button { font-size: 16px !important; }

    /* Center the vendor's one-month mobile calendar inside the viewport. */
    .emilia-booking-widget p-datepicker > p-motion:has(.p-datepicker-panel) {
        position: fixed !important;
        inset: 50% auto auto 50% !important;
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: 420px !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1200 !important;
    }
    .emilia-booking-widget .p-datepicker-panel {
        width: 100% !important;
        max-width: none !important;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        padding: 12px !important;
        box-shadow: 0 0 0 100vmax #2019104d !important;
    }
    .emilia-booking-widget .p-datepicker-calendar-container { flex-direction: column; gap: 16px !important; }
    .emilia-booking-widget .p-datepicker-calendar { width: 100%; padding: 0 !important; border: 0 !important; }
    .emilia-booking-widget .p-datepicker-day-view td { height: 46px; }
    .emilia-booking-widget .p-datepicker-day { height: 46px !important; min-height: 46px; }
    .emilia-booking-widget .dp-legend { font-size: 10px !important; }
    .emilia-booking-widget app-room-picker:not(.roomPickerHidden) {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: 420px !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 48px) !important;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 0 100vmax #2019104d !important;
    }
    .emilia-booking-widget .room-picker-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 16px 0 !important;
        margin: 0 !important;
    }
    .emilia-booking-widget .room-picker-header h3 {
        margin: 0 !important;
        color: #272520;
        font-family: inherit !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        line-height: 1.35;
    }
    .emilia-booking-widget .close-room-picker button { width: 44px !important; height: 44px !important; }
    .emilia-booking-widget .room-occupants { padding: 16px !important; }
    .emilia-booking-widget .occupancy-footer { padding: 14px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .emilia-booking-widget *, .emilia-booking-widget *::before, .emilia-booking-widget *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}