/**
 * Stunning, Animated Radio Button Override for Bootstrap 3
 *
 * This file is a drop-in replacement to modernize your BS3 radio buttons
 * without changing any of your existing HTML.
 *
 * How it works:
 * 1. Resets the BS3 'position: absolute' and 'margin-left: -20px' hacks.
 * 2. Uses 'appearance: none' to hide the browser's default radio button UI.
 * 3. Styles the <input> element itself as a custom "ring".
 * 4. Uses a combination of 'box-shadow: inset' and 'background-color' to
 * create the inner "dot" and its beautiful "grow" animation on check.
 */

/* === 1. Reset Bootstrap 3 Positioning === */

/*
 * Remove the padding from the label that BS3 uses
 * to make space for its off-screen input.
 */
.radio label,
.radio-inline label {
  padding-left: 0;
  cursor: pointer;
  /* Ensure consistent vertical alignment */
  display: inline-flex;
  align-items: center;
  /* Use a slightly more modern font weight */
  font-weight: 500;
  color: #333;
}

/*
 * Reset the <input> element itself.
 * This brings it back into the document flow.
 */
.radio label input[type="radio"],
.radio-inline label input[type="radio"] {
  position: relative;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0.6rem; /* Space between radio and text */
}

/* === 2. Apply New Custom Styling === */

.radio label input[type="radio"],
.radio-inline label input[type="radio"] {
  /* Hide the native UI */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Dimensions */
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;

  /* Ring Style (Unchecked) */
  background-color: #fff;
  border: 2px solid #adb5bd; /* Professional light gray */
  border-radius: 50%;
  cursor: pointer;

  /*
   * The "Dot" Animation Trick (Unchecked State):
   * We use an inset shadow that is white and fills the entire
   * inside of the ring.
   */
  box-shadow: inset 0 0 0 10px #fff;

  /* Smooth Animation */
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* === 3. Checked State === */

.radio label input[type="radio"]:checked,
.radio-inline label input[type="radio"]:checked {
  border-color: #0d6efd; /* A modern, elegant blue */

  /*
   * The "Dot" Animation Trick (Checked State):
   * We animate the inset shadow down from 10px (full) to 3px.
   * This reveals the background color underneath, creating the
   * appearance of a "dot" growing in the center.
   */
  box-shadow: inset 0 0 0 3px #fff;
  background-color: #0d6efd; /* The dot color */
}

/* === 4. Interaction & Disabled States === */

/* Hover (Unchecked) */
.radio label:hover input[type="radio"]:not(:checked),
.radio-inline label:hover input[type="radio"]:not(:checked) {
  border-color: #0d6efd;
}

/* Focus */
.radio label input[type="radio"]:focus,
.radio-inline label input[type="radio"]:focus {
  outline: 0;
  /* Create the standard Bootstrap focus glow */
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Focus (Checked) */
.radio label input[type="radio"]:checked:focus,
.radio-inline label input[type="radio"]:checked:focus {
  outline: 0;
  /* Combine the inset shadow (for the dot) and the outer glow (for focus) */
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px rgba(13, 110, 253, 0.25);
}

/* Disabled State */
.radio.disabled label,
.radio-inline.disabled label,
.radio label input[type="radio"]:disabled,
.radio-inline label input[type="radio"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.radio.disabled label,
.radio-inline.disabled label {
  color: #6c757d;
}

.radio label input[type="radio"]:disabled,
.radio-inline label input[type="radio"]:disabled {
  background-color: #e9ecef;
  border-color: #ced4da;
  box-shadow: inset 0 0 0 10px #e9ecef; /* Fill with disabled color */
}

.radio label input[type="radio"]:disabled:checked,
.radio-inline label input[type="radio"]:disabled:checked {
  background-color: #adb5bd;
  border-color: #adb5bd;
  box-shadow: inset 0 0 0 3px #e9ecef; /* Show disabled dot */
}