/* 
 * Simple Affiliate Coupons - Compatibility CSS
 * All selectors are prefixed with 'sac-' to prevent conflicts
 */

/* Reset any conflicting styles */
.sac-dashboard * {
    box-sizing: border-box;
}

/* Ensure our styles take precedence */
.sac-dashboard .sac-stat-card {
    position: relative;
    z-index: 1;
}

/* Override common theme conflicts */
.sac-dashboard .sac-referral-block-card {
    /* Override theme margins/padding */
    margin: 25px 0 !important;
    padding: 25px !important;
}

/* Fix for themes that use !important */
.sac-dashboard .sac-copy-button {
    background: #16a34a !important;
    color: white !important;
    border: none !important;
}

.sac-dashboard .sac-copy-button:hover {
    background: #15803d !important;
}

/* Override theme button styles */
.sac-dashboard #sac_apply_credit_button {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    padding: 12px 18px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

.sac-dashboard #sac_apply_credit_button:hover {
    background: #2563eb !important;
}

/* Fix for themes that modify form elements */
.sac-dashboard .sac-credit-apply-form input[type="number"] {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
    background: white !important;
}

.sac-dashboard .sac-referral-link-container input {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: white !important;
    color: #1a1a1a !important;
    font-family: monospace !important;
}

/* Override theme table styles */
.sac-dashboard .sac-commissions-table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.sac-dashboard .sac-commissions-table th {
    background: #f8f9fa !important;
    padding: 12px 15px !important;
    text-align: left !important;
    font-weight: 600 !important;
}

.sac-dashboard .sac-commissions-table td {
    padding: 12px 15px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Fix for themes that modify progress bars */
.sac-dashboard .sac-progress-bar {
    background: #e5e7eb !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}

.sac-dashboard .sac-progress-fill {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
    border-radius: 3px !important;
    transition: width 0.3s ease !important;
}

/* Override theme color schemes */
.sac-dashboard .sac-stat-card:nth-child(2) .sac-price-display {
    color: #16a34a !important;
}

.sac-dashboard .sac-referral-block-card h3 {
    color: #16a34a !important;
}

/* Fix for themes that modify social icons */
.sac-dashboard .sac-share-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sac-dashboard .sac-share-icon.whatsapp {
    background: #25d366 !important;
}

.sac-dashboard .sac-share-icon.sms {
    background: #1da1f2 !important;
}

/* Fix for themes that modify QR codes */
.sac-dashboard .sac-qr-wrap canvas {
    background: white !important;
    border-radius: 4px !important;
    padding: 5px !important;
}

/* Override theme message styles */
.sac-dashboard #sac-credit-messages .woocommerce-message {
    background: #e6f7ea !important;
    border: 1px solid #b2e2c2 !important;
    color: #217a3c !important;
    padding: 10px 15px !important;
    border-radius: 4px !important;
}

.sac-dashboard #sac-credit-messages .woocommerce-error {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    color: #dc2626 !important;
    padding: 10px 15px !important;
    border-radius: 4px !important;
}

/* Fix for themes that modify loading states */
.sac-dashboard #sac_apply_credit_button.loading .button-text {
    visibility: hidden !important;
}

.sac-dashboard #sac_apply_credit_button.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px !important;
    margin-left: -8px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
    border-radius: 50% !important;
    animation: sacCreditSpin 1s linear infinite !important;
}

@keyframes sacCreditSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Fix for themes that modify toast notifications */
.sac-dashboard .sac-toast {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    background: #16a34a !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    z-index: 9999 !important;
}

/* Mobile responsiveness fixes */
@media (max-width: 768px) {
    .sac-dashboard .sac-referral-link-container {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .sac-dashboard .sac-share-container {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    .sac-dashboard .sac-credit-apply-form {
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    .sac-dashboard .sac-credit-apply-form input[type="number"] {
        min-width: 100px !important;
        flex: 1 !important;
    }
}

/* Fix for themes that use CSS Grid */
.sac-dashboard .sac-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 15px !important;
}

/* Fix for themes that modify flexbox */
.sac-dashboard .sac-referral-link-container {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.sac-dashboard .sac-share-container {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.sac-dashboard .sac-credit-apply-form {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

/* Override theme font modifications */
.sac-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.sac-dashboard .sac-code-display {
    font-family: monospace !important;
}

/* Fix for themes that modify borders */
.sac-dashboard .sac-stat-card {
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid #3b82f6 !important;
    border-radius: 6px !important;
}

.sac-dashboard .sac-section {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
}

/* Fix for themes that modify shadows */
.sac-dashboard .sac-stat-card,
.sac-dashboard .sac-section,
.sac-dashboard .sac-store-credit-form {
    box-shadow: none !important;
}

/* Override theme background modifications */
.sac-dashboard {
    background: #ffffff !important;
}

.sac-dashboard .sac-dashboard-header {
    background: #f8f9fa !important;
}

/* Fix for themes that modify spacing */
.sac-dashboard .sac-stat-card h3 {
    margin: 0 0 10px 0 !important;
}

.sac-dashboard .sac-section h3 {
    margin: 0 0 20px 0 !important;
}

/* Override theme text color modifications */
.sac-dashboard .sac-stat-card h3 {
    color: #666 !important;
}

.sac-dashboard .sac-code-display,
.sac-dashboard .sac-price-display {
    color: #1a1a1a !important;
}

/* Fix for themes that modify transitions */
.sac-dashboard .sac-copy-button,
.sac-dashboard #sac_apply_credit_button {
    transition: background 0.2s !important;
}

/* Override theme focus states */
.sac-dashboard .sac-credit-apply-form input[type="number"]:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
}

/* Fix for themes that modify disabled states */
.sac-dashboard #sac_apply_credit_button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
} 