/* ===== MAIN STYLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* CSS Isolation and Reset for Embedded App */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: inherit;
    background: inherit;
    overflow-x: hidden;
}

/* CSS Containment for complete isolation */
body {
    contain: layout style paint;
    isolation: isolate;
}

/* Scoped CSS Variables - Only apply within the embed container */
.embed-container {
    /* === CUSTOMIZABLE COLORS === */
    --bg-primary: #ffffff;
    --bg-card: #ededed;
    --bg-secondary: #2d334e;
    --bg-glass-card-secondary: #2c384c;
    --text-color: #ffffff;
    --text-color-secondary: rgba(255, 255, 255, 0.5);
    
    /* === FIXED SYSTEM COLORS === */
    --input-bg: #374151;
    --input-border: #4b5563;
    --border-divider: #374151;
    --slider-track: linear-gradient(90deg, #4a5568 0%, #718096 100%);
    --overlay-bg: rgba(0, 0, 0, 0.7);
    
    /* === CHART COLORS === */
    --chart-color-1: #95c4fd;
    --chart-color-2: #ff7070;
    --chart-color-3: #fee071;
    --chart-color-4: #0dd311;
    --chart-color-5: #9e62fe;
    
    /* === CHART COLOR ALIASES FOR SUMMARY === */
    --color-onero: var(--chart-color-1);
    --color-piaci-hitel: var(--chart-color-2);
    --color-babavaro: var(--chart-color-3);
    --color-tamogatott-hitel: var(--chart-color-4);
    --color-egyeb-koltsegek: var(--chart-color-5);
    
    /* === GRADIENT COLORS === */
    --bg-card-grad-1: #ff3737;
    --bg-card-grad-2: #ffc23e;
    --bg-card-grad-3: #2b42ac;
    
    /* Container isolation */
    contain: layout style paint;
    isolation: isolate;
    position: relative;
    z-index: 1;
    
    /* Ensure embed container takes full width and height */
    width: 100%;
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-color);
    overflow-x: hidden;
    
    /* Default gradient settings */
    --bg-card: linear-gradient(135deg, var(--bg-card-grad-1) 0%, var(--bg-card-grad-2) 100%);
}

/* Modern glassmorphism effects - Scoped to embed container */
.embed-container .glass-card {
    background: var(--bg-card);
    border: 0px solid rgba(255, 255, 255, 0.1);
}

.embed-container .glass-card-secondary {
    background: var(--bg-glass-card-secondary) !important;
    border: 0px solid rgba(255, 255, 255, 0);
}

/* CSS Isolation Solution - Scope all remaining styles to embed container */
.embed-container * {
    box-sizing: border-box;
}

/* Scope all input, button, and form elements */
.embed-container input,
.embed-container button,
.embed-container select,
.embed-container textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}