/**
 * SYF footer newsletter — Lovable Footer (email + subscribe, dark)
 */

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

:root {
  --syf-navy-deep: #152a52;
  --syf-gold: #c5ab71;
}

body.syf-variant-footer #bgLiveDisabledDiv,
body.syf-variant-footer #liveErrPageDiv,
body.syf-variant-footer #dummyInputElement,
body.syf-variant-footer [elname="popup"],
body.syf-variant-footer .backgroundBg,
body.syf-variant-footer .bgWrapper {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.syf-variant-footer .mainWrapper,
body.syf-variant-footer #mainWrapper,
body.syf-variant-footer #test,
body.syf-variant-footer .fieldContWrapper,
body.syf-variant-footer .fieldsWrapper {
  min-height: 0 !important;
  height: auto !important;
}

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

/* Lovable Footer NewsletterColumn: form uses space-y-3 (12px) between input and button */
body.syf-variant-footer .zfFooter,
body.syf-variant-footer .navBtnWrapper {
  margin-top: 12px !important;
  padding-top: 0 !important;
}

body.syf-variant-footer .navFootBtnWrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

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

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

.fieldtext,
input.fieldtext,
input[type="text"],
input[type="email"],
.fieldtypeText.customDropDown select,
.fieldtypeText.customDropDown.customDropDownof select,
.customDropDown select,
select {
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  color: #fff !important;
  background: transparent !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-color: rgb(255 255 255 / 0.2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  appearance: auto !important;
}

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

.fieldtext:focus,
input:focus,
select:focus,
.fieldtypeText.customDropDown select:focus,
.customDropDown select:focus {
  outline: none !important;
  border-color: var(--syf-gold) !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;
}

.customDropDown select option {
  color: var(--syf-navy-deep) !important;
}

.zfFooter,
.navBtnWrapper {
  margin-top: 12px !important;
}

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

.zfbtnSubmit.btnElem:hover,
.zfbtnSubmit.btnElem:focus {
  background: rgb(255 255 255 / 0.9) !important;
}