/* ============================================================
   TRADEIQX MARKETS — SHARED AUTH STYLES
   ------------------------------------------------------------
   Used by:  login.php  +  register.php
   Place this file in the ROOT directory next to both pages.
   ============================================================ */


/* ==========================================================
   1. RESET & DESIGN TOKENS
   ========================================================== */

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

:root {

    --blue:   #1768e8;
    --blue2:  #4db7ff;

    --dark:   #020817;
    --dark2:  #061638;
    --dark3:  #0b2050;

    --text:   #f7fbff;
    --muted:  #8da6cf;

    --line:   rgba(255,255,255,.08);

    --green:  #36dd8e;
}

html {
    min-height: 100%;
}

body {

    min-height: 100vh;

    font-family: "Inter", sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(25,116,255,.38),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(43,49,255,.27),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #020714,
            #06183a 52%,
            #0b1762
        );

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    overflow-x: hidden;
}


/* ==========================================================
   2. BACKGROUND GLOW
   ========================================================== */

.glow {

    position: fixed;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    background: #1685ff;

    filter: blur(130px);

    opacity: .12;

    pointer-events: none;
}

.glow.one {
    top: -180px;
    left: -130px;
}

.glow.two {

    right: -170px;
    bottom: -160px;

    background: #353cff;
}


/* ==========================================================
   3. LOGIN WRAPPER  (login.php)
   ========================================================== */

.auth-wrapper {

    width: 100%;

    max-width: 1020px;

    min-height: 620px;

    display: grid;

    grid-template-columns: .92fr 1.08fr;

    border-radius: 36px;

    overflow: hidden;

    background:
        rgba(5,19,50,.78);

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 35px 100px rgba(0,0,0,.42),
        inset 2px 2px 8px rgba(255,255,255,.04);

    backdrop-filter: blur(25px);
}

.auth-showcase {

    position: relative;

    padding: 45px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(67,168,255,.25),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #0c347e,
            #061735
        );
}

.auth-showcase::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    right: -110px;
    bottom: -110px;

    background:
        rgba(38,105,255,.25);

    filter: blur(30px);
}

.showcase-content {

    position: relative;

    z-index: 2;

    max-width: 400px;
}

.showcase-bottom {

    position: relative;

    z-index: 2;

    color: #718ab3;

    font-size: 9px;
}

.auth-form-side {

    padding: 55px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.auth-form {

    width: 100%;

    max-width: 410px;
}


/* ==========================================================
   4. REGISTER WRAPPER  (register.php)
   ========================================================== */

.register-wrapper {

    width: 100%;

    max-width: 1060px;

    min-height: 680px;

    display: grid;

    grid-template-columns: .78fr 1.22fr;

    border-radius: 36px;

    overflow: hidden;

    background:
        rgba(5,19,50,.80);

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 35px 100px rgba(0,0,0,.42),
        inset 2px 2px 8px rgba(255,255,255,.04);

    backdrop-filter: blur(25px);
}

.register-side {

    position: relative;

    padding: 45px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(67,168,255,.24),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #0c347e,
            #061735
        );
}

.register-side::after {

    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    right: -130px;
    bottom: -130px;

    background:
        rgba(38,105,255,.22);

    filter: blur(30px);
}

.register-message {

    position: relative;

    z-index: 2;

    max-width: 350px;
}

.copyright {

    position: relative;

    z-index: 2;

    color: #718ab3;

    font-size: 9px;
}

.register-form-side {

    padding: 45px 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow-y: auto;
}

.register-form {

    width: 100%;

    max-width: 500px;
}


/* ==========================================================
   5. BRAND  (shared by both pages)
   ========================================================== */

.brand {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: white;

    position: relative;

    z-index: 2;
}

.brand-icon {

    width: 43px;
    height: 43px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #60c4ff,
            #1768e8 60%,
            #102c9a
        );

    box-shadow:
        inset 2px 2px 7px rgba(255,255,255,.18),
        inset -4px -4px 9px rgba(0,0,0,.25),
        0 10px 25px rgba(23,104,232,.3);
}

.brand-name {

    font-size: 18px;

    font-weight: 900;

    letter-spacing: -.7px;
}

.brand-name span {

    color: var(--blue2);
}

.brand-sub {

    display: block;

    color: #7795c2;

    font-size: 7px;

    letter-spacing: 1.6px;

    margin-top: 2px;
}


/* ==========================================================
   6. SIDE CONTENT  (headings / tag / paragraphs)
   ========================================================== */

.tag {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    border-radius: 30px;

    background:
        rgba(82,180,255,.10);

    border:
        1px solid rgba(111,198,255,.15);

    color: #a8dcff;

    font-size: 9px;

    font-weight: 800;

    margin-bottom: 20px;
}

.tag-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:
        0 0 12px var(--green);
}

.showcase-content h1,
.register-message h1 {

    font-size: 42px;

    line-height: 1.02;

    letter-spacing: -2.5px;

    font-weight: 900;
}

.showcase-content h1 span {
    color: #5abaff;
}

.register-message h1 span {
    color: #59baff;
}

.showcase-content p,
.register-message p {

    margin-top: 18px;

    color: #91aad1;

    font-size: 12px;

    line-height: 1.8;
}


/* ==========================================================
   7. LOGIN MINI CHART
   ========================================================== */

.chart-box {

    position: relative;

    margin-top: 30px;

    height: 135px;

    border-radius: 23px;

    background:
        rgba(1,12,32,.32);

    border:
        1px solid rgba(255,255,255,.07);

    overflow: hidden;

    box-shadow:
        inset 2px 2px 8px rgba(255,255,255,.03),
        inset -5px -5px 12px rgba(0,0,0,.22);
}

.chart-grid {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 28px 28px;
}

.chart-box svg {

    position: absolute;

    width: 100%;
    height: 100%;

    inset: 0;
}


/* ==========================================================
   8. REGISTER BENEFITS LIST
   ========================================================== */

.benefits {

    display: grid;

    gap: 12px;

    margin-top: 28px;
}

.benefit {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #bdd0ed;

    font-size: 10px;

    font-weight: 600;
}

.benefit i {

    width: 27px;
    height: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(70,175,255,.10);

    color: #59baff;

    font-size: 10px;
}


/* ==========================================================
   9. FORM HEADING
   ========================================================== */

.form-heading {

    margin-bottom: 30px;
}

.form-heading h2 {

    font-size: 30px;

    letter-spacing: -1.5px;

    font-weight: 900;
}

.form-heading p {

    margin-top: 8px;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.6;
}


/* ==========================================================
   10. REGISTER FORM GRID
   ========================================================== */

.form-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


/* ==========================================================
   11. FORM FIELDS  (shared by both pages)
   ========================================================== */

.form-group {

    margin-bottom: 17px;
}

.form-group.full {

    grid-column: 1 / -1;
}

.form-group label {

    display: block;

    margin-bottom: 8px;

    color: #b9cae4;

    font-size: 10px;

    font-weight: 700;
}

.input-wrap {

    position: relative;
}

.input-icon {

    position: absolute;

    left: 16px;

    top: 50%;

    transform: translateY(-50%);

    color: #6986b5;

    font-size: 12px;

    pointer-events: none;
}

.input-wrap input {

    width: 100%;

    height: 53px;

    border-radius: 16px;

    border:
        1px solid rgba(255,255,255,.08);

    outline: none;

    background:
        linear-gradient(
            145deg,
            rgba(18,48,105,.62),
            rgba(5,22,54,.72)
        );

    color: white;

    padding:
        0 45px;

    font-family: inherit;

    font-size: 12px;

    box-shadow:
        inset 2px 2px 7px rgba(255,255,255,.04),
        inset -4px -4px 9px rgba(0,0,0,.25);

    transition: .2s;
}

.input-wrap input:focus {

    border-color:
        rgba(76,183,255,.45);

    box-shadow:
        0 0 0 3px rgba(42,142,255,.08),
        inset 2px 2px 7px rgba(255,255,255,.04);
}

.input-wrap input::placeholder {

    color: #607ba5;
}

.password-toggle {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    border: 0;

    background: none;

    color: #718ab3;

    cursor: pointer;

    font-size: 12px;
}


/* ==========================================================
   12. LOGIN OPTIONS  (remember me / forgot password)
   ========================================================== */

.form-options {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin: 5px 0 22px;
}

.remember {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #8199bd;

    font-size: 9px;

    cursor: pointer;
}

.remember input {

    accent-color: #278bff;
}

.forgot {

    color: #5dbaff;

    font-size: 9px;

    font-weight: 700;
}


/* ==========================================================
   13. REGISTER PASSWORD STRENGTH
   ========================================================== */

.strength {

    display: flex;

    gap: 4px;

    margin-top: 7px;
}

.strength span {

    height: 3px;

    flex: 1;

    border-radius: 10px;

    background:
        rgba(255,255,255,.07);
}

.strength-text {

    color: #657fa7;

    font-size: 8px;

    margin-top: 5px;
}


/* ==========================================================
   14. REGISTER TERMS
   ========================================================== */

.terms {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin: 4px 0 18px;

    color: #748caf;

    font-size: 8px;

    line-height: 1.6;
}

.terms input {

    margin-top: 2px;

    accent-color: #278bff;
}

.terms a {

    color: #5dbaff;

    font-weight: 700;
}


/* ==========================================================
   15. SUBMIT BUTTON  (shared by both pages)
   ========================================================== */

.submit-btn {

    width: 100%;

    height: 54px;

    border: 0;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #52bdff,
            #1768e8
        );

    color: white;

    font-family: inherit;

    font-size: 12px;

    font-weight: 900;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    box-shadow:
        inset 2px 2px 7px rgba(255,255,255,.18),
        inset -5px -5px 10px rgba(0,0,0,.17),
        0 15px 30px rgba(22,104,232,.22);

    transition: .2s;
}

.submit-btn:hover {

    transform: translateY(-2px);
}


/* ==========================================================
   16. LOGIN DIVIDER  +  REGISTER LINK  +  FORM NOTE
   ========================================================== */

.divider {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 24px 0;
}

.divider span {

    height: 1px;

    flex: 1;

    background:
        rgba(255,255,255,.07);
}

.divider small {

    color: #5f78a0;

    font-size: 8px;

    font-weight: 700;
}

.register-link {

    text-align: center;

    color: #7189b0;

    font-size: 10px;
}

.register-link a {

    color: #5bbaff;

    font-weight: 800;
}

.form-note {

    margin-top: 22px;

    text-align: center;

    color: #516b94;

    font-size: 8px;

    line-height: 1.6;
}


/* ==========================================================
   17. LOGIN LINK  (register.php)
   ========================================================== */

.login-link {

    text-align: center;

    color: #7189b0;

    font-size: 10px;

    margin-top: 20px;
}

.login-link a {

    color: #5bbaff;

    font-weight: 800;
}


/* ==========================================================
   18. RESPONSIVE — LOGIN
   ========================================================== */

@media (max-width: 800px) {

    body {
        padding: 15px;
    }

    .auth-wrapper {

        grid-template-columns: 1fr;

        max-width: 520px;
    }

    .auth-showcase {

        min-height: 300px;

        padding: 30px;
    }

    .showcase-content h1 {
        font-size: 34px;
    }

    .chart-box {
        height: 100px;
    }

    .showcase-bottom {
        margin-top: 25px;
    }

    .auth-form-side {
        padding: 35px 25px 40px;
    }

}


/* ==========================================================
   19. RESPONSIVE — REGISTER
   ========================================================== */

@media (max-width: 850px) {

    .register-wrapper {

        grid-template-columns: 1fr;

        max-width: 540px;
    }

    .register-side {

        min-height: 330px;

        padding: 30px;
    }

    .register-message h1 {
        font-size: 34px;
    }

    .register-form-side {

        padding: 35px 25px 40px;
    }

}


/* ==========================================================
   20. RESPONSIVE — SMALL SCREENS
   ========================================================== */

@media (max-width: 500px) {

    body {
        padding: 12px;
    }

    .register-side {
        padding: 25px;
    }

    .register-form-side {

        padding:
            30px 18px 35px;
    }

    .form-grid {

        grid-template-columns: 1fr;
    }

    .form-group.full {

        grid-column: auto;
    }

    .form-heading h2 {
        font-size: 27px;
    }

}


@media (max-width: 430px) {

    .auth-showcase {
        padding: 25px;
    }

    .auth-form-side {

        padding:
            30px 18px 35px;
    }

}