@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Text inputs ── */
  --input-height: 45px;
  --input-width: 100%;
  --input-border-color: #5F73E3;
  --input-border-width: 1px;
  --input-border-style: solid;
  --input-padding: 15px;
  --input-border-radius: 8px;
  --input-color: #5F73E3;
  --input-font-size: 16px;
  --input-font-weight: 300;
  --field-input-width: auto;
  --input-font-family: "Fira Sans", sans-serif;
  --input-hover-color: #5F73E3;
  --input-hover-border-color: #5F73E3;
  --input-hover-background-color: #fff;
  --field-top-spacing: 35px;
  --input-background-color: #fff;

  /* ── Select / Dropdown ── */
  --select-height: 45px;
  --select-width: 100%;
  --select-border-color: #5F73E3;
  --select-border-width: 1px;
  --select-border-style: solid;
  --select-padding: 15px;
  --select-border-radius: 8px;
  --select-color: #5F73E3;
  --select-font-size: 16px;
  --select-font-weight: 300;
  --select-font-family: "Fira Sans", sans-serif;
  --select-hover-color: #5F73E3;
  --select-hover-border-color: #5F73E3;
  --select-hover-background-color: #fff;
  --select-top-spacing: 35px;
  --select-background-color: #fff;
  --select-background-image: url('https://storage.googleapis.com/imgs-slxdev/RTB/Form%20Template/RTB-form-chevron-blue.png');
  --select-background-image-position-right: 16px;
  --select-background-image-size: 15px;
  --select-appearance: none;

  /* ── Textarea ── */
  --textarea-height: 120px;
  --textarea-width: 100%;
  --textarea-border-color: #5F73E3;
  --textarea-border-width: 1px;
  --textarea-border-style: solid;
  --textarea-padding: 15px;
  --textarea-border-radius: 8px;
  --textarea-color: #5F73E3;
  --textarea-font-size: 16px;
  --textarea-font-weight: 300;
  --textarea-font-family: "Fira Sans", sans-serif;
  --textarea-hover-color: #5F73E3;
  --textarea-hover-border-color: #5F73E3;
  --textarea-hover-background-color: #fff;
  --textarea-top-spacing: 35px;
  --textarea-background-color: #fff;

  /* ── Field labels ── */
  --field-label-font-family: "Fira Sans", sans-serif;
  --field-label-font-size: 16px;
  --field-label-font-weight: 300;
  --field-label-bottom-spacing: 11px;
  --field-label-padding: 0px;
  --field-label-color: #202529;
  --field-label-color-asterisk: #D90478;
  --field-label-alignment: column;
  --field-label-width: auto;

  /* ── Descriptions ── */
  --description-font-family: "Fira Sans", sans-serif;
  --description-font-size: 16px;
  --description-font-weight: 300;
  --description-color: #959da5;
  --description-top-spacing: 5px;
  --description-padding: 0px;

  /* ── Placeholders ── */
  --placeholder-color: #5F73E3;
  --placeholder-hover-color: #5F73E3;
  --placeholder-font-family: "Fira Sans", sans-serif;
  --placeholder-font-size: 16px;
  --placeholder-font-weight: 300;

  /* ── Checkboxes ── */
  --checkbox-input-size: 18px;
  --checkbox-border-width: 1px;
  --checkbox-border-radius: 0px;
  --checkbox-unchecked-border-color: #D5D6D8;
  --checkbox-unchecked-background: #D5D6D8;
  --checkbox-checked-background: #D90478;
  --checkbox-checked-border-color: #D90478;
  --checkbox-checked-color: #fff;
  --checkbox-alignment: left;
  --checkbox-label-font-family: "Fira Sans", sans-serif;
  --checkbox-label-font-size: 16px;
  --checkbox-label-font-weight: 300;
  --checkbox-label-color: #202529;

  /* ── Radio buttons ── */
  --radio-input-size: 18px;
  --radio-border-width: 1px;
  --radio-border-radius: 50%;
  --radio-unchecked-border-color: #D5D6D8;
  --radio-unchecked-background: #D5D6D8;
  --radio-checked-background: #D90478;
  --radio-checked-border-color: #D90478;
  --radio-alignment: left;
  --radio-label-font-family: "Fira Sans", sans-serif;
  --radio-label-font-size: 16px;
  --radio-label-font-weight: 300;
  --radio-label-color: #202529;

  /* ── Toggle ── */
  --toggle-margin-bottom: 20px;
  --toggle-margin-right: 15px;
  --toggle-position: relative;
  --toggle-width: 40px;
  --toggle-height: 20px;
  --toggle-background-color: #D5D6D8;
  --toggle-border-width: 1px;
  --toggle-border-color: #D5D6D8;
  --toggle-border-radius: 20px;
  --toggle-checked-background-color: #D90478;
  --toggle-knob-width: 15px;
  --toggle-knob-height: 15px;
  --toggle-knob-color: #fff;
  --toggle-knob-alignment: 1px;
  --toggle-knob-checked-color: #fff;
  --toggle-label-font-family: "Fira Sans", sans-serif;
  --toggle-label-font-size: 16px;
  --toggle-label-font-weight: 300;
  --toggle-label-color: #202529;

  /* ── Submit button ── */
  --submit-margin-top: 35px;
  --submit-font-size: 20px;
  --submit-font-family: "Barlow Condensed", sans-serif;
  --submit-font-weight: 700;
  --submit-width: 225px;
  --submit-height: 56px;
  --submit-border-radius: 8px;
  --submit-border-width: 1px;
  --submit-background: #D90478;
  --submit-color: #fff;
  --submit-border-color: #D90478;
  --submit-background-hover: #b8036a;
  --submit-color-hover: #fff;
  --submit-border-color-hover: #b8036a;
  --submit-text-align: center;
  --submit-background-image: url('');
  --submit-background-image-position-right: 10px;
  --submit-background-image-size: 20px;
  --submit-alignment: left;

  /* ── Errors ── */
  --error-text-font-size: 14px;
  --error-text-font-family: "Fira Sans", sans-serif;
  --error-text-font-weight: 300;
  --error-text-color: #D90478;
  --error-text-top-spacing: 0;
  --error-text-bottom-spacing: 0px;
  --error-text-padding: 0px;
  --error-field-border-color: #D90478;
  --error-heading-font-size: 14px;
  --error-heading-font-family: "Fira Sans", sans-serif;
  --error-heading-font-weight: 300;
  --error-heading-color: #D90478;
  --error-heading-bottom-spacing: 35px;
  --error-heading-padding: 8px 12px;
  --error-heading-bg-color: #F5D0E8;

  /* ── Date picker ── */
  --datepicker-font-family: "Fira Sans", sans-serif;
  --datepicker-font-size: 16px;
  --datepicker-border-color: #5F73E3;
  --datepicker-border-radius: 4px;
  --datepicker-background: #fff;
  --datepicker-header-background: #fff;
  --datepicker-header-color: #202529;
  --datepicker-header-font-family: "Fira Sans", sans-serif;
  --datepicker-header-font-size: 14px;
  --datepicker-header-font-weight: 300;
  --datepicker-nav-color: #202529;
  --datepicker-day-color: #202529;
  --datepicker-day-hover-color: #D90478;
  --datepicker-today-color: #D90478;
  --datepicker-today-font-weight: 700;
  --datepicker-selected-color: #D90478;
  --datepicker-selected-font-weight: 700;
  --datepicker-weekday-color: #202529;
  --datepicker-weekday-font-weight: 500;
  --datepicker-shadow: 0 4px 16px rgba(0,0,0,0.12);

  /* ── Custom select / multi-select ── */
  --custom-select-font-family: "Fira Sans", sans-serif;
  --custom-select-font-size: 16px;
  --custom-select-color: #5F73E3;
  --custom-select-placeholder-color: #5F73E3;
  --custom-select-bg: #fff;
  --custom-select-border-color: #5F73E3;
  --custom-select-border-radius: 8px;
  --custom-select-height: 45px;
  --custom-select-dropdown-bg: #fff;
  --custom-select-option-color: #202529;
  --custom-select-option-hover-bg: rgba(95,115,227,0.08);
  --custom-select-option-hover-color: #5F73E3;
  --custom-select-option-selected-bg: transparent;
  --custom-select-option-selected-color: #D90478;
  --custom-select-chip-bg: #D90478;
  --custom-select-chip-color: #fff;
  --custom-select-shadow: 0 4px 16px rgba(0,0,0,0.12);

  --transition-main: all 300ms ease-in-out;
}

#pardot-form .form-field:first-of-type {
  padding-top: 0;
}
/* ══════════════════════════════════════════════════════
   LABELS
   ══════════════════════════════════════════════════════ */
form.form div label {
  font-family: var(--field-label-font-family);
  font-size: var(--field-label-font-size);
  font-weight: var(--field-label-font-weight);
  margin-bottom: var(--field-label-bottom-spacing);
  padding: var(--field-label-padding);
  color: var(--field-label-color);
}

.field-wrapper {
  display: flex;
  flex-direction: var(--field-label-alignment);
}

form.form div.form-field {
  padding-top: var(--field-top-spacing);
}

form.form div.form-field .field-label {
  flex-basis: var(--field-label-width);
  flex-shrink: 0;
}

form.form div.form-field .text {
  flex-basis: var(--field-input-width);
  flex-grow: 1;
}


/* ══════════════════════════════════════════════════════
   PLACEHOLDERS
   ══════════════════════════════════════════════════════ */
form.form input.text::placeholder,
form.form input.date::placeholder,
form.form textarea::placeholder {
  color: var(--placeholder-color);
  transition: var(--transition-main);
  font-size: var(--placeholder-font-size);
  font-weight: var(--placeholder-font-weight);
  font-family: var(--placeholder-font-family);
}


/* ══════════════════════════════════════════════════════
   TEXT INPUT
   ══════════════════════════════════════════════════════ */
form.form input.text {
  height: var(--input-height);
  width: var(--input-width) !important;
  border-width: var(--input-border-width);
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  padding: 0 var(--input-padding);
  color: var(--input-color);
  font-size: var(--input-font-size);
  font-family: var(--input-font-family);
  border-radius: var(--input-border-radius);
  transition: var(--transition-main);
  background-color: var(--input-background-color);
}

form.form input.text:active,
form.form input.text:focus,
form.form input.text:hover {
  background-color: var(--input-hover-background-color);
  border-color: var(--input-hover-border-color);
  outline: none !important;
}


/* ══════════════════════════════════════════════════════
   DATE FIELD — base input (.pd-date)
   Native picker suppressed; JS builds custom calendar.
   ══════════════════════════════════════════════════════ */
form.form div.pd-date input.date {
  height: var(--input-height);
  width: var(--input-width) !important;
  border-width: var(--input-border-width);
  border-color: var(--input-border-color);
  border-style: var(--input-border-style);
  padding: 0 var(--input-padding);
  padding-right: 42px;
  color: var(--input-color);
  font-size: var(--input-font-size);
  font-family: var(--input-font-family);
  border-radius: var(--input-border-radius);
  transition: var(--transition-main);
  background-color: var(--input-background-color);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  caret-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

form.form input.date {
    background: none;
}

form.form div.pd-date input.date::placeholder {
  color: var(--placeholder-color);
  font-size: var(--placeholder-font-size);
  font-weight: var(--placeholder-font-weight);
  font-family: var(--placeholder-font-family);
}

form.form div.pd-date input.date::-webkit-calendar-picker-indicator { display: none; }
form.form div.pd-date input.date::-webkit-inner-spin-button { display: none; }
form.form div.pd-date input.date::-webkit-clear-button { display: none; }

form.form div.pd-date input.date:focus,
form.form div.pd-date input.date:active {
  outline: none !important;
  border-color: var(--datepicker-border-color);
}

/* Wrapper injected by JS around the input */
.pd-date-wrapper {
  position: relative;
  width: 100%;
}

/* Calendar SVG icon */
.pd-date-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--datepicker-border-color);
}

/* ── Calendar popup ── */
.pd-datepicker {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;
  width: 280px;
  background: var(--datepicker-background);
  border: 1px solid var(--datepicker-border-color);
  border-radius: var(--datepicker-border-radius);
  box-shadow: var(--datepicker-shadow);
  font-family: var(--datepicker-font-family);
  overflow: hidden;
}

.pd-datepicker.open { display: block; }

/* White header, black text, no blue background */
.pd-datepicker__header {
  background: var(--datepicker-header-background);
  color: var(--datepicker-header-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 14px 6px;
  border-bottom: 1px solid #eee;
}

.pd-datepicker__title {
  font-family: var(--datepicker-header-font-family);
  font-size: var(--datepicker-header-font-size);
  font-weight: var(--datepicker-header-font-weight);
  color: var(--datepicker-header-color);
  letter-spacing: 0.01em;
}

/* Compact nav arrows — sit tight next to the month/year text */
.pd-datepicker__nav {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--datepicker-nav-color);
  line-height: 1;
  padding: 2px 3px;
  border-radius: 2px;
  transition: opacity 0.15s;
  display: flex;
  align-items: center;
}
.pd-datepicker__nav:hover { opacity: 0.6; }

.pd-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 10px 2px;
}

.pd-datepicker__weekday {
  text-align: center;
  font-family: var(--datepicker-font-family);
  font-size: 14px;
  font-weight: var(--datepicker-weekday-font-weight);
  color: var(--datepicker-weekday-color);
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 2px 0;
}

.pd-datepicker__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 2px 10px 10px;
  gap: 1px;
}

/* Days: no rounded background — just colored text for selected/today */
.pd-datepicker__day {
  text-align: center;
  font-family: var(--datepicker-font-family);
  font-weight: 300;
  font-size: var(--datepicker-font-size);
  color: var(--datepicker-day-color);
  padding: 5px 2px;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.15s;
  user-select: none;
  line-height: 1.4;
  background: none;
}

.pd-datepicker__day:hover {
  color: var(--datepicker-day-hover-color);
  background: none;
}

.pd-datepicker__day--empty { cursor: default; }
.pd-datepicker__day--empty:hover { color: inherit; }

/* Today: subtle underline, no bold — only shown when nothing is selected */
.pd-datepicker__day--today {
  color: var(--datepicker-today-color);
  font-weight: var(--datepicker-today-font-weight);
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--datepicker-today-color);
  text-underline-offset: 2px;
}
.pd-datepicker__day--today:hover {
  color: var(--datepicker-today-color);
  background: none;
}

/* Selected date: pink color + underline — overrides today style */
.pd-datepicker__day--selected {
  color: var(--datepicker-selected-color);
  font-weight: var(--datepicker-selected-font-weight);
  background: none;
  text-decoration: underline;
  text-decoration-color: var(--datepicker-selected-color);
  text-underline-offset: 2px;
}
.pd-datepicker__day--selected:hover {
  color: var(--datepicker-selected-color);
  background: none;
}

/* When a date is selected, suppress today's highlight unless it IS the selected date */
.pd-datepicker--has-selection .pd-datepicker__day--today:not(.pd-datepicker__day--selected) {
  color: var(--datepicker-day-color);
  font-weight: 400;
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════
   NATIVE SELECT — kept for non-custom fields
   Hidden for .pd-select and .state (replaced by JS widget)
   ══════════════════════════════════════════════════════ */
form.form select {
  height: var(--select-height);
  width: var(--select-width) !important;
  border-width: var(--select-border-width);
  border-color: var(--select-border-color);
  border-style: var(--select-border-style);
  padding: 0 var(--select-padding);
  color: var(--select-color);
  font-size: var(--select-font-size);
  font-family: var(--select-font-family);
  border-radius: var(--select-border-radius);
  transition: var(--transition-main);
  background-color: var(--select-background-color);
  background: var(--select-background-color) var(--select-background-image) no-repeat right var(--select-background-image-position-right) center;
  background-size: var(--select-background-image-size);
  appearance: var(--select-appearance);
}

form.form select:active,
form.form select:focus,
form.form select:hover {
  background-color: var(--select-hover-background-color);
  border-color: var(--select-hover-border-color);
  outline: none !important;
}

/* Hide native selects replaced by custom widget */
form.form div.pd-select select,
form.form div.state select {
  display: none !important;
}


/* ══════════════════════════════════════════════════════
   CUSTOM SELECT WIDGET  (.cs-*)
   JS injects this for .pd-select and .state fields.
   Covers single-select dropdown AND multi-select.
   ══════════════════════════════════════════════════════ */
.cs-wrapper {
  position: relative;
  width: 100%;
  font-family: var(--custom-select-font-family);
  font-size: var(--custom-select-font-size);
}

/* Trigger box — same look as text inputs */
.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--custom-select-height);
  border: 1px solid var(--custom-select-border-color);
  border-radius: var(--custom-select-border-radius);
  background: var(--custom-select-bg);
  padding: 0 15px;
  cursor: pointer;
  transition: var(--transition-main);
  user-select: none;
  -webkit-user-select: none;
  gap: 8px;
      padding-top: 10px;
    padding-bottom: 10px;
}

.cs-trigger:hover,
.cs-wrapper.open .cs-trigger {
  border-color: var(--custom-select-border-color);
  background: var(--custom-select-bg);
  outline: none;
}

/* Label area: placeholder text or chips */
.cs-trigger__label {
  color: var(--custom-select-placeholder-color);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  font-weight: 300;
}

/* Pink selected chips (multi-select) */
.cs-chip {
  display: inline-flex;
  align-items: center;
  background: var(--custom-select-chip-bg);
  color: var(--custom-select-chip-color);
  border-radius: 50px;
  padding: 2px 20px;
  font-size: 13px;
  font-weight: 300;
  gap: 5px;
  white-space: nowrap;
}

.cs-chip__remove {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  opacity: 0.85;
  font-size: 15px;
  padding: 0 2px;
}
.cs-chip__remove:hover { opacity: 1; }

/* Chevron — rotates when open */
.cs-trigger__chevron {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-wrapper.open .cs-trigger__chevron {
  transform: rotate(180deg);
}

/* Clear-all button (multi only) */
.cs-clear {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--custom-select-color);
  font-size: 18px;
  flex-shrink: 0;
  padding: 0 4px;
  opacity: 0.6;
}
.cs-clear:hover { opacity: 1; }

/* Dropdown panel */
.cs-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9998;
  background: var(--custom-select-dropdown-bg);
  border: 1px solid var(--custom-select-border-color);
  border-radius: var(--custom-select-border-radius);
  box-shadow: var(--custom-select-shadow);
  overflow: hidden;
  overflow-y: auto;
  max-height: 220px;
}

.cs-wrapper.open .cs-dropdown { display: block; }

/* Option row */
.cs-option {
  padding: 10px 15px;
  cursor: pointer;
  color: var(--custom-select-option-color);
  font-family: var(--custom-select-font-family);
  font-size: var(--custom-select-font-size);
  transition: color 0.15s;
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
}

.cs-option:hover {
  background: var(--custom-select-option-hover-bg);
  color: var(--custom-select-option-hover-color);
}

/* Selected option: pink text, no background fill */
.cs-option.selected {
  background: var(--custom-select-option-selected-bg);
  color: var(--custom-select-option-selected-color);
  font-weight: 300;
}

/* No checkbox indicator in options — remove it entirely */
.cs-option__check { display: none !important; }


/* ══════════════════════════════════════════════════════
   TEXTAREA
   ══════════════════════════════════════════════════════ */
form.form textarea {
  width: var(--textarea-width) !important;
  border-width: var(--textarea-border-width);
  border-color: var(--textarea-border-color);
  border-style: var(--textarea-border-style);
  padding: 12px var(--textarea-padding) !important;
  color: var(--textarea-color);
  font-size: var(--textarea-font-size);
  font-family: var(--textarea-font-family);
  border-radius: var(--textarea-border-radius);
  transition: var(--transition-main);
  background-color: var(--textarea-background-color);
}

form.form textarea.standard {
  height: var(--textarea-height);
}

form.form textarea:active,
form.form textarea:focus,
form.form textarea:hover {
  background-color: var(--textarea-hover-background-color);
  border-color: var(--textarea-hover-border-color);
  outline: none !important;
}


/* ══════════════════════════════════════════════════════
   ERRORS
   ══════════════════════════════════════════════════════ */

/* Top banner: "Please correct the errors below" — centered pink bg */
.red-background, form.form p.errors {
  font-size: var(--error-heading-font-size);
  font-family: var(--error-heading-font-family);
  font-weight: var(--error-heading-font-weight);
  color: var(--error-heading-color);
  margin: 0 0 var(--error-heading-bottom-spacing);
  padding: var(--error-heading-padding);
  background: var(--error-heading-bg-color);
  border-radius: 6px;
  display: block;
  text-align: center;
  height: var(--input-height);
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* Inline field error: same pill look — pink bg, pink text, rounded, centered */
form.form p.error.no-label {
  font-size: var(--error-text-font-size);
  font-family: var(--error-text-font-family);
  font-weight: var(--error-text-font-weight);
  color: var(--error-text-color);
  background: var(--error-heading-bg-color);
  border-radius: 6px;
  margin-top: var(--error-text-top-spacing);
  margin-bottom: 0;
  padding: 6px 12px;
  display: block;
  text-align: center;
  height: var(--input-height);
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}

/* Fields with errors: pink border */
form.form div.form-field.error input.text,
form.form div.form-field.error input.date,
form.form div.form-field.error .cs-trigger,
form.form div.form-field.error textarea {
  border-color: var(--error-field-border-color) !important;
}

/* Keep consistent top padding on error fields */
form.form div.form-field.error {
  padding-top: var(--field-top-spacing);
}

/* Legacy error classes */
.red-color, form.form div.error, form.form p.error,
form.form p.error label, form.form span.error {
  color: var(--error-text-color);
  padding: 0;
}
form.form div p.no-label { margin-left: 0; }


/* ══════════════════════════════════════════════════════
   DESCRIPTION
   ══════════════════════════════════════════════════════ */
span.description {
  font-family: var(--description-font-family);
  font-size: var(--description-font-size);
  font-weight: var(--description-font-weight);
  color: var(--description-color);
  margin-top: var(--description-top-spacing);
  padding: var(--description-padding);
  display: block;
}


/* ══════════════════════════════════════════════════════
   SUBMIT BUTTON
   ══════════════════════════════════════════════════════ */
form.form p.submit {
  margin: 0;
  padding: 0;
  text-align: var(--submit-alignment);
  margin-left: 0 !important;
}

input[type="submit"] {
  background: var(--submit-background);
  color: var(--submit-color);
  margin-top: var(--submit-margin-top) !important;
  height: var(--submit-height);
  width: var(--submit-width);
  border-style: solid;
  border-color: var(--submit-border-color);
  border-width: var(--submit-border-width);
  transition: var(--transition-main);
  font-size: var(--submit-font-size);
  font-family: var(--submit-font-family);
  font-weight: var(--submit-font-weight) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--submit-border-radius);
  cursor: pointer;
  text-align: var(--submit-text-align);
}

input[type="submit"]:hover,
input[type="submit"]:active {
  color: var(--submit-color-hover);
  background: var(--submit-background-hover);
  border-color: var(--submit-border-color-hover);
}


/* ══════════════════════════════════════════════════════
   CHECKBOX & RADIO
   Native inputs hidden. JS injects .cs-indicator with
   SVG checkmark. Works for both checkbox (square) and
   radio (circle) — both show checkmark when checked.
   ══════════════════════════════════════════════════════ */

/* Hide the actual inputs */
#pardot-form .pd-checkbox input,
#pardot-form .pd-radio input {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Allow clicks to pass through to the input via label */
#pardot-form .pd-checkbox label,
#pardot-form .pd-radio label {
  display: flex !important;
  position: relative;
  margin-left: 0px !important;
  align-items: center;
  cursor: pointer;
}

/* Suppress the legacy :before pseudo-element */
#pardot-form .pd-checkbox input + label:before,
#pardot-form .pd-radio input + label:before {
  content: none !important;
  display: none !important;
}

/* JS-injected indicator span */
.cs-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  margin-right: 8px;
  line-height: 0;
  transition: background 0.15s, border-color 0.15s;
}

/* Checkbox: square — 0 border radius per spec */
.pd-checkbox .cs-indicator {
  width: var(--checkbox-input-size);
  height: var(--checkbox-input-size);
  min-width: var(--checkbox-input-size);
  border: var(--checkbox-border-width) solid var(--checkbox-unchecked-border-color);
  border-radius: 0;
  background: var(--checkbox-unchecked-background);
}

/* Radio: circle */
.pd-radio .cs-indicator {
  width: var(--radio-input-size);
  height: var(--radio-input-size);
  min-width: var(--radio-input-size);
  border: var(--radio-border-width) solid var(--radio-unchecked-border-color);
  border-radius: 50%;
  background: var(--radio-unchecked-background);
}

/* Checked state */
.pd-checkbox .cs-indicator.checked {
  background: var(--checkbox-checked-background) !important;
  border-color: var(--checkbox-checked-border-color) !important;
}

.pd-radio .cs-indicator.checked {
  background: var(--radio-checked-background) !important;
  border-color: var(--radio-checked-border-color) !important;
}

/* SVG checkmark — hidden until checked, fills the indicator box */
.cs-indicator svg {
  display: none;
  width: 75%;
  height: 75%;
  flex-shrink: 0;
  margin: 2px auto;
}

.cs-indicator.checked svg {
  display: block;
}

/* Label text */
.pd-checkbox label.inline {
  font-family: var(--checkbox-label-font-family);
  font-size: var(--checkbox-label-font-size);
  font-weight: var(--checkbox-label-font-weight);
  color: var(--checkbox-label-color);
  margin-right: 10px;
}

.pd-radio label.inline {
  font-family: var(--radio-label-font-family);
  font-size: var(--radio-label-font-size);
  font-weight: var(--radio-label-font-weight);
  color: var(--radio-label-color);
  margin-right: 10px;
}

/* List alignment */
form.form span.value { margin-left: 0; }

form.form .pd-checkbox .value span,
form.form .pd-radio .value span {
  float: var(--checkbox-alignment);
  margin-right: 8px;
  position: relative;
}

form.form .pd-radio .value span {
  float: var(--radio-alignment);
  margin-right: 8px;
  margin-top: 4px;
}


/* ══════════════════════════════════════════════════════
   TOGGLE (unchanged from original)
   ══════════════════════════════════════════════════════ */
#pardot-form .custom-toggle input + label:before { display: none !important; }

form.form .custom-toggle input[type="checkbox"],
form.form .custom-toggle input[type="radio"] {
  padding: 0;
  position: var(--toggle-position) !important;
  right: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--toggle-width);
  min-width: var(--toggle-width);
  height: var(--toggle-height);
  background-color: var(--toggle-background-color);
  border: var(--toggle-border-width) solid var(--toggle-border-color);
  box-sizing: content-box;
  border-radius: var(--toggle-border-radius);
  transition: all .25s;
  margin-right: var(--toggle-margin-right) !important;
}

form.form .custom-toggle .value span { display: flex; }

form.form .custom-toggle input[type="checkbox"]:after,
form.form .custom-toggle input[type="radio"]:after {
  content: '';
  width: var(--toggle-knob-width);
  height: var(--toggle-knob-height);
  background-color: var(--toggle-knob-color);
  display: block;
  position: absolute;
  left: var(--toggle-knob-alignment);
  top: 50%;
  transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  border-radius: 50%;
  transition: all .25s;
}

form.form .custom-toggle input[type="checkbox"]:checked,
form.form .custom-toggle input[type="radio"]:checked {
  background-color: var(--toggle-checked-background-color);
}

form.form .custom-toggle input[type="checkbox"]:checked:after,
form.form .custom-toggle input[type="radio"]:checked:after {
  background-color: var(--toggle-knob-checked-color);
  left: calc(100% - var(--toggle-knob-width) - var(--toggle-knob-alignment));
}

#pardot-form .custom-toggle input { opacity: 1 !important; }
form.form .custom-toggle .value span { margin-bottom: var(--toggle-margin-bottom); }

.custom-toggle label.inline {
  font-family: var(--toggle-label-font-family);
  font-size: var(--toggle-label-font-size);
  font-weight: var(--toggle-label-font-weight);
  color: var(--toggle-label-color);
}


/* ══════════════════════════════════════════════════════
   2-COLUMN LAYOUT
   ══════════════════════════════════════════════════════ */
body form.form div.form-col-1 { float: left !important; clear: left !important; width: 49% !important; }
body form.form div.form-col-2 { float: right !important; clear: right !important; width: 49% !important; }
body form.form div.form-col-full { width: 100%; clear: both; }


/* ══════════════════════════════════════════════════════
   reCAPTCHA
   ══════════════════════════════════════════════════════ */
form.form .pd-captcha {
  position: relative !important;
  width: 304px !important;
  left: 0 !important;
  display: block !important;
  top: 20px;
}

@media screen and (max-width: 479px) {
  form.form .pd-captcha { position: relative !important; width: 100% !important; }
  .g-recaptcha { transform: scale(0.77); -webkit-transform: scale(0.77); transform-origin: 0 0; -webkit-transform-origin: 0 0; }
  body form.form div.form-col-1,
  body form.form div.form-col-2 { width: 100% !important; float: unset !important; clear: both !important; }
}