/* 1. Target the Checkbox Input */
      .checkbox > label > input[type="checkbox"],
      .checkbox-inline > input[type="checkbox"] {
          
          /* A. Reset Native Appearance */
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          
          /* B. Base Box Styling */
          width: 22px; /* Slightly larger for a modern feel */
          height: 22px;
          border: 2px solid #aaa;
          border-radius: 6px; /* Modern rounded corners */
          background-color: #fff;
          cursor: pointer;
          
          /* C. Positioning & Alignment */
          display: inline-block;
          vertical-align: middle;
          position: relative;
          top: -1px; 
          margin-right: 8px;
          
          /* D. Smooth Transitions */
          transition: 
              background-color 0.2s ease-in-out,
              border-color 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out,
          transform: 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Snappy transition */
      }

      /* 2. Hover State */
      .checkbox > label > input[type="checkbox"]:hover,
      .checkbox-inline > input[type="checkbox"]:hover {
          border-color: #3498db; /* Professional blue */
          box-shadow: 0 0 8px rgba(52, 152, 219, 0.6);
      }

      /* 3. Active (Press) State */
      /* The "bouncy" press-down effect */
      .checkbox > label > input[type="checkbox"]:active,
      .checkbox-inline > input[type="checkbox"]:active {
          transform: scale(0.9);
      }

      /* 4. Checked State (Box) */
      .checkbox > label > input[type="checkbox"]:checked,
      .checkbox-inline > input[type="checkbox"]:checked {
          background-color: #3498db;
          border-color: #3498db;
          transform: scale(1); /* Return to full size */
      }
      
      .checkbox > label > input[type="checkbox"]:checked:hover,
      .checkbox-inline > input[type="checkbox"]:checked:hover {
          background-color: #2980b9; 
          border-color: #2980b9;
      }


      /* 5. The Checkmark (::after pseudo-element) */
      /* *** ADJUSTED FOR BETTER CENTERING *** */
      .checkbox > label > input[type="checkbox"]::after,
      .checkbox-inline > input[type="checkbox"]::after {
          content: '';
          display: block;
          position: absolute;
          
          /* A. Checkmark Shape (a rotated 'L') */
          /* Adjusted width, height, and border-width */
          width: 6px; 
          height: 11px;
          border: solid #fff; /* White checkmark */
          border-width: 0 2.5px 2.5px 0; /* Creates the 'L' shape, slightly thinner */
          
          /* B. Positioning */
          /* Adjusted top and left for visual centering */
          top: 3px; 
          left: 7px;
          transform: rotate(45deg);

          /* C. Animation (The "draw" effect) */
          /* Starts invisible and scaled to zero */
          opacity: 0;
          transform: rotate(45deg) scale(0);
          /* Uses a 'back' ease for the bouncy pop */
          transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition-delay: 0.05s; /* Wait for the box to check first */
      }
      
      /* 6. Active (Press) State for the Knob */
      /* No special active state needed for the checkmark itself */
      

      /* 7. Checked State + Checkmark */
      /* This makes the checkmark animate in */
      .checkbox > label > input[type="checkbox"]:checked::after,
      .checkbox-inline > input[type="checkbox"]:checked::after {
          opacity: 1;
          transform: rotate(45deg) scale(1);
      }
      
      /* 8. Active (Press) State for the Knob WHEN CHECKED */
      /* When unchecking, make the checkmark disappear quickly */
      .checkbox > label > input[type="checkbox"]:checked:active::after,
      .checkbox-inline > input[type="checkbox"]:checked:active::after {
          opacity: 0;
          transform: rotate(45deg) scale(0.5);
          transition: all 0.1s ease-in;
      }

      /* 9. Disabled State */
      .checkbox > label > input[type="checkbox"]:disabled,
      .checkbox-inline > input[type="checkbox"]:disabled {
          background-color: #e9ecef;
          border-color: #ced4da;
          cursor: not-allowed;
          box-shadow: none;
          transform: scale(1);
      }
      
      .checkbox > label > input[type="checkbox"]:disabled:hover,
      .checkbox-inline > input[type="checkbox"]:disabled:hover {
          border-color: #ced4da;
          box-shadow: none;
      }

      /* 10. Disabled Knob */
      .checkbox > label > input[type="checkbox"]:disabled::after,
      .checkbox-inline > input[type="checkbox"]:disabled::after {
          border-color: #ced4da; /* Match disabled knob color */
      }

      /* 11. Disabled & Checked State */
      .checkbox > label > input[type="checkbox"]:disabled:checked,
      .checkbox-inline > input[type="checkbox"]:disabled:checked {
          background-color: #adb5bd;
          border-color: #adb5bd;
      }
      
      /* 12. Disabled & Checked Checkmark */
      .checkbox > label > input[type="checkbox"]:disabled:checked::after,
      .checkbox-inline > input[type="checkbox"]:disabled:checked::after {
          opacity: 1;
          transform: rotate(45deg) scale(1);
          border-color: #e9ecef; /* Light checkmark on dark gray bg */
      }