/**
 * CM Affiliate — Frontend Styles
 * Uses --cmc-theme-* CSS variables from Core ThemeStyles
 */

/* ── Register Form ── */
.cmaf-register-wrapper {
    max-width: 600px;
    background: var(--cmc-theme-surface-color, #fff);
    border: 1px solid var(--cmc-theme-border-color, #e0e0e0);
    border-radius: var(--cmc-theme-border-radius, 8px);
    padding: var(--cmc-theme-spacing-xl, 32px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.cmaf-register-intro {
    margin-bottom: var(--cmc-theme-spacing-lg, 24px);
    color: #555;
    line-height: 1.6;
}

.cmaf-form-field {
    margin-bottom: var(--cmc-theme-spacing-md, 16px);
}

.cmaf-form-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.cmaf-form-field .cmaf-field-desc {
    margin: 4px 0 0;
    font-size: var(--cmc-theme-font-size-small, 13px);
    color: #666;
}

.cmaf-form-field input[type="text"],
.cmaf-form-field input[type="email"],
.cmaf-form-field input[type="number"],
.cmaf-form-field select {
    width: 100%;
    padding: var(--cmc-theme-input-padding-y, 8px) var(--cmc-theme-input-padding-x, 12px);
    border: 1px solid var(--cmc-theme-input-border-color, #ddd);
    border-radius: var(--cmc-theme-input-border-radius, 4px);
    font-size: var(--cmc-theme-font-size-base, 16px);
    background: var(--cmc-theme-input-bg-color, #fff);
    box-sizing: border-box;
}

.cmaf-form-field input:focus,
.cmaf-form-field select:focus {
    border-color: var(--cmc-theme-input-focus-color, #6b5ce7);
    outline: none;
    box-shadow: 0 0 0 2px rgba(107, 92, 231, 0.15);
}

.cmaf-consent {
    padding: var(--cmc-theme-spacing-md, 16px);
    background: var(--cmc-theme-background-color, #f8f9fa);
    border-radius: var(--cmc-theme-border-radius-sm, 4px);
    border: 1px solid var(--cmc-theme-border-color, #e0e0e0);
}

.cmaf-consent label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

.cmaf-consent span {
    font-size: var(--cmc-theme-font-size-small, 13px);
    line-height: 1.5;
}

.cmaf-register-wrapper .cmaf-form-submit button,
.cmaf-form-submit button[name="cmaf_register_affiliate"] {
    background: var(--cmc-theme-primary-color, #6b5ce7);
    color: #fff;
    border: none;
    padding: 12px var(--cmc-theme-spacing-lg, 24px);
    border-radius: var(--cmc-theme-border-radius, 6px);
    font-size: var(--cmc-theme-font-size-base, 16px);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--cmc-theme-transition-speed, 0.2s);
    width: 100%;
    margin-top: var(--cmc-theme-spacing-sm, 8px);
}

.cmaf-register-wrapper .cmaf-form-submit button:hover,
.cmaf-form-submit button[name="cmaf_register_affiliate"]:hover {
    opacity: 0.85;
}

/* ── Success Notice ── */
.cmaf-notice-success {
    background: var(--cmc-theme-success-bg, #e8f5e9);
    border-left: 4px solid var(--cmc-theme-success-color, #2e7d32);
    padding: var(--cmc-theme-spacing-md, 16px);
    margin-bottom: var(--cmc-theme-spacing-lg, 24px);
    border-radius: var(--cmc-theme-border-radius-sm, 4px);
}

.cmaf-notice-success p {
    margin: 0;
}

/* ── Dashboard ── */
.cmaf-dashboard {
    max-width: 800px;
}

.cmaf-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--cmc-theme-spacing-md, 16px);
    margin-bottom: var(--cmc-theme-spacing-lg, 24px);
}

.cmaf-stat-card {
    background: var(--cmc-theme-background-color, #f8f9fa);
    padding: var(--cmc-theme-spacing-md, 16px);
    border-radius: var(--cmc-theme-border-radius, 8px);
    text-align: center;
    border: 1px solid var(--cmc-theme-border-color, #e0e0e0);
}

.cmaf-stat-label {
    display: block;
    font-size: var(--cmc-theme-font-size-small, 13px);
    color: #666;
    margin-bottom: 4px;
}

.cmaf-stat-value {
    display: block;
    font-size: 1.4em;
    font-weight: 700;
    color: var(--cmc-theme-text-color, #333);
}

/* ── Referral Link ── */
.cmaf-referral-link-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: var(--cmc-theme-spacing-sm, 8px);
}

.cmaf-referral-url {
    flex: 1;
    padding: var(--cmc-theme-input-padding-y, 8px) var(--cmc-theme-input-padding-x, 12px);
    border: 1px solid var(--cmc-theme-input-border-color, #ddd);
    border-radius: var(--cmc-theme-border-radius-sm, 4px);
    font-size: var(--cmc-theme-font-size-small, 13px);
    background: var(--cmc-theme-input-bg-color, #f8f9fa);
}

.cmaf-copy-link {
    background: var(--cmc-theme-primary-color, #6b5ce7);
    color: #fff;
    border: none;
    padding: var(--cmc-theme-input-padding-y, 8px) var(--cmc-theme-spacing-md, 16px);
    border-radius: var(--cmc-theme-border-radius-sm, 4px);
    cursor: pointer;
    white-space: nowrap;
}

/* ── Referrals Table ── */
.cmaf-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--cmc-theme-spacing-lg, 24px);
}

.cmaf-table th,
.cmaf-table td {
    padding: var(--cmc-theme-spacing-sm, 8px) var(--cmc-theme-spacing-md, 12px);
    text-align: left;
    border-bottom: 1px solid var(--cmc-theme-border-color, #e0e0e0);
}

.cmaf-table th {
    font-weight: 600;
    font-size: var(--cmc-theme-font-size-small, 13px);
    color: #666;
}

/* ── Status Badges ── */
.cmaf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--cmc-theme-border-radius-sm, 4px);
    font-size: var(--cmc-theme-font-size-small, 12px);
    font-weight: 600;
}

.cmaf-badge-approved { background: var(--cmc-theme-success-bg, #e8f5e9); color: var(--cmc-theme-success-color, #2e7d32); }
.cmaf-badge-pending  { background: var(--cmc-theme-warning-bg, #fff3e0); color: var(--cmc-theme-warning-color, #e65100); }
.cmaf-badge-refunded { background: var(--cmc-theme-error-bg, #fce4ec); color: var(--cmc-theme-error-color, #c62828); }
.cmaf-badge-paid     { background: var(--cmc-theme-info-bg, #e3f2fd); color: var(--cmc-theme-info-color, #1565c0); }

/* ── Messages ── */
.cmaf-error-message {
    color: var(--cmc-theme-error-color, #c62828);
}

/* ── Buttons ── */
.cmaf-btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: var(--cmc-theme-border-radius, 6px);
    font-size: var(--cmc-theme-font-size-base, 15px);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.cmaf-btn:hover {
    opacity: 0.85;
}

.cmaf-btn-primary {
    background: var(--cmc-theme-primary-color, #6b5ce7);
    color: #fff;
}

.cmaf-btn-secondary {
    background: var(--cmc-theme-text-color, #333);
    color: #fff;
}

/* ── Payout Section ── */
.cmaf-payout-settings-section,
.cmaf-payout-section {
    margin-top: var(--cmc-theme-spacing-lg, 24px);
    padding-top: var(--cmc-theme-spacing-lg, 24px);
    border-top: 1px solid var(--cmc-theme-border-color, #e0e0e0);
}

.cmaf-payout-settings-section .cmaf-form-field,
.cmaf-payout-section .cmaf-form-field {
    margin-bottom: var(--cmc-theme-spacing-md, 16px);
}

.cmaf-payout-settings-section label,
.cmaf-payout-section label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.cmaf-payout-settings-section input[type="text"],
.cmaf-payout-settings-section input[type="email"],
.cmaf-payout-settings-section select {
    width: 100%;
    max-width: 400px;
    padding: var(--cmc-theme-input-padding-y, 8px) var(--cmc-theme-input-padding-x, 12px);
    border: 1px solid var(--cmc-theme-input-border-color, #ddd);
    border-radius: var(--cmc-theme-input-border-radius, 4px);
    font-size: var(--cmc-theme-font-size-base, 15px);
    background: var(--cmc-theme-input-bg-color, #fff);
    box-sizing: border-box;
}

.cmaf-payout-settings-section input:focus,
.cmaf-payout-settings-section select:focus {
    border-color: var(--cmc-theme-input-focus-color, #6b5ce7);
    outline: none;
    box-shadow: 0 0 0 2px rgba(107, 92, 231, 0.15);
}

/* ── Sections ── */
.cmaf-referral-link-section,
.cmaf-referrals-section {
    margin-bottom: var(--cmc-theme-spacing-lg, 24px);
}

.cmaf-referral-link-section h3,
.cmaf-referrals-section h3,
.cmaf-payout-settings-section h3,
.cmaf-payout-section h3 {
    margin-bottom: var(--cmc-theme-spacing-sm, 8px);
}