/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 /* Switch slider built from two radios (values "Yes" / "No") */
.gfield--type-radio.as-switch .gfield_radio {
  --w: 56px;
  --h: 28px;
  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: 9999px;
  background: #e5e7eb;
  transition: background 0.2s ease;
}

/* Keep radios accessible but visually hidden */
.gfield--type-radio.as-switch .gfield-choice-input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Place each choice on half the track so clicks go to the right input */
.gfield--type-radio.as-switch .gchoice {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}
.gfield--type-radio.as-switch .gchoice:nth-child(1) {
  left: 0;
}
.gfield--type-radio.as-switch .gchoice:nth-child(2) {
  right: 0;
}

.gfield--type-radio.as-switch .gchoice > label {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  cursor: pointer;
  font-size: 0;/* hide "Yes/No" text visually, keeps it for SRs */
  z-index: 2; 
}

/* The knob */
.gfield--type-radio.as-switch .gfield_radio::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: calc(var(--h) - 4px);
  height: calc(var(--h) - 4px);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

/* Gravity Forms radio → slider switch; add "as-switch" to the field's CSS Class Name */
.gfield--type-radio.as-switch .ginput_container_radio {
  display: inline-block;
}

/* The track */
.gfield--type-radio.as-switch .gfield_radio {
  --w: 56px;
  --h: 28px;
  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: 9999px;
  background: #e5e7eb; /* off */
  transition: background 0.2s ease;
  display: inline-block;
}

/* The knob */
.gfield--type-radio.as-switch .gfield_radio::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: calc(var(--h) - 4px);
  height: calc(var(--h) - 4px);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

/* Place each choice on half the track so clicks go to the correct radio */
.gfield--type-radio.as-switch .gfield_radio .gchoice {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}
.gfield--type-radio.as-switch .gfield_radio .gchoice:first-child {
  left: 0;
}
.gfield--type-radio.as-switch .gfield_radio .gchoice:last-child {
  right: 0;
}

/* Keep radios accessible but visually hidden */
.gfield--type-radio.as-switch .gfield_radio .gfield-choice-input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Labels cover their half; hide visible text (screen readers still read it) */
.gfield--type-radio.as-switch .gfield_radio .gchoice > label {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  cursor: pointer;
  font-size: 0;/* hide "Yes/No" text visually, keeps it for SRs */
  z-index: 2; 
}

/* Focus & errors */
.gfield--type-radio.as-switch .gfield_radio:focus-within {
  outline: 2px solid Highlight;
  outline-offset: 2px;
}
.gfield--type-radio.as-switch[aria-invalid="true"] .gfield_radio {
  box-shadow: 0 0 0 2px #ef4444 inset;
}

/* Drive visuals via data-on set by JS */
.gfield--type-radio.as-switch .gfield_radio[data-on="1"] {
  background: #2e7dff;
}
.gfield--type-radio.as-switch .gfield_radio[data-on="1"]::after {
  transform: translateX(calc(var(--w) - var(--h)));
}

/* Neutralize GF list columns so the switch stays a single track */
.gfield--type-radio.as-switch.gf_list_2col .gfield_radio,
.gfield--type-radio.as-switch.gf_list_3col .gfield_radio,
.gfield--type-radio.as-switch.gf_list_inline .gfield_radio {
  width: var(--w);
}
.gfield--type-radio.as-switch.gf_list_2col .gchoice,
.gfield--type-radio.as-switch.gf_list_3col .gchoice,
.gfield--type-radio.as-switch.gf_list_inline .gchoice {
  width: 50%;
}

/* Optional sizes */
.gfield--type-radio.as-switch.as-switch-lg .gfield_radio {
  --w: 64px;
  --h: 32px;
}
.gfield--type-radio.as-switch.as-switch-sm .gfield_radio {
  --w: 44px;
  --h: 22px;
}