/* The search opened from the navigation: same controls as the home hero. */
#searchBoxToggle {
    --portal-field-height: 58px;
    padding: 62px max(16px, 4vw) 32px;
    font-family: 'Manrope', Arial, sans-serif;
    background: linear-gradient(180deg, rgba(2, 29, 47, .18), rgba(2, 29, 47, .29)),
                url('/Assets/Img/search-bg.jpg') center / cover no-repeat #315465;
}

#searchBoxToggle .search-box {
    width: 100%;
    max-width: 810px;
    margin: 0 auto;
    padding: 0;
}

#searchBoxToggle .search-box h1 {
    margin: 0 0 24px;
    font-family: 'Manrope', Arial, sans-serif !important;
    font-size: clamp(30px, 4.5vw, 52px) !important;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.15;
    color: #fff;
    text-shadow: 0 3px 24px rgba(0, 25, 40, .16);
    overflow-wrap: anywhere;
}

#searchBoxToggle .portal-search-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) 76px;
    align-items: center;
    padding: 9px;
    border-radius: 17px;
    background: #fff;
    color: #223e4f;
    box-shadow: 0 12px 36px rgba(2, 24, 37, .17);
}

#searchBoxToggle .portal-search-fields > .select2-container,
#searchBoxToggle .portal-search-fields > select:not(.select2-hidden-accessible),
#searchBoxToggle .portal-search-fields > .btn {
    width: 100% !important;
    min-width: 0;
    margin: 0;
    float: none;
}

#searchBoxToggle .portal-search-fields > select:not(.select2-hidden-accessible) {
    height: var(--portal-field-height);
    font-family: inherit !important;
}

#searchBoxToggle .portal-search-fields > .btn {
    height: var(--portal-field-height);
    padding: 8px 12px;
    border: 0;
    border-radius: 11px;
    background: #003c70;
    color: #fff;
    font-family: inherit !important;
    font-size: 21px;
    box-shadow: none;
}

#searchBoxToggle .portal-search-fields > .btn:hover,
#searchBoxToggle .portal-search-fields > .btn:focus {
    background: #002b50;
}

#searchBoxToggle .portal-search-label { display: none; }

#searchBoxToggle .townSearchList + .select2-container {
    border-left: 1px solid #e2e8ed;
}

#searchBoxToggle .select2-selection--single {
    height: var(--portal-field-height);
    border: 0;
    border-radius: 8px;
    background: #fff;
}

#searchBoxToggle .select2-selection__rendered {
    height: var(--portal-field-height);
    padding: 0 25px 0 16px;
    color: #223e4f;
}

#searchBoxToggle .select2-selection__arrow {
    height: var(--portal-field-height);
    padding: 0;
    top: 0;
    right: 7px;
}

#searchBoxToggle .select2-container .selected {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--portal-field-height);
    padding: 0;
}

#searchBoxToggle .selected > span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    float: none;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    font-size: 21px;
    line-height: 24px;
    color: #526977;
}

#searchBoxToggle .selected > strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex-shrink: 0;
    margin: 0 0 0 34px;
    font-size: 15px;
    font-weight: 600;
    line-height: 19px;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
}

#searchBoxToggle .selected > small {
    flex-shrink: 0;
    margin: 0 0 0 34px;
    color: #526977;
    /* Keep the lower part of letters visible, as in the home search. */
    font-size: 14px !important;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#searchBoxToggle .selected b { font-size: inherit; }
#searchBoxToggle .selected > small:empty,
#searchBoxToggle .placeholder > span,
#searchBoxToggle .placeholder > small { display: none; }

#searchBoxToggle .select2-container .placeholder strong {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--portal-field-height);
    margin: 0;
    padding: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: clamp(15px, 1.6vw, 17px);
    font-weight: 500;
    line-height: 1.25;
}

#searchBoxToggle .select2-selection:focus-visible,
#searchBoxToggle .btn:focus-visible {
    outline: 3px solid #437fa9;
    outline-offset: 2px;
}

/* Only the dropdown belonging to this panel gets these styles. */
body.portal-search-open > .select2-container--open {
    width: auto !important;
    font-family: 'Manrope', Arial, sans-serif;
}

body.portal-search-open > .select2-container--open .select2-dropdown {
    width: var(--portal-list-width) !important;
    border-color: #d6e0e6;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(2, 24, 37, .16);
}

body.portal-search-open > .select2-container--open .select2-search__field {
    min-height: 44px;
    border-radius: 6px;
    font-family: 'Manrope', Arial, sans-serif !important;
    font-size: 16px;
}

body.portal-search-open > .select2-container--open .select2-results__option {
    padding-bottom: 6px;
}

body.portal-search-open > .select2-container--open .select2-results__option > div {
    height: auto;
    min-height: 50px;
}

/* Leave space for results when a phone keyboard or landscape reduces height. */
body.portal-search-compact-list > .select2-container--open {
    position: fixed !important;
    top: calc(var(--portal-view-top, 0px) + max(8px, env(safe-area-inset-top))) !important;
    left: calc(var(--portal-view-left, 0px) + var(--portal-view-width, 100vw) * .04) !important;
    width: calc(var(--portal-view-width, 100vw) * .92) !important;
    z-index: 1051;
}

body.portal-search-compact-list > .select2-container--open .select2-dropdown {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-height: calc(var(--portal-view-height, 100vh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
    max-height: calc(var(--portal-view-height, 100svh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)));
    border: 1px solid #d6e0e6;
    border-radius: 10px;
}

body.portal-search-compact-list > .select2-container--open .select2-results {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Internal photo headers normally overlap the hidden mobile breadcrumb. */
@media (max-width: 991px) {
    body.portal-search-expanded #page > .main-header:first-child,
    body.portal-search-expanded #ContentPlaceHolderMain_PanelSingle > .main-header:first-child { margin-top: 0; }
}

/* On phones the customer contact strip already offsets its photo header.
   On tablets that strip is hidden, so prevent the same overlap explicitly. */
@media (min-width: 768px) and (max-width: 991px) {
    body.portal-search-expanded #page > #ContentPlaceHolderMain_HyperLink1 > .main-header,
    body.portal-search-expanded #page > #ContentPlaceHolderMain_PanelHeaderImportato { margin-top: 0; }
}

@media (max-width: 599px) {
    #searchBoxToggle { --portal-field-height: 54px; padding: 52px 16px 24px; }
    #searchBoxToggle .search-box h1 { margin-bottom: 18px; }
    #searchBoxToggle .portal-search-fields { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px; }
    #searchBoxToggle .townSearchList + .select2-container { border-left: 0; border-top: 1px solid #e2e8ed; }
    #searchBoxToggle .selected:not(.placeholder) > strong { line-height: 16px; }
    #searchBoxToggle .portal-search-fields > .btn { font-size: 16px; }
    #searchBoxToggle .portal-search-label { display: inline; }
}

@media (max-height: 480px) and (orientation: landscape) {
    #searchBoxToggle { --portal-field-height: 52px; padding: 44px 16px 18px; }
    #searchBoxToggle .search-box h1 { font-size: 26px !important; margin-bottom: 12px; }
    #searchBoxToggle .portal-search-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) 60px; gap: 0; padding: 6px; }
    #searchBoxToggle .townSearchList + .select2-container { border-top: 0; border-left: 1px solid #e2e8ed; }
    #searchBoxToggle .selected > span { display: none; }
    #searchBoxToggle .selected:not(.placeholder) > strong { margin: 0; line-height: 15px; }
    #searchBoxToggle .selected > small { margin: 0; }
    #searchBoxToggle .portal-search-label { display: none; }
}