.elementor-343 .elementor-element.elementor-element-e84851a{--display:flex;--min-height:450px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--overlay-opacity:0.7;}.elementor-343 .elementor-element.elementor-element-e84851a:not(.elementor-motion-effects-element-type-background), .elementor-343 .elementor-element.elementor-element-e84851a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://directory.growthacademyasia.com/wp-content/uploads/2025/10/banner-image-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-343 .elementor-element.elementor-element-e84851a::before, .elementor-343 .elementor-element.elementor-element-e84851a > .elementor-background-video-container::before, .elementor-343 .elementor-element.elementor-element-e84851a > .e-con-inner > .elementor-background-video-container::before, .elementor-343 .elementor-element.elementor-element-e84851a > .elementor-background-slideshow::before, .elementor-343 .elementor-element.elementor-element-e84851a > .e-con-inner > .elementor-background-slideshow::before, .elementor-343 .elementor-element.elementor-element-e84851a > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-343 .elementor-element.elementor-element-bd333f8{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-343 .elementor-element.elementor-element-a7579a3 .elementor-heading-title{font-size:41px;font-weight:700;color:#FFFFFF;}.elementor-343 .elementor-element.elementor-element-baba6ca .elementor-heading-title{font-size:16px;font-weight:300;color:#FFFFFF;}.elementor-343 .elementor-element.elementor-element-bb17cf7{width:var( --container-widget-width, 80% );max-width:80%;--container-widget-width:80%;--container-widget-flex-grow:0;}.elementor-343 .elementor-element.elementor-element-57055f31{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:100px;--padding-bottom:100px;--padding-left:120px;--padding-right:120px;}.elementor-343 .elementor-element.elementor-element-3d5e3d51{--grid-columns:3;--grid-row-gap:30px;--grid-column-gap:25px;}.elementor-343 .elementor-element.elementor-element-3d5e3d51 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-343 .elementor-element.elementor-element-3d5e3d51 .e-loop-item > .elementor-section, .elementor-343 .elementor-element.elementor-element-3d5e3d51 .e-loop-item > .elementor-section > .elementor-container, .elementor-343 .elementor-element.elementor-element-3d5e3d51 .e-loop-item > .e-con, .elementor-343 .elementor-element.elementor-element-3d5e3d51 .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}:root{--page-title-display:none;}@media(min-width:759px){.elementor-343 .elementor-element.elementor-element-e84851a{--width:100%;}.elementor-343 .elementor-element.elementor-element-57055f31{--width:100%;}}@media(max-width:1024px) and (min-width:759px){.elementor-343 .elementor-element.elementor-element-57055f31{--width:1000px;}}@media(max-width:1470px){.elementor-343 .elementor-element.elementor-element-57055f31{--padding-top:80px;--padding-bottom:80px;--padding-left:080px;--padding-right:80px;}}@media(max-width:1024px){.elementor-343 .elementor-element.elementor-element-3d5e3d51{--grid-columns:1;}}@media(max-width:758px){.elementor-343 .elementor-element.elementor-element-e84851a{--padding-top:080px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-343 .elementor-element.elementor-element-57055f31{--width:100%;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-343 .elementor-element.elementor-element-3d5e3d51{--grid-columns:1;width:100%;max-width:100%;}}/* Start custom CSS for wp-widget-gd_search, class: .elementor-element-bb17cf7 *//* --- 1. Main Wrapper (The White Box) --- */

.geodir-search-form-wrapper {
    background: #ffffff !important;
    border-radius: 15px !important;
    padding: 1px 30px !important; /* ✅ Missing semicolon added here */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box !important;
}

.geodir-search.row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

.geodir-search.row > div {
    position: relative !important;
    padding: 0 !important;
    flex-basis: auto !important;
    min-width: 0 !important;
}

div[data-rule-key="post_category"] { 
    order: 1 !important; 
    grid-column: 1 / span 1 !important;
}
div[data-rule-key="near"] { 
    order: 2 !important; 
    grid-column: 2 / span 1 !important;
}
div[data-rule-key="delivery_method"] { 
    order: 3 !important; 
    grid-column: 3 / span 1 !important;
}
div[data-rule-key="funding_hrdc_1"] { 
    order: 4 !important; 
    grid-column: 4 / span 1 !important;
}
div[data-rule-key="s"] { 
    order: 5 !important; 
    grid-column: 1 / span 3 !important; /* Spans 3 columns */
}

/* Target the button's wrapper */
.geodir-search.row > div.gd-search-field-search:last-of-type { 
    order: 6 !important; 
    grid-column: 4 / span 1 !important; /* 4th column */
    align-self: end; /* Aligns to bottom */
}

.geodir-search.row > div[data-rule-key]::before {
    display: none !important;
}

.geodir-search-form-wrapper .input-group-text {
    display: none !important;
}

/* --- 7. Field Styling (No Icon Padding) --- */
.geodir-search-form-wrapper select,
.geodir-search-form-wrapper input[type="text"] {
    width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #EAEAEA !important;
    border-radius: 8px !important;
    padding: 12px 15px !important; 
    font-size: 16px;
    height: 48px !important;
    margin: 0 !important;
    background-color: #fff !important;
}

/* --- 8. Button Styling --- */
.geodir-search-form-wrapper button.geodir_submit_search {
    width: 100% !important;
    background-color: #3AB5D9 !important;
    color: white !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    height: 48px !important;
}

/* =========================================================
== RESPONSIVE CODE (No change here)
========================================================= */
@media (max-width: 1024px) {
    .geodir-search.row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .geodir-search.row > div {
        order: 0 !important;
        grid-column: auto !important;
    }
    div[data-rule-key="s"] {
        grid-column: 1 / span 2 !important;
    }
    .geodir-search.row > div.gd-search-field-search:last-of-type {
        grid-column: 1 / span 2 !important;
        align-self: auto !important;
    }
}

@media (max-width: 767px) {
    .geodir-search-form-wrapper { padding: 15px !important; }
    .geodir-search.row {
        grid-template-columns: 1fr !important;
    }
    .geodir-search.row > div {
        order: 0 !important;
        grid-column: 1 / span 1 !important;
        align-self: auto !important;
    }
}

/* ------------------------
   Add a dropdown arrow to each field inside the search box
   (safe add-on — does not modify your existing CSS rules)
   ------------------------ */

/* Ensure field wrappers are positioned for pseudo-element placement */
.geodir-search-form-wrapper .geodir-search.row > div[data-rule-key] {
  position: relative; /* already set in your CSS, but safe to re-assert */
}

/* The arrow (SVG) placed on the right of each field wrapper */
.geodir-search-form-wrapper .geodir-search.row > div[data-rule-key]::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0%200%2024%2024' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6%209%2012%2015%2018%209'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.9;
  display: block;
  z-index: 2;
}

/* Make room for the arrow so text won't overlap it */
.geodir-search-form-wrapper select,
.geodir-search-form-wrapper input[type="text"],
.geodir-search-form-wrapper .form-control {
  padding-right: 44px !important;
  box-sizing: border-box !important;
}

/* Hide native select arrow */
.geodir-search-form-wrapper select.form-select,
.geodir-search-form-wrapper select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
}

/* --- 9. FIX FOR "Search Company" FIELD --- */

/* 9.1. Hide the arrow on the "Search Company" field */
.geodir-search-form-wrapper .geodir-search.row > div[data-rule-key="s"]::after {
  display: none !important;
}

/* 9.2. Remove the extra arrow padding from the "Search Company" input */
.geodir-search-form-wrapper .geodir-search.row > div[data-rule-key="s"] input[type="text"] {
  padding-right: 15px !important; 
}

/* ------------------------------------- */


/* Avoid showing arrow on the search button wrapper */
.geodir-search-form-wrapper .geodir-search.row > div.gd-search-field-search[data-rule-key]::after,
.geodir-search-form-wrapper .geodir-search.row > div.gd-search-field-search:last-of-type::after {
  display: none !important;
}

/* Slightly reduce arrow size on very small screens */
@media (max-width: 480px) {
  .geodir-search-form-wrapper .geodir-search.row > div[data-rule-key]::after {
    width: 12px;
    height: 12px;
    right: 10px;
  }
  .geodir-search-form-wrapper select,
  .geodir-search-form-wrapper input[type="text"],
  .geodir-search-form-wrapper .form-control {
    padding-right: 40px !important;
  }

  /* 9.3. Also fix the "Search Company" padding on mobile */
  .geodir-search-form-wrapper .geodir-search.row > div[data-rule-key="s"] input[type="text"] {
    padding-right: 15px !important; 
  }
}/* End custom CSS */
/* Start custom CSS *//* ---------- Strong override for GeoDirectory search in Elementor ---------- */

/* wrapper - use elementor + shortcode + geodirectory targeting to be safe */
.elementor-widget-shortcode .gd-custom-search,
.elementor-widget-shortcode .geodir-search,
.geodir-search,
.gd-custom-search {
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 15px rgba(0,0,0,0.08) !important;
  padding: 22px !important;
  max-width: 1100px !important;
  margin: 30px auto !important;
}

/* force the inner form area to be transparent if theme put a background */
.elementor-widget-shortcode .geodir-search .geodir-form,
.elementor-widget-shortcode .geodir-search .geodir-search-form,
.geodir-search .geodir-form,
.geodir-search .geodir-search-form {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* grid layout for fields — fallback to generic field wrappers */
.elementor-widget-shortcode .geodir-search .geodir-search-inputs,
.geodir-search .geodir-search-inputs,
.geodir-search .geodir-field-wrap,
.geodir-search .gdl-search-fields,
.gd-search .gd-search-fields {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

/* Inputs & selects */
.elementor-widget-shortcode select,
.elementor-widget-shortcode input[type="text"],
.elementor-widget-shortcode input[type="search"],
.geodir-search select,
.geodir-search input[type="text"],
.geodir-search input[type="search"],
.gd-search select,
.gd-search input[type="text"] {
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #ddd !important;
  background: #fafafa !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  transition: all .24s ease !important;
}

/* focus state */
.elementor-widget-shortcode select:focus,
.elementor-widget-shortcode input:focus,
.geodir-search select:focus,
.geodir-search input:focus {
  border-color: #74d0f2 !important;
  box-shadow: 0 0 0 3px rgba(116,208,242,.18) !important;
  outline: none !important;
  background: #fff !important;
}

/* Search button - full width on small breakpoints */
.elementor-widget-shortcode .geodir-search input[type="submit"],
.elementor-widget-shortcode .geodir-search button,
.geodir-search input[type="submit"],
.geodir-search button,
.gd-search button {
  background: #74d0f2 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: auto !important;
  transition: background .18s ease !important;
}

/* If theme forces full-width orange button, make it look like a small btn */
.elementor-widget-shortcode .geodir-search .gd-submit,
.elementor-widget-shortcode .geodir-search .btn,
.geodir-search .gd-submit,
.geodir-search .btn {
  background: #74d0f2 !important;
  color: #fff !important;
}

/* Responsiveness */
@media (max-width: 800px) {
  .elementor-widget-shortcode .geodir-search .geodir-search-inputs,
  .geodir-search .geodir-search-inputs,
  .geodir-search .geodir-field-wrap {
    grid-template-columns: 1fr !important;
  }
  .elementor-widget-shortcode .geodir-search input[type="submit"],
  .elementor-widget-shortcode .geodir-search button {
    width: 100% !important;
  }
}


/* SEARCH COMPANY FIELD */
input.search_text[placeholder="Job title, keywords, or company"] {
    color: #000;
    background: none;
    position: relative;
}

input.search_text[placeholder="Job title, keywords, or company"]:placeholder-shown {
    color: transparent; /* hides original */
}

input.search_text[placeholder="Job title, keywords, or company"]:placeholder-shown::before {
    content: "Search Company";
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}/* End custom CSS */