/* Base styling for the buttons */
.radio-btn-otp .btn-outline-main {
    border: 2px solid #0d6efd;
    color: #0d6efd;
    background-color: transparent;
    transition: all 0.3s ease;
    width: 100%;
    padding: 0.75rem;
}

/* Checked state - highlight stays */
.radio-btn-otp .btn-check:checked + .btn-outline-main {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* Change icon from circle (bi-circle) to filled circle (bi-record-circle) when checked */
.radio-btn-otp .btn-check:checked + .btn-outline-main i.bi-circle::before {
    content: "\f517" !important; /* Bootstrap Icons: record-circle */
}

/* Hover effect for unchecked buttons */
.radio-btn-otp .btn-check:not(:checked) + .btn-outline-main:hover {
    background-color: rgba(13, 110, 253, 0.1);
    transform: translateY(-2px);
}

/* Active/click effect */
.radio-btn-otp .btn-outline-main:active {
    transform: translateY(0);
}

/* Ensure the icon updates properly */
.radio-btn-otp .btn-outline-main i.bi-circle {
    display: inline-block;
    transition: all 0.2s ease;
}

/* Remove any default focus outlines and add custom focus style */
.radio-btn-otp .btn-check:focus + .btn-outline-main {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}