/* Base wrapper */
.selectify {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* Hide native select */
.selectify select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Button */
.aplify-search-form .selectify__button,
.selectify__button {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  height: var(--field-h);
  padding: 0 40px 0 16px;
  border-radius: var(--radius);
  border: var(--field-border-w) solid var(--field-border);
  background: var(--input-bg);
  font-size: var(--font-size);
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--control-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Arrow */
.selectify__button::after {
  content: "";
  position: absolute;
  /* Was a hardcoded right:16px and a fixed 10x6. Reads the shared chevron
     tokens now, so one setting places the arrow on both the Selectify
     dropdowns here and the native selects in the apply form. Height keeps the
     glyph's 10:6 ratio off the width. */
  right: var(--chevron-offset, 16px);
  top: 50%;
  width: var(--chevron-size, 12px);
  height: calc(var(--chevron-size, 12px) * 0.6);
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat center / contain;
}

/* Dropdown */
.selectify__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--input-bg);
  border-radius: min(var(--radius), 16px); 
  border: var(--field-border-w) solid var(--field-border);
  box-shadow: var(--panel-shadow);
  max-height: 240px;
  overflow-y: auto;
  z-index: 20;
	 display: none;
	width: 400px;
  /* Stops the scroll gesture "handing off" to the page once you reach the
     top/bottom of the list — without this, whatever handles scroll/touch
     at the page level (a sticky effect, Elementor's own scripts, or just
     default touch behaviour interacting oddly with a fixed-position
     dropdown) can end up treating the drag as a page-level gesture
     instead of an in-list scroll, which is what was closing the dropdown. */
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Open */
.selectify[aria-expanded="true"] .selectify__list {
  display: block;
}

/* Option */
.selectify__option {
  padding: 10px 16px;
  cursor: pointer;
  font-size: var(--font-size);
}

.selectify__option:hover,
.selectify__option[data-highlighted] {
  background: var(--primary);
  color: #fff;
}

.selectify:focus {
  outline: none;
}

.selectify[aria-expanded="true"] {
  outline: none;
}

.selectify__list:focus {
  outline: none;
}

.selectify {
  outline: none;
}

.selectify:focus {
  outline: none;
  box-shadow: none;
}

.selectify__button {
  outline: none;
}

.selectify__button:focus {
  outline: none;
}

.selectify__button:focus-visible {
  outline: none;
}

.selectify:focus,
.selectify:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}