/**
 * Legal Accept page checkbox improvements
 * Makes the agreement checkbox larger and easier to click
 */

/* Make the checkbox itself much larger */
.path-legal-accept input[type="checkbox"],
.path-legal-accept .form-checkbox,
.path-legal-accept .form-item-legal-accept input[type="checkbox"],
.path-legal-accept input[name*="legal"],
.path-legal-accept input[name*="terms"],
.path-legal-accept input[name*="agree"] {
  /* Make checkbox much larger */
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  cursor: pointer !important;
  margin-right: 15px !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -2px !important;
}

/* Style the checkbox container/wrapper */
.path-legal-accept .form-item-legal-accept,
.path-legal-accept .form-type-checkbox,
.path-legal-accept .form-item label {
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 20px 0 !important;
}

/* Make the label text larger and clearer */
.path-legal-accept .form-item-legal-accept label,
.path-legal-accept .form-type-checkbox label,
.path-legal-accept label[for*="legal"],
.path-legal-accept label[for*="terms"],
.path-legal-accept label[for*="agree"] {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #333 !important;
  margin-left: 10px !important;
  cursor: pointer !important;
}

/* Add hover effect to checkbox */
.path-legal-accept input[type="checkbox"]:hover {
  border-color: #007bff !important;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3) !important;
}

/* Style checked state */
.path-legal-accept input[type="checkbox"]:checked {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

/* Mobile responsiveness for checkbox */
@media (max-width: 768px) {
  .path-legal-accept input[type="checkbox"] {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    min-height: 35px !important;
  }
  
  .path-legal-accept .form-item-legal-accept label,
  .path-legal-accept .form-type-checkbox label {
    font-size: 16px !important;
  }
}

/* Add padding around the checkbox area for easier clicking */
.path-legal-accept .form-item-legal-accept,
.path-legal-accept .form-type-checkbox {
  padding: 15px !important;
  background-color: #f8f9fa !important;
  border-radius: 8px !important;
  margin: 20px 0 !important;
}

/* Highlight the checkbox area on hover */
.path-legal-accept .form-item-legal-accept:hover,
.path-legal-accept .form-type-checkbox:hover {
  background-color: #e9ecef !important;
}

/* For custom styled checkboxes that use ::before or ::after */
.path-legal-accept input[type="checkbox"]::before,
.path-legal-accept input[type="checkbox"]::after {
  transform: scale(1.5) !important;
}