/**
 * Custom dropdown component for the Location/Property Type/Price Range
 * fields on the homepage hero search and the Property Listing top search
 * bar - replaces those fields' native <select> appearance on pointer-fine
 * (mouse) devices only. On touch devices this file's rules never take
 * effect at all (see the (hover: hover) and (pointer: fine) gate below),
 * so the real <select> renders exactly as it always has.
 *
 * ISOLATION: every rule here is self-contained. Nothing in this file
 * extends, overrides, or depends on any other component's class (not
 * .field-native-select, not .hero-search-trigger, not
 * .listing-search-trigger) - every padding/font-size/color/border/spacing
 * value below is written out explicitly, on purpose, even where it
 * happens to match another component's number. The one deliberate
 * exception is reading color TOKENS from variables.css
 * (var(--color-primary-green) etc.) - a plain value substitution with no
 * selector/rule attached to it, unlike reusing a class; see the
 * conversation record for the reasoning. variables.css is already a
 * required, always-first dependency on every page this loads on.
 *
 * Values pulled from the confirmed Figma spec (file "01 - Brand & Design
 * System", Components Extended, node 29:661) - border/radius/padding/
 * typography/shadow below are taken directly from that node's own
 * dropdown-trigger/options-panel, not approximated. Chevron/check-icon
 * colors were verified from the actual exported SVG asset bytes (not the
 * screenshot): chevron-down.svg is stroke="#2D2D2D" (closed state),
 * chevron-up.svg is stroke="#0C3B2A" (open state), check-circle.svg is
 * stroke="#0C3B2A" - chevron-up's path is chevron-down's path rotated
 * exactly 180 degrees around its own center, so this reuses one asset
 * (icon-dfr-dd-chevron.svg, still the verified original bytes) recolored
 * and rotated via CSS instead of shipping two files, matching this
 * project's own existing mask-image + background-color recolor technique
 * used elsewhere (.field-icon-chevron, .sort-dropdown__chevron, etc).
 *
 * Requires (must load after): variables.css.
 */

/* Component only activates for mouse/trackpad users - touch devices keep
   the plain native <select> exactly as it already renders, untouched.
   dfr-dropdown.js checks this same condition in JS before doing anything,
   so the two can never disagree about which mode is active. */
@media (hover: hover) and (pointer: fine) {

    /* Hides the real <select>'s own box/arrow while keeping it in the DOM,
       focusable, and the actual source of truth for .value - JS only adds
       this class on pointer-fine devices, right before building the
       custom trigger/panel around it. */
    .dfr-dd__native--enhanced {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: none;
        background: none;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        opacity: 0;
        pointer-events: none;
    }

    /* ---- Wrapper: the position:relative anchor for the options panel ---- */

    .dfr-dd__wrap {
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

    /* ---- Trigger (closed state) - Figma node 29:661 dropdown-trigger-default ---- */

    .dfr-dd__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        padding: 10px 16px;
        background-color: #FFFFFF;
        border: 1px solid var(--color-stone);
        border-radius: 8px;
        box-sizing: border-box;
        cursor: pointer;
        text-align: left;
        /* Border color/radius/shadow only - matches the Figma spec's own
           open/closed distinction (trigger text color never changes). No
           width/height/padding transition, on purpose: those stay
           numerically identical between closed and open (see
           .dfr-dd__trigger--open below) specifically so opening/closing
           can never shift the trigger's own box size or anything around
           it - that exact class of bug (a closed/open size mismatch
           causing a visible jump) broke this same search bar in an
           earlier build. */
        transition: border-color 150ms ease-out, border-radius 150ms ease-out;
    }

    .dfr-dd__trigger-value {
        flex: 1 0 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: normal;
        color: #2D2D2D;
    }

    .dfr-dd__chevron {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background-color: #2D2D2D;
        -webkit-mask-image: url('/assets/images/icons/icon-dfr-dd-chevron.svg');
        mask-image: url('/assets/images/icons/icon-dfr-dd-chevron.svg');
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        transition: transform 150ms ease-out, background-color 150ms ease-out;
    }

    /* ---- Trigger (open state) - Figma node 29:661 dropdown-trigger-open ---- */

    .dfr-dd__trigger--open {
        border: 1.5px solid var(--color-primary-green);
        border-radius: 8px 8px 0 0;
        /* Border width goes from 1px to 1.5px, so padding drops by the
           same 0.5px on every side to keep the box's total rendered size
           identical to the closed state - the same compensation
           technique already established in this codebase's other
           open/closed trigger components. */
        padding: 9.5px 15.5px;
    }

    .dfr-dd__trigger--open .dfr-dd__chevron {
        background-color: var(--color-primary-green);
        transform: rotate(180deg);
    }

    .dfr-dd__trigger:focus-visible {
        outline: 2px solid var(--color-primary-green);
        outline-offset: 2px;
    }

    /* ---- Options panel - Figma node 29:661 options-panel ---- */

    .dfr-dd__panel {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 500;
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #FFFFFF;
        border: 1px solid var(--color-stone);
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
        max-height: 264px;
        overflow-y: auto;
        /* Fade + slide open, per spec - opacity/transform only, so the
           panel never affects surrounding layout while animating (it's
           already position:absolute, out of flow). */
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 180ms ease-out, transform 180ms ease-out;
    }

    .dfr-dd__panel--open {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    .dfr-dd__option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        padding: 0 16px;
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: normal;
        color: #2D2D2D;
        cursor: pointer;
        background-color: transparent;
    }

    .dfr-dd__option:hover,
    .dfr-dd__option--active {
        background-color: #F2EDE6;
    }

    .dfr-dd__option--selected {
        font-weight: 500;
    }

    .dfr-dd__option-check {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        margin-left: 8px;
        background-color: var(--color-primary-green);
        -webkit-mask-image: url('/assets/images/icons/icon-dfr-dd-check.svg');
        mask-image: url('/assets/images/icons/icon-dfr-dd-check.svg');
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    /* ---- Per-instance sizing ----
       Both instances currently resolve to identical numbers (same source
       CSS today: 16px/Inter/400 on the native <select>, no instance-
       specific px width since both fields are flex:1 0 0 of their own
       panel) - defined as two separate rules anyway, per instance, so
       neither can ever silently affect the other by sharing a selector.
       The trigger/panel above already use Figma's own confirmed 14px/
       Medium typography (a deliberate redesign of the field per the
       confirmed component spec, not a re-skin of the old borderless
       select) - nothing further to override at the instance level for
       typography; instance rules exist for width/attachment context only. */

    .dfr-dd__wrap--hero,
    .dfr-dd__wrap--listing {
        width: 100%;
    }

    /* ---- Mobile-width variant (<1024px) ----
       Only matters if a pointer-fine device (e.g. a mouse-equipped laptop
       with a narrowed window) happens to render at this width - touch
       devices never reach this file at all. Mirrors the one real
       difference confirmed between the two instances' EXISTING native-
       select sizing at this breakpoint: the hero's own CSS
       (homepage.css's mobile block) drops to 13px, while the listing top
       bar's CSS (properties.css's mobile block) has no such override and
       stays at its base size - carried forward here as the matching 13px/
       base-size split for each instance's trigger text specifically. */
    @media (max-width: 1023px) {
        .dfr-dd__wrap--hero .dfr-dd__trigger-value {
            font-size: 13px;
        }
    }
}