/* =========================
   ACCOUNT MENU CARD
========================= */

.accountMenuItem{

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

    margin:16px 10px;
    padding:16px;

    background:#fff;

    border-radius:20px;

    box-shadow:
    0 8px 24px rgba(15,23,42,.08);

    cursor:pointer;

    transition:.2s;
}

.accountMenuItem:active{

    transform:scale(.98);
}

.accountMenuLeft{

    display:flex;
    align-items:center;
    gap:14px;

    min-width:0;
}

.accountMenuTitle{

    font-size:16px;
    font-weight:700;

    color:#0f172a;
}

.accountMenuSub{

    font-size:12px;

    color:#64748b;

    margin-top:4px;
}

.accountMenuItem .fa-chevron-right{

    color:#94a3b8;

    font-size:14px;

    flex-shrink:0;
}

/* =========================
   CREDIT SCREEN
========================= */

.creditScreenHeader h2{

    margin:0;

    font-size:22px;
    font-weight:800;
}

.creditScreenHeader p{

    margin:4px 0 0;

    color:#64748b;
    font-size:13px;
}

.creditScreenHeader{
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px;
    position:relative;
    z-index:10;
}

.creditBackBtn{
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:#f1f5f9;
    cursor:pointer;

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

    color:#0f172a;
    font-size:18px;
    flex-shrink:0;
}

.creditMenuIcon{

    width:48px;
    height:48px;

    border-radius:50%;

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

    color:#fff;

    font-size:18px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    box-shadow:
    0 8px 18px rgba(37,99,235,.25);

    flex-shrink:0;
}

.accountMenuSub{

    font-size:12px;

    color:#64748b;

    margin-top:2px;
}


/* =========================
   CREDIT LIMIT & SCORE
========================= */

.creditScoreCard{

    margin:18px 10px;

    padding:18px 18px 16px;

    background:#ffffff;

    border-radius:32px;

    position:relative;

    overflow:hidden;

    cursor:pointer;

    transition:0.2s;

    box-shadow:
    0 10px 35px rgba(15,23,42,0.10);

    animation:
    creditFloat 4s ease-in-out infinite;
}

/* GLOW BORDER */

.creditScoreCard::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:34px;

    background:
    linear-gradient(
        90deg,
        #22c55e,
        #3b82f6,
        #8b5cf6,
        #22c55e
    );

    background-size:300% 300%;

    animation:
    borderGlow 6s linear infinite;

    z-index:0;

    opacity:0.8;
}

/* WHITE LAYER */

.creditScoreCard::after{

    content:"";

    position:absolute;

    inset:2px;

    background:#ffffff;

    border-radius:30px;

    z-index:1;
}

/* CONTENT ABOVE */

.creditTop,
.creditGaugeWrap,
.creditBottom,
.shine{

    position:relative;
    z-index:2;
}

/* ACTIVE */

.creditScoreCard:active{

    transform:scale(0.988);
}

/* SHINE EFFECT */

.shine{

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.5),
        transparent
    );

    transform:skewX(-20deg);

    animation:
    shineMove 5s infinite;
}

/* TOP */

.creditTop{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    margin-bottom:14px;
}

.creditHeading{

    font-size:21px;
    font-weight:800;

    color:#0f172a;

    line-height:1.2;
}

.creditSubHeading{

    margin-top:5px;

    font-size:13px;
    font-weight:500;

    color:#64748b;
}

/* ARROW */

.creditArrowBtn{

    width:44px;
    height:44px;

    border-radius:16px;

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

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    font-size:16px;

    flex-shrink:0;

    box-shadow:
    0 8px 18px rgba(37,99,235,0.28);
}

/* GAUGE */

.creditGaugeWrap{

    display:flex;
    justify-content:center;

    margin-bottom:18px;
}

.creditGauge{

    width:205px;
    height:205px;

    border-radius:50%;

    position:relative;

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

    background:
    conic-gradient(
        #22c55e 0deg,
        #4ade80 90deg,
        #84cc16 170deg,
        #facc15 240deg,
        #fb923c 300deg,
        #ef4444 360deg
    );

    animation:
    gaugePulse 3s ease-in-out infinite;

    box-shadow:
    inset 0 0 20px rgba(255,255,255,0.55),
    0 8px 20px rgba(15,23,42,0.12);
}

/* INNER */

.gaugeInner{

    width:158px;
    height:158px;

    border-radius:50%;

    background:#fff;

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

    box-shadow:
    inset 0 0 12px rgba(0,0,0,0.05);
}

/* PERCENT */

.gaugePercent{

    font-size:34px;
    font-weight:900;

    color:#0f172a;

    line-height:1;
}

/* LABEL */

.gaugeLabel{

    margin-top:6px;

    font-size:13px;
    font-weight:600;

    color:#64748b;
}

/* BADGE */

.gaugeBadge{

    margin-top:10px;

    padding:6px 14px;

    border-radius:999px;

    background:#dcfce7;

    color:#15803d;

    font-size:12px;
    font-weight:700;
}

/* BOTTOM */

.creditBottom{

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

    margin-top:4px;
}

/* INFO */

.creditInfoBox{

    flex:1;

    text-align:center;
}

.creditInfoTitle{

    font-size:13px;
    font-weight:600;

    color:#64748b;

    margin-bottom:6px;
}

.creditInfoValue{

    font-size:24px;
    font-weight:800;

    color:#0f172a;
}

/* DIVIDER */

.creditInfoDivider{

    width:1px;
    height:42px;

    background:#e2e8f0;

    margin:0 10px;
}

/* =========================
   ANIMATIONS
========================= */

/* FLOAT */

@keyframes creditFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-6px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* GLOW */

@keyframes borderGlow{

    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:100% 50%;
    }

}

/* PULSE */

@keyframes gaugePulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

/* SHINE */

@keyframes shineMove{

    100%{
        left:140%;
    }

}