/* ==========================================================================
   ea-filter.css — ВЁРСТКА ПАНЕЛИ ФИЛЬТРА (блок 47, #AdvertisementIndexForm).
   Перенесено 2026-08-10 из <style> замороженного мокапа
   .planning/mockups/homepage-filter-2026-08-07/FROZEN-2026-08-10-impl-input.html
   (вариант v2-A2 «Panel as a card, form language»).

   Отдельный файл, а не секция ea-form.css: дизайн фильтра ещё дорабатывается —
   изолированный churn означает, что `git revert` одного файла откатывает только
   фильтр и не трогает общий слой примитивов трёх форм.

   Чего здесь НЕТ и почему:
   - блок TRANSFER NOTE мокапа (лейбл с иконкой, перекраска на фокусе, кольцо,
     геометрия контрола) — уехал в ea-form.css коммитом 4e8ee564 и приходит сюда
     через класс .ea-form на <form>;
   - токены, объявленные в мокапе как «restated from sellprop_form.css:18-60», —
     по той же причине;
   - правил для .select2-dropdown: select2 монтирует дропдаун в <body>, любое
     правило отсюда стало бы общесайтовым и перекрасило select2 в админке (R4).
     Дропдаун уже стилизован sellprop_form.css:705+ на том же языке.

   Значения не изобретаются: --brand-*/--ink*/--r-*/--ease/--gap/--pad берутся
   из custom.css:779-803, --ea-line/--ea-radius-card/--ea-shadow-* — из
   property-card.css:10, бренд-обводка — класс .ea-draw-border (custom.css:935-1014).
   Лестница радиусов: 20px панель → 12px контрол. Тени — тёплое семейство
   rgba(120,72,40,..), никогда нейтральный чёрный.
   ========================================================================== */

.swiper-container, .swiper-wrapper {z-index: initial;}

#AdvertisementIndexForm{
    /* Только ритм ВНУТРИ панели. Примитивы поля (--ea-control-h, --ea-radius,
       --ea-label-*, --ea-line-strong, --ea-field-size, --ea-shadow-*) объявлены
       в ea-form.css на :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) —
       форма несёт класс .ea-form, поэтому дублировать их здесь нельзя:
       при следующей правке значения разъедутся. 30px-гуттер — дело секции. */
    --ea-field-gap-x:16px;
    --ea-field-gap-y:18px;
}

/* ---------- the section keeps its deliberate overlap on the slider ----------
   custom.css:1284-1291 excludes .elementor-section from the 40px vertical rhythm
   ON PURPOSE and owns the 30px gap to the next section. Only the font stack is
   corrected here: the theme hands down Lato and breaks Montserrat metrics. */
.elementor-section{
    font-family:"Montserrat",Helvetica,Arial,sans-serif;
    box-sizing:border-box;
    position:relative;
    z-index:1;
}
/* Наложение на слайдер держится на классе-маркере, а не на голом
   `.elementor-section`: в каталоге секция — ПЕРВЫЙ ребёнок `.page-content`, и тема
   бьёт отступ правилом `html :first-child{margin-top:0}` (style.css), у которого
   специфичность 0,1,1 против 0,1,0. На главной секция не первый ребёнок, поэтому
   там наложение работало и без класса — отсюда расхождение главной и каталога. */
.elementor-section.ea-filter-v2{margin-top:-60px}
/* Выравнивание задаётся явно, а не наследуется от страницы: обёртка избранного —
   `<div class="page text-center">`, и `text-align:center` доезжал до лейблов, из-за
   чего фильтр там выглядел иначе, чем на остальных четырёх URL. Кнопки не задеты:
   ряд Sale/Rent/Request центрируется flex'ом, а надписи внутри Search / Show on map —
   собственным `text-align:center`. */
.elementor-section.ea-filter-v2{text-align:left}
.elementor-section *,
.elementor-section *::before,
.elementor-section *::after{box-sizing:border-box}

/* ---------- Sale / Rent / Request: three ordinary buttons ----------
   These are LINKS, not tabs: Sale and Rent submit the form and land on
   /agency/realty, Request leaves for /agency/bids/add. A segmented control
   promised a switch that toggles something in place, which is not what happens
   when you press one - so the rail, the shared surface and the selected-segment
   fill are gone. Three separate buttons, each standing on its own.

   They are not restyled here either: the markup now carries the page's own
   button component, .ea-btn.ea-btn--ghost (custom.css:861-888), which is what
   "one class to edit" means in practice. Ghost, not solid: Search is the one
   primary on this screen, and three solid buttons above it would outrank it.
   Only what the component cannot know is set below. */
.rent--type--selector{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
    padding:0;
    background:none;
    border:0;
    box-shadow:none;
}

/* The ring is absolutely positioned inside its carrier, and .ea-btn does not
   establish one. Everything else - height, radius, type, colour, hover lift,
   focus outline - comes from the component. */
.rent--type--selector .selector{
    position:relative;
    /* The one knob that has to change for a button, and the reason is geometric,
       not decorative: .ea-btn--ghost draws its outline as `inset 0 0 0 2px`
       (custom.css:880), i.e. the outermost 2px of the box. The ring defaults to
       1.5px, so it covered only part of that outline and the leftover half-pixel
       of orange read as a second, thinner line just inside the first. At 2px the
       ring lands exactly on the outline it replaces - one band, not two. On the
       fields the same relation already holds (1px border under a 1.5px ring).
       Speed knobs are NOT touched: --ea-sweep-dur/-delay/-ease stay the class's. */
    --ea-sweep-w:2px;

    /* NO cursor tracking on these. It was tried and removed: the panel behind
       them already leans, and three pills leaning on their own inside a leaning
       panel was one moving thing too many. The ring is the movement these
       buttons get. .ea-btn therefore keeps sole ownership of `transform` again -
       its hover lift and active press are the component's, untouched.

       The transition list still has to be written out, and that is a separate
       matter from the tilt: `transition` is ONE shorthand, and .ea-draw-border
       spends it on --ea-sweep (custom.css:977). Whichever of the two rules loses
       the cascade loses its whole list. Here .ea-draw-border (custom.css:966)
       was beating .ea-btn (:869), so the component's own transitions were being
       dropped - that is why the ghost hover fill used to switch instantly. The
       merged list below is .ea-btn's three properties at .25s, verbatim, plus
       the ring segment. Nothing is invented and nothing is lost. */
    --ea-ring-t:--ea-sweep var(--ea-sweep-dur,.52s) var(--ea-sweep-ease,cubic-bezier(.32,.72,0,1)) var(--ea-sweep-delay,.1s);
    transition:var(--ea-ring-t),
               transform .25s var(--ease,cubic-bezier(.22,.61,.36,1)),
               box-shadow .25s var(--ease,cubic-bezier(.22,.61,.36,1)),
               background-color .25s var(--ease,cubic-bezier(.22,.61,.36,1));
}

/* The brand ring, on the same shared recipe as the fields and the form:
   .ea-draw-border is in the markup, so the knobs (1.5px / .52s / .1s delay /
   iOS curve, custom.css:966-977) and the :hover + :focus-visible triggers
   (custom.css:1017-1018) are the class's own defaults - nothing is restated
   here, which is the only way the speed can be guaranteed to match. */

/* Each button names what it does, in the icon family the field labels already
   speak (FontAwesome 4.7 - @font-face in custom_icons.css:601, fonts in
   theme/TM58887/webroot/fonts/fontawesome-webfont.*).

   Geometry is stated ONCE and every button changes only its glyph. The gap
   between glyph and label is not stated at all: .ea-btn is inline-flex with
   gap:8px and align-items:center (custom.css:863), so the pseudo-element is a
   flex item the component already spaces and centres. Colour is inherited, so
   the ghost hover (orange fill, white text) carries the icon with it.

   ON ::before, NOT ::after - an element has exactly ONE ::after and the ring
   owns it. Measured on the stand when they shared it: the ring box on Request
   came out top:23px / right:16px / 110x30 instead of covering the button, so
   its top edge ran through the label and its bottom-left corner cut into the
   button, while the glyph did not render at all.

   The fa-angle-right that used to sit on Request is replaced, not moved to a
   carrier of its own. It said "this one leaves the page", and that is not the
   difference between the three - all three leave (Sale and Rent submit to
   /agency/realty, Request goes to /agency/bids/add). The pencil says the real
   one: the other two run a search, this one opens a form to fill in. One
   pseudo-element, one job. */
.rent--type--selector .selector::before{
    font-family:"FontAwesome";
    font-size:13px;
    line-height:1;
}
/* Picked by hook, not by position, so the order of the three can change */
.rent--type--selector .selector[data-rent="sale"]::before{content:"\f02b"}  /* fa-tag - listed for sale */
.rent--type--selector .selector[data-rent="rent"]::before{content:"\f084"}  /* fa-key - keys handed over */
.rent--type--selector .selector:not([data-rent])::before{content:"\f044"}   /* fa-pencil-square-o - fill in a request */

/* Selected state. It is honoured now: the block reads the value the controller
   already put in request->data.Advertisement.rent (db_patches/2026-08-10-05),
   so after landing on /agency/realty?rent=sale the page really is showing that
   half of the catalogue and the button says so. Before that patch the class
   only existed between the click and the navigation, which is why there were
   no rules here.

   The fill is the one .ea-btn--ghost already shows on hover (custom.css:882-885)
   - no colour is introduced - minus the lift: a resting state must not look
   like it is being pointed at. Hover keeps the lift, transform is left to the
   component. Three classes deep, so it outranks .ea-btn--ghost:hover's two and
   the selected button does not lose its fill when the cursor leaves it.
   Request has no data-rent and never gets this - it is not a tab. */
.rent--type--selector .selector.active{
    background:var(--brand-orange);
    color:#fff;
    box-shadow:inset 0 0 0 2px var(--brand-orange), 0 8px 20px -8px rgba(242,105,33,.55);
}

/* ---------- the panel: a card in the same kit ---------- */
.elementor-form-fields-wrapper{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:var(--ea-field-gap-y) var(--ea-field-gap-x);
    margin:0;
    padding:var(--pad,20px);
    background:var(--ea-surface,#fff);
    border:1px solid var(--ea-line,#e7e4e0);
    border-radius:var(--ea-radius-card,20px);
    /* ---- the LIGHT follows the cursor; the panel itself does not move ----
       Same channel as the agent cards and the quick tiles (custom.css:1072-1105):
       home_cards.js writes --rx/--ry (angle) and --sx/--sy (where the light
       throws the shadow), and a consumer spends only the ones it wants. This one
       spends --sx/--sy and ignores the angle: it is called with max:0, so there
       is no rotation and no transform on this element at all.

       Why: the panel is a surface you aim INTO. Even at 1.6deg it was one moving
       thing too many next to everything else on the page, and a control that
       shifts while you reach for it is the one kind of motion a form cannot
       afford. The shadow carries the whole effect - the light source swings with
       the cursor and the surface stays exactly where you left it.

       Three layers of the WARM family - the panel is a sibling of the property
       card, not of the agent card, so the tint is rgba(120,72,40,..) and never
       the neutral black the agents use. The near layer stays put (contact
       shadow), the two far ones ride --sx/--sy. */
    box-shadow:
        0 1px 2px rgba(120,72,40,.07),
        calc(var(--sx,0px) * .4) calc(8px + var(--sy,0px) * .4) 16px -4px rgba(120,72,40,.14),
        var(--sx,0px) calc(24px + var(--sy,0px)) 44px -10px rgba(120,72,40,.22);
    transition:box-shadow .35s var(--ease,cubic-bezier(.22,.61,.36,1));
}
/* while actually tracking, the shadow must not be smoothed or it lags behind the
   cursor - the same split the cards make for transform (custom.css:1097) */
.elementor-form-fields-wrapper.is-tilting{
    transition:box-shadow .12s linear;
}
/* Hover deepens the far layer, as everywhere on the page. No -4px lift here:
   the cards lift because you click them, and a panel you aim INTO should not
   jump toward you - the travelling light already carries the response. */
.elementor-form-fields-wrapper:hover{
    box-shadow:
        0 1px 2px rgba(120,72,40,.08),
        calc(var(--sx,0px) * .4) calc(10px + var(--sy,0px) * .4) 18px -4px rgba(120,72,40,.16),
        calc(var(--sx,0px) * 1.3) calc(30px + var(--sy,0px) * 1.3) 56px -10px rgba(120,72,40,.26);
}
/* ЗАМОРОЗКА НАКЛОНА — несущее правило, не украшение (R5).
   select2 меряет позицию поля ОДИН раз, в момент открытия дропдауна: если
   панель в этот момент повёрнута или продолжает доворачиваться, дропдаун
   остаётся висеть там, где поле было, и уезжает от него. То же и для ввода —
   контрол, в который печатают, не должен дрейфовать под курсором.
   `!important` обязателен: home_cards.js пишет --rx/--ry ИНЛАЙНОВЫМ стилем
   (style.setProperty), а инлайн проигрывает только !important-правилу автора.
   --sx/--sy НЕ трогаем: тень геометрию не меняет и ничего не сбивает при
   измерении, поэтому свет продолжает ходить за курсором и в работе с панелью.
   Правило остаётся, даже пока панель вызвана с малым max: оно страхует
   единственный сценарий, который ломает выпадашку, и стоит один селектор. */
.elementor-form-fields-wrapper:focus-within,
.elementor-form-fields-wrapper:has(.select2-container--open),
.elementor-form-fields-wrapper:has(.select2-container--focus){
    --rx:0deg !important;
    --ry:0deg !important;
}

/* ---------- field groups: priority is expressed as width ----------
   The visible field count changes at runtime (the inline script hides and shows
   [data-category] groups), so the row must stay tidy at 4, 5, 6 and 7 fields.
   flex-wrap does that by construction: every line is filled by grow, so there is
   never an empty cell or a ragged tail the way a fixed column grid would leave.
   No :nth-child anywhere - the visible set is not positional. */
.elementor-field-group{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    min-width:0;
    flex:1 1 185px;                       /* neutral default = the no-:has() fallback */
    border-radius:var(--ea-radius,12px);  /* the ring inherits its radius from here */
    --ea-sweep-top:26px;                  /* label height 14px*1.35 + 8px gap; ring clears it */
}

/* priority: what people actually filter by gets the room.
   Every basis is 22px wider than in variant A - that is exactly what the icon
   costs a label (16px box + 7px gap), so the text has the same room it had
   before the icon arrived and no label starts truncating that did not already. */
.elementor-field-group:has(#AdvertisementCategoryId){flex:1.7 1 287px}   /* Search   */
.elementor-field-group:has(#AdvertisementPriceTo){flex:1.2 1 202px}      /* Budget   */
.elementor-field-group:has(#AdvertisementWindowView){flex:1.35 1 237px}  /* long label */
.elementor-field-group:has(#AdvertisementApartmentType){flex:1.1 1 207px}
.elementor-field-group:has(#AdvertisementLocalityId){flex:1 1 197px}
.elementor-field-group:has(#AdvertisementCountryId){flex:1 1 187px}
.elementor-field-group:has(#AdvertisementSiteAreaTo){flex:.95 1 197px}
.elementor-field-group:has(#AdvertisementWcTypeTo){flex:.9 1 187px}

/* The brand ring is the page's focus gesture, so the groups opt into the shared
   recipe by carrying .ea-draw-border (custom.css:935-1014) instead of restating
   the conic gradient. That class also brings a :hover trigger, which suits a
   card but would light six rings as the cursor crosses a form row; the form
   precedent (sellprop_form.css:496-527) is focus-only, and that is what wins. */
#AdvertisementIndexForm .elementor-field-group.ea-draw-border:hover{--ea-sweep:0deg}
#AdvertisementIndexForm .elementor-field-group.ea-draw-border:focus-within,
#AdvertisementIndexForm .elementor-field-group.ea-draw-border:has(.select2-container--open),
#AdvertisementIndexForm .elementor-field-group.ea-draw-border:has(.select2-container--focus){--ea-sweep:360deg}

/* Шкала лейбла (размер/вес/интерлиньяж/трекинг/цвет/отступ/display) целиком
   приходит из ea-form.css §1 — здесь только то, чего у общего слоя нет и не
   должно быть: ширина на всю колонку и однострочность.
   Однострочность — жёсткое требование, а не вкус: кольцо стартует с фиксированных
   26px (--ea-sweep-top), и перенесённый лейбл ушёл бы под него. Ширины групп
   выше подобраны так, чтобы каждый лейбл помещался в строку. */
#AdvertisementIndexForm .elementor-field-group > label,
#AdvertisementIndexForm .elementor-field-group .elementor-field-label{
    width:100%;
    font-family:"Montserrat",Helvetica,Arial,sans-serif;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.elementor-field-group .elementor-select-wrapper{
    display:flex;
    position:relative;
    width:100%;
    height:var(--ea-control-h);
    max-height:var(--ea-control-h);
}

/* ---------- controls: the sell-form geometry, scoped to this form ---------- */
#AdvertisementIndexForm .elementor-field-input,
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection{
    width:100%;
    height:var(--ea-control-h);
    min-height:var(--ea-control-h);
    padding:0 16px;
    font-family:"Montserrat",Helvetica,Arial,sans-serif;
    font-size:var(--ea-field-size);
    font-weight:400;
    color:var(--ea-ink,#1e1e1e);
    background-color:var(--ea-surface,#fff);
    border:1px solid var(--ea-line,#e7e4e0);
    border-radius:var(--ea-radius);
    box-shadow:var(--ea-shadow-rest,0 1px 2px rgba(120,72,40,.06));
    transition:border-color .2s var(--ea-ease,cubic-bezier(.32,.72,0,1)),
               box-shadow .2s var(--ea-ease,cubic-bezier(.32,.72,0,1)),
               background-color .2s var(--ea-ease,cubic-bezier(.32,.72,0,1));
    -webkit-appearance:none;
    appearance:none;
    outline:none;
}
#AdvertisementIndexForm .elementor-field-input:hover,
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection:hover{
    border-color:var(--ea-line-strong);
}
/* The ring draws over the border, so the border stays put on focus and only the
   soft halo is added - the same split the form makes (sellprop_form.css:528+). */
#AdvertisementIndexForm .elementor-field-input:focus,
#AdvertisementIndexForm .select2-container--bootstrap.select2-container--focus .select2-selection,
#AdvertisementIndexForm .select2-container--bootstrap.select2-container--open .select2-selection{
    border-color:var(--ea-line-strong);
    box-shadow:var(--ea-shadow-focus,0 0 0 4px rgba(242,105,33,.14), 0 2px 8px rgba(120,72,40,.08));
    background-color:var(--ea-surface,#fff);
}
#AdvertisementIndexForm .elementor-field-input::placeholder{
    color:var(--ea-ink-muted,#6b6f76);
    opacity:1;
}

/* select2 writes its width inline at init; the flex row owns sizing */
#AdvertisementIndexForm .elementor-select-wrapper .select2-container{width:100% !important;min-width:0}

#AdvertisementIndexForm .select2-container--bootstrap .select2-selection--single .select2-selection__rendered{
    /* right padding clears the caret glyph, which the theme parks at right:16px */
    padding:0 24px 0 0;
    line-height:calc(var(--ea-control-h) - 2px);
    font-size:var(--ea-field-size);
    color:var(--ea-ink,#1e1e1e);
}
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection__placeholder{
    color:var(--ea-ink-muted,#6b6f76);
}
/* Caret: the theme already draws it as a real Material Design Icons glyph
   (style.css: .select2-selection__arrow b:before{content:"\f236";
   font-family:"Material Design Icons"}), and the MDI @font-face plus its font
   files ship with the theme. So the glyph is recoloured through inherited
   `color` on <b> rather than hidden and redrawn - a border triangle here would
   both throw away a working icon and make these selects the only ones on the
   site with a different caret. Geometry (position/right:16px/width) stays the
   theme's; overriding it would only fight a rule that is already correct.
   `border-top-color` recipes are dead code against this markup: there is no
   CSS triangle to recolour. */
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection__arrow b{
    color:var(--ea-ink-muted,#6b6f76);
    transition:color .22s var(--ea-ease,cubic-bezier(.32,.72,0,1));
}
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection__arrow b:before{
    transition:transform .22s var(--ea-ease,cubic-bezier(.32,.72,0,1));
}
#AdvertisementIndexForm .select2-container--bootstrap.select2-container--open .select2-selection__arrow b{
    color:var(--brand-orange,#F26921);
}
#AdvertisementIndexForm .select2-container--bootstrap.select2-container--open .select2-selection__arrow b:before{
    transform:rotate(180deg);
}

/* Search chips - accent tint, the card's tag radius family */
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection--multiple{padding:0}
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered{
    margin:0;
    padding:0 12px;
    height:calc(var(--ea-control-h) - 2px);
    max-height:calc(var(--ea-control-h) - 2px);
    line-height:normal;
}
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice{
    background-color:rgba(242,105,33,.10);
    border:1px solid rgba(242,105,33,.28);
    border-radius:10px;
    padding:5px 10px;
    font-family:"Montserrat",Helvetica,Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    color:var(--brand-orange,#F26921);
}
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove{
    color:rgba(242,105,33,.7);
    margin-right:6px;
    font-weight:700;
}
#AdvertisementIndexForm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover{
    color:var(--brand-red,#BE151B);
}

/* NOTE: .select2-dropdown is deliberately NOT touched. Select2 mounts it on
   <body>, so any rule here would be site-wide (admin included), and
   sellprop_form.css:705+ already styles it in this exact language. */

/* Blocked field (the inline script's PROPERTY-TYPE-BLOCK path): read as
   read-only, the way the form marks a non-editable control. */
.elementor-field-group.field-blocked{opacity:.55}
.elementor-field-group.field-blocked .elementor-field-input,
.elementor-field-group.field-blocked .select2-container--bootstrap .select2-selection{
    background-color:var(--ea-surface-sunken,#f8f7f5);
    box-shadow:none;
}
.elementor-field-group.field-blocked,
.elementor-field-group.field-blocked *{cursor:not-allowed}
.elementor-field-group.field-blocked::after{content:none}

/* ---------- actions: two outline buttons in the panel's control language ---------- */
.elementor-field-group-button{
    display:flex;
    flex:0 0 100%;
    width:100%;
    gap:12px;
    align-items:center;
}
/* Two equal halves of the row - the col-md-6 behaviour, without the class
   (Bootstrap is not on the front; only the behaviour is borrowed).
   flex-basis:0% + grow:1 makes the split pure proportion rather than
   content-driven, and min-width:0 removes the min-content floor so the longer
   label ("Show on map") cannot claim more than half. The component's
   min-width:176px is overridden here rather than dropped from .elementor-button:
   it is still the right floor for a button standing on its own.
   Specificity 0,2,0 - it also outranks the bare .elementor-button override
   further down inside @media, which would otherwise win on source order. */
.elementor-field-group-button > .elementor-button{
    flex:1 1 0%;
    min-width:0;
    width:auto;
}
/* Both actions are outline buttons now - one rule, not a primary and a
   secondary. The filled gradient on Search is gone: the panel is a row of
   outlined controls, and a solid block at the end of it was the only thing on
   the surface that did not belong to that family. Search still leads by being
   first and by carrying the magnifier; rank is order and icon, not weight.

   The box is the field's box on purpose - same --ea-control-h, same
   --ea-radius, same 1px border, same --ea-shadow-rest - so the two buttons read
   as the last two controls of the panel rather than as furniture below it. */
.elementor-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    /* the icon's only spacing rule: the glyph is a flex item, so the gap does
       what a margin would, once, for both buttons */
    gap:10px;
    /* ring carrier: .ea-draw-border::after is absolute and .elementor-button
       establishes no containing block of its own */
    position:relative;
    height:var(--ea-control-h);
    min-height:var(--ea-control-h);
    width:auto;
    min-width:176px;
    padding:0 24px;
    color:var(--brand-orange,#f26921) !important;
    background:var(--ea-surface,#fff);
    border:1px solid rgba(242,105,33,.45);
    border-radius:var(--ea-radius);
    box-shadow:var(--ea-shadow-rest,0 1px 2px rgba(120,72,40,.06));
    font-family:"Montserrat",Helvetica,Arial,sans-serif;
    font-size:15px;
    font-weight:700;
    letter-spacing:.01em;
    line-height:1;
    white-space:nowrap;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    /* THE RING'S OWN TRANSITION HAS TO BE CARRIED HERE. `transition` is one
       shorthand, and .ea-draw-border spends it on `--ea-sweep` (custom.css:977).
       This rule matches at the same weight and sits later in the cascade (inline
       <style> after custom.css), so writing a transition list without --ea-sweep
       silently REPLACED it: the angle then jumped 0->360deg with no interpolation
       and the ring appeared all at once - the "colour just snaps instead of a
       line being drawn" defect. It is stated as a variable because the tilting
       buttons below need the identical segment in a second list, and two hand-
       copied lists drift apart.
       The fields never hit this: there the ring rides the .elementor-field-group
       and the .2s transition rides the input INSIDE it - two elements, two
       shorthands, no collision. On a button the carrier and the animated box are
       the same element, so the two lists must be merged by hand. */
    --ea-ring-t:--ea-sweep var(--ea-sweep-dur,.52s) var(--ea-sweep-ease,cubic-bezier(.32,.72,0,1)) var(--ea-sweep-delay,.1s);
    /* the control transition, copied from the field (see the .elementor-field-input
       rule above): the same three properties, the same .2s, the same iOS curve */
    transition:var(--ea-ring-t),
               border-color .2s var(--ea-ease,cubic-bezier(.32,.72,0,1)),
               box-shadow .2s var(--ea-ease,cubic-bezier(.32,.72,0,1)),
               background-color .2s var(--ea-ease,cubic-bezier(.32,.72,0,1));
}
/* HOVER = what a field does when the cursor reaches it, nothing else.
   A field answers by strengthening its own outline over .2s and holding still:
   it does not fill, does not lift, does not invert its text. These buttons now
   answer the same way - the 45%-opacity orange goes solid, and that is the
   whole move. The orange-fill hover Show on map used to have was the loudest
   event in the panel and the one thing here that behaved like a poster button
   instead of a control. */
.elementor-button:hover{
    border-color:var(--brand-orange,#f26921);
    color:var(--brand-orange,#f26921) !important;
    background:var(--ea-surface,#fff);
    text-decoration:none;
}
/* ...and the brand ring draws over that border, exactly as it does on a field.
   .ea-draw-border is in the markup, so the recipe, the 1.5px width over a 1px
   border, the .52s / .1s / iOS timing and the :hover + :focus-visible triggers
   are all the class's own (custom.css:966-1018) - nothing is restated, which is
   the only way the speed is guaranteed to match the fields and the three
   buttons above. The fields mute the hover trigger because eight rings lighting
   up as the cursor crosses a row is noise; two buttons at the end of the panel
   are not a row, and a button is hovered on the way to being clicked. */

/* Focus keeps the field's split too: the ring draws (via .ea-draw-border) and
   the soft halo is added underneath, while the border stays put. */
.elementor-button:focus-visible{
    outline:none;
    box-shadow:var(--ea-shadow-focus,0 0 0 4px rgba(242,105,33,.14), 0 2px 8px rgba(120,72,40,.08));
}
.elementor-button:active{
    box-shadow:inset 0 1px 3px rgba(120,72,40,.10);
}
/* Icons, on the same mechanism as the three buttons above and the field labels:
   FontAwesome 4.7 on ::before, geometry once, one glyph per button.
   ::after is the ring's - it is never touched here. */
.elementor-button::before{
    font-family:"FontAwesome";
    font-size:15px;
    line-height:1;
}
.elementor-field-group-button button.elementor-button::before{content:"\f002"}  /* fa-search - run the query */
#JS-show-on-map-panel.elementor-button::before{content:"\f279"}                 /* fa-map - the same results, on a map */

/* ---------- responsive: the .ea-* breakpoints, 480 / 768 / 992 / 1200 ---------- */
/* Media queries add no specificity, so the priority rules above (0,2,0 via :has)
   would outrank a bare .elementor-field-group override and keep desktop widths on
   a phone. The overrides therefore match at the same or higher weight and win on
   source order. */
/* ---------- desktop: fields on ONE row, actions on their own ----------
   flex-basis:0 plus min-width:0 removes the automatic min-content floor, so the
   field row cannot wrap however many groups the inline script leaves visible
   (5, 6, 7 or 8) - widths become pure proportion of flex-grow and the fields
   squeeze instead of dropping to a second tier. Grow weights carry both
   priority and label length, so Window View keeps room for its long label.
   The action group is the only wrapping item: flex-basis:100% cannot share a
   line, which forces the break after the last field without any DOM change.
   Row is kept tight (12px row-gap, 18px block padding) - that gap is exactly
   what the height budget is made of. */
@media (min-width:992px){
    .elementor-form-fields-wrapper{
        flex-wrap:wrap;
        gap:12px 10px;
        padding:18px 20px;
    }
    /* Weights are pure proportion here (basis 0), so the icon does not take room
       from the row - it takes room from the label inside its own column. They are
       re-balanced for that: the two longest labels gain, the short ones (Country,
       City, Budget, Bathroom) give back what they do not need. */
    .elementor-form-fields-wrapper .elementor-field-group{flex:1 1 0%}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementCountryId){flex:.95 1 0%}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementLocalityId){flex:.9 1 0%}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementCategoryId){flex:1.45 1 0%}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementApartmentType){flex:1.2 1 0%}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementPriceTo){flex:1 1 0%}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementWindowView){flex:1.6 1 0%}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementWcTypeTo){flex:1 1 0%}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementSiteAreaTo){flex:1.15 1 0%}

    .elementor-field-group-button{
        flex:0 0 100%;
        width:100%;
        align-self:auto;
        gap:10px;
        margin-top:0;
    }
    .elementor-button{padding:0 24px}
    /* the field box gives back 2px of side padding at this density */
    #AdvertisementIndexForm .elementor-field-input,
    #AdvertisementIndexForm .select2-container--bootstrap .select2-selection{padding:0 14px}
    #AdvertisementIndexForm .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered{padding:0 10px}
}
@media (max-width:991px){
    .elementor-form-fields-wrapper .elementor-field-group{flex:1 1 calc(33.333% - 11px)}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementCategoryId){flex:1 1 calc(66.666% - 6px)}
    /* col-12: below the desktop row the two halves become two full-width rows.
       This is the same 992px edge the field row uses, so the actions change shape
       on the same breath as the fields rather than one step later.
       column-reverse puts Search (first in the DOM) at the bottom, nearest the
       thumb, and leaves the markup alone. flex:0 0 auto stops the two items from
       growing to fill the column's height. */
    .elementor-field-group-button{flex-direction:column-reverse;gap:10px}
    .elementor-field-group-button > .elementor-button{flex:0 0 auto;width:100%}
}
@media (max-width:767px){
    .elementor-section.ea-filter-v2{margin-top:-40px}
    /* three buttons keep their own edges, they just share the row evenly */
    .rent--type--selector{gap:8px}
    .rent--type--selector .selector{flex:1 1 0;min-width:0;padding:0 10px;letter-spacing:.04em}
    .elementor-form-fields-wrapper{gap:16px 12px}
    .elementor-form-fields-wrapper .elementor-field-group{flex:1 1 calc(50% - 6px)}
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementCategoryId){flex:1 1 100%}
}
@media (max-width:479px){
    .elementor-section.ea-filter-v2{margin-top:-30px}
    .elementor-form-fields-wrapper .elementor-field-group,
    .elementor-form-fields-wrapper .elementor-field-group:has(#AdvertisementCategoryId){flex:1 1 100%}
    /* Three buttons share ~290px here, and the longest label now carries a glyph
       in front of it. The glyph and the component's 8px gap give back what
       "REQUEST" needs at 12px; the padding shorthand is safe again now that the
       chevron and its reserved right padding are gone. */
    .rent--type--selector .selector{font-size:12px;padding:0 6px;gap:6px}
    .rent--type--selector .selector::before{font-size:11px}
}

/* reduced motion: same policy as the rest of the page (custom.css:1220) */
@media (prefers-reduced-motion:reduce){
    .elementor-section *,
    .elementor-section *::before,
    .elementor-section *::after{transition:none !important;animation:none !important}
}

/* SEARCH-FIELD-FIX-2026-06-16-START
   SEARCH field (category_id multiple select) fix. PRESERVED - logic unchanged,
   the hard-coded 50px heights now follow --ea-control-h and the mobile
   breakpoint moved 570 -> 767 to match the layout above.
   Root cause: Select2 puts <span.select2-selection__clear> as a direct child of
   <ul> (invalid HTML); browser anonymous-block handling renders it above the ul
   and pulls the float chip onto the SEARCH label. Fix: flex layout on rendered ul. */
#AdvertisementCategoryId ~ .select2-container--bootstrap .select2-selection--multiple {
    overflow: hidden !important;
    position: relative !important;
}
#AdvertisementCategoryId ~ .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: normal !important;
    max-height: var(--ea-control-h, 52px) !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
}
#AdvertisementCategoryId ~ .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 4px 0 0 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    max-width: calc(100% - 32px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#AdvertisementCategoryId ~ .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
    order: 10 !important;
    margin: 0 0 0 auto !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
#AdvertisementCategoryId ~ .select2-container--bootstrap .select2-selection--multiple .select2-search--inline {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 3em !important;
}
#AdvertisementCategoryId ~ .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
    height: 32px !important;
    line-height: 32px !important;
    margin-top: 0 !important;
    padding: 0 4px !important;
    min-width: 100% !important;
    font-family: "Montserrat", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
}
.elementor-field-group:has(#AdvertisementCategoryId) .elementor-field-label {
    position: relative !important;
    z-index: 2 !important;
}
@media (max-width: 767px) {
    .elementor-field-group:has(#AdvertisementCategoryId) .elementor-select-wrapper {
        height: var(--ea-control-h, 52px) !important;
        min-height: var(--ea-control-h, 52px) !important;
    }
    .elementor-field-group:has(#AdvertisementCategoryId) .select2-container--bootstrap .select2-selection--multiple {
        min-height: var(--ea-control-h, 52px) !important;
    }
}
/* SEARCH-FIELD-FIX-2026-06-16-END */

/* REMOVE-CLEAR-X-2026-06-16: remove select2 "clear all" cross from Country/City/Search
   dropdowns. PRESERVED verbatim. Per-chip remove crosses stay untouched. */
.elementor-field-group:has(#AdvertisementCountryId) .select2-selection__clear,
.elementor-field-group:has(#AdvertisementLocalityId) .select2-selection__clear,
.elementor-field-group:has(#AdvertisementCategoryId) .select2-selection__clear{display:none !important;}
