/* /home/mohammed-azaan-peshmam/Desktop/wordpress plugin/github/wc-referral-wallet/assets/css/theme-adaptive.css */
/* Simple WordPress-native theme integration CSS for WC Referral Wallet */
/* Leverages WordPress core color system and theme.json standards for maximum compatibility */
/* RELEVANT FILES: class-wc-referral-theme-adapter.php, frontend.css, referral-modal.css, blocks.css */

/**
 * WordPress-Native Color System Integration
 * Uses WordPress core color presets with intelligent fallbacks
 * Integrates seamlessly with theme.json and block themes
 */
:root {
    /* Core WordPress theme colors with automatic theme detection */
    --wc-referral-primary: var(--wc-referral-theme-primary, var(--wp--preset--color--primary, #2271b1));
    --wc-referral-secondary: var(--wc-referral-theme-secondary, var(--wp--preset--color--secondary, #005177));
    
    /* Theme-aware text and background colors */
    --wc-referral-text: var(--wc-referral-theme-text, var(--wc-referral-theme-foreground, var(--wp--preset--color--contrast, var(--wp--preset--color--foreground, #1e1e1e))));
    --wc-referral-background: var(--wc-referral-theme-background, var(--wp--preset--color--base, var(--wp--preset--color--background, #ffffff)));
    
    /* WordPress standard semantic colors */
    --wc-referral-success: var(--wp--preset--color--vivid-green-cyan, #00d084);
    --wc-referral-warning: var(--wp--preset--color--luminous-vivid-orange, #ff6900);
    --wc-referral-error: var(--wp--preset--color--vivid-red, #cf2e2e);
    
    /* Enhanced adaptive color derivatives using color-mix */
    --wc-referral-text-primary: var(--wc-referral-text);
    --wc-referral-text-secondary: color-mix(in srgb, var(--wc-referral-text) 70%, transparent 30%);
    --wc-referral-text-muted: color-mix(in srgb, var(--wc-referral-text) 50%, transparent 50%);
    --wc-referral-bg-primary: var(--wc-referral-background);
    --wc-referral-bg-secondary: color-mix(in srgb, var(--wc-referral-background) 95%, var(--wc-referral-text) 5%);
    --wc-referral-bg-tertiary: color-mix(in srgb, var(--wc-referral-background) 90%, var(--wc-referral-text) 10%);
    
    /* Dynamic primary color variations */
    --wc-referral-primary-dark: color-mix(in srgb, var(--wc-referral-primary) 80%, #000 20%);
    --wc-referral-primary-light: color-mix(in srgb, var(--wc-referral-primary) 80%, #fff 20%);
    --wc-referral-primary-subtle: color-mix(in srgb, var(--wc-referral-primary) 10%, var(--wc-referral-background) 90%);
    
    /* Intelligent border colors */
    --wc-referral-border: var(--wc-referral-theme-border, var(--wp--preset--color--outline, #d1d5db));
    --wc-referral-border-light: color-mix(in srgb, var(--wc-referral-text) 10%, transparent 90%);
    --wc-referral-border-focus: var(--wc-referral-primary);
    
    /* WordPress-native typography system */
    --wc-referral-font-family: var(--wc-referral-font-base, var(--wp--preset--font-family--system-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
    --wc-referral-heading-font: var(--wp--preset--font-family--heading, var(--wc-referral-font-family));
    
    /* WordPress standard font sizes */
    --wc-referral-font-size-sm: var(--wp--preset--font-size--small, 0.875rem);
    --wc-referral-font-size-base: var(--wp--preset--font-size--medium, 1rem);
    --wc-referral-font-size-lg: var(--wp--preset--font-size--large, 1.125rem);
    --wc-referral-font-size-xl: var(--wp--preset--font-size--x-large, 1.25rem);
    
    /* WordPress spacing scale */
    --wc-referral-spacing-xs: var(--wp--preset--spacing--20, 0.5rem);
    --wc-referral-spacing-sm: var(--wp--preset--spacing--30, 0.75rem);
    --wc-referral-spacing-base: var(--wp--preset--spacing--40, 1rem);
    --wc-referral-spacing-lg: var(--wp--preset--spacing--50, 1.5rem);
    --wc-referral-spacing-xl: var(--wp--preset--spacing--60, 2rem);
    
    /* Design system with WordPress integration */
    --wc-referral-radius: var(--wp--style--border--radius, 6px);
    --wc-referral-shadow: 0 1px 3px color-mix(in srgb, var(--wc-referral-text) 10%, transparent 90%);
    --wc-referral-shadow-hover: 0 4px 8px color-mix(in srgb, var(--wc-referral-text) 15%, transparent 85%);
    --wc-referral-transition: 200ms ease-in-out;
}

/**
 * Enhanced Block Theme Integration
 * Leverages WordPress 6.0+ theme.json color system
 */
.wc-referral-block-theme :root {
    /* Block themes automatically provide --wp--preset--color--* variables */
    /* Our system uses these via the fallback chain in the main :root */
    --wc-referral-uses-theme-json: 1;
}

/**
 * Popular Classic Theme Integrations
 * Simple theme-specific variable overrides
 */
.wc-referral-theme-twentytwentyfour :root,
.wc-referral-theme-twentytwentythree :root {
    --wc-referral-primary: var(--wp--preset--color--primary, var(--wp--preset--color--vivid-cyan-blue, #2271b1));
    --wc-referral-text: var(--wp--preset--color--contrast, #1e1e1e);
    --wc-referral-background: var(--wp--preset--color--base, #ffffff);
}

/* Astra theme integration */
.wc-referral-theme-astra :root {
    --wc-referral-primary: var(--ast-global-color-0, var(--wc-referral-primary));
    --wc-referral-text: var(--ast-global-color-3, var(--wc-referral-text));
    --wc-referral-background: var(--ast-global-color-4, var(--wc-referral-background));
}

/* GeneratePress theme integration */
.wc-referral-theme-generatepress :root {
    --wc-referral-primary: var(--accent, var(--wc-referral-primary));
    --wc-referral-font-family: var(--font-primary, var(--wc-referral-font-family));
}

/* OceanWP theme integration */
.wc-referral-theme-oceanwp :root {
    --wc-referral-primary: var(--ocean-primary-color, var(--wc-referral-primary));
}

/* Kadence theme integration */
.wc-referral-theme-kadence :root {
    --wc-referral-primary: var(--global-palette1, var(--wc-referral-primary));
    --wc-referral-text: var(--global-palette3, var(--wc-referral-text));
    --wc-referral-background: var(--global-palette4, var(--wc-referral-background));
}

/**
 * Component Base Styles with WordPress Integration
 * Provides consistent theming across all plugin components
 */
.wc-referral-wallet,
.wc-referral-modal,
.wc-referral-blocks {
    /* Inherit WordPress theme typography and colors */
    font-family: var(--wc-referral-font-family);
    color: var(--wc-referral-text);
    background: var(--wc-referral-background);
    
    /* WordPress-compatible line height and spacing */
    line-height: var(--wp--style--typography--line-height, 1.6);
    
    /* Container query support for responsive design */
    container-type: inline-size;
}

/* Enhanced focus management for accessibility */
.wc-referral-wallet *:focus,
.wc-referral-modal *:focus,
.wc-referral-blocks *:focus {
    outline: 2px solid var(--wc-referral-border-focus);
    outline-offset: 2px;
    border-radius: var(--wc-referral-radius);
}

/**
 * Theme integration utility classes
 * These classes apply theme colors to wallet components
 */
.has-theme-background {
    background-color: var(--wc-referral-bg-primary) !important;
}

.has-theme-colors {
    color: var(--wc-referral-text-primary);
}

.has-theme-border {
    border: 1px solid var(--wc-referral-border);
}

.has-theme-shadow {
    box-shadow: var(--wc-referral-shadow);
}

.has-theme-spacing {
    padding: var(--wc-referral-spacing-base);
    margin-bottom: var(--wc-referral-spacing-base);
}

.has-theme-primary-color {
    color: var(--wc-referral-primary) !important;
}

.has-theme-controls {
    /* Styling for form controls */
}

.has-theme-input {
    background: var(--wc-referral-bg-primary);
    color: var(--wc-referral-text-primary);
    border: 1px solid var(--wc-referral-border);
    border-radius: var(--wc-referral-radius);
    padding: var(--wc-referral-spacing-sm) var(--wc-referral-spacing-base);
    font-family: var(--wc-referral-font-family);
    font-size: var(--wc-referral-font-size-base);
    transition: var(--wc-referral-transition);
    
    /* Enhanced accessibility */
    min-height: 44px; /* Touch target size */
}

.has-theme-input:focus {
    border-color: var(--wc-referral-border-focus);
    outline: none;
    box-shadow: 0 0 0 2px var(--wc-referral-primary-subtle);
    transform: translateY(-1px);
}

.has-theme-input:hover:not(:focus) {
    border-color: color-mix(in srgb, var(--wc-referral-border) 70%, var(--wc-referral-primary) 30%);
}

.wc-referral-theme-heading {
    color: var(--wc-referral-text-primary);
    font-family: var(--wc-referral-heading-font);
}

.wc-referral-theme-container {
    font-family: var(--wc-referral-font-family);
}

.wc-referral-balance-card {
    background: var(--wc-referral-bg-primary);
    border: 1px solid var(--wc-referral-border);
    border-radius: var(--wc-referral-radius);
    padding: var(--wc-referral-spacing-lg);
    box-shadow: var(--wc-referral-shadow);
    transition: var(--wc-referral-transition);
}

.wc-referral-balance-card:hover {
    box-shadow: var(--wc-referral-shadow-hover);
    transform: translateY(-2px);
}

.wc-referral-link-card {
    background: var(--wc-referral-bg-primary);
    border: 1px solid var(--wc-referral-border);
    border-radius: var(--wc-referral-radius);
    padding: var(--wc-referral-spacing-base);
    transition: var(--wc-referral-transition);
}

.wc-referral-link-card:hover {
    background: var(--wc-referral-bg-secondary);
    border-color: color-mix(in srgb, var(--wc-referral-border) 70%, var(--wc-referral-primary) 30%);
}

/* Button theming with WordPress standards */
.wc-referral-button {
    background: var(--wc-referral-primary);
    color: var(--wc-referral-background);
    border: none;
    border-radius: var(--wc-referral-radius);
    padding: var(--wc-referral-spacing-sm) var(--wc-referral-spacing-base);
    font-family: var(--wc-referral-font-family);
    font-size: var(--wc-referral-font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: var(--wc-referral-transition);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--wc-referral-spacing-xs);
}

.wc-referral-button:hover {
    background: var(--wc-referral-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--wc-referral-shadow-hover);
}

.wc-referral-button:focus {
    outline: 2px solid var(--wc-referral-border-focus);
    outline-offset: 2px;
}

.wc-referral-button:active {
    transform: translateY(0);
    box-shadow: var(--wc-referral-shadow);
}

/* Secondary button variant */
.wc-referral-button--secondary {
    background: var(--wc-referral-bg-secondary);
    color: var(--wc-referral-text);
    border: 1px solid var(--wc-referral-border);
}

.wc-referral-button--secondary:hover {
    background: var(--wc-referral-bg-tertiary);
    border-color: var(--wc-referral-primary);
}

/**
 * Responsive Design with Container Queries
 * Modern responsive approach for component-based layouts
 */
@container (max-width: 480px) {
    .wc-referral-balance-card,
    .wc-referral-link-card {
        padding: var(--wc-referral-spacing-base);
    }
    
    .wc-referral-button {
        width: 100%;
        justify-content: center;
    }
}

/**
 * Enhanced Accessibility Support
 * Comprehensive support for user preferences
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --wc-referral-transition: none;
    }
    
    .wc-referral-balance-card:hover,
    .wc-referral-button:hover {
        transform: none;
    }
}

@media (prefers-contrast: high) {
    :root {
        --wc-referral-border: currentColor;
        --wc-referral-shadow: 0 0 0 2px currentColor;
        --wc-referral-primary: CanvasText;
        --wc-referral-background: Canvas;
        --wc-referral-text: CanvasText;
    }
}

@media (forced-colors: active) {
    .wc-referral-wallet,
    .wc-referral-modal,
    .wc-referral-blocks {
        forced-color-adjust: none;
    }
}

/**
 * Print Styles
 * Clean presentation for printed materials
 */
@media print {
    :root {
        --wc-referral-background: white;
        --wc-referral-text: black;
        --wc-referral-primary: black;
        --wc-referral-shadow: none;
        --wc-referral-transition: none;
    }
    
    .wc-referral-balance-card,
    .wc-referral-link-card {
        border: 2px solid black;
        box-shadow: none;
    }
    
    .wc-referral-button {
        background: white;
        color: black;
        border: 2px solid black;
    }
}

/**
 * Dark Mode Support (respects WordPress admin color schemes)
 */
@media (prefers-color-scheme: dark) {
    .wp-admin .wc-referral-wallet {
        /* Let WordPress admin handle dark mode */
        color-scheme: light dark;
    }
}

/**
 * Integration with WordPress Editor (Gutenberg)
 * Ensures consistent styling in the block editor
 */
.wp-block-editor .wc-referral-blocks {
    /* Use editor styles when in Gutenberg */
    font-family: var(--wp--preset--font-family--default, var(--wc-referral-font-family));
}

/**
 * WooCommerce Specific Integration
 * Ensures compatibility with WooCommerce styles
 */
.woocommerce .wc-referral-wallet {
    /* Inherit WooCommerce button styles for consistency */
    --wc-referral-primary: var(--woocommerce-color-primary, var(--wc-referral-primary));
}

.woocommerce .wc-referral-button {
    /* Match WooCommerce button styling */
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

/**
 * Utility Classes for Theme Integration
 * Provides easy theme adaptation for developers
 */
.wc-referral-theme-primary {
    color: var(--wc-referral-primary) !important;
}

.wc-referral-theme-bg {
    background-color: var(--wc-referral-bg-primary) !important;
}

.wc-referral-theme-text {
    color: var(--wc-referral-text) !important;
}

.wc-referral-theme-border {
    border-color: var(--wc-referral-border) !important;
}

.wc-referral-theme-shadow {
    box-shadow: var(--wc-referral-shadow) !important;
}