/* =========================================================================
 * Lugera search — width utility classes for search-v1 override
 *
 * Used by template-parts/search/search-v1.php via $lugera_layout array.
 * Each .flex-search wrapper gets one of these utility classes:
 *   lgr-w-50  -> 50% width on desktop
 *   lgr-w-33  -> 33.333%
 *   lgr-w-25  -> 25%
 *   lgr-w-15  -> 15%   (for buttons like Submit)
 *   lgr-w-10  -> 10%   (for buttons like Reset)
 *
 * Math: parent uses `gap-2` (gap: 0.5rem = 8px).
 *       N children -> (N-1) gaps to share evenly.
 *
 * Each calc() subtracts the proportional share of total gap width
 * so children fit exactly within the row.
 *
 * Breakpoints:
 *   >= 992px (lg)   -> exact ratios
 *   768-991px (md)  -> 2 columns (50% each)
 *   < 768px (sm)    -> 1 column
 * ========================================================================= */

#desktop-header-search {
    background: #FFEBF6!important;
}

.advanced-search .container {
    background-color: #E90E8B;
    opacity: 1;
    border-radius: 8px;
    padding: 24px;
    gap: 16px;
}

/* Prevent overflow on long content (Bootstrap flex item min-width: auto fix) */
.lugera-search-row .flex-search { min-width: 0; }

/* -------------------------------------------------------------------------
 * Desktop (>= 992px) - exact ratios
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .lugera-search-row .flex-search.lgr-w-50 {
        flex: 0 0 calc(50% - 4px);
        max-width: calc(50% - 4px);
    }
    .lugera-search-row .flex-search.lgr-w-33 {
        flex: 0 0 calc(33.3333% - 5.33px);
        max-width: calc(33.3333% - 5.33px);
    }
    .lugera-search-row .flex-search.lgr-w-25 {
        flex: 0 0 calc(25% - 6px);
        max-width: calc(25% - 6px);
    }
    .lugera-search-row .flex-search.lgr-w-15 {
        flex: 0 0 calc(15% - 6.8px);
        max-width: calc(15% - 6.8px);
        min-width: 100px;
    }
    .lugera-search-row .flex-search.lgr-w-10 {
        flex: 0 0 calc(10% - 7.2px);
        max-width: calc(10% - 7.2px);
        min-width: 80px;
    }

    /* Buttons inside their wrappers should fill the wrapper */
    .lugera-search-row .flex-search.lgr-w-15 > .btn,
    .lugera-search-row .flex-search.lgr-w-10 > .btn {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
 * Tablet (768-991px) - 2 columns; buttons get their own row spot
 * ------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .lugera-search-row .flex-search[class*="lgr-w-"] {
        flex: 0 0 calc(50% - 4px);
        max-width: calc(50% - 4px);
    }
    /* Buttons stay narrower on tablet so they don't dominate */
    .lugera-search-row .flex-search.lgr-w-15,
    .lugera-search-row .flex-search.lgr-w-10 {
        flex: 0 0 auto;
        max-width: none;
    }
    .lugera-search-row .flex-search.lgr-w-15 > .btn,
    .lugera-search-row .flex-search.lgr-w-10 > .btn {
        width: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* -------------------------------------------------------------------------
 * Mobile (< 768px) - 1 column for fields; buttons inline at the end
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .lugera-search-row .flex-search[class*="lgr-w-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .lugera-search-row .flex-search.lgr-w-15,
    .lugera-search-row .flex-search.lgr-w-10 {
        flex: 1 1 auto;
        max-width: none;
    }
    .lugera-search-row .flex-search.lgr-w-15 > .btn,
    .lugera-search-row .flex-search.lgr-w-10 > .btn {
        width: 100%;
    }
}

/* -------------------------------------------------------------------------
 * Safety: neutralize Houzez .fields-width (12%) if accidentally mixed
 * ------------------------------------------------------------------------- */
.lugera-search-row .flex-search.fields-width { width: auto; }