/* ==========================================================
   BELGRAVE PRIVATE BANK
   DIGITAL BANKING COMPONENTS
========================================================== */


/* ==========================================================
   CARD FAN
========================================================== */

.cards-fan{

    position:absolute;

    inset:0;

    z-index:5;

    pointer-events:none;

}


.cards-fan .card{

    position:absolute;

    transition:
        transform .4s ease,
        opacity .4s ease,
        filter .4s ease;

}


.cards-fan img{

    display:block;

    width:clamp(145px,22vw,300px);

    height:auto;

    border-radius:20px;

    user-select:none;

    pointer-events:none;

    filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));

    transition:transform .4s ease;

}


/* ==========================================================
   CARD POSITIONS
========================================================== */

.card-left-back{

    left:50%;
    top:50%;

    transform:
        translate(-240px,-180px)
        rotate(-18deg);

    z-index:2;

}


.card-left-front{

    left:50%;
    top:50%;

    transform:
        translate(-270px,-20px)
        rotate(-10deg);

    z-index:5;

}


.card-right-back{

    left:50%;
    top:50%;

    transform:
        translate(40px,-180px)
        rotate(18deg);

    z-index:2;

}


.card-right-front{

    left:50%;
    top:50%;

    transform:
        translate(70px,-20px)
        rotate(10deg);

    z-index:5;

}


/* ==========================================================
   HOVER EFFECTS
========================================================== */

.cards-fan:hover .card{

    opacity:.75;

}


.cards-fan .card:hover{

    opacity:1;

    z-index:20;

    filter:brightness(1.08);

}


.cards-fan .card:hover img{

    transform:
        translateY(-10px)
        scale(1.03);

}


/* ==========================================================
   BANKING DASHBOARD
========================================================== */

.banking-dashboard{

    position:relative;

    width:100%;

    max-width:520px;

    padding:38px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.02)
        );

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(213,188,115,.22);

    box-shadow:
        0 40px 100px rgba(0,0,0,.65),
        inset 0 0 40px rgba(213,188,115,.05);

}


.banking-dashboard::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(213,188,115,.18),
            transparent
        );

    opacity:.35;

    pointer-events:none;

}


/* ==========================================================
   DASHBOARD HEADER
========================================================== */

.banking-dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}


.banking-dashboard-header span{

    font-size:.75rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:rgba(255,255,255,.45);

}


.banking-dashboard-header strong{

    font-size:1.2rem;

    color:var(--gold-light);

}


/* ==========================================================
   ACCOUNT BALANCE
========================================================== */

.account-balance{

    margin-bottom:28px;

    padding:30px;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(213,188,115,.12),
            rgba(255,255,255,.03)
        );

    border:1px solid rgba(213,188,115,.18);

}


.account-balance small{

    display:block;

    margin-bottom:12px;

    font-size:.7rem;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:rgba(255,255,255,.55);

}


.account-balance h3{

    font-size:clamp(2rem,3vw,2.4rem);

    font-weight:500;

    letter-spacing:-1px;

    color:#fff;

}


/* ==========================================================
   ACCOUNT META
========================================================== */

.account-meta{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-top:22px;

}


.account-meta div{

    display:flex;

    flex-direction:column;

    gap:6px;

}


.account-meta span{

    font-size:.7rem;

    text-transform:uppercase;

    letter-spacing:1px;

    color:rgba(255,255,255,.45);

}


.account-meta strong{

    color:var(--gold-light);

    font-size:.95rem;

    font-weight:500;

}


/* ==========================================================
   TRANSACTIONS
========================================================== */

.transactions-preview{

    margin-top:30px;

}


.transactions-preview h4{

    margin-bottom:20px;

    color:#fff;

    font-size:1.25rem;

}


.transaction-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

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

}


.transaction-name{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.transaction-name strong{

    color:#fff;

    font-size:.92rem;

}


.transaction-name span{

    color:rgba(255,255,255,.45);

    font-size:.75rem;

}


.transaction-amount{

    color:var(--gold-light);

    font-weight:600;

}


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

@media (max-width:992px){

    .card-left-back{

        transform:
            translate(-180px,-150px)
            rotate(-18deg);

    }

    .card-left-front{

        transform:
            translate(-210px,-10px)
            rotate(-10deg);

    }

    .card-right-back{

        transform:
            translate(20px,-150px)
            rotate(18deg);

    }

    .card-right-front{

        transform:
            translate(50px,-10px)
            rotate(10deg);

    }

}


@media (max-width:768px){

    .card-left-back{

        transform:
            translate(-145px,-120px)
            rotate(-15deg);

    }

    .card-left-front{

        transform:
            translate(-165px,0)
            rotate(-8deg);

    }

    .card-right-back{

        transform:
            translate(0,-120px)
            rotate(15deg);

    }

    .card-right-front{

        transform:
            translate(20px,0)
            rotate(8deg);

    }

    .banking-dashboard{

        padding:28px;

    }

    .account-meta{

        flex-direction:column;

        gap:16px;

    }

}


@media (max-width:480px){

    .banking-dashboard{

        padding:24px;

        border-radius:20px;

    }

    .transactions-preview h4{

        font-size:1.1rem;

    }

}
/* ==========================================================
   HERO
========================================================== */

.dashboard-hero{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.hero-tag{
    display:inline-block;
    background:#F5EFD9;
    color:#B8860B;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:2px;
    padding:10px 18px;
    border-radius:30px;
    margin-bottom:16px;
}

.dashboard-hero h1{
    font-family:"Playfair Display",serif;
    font-size:3rem;
    color:#111827;
    line-height:1.1;
    margin-bottom:20px;
}

.hero-description{
    max-width:650px;
    color:#64748B;
    font-size:1.15rem;
    line-height:1.8;
}

/* Balance Card */

.balance-card{
    background:#fff;
    border-radius:24px;
    padding:30px;
    box-shadow:0 20px 45px rgba(15,23,42,.08);
}

.balance-card small{
    color:#64748B;
}

.balance-card h2{
    font-family:"Playfair Display",serif;
    font-size:3rem;
    margin:15px 0;
}

.secure-badge{
    display:inline-block;
    background:#DCFCE7;
    color:#15803D;
    padding:10px 18px;
    border-radius:30px;
    font-weight:600;
}

/* Portfolio */

.portfolio-summary{
    width:100%;
}

.summary-card{
    background:white;
    border-radius:24px;
    padding:30px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
}

.summary-card h3{
    margin-bottom:25px;
    font-size:1.4rem;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid #EEF2F7;
}

.summary-row:last-child{
    border-bottom:none;
}

.positive{
    color:#16A34A;
}