/* Larger, well-aligned Bootstrap 4 custom switch */
.custom-switch.custom-switch-lg .custom-control-label {
  /* make room for the bigger switch */
  padding-left: 3.75rem;
  line-height: 1.6rem; /* matches track height for better vertical rhythm */
}

/* TRACK */
.custom-switch.custom-switch-lg .custom-control-label::before {
  width: 3rem;           /* track width */
  height: 1.6rem;        /* track height */
  border-radius: 1.6rem; /* fully rounded */
  top: 50%;
  transform: translateY(-50%); /* vertical center */
}

/* KNOB */
.custom-switch.custom-switch-lg .custom-control-label::after {
  width: 1.2rem;         /* knob diameter */
  height: 1.2rem;
  top: 50%;
  /* Start with a small left gap so it sits inside the track */
  transform: translate(0.2rem, -50%);
}

/* Knob travel when checked:
   travel = trackW - knobD - leftGap - rightGap
   = 3rem - 1.2rem - 0.2rem - 0.2rem = 1.4rem
*/
.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
  transform: translate(1.4rem, -50%);
}

/* Custom ON color */
.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #5784b3 !important;
  border-color: #5784b3 !important;
  box-shadow: 0 0 6px rgba(67,101,137,0.45); /* subtle glow (optional) */
}

/* Optional OFF colors for a calmer look */
.custom-switch.custom-switch-lg .custom-control-label::before {
  background-color: #d9d9d9;
  border-color: #bfbfbf;
}

@media (max-width: 767px) {
  .story-preview-image {
    display: none;
  }
}

@media (max-width: 767px) {
  .button-width {
    width: 6em;
  }
}

@media (min-width: 768px) {
  .button-width {
    width: 12em;
  }
}