/* ============================================================================ * Forum Inmobiliaria — custom select (progressive enhancement) * * A native stays in the DOM and remains the source of truth, so the * form still submits normally and everything degrades to native without JS. * On coarse-pointer devices the enhancement is skipped on purpose — the OS * picker beats any custom widget on a phone. * ========================================================================== */ .fsel { position: relative; display: block; } /* The native control is kept for form submission, out of the tab order. */ .fsel__native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); } .fsel__btn { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; font: inherit; font-weight: 500; font-size: .98rem; color: var(--ink); background: transparent; border: 0; padding: .2rem 0; cursor: pointer; text-align: left; border-radius: var(--radius-sm); } .fsel__btn:focus { outline: none; } .fsel__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Host pages style their field labels by tag — .filters__f span sets uppercase, .72rem and a muted colour. That would leak into the trigger's own span, so the value is reset to the button's own typography. */ font: inherit; color: inherit; text-transform: none; letter-spacing: normal; } .fsel__btn svg { flex: none; width: 15px; height: 15px; stroke: #667c6b; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; } .fsel.is-open .fsel__btn svg { transform: rotate(180deg); } /* ---- The popup list -------------------------------------------------------- * Portalled to and fixed-positioned: .hero has overflow:hidden, so a * list rendered inside the search bar would be clipped at the hero's edge. * -------------------------------------------------------------------------- */ .fsel__list { position: fixed; z-index: 1200; margin: 0; padding: .35rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: min(320px, 60vh); overflow-y: auto; overscroll-behavior: contain; font-family: var(--font); font-size: .96rem; opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease; } .fsel__list.is-in { opacity: 1; transform: translateY(0); } .fsel__opt { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .58rem .7rem; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; line-height: 1.35; } .fsel__opt[aria-selected="true"] { color: var(--brand-dark); font-weight: 600; } .fsel__opt.is-active { background: var(--brand-light); } /* The tick only occupies space on the selected row. */ .fsel__opt::after { content: ""; flex: none; width: 16px; height: 16px; background: no-repeat center / 16px 16px; } .fsel__opt[aria-selected="true"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f8a36' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { .fsel__list, .fsel__btn svg { transition: none; } .fsel__list { transform: none; } } /* ---- Boxed variant --------------------------------------------------------- * The property-listing filters style their selects with a border, padding and a * white background (.filters__f select). The trigger has to match, or the * enhanced control looks foreign next to the rest of the filter row. * -------------------------------------------------------------------------- */ .fsel { min-width: 0; } .fsel--boxed .fsel__btn { font-size: .92rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; } .fsel--boxed .fsel__btn:hover { border-color: var(--brand); } .fsel--boxed.is-open .fsel__btn, .fsel--boxed .fsel__btn:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }