/* === General Form Container Styling === */
.marketo-form-wrapper form,
.marketo-form-wrapper .mktoForm {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  color: #636466;
}
 
/* === Form Layout: Flex row with consistent spacing === */
.marketo-form-wrapper .mktoFormRow {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-left: -10px;
}
 
/* === Columns inside rows === */
.marketo-form-wrapper .mktoFormRow .mktoFormCol {
  flex: 1 1 calc(33.333% - 13.33px);
  padding-left: 10px;
  margin-top: 10px;
  max-width: 100%;
  box-sizing: border-box;
}
 
/* === Force 100% width on all inner elements === */
.marketo-form-wrapper .mktoFormCol,
.marketo-form-wrapper .mktoFieldDescriptor,
.marketo-form-wrapper .mktoFieldWrap,
.marketo-form-wrapper .mktoFieldWrap *,
.marketo-form-wrapper .mktoFieldWrap *[style*="width"],
.marketo-form-wrapper .mktoFormCol *[style*="width"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
 
/* === Neutralize Marketo's layout spacers === */
.marketo-form-wrapper .mktoOffset,
.marketo-form-wrapper .mktoGutter,
.marketo-form-wrapper .mktoClear,
.marketo-form-wrapper .mktoPlaceholder,
.marketo-form-wrapper .mktoFormRow > *:not(.mktoFormCol) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
 
/* === Input Field Styling === */
.marketo-form-wrapper input,
.marketo-form-wrapper select,
.marketo-form-wrapper textarea {
  width: 100% !important;
  max-width: 100% !important;
  font-size: 13px;
  border: 1px solid #636466;
  border-radius: 3px;
  background: #fff;
  color: #636466;
  box-sizing: border-box;
  padding: 10px !important;
  transition: border-color 0.2s ease-in-out;
}
 
/* === Standardize height for form elements === */
.marketo-form-wrapper input[type="text"],
.marketo-form-wrapper input[type="email"],
.marketo-form-wrapper input[type="tel"],
.marketo-form-wrapper select {
  height: 44px !important;
}
 
/* === Textarea height === */
.marketo-form-wrapper textarea {
  height: 54px !important;
  line-height: 1.3;
  resize: vertical;
}
 
/* === Placeholder text styling === */
.marketo-form-wrapper ::placeholder {
  font-size: 12px !important;
  line-height: 1.2 !important;
}
 
/* === Standardize Select font size (for placeholder) === */
.marketo-form-wrapper select {
  font-size: 13px !important;
}
.marketo-form-wrapper select option:first-child {
  font-size: 12px !important;
}
 
/* === Label Styling === */
.marketo-form-wrapper .mktoLabel {
  position: relative;
  min-height: 1em; /* Reserve height for asterisk */
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #636466;
  white-space: normal !important;
  line-height: 1.3;
}
 
/* === HTML Text inside fields (used for messages/instructions) === */
.marketo-form-wrapper .mktoHtmlText {
  display: block;
  padding-top: 20px;
  margin-bottom: 0.5rem;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #636466;
}
 
/* === Asterisk styling for required fields === */
.mktoForm .mktoRequiredField .mktoAsterix {
  text-align: right !important;
}
.marketo-form-wrapper .mktoAsterix {
  position: absolute;
  top: 0;
  right: 0;
  color: red;
}
 
/* === Checkbox Styling === */
.marketo-form-wrapper .mktoCheckboxList {
  display: block;
  margin: 0;
  padding: 0;
}
.marketo-form-wrapper .mktoCheckboxPair {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.marketo-form-wrapper .mktoCheckboxPair input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
}
.marketo-form-wrapper .mktoCheckboxPair label {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  display: inline-block;
}
 
/* === Radio Button Styling === */
.marketo-form-wrapper .mktoRadioList {
  display: block;
  margin: 0;
  padding: 0;
}
.marketo-form-wrapper .mktoRadioPair {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.marketo-form-wrapper .mktoRadioPair input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
}
.marketo-form-wrapper .mktoRadioPair label {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  display: inline-block;
}
 
/* === Button Styling === */
.marketo-form-wrapper .mktoButtonWrap {
  width: 100% !important;
  text-align: left !important;
  margin-left: 10px !important;
}
.marketo-form-wrapper .mktoButton {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding: 10px 24px !important;
  border-radius: 25px !important;
}
 
/* === Responsive (Mobile) Adjustments === */
@media (max-width: 768px) {
  .marketo-form-wrapper .mktoFormRow {
    margin-left: 0;
  }
  .marketo-form-wrapper .mktoFormRow .mktoFormCol {
    flex: 1 1 100%;
    padding-left: 0;
    margin-top: 10px;
  }
 
  /* Keep form fields same height on mobile */
  .marketo-form-wrapper input[type="text"],
  .marketo-form-wrapper input[type="email"],
  .marketo-form-wrapper input[type="tel"],
  .marketo-form-wrapper select {
    height: 44px !important;
  }
  .marketo-form-wrapper textarea {
    height: 54px !important;
  }
}
 
/* === Prevent full-width radio/checkbox inputs before JS wraps them === */
.mktoForm .mktoRadioList > input,
.mktoForm .mktoCheckboxList > input {
  padding: 0;
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  vertical-align: middle;
}