* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    background-color: #FFFFFF;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    width: 100%;
    max-width: 420px; /* Increased from 360px */
    padding: 40px;    /* Increased from 30px */
    text-align: center;
}

.login-logo {
    width: 90px;      /* Increased from 70px */
    height: 90px;     /* Increased from 70px */
    margin: 0 auto 35px;
    display: block;
    object-fit: contain;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Increased from 12px */
}

.input-group {
    position: relative;
    width: 100%;
}

.input-group .icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;  /* Increased from 16px */
    height: 20px; /* Increased from 16px */
    color: #000;
    pointer-events: none;
    z-index: 2;
}

.input-group input {
    width: 100%;
    padding: 18px 20px 18px 48px; /* Increased padding */
    background-color: #F1F3F4;
    border: 1px solid transparent;
    border-radius: 8px;           /* Slightly larger radius */
    font-size: 16px;              /* Increased from 14px */
    color: #333;
    outline: none;
    transition: border 0.2s ease;
}

.input-group input:focus {
    border-color: #37BEFF;
    background-color: #fff;
}

.login-btn {
    width: 100%;
    padding: 18px;          /* Increased from 14px */
    background-color: #37BEFF;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 17px;        /* Increased from 15px */
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    margin-top: 8px;
    transition: opacity 0.2s ease;
}

.login-btn:hover { opacity: 0.9; }
.login-btn:active { transform: translateY(1px); }

/* TITLE STYLING: Smaller, Grey, Thick, at the bottom */
.login-title {
    color: #888;         /* Grey color */
    font-size: 14px;     /* Smaller text */
    font-weight: 700;    /* Thick/Bold */
    margin-top: 35px;    /* Pushes it down below the button */
    letter-spacing: 0.5px;
}

.error-banner {
    background-color: #FDECEA;
    color: #C0392B;
    border: 1px solid #F5C6CB;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    margin-top: 20px;
    text-align: left;
}

/* Arabic RTL */
html[lang="ar"] {
    direction: rtl;
}
html[lang="ar"] .input-group .icon {
    left: auto;
    right: 16px;
}
html[lang="ar"] .input-group input {
    padding: 18px 48px 18px 20px;
}