/*
 * Waita Market Add-on - Theme Variable System
 * Provides CSS custom properties that inherit from Elementor/WordPress theme
 * Used by Ordvia Auth styles so we don't rely on hardcoded colors
 *
 * NOTE: This file should be enqueued before other plugin CSS files so variables are available.
 */
:root {
    /* PRIMARY COLORS */
    --wma-primary: #0A4834;
    --wma-primary-dark: color-mix(in srgb, var(--wma-primary) 80%, black);
    --wma-primary-light: color-mix(in srgb, var(--wma-primary) 15%, white);

    --wma-secondary: var(--e-global-color-secondary, #F7941D);
    --wma-secondary-dark: color-mix(in srgb, var(--wma-secondary) 80%, black);
    --wma-secondary-light: color-mix(in srgb, var(--wma-secondary) 15%, white);

    /* TEXT */
    --wma-text: var(--e-global-color-text, #333333);
    --wma-text-light: color-mix(in srgb, var(--wma-text) 60%, transparent);
    --wma-text-lighter: color-mix(in srgb, var(--wma-text) 40%, transparent);

    /* BACKGROUNDS */
    --wma-bg: var(--wp--preset--color--white, #ffffff);
    --wma-bg-secondary: color-mix(in srgb, var(--wma-text) 3%, var(--wma-bg));
    --wma-bg-tertiary: color-mix(in srgb, var(--wma-text) 6%, var(--wma-bg));

    /* BORDERS */
    --wma-border: color-mix(in srgb, var(--wma-text) 12%, transparent);
    --wma-border-light: color-mix(in srgb, var(--wma-text) 8%, transparent);

    /* SEMANTIC */
    --wma-danger: var(--wp--preset--color--vivid-red, #cf2e2e);
    --wma-danger-light: color-mix(in srgb, var(--wma-danger) 15%, white);
    --wma-success: var(--e-global-color-accent, #38C172);
    --wma-success-light: color-mix(in srgb, var(--wma-success) 15%, white);
    --wma-warning: var(--e-global-color-secondary, #F7941D);
    --wma-warning-light: color-mix(in srgb, var(--wma-warning) 15%, white);

    /* TYPOGRAPHY */
    --wma-font-primary: var(--e-global-typography-primary-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --wma-font-secondary: var(--e-global-typography-secondary-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --wma-font-text: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --wma-font-accent: var(--e-global-typography-accent-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

    --wma-font-weight-primary: var(--e-global-typography-primary-font-weight, 600);
    --wma-font-weight-secondary: var(--e-global-typography-secondary-font-weight, 400);
    --wma-font-weight-text: var(--e-global-typography-text-font-weight, 400);
    --wma-font-weight-accent: var(--e-global-typography-accent-font-weight, 500);

    /* BUTTONS */
    --wma-button-radius: var(--e-global-typography-accent-font-size, 8px);
    --wma-button-font-size: var(--wp--preset--font-size--medium, 16px);
    --wma-button-padding-y: var(--wp--preset--spacing--30, 0.67rem);
    --wma-button-padding-x: var(--wp--preset--spacing--50, 1.5rem);
    --wma-button-font-weight: var(--e-global-typography-accent-font-weight, 500);
    --wma-button-font-family: var(--e-global-typography-accent-font-family, var(--wma-font-text));
    --wma-button-border-width: 1px;
    --wma-button-border-style: solid;

    /* SPACING & SHADOWS */
    --wma-radius-sm: 4px;
    --wma-radius-md: 8px;
    --wma-radius-lg: 12px;
    --wma-radius-xl: 16px;
    --wma-shadow-sm: var(--wp--preset--shadow--natural, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    --wma-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --wma-shadow-lg: var(--wp--preset--shadow--deep, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    --wma-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --wma-transition: all 0.2s ease;
    --wma-spacing-sm: var(--wp--preset--spacing--20, 0.44rem);
    --wma-spacing-md: var(--wp--preset--spacing--40, 1rem);
    --wma-spacing-lg: var(--wp--preset--spacing--60, 2.25rem);
    --wma-spacing-xl: var(--wp--preset--spacing--80, 5.06rem);

    --wma-font-size-xs: 12px;
    --wma-font-size-sm: var(--wp--preset--font-size--small, 13px);
    --wma-font-size-md: var(--wp--preset--font-size--medium, 16px);
    --wma-font-size-lg: var(--wp--preset--font-size--large, 20px);
    --wma-font-size-xl: var(--wp--preset--font-size--x-large, 24px);
}

/* Phone input override: make intl-tel-input selected flag wrapper transparent while preserving the flag image */
.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Keep the actual flag image and its colors; only remove any extra background from the inner element */
.iti--separate-dial-code .iti__selected-flag .iti__flag {
    background-color: transparent !important;
    /* do NOT override background-image — the flag's colors come from the image */
}