/* MH Picker — brand / model selector (see front/js/mh-picker.js) */
.mhp { position: relative; width: 100%; }
.mhp-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important;
    pointer-events: none !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; padding: 0 !important; }
.mhp-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; min-height: 44px; padding: 9px 12px;
    background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 9px;
    color: #0f172a; font: 500 .9rem/1.3 'Inter', system-ui, sans-serif; text-align: left;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.mhp-toggle:hover, .mhp-toggle:focus-visible, .mhp-open .mhp-toggle {
    border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); background: #fff; outline: none;
}
.mhp-has-value .mhp-toggle { border-color: #93c5fd; background: #eff6ff; color: #1e40af; }
.mhp-toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhp-caret { flex-shrink: 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid #475569; transition: transform .2s; }
.mhp-open .mhp-caret { transform: rotate(180deg); }
.mhp-disabled .mhp-toggle { cursor: not-allowed; color: #94a3b8; background: #f1f5f9; }

/* panel (shared) */
.mhp-panel { display: flex; flex-direction: column; background: #fff; font-family: 'Inter', system-ui, sans-serif; }
.mhp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.mhp-title { font-weight: 800; font-size: 1rem; color: #0f172a; }
.mhp-close { width: 40px; height: 40px; margin: -6px -8px -6px 0; border: 0; background: transparent; font-size: 1.9rem;
    line-height: 1; color: #475569; cursor: pointer; border-radius: 50%; touch-action: manipulation; }
.mhp-close:hover { background: #f1f5f9; }
.mhp-search { padding: 0 16px 8px; }
.mhp-search-input { width: 100%; height: 44px; padding: 8px 12px; border: 1.5px solid #e2e8f0; border-radius: 9px;
    background: #f8fafc; font-size: 16px; /* ≥16px: no iOS zoom */ color: #0f172a; outline: none; -webkit-appearance: none; }
.mhp-search-input:focus { border-color: #2563eb; background: #fff; }
.mhp-list { list-style: none; margin: 0; padding: 4px 8px; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.mhp-item { margin: 0; }
.mhp-label { display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0; padding: 8px 10px; border-radius: 8px;
    font-size: .95rem; font-weight: 500; color: #1e293b; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.mhp-label:hover { background: #f1f5f9; }
.mhp-check { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: #2563eb; cursor: pointer; }
.mhp-check:checked + span { color: #1d4ed8; font-weight: 700; }
.mhp-none { padding: 16px 10px; color: #64748b; font-size: .9rem; }
.mhp-foot { display: flex; gap: 10px; padding: 10px 16px 12px; border-top: 1px solid #e2e8f0; background: #fff; }
.mhp-btn { height: 48px; border-radius: 10px; font-weight: 700; font-size: .92rem; cursor: pointer; touch-action: manipulation; }
.mhp-btn-clear { flex: 0 0 auto; padding: 0 16px; background: #fff; border: 1.5px solid #e2e8f0; color: #334155; }
.mhp-btn-apply { flex: 1 1 auto; padding: 0 12px; background: #2563eb; border: 0; color: #fff; }
.mhp-btn-apply:hover { background: #1d4ed8; }

/* mobile: bottom sheet */
.mhp-backdrop { position: fixed; inset: 0; z-index: 100000; background: rgba(15,23,42,.45); }
.mhp-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100001;
    height: 85vh; height: 85dvh; max-height: 640px;
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 32px rgba(15,23,42,.25);
    transform: translateY(100%); transition: transform .22s ease-out;
    padding-bottom: env(safe-area-inset-bottom);
}
.mhp-sheet.mhp-in { transform: translateY(0); }
.mhp-sheet::before { content: ''; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: #cbd5e1; }
@media (max-height: 560px) { .mhp-sheet { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; } }

/* desktop: dropdown */
.mhp-dropdown { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1060; width: 100%; min-width: 260px;
    max-height: 440px; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 36px rgba(15,23,42,.16); }
.mhp-dropdown .mhp-head { display: none; }
.mhp-dropdown .mhp-search { padding-top: 10px; }
.mhp-dropdown .mhp-label { min-height: 38px; padding: 6px 10px; font-size: .88rem; }
.mhp-dropdown .mhp-btn { height: 40px; }

body.mhp-scroll-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* Home page hero search box */
.car-search-box .mhp-toggle { min-height: 56px; background: #fff; border-radius: 10px; font-size: 1rem; }

/* single-choice options: one tap = choose */
.mhp-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px;
    margin: 0; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; text-align: left;
    font: 500 .95rem/1.3 'Inter', system-ui, sans-serif; color: #1e293b; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mhp-option:hover, .mhp-option:focus-visible { background: #f1f5f9; outline: none; }
.mhp-option:active { background: #e2e8f0; }
.mhp-option.is-selected { color: #1d4ed8; font-weight: 700; background: #eff6ff; }
.mhp-option.is-selected::after { content: ''; flex-shrink: 0; width: 7px; height: 13px; margin-right: 4px;
    border: solid #2563eb; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.mhp-item-all .mhp-option { color: #475569; }
.mhp-item-all { border-bottom: 1px solid #f1f5f9; margin-bottom: 4px; padding-bottom: 4px; }
.mhp-dropdown .mhp-option { min-height: 38px; padding: 7px 10px; font-size: .88rem; }
.mhp-sheet { height: auto; max-height: 85vh; max-height: 85dvh; }
.mhp-sheet .mhp-list { padding-bottom: 12px; }
.mhp-search-input, .mhp-search-input::placeholder, .mhp-label, .mhp-toggle { text-transform: none !important; letter-spacing: normal !important; }