.spar-referral-system {
margin: 0;
padding: 25px;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease;
} .spar-referral-system.connected {
border: none;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 25px;
} .spar-referral-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 20px 0;
font-weight: 600;
color: #2c3e50;
}
.spar-referral-icon {
font-size: 28px;
display: inline-block;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
} .spar-referral-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 20px;
margin: 0 0 10px 0;
}
.spar-referral-stat {
text-align: center;
padding: 20px;
background: #ffffff;
border-radius: 10px;
border: 2px solid #e9ecef;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
overflow: hidden;
}
.spar-referral-stat:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 115, 170, 0.15);
}
.spar-stat-number {
display: block;
font-size: 32px;
font-weight: bold;
color: var(--spar-theme-color-1, #667eea);
line-height: 1;
margin-bottom: 8px;
}
.spar-stat-label {
display: block;
font-size: 12px;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
} .spar-referral-how-it-works {
margin: 0px;
padding: 20px;
background: #f8f9fa;
border: 2px solid #f1f1f1;
}
.page .site-main .spar-rewards-dashboard .spar-referral-how-it-works h4 {
margin: 0 0 15px 0;
color: #2c3e50;
font-size: 18px;
font-weight: 600;
}
.spar-how-it-works-list {
margin: 0;
padding-left: 20px;
list-style: disc;
}
.page .site-main .spar-rewards-dashboard .spar-how-it-works-list,
.spar-how-it-works-list {
list-style: disc;
}
.spar-how-it-works-list li {
margin: 12px 0;
padding-left: 5px;
color: #495057;
line-height: 1.6;
list-style: disc;
display: list-item;
} .spar-referral-fields-row {
display: flex;
gap: 20px;
align-items: flex-start;
margin-top: 10px;
}
.spar-referral-fields-row .spar-referral-field-col {
flex: 1 1 0;
min-width: 0;
}
.spar-referral-fields-row .spar-referral-link-section,
.spar-referral-fields-row .spar-referral-coupon-section {
margin: 0;
padding: 0;
border-top: none;
}
.spar-referral-fields-row .spar-referral-coupon-wrapper {
max-width: none;
} .spar-referral-fields-row .spar-referral-link-section h4,
.spar-referral-fields-row .spar-referral-coupon-title {
margin: 0 0 15px 0;
color: #2c3e50;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
} .spar-referral-fields-row .spar-referral-link-container {
margin: 0;
} .spar-referral-fields-row .spar-referral-input,
.spar-referral-fields-row .spar-referral-coupon-input-group input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
} .spar-referral-link-section {
margin-top: 10px;
}
.spar-referral-link-section h4 {
margin: 0 0 15px 0;
color: #2c3e50;
font-size: 18px;
font-weight: 600;
}
.spar-referral-clicks-log h4 {
margin: 25px 0 0 0;
} .spar-referral-code-display {
display: flex;
align-items: center;
gap: 10px;
margin: 15px 0;
padding: 12px 15px;
background: #e7f3ff;
border: 1px solid #b8daff;
border-radius: 8px;
}
.spar-referral-code-label {
font-weight: 600;
color: #004085;
font-size: 14px;
}
.spar-referral-code {
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
font-size: 16px;
font-weight: bold;
color: #0073aa;
background: #ffffff;
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 1px;
border: 1px solid #cce7ff;
}
.spar-referral-link-container {
display: flex;
gap: 10px;
margin: 15px 0 25px 0;
align-items: stretch;
} .page .spar-referral-link-container .spar-referral-input,
.page .spar-referral-link-container .spar-copy-button,
.page .spar-referral-coupon-input-group .spar-copy-button {
height: 44px;
box-sizing: border-box;
}
.page .site-main .spar-referral-input {
flex: 1;
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-family: 'Monaco', 'Menlo', monospace;
font-size: 14px;
background: #f8f9fa;
color: #495057;
transition: border-color 0.3s ease;
}
.spar-referral-input:focus {
outline: none;
border-color: #0073aa;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}
.spar-copy-button {
padding: 12px 20px;
background: #0073aa;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
min-width: 80px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.spar-copy-button:hover {
background: #005a87;
transform: translateY(-1px);
}
.spar-copy-button.spar-copy-success {
background: #28a745;
transform: scale(1.05);
} .spar-share-buttons {
margin-top: 20px;
}
.spar-share-buttons h5 {
margin: 0;
color: #2c3e50;
font-size: 16px;
font-weight: 600;
}
.spar-share-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.spar-share-header-row .spar-points-info {
font-size: 18px;
color: var(--spar-theme-accent-color, #2ca58d);
font-weight: bold;
text-align: right;
}
.spar-share-pill {
background: #28a745;
color: #fff;
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
grid-column: 2;
grid-row: 2;
justify-self: center;
margin-left: 0;
font-weight: 700;
line-height: 1;
}
.spar-share-buttons-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
gap: 8px;
}
.spar-share-btn {
display: grid;
grid-template-columns: auto auto;
align-items: center;
justify-content: center;
column-gap: 10px;
row-gap: 3px;
padding: 8px 10px;
background: #ffffff;
color: #495057;
text-decoration: none;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
border: 2px solid #e9ecef;
transition: all 0.3s ease;
text-align: center;
white-space: nowrap;
}
.spar-share-btn:hover {
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.spar-share-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.2);
}
.spar-share-icon {
grid-column: 1;
grid-row: 1;
font-size: 16px;
display: inline-block;
width: 16px;
text-align: center;
}
.spar-share-label {
grid-column: 2;
grid-row: 1;
} .spar-share-icon i {
transition: transform 0.2s ease;
}
.spar-share-btn:hover .spar-share-icon i {
transform: scale(1.1);
} .spar-share-email .spar-share-icon i {
color: #6c757d;
}
.spar-share-email:hover .spar-share-icon i {
color: #dc3545;
}
.spar-share-facebook .spar-share-icon i {
color: #6c757d;
}
.spar-share-facebook:hover .spar-share-icon i {
color: #1877f2;
}
.spar-share-twitter .spar-share-icon i {
color: #6c757d;
}
.spar-share-twitter:hover .spar-share-icon i {
color: #1da1f2;
}
.spar-share-whatsapp .spar-share-icon i {
color: #6c757d;
}
.spar-share-whatsapp:hover .spar-share-icon i {
color: #25d366;
}
.spar-share-telegram .spar-share-icon i {
color: #6c757d;
}
.spar-share-telegram:hover .spar-share-icon i {
color: #229ed9;
}
.spar-share-discord .spar-share-icon i {
color: #6c757d;
}
.spar-share-discord:hover .spar-share-icon i {
color: #5865f2;
}
.spar-share-tiktok .spar-share-icon i {
color: #6c757d;
}
.spar-share-tiktok:hover .spar-share-icon i {
color: #ff0050;
} .spar-share-email:hover {
border-color: #dc3545;
color: #dc3545;
}
.spar-share-facebook:hover {
border-color: #1877f2;
color: #1877f2;
}
.spar-share-twitter:hover {
border-color: #1da1f2;
color: #1da1f2;
}
.spar-share-whatsapp:hover {
border-color: #25d366;
color: #25d366;
}
.spar-share-telegram:hover {
border-color: #229ed9;
color: #229ed9;
}
.spar-share-discord:hover {
border-color: #5865f2;
color: #5865f2;
}
.spar-share-tiktok:hover {
border-color: #ff0050;
color: #ff0050;
} .spar-referral-offer {
display: inline-block;
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
margin: 2px 0;
} .spar-product-points .spar-referral-offer {
display: block;
margin: 5px 0;
padding: 8px 12px;
border-radius: 6px;
text-align: center;
}
.spar-product-points .spar-referral-bonus {
display: block;
margin: 5px 0;
font-style: italic;
color: #0073aa;
} .woocommerce-message.spar-referral-applied {
border-left-color: #28a745;
background-color: #d4edda;
} .spar-referral-coupon-section {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #e0e0e0;
margin-bottom: 0;
}
.spar-referral-coupon-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
}
.spar-referral-coupon-wrapper {
max-width: 500px;
}
.spar-referral-coupon-input-group {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
}
.spar-referral-coupon-input-group input {
flex: 1;
padding: 12px 15px;
height: 44px;
box-sizing: border-box;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
background-color: #f8f9fa;
border: 2px dashed #007cba;
border-radius: 8px;
color: #007cba;
text-align: center;
}
.spar-generate-coupon-button {
padding: 12px 24px;
font-size: 16px;
font-weight: 600;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.spar-generate-coupon-button:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.spar-generate-coupon-button:disabled {
opacity: 0.7;
cursor: not-allowed;
} .spar-generate-coupon-button .spar-loading-text {
display: none;
}
.spar-generate-coupon-button.is-loading .spar-loading-text {
display: inline;
}
.spar-generate-coupon-button.is-loading .spar-generate-text {
display: none;
}
.spar-referral-coupon-help {
font-size: 14px;
color: #6c757d;
margin: 10px 0 0 0;
} .spar-refer-coupon-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.spar-refer-coupon-label {
font-size: 13px;
font-weight: 600;
color: #495057;
margin: 0 0 8px 0;
}
.spar-refer-coupon {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.spar-refer-coupon-input {
flex: 1;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
background-color: #f8f9fa;
border: 1px dashed #007cba;
border-radius: 6px;
color: #007cba;
text-align: center;
}
.spar-refer-coupon-copy {
padding: 8px 12px;
background: var(--spar-rewards-color-primary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: background 0.2s ease;
}
.spar-refer-coupon-copy:hover {
background: var(--spar-rewards-color-secondary);
}
.spar-generate-coupon-btn {
width: 100%;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.spar-generate-coupon-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.spar-generate-coupon-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.spar-refer-coupon-note {
font-size: 11px;
color: #6c757d;
margin: 0;
text-align: center;
} @media (max-width: 768px) {
.spar-referral-system {
padding: 20px 15px;
margin: 15px 0;
}
.spar-referral-title {
font-size: 20px;
}
.spar-referral-stats {
grid-template-columns: 1fr;
gap: 15px;
}
.spar-referral-link-container {
flex-direction: column;
gap: 10px;
}
.spar-share-buttons-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.spar-referral-fields-row {
flex-direction: column;
gap: 20px;
} .spar-referral-fields-row .spar-referral-link-container,
.spar-referral-fields-row .spar-referral-coupon-input-group {
flex-direction: row;
gap: 10px;
}
.spar-referral-code-display {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
@media (max-width: 480px) {
.spar-share-buttons-grid {
grid-template-columns: 1fr;
}
} @keyframes newReferral {
0% { transform: scale(1); }
50% { transform: scale(1.1); background-color: #d4edda; }
100% { transform: scale(1); }
}
.spar-referral-stat.new-referral {
animation: newReferral 0.6s ease;
} .spar-referral-badge {
float: right;
font-size: 16px;
opacity: 0.8;
}