/* ==========================================================================
   General Styles
   ========================================================================== */

   body {
    direction: ltr;
    text-align: left;
}

/* ==========================================================================
   Background Styles
   ========================================================================== */

.bg-login {
    background-image: url('https://i.ibb.co/ZzTYmhqL/elkarim-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================================
   Login Card Styles
   ========================================================================== */

.login-card {
    background-color: rgba(240, 253, 250, 0.95);
    /* border: 2px solid var(--primary-color); */
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.btn-login {
    background-color: var(--primary-color);
    color: var(--second-color);
    font-weight: bold;
}

.btn-login:hover {
    /* background-color: var(--primary-dark); */
}


/* ==========================================================================
   Floating Label Styles
   ========================================================================== */

.floating-label {
    position: relative;
}

.floating-label input {
    background-color: var(--third-color);
    border-color: var(--primary-color);
    padding-top: 20px;
    padding-bottom: 8px;
}

.floating-label label {
    position: absolute;
    top: 15px;
    left: 12px;
    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--primary-color);
  font-weight: 600;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
    top: 5px;
    font-size: 0.75rem;
    color: var(--primary-color);
}

/* ==========================================================================
   Password Toggle Styles
   ========================================================================== */

.password-toggle {
    position: absolute;
    right: 10px;
    top: 30%;
    cursor: pointer;
}

/* ==========================================================================
   Alert Styles
   ========================================================================== */

.alert {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}

.alert-error {
    background-color: #fef2f2;
    color: #e11d48;
    border: 2px solid #f87171;
}

/* ==========================================================================
    Language Selector Styles
   ========================================================================== */
.language-selector select {
    padding: 10px;
    border-radius: 7px;
    font-size: 14px;
    border: 1px solid #ddd;
    margin: 10px;
    font-family: 'Qatar', sans-serif;
}

/* ==========================================================================
   Remember Me Check Styles
   ========================================================================== */
.remembermecheck {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.remembermecheck input[type="checkbox"] {
    margin-right: 8px;
    margin-left: 0;
}