/* =========================
   Base
========================= */
:root {
    --my-bg-color: rgb(243, 239, 232);
    --my-text-color: rgb(112,96, 94);
    --my-BTN-color: rgb(229,199, 139);
    --my-BTN-Unuse-color: rgb(226,215, 204);
    --header-height: 8dvh;
    --footer-height: 80px; /* ปรับขนาดตามจริง */
    --font-size: 15px;
}

@font-face {
    font-family: 'inter-regular';
    src: url('../fonts/inter-regular.otf') format('opentype'), url('../fonts/inter-semibold.otf') format('opentype');
}

@font-face {
    font-family: 'inter-semibold';
    src: url('../fonts/inter-semibold.otf') format('opentype');
}

html, body {
    font-family: 'inter-regular';
    color: var(--my-text-color);
    font-size: var(--font-size);
    margin: 0;
    padding: 0;
    height: 100%;
    background: gray;
}

button, input, optgroup, select, textarea {
    font-family: 'inter-regular';
}


/* =========================
   Layout
========================= */
.textlogin-header{
    display:grid;
    justify-content:center;
    align-content:center;
}
.b-font-family {
    font-family: 'inter-semibold';
}
.login-left {
    background: var(--bg-image) center / cover no-repeat;
}

.login-right {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-box {
    width: 60%;
}

/* =========================
   Logo
========================= */
.login-logo {
    text-align: center;
    margin-bottom: 50px;
}

    .login-logo img {
        max-width: 200px;
        width: 100%;
    }

/* =========================
   Form
========================= */
.form-control {
    line-height: 2;
}
.login-btn {
    background: var(--main-color);
    color: var(--my-text-color);
}

    .login-btn:hover {
        background: var(--main-color);
    }

/* =========================
   Text / Link
========================= */
.forgot-link {
    color: var(--my-text-color);
  
    cursor: pointer;
}

/* =========================
   Modal / Icon
========================= */
.email-icon i {
    font-size: 30px;
}

.modal-transparent,
.modal-transparent .modal-content,
.modal-transparent .modal-body {
    background: none !important;
    border: none;
}

/* =========================
   Responsive
========================= */


/* =========================
   Modal
========================= */
.modal-content {
    border-radius: 20px;
}

/* =========================
   Buttons
========================= */
.btn-ClosesentEmail {
    background-color: var(--main-color);
    color: white;
}

    .btn-ClosesentEmail:hover {
        background-color: var(--main-color);
        color: white;
    }

.login-btn {
    background-color: var(--main-color);
    color: var(--my-text-color);
}

    .login-btn:hover {
        background-color: var(--main-color);
        color: var(--my-text-color);
    }

/* =========================
   Forgot password form
========================= */
.forgot-password-form {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .forgot-password-form .btn {
        width: 100%;
        background-color: var(--main-color);
        
    }

        .forgot-password-form .btn:hover {
            background-color: var(--main-color);
        }

    .forgot-password-form a {
        text-decoration: none;
        color: var(--main-color);
    }

        .forgot-password-form a:hover {
            text-decoration: underline;
        }

/* =========================
   Email icon & input
========================= */
.email-icon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
}

.email-input {
    background-color: #e9e9e9;
    padding-left: 50px;
}
@media (min-width: 1200px) {
    .h4, h4 {
        font-size: 1.3rem;
    }
}