/* ============================================


 * GRAVITY FORMS RADIO BUTTON STYLING


 * Transforms radio buttons into large, clickable Yes/No buttons


 * Apply custom CSS class: yes-no-toggle


 * Date: May 18, 2026


 * ============================================ */





/* Container for radio button group */


.gform_wrapper .yes-no-toggle .gfield_radio {


  display: flex;


  gap: 12px;


  width: 100%;


  margin-top: 10px;


  justify-content: left;


}





/* Individual choice wrapper */


.gform_wrapper .yes-no-toggle .gchoice {


  margin: 0;


  display: flex;


  align-items: center;


}





/* Hide the actual radio input but keep it for functionality */


.gform_wrapper .yes-no-toggle input[type="radio"] {


  position: absolute;


  opacity: 0;


  pointer-events: none;


  width: 0;


  height: 0;


}





/* Style the label as button */


.gform_wrapper .yes-no-toggle label {


  display: block;


  width: auto;


  min-width: 100px;


  padding: 10px 20px;


  text-align: center;


  border: 2px solid #d1d5db;


  border-radius: 8px;


  background: #ffffff;


  color: #374151;


  font-weight: 700;


  font-size: 14px;


  cursor: pointer;


  box-sizing: border-box;


  transition: all 0.3s ease;


  margin: 0;


  white-space: nowrap;


}





/* Hover effect */


.gform_wrapper .yes-no-toggle label:hover {


  background: #f3f4f6;


  border-color: #2563eb;


}





/* Selected/Checked state - Dark Blue */


.gform_wrapper .yes-no-toggle input[type="radio"]:checked + label {


  background: #1e3a8a;


  color: #ffffff;


  border-color: #1e3a8a;


  box-shadow: 0 4px 6px rgba(30, 58, 138, 0.2);


}





/* Keyboard focus - Accessibility */


.gform_wrapper .yes-no-toggle input[type="radio"]:focus + label {


  outline: 2px solid #3b82f6;


  outline-offset: 2px;


}





/* Focus visible for better keyboard navigation */


.gform_wrapper .yes-no-toggle input[type="radio"]:focus-visible + label {


  outline: 3px solid #3b82f6;


  outline-offset: 2px;


}





/* Mobile responsiveness - Stack buttons on small screens */


@media only screen and (max-width: 600px) {


  .gform_wrapper .yes-no-toggle .gfield_radio {


    gap: 10px;


  }


  


  .gform_wrapper .yes-no-toggle label {


    padding: 10px 14px;


    font-size: 13px;


  }


}





/* Extra small screens */


@media only screen and (max-width: 480px) {


  .gform_wrapper .yes-no-toggle .gfield_radio {


    gap: 8px;


  }


  


  .gform_wrapper .yes-no-toggle label {


    padding: 8px 10px;


    font-size: 12px;


  }


}