/**
 * SYF mailing list section — Lovable MailingListForm (placeholder underline fields)
 */

@import url("./zoho-base.css");
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap");

:root {
  --syf-navy: #243974;
  --syf-gold: #c5ab71;
  --syf-gold-soft: #d9c896;
  --input-bdr-top-width: 0 !important;
  --input-bdr-right-width: 0 !important;
  --input-bdr-left-width: 0 !important;
  --input-bdr-bottom-width: 1px !important;
  --input-bdr-clr: 36, 57, 116 !important;
  --input-bdr-opacity: 0.2 !important;
  --input-radius: 0 !important;
}

.zfFormHeader,
.formHeaderInside,
.topContainer,
.backgroundBg,
.bgWrapper {
  display: none !important;
}

body.standardForm,
.fieldtext,
select,
button {
  font-family: "Karla", system-ui, sans-serif !important;
}

/* Lovable gap-5 — even 20px between every field row */
.fieldsWrapper,
.ulNoStyle.fieldsWrapper,
.zfNameContainer {
  gap: 20px !important;
}

.fieldWrapper,
.fieldContainer,
.zfFieldDiv_cont,
.fieldtypeText,
.zfErrorParentDiv {
  margin: 0 !important;
  padding: 0 !important;
}

.zfErrorDiv:empty,
.zfErrorParentDiv:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
}

.fieldtext,
input.fieldtext,
input[type="text"],
input[type="email"],
.fieldtypeText.customDropDown select,
.fieldtypeText.customDropDown.customDropDownof select,
.customDropDown select,
select {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--syf-navy) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgb(36 57 116 / 0.2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  appearance: auto !important;
}

.fieldtypeText.customDropDown,
.fieldtypeText.customDropDown.customDropDownof,
.customDropDown,
.customDropDown.customDropDownof {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* Zoho custom-dropdown chrome — hide; Select2 provides the control */
.fieldtypeText.customDropDown [elname="inpCaret"],
.customDropDown [elname="inpCaret"],
.fieldtypeText.customDropDown .focus-border,
.customDropDown .focus-border {
  display: none !important;
}

.fieldtext::placeholder,
input::placeholder {
  color: rgb(36 57 116 / 0.4) !important;
  opacity: 1 !important;
}

.fieldtext:focus,
input:focus,
select:focus,
.fieldtypeText.customDropDown select:focus,
.customDropDown select:focus {
  outline: none !important;
  border-bottom-color: var(--syf-gold) !important;
  box-shadow: none !important;
}

/*
 * Select2 — underline style (this file loads only for mailing-list).
 * Match Lovable native <select>: same rhythm as text inputs + tiny chevron.
 */
.select2-container,
.select2.select2-container,
span.select2.select2-container--default {
  width: 100% !important;
  display: block !important;
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single,
.select2-selection.select2FormCont,
.select2-selection.oneFldDrpDwnSel2,
span.select2-selection.select2-selection--single {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid rgb(36 57 116 / 0.2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection.select2FormCont,
.select2-container--open .select2-selection.select2FormCont {
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-bottom: 1px solid var(--syf-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.select2-container .select2-selection--single .select2-selection__rendered,
.select2-selection.select2FormCont .select2-selection__rendered {
  display: block !important;
  padding: 0 18px 0 0 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  color: var(--syf-navy) !important;
  font-size: 16px !important;
  font-family: "Karla", system-ui, sans-serif !important;
}

/* Default "Type of User" matches input placeholder weight/color */
.select2-selection__placeholder,
.select2-selection__placeholder .select2FormFont,
.select2FormFont {
  color: rgb(36 57 116 / 0.4) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  position: absolute !important;
  /* Align with text line (padding-top 12px + line-height 24px), not full field */
  top: 12px !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 14px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Hide Zoho/Select2 default triangle — it re-applies after init and breaks the arrow */
.select2-container .select2-selection--single .select2-selection__arrow b {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}

/* Our chevron — drawn on ::after so Zoho cannot override the <b> triangle */
.select2-container .select2-selection--single .select2-selection__arrow::after {
  content: "" !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 6px !important;
  height: 6px !important;
  margin: -2px 0 0 !important;
  border: none !important;
  border-right: 1.5px solid rgb(36 57 116 / 0.55) !important;
  border-bottom: 1.5px solid rgb(36 57 116 / 0.55) !important;
  background: transparent !important;
  transform: rotate(45deg) !important;
  transition: transform 0.15s ease !important;
}

.select2-container--open .select2-selection--single .select2-selection__arrow::after {
  transform: rotate(225deg) !important;
  margin: 0 0 -2px !important;
}

/* Lovable has a simple list — hide Select2 search inside mailing-list */
.select2-search--dropdown {
  display: none !important;
}

.select2-dropdown,
.select2-dropdown--below,
.select2-dropdown--above {
  margin-top: 0 !important;
  border-radius: 0 !important;
  border: 1px solid rgb(36 57 116 / 0.15) !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.1) !important;
}

.select2-results__option {
  padding: 10px 12px !important;
  font-size: 16px !important;
  font-family: "Karla", system-ui, sans-serif !important;
  border: none !important;
}

.select2-results__option[aria-selected="true"],
.select2-results__option--highlighted {
  background: rgb(36 57 116 / 0.06) !important;
  color: var(--syf-navy) !important;
}

/* Lovable gap-5 (20px) — even space between select and button */
.navBtnWrapper,
.zfFooter,
.navFootBtnWrap,
.navFootBtnList {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.zfbtnSubmit.btnElem {
  float: none !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 16px 28px !important;
  background: var(--syf-gold) !important;
  color: var(--syf-navy) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.zfbtnSubmit.btnElem:hover,
.zfbtnSubmit.btnElem:focus {
  background: var(--syf-gold-soft) !important;
}