/* MindFlex form redesign (v2) — enqueued from Divi-child/functions.php */
/* Scoped to Gravity Forms #10 (home/sidebar) and #21 (popup). */
/* build: 1523.3 — popup layout relies on this file; version bumped via functions.php enqueue. */
/* BEGIN mf-form-redesign */

/* ---- Vertical rhythm fixes (sidebar #10 only) ----
   The theme floats each field's input so it hangs into the next field's box.
   These rules are for the sidebar float layout; the popup uses CSS grid and
   gets its spacing from the popmake block below. */
#gform_wrapper_10 .mf-lesson-mode .gfield_label{
  margin-top:16px;
}
#gform_wrapper_10 li#field_10_53:not([style*="none"]) ~ li#field_10_26{
  margin-top:-7px;
}
/* when Lesson Location is hidden (Online mode) the Level field follows the
   segmented bar directly - tighten its default margin to keep the same rhythm */
#gform_wrapper_10 li#field_10_53[style*="none"] ~ li#field_10_26{
  margin-top:-4px;
}

/* ---- New fields are always full-width rows ----
   GF legacy lays .medium fields out 2-across at some widths (Name | Mobile);
   the popup and tablet layouts were pulling the new fields into that grid,
   making them float half-width and overlap. Force one-per-row. */
#gform_wrapper_10 li.gfield.mf-lesson-mode,
#gform_wrapper_10 li.gfield.mf-lesson-location,
#gform_wrapper_10 li.gfield.mf-stream,
#gform_wrapper_10 li.gfield.mf-subjects,
#gform_wrapper_21 li.gfield.mf-lesson-mode,
#gform_wrapper_21 li.gfield.mf-lesson-location,
#gform_wrapper_21 li.gfield.mf-stream,
#gform_wrapper_21 li.gfield.mf-subjects{
  width:100% !important;
  float:none !important;
  clear:both;
  grid-column:1 / -1; /* popup lays fields in a 2-column grid - span it */
}

/* ---- Lesson Mode: 3-segment horizontal bar ---- */
#gform_wrapper_10 .mf-lesson-mode .gfield_radio,
#gform_wrapper_21 .mf-lesson-mode .gfield_radio{
  display:flex;
  gap:0;
  background:#EEEEEE;
  border-radius:5px;
  padding:3px;
  margin:0;
  list-style:none;
  width:100%;
  box-sizing:border-box;
}
#gform_wrapper_10 .mf-lesson-mode .gchoice,
#gform_wrapper_21 .mf-lesson-mode .gchoice{
  flex:1 1 0;  /* equal thirds */
  margin:0;
  padding:0;
  text-align:center;
  position:relative;
  min-width:0;
}
/* Hide the native radio dot but keep it in the DOM and keyboard-focusable */
#gform_wrapper_10 .mf-lesson-mode .gchoice input[type="radio"],
#gform_wrapper_21 .mf-lesson-mode .gchoice input[type="radio"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none;
}
#gform_wrapper_10 .mf-lesson-mode .gchoice label,
#gform_wrapper_21 .mf-lesson-mode .gchoice label{
  display:block;
  margin:0 !important;
  width:100%;
  max-width:100% !important;
  box-sizing:border-box;
  padding:9px 1px;
  border-radius:4px;
  font-family:'Nunito',sans-serif;
  font-size:11px; /* fits "Open to Both" in equal thirds at the 278px sidebar bar */
  font-weight:700;
  line-height:1.2;
  color:#555555;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
  white-space:nowrap;
  overflow:hidden;
}
#gform_wrapper_10 .mf-lesson-mode .gchoice input[type="radio"]:checked + label{
  background:#FF9000;
  color:#ffffff;
}
#gform_wrapper_10 .mf-lesson-mode .gchoice input[type="radio"]:focus + label{
  outline:2px solid #FF9000;
  outline-offset:2px;
}
/* Form #21 is popup-only; on the orange panel use brand teal, not sidebar orange */
#gform_wrapper_21 .mf-lesson-mode .gchoice input[type="radio"]:checked + label,
#gform_wrapper_21 .mf-stream .gchoice input[type="radio"]:checked + label{
  background:#00C6B9 !important;
  color:#ffffff !important;
}
#gform_wrapper_21 .mf-lesson-mode .gchoice input[type="radio"]:focus + label,
#gform_wrapper_21 .mf-stream .gchoice input[type="radio"]:focus + label{
  outline:2px solid #00C6B9;
  outline-offset:2px;
}

/* ---- Stream: rounded pills ---- */
#gform_wrapper_10 .mf-stream .gfield_radio,
#gform_wrapper_21 .mf-stream .gfield_radio{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  justify-content:flex-start; /* pills left-aligned; text stays centred within each pill */
}
#gform_wrapper_10 .mf-stream .gchoice,
#gform_wrapper_21 .mf-stream .gchoice{
  margin:0;
  padding:0;
  position:relative;
}
#gform_wrapper_10 .mf-stream .gchoice input[type="radio"],
#gform_wrapper_21 .mf-stream .gchoice input[type="radio"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none;
}
#gform_wrapper_10 .mf-stream .gchoice label,
#gform_wrapper_21 .mf-stream .gchoice label{
  display:inline-block;
  margin:0 !important;
  /* GF legacy forces radio labels to width:85% with stray alignment -
     keep the oval content-sized and its text dead-centre */
  width:auto !important;
  max-width:none !important;
  text-align:center !important;
  text-indent:0 !important;
  padding:7px 20px;
  border-radius:999px;
  background:#EEEEEE;
  color:#555555;
  font-family:'Nunito',sans-serif;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
#gform_wrapper_10 .mf-stream .gchoice input[type="radio"]:checked + label{
  background:#FF9000;
  color:#ffffff;
}
#gform_wrapper_10 .mf-stream .gchoice input[type="radio"]:focus + label{
  outline:2px solid #FF9000;
  outline-offset:2px;
}

/* ---- Lesson Location: force full width ----
   GF legacy sizes .medium inputs at calc(50% - 8px); the site's width:100%
   override only targets #gform_fields_10, so the popup's Location input
   rendered half-length (and looked broken on load / after Lesson Mode toggles) */
#gform_wrapper_10 .mf-lesson-location .ginput_container,
#gform_wrapper_10 .mf-lesson-location input,
#gform_wrapper_21 .mf-lesson-location .ginput_container,
#gform_wrapper_21 .mf-lesson-location input{
  width:100% !important;
  box-sizing:border-box;
}

/* ---- Subjects: select2 multiselect, matched to the site's grey borderless fields ---- */
#gform_wrapper_10 .mf-subjects .ginput_container,
#gform_wrapper_21 .mf-subjects .ginput_container,
#gform_wrapper_10 .mf-subjects .select2-container,
#gform_wrapper_21 .mf-subjects .select2-container{
  width:100% !important;
}
#gform_wrapper_10 .mf-subjects .select2-container .select2-selection--multiple,
#gform_wrapper_21 .mf-subjects .select2-container .select2-selection--multiple{
  background:#EEEEEE;
  border:0;
  border-radius:5px;
  min-height:40px;
  padding:2px 8px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
#gform_wrapper_10 .mf-subjects .select2-selection--multiple .select2-selection__rendered,
#gform_wrapper_21 .mf-subjects .select2-selection--multiple .select2-selection__rendered{
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  flex:0 1 auto;
}
#gform_wrapper_10 .mf-subjects .select2-search--inline,
#gform_wrapper_21 .mf-subjects .select2-search--inline{
  margin:0;
  flex:1 1 60px;
}
#gform_wrapper_10 .mf-subjects .select2-search--inline .select2-search__field,
#gform_wrapper_21 .mf-subjects .select2-search--inline .select2-search__field{
  margin:0;
  height:34px;
  width:100% !important;
  min-width:60px;
  font-family:'Nunito',sans-serif;
  font-size:14px;
  color:#000000;
}
#gform_wrapper_10 .mf-subjects .select2-selection__choice{
  background:#FF9000;
  border:0;
  border-radius:4px;
  color:#ffffff;
  /* the site's mobile CSS turns tags into fixed-width 178px blocks that
     stack and shove the page down - force compact content-sized tags */
  width:auto !important;
  max-width:100%;
  height:auto !important;
  margin:2px 4px 2px 0 !important;
  padding:2px 8px !important;
  font-family:'Nunito',sans-serif;
  font-size:13px;
  font-weight:700;
  box-sizing:border-box;
}
#gform_wrapper_21 .mf-subjects .select2-selection__choice{
  background:#00C6B9 !important;
  border:0;
  border-radius:4px;
  color:#ffffff;
  width:auto !important;
  max-width:100%;
  height:auto !important;
  margin:2px 4px 2px 0 !important;
  padding:2px 8px !important;
  font-family:'Nunito',sans-serif;
  font-size:13px;
  font-weight:700;
  box-sizing:border-box;
}
#gform_wrapper_10 .mf-subjects .select2-selection__choice__remove,
#gform_wrapper_21 .mf-subjects .select2-selection__choice__remove{
  color:#ffffff;
  background:transparent;
  border:0;
  font-weight:700;
}
#gform_wrapper_10 .mf-subjects .select2-selection__choice__display,
#gform_wrapper_21 .mf-subjects .select2-selection__choice__display{
  color:#ffffff;
}
#gform_wrapper_10 .mf-subjects .select2-container--focus .select2-selection--multiple{
  box-shadow:0 0 0 2px #FF9000;
}
#gform_wrapper_21 .mf-subjects .select2-container--focus .select2-selection--multiple{
  box-shadow:0 0 0 2px #00C6B9;
}
#gform_wrapper_10 .mf-subjects .gfield_description,
#gform_wrapper_21 .mf-subjects .gfield_description{
  font-size:12px;
  padding-top:4px;
  font-family:'Nunito',sans-serif;
}
#gform_wrapper_10 .mf-subjects .gfield_description{
  color:#777777;
}
#gform_wrapper_21 .mf-subjects .gfield_description{
  color:#ffffff;
}

/* ---- Popup overrides (prod #24939, staging #24399) ----
        Popup Maker lays fields in a CSS grid, so the sidebar's float-cascade
        seam corrections don't apply there - neutralize them inside the popup ---- */
:is(#popmake-24939, #popmake-24399) .mf-lesson-mode .gfield_label{
  margin-top:0;
}
/* ---- Popup scrollability ----
   Conditional fields (stream/subjects) can make the popup taller than the
   screen with no way to reach the lower fields, especially on mobile.
   Cap the popup to the viewport and let its content scroll vertically only.
   Do not force height:auto — the header block is absolutely positioned and
   the popmake needs PUM's measured height to remain visible. */
:is(#popmake-24939, #popmake-24399){
  left:50% !important;
  right:auto !important;
  margin-left:0 !important;
  margin-right:0 !important;
  transform:translateX(-50%);
  max-height:95vh;
  overflow:visible !important;
}
/* scroll the whole popup panel (header art + form), not just the orange block */
:is(#popmake-24939, #popmake-24399) .pum-content,
:is(#popmake-24939, #popmake-24399) .popmake-content{
  position:relative;
  max-height:88vh;
  overflow-y:auto;
  overflow-x:visible;
  -webkit-overflow-scrolling:touch;
  border-radius:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
:is(#popmake-24939, #popmake-24399) .pum-content::-webkit-scrollbar,
:is(#popmake-24939, #popmake-24399) .popmake-content::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}
html.pum-open,
html.pum-open body{
  overflow-x:hidden !important;
}
:is(#popmake-24939, #popmake-24399) #popup_form_container{
  display:block;            /* it ships as display:table, which ignores max-height */
  max-height:none;
  overflow:visible;
}
/* Production uses display:table on #popup_form_container, which adds ~20px
   more space before the form than display:block. Match prod's ~94px gap below
   the 210px teal header block; flow-root keeps the bullet list margin contained. */
:is(#popmake-24939, #popmake-24399) #popup_header{
  position:relative;
  display:flow-root;
  z-index:3;
}
:is(#popmake-24939, #popmake-24399) #popup_header .popup-header-title{
  z-index:5 !important;
}
:is(#popmake-24939, #popmake-24399) #popup_header .popup-header-title strong{
  font-weight:700;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
:is(#popmake-24939, #popmake-24399) #gform_wrapper_21{
  margin-top:36px;
}
/* Bullet list must stack above the absolute teal block (z-index:1) and tutor
   photo (z-index:2). Without this, display:block on the scroll container lets
   #popup_header_landing paint over the first "100% Free…" line on mobile. */
:is(#popmake-24939, #popmake-24399) #popup_header ul{
  position:relative;
  z-index:4;
  margin-top:200px !important;
}
@media only screen and (max-width:640px){
  :is(#popmake-24939, #popmake-24399) .pum-content,
  :is(#popmake-24939, #popmake-24399) .popmake-content{
    max-height:85vh;
  }
  :is(#popmake-24939, #popmake-24399) #popup_header ul{
    margin-top:220px !important;
    padding-top:10px;
  }
}
/* subject-field labels on one line in the roomy popup/desktop layouts */
@media only screen and (min-width:641px){
  #gform_wrapper_10 .mf-subjects .gfield_label,
  #gform_wrapper_21 .mf-subjects .gfield_label{
    white-space:nowrap;
    width:auto !important;
    max-width:none !important;
  }
}
/* breathing room above the "Able To Select Multiple Subjects" hint */
#gform_wrapper_10 .mf-subjects .gfield_description,
#gform_wrapper_21 .mf-subjects .gfield_description{
  margin-top:8px;
}
@media only screen and (max-width:640px){
  :is(#popmake-24939, #popmake-24399){
    width:94vw !important;   /* the fixed 560px popup overflows phone screens */
    max-width:560px;
  }
}
:is(#popmake-24939, #popmake-24399) li#field_21_53:not([style*="none"]) ~ li#field_21_26,
:is(#popmake-24939, #popmake-24399) li#field_21_53[style*="none"] ~ li#field_21_26{
  margin-top:0;
}
/* Popup form uses CSS grid (functions.css), not sidebar floats - replace the
   global per-field margin-top with even row-gap so rows align cleanly */
:is(#popmake-24939, #popmake-24399) #gform_fields_21{
  row-gap:14px;
}
:is(#popmake-24939, #popmake-24399) #gform_fields_21 > li.gfield{
  margin-top:0 !important;
}

/* ---- Responsive segment font: keep equal-width thirds fitting at every
        bar width. Mobile bar ~298px+ affords 12px; tablet sidebar ~236px
        needs 10px; the 409px popup bar affords 13px ---- */
@media only screen and (max-width:640px){
  #gform_wrapper_10 .mf-lesson-mode .gchoice label,
  #gform_wrapper_21 .mf-lesson-mode .gchoice label{
    font-size:12px;
  }
}
@media only screen and (min-width:641px) and (max-width:980px){
  #gform_wrapper_10 .mf-lesson-mode .gchoice label,
  #gform_wrapper_21 .mf-lesson-mode .gchoice label{
    font-size:10px;
    padding:9px 0;
  }
}
:is(#popmake-24939, #popmake-24399) .mf-lesson-mode .gchoice label{
  font-size:13px !important;
}

/* ---- Select2 dropdown scroll (forms #10, #14, #21) ----
   Long subject/level lists must scroll inside the dropdown on desktop and touch
   devices. Do not set overflow:hidden on .select2-results or .select2-dropdown
   wrappers — that blocks the inner .select2-results__options scroller. */
.select2-container--default .select2-results > .select2-results__options{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  max-height:200px;
}

/* ---- Popup Select2 dropdown (dropdown is appended to body; scope form #21 by result list id) ----
   Site default highlight is orange (#ff9000) which disappears on the orange popup panel. */
html.pum-open .select2-dropdown:has([id^="select2-input_21_"][id$="-results"]){
  border-bottom-left-radius:15px !important;
  border-bottom-right-radius:15px !important;
}
html.pum-open [id^="select2-input_21_"][id$="-results"] .select2-results__options{
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
}
html.pum-open [id^="select2-input_21_"][id$="-results"] .select2-results__option--highlighted,
html.pum-open [id^="select2-input_21_"][id$="-results"] .select2-results__option--selected{
  background-color:#00C6B9 !important;
  color:#ffffff !important;
}

/* ---- Kill the first-load flash of conditional fields ----
   GF renders conditionally-hidden fields VISIBLE and only hides them once
   its JS runs, so Stream / all subject boxes / State Level / Others flash
   on load. Pre-hide exactly those fields; GF's conditional logic sets
   inline display styles on every one of them at init, and inline styles
   override this rule - so show/hide behaviour is unchanged.
   (Deliberately NOT hidden: Lesson Location - visible by default - and
   the Student 2/3 level fields, whose initial state varies.) */
#field_10_54,#field_10_55,#field_10_56,#field_10_57,#field_10_58,#field_10_59,#field_10_60,#field_10_61,
#field_10_62,#field_10_63,#field_10_64,#field_10_65,#field_10_66,#field_10_67,#field_10_68,#field_10_69,
#field_10_70,#field_10_71,#field_10_72,#field_10_73,#field_10_74,#field_10_75,#field_10_76,#field_10_77,
#field_10_32,#field_10_33,#field_10_34,#field_10_37,#field_10_38,#field_10_39,
#field_21_54,#field_21_55,#field_21_56,#field_21_57,#field_21_58,#field_21_59,#field_21_60,#field_21_61,
#field_21_62,#field_21_63,#field_21_64,#field_21_65,#field_21_66,#field_21_67,#field_21_68,#field_21_69,
#field_21_70,#field_21_71,#field_21_72,#field_21_73,#field_21_74,#field_21_75,#field_21_76,#field_21_77,
#field_21_32,#field_21_33,#field_21_34,#field_21_37,#field_21_38,#field_21_39{
  display:none;
}

/* ---- Form 14 (/free-request-for-tutor) polish - CSS only, form untouched ---- */
/* mobile: the subject multiselect box keeps a tall empty area under the tags */
@media only screen and (max-width:640px){
  #gform_wrapper_14 .select2-container .select2-selection--multiple{
    height:auto !important;
    min-height:40px !important;
  }
}
/* Tutor Type table: centre the checkbox, name and tooltip vertically in each row */
#gform_wrapper_14 .ei_rate td{
  vertical-align:middle !important;
}
#gform_wrapper_14 .ei_rate td input[type="checkbox"],
#gform_wrapper_14 .ei_rate .rate-type-tutor,
#gform_wrapper_14 .ei_rate .tooltip{
  display:inline-block;
  vertical-align:middle;
}

/* END mf-form-redesign */