/* =========================
   Manzari Finder – FULL CSS
   ========================= */
:root{
  --mf-text: #444444;
  --mf-blue: #005CE9;
  --mf-gold: #ffb700;
}

/* Typography */
.finder-hero, .finder-form, .finder-label,
.mf-card, .mf-badge, .mf-desc, .mf-buttons, .mf-button,
.mf-results, .mf-grid {
  font-family: 'Roboto', sans-serif;
  color: var(--mf-text);
  font-size: 16px;
  line-height: 1.4;
}
.mf-title{
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 600;
  margin: 10px 0;
  color: var(--mf-text);
}

/* Wrapper */
.finder-hero{
  max-width: 1200px;
  width: 100%;
  margin: 40px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
}
.finder-form{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.finder-label{
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

/* Decorated native select (base) */
select.mf-category{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;

  border: 2px solid var(--mf-blue);
  border-radius: 12px;
  background-color: #fff;
  color: var(--mf-text);
  font-size: 16px;
  min-width: 320px;
  padding: 12px 48px 12px 50px;  /* room: left icon + right chevron */
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transition: border-color .2s ease, box-shadow .2s ease, transform .02s ease;
  background-clip: padding-box;
  background-origin: padding-box;

  /* default icon/chevron (JS will swap left icon per category) */
  background-image:
    url("https://unpkg.com/lucide-static@0.454.0/icons/grid-3x3.svg"),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%23005CE9'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: 16px center, right 14px center;
  background-size: 20px 20px, 22px 22px;
}
select.mf-category:hover{
  border-color: var(--mf-gold);
  box-shadow: 0 0 0 4px rgba(255,183,0,.18), 0 6px 14px rgba(0,0,0,.12);
}
select.mf-category:focus{
  outline: none;
  border-color: var(--mf-blue);
  box-shadow: 0 0 0 4px rgba(0,92,233,.20), 0 8px 18px rgba(0,0,0,.12);
}

/* Results & Grid */
.mf-results{ width: 100%; }
.mf-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
}

/* Card */
.mf-card{
  background: #fff;
  border: 1px solid #e3e3e3;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.mf-logo img{
  max-width: 140px;
  margin: 0 auto 10px;
  display: block;
}

/* Badge */
.mf-badge{
  display: inline-block;
  background: var(--mf-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  letter-spacing: .2px;
}

/* Description */
.mf-desc{
  font-size: 16px;
  margin-bottom: 15px;
}

/* Buttons */
.mf-buttons{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mf-button{
  display: inline-block;
  background: var(--mf-blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease;
}
.mf-button:hover{ background: #003f9e; }

/* Responsive */
@media (max-width: 768px){
  .finder-form{ flex-direction: column; }
  select.mf-category{ min-width: 100%; width: 100%; padding-left: 46px; }
}

/* ===== Strong theme overrides to prevent Hello/Elementor accents ===== */
.finder-hero select.mf-category{
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  border: 2px solid var(--mf-blue) !important;
  border-radius: 12px !important;
  background-color: #fff !important;
  color: #444444 !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  padding: 12px 48px 12px 54px !important; /* extra left padding so text never overlaps icon */
  min-width: 320px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.08) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 16px center, right 14px center !important;
  background-size: 20px 20px, 22px 22px !important;
}
.finder-hero select.mf-category:hover{
  border-color: var(--mf-gold) !important;
  box-shadow: 0 0 0 4px rgba(255,183,0,.18), 0 6px 14px rgba(0,0,0,.12) !important;
}
.finder-hero select.mf-category:focus{
  outline: none !important;
  border-color: var(--mf-blue) !important;
  box-shadow: 0 0 0 4px rgba(0,92,233,.20), 0 8px 18px rgba(0,0,0,.12) !important;
}
/* hide any theme-added chevrons */
.finder-hero .elementor-select-wrapper:after,
.finder-hero .select-caret,
.finder-hero .e-select__chevron { display: none !important; }





/* ==== Custom icon dropdown (enhancement) ==== */
.mf-native-select{ display:none; } /* hide native when enhanced */

.mf-select{ position: relative; min-width: 320px; }

.mf-select__button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 2px solid var(--mf-blue);
  border-radius: 12px;
  background: #fff;
  padding: 12px 48px 12px 50px; /* same rhythm as your select */
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
  text-align: left;
}
.mf-select__button:hover{
  border-color: var(--mf-gold);
  box-shadow: 0 0 0 4px rgba(255,183,0,.18), 0 6px 14px rgba(0,0,0,.12);
}
.mf-select__button:focus{
  outline: none;
  border-color: var(--mf-blue);
  box-shadow: 0 0 0 4px rgba(0,92,233,.20), 0 8px 18px rgba(0,0,0,.12);
}

.mf-select__icon{
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: inline-flex;
}
.mf-select__icon img{ width: 20px; height: 20px; }

.mf-select__label{ flex: 1 1 auto; }

.mf-select__chevron{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%23005CE9'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}

/* Dropdown list */
.mf-select__list{
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  max-height: 320px;
  overflow: auto;
  padding: 8px;
}

.mf-select__option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.mf-select__option:hover{ background: #f7f9ff; }

.mf-option__icon{ width: 20px; height: 20px; display:inline-flex; }
.mf-option__icon img{ width: 20px; height: 20px; }

/* Mobile support */
@media (max-width: 768px){
  .mf-select{ min-width: 100%; width: 100%; }
}


/* —— Kill Hello/Elementor accent on our custom dropdown —— */
.finder-hero .mf-select__button{
  background:#fff !important;
  color:var(--mf-text) !important;
  border:2px solid var(--mf-blue) !important;
  border-radius:12px !important;
  box-shadow:0 4px 10px rgba(0,0,0,.08) !important;
  text-shadow:none !important;
}

.finder-hero .mf-select__button:hover{
  border-color:var(--mf-gold) !important;
  box-shadow:0 0 0 4px rgba(255,183,0,.18), 0 6px 14px rgba(0,0,0,.12) !important;
}

.finder-hero .mf-select__button:focus,
.finder-hero .mf-select__button:focus-visible,
.finder-hero .mf-select__button:active{
  outline:none !important;
  background:#fff !important;
  color:var(--mf-text) !important;
  border-color:var(--mf-blue) !important;
  box-shadow:0 0 0 4px rgba(0,92,233,.20), 0 8px 18px rgba(0,0,0,.12) !important;
}

/* Ensure inner parts don't inherit theme color */
.finder-hero .mf-select__label{ color:var(--mf-text) !important; }
.finder-hero .mf-select__icon img{ filter:none !important; }
.finder-hero .mf-select__chevron{ filter:none !important; }

/* Our list styles win over theme */
.finder-hero .mf-select__list{ border:1px solid #e5e7eb !important; }
.finder-hero .mf-select__option{ color:var(--mf-text) !important; }
.finder-hero .mf-select__option:hover,
.finder-hero .mf-select__option:focus{
  background:#f7f9ff !important;
}


/* === Fix: spacing + kill theme caret === */

/* more room so "Choose a Category" doesn't touch the left icon */
.finder-hero .mf-select__button{
  padding-left: 60px !important;   /* was 50px */
  padding-right: 48px !important;  /* keep space for our chevron */
  line-height: 1.3;
}

/* ensure the icon sits cleanly and a bit larger */
.finder-hero .mf-select__icon{
  left: 18px !important;
  width: 22px !important;
  height: 22px !important;
}
.finder-hero .mf-select__icon img{
  width: 22px !important;
  height: 22px !important;
}

/* keep label from ever overlapping */
.finder-hero .mf-select__label{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* keep our chevron inside the pill */
.finder-hero .mf-select__chevron{
  right: 14px !important;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* nuke any Hello/Elementor caret outside our control */
.finder-hero .elementor-select-wrapper:after,
.finder-hero .select-caret,
.finder-hero .e-select__chevron,
.finder-hero .mf-select ~ .e-select__chevron,
.finder-hero .mf-select ~ .select-caret{
  display: none !important;
}


/* === Keep our chevron inside & add space for the left icon === */
.finder-hero .mf-select { position: relative; display: inline-block; }

.finder-hero .mf-select__button{
  padding-left: 60px !important;   /* more space so text never hits the icon */
  padding-right: 48px !important;  /* room for our chevron inside */
  line-height: 1.3;
  position: relative;
  z-index: 2;                      /* sit above any theme adornments */
}

.finder-hero .mf-select__icon{
  left: 18px !important;
  top: 50%;
  transform: translateY(-50%);
  width: 22px !important;
  height: 22px !important;
}
.finder-hero .mf-select__icon img{
  width: 22px !important;
  height: 22px !important;
}

/* our chevron lives INSIDE the button */
.finder-hero .mf-select__chevron{
  position: absolute;
  right: 14px !important;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%23005CE9'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  pointer-events: none;            /* clicks go to the button */
}

/* === Nuke any Hello/Elementor caret/pill that appears outside === */
.finder-hero .elementor-select-wrapper:after,
.finder-hero .elementor-field:after,
.finder-hero .elementor-field:before,
.finder-hero .e-select__chevron,
.finder-hero .select-caret,
.finder-hero .mf-select + .e-select__chevron,
.finder-hero .mf-select + .select-caret {
  display: none !important;
}


/* Force white text on the card buttons */
.finder-hero .mf-button,
.finder-hero .mf-button:link,
.finder-hero .mf-button:visited,
.finder-hero .mf-button:hover,
.finder-hero .mf-button:active {
  color: #fff !important;
  text-decoration: none !important;
}


/* Finder dropdown: hover + focus use mustard */
.finder-form select.mf-category:hover,
.finder-form select.mf-category:focus,
.finder-form select.mf-category:focus-visible {
  border-color: #ffb700 !important;
  box-shadow: 0 0 0 2px rgba(255,183,0,.35) !important;
  outline: none !important;
}

/* Make ONLY the custom dropdown button use mustard on focus */
.finder-hero .mf-select__button:focus,
.finder-hero .mf-select__button:focus-visible,
.finder-hero .mf-select__button[aria-expanded="true"] {
  border-color: var(--mf-gold) !important;
  box-shadow: 0 0 0 2px rgba(255,183,0,.35) !important;
  outline: none !important;
}

/* Keep wrapper neutral even when inner elements are focused */
.finder-hero .finder-form:focus-within {
  border-color: #e3e3e3 !important;
  box-shadow: none !important;
}