/* * Fully self-contained styling — deliberately NOT reusing WP Travel * Engine's own classes (.wpte-trip__adv-field, .wpte__select-field, * .wpte__input, .wpte__select-options) here. Doing that originally * caused WTE's own JS to also recognize and try to initialize this field * (it scans for those exact classes), producing a duplicate label and * conflicting open/close behavior. These rules approximate the same * visual style independently, so the field still blends in without any * class-name collision with WTE's own scripts. * * .wptefd-date-options is moved to a direct child of at runtime * (see search-form-inject.js) to escape any ancestor's overflow:hidden, * so these rules target it directly rather than as a descendant of * .wptefd-date-field. */ .wptefd-date-field { position: relative; display: block; padding: 26px 15px 18px 0; cursor: pointer; min-width: 140px; font-family: "Plus Jakarta Sans", sans-serif; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; box-sizing: border-box; } .wptefd-title-field { font-size: 14px; color: rgb(130, 130, 138); font-weight: 500; margin-bottom: 0; line-height: 16px; } .wptefd-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #f7941d; pointer-events: none; } .wptefd-icon i { font-size: 22px !important; } .wptefd-date-display { border: none !important; background: transparent !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 16px !important; font-weight: 600 !important; font-family: "Plus Jakarta Sans", sans-serif !important; color: rgb(39, 51, 63) !important; cursor: pointer; width: 100%; height: auto !important; line-height: 24px !important; } .wptefd-date-field input.wptefd-date-display[type="text"] { padding-left: 0 !important; } .wptefd-date-display::placeholder { color: rgb(39, 51, 63) !important; font-weight: 600 !important; opacity: 1 !important; } .wptefd-date-options { display: none; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); padding: 16px; width: auto; max-width: calc(100vw - 20px); box-sizing: border-box; max-height: calc(100vh - 20px); overflow-y: auto; } .wptefd-date-options-inner { display: flex; gap: 24px; } .wptefd-cal-col { width: 260px; box-sizing: border-box; flex-shrink: 0; } .wptefd-cal-label { font-weight: 600; font-size: 13px; margin-bottom: 6px; font-family: "Plus Jakarta Sans", sans-serif; } /* jQuery UI datepicker internals — target each piece explicitly (rather than one blanket override) so the prev/next nav keeps working. Also forces a consistent font on every sub-element (weekday headers, day numbers, title) — jQuery UI's own stylesheet leaves some of these on the browser default font, which read as inconsistent next to our own font on everything else. */ .wptefd-date-options .ui-datepicker, .wptefd-date-options .ui-datepicker * { font-family: "Plus Jakarta Sans", sans-serif !important; } .wptefd-date-options .ui-datepicker { width: 260px !important; box-shadow: none; border: none; padding: 0; } .wptefd-date-options .ui-datepicker-header { position: relative; padding: 4px 28px; } .wptefd-date-options .ui-datepicker-prev, .wptefd-date-options .ui-datepicker-next { position: absolute; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; cursor: pointer; font-size: 0; text-indent: -9999px; overflow: hidden; } .wptefd-date-options .ui-datepicker-prev { left: 0; } .wptefd-date-options .ui-datepicker-next { right: 0; } .wptefd-date-options .ui-datepicker-prev::before, .wptefd-date-options .ui-datepicker-next::before { font-size: 20px; font-weight: 700; text-indent: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f7941d; } .wptefd-date-options .ui-datepicker-prev::before { content: "\2039"; } .wptefd-date-options .ui-datepicker-next::before { content: "\203A"; } .wptefd-date-options .ui-datepicker-calendar { width: 100%; border-collapse: collapse; } .wptefd-date-options .ui-datepicker-calendar th, .wptefd-date-options .ui-datepicker-calendar td { text-align: center; padding: 2px; width: 34px; height: 34px; box-sizing: border-box; } .wptefd-date-options .ui-datepicker-calendar a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin: 0 auto; box-sizing: border-box; text-decoration: none; border-radius: 4px; color: rgb(39, 51, 63); transition: background 0.12s ease, color 0.12s ease; } .wptefd-date-options .ui-datepicker-calendar a:hover { background: #fff3e6; color: #f7941d; } .wptefd-date-options .ui-datepicker-calendar .ui-datepicker-today a { border: 1px solid #f7941d; } .wptefd-date-options .ui-datepicker-calendar .ui-state-active { background: #f7941d !important; color: #fff !important; font-weight: 600; } .wptefd-date-options .ui-datepicker-title { font-weight: 700; font-size: 14px; color: rgb(39, 51, 63); text-align: center; } .wptefd-date-options .ui-datepicker-calendar th { font-size: 11px; font-weight: 600; color: #999; text-transform: uppercase; padding-bottom: 8px; } .wptefd-date-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #eee; } .wptefd-btn { font-family: "Plus Jakarta Sans", sans-serif; font-size: 12px; font-weight: 600; padding: 6px 16px; border-radius: 16px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .wptefd-btn-reset { background: transparent; border: 1px solid #ddd; color: rgb(39, 51, 63); } .wptefd-btn-reset:hover { border-color: #f7941d; color: #f7941d; } .wptefd-btn-apply { background: #f7941d; border: 1px solid #f7941d; color: #fff; } .wptefd-btn-apply:hover { background: #e07e00; border-color: #e07e00; } /* Placed at the end of the file deliberately: CSS resolves same- specificity ties in favor of whichever rule appears later, regardless of the media query condition. Positioning this earlier meant the later, un-conditioned base rules (.wptefd-cal-col's width:260px, etc.) would still win on mobile despite this media query being active. */ @media (max-width: 600px) { .wptefd-date-field { padding-left: 15px; } .wptefd-date-options-inner { flex-direction: column; gap: 20px; } .wptefd-cal-col { width: 100%; } .wptefd-date-options .ui-datepicker { width: 100% !important; } } /* * Sidebar "Filter By" panel — uses the exact same compact input + * dropdown panel as the top search bar (buildDateFieldCore in * search-form-inject.js), just wrapped in WTE's own section markup * (advanced-search-field / filter-section-title / filter-section- * content) for visual consistency with Destination/Price/Duration/Tags. * No separate calendar styling needed here — it's the same panel. */ .wptefd-sidebar-date-field .wptefd-date-field { padding: 4px 0; } .wptefd-sidebar-date-field .wptefd-title-field { display: none; } .wptefd-sidebar-date-field .wptefd-date-display { border: none !important; border-radius: 6px !important; padding: 8px 12px !important; width: 100%; box-sizing: border-box; background: #f7941d !important; color: #fff !important; font-weight: 600 !important; font-size: 13px !important; text-align: center !important; cursor: pointer; } .wptefd-sidebar-date-field .wptefd-date-display::placeholder { color: #fff !important; opacity: 1 !important; } .wptefd-sidebar-date-field .wptefd-date-display:hover { background: #e07e00 !important; } .wptefd-sidebar-date-field .wptefd-icon { display: none; } /* * Smooth collapse/expand via CSS transition rather than jQuery's * slideToggle (which can look janky when the surrounding page already * has its own conflicting transitions on nearby elements). Scoped * strictly to our own section so it never touches WTE's native * accordion sections elsewhere in the sidebar. */ .wptefd-sidebar-date-field .filter-section-content { max-height: 200px; opacity: 1; overflow: hidden; transition: max-height 0.25s ease, opacity 0.2s ease; } .wptefd-sidebar-date-field.wptefd-collapsed .filter-section-content { max-height: 0; opacity: 0; transition: max-height 0.2s ease, opacity 0.15s ease; }