/**
 * SYF Zoho spacing + layout base — Lovable gap-5 (20px) / space-y-2 (8px)
 */

:root,
.pageWrapper,
body.standardForm {
  --form-width: 100% !important;
  --fields-ver-space-top: 0px !important;
  --fields-ver-space-bottom: 0px !important;
  --fields-hor-space-left: 0px !important;
  --fields-hor-space-right: 0px !important;
  --form-cont-space-top: 0px !important;
  --form-cont-space-right: 0px !important;
  --form-cont-space-bottom: 0px !important;
  --form-cont-space-left: 0px !important;
  --footer-space-top: 0px !important;
  --footer-space-right: 0px !important;
  --footer-space-bottom: 0px !important;
  --footer-space-left: 0px !important;
  --header-space-inner-top: 0px !important;
  --header-space-inner-right: 0px !important;
  --header-space-inner-bottom: 0px !important;
  --header-space-inner-left: 0px !important;
  --header-space-outer-top: 0px !important;
  --header-space-outer-right: 0px !important;
  --header-space-outer-bottom: 0px !important;
  --header-space-outer-left: 0px !important;
  --input-radius: 6px !important;
  --input-bdr-clr: 232, 229, 223 !important;
  --input-bdr-opacity: 1 !important;
  --input-bdr-top-width: 1px !important;
  --input-bdr-right-width: 1px !important;
  --input-bdr-bottom-width: 1px !important;
  --input-bdr-left-width: 1px !important;
  --input-bg-clr: 255, 255, 255 !important;
  --input-bg-opacity: 1 !important;
  --error-txt-size: 12px !important;
}

body.standardForm,
.formScrollContainer,
.centerContainer,
.pageWrapper,
.mainWrapper,
.tyTemplateWidth,
.tyTemplateWrapper,
.fieldContWrapper,
form#test,
#test {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

.formScrollContainer,
.centerContainer,
.pageWrapper,
.mainWrapper {
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
}

body.standardForm,
.pageWrapper,
.mainWrapper,
.formScrollContainer,
.centerContainer,
.tyTemplateWidth,
.tyTemplateWrapper,
.fieldContWrapper,
.infoWrapper,
.infoContainer,
#formBodyDiv,
#test,
.grid_Wrapper,
.gridFieldContainer,
.gridFieldContainer .fieldContainer {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ulNoStyle.fieldsWrapper,
.fieldsWrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.fieldWrapper,
.grid_Wrapper.fieldWrapper,
.gridFieldContainer,
.grid_Wrapper .fieldWrapper {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fieldContainer,
.fieldContainer.zf-large,
.fieldContainer.gridFieldContainer {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.zfLabelDiv {
  padding: 0 0 8px !important;
  margin: 0 !important;
  background: transparent !important;
}

.fieldlabel,
.fieldLabelTxt {
  margin: 0 !important;
}

.zfFieldDiv_cont,
.fieldContWrapper,
.fieldtypeText,
.ofIconCont {
  padding: 0 !important;
  margin: 0 !important;
}

.ofIconCont input.fieldtext,
.ofIconCont input[ui_type="textbox"],
.ofIconCont textarea {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.ofIconCont svg,
.ofIconCont .icon,
.fieldtypeText svg.icon {
  display: none !important;
}

.zfNameContainer {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nameCompLabelWrapper,
.nameCompLabelWrapper [elname="compEachElem"],
.nameCompLabelWrapper [elname="eachCompElem"] {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nameFieldSpaceing {
  margin: 0 !important;
  padding: 0 !important;
}

.formSubInfoText {
  font-family: "Karla", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: #1a2332 !important;
  opacity: 1 !important;
}

.twoColumn {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: start !important;
}

/* Flatten Zoho grid columns — enquiry forms only (Sponsor Email|Phone / Country|Website) */
body.syf-variant-enquiry .twoColumn > .col,
body.syf-variant-enquiry .twoColumn > .col[elname="columnDiv"] {
  display: contents !important;
}

body.syf-variant-enquiry .twoColumn:not(:has(> .col > .fieldWrapper:nth-child(2))) > .col:first-child > .fieldWrapper {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.syf-variant-enquiry .twoColumn:not(:has(> .col > .fieldWrapper:nth-child(2))) > .col:last-child > .fieldWrapper {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.syf-variant-enquiry .twoColumn:has(> .col > .fieldWrapper:nth-child(2)) > .col:first-child > .fieldWrapper:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.syf-variant-enquiry .twoColumn:has(> .col > .fieldWrapper:nth-child(2)) > .col:first-child > .fieldWrapper:nth-child(2) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

body.syf-variant-enquiry .twoColumn:has(> .col > .fieldWrapper:nth-child(2)) > .col:last-child > .fieldWrapper:nth-child(1) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.syf-variant-enquiry .twoColumn:has(> .col > .fieldWrapper:nth-child(2)) > .col:last-child > .fieldWrapper:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.twoColumn .col,
.twoColumn .col[elname="columnDiv"],
.col[elname="columnDiv"] {
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.twoColumn .fieldWrapper,
.grid_Wrapper .twoColumn .fieldWrapper,
.twoColumn .col .fieldWrapper {
  margin: 0 !important;
  padding: 0 !important;
}

.grid_Wrapper.fieldWrapper {
  margin: 0 !important;
}

.zfFooter,
.navBtnWrapper,
.navFootBtnWrap,
.navFootBtnList {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.clearBoth {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.zfErrorParentDiv {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

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

.zfErrorDiv,
p.zfErrorDiv,
.errorMessage {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #b42318 !important;
}

.fieldtypeText.zf-error select,
.fieldtypeText.zf-error input,
.fieldtypeText.zf-error textarea {
  border-color: #b42318 !important;
}

.fieldContainer.zf-error,
.fieldWrapper.zf-error,
.fieldtypeText.zf-error {
  margin-bottom: 0 !important;
}
body.syf-variant-mailing-list .zfLabelDiv,
body.syf-variant-popup .zfLabelDiv,
body.syf-variant-footer .zfLabelDiv,
body.syf-variant-mailing-list .formSubInfoText,
body.syf-variant-popup .formSubInfoText,
body.syf-variant-footer .formSubInfoText {
  display: none !important;
}

body.syf-variant-mailing-list .fieldsWrapper,
body.syf-variant-popup .fieldsWrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

body.syf-variant-mailing-list .fieldWrapper[compname="Name"],
body.syf-variant-mailing-list .fieldWrapper[linkname="Name"],
body.syf-variant-popup .fieldWrapper[compname="Name"],
body.syf-variant-popup .fieldWrapper[linkname="Name"] {
  grid-column: 1 / -1 !important;
}

body.syf-variant-mailing-list .fieldWrapper[compname="Email"],
body.syf-variant-mailing-list .fieldWrapper[linkname="Email"],
body.syf-variant-mailing-list .fieldWrapper[compname="Dropdown"],
body.syf-variant-mailing-list .fieldWrapper[linkname="Dropdown"],
body.syf-variant-mailing-list .fieldWrapper:has(select),
body.syf-variant-mailing-list .fieldWrapper:has(textarea),
body.syf-variant-popup .fieldWrapper[compname="Email"],
body.syf-variant-popup .fieldWrapper[linkname="Email"],
body.syf-variant-popup .fieldWrapper:has(select),
body.syf-variant-popup .fieldWrapper:has(textarea) {
  grid-column: 1 / -1 !important;
}

body.syf-variant-footer .fieldsWrapper {
  gap: 12px !important;
}

/* Zoho Select2 dropdowns render on <body> — keep visible above field rows */
.fieldWrapper,
.fieldsWrapper,
.fieldContainer,
.fieldtypeText,
.customDropDown,
.zfFieldDiv_cont,
#formBodyDiv,
#mainWrapper,
.mainWrapper,
.formScrollContainer {
  overflow: visible !important;
}

.select2-container {
  z-index: 20 !important;
}

.select2-container--open {
  z-index: 10050 !important;
}

.select2-dropdown,
.select2-dropdown--below {
  z-index: 10051 !important;
  border: 1px solid rgb(232 229 223) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12) !important;
  overflow: hidden !important;
}

.select2-results__options {
  max-height: 240px !important;
}

.select2-search--dropdown {
  padding: 8px !important;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid rgb(232 229 223) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
}

@media (max-width: 639px) {
  .twoColumn,
  .zfNameContainer,
  body.syf-variant-mailing-list .fieldsWrapper,
  body.syf-variant-popup .fieldsWrapper {
    grid-template-columns: 1fr !important;
  }

  .twoColumn > .col,
  .twoColumn > .col[elname="columnDiv"] {
    display: block !important;
  }

  body.syf-variant-enquiry .twoColumn > .col,
  body.syf-variant-enquiry .twoColumn > .col[elname="columnDiv"] {
    display: block !important;
  }

  .twoColumn > .col > .fieldWrapper,
  .twoColumn:has(> .col > .fieldWrapper:nth-child(2)) > .col > .fieldWrapper,
  body.syf-variant-enquiry .twoColumn > .col > .fieldWrapper,
  body.syf-variant-enquiry .twoColumn:has(> .col > .fieldWrapper:nth-child(2)) > .col > .fieldWrapper {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}