.grey-container{
    background: var(--text-secondary-light);
    padding: 2em;
    border-radius: 1em;
}

.side-tab{
    border-right:1px solid #ddd;
    color: var(--color-primary-alt);
    flex:2;
    padding:0.5em 0.5em;
    max-width:150px;
    font-size:0.9em;
    font-weight:600;
}

.content-tab{
    flex:5;
    padding:0 1em;
}

.content-card.user-info{
    padding-block:3em;
}

.content-card.user-info .cred-circle{
    background:var(--color-secondary);
    color: var(--color-primary-alt);
    height:2.5em;
    width:2.5em;
    font-size:2em;
    font-weight:800;
    border-radius:2em;
}

.content-card.user-info .direct-info b{
    font-size:1.2em;
}

.content-card.user-info .direct-info .drop-down-btn{
    font-size:0.9em;
}

.content-card.user-info small{
    color:var(--text-secondary);
}

.content-card{
    padding-block: 1.5em;
}

.grey-container .beneficiary-btn{
    border:1px solid var(--color-primary-alt);
    color:var(--color-primary-alt);
    padding:0.5em 0.7em;
    border-radius:0.5em;
    font-size:0.8em;
    font-weight:500;
}

.grey-container .invite-friends{
    width:45%;
    font-size:0.9em;
}

.grey-container .invite-friends h2{
    text-align:center;
}

.grey-container .invite-friends .btns .btn{
    border-radius:1em;
    padding-block:1.5em;
    width:11em;
    text-align:center;
    font-size:0.8em;
    color: var(--color-primary-alt-2);
    border: 1px solid var(--color-primary-alt-2);
}

.grey-container .invite-friends .btns .btn.green{
    background: var(--color-primary-alt-2);
    color: #fff;
}

.content-card.rank-card .ranks .rank button{
    background: var(--success-light);
    color: var(--color-primary-alt-2);
    padding-block:1em;
    cursor: not-allowed;
}

.content-card.rank-card .ranks .rank.unlocked button{
    cursor:pointer;
}

.content-card.rank-card .ranks img{
    --s: 4em;
    height:clamp(var(--s), var(--s), var(--s));
    width:clamp(var(--s), var(--s), var(--s));
}

.content-card.rank-card .ranks .rank:not(.unlocked) img{
    filter: blur(2px);
    opacity:0.8;
}


.payment-method {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    padding: 20px;
}

/* .payment-method.main{
    background: #fbfffb;
} */

.payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.payment-name {
    font-size: 18px;
    font-weight: 500;
    color: #2d3748;
    flex-grow: 1;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.payment-name:focus {
    outline: none;
    border-color: #4299e1;
    background-color: #ebf8ff;
}

.payment-details {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    resize: vertical;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
}

.payment-details:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
}

.payment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.payment-action .btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.payment-action .btn-edit {
    background-color: #edf2f7;
    color: #4a5568;
}

.payment-action .btn-edit:hover {
    background-color: #e2e8f0;
}

.payment-action .btn-delete {
    background-color: #fed7d7;
    color: #e53e3e;
}

.btn-delete:hover {
    background-color: #feb2b2;
}

.btn-add {
    background-color: #4299e1;
    color: white;
    padding: 10px 20px;
    margin-top: 10px;
}

.btn-add:hover {
    background-color: #3182ce;
}

.content-card{
    overflow-x:auto;
}

.user-info-details{
    gap:5em;
}

@media (max-width:768px){
    .grey-container{
        flex-direction:column;
        gap:2em;
        padding:0.5em;
    }
    .grey-container .content-tab{
        font-size:0.9em;
    }

    .grey-container .side-tab{
        flex-direction:row;
        border:0;
    }

    .content-card{
        padding:1em;
    }

    .grey-container .content-card.user-info, .user-info-details{
        flex-direction:column;
        gap:1em
    }

    .referral-sect{
        flex-direction:column;
    }

    .referral-sect > .content-card{
        width:100%;
        font-size:0.9em;
    }

    .content-card.rank-card .ranks .rank button{
        padding:0.8em;
    }
}