/* Referral list table styles - similar to my_reward_table */
/*.referral-list-container {*/
/*    margin-top: 30px;*/
/*    background: #fff;*/
/*    border: 1px solid #e9ecef;*/
/*    border-radius: 8px;*/
/*    padding: 20px;*/
/*    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);*/
/*}*/

/*.referral-list-container h4 {*/
/*    margin: 0 0 20px 0;*/
/*    font-size: 18px;*/
/*    font-weight: 600;*/
/*    color: #333;*/
/*    border-bottom: 2px solid #0073aa;*/
/*    padding-bottom: 10px;*/
/*}*/

.referral-list-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    border: 0;
}

.referral-list-table th {
    padding: 15px 10px;
    border-bottom: 2px solid var(--brdcolor-gray-200);
    color: var(--wd-title-color);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: var(--wd-title-font-weight);
    font-style: var(--wd-title-font-style);
    font-family: var(--wd-title-font);
    vertical-align: middle;
    text-align: start;
}

/*.referral-list-table th:last-child {*/
/*    border-right: none;*/
/*}*/

.referral-list-table td {
    padding: 15px 12px;
    border-bottom: 1px solid var(--brdcolor-gray-300);
    vertical-align: middle;
    text-align: start;
}

.referral-list-table td:last-child, .referral-list-table tr:last-child td {
    border-right: none;
}

.referral-list-table tr:last-child td {
    border-bottom: none;
}

/*.referral-list-table tr:hover {*/
/*    background: #f8f9fa;*/
/*}*/

/*.referral-list-table td:first-child {*/
/*    font-weight: 500;*/
/*    color: #0073aa;*/
/*}*/

/*.referral-list-table td:last-child {*/
/*    font-weight: 600;*/
/*    color: #28a745;*/
/*}*/

.no-referrals {
    margin-top: 30px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.no-referrals p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /*.referral-list-container {*/
    /*    padding: 15px;*/
    /*    margin-top: 20px;*/
    /*}*/
    
    .referral-list-table {
        font-size: 12px;
    }
    
    .referral-list-table th,
    .referral-list-table td {
        padding: 10px 8px;
    }
    
    /*.referral-list-container h4 {*/
    /*    font-size: 16px;*/
    /*}*/
}

@media (max-width: 480px) {
    .referral-list-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .referral-list-table th,
    .referral-list-table td {
        min-width: 120px;
    }
}