/* Update Service Mode Selector Styles */
#service_mode_selector {
    background-color: #ffffff;
    border-radius: 16px !important;
    transition: all 0.3s ease;
}

.service-option input[type="radio"]:checked+.service-card {
    border-color: #FECD4F !important;
    background-color: #FFFDF6 !important;
    box-shadow: 0 4px 15px rgba(254, 205, 79, 0.25) !important;
    transform: translateY(-2px);
}

.service-card {
    border: 2px solid #e9ecef !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.service-card:hover {
    border-color: #FECD4F;
    background-color: #FFFDF6;
}

.service-card i {
    font-size: 2rem;
    display: block;
    margin-bottom: 8px;
}

.service-card h6 {
    margin-bottom: 4px;
    font-weight: 700;
}

/* Animation for the selector if skipped */
.shake-animation {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}