/**
 * OpenCom UI Kit - Common Styles
 * Shared styles for all OpenCom widgets
 * Version: 2.0.0
 */

/* ============================================
   CSS Variables (Design Tokens)
   ============================================ */
:root {
    /* Fonts */
    --opencom-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --opencom-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Primary Colors (default green hue=140, chroma=0.15) */
    --opencom-primary-50: oklch(0.97 0.045 140);
    --opencom-primary-100: oklch(0.93 0.075 140);
    --opencom-primary-200: oklch(0.87 0.090 140);
    --opencom-primary-300: oklch(0.78 0.105 140);
    --opencom-primary-400: oklch(0.68 0.128 140);
    --opencom-primary-500: oklch(0.55 0.150 140);
    --opencom-primary-600: oklch(0.48 0.150 140);
    --opencom-primary-700: oklch(0.40 0.143 140);
    --opencom-primary-800: oklch(0.33 0.128 140);
    --opencom-primary-900: oklch(0.27 0.113 140);
    
    /* Gray Scale */
    --opencom-gray-900: #1a1a2e;
    --opencom-gray-800: #2d2d44;
    --opencom-gray-700: #4a4a5a;
    --opencom-gray-600: #6b6b7b;
    --opencom-gray-500: #8e8e9a;
    --opencom-gray-400: #a8a8b3;
    --opencom-gray-300: #d1d1d9;
    --opencom-gray-200: #e8e8ed;
    --opencom-gray-100: #f4f4f7;
    --opencom-gray-50: #fafafa;
    
    /* Utility Colors */
    --opencom-white: #ffffff;
    --opencom-black: #000000;
    
    /* Accent Colors */
    --opencom-blue-600: oklch(0.50 0.18 258);
    --opencom-teal-600: oklch(0.55 0.14 180);
    --opencom-purple-600: oklch(0.48 0.20 285);
    --opencom-orange-600: oklch(0.60 0.18 55);
    --opencom-red-600: oklch(0.53 0.20 25);
    --opencom-red-100: oklch(0.95 0.06 25);
    --opencom-red-700: oklch(0.42 0.18 25);

    /* Success (green) palette */
    --opencom-success-100: oklch(0.93 0.08 145);
    --opencom-success-600: oklch(0.52 0.16 145);
    --opencom-success-700: oklch(0.42 0.14 145);

    /* Warm (orange/amber) palette */
    --opencom-warm-100: oklch(0.95 0.06 55);
    --opencom-warm-700: oklch(0.48 0.15 55);

    /* Chroma for country/flag-derived colors */
    --opencom-chroma: 0.16;

    /* Alpha for country/flag-derived colors */
    --opencom-alpha: 65;

    /* Shadows */
    --opencom-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --opencom-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --opencom-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.06);
    --opencom-shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --opencom-radius-sm: 4px;
    --opencom-radius-md: 8px;
    --opencom-radius-lg: 12px;
    --opencom-radius-xl: 16px;
    --opencom-radius-full: 9999px;
    
    /* Transitions */
    --opencom-transition-fast: 150ms ease;
    --opencom-transition-normal: 200ms ease;
    --opencom-transition-slow: 300ms ease;
    --opencom-transition-base: 200ms ease;
}

/* ============================================
   Common Header Styles
   ============================================ */
.opencom-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
}

.opencom-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--opencom-font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--opencom-primary-800);
    margin-bottom: 16px;
}

.opencom-section-label::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--opencom-primary-800);
}

.opencom-title {
    font-family: var(--opencom-font-heading);
    font-size: 40px;
    font-weight: 800;
    color: var(--opencom-gray-900);
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.opencom-description {
    font-family: var(--opencom-font-body);
    font-size: 18px;
    color: var(--opencom-gray-600);
    line-height: 1.7;
    margin: 0;
}

/* ============================================
   Common Container Styles
   ============================================ */
.opencom-container {
    background: var(--opencom-white);
    border-radius: var(--opencom-radius-xl);
    padding: 32px;
    box-shadow: var(--opencom-shadow-lg);
}

/* ============================================
   Common Button Styles
   ============================================ */
.opencom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--opencom-font-body);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: var(--opencom-radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--opencom-transition-normal);
}

.opencom-button--primary {
    background: var(--opencom-primary-600);
    color: var(--opencom-white);
}

.opencom-button--primary:hover {
    background: var(--opencom-primary-700);
}

.opencom-button--secondary {
    background: var(--opencom-gray-100);
    color: var(--opencom-gray-700);
}

.opencom-button--secondary:hover {
    background: var(--opencom-gray-200);
}

/* ============================================
   Common Badge Styles
   ============================================ */
.opencom-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--opencom-font-heading);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--opencom-radius-sm);
    background: var(--opencom-primary-600);
    color: var(--opencom-white);
}

/* ============================================
   Common Utility Classes
   ============================================ */
.opencom-text-center {
    text-align: center;
}

.opencom-text-left {
    text-align: left;
}

.opencom-text-right {
    text-align: right;
}

/* ============================================
   Common Animations
   ============================================ */
@keyframes opencom-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes opencom-slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes opencom-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   Responsive Common Styles
   ============================================ */
@media (max-width: 1024px) {
    .opencom-title {
        font-size: 32px;
    }

    .opencom-description {
        font-size: 16px;
    }

    .opencom-container {
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .opencom-header {
        margin-bottom: 32px;
    }

    .opencom-title {
        font-size: 28px;
    }

    .opencom-container {
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    .opencom-title {
        font-size: 24px;
    }

    .opencom-description {
        font-size: 15px;
    }

    .opencom-container {
        padding: 16px 12px;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .opencom-container {
        box-shadow: none;
        border: 1px solid var(--opencom-gray-200);
    }
}

/* ============================================
   Elementor Editor Styles
   ============================================ */
.elementor-editor-active .opencom-wrapper {
    animation: none;
}



/* ============================================
   Country Colors (flag-associated, use --opencom-chroma)
   ============================================ */

:root {
    /* AT Austria – red */
    --opencom-country-at: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* BE Belgium – yellow */
    --opencom-country-be: oklch(0.75 var(--opencom-chroma) 90 / var(--opencom-alpha));
    /* BG Bulgaria – green */
    --opencom-country-bg: oklch(0.48 var(--opencom-chroma) 145 / var(--opencom-alpha));
    /* HR Croatia – red */
    --opencom-country-hr: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* CY Cyprus – copper/orange */
    --opencom-country-cy: oklch(0.55 var(--opencom-chroma) 55 / var(--opencom-alpha));
    /* CZ Czech Republic – blue */
    --opencom-country-cz: oklch(0.48 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* DK Denmark – red */
    --opencom-country-dk: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* EE Estonia – blue */
    --opencom-country-ee: oklch(0.48 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* FI Finland – blue */
    --opencom-country-fi: oklch(0.48 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* FR France – blue */
    --opencom-country-fr: oklch(0.52 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* DE Germany – black/red – use red */
    --opencom-country-de: oklch(0.48 var(--opencom-chroma) 25) / var(--opencom-alpha);
    /* GR Greece – blue */
    --opencom-country-gr: oklch(0.48 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* HU Hungary – green */
    --opencom-country-hu: oklch(0.48 var(--opencom-chroma) 145 / var(--opencom-alpha));
    /* IE Ireland – green */
    --opencom-country-ie: oklch(0.48 var(--opencom-chroma) 145 / var(--opencom-alpha));
    /* IT Italy – green */
    --opencom-country-it: oklch(0.48 var(--opencom-chroma) 145 / var(--opencom-alpha));
    /* LV Latvia – maroon/red */
    --opencom-country-lv: oklch(0.42 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* LT Lithuania – yellow/green – use green */
    --opencom-country-lt: oklch(0.48 var(--opencom-chroma) 145 / var(--opencom-alpha));
    /* LU Luxembourg – red */
    --opencom-country-lu: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* MT Malta – red */
    --opencom-country-mt: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* NL Netherlands – orange */
    --opencom-country-nl: oklch(0.65 var(--opencom-chroma) 55 / var(--opencom-alpha));
    /* PL Poland – red */
    --opencom-country-pl: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* PT Portugal – green */
    --opencom-country-pt: oklch(0.48 var(--opencom-chroma) 145 / var(--opencom-alpha));
    /* RO Romania – blue */
    --opencom-country-ro: oklch(0.48 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* SK Slovakia – blue */
    --opencom-country-sk: oklch(0.48 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* SI Slovenia – blue */
    --opencom-country-si: oklch(0.48 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* ES Spain – red */
    --opencom-country-es: oklch(0.52 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* SE Sweden – blue */
    --opencom-country-se: oklch(0.48 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* CH Switzerland – red */
    --opencom-country-ch: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* UK United Kingdom – blue */
    --opencom-country-uk: oklch(0.42 var(--opencom-chroma) 258 / var(--opencom-alpha));
    /* NO Norway – red */
    --opencom-country-no: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* TN Tunisia – red */
    --opencom-country-tn: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
    /* TR Turkey – red */
    --opencom-country-tr: oklch(0.50 var(--opencom-chroma) 25 / var(--opencom-alpha));
}