/* ==========================================================
   BELGRAVE PRIVATE BANK
   SHARED COMPONENTS
==========================================================

   CONTENTS
   --------
   1. Buttons
   2. Activity Panel
   3. Footer

========================================================== */


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

.btn,
.login-btn{

    display:inline-flex;

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

    gap:.6rem;

    padding:15px 30px;

    border:none;

    border-radius:var(--radius-sm);

    cursor:pointer;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.02em;

    text-decoration:none;

    transition:
        transform .35s ease,
        background-color .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}



.btn-primary,
.login-btn{

    background:var(--gold);

    color:#0B0B0D;

}



.btn-secondary{

    background:transparent;

    color:var(--gold);

    border:1px solid rgba(201,162,39,.55);

    backdrop-filter:blur(14px);

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

}



.btn:hover,
.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-sm);

}



.btn-primary:hover,
.login-btn:hover{

    background:var(--gold-light);

}



.btn-secondary:hover{

    background:rgba(201,162,39,.10);

    border-color:var(--gold);

    color:#FFF;

}



.btn:focus-visible,
.login-btn:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:4px;

}



/* ==========================================================
   ACTIVITY PANEL
========================================================== */

.activity-panel{

    position:fixed;

    right:20px;

    bottom:20px;

    width:280px;

    overflow:hidden;

    z-index:9999;

    color:#FFF;

    font-size:12px;

    background:var(--surface);

    border:1px solid rgba(201,162,39,.40);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-md);

    transition:.35s ease;

}



.activity-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 14px;

    cursor:pointer;

    background:#0F141D;

    border-bottom:1px solid rgba(201,162,39,.25);

}



.activity-header h4{

    margin:0;

    color:var(--gold);

    font-size:.78rem;

    letter-spacing:.05em;

}



.activity-log{

    max-height:160px;

    overflow-y:auto;

    padding:10px;

}



.activity-log div,
#activityLog div{

    margin-bottom:6px;

    opacity:.92;

}



.activity-panel.collapsed .activity-log{

    display:none;

}



/* ==========================================================
   FOOTER
========================================================== */

.footer{

    padding:90px 0;

    background:#0F172A;

    border-top:1px solid var(--border);

}



.footer .container{

    display:block;

}



.footer-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:50px;

    margin-bottom:50px;

}



.footer-logo{

    width:56px;

    height:auto;

    margin-bottom:20px;

}



.footer h3,
.footer h4{

    margin-bottom:16px;

    color:var(--gold);

}



.footer h3{

    font-size:1.4rem;

}



.footer p{

    margin:8px 0;

    line-height:1.8;

}



.footer a{

    color:#CBD5E1;

    transition:
        color .3s ease,
        opacity .3s ease;

}



.footer a:hover{

    color:var(--gold);

}



.copyright{

    margin-top:30px;

    padding-top:30px;

    text-align:center;

    color:#777;

    border-top:1px solid var(--border);

}



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

@media (max-width:768px){

    .btn,
    .login-btn{

        width:100%;

    }

    .footer{

        padding:70px 0;

    }

    .footer-grid{

        gap:40px;

    }

}