/* =========================================================
   MAMAHOOD — SHARED PUBLIC-FACING DROPDOWNS
   Version 1.1.10

   Original <select> elements stay in place. The desktop mouse
   enhancement is progressively provided by assets/js/global-dropdowns.js.
   Keyboard, touch, unsupported/custom widgets retain native selection.
   Opt out for a particular control with data-mh-native-select.
   Load after page modules so the arrow/popup styling remains consistent.
   ========================================================= */

/* Closed state: same Mamahood treatment on every eligible front-end select. */
body select.mh-select-enhanced,
body .gform_wrapper select.mh-select-enhanced,
body .mh-banking-form-host select.mh-select-enhanced {
    box-sizing: border-box !important;
    min-height: 52px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 44px 12px 16px !important;
    border: 1px solid #C9D3DD !important;
    border-radius: 12px !important;
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='m2 2 6 6 6-6' stroke='%23F23883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 16px center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 9px !important;
    color: #073570 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 8px rgba(7, 53, 112, .035) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

body select.mh-select-enhanced:focus,
body select.mh-select-enhanced.mh-select-open,
body .gform_wrapper select.mh-select-enhanced:focus,
body .gform_wrapper select.mh-select-enhanced.mh-select-open,
body .mh-banking-form-host select.mh-select-enhanced:focus,
body .mh-banking-form-host select.mh-select-enhanced.mh-select-open {
    outline: none !important;
    border-color: #F23883 !important;
    box-shadow: 0 0 0 3px rgba(242, 56, 131, .13) !important;
}

body select.mh-select-enhanced:disabled {
    background-color: #F5F2F1 !important;
    color: #8993A2 !important;
    cursor: not-allowed;
    opacity: .75;
}

/* Do not conceal an actual Gravity Forms validation border. */
body .gform_wrapper .gfield_error select.mh-select-enhanced,
body .gform_wrapper .gfield_error select.mh-select-enhanced:focus {
    border-color: #B42318 !important;
}

/* Only desktop pointer interaction creates this accessible option panel.
   It is placed directly in body, rather than inside an overflow-hidden form. */
.mh-dropdown-popover {
    position: fixed !important;
    z-index: 1000000 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    max-height: min(360px, calc(100vh - 16px)) !important;
    overflow: hidden !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    background: #FFFAF8 !important;
    border: 1px solid #E7D6DC !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 34px rgba(7, 53, 112, .17), 0 2px 8px rgba(7, 53, 112, .06) !important;
    color: #073570 !important;
    font: 14px/1.4 "DM Sans", sans-serif !important;
    text-align: left !important;
}

.mh-dropdown-popover .mh-dropdown-search-wrap {
    flex: 0 0 auto;
    padding: 4px 4px 8px;
    border-bottom: 1px solid #EDE0E2;
    margin-bottom: 3px;
}

.mh-dropdown-popover input.mh-dropdown-search {
    display: block !important;
    width: 100% !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
    border: 1px solid #DAD0D3 !important;
    border-radius: 8px !important;
    padding: 8px 11px !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    color: #073570 !important;
    font: 13px/1.4 "DM Sans", sans-serif !important;
    box-shadow: none !important;
}

.mh-dropdown-popover input.mh-dropdown-search:focus {
    outline: none !important;
    border-color: #F23883 !important;
    box-shadow: 0 0 0 2px rgba(242, 56, 131, .12) !important;
}

.mh-dropdown-popover .mh-dropdown-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-color: #D9B9C6 transparent;
    scrollbar-width: thin;
}

.mh-dropdown-popover .mh-dropdown-group {
    padding: 11px 12px 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #728099;
}

.mh-dropdown-popover .mh-dropdown-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 39px !important;
    box-sizing: border-box !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background: transparent !important;
    color: #073570 !important;
    font: 14px/1.35 "DM Sans", sans-serif !important;
    text-align: left !important;
    white-space: normal !important;
    cursor: pointer !important;
}

.mh-dropdown-popover .mh-dropdown-option:hover,
.mh-dropdown-popover .mh-dropdown-option.is-active {
    background: #FFF0F5 !important;
    color: #073570 !important;
}

.mh-dropdown-popover .mh-dropdown-option[aria-selected="true"] {
    background: #FCE3EE !important;
    color: #C91F5A !important;
    font-weight: 700 !important;
}

.mh-dropdown-popover .mh-dropdown-option[aria-selected="true"]::after {
    content: "✓";
    flex: 0 0 auto;
    font-weight: 700;
    color: #F23883;
}

.mh-dropdown-popover .mh-dropdown-option[aria-disabled="true"] {
    color: #9299A4 !important;
    cursor: default !important;
    opacity: .7;
}

.mh-dropdown-popover .mh-dropdown-empty {
    padding: 14px 12px;
    color: #65738B;
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    body select.mh-select-enhanced { transition: none !important; }
}