/*────────────────────────────────────────────────────────────────────
  SEARCH BAR  (unchanged structure)
────────────────────────────────────────────────────────────────────*/
.sw-search{
  --h:48px;
  display:flex;flex-direction:column;gap:14px;margin-bottom:14px;
  padding:22px 20px 18px;border-radius:16px;background:#fff;
}
.sw-field{position:relative;flex:1 1 auto;}
.sw-search label{
  display:block;margin-bottom:8px;
  font:600 12px 'Poppins',sans-serif;color:#49506d;letter-spacing:.3px;
  
  .sw-search input {
  box-sizing: border-box;
}

}
.sw-search input{
  width:100%;height:var(--h);padding:0 48px 0 52px;
  font:500 15px 'Poppins',sans-serif;color:#111;background:#fafbff;
  border:1px solid #ccd0e9;border-radius:4px;
  background-repeat:no-repeat;background-size:18px;background-position:18px center;
  transition:border .2s,box-shadow .2s;
}
.role-field input{background-image:url("http://staging.shework.in/wp-content/uploads/2025/04/MagnifyingGlass.svg");}
.city-field input{background-image:url("http://staging.shework.in/wp-content/uploads/2025/04/MapPinLine.svg");}
.sw-search input:focus{outline:none;border-color:#2B3186;
  box-shadow:0 0 0 3px rgba(43,49,134,.25);}

/* clear (×) --------------------------------------------------------*/
.sw-clear{
  position:absolute;right:16px;top:64%;transform:translateY(-50%) !important; 
  width:28px;height:28px;border-radius:50%;padding:0;border:none;
  display:flex;align-items:center;justify-content:center;
  color:#2B3186;background:none;cursor:pointer;
  line-height:0;font-size:0;
  opacity:0;pointer-events:none;
  transition:background .15s,opacity .15s;
  /* nuke Elementor shadows */
  box-shadow:none !important;text-shadow:none !important;
}
.sw-clear::before{
  content:"\f00d";
  font:900 15px/1 "Font Awesome 6 Free";
  color:inherit;pointer-events:none;
}
.sw-clear::before{content:"\f00d";font:900 15px "Font Awesome 6 Free";}
.sw-field:not(.empty) .sw-clear{opacity:1;pointer-events:auto;}
.sw-clear:hover{background:rgba(43,49,134,.08);}

/* 100 % override of Elementor’s global button shadow */
.sw-board .sw-clear{box-shadow:none !important;text-shadow:none !important;}

/* search button ----------------------------------------------------*/
.sw-go{
  height:var(--h);padding:0 32px;border:none;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 15px 'Poppins',sans-serif;color:#fff;background:#2B3186;
  cursor:pointer;transition:background .2s,transform .2s;box-shadown:none !important;
}
.sw-go:disabled{background:#c3bce0;cursor:not-allowed;}
.sw-go:not(:disabled):hover{background:#222862;transform:translateY(-1px);}

/* layout ≥600 px ---------------------------------------------------*/
@media(min-width:600px){
  .sw-search{flex-direction:row;align-items:flex-end;gap:20px;}
  .sw-field{flex:1 1 0;}
  .sw-go{flex:0 0 auto;}
}

/*────────────────────────────────────────────────────────────────────
  CHIP RAIL
────────────────────────────────────────────────────────────────────*/
.sw-chiprail{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0 0 26px;padding:0 4px;
}
.sw-chip{
  display:inline-flex;align-items:center;gap:6px;max-width:200px;
  padding:4px 10px;border:1px solid #2B3186;border-radius:18px;
  font:500 13px 'Poppins',sans-serif;color:#2B3186;background:#fff;
  cursor:default;user-select:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:background .15s,color .15s;
}
.sw-chip:hover,
.sw-chip:focus-within{background:#2B3186;color:#fff;}

/* chip close (×) */
.sw-chip button{
  border:none;background:none;padding:0 0 0 2px;cursor:pointer;
  line-height:0;font-size:0;color:inherit;
  box-shadow:none !important;text-shadow:none !important;
}
.sw-chip button::before{
  content:"\f00d";font:900 11px "Font Awesome 6 Free";
}
.sw-chip button:hover{background:none;}   /* kill Elementor green circle */

/*──────── elementor input shadow override ─────*/
.sw-board .sw-search input{box-shadow:none !important;}

/*────────────────────────────────────
  Error message styling & field reserve
────────────────────────────────────*/

/*────────────────────────────────────────────────────────────────────
  2) Invalid‐field styling
────────────────────────────────────────────────────────────────────*/
.sw-field.invalid input {
  border-color: #da1e28;        /* a strong red */
  border-width: 2px;            /* a bit thicker */
  animation: shake 0.3s ease;   /* subtle shake */
}

/* Shake keyframes */
@keyframes shake {
  0%, 100% { transform: translateX(0) }
  25%      { transform: translateX(-3px) }
  75%      { transform: translateX(3px) }
}

/*────────────────────────────────────────────────────────────────────
  3) Floating error tooltip (“error” theme for Tippy.js)
────────────────────────────────────────────────────────────────────*/
/*────────────────────────────
  Error Tooltip Enhancements
────────────────────────────*/
.tippy-box[data-theme~='error'] {
  max-width: 300px;               /* match JS */
  padding: 0.75rem 1rem;          /* more breathing room */
  font-size: 1rem;                /* easy‐to‐read text */
  line-height: 1.4;
  border-radius: 0.5rem;
  background-color: #ffeef0;      /* pale red */
  color: #da1e28;                 /* strong red */
  border: 1px solid #da1e28;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  white-space: normal;            /* wrap long messages */
}

.tippy-box[data-theme~='error'] .tippy-arrow {
  fill: #ffeef0;                  /* arrow matches bg */
}

/*────────────────────────────────────────────────────────────────────
  4) Hide any legacy .sw-error divs
────────────────────────────────────────────────────────────────────*/
.sw-error {
  display: none !important;
}

.sw-go {
  text-shadow: none !important;
  box-shadow: none !important;
}

.sw-chip-group{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px;}
.sw-chip-group strong{font:600 13px 'Poppins',sans-serif;margin-right:4px;}

a.sw-hi{font-weight:600;color:#2B3186;text-decoration:underline;}

/*-------------------------------------------------
1.  “Clear all” – make it dead-simple, no colour shift
--------------------------------------------------*/
.sw-clear-all{
  margin:4px 0 18px auto;
  padding:0;                       /* no pill look */
  font:600 14px 'Poppins',sans-serif;
  color:#6b7280;                   /* neutral grey */
  background:none;
  border:none;
  cursor:pointer;
}

/*-------------------------------------------------
2.  Stack the two chip groups vertically
--------------------------------------------------*/
.sw-chiprail{
  display:flex;
  flex-direction:column;           /* <<< row → column */
  gap:10px;
  margin:0 0 24px;                 /* restore spacing */
}
.sw-chip-group{flex-wrap:wrap;}    /* keep wrapping inside each group */

/*────────────────────────────────────────────
 CLEAR-ALL  ·  v2
────────────────────────────────────────────*/
/*────────────────────────────────────────────
CLEAR-ALL (final polish)
────────────────────────────────────────────*/
.sw-clear-all{
  all: unset;                       /* wipe UA/Elementor styles */
  cursor:pointer;
  font:600 14px 'Poppins',sans-serif;
  color:#6b7280;                    /* slate-500 */
  display:block;                    /* full-width so it never jumps */
  text-align:right;                 /* hugs right edge */
  margin:2px 4px 16px auto;         /* tiny breathing room */
  box-shadow:none!important;
  text-shadow:none!important;
}
.sw-clear-all::before{
  content:'\f00d';
  font:900 13px "Font Awesome 6 Free";
  margin-right:4px;
}


/*────────────────────────────────────────────
  Highlighted call-to-action link – v1.0
────────────────────────────────────────────*/
.sw-count a.sw-hi{
  position:relative;
  font-weight:600;
  color:#2B3186;                 /* keep brand blue */
  text-decoration:none;          /* ditch standard underline */
  transition:color .25s;
}

/* Yellow swipe behind text */
.sw-count a.sw-hi::before{
  content:'';
  position:absolute;
  inset:-2px 0;                  /* expand a touch above & below text */
  z-index:-1;                    /* sit behind letters */
  background:#ffe04d;            /* highlighter yellow */
  border-radius:4px;
  transform:scaleX(0);           /* collapsed */
  transform-origin:left;
  transition:transform .4s ease;
}

/* replay on hover / keyboard focus */
.sw-count a.sw-hi:hover,
.sw-count a.sw-hi:focus{
  color:#111;                    /* bump contrast */
}
.sw-count a.sw-hi:hover::before,
.sw-count a.sw-hi:focus::before{
  transform:scaleX(1);
}

/* one-off automatic swipe when the count
   line first appears with zero results */
@keyframes swipe {
  from{transform:scaleX(0);}
  60% {transform:scaleX(1.05);}  /* overshoot for a slick feel */
  to  {transform:scaleX(1);}     /* settle */
}
.sw-count.highlight a.sw-hi::before{
  animation:swipe .8s ease-out .2s both;
}

/*────────────────────────────────────────────
  Desktop alignment fix for inputs + buttons
────────────────────────────────────────────*/
@media (min-width:600px) {
  .sw-search {
    flex-direction: row !important;
    align-items: center !important;  /* vertically center everything */
    gap: 20px !important;            /* consistent spacing */
  }
  /* inputs flex to fill */
  .sw-field {
    flex: 1 1 auto !important;
  }
  /* buttons keep their size and line up */
  .sw-go,
  .sw-clear-all {
    flex: 0 0 auto !important;
    margin: 0 !important;
    height: var(--h) !important;
    align-self: center !important;
    line-height: var(--h) !important;
  }
}

/*────────────────────────────────────────────
  FINAL OVERRIDE ─ Desktop: force single row & button sizes
────────────────────────────────────────────*/
@media (min-width: 600px) {
  .sw-search {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;  /* vertical align */
    gap: 16px !important;             /* space between items */
  }

  /* inputs flex to fill remaining space */
  .sw-field {
    flex: 1 1 auto !important;
    min-width: 0;                     /* prevent overflow */
  }

  /* both buttons fixed size */
  .sw-go,
  .sw-clear-all {
    flex: 0 0 auto !important;
    width: 155px !important;
    margin: 0 !important;
    border-radius: 8px !important;

    /* typography */
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;

    /* ensure box-sizing includes padding/border */
    box-sizing: border-box !important;
  }

  /* ── Search button (solid) ───────────────── */
  .sw-go {
    background: #2B3186 !important;
    color: #ffffff !important;
    border: none !important;
  }
  .sw-go:disabled {
    background: #c3bce0 !important;
    cursor: not-allowed;
  }
  .sw-go:not(:disabled):hover,
  .sw-go:not(:disabled):focus {
    background: #222862 !important;
    transform: translateY(-1px) !important;
  }

  /* ── Clear-all button (outline) ─────────── */
  .sw-clear-all {
    background: transparent !important;
    color: #2B3186 !important;
    border: 1px solid #2B3186 !important;
    padding: 0 16px !important;       /* optional padding */
  }

}

/*────────────────────────────────────────────
/* 1) Reset any Elementor/inherited quirks */
.sw-search input,
.sw-search .sw-go,
.sw-search .sw-clear-all {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: var(--h) !important;    /* 48px */
}

/* 2) New wrapper styles */
.sw-input-wrapper {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;  /* center input & its clear-icon */
}
.sw-button-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 3) Ensure inputs are exactly 48px tall */
.sw-search input {
  height: var(--h) !important;         /* 48px */
  padding: 0 48px 0 52px !important;
}

/* 4) Standardize both buttons to 48px and Poppins 16/700 */
.sw-go,
.sw-clear-all {
  height: var(--h) !important;         /* 48px */
  padding: 0 24px !important;
  border-radius: 8px !important;
  font: 700 16px 'Poppins', sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 5) Restyle “Search” */
.sw-go {
  background: #2B3186 !important;
  color: #fff !important;
  border: none !important;
}
.sw-go:hover:not(:disabled),
.sw-go:focus:not(:disabled) {
  background: #222862 !important;
}

/* 6) Restyle “Clear all” */
.sw-clear-all {
  background: transparent !important;
  color: #2B3186 !important;
  border: 1px solid #2B3186 !important;
}


/* 7) Desktop layout (≥600px) */
@media (min-width: 600px) {
  .sw-search {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;  /* labels sit above, wrappers align by their tops */
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }
  .sw-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* ensure input-wrapper and button-wrapper both align their own children */
  .sw-input-wrapper,
  .sw-button-wrapper {
    align-items: center !important;
  }
}

/* Kill the “×” on Clear-all */
.sw-clear-all::before {
  content: none !important;
}

----------------------------------------

/*────────────────────────────────────────────────────────────────────
  BASIC SEARCH BAR STRUCTURE (you can leave your existing up to here)
────────────────────────────────────────────────────────────────────*/
.sw-search {
  --h: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
  padding: 22px 20px 18px;
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box; /* ensure padding/borders are included in widths */
}
.sw-field {
  position: relative;
}
.sw-search label {
  display: block;
  margin-bottom: 8px;
  font: 600 12px Poppins, sans-serif;
  color: #49506d;
  letter-spacing: .3px;
}

/* wrap each input+its clear icon */
.sw-input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
.sw-input-wrapper input {
  width: 100%;
  height: var(--h);
  padding: 0 48px 0 52px;
  font: 500 15px Poppins, sans-serif;
  color: #111;
  background: #fafbff;
  border: 1px solid #ccd0e9;
  border-radius: 4px;
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 18px center;
  transition: border .2s, box-shadow .2s;
  box-sizing: border-box;
  line-height: var(--h);
}
.role-field .sw-input-wrapper input {
  background-image: url("http://staging.shework.in/wp-content/uploads/2025/04/MagnifyingGlass.svg");
}
.city-field .sw-input-wrapper input {
  background-image: url("http://staging.shework.in/wp-content/uploads/2025/04/MapPinLine.svg");
}
.sw-input-wrapper input:focus {
  outline: none;
  border-color: #2B3186;
  box-shadow: 0 0 0 3px rgba(43,49,134,.25);
}

/* the little “×” inside each input */
.sw-clear {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: #2B3186;
  font: 900 15px/1 "Font Awesome 6 Free";
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, background .15s;
  box-shadow: none !important; text-shadow: none !important;
}
.sw-input-wrapper:hover .sw-clear,
.sw-field:not(.empty) .sw-clear {
  opacity: 1;
  pointer-events: auto;
}
.sw-clear:hover {
  background: rgba(43,49,134,.08);
}

/*────────────────────────────────────────────────────────────────────
  BUTTON WRAPPER (Search + Clear-all)
────────────────────────────────────────────────────────────────────*/
.sw-button-wrapper {
  display: flex;
  gap: 16px;
}

/* base button styles */
.sw-go,
.sw-clear-all {
  height: var(--h);
  padding: 0 24px;
  border-radius: 8px;
  font: 700 16px Poppins, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .1s;
}

/* Search button */
.sw-go {
  background: #2B3186;
  color: #fff;
  border: none;
}
.sw-go:disabled {
  background: #c3bce0;
  cursor: not-allowed;
}
.sw-go:not(:disabled):hover,
.sw-go:not(:disabled):focus {
  background: #222862;
  transform: translateY(-1px);
}

/* Clear-all button (outline) */
.sw-clear-all {
  background: transparent;
  color: #2B3186;
  border: 1px solid #2B3186;
  position: relative;
}
/* remove any Font-Awesome icon on it */
.sw-clear-all::before {
  content: none !important;
}

/*────────────────────────────────────────────────────────────────────
  RESPONSIVE LAYOUT
────────────────────────────────────────────────────────────────────*/
/* Mobile first:
   .sw-search is column,
   inputs full width,
   buttons stack under inputs at 100% */
.sw-button-wrapper {
  flex-direction: column;
}
.sw-go,
.sw-clear-all {
  width: 100%;
}

/* Tablet: ≥600px
   row-wrap so if it gets too tight it will wrap */
@media (min-width: 600px) {
  .sw-search {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
  }
  .sw-field {
    flex: 1 1 45%;      /* two fields side by side */
    min-width: 200px;    /* avoid collapsing too small */
  }
  .sw-input-wrapper {
    width: 100%;
  }
  .sw-button-wrapper {
    flex: 0 0 auto;
    flex-direction: row;
  }
  .sw-go,
  .sw-clear-all {
    width: 155px;        /* fixed button width */
    margin: 0;
  }
}

/* Desktop: ≥1024px
   inputs share remaining space equally */
@media (min-width: 1024px) {
  .sw-field {
    flex: 1 1 auto;
  }
}

/* ────────────────────────────────────────────────────────────────
   Tablet Layout: ≥600px and <1024px
   ─ keep inputs long (two-per-row) and push buttons to a new row
─────────────────────────────────────────────────────────────────*/
@media (min-width: 600px) and (max-width: 1023px) {
  .sw-search {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;                /* a little tighter than desktop */
  }

  /* two fields side by side, each ~50% minus gap */
  .sw-field {
    flex: 1 1 calc(50% - 12px);
    min-width: 200px;
  }

  /* buttons go 100% width container, below the fields */
  .sw-button-wrapper {
    flex: 1 1 100%;
    justify-content: flex-start;  /* buttons start at left */
    margin-top: 8px;
    gap: 12px;
  }

  /* keep buttons auto-width & small */
  .sw-go,
  .sw-clear-all {
    flex: 0 0 auto;
    width: auto;
  }
}

/*────────────────────────────────────────────────────────────────────
  TABLET-PORTRAIT (600px ≤ w < 1024px)
  → Row 1: two 50%-width fields
  → Row 2: full-width button bar
────────────────────────────────────────────────────────────────────*/
@media (min-width: 600px) and (max-width: 1023px) {
  /* allow wrapping */
  .sw-search {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: flex-start !important;
  }

@media (min-width: 600px) and (max-width: 1023px) {
        .sw-search .sw-go, .sw-search .sw-clear-all {
            padding: 20px !important;
            line-height: var(--h) !important;
        }
}

  /* each field takes half the row (minus the gutter) */
  .sw-search > .sw-field {
    flex: 1 1 calc(50% - 16px) !important;
    max-width: calc(50% - 16px) !important;
  }

  /* push the buttons down into their own 100%-width row */
  .sw-search > .sw-button-wrapper {
    flex: 1 1 100% !important;
    display: flex !important;
    gap: 16px !important;
    margin-top: 16px !important;
    justify-content: flex-start !important;
  }

  /* keep buttons their natural (auto) width */
  .sw-button-wrapper .sw-go,
  .sw-button-wrapper .sw-clear-all {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* kill any “×” pseudo-icon left on the clear-all button */
  .sw-clear-all::before {
    content: none !important;
  }
}

/* === CLEAR-ALL · final behaviour ===================================== */
.sw-clear-all{
  --size:48px;
  flex:0 0 var(--size) !important;
  width:var(--size) !important;
  height:var(--size) !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #2B3186 !important;
  border-radius:4px !important;

  /* icon layer */
  background-image:url("http://staging.shework.in/wp-content/uploads/2025/05/Vector.svg") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:20px 20px !important;

  /* base colour is *only* the fill, not the whole shorthand */
  background-color:transparent !important;

  /* hide leftover text */
  font-size:0 !important;
  color:transparent !important;
  line-height:0 !important;

  /* interaction */
  transition:transform .15s ease, background-color .15s ease;
}

/* keep the icon visible – just tint the button & scale it a bit */
.sw-clear-all:hover,
.sw-clear-all:focus{
  background-color:rgba(43,49,134,.08) !important;
  transform:scale(1.08);
}

/* tiny “pop” when it’s actually clicked */
.sw-clear-all:active{
  transform:scale(.92);
}

/* kill any pseudo icons still hanging around */
.sw-clear-all::before,
.sw-clear-all::after{content:none !important;}

@media (max-width: 786px) {
    .sw-button-wrapper {
        flex-direction: row; 
    }
}