/* ================================================================
   GX Campaign Builder — Formidable "Gamerx" Style
   Scoped exclusively to .frm_style_test.
   All colour/spacing values reference design tokens in gx-layout.css.
   Zero functional changes — CSS presentation only.
   ================================================================ */

/* ── Card shell ──────────────────────────────────────────────────── */
.frm_style_test.frm_forms {
  background: var(--gx-card-bg);
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-card-radius);
  box-shadow: var(--gx-card-shadow);
  padding: 32px 36px;
  font-family: 'Poppins', sans-serif;
}

/* Remove default fieldset chrome */
.frm_style_test .frm_form_fields > fieldset {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* ── Step / Progress Indicator ───────────────────────────────────── */
.frm_style_test .frm_rootline_group {
  margin: 0 0 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--gx-card-border);
}

.frm_style_test ul.frm_page_bar {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.frm_style_test .frm_rootline_single {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  flex: 1;
  position: relative;
  padding: 0;
}
ul.frm_rootline_hidden_steps .frm_rootline_single span.frm_rootline_title{
  white-space:nowrap;
}
/* Connecting line between steps */
.frm_style_test ul.frm_rootline.frm_show_lines > .frm_rootline_single::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--gx-card-border);
  z-index: 0;
}

.frm_style_test ul.frm_rootline.frm_show_lines > .frm_rootline_single:last-child::after {
  display: none;
}

/* Completed steps get a primary-coloured line */
.frm_style_test ul.frm_rootline.frm_show_lines > .frm_rootline_single.frm_page_back::after {
  background: var(--gx-primary);
}

/* Step circle button */
.frm_style_test .frm_page_bar input[type="button"],
.frm_style_test .frm_page_bar input[type="button"]:disabled {
  width: 40px;
  height: 40px;
  border-radius: var(--gx-radius-full);
  background: var(--gx-card-bg);
  border: 2px solid var(--gx-card-border);
  color: var(--gx-text-muted);
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  position: relative;
  z-index: 1;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  padding: 0;
  margin: 0 auto;
  flex-shrink: 0;
}

/* Completed / navigable step */
.frm_style_test .frm_page_bar input.frm_page_back {
  background: var(--gx-primary) !important;
  border-color: var(--gx-primary) !important;
  color: #fff !important;
  cursor: pointer;
}

.frm_style_test .frm_page_bar input.frm_page_back:hover {
  background: var(--gx-primary-hover) !important;
  border-color: var(--gx-primary-hover) !important;
}

/* Current / active step */
.frm_style_test .frm_page_bar .frm_current_page input[type="button"] {
  background: var(--gx-primary) !important;
  border-color: var(--gx-primary) !important;
  color: #fff !important;
}

/* Step title label */
.frm_style_test .frm_rootline_title {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gx-text-muted);
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

.frm_style_test .frm_current_page .frm_rootline_title,
.frm_style_test .frm_page_back .frm_rootline_title {
  color: var(--gx-primary);
  font-weight: 600;
}

/* ── Section headings (HTML fields used as section titles) ───────── */
.frm_style_test .frm_form_field.frm_html_container h2,
.frm_style_test .frm_form_field.frm_html_container h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gx-text-primary);
  margin: 24px 0 4px;
}

.frm_style_test .frm_form_field.frm_html_container p {
  font-size: 13px;
  color: var(--gx-text-muted);
  margin: 0 0 16px;
}

/* Bold/strong text in HTML fields used as sub-section labels */
.frm_style_test .frm_form_field.frm_html_container strong,
.frm_style_test .frm_form_field.frm_html_container b {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gx-text-primary) !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--gx-primary) !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* ── Field spacing ───────────────────────────────────────────────── */
.frm_style_test .frm_form_field {
  margin-bottom: 20px;
}

.frm_style_test .frm_form_field:last-of-type {
  margin-bottom: 0;
}

/* ── Labels ──────────────────────────────────────────────────────── */
.frm_style_test .frm_primary_label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--gx-text-secondary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.frm_style_test .frm_required {
  color: var(--gx-danger);
  margin-left: 2px;
}

/* ── Text inputs, selects, textareas ─────────────────────────────── */
.frm_style_test input[type="text"],
.frm_style_test input[type="email"],
.frm_style_test input[type="number"],
.frm_style_test input[type="url"],
.frm_style_test input[type="tel"],
.frm_style_test input[type="password"],
.frm_style_test input[type="search"],
.frm_style_test select,
.frm_style_test textarea {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid var(--gx-card-border) !important;
  border-radius: var(--gx-radius-md) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400;
  color: var(--gx-text-primary) !important;
  background-color: var(--gx-card-bg) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
  min-height: 44px !important;
}

.frm_style_test input[type="text"]:focus,
.frm_style_test input[type="email"]:focus,
.frm_style_test input[type="number"]:focus,
.frm_style_test input[type="url"]:focus,
.frm_style_test input[type="tel"]:focus,
.frm_style_test input[type="date"]:focus,
.frm_style_test select:focus,
.frm_style_test textarea:focus {
  border-color: var(--gx-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(57, 39, 143, 0.10) !important;
}

/* Placeholder */
.frm_style_test input::placeholder,
.frm_style_test textarea::placeholder {
  color: var(--gx-text-faint) !important;
  font-size: 13px;
  opacity: 1;
}

/* Select — custom chevron */
.frm_style_test select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  padding-right: 38px !important;
  cursor: pointer;
}

/* Textarea */
.frm_style_test textarea {
  resize: vertical;
  min-height: 120px !important;
  line-height: 1.6 !important;
}

/* ── Floating / inside-label container override ──────────────────── */
.frm_style_test .frm_inside_container {
  padding-top: 0;
  position: relative;
}

/* ── Slimselect (Formidable Pro native dropdown) ─────────────────── */
.frm_style_test .frm_slimselect.ss-main,
.frm_style_test .ss-single-selected {
  border: 1px solid var(--gx-card-border) !important;
  border-radius: var(--gx-radius-md) !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  background: var(--gx-card-bg) !important;
  font-size: 14px !important;
  color: var(--gx-text-primary) !important;
}

/* ── Checkboxes and Radio groups ─────────────────────────────────── */

/* Checkbox label wraps */
.frm_style_test .frm_checkbox label,
.frm_style_test .frm_radio label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gx-text-secondary);
  cursor: pointer;
  font-weight: 400;
  padding: 4px 0;
}

/* Custom checkbox / radio appearance */
.frm_style_test input[type="checkbox"],
.frm_style_test input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  border: 2px solid var(--gx-card-border) !important;
  background: var(--gx-card-bg) !important;
  border-radius: 4px !important;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  flex-shrink: 0;
  position: relative;
  box-shadow: none !important;
  float: none;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}

.frm_style_test input[type="radio"] {
  border-radius: var(--gx-radius-full) !important;
}

.frm_style_test input[type="checkbox"]:checked,
.frm_style_test input[type="radio"]:checked {
  background-color: var(--gx-primary) !important;
  border-color: var(--gx-primary) !important;
}

/* Checkmark via pseudo (for checkbox) */
.frm_style_test input[type="checkbox"]:checked::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  display: block;
}

/* Radio dot */
.frm_style_test input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  display: block;
}

/* Focus ring */
.frm_style_test input[type="checkbox"]:focus,
.frm_style_test input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgba(57, 39, 143, 0.12) !important;
  outline: none;
}

/* ── Radio options as styled pills (Campaign Type) ───────────────── */
.frm_style_test .frm_radio {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.frm_style_test .frm_radio_group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.frm_style_test .frm_opt_container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Toggle (no budget cap) ──────────────────────────────────────── */
.frm_style_test input[type="checkbox"].frm_toggle_field {
  width: 42px !important;
  height: 24px !important;
  border-radius: var(--gx-radius-full) !important;
  border: none !important;
  background: #CBD5E1 !important;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.frm_style_test input[type="checkbox"].frm_toggle_field::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  display: block;
  transition: left 0.2s;
  border: none;
  transform: none;
}

.frm_style_test input[type="checkbox"].frm_toggle_field:checked {
  background: var(--gx-primary) !important;
}

.frm_style_test input[type="checkbox"].frm_toggle_field:checked::before {
  left: 21px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

/* Submit / Next Step */

.frm_style_test .frm_button_submit {
  font-weight: 600 !important;
}

/* Save Draft / Clear Form style buttons (rendered as <a> or <input> via custom HTML) */
.frm_style_test .frm_start_over,
.frm_style_test .frm_prev_page {
  padding: 10px 14px;
  background: var(--gx-card-bg);
  color: var(--gx-text-secondary);
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  font-weight: 600!important;
  text-decoration: none;
  line-height: normal;
}

.frm_style_test .frm_start_over:hover,
.frm_style_test .frm_prev_page:hover {
  border-color: var(--gx-primary-contrast);
  color: var(--gx-primary-contrast);
}

.frm_form_fields.frm_page_num_1 .frm_submit,
.frm_form_fields.frm_page_num_2 .frm_submit {
    margin-top: 10px;
}

.frm_form_fields.frm_page_num_3 .frm_submit,
.frm_form_fields.frm_page_num_4 .frm_submit,
.frm_form_fields.frm_page_num_5 .frm_submit {
    margin-top: 20px;
}

/* All steps: Previous on left, submit/action buttons on right */
.frm_style_test .frm_submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* Step 5: Cancel sits immediately before Launch Campaign (grouped right) */
.gx-s5-btn-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── File upload fields (Brand Logo / Campaign Banner) ───────────── */
.frm_style_test .frm_form_field input[type="file"] {
  display: block;
  width: 100%;
  padding: 28px 16px;
  border: 2px dashed var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  background: #F8FAFC;
  text-align: center;
  color: var(--gx-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  box-sizing: border-box;
  min-height: 100px;
}

.frm_style_test .frm_form_field input[type="file"]:hover {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.03);
}

/* ── Rich text (WP Editor) wrapper ──────────────────────────────── */
.frm_style_test .wp-editor-wrap {
  border: 1px solid var(--gx-card-border) !important;
  border-radius: var(--gx-radius-md) !important;
  overflow: hidden;
  width: 100% !important;
  max-width: 100% !important;
}

.frm_style_test .wp-switch-editor {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gx-text-muted);
  background: #f6f7f7;
  cursor: pointer;
  border-radius: var(--gx-radius-sm) var(--gx-radius-sm) 0 0;
  transition: color 0.15s;
  border-bottom: 1px solid #dcdcde;
}

.tmce-active .switch-tmce, .html-active .switch-html {
  color: var(--gx-primary)!important;
  background:#f6f7f7!important;

}
.frm_style_test .wp-editor-container textarea.wp-editor-area {
  border: none !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-family: 'Poppins', sans-serif !important;
  min-height: 140px !important;
  resize: vertical;
  width: 100% !important;
  box-sizing: border-box !important;
}

.with_frm_style .wp-editor-container {
  border: none;
  border-top: 1px solid #dcdcde;
}

.wp-switch-editor:focus {
      box-shadow: none!important;
}

/* ── Repeater / sortable task rows ──────────────────────────────── */
.frm_style_test .frm_repeat_sec,
.frm_style_test .frm_repeat_inline {
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  padding: 14px 16px;
  margin-bottom: 8px;
  background: var(--gx-card-bg);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s;
}

.frm_style_test .frm_repeat_sec:hover,
.frm_style_test .frm_repeat_inline:hover {
  border-color: var(--gx-primary);
}

/* Add / Remove row buttons */
.frm_style_test .frm_add_form_row,
.frm_style_test .frm_button.frm_add_form_row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--gx-card-bg);
  border: 1px dashed var(--gx-primary);
  border-radius: var(--gx-radius-md);
  color: var(--gx-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s;
  margin-top: 8px;
}

.frm_style_test .frm_add_form_row:hover {
  background: rgba(57, 39, 143, 0.05);
}

.frm_style_test .frm_remove_form_row,
.frm_style_test .frm_button.frm_remove_form_row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--gx-radius-md);
  border: 1px solid var(--gx-card-border);
  background: var(--gx-card-bg);
  color: var(--gx-text-muted);
  cursor: pointer;
  font-size: 16px;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.frm_style_test .frm_remove_form_row:hover {
  border-color: var(--gx-danger);
  color: var(--gx-danger);
}

/* ── Validation / error states ───────────────────────────────────── */
.frm_style_test .frm_error_style,
.frm_style_test input.frm_error,
.frm_style_test select.frm_error,
.frm_style_test textarea.frm_error {
  border-color: var(--gx-danger) !important;
}

.frm_style_test .frm_error,
.frm_style_test .frm_error_style {
  font-size: 12px;
  color: var(--gx-danger);
  margin-top: 4px;
  display: block;
}

.frm_style_test .frm_form_field.frm_blank_field input,
.frm_style_test .frm_form_field.frm_blank_field select,
.frm_style_test .frm_form_field.frm_blank_field textarea {
  border-color: var(--gx-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}

/* ── Section divider / page break visual ─────────────────────────── */
.frm_style_test .frm_section_heading h3,
.frm_style_test .frm_section_heading .frm_section_heading_inner {
  font-size: 16px;
  font-weight: 600;
  color: var(--gx-text-primary);
  margin: 24px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gx-card-border);
}
/* Task-group headers inside Campaign Tasks Descriptions section.      */
/* Formidable renders these as conditional divider fields; we override */
/* the default teal/form-color to match the purple theme.             */
.frm_style_test .frm_page_num_2 .frm_section_heading h3,
.frm_style_test .frm_page_num_2 .frm_section_heading .frm_section_heading_inner {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gx-primary) !important;
  background: rgba(57, 39, 143, 0.07) !important;
  border: none !important;
  border-left: 3px solid var(--gx-primary) !important;
  border-bottom: none !important;
  border-radius: 0 var(--gx-radius-md) var(--gx-radius-md) 0 !important;
  padding: 8px 14px !important;
  margin: 20px 0 0 !important;
  text-transform: uppercase !important;
}

/* ── Description character counter (Formidable Pro) ──────────────── */
.frm_style_test .frm_counter {
  font-size: 11px;
  color: var(--gx-text-faint);
  text-align: right;
  display: block;
  margin-top: 4px;
}

/* ── Form-level notice / confirmation message ────────────────────── */
.frm_style_test .frm_message,
.frm_style_test .frm_error_style {
  padding: 14px 16px;
  border-radius: var(--gx-radius-md);
  font-size: 14px;
  margin-bottom: 16px;
}

.frm_style_test .frm_message {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid var(--gx-success);
  color: var(--gx-success);
}

/* ── Flatpickr date picker ───────────────────────────────────────── */
/* Scoped to .frm-datepicker (class Formidable adds to the calendar).
   Variables come from :root in gx-layout.css so they work here. */

.frm-datepicker {
  background: var(--gx-card-bg) !important;
  border: 1px solid var(--gx-card-border) !important;
  border-radius: var(--gx-card-radius) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  font-family: 'Poppins', sans-serif !important;
  overflow: hidden;
  padding: 0 !important;
}

/* Remove default arrow/caret */
.frm-datepicker::before,
.frm-datepicker::after {
  display: none !important;
}

/* ── Month header ── */
.frm-datepicker .flatpickr-months {
  background: var(--gx-primary) !important;
  padding: 6px 2px !important;
  align-items: center;
}

.frm-datepicker .flatpickr-month {
  background: transparent !important;
  color: #fff !important;
  height: 36px !important;
}

.frm-datepicker .flatpickr-current-month {
  font-size: 14px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  color: #fff !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* Month select */
.frm-datepicker .flatpickr-monthDropdown-months {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 2px 4px !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  min-height: unset !important;
  height: auto !important;
}

.frm-datepicker .flatpickr-monthDropdown-months option {
  background: var(--gx-primary) !important;
  color: #fff !important;
}

/* Year input */
.frm-datepicker .numInputWrapper {
  min-height: unset !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}

.frm-datepicker .numInputWrapper input.cur-year {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 2px 4px !important;
  width: 60px !important;
  outline: none !important;
  box-shadow: none !important;
  min-height: unset !important;
  height: auto !important;
  cursor: pointer;
}

.frm-datepicker .numInputWrapper .arrowUp,
.frm-datepicker .numInputWrapper .arrowDown {
  border-color: rgba(255,255,255,0.5) transparent !important;
  opacity: 0.7;
}

/* Nav arrows */
.frm-datepicker .flatpickr-prev-month,
.frm-datepicker .flatpickr-next-month {
  color: #fff !important;
  fill: #fff !important;
  padding: 8px 12px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.frm-datepicker .flatpickr-prev-month svg,
.frm-datepicker .flatpickr-next-month svg {
  fill: #fff !important;
}

.frm-datepicker .flatpickr-prev-month:hover,
.frm-datepicker .flatpickr-next-month:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

/* ── Weekday headers ── */
.frm-datepicker .flatpickr-weekdays {
  background: #F8FAFC !important;
  border-bottom: 1px solid var(--gx-card-border) !important;
  padding: 4px 0 !important;
}

.frm-datepicker .flatpickr-weekday {
  background: transparent !important;
  color: var(--gx-text-secondary, #64748B) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Days grid ── */
.frm-datepicker .flatpickr-days {
  border: none !important;
}

.frm-datepicker .dayContainer {
  padding: 6px !important;
}

.frm-datepicker .flatpickr-day {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gx-text-primary, #1E293B) !important;
  border: none !important;
  border-radius: 50% !important;
  max-width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 2px !important;
  transition: background-color 0.15s, color 0.15s;
}

.frm-datepicker .flatpickr-day:hover:not(.selected):not(.today) {
  background: rgba(57, 39, 143, 0.08) !important;
  color: var(--gx-primary) !important;
  border: none !important;
}

/* Today */
.frm-datepicker .flatpickr-day.today:not(.selected) {
  border: 2px solid var(--gx-primary) !important;
  color: var(--gx-primary) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

/* Selected */
.frm-datepicker .flatpickr-day.selected,
.frm-datepicker .flatpickr-day.selected:hover,
.frm-datepicker .flatpickr-day.startRange,
.frm-datepicker .flatpickr-day.endRange {
  background: var(--gx-primary) !important;
  border-color: var(--gx-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* Prev/next month overflow days */
.frm-datepicker .flatpickr-day.prevMonthDay,
.frm-datepicker .flatpickr-day.nextMonthDay {
  color: #CBD5E1 !important;
}

/* Disabled */
.frm-datepicker .flatpickr-day.disabled,
.frm-datepicker .flatpickr-day.disabled:hover {
  color: #CBD5E1 !important;
}

/* ── Grid layout — defer to Formidable's native 12-col grid ─────── */
/*
 * frm_grids.css already sets .frm_fields_container to repeat(12,1fr).
 * Fields with the "frm6" class get grid-column: span 6/span 6 (50%),
 * and "frm_first" forces grid-column-start: 1 to begin a new row.
 * All paired fields (425/424, 441/442, 431/430, 727/726, 432/433)
 * already carry these classes in their Formidable field_options — no
 * manual column overrides are needed here.
 * We only set gap and alignment.
 */

.frm_style_test .frm_fields_container {
  column-gap: 20px;
  align-items: start;
}

/* ── Select Apps for Campaign — platform tile cards (field 721) ──── */
/*
 * Layout per tile: [brand icon] [platform name] [checkbox on right]
 * ::before = icon (order 0, first in DOM → appears before text node)
 * text node = platform name (order 0, after ::before in DOM)
 * input = checkbox (order 3 + margin-left:auto → pushed to right edge)
 */

/* 5-equal-column grid → all platforms on one row */
#frm_field_721_container .frm_opt_container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 4px 0;
}

#frm_field_721_container .frm_checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  background: var(--gx-card-bg);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--gx-text-secondary);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  user-select: none;
}

/* Brand icon — first flex item via ::before */
#frm_field_721_container .frm_checkbox label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* Checkbox — restored and pushed to the right edge */
#frm_field_721_container input[type="checkbox"] {
  order: 3 !important;
  margin-left: auto !important;
  position: relative !important;
  opacity: 1 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  overflow: hidden !important;
  pointer-events: auto;
  flex-shrink: 0;
}

/* Clean SVG checkmark — replaces the rotated-border ::before from global rule */
#frm_field_721_container input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-size: 10px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#frm_field_721_container input[type="checkbox"]:checked::before,
#frm_field_721_container input[type="checkbox"]:checked::after {
  display: none !important;
  content: none !important;
}

/* Instagram — gradient rounded camera */
#frm_field_721_container .frm_checkbox:has(input[value="Instagram"]) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='ig' cx='30%25' cy='107%25' r='150%25'%3E%3Cstop offset='0' stop-color='%23fdf497'/%3E%3Cstop offset='.45' stop-color='%23fd5949'/%3E%3Cstop offset='.6' stop-color='%23d6249f'/%3E%3Cstop offset='.9' stop-color='%23285AEB'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='2' y='2' width='20' height='20' rx='6' fill='url(%23ig)'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.3' fill='white'/%3E%3C/svg%3E");
}

/* YouTube — red rectangle + white play */
#frm_field_721_container .frm_checkbox:has(input[value="Youtube"]) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF0000'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

/* Twitch — purple logo */
#frm_field_721_container .frm_checkbox:has(input[value="Twitch"]) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 2800'%3E%3Cpath fill='%239144FF' d='M500 0L0 500v1800h600v500l500-500h400l900-900V0H500zm1700 1300l-500 500h-400l-350 350v-350H500V300h1700v1000z'/%3E%3Cpath fill='%239144FF' d='M1700 700h200v600h-200zm-550 0h200v600h-200z'/%3E%3C/svg%3E");
}

/* Twitter / X — black X logo */
#frm_field_721_container .frm_checkbox:has(input[value="Twitter"]) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.849L1.579 2.25h7.099l4.259 5.631 4.907-5.631Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z'/%3E%3C/svg%3E");
}

/* TikTok — dark music-note logo */
#frm_field_721_container .frm_checkbox:has(input[value="TikTok"]) label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23010101'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

#frm_field_721_container .frm_checkbox label:hover {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.04);
}

/* Checked state — tile highlights, checkbox fills purple via global rule */
#frm_field_721_container .frm_checkbox label:has(input[type="checkbox"]:checked) {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.06);
  color: var(--gx-primary);
}

.frm_style_test.with_frm_style p.description, .frm_style_test.with_frm_style div.description, .frm_style_test.with_frm_style div.frm_description, .frm_style_test.with_frm_style .frm-show-form > div.frm_description {
	  margin: 0;
    padding: 0;
    line-height: initial;
    margin-top: 5px;
}

.frm_style_test.frm-datepicker.flatpickr-calendar .flatpickr-monthDropdown-months,
.frm_style_test.frm-datepicker.flatpickr-calendar .numInputWrapper,
.frm_style_test.frm-datepicker .ui-datepicker-title select.ui-datepicker-month,
.frm_style_test.frm-datepicker .ui-datepicker-title select.ui-datepicker-year {
    min-height: unset!important;
    width: 33%!important;
    padding: 4px 5px 5px!important;
    line-height: 14px!important;
    margin: 0!important;
}

.ui-datepicker td.ui-state-disabled .ui-state-default {
  color: #8a8a8a!important;
  opacity: 1!important;
}

/* ── Task card list (Step 2) ─────────────────────────────────────── */

/* Override default frm_opt_container flex when in task-list mode */
.frm_style_test .gx-task-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  flex-wrap: nowrap !important;
}

/* ── Task card (.frm_checkbox is the card) ───────────────────────── */
.gx-task-group {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  background: var(--gx-card-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
  cursor: default;
}

.gx-task-group:hover {
  border-color: #C7D2FE;
}

.gx-task-group.gx-task-checked {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.02);
}

.gx-task-group.gx-dragging {
  opacity: 0.5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.gx-task-group.gx-drag-over {
  border-color: var(--gx-primary);
  box-shadow: 0 0 0 2px rgba(57, 39, 143, 0.18);
}

/* ── Card header row ─────────────────────────────────────────────── */
.gx-task-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 52px;
}

/* Drag handle */
.gx-drag-handle {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: grab;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.gx-task-group:hover .gx-drag-handle {
  opacity: 1;
}

.gx-drag-handle:active {
  cursor: grabbing;
}

/* Checkbox inside card header — override float/margin from global rule */
.gx-task-group .gx-task-card-header input[type="checkbox"] {
  flex-shrink: 0 !important;
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

/* Use SVG background checkmark — prevents BuddyBoss ::before icon injection
   from rendering alongside our own pseudo-element in the checked state.    */
.gx-task-group input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-size: 11px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.gx-task-group input[type="checkbox"]::before,
.gx-task-group input[type="checkbox"]::after,
.gx-task-group input[type="checkbox"]:checked::before,
.gx-task-group input[type="checkbox"]:checked::after {
  display: none !important;
  content: none !important;
}

/* Task icon */
.gx-task-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Task name label */
.gx-task-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--gx-text-secondary);
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  line-height: 1.4;
  transition: color 0.15s;
}

.gx-task-checked .gx-task-name {
  color: var(--gx-text-primary);
  font-weight: 600;
}

/* Delete button */
.gx-task-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  flex-shrink: 0;
  background: none !important;
  border: none !important;
  border-radius: var(--gx-radius-md) !important;
  color: #CBD5E1 !important;
  cursor: pointer;
  padding: 0 !important;
  transition: color 0.15s, background-color 0.15s !important;
  box-shadow: none !important;
  line-height: 1 !important;
  font-size: inherit !important;
}

.gx-task-delete:hover {
  color: var(--gx-danger) !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* ── Task detail panels (desc / upload / points) ────────────────── */
/* Detail containers live in a sibling anchor div (.gx-details-anchor)  */
/* placed after the checkbox group container — never inside it.          */
/* The anchor is a flex container: desc + upload sit side-by-side when   */
/* an upload field exists; points always spans the full row.             */

/* When Formidable's conditional logic hides a category's checkbox       */
/* container (via jQuery .hide() → inline display:none), hide its        */
/* anchor div too — the anchor is a sibling so Formidable won't touch it */
[id^="frm_field_"][style*="display: none"] + .gx-details-anchor {
  display: none !important;
}

/* The JS-injected .gx-details-heading replaces the Formidable section
   heading fields that previously labelled the description area. Hide
   the Formidable ones so the heading appears only once.                 */
.frm_style_test .frm_page_num_2 .frm_section_heading {
  display: none !important;
}

.gx-details-anchor {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  align-items: flex-start;
}

/* "Campaign Tasks Descriptions" heading injected by JS as the first
   child of each anchor — styled to match the form's section headings. */
.gx-details-heading {
  flex: 0 0 100%;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.07);
  border-left: 3px solid var(--gx-primary);
  border-radius: 0 var(--gx-radius-md) var(--gx-radius-md) 0;
  padding: 8px 14px;
  margin-top: 10px;
  margin-bottom: 8px;
}

.gx-task-detail {
  border: 1px solid rgba(57, 39, 143, 0.18);
  border-radius: var(--gx-radius-md);
  background: rgba(57, 39, 143, 0.015);
  padding: 14px 16px !important;
  margin-bottom: 0 !important;
  margin-top: 6px !important;
}

/* Desc: full width by default; shrinks to 60% via :has() when upload
   immediately follows it in the same anchor. */
.gx-detail-desc {
  flex: 0 0 100%;
  margin-top: 12px !important;
  border-color: rgba(57, 39, 143, 0.25);
}

.gx-detail-desc:has(+ .gx-detail-upload) {
  flex: 3 1 0;
  min-width: 0;
}

/* Upload: 40% of the row when paired with desc; full-width otherwise. */
.gx-detail-upload {
  flex: 2 1 0;
  min-width: 0;
  margin-top: 6px !important;
}

/* When upload sits in the same flex row as desc, align their tops. */
.gx-detail-desc + .gx-detail-upload {
  margin-top: 12px !important;
}

.gx-detail-upload .frm_multi_upload {
  max-width: 100%!important;
}

/* Points spans the full row; margin-bottom + ::after create a visual
   divider before the next task's detail group. */
.gx-detail-points {
  flex: 0 0 100%;
  margin-top: 10px !important;
  margin-bottom: 40px !important;
  position: relative;
}

/* Horizontal rule separating consecutive task detail groups */
.gx-detail-points::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -28px;
  height: 2px;
  background: rgba(57, 39, 143, 0.65);
}

/* Points field is read-only — muted appearance */
.gx-detail-points input[type="number"][readonly],
.gx-detail-points input[type="text"][readonly] {
  background: #F8FAFC !important;
  color: var(--gx-text-muted) !important;
  cursor: default !important;
}

/* ── Platform / task icons (CSS data-URI) ────────────────────────── */

.gx-icon-yt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF0000'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.gx-icon-ig {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='igg' cx='30%25' cy='107%25' r='150%25'%3E%3Cstop offset='0' stop-color='%23fdf497'/%3E%3Cstop offset='.45' stop-color='%23fd5949'/%3E%3Cstop offset='.6' stop-color='%23d6249f'/%3E%3Cstop offset='.9' stop-color='%23285AEB'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='2' y='2' width='20' height='20' rx='6' fill='url(%23igg)'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.3' fill='white'/%3E%3C/svg%3E");
}

.gx-icon-tw {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239144FF'%3E%3Cpath d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z'/%3E%3C/svg%3E");
}

.gx-icon-fb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877F2'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.gx-icon-x {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.849L1.579 2.25h7.099l4.259 5.631 4.907-5.631zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z'/%3E%3C/svg%3E");
}

.gx-icon-tk {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23010101'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

.gx-icon-hash {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E");
}

.gx-icon-video {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='23 7 16 12 23 17 23 7'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2'/%3E%3C/svg%3E");
}

.gx-icon-reel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC4899' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='4'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3Ccircle cx='17' cy='7' r='1'/%3E%3Ccircle cx='7' cy='17' r='1'/%3E%3Ccircle cx='17' cy='17' r='1'/%3E%3C/svg%3E");
}

.gx-icon-mic {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 01-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E");
}

.gx-icon-mega {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l19-9-9 19-2-8-8-2z'/%3E%3C/svg%3E");
}

.gx-icon-star {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F59E0B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

.gx-icon-trend {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

.gx-icon-tag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}

.gx-icon-task {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════════
   STEP 3 — REWARDS & BUDGET
   Formidable's frm_fields_container CSS Grid provides the 2-column
   layout via frm6 classes (span 6 / span 6 = 50% / 50%).
   No custom wrapper rows are added — only styling is applied here.
   ════════════════════════════════════════════════════════════════════ */

/* ── Reward Type — card-style radio buttons (field 722) ───────────── */
#frm_field_722_container .frm_opt_container {
  flex-direction: column !important;
  gap: 10px !important;
}

#frm_field_722_container .frm_radio {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

#frm_field_722_container .frm_radio:has(input[type="radio"]:checked) {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.06);
}

#frm_field_722_container .frm_radio input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0;
  accent-color: var(--gx-primary);
  cursor: pointer;
  margin: 0 !important;
  margin-right: 5px !important;
}

#frm_field_722_container .frm_radio label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gx-text-primary) !important;
  cursor: pointer;
  margin: 0 !important;
  min-height: unset !important;
}

#frm_field_722_container .frm_radio:has(input[type="radio"]:checked) label {
  color: var(--gx-primary) !important;
  font-weight: 600 !important;
}

/* ── Input with inline unit badge (Rewards per Creator field 726) ─── */
.gx-unit-wrap {
  position: relative;
}

.gx-unit-wrap input {
  padding-right: 82px !important;
}

.gx-rewards-unit {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  background: var(--gx-card-bg);
  border-left: 1px solid var(--gx-card-border);
  border-top: 1px solid var(--gx-card-border);
  border-radius: 0 calc(var(--gx-radius-md) - 1px) calc(var(--gx-radius-md) - 1px) 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--gx-text-secondary);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.gx-rewards-unit::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--gx-text-muted);
  margin-left: 2px;
}

/* Add "(Optional)" after Budget label */
#frm_field_727_container > .frm_primary_label::after {
  content: ' (Optional)';
  font-weight: 400;
  color: var(--gx-text-faint);
}

/* ── No budget cap toggle inline layout (field 728) ──────────────── */
#frm_field_728_container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-direction: row-reverse;
}

#frm_field_728_container .frm_primary_label {
  margin-bottom: 0 !important;
  font-size: 13px;
  flex: 1;
  padding-bottom: 0;
}

/* ── Estimated rewards summary card ──────────────────────────────── */
/* Appended inside #frm_field_726_container, so it sits below the
   Rewards per Creator input in the same right-column grid cell.     */
.gx-rewards-summary {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(57, 39, 143, 0.06);
  border: 1px solid rgba(57, 39, 143, 0.15);
  border-radius: var(--gx-card-radius);
  padding: 16px 20px;
  margin-top: 12px;
}

.gx-rewards-summary__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(57, 39, 143, 0.10);
  border-radius: var(--gx-radius-full);
  color: var(--gx-primary);
  flex-shrink: 0;
  margin-right: 20px;
}

.gx-rewards-summary__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.gx-rewards-summary__divider {
  width: 1px;
  height: 40px;
  background: rgba(57, 39, 143, 0.15);
  margin: 0 24px;
  flex-shrink: 0;
}

.gx-rewards-summary__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gx-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gx-rewards-summary__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gx-text-primary);
  line-height: 1;
}

.gx-rewards-summary__value--total {
  color: var(--gx-primary);
}

/* ── Creators will earn… info notice ─────────────────────────────── */
/* Injected after field 728 as a direct child of frm_fields_container.
   Defaults to span 12 (full width) per Formidable's frm_grids.css.  */
.gx-rewards-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(57, 39, 143, 0.05);
  border: 1px solid rgba(57, 39, 143, 0.15);
  border-radius: var(--gx-radius-md);
  padding: 14px 18px;
  margin-top: 4px;
}

.gx-rewards-notice__icon {
  color: var(--gx-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.gx-rewards-notice__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gx-rewards-notice__primary {
  font-size: 14px;
  font-weight: 500;
  color: var(--gx-text-primary);
  margin: 0;
  line-height: 1.5;
}

.gx-rewards-notice__primary strong {
  color: var(--gx-primary);
  font-weight: 700;
}

.gx-rewards-notice__secondary {
  font-size: 12px;
  color: var(--gx-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════
   STEP 4 — AUDIENCE & ACCESS
   Layout (Formidable frm6/frm12 grid — no DOM restructuring):
     [.gx-step4-section-label "Audience Filters", full width, injected]
     To Qualify: Age (432, frm6)  | To Qualify: By Following (433, frm6)
     Badge Requirements (730, full width — 5-col tile grid like field 721)
     Account Region (731, frm6)   | Content Category (732, frm6)
     Language (733, full width)
     ── purple separator via #frm_field_856_container border-top ──
     Access Settings heading (856, full width)
     Campaign Visibility (734, full width — vertical stacked cards)
   ════════════════════════════════════════════════════════════════════ */

/* ── "Audience Filters" section label (injected before field 432) ─── */
.gx-step4-section-label, #frm_field_856_container h3 {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.07);
  border-left: 3px solid var(--gx-primary);
  border-radius: 0 var(--gx-radius-md) var(--gx-radius-md) 0;
  padding: 8px 14px;
  margin-bottom: 20px;
}

/* ── To Qualify: Age — vertical card radios (432) ──────────────────
   Matches By Following (433) exactly for visual consistency.         */
#frm_field_432_container .frm_opt_container,
#frm_field_433_container .frm_opt_container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#frm_field_432_container .frm_radio,
#frm_field_433_container .frm_radio {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

#frm_field_432_container .frm_radio:has(input[type="radio"]:checked),
#frm_field_433_container .frm_radio:has(input[type="radio"]:checked) {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.06);
}

#frm_field_432_container .frm_radio input[type="radio"],
#frm_field_433_container .frm_radio input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0;
  accent-color: var(--gx-primary);
  cursor: pointer;
  margin: 0 6px 0 0 !important;
}

#frm_field_432_container .frm_radio label,
#frm_field_433_container .frm_radio label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gx-text-primary) !important;
  cursor: pointer;
  margin: 0 !important;
  min-height: unset !important;
}

#frm_field_432_container .frm_radio:has(input[type="radio"]:checked) label,
#frm_field_433_container .frm_radio:has(input[type="radio"]:checked) label {
  color: var(--gx-primary) !important;
  font-weight: 600 !important;
}

/* ── Badge Requirements — 5-column tile grid (field 730) ────────────
   Mirrors the "Select Apps for Campaign" (field 721) tile pattern:
   icon (injected via JS inside label) + badge name + checkbox on right.
   Each tile stretches to fill its column; all 5 tiles fill the row.   */
#frm_field_730_container .frm_opt_container {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 4px 0;
}

#frm_field_730_container .frm_checkbox {
  margin: 0 !important;
}

#frm_field_730_container .frm_checkbox label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border: 1.5px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  background: var(--gx-card-bg);
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gx-text-secondary) !important;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  user-select: none;
  min-height: unset !important;
  margin: 0 !important;
}

/* Checkbox pushed to right edge — mirrors field 721 exactly:
   overflow:hidden clips the native UI; background-image supplies the
   white checkmark on checked; ::before/::after suppressed to prevent
   the global theme checkmark pseudo-element from rendering on top.    */
#frm_field_730_container input[type="checkbox"] {
  order: 3 !important;
  margin-left: auto !important;
  position: relative !important;
  opacity: 1 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  overflow: hidden !important;
  pointer-events: auto;
  flex-shrink: 0;
  accent-color: var(--gx-primary);
}

#frm_field_730_container input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-size: 10px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#frm_field_730_container input[type="checkbox"]:checked::before,
#frm_field_730_container input[type="checkbox"]:checked::after {
  display: none !important;
  content: none !important;
}

#frm_field_730_container .frm_checkbox label:hover {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.04);
}

/* Selected tile — same active pattern as field 721 */
#frm_field_730_container .frm_checkbox label:has(input[type="checkbox"]:checked) {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.06);
  color: var(--gx-primary) !important;
}

/* Badge icon (injected inside label via JS) */
.gx-badge-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--gx-text-muted);
  transition: color 0.15s;
  order: 0;
}

#frm_field_730_container .frm_checkbox label:has(input[type="checkbox"]:checked) .gx-badge-icon {
  color: var(--gx-primary);
}

/* ── Access Settings section divider + heading (field 856) ──────────
   border-top reuses the same rgba(57,39,143,0.65) purple as
   gx-step3-divider and gx-detail-points::after for consistency.      */
#frm_field_856_container {
  margin-top: 20px !important;
}

/* ── Campaign Visibility — vertical stacked full-width cards (734) ──
   Each card occupies the full container width. flex-wrap drops
   .gx-vis-desc to its own line, indented past the radio button.      */
#frm_field_734_container .frm_opt_container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#frm_field_734_container .frm_radio {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 12px;
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

#frm_field_734_container .frm_radio:has(input[type="radio"]:checked) {
  border-color: var(--gx-primary);
  background: rgba(57, 39, 143, 0.06);
}

#frm_field_734_container .frm_radio input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0;
  accent-color: var(--gx-primary);
  cursor: pointer;
  margin: 0 6px 0 0 !important;
}

#frm_field_734_container .frm_radio label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gx-text-primary) !important;
  cursor: pointer;
  margin: 0 !important;
  min-height: unset !important;
  flex: 1;
}

#frm_field_734_container .frm_radio:has(input[type="radio"]:checked) label {
  color: var(--gx-primary) !important;
  font-weight: 600 !important;
}

/* Description — pushed to its own row via flex-basis: 100% */
.gx-vis-desc {
  flex: 0 0 100%;
  font-size: 12px;
  font-weight: 400;
  color: var(--gx-text-muted);
  margin-top: 3px;
  margin-left: 27px; /* indent past 18px radio + 6px margin-right + 12px gap */
  line-height: 1.45;
}

#frm_field_734_container .frm_radio:has(input[type="radio"]:checked) .gx-vis-desc {
  color: rgba(57, 39, 143, 0.65);
}

/* ════════════════════════════════════════════════════════════════════
   STEP 5 — REVIEW & LAUNCH
   #gx-step5-summary is injected before the step5Anchor field container by JS.
   As a direct .frm_fields_container child it inherits grid-column:1/-1
   (full-width) from Formidable's frm_grids.css.

   Layout:  [left 2-col card grid  |  right status panel]
   The step5Anchor (divider) and step5End (end_divider) fields are structural-only
   and safely hidden — they carry no form data.  Their field IDs are resolved
   dynamically in PHP and injected via wp_add_inline_style(), so no numeric
   Formidable field IDs appear in this file.
   ════════════════════════════════════════════════════════════════════ */

.gx-step5-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 20px;
  align-items: start;
  margin-bottom: 4px;
}

/* ── Panel title — spans both columns ───────────────────────────── */
.gx-s5-title {
  grid-column: 1 / -1;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gx-text-primary, #1e1b3a) !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
}

/* ── Left card grid (2 equal columns) ───────────────────────────── */
.gx-s5-left { min-width: 0; }

.gx-s5-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ── Summary card ───────────────────────────────────────────────── */
.gx-s5-card {
  background: var(--gx-card-bg);
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gx-s5-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gx-card-border);
}

.gx-s5-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gx-text-muted);
}

.gx-s5-edit {
  font-size: 12px;
  font-weight: 600;
  color: var(--gx-primary) !important;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.gx-s5-edit:hover { opacity: 0.65; }

.gx-s5-card-body {
  font-size: 13px;
  color: var(--gx-text-secondary);
  line-height: 1.55;
}
.gx-s5-card-body p { margin: 0; }

.gx-s5-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--gx-text-primary, #1e1b3a) !important;
}

.gx-s5-date {
  font-size: 12px !important;
  color: var(--gx-text-muted) !important;
  margin-top: 2px !important;
}

.gx-s5-reward-val {
  font-weight: 600 !important;
  color: var(--gx-text-primary, #1e1b3a) !important;
}

.gx-s5-empty {
  color: var(--gx-text-muted);
  font-style: italic;
  font-size: 12px;
}

/* ── Platform chips ──────────────────────────────────────────────── */
.gx-s5-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gx-s5-plat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gx-card-bg);
  border: 1px solid var(--gx-card-border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.gx-s5-plat svg { display: block; }

/* ── Right status panel ──────────────────────────────────────────── */
.gx-s5-right { position: sticky; top: 20px; }

.gx-s5-ready {
  background: var(--gx-card-bg);
  border: 1px solid var(--gx-card-border);
  border-radius: var(--gx-radius-md);
  padding: 20px;
}

.gx-s5-ready-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gx-text-primary, #1e1b3a) !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

.gx-s5-checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gx-s5-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.gx-s5-check-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.gx-s5-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--gx-card-border);
  border-radius: 50%;
}

.gx-s5-check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gx-s5-check-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gx-text-primary, #1e1b3a);
  line-height: 1.3;
}

.gx-s5-check-status {
  font-size: 11px;
  color: var(--gx-text-muted);
}

.gx-s5-check--done .gx-s5-check-status {
  color: #22c55e;
  font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:992px){
   /* Step 3 responsive */
  .gx-rewards-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .gx-rewards-summary__divider {
    width: 100%;
    height: 1px;
    margin: 4px 0;
  }
      .footer-bottom-right, .footer-copyright-wrap {
        margin-top:0px !important;
    }
}
@media (max-width: 640px) {
  .frm_style_test.frm_forms {
    padding: 20px 16px;
  }

  /* Stack frm6 (half-width) fields to full-width on mobile */
  .frm_style_test .frm_form_field.frm6,
  .frm_style_test .frm_submit.frm6 {
    grid-column: 1 / span 12 !important;
  }

  #frm_field_721_container .frm_opt_container {
    grid-template-columns: repeat(2, 1fr);
  }

  .frm_style_test .frm_rootline_title {
    display: none;
  }

  .frm_style_test ul.frm_page_bar input[type="button"] {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  

  /* Step 5: right group stacks (Launch Campaign top, Cancel below), Previous last */

div#frm_field_728_container{
  margin-bottom:10px !important;
}

  /* Step 5 responsive */
  .gx-step5-summary {
    grid-template-columns: 1fr;
  }
  .gx-s5-right { position: static; }
  .gx-s5-grid  { grid-template-columns: 1fr; }

 
  .frm_style_test .frm_rootline_title{
    white-space: normal;
  }
  .frm_style_test.with_frm_style .frm_compact .frm_dropzone.dz-clickable .dz-message, .frm_style_test.with_frm_style .frm-edit-page-btn, .frm_style_test.with_frm_style input[type=submit], .frm_style_test.with_frm_style .frm_submit input[type=button], .frm_style_test.with_frm_style .frm_submit button, .frm_form_submit_style{
    margin:0px;
  }
}