/* =========================================
   L2XTREME ACCOUNT PANEL
========================================= */

.account-grid{
    display:grid;
    grid-template-columns:200px 1fr;
    gap:20px;
    align-items:start;
}
.account-wrapper{

    width:1100px;

    max-width:95%;

    margin:40px auto;

}

.account-row{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:20px;

    margin-top:20px;

}

/* Panel gebruikt dezelfde stijl als de website */

.account-panel{
    margin-bottom:20px;
}

.char-table{
    width:100%;
    border-collapse:collapse;
}
/* =========================================
   CHARACTER CARDS
========================================= */

.character-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:15px;
    margin-top:15px;
}

.character-card{

    background:#f8efd8;

    border:1px solid #b18b48;

    padding:15px;

    transition:.25s;

    box-shadow:0 2px 5px rgba(0,0,0,.08);

}

.character-card:hover{

    background:#fff8e8;

    transform:translateY(-2px);

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.character-name{

    color:#32CD32;

    font-size:20px;

    font-weight:bold;

    margin-bottom:10px;

}

.character-info{

    line-height:1.8;

    color:#5a3b16;

}

.character-status{

    margin-top:12px;

    font-weight:bold;

}

.char-table th{
    background:#b18b48;
    color:#fff7d0;
    padding:10px;
    text-align:center;
    border-bottom:2px solid #8d6a35;
}

.char-table td{
    padding:10px;
    text-align:center;
    border-bottom:1px solid rgba(0,0,0,.10);
}

.char-table tr:nth-child(even){
    background:rgba(255,255,255,.15);
}

.char-table tr:hover{
    background:rgba(177,139,72,.18);
}

.player-name{
    color:#32CD32;
    font-size:18px;
    font-weight:bold;
}

.online{
    color:#00bb44;
    font-weight:bold;
}

.offline{
    color:#d64545;
    font-weight:bold;
}

.coin-box{

    text-align:center;

    padding:20px;

}

.coin-icon{

    font-size:48px;

    margin-bottom:8px;

}

.coin-value{

    color:#D4AF37;

    font-size:42px;

    font-weight:bold;

    margin-bottom:5px;

}

.coin-text{

    color:#6b4b1c;

    font-size:14px;

    margin-bottom:20px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.coin-box .btn{

    width:100%;

    margin-bottom:10px;

}

.account-info{

    width:100%;

    border-collapse:collapse;

}

.account-info td{

    padding:10px;

    border-bottom:1px solid rgba(0,0,0,.10);

}

.account-info td:first-child{

    font-weight:bold;

    color:#6b4b1c;

}

@media(max-width:1000px){

.account-grid{

grid-template-columns:1fr;

}
/* =========================================
   EQUIPMENT
========================================= */

.equipment-grid{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:12px;

    margin-top:25px;

}

.equip-slot{

    background:#f7eed5;

    border:1px solid #d7bf84;

    padding:12px 16px;

    font-weight:bold;

    color:#6b4b1c;

}

.equip-item{

    background:#fff8e8;

    border:1px solid #e2cf9b;

    padding:12px 16px;

}

.empty{

    color:#999;

    font-style:italic;

}
/* =========================================
   COIN SHOP
========================================= */

.shop-grid{

    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:20px;

}

.shop-card{

    background:#f8efd8;
    border:1px solid #b18b48;
    border-radius:8px;
    padding:20px;
    text-align:center;
    transition:.25s;

}

.shop-card:hover{

    background:#fff8e8;
    transform:translateY(-3px);

}

.shop-item-name{

    font-size:20px;
    font-weight:bold;
    color:#6b4b1c;
    margin-bottom:10px;

}

.shop-price{

    color:#d4af37;
    font-size:18px;
    font-weight:bold;
    margin:15px 0;

}

.shop-card .btn{

    width:100%;
}
/* =========================================
   PURCHASE HISTORY
========================================= */

.success-box{

    background:#dff5d8;

    border:1px solid #6ab04c;

    color:#2d6a24;

    padding:15px;

    margin-bottom:20px;

    text-align:center;

    font-weight:bold;

}