/* General Body Layout */
body {
    font-family: 'Sarabun', sans-serif;
    background-color: #fafafa;
    /* Flexbox to center the card on screen */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

/* Main Login Card */
.login-card {
    border: 4px solid #BA55D3;
    border-radius: 20px;
    /* Background Image - Path relative to public/css/ */
    background: url('../images/login-page/background.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    background-color: #fafafa;
    /* Fallback */
    animation: fade-in-up 0.8s ease-out forwards;
}

/* Logo Box (The #fafafa square) */
.logo-box-inner {
    width: 200px;
    height: 200px;
    max-width: 100%;
    /* Prevent overflow on tiny screens */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 0.25rem !important;
    /* Bootstrap 'rounded' equivalent */
}

/* Custom Purple Button */
.btn-custom-purple {
    background-color: #ffdcfc;
    color: #704199;
    border: 2px solid #ba55d3;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-custom-purple:hover {
    background-color: #ba55d3;
    color: #fafafa;
    border-color: #ba55d3;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-custom-purple:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Input Field Focus State */
.form-control:focus {
    border-color: #ba55d3;
    box-shadow: 0 0 0 0.25rem rgba(186, 85, 211, 0.25);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Modal Styling */
.modal-icon-lg {
    font-size: 3rem;
}

/* Force purple border on all modals */
.modal-content {
    border: 3px solid #ba55d3 !important;
}

/* -----------------------------------------------------------
   Animations
----------------------------------------------------------- */

/* Fade In Up (Card Entry) */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shake Animation (Error Feedback) */
.shake {
    will-change: transform;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    50% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-3px);
    }
}