.woo-referral-code-container {
    margin-bottom: 15px;
}

.woo-referral-code-container h4,
.woo-referral-link-container h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #555;
}

.woo-referral-code-display {
    display: flex;
    gap: 8px;
}

.woo-referral-code-display input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 14px;
    background: #f8f9fa;
}

.woo-referral-card-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.woo-referral-program-card.admin-preview {
    position: relative;
    margin: 20px auto;
    max-width: 100%;
}
.admin-preview-notice {
    background: #f0f0f1;
    color: #1d2327;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
}
.woo-referral-program-card {
    z-index: 99999;
}
.woo-referral-program-card {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    max-width: 90%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 20px;
    z-index: 9999;
    transition: all 0.3s ease;
}
.woo-referral-card-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
}
.woo-referral-card-close:hover {
    color: #333;
}
.woo-referral-card-content {
    margin-bottom: 15px;
}
.woo-referral-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.woo-referral-program-card.default {
    border-left: 5px solid #4CAF50;
}
.woo-referral-program-card.modern {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.woo-referral-program-card.minimal {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: none;
}
.woo-referral-program-card.highlight {
    background: #fff8e5;
    border: 2px solid #ffd700;
}
@media (max-width: 480px) {
    .woo-referral-program-card {
        bottom: 10px;
        right: 10px;
    }
}
.woocommerce-MyAccount-content-referrals {
    max-width: 1200px;
    margin: 0 auto;
}
.referral-header {
    margin-bottom: 30px;
    text-align: center;
}
.referral-header h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #333;
}
.referral-header .description {
    color: #666;
    font-size: 16px;
}
.referral-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.referral-left-col, 
.referral-right-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.referral-stats-section {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.referral-stats-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    color: #333;
}
.referral-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}
.stat-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
    transition: transform 0.3s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
}
.stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1;
}
.stat-card .stat-label {
    font-size: 14px;
    color: #7f8c8d;
    margin: 10px 0 0;
}
.referral-balance-section {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.referral-balance-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
    color: #333;
}
.balance-amount {
    font-size: 36px;
    font-weight: 700;
    color: #27ae60;
    margin: 10px 0;
    line-height: 1;
}
.referral-balance-section .description {
    color: #7f8c8d;
    font-size: 14px;
    margin: 0;
}
.referral-link-section {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.referral-link-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    color: #333;
}
.referral-link-card {
    margin-bottom: 20px;
}
.referral-link-card h4 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #555;
}
.referral-code-display, 
.referral-link-display {
    display: flex;
    gap: 10px;
}
.referral-code-display .code {
    flex: 1;
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 16px;
    border: 1px solid #e0e0e0;
}
.referral-link-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
}
.copy-button {
    white-space: nowrap;
    padding: 12px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}
.copy-button:hover {
    background: #2980b9;
}
.social-sharing-card {
    margin-top: 30px;
}
.social-sharing-card h4 {
    margin: 0 0 15px;
    font-size: 16px;
    color: #555;
}
.social-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(2, 1fr);    /* 2 rows */
    gap: 10px;
    margin: 15px 0;
}
.social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
    font-size: 14px;
    min-height: 40px;
    text-align: center;
}
.social-button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
.social-button .social-icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.social-button.facebook { 
    background: #3b5998; 
}
.social-button.facebook .social-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>');
}
.social-button.twitter { 
    background: #1da1f2; 
}
.social-button.twitter .social-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>');
}
.social-button.whatsapp { 
    background: #25d366; 
}
.social-button.whatsapp .social-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L4 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>');
}
.social-button.email { 
    background: #d97116;
}
.social-button.email .social-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/></svg>');
}
.social-button.linkedin { 
    background: #0077b5; 
}
.social-button.linkedin .social-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg>');
}
.social-button.pinterest { 
    background: #bd081c; 
}
.social-button.pinterest .social-icon {
    background-image: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"/></svg>');
}
.share-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 5px;
}
.woocommerce-table-wrapper {
    overflow-x: auto;
}
table.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
}
table.woocommerce-orders-table th {
    text-align: left;
    padding: 12px;
    background: #f8f9fa;
    font-weight: 600;
}
table.woocommerce-orders-table td {
    padding: 12px;
    border-top: 1px solid #eee;
}
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.status-pending {
    background-color: #fff8e5;
    color: #dba617;
}
.status-approved {
    background-color: #ecf7ed;
    color: #4ab866;
}
.status-paid {
    background-color: #e8f4ff;
    color: #2271b1;
}
@media (max-width: 768px) {
    .referral-grid-layout {
        grid-template-columns: 1fr;
    }
    .referral-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .referral-stats-grid {
        grid-template-columns: 1fr;
    }
    .social-buttons {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr); /* 3 rows for 6 buttons */
    }
}
/* Add this to your CSS for the program card specifically */
.woo-referral-social-share {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.woo-referral-social-share .social-button {
    padding: 8px;
    font-size: 12px;
}

@media (max-width: 480px) {
    .woo-referral-social-share {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}