/* ========================================= */
/* STICKY BUTTON STYLES                      */
/* ========================================= */
.sticky-reg-btn-wrapper {
    position: fixed;
    left: -50px;
    z-index: 1040;
    top: 50%;
}

.sticky-reg-btn {
    background-color: #DF014A;
    color: #fff;
    border-radius: 0;
    display: inline-block;
    letter-spacing: 0.4px;
    font-size: 18px;
    padding: 15px 20px;
    font-weight: 700;
    line-height: 10px;
    border: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-transform: uppercase;
    transform: translateY(-50%) rotate(-90deg); /* Much cleaner centering and rotation */
    animation: sticky-reg-pulse 1.5s infinite;
}

@keyframes sticky-reg-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 15, 123, 0.8);
    }

    100% {
        box-shadow: 0 0 0 15px rgba(255, 15, 123, 0);
    }
}

/* ========================================= */
/* MODAL STYLES                              */
/* ========================================= */
.right-green-col {
    background-color: #df014a;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    /* Make sure bottom corners round correctly on mobile too */
}



#registerModal .form-control,
#enrollModal .form-control {
    width: 75% !important;
}

#formGuidance .form-control {
    width: 75% !important;
    margin-left: auto;
    margin-right: 0;
}


.sticky-close-btn-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #0e476b;
    color: #fff;
    padding: 6px;
    border: none;
    border-radius: 50%;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.sticky-reg-submit-btn {
    background-color: #0e476b;
    padding: 8px 30px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

    .sticky-reg-submit-btn:hover {
        background-color: #df014a;
        color: #fff;
    }

/* ========================================= */
/* CUSTOM MODAL SLIDE ANIMATION (LEFT TO CENTER) */
/* ========================================= */

/* Start the modal off-screen to the LEFT and slow down the animation */
.modal.fade .modal-dialog {
    /* Increased from 0.4s to 0.8s for a slower, smoother slide */
    transition: transform 1.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* Changed to -100vw so it hides on the left side instead of the right */
    transform: translateX(-100vw) !important;
}

/* Slide it perfectly into the center when opened */
.modal.show .modal-dialog {
    transform: translateX(0) !important;
}


/* Mobile responsiveness: stack the columns properly */
@media (max-width: 991px) {
    .right-green-col {
        border-radius: 0 0 10px 10px;
        min-height: 250px;
    }

    .modal-girl-img {
        right: 50%;
        transform: translateX(50%); /* Centers image on mobile */
    }
}



/* Register and Enroll Buttons */

/* Blue column for Guidance Modal */
.left-blue-col {
    background-color: #0e476b;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Shared image class for all modals to keep people grounded at the bottom */
.modal-girl-img {
    position: absolute;
    bottom: 0;
    right: 15px; /* Adjust this slightly if she is cut off */
    width: 175%; /* Ensures she scales nicely inside the column */
    max-width: 380px;
    height: auto;
    z-index: 10;
    width: 200% !important;
}

/* Mobile responsiveness adjustments */
@media (max-width: 991px) {
    .left-blue-col {
        border-radius: 10px 10px 0 0;
        min-height: 250px;
    }
}

/* ========================================= */
/* CUSTOM MODAL ANIMATIONS                   */
/* ========================================= */

/* 1. Career Guidance Modal: Slide down from the TOP */
#guidanceModal.fade .modal-dialog {
    transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(-100vh) !important; /* Starts off-screen at the top */
}

#guidanceModal.show .modal-dialog {
    transform: translateY(0) !important; /* Slides perfectly into the center */
}

/* 2. Enroll Modal: Slide up from the BOTTOM */
#enrollModal.fade .modal-dialog {
    transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateY(100vh) !important; /* Starts off-screen at the bottom */
}

#enrollModal.show .modal-dialog {
    transform: translateY(0) !important; /* Slides perfectly into the center */
}
/* ========================================= */
/* COMBINED MEDIA QUERIES (MOBILE & TABLET)  */
/* ========================================= */
@media (max-width: 991px) {

    .modal-girl-img {
        display: none !important;
    }

    .modal-person-img {
        display: none !important;
    }



    .right-green-col {
        border-radius: 0 0 10px 10px;
        min-height: auto;
        padding: 20px;
    }

    .left-blue-col {
        border-radius: 10px 10px 0 0;
        min-height: auto;
        padding: 20px;
    }
}


.modal-person-img {
    position: absolute;
    bottom: 0;
    left: 120%;
    transform: translateX(-50%);
    width: 185%;
    max-width: 380px;
    height: auto;
    z-index: 10;
}