/*
 * Homepage finder — approved mobile card composition.
 *
 * Only phones are affected. The shared form values, native <details>
 * disclosures and delegated search handlers stay exactly as they are; this
 * file supplies the selected visual hierarchy and a stable two-column grid.
 */
@media (max-width: 767.98px) {
    /* Elementor's search-builder widget clips its child by default. The
       approved sheet intentionally reclaims the inner gutter, so the wrapper
       must allow the complete right column, borders and caret to remain
       visible. This is scoped to the homepage mobile finder only. */
    html body.artbin-home-gold-search-active .elementor-element.elementor-element-07dddbe.elementor-widget-houzez_elementor_search_builder {
        overflow: visible !important;
        /* The Elementor widget and Houzez wrapper previously kept the old
           navy search-panel treatment.  Leaving those surfaces in place
           created a second rectangular panel behind the approved mobile
           sheet.  The service filter below is now the only visual surface. */
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    html body.artbin-home-gold-search-active .elementor-element.elementor-element-07dddbe.elementor-widget-houzez_elementor_search_builder .houzez-search-builder-wrapper {
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* While the finder itself is visible it has interaction priority. The
       contact shortcut is restored as soon as the visitor scrolls past it. */
    html body.artbin-home-gold-search-active.artbin-home-mobile-filter-visible .artbin-floating-contact {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home {
        position: relative !important;
        /* The fixed chat shortcut must never make a field in the mobile
           finder unclickable. It remains available again below the form. */
        z-index: 200051 !important;
        display: block !important;
        /* The legacy wrapper no longer contributes an inner dark panel. Keep
           one deliberate outer gutter around the approved single sheet. */
        width: calc(100% + 36px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 16px !important;
        overflow: visible !important;
        border: 1px solid rgba(244, 181, 27, .72) !important;
        border-radius: 26px 26px 28px 28px !important;
        background: #061e35 !important;
        box-shadow: 0 16px 30px rgba(0, 16, 32, .30) !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > * {
        order: initial !important;
        grid-row: auto !important;
        grid-column: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Deal type is always the first, full-width decision. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-market {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        min-height: 60px !important;
        padding: 3px !important;
        overflow: hidden !important;
        border: 1px solid rgba(184, 204, 222, .42) !important;
        border-radius: 17px !important;
        background: rgba(2, 20, 38, .56) !important;
    }

    /* On phones the three visible chips are the deal selector. The former
       compact summary belongs to the desktop grid and must not reserve a
       second, empty-looking line here. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-market > .artbin-service-home-market-selector {
        display: none !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-market > .artbin-service-chip {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 8px 5px !important;
        border: 0 !important;
        border-right: 1px solid rgba(184, 204, 222, .30) !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: rgba(255, 255, 255, .90) !important;
        box-shadow: none !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.14 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-market > .artbin-service-chip:last-child {
        border-right: 0 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-market > .artbin-service-chip.is-active {
        border-color: transparent !important;
        border-radius: 13px !important;
        background: var(--artbin-filter-gold, #f4b51b) !important;
        color: #10233a !important;
        box-shadow: 0 8px 18px rgba(244, 181, 27, .22) !important;
    }

    /* Eight compact selectors appear as consistent cards in two columns. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control],
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group {
        position: relative !important;
        display: block !important;
        min-width: 0 !important;
        min-height: 74px !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control] > summary,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group > .artbin-service-catalog-selector > summary {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 74px !important;
        margin: 0 !important;
        padding: 12px 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border: 1px solid rgba(185, 205, 223, .28) !important;
        border-radius: 13px !important;
        background: rgba(18, 46, 76, .91) !important;
        color: #ffffff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
        cursor: pointer !important;
        list-style: none !important;
        transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control] > summary::-webkit-details-marker,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group > .artbin-service-catalog-selector > summary::-webkit-details-marker {
        display: none !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-control-icon {
        flex: 0 0 21px !important;
        width: 21px !important;
        height: 21px !important;
        opacity: 1 !important;
        filter: brightness(0) saturate(100%) invert(77%) sepia(78%) saturate(706%) hue-rotate(347deg) brightness(101%) contrast(92%) !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid [data-artbin-selection-label],
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-catalog-selector-label {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        color: rgba(255, 255, 255, .92) !important;
        font-size: 12px !important;
        font-weight: 750 !important;
        line-height: 1.22 !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-catalog-selector-values {
        display: none !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-control-caret {
        flex: 0 0 auto !important;
        width: 9px !important;
        height: 9px !important;
        margin-left: auto !important;
        color: var(--artbin-filter-gold, #f4b51b) !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid [data-artbin-control].is-active > summary,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid [data-artbin-control][open] > summary,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-catalog-selector.has-selection > summary,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-catalog-selector[open] > summary {
        border-color: var(--artbin-filter-gold, #f4b51b) !important;
        background: rgba(17, 52, 85, .98) !important;
        box-shadow: 0 10px 21px rgba(0, 13, 28, .23) !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid [data-artbin-control].is-active > summary [data-artbin-selection-label],
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-catalog-selector.has-selection > summary .artbin-service-catalog-selector-label {
        color: var(--artbin-filter-gold, #f4b51b) !important;
    }

    /* Features and the address / ID field deliberately finish the form. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-keyword-cell],
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-search-submit-cell] {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* The sheet follows the selected decision path: paired essentials first,
       then Features, Address / ID and the final Search action. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-market {
        order: -1 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features {
        order: 1 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-keyword-cell],
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-search-submit-cell] {
        order: 2 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features > .artbin-service-catalog-selector > summary {
        min-height: 78px !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-keyword-cell],
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-search-submit-cell] {
        min-height: 62px !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-keyword-cell] > .elementor-field-label {
        display: none !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-keyword-cell] input[name="keyword"],
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-search-submit-cell] .houzez-search-button {
        width: 100% !important;
        min-height: 62px !important;
        margin: 0 !important;
        border-radius: 13px !important;
        box-sizing: border-box !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-keyword-cell] input[name="keyword"] {
        padding: 0 16px !important;
        border: 1px solid var(--artbin-filter-gold, #f4b51b) !important;
        background: rgba(11, 37, 64, .96) !important;
        color: #ffffff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
        font-size: 14px !important;
        font-weight: 650 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-keyword-cell] input[name="keyword"]::placeholder {
        color: rgba(255, 255, 255, .70) !important;
        opacity: 1 !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-search-submit-cell] .houzez-search-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        padding: 0 18px !important;
        border: 1px solid var(--artbin-filter-gold, #f4b51b) !important;
        background: var(--artbin-filter-gold, #f4b51b) !important;
        color: #10233a !important;
        box-shadow: 0 11px 24px rgba(244, 181, 27, .26) !important;
        font-size: 17px !important;
        font-weight: 900 !important;
        letter-spacing: .01em !important;
    }

    /* Popovers remain readable: two-column controls open across the panel,
       while the final full-width selectors retain the panel width. */
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control] > .artbin-service-control-popover,
    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group > .artbin-service-catalog-selector > .artbin-service-control-popover {
        z-index: 40 !important;
        width: calc(200% + 12px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 46px) !important;
        border-radius: 13px !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > :nth-child(even) > .artbin-service-control-popover {
        right: 0 !important;
        left: auto !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group--features > .artbin-service-catalog-selector > .artbin-service-control-popover {
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary {
        width: 100% !important;
        margin: 14px 0 0 !important;
        padding: 13px 0 0 !important;
        border-top: 1px solid rgba(184, 204, 222, .22) !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary.is-visible {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary-label {
        color: rgba(255, 255, 255, .84) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .04em !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-selection-summary .artbin-service-selection-chip {
        min-height: 30px !important;
        padding: 5px 9px !important;
        border: 1px solid rgba(244, 181, 27, .78) !important;
        border-radius: 8px !important;
        background: rgba(244, 181, 27, .10) !important;
        color: #ffffff !important;
    }

    html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-clear-slot {
        display: none !important;
    }

    /* Keep the two-column layout legible even on 360px phones. The labels
       retain their full words instead of breaking a final letter onto a line. */
    @media (max-width: 390px) {
        html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > [data-artbin-control] > summary,
        html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid > .artbin-service-filter-group > .artbin-service-catalog-selector > summary {
            gap: 6px !important;
            padding: 10px 7px !important;
        }

        html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-control-icon {
            flex-basis: 18px !important;
            width: 18px !important;
            height: 18px !important;
        }

        html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid [data-artbin-selection-label],
        html body.artbin-home-gold-search-active .artbin-service-filter--home > .artbin-service-filter-grid .artbin-service-catalog-selector-label {
            font-size: 11px !important;
            overflow-wrap: normal !important;
            word-break: normal !important;
        }
    }
}