/*
Theme Name: Windsor Child Theme
Theme URI: https://windsor.themerex.net/
Description: Windsor - excellent WordPress theme with many different blog and header layouts
Author: ThemeREX
Author URI: https://themerex.net/
Template: windsor
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
Text Domain: windsor
*/


/* =Theme customization starts here
-------------------------------------------------------------- */

.properties_search_basic {
    height: 70px;
}

.properties_search_form  .properties_search_advanced {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 20px;
}

form.properties_search_form .properties_search_advanced > .sc_form_field {
    width: calc(25% - 15px);
    box-sizing: border-box;
    padding-left: 0px;
}

/* === 4 FILTERS, SAME ABSOLUTE/LEFT APPROACH (no PHP) ===
   Paste AT THE BOTTOM of your child theme style.css, AFTER the existing rules. */

/* ---------- DESKTOP (≥1024px) ---------- */
@media (min-width:1024px){
  /* Make ALL first 4 fields absolute like the original first 3, just a bit narrower */
  form.properties_search_form .properties_search_advanced > .sc_form_field:nth-child(-n+4){
    position: absolute;
    z-index: 0;
    top: 0.4em;
    width: 22.5%; /* was 28% for 3 cols; tighter to fit 4 */
  }
  /* Column starts (tweak if you see tiny misalignment) */
  .properties_search_advanced > *:nth-child(1){ left: 1%; }
  .properties_search_advanced > *:nth-child(2){ left: 24.5%; }
  .properties_search_advanced > *:nth-child(3){ left: 48%; }
  .properties_search_advanced > *:nth-child(4){ left: 71.5%; }
}

/* ---------- TABLET (768–1023px) ---------- */
@media (max-width:1023px) and (min-width:768px){
  form.properties_search_form .properties_search_advanced > .sc_form_field:nth-child(-n+4){
    position: absolute;
    z-index: 0;
    top: 0.4em;
    width: 22%; /* was 24% for 3 cols; adjust to fit 4 */
  }
  .properties_search_advanced > *:nth-child(1){ left: 2%; }
  .properties_search_advanced > *:nth-child(2){ left: 25%; }
  .properties_search_advanced > *:nth-child(3){ left: 47%; }
  .properties_search_advanced > *:nth-child(4){ left: 67%; }
}
@media (min-width:767px){
	.properties_search_show_advanced {
		display: none!important;
	}
}
/* ---------- MOBILE (≤767px) ---------- */
@media (max-width:767px){
  /* You already set 1st to calc(100% - 9em) and 2nd+3rd to static+100%.
     Just include the 4th in the same mobile flow. */
  form.properties_search_form .properties_search_advanced > .sc_form_field:nth-child(4){
    position: static;
    width: 100%;
  }
}

@media (max-width: 767px) {
    form.properties_search_form .properties_search_advanced > .sc_form_field {
        width: 100%;
    }
    form.properties_search_form .properties_search_advanced > .sc_form_field:first-child {
        width: 100%;
    }
    form.properties_search_form .properties_search_advanced > .sc_form_field:nth-child(2),
    form.properties_search_form .properties_search_advanced > .sc_form_field:nth-child(3) {
        position: static;
        width: 100%;
    }
}

/* MOBILE: show text label "Filteri" to the LEFT of the sliders icon,
   without changing HTML or PHP. Works because TRX uses :before for the icon,
   and we add our text via :after + row-reverse. */

@media (max-width: 767px) {
  .properties_search .properties_search_show_advanced {
    display: inline-flex;              /* make the toggle a flex container */
    align-items: center;               /* vertical centering */
    flex-direction: row-reverse;       /* put :after before the icon (:before) visually */
    gap: 8px;                          /* space between text and icon */
    padding: 0 10px;                   /* enlarge click target */
    line-height: 1;                    /* keep it tidy */
    height: 2.75em;                    /* optional: align to input height */
  }
  .properties_search .properties_search_show_advanced::after {
    content: 'Filteri';                /* label text */
    font-size: 14px;
    font-weight: 600;
	padding-left: 10px;
    color: var(--theme-color-text_dark, #0C0F26);
  }
	.properties_search_form .properties_search_basic .properties_search_show_advanced {
            right: 4%!important;
			width: 100%!important;
        }
}

/* Optional: per-language labels (uncomment if you want localized text)
html[lang="en"] .properties_search .properties_search_show_advanced::after { content: 'Filters'; }
html[lang="me"] .properties_search .properties_search_show_advanced::after { content: 'Filteri'; }
html[lang="sr-RS"] .properties_search .properties_search_show_advanced::after { content: 'Filteri'; }
*/