/**
 * SYF enquiry forms — Lovable General / Exhibit / Sponsor
 */

@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;
  --syf-ink: #1a2332;
  --syf-border: #e8e5df;
}

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

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

.fieldlabel,
.fieldLabelTxt {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--syf-ink) !important;
}

.em.important {
  color: var(--syf-ink) !important;
  font-style: normal !important;
}

.fieldWrapper[compname="Name"] > .fieldContainer > .zfLabelDiv,
.fieldWrapper[linkname="Name"] > .fieldContainer > .zfLabelDiv {
  display: none !important;
}

/* Unified Lovable field control — inputs + native selects */
.syf-zoho-field,
.fieldtext,
input.fieldtext,
input[ui_type="textbox"],
input[ui_type="email"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
.fieldtypeText.customDropDown select,
.fieldtypeText.customDropDown.customDropDownof select,
.customDropDown select,
select[inpSize="large"],
select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  color: var(--syf-ink) !important;
  background: #fff !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--syf-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  box-sizing: border-box !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

textarea.fieldtext,
textarea {
  height: auto !important;
  min-height: 120px !important;
  padding: 12px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

.fieldtext::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgb(26 35 50 / 0.45) !important;
}

.syf-zoho-field:focus,
.fieldtext:focus,
input:focus,
textarea:focus,
.fieldtypeText.customDropDown select:focus,
.customDropDown select:focus,
select:focus {
  outline: none !important;
  border-color: var(--syf-gold) !important;
  box-shadow: 0 0 0 1px var(--syf-gold) !important;
}

/* Select wrapper must not add a second border */
.fieldtypeText.customDropDown,
.fieldtypeText.customDropDown.customDropDownof,
.fieldtypeText.customDropDown.ofIconCont,
.customDropDown,
.customDropDown.customDropDownof {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.fieldtypeText.customDropDown [elname="inpCaret"],
.customDropDown [elname="inpCaret"],
.fieldtypeText.customDropDown .focus-border,
.customDropDown .focus-border {
  display: none !important;
}

.navBtnWrapper,
.zfFooter,
.navFootBtnWrap,
.navFootBtnList {
  text-align: left !important;
  justify-content: flex-start !important;
}

.zfbtnSubmit.btnElem {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 16px 32px !important;
  background: var(--syf-gold) !important;
  color: var(--syf-navy) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
}

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

/* International phone — single h-11 row (country code + number) */
.tempContDiv[elname="phoneFormatElem"] {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fieldtypeText.zfCountryCode {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: var(--syf-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  background: #fff !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.fieldtypeText.zfCountryCode .zfFldVerifCont,
.fieldtypeText.zfCountryCode .inputVeriLeftPan {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fieldtypeText.zfCountryCode input.fieldtext,
.fieldtypeText.zfCountryCode input[elname="countrycode"] {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 12px !important;
}

.fieldtypeText.zfCountryCode:focus-within {
  border-color: var(--syf-gold) !important;
  box-shadow: 0 0 0 1px var(--syf-gold) !important;
}

.fieldtypeText.zfCountryCode .focus-border,
.fieldtypeText.zfCountryCode svg.icon,
.fieldtypeText.zfCountryCode [elname="inpCaret"] {
  display: none !important;
}

.fieldtypeText.zfCountryCode .flag-drop-down,
.fieldtypeText.zfCountryCode .countryCode,
.fieldtypeText.zfCountryCode .ccodeContainer,
.fieldtypeText.zfCountryCode [elname="countryCode"] {
  display: flex !important;
  align-items: center !important;
  align-self: stretch !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 8px 0 12px !important;
  border: none !important;
  border-right: 1px solid var(--syf-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}