html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* tweakable vars */
.star-rating {
    --star-size: 2rem;
    --star-active: #ffd700; /* gold */
    --star-hover: #ffc107; /* amber-ish on hover */
    --star-inactive: #c5c5c5; /* light gray when off */

    display: inline-flex;
    flex-direction: row-reverse;
    gap: .25rem;
    font-size: var(--star-size);
    line-height: 1;
}

    .star-rating input[type="radio"] {
        display: none;
    }

    /* base (inactive) */
    .star-rating label {
        color: var(--star-inactive);
        cursor: pointer;
        user-select: none;
        transition: color .15s ease, transform .05s ease;
    }

        /* hover lights up hovered + those to the left */
        .star-rating label:hover,
        .star-rating label:hover ~ label {
            color: var(--star-hover);
            transform: scale(1.05);
        }

    /* checked lights up selected + those to the left */
    .star-rating input[type="radio"]:checked ~ label {
        color: var(--star-active);
    }

    /* optional focus ring for a11y (if you keep radios focusable) */
    .star-rating input[type="radio"]:focus ~ label:first-of-type {
        outline: 2px solid var(--star-active);
        outline-offset: 4px;
    }


@media (min-width: 992px) {
    .main-content-offset {
        margin-left: 100px;
    }
}