/* One line, group is positioning context */ .begin-the-magic #where-when-who-form .input-group { display:flex; flex-wrap:nowrap; align-items:stretch; position:relative; border-radius: 12px; } /* Icon cell */ .begin-the-magic #where-when-who-form .input-group-text { display:flex; align-items:center; justify-content:center; width:50px; height:50px; flex:0 0 50px; margin:10px 0 10px 4px; padding:0; background:#EBDBF0; font-size:20px; cursor:pointer; } /* Select2 “pill” (inline control) — let flexbox size it */ .begin-the-magic #where-when-who-form .input-group > .select2-container{ flex:1 1 auto; min-width:0; position:static !important; max-width:100%; } /* Two-line placeholder and stable right padding */ .select2-container--bootstrap-5 .select2-selection--single{ display:flex; align-items:center; min-height:65px; box-sizing:border-box; position:relative; padding:0 2rem 0 .75rem; /* reserve caret space */ } .select2-container--bootstrap-5 .select2-selection__rendered{ white-space:normal; line-height:1.1; padding:0; } /* Hide native arrow to avoid any reflow from theme */ .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow{ display:none !important; } /* Caret drawn on the group itself (never moves with Select2) */ /*#location-group::after, #room-view-group::after{ content:""; position:absolute; top:50%; right:.65rem; width:.9rem; height:.9rem; transform:translateY(-50%); pointer-events:none; opacity:.7; background:center/100% 100% no-repeat url('data:image/svg+xml;utf8,'); }*/ /* Rotate caret when Select2 is open (no layout change) */ #location-group:has(.select2-container--open)::after, #room-view-group:has(.select2-container--open)::after{ transform:translateY(-50%) rotate(180deg); opacity:1; } /* Dropdown: full width of the whole group (icon + pill), placed BELOW */ #location-group, #room-view-group{ position:relative; } .room-view.error { background: var(--field-error-background-color) !important; } #location-group > .select2-container.select2-container--open, #room-view-group > .select2-container.select2-container--open{ position:static !important; /* keep pill in flex flow */ } #location-group .select2-container .select2-dropdown, #room-view-group .select2-container .select2-dropdown{ position:absolute !important; top:calc(100% - .55rem) !important; left:-8px; !important; right:0 !important; width:auto !important; box-sizing:border-box; z-index:1080; } /* Daterangepicker (leave as you had it) */ #datepicker-dropdown .daterangepicker{ left:0 !important; right:0 !important; width:100% !important; max-width:none; box-shadow:var(--bs-box-shadow) !important; border:1px solid var(--bs-border-color) !important; margin-top:.25rem; z-index:1080; } .daterangepicker { margin-top: -5px !important; border-width: 0 !important; border-radius: 0 0 18px 18px !important; box-shadow: 0 25px 40px rgba(0,0,0,0.05); } .daterangepicker:before, .daterangepicker:after { display: none !important; content: none !important; border: none; } /* Fix spacing between icon and placeholder for select2 and non-select 2 fields */ .begin-the-magic #dates-group #dates-display, .begin-the-magic #guests-group #guests-display { /* same internal spacing as .select2-selection--single */ padding-left: calc(.75rem + 7px); /* +1px compensates for Select2's border */ padding-right: 2rem; /* keep right-side feel consistent */ min-height: 65px; display: flex; flex-direction: column; justify-content: center; } .begin-the-magic #dates-group #dates-display:focus, .begin-the-magic #guests-group #guests-display:focus { outline: none; } .begin-the-magic #where-when-who-form #dates-display, .begin-the-magic #where-when-who-form #guests-display { border:none; box-shadow:none; } .guest-popover-wrap { border: none; max-width: none; box-shadow: 0 25px 40px rgba(0,0,0,0.05); border-radius: 0 0 18px 18px; } .guest-popover-wrap .popover-body { padding-bottom: 2px; } .guest-popover-wrap .popover-arrow { display: none !important; } .guest-popover-wrap .btn.btn-xs i:before { color: #a440bf; opacity: 0.8; } .guest-popover-wrap .btn.btn-xs i:hover:before { opacity: 1; } .guest-popover-wrap .btn.btn-xs.disabled i:before { color: #aaa; } .begin-the-magic .select2-container--open .room-view-dropdown, .begin-the-magic .select2-container--open .location-dropdown { font-size: 14px; border: 0; overflow: hidden; } .begin-the-magic .select2-container--open .room-view-dropdown.select2-dropdown--below, .begin-the-magic .select2-container--open .location-dropdown.select2-dropdown--below { border-radius: 0 0 18px 18px; box-shadow: 0 25px 40px rgba(0,0,0,0.05); } .begin-the-magic .select2-container--open .room-view-dropdown.select2-dropdown--above, .begin-the-magic .select2-container--open .location-dropdown.select2-dropdown--above { border-radius: 18px 18px 0 0; box-shadow: 0 -25px 40px rgba(0,0,0,0.05); } .begin-the-magic .select2-container--open .room-view-dropdown .select2-search--dropdown, .begin-the-magic .select2-container--open .location-dropdown .select2-search--dropdown { } .begin-the-magic .select2-container--open .room-view-dropdown .select2-search__field, .begin-the-magic .select2-container--open .location-dropdown .select2-search__field { border: 0; outline: 0; } .begin-the-magic .select2-container--open .room-view-dropdown .select2-results__option, .begin-the-magic .select2-container--open .location-dropdown .select2-results__option{ color: rgb(33, 37, 41); } .begin-the-magic .select2-container--open .room-view-dropdown .select2-results__option--highlighted, .begin-the-magic .select2-container--open .location-dropdown .select2-results__option--highlighted { color: #ffffff; background-color: #a440bf; } .begin-the-magic #where-when-who-form a.btn { font-size: 14px; } @media ( max-width: 991px ) { .Pages.home #header { height: 300px; background-image: url('/img/redesign/header-images/home_mobile.jpg'); } .Pages.home #header #header-content p { display: none; } .Pages.home .begin-the-magic { margin-top: 120px; } .Pages.home main { padding-top: 400px; } } @media ( max-width: 767px ) { .Pages.home #header { height: 440px; } .Pages.home main { padding-top: 280px; } }