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;
}

/* Style for interactive stars */
.interactive-stars .star-icon {
    cursor: pointer;
    display: inline-flex; /* Use inline-flex to center icon vertically */
    align-items: center;
    justify-content: center;
    width: 24px; /* Adjust size as needed */
    height: 24px;
    font-size: 20px; /* Adjust icon size */
    color: #ccc; /* Default color for empty stars */
    transition: color 0.1s ease-in-out;
}

    .interactive-stars .star-icon.filled {
        color: #facc15; /* Tailwind yellow-400 */
    }

    .interactive-stars .star-icon.half-filled {
        position: relative;
        color: #facc15; /* Half of the star filled with yellow */
        overflow: hidden; /* Hide the other half of the icon */
    }

        .interactive-stars .star-icon.half-filled::after {
            content: "\eac9"; /* Remix Icon for ri-star-line, to cover the second half */
            font-family: 'remixicon'; /* Use Remix Icon font */
            position: absolute;
            left: 50%;
            top: 0;
            width: 50%; /* Cover the right half */
            height: 100%;
            color: #ccc; /* Color for the unfilled half */
            overflow: hidden;
            direction: ltr; /* Ensure it covers from left */
        }