/* ============================================================
   TRADE ACCOUNT - SHARED STYLES
   ============================================================ */


/* ============================================================
   LAYOUT
   ============================================================ */

.trade-page{
    margin:0;
    padding:36px 0 70px;
    background:#f4f7fa;
}

.trade-wrap{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
}


/* ============================================================
   MAIN TRADE NAVIGATION
   ============================================================ */

.trade-main-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 18px;
}

.trade-main-nav__link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:40px;
    padding:0 13px;
    border:1px solid #cbd8e1;
    border-radius:7px;
    background:#fff;
    color:#163047;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.trade-main-nav__link:hover{
    background:#f3f7f9;
    border-color:#b8c9d5;
    color:#163047;
}

.trade-main-nav__link i{
    color:#148cc9;
}

.trade-main-nav__link--signout{
    margin-left:4px;
}


/* ============================================================
   SHARED BUTTONS
   ============================================================ */

.trade-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 17px;
    border:1px solid transparent;
    border-radius:8px;
    font:inherit;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    cursor:pointer;
    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        opacity .15s ease;
}

.trade-btn--primary{
    background:#148cc9;
    border-color:#148cc9;
    color:#fff;
}

.trade-btn--primary:hover{
    background:#0d7fb9;
    border-color:#0d7fb9;
    color:#fff;
}

.trade-btn--secondary{
    background:#fff;
    border-color:#cbd8e1;
    color:#163047;
}

.trade-btn--secondary:hover{
    background:#f3f7f9;
    border-color:#b8c9d5;
    color:#163047;
}

.trade-btn--order{
    background:#2e8b57;
    border-color:#2e8b57;
    color:#fff;
}

.trade-btn--order:hover{
    background:#247247;
    border-color:#247247;
    color:#fff;
}

.trade-btn--disabled{
    opacity:.55;
    cursor:not-allowed;
    pointer-events:none;
}


/* ============================================================
   QUOTE -> ORDER PROGRESS
   ============================================================ */

.trade-order-progress{
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto;
    align-items:center;
    gap:12px;
    margin:0 0 22px;
    padding:18px 20px;
    background:#fff;
    border:1px solid #d9e2ea;
    border-radius:16px;
}

.trade-order-progress__step{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.trade-order-progress__circle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border:2px solid #c8d4dc;
    border-radius:50%;
    background:#edf2f5;
    color:#6d7f8c;
    font-weight:700;
}

.trade-order-progress__text{
    min-width:0;
}

.trade-order-progress__text strong,
.trade-order-progress__text span{
    display:block;
}

.trade-order-progress__text strong{
    color:#516674;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap;
}

.trade-order-progress__text span{
    margin-top:2px;
    color:#8a99a3;
    font-size:11px;
}

.trade-order-progress__line{
    height:2px;
    background:#d8e1e7;
}

.trade-order-progress__line.is-complete{
    background:#2e8b57;
}

.trade-order-progress__step.is-complete .trade-order-progress__circle{
    background:#2e8b57;
    border-color:#2e8b57;
    color:#fff;
}

.trade-order-progress__step.is-current .trade-order-progress__circle{
    background:#0063a6;
    border-color:#0063a6;
    color:#fff;
}

.trade-order-progress__step.is-current .trade-order-progress__text strong{
    color:#163047;
}

.trade-order-progress__step.is-current .trade-order-progress__text span{
    color:#0063a6;
    font-weight:700;
}


/* ============================================================
   ORDERED QUOTE FLAG
   ============================================================ */

.trade-ordered-flag{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin:0 0 20px;
    padding:16px 18px;
    background:#f1faf5;
    border:1px solid #bfe1cc;
    border-radius:14px;
}

.trade-ordered-flag__title{
    color:#226b45;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
}

.trade-ordered-flag__meta{
    margin-top:4px;
    color:#526976;
    font-size:13px;
}


/* ============================================================
   STATUS BADGES
   ============================================================ */

.trade-status-badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    background:#edf2f5;
    color:#526976;
    font-size:11px;
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.trade-status-badge--ordered{
    background:#e4f5ea;
    color:#226b45;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:800px){

    .trade-order-progress{
        grid-template-columns:1fr;
    }

    .trade-order-progress__line{
        width:2px;
        height:18px;
        margin-left:16px;
    }

    .trade-order-progress__text strong{
        white-space:normal;
    }
}

@media(max-width:600px){

    .trade-page{
        padding:24px 0 50px;
    }

    .trade-main-nav{
        justify-content:flex-start;
    }

    .trade-main-nav__link--signout{
        margin-left:0;
    }

    .trade-btn{
        width:100%;
    }
}