/* Estilo Lievant */
.phoneCountryCodeLabel{
  display: none;
}
#formLievant p {
  font-size: 12px;
  margin-top: 10px;
  font-weight: 300;
}
#formLievant p a {
  font-size: 12px;
  margin-top: 10px;
  font-weight: 300;
  border-bottom: 1px solid #FFE700 ;
	color: #fff !important;
}
#formLievant .marketingForm table,
#formLievant .marketingForm th,
#formLievant .marketingForm tr,
#formLievant .marketingForm td {
  border: 0px !important;
  margin: 0px !important;
  padding: 0px !important;
}

#formLievant .marketingForm input,
#formLievant .marketingForm select,
#formLievant .marketingForm textarea {
	background-color: transparent !important;
  border-bottom: 1.5px solid #FFE700 !important;
  font-family: SFPro, Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  color: #fff !important;
  font-size: 18px !important;
  border: none;
  padding: 0;
  margin: 6px 0 !important;
}

#formLievant .marketingForm textarea::placeholder {
	  color: #fff !important;
}
#formLievant .marketingForm label {
  display: none !important;
}

#formLievant .marketingForm option {
  font-weight: 200;
  border-radius: 0 !important;
  font-size: 14px;
	color: #000 !important;
}

#formLievant .marketingForm .textFormFieldBlock,
#formLievant .marketingForm .dateTimeFormFieldBlock,
#formLievant .marketingForm .twoOptionFormFieldBlock,
#formLievant .marketingForm .optionSetFormFieldBlock,
#formLievant .marketingForm .multiOptionSetFormFieldBlock,
#formLievant .marketingForm .lookupFormFieldBlock,
#formLievant .marketingForm .phoneFormFieldBlock {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 2px 0 !important;
}

#formLievant .marketingForm fieldset > div > label,
#formLievant .marketingForm .multiOptionSetFormFieldBlock > label {
  display: block !important;
  font-family: SFPro, Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  color: #fff !important;
  font-size: 16px !important;
}

#formLievant .marketingForm input::placeholder {
  font-family: SFPro, Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  color: #fff !important;
  font-size: 18px !important;
}

#formLievant .marketingForm button {
  min-width: 100%;
  background-color: #FFE700;
  color: #000; 
  font-family: SFPro, Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
}

#formLievant .marketingForm .multiOptionSetFormFieldBlock {
  gap: 0 !important;
  font-size: 14px !important;
}

/* FORMS CON DIV */
#formLievant .marketingForm .wrap-section {
  display: flex;
  flex-wrap: wrap;
  column-gap: 3rem;
}

/* Por defecto, cada .columnContainer ocupa el 100% */
#formLievant .marketingForm .wrap-section .columnContainer {
  flex: 1 1 100%;
  box-sizing: border-box;
}

/* Si hay exactamente 2 columnas, cada una al 50% */
#formLievant .marketingForm .wrap-section:has(.columnContainer:nth-child(2):last-child) .columnContainer {
  flex: 1 1 calc(50% - 3rem);
}

/* Responsive: siempre 100% en pantallas pequeñas */
@media (max-width: 600px) {
  #formLievant .marketingForm .wrap-section .columnContainer {
    flex: 1 1 100% !important;
  }
}

#formLievant .marketingForm .wrap-section {
  padding: 0 !important;
}

#formLievant .marketingForm .columnContainer {
  padding: 0 !important;
}
#formLievant .multiOptionSetFormFieldBlock {
  margin: 10px 0 25px 0 !important;
}
#formLievant .multiOptionSetFormFieldBlock fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 0 2rem
}

#formLievant .multiOptionSetFormFieldBlock fieldset > div {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: normal;
  height: auto;
  letter-spacing: normal;
}
#formLievant .multiOptionSetFormFieldBlock fieldset:has(> div:nth-child(7)) > div {
  flex: 1 1 calc(50% - 1rem);
}
#formLievant .multiOptionSetFormFieldBlock fieldset label {
  margin: 0 !important;
}
#formLievant .marketingForm .multiOptionSetFormFieldBlock > label:first-child {
  font-weight: 300 !important;
  margin: 0 0 15px !important;
}

#formLievant .multiOptionSetFormFieldBlock fieldset input[type="checkbox"] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: #FFE700 ; /* Color personalizado opcional */
  margin-right: 5px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

@media (max-width: 600px) {
  #formLievant .multiOptionSetFormFieldBlock fieldset > div {
    flex: 1 1 100%;
  }
}

/* Fin estilo Lievant */

/* Estilo Whatsapp */
#openForm {
  position: fixed;
  z-index: 99999;
  right: 20px;
  bottom: 20px;
  background-color: #25D366;
  border-radius: 1000px;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -ms-border-radius: 1000px;
  -o-border-radius: 1000px;
  padding: 13px;

}
#openForm i{
  color: #fff;
  font-size: 38px;
  width: 40px;
  height: 40px;

}

.modalWA {
  display: none;
  /* opacity: 0; */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.modalWA.active{
  display: block;
  opacity: 100%;
}

.modal-contentWA {
  background-color: #fcf5eb;
  padding: 0px;
  border-radius: 12px;
  width: 90%;
  max-width: 350px;
  position: fixed;
  right: 30px;
  bottom: 100px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.headWA {
  background: #22663c;
  padding: 15px;
  font-weight: 600;
  color: #fff;
  border-radius: 10px 10px 0 0;
}
.closeWA {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 24px;
  cursor: pointer;
}
#formLievantWA {
  padding: 15px;
}
#formLievantWA p {
  font-size: 12px;
  margin-top: 10px;
  font-weight: 300;
}
#formLievantWA p a {
  font-size: 12px;
  margin-top: 10px;
  font-weight: 300;
  border-bottom: 1px solid #000;
}
#formLievantWA .marketingFormWA table,
#formLievantWA .marketingFormWA th,
#formLievantWA .marketingFormWA tr,
#formLievantWA .marketingFormWA td {
  border: 0px !important;
  margin: 0px !important;
  padding: 0px !important;
}

#formLievantWA .marketingFormWA input,
#formLievantWA .marketingFormWA select,
#formLievantWA .marketingFormWA textarea {
  border: 1.5px solid rgb(217 217 217) !important;
  font-family: SFPro, Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  color: rgb(0, 0, 0) !important;
  font-size: 14px !important;
  padding: 5px;
  border-radius: 5px;
  margin: 3px 0;
      height: auto;
}


#formLievantWA .marketingFormWA label {
  display: none !important;
}

#formLievantWA .marketingFormWA option {
  font-weight: 200;
  border-radius: 0 !important;
  font-size: 14px;
}

#formLievantWA .marketingFormWA .textFormFieldBlock,
#formLievantWA .marketingFormWA .dateTimeFormFieldBlock,
#formLievantWA .marketingFormWA .twoOptionFormFieldBlock,
#formLievantWA .marketingFormWA .optionSetFormFieldBlock,
#formLievantWA .marketingFormWA .multiOptionSetFormFieldBlock,
#formLievantWA .marketingFormWA .lookupFormFieldBlock,
#formLievantWA .marketingFormWA .phoneFormFieldBlock {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 2px 10px !important;
}

#formLievantWA .marketingFormWA fieldset > div > label,
#formLievantWA .marketingFormWA .multiOptionSetFormFieldBlock > label {
  display: block !important;
  font-family: SFPro, Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  color: rgb(0, 0, 0) !important; 
  font-size: 16px !important;
}

#formLievantWA .marketingFormWA input::placeholder {
  font-family: SFPro, Arial, Helvetica, sans-serif !important;
  font-weight: 200 !important;
  color: #fff !important;
  font-size: 14px !important;
}

#formLievantWA .marketingFormWA button {
  min-width: 100%;
  background-color: rgb(86 208 98);
  font-family: SFPro, Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  border-radius: 55px;
  padding: 9px;
  margin-top: 19px;
}

#formLievantWA .marketingFormWA .multiOptionSetFormFieldBlock {
  gap: 0 !important;
  font-size: 14px !important;
  margin: 15px 5px !important;
}

#formLievantWA .marketingFormWA .multiOptionSetFormFieldBlock fieldset > div > input[type="checkbox"] {
  height: 15px;
  width: 15px;
}
@media (max-width: 768px) {
  .modal-contentWA{
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        max-width: 100vw;
        border-radius: 0;
  }
  .headWA {
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}
}

/* Fin estilo WA */