/* ========================================================================== Homepage standalone hotel search bar (hsh-*) -------------------------------------------------------------------------- Sits inside the existing .secndblak.momo-card.momo-card--lg / #hotel tab-pane already rendered by general/index.php -- that wrapper already provides the white card/radius/shadow, this only styles its own contents. Deliberately independent of share/hotel_search.php (own namespace end to end), matching general/home_search_bar.php's hsb-* reasoning for the flight tab: page-specific changes here can't leak onto or be fought by the shared file template_v1/template_v2/stale index_* backups still embed. Field/button sizing, spacing and colors are a deliberate 1:1 port of home_search_bar.css's hsb-* rules (same component family, same look across both tabs) -- only the room-block occupancy panel below is genuinely new, since hotel's per-room adult/child/child-age occupancy model has no flight equivalent. ========================================================================== */ .hsh-wrap { padding: var(--space-1) 0 0; } .hsh-fields { display: flex; align-items: stretch; gap: var(--space-2); flex-wrap: nowrap; } .hsh-field { position: relative; flex: 1 1 0; min-width: 0; border: 1px solid var(--momo-grey-3); border-radius: var(--radius-card); padding: 6px var(--space-3); transition: border-color .15s ease; background: var(--momo-white); } .hsh-field:focus-within { border-color: var(--momo-blue); } .hsh-field label { display: block; margin: 0 0 2px; font-size: 11px; font-weight: var(--fw-medium); color: var(--momo-grey-1); text-transform: uppercase; letter-spacing: .02em; } .hsh-input { width: 100%; border: none; outline: none; padding: 0; font-size: 14px; font-weight: var(--fw-medium); color: var(--momo-blue-dark); background: transparent; cursor: pointer; } .hsh-input::placeholder { color: var(--momo-grey-2); font-weight: var(--fw-regular); } select.hsh-input, .hsh-select { cursor: pointer; } .hsh-field--destination { flex: 1.6 1 0; } .hsh-date-caption { display: none; } .hsh-location-toggle { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; font-size: 12px; color: var(--momo-grey-1); cursor: pointer; user-select: none; } .hsh-location-toggle input { accent-color: var(--momo-blue); width: 14px; height: 14px; } .hsh-fields--bottom { margin-top: var(--space-2); justify-content: flex-end; } /* !important throughout -- matches hsb-submit's own reasoning: this stylesheet is registered via Js_Loader::$css[], which lands in an early slot regardless of push order, while theme_style.css/media.css/ momo-design-system.css are hardcoded later and win any equal-specificity tie without it. */ .hsh-submit { flex: 0 0 auto; align-self: stretch; display: flex !important; align-items: center !important; justify-content: center !important; gap: var(--space-2); border: none !important; border-radius: var(--radius-card) !important; background: var(--momo-yellow) !important; color: var(--momo-blue-dark) !important; padding: 0 var(--space-6) !important; min-height: 52px !important; min-width: 160px !important; font-family: var(--font-family-base) !important; font-size: 16px !important; font-weight: 400 !important; cursor: pointer !important; white-space: nowrap; opacity: 1 !important; box-shadow: none !important; transition: background .15s ease; } .hsh-submit:hover { background: var(--momo-orange-70) !important; } .hsh-menu.ui-autocomplete, .hsh-field .ui-autocomplete { border-radius: var(--radius-card) !important; box-shadow: 0 8px 30px var(--momo-shadow) !important; border: 1px solid var(--momo-grey-3) !important; padding: var(--space-2) 0 !important; max-height: 320px; overflow-y: auto; } /* jQuery UI's datepicker popup is a single instance jQuery appends to document.body -- same #ui-datepicker-div fix home_search_bar.css/ results_search_bar.css both already carry (theme_style.css's ID selector beats momo-design-system.css's plain class selector regardless of load order), duplicated here rather than shared since this stylesheet only loads on pages that embed this component. */ #ui-datepicker-div.ui-datepicker { background: var(--momo-white) !important; border: 1px solid var(--momo-grey-3) !important; border-radius: var(--radius-card) !important; box-shadow: 0 8px 30px var(--momo-shadow) !important; padding: var(--space-3) !important; font-family: var(--font-family-base); } #ui-datepicker-div .ui-datepicker-header { background: var(--momo-blue) !important; color: var(--momo-white) !important; border-radius: var(--space-2) !important; border: none !important; } #ui-datepicker-div .ui-datepicker-title, #ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { color: var(--momo-white) !important; } #ui-datepicker-div td .ui-state-default { background: var(--momo-white) !important; border: none !important; border-radius: var(--space-1); color: var(--momo-blue-dark); } #ui-datepicker-div td .ui-state-active, #ui-datepicker-div td .ui-state-hover { background: var(--momo-blue) !important; border-color: var(--momo-blue) !important; color: var(--momo-white) !important; } #ui-datepicker-div td.ui-datepicker-today .ui-state-default { border: 1px solid var(--momo-blue) !important; } /* --------------------------------------------------------------------- Guests & Rooms popover -- pax trigger + panel, ported from hsb-pax-* (home_search_bar.css), plus the genuinely new room-block repeater below. -------------------------------------------------------------------*/ .hsh-field--guests { flex: 1.2 1 0; } .hsh-pax-trigger { cursor: pointer; font-size: 14px; font-weight: var(--fw-medium); color: var(--momo-blue-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; padding-right: 18px; } /* Chevron -- self-contained now that the trigger no longer carries .totlall (whose theme_style.css ::after this used to piggyback on; that class also made pax_count.js toggle the panel a second time). */ .hsh-pax-trigger::after { content: "\f078"; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-size: 12px; color: var(--momo-grey-1); position: absolute; top: 50%; right: 0; width: 16px; line-height: 1; transform: translateY(-50%); pointer-events: none; } .hsh-pax-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 320px; background: var(--momo-white); border-radius: var(--radius-card); box-shadow: 0 8px 30px var(--momo-shadow); padding: var(--space-4); z-index: 30; max-height: 70vh; overflow-y: auto; } .hsh-pax-panel.fadeinn { display: block; } .hsh-room-block { padding: var(--space-3) 0; border-bottom: 1px solid var(--momo-grey-3); } .hsh-room-block:first-child { padding-top: 0; } .hsh-room-block-title { font-size: 13px; font-weight: 700; color: var(--momo-blue-dark); margin-bottom: var(--space-2); } .hsh-pax-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; } .hsh-pax-row-label strong { display: block; font-size: 13px; color: var(--momo-blue-dark); } .hsh-pax-row-label span { font-size: 11px; color: var(--momo-grey-1); } .hsh-pax-stepper { display: flex; align-items: center; gap: var(--space-2); } .hsh-pax-stepper .btn-number { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--momo-grey-3); background: var(--momo-white); color: var(--momo-blue); font-size: 14px; line-height: 1; cursor: pointer; } .hsh-pax-stepper .btn-number:disabled { opacity: .4; cursor: default; } .hsh-pax-stepper .input-number { width: 22px; text-align: center; border: none; font-size: 14px; font-weight: var(--fw-medium); color: var(--momo-blue-dark); background: transparent; } .chilagediv { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--momo-grey-3); } .hsh-child-age-label { font-size: 11px; color: var(--momo-grey-1); margin-bottom: var(--space-2); } .hsh-child-age-row { display: flex; gap: var(--space-2); } .hsh-child-age-wrapper { flex: 1 1 0; } .hsh-child-age-wrapper select { width: 100%; border: 1px solid var(--momo-grey-3); border-radius: var(--space-2); padding: var(--space-1) var(--space-2); font-size: 13px; color: var(--momo-blue-dark); background: var(--momo-white); } .hsh-room-actions { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); } .hsh-room-action-btn { flex: 1 1 0; border: 1px dashed var(--momo-blue); background: var(--momo-white); color: var(--momo-blue); border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); font-size: 12px; font-weight: var(--fw-medium); cursor: pointer; } .hsh-room-action-btn:hover { background: var(--momo-blue-xlight); } .hsh-room-action-btn.remove_rooms { border-color: var(--momo-red-100); color: var(--momo-red-100); } .hsh-room-action-btn.remove_rooms:hover { background: var(--momo-red-30); } .hsh-pax-done { margin-top: var(--space-3); width: 100%; border: none; border-radius: var(--radius-card); background: var(--momo-blue); color: var(--momo-white); padding: var(--space-2); font-size: 13px; font-weight: var(--fw-medium); cursor: pointer; } @media (max-width: 991px) { .hsh-fields { flex-wrap: wrap; } .hsh-field, .hsh-field--destination, .hsh-field--guests { flex: 1 1 45%; } .hsh-submit { flex: 1 1 100%; padding: var(--space-3); } .hsh-pax-panel { right: auto; left: 0; width: 100%; } .hsh-fields--bottom { justify-content: stretch; } }