/**
 * FAM Anti-Conflict Styles: Neutralize Hub Theme (LiquidThemes), Nice-Select & jQuery UI selectmenu Conflicts
 * 
 * Hub Theme styles form selects by hiding native <select> elements and attempting to render
 * a custom dropdown (either .select-wrap, .nice-select, or jQuery UI .ui-selectmenu-button).
 * 
 * This stylesheet completely overrides and neutralizes all artificial dropdowns and fake wrappers
 * so that all <select> elements in Grupo FAM forms remain 100% visible, beautifully styled,
 * properly padded, and immediately clickable on all browsers and devices.
 */

/* 1. Neutralizar el contenedor que Hub Theme inyecta (.select-wrap / .lqd-select-wrap) */
.contact-page .select-wrap,
#contact-form .select-wrap,
.selector-section .select-wrap,
#solution-selector .select-wrap,
.fam-contact-form-layout .select-wrap,
.fam-solution-selector-form .select-wrap,
.lqd-select-wrap {
  display: block !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 52px !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* 2. Ocultar los pseudo-elementos de Hub Theme (flechas falsas que tapan el clic) */
.contact-page .select-wrap::before,
.contact-page .select-wrap::after,
#contact-form .select-wrap::before,
#contact-form .select-wrap::after,
.selector-section .select-wrap::before,
.selector-section .select-wrap::after,
#solution-selector .select-wrap::before,
#solution-selector .select-wrap::after,
.fam-contact-form .select-wrap::before,
.fam-contact-form .select-wrap::after,
.lqd-select-wrap::before,
.lqd-select-wrap::after {
  display: none !important;
  content: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 3. Ocultar cualquier dropdown artificial inyectado por Hub Theme, Nice-Select o jQuery UI selectmenu */
.contact-page .nice-select,
#contact-form .nice-select,
.selector-section .nice-select,
#solution-selector .nice-select,
.fam-contact-form .nice-select,
.contact-page .lqd-custom-select,
#contact-form .lqd-custom-select,
.selector-section .lqd-custom-select,
#solution-selector .lqd-custom-select,
.contact-page .lqd-select-dropdown,
#contact-form .lqd-select-dropdown,
.selector-section .lqd-select-dropdown,
#solution-selector .lqd-select-dropdown,
.selector-section .ui-selectmenu-button,
#solution-selector .ui-selectmenu-button,
.contact-page .ui-selectmenu-button,
#contact-form .ui-selectmenu-button,
.fam-contact-form .ui-selectmenu-button,
.fam-solution-selector-form .ui-selectmenu-button,
.selector-inputs .ui-selectmenu-button,
.selector-inputs label .ui-selectmenu-button,
span.ui-selectmenu-button,
.ui-selectmenu-menu {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  z-index: -999 !important;
}

/* 4. Forzar que los elementos <select> nativos sean SIEMPRE VISIBLES, CLICABLES Y CON DISEÑO PREMIUM */
.contact-page select,
#contact-form select,
.selector-section select,
#solution-selector select,
.fam-contact-form select,
.fam-solution-selector-form select,
select[name="type"],
select[name="profile"],
select[name="interest"],
select[name="operation"],
select[name="friction"],
select[name="goal"],
select.fam-select,
select.fam-unblocked-select,
select[data-fam-select] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  transform: none !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
  padding: 12px 44px 12px 16px !important;
  margin: 8px 0 0 0 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--fam-ink, #1b1b18) !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23212c5d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 16px 16px !important;
  border: 1px solid var(--fam-line, #dcdcd6) !important;
  border-radius: 4px !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* 5. Estado Focus */
.contact-page select:focus,
#contact-form select:focus,
.selector-section select:focus,
#solution-selector select:focus,
.fam-contact-form select:focus,
select.fam-unblocked-select:focus {
  border-color: var(--fam-accent, #212c5d) !important;
  outline: 2px solid var(--fam-accent, #212c5d) !important;
  outline-offset: 1px !important;
  box-shadow: 0 0 0 3px rgba(33, 44, 93, 0.15) !important;
}

/* 6. Sección Selector y Espaciado / Padding Robusto */
.selector-section {
  background: #efefeb !important;
  padding: 65px 55px !important;
  border-radius: 8px !important;
  margin-top: 55px !important;
  margin-bottom: 55px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1600px !important;
}

.selector-inputs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  margin-top: 24px !important;
  margin-bottom: 35px !important;
  overflow: visible !important;
}

.selector-inputs label {
  display: flex !important;
  flex-direction: column !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: var(--fam-ink, #171717) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  overflow: visible !important;
}

.selector-section .button,
#solution-selector button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 52px !important;
  padding: 15px 28px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: var(--fam-ink, #171717) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: background 0.25s ease, transform 0.2s ease !important;
}

.selector-section .button:hover,
#solution-selector button[type="submit"]:hover {
  background: var(--fam-accent, #212c5d) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.selector-section .button svg,
#solution-selector button[type="submit"] svg {
  width: 16px !important;
  height: 16px !important;
}

.recommendation {
  background: var(--fam-accent, #212c5d) !important;
  color: #ffffff !important;
  padding: 44px 40px !important;
  border-radius: 8px !important;
  margin-top: 36px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .selector-section {
    padding: 50px 35px !important;
    margin-top: 45px !important;
    margin-bottom: 45px !important;
  }
  .selector-inputs {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    margin-bottom: 28px !important;
  }
}

@media (max-width: 768px) {
  .selector-section {
    padding: 35px 20px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  .selector-inputs {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
  }
  .recommendation {
    padding: 28px 20px !important;
  }
}