:root {
    --default-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif;
    
    /* Color Palette Variables */
    --text-color: #7c1400;
    --main-bg: #e52e02;
    --dark-bg: #aa1c00;
    --darkest-bg: #7c1400;
    --light-bg: #fff4f3;
}

/* =========================
   INTER FONT INTEGRATION
========================= */
@font-face {
    font-family: 'Inter';
    src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp5SRlDa7mv1A9K6m7Q.woff2') format('woff2');
    font-weight: 400; /* Regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp5SRlDa7mv1A9K6m7Q.woff2') format('woff2');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp5SRlDa7mv1A9K6m7Q.woff2') format('woff2');
    font-weight: 900; /* Heavy */
    font-style: normal;
    font-display: swap;
}

/* =========================
   GLOBAL
========================= */
html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    font-family: var(--default-font-family);
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
}

* {
    box-sizing: border-box;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

/* =========================
   BANNER IMAGE WRAPPER
========================= */
.pic-wrapper {
    width: 100%;
    min-height: 380px; /* Increased height to make sure the full logo circle shows */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: url('../assets/images/loginsignupphone-04.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom; /* Anchor it to the bottom so the logo stays visible */
}

.TSH-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.TSHpic {
    width: 220px;
    max-width: 70%;
    height: auto;
    display: block;
}

/* =========================
   FORM CONTAINER
========================= */
.form-wrapper {
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25px auto 40px auto; /* Slightly lowered top margin to prevent overlapping the circle */
    padding: 0 20px;
}

.login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 35px 25px;
    border-radius: 15px;
    background: var(--light-bg);
    box-shadow: 0 8px 30px rgba(124, 20, 0, 0.08);
    border: 1px solid #f0d5d2;
}

/* =========================
   TYPOGRAPHY (All changed to Inter)
========================= */
.wlcb {
    font-family: var(--default-font-family);
    font-size: 26px;
    font-weight: 900;
    text-align: center;
    color: var(--darkest-bg);
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.emailt,
.passwordt {
    margin-top: 14px;
    font-family: var(--default-font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    letter-spacing: 0.5px;
}

.dhc {
    text-align: center;
    font-size: 14px;
    color: #555;
}

.signupt {
    color: var(--dark-bg);
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}

.signupt:hover {
    text-decoration: underline;
    color: var(--main-bg);
}

/* =========================
   INPUT CONTROLS
========================= */
.login-form input {
    width: 100%;
    padding: 0 15px;
    height: 48px;
    font-size: 15px;
    border: 1px solid #f0d5d2;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-family: var(--default-font-family);
    transition: border-color 0.2s, background 0.2s;
}

.login-form input:focus {
    outline: none;
    border-color: var(--main-bg);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(229, 46, 2, 0.1);
}

/* =========================
   PASSWORD FIELD CONTAINER
========================= */
.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 45px;
}

.password-wrapper i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}

.password-wrapper i:hover {
    color: var(--darkest-bg);
}

/* =========================
   FORGOT PASSWORD
========================= */
.forgot-password {
    text-align: right;
    margin: 6px 0 12px 0;
}

.forgot-link {
    color: var(--dark-bg);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.forgot-link:hover {
    text-decoration: underline;
    color: var(--main-bg);
}

/* =========================
   BUTTON ACTIONS
========================= */
.login-form button[type="submit"] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--dark-bg);
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--default-font-family);
    transition: background 0.2s, transform 0.1s;
}

.login-form button[type="submit"]:hover {
    background: var(--main-bg);
}

.login-form button[type="submit"]:active {
    transform: scale(0.99);
}

button:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
}

/* =========================
   MESSAGES AND ALERTS
========================= */
.form-message {
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
    font-weight: 500;
    color: var(--text-color);
}

/* =========================
   SPINNER LOADER
========================= */
.loading {
    text-align: center;
    margin-top: 15px;
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #f0d5d2;
    border-top: 3px solid var(--main-bg);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto 8px;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}

#passwordStep {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* ==========================================
   MOBILE PHONES (up to 599px)
========================================== */
@media screen and (max-width: 599px) {
    .main-container {
        flex-direction: column;
        justify-content: flex-start;
    }

    .pic-wrapper {
        width: 100%;
        min-height: 250px;
        background-position: center bottom;
    }

    .right-container {
        width: 100%;
        padding: 10px;
    }

    .TSH-wrapper {
        margin: 10px 0 0 0;
    }

    .TSHpic {
        width: 160px;
    }

    .form-wrapper {
        margin: 5px auto 30px auto;
        padding: 0 12px;
    }

    .login-form {
        padding: 30px 20px;
        box-shadow: 0 8px 24px rgba(124, 20, 0, 0.06);
    }

    .wlcb {
        font-size: 24px;
    }
}

/* ==========================================
   TABLETS (600px to 1019px)
========================================== */
@media screen and (min-width: 600px) and (max-width: 1019px) {
    .pic-wrapper {
        min-height: 300px;
        background-image: url('../assets/images/loginsignuptablet-05.png');
    }

    .TSHpic {
        width: 180px;
    }

    .form-wrapper {
        max-width: 450px;
    }
}

/* =========================
   DESKTOP (1020px and up)
========================= */
@media screen and (min-width: 1020px) {
    .main-container {
        flex-direction: row;
        height: 100vh;
        overflow: hidden;
    }

    .pic-wrapper {
        width: 45%;
        height: 100%;
        min-height: 100vh;
        background-image: url('../assets/images/loginsignup-03.png');
        background-position: center center;
    }

    .right-container {
        width: 50%;
        height: 100vh;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
    }

    .TSHpic {
        width: 190px;
    }

    .form-wrapper {
        max-width: 440px;
    }
}