/* Opted-in public-form enhancement. Native select styles stay in style.css
 * as the no-JS/no-component-CSS fallback; form values remain owned by Gravity Forms. */
.jc-select,
.jc-select__list {
  --jc-select-background: var(--jc-color-brand-dark, #332e28);
  --jc-select-text: var(--jc-color-cream, #f4ecd8);
  --jc-select-accent: var(--jc-color-brand-gold-light, #c6b47a);
  --jc-select-active-text: var(--jc-color-brand-dark, #332e28);
}

/* Both the control and its portalled menu receive this presentation variant.
 * Match the white Brand Hub request form; Contact retains the dark defaults. */
.jc-select--light {
  --jc-select-background: #ffffff;
  --jc-select-text: #2f2d28;
  --jc-select-accent: #ad9d72;
  --jc-select-active-text: #2f2d28;
}

:is(.jc-contact-form-section, .jc-form-panel) .jc-select {
  --jc-select-ready: 1;
  position: relative;
  width: 100%;
  min-width: 0;
}

:is(.jc-contact-form-section, .jc-form-panel) .jc-select .jc-select__button {
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: .8rem 2.5rem .8rem .95rem;
  border: 1px solid var(--jc-select-accent);
  border-radius: 0;
  color: var(--jc-select-text);
  background: var(--jc-select-background);
  box-shadow: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  appearance: none;
}

.jc-select__button::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: calc(50% - .35rem);
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--jc-select-accent);
  border-bottom: 2px solid var(--jc-select-accent);
  transform: rotate(45deg);
  pointer-events: none;
}

:is(.jc-contact-form-section, .jc-form-panel) .jc-select__button:focus {
  outline: 2px solid var(--jc-select-accent);
  outline-offset: 3px;
}

:is(.jc-contact-form-section, .jc-form-panel) .jc-select__button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Keep the native control focusable for native validity checks and GF error
 * links. JS forwards its focus to the visible combobox. Never display:none it. */
#page-container #main-content .jc-contact-form-section .gform_wrapper select.jc-select__native,
#page-container :is(#main-content.jc-system-page--brand-hub-login, #main-content .jc-system-page--brand-hub-login) .jc-brand-hub-login-panels .jc-system-panel .jc-form-panel .gform_wrapper .gfield.jc-select-field select.jc-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Replace only the enhanced request select's legacy inline label/underline.
 * Other request fields and all native fallbacks retain their existing layout. */
#page-container :is(#main-content.jc-system-page--brand-hub-login, #main-content .jc-system-page--brand-hub-login) .jc-brand-hub-login-panels .jc-system-panel .jc-form-panel .gform_wrapper .gfield.jc-select-field {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

#page-container :is(#main-content.jc-system-page--brand-hub-login, #main-content .jc-system-page--brand-hub-login) .jc-brand-hub-login-panels .jc-system-panel .jc-form-panel .gform_wrapper .gfield.jc-select-field .gfield_label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  font-size: clamp(0.86rem, 0.72vw, 1rem) !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

#page-container :is(#main-content.jc-system-page--brand-hub-login, #main-content .jc-system-page--brand-hub-login) .jc-brand-hub-login-panels .jc-system-panel .jc-form-panel .gform_wrapper .gfield.jc-select-field::after {
  content: none;
}

/* Portalled outside Elementor/GF overflow containers; JS fits it to the visible
 * viewport rather than introducing another desktop/tablet/mobile breakpoint. */
.jc-select__list {
  box-sizing: border-box;
  position: fixed;
  /* Above the sticky header (10000), so an upward menu stays usable. */
  z-index: 10001;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--jc-select-accent);
  border-radius: 2px;
  background: var(--jc-select-background);
  color: var(--jc-select-text);
  box-shadow: 0 8px 24px rgb(0 0 0 / .25);
  font-family: "Libre Franklin", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  overflow: auto;
  overscroll-behavior: contain;
}

.jc-select__list[hidden] {
  display: none;
}

.jc-select__option {
  box-sizing: border-box;
  display: block;
  min-height: 44px;
  margin: 0;
  padding: .625rem .75rem;
  color: inherit;
  background: transparent;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.jc-select__option[aria-selected="true"] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.jc-select__option.is-active,
.jc-select__option:not([aria-disabled="true"]):hover {
  color: var(--jc-select-active-text);
  background: var(--jc-select-accent);
}

.jc-select__option[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* Respect the visitor's contrast palette, including the selected-item colour. */
@media (forced-colors: active) {
  :is(.jc-contact-form-section, .jc-form-panel) .jc-select .jc-select__button,
  .jc-select__list {
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
  }
  .jc-select__button::after { border-color: ButtonText; }
  :is(.jc-contact-form-section, .jc-form-panel) .jc-select__button:focus { outline-color: Highlight; }
  .jc-select__option.is-active,
  .jc-select__option:not([aria-disabled="true"]):hover {
    background: Highlight;
    color: HighlightText;
  }
}