/* NOX Search UI — global styles
Uses your theme tokens. ---------------------------------------------- */
:root{
/* assumes NOX tokens exist in the theme; falls back just in case */
--nox-border: var(--e-global-color-9168b0b, #363636);
--nox-bg: var(--e-global-color-1db48f6, #1D1D1D);
--nox-bg-hover: var(--e-global-color-b3c2e52, rgba(255,255,255,0.69));
--nox-accent: var(--e-global-color-secondary, #FE6768);
--nox-panel-shadow: 0 10px 24px rgba(0,0,0,.4);
}
/* A11y helpers */
.sr-only{
position:absolute!important;
width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Optional label helper (outside the unified "display" shell) */
.nox-field-label{display:block;margin-bottom:6px;font-size:12px;opacity:.65}
/* Grid (homepage/advanced) */
.nox-search-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1fr auto;
gap:14px;
align-items:end;
}
@media(max-width:900px){
.nox-search-grid{ grid-template-columns:1fr; }
}
/* Base control (same look for all shells, incl. legacy .hdp-display) */
.nox-display, .hdp-display{
width:100%;
display:flex;
align-items:center;
gap:0;
border:1px solid var(--nox-border);
border-radius:3px;
background-color:var(--nox-bg);
min-height:54px;
padding:12px 16px;
text-align:left;
}
.nox-display:hover, .nox-display:focus,
.hdp-display:hover, .hdp-display:focus{
border:1px solid var(--nox-accent)!important;
background:var(--e-global-color-b3c2e52, rgba(255,255,255,0.69))!important;
}
.nox-col, .hdp-col{
flex:1;display:flex;flex-direction:column;gap:4px;
}
.nox-label, .hdp-label{ font-size:12px;line-height:1;opacity:.75 }
.nox-value, .hdp-date{ line-height:1.2;font-size:15px }
.nox-divider, .hdp-divider{ width:1px;background:var(--nox-border);margin:0 16px }
/* Text input field that looks like a NOX select */
.nox-text-field .nox-display{ cursor:text; overflow:hidden; }
.nox-text-field .nox-col{ display:flex;flex-direction:column;}
.nox-text-field .nox-value-input{
width:100%;
background:transparent!important;
border:none!important;outline:none!important;box-shadow:none!important;
padding:0!important;margin:0!important;
font:inherit;color:inherit;
line-height: 1;
}
/* Datepicker invisible input overlay (HotelDatepicker target) */
.nox-date{ position:relative }
.nox-date-input{
position:absolute;inset:0;width:100%;height:100%;
opacity:0;pointer-events:none;
}
/* Chevron mixin for toggles */
.nox-chevron{ position:relative;padding-right:36px }
.nox-chevron::after{
content:"";position:absolute;right:14px;top:50%;
width:10px;height:10px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:translateY(-50%) rotate(45deg);
opacity:.7;transition:transform .2s ease;
}
[aria-expanded="true"].nox-chevron::after{
transform:translateY(-50%) rotate(-135deg);
}
/* Panels (dropdowns & popovers) */
.nox-panel{
position:absolute;
width:100%;left:0;right:0;
z-index:10001;
background:var(--e-global-color-b3c2e52, rgba(255,255,255,0.69));
border:1px solid var(--nox-border);
border-radius:8px;
padding:8px 0;
box-shadow:var(--nox-panel-shadow);
display:none;transform:scale(.95);opacity:0;
transform-origin:top;transition:transform .2s ease, opacity .2s ease;
max-height:var(--nox-panel-max-h, 35vh);
overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* visible state */
.nox-panel.is-open{ display:block;transform:scale(1);opacity:1 }
/* default placement (below) */
.nox-panel[data-pos="down"]{ top:calc(100% + var(--nox-panel-offset, 8px));bottom:auto; }
/* flip vertically */
.nox-panel--flipY{
top:auto!important;
bottom:calc(100% + var(--nox-panel-offset, 8px))!important;
transform-origin:bottom;
}
/* align right edge when portaled/clamped */
.nox-panel--alignRight{ right:0;left:auto }
/* Scrollbar style */
.nox-panel{ scrollbar-width:thin;scrollbar-color:var(--nox-border) transparent }
.nox-panel::-webkit-scrollbar{ width:8px }
.nox-panel::-webkit-scrollbar-track{ background:transparent }
.nox-panel::-webkit-scrollbar-thumb{
background:var(--e-global-color-bea34bc, rgba(255,255,255,0.12));
border-radius:8px
}
.nox-panel::-webkit-scrollbar-thumb:hover{
background:var(--e-global-color-cf5ca57, rgba(103,254,178,0.4))
}
/* Select list items */
.nox-select{ position:relative;overflow:visible }
.nox-select-list{ list-style:none;margin:0;padding:0 }
.nox-select-list li{ padding:10px 14px;cursor:pointer }
.nox-select-list li:hover, .nox-select-list li.selected{ background:var(--nox-bg) }
/* ===== Guests popover (unified with legacy aliases) ===== */
.nox-panel.nox-guests-popover{
min-width: 300px;
min-height: 160px;
}
/* Rows */
.nox-guests-row,
.guest-row{
display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:6px 0;
}
/* Labels */
.nox-guests-label,
.guest-row-label{ font-size:16px }
/* Stepper */
.nox-stepper,
.guest-stepper{ display:flex;align-items:center;gap:12px }
.nox-stepper button,
.guest-stepper button{
width:40px;height:40px;border-radius:6px;
border:1px solid var(--nox-border);background:transparent;
font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;
}
/* Count */
.nox-count,
.guest-count{
min-width:28px;text-align:center;font-size:16px;
display:flex;align-items:center;justify-content:center;
}
/* Footer actions */
.nox-guests-actions,
.guest-actions{ display:flex;justify-content:flex-end;padding-top:8px }
/* Container & legacy helper */
.nox-guests{ position:relative }
.nox-guests-pop{padding:5px}
.guest-field{ width:100% }
.search-btn{
min-height:54px;
background-image: none !important;
min-width: auto !important;
border:1px solid var(--e-global-color-secondary) !important;
transition: width 0.3s ease;
}
/* Make the button arrange icon + text nicely */
button.search-btn{
display: inline-flex;
align-items: center;
gap: 4px; /* space between icon and text */
}
/* Insert the icon before the text */
button.search-btn::before{
content: "";
width: 18px;
height: 18px;
/* color of the icon */
background-color: white;
/* use the SVG as a mask (monochrome) */
-webkit-mask: url('data:image/svg+xml;utf8,\
') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,\
') center / contain no-repeat;
}
@media (max-width: 480px){
button.search-btn::before{ width:18px; height:18px; }
}
/* Small action buttons used inside panels */
.datepicker__close-button,
.datepicker__clear-button,
.nox-btn-ghost,
.guest-apply{
background:var(--e-global-color-b3c2e52);
color:var(--e-global-color-text);
font-size:.65rem;text-transform:uppercase;
border:1px solid var(--nox-border);
border-radius:6px;background-image:none;cursor:pointer;padding:8px 12px;
}
.datepicker__close-button:hover,
.datepicker__clear-button:hover,
.nox-btn-ghost:hover,
.guest-apply:hover{
background:var(--nox-accent);
color:var(--e-global-color-text);
}
/* Prevent clipping in common wrappers */
.nox-form, .nox-search-grid, .nox-date, .nox-select, .nox-guests{ overflow:visible }
.nox-search-grid{
align-items: center;
}
/* Body-lock (no background scroll) + scrollbar compensation */
html.nox-scroll-locked, body.nox-scroll-locked{ overflow:hidden; }
/* Compensate the missing scrollbar width to prevent layout shift */
body.nox-scroll-locked{ padding-right:var(--nox-scrollbar, 0px); }
/* Optional: compensate fixed headers when locking */
[data-nox-lock-shift]{ padding-right:var(--nox-scrollbar, 0px); }