/* ============================================================================
   FindPRO — premium 3-field search bar (Emirate / Area / PRO Service + button).
   Applied only to forms tagged .fp-3field, so no other layout is affected.
   ========================================================================== */

/* ---- Layout ---------------------------------------------------------------- */
.fp-3field select#emirate{width:100%;max-width:100%}

@media (max-width:900px){                    /* mobile: stack, full width each */
  .fp-3field.two-fields{display:block}
  .fp-3field .select-wrapper,.fp-3field .form-group,.fp-3field .fp-emi-wrap{
    width:100%!important;display:block;margin:0 0 10px!important}
  .fp-3field .form-v6-bg>.form-group:last-child{margin-bottom:0!important}
}

@media (min-width:901px){                    /* desktop: 3 equal boxes + button, one row */
  .fp-3field.two-fields{display:flex!important;flex-wrap:nowrap;align-items:center;gap:10px}
  .fp-3field.two-fields>.select-wrapper{float:none!important;flex:1 1 0!important;width:auto!important;min-width:0;margin:0!important;background:transparent!important}
  .fp-3field.two-fields>button{flex:0 0 auto!important;margin:0}
  .fp-3field .form-v6-bg{display:flex!important;flex-wrap:nowrap;align-items:center;gap:10px}
  .fp-3field .form-v6-bg>.form-group{display:block!important;flex:1 1 0!important;width:auto!important;min-width:0;margin:0!important}
  .fp-3field .form-v6-bg>.form-group:last-child{flex:0 0 auto!important;width:auto!important}
}

/* container padding + the small connector labels ("in"/"for") removed for a clean row */
.fp-3field .form-v6-bg{padding:14px!important;border-radius:16px}
.fp-3field .two-fields .middle,.fp-3field.two-fields .middle{display:none!important}
.fp-3field .form-icon,.fp-3field i.fas,.fp-3field i.zmdi,.fp-3field .fp-emi-wrap>span.middle{display:none!important}
.fp-3field .inner-addon,.fp-3field .input-group{display:block!important;width:100%;padding:0!important;margin:0!important;position:static}

/* ---- The three fields: identical premium pills ---------------------------- */
.fp-3field select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  box-sizing:border-box;height:56px;line-height:normal;width:100%!important;min-width:0;
  background-color:#fff!important;
  border:1.5px solid rgba(9,30,20,.08)!important;border-radius:12px!important;
  margin:0!important;padding:0 44px 0 18px!important;
  font-family:inherit;font-size:16px!important;font-weight:600!important;color:#15271c!important;
  text-align:left!important;text-align-last:left;
  box-shadow:0 3px 10px rgba(0,0,0,.12)!important;
  cursor:pointer;outline:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234a685a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 15px center!important;background-size:19px!important;
  transition:box-shadow .16s ease,border-color .16s ease;
}
.fp-3field select:hover{box-shadow:0 6px 15px rgba(0,0,0,.16)!important}
.fp-3field select:focus{border-color:#1f8a3b!important;box-shadow:0 0 0 3px rgba(31,138,59,.28)!important}
.fp-3field select option{color:#15271c;font-weight:600}
.fp-3field select option[value=""],.fp-3field select:invalid{color:#7c8a83}

/* ---- Search button -------------------------------------------------------- */
.fp-3field button[type=submit]{
  box-sizing:border-box;height:56px;min-width:136px;
  background:linear-gradient(135deg,#1f8a3b 0%,#12a552 100%)!important;
  color:#fff!important;border:none!important;border-radius:12px!important;
  font-size:15.5px!important;font-weight:800!important;letter-spacing:.5px;text-transform:uppercase;
  padding:0 30px!important;cursor:pointer;
  box-shadow:0 8px 18px rgba(15,157,78,.4)!important;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:filter .15s ease,transform .15s ease,box-shadow .15s ease;
}
.fp-3field button[type=submit]:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 11px 22px rgba(15,157,78,.46)!important}
.fp-3field button[type=submit] img{filter:brightness(0) invert(1);width:20px;height:20px}

/* ---- Compact variant for the TOP-BAR search (.two-fields, in the header) ----
   The header only affords ~300–560px, so shrink the fields and use an icon-only
   button (no 136px min-width that was overlapping the fields). Hero is untouched. */
@media (min-width:901px){
  /* one unified pill: [Emirate | Area | Speciality | search] with thin dividers */
  .fp-3field.two-fields{
    display:flex!important;align-items:stretch;gap:0;
    width:100%!important;max-width:408px;
    background:#fff!important;border-radius:11px!important;overflow:hidden;
    box-shadow:0 5px 16px rgba(0,0,0,.3)!important;height:36px;
  }
  .fp-3field.two-fields>.select-wrapper{
    flex:1 1 0!important;min-width:0;margin:0!important;background:transparent!important;
    border-left:1px solid #e6ebe8!important;
  }
  .fp-3field.two-fields>.select-wrapper:first-child{border-left:0!important}
  .fp-3field.two-fields select{
    height:36px!important;background:transparent!important;border:0!important;border-radius:0!important;
    box-shadow:none!important;padding:0 24px 0 11px!important;font-size:12.5px!important;font-weight:600!important;
    background-position:right 7px center!important;background-size:14px!important;
  }
  .fp-3field.two-fields select:focus{box-shadow:none!important;background-color:#f4f8f5!important}
  .fp-3field.two-fields button[type=submit]{
    position:static!important;flex:0 0 52px!important;width:52px!important;height:36px!important;min-width:0!important;
    border-radius:0!important;margin:0!important;padding:0!important;gap:0!important;font-size:0!important;line-height:0!important;
    box-shadow:none!important;transform:none!important;text-indent:0!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center center / 18px 18px no-repeat, linear-gradient(135deg,#1f8a3b 0%,#12a552 100%)!important;
  }
  .fp-3field.two-fields button[type=submit]::after,
  .fp-3field.two-fields button[type=submit]::before{content:none!important;display:none!important}
  .fp-3field.two-fields button[type=submit] img{display:none!important}
  .fp-3field.two-fields button[type=submit]:hover{transform:none!important;filter:brightness(1.06)}
  .fp-3field.two-fields .middle{display:none!important}
  /* Vertically align the fixed lang switch to the same middle line as the pill + login. */
  #sticky-nav #header-nav .fp-lang-switch{top:17px!important;height:36px!important}
}
/* Mobile top-bar: stack like the hero. */
@media (max-width:900px){ .fp-3field.two-fields{max-width:none} }

/* Mobile header: the search-icon toggle overlapped the language switch (the lang
   pill is wider than the slot before it). Push the search icon left so the three
   controls — search · language · sign-in — sit apart cleanly. */
@media (max-width:599px){
  #sticky-nav #header-nav .search-icon{right:108px!important}
}