/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/ief-viewer/src/styles.scss?ngGlobalStyle ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: "Inter";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  /* --font-weight-normal */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  /* Adjust path */
  src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  /* --font-weight-medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  /* Adjust path */
  src: url("/assets/fonts/inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  /* --font-weight-bold */
  font-style: normal;
  font-display: swap;
}
/* --- END Default Font --- */
/* --- ADDED: @font-face rules for Circular font --- */
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Book.woff2") format("woff2");
  font-weight: 400;
  /* Corresponds to --font-weight-normal */
  font-style: normal;
  font-display: swap;
  /* Use swap for better perceived performance */
}
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Medium.woff2") format("woff2");
  font-weight: 500;
  /* Corresponds to --font-weight-medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Bold.woff2") format("woff2");
  font-weight: 700;
  /* Corresponds to --font-weight-bold */
  font-style: normal;
  font-display: swap;
}
/* --- END ADDED: @font-face rules --- */
/* ========================================================================== */
/* Variables                                                                  */
/* ========================================================================== */
:host {
  --text-secondary-color: #6c757d;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --border-radius-small: 4px;
  --spacing-xs: 8px;
  --border-radius-base: 6px;
}

:root {
  /* --- NEW: Journee Palette --- */
  --background-color-base: #F5F4F0;
  --background-color-accent: #4A4441;
  --text-color-on-base: #212529;
  /* Default dark text on light cream */
  --text-color-on-accent: #F5F4F0;
  /* Light text on dark brown */
  /* --- END NEW --- */
  /* --- Core Palette & Text (Updated) --- */
  /* UPDATED: Set default background to Journee light */
  --background-color: var(--background-color-base);
  /* --- ADDED: Definition for Page Background Override --- */
  --page-background-color-override: null;
  /* Default to null, override via styleOverrides */
  /* --- END ADDED --- */
  /* Updated text color */
  --text-color: #212529;
  /* Darker grey */
  --text-color-inverse: #ffffff;
  --text-secondary-color: #6c757d;
  /* Kept */
  --icon-color: var(--text-secondary-color);
  /* Default icon color, can be overridden below if needed */
  /* Slightly softened border color */
  --border-color: #dee2e6;
  /* Changed from #ccc */
  --highlight-color: #ffffff;
  /* Changed from #fff */
  /* --- Global Semantic Colors (e.g., for links, non-button accents) --- */
  --primary-color: #429546;
  /* Green */
  --primary-color-hover: #3a823e;
  --primary-color-rgb: 66, 149, 70;
  --secondary-color: #d14541;
  /* Red */
  --secondary-color-hover: #b83b37;
  /* Error color kept strong for visibility */
  --error-color: #b00020;
  --error-text-color: var(--error-color);
  --error-background-color: #fbe9e7;
  /* Warning color kept */
  --warning-color: #ffa500;
  /* Success color kept */
  --success-color: #28a745;
  --success-background-color: #dff0d8;
  --success-text-color: #3c763d;
  --success-border-color: #d6e9c6;
  /* --- >>> CHANGE START: Invalid Input Border Color Definition <<< --- */
  /* NEW: Variable specifically for invalid input borders */
  --invalid-input-border-color: var(--warning-color);
  /* Use warning color for border by default */
  /* Alternative: Define a specific muted red: --invalid-input-border-color: #e57373; */
  /* --- >>> CHANGE END <<< --- */
  /* --- Overridable Variables for Buttons & Interactions (Defaults to Dark Brown Theme) --- */
  /* Marketing can override these via ts_page_configs.metadata.styleOverrides */
  --button-primary-bg-override: #4A4441;
  /* Default: Dark Brown */
  --button-primary-hover-bg-override: #3A3331;
  /* Default: Darker Brown */
  --button-primary-text-override: #FFFFFF;
  /* Default: White */
  --button-primary-rgb-override: 74, 68, 65;
  /* Default: Dark Brown RGB */
  --button-secondary-border-override: var(--button-primary-bg-override);
  /* Default: Dark Brown */
  --button-secondary-text-override: var(--button-primary-bg-override);
  /* Default: Dark Brown */
  --button-secondary-hover-bg-override: rgba(var(--button-primary-rgb-override), 0.1);
  /* Default: Light Brown Transparent */
  --button-secondary-hover-text-override: var(--button-primary-hover-bg-override);
  /* Default: Darker Brown */
  --button-text-color-override: var(--button-secondary-text-override);
  /* Default: Dark Brown */
  --button-text-hover-bg-override: var(--button-secondary-hover-bg-override);
  /* Default: Light Brown Transparent */
  /* Variables for specific on-dark variants (can also be overridden) */
  --button-text-on-dark-variant-override: #FFFFFF;
  /* Default: White */
  --button-on-dark-hover-bg-override: rgba(255, 255, 255, 0.15);
  --button-on-dark-active-bg-override: rgba(255, 255, 255, 0.25);
  /* Variables for related interactive elements (can also be overridden) */
  --language-selector-focus-border-override: var(--button-primary-bg-override);
  /* Default: Dark Brown */
  --language-selector-focus-shadow-rgb-override: var(--button-primary-rgb-override);
  /* Default: Dark Brown RGB */
  /* --icon-color-override: var(--text-secondary-color); /* Example: Default icon color (can be overridden) */
  /* --- END Overridable Variables --- */
  /* --- Implementation Variables (Used by Components, mapped to defaults/overrides) --- */
  --primary-button-background: var(--button-primary-bg-override);
  --primary-button-hover-background: var(--button-primary-hover-bg-override);
  --button-text-color: var(--button-primary-text-override);
  /* Secondary/Text variants typically rely on their specific override vars directly in component SCSS */
  /* Example: .variant-secondary { border-color: var(--button-secondary-border-override); } */
  --language-selector-focus-border: var(--language-selector-focus-border-override);
  --language-selector-focus-shadow-rgb: var(--language-selector-focus-shadow-rgb-override);
  /* --icon-color: var(--icon-color-override); /* Map icon color if needed */
  /* Note: Existing --icon-color is defined above in Core Palette */
  /* --- Button Specific Variables (Continued - Sizing, etc.) --- */
  --button-min-height: 50px;
  --button-min-height-new: 50px;
  --button-max-height-new: 50px;
  --button-min-height-mobile: 44px;
  --button-min-height-mobile-new: 50px;
  --button-max-height-mobile-new: 50px;
  --button-standard-min-width: 180px;
  /* Example value, adjust as needed */
  /* --- Variables for On-Dark Button Variants (Implementation - Use override values) --- */
  /* These are used by the .variant-*-on-dark classes */
  --button-text-on-dark-variant: var(--button-text-on-dark-variant-override);
  --button-on-dark-hover-bg: var(--button-on-dark-hover-bg-override);
  --button-on-dark-active-bg: var(--button-on-dark-active-bg-override);
  /* --- END Button Variables --- */
  /* Interaction States (For non-button elements) */
  --hover-background-color: #e2e6ea;
  --active-background-color: #dae0e5;
  /* Disabled State (For general elements and buttons) */
  --disabled-background-color: #e9ecef;
  --disabled-text-color: #6c757d;
  --disabled-border-color: #ced4da;
  --disabled-background-color-rgb: 233, 236, 239;
  /* --- Fonts (Updated for Dynamic Font Support) --- */
  --font-family-default: "Inter", sans-serif;
  --font-family-circular: "Circular", sans-serif;
  /* --- Set default font --- */
  --font-family: var(--font-family-default);
  /* --- END UPDATED --- */
  --font-size-base: 15px;
  /* Increased from 14px */
  --font-size-large: 17px;
  /* Adjusted relative to base */
  --font-size-small: 13px;
  /* Adjusted relative to base */
  --line-height-base: 1.6;
  /* Added for better readability */
  --font-weight-normal: 400;
  /* Added explicit normal weight */
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /* Updated Base Heading Font Sizes (Adjusted relative to base) */
  --h1-font-size: 2.8rem;
  /* Example: ~36px */
  --h2-font-size: 2.2rem;
  /* Example: ~28.5px */
  --h3-font-size: 1.6rem;
  /* Example: ~24px */
  --h4-font-size: 1.4rem;
  /* Example: ~21px */
  --h5-font-size: 1.2rem;
  /* Example: ~18px */
  --h6-font-size: 1rem;
  /* Example: ~15px (same as base) */
  /* --- Borders & Shadows (Updated) --- */
  --border-radius-small: 4px;
  /* Slightly increased */
  --border-radius-base: 6px;
  /* Increased from 4px */
  --border-radius-medium: 10px;
  /* Increased */
  /* NEW: Shadow Variables */
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  /* Existing shadow variables */
  --shadow-color: #ccc;
  --shadow-color-rgb: 204, 204, 204;
  /* --- Spacing (Updated) --- */
  /* Adjusted for slightly more 'airy' feel */
  --spacing-xxs: 4px;
  /* Increased */
  --spacing-xs: 8px;
  /* Increased */
  --spacing-sm: 12px;
  /* Increased */
  --spacing-md: 20px;
  /* Increased */
  --spacing-lg: 30px;
  /* Increased */
  --spacing-xl: 40px;
  /* Added */
  --spacing-xxl: 50px;
  /* Added */
  --spacing-extra: 60px;
  /* --- Layout Control Variables --- */
  --container-max-width: 1440px;
  /* Updated standard max width */
  --container-padding-inline: var(--spacing-md);
  /* Default horizontal padding within containers */
  /* Layout */
  --min-height-full: 100vh;
  /* --- Zigzag Semantic Variables --- */
  --zigzag-bg-light: var(--background-color-base);
  --zigzag-bg-dark: var(--background-color-accent);
  --zigzag-text-light: var(--text-color-on-base);
  --zigzag-text-dark: var(--text-color-on-accent);
  --zigzag-title-dark: var(--text-color-on-accent);
  --zigzag-link-dark: #EAE8E1;
  /* --- END NEW --- */
  /* --- Section Backgrounds --- */
  --section-bg-light: var(--background-color-base);
  --section-bg-dark: #EAEAEA;
  --footer-background-color: #4A4441;
  --footer-text-color: #ffffff;
  /* --- Sticky Header --- */
  /* NOTE: If overriding --header-sticky-bg-rgb, consider also adjusting --header-sticky-bg-opacity. */
  --header-sticky-bg-opacity: 0.65;
  /* Default opacity for sticky background */
  --header-sticky-blur: 0px;
  /* Default blur intensity (0px disables) */
  /* --- Theme Color for OS Integration --- */
  --theme-color: var(--primary-color);
  /* Still uses Global Semantic Green for browser UI theme */
  /* Component-Specific (Review for removal if unused) */
  --table-header-background: #f8f9fa;
  --table-row-hover-background: #f1f3f5;
  --table-border-color: #dee2e6;
  --strength-bar-height: 6px;
  --strength-bar-radius: 3px;
  --overlay-background-rgb: 0, 0, 0;
  --z-index-loader: 1000;
  --z-index-header: 900;
  --loader-content-background: transparent;
  /* Link Variables (Still use global primary color - Green) */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-hover);
  --link-active-color: var(--link-hover-color);
  --link-visited-color: var(--link-color);
  --link-text-decoration: underline;
  --link-hover-text-decoration: underline;
  --link-disabled-opacity: 0.65;
  --link-focus-color: var(--primary-color);
  /* Other (Kept existing, review usage later) */
  --light-gray: #d3d3d3;
  --focus-outline-color-on-dark: #ffffff;
  --hero-min-height: 500px;
  /* --- Blur Effects --- */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;
  --blur-xl: 12px;
  /* --- Borders & Shadows --- */
  --border-radius-small: 4px;
  --border-radius-base: 6px;
  --border-radius-medium: 10px;
  --border-radius-large: 16px;
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-color: #ccc;
  --shadow-color-rgb: 204, 204, 204;
  /*pratik code*/
  /* Adjusted for slightly more 'airy' feel */
  --spacing--rem-xxs: 1rem;
  /* Increased */
  --spacing--rem--xs: 2rem;
  /* Increased */
  --spacing--rem--sm: 3rem;
  /* Increased */
  --spacing--rem--md: 4rem;
  /* Increased */
  --spacing--rem--lg: 5rem;
  /* Increased */
  --spacing--rem--xl: 6rem;
  /* Added */
  --spacing--rem--xxl: 7rem;
  /* Added */
  --spacing--rem--extra: 8rem;
  /* Added */
  --font-size-medium: 14px;
  /* Added */
  --font-size-regular: 16px;
  /* Added */
  --line-height-caption: 1.2;
  /* For small UI elements */
  --line-height-snug: 1.3;
  /* For compact UI text  */
  --line-height-compact: 1.4;
  /* For easier long-form reading */
  --line-height-reading: 1.8;
  /* For large text like headings or quotes */
  --line-height-display: 2.0;
  /* For very spacious layouts or oversized titles */
  --line-height-spacious: 2.2;
  /* Rem-based sizing scale (for height & width) */
  --size-rem-xxs: 1rem;
  --size-rem-xs: 2rem;
  --size-rem-sm: 3rem;
  --size-rem-md: 4rem;
  --size-rem-lg: 5rem;
  --size-rem-xl: 6rem;
  --size-rem-xxl: 7rem;
  --size-rem-extra: 8rem;
  /* Percentage-based sizing scale (10% through 100%) */
  --size-pct-10: 10%;
  --size-pct-20: 20%;
  --size-pct-30: 30%;
  --size-pct-40: 40%;
  --size-pct-50: 50%;
  --size-pct-60: 60%;
  --size-pct-70: 70%;
  --size-pct-80: 80%;
  --size-pct-90: 90%;
  --size-pct-100: 100%;
  /* Added */
  --font-weight-large: 600;
  /* Added */
  --border-radius-high: 20px ;
}

/* ======================== Dark Theme Overrides ========================= */
[data-theme=dark] {
  /* --- Core Palette & Text (Dark) --- */
  --background-color-base: #1a1a1a;
  --background-color-accent: #4A4441;
  /* Journee dark */
  --background-color: var(--background-color-base);
  /* --- NOTE: --page-background-color-override is NOT redefined here; --- */
  /* --- it will still inherit from :root unless explicitly set via styleOverrides --- */
  --text-color: #e0e0e0;
  --text-color-inverse: #1a1a1a;
  --text-secondary-color: #a0a0a0;
  --icon-color: #6c757d;
  /* Default icon color set to neutral grey */
  /* Default icon color for dark theme */
  --border-color: #3a3a3a;
  --highlight-color: #2c2c2c;
  --text-color-on-base: var(--text-color);
  --text-color-on-accent: #F5F4F0;
  /* --- Global Semantic Colors (Dark) --- */
  --primary-color: #5cb85c;
  /* Brighter green */
  --primary-color-hover: #4cae4c;
  --primary-color-rgb: 92, 184, 92;
  --secondary-color: #e57373;
  /* Brighter red */
  --secondary-color-hover: #ef5350;
  /* ... other dark theme semantic colors ... */
  --error-color: #f44336;
  --error-text-color: var(--error-color);
  --error-background-color: #4d1b1b;
  --warning-color: #ffb74d;
  --success-color: #81c784;
  --success-background-color: #1e4620;
  --success-text-color: #c8e6c9;
  --success-border-color: #388e3c;
  /* --- Component Accent Colors (Dark) --- */
  --component-accent-color: var(--primary-color);
  /* Inherit dark theme primary green by default */
  /* --- >>> CHANGE START: Invalid Input Border Color Definition (Dark Theme) <<< --- */
  /* Use warning color, which inherits the dark theme's warning value */
  --invalid-input-border-color: var(--warning-color);
  /* --- >>> CHANGE END <<< --- */
  /* --- Overridable Variables for Buttons & Interactions (DARK THEME DEFAULTS) --- */
  --button-primary-bg-override: #E0E0E0;
  /* Example: Light Grey */
  --button-primary-hover-bg-override: #FFFFFF;
  /* Example: White */
  --button-primary-text-override: #1a1a1a;
  /* Example: Dark text */
  --button-primary-rgb-override: 224, 224, 224;
  /* Light Grey RGB */
  --button-secondary-border-override: var(--button-primary-bg-override);
  /* Example: Light Grey */
  --button-secondary-text-override: var(--button-primary-bg-override);
  /* Example: Light Grey */
  --button-secondary-hover-bg-override: rgba(var(--button-primary-rgb-override), 0.1);
  /* Example: Very Light Grey Transparent */
  --button-secondary-hover-text-override: var(--button-primary-hover-bg-override);
  /* Example: White */
  --button-text-color-override: var(--button-secondary-text-override);
  /* Example: Light Grey */
  --button-text-hover-bg-override: var(--button-secondary-hover-bg-override);
  /* Example: Very Light Grey Transparent */
  --button-text-on-dark-variant-override: #DDDDDD;
  /* Slightly off-white for dark */
  --button-on-dark-hover-bg-override: rgba(255, 255, 255, 0.1);
  --button-on-dark-active-bg-override: rgba(255, 255, 255, 0.15);
  --language-selector-focus-border-override: var(--button-primary-bg-override);
  /* Example: Light Grey */
  --language-selector-focus-shadow-rgb-override: var(--button-primary-rgb-override);
  /* Example: Light Grey RGB */
  /* --icon-color-override: var(--text-secondary-color); /* Dark theme override if needed */
  /* --- END Overridable Variables (Dark Theme) --- */
  /* --- Implementation Variables (Dark Theme - Mapped to Dark Overrides) --- */
  /* Note: Many implementation vars inherit from :root, but we redefine those needing dark theme values */
  --primary-button-background: var(--button-primary-bg-override);
  --primary-button-hover-background: var(--button-primary-hover-bg-override);
  --button-text-color: var(--button-primary-text-override);
  /* Secondary/Text variants in components use their specific override vars */
  --language-selector-focus-border: var(--language-selector-focus-border-override);
  --language-selector-focus-shadow-rgb: var(--language-selector-focus-shadow-rgb-override);
  /* --icon-color: var(--icon-color-override); /* Dark theme icon mapping if needed */
  /* --- Variables for On-Dark Button Variants (Implementation - Dark Theme) --- */
  --button-text-on-dark-variant: var(--button-text-on-dark-variant-override);
  --button-on-dark-hover-bg: var(--button-on-dark-hover-bg-override);
  --button-on-dark-active-bg: var(--button-on-dark-active-bg-override);
  /* Interaction States (Dark) */
  --hover-background-color: #383838;
  --active-background-color: #4a4a4a;
  /* Disabled State (Dark) */
  --disabled-background-color: #303030;
  --disabled-text-color: #757575;
  --disabled-border-color: #424242;
  --disabled-background-color-rgb: 48, 48, 48;
  /* --- Borders & Shadows (Dark) --- */
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.20), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.20), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  --shadow-color: #000;
  --shadow-color-rgb: 0, 0, 0;
  /* --- Zigzag Semantic Variables (Dark) --- */
  --zigzag-bg-light: var(--background-color-base);
  /* Dark theme light = dark base */
  --zigzag-bg-dark: var(--background-color-accent);
  /* Dark theme dark = Journee dark */
  --zigzag-text-light: var(--text-color-on-base);
  --zigzag-text-dark: var(--text-color-on-accent);
  --zigzag-title-dark: var(--text-color-on-accent);
  --zigzag-link-dark: #EAE8E1;
  /* --- END NEW --- */
  /* --- Section Backgrounds (Dark) --- */
  --section-bg-light: var(--background-color);
  /* Dark theme light = dark base */
  --section-bg-dark: #212121;
  /* Darker shade for contrast */
  --footer-background-color: #EAEAEA;
  --footer-text-color: #212121;
  /* --- Theme Color for OS Integration (Dark) --- */
  --theme-color: var(--primary-color);
  /* Still uses Dark Semantic Green */
  /* Component-Specific (Dark) */
  --table-header-background: #2a2a2a;
  --table-row-hover-background: #333333;
  --table-border-color: #424242;
  /* Link Variables (Dark Theme Primary - Green) */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-hover);
  --link-active-color: var(--link-hover-color);
  --link-focus-color: var(--primary-color);
  /* Other (Dark) */
  --light-gray: #555555;
  /* Developer changes */
  --header-background-color: rgb(234 232 229);
  /* solid white bg */
  --header-sticky-background: rgba(255, 255, 255, 0.95);
  /* slightly translucent when stuck */
  --header-sticky-border-color: var(--border-color, #e0e0e0);
}

/* ========================================================================== */
/* Global Styles                                                              */
/* ========================================================================== */
/* Apply new font-family and base styles */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  /* --- CHANGE: Use the page background override variable with fallback --- */
  background-color: var(--background-color);
  /* --- END CHANGE --- */
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

html,
body {
  overscroll-behavior-y: none;
}

/* Base text helper */
.text-base {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-color);
}

/* ========================================================================== */
/* Layout Utilities                                                           */
/* ========================================================================== */
/* --- NEW: Content Container Utility Class --- */
.content-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-inline);
  padding-right: var(--container-padding-inline);
  box-sizing: border-box;
}

/* --- END NEW Content Container --- */
/* ========================================================================== */
/* Flexbox Utilities                                                          */
/* ========================================================================== */
/* Kept as is */
/* ========================================================================== */
/* Dynamic Font Override Classes                                              */
/* ========================================================================== */
.font-family-circular {
  --font-family: var(--font-family-circular);
}

/* Add other font classes here */
/* Apply the overridden font */
:host(.font-family-circular),
.font-family-circular {
  font-family: var(--font-family);
}

:host(.font-family-circular) *,
.font-family-circular * {
  font-family: inherit;
}

/* ========================================================================== */
/* Button Styles                                                              */
/* ========================================================================== */
/* Base styles for non-uic-button scenarios, or global defaults */
/* Kept for potential fallback use */
.btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  text-align: center;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease, color 0.2s ease;
  color: var(--button-text-color);
  background-color: var(--primary-button-background);
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  border: 1px solid var(--primary-button-background);
  -webkit-user-select: none;
          user-select: none;
}
.btn:hover:not(:disabled) {
  background-color: var(--primary-button-hover-background);
  border-color: var(--primary-button-hover-background);
}
.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
.btn:focus:not(:focus-visible) {
  outline: none;
}
.btn:active:not(:disabled) {
  transform: scale(0.98);
}
.btn:disabled {
  background-color: var(--disabled-background-color);
  border-color: var(--disabled-border-color);
  color: var(--disabled-text-color);
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

/* --- Rules for On-Dark Button Variants --- */
/* Apply styles directly to uic-button assuming it uses these classes */
/* Secondary button variant specifically for use on dark backgrounds */
/* Example: white outline button - uses implementation variables */
.uic-button.variant-secondary-on-dark {
  /* Base State */
  background-color: transparent;
  border-color: transparent;
  color: var(--button-text-on-dark-variant, #FFFFFF);
  /* Hover State */
  /* Focus Visible State */
  /* Focus Not Visible State */
  /* Active State */
}
.uic-button.variant-secondary-on-dark:hover:not(:disabled) {
  background-color: var(--button-on-dark-hover-bg, rgba(255, 255, 255, 0.1));
  border-color: transparent;
  color: var(--button-text-on-dark-variant, #FFFFFF);
}
.uic-button.variant-secondary-on-dark:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.uic-button.variant-secondary-on-dark:focus:not(:focus-visible) {
  outline: none;
}
.uic-button.variant-secondary-on-dark:active:not(:disabled) {
  background-color: var(--button-on-dark-active-bg, rgba(255, 255, 255, 0.15));
}

/* Text button variant specifically for use on dark backgrounds */
/* Uses implementation variables */
.uic-button.variant-text-on-dark {
  color: var(--button-text-on-dark-variant);
  background-color: transparent;
  border-color: transparent;
}
.uic-button.variant-text-on-dark:hover:not(:disabled) {
  background-color: var(--button-on-dark-hover-bg);
}
.uic-button.variant-text-on-dark:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* --- END NEW Button Variant Rules --- */
/* ========================================================================== */
/* REMOVED Deprecated Styles                                                  */
/* ========================================================================== */
/* ========================================================================== */
/* Responsive Styles                                                          */
/* ========================================================================== */
/* Keep minimal base responsive adjustments for btn if needed */
@media (max-width: 767.98px) {
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: var(--button-min-height-mobile);
  }
}
@media (max-width: 576px) {
  .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}
/* ========================================================================== */
/* Link Styles                                                                */
/* ========================================================================== */
/* Keep link styles as they apply globally to <a> tags */
a,
.uic-link-host > a {
  color: var(--link-color);
  /* Still uses global primary green */
  -webkit-text-decoration: var(--link-text-decoration);
          text-decoration: var(--link-text-decoration);
  cursor: pointer;
  transition: color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
}
a:hover,
.uic-link-host > a:hover {
  color: var(--link-hover-color);
  -webkit-text-decoration: var(--link-hover-text-decoration);
          text-decoration: var(--link-hover-text-decoration);
  -webkit-text-decoration-color: var(--link-hover-color);
          text-decoration-color: var(--link-hover-color);
}
a:active,
.uic-link-host > a:active {
  color: var(--link-active-color);
}
a:visited,
.uic-link-host > a:visited {
  /* color: var(--link-visited-color); */
}
a:focus-visible,
.uic-link-host > a:focus-visible {
  outline: 2px solid var(--link-focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus:not(:focus-visible),
.uic-link-host > a:focus:not(:focus-visible) {
  outline: none;
}

.uic-link-host.disabled {
  color: var(--disabled-text-color);
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
  opacity: var(--link-disabled-opacity);
}

@media (max-width: 767.98px) {
  .header-cta-button .uic-button {
    min-width: auto !important;
  }
}
/* developer code story-page.component.scss */
@media (max-width: 767.98px) {
  .story-page {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .media-container {
    order: 1;
    width: var(--size-pct-100);
    height: 40vh !important;
  }
  .media-container uic-media-viewer,
  .media-container video {
    max-width: var(--size-pct-100);
    max-height: none;
    width: var(--size-pct-100);
    height: auto;
    object-fit: contain;
  }
  .textbox-container {
    order: 2;
    width: var(--size-pct-100);
    margin-left: 0;
    height: 35vh;
    top: 1rem;
    display: flex;
    flex-direction: column;
  }
  .textbox-container .textbox-scroll-content {
    max-width: var(--size-pct-100);
    width: 82%;
    height: 600px;
    overflow-y: auto;
    padding: var(--spacing-md);
    margin: 0 auto;
    box-shadow: 0 0 14px rgba(86, 86, 86, 0.1882352941);
    background-color: #fff !important;
    border-radius: var(--spacing-md) !important;
    color: #000 !important;
  }
  .story-agent-container {
    order: 3;
    width: var(--size-pct-100);
    margin-top: var(--spacing-rem-xxs);
    display: flex;
    justify-content: center;
    padding: 0 var(--spacing-rem-xxs);
  }
  .read-more-button {
    margin-top: 10px;
  }
}
:host ::ng-deep uic-media-viewer video::-webkit-media-controls-panel {
  display: none !important;
}

:host ::ng-deep uic-media-viewer video::-moz-media-controls {
  display: none !important;
}

.textbox-scroll-content uic-image-gallery {
  cursor: pointer;
}

/* developer code story-detail-card.component.scss */
/* developer code storytelling-container.component.scss */
/* developer code story-actions.component.scss */
/* You can add global styles to this file, and also import other style files */
.transition-overlay {
  pointer-events: none; /* during fade-in/out it can block input */
}

.transition-overlay[style*="opacity: 0"] {
  pointer-events: none !important; /* once faded out, let input pass */
}
/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./libs/uic-shared/src/styles/global-shared-styles.scss?ngGlobalStyle ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
@font-face {
  font-family: "Inter";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  /* --font-weight-normal */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  /* Adjust path */
  src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  /* --font-weight-medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  /* Adjust path */
  src: url("/assets/fonts/inter/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  /* --font-weight-bold */
  font-style: normal;
  font-display: swap;
}
/* --- END Default Font --- */
/* --- ADDED: @font-face rules for Circular font --- */
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Book.woff2") format("woff2");
  font-weight: 400;
  /* Corresponds to --font-weight-normal */
  font-style: normal;
  font-display: swap;
  /* Use swap for better perceived performance */
}
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Medium.woff2") format("woff2");
  font-weight: 500;
  /* Corresponds to --font-weight-medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  /* Adjust path relative to your built application's assets folder */
  src: url("/assets/fonts/circular/CircularStd-Bold.woff2") format("woff2");
  font-weight: 700;
  /* Corresponds to --font-weight-bold */
  font-style: normal;
  font-display: swap;
}
/* --- END ADDED: @font-face rules --- */
/* ========================================================================== */
/* Variables                                                                  */
/* ========================================================================== */
:host {
  --text-secondary-color: #6c757d;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --border-radius-small: 4px;
  --spacing-xs: 8px;
  --border-radius-base: 6px;
}

:root {
  /* --- Journee Palette --- */
  --background-color-base: #F5F4F0;
  --background-color-accent: #4A4441;
  /* Dark Brown */
  --text-color-on-base: #212529;
  /* Default dark text on light cream */
  --text-color-on-accent: #f5f4f0;
  /* Light text on dark brown */
  /* --- Core Palette & Text --- */
  --background-color: var(--background-color-base);
  --text-color: #212529;
  /* Darker grey */
  --text-color-inverse: #ffffff;
  --contrast-aa: #5A5A5A;
  /* WCAG-AA compliant grey text */
  --text-secondary-color: var(--contrast-aa);
  --icon-color: var(--contrast-aa);
  /* Default icon color set to neutral grey */
  --border-color: #dee2e6;
  --highlight-color: #ffffff;
  /* --- Global Semantic Colors --- */
  --primary-color: #429546;
  /* Green */
  --primary-color-hover: #3a823e;
  --primary-color-rgb: 66, 149, 70;
  --secondary-color: #d14541;
  /* Red */
  --secondary-color-hover: #b83b37;
  --error-color: #b00020;
  --error-text-color: var(--error-color);
  --error-background-color: #fbe9e7;
  --warning-color: #ffa500;
  --success-color: #28a745;
  --success-background-color: #dff0d8;
  --success-text-color: #3c763d;
  --success-border-color: #d6e9c6;
  /* --- Component Accent Colors --- */
  --component-accent-color: var(--primary-color);
  /* Default accent to primary green */
  /* --- Invalid Input Border Color --- */
  --invalid-input-border-color: var(--warning-color);
  /* Use warning color for border by default */
  /* --- Overridable Variables for Buttons & Interactions --- */
  /* Marketing can override these via ts_page_configs.metadata.styleOverrides */
  --button-primary-bg-override: #4a4441;
  /* Default: Dark Brown */
  --button-primary-hover-bg-override: #3a3331;
  /* Default: Darker Brown */
  --button-primary-text-override: #ffffff;
  /* Default: White */
  --button-primary-rgb-override: 74, 68, 65;
  /* Default: Dark Brown RGB */
  --button-secondary-border-override: var(--button-primary-bg-override);
  /* Default: Dark Brown */
  --button-secondary-text-override: var(--button-primary-bg-override);
  /* Default: Dark Brown */
  --button-secondary-hover-bg-override: rgba(
    var(--button-primary-rgb-override),
    0.1
  );
  /* Default: Light Brown Transparent */
  --button-secondary-hover-text-override: var(
    --button-primary-hover-bg-override
  );
  /* Default: Darker Brown */
  --button-text-color-override: var(--button-secondary-text-override);
  /* Default: Dark Brown */
  --button-text-hover-bg-override: var(--button-secondary-hover-bg-override);
  /* Default: Light Brown Transparent */
  /* Variables for specific on-dark variants */
  --button-text-on-dark-variant-override: #FFFFFF;
  /* Default: White */
  --button-on-dark-hover-bg-override: rgba(255, 255, 255, 0.15);
  --button-on-dark-active-bg-override: rgba(255, 255, 255, 0.25);
  /* Variables for related interactive elements */
  --language-selector-focus-border-override: var(--button-primary-bg-override);
  /* Default: Dark Brown */
  --language-selector-focus-shadow-rgb-override: var(
    --button-primary-rgb-override
  );
  /* Default: Dark Brown RGB */
  /* --- Implementation Variables --- */
  --primary-button-background: var(--button-primary-bg-override);
  --primary-button-hover-background: var(--button-primary-hover-bg-override);
  --button-text-color: var(--button-primary-text-override);
  --language-selector-focus-border: var(--language-selector-focus-border-override);
  --language-selector-focus-shadow-rgb: var(--language-selector-focus-shadow-rgb-override);
  /* --- Button Sizing --- */
  --button-min-height: 40px;
  --button-min-height-mobile: 44px;
  --button-standard-min-width: 180px;
  /* Example value, adjust as needed */
  --control-size-lg: 48px;
  /* --- On-Dark Button Variant Implementation --- */
  --button-text-on-dark-variant: var(--button-text-on-dark-variant-override);
  --button-on-dark-hover-bg: var(--button-on-dark-hover-bg-override);
  --button-on-dark-active-bg: var(--button-on-dark-active-bg-override);
  /* --- Interaction States --- */
  --hover-background-color: #e2e6ea;
  --active-background-color: #dae0e5;
  /* --- Disabled State --- */
  --disabled-background-color: #e9ecef;
  --disabled-text-color: #6c757d;
  --disabled-border-color: #ced4da;
  --disabled-background-color-rgb: 233, 236, 239;
  /* --- Fonts --- */
  --font-family-default: "Inter", sans-serif;
  --font-family-circular: "Circular", sans-serif;
  --font-family: var(--font-family-default);
  /* Set default font */
  --font-size-base: 15px;
  --font-size-large: 17px;
  --font-size-small: 13px;
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --h1-font-size: 2.4rem;
  --h2-font-size: 1.9rem;
  --h3-font-size: 1.6rem;
  --h4-font-size: 1.4rem;
  --h5-font-size: 1.2rem;
  --h6-font-size: 1rem;
  /* --- Borders & Shadows --- */
  --border-radius-small: 4px;
  --border-radius-base: 6px;
  --border-radius-medium: 10px;
  --border-radius-large: 16px;
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px -1px rgba(0, 0, 0, 0.05);
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-color: #ccc;
  --shadow-color-rgb: 204, 204, 204;
  /* --- Spacing --- */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --spacing-xxl: 50px;
  /* --- 8pt Spacing System --- */
  --spacing-8pt-1: 8px;
  --spacing-8pt-2: 16px;
  --spacing-8pt-3: 24px;
  --spacing-8pt-4: 32px;
  --spacing-8pt-5: 40px;
  --spacing-8pt-6: 48px;
  /* --- Layout Control --- */
  --container-max-width: 1440px;
  --container-padding-inline: var(--spacing-md);
  --min-height-full: 100vh;
  /* NEW: Aspect Ratio Variables */
  --fp-aspect-16-9: 16 / 9;
  --fp-aspect-4-5: 4 / 5;
  /* --- Header Layout --- */
  --header-height-desktop: 56px;
  --header-height-mobile: 48px;
  /* --- Zigzag --- */
  --zigzag-bg-light: var(--background-color-base);
  --zigzag-bg-dark: var(--background-color-accent);
  --zigzag-text-light: var(--text-color-on-base);
  --zigzag-text-dark: var(--text-color-on-accent);
  --zigzag-title-dark: var(--text-color-on-accent);
  --zigzag-link-dark: #EAE8E1;
  /* --- Section Backgrounds --- */
  --section-bg-light: var(--background-color-base);
  --section-bg-dark: #EAEAEA;
  /* --- Sticky Header --- */
  --header-sticky-bg-opacity: 0.65;
  --header-sticky-blur: 0px;
  /* --- OS Integration --- */
  --theme-color: var(--primary-color);
  /* --- Component Specific (Legacy/Review) --- */
  --gradient-overlay-bottom: linear-gradient(to top, rgba(var(--overlay-background-rgb), 0.5), transparent);
  --overlay-background-rgb: 0, 0, 0;
  --z-index-loader: 1000;
  --z-index-header: 1000;
  --z-index-overlay-root: 140;
  --z-index-overlay: 150;
  --z-index-hud: 160;
  --loader-content-background: transparent;
  /* === Generic loader token (new) === */
  --loader-border-width-base: 0.2rem;
  /* ≈3 px @ root-15 px */
  /* --- Links --- */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-hover);
  --link-active-color: var(--link-hover-color);
  --link-disabled-opacity: 0.65;
  --link-focus-color: var(--primary-color);
  /*pratik code*/
  /* Adjusted for slightly more 'airy' feel */
  --spacing--rem-xxs: 1rem;
  /* Increased */
  --spacing--rem--xs: 2rem;
  /* Increased */
  --spacing--rem--sm: 3rem;
  /* Increased */
  --spacing--rem--md: 4rem;
  /* Increased */
  --spacing--rem--lg: 5rem;
  /* Increased */
  --spacing--rem--xl: 6rem;
  /* Added */
  --spacing--rem--xxl: 7rem;
  /* Added */
  --spacing--rem--extra: 8rem;
  /* Added */
  --font-size-medium: 14px;
  /* Added */
  --font-size-regular: 16px;
  /* Added */
  --line-height-caption: 1.2;
  /* For small UI elements */
  --line-height-snug: 1.3;
  /* For compact UI text  */
  --line-height-compact: 1.4;
  /* For easier long-form reading */
  --line-height-reading: 1.8;
  /* For large text like headings or quotes */
  --line-height-display: 2;
  /* For very spacious layouts or oversized titles */
  --line-height-spacious: 2.2;
  /* Rem-based sizing scale (for height & width) */
  --size-rem-xxs: 1rem;
  --size-rem-xs: 2rem;
  --size-rem-sm: 3rem;
  --size-rem-md: 4rem;
  --size-rem-lg: 5rem;
  --size-rem-xl: 6rem;
  --size-rem-xxl: 7rem;
  --size-rem-extra: 8rem;
  /* Percentage-based sizing scale (10% through 100%) */
  --size-pct-10: 10%;
  --size-pct-20: 20%;
  --size-pct-30: 30%;
  --size-pct-40: 40%;
  --size-pct-50: 50%;
  --size-pct-60: 60%;
  --size-pct-70: 70%;
  --size-pct-80: 80%;
  --size-pct-90: 90%;
  --size-pct-100: 100%;
  /* Added */
  --font-weight-large: 600;
  /* Added */
  --border-radius-high: 20px
  /* --- Blur Effects --- */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;
  --blur-xl: 12px;
}

/* ======================== Dark Theme Overrides ========================= */
[data-theme=dark] {
  /* --- Core Palette & Text (Dark) --- */
  --background-color-base: #1a1a1a;
  --background-color-accent: #4A4441;
  --background-color: var(--background-color-base);
  --text-color: #e0e0e0;
  --text-color-inverse: #1a1a1a;
  --text-secondary-color: #a0a0a0;
  --icon-color: var(--text-secondary-color);
  --border-color: #3a3a3a;
  --highlight-color: #2c2c2c;
  --text-color-on-base: var(--text-color);
  --text-color-on-accent: #F5F4F0;
  /* --- Global Semantic Colors (Dark) --- */
  --primary-color: #5cb85c;
  --primary-color-hover: #4cae4c;
  --primary-color-rgb: 92, 184, 92;
  --secondary-color: #e57373;
  --secondary-color-hover: #ef5350;
  --error-color: #f44336;
  --error-text-color: var(--error-color);
  --error-background-color: #4d1b1b;
  --warning-color: #ffb74d;
  --success-color: #81c784;
  --success-background-color: #1e4620;
  --success-text-color: #c8e6c9;
  --success-border-color: #388e3c;
  /* --- Component Accent Colors (Dark Theme) --- */
  --component-accent-color: var(--primary-color);
  /* --- Invalid Input Border Color (Dark Theme) --- */
  --invalid-input-border-color: var(--warning-color);
  /* --- Overridable Variables (DARK THEME DEFAULTS) --- */
  --button-primary-bg-override: #E0E0E0;
  --button-primary-hover-bg-override: #FFFFFF;
  --button-primary-text-override: #1a1a1a;
  --button-primary-rgb-override: 224, 224, 224;
  --button-secondary-border-override: var(--button-primary-bg-override);
  --button-secondary-text-override: var(--button-primary-bg-override);
  --button-secondary-hover-bg-override: rgba(var(--button-primary-rgb-override), 0.1);
  --button-secondary-hover-text-override: var(--button-primary-hover-bg-override);
  --button-text-color-override: var(--button-secondary-text-override);
  --button-text-hover-bg-override: var(--button-secondary-hover-bg-override);
  --button-text-on-dark-variant-override: #DDDDDD;
  --button-on-dark-hover-bg-override: rgba(255, 255, 255, 0.1);
  --button-on-dark-active-bg-override: rgba(255, 255, 255, 0.15);
  --language-selector-focus-border-override: var(--button-primary-bg-override);
  --language-selector-focus-shadow-rgb-override: var(--button-primary-rgb-override);
  /* --- Implementation Variables (Dark Theme) --- */
  --primary-button-background: var(--button-primary-bg-override);
  --primary-button-hover-background: var(--button-primary-hover-bg-override);
  --button-text-color: var(--button-primary-text-override);
  --language-selector-focus-border: var(--language-selector-focus-border-override);
  --language-selector-focus-shadow-rgb: var(--button-primary-rgb-override);
  --button-text-on-dark-variant: var(--button-text-on-dark-variant-override);
  --button-on-dark-hover-bg: var(--button-on-dark-hover-bg-override);
  --button-on-dark-active-bg: var(--button-on-dark-active-bg-override);
  /* --- Interaction & Disabled States (Dark) --- */
  --hover-background-color: #383838;
  --active-background-color: #4a4a4a;
  --disabled-background-color: #303030;
  --disabled-text-color: #757575;
  --disabled-border-color: #424242;
  --disabled-background-color-rgb: 48, 48, 48;
  /* --- Borders & Shadows (Dark) --- */
  --box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.2),
    0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2),
    0 4px 6px -2px rgba(0, 0, 0, 0.15);
  --shadow-color: #000;
  --shadow-color-rgb: 0, 0, 0;
  /* --- Zigzag (Dark) --- */
  --zigzag-bg-light: var(--background-color-base);
  --zigzag-bg-dark: var(--background-color-accent);
  --zigzag-text-light: var(--text-color-on-base);
  --zigzag-text-dark: var(--text-color-on-accent);
  --zigzag-title-dark: var(--text-color-on-accent);
  --zigzag-link-dark: #EAE8E1;
  /* --- Section Backgrounds (Dark) --- */
  --section-bg-light: var(--background-color);
  --section-bg-dark: #212121;
  /* --- OS Integration (Dark) --- */
  --theme-color: var(--primary-color);
  /* --- Component Specific (Dark) --- */
  --gradient-overlay-bottom: linear-gradient(to top, rgba(var(--overlay-background-rgb), 0.75), transparent);
  --table-header-background: #2a2a2a;
  --table-row-hover-background: #333333;
  --table-border-color: #424242;
  /* --- Links (Dark) --- */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-hover);
  --link-active-color: var(--link-hover-color);
  --link-focus-color: var(--primary-color);
  /* --- Other (Dark) --- */
  --light-gray: #555555;
}

/* ========================================================================== */
/* Global Styles                                                              */
/* ========================================================================== */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: var(--page-background-color-override, var(--background-color));
  /* Fallback ensures body uses theme bg */
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

.text-base {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text-color);
}

/* ========================================================================== */
/* Layout Utilities                                                           */
/* ========================================================================== */
/* aspect-ratio.utilities.scss */
.ar-16x9 {
  aspect-ratio: var(--fp-aspect-16-9, 16/9);
}

.ar-4x5 {
  aspect-ratio: var(--fp-aspect-4-5, 4/5);
}

.ar-1x1 {
  aspect-ratio: 1/1;
}

.ar-3x2 {
  aspect-ratio: 3/2;
}

/* NEW: Import aspect ratio utilities */
.content-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding-inline);
  padding-right: var(--container-padding-inline);
  box-sizing: border-box;
}

.full-bleed {
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.fade-out-bottom {
  position: relative;
}

.fade-out-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  /* Adjust height of the fade effect */
  background: linear-gradient(to top, var(--background-color) 0%, transparent 100%);
  pointer-events: none;
  /* Allows clicking through the gradient */
}

/* ========================================================================== */
/* Fixed Header Compensation                                                   */
/* ========================================================================== */
.with-fixed-header {
  padding-top: var(--header-height-desktop, 56px);
}
@media (max-width: 767.98px) {
  .with-fixed-header {
    padding-top: var(--header-height-mobile, 48px);
  }
}

/* ========================================================================== */
/* Flexbox Utilities                                                          */
/* ========================================================================== */
/* ========================================================================== */
/* Dynamic Font Override Classes                                              */
/* ========================================================================== */
.font-family-circular {
  --font-family: var(--font-family-circular);
}

/* Add other font classes here */
/* Apply the overridden font (global context – no :host here) */
.font-family-circular,
.font-family-circular * {
  font-family: var(--font-family);
}

/* ========================================================================== */
/* Button Styles                                                              */
/* ========================================================================== */
.btn {
  /* Base styles for non-uic-button scenarios, or global defaults */
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-base);
  cursor: pointer;
  text-align: center;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.1s ease, border-color 0.2s ease, color 0.2s ease;
  color: var(--button-text-color);
  /* Uses mapped override */
  background-color: var(--primary-button-background);
  /* Uses mapped override */
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  border: 1px solid var(--primary-button-background);
  /* Uses mapped override */
  -webkit-user-select: none;
          user-select: none;
}
.btn:hover:not(:disabled) {
  background-color: var(--primary-button-hover-background);
  /* Uses mapped override */
  border-color: var(--primary-button-hover-background);
  /* Uses mapped override */
}
.btn:focus-visible {
  outline: 2px solid var(--primary-color);
  /* Focus outline still uses global semantic primary green for consistency */
  outline-offset: 2px;
}
.btn:focus:not(:focus-visible) {
  outline: none;
}
.btn:active:not(:disabled) {
  transform: scale(0.98);
}
.btn:disabled {
  background-color: var(--disabled-background-color);
  border-color: var(--disabled-border-color);
  color: var(--disabled-text-color);
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

/* --- Rules for On-Dark Button Variants --- */
/* Styles applied directly to uic-button via its variant class */
.uic-button.variant-secondary-on-dark {
  background-color: transparent;
  border-color: transparent;
  color: var(--button-text-on-dark-variant, #ffffff);
}
.uic-button.variant-secondary-on-dark:hover:not(:disabled) {
  background-color: var(--button-on-dark-hover-bg, rgba(255, 255, 255, 0.1));
  border-color: transparent;
  color: var(--button-text-on-dark-variant, #ffffff);
}
.uic-button.variant-secondary-on-dark:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.uic-button.variant-secondary-on-dark:focus:not(:focus-visible) {
  outline: none;
}
.uic-button.variant-secondary-on-dark:active:not(:disabled) {
  background-color: var(--button-on-dark-active-bg, rgba(255, 255, 255, 0.15));
}

.uic-button.variant-text-on-dark {
  color: var(--button-text-on-dark-variant);
  background-color: transparent;
  border-color: transparent;
}
.uic-button.variant-text-on-dark:hover:not(:disabled) {
  background-color: var(--button-on-dark-hover-bg);
}
.uic-button.variant-text-on-dark:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ========================================================================== */
/* Responsive Styles                                                          */
/* ========================================================================== */
@media (max-width: 768px) {
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: var(--button-min-height-mobile);
  }
}
@media (max-width: 576px) {
  .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}
/* ========================================================================== */
/* Link Styles                                                                */
/* ========================================================================== */
a,
.uic-link-host > a {
  color: var(--link-color);
  -webkit-text-decoration: var(--link-text-decoration, none);
          text-decoration: var(--link-text-decoration, none);
  cursor: pointer;
  transition: color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
}
a:hover,
.uic-link-host > a:hover {
  color: var(--link-hover-color);
  -webkit-text-decoration: var(--link-hover-text-decoration, underline);
          text-decoration: var(--link-hover-text-decoration, underline);
  -webkit-text-decoration-color: var(--link-hover-color);
          text-decoration-color: var(--link-hover-color);
}
a:active,
.uic-link-host > a:active {
  color: var(--link-active-color);
}
a:visited,
.uic-link-host > a:visited {
  /* Intentionally empty */
}
a:focus-visible,
.uic-link-host > a:focus-visible {
  outline: 2px solid var(--link-focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}
a:focus:not(:focus-visible),
.uic-link-host > a:focus:not(:focus-visible) {
  outline: none;
}

.uic-link-host.disabled {
  color: var(--disabled-text-color);
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
  opacity: var(--link-disabled-opacity);
}

@media (max-width: 767.98px) {
  .header-cta-button .uic-button {
    min-width: auto !important;
  }
}
/* developer code story-page.component.scss */
@media (max-width: 767.98px) {
  .story-page {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }
  .media-container {
    order: 1;
    width: var(--size-pct-100);
    height: 40vh !important;
  }
  .media-container uic-media-viewer,
  .media-container video {
    max-width: var(--size-pct-100);
    max-height: none;
    width: var(--size-pct-100);
    height: auto;
    object-fit: contain;
  }
  .textbox-container {
    order: 2;
    width: var(--size-pct-100);
    margin-left: 0;
    height: 35vh;
    top: 1rem;
    display: flex;
    flex-direction: column;
  }
  .textbox-container .textbox-scroll-content {
    max-width: var(--size-pct-100);
    width: 82%;
    height: 600px;
    overflow-y: auto;
    padding: var(--spacing-md);
    margin: 0 auto;
    box-shadow: 0 0 14px rgba(86, 86, 86, 0.1882352941);
    background-color: #fff !important;
    border-radius: var(--spacing-md) !important;
    color: #000 !important;
  }
  .story-agent-container {
    order: 3;
    width: var(--size-pct-100);
    margin-top: var(--spacing-rem-xxs);
    display: flex;
    justify-content: center;
    padding: 0 var(--spacing-rem-xxs);
  }
  .read-more-button {
    margin-top: 10px;
  }
}
:host ::ng-deep uic-media-viewer video::-webkit-media-controls-panel {
  display: none !important;
}

:host ::ng-deep uic-media-viewer video::-moz-media-controls {
  display: none !important;
}

.textbox-scroll-content uic-image-gallery {
  cursor: pointer;
}

/* developer code story-detail-card.component.scss */
/* developer code storytelling-container.component.scss */
/* developer code story-actions.component.scss */
/* Golden Welcome – Read lens */
.gw-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Card style */
.gw-mini-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Icon + Title Row */
.gw-mini-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* Icon circle */
.gw-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 18px;
}

/* Individual icon background colors */
.gw-mini-icon.watch {
  background: #EEF4FF;
}

.gw-mini-icon.explore {
  background: #E9FBF3;
}

.gw-mini-icon.read {
  background: #FFF4EC;
}

.gw-mini-icon.ask {
  background: #F4EFFF;
}

.gw-mini-title {
  font-size: 15px;
  font-weight: 600;
}

.gw-mini-text {
  font-size: 13px;
  opacity: 0.9;
}

/* STEP GRID */
.gw-step-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0 14px;
}

.gw-step {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.gw-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 18px;
  margin-bottom: 8px;
}

.gw-step-icon.speak {
  background: #E9FBF3;
}

.gw-step-icon.link {
  background: #EEF4FF;
}

.gw-step-icon.measure {
  background: #F4EFFF;
}

.gw-step-text {
  font-size: 13px;
  opacity: 0.9;
}

.gw-step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

/* CTA FULL-WIDTH CARD (independent of grid) */
.gw-turn {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  margin: 18px 0 12px;
}

/* Tick bullet list */
.gw-proof {
  margin: 8px 0 12px;
  padding: 0;
  list-style: none;
}

.gw-proof li {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  opacity: 0.95;
}

.gw-proof li::before {
  content: "✔";
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #EAF8EE;
  color: #1E8F4B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Buttons */
.gw-cta-link {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #4a4441;
  background: #4a4441;
  color: #fff;
  text-decoration: none;
  margin-right: 8px;
}

.gw-secondary-btn {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid #D4D2CF;
  background: #fff;
  cursor: pointer;
}

/* MOBILE */
@media (max-width: 900px) {
  .gw-step-strip {
    grid-template-columns: 1fr;
  }
}
.gw-section-title {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  margin: 6px 0 10px;
  padding-right: 34px; /* space for bar */
}

.gw-section-title::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 4px;
  border-radius: 6px;
  background: #d742ff; /* magenta line */
}

/*# sourceMappingURL=styles.css.map*/