/* Armah Auth Pages Custom Styles */



:root {

    --black: #000000;

    --black-c75: #636466;

    --black-c35: #B1B3B6;

}

body {

    font-family: 'Foundry Gridnik' !important;

    direction: ltr;

}

html[lang="ar"] body {

    font-family: 'DIN Next LT Arabic' !important;

    direction: rtl;

}



.auth-body {

    min-height: 100vh;

    position: relative;

    overflow: hidden; 

}



.auth-bg {

    position: fixed;

    top: 0; left: 0; right: 0; bottom: 0;

    width: 100vw;

    height: 100vh;

    background: url('../logo/Armah_Building.jpg') no-repeat center center fixed;

    background-size: cover;

    opacity: 0.3;

    z-index: 0;

    pointer-events: none;

    transition: opacity 0.8s;

}



.auth-outer-container {

    position: relative;

    z-index: 2;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100vw;

    padding: 2vw 1vw;

}



.auth-logo-container {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 2rem;

    width: 100%;

}



.auth-logo {

    width: 120px;

    max-width: 40vw;

    height: auto;

    transition: transform 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.3s;

    box-shadow: 0 4px 32px 0 rgba(0,0,0,0.18);

    border-radius: 1.5rem;

}

.auth-logo:hover {

    transform: scale(1.07) rotate(-1deg);

    box-shadow: 0 8px 48px 0 rgba(177,179,182,0.18);

}



.auth-image {

    width: 100%;

    max-width: 320px;

    border-radius: 1.25rem;

    margin-bottom: 1.5rem;

    box-shadow: 0 4px 32px 0 rgba(0,0,0,0.18);

    transition: transform 0.4s cubic-bezier(.4,2,.6,1), box-shadow 0.3s;

}

.auth-image:hover {

    transform: scale(1.045) rotate(-1deg);

    box-shadow: 0 8px 48px 0 rgba(177,179,182,0.18);

}



.auth-title {

    color: var(--black);

    font-size: 2rem;

    font-weight: bold;

    margin-bottom: 1.2rem;

    letter-spacing: 0.01em;

    text-align: center;

    animation: slideUp 0.8s cubic-bezier(.4,2,.6,1);

}



.auth-form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 1.2rem;

    margin-top: 1rem;

}



.auth-form label {

    color: var(--black);

    font-size: 1rem;

    margin-bottom: 0.3rem;

    font-weight: 500;

}



.auth-form input[type="email"],

.auth-form input[type="password"],

.auth-form input[type="text"] {

    width: 100%;

    padding: 0.75rem 1rem;

    border-radius: 0.5rem;

    border: 1px solid var(--black-c75);

    background: #181818;

    color: var(--black-c35);

    font-size: 1rem;

    transition: border 0.2s, box-shadow 0.2s;

}

.auth-form input:focus {

    border: 1.5px solid var(--black-c35);

    outline: none;

    box-shadow: 0 0 0 2px var(--black-c35, #B1B3B6);

}



.auth-form .form-error {

    color: #ff6b6b;

    font-size: 0.95rem;

    margin-top: 0.2rem;

}



.auth-form .form-actions {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 0.5rem;

}



.auth-btn {

    background: var(--black-c75);

    color: #fff;

    border: none;

    border-radius: 0.5rem;

    padding: 0.75rem 2rem;

    font-weight: 600;

    font-size: 1.1rem;

    cursor: pointer;

    transition: background 0.3s, transform 0.2s, box-shadow 0.2s;

    box-shadow: 0 2px 12px 0 rgba(99,100,102,0.10);

    margin-left: 0.5rem;

}

.auth-btn:hover {

    background: var(--black-c35);

    color: var(--black);

    transform: translateY(-2px) scale(1.04);

    box-shadow: 0 4px 24px 0 rgba(177,179,182,0.15);

}



.auth-link {

    color: var(--black);

    text-decoration: underline;

    font-size: 0.98rem;

    transition: color 0.2s;

}

.auth-link:hover {

    color: #fff;

}



@media (max-width: 600px) {

    .auth-container {

        padding: 1.2rem 0.5rem 1.5rem 0.5rem;

        border-radius: 1.1rem;

        max-width: 98vw;

    }

    .auth-title {

        font-size: 1.3rem;

    }

    .auth-logo {

        width: 70px;

        max-width: 60vw;

    }

    .auth-outer-container {

        padding: 1vw 0.5vw;

    }

}



@media (min-width: 601px) {

    .auth-container {

        padding: 2rem 1rem 2.5rem 1rem;

        border-radius: 1.5rem;

        max-width: 600px;

    }

    .auth-title {

        font-size: 1.8rem;

    }

    .auth-logo {

        width: 100px;

        max-width: 100%;

    }

    .auth-outer-container {

        padding: 2vw 1vw;

    }

}



/* Animations */

.fade-in {

    opacity: 0;

    animation: fadeIn 1.2s ease-out forwards;

}

@keyframes fadeIn {

    from { opacity: 0; }

    to { opacity: 1; }

}

.slide-up {

    transform: translateY(40px);

    opacity: 0;

    animation: slideUp 0.8s cubic-bezier(.4,2,.6,1) forwards;

}

@keyframes slideUp {

    from { transform: translateY(40px); opacity: 0; }

    to { transform: translateY(0); opacity: 1; }

}

.zoom-in {

    transform: scale(0.85);

    opacity: 0;

    animation: zoomIn 0.9s cubic-bezier(.4,2,.6,1) forwards;

}

@keyframes zoomIn {

    from { transform: scale(0.85); opacity: 0; }

    to { transform: scale(1); opacity: 1; }

}