/* Classes that changes back and forth */
@media (hover: hover) {
    .mainbNo:hover {
        background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.5);
        transform: scale(1.01);
    }

    .showHideImage:hover {
        opacity: 0.5;
    }

    .no:hover {
        background: rgba(255, 50, 50, 0.3);
    }
}

/* If there are an error in any input it will get this class */
.no {
    background: rgba(255, 0, 0, 0.28);
}

.on:focus {
    background: rgba(255, 0, 0, 0.28);
}

.no:after {
    background: rgba(255, 0, 0, 0.28);
}

.no::before {
    background: rgba(255, 0, 0, 0.28);
}


/* If there are an error in any input The submit button will get this class */
.mainbNo {
    background: rgba(255, 255, 255, 0.02);
    font-size: 18px;
    margin-top: 20px;
    padding: 8px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s background 0.2s;
}
.mainbNo:active {
    background: rgba(255, 255, 255, 0.01);
}

/* The submit button is disabled and clicked it will shake */
.shakeb {
    animation: shake 0.3s;
}
@keyframes shake {
    0% {
        transform: scale(0.9) rotate(-2deg);
    }

    25% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }

    75% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


/* 
If the language entered in the password input is right to lift 
this show hide img class will activate. 
*/
.showHideImageRtl{
    left: 6%;
}

/* Password validation criteria styling */
.password-criteria {
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 8px 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    font-size: 0.8rem;
}

.criteria-header {
    margin: 0 0 5px 0;
    font-size: 0.85rem;
    color: #aaa;
}

.criteria-list {
    list-style-type: none;
    padding-left: 5px;
    margin: 0;
}

.criteria-list li {
    margin-bottom: 3px;
    color: #aaa;
    display: flex;
    align-items: center;
}

.criteria-icon {
    margin-right: 5px;
    display: inline-block;
    width: 15px;
    text-align: center;
}

/* For valid criteria */
.valid-criteria {
    color: #4caf50;
}

.valid-criteria .criteria-icon {
    content: "✓";
}

/* For invalid criteria */
.invalid-criteria {
    color: #f44336;
}

/* Match institution select styling with department and designation */
.institution-select {
    width: 90%;
    max-width: 300px;
    color: var(--text-color);
    margin-bottom: 15px;
    padding: 10px 15px;
    border: 1px solid var(--input-border);
    border-radius: 5px;
    font-size: 16px;
    background: var(--input-bg);
    transition: border 0.1s, background 0.3s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
    text-shadow: var(--text-shadow);
    
    /* Dropdown arrow styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    background-size: 12px;
    padding-right: 35px !important;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.institution-select:focus {
    outline: none;
    /* Remove the scale transform that causes vibration */
    transform: none;
    box-shadow: var(--focus-glow);
    background-color: var(--green-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'><path d='M7.247 4.86 2.451 10.342C1.885 10.987 2.345 12 3.204 12h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/></svg>");
    border-color: rgba(255, 255, 255, 0.6);
}

.institution-select option {
    background-color: #006400;
    color: var(--text-color);
    padding: 8px 10px;
}

.institution-select option:checked {
    background: #005000;
    color: white;
    font-weight: 500;
}

/* Styles for "Others" input fields */
.other-field-wrapper {
    width: 90%;
    max-width: 300px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.other-field-wrapper input {
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.other-field-wrapper input:focus {
    background-color: rgba(0, 100, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

/* Prevent wrapper transformations */
.institution-wrapper,
.department-wrapper,
.designation-wrapper,
.state-wrapper {
    /* Add this to prevent any transform bubbling */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Make form transitions smoother */
.divForm {
    /* Change to a less dramatic transition */
    transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    /* Add hardware acceleration */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Prevent overflow issues */
    transform-style: preserve-3d;
}

/* Prevent all dropdown vibration issues */
select {
    /* Prevent any transform effects on the select element itself */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}