@charset "UTF-8";
/* Basic CSS Reset */
/* Box sizing reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins and padding */
* {
  margin: 0;
  padding: 0;
}

/* HTML and body setup */
html {
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--font-weight-4);
  color: var(--dark);
  background-color: var(--white);
  line-height: 1.6;
}

/* Remove list styles */
ul, ol {
  list-style: none;
}

/* Remove default button styles */
button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

/* Remove default link styles */
a {
  text-decoration: none;
  color: inherit;
}

/* Make images responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Form elements reset */
input, textarea, select {
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Remove outline on focus for better custom styling */
:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  text-align: left;
  padding: 0;
}

/* Remove default fieldset styles */
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

/* Remove default legend styles */
legend {
  padding: 0;
}

/* Headings - Apply Poppins font to all headings */
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  line-height: 1.2;
}

/* Links - Set weight to 400 */
a {
  font-weight: 400;
}

:root {
  --white: #ffffff;
  --black: #000000;
  --transparent: transparent;
  --current: currentColor;
  --accent: #C1D82F;
  --accent-dark: #97a82e;
  --accent-light: #d4e555;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-50: #f9fafb;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --charcoal: #2c2c2c;
  --charcoal-light: #2C3142;
  --dark: #2c2c2c;
  --darker: #212121;
  --light: #ffffff;
  --accent-hover: #d4ed33;
  --accent-active: #adc22a;
  --accent-disabled: rgba(193, 216, 47, 0.5);
  --accent-10: rgba(193, 216, 47, 0.1);
  --accent-20: rgba(193, 216, 47, 0.2);
  --accent-30: rgba(193, 216, 47, 0.3);
  --accent-50: rgba(193, 216, 47, 0.5);
  --accent-80: rgba(193, 216, 47, 0.8);
  --accent-90: rgba(193, 216, 47, 0.9);
  --success-hover: #11cb8d;
  --success-active: #0ea674;
  --success-disabled: rgba(16, 185, 129, 0.5);
  --success-10: rgba(16, 185, 129, 0.1);
  --success-20: rgba(16, 185, 129, 0.2);
  --success-30: rgba(16, 185, 129, 0.3);
  --success-50: rgba(16, 185, 129, 0.5);
  --success-80: rgba(16, 185, 129, 0.8);
  --success-90: rgba(16, 185, 129, 0.9);
  --warning-hover: #ffad0c;
  --warning-active: #dc8e09;
  --warning-disabled: rgba(245, 158, 11, 0.5);
  --warning-10: rgba(245, 158, 11, 0.1);
  --warning-20: rgba(245, 158, 11, 0.2);
  --warning-30: rgba(245, 158, 11, 0.3);
  --warning-50: rgba(245, 158, 11, 0.5);
  --warning-80: rgba(245, 158, 11, 0.8);
  --warning-90: rgba(245, 158, 11, 0.9);
  --error-hover: #ff4a4a;
  --error-active: #d73d3d;
  --error-disabled: rgba(239, 68, 68, 0.5);
  --error-10: rgba(239, 68, 68, 0.1);
  --error-20: rgba(239, 68, 68, 0.2);
  --error-30: rgba(239, 68, 68, 0.3);
  --error-50: rgba(239, 68, 68, 0.5);
  --error-80: rgba(239, 68, 68, 0.8);
  --error-90: rgba(239, 68, 68, 0.9);
  --info-hover: #408fff;
  --info-active: #3575dd;
  --info-disabled: rgba(59, 130, 246, 0.5);
  --info-10: rgba(59, 130, 246, 0.1);
  --info-20: rgba(59, 130, 246, 0.2);
  --info-30: rgba(59, 130, 246, 0.3);
  --info-50: rgba(59, 130, 246, 0.5);
  --info-80: rgba(59, 130, 246, 0.8);
  --info-90: rgba(59, 130, 246, 0.9);
  --dark-hover: #303030;
  --dark-active: #272727;
  --dark-disabled: rgba(44, 44, 44, 0.5);
  --dark-10: rgba(44, 44, 44, 0.1);
  --dark-20: rgba(44, 44, 44, 0.2);
  --dark-30: rgba(44, 44, 44, 0.3);
  --dark-50: rgba(44, 44, 44, 0.5);
  --dark-80: rgba(44, 44, 44, 0.8);
  --dark-90: rgba(44, 44, 44, 0.9);
  --darker-hover: #242424;
  --darker-active: #1d1d1d;
  --darker-disabled: rgba(33, 33, 33, 0.5);
  --darker-10: rgba(33, 33, 33, 0.1);
  --darker-20: rgba(33, 33, 33, 0.2);
  --darker-30: rgba(33, 33, 33, 0.3);
  --darker-50: rgba(33, 33, 33, 0.5);
  --darker-80: rgba(33, 33, 33, 0.8);
  --darker-90: rgba(33, 33, 33, 0.9);
  --light-hover: #ffffff;
  --light-active: #e5e5e5;
  --light-disabled: rgba(255, 255, 255, 0.5);
  --light-10: rgba(255, 255, 255, 0.1);
  --light-20: rgba(255, 255, 255, 0.2);
  --light-30: rgba(255, 255, 255, 0.3);
  --light-50: rgba(255, 255, 255, 0.5);
  --light-80: rgba(255, 255, 255, 0.8);
  --light-90: rgba(255, 255, 255, 0.9);
}

:root {
  --font-family-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-serif: "Poppins", sans-serif;
  --font-family-mono: "Courier New", monospace;
  --font-family-roboto-condensed: "Roboto Condensed", sans-serif;
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;
  --font-size-1: 0.75rem;
  --font-size-2: 0.875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.125rem;
  --font-size-5: 1.25rem;
  --font-size-6: 1.5rem;
  --font-size-7: 2rem;
  --font-size-8: 2.5rem;
  --font-size-9: 3rem;
  --font-size-10: 4rem;
  --line-height-1: 1;
  --line-height-2: 1.25;
  --line-height-3: 1.375;
  --line-height-4: 1.5;
  --line-height-5: 1.625;
  --line-height-6: 2;
  --font-spacing-1: -0.05em;
  --font-spacing-2: -0.025em;
  --font-spacing-3: -0.0125em;
  --font-spacing-4: 0;
  --font-spacing-5: 0.025em;
  --font-spacing-6: 0.05em;
  --font-spacing-7: 0.1em;
  --font-h1-size: 2.5rem;
  --font-h1-weight: 700;
  --font-h1-height: 1.2;
  --font-h1-spacing: -0.025em;
  --font-h2-size: 2rem;
  --font-h2-weight: 600;
  --font-h2-height: 1.3;
  --font-h2-spacing: -0.025em;
  --font-h3-size: 1.5rem;
  --font-h3-weight: 600;
  --font-h3-height: 1.4;
  --font-h3-spacing: normal;
  --font-h4-size: 1.25rem;
  --font-h4-weight: 600;
  --font-h4-height: 1.4;
  --font-h4-spacing: normal;
  --font-h5-size: 1.125rem;
  --font-h5-weight: 600;
  --font-h5-height: 1.5;
  --font-h5-spacing: normal;
  --font-h6-size: 1rem;
  --font-h6-weight: 600;
  --font-h6-height: 1.5;
  --font-h6-spacing: normal;
  --font-size-fluid-1: clamp(0.875rem, 0.8rem + 0.5vw, 1rem);
  --font-size-fluid-2: clamp(1rem, 0.9rem + 0.625vw, 1.125rem);
  --font-size-fluid-3: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --font-size-fluid-4: clamp(1.25rem, 1.1rem + 1vw, 1.75rem);
  --font-size-fluid-5: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --font-size-fluid-6: clamp(2rem, 1.5rem + 2vw, 3rem);
  --font-size-fluid-7: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  --font-h1-size-fluid: clamp(2rem, 2rem + 1.0vw, 2.5rem);
  --font-h2-size-fluid: clamp(1.75rem, 1.75rem + 0.5vw, 2rem);
  --text-xs: var(--font-size-1);
  --text-sm: var(--font-size-2);
  --text-base: var(--font-size-3);
  --text-lg: var(--font-size-4);
  --text-xl: var(--font-size-5);
  --text-2xl: var(--font-size-6);
  --text-3xl: var(--font-size-7);
  --text-4xl: var(--font-size-8);
  --text-5xl: var(--font-size-9);
  --text-6xl: var(--font-size-10);
  --font-sans: var(--font-family-sans);
  --font-heading: var(--font-family-serif);
  --font-mono: var(--font-family-mono);
}

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1.0rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2.0rem;
  --space-9: 2.25rem;
  --space-10: 5rem;
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-4);
  --spacing-md: var(--space-8);
  --spacing-lg: 3.0rem;
  --spacing-xl: 4.0rem;
  --spacing-2xl: 5.0rem;
  --spacing-3xl: 6.0rem;
}

/*
============================================
Section Base Styles
============================================
Foundational styles for section elements.
Sections create full-width blocks that
organize page content into distinct areas.

Uses config-driven defaults from config/_section-config.scss
Override with utility classes (e.g., bg-dark, p-4)
============================================
*/
/*
============================================
Section Component Configuration
============================================
Default values for <section> elements.
Override these with utility classes.
============================================
*/
section {
  box-sizing: border-box !important;
  position: relative;
}

/*
============================================
Container Base Styles
============================================
Foundational styles for container elements.
Containers wrap content within sections and
control width, centering, and z-index layering.

Base Class: .container
Modifiers:
  .container--full      Full-width (explicit default)
  .container--boxed     Centered with max-width

Uses config-driven defaults from config/_container-config.scss
Override with utility classes (e.g., bg-dark, p-4)
============================================
*/
/*
============================================
Container Component Configuration
============================================
Default values for .container elements.
Override these with utility classes.
============================================
*/
.container {
  position: relative;
  z-index: 2;
}

.container--full {
  position: relative;
  z-index: 2;
}

.container--boxed {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .container--boxed {
    grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
  }
}
.container--boxed > * {
  grid-column: 1/2;
}
@media (min-width: 768px) {
  .container--boxed > * {
    grid-column: 2/3;
  }
}

/*
============================================
Section Header Component
============================================
Semantic component for repeating header pattern
Used when you say: "create a section with header"

Structure:
  <div class="section-header">
    <div class="section-label">Label text</div>
    <h2 class="section-title">Title <span class="text-accent">accent</span></h2>
    <p class="section-description">Optional description</p>
  </div>

Container Modifiers:
  .section-header--left        Left-aligned header
  .section-header--center      Center-aligned (explicit default)
  .section-header--right       Right-aligned header

Element Modifiers:
  .section-label--default      Default primary color (explicit default)
  .section-label--inverse      Light text for dark backgrounds
  .section-title--default      Default dark color (explicit default)
  .section-title--inverse      Light text for dark backgrounds
  .section-description--default Default gray color (explicit default)
  .section-description--inverse Light text for dark backgrounds

Uses config-driven defaults from config/_section-header-config.scss
Override with utility classes (e.g., text-left, m-b-8)
============================================
*/
/*
============================================
Section Header Component Configuration
============================================
Default values for .section-header pattern.
Override these with utility classes.
============================================
*/
.section-header {
  text-align: center;
  margin-bottom: 1.8rem;
}
@media (min-width: 1024px) {
  .section-header {
    margin-bottom: 2rem;
  }
}
.section-header--left {
  text-align: left;
}
.section-header--center {
  text-align: center;
}
.section-header--right {
  text-align: right;
}

.section-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.section-label--default {
  color: var(--primary);
}
.section-label--inverse {
  color: var(--light);
}

.section-title {
  display: block;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.25;
  color: var(--dark);
  margin-bottom: 1rem;
}
@media (min-width: 1024px) {
  .section-title {
    font-size: 3rem;
  }
}
.section-title--default {
  color: var(--dark);
}
.section-title--inverse {
  color: var(--light);
}

.section-description {
  display: block;
  font-size: 1.125rem;
  line-height: 1.625;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}
.section-description--default {
  color: var(--gray-600);
}
.section-description--inverse {
  color: rgba(255, 255, 255, 0.8);
}

/*
============================================
Typography Components Configuration
============================================
Default values for tagline, heading, and subheading components.
Override these with utility classes.
============================================
*/
/*
============================================
Tagline Component
============================================
Small introductory text that appears above headings.
Replaces: hero-label, eyebrow, section-label, etc.

Base Class: .tagline

Color Modifiers:
  --default      Default lime color (explicit default)
  --accent       Accent color
  --dark         Dark color
  --light        Light color
  --primary      Primary brand color

Size Modifiers:
  --medium       Default size 0.75rem (explicit default)
  --large        Larger size
  --small        Smaller size

Alignment Modifiers:
  --left         Left aligned (explicit default)
  --center       Center aligned
  --right        Right aligned

Style Modifiers:
  --no-bullet    Hide the bullet point

Philosophy:
- Single centralized component
- Context modifiers for variations
- No duplication across sections

Usage:
<div class="tagline tagline--accent">
  <span class="tagline__bullet"></span>
  Built to be Tough
</div>

Combine with utilities:
- Colors: text-*
- Spacing: mb-*, mt-*
- Typography: font-w-*, text-size-*
============================================
*/
.tagline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 400;
  font-family: monospace;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #C1D82F;
}
.tagline__bullet {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
  display: inline-block;
}

.tagline--accent {
  color: var(--accent);
}

.tagline--dark {
  color: var(--dark);
}

.tagline--light {
  color: var(--light);
}

.tagline--primary {
  color: var(--primary);
}

.tagline--default {
  color: #C1D82F;
}

.tagline--large {
  font-size: 1.125rem;
  gap: 0.625rem;
  letter-spacing: 0.15em;
}
.tagline--large .tagline__bullet {
  width: 0.625rem;
  height: 0.625rem;
}

.tagline--small {
  font-size: 0.7rem;
  gap: 0.375rem;
  letter-spacing: 0.1em;
}
.tagline--small .tagline__bullet {
  width: 0.375rem;
  height: 0.375rem;
}

.tagline--medium {
  font-size: 0.75rem;
  gap: 0.5rem;
  letter-spacing: 2px;
}
.tagline--medium .tagline__bullet {
  width: 0.5rem;
  height: 0.5rem;
}

.tagline--no-bullet .tagline__bullet {
  display: none;
}

.tagline--center {
  justify-content: center;
}

.tagline--right {
  justify-content: flex-end;
}

.tagline--left {
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .tagline {
    font-size: 0.75rem;
    gap: 0.375rem;
  }
  .tagline__bullet {
    width: 0.375rem;
    height: 0.375rem;
  }
  .tagline--large {
    font-size: 1rem;
  }
  .tagline--small {
    font-size: 0.65rem;
  }
}
/*
============================================
Heading Component
============================================
Primary titles/headings for sections, heroes, products, cards, etc.
Replaces: hero-heading, hero-title, section-title, product-title,
         card-title, header-title, etc.

Base Class: .heading

Context Modifiers:
  --hero         Hero heading (largest)
  --section      Section heading
  --product      Product heading
  --card         Card heading
  --header       Header/navigation heading

Color Modifiers:
  --inherit      Default inherit color (explicit default)
  --inverse      Light text for dark backgrounds
  --accent       Accent color
  --primary      Primary brand color
  --dark         Dark color

Size Modifiers:
  --medium       Default size 2rem (explicit default)
  --xlarge       Extra large size
  --large        Large size
  --small        Small size

Alignment Modifiers:
  --left         Left aligned (explicit default)
  --center       Center aligned
  --right        Right aligned

Style Modifiers:
  --tight        Tight line height
  --relaxed      Relaxed line height

Philosophy:
- Single centralized component
- Context modifiers replace duplicate classes
- No more hero-heading AND hero-title duplication

Usage:
<h1 class="heading heading--hero">Remko Pumps</h1>
<h2 class="heading heading--section">About Us</h2>
<h3 class="heading heading--product">P-Series Pump</h3>

Combine with utilities:
- Colors: text-*
- Spacing: mb-*, mt-*
- Typography: font-w-*, text-size-*
============================================
*/
.heading {
  font-family: var(--font-family-serif);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-size: 2rem;
  margin: 0;
  color: inherit;
}

.heading--hero {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.heading--section {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
}

.heading--product {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
}

.heading--card {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
}

.heading--header {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}

.heading--inverse {
  color: var(--light);
}

.heading--accent {
  color: var(--accent);
}

.heading--primary {
  color: var(--primary);
}

.heading--dark {
  color: var(--dark);
}

.heading--inherit {
  color: inherit;
}

.heading--xlarge {
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1.05;
}

.heading--large {
  font-size: clamp(2rem, 4vw, 3rem);
}

.heading--small {
  font-size: 1.125rem;
  line-height: 1.4;
}

.heading--medium {
  font-size: 2rem;
  line-height: 1.2;
}

.heading--center {
  text-align: center;
}

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

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

.heading--tight {
  line-height: 1.1;
}

.heading--relaxed {
  line-height: 1.5;
}

@media (max-width: 767px) {
  .heading {
    font-size: 1.5rem;
  }
  .heading--hero {
    font-size: clamp(1.6rem, 6.4vw, 2rem);
  }
  .heading--section {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .heading--product {
    font-size: 1.25rem;
  }
  .heading--card {
    font-size: 1.125rem;
  }
}
/*
============================================
Subheading Component
============================================
Secondary text that appears directly under headings.
Replaces: hero-subheading, hero-subtitle, section-subtitle,
         product-subtitle, header-subtitle, etc.

Base Class: .subheading

Context Modifiers:
  --hero         Hero subheading (large)
  --section      Section subheading
  --product      Product subheading
  --card         Card subheading
  --header       Header/navigation subheading

Color Modifiers:
  --inherit      Default inherit color (explicit default)
  --inverse      Light text for dark backgrounds
  --accent       Accent color
  --primary      Primary brand color
  --dark         Dark color
  --muted        Extra subtle (low opacity)

Size Modifiers:
  --medium       Default size 1.125rem (explicit default)
  --large        Large size
  --small        Small size

Alignment Modifiers:
  --left         Left aligned (explicit default)
  --center       Center aligned
  --right        Right aligned

Style Modifiers:
  --normal       Default opacity/weight (explicit default)
  --bold         Bold emphasis
  --relaxed      Relaxed line height
  --tight        Tight line height

Philosophy:
- Single centralized component
- Context modifiers replace duplicate classes
- No more hero-subheading AND hero-subtitle duplication

Usage:
<h2 class="subheading subheading--hero">Built for work. Backed by Performance.</h2>
<p class="subheading subheading--section">Industry-leading quality</p>

Combine with utilities:
- Colors: text-*
- Spacing: mb-*, mt-*
- Typography: font-w-*, text-size-*, opacity-*
============================================
*/
.subheading {
  font-family: var(--font-family-sans);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: normal;
  font-size: 1.125rem;
  margin: 0;
  color: inherit;
  opacity: 0.9;
}

.subheading--hero {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 300;
  line-height: 1.4;
  opacity: 0.95;
}

.subheading--section {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  opacity: 0.9;
}

.subheading--product {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.85;
}

.subheading--card {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.5;
  opacity: 0.8;
}

.subheading--header {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

.subheading--inverse {
  color: var(--light);
  opacity: 0.9;
}

.subheading--accent {
  color: var(--accent);
  opacity: 1;
}

.subheading--primary {
  color: var(--primary);
  opacity: 1;
}

.subheading--dark {
  color: var(--dark);
  opacity: 0.9;
}

.subheading--muted {
  opacity: 0.7;
}

.subheading--inherit {
  color: inherit;
}

.subheading--large {
  font-size: 1.375rem;
  line-height: 1.5;
}

.subheading--small {
  font-size: 0.875rem;
  line-height: 1.5;
}

.subheading--medium {
  font-size: 1.125rem;
  line-height: 1.5;
}

.subheading--center {
  text-align: center;
}

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

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

.subheading--relaxed {
  line-height: 1.75;
}

.subheading--tight {
  line-height: 1.3;
}

.subheading--bold {
  font-weight: 500;
  opacity: 1;
}

.subheading--normal {
  font-weight: 300;
  opacity: 0.9;
}

@media (max-width: 767px) {
  .subheading {
    font-size: 1rem;
  }
  .subheading--hero {
    font-size: clamp(1.125rem, 4vw, 1.375rem);
  }
  .subheading--section {
    font-size: 1rem;
  }
  .subheading--product {
    font-size: 0.9375rem;
  }
  .subheading--card {
    font-size: 0.875rem;
  }
}
/*
============================================
Button Component
============================================
Minimal base button styles for composition with utilities

Base Class: .btn
Container: .btn-group (for multiple buttons)

Philosophy:
- Minimal base styles only
- Extend with utility classes for variants
- Flexible composition over rigid presets

Usage:
<button class="btn bg-primary text-white radius-2 px-20 py-10">
    Click Me
</button>

Combine with utilities:
- Colors: bg-*, text-*
- Spacing: px-*, py-*, p-*
- Borders: border-*, radius-*
- Display: flex, inline-flex
- States: hover:*, active:*, disabled:*

Uses config-driven defaults from config/_button-config.scss
Override with utility classes (e.g., p-4, bg-primary)
============================================
*/
/*
============================================
Button Component Configuration
============================================
Default values for .btn elements.
Override these with utility classes.
============================================
*/
.btn {
  padding: 0.5rem 1.5rem;
  height: min-content;
  width: max-content;
  display: inline-block;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-family-roboto-condensed);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: inherit;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn a {
  line-height: inherit;
  font-weight: 400;
  text-decoration: none;
  color: inherit;
  display: inline-block;
}
.btn i, .btn svg {
  display: inline-block;
  vertical-align: middle;
}
.btn:disabled, .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.btn:focus:not(:focus-visible) {
  outline: none;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.btn-group .btn {
  margin: 0;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-icon {
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.btn-icon i, .btn-icon svg {
  margin: 0;
}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 1024px) {
  .btn--icon-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
  }
  .btn--icon-mobile > span:not(svg),
  .btn--icon-mobile > i:not([class*=ph]) {
    display: none;
  }
  .btn--icon-mobile > i,
  .btn--icon-mobile > svg {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
.btn--icon-mobile {
  transition: all 0.2s ease;
}
.btn--icon-mobile > span {
  transition: all 0.2s ease;
}

.btn--back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}
.btn--back-to-top i {
  font-size: 12px;
}
.btn--back-to-top:hover {
  color: var(--accent-hover);
}
.btn--back-to-top:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .btn {
    padding: 0.625rem 1rem;
    min-height: 44px;
    min-width: 44px;
  }
  .btn-icon {
    width: 44px;
    height: 44px;
  }
}
/*
============================================
Download Button Component
============================================
Modern, minimal download buttons with hover effects

Base Class: .download-btn
Usage:
<a href="#" class="download-btn">
    <i class="fas fa-file-pdf"></i>
    <span>Technical Datasheet (PDF)</span>
</a>

Styling:
- Light gray background with dark text
- Smooth transitions and hover effects
- Icon styling for visual hierarchy
- Calm, modern appearance
============================================
*/
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  background: var(--charcoal, #222);
  color: var(--light, #fff);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0.625rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.download-btn i, .download-btn svg {
  width: 1rem;
  height: 1rem;
  transition: all 0.3s ease;
}
.download-btn:hover {
  background: var(--accent, #C1D82F);
  color: var(--charcoal, #222);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(193, 216, 47, 0.3);
}
.download-btn:hover i, .download-btn:hover svg {
  transform: scale(1.1);
}
.download-btn:active {
  transform: translateY(0);
}
.download-btn:active i, .download-btn:active svg {
  transform: scale(1);
}

@media (max-width: 767px) {
  .download-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
    gap: 0.4rem;
  }
  .download-btn i, .download-btn svg {
    width: 0.9rem;
    height: 0.9rem;
  }
}
/*
============================================
FAQ Tab Button Component
============================================
Pill-shaped button for FAQ section navigation

Classes:
- .faq-tab-btn - Base FAQ tab button
- .faq-tab-btn.active - Active/selected state

Usage:
<button class="faq-tab-btn active">General Questions</button>
<button class="faq-tab-btn">Product A</button>

Properties:
- Pill shape (border-radius: 25px)
- Soft border styling (1px gray)
- Subtle shadow for depth
- Accent background when active
- Dark text for contrast

Responsive: Scales with font size and padding
============================================
*/
.faq-tab-btn {
  background-color: transparent;
  color: var(--dark);
  padding: 10px 16px;
  border-radius: 25px;
  border: 1px solid var(--gray-300);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}
.faq-tab-btn:hover {
  border-color: var(--gray-400);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.faq-tab-btn.active {
  background-color: var(--accent);
  color: var(--dark);
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.faq-tab-btn.active:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}
.faq-tab-btn:disabled, .faq-tab-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--gray-100);
  border-color: var(--gray-200);
}

button.faq-tab-btn {
  font-family: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  background-color: var(--accent);
  color: var(--dark);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.back-to-top:hover {
  background-color: var(--dark);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.back-to-top:active {
  transform: translateY(0);
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: all;
}

/*
============================================
CTA Banner Component
============================================
Call-to-action banner with heading and button

Base Class: .cta-banner
Heading: .cta-banner__heading

Philosophy:
- Minimal base styles only
- Extend with utility classes for colors
- Config-driven spacing and typography

Usage:
<section class="cta-banner bg-charcoal text-white">
  <div class="container">
    <h3 class="cta-banner__heading">
      Need expert advice on the right <span class="text-primary">pump solution</span>?
    </h3>
    <a href="tel:1800333424" class="btn btn-block bg-primary text-dark px-30 py-15">
      Call 1800 333 424
    </a>
  </div>
</section>

Combine with utilities:
- Colors: bg-*, text-*
- Spacing: mb-*, mt-*, p-*
- Typography: text-*, font-*

Uses config-driven defaults from config/_banners-config.scss
Override with utility classes (e.g., mb-30, text-center)
============================================
*/
/*
============================================
Banner Component Configuration
============================================
Default values for .cta-banner elements.
Combine with utility classes for colors.
============================================
*/
.cta-banner {
  padding: 0;
  margin-bottom: 0;
  text-align: left;
}
@media (min-width: 768px) {
  .cta-banner {
    padding: 0;
  }
}

.cta-banner__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0;
}
@media (min-width: 768px) {
  .cta-banner__content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0;
  }
}

.cta-banner__heading {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .cta-banner__heading {
    font-size: 1.5rem;
  }
}
.cta-banner__heading {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .cta-banner .btn {
    flex-shrink: 0;
  }
}

/*
============================================
Tag/Badge Component
============================================
Small label components for categories, status, and metadata

Base Class: .tag
Variants: .tag-pill, .tag-outlined, .tag-dot

Philosophy:
- Minimal base styles
- Extend with utility classes for colors
- Support for icons and closeable tags

Usage:
<span class="tag bg-primary text-white">Featured</span>
<span class="tag bg-success text-white">New</span>
<span class="tag-pill bg-accent text-white">Sale</span>

Combine with utilities:
- Colors: bg-*, text-*
- Spacing: px-*, py-*, m-*, gap-*
- Borders: border-*, radius-*
- Typography: text-*, font-weight-*
============================================
*/
.tag, .item-tag, .tag-dot, .tag-outlined, .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  height: min-content;
  width: max-content;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-radius: 0.25rem;
  background: var(--accent-color, #e5e7eb);
  color: var(--text-color, #374151);
  user-select: none;
}
.tag i, .item-tag i, .tag-dot i, .tag-outlined i, .tag-pill i, .tag svg, .item-tag svg, .tag-dot svg, .tag-outlined svg, .tag-pill svg {
  display: inline-block;
  font-size: 0.875em;
  vertical-align: middle;
}

.tag-pill {
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
}

.tag-outlined {
  background: transparent;
  border: 1px solid currentColor;
  padding: calc(0.25rem - 1px) calc(0.625rem - 1px);
}

.tag-dot::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

.tag-sm {
  font-size: 0.625rem;
  padding: 0.125rem 0.5rem;
}

.tag-lg {
  font-size: 0.875rem;
  padding: 0.375rem 0.875rem;
}

.tag-closeable {
  padding-right: 0.25rem;
}
.tag-closeable .tag-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  border-radius: 0.125rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.tag-closeable .tag-close:hover {
  opacity: 1;
}
.tag-closeable .tag-close:focus {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.tag-group .tag, .tag-group .item-tag,
.tag-group .tag-pill,
.tag-group .tag-outlined,
.tag-group .tag-dot {
  margin: 0;
}

.tag-interactive {
  cursor: pointer;
  transition: all 0.2s ease;
}
.tag-interactive:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.tag-interactive:active {
  transform: translateY(0);
}
.tag-interactive:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.tag-interactive:focus:not(:focus-visible) {
  outline: none;
}

.tag-selected {
  box-shadow: 0 0 0 2px currentColor;
}

.item-tag {
  background: var(--accent-color, #e5e7eb);
  font-weight: 400;
  padding: 0.625rem 0;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .tag, .tag-pill, .tag-outlined, .tag-dot, .item-tag {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
  .tag-lg {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
  }
}
/*
============================================
Icon Component
============================================
Utilities for icon fonts and SVG icons

Base Class: .icon
Wrapper: .icon-wrapper

Philosophy:
- Framework-agnostic (works with any icon system)
- Size control via utilities
- Alignment helpers
- Support for Font Awesome, Material Icons, custom SVG

Usage:
<i class="icon icon-search"></i>
<span class="icon-wrapper"><svg>...</svg></span>

Combine with utilities:
- Size: text-*, w-*, h-*
- Colors: text-*, bg-*
- Spacing: m-*, p-*
- Alignment: flex, align-center
============================================
*/
.icon, .feather, .material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone, .fa, .fas, .far, .fal, .fab {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  font-size: inherit;
  line-height: 1;
  color: currentColor;
  fill: currentColor;
  user-select: none;
}
.icon svg, .feather svg, .material-icons svg,
.material-icons-outlined svg,
.material-icons-round svg,
.material-icons-sharp svg,
.material-icons-two-tone svg, .fa svg, .fas svg, .far svg, .fal svg, .fab svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-wrapper .icon, .icon-wrapper .feather, .icon-wrapper .material-icons,
.icon-wrapper .material-icons-outlined,
.icon-wrapper .material-icons-round,
.icon-wrapper .material-icons-sharp,
.icon-wrapper .material-icons-two-tone, .icon-wrapper .fa, .icon-wrapper .fas, .icon-wrapper .far, .icon-wrapper .fal, .icon-wrapper .fab,
.icon-wrapper i,
.icon-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

.icon-xs {
  font-size: 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
}

.icon-sm {
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
}

.icon-md {
  font-size: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

.icon-lg {
  font-size: 2rem;
  width: 2rem;
  height: 2rem;
}

.icon-xl {
  font-size: 3rem;
  width: 3rem;
  height: 3rem;
}

.icon-2xl {
  font-size: 4rem;
  width: 4rem;
  height: 4rem;
}

.btn .icon, .btn .feather, .btn .material-icons,
.btn .material-icons-outlined,
.btn .material-icons-round,
.btn .material-icons-sharp,
.btn .material-icons-two-tone, .btn .fa, .btn .fas, .btn .far, .btn .fal, .btn .fab,
.btn i,
.tag .icon,
.tag .feather,
.tag .material-icons,
.tag .material-icons-outlined,
.tag .material-icons-round,
.tag .material-icons-sharp,
.tag .material-icons-two-tone,
.tag .fa,
.tag .fas,
.tag .far,
.tag .fal,
.tag .fab,
.tag i,
a .icon,
a .feather,
a .material-icons,
a .material-icons-outlined,
a .material-icons-round,
a .material-icons-sharp,
a .material-icons-two-tone,
a .fa,
a .fas,
a .far,
a .fal,
a .fab,
a i {
  vertical-align: middle;
  margin-top: -0.125em;
}
.btn .icon + *, .btn .feather + *, .btn .material-icons + *,
.btn .material-icons-outlined + *,
.btn .material-icons-round + *,
.btn .material-icons-sharp + *,
.btn .material-icons-two-tone + *, .btn .fa + *, .btn .fas + *, .btn .far + *, .btn .fal + *, .btn .fab + *,
.btn i + *,
.tag .icon + *,
.tag .feather + *,
.tag .material-icons + *,
.tag .material-icons-outlined + *,
.tag .material-icons-round + *,
.tag .material-icons-sharp + *,
.tag .material-icons-two-tone + *,
.tag .fa + *,
.tag .fas + *,
.tag .far + *,
.tag .fal + *,
.tag .fab + *,
.tag i + *,
a .icon + *,
a .feather + *,
a .material-icons + *,
a .material-icons-outlined + *,
a .material-icons-round + *,
a .material-icons-sharp + *,
a .material-icons-two-tone + *,
a .fa + *,
a .fas + *,
a .far + *,
a .fal + *,
a .fab + *,
a i + * {
  margin-left: 0.5em;
}
.btn * + .icon, .btn * + .feather, .btn * + .material-icons,
.btn * + .material-icons-outlined,
.btn * + .material-icons-round,
.btn * + .material-icons-sharp,
.btn * + .material-icons-two-tone, .btn * + .fa, .btn * + .fas, .btn * + .far, .btn * + .fal, .btn * + .fab,
.btn * + i,
.tag * + .icon,
.tag * + .feather,
.tag * + .material-icons,
.tag * + .material-icons-outlined,
.tag * + .material-icons-round,
.tag * + .material-icons-sharp,
.tag * + .material-icons-two-tone,
.tag * + .fa,
.tag * + .fas,
.tag * + .far,
.tag * + .fal,
.tag * + .fab,
.tag * + i,
a * + .icon,
a * + .feather,
a * + .material-icons,
a * + .material-icons-outlined,
a * + .material-icons-round,
a * + .material-icons-sharp,
a * + .material-icons-two-tone,
a * + .fa,
a * + .fas,
a * + .far,
a * + .fal,
a * + .fab,
a * + i {
  margin-left: 0.5em;
}

.icon-container, .icon-container-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 0.25rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
}
.icon-container .icon, .icon-container .feather, .icon-container .material-icons,
.icon-container .material-icons-outlined,
.icon-container .material-icons-round,
.icon-container .material-icons-sharp,
.icon-container .material-icons-two-tone, .icon-container .fa, .icon-container .fas, .icon-container .far, .icon-container .fal, .icon-container .fab, .icon-container-circle .icon, .icon-container-circle .feather, .icon-container-circle .material-icons,
.icon-container-circle .material-icons-outlined,
.icon-container-circle .material-icons-round,
.icon-container-circle .material-icons-sharp,
.icon-container-circle .material-icons-two-tone, .icon-container-circle .fa, .icon-container-circle .fas, .icon-container-circle .far, .icon-container-circle .fal, .icon-container-circle .fab,
.icon-container i,
.icon-container-circle i,
.icon-container svg,
.icon-container-circle svg {
  width: 100%;
  height: 100%;
}

.icon-container-circle {
  border-radius: 50%;
}

.icon-container-sm {
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
}

.icon-container-lg {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
}

.icon-container-xl {
  width: 4rem;
  height: 4rem;
  padding: 1rem;
}

.icon-spin {
  animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.icon-pulse {
  animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
.icon-bounce {
  animation: icon-bounce 1s ease-in-out infinite;
}

@keyframes icon-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.25rem);
  }
}
.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.icon-list li:last-child {
  margin-bottom: 0;
}
.icon-list li .icon, .icon-list li .feather, .icon-list li .material-icons,
.icon-list li .material-icons-outlined,
.icon-list li .material-icons-round,
.icon-list li .material-icons-sharp,
.icon-list li .material-icons-two-tone, .icon-list li .fa, .icon-list li .fas, .icon-list li .far, .icon-list li .fal, .icon-list li .fab,
.icon-list li i {
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone {
  font-family: "Material Icons", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}

.feather {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.icon[aria-hidden=true], [aria-hidden=true].fa, [aria-hidden=true].fas, [aria-hidden=true].far, [aria-hidden=true].fal, [aria-hidden=true].fab, [aria-hidden=true].material-icons,
[aria-hidden=true].material-icons-outlined,
[aria-hidden=true].material-icons-round,
[aria-hidden=true].material-icons-sharp,
[aria-hidden=true].material-icons-two-tone, [aria-hidden=true].feather,
i[aria-hidden=true] {
  speak: none;
}

button .icon, button .fa, button .fas, button .far, button .fal, button .fab, button .material-icons,
button .material-icons-outlined,
button .material-icons-round,
button .material-icons-sharp,
button .material-icons-two-tone, button .feather,
a .icon,
a .fa,
a .fas,
a .far,
a .fal,
a .fab,
a .material-icons,
a .material-icons-outlined,
a .material-icons-round,
a .material-icons-sharp,
a .material-icons-two-tone,
a .feather {
  pointer-events: none;
}

/*
============================================
Card Component - Basic Card
============================================
Simple card with media (icon/image) and text content

Base Class: .ui-card
Elements: .card-media, .card-text

Modifiers:
  .card--default      Inline-block layout (explicit default)
  .card--stacked       Vertical centered layout
  .card--horizontal    Side-by-side layout

Usage:
<div class="ui-card">
    <div class="card-media">
        <i class="icon-star"></i>
    </div>
    <div class="card-text">
        <h3>Card Title</h3>
        <p>Card description</p>
    </div>
</div>

Combine with utilities:
- Layout: bg-*, p-*, radius-*
- Typography: text-*
- Borders: border-*

Uses config-driven defaults from config/_card-config.scss
Override with utility classes (e.g., p-4, bg-white)
============================================
*/
/*
============================================
Card Component Configuration
============================================
Default values for .ui-card elements.
Override these with utility classes.
============================================
*/
.ui-card {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
}
.ui-card .card-media {
  background-color: var(--background-color, #ffffff);
  border-radius: 4px;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px;
  font-size: 30px;
  line-height: 1;
}
.ui-card .card-media i, .ui-card .card-media svg, .ui-card .card-media img {
  max-width: 100%;
  max-height: 100%;
}
.ui-card .card-text {
  text-align: center;
}
.ui-card .card-text h1, .ui-card .card-text h2, .ui-card .card-text h3, .ui-card .card-text h4, .ui-card .card-text h5, .ui-card .card-text h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.ui-card .card-text p {
  margin: 0;
}
.ui-card .card-text p + p {
  margin-top: 0.5rem;
}

.card--default {
  display: inline-block;
}

.card--stacked {
  display: block;
  width: 100%;
}
.card--stacked .card-media {
  margin-left: auto;
  margin-right: auto;
}
.card--stacked .card-text {
  text-align: center;
}

.card--horizontal {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.card--horizontal .card-media {
  margin: 0;
  flex-shrink: 0;
}
.card--horizontal .card-text {
  text-align: left;
  flex: 1;
}

@media (max-width: 767px) {
  .ui-card .card-media {
    width: 50px;
    height: 50px;
    font-size: 32px;
  }
  .card-horizontal {
    flex-direction: column;
    text-align: center;
  }
  .card-horizontal .card-media {
    margin: 0 auto 1rem;
  }
  .card-horizontal .card-text {
    text-align: center;
  }
}
/*
============================================
Card Component - Icon Card (Card 2)
============================================
Icon-focused card with large bordered icon container

Base Class: .ui-card-2

Usage:
<div class="ui-card-2">
    <i class="icon-rocket"></i>
    <h4>Feature Title</h4>
    <p>Description text</p>
</div>

Combine with utilities:
- Layout: p-*, text-center
- Colors: bg-*, text-*
- Borders: border-*
============================================
*/
.ui-card-2 i, .ui-card-2 .card-icon {
  width: 100%;
  height: 100%;
  min-height: 100px;
  max-width: 200px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 4px;
  display: grid;
  place-content: center;
  margin: 0 auto;
  padding: 1rem;
  font-size: 3rem;
  line-height: 1;
}
.ui-card-2 i svg, .ui-card-2 .card-icon svg {
  width: 100%;
  height: 100%;
  max-width: 4rem;
  max-height: 4rem;
}
.ui-card-2 h1, .ui-card-2 h2, .ui-card-2 h3, .ui-card-2 h4, .ui-card-2 h5, .ui-card-2 h6 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.ui-card-2 p {
  margin: 0;
}

@media (min-width: 768px) {
  .ui-card-2 i, .ui-card-2 .card-icon {
    max-width: 280px;
    min-height: 90px;
  }
}
@media (max-width: 767px) {
  .ui-card-2 i, .ui-card-2 .card-icon {
    max-width: 150px;
    min-height: 80px;
    font-size: 2rem;
  }
}
/*
============================================
Card Component - Flexible Card System (Card 3)
============================================
Comprehensive card layout system with grid container

Container: .card-container
Card: .ui-card
Elements: .card-icon, .card-content, .card-heading, .read-more

Usage:
<div class="card-container">
    <div class="ui-card">
        <div class="card-icon">
            <i class="icon-users"></i>
        </div>
        <div class="card-content">
            <h4 class="card-heading">Card Title</h4>
            <p>Description text</p>
            <a href="#" class="read-more">Learn More →</a>
        </div>
    </div>
</div>

Combine with utilities:
- Grid: gap-*, grid-cols-*
- Layout: p-*, bg-*, radius-*
- Colors: text-*, border-*
============================================
*/
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.ui-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.875rem 2.5rem;
  box-sizing: border-box;
}
.ui-card .card-icon {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  min-width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-card .card-icon i, .ui-card .card-icon svg {
  font-size: 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}
.ui-card .card-content {
  flex: 1 1 auto;
  min-width: 0;
}
.ui-card .card-heading {
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  line-height: 1.3;
}
.ui-card p {
  margin: 0 0 0.75rem 0;
  line-height: 1.6;
}
.ui-card p:last-child {
  margin-bottom: 0;
}
.ui-card .read-more {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--primary-color, #007acc);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.ui-card .read-more:hover {
  color: var(--accent-color, #28a745);
  text-decoration: underline;
}
.ui-card .read-more::after {
  content: " →";
  display: inline-block;
  transition: transform 0.2s ease;
}
.ui-card .read-more:hover::after {
  transform: translateX(4px);
}

.ui-card-vertical {
  flex-direction: column;
  text-align: center;
}
.ui-card-vertical .card-icon {
  margin-bottom: 1rem;
}
.ui-card-vertical .card-content {
  text-align: center;
}

.ui-card-bordered {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ui-card-bordered:hover {
  border-color: var(--primary-color, #007acc);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ui-card-elevated {
  background: var(--background-color, #ffffff);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ui-card-elevated:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
  .card-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
  .ui-card {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
  .ui-card .card-icon {
    margin-bottom: 1rem;
  }
  .ui-card .card-content {
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .card-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
/*
============================================
Card Component - Icon Left Layout
============================================
Horizontal card with circular icon on left side

Base Class: .card-icon-left
Child Elements: .card-icon-left__icon, .card-icon-left__body,
                .card-icon-left__title, .card-icon-left__text

Usage:
<div class="card-icon-left shadow-1 hover:shadow-3 bg-darker">
    <div class="card-icon-left__icon bg-transparent text-accent">
        <i class="fas fa-check-circle"></i>
    </div>
    <div class="card-icon-left__body">
        <h3 class="card-icon-left__title text-light font-size-2">Title</h3>
        <p class="card-icon-left__text text-light">Description</p>
    </div>
</div>

Utility-First Customization:
- Colors: text-*, bg-* (use on icon and text elements)
- Spacing: p-*, gap-*, m-*
- Shadows: shadow-1/2/3, hover:shadow-*
- Borders: border-1/2/3, border-{color}
- Background: bg-*
- Responsive: sm-*, md-*, lg-*

Component provides structure only.
Use utilities for all variations (size, shadow, border, spacing).
============================================
*/
.card-icon-left {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  background: var(--white, #ffffff);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.card-icon-left__icon {
  --card-icon-size: 52px;
  width: var(--card-icon-size);
  height: var(--card-icon-size);
  min-width: var(--card-icon-size);
  max-width: var(--card-icon-size);
  min-height: var(--card-icon-size);
  max-height: var(--card-icon-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
}
.card-icon-left__icon i, .card-icon-left__icon svg {
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* ============================================
   Icon size modifiers
   Use in HTML as either the BEM modifier on the icon element
   or as an additional utility-like class where needed.
   Example: <div class="card-icon-left__icon card-icon-left__icon--large"> or
            <div class="card-icon-left__icon card-icon-left__icon--bullets">
*/
.card-icon-left__icon--large {
  --card-icon-size: 52px;
}

.card-icon-left__icon--bullets {
  --card-icon-size: 18px;
}

.card-icon-left__body {
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-icon-left__title {
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.4;
  color: var(--dark, #212121);
  margin: 0 0 0.5rem 0;
}

.card-icon-left__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gray-600, #6b7280);
  margin: 0;
}

.card-icon-left--dark {
  background: var(--darker, #212121);
}
.card-icon-left--dark .card-icon-left__title {
  color: var(--light, #ffffff);
  font-weight: 600;
}
.card-icon-left--dark .card-icon-left__text {
  color: var(--gray-400, #9ca3af);
}

.card-icon-left--info {
  padding: 1rem;
  gap: 0;
}
.card-icon-left--info .card-icon-left__icon {
  --card-icon-size: 1rem;
}
.card-icon-left--info .card-icon-left__icon i, .card-icon-left--info .card-icon-left__icon svg {
  font-size: 1rem;
}

/*
Size variations should use existing utilities:

Compact card:
<div class="card-icon-left p-4 gap-3">
    Use .font-size-3 on title, .font-size-2 on text

Medium (default):
<div class="card-icon-left p-6 gap-4">
    Default styling as-is

Large card:
<div class="card-icon-left p-8 gap-6">
    Use .font-size-5 on title, .font-size-4 on text

Responsive adjustments:
Use responsive utilities: .sm-p-4 .md-p-6 .lg-p-8

Dark variant usage:
<div class="card-icon-left card-icon-left--dark">
    Adds dark theme styling with green icon badges
*/
/*
============================================
Card Component - Spotlight Card
============================================
Horizontal spotlight card with large image and content split layout

Base Class: .card-spotlight
Child Elements: .card-spotlight__image, .card-spotlight__image-wrapper,
                .card-spotlight__img, .card-spotlight__body,
                .card-spotlight__title, .card-spotlight__text,
                .card-spotlight__list

Usage:
<div class="card-spotlight border-3 border-solid border-primary">
    <div class="card-spotlight__image">
        <div class="card-spotlight__image-wrapper" style="background-image: url('...');">
            <img src="..." alt="..." class="card-spotlight__img">
        </div>
    </div>
    <div class="card-spotlight__body">
        <h3 class="card-spotlight__title">Title</h3>
        <p class="card-spotlight__text">Description</p>
        <ul class="card-spotlight__list">
            <li><i class="ph ph-check-circle"></i> Feature 1</li>
        </ul>
    </div>
</div>

Responsive Behavior:
- Mobile (< 1024px): Uses <img> tag with 16:9 aspect ratio
- Desktop (≥ 1024px): Uses background-image, hides <img> tag
- Image height automatically matches content height via grid

Use Cases:
- Industries we serve cards
- Service offerings
- Portfolio/case studies
- Any horizontal split layout with image
============================================
*/
.card-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  background: var(--white, #ffffff);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

@media (min-width: 1024px) {
  .card-spotlight {
    grid-template-columns: 1fr 1fr;
    min-height: 350px;
  }
}
.card-spotlight__image {
  position: relative;
}

@media (min-width: 1024px) {
  .card-spotlight__image {
    height: 100%;
    min-height: 100%;
  }
}
.card-spotlight__image-wrapper {
  position: relative;
}

@media (max-width: 1023px) {
  .card-spotlight__image-wrapper::before {
    content: "";
    display: block;
    padding-bottom: 56.25%;
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .card-spotlight__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.7s ease;
  }
  .card-spotlight__image-wrapper::before {
    display: none;
  }
  .card-spotlight__image-wrapper .card-spotlight__img {
    display: none;
  }
}
.card-spotlight__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

@media (max-width: 1023px) {
  .card-spotlight__img {
    display: block;
  }
}
.card-spotlight__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 2.5rem;
}

.card-spotlight__title {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--dark, #212121);
  margin: 0;
}

.card-spotlight__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700, #4a5568);
  margin: 0;
}

.card-spotlight__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.card-spotlight__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--gray-700, #4a5568);
}
.card-spotlight__list li i, .card-spotlight__list li svg {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--primary, #c6d82c);
}

@media (min-width: 1024px) {
  .card-spotlight:hover .card-spotlight__image-wrapper {
    transform: scale(1.05);
  }
}
@media (max-width: 1023px) {
  .card-spotlight:hover .card-spotlight__img {
    transform: scale(1.05);
  }
}
@media (max-width: 1023px) {
  .card-spotlight__body {
    padding: 1.5rem 2rem;
  }
  .card-spotlight__title {
    font-size: 1.25rem;
  }
}
@media (max-width: 767px) {
  .card-spotlight__body {
    padding: 1.5rem;
  }
  .card-spotlight__title {
    font-size: 1.125rem;
  }
  .card-spotlight__text {
    font-size: 0.9375rem;
  }
  .card-spotlight__list li {
    font-size: 0.875rem;
  }
  .card-spotlight__list li i, .card-spotlight__list li svg {
    font-size: 1.125rem;
  }
}
@media (min-width: 1024px) {
  .card-spotlight--reverse {
    grid-template-columns: 1fr 1fr;
  }
  .card-spotlight--reverse .card-spotlight__image {
    order: 2;
  }
  .card-spotlight--reverse .card-spotlight__body {
    order: 1;
  }
}
/*
This hybrid approach ensures:
1. Mobile: Shows actual <img> with proper aspect ratio (16:9)
2. Desktop: Uses background-image for better height control
3. Image height automatically matches content height on desktop
4. No fixed heights needed - grid handles it

HTML structure required:
<div class="card-spotlight">
    <div class="card-spotlight__image">
        <div class="card-spotlight__image-wrapper" style="background-image: url('...');">
            <img src="..." alt="..." class="card-spotlight__img">
        </div>
    </div>
    <div class="card-spotlight__body">
        <!-- Content -->
    </div>
</div>
*/
/*
============================================
Card Component - Product Card with Hover Overlay
============================================
Product card showing image and title, with overlay info on hover

Base Class: .card-product
Child Elements: .card-product__image, .card-product__content,
                .card-product__overlay, .card-product__title,
                .card-product__description, .card-product__link

Usage:
<div class="card-product">
    <div class="card-product__image">
        <img src="..." alt="...">
    </div>
    <div class="card-product__content">
        <h3 class="card-product__title">Product Name</h3>
        <p class="card-product__description">Description...</p>
        <a href="#" class="card-product__link">EXPLORE RANGE</a>
    </div>
    <div class="card-product__overlay">
        <div class="card-product__overlay-content">
            <h3 class="card-product__title">Product Name</h3>
            <p class="card-product__description">Description...</p>
            <a href="#" class="card-product__link">EXPLORE RANGE</a>
        </div>
    </div>
</div>

Hover Behavior:
- Card lifts up with shadow
- Image zooms in
- Overlay fades in with dark background
- Normal title fades out, overlay title/description/link fade in

Use Cases:
- Product category cards
- Service offering cards
- Any card needing hover details
============================================
*/
.card-product {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--white, #ffffff);
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  padding-bottom: 1.5rem;
  width: 100%;
  max-height: 420px;
  transition: all 0.2s ease-in-out;
}

.card-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-product__image {
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(243, 244, 246, 0.3);
  margin: 0;
  padding: 1rem 0.75rem;
}
.card-product__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.card-product:hover .card-product__image img {
  transform: scale(1.05);
}

.card-product__content {
  text-align: center;
  padding: 0 0.5rem;
}
.card-product__content .card-product__description,
.card-product__content .card-product__link {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.card-product__title {
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--dark, #1a1a1a);
  margin: 0.5rem;
  transition: opacity 0.2s ease-in-out;
}

.card-product:hover .card-product__content .card-product__title {
  opacity: 0;
}

.card-product__description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gray-700, #2c2c2c);
  margin: 0.5rem;
}

.card-product__link {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--dark, #1a1a1a);
  margin: 0.5rem;
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
  display: inline-block;
}
.card-product__link:hover {
  color: var(--primary, #C1D82F);
  text-decoration: none;
}

.card-product__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(44, 44, 44, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.card-product:hover .card-product__overlay {
  opacity: 1;
  visibility: visible;
}

.card-product__overlay-content {
  color: var(--white, #ffffff);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.card-product__overlay-content .card-product__title {
  color: var(--white, #ffffff);
  font-weight: 600;
  margin: 0 0 0.5rem;
  opacity: 1 !important;
}
.card-product__overlay-content .card-product__description {
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 0.75rem;
  opacity: 1;
  visibility: visible;
  position: static;
  flex-grow: 0;
}
.card-product__overlay-content .card-product__link {
  color: var(--primary, #C1D82F);
  margin: 0;
  opacity: 1;
  visibility: visible;
  position: static;
}
.card-product__overlay-content .card-product__link:hover {
  color: var(--white, #ffffff);
}

@media (max-width: 1023px) {
  .card-product__image {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 767px) {
  .card-product__image {
    padding: 0.75rem 0.5rem;
  }
  .card-product__title {
    font-size: 1rem;
    line-height: 1.5;
  }
  .card-product__description {
    font-size: 0.75rem;
  }
  .card-product__link {
    font-size: 0.75rem;
  }
}
@media (max-width: 575px) {
  .card-product__title {
    font-size: 1.125rem;
    line-height: 1.625;
  }
  .card-product__description {
    font-size: 0.875rem;
  }
  .card-product__link {
    font-size: 0.875rem;
  }
}
/*
This component provides a clean hover card pattern:
1. Normal state: Shows image + title
2. Hover state: Dark overlay with full details (title + description + link)

Key features:
- Smooth transitions
- Card lift effect
- Image zoom
- Accessible with proper focus states
- Reusable for products, services, categories

HTML requires duplicate title/description/link in both .card-product__content
and .card-product__overlay-content for the fade transition effect.
*/
/*
============================================
Card Component - Filtered Product Card
============================================
Product card for filtered results display
Shows more details than category cards

Base Class: .card-product-filtered
============================================
*/
.card-product-filtered {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  height: 100%;
}
.card-product-filtered:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card-product-filtered__image {
  width: 100%;
  height: 180px;
  background: var(--gray-50);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-product-filtered__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.card-product-filtered__content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-product-filtered__category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.card-product-filtered__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}
.card-product-filtered__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.card-product-filtered__title a:hover {
  color: var(--accent);
}

.card-product-filtered__description {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin: 0 0 1rem;
  line-height: 1.5;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-product-filtered__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.card-product-filtered__specs .spec {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--gray-700);
  background: var(--gray-100);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}
.card-product-filtered__specs .spec i {
  color: var(--accent);
}

.card-product-filtered__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  transition: color 0.2s ease;
  margin-top: auto;
}
.card-product-filtered__link:hover {
  color: var(--accent);
}
.card-product-filtered__link i {
  transition: transform 0.2s ease;
}
.card-product-filtered__link:hover i {
  transform: translateX(4px);
}

.filter-results-header {
  grid-column: 1/-1;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.filter-no-results {
  grid-column: 1/-1;
  padding: 4rem 2rem;
  background: var(--white);
  border-radius: 0.75rem;
  text-align: center;
}
.filter-no-results i {
  font-size: 4rem;
  color: var(--gray-300);
  margin-bottom: 1rem;
  display: block;
}
.filter-no-results h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 0.5rem;
}
.filter-no-results p {
  color: var(--gray-600);
  margin: 0 0 1.5rem;
}

#product-grid.loading {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}
#product-grid.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 767px) {
  .card-product-filtered__image {
    height: 150px;
  }
  .card-product-filtered__title {
    font-size: 0.9rem;
  }
  .card-product-filtered__specs .spec {
    font-size: 0.65rem;
  }
  .filter-results-header .d-flex {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}
/*
============================================
Testimonial Card Component
============================================
Card component for customer testimonials and reviews

Base Class: .card-testimonial
Elements:
  .card-testimonial__quote
  .card-testimonial__author
  .card-testimonial__avatar
  .card-testimonial__name
  .card-testimonial__role
  .card-testimonial__stats
  .card-testimonial__stat-item

Usage:
<div class="card-testimonial">
    <blockquote class="card-testimonial__quote">
        Testimonial text here...
    </blockquote>
    <div class="card-testimonial__author">
        <img src="avatar.jpg" alt="Name" class="card-testimonial__avatar">
        <div class="card-testimonial__info">
            <div class="card-testimonial__name">John Doe</div>
            <div class="card-testimonial__role">Position, Company Name</div>
        </div>
    </div>
</div>

<div class="card-testimonial__stats">
    <div class="card-testimonial__stat-item">Stat 1</div>
    <div class="card-testimonial__stat-item">Stat 2</div>
</div>

Combine with utilities:
- Layout: p-*, bg-*, radius-*
- Colors: text-*, border-*
- Shadows: shadow-*
============================================
*/
.card-testimonial {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background: var(--color-gray-50, #f9fafb);
  border-radius: 0.5rem;
  border-left: 4px solid var(--color-gray-200, #e5e7eb);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}
.card-testimonial:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-testimonial__highlight {
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-white, #ffffff);
  font-style: italic;
  letter-spacing: 0.4px;
  margin: 0 0 1.5rem 0;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg, var(--accent, #8caa1e) 0%, var(--accent, #8caa1e) 100%);
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(140, 170, 30, 0.2);
  border-left: 4px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}
.card-testimonial__highlight:hover {
  box-shadow: 0 6px 16px rgba(140, 170, 30, 0.3);
  transform: translateY(-1px);
}

.card-testimonial__quote {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-gray-700, #374151);
  font-weight: 400;
  margin: 0;
  padding: 0 0 0 1rem;
  border: none;
  position: relative;
}
.card-testimonial__quote::before {
  content: '"';
  position: absolute;
  left: -0.5rem;
  top: -0.75rem;
  font-size: 3rem;
  line-height: 0;
  color: var(--accent, #8caa1e);
  opacity: 0.08;
  font-weight: 900;
}

.card-testimonial__author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-testimonial__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-white, #ffffff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.card-testimonial__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-testimonial__name {
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-gray-900, #111827);
  margin: 0 0 0.25rem 0;
  letter-spacing: 0.4px;
  text-transform: capitalize;
}

.card-testimonial__role {
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--accent, #8caa1e);
  margin: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.card-testimonial__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--color-gray-200, #e5e7eb);
}

.card-testimonial__stat-item {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-gray-600, #4b5563);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .card-testimonial {
    padding: 1.5rem;
    gap: 1.25rem;
  }
  .card-testimonial__quote {
    font-size: 1rem;
    padding-left: 1rem;
  }
  .card-testimonial__quote::before {
    font-size: 2rem;
    top: -0.25rem;
  }
  .card-testimonial__avatar {
    width: 56px;
    height: 56px;
  }
  .card-testimonial__name {
    font-size: 1rem;
  }
  .card-testimonial__stats {
    gap: 1rem;
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .card-testimonial {
    padding: 2rem;
  }
}
/*
============================================
Card Component - Blog/Case Study Card
============================================
Blog card with image, title, description, and read more link

Base Class: .card-blog
Child Elements: .card-blog__image, .card-blog__content,
                .card-blog__title, .card-blog__description,
                .card-blog__link

Usage:
<div class="card-blog">
    <div class="card-blog__image">
        <a href="#">
            <img src="..." alt="...">
        </a>
    </div>
    <div class="card-blog__content">
        <h3 class="card-blog__title">
            <a href="#">Article Title</a>
        </h3>
        <p class="card-blog__description">Description...</p>
        <a href="#" class="card-blog__link">View case study</a>
    </div>
</div>

Hover Behavior:
- Card lifts up with enhanced shadow
- Image link, title link, and read more link are individually clickable

Use Cases:
- Blog post cards
- Case study cards
- Article listings
============================================
*/
.card-blog {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white, #ffffff);
  border-radius: 0.625rem;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  width: 100%;
  transition: all 0.2s ease-in-out;
}

.card-blog:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-blog__image {
  width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.card-blog__image a {
  display: block;
  width: 100%;
  height: 100%;
}
.card-blog__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease-in-out;
}

.card-blog:hover .card-blog__image img {
  transform: scale(1.02);
}

.card-blog__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-grow: 1;
}

.card-blog__title {
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 500;
  margin: 0;
}
.card-blog__title a {
  color: var(--dark, #1a1a1a);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.card-blog__title a:hover {
  color: var(--accent, #C1D82F);
}

.card-blog__description {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gray-700, #4a5568);
  margin: 0;
}

.card-blog__link {
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--dark, #1a1a1a);
  text-decoration: underline;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  align-self: flex-start;
}
.card-blog__link:hover {
  color: var(--accent, #C1D82F);
  text-decoration: none;
}

@media (max-width: 1023px) {
  .card-blog__image {
    height: 220px;
  }
  .card-blog__content {
    padding: 1.25rem;
  }
  .card-blog__title {
    font-size: 1.0625rem;
  }
}
@media (max-width: 767px) {
  .card-blog__image {
    height: 200px;
  }
  .card-blog__content {
    padding: 1rem;
    gap: 0.625rem;
  }
  .card-blog__title {
    font-size: 1rem;
    line-height: 1.5;
  }
  .card-blog__description {
    font-size: 0.8125rem;
  }
  .card-blog__link {
    font-size: 0.8125rem;
  }
}
@media (max-width: 575px) {
  .card-blog__image {
    height: 180px;
  }
  .card-blog__content {
    padding: 0.875rem;
  }
  .card-blog__title {
    font-size: 0.9375rem;
  }
  .card-blog__description {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}
/*
This component provides a clean blog/case study card:
1. Image at top with 10px border radius
2. Content below with title, description, and link
3. Hover effects: card lift + shadow enhancement
4. Individual clickable elements (no card wrapper link)

Key features:
- Utility-first approach using design tokens
- Smooth transitions
- Responsive typography and spacing
- Accessible with proper link focus states
- Reusable for blogs, case studies, articles

Usage:
- Perfect for blog listings and case study grids
- Combine with grid utilities for layouts
- Stack naturally on mobile (already vertical)
*/
/*
============================================
Card Contact Component
============================================
Contact information card with rounded square icon

Base Class: .card-contact
Child Elements: .card-contact__icon, .card-contact__body,
                .card-contact__label, .card-contact__link

Usage:
<div class="card-contact bg-darker p-6 radius-3">
    <div class="card-contact__icon bg-accent radius-2">
        <i class="ph ph-phone"></i>
    </div>
    <div class="card-contact__body">
        <div class="card-contact__label text-accent font-size-2">24/7 EMERGENCY RESPONSE</div>
        <a href="tel:1800333424" class="card-contact__link text-light font-size-5">1800 333 424</a>
    </div>
</div>

Utility-First Customization:
- Colors: text-*, bg-* (use on card, icon, and text elements)
- Spacing: p-*, gap-*, m-*
- Borders: radius-* for rounded corners
- Background: bg-darker for dark cards, bg-accent for icons
- Responsive: sm-*, md-*, lg-*

Component provides structure only.
Use utilities for all variations (colors, spacing, borders).
============================================
*/
.card-contact {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.card-contact__icon {
  width: 64px;
  height: 64px;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-contact__icon i, .card-contact__icon svg {
  font-size: 32px;
  line-height: 1;
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-contact__body {
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-contact__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

.card-contact__link {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.2s ease;
  margin: 0;
}
.card-contact__link:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .card-contact {
    gap: 1rem;
  }
  .card-contact__icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  .card-contact__icon i, .card-contact__icon svg {
    font-size: 28px;
  }
  .card-contact__link {
    font-size: 1.125rem;
  }
}
/*
Color variations using utilities:

Dark card with accent icon:
<div class="card-contact bg-darker p-6 radius-3">
    <div class="card-contact__icon bg-accent radius-2">...</div>
    <div class="card-contact__label text-accent">...</div>
    <div class="card-contact__link text-light">...</div>
</div>

Light card variant:
<div class="card-contact bg-white p-6 radius-3 shadow-1">
    <div class="card-contact__icon bg-accent radius-2">...</div>
    <div class="card-contact__label text-accent">...</div>
    <div class="card-contact__link text-dark">...</div>
</div>

Responsive spacing:
Use responsive utilities: .sm-p-4 .md-p-6 .lg-p-8
*/
/*
============================================
Card Series Component
============================================
Horizontal card layout for pump series showcase
Displays pump image on left, details on right

Base Class: .card-series
Elements: .card-series__image, .card-series__content

Features:
- Horizontal flex layout (image left, content right)
- Image fixed width, content flexible
- Hover effects: shadow elevation, lift animation, image scale
- Smooth transitions for all hover states

Usage:
<a href="#" class="card-series bg-white shadow-1 hover:shadow-3">
    <div class="card-series__image">
        <img src="..." alt="...">
    </div>
    <div class="card-series__content">
        <h4>Series Name</h4>
        <p>Description</p>
    </div>
</a>

============================================
*/
.card-series {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  user-select: none;
}
.card-series:hover {
  transform: translateY(-4px);
}

.card-series__image {
  width: 120px;
  height: 120px;
  min-width: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-series__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-series:hover .card-series__image img {
  transform: scale(1.08);
}

.card-series__content {
  position: relative;
  z-index: 1;
}
.card-series__content h4 {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
  word-break: break-word;
}
.card-series__content p {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.card-series--enhanced {
  flex-direction: column;
  text-align: center;
  width: 100%;
}
.card-series--enhanced:hover {
  transform: translateY(-4px);
}

.card-series__image--large {
  width: 100%;
  height: 0;
  padding-bottom: 85%;
  position: relative;
  overflow: hidden;
}
.card-series__image--large img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-series--enhanced:hover .card-series__image--large img {
  transform: scale(1.05);
}

.card-series--disabled,
.card-series[aria-disabled=true] {
  color: var(--gray-400);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.card-series--disabled:hover,
.card-series[aria-disabled=true]:hover {
  transform: none;
  box-shadow: inherit;
}
.card-series--disabled .card-series__image--large img,
.card-series[aria-disabled=true] .card-series__image--large img {
  opacity: 0.5;
}

@media (max-width: 768px) {
  .card-series {
    flex-direction: column;
    text-align: center;
  }
  .card-series:hover {
    transform: translateY(-2px);
  }
  .card-series__image {
    width: 100%;
    height: 120px;
    margin-bottom: var(--spacing-3, 1rem);
  }
  .card-series__content {
    width: 100%;
  }
  .card-series__content h4,
  .card-series__content p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .card-series__image--large {
    padding-bottom: 100%;
  }
}
@media (max-width: 575px) {
  .card-series__image--large {
    padding-bottom: 85%;
  }
}
/*
============================================
Page Components - Extracted Inline Styles
============================================
Reusable classes extracted from hardcoded inline styles
in PHP page templates (blog.php, contact.php, etc.)

Purpose:
- Consolidate repeated inline styles into classes
- Improve maintainability and CSS specificity
- Allow easy copying of page content without embedded styles
- Ensure consistent styling across pages

Date: 2024
============================================
*/
.featured-image-container {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease-in-out;
}

.featured-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.featured-image-container:hover .featured-image {
  transform: scale(1.05);
}

.featured-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.featured-image-container:hover .featured-image-overlay {
  opacity: 1;
}

.hero-text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-blog-flex {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: auto;
}

.card-blog-image-flex {
  overflow: hidden;
}

.card-blog-content-flex {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-date-meta {
  color: var(--gray-500, #6b7280);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.card-date-meta i {
  color: var(--gray-500, #6b7280);
  margin-right: 0.5rem;
}

.card-paragraph-flex {
  flex-grow: 1;
}

.blog-filter-pill {
  border-radius: 9999px;
  border: 2px solid var(--gray-300, #d1d5db);
}

.blog-filter-pill.active {
  border-radius: 9999px;
}

.maps-container {
  height: 500px;
  position: relative;
  width: 100%;
}

.maps-container iframe {
  border: 0;
  width: 100%;
  height: 100%;
}

.icon-circle-44 {
  --card-icon-size: 44px;
}

.icon-circle-64 {
  width: 64px;
  height: 64px;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-grow {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@media (max-width: 768px) {
  .maps-container {
    height: 400px;
  }
  .featured-image-container {
    border-radius: 8px;
  }
}
@media (max-width: 576px) {
  .maps-container {
    height: 300px;
  }
  .featured-image-container {
    border-radius: 6px;
  }
}
/*
These classes consolidate inline styles found in:
- blog.php: Featured article section, blog grid, filters
- contact.php: Maps section, icon circles, layout containers

Benefits:
1. Centralized style management
2. Easier maintenance and updates
3. Reduced inline style bloat in HTML
4. Better CSS specificity control
5. Consistent behavior across pages
6. Easier to copy page content

Usage:
Apply these classes to replace inline style attributes:
- style="position: relative; border-radius: 10px; ..."
  → class="featured-image-container"
- style="height: 500px;"
  → class="maps-container"
- style="width: 64px; height: 64px;"
  → class="icon-circle-64"
*/
.media-card {
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}
.media-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.media-card__image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

.media-card__overlay-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  padding: 2rem 1.5rem 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.media-card__overlay-info h3 {
  color: white;
  margin-bottom: 0.5rem;
}
.media-card__overlay-info p {
  color: rgba(255, 255, 255, 0.9);
}

.media-card:hover .media-card__overlay-info {
  opacity: 1;
}

.media-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-card:hover .media-card__overlay {
  opacity: 1;
}

.media-card__play-icon {
  width: 72px;
  height: 72px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--dark);
  cursor: pointer;
  transition: transform 0.3s ease;
}
.media-card__play-icon:hover {
  transform: scale(1.1);
}
.media-card__play-icon i {
  padding-left: 4px;
}

.media-type-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 1;
  background: var(--accent);
  color: var(--dark);
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.active {
  display: flex;
  opacity: 1;
}

.lightbox__content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox__image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox__caption {
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1.5rem 2rem;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
  text-align: center;
  max-width: 600px;
}
.lightbox__caption h3 {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.lightbox__caption p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  margin: 0;
}

.lightbox__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--dark);
  transition: all 0.3s ease;
  z-index: 10000;
}
.lightbox__close:hover {
  background: white;
  transform: scale(1.1);
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(201, 217, 89, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--dark);
  transition: all 0.3s ease;
}
.lightbox__nav:hover {
  background: var(--accent);
  transform: translateY(-50%) scale(1.1);
}
.lightbox__nav--prev {
  left: 2rem;
}
.lightbox__nav--next {
  right: 2rem;
}

.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.video-modal.active {
  display: flex;
  opacity: 1;
}

.video-modal__content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  aspect-ratio: 16/9;
}

.video-modal__iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.5rem;
}

.video-modal__close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 48px;
  height: 48px;
  background: var(--accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--dark);
  transition: all 0.3s ease;
  z-index: 10000;
}
.video-modal__close:hover {
  background: white;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .lightbox__close {
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }
  .lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .lightbox__nav--prev {
    left: 1rem;
  }
  .lightbox__nav--next {
    right: 1rem;
  }
  .video-modal__content {
    width: 95%;
  }
  .video-modal__close {
    top: -2.5rem;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}
.logo-card {
  background: white;
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}
.logo-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.logo-preview {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.375rem;
  padding: 2rem;
}
.logo-preview img {
  max-width: 180px;
  height: auto;
}
.logo-preview--dark {
  background: var(--darker);
}

.color-swatch {
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.color-swatch:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.color-block {
  height: 120px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.color-name {
  position: absolute;
  font-weight: 600;
  font-size: 0.875rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: var(--dark);
  padding: 0.625rem 1.25rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}
.download-btn:hover {
  background: var(--dark);
  color: white;
}

.file-format-tag {
  display: inline-block;
  background: var(--gray-200);
  color: var(--gray-700);
  padding: 0.25rem 0.625rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-right: 0.5rem;
}

/*
============================================
List Component - Flex-based Lists
============================================
Flexible list layouts for navigation, tags, and content

Base Class: .ui-list
List Variants: .list-wrap, .list-hr, .list-scroll-x

Usage:
<nav class="ui-list">
    <ul class="list-hr">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>

Combine with utilities:
- Layout: gap-*, justify-*, align-*
- Colors: bg-*, text-*
- Spacing: p-*, m-*
============================================
*/
.ui-list {
  width: 100%;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  display: grid;
  justify-content: center;
  align-items: center;
}
.ui-list ul, .ui-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ui-list ul, .ui-list ol {
  box-sizing: border-box;
  display: flex;
}
.ui-list ul li, .ui-list ol li {
  white-space: nowrap;
  text-align: center;
  padding: 0.3125rem 1.875rem;
  flex-grow: 1;
}
.ui-list ul li a, .ui-list ol li a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ui-list ul li a:hover, .ui-list ol li a:hover {
  color: var(--primary-color, #007acc);
}

.list-wrap {
  flex-wrap: wrap;
}
.list-wrap li {
  flex-grow: 0;
  flex-shrink: 0;
}

.list-hr {
  width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
}
.list-hr li {
  flex-grow: 1;
  flex-basis: auto;
}

.list-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.list-scroll-x li {
  flex-shrink: 0;
}
.list-scroll-x::-webkit-scrollbar {
  height: 4px;
}
.list-scroll-x::-webkit-scrollbar-track {
  background: transparent;
}
.list-scroll-x::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.list-scroll-x::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.list-vertical {
  flex-direction: column;
  align-items: stretch;
}
.list-vertical li {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.list-vertical li:last-child {
  border-bottom: none;
}

.list-inline {
  display: inline-flex;
  gap: 1rem;
}
.list-inline li {
  padding: 0;
  flex-grow: 0;
}

.list-spaced {
  gap: 1rem;
}
.list-spaced li {
  padding: 0.5rem 1rem;
}

.ui-list li.active {
  font-weight: 600;
  color: var(--primary-color, #007acc);
  position: relative;
}
.ui-list li.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color, #007acc);
}

.ui-list li.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.ui-list.list-divided ul li, .ui-list.list-divided ol li {
  border-right: 1px solid var(--border-color, #e5e7eb);
}
.ui-list.list-divided ul li:last-child, .ui-list.list-divided ol li:last-child {
  border-right: none;
}
.ui-list.list-dot-divided ul li:not(:last-child)::after, .ui-list.list-dot-divided ol li:not(:last-child)::after {
  content: "•";
  margin-left: 1rem;
  color: var(--border-color, #e5e7eb);
}

@media (max-width: 767px) {
  .ui-list ul li, .ui-list ol li {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
  .list-hr {
    flex-wrap: wrap;
  }
  .list-mobile-vertical ul, .list-mobile-vertical ol {
    flex-direction: column;
    width: 100%;
  }
  .list-mobile-vertical ul li, .list-mobile-vertical ol li {
    text-align: left;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
  }
  .list-mobile-vertical ul li:last-child, .list-mobile-vertical ol li:last-child {
    border-bottom: none;
  }
}
/*
============================================
Link Component
============================================
Link styling and utilities for various link patterns

Base Classes: .link, .link-*
Variants: .link-underline, .link-hover, .link-subtle

Usage:
<a href="#" class="link">Standard Link</a>
<a href="#" class="link-underline">Underlined Link</a>

Combine with utilities:
- Colors: text-*, hover:text-*
- Typography: font-weight-*, text-*
- Spacing: m-*, p-*
============================================
*/
.link {
  color: var(--primary-color, #007acc);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.link:hover {
  color: var(--accent-color, #28a745);
}
.link:active {
  color: var(--primary-color, #007acc);
  opacity: 0.8;
}
.link:focus {
  outline: 2px solid var(--primary-color, #007acc);
  outline-offset: 2px;
}
.link:focus:not(:focus-visible) {
  outline: none;
}
.link:visited {
  color: var(--primary-color, #007acc);
}

.link-underline {
  color: var(--primary-color, #007acc);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.link-underline:hover {
  color: var(--accent-color, #28a745);
  text-decoration-color: var(--accent-color, #28a745);
}

.link-hover-underline {
  color: var(--primary-color, #007acc);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}
.link-hover-underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.link-hover-underline:hover {
  color: var(--accent-color, #28a745);
}
.link-hover-underline:hover::after {
  width: 100%;
}

.link-subtle {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.link-subtle:hover {
  opacity: 0.7;
}

.link-muted {
  color: var(--text-color, #6b7280);
  text-decoration: none;
  transition: color 0.2s ease;
}
.link-muted:hover {
  color: var(--primary-color, #007acc);
}

.link-block {
  display: block;
  width: 100%;
}

.link-inline {
  display: inline;
}

.link-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.link-icon i, .link-icon svg {
  transition: transform 0.2s ease;
}
.link-icon:hover i, .link-icon:hover svg {
  transform: translateX(4px);
}
.link-icon.icon-before i, .link-icon.icon-before svg {
  order: -1;
}
.link-icon.icon-before:hover i, .link-icon.icon-before:hover svg {
  transform: translateX(-4px);
}

.link-external::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.875em;
  vertical-align: super;
}
.link-external:hover::after {
  transform: translate(2px, -2px);
}

.link-disabled,
.link[disabled],
a[aria-disabled=true] {
  color: var(--text-color, #9ca3af);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.link-active,
.link[aria-current] {
  color: var(--primary-color, #007acc);
  font-weight: 600;
  position: relative;
}
.link-active::after,
.link[aria-current]::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-color, #007acc);
}

.link-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.link-group a {
  margin: 0;
}

.link-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.link-group-vertical a {
  display: block;
  padding: 0.5rem 0;
}

.link-slide {
  position: relative;
  overflow: hidden;
}
.link-slide::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--primary-color, #007acc);
  transition: left 0.3s ease;
}
.link-slide:hover::before {
  left: 0;
}

.link-glow {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.link-glow:hover {
  text-shadow: 0 0 8px currentColor;
}

.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color, #007acc);
  color: white;
  text-decoration: none;
  border-radius: 0.25rem;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease;
}
.link-cta:hover {
  background: var(--accent-color, #28a745);
  transform: translateY(-2px);
  color: white;
}
.link-cta:active {
  transform: translateY(0);
}
.link-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}
.link-cta:hover::after {
  transform: translateX(4px);
}

.breadcrumb-link,
.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-400, #9ca3af);
  text-decoration: none;
  font-size: 0.75rem;
  opacity: 0.6;
  transition: all 0.2s ease;
}
.breadcrumb-link:not(:last-child)::after,
.breadcrumb-item:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--gray-600, #4b5563);
  opacity: 0.4;
}
.breadcrumb-link:hover,
.breadcrumb-item:hover {
  color: white;
  opacity: 1;
}
.breadcrumb-link:last-child, .breadcrumb-link.active,
.breadcrumb-item:last-child,
.breadcrumb-item.active {
  color: var(--gray-300, #d1d5db);
  font-weight: 400;
  pointer-events: none;
  opacity: 1;
}

@media (max-width: 767px) {
  .link-icon {
    font-size: 0.875rem;
  }
  .link-cta {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
  .link-group {
    gap: 0.75rem;
  }
}
/*
============================================
Headline Component
============================================
Typography-focused headline and heading styles

Base Classes: .headline, .headline-*
Variants: .headline-primary, .headline-secondary, .headline-accent

Usage:
<h1 class="headline">Main Headline</h1>
<h2 class="headline-primary">Section Title</h2>

Combine with utilities:
- Typography: text-*, font-weight-*, line-height-*
- Colors: text-*, bg-*
- Spacing: m-*, p-*
- Alignment: text-center, text-left
============================================
*/
.headline {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-color, #111827);
  margin: 0 0 1rem 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.headline-xl {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.headline-lg {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.headline-md {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.headline-sm {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.headline-primary {
  color: var(--primary-color, #007acc);
}

.headline-secondary {
  color: var(--secondary-color, #6c757d);
}

.headline-accent {
  color: var(--accent-color, #28a745);
}

.headline-muted {
  color: var(--text-color, #6b7280);
  opacity: 0.7;
}

.headline-underline {
  position: relative;
  padding-bottom: 1rem;
}
.headline-underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4rem;
  height: 4px;
  background: var(--primary-color, #007acc);
  border-radius: 2px;
}
.headline-underline.center::after {
  left: 50%;
  transform: translateX(-50%);
}
.headline-underline.full::after {
  width: 100%;
}

.headline-bordered {
  padding: 1rem 0;
  border-top: 2px solid var(--border-color, #e5e7eb);
  border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.headline-border-left {
  padding-left: 1.5rem;
  border-left: 4px solid var(--primary-color, #007acc);
}

.headline-bg {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: var(--primary-color, #007acc);
  color: white;
  border-radius: 0.25rem;
}

.headline-bg-subtle {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: var(--background-color, #f3f4f6);
  color: var(--text-color, #111827);
  border-radius: 0.25rem;
}

.headline-gradient {
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--accent-color, #28a745) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.headline-numbered {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.headline-numbered::before {
  content: counter(headline);
  counter-increment: headline;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--primary-color, #007acc);
  color: white;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
}

.headline-icon {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.headline-icon i, .headline-icon svg {
  flex-shrink: 0;
  font-size: 1.5em;
  color: var(--primary-color, #007acc);
}

.headline-dots {
  position: relative;
  padding-bottom: 1.5rem;
}
.headline-dots::after {
  content: "• • •";
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--primary-color, #007acc);
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
}
.headline-dots.center::after {
  left: 50%;
  transform: translateX(-50%);
}

.headline-bracket {
  position: relative;
}
.headline-bracket::before {
  content: "[";
  color: var(--primary-color, #007acc);
  margin-right: 0.5rem;
}
.headline-bracket::after {
  content: "]";
  color: var(--primary-color, #007acc);
  margin-left: 0.5rem;
}

.headline-group {
  margin-bottom: 2rem;
}
.headline-group .headline-subtitle {
  display: block;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--text-color, #6b7280);
  margin-top: 0.5rem;
  line-height: 1.6;
}
.headline-group .headline-overline {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-color, #007acc);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
  .headline-xl {
    font-size: 2rem;
  }
  .headline-lg {
    font-size: 1.75rem;
  }
  .headline-md {
    font-size: 1.5rem;
  }
  .headline-numbered::before {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
  .headline-icon {
    gap: 0.75rem;
  }
  .headline-icon i, .headline-icon svg {
    font-size: 1.25em;
  }
}
.headline-fade-in {
  animation: headline-fade-in 0.8s ease-out;
}

@keyframes headline-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.headline-slide-in {
  animation: headline-slide-in 0.6s ease-out;
}

@keyframes headline-slide-in {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
============================================
Background Media Component
============================================
Background image and media utilities

Base Classes: .bg-*, .bg-cover, .bg-contain
Variants: .bg-fixed, .bg-parallax, .bg-overlay

Usage:
<div class="bg-cover bg-center">Background Image</div>
<div class="bg-fixed bg-no-repeat">Fixed Background</div>

Combine with utilities:
- Position: bg-center, bg-top, bg-bottom
- Size: bg-cover, bg-contain, bg-auto
- Repeat: bg-repeat, bg-no-repeat
============================================
*/
.bg-auto {
  background-size: auto;
}

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

.bg-50p {
  background-size: 50%;
}

.bg-100p {
  background-size: 100%;
}

.bg-center {
  background-position: center;
}

.bg-top {
  background-position: top;
}

.bg-bottom {
  background-position: bottom;
}

.bg-left {
  background-position: left;
}

.bg-right {
  background-position: right;
}

.bg-top-left {
  background-position: top left;
}

.bg-top-right {
  background-position: top right;
}

.bg-bottom-left {
  background-position: bottom left;
}

.bg-bottom-right {
  background-position: bottom right;
}

.bg-repeat {
  background-repeat: repeat;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.bg-repeat-x {
  background-repeat: repeat-x;
}

.bg-repeat-y {
  background-repeat: repeat-y;
}

.bg-repeat-round {
  background-repeat: round;
}

.bg-repeat-space {
  background-repeat: space;
}

.bg-fixed {
  background-attachment: fixed;
}

.bg-local {
  background-attachment: local;
}

.bg-scroll {
  background-attachment: scroll;
}

.bg-clip-border {
  background-clip: border-box;
}

.bg-clip-padding {
  background-clip: padding-box;
}

.bg-clip-content {
  background-clip: content-box;
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-origin-border {
  background-origin: border-box;
}

.bg-origin-padding {
  background-origin: padding-box;
}

.bg-origin-content {
  background-origin: content-box;
}

.bg-blend-normal {
  background-blend-mode: normal;
}

.bg-blend-multiply {
  background-blend-mode: multiply;
}

.bg-blend-screen {
  background-blend-mode: screen;
}

.bg-blend-overlay {
  background-blend-mode: overlay;
}

.bg-blend-darken {
  background-blend-mode: darken;
}

.bg-blend-lighten {
  background-blend-mode: lighten;
}

.bg-blend-color-dodge {
  background-blend-mode: color-dodge;
}

.bg-blend-color-burn {
  background-blend-mode: color-burn;
}

.bg-blend-hard-light {
  background-blend-mode: hard-light;
}

.bg-blend-soft-light {
  background-blend-mode: soft-light;
}

.bg-blend-difference {
  background-blend-mode: difference;
}

.bg-blend-exclusion {
  background-blend-mode: exclusion;
}

.bg-blend-hue {
  background-blend-mode: hue;
}

.bg-blend-saturation {
  background-blend-mode: saturation;
}

.bg-blend-color {
  background-blend-mode: color;
}

.bg-blend-luminosity {
  background-blend-mode: luminosity;
}

.bg-overlay {
  position: relative;
}
.bg-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.bg-overlay > * {
  position: relative;
  z-index: 2;
}

.bg-overlay-light {
  position: relative;
}
.bg-overlay-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.bg-overlay-light > * {
  position: relative;
  z-index: 2;
}

.bg-overlay-dark {
  position: relative;
}
.bg-overlay-dark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}
.bg-overlay-dark > * {
  position: relative;
  z-index: 2;
}

.bg-overlay-white {
  position: relative;
}
.bg-overlay-white::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1;
}
.bg-overlay-white > * {
  position: relative;
  z-index: 2;
}

.bg-parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 400px;
}

.bg-blur {
  position: relative;
}
.bg-blur::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
}
.bg-blur > * {
  position: relative;
  z-index: 2;
}

.bg-blur-light {
  position: relative;
}
.bg-blur-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
}
.bg-blur-light > * {
  position: relative;
  z-index: 2;
}

.bg-blur-heavy {
  position: relative;
}
.bg-blur-heavy::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1;
}
.bg-blur-heavy > * {
  position: relative;
  z-index: 2;
}

.bg-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bg-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  z-index: 1;
}
.bg-hero > * {
  position: relative;
  z-index: 2;
}

.bg-fullscreen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
}

.bg-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 400px;
}
.bg-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.bg-video > *:not(video) {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .bg-parallax,
  .bg-fixed {
    background-attachment: scroll;
  }
  .bg-hero,
  .bg-fullscreen,
  .bg-parallax {
    min-height: 300px;
  }
  .bg-blur::before,
  .bg-blur-light::before,
  .bg-blur-heavy::before {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}
@media print {
  .bg-fixed,
  .bg-parallax,
  .bg-video {
    background: none !important;
  }
  .bg-overlay::before,
  .bg-blur::before {
    display: none !important;
  }
}
/*
============================================
Background Gradients Component
============================================
Gradient background utilities

Base Classes: .bg-gradient-*, .gradient-*
Variants: Linear, radial, conic gradients

Usage:
<div class="bg-gradient-primary">Gradient Background</div>
<div class="bg-gradient-radial">Radial Gradient</div>

Combine with utilities:
- Opacity: opacity-*
- Blend: bg-blend-*
- Overlay: bg-overlay
============================================
*/
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-to-bl {
  background-image: linear-gradient(to bottom left, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-to-tl {
  background-image: linear-gradient(to top left, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-primary {
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--accent-color, #28a745) 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--secondary-color, #6c757d) 0%, var(--primary-color, #007acc) 100%);
}

.bg-gradient-warm {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.bg-gradient-cool {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.bg-gradient-sunset {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.bg-gradient-ocean {
  background: linear-gradient(135deg, #2e3192 0%, #1bffff 100%);
}

.bg-gradient-fire {
  background: linear-gradient(135deg, #f83600 0%, #f9d423 100%);
}

.bg-gradient-forest {
  background: linear-gradient(135deg, #0f9b0f 0%, #000000 100%);
}

.bg-gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-pink {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

.bg-gradient-blue {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.bg-gradient-dark {
  background: linear-gradient(135deg, #434343 0%, #000000 100%);
}

.bg-gradient-light {
  background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.bg-gradient-radial {
  background: radial-gradient(circle, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-at-t {
  background: radial-gradient(circle at top, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-at-tr {
  background: radial-gradient(circle at top right, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-at-r {
  background: radial-gradient(circle at right, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-at-br {
  background: radial-gradient(circle at bottom right, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-at-b {
  background: radial-gradient(circle at bottom, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-at-bl {
  background: radial-gradient(circle at bottom left, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-at-l {
  background: radial-gradient(circle at left, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-at-tl {
  background: radial-gradient(circle at top left, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-radial-center {
  background: radial-gradient(circle at center, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-conic {
  background: conic-gradient(from 0deg, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-conic-from-45 {
  background: conic-gradient(from 45deg, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-conic-from-90 {
  background: conic-gradient(from 90deg, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-conic-from-180 {
  background: conic-gradient(from 180deg, var(--gradient-from, transparent), var(--gradient-to, transparent));
}

.bg-gradient-animated {
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--accent-color, #28a745) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bg-gradient-pulse {
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--accent-color, #28a745) 100%);
  animation: gradient-pulse 2s ease-in-out infinite;
}

@keyframes gradient-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
.bg-gradient-3-stop {
  background: linear-gradient(135deg, var(--gradient-from, #667eea) 0%, var(--gradient-via, #764ba2) 50%, var(--gradient-to, #f093fb) 100%);
}

.bg-gradient-rainbow {
  background: linear-gradient(135deg, #ff0000 0%, #ff7f00 16.67%, #ffff00 33.33%, #00ff00 50%, #0000ff 66.67%, #4b0082 83.33%, #9400d3 100%);
}

.bg-gradient-pastel {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 25%, #ff9a9e 50%, #fecfef 75%, #ffecd2 100%);
}

.bg-gradient-mesh-1 {
  background: radial-gradient(at 40% 20%, hsl(28, 100%, 74%) 0px, transparent 50%), radial-gradient(at 80% 0%, hsl(189, 100%, 56%) 0px, transparent 50%), radial-gradient(at 0% 50%, hsl(355, 100%, 93%) 0px, transparent 50%), radial-gradient(at 80% 50%, hsl(340, 100%, 76%) 0px, transparent 50%), radial-gradient(at 0% 100%, hsl(22, 100%, 77%) 0px, transparent 50%), radial-gradient(at 80% 100%, hsl(242, 100%, 70%) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(343, 100%, 76%) 0px, transparent 50%);
}

.bg-gradient-mesh-2 {
  background: radial-gradient(at 0% 0%, hsl(253, 16%, 7%) 0px, transparent 50%), radial-gradient(at 50% 0%, hsl(225, 39%, 30%) 0px, transparent 50%), radial-gradient(at 100% 0%, hsl(339, 49%, 30%) 0px, transparent 50%), radial-gradient(at 0% 50%, hsl(217, 47%, 20%) 0px, transparent 50%), radial-gradient(at 50% 50%, hsl(254, 73%, 11%) 0px, transparent 50%), radial-gradient(at 100% 50%, hsl(343, 84%, 30%) 0px, transparent 50%), radial-gradient(at 0% 100%, hsl(214, 49%, 20%) 0px, transparent 50%), radial-gradient(at 50% 100%, hsl(254, 73%, 11%) 0px, transparent 50%), radial-gradient(at 100% 100%, hsl(343, 84%, 30%) 0px, transparent 50%);
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--accent-color, #28a745) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.text-gradient-rainbow {
  background: linear-gradient(135deg, #ff0000 0%, #ff7f00 16.67%, #ffff00 33.33%, #00ff00 50%, #0000ff 66.67%, #4b0082 83.33%, #9400d3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.text-gradient-animated {
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--accent-color, #28a745) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 3s ease infinite;
}

.border-gradient {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box, linear-gradient(135deg, var(--primary-color, #007acc), var(--accent-color, #28a745)) border-box;
}

.border-gradient-bottom {
  border-bottom: 2px solid transparent;
  background: linear-gradient(to right, var(--primary-color, #007acc), var(--accent-color, #28a745)) bottom/100% 2px no-repeat;
}

.from-primary {
  --gradient-from: var(--primary-color, #007acc);
}

.from-secondary {
  --gradient-from: var(--secondary-color, #6c757d);
}

.from-accent {
  --gradient-from: var(--accent-color, #28a745);
}

.from-transparent {
  --gradient-from: transparent;
}

.via-primary {
  --gradient-via: var(--primary-color, #007acc);
}

.via-secondary {
  --gradient-via: var(--secondary-color, #6c757d);
}

.via-accent {
  --gradient-via: var(--accent-color, #28a745);
}

.via-transparent {
  --gradient-via: transparent;
}

.to-primary {
  --gradient-to: var(--primary-color, #007acc);
}

.to-secondary {
  --gradient-to: var(--secondary-color, #6c757d);
}

.to-accent {
  --gradient-to: var(--accent-color, #28a745);
}

.to-transparent {
  --gradient-to: transparent;
}

@media (max-width: 767px) {
  .bg-gradient-mesh-1,
  .bg-gradient-mesh-2 {
    background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--accent-color, #28a745) 100%);
  }
  .bg-gradient-animated,
  .text-gradient-animated {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bg-gradient-animated,
  .bg-gradient-pulse,
  .text-gradient-animated {
    animation: none;
  }
}
/*
============================================
Background Patterns Component
============================================
CSS-based background pattern utilities

Base Classes: .bg-pattern-*, .pattern-*
Variants: Dots, stripes, grid, geometric patterns

Usage:
<div class="bg-pattern-dots">Dotted Background</div>
<div class="bg-pattern-stripes">Striped Background</div>

Combine with utilities:
- Colors: bg-*, text-*
- Opacity: opacity-*
- Blend: bg-blend-*
============================================
*/
.bg-pattern-dots {
  background-image: radial-gradient(circle, var(--border-color, #e5e7eb) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-pattern-dots-sm {
  background-image: radial-gradient(circle, var(--border-color, #e5e7eb) 1px, transparent 1px);
  background-size: 10px 10px;
}

.bg-pattern-dots-lg {
  background-image: radial-gradient(circle, var(--border-color, #e5e7eb) 2px, transparent 2px);
  background-size: 30px 30px;
}

.bg-pattern-dots-dense {
  background-image: radial-gradient(circle, var(--border-color, #e5e7eb) 1px, transparent 1px);
  background-size: 15px 15px;
}

.bg-pattern-grid {
  background-image: linear-gradient(var(--border-color, #e5e7eb) 1px, transparent 1px), linear-gradient(90deg, var(--border-color, #e5e7eb) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-pattern-grid-sm {
  background-image: linear-gradient(var(--border-color, #e5e7eb) 1px, transparent 1px), linear-gradient(90deg, var(--border-color, #e5e7eb) 1px, transparent 1px);
  background-size: 10px 10px;
}

.bg-pattern-grid-lg {
  background-image: linear-gradient(var(--border-color, #e5e7eb) 1px, transparent 1px), linear-gradient(90deg, var(--border-color, #e5e7eb) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-pattern-graph {
  background-image: linear-gradient(var(--border-color, #e5e7eb) 1px, transparent 1px), linear-gradient(90deg, var(--border-color, #e5e7eb) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: -1px -1px;
}

.bg-pattern-stripes {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, var(--border-color, #e5e7eb) 10px, var(--border-color, #e5e7eb) 20px);
}

.bg-pattern-stripes-vertical {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, var(--border-color, #e5e7eb) 10px, var(--border-color, #e5e7eb) 20px);
}

.bg-pattern-stripes-horizontal {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, var(--border-color, #e5e7eb) 10px, var(--border-color, #e5e7eb) 20px);
}

.bg-pattern-stripes-diagonal {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--border-color, #e5e7eb) 10px, var(--border-color, #e5e7eb) 20px);
}

.bg-pattern-checkerboard {
  background-image: linear-gradient(45deg, var(--border-color, #e5e7eb) 25%, transparent 25%), linear-gradient(-45deg, var(--border-color, #e5e7eb) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border-color, #e5e7eb) 75%), linear-gradient(-45deg, transparent 75%, var(--border-color, #e5e7eb) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.bg-pattern-checkerboard-sm {
  background-image: linear-gradient(45deg, var(--border-color, #e5e7eb) 25%, transparent 25%), linear-gradient(-45deg, var(--border-color, #e5e7eb) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border-color, #e5e7eb) 75%), linear-gradient(-45deg, transparent 75%, var(--border-color, #e5e7eb) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

.bg-pattern-checkerboard-lg {
  background-image: linear-gradient(45deg, var(--border-color, #e5e7eb) 25%, transparent 25%), linear-gradient(-45deg, var(--border-color, #e5e7eb) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--border-color, #e5e7eb) 75%), linear-gradient(-45deg, transparent 75%, var(--border-color, #e5e7eb) 75%);
  background-size: 40px 40px;
  background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

.bg-pattern-zigzag {
  background: linear-gradient(135deg, var(--border-color, #e5e7eb) 25%, transparent 25%) -10px 0, linear-gradient(225deg, var(--border-color, #e5e7eb) 25%, transparent 25%) -10px 0, linear-gradient(315deg, var(--border-color, #e5e7eb) 25%, transparent 25%), linear-gradient(45deg, var(--border-color, #e5e7eb) 25%, transparent 25%);
  background-size: 20px 20px;
}

.bg-pattern-zigzag-3d {
  background: linear-gradient(135deg, transparent 10px, var(--border-color, #e5e7eb) 0) 0 0, linear-gradient(225deg, transparent 10px, var(--border-color, #e5e7eb) 0) 0 0, linear-gradient(315deg, transparent 10px, var(--border-color, #e5e7eb) 0) 0 0, linear-gradient(45deg, transparent 10px, var(--border-color, #e5e7eb) 0) 0 0;
  background-size: 20px 20px;
}

.bg-pattern-diamonds {
  background: linear-gradient(45deg, transparent 49%, var(--border-color, #e5e7eb) 49%, var(--border-color, #e5e7eb) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--border-color, #e5e7eb) 49%, var(--border-color, #e5e7eb) 51%, transparent 51%);
  background-size: 20px 20px;
}

.bg-pattern-diamonds-lg {
  background: linear-gradient(45deg, transparent 49%, var(--border-color, #e5e7eb) 49%, var(--border-color, #e5e7eb) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--border-color, #e5e7eb) 49%, var(--border-color, #e5e7eb) 51%, transparent 51%);
  background-size: 40px 40px;
}

.bg-pattern-cross {
  background: linear-gradient(transparent, transparent), linear-gradient(transparent 30%, var(--border-color, #e5e7eb) 30%, var(--border-color, #e5e7eb) 70%, transparent 70%), linear-gradient(90deg, transparent 30%, var(--border-color, #e5e7eb) 30%, var(--border-color, #e5e7eb) 70%, transparent 70%);
  background-size: 20px 20px;
}

.bg-pattern-cross-lg {
  background: linear-gradient(transparent, transparent), linear-gradient(transparent 30%, var(--border-color, #e5e7eb) 30%, var(--border-color, #e5e7eb) 70%, transparent 70%), linear-gradient(90deg, transparent 30%, var(--border-color, #e5e7eb) 30%, var(--border-color, #e5e7eb) 70%, transparent 70%);
  background-size: 40px 40px;
}

.bg-pattern-hexagons {
  background: linear-gradient(60deg, transparent 50%, var(--border-color, #e5e7eb) 50%), linear-gradient(120deg, var(--border-color, #e5e7eb) 50%, transparent 50%), linear-gradient(transparent, transparent);
  background-size: 30px 52px;
  background-position: 0 0, 0 0, 15px 26px;
}

.bg-pattern-circles {
  background-image: radial-gradient(circle, var(--border-color, #e5e7eb) 10%, transparent 10%);
  background-size: 30px 30px;
}

.bg-pattern-circles-lg {
  background-image: radial-gradient(circle, var(--border-color, #e5e7eb) 20%, transparent 20%);
  background-size: 50px 50px;
}

.bg-pattern-rings {
  background-image: radial-gradient(circle, transparent 20%, var(--border-color, #e5e7eb) 20%, var(--border-color, #e5e7eb) 25%, transparent 25%);
  background-size: 40px 40px;
}

.bg-pattern-waves {
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, var(--border-color, #e5e7eb) 30%, var(--border-color, #e5e7eb) 35%, transparent 35%);
  background-size: 40px 40px;
}

.bg-pattern-waves-diagonal {
  background: radial-gradient(ellipse at 20% 80%, transparent 40%, var(--border-color, #e5e7eb) 40%, var(--border-color, #e5e7eb) 45%, transparent 45%);
  background-size: 50px 50px;
}

.bg-pattern-triangles {
  background: linear-gradient(45deg, transparent 50%, var(--border-color, #e5e7eb) 50%), linear-gradient(-45deg, transparent 50%, var(--border-color, #e5e7eb) 50%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 0;
}

.bg-pattern-triangles-inverted {
  background: linear-gradient(135deg, transparent 50%, var(--border-color, #e5e7eb) 50%), linear-gradient(-135deg, transparent 50%, var(--border-color, #e5e7eb) 50%);
  background-size: 20px 20px;
  background-position: 0 10px, 10px 10px;
}

.bg-pattern-blueprint {
  background-color: #269;
  background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.bg-pattern-circuit {
  background-color: #1a1a1a;
  background-image: radial-gradient(circle at 20% 50%, transparent 10%, var(--primary-color, #007acc) 10%, var(--primary-color, #007acc) 12%, transparent 12%), radial-gradient(circle at 60% 70%, transparent 10%, var(--accent-color, #28a745) 10%, var(--accent-color, #28a745) 12%, transparent 12%), radial-gradient(circle at 80% 30%, transparent 10%, var(--primary-color, #007acc) 10%, var(--primary-color, #007acc) 12%, transparent 12%);
  background-size: 100px 100px;
}

.bg-pattern-topography {
  background-image: radial-gradient(circle at 100% 150%, transparent 24%, var(--border-color, #e5e7eb) 25%, var(--border-color, #e5e7eb) 26%, transparent 27%, transparent), radial-gradient(circle at 0% 50%, transparent 24%, var(--border-color, #e5e7eb) 25%, var(--border-color, #e5e7eb) 26%, transparent 27%, transparent);
  background-size: 40px 60px;
  background-position: 0 0, 20px 30px;
}

.bg-pattern-isometric {
  background: linear-gradient(30deg, transparent 40%, var(--border-color, #e5e7eb) 40%, var(--border-color, #e5e7eb) 60%, transparent 60%), linear-gradient(150deg, transparent 40%, var(--border-color, #e5e7eb) 40%, var(--border-color, #e5e7eb) 60%, transparent 60%);
  background-size: 40px 70px;
  background-position: 0 0, 20px 0;
}

.bg-pattern-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

.bg-pattern-texture {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.05' numOctaves='2' result='turbulence'/%3E%3CfeDisplacementMap in2='turbulence' in='SourceGraphic' scale='50' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
}

.bg-pattern-animated {
  background-image: radial-gradient(circle, var(--border-color, #e5e7eb) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: pattern-move 20s linear infinite;
}

@keyframes pattern-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 20px 20px;
  }
}
@media (max-width: 767px) {
  .bg-pattern-blueprint,
  .bg-pattern-circuit,
  .bg-pattern-topography {
    background-image: radial-gradient(circle, var(--border-color, #e5e7eb) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  .bg-pattern-animated {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bg-pattern-animated {
    animation: none;
  }
}
/*
============================================
Forms Base Component
============================================
Minimal base form styling and structure

Base Classes: .form, .form-*
Variants: .form-inline, .form-stacked, .form-horizontal

Usage:
<form class="form">
    <input type="text" class="form-input">
    <button type="submit" class="btn">Submit</button>
</form>

Combine with utilities:
- Layout: flex-*, grid-*, gap-*
- Spacing: m-*, p-*
- Colors: bg-*, text-*, border-*
============================================
*/
.form {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.form-input,
.form-select,
.form-textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-color, #111827);
  font-family: inherit;
  background-color: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-color, #007acc);
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}
.form-input:disabled, .form-input[disabled],
.form-select:disabled,
.form-select[disabled],
.form-textarea:disabled,
.form-textarea[disabled] {
  background-color: var(--background-color, #f3f4f6);
  color: var(--text-color, #9ca3af);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-input:read-only,
.form-select:read-only,
.form-textarea:read-only {
  background-color: var(--background-color, #f9fafb);
  cursor: default;
}
.form-input::placeholder,
.form-select::placeholder,
.form-textarea::placeholder {
  color: var(--text-color, #9ca3af);
  opacity: 1;
}

.form-textarea {
  min-height: 100px;
  resize: vertical;
}
.form-textarea.resize-none {
  resize: none;
}
.form-textarea.resize-horizontal {
  resize: horizontal;
}
.form-textarea.resize-both {
  resize: both;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}
.form-select[multiple] {
  background-image: none;
  padding-right: 0.75rem;
  height: auto;
}

.form-checkbox,
.form-radio {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-color, #e5e7eb);
  background-color: var(--background-color, #ffffff);
  cursor: pointer;
  transition: all 0.15s ease;
}
.form-checkbox:focus,
.form-radio:focus {
  outline: none;
  border-color: var(--primary-color, #007acc);
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}
.form-checkbox:checked,
.form-radio:checked {
  background-color: var(--primary-color, #007acc);
  border-color: var(--primary-color, #007acc);
}
.form-checkbox:disabled,
.form-radio:disabled {
  background-color: var(--background-color, #f3f4f6);
  cursor: not-allowed;
  opacity: 0.5;
}

.form-checkbox {
  border-radius: 0.25rem;
}
.form-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.form-radio {
  border-radius: 50%;
}
.form-radio:checked {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #374151);
  line-height: 1.5;
}
.form-label.required::after {
  content: "*";
  color: var(--error);
  margin-left: 0.25rem;
}

.form-help,
.form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
  line-height: 1.5;
}

.form-field {
  margin-bottom: 1.5rem;
}
.form-field:last-child {
  margin-bottom: 0;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.form-inline .form-field {
  margin-bottom: 0;
  flex: 1 1 auto;
}
.form-inline .form-label {
  margin-bottom: 0;
  margin-right: 0.5rem;
}

.form-stacked .form-field {
  display: flex;
  flex-direction: column;
}

.form-horizontal .form-field {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.form-horizontal .form-label {
  flex: 0 0 150px;
  margin-bottom: 0;
  padding-top: 0.5rem;
  text-align: right;
}
.form-horizontal .form-input,
.form-horizontal .form-select,
.form-horizontal .form-textarea {
  flex: 1 1 auto;
}

.form-input-sm,
.form-select-sm,
.form-textarea-sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
}

.form-input-lg,
.form-select-lg,
.form-textarea-lg {
  padding: 0.625rem 1rem;
  font-size: 1.125rem;
}

.form-input-full {
  width: 100%;
}

.form-input-auto {
  width: auto;
}

.form-input-xs {
  max-width: 120px;
}

.form-input-sm {
  max-width: 200px;
}

.form-input-md {
  max-width: 320px;
}

.form-input-lg {
  max-width: 480px;
}

.form-fieldset {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.form-fieldset:last-child {
  margin-bottom: 0;
}

.form-legend {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color, #111827);
  padding: 0 0.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .form-horizontal .form-field {
    flex-direction: column;
    gap: 0.5rem;
  }
  .form-horizontal .form-label {
    flex: 1 1 auto;
    text-align: left;
    padding-top: 0;
    margin-bottom: 0.5rem;
  }
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
  .form-inline .form-field {
    width: 100%;
  }
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 0.875rem;
  }
}
@media (prefers-color-scheme: dark) {
  .form-input:not(:focus),
  .form-select:not(:focus),
  .form-textarea:not(:focus),
  .form-checkbox:not(:focus),
  .form-radio:not(:focus) {
    border-color: var(--border-color, #374151);
  }
}
.form-input--error,
.form-textarea--error,
.form-select--error {
  border-color: var(--error, #ef4444) !important;
}
.form-input--error:focus,
.form-textarea--error:focus,
.form-select--error:focus {
  border-color: var(--error, #ef4444) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-message {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.form-message i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.form-message--success {
  background-color: rgba(200, 215, 66, 0.15);
  color: var(--accent, #c8d742);
  border: 1px solid rgba(200, 215, 66, 0.3);
}

.form-message--error {
  background-color: rgba(239, 68, 68, 0.15);
  color: #ff6b6b;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn--loading {
  position: relative;
  cursor: wait;
  opacity: 0.8;
}
.btn--loading .btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn--loading .btn-loading i {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*
============================================
Form Controls Component
============================================
Specialized form input controls and widgets

Base Classes: .form-switch, .form-range, .form-file
Variants: Custom controls with enhanced styling

Usage:
<input type="checkbox" class="form-switch">
<input type="range" class="form-range">
<input type="file" class="form-file">

Combine with utilities:
- Colors: bg-*, text-*, border-*
- Spacing: m-*, p-*
- Size: w-*, h-*
============================================
*/
.form-switch {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  background-color: var(--border-color, #e5e7eb);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.form-switch::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.form-switch:checked {
  background-color: var(--primary-color, #007acc);
}
.form-switch:checked::before {
  transform: translateX(1.25rem);
}
.form-switch:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}
.form-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-switch-sm {
  width: 2rem;
  height: 1.125rem;
}
.form-switch-sm::before {
  width: 0.875rem;
  height: 0.875rem;
}
.form-switch-sm:checked::before {
  transform: translateX(0.875rem);
}

.form-switch-lg {
  width: 3.5rem;
  height: 2rem;
}
.form-switch-lg::before {
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.625rem;
  height: 1.625rem;
}
.form-switch-lg:checked::before {
  transform: translateX(1.5rem);
}

.form-range {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  height: 0.5rem;
  background: var(--border-color, #e5e7eb);
  border-radius: 9999px;
  outline: none;
  cursor: pointer;
}
.form-range::-webkit-slider-track {
  width: 100%;
  height: 0.5rem;
  background: var(--border-color, #e5e7eb);
  border-radius: 9999px;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  background: var(--border-color, #e5e7eb);
  border-radius: 9999px;
}
.form-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--primary-color, #007acc);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}
.form-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.form-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--primary-color, #007acc);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
}
.form-range::-moz-range-thumb:hover {
  transform: scale(1.1);
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.2);
}
.form-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-range:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}
.form-range:disabled::-moz-range-thumb {
  cursor: not-allowed;
}

.form-file {
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1.5;
}
.form-file::file-selector-button {
  padding: 0.5rem 1rem;
  margin-right: 0.75rem;
  background-color: var(--background-color, #f3f4f6);
  color: var(--text-color, #374151);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.form-file::file-selector-button:hover {
  background-color: var(--background-color, #e5e7eb);
}
.form-file::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin-right: 0.75rem;
  background-color: var(--background-color, #f3f4f6);
  color: var(--text-color, #374151);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.form-file::-webkit-file-upload-button:hover {
  background-color: var(--background-color, #e5e7eb);
}
.form-file:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.form-file:disabled::file-selector-button {
  cursor: not-allowed;
}
.form-file:disabled::-webkit-file-upload-button {
  cursor: not-allowed;
}

.form-color {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 3rem;
  height: 3rem;
  padding: 0.25rem;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
  background-color: transparent;
  cursor: pointer;
}
.form-color::-webkit-color-swatch-wrapper {
  padding: 0;
}
.form-color::-webkit-color-swatch {
  border: none;
  border-radius: 0.125rem;
}
.form-color::-moz-color-swatch {
  border: none;
  border-radius: 0.125rem;
}
.form-color:focus {
  outline: none;
  border-color: var(--primary-color, #007acc);
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}
.form-color:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-number::-webkit-inner-spin-button, .form-number::-webkit-outer-spin-button {
  opacity: 1;
  height: 2rem;
}

.form-number-no-arrows::-webkit-inner-spin-button, .form-number-no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.form-number-no-arrows {
  -moz-appearance: textfield;
}

.form-search {
  padding-left: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /%3E%3C/svg%3E");
  background-position: 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
}
.form-search::-webkit-search-decoration, .form-search::-webkit-search-cancel-button, .form-search::-webkit-search-results-button, .form-search::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.form-date::-webkit-calendar-picker-indicator,
.form-time::-webkit-calendar-picker-indicator,
.form-datetime::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 0.25rem;
  margin-left: 0.5rem;
}

.form-password-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-password-wrapper .form-password {
  width: 100%;
  padding-right: 2.5rem;
}
.form-password-wrapper .password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--text-color, #6b7280);
  transition: color 0.15s ease;
}
.form-password-wrapper .password-toggle:hover {
  color: var(--text-color, #374151);
}
.form-password-wrapper .password-toggle:focus {
  outline: none;
  color: var(--primary-color, #007acc);
}

.form-input-icon {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-input-icon .form-input {
  padding-left: 2.5rem;
}
.form-input-icon .input-icon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: var(--text-color, #6b7280);
  pointer-events: none;
}
.form-input-icon .input-icon i, .form-input-icon .input-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.form-input-icon.icon-right .form-input {
  padding-left: 0.75rem;
  padding-right: 2.5rem;
}
.form-input-icon.icon-right .input-icon {
  left: auto;
  right: 0.75rem;
}

.form-input-group {
  display: flex;
  width: 100%;
}
.form-input-group .form-input {
  flex: 1 1 auto;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.form-input-group .input-group-btn {
  flex: 0 0 auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
.form-input-group.btn-left .form-input {
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-input-group.btn-left .input-group-btn {
  border-radius: 0.25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-left: 0;
  margin-right: -1px;
  order: -1;
}

.form-checkbox-list,
.form-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.form-checkbox-list .checkbox-item,
.form-checkbox-list .radio-item,
.form-radio-list .checkbox-item,
.form-radio-list .radio-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-checkbox-list .checkbox-item input,
.form-checkbox-list .radio-item input,
.form-radio-list .checkbox-item input,
.form-radio-list .radio-item input {
  flex: 0 0 auto;
}
.form-checkbox-list .checkbox-item label,
.form-checkbox-list .radio-item label,
.form-radio-list .checkbox-item label,
.form-radio-list .radio-item label {
  flex: 1 1 auto;
  margin: 0;
  cursor: pointer;
  font-size: 0.875rem;
}
.form-checkbox-list.inline,
.form-radio-list.inline {
  flex-direction: row;
  flex-wrap: wrap;
}

.form-progress {
  width: 100%;
  height: 0.5rem;
  background-color: var(--background-color, #e5e7eb);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.form-progress .progress-bar {
  height: 100%;
  background-color: var(--primary-color, #007acc);
  transition: width 0.3s ease;
}

@media (max-width: 767px) {
  .form-switch {
    width: 2.5rem;
    height: 1.375rem;
  }
  .form-switch::before {
    width: 1.125rem;
    height: 1.125rem;
  }
  .form-switch:checked::before {
    transform: translateX(1.125rem);
  }
  .form-color {
    width: 2.5rem;
    height: 2.5rem;
  }
  .form-checkbox-list.inline,
  .form-radio-list.inline {
    flex-direction: column;
  }
}
/*
============================================
Form Grid Component
============================================
Grid-based form layouts and responsive columns

Base Classes: .form-grid, .form-row, .form-col
Variants: Multi-column layouts with responsive breakpoints

Usage:
<div class="form-grid">
    <div class="form-col-6">First Name</div>
    <div class="form-col-6">Last Name</div>
</div>

Combine with utilities:
- Grid: grid-*, gap-*
- Spacing: m-*, p-*
- Layout: flex-*, align-*
============================================
*/
.form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  width: 100%;
}

.form-grid-gap-sm {
  gap: 0.5rem;
}

.form-grid-gap-md {
  gap: 1rem;
}

.form-grid-gap-lg {
  gap: 1.5rem;
}

.form-grid-gap-xl {
  gap: 2rem;
}

.form-grid-no-gap {
  gap: 0;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.form-row > * {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.form-col {
  grid-column: span 12;
}

.form-col-1 {
  grid-column: span 1;
}

.form-col-2 {
  grid-column: span 2;
}

.form-col-3 {
  grid-column: span 3;
}

.form-col-4 {
  grid-column: span 4;
}

.form-col-5 {
  grid-column: span 5;
}

.form-col-6 {
  grid-column: span 6;
}

.form-col-7 {
  grid-column: span 7;
}

.form-col-8 {
  grid-column: span 8;
}

.form-col-9 {
  grid-column: span 9;
}

.form-col-10 {
  grid-column: span 10;
}

.form-col-11 {
  grid-column: span 11;
}

.form-col-12 {
  grid-column: span 12;
}

.form-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.form-grid-auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.form-grid-auto-lg {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.form-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.form-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.form-grid-6 {
  grid-template-columns: repeat(6, 1fr);
}

@media (min-width: 640px) {
  .sm-form-col-1 {
    grid-column: span 1;
  }
  .sm-form-col-2 {
    grid-column: span 2;
  }
  .sm-form-col-3 {
    grid-column: span 3;
  }
  .sm-form-col-4 {
    grid-column: span 4;
  }
  .sm-form-col-5 {
    grid-column: span 5;
  }
  .sm-form-col-6 {
    grid-column: span 6;
  }
  .sm-form-col-7 {
    grid-column: span 7;
  }
  .sm-form-col-8 {
    grid-column: span 8;
  }
  .sm-form-col-9 {
    grid-column: span 9;
  }
  .sm-form-col-10 {
    grid-column: span 10;
  }
  .sm-form-col-11 {
    grid-column: span 11;
  }
  .sm-form-col-12 {
    grid-column: span 12;
  }
  .sm-form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .sm-form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .sm-form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 768px) {
  .md-form-col-1 {
    grid-column: span 1;
  }
  .md-form-col-2 {
    grid-column: span 2;
  }
  .md-form-col-3 {
    grid-column: span 3;
  }
  .md-form-col-4 {
    grid-column: span 4;
  }
  .md-form-col-5 {
    grid-column: span 5;
  }
  .md-form-col-6 {
    grid-column: span 6;
  }
  .md-form-col-7 {
    grid-column: span 7;
  }
  .md-form-col-8 {
    grid-column: span 8;
  }
  .md-form-col-9 {
    grid-column: span 9;
  }
  .md-form-col-10 {
    grid-column: span 10;
  }
  .md-form-col-11 {
    grid-column: span 11;
  }
  .md-form-col-12 {
    grid-column: span 12;
  }
  .md-form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .md-form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .md-form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1024px) {
  .lg-form-col-1 {
    grid-column: span 1;
  }
  .lg-form-col-2 {
    grid-column: span 2;
  }
  .lg-form-col-3 {
    grid-column: span 3;
  }
  .lg-form-col-4 {
    grid-column: span 4;
  }
  .lg-form-col-5 {
    grid-column: span 5;
  }
  .lg-form-col-6 {
    grid-column: span 6;
  }
  .lg-form-col-7 {
    grid-column: span 7;
  }
  .lg-form-col-8 {
    grid-column: span 8;
  }
  .lg-form-col-9 {
    grid-column: span 9;
  }
  .lg-form-col-10 {
    grid-column: span 10;
  }
  .lg-form-col-11 {
    grid-column: span 11;
  }
  .lg-form-col-12 {
    grid-column: span 12;
  }
  .lg-form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .lg-form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .lg-form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .lg-form-grid-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .lg-form-grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1280px) {
  .xl-form-col-1 {
    grid-column: span 1;
  }
  .xl-form-col-2 {
    grid-column: span 2;
  }
  .xl-form-col-3 {
    grid-column: span 3;
  }
  .xl-form-col-4 {
    grid-column: span 4;
  }
  .xl-form-col-5 {
    grid-column: span 5;
  }
  .xl-form-col-6 {
    grid-column: span 6;
  }
  .xl-form-col-7 {
    grid-column: span 7;
  }
  .xl-form-col-8 {
    grid-column: span 8;
  }
  .xl-form-col-9 {
    grid-column: span 9;
  }
  .xl-form-col-10 {
    grid-column: span 10;
  }
  .xl-form-col-11 {
    grid-column: span 11;
  }
  .xl-form-col-12 {
    grid-column: span 12;
  }
  .xl-form-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .xl-form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .xl-form-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .xl-form-grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}
.form-section {
  grid-column: 1/-1;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  margin-bottom: 1rem;
}
.form-section:first-child {
  padding-top: 0;
}
.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color, #111827);
  margin-bottom: 0.5rem;
}

.form-section-description {
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
}

.form-col-span-all {
  grid-column: 1/-1;
}

.form-col-start-1 {
  grid-column-start: 1;
}

.form-col-start-2 {
  grid-column-start: 2;
}

.form-col-start-3 {
  grid-column-start: 3;
}

.form-col-start-4 {
  grid-column-start: 4;
}

.form-col-end-13 {
  grid-column-end: 13;
}

.form-col-end-12 {
  grid-column-end: 12;
}

.form-col-end-11 {
  grid-column-end: 11;
}

.form-col-end-10 {
  grid-column-end: 10;
}

.form-align-start {
  align-items: start;
}

.form-align-center {
  align-items: center;
}

.form-align-end {
  align-items: end;
}

.form-align-stretch {
  align-items: stretch;
}

.form-justify-start {
  justify-items: start;
}

.form-justify-center {
  justify-items: center;
}

.form-justify-end {
  justify-items: end;
}

.form-justify-stretch {
  justify-items: stretch;
}

.form-grid-dense {
  gap: 0.5rem;
}
.form-grid-dense .form-field {
  margin-bottom: 0.75rem;
}
.form-grid-dense .form-label {
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
}
.form-grid-dense .form-input,
.form-grid-dense .form-select,
.form-grid-dense .form-textarea {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
}

@media (max-width: 767px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .form-col-1,
  .form-col-2,
  .form-col-3,
  .form-col-4,
  .form-col-5,
  .form-col-6,
  .form-col-7,
  .form-col-8,
  .form-col-9,
  .form-col-10,
  .form-col-11,
  .form-col-12 {
    grid-column: span 1;
  }
  .form-grid-2,
  .form-grid-3,
  .form-grid-4,
  .form-grid-5,
  .form-grid-6 {
    grid-template-columns: 1fr;
  }
  .form-row {
    flex-direction: column;
  }
}
/*
============================================
Form Validation Component
============================================
Form validation states and feedback messages

Base Classes: .is-valid, .is-invalid, .form-error
Variants: Success, error, warning states

Usage:
<input class="form-input is-invalid">
<div class="form-error">Please enter a valid email</div>

Combine with utilities:
- Colors: text-*, border-*
- Icons: icon-*
- Spacing: m-*, p-*
============================================
*/
.is-valid {
  border-color: #10b981 !important;
}
.is-valid:focus {
  border-color: #047857 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  padding-right: 2.5rem;
}

.is-invalid {
  border-color: #ef4444 !important;
}
.is-invalid:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ef4444'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  padding-right: 2.5rem;
}

.is-warning {
  border-color: #f59e0b !important;
}
.is-warning:focus {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

.form-input.is-warning,
.form-select.is-warning,
.form-textarea.is-warning {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f59e0b'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  padding-right: 2.5rem;
}

.form-feedback, .form-info,
.info-feedback, .form-warning,
.warning-feedback, .form-error,
.invalid-feedback, .form-success,
.valid-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-success,
.valid-feedback {
  color: #047857;
}

.form-error,
.invalid-feedback {
  color: #dc2626;
}

.form-warning,
.warning-feedback {
  color: #d97706;
}

.form-info,
.info-feedback {
  color: #2563eb;
}

.form-feedback-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.form-feedback-icon i, .form-feedback-icon svg {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
}
.form-feedback-icon .feedback-text {
  flex: 1 1 auto;
}
.form-feedback-icon.success {
  color: #047857;
}
.form-feedback-icon.success i, .form-feedback-icon.success svg {
  color: #10b981;
}
.form-feedback-icon.error {
  color: #dc2626;
}
.form-feedback-icon.error i, .form-feedback-icon.error svg {
  color: #ef4444;
}
.form-feedback-icon.warning {
  color: #d97706;
}
.form-feedback-icon.warning i, .form-feedback-icon.warning svg {
  color: #f59e0b;
}
.form-feedback-icon.info {
  color: #2563eb;
}
.form-feedback-icon.info i, .form-feedback-icon.info svg {
  color: #3b82f6;
}

.form-tooltip {
  position: relative;
}
.form-tooltip .tooltip-feedback {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  display: none;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: white;
  background-color: var(--text-color, #374151);
  border-radius: 0.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.form-tooltip .tooltip-feedback::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 1rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--text-color, #374151);
}
.form-tooltip.is-invalid .tooltip-feedback, .form-tooltip.is-valid .tooltip-feedback, .form-tooltip.is-warning .tooltip-feedback {
  display: block;
}
.form-tooltip.is-invalid .tooltip-feedback {
  background-color: #ef4444;
}
.form-tooltip.is-invalid .tooltip-feedback::before {
  border-bottom-color: #ef4444;
}
.form-tooltip.is-valid .tooltip-feedback {
  background-color: #10b981;
}
.form-tooltip.is-valid .tooltip-feedback::before {
  border-bottom-color: #10b981;
}
.form-tooltip.is-warning .tooltip-feedback {
  background-color: #f59e0b;
}
.form-tooltip.is-warning .tooltip-feedback::before {
  border-bottom-color: #f59e0b;
}

.form-required {
  color: #ef4444;
  margin-left: 0.25rem;
}

.form-optional {
  color: var(--text-color, #6b7280);
  font-size: 0.8125rem;
  font-weight: 400;
  margin-left: 0.5rem;
}

.form-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
}
.form-counter .counter-text {
  flex: 1 1 auto;
}
.form-counter .counter-count {
  flex: 0 0 auto;
  margin-left: 1rem;
}
.form-counter .counter-count.at-limit {
  color: #f59e0b;
}
.form-counter .counter-count.over-limit {
  color: #ef4444;
  font-weight: 600;
}

.form-inline-validation {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.form-inline-validation .form-input,
.form-inline-validation .form-select {
  flex: 1 1 auto;
}
.form-inline-validation .validation-icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.5rem;
}
.form-inline-validation .validation-icon.success {
  color: #10b981;
}
.form-inline-validation .validation-icon.error {
  color: #ef4444;
}
.form-inline-validation .validation-icon.warning {
  color: #f59e0b;
}

.form-live-validation {
  position: relative;
}
.form-live-validation .validation-status {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.form-live-validation .validation-status.show {
  opacity: 1;
}
.form-live-validation .validation-status.checking {
  animation: validation-spin 0.6s linear infinite;
}
.form-live-validation .form-input,
.form-live-validation .form-select {
  padding-right: 2.5rem;
}

@keyframes validation-spin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}
.form-alert {
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
}
.form-alert.alert-success {
  background-color: #d1fae5;
  border-color: #10b981;
  color: #047857;
}
.form-alert.alert-error {
  background-color: #fee2e2;
  border-color: #ef4444;
  color: #dc2626;
}
.form-alert.alert-warning {
  background-color: #fef3c7;
  border-color: #f59e0b;
  color: #d97706;
}
.form-alert.alert-info {
  background-color: #dbeafe;
  border-color: #3b82f6;
  color: #2563eb;
}
.form-alert .alert-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.form-alert .alert-list {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
}
.form-alert .alert-list li {
  margin-bottom: 0.25rem;
}

.password-strength {
  margin-top: 0.5rem;
}
.password-strength .strength-bar {
  height: 4px;
  background-color: var(--background-color, #e5e7eb);
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.password-strength .strength-bar .strength-fill {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.password-strength .strength-bar .strength-fill.weak {
  width: 33%;
  background-color: #ef4444;
}
.password-strength .strength-bar .strength-fill.medium {
  width: 66%;
  background-color: #f59e0b;
}
.password-strength .strength-bar .strength-fill.strong {
  width: 100%;
  background-color: #10b981;
}
.password-strength .strength-text {
  font-size: 0.8125rem;
  color: var(--text-color, #6b7280);
}
.password-strength .strength-text.weak {
  color: #ef4444;
}
.password-strength .strength-text.medium {
  color: #f59e0b;
}
.password-strength .strength-text.strong {
  color: #10b981;
}

@media (max-width: 767px) {
  .form-input.is-valid,
  .form-input.is-invalid,
  .form-input.is-warning,
  .form-select.is-valid,
  .form-select.is-invalid,
  .form-select.is-warning {
    background-size: 1rem 1rem;
    padding-right: 2.25rem;
  }
  .form-counter {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  .form-counter .counter-count {
    margin-left: 0;
  }
  .tooltip-feedback {
    max-width: 90vw;
  }
}
/*
============================================
Form Groups Component
============================================
Input groups with addons, prepend/append elements

Base Classes: .input-group, .input-addon
Variants: Text addons, button addons, icon addons

Usage:
<div class="input-group">
    <span class="input-addon">$</span>
    <input type="text" class="form-input">
    <button class="input-addon-btn">Go</button>
</div>

Combine with utilities:
- Colors: bg-*, text-*, border-*
- Spacing: m-*, p-*
- Buttons: btn-*
============================================
*/
.input-group {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
}
.input-group .form-input,
.input-group .form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin: 0;
}
.input-group > :not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group > :first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > * + * {
  margin-left: -1px;
}

.input-addon {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-color, #6b7280);
  text-align: center;
  white-space: nowrap;
  background-color: var(--background-color, #f3f4f6);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
}
.input-addon i, .input-addon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.input-addon-sm {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
}

.input-addon-lg {
  padding: 0.625rem 1rem;
  font-size: 1.125rem;
}

.input-addon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-color, #374151);
  text-align: center;
  white-space: nowrap;
  background-color: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.input-addon-btn:hover {
  background-color: var(--background-color, #f9fafb);
  color: var(--primary-color, #007acc);
}
.input-addon-btn:focus {
  outline: none;
  border-color: var(--primary-color, #007acc);
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
  z-index: 2;
}
.input-addon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.input-group-prepend {
  margin-right: -1px;
}

.input-group-append {
  margin-left: -1px;
}

.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-prepend > .input-addon:not(:first-child),
.input-group-append > .input-addon:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}
.input-group-prepend > .input-addon:not(:last-child),
.input-group-append > .input-addon:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-check {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: var(--background-color, #f3f4f6);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
}
.input-group-check input[type=checkbox],
.input-group-check input[type=radio] {
  margin: 0;
}

.input-group-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.input-group-dropdown .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--background-color, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.input-group-dropdown .dropdown-toggle:hover {
  background-color: var(--background-color, #f9fafb);
}
.input-group-dropdown .dropdown-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
}

.input-group-stacked {
  flex-direction: column;
  align-items: stretch;
}
.input-group-stacked > * {
  width: 100%;
  border-radius: 0.25rem;
}
.input-group-stacked > :not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group-stacked > :first-child:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group-stacked > :last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.input-group-stacked > * + * {
  margin-left: 0;
  margin-top: -1px;
}

.input-floating {
  position: relative;
  display: block;
}
.input-floating .form-input,
.input-floating .form-select,
.input-floating .form-textarea {
  padding: 1rem 0.75rem 0.375rem;
  height: auto;
}
.input-floating .form-input::placeholder,
.input-floating .form-select::placeholder,
.input-floating .form-textarea::placeholder {
  color: transparent;
}
.input-floating .form-input:focus::placeholder,
.input-floating .form-select:focus::placeholder,
.input-floating .form-textarea:focus::placeholder {
  color: var(--text-color, #9ca3af);
}
.input-floating .floating-label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem 0.75rem;
  font-size: 1rem;
  color: var(--text-color, #6b7280);
  pointer-events: none;
  transition: all 0.15s ease;
  transform-origin: left top;
}
.input-floating .form-input:focus ~ .floating-label,
.input-floating .form-input:not(:placeholder-shown) ~ .floating-label,
.input-floating .form-select:focus ~ .floating-label,
.input-floating .form-select:not([value=""]) ~ .floating-label,
.input-floating .form-textarea:focus ~ .floating-label,
.input-floating .form-textarea:not(:placeholder-shown) ~ .floating-label {
  transform: scale(0.75) translateY(-0.5rem);
  color: var(--primary-color, #007acc);
}

.input-group .form-input.is-invalid,
.input-group .form-select.is-invalid {
  z-index: 1;
}
.input-group .form-input.is-invalid:focus,
.input-group .form-select.is-invalid:focus {
  z-index: 2;
}
.input-group .form-input.is-valid,
.input-group .form-select.is-valid {
  z-index: 1;
}
.input-group .form-input.is-valid:focus,
.input-group .form-select.is-valid:focus {
  z-index: 2;
}

.input-group-merged .form-input:not(:first-child),
.input-group-merged .form-select:not(:first-child) {
  padding-left: 2.5rem;
}
.input-group-merged .form-input:not(:last-child),
.input-group-merged .form-select:not(:last-child) {
  padding-right: 2.5rem;
}
.input-group-merged .input-addon {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  background: transparent;
  border: none;
  z-index: 1;
}
.input-group-merged .input-addon:first-child {
  left: 0;
}
.input-group-merged .input-addon:last-child {
  right: 0;
}

.input-group-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.25rem;
  min-height: 2.5rem;
}
.input-group-tags .tag-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background-color: var(--background-color, #f3f4f6);
  border-radius: 0.25rem;
  font-size: 0.875rem;
}
.input-group-tags .tag-item .tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color, #6b7280);
  transition: color 0.15s ease;
}
.input-group-tags .tag-item .tag-remove:hover {
  color: var(--text-color, #374151);
}
.input-group-tags .tag-input {
  flex: 1 1 auto;
  min-width: 120px;
  border: none;
  outline: none;
  padding: 0.25rem 0.5rem;
  background: transparent;
}
.input-group-tags:focus-within {
  border-color: var(--primary-color, #007acc);
  box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
}

@media (max-width: 767px) {
  .input-group {
    flex-wrap: wrap;
  }
  .input-group .form-input,
  .input-group .form-select {
    width: 100%;
  }
  .input-group:not(.input-group-stacked) > * {
    border-radius: 0.25rem;
    margin: 0 0 -1px 0;
  }
  .input-group:not(.input-group-stacked) > :not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .input-group:not(.input-group-stacked) > :not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .input-floating .form-input,
  .input-floating .form-select,
  .input-floating .form-textarea {
    font-size: 0.875rem;
  }
  .input-floating .floating-label {
    font-size: 0.875rem;
  }
  .input-group-tags .tag-input {
    min-width: 100px;
    font-size: 0.875rem;
  }
}
/*
============================================
Tables Component Index
============================================
Barrel file for all table component imports
============================================
*/
/*
============================================
Specs Table Component
============================================
Data table for product specifications with
controlled column widths and clean layout.

Base Class: .specs-table
Structure:
- First column: auto-width labels
- Second column: fills remaining space

Usage:
<table class="specs-table w-full">
    <tbody>
        <tr>
            <td class="text-dark font-size-3 p-y-2">Label</td>
            <td class="text-dark font-size-3 font-w-600 p-y-2">Value</td>
        </tr>
    </tbody>
</table>

Features:
- First column constrains to content width
- Second column expands to fill space
- No borders by default
- Responsive padding
============================================
*/
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
.specs-table tbody tr {
  border: none;
}
.specs-table tbody tr td:first-child {
  width: auto;
  white-space: nowrap;
  padding-right: 2rem;
}
.specs-table tbody tr td:last-child {
  width: 100%;
  text-align: left;
}
.specs-table tbody tr td {
  margin: 0;
  border: none;
}

/*
============================================
Lightbox Component
============================================
Modal image/video lightbox overlay

Base Classes: .lightbox, .lightbox-overlay
Variants: .lightbox-gallery, .lightbox-video

Usage:
<div class="lightbox">
    <div class="lightbox-overlay"></div>
    <div class="lightbox-content">
        <img src="image.jpg" alt="Image">
    </div>
</div>

Combine with utilities:
- Display: flex-*, grid-*
- Position: fixed, z-*
- Animation: fade-*, slide-*
============================================
*/
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lightbox.active, .lightbox.show {
  display: flex;
}
.lightbox.active {
  animation: lightbox-fade-in 0.3s ease;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: pointer;
  z-index: 1;
}

.lightbox-overlay-light {
  background: rgba(0, 0, 0, 0.7);
}

.lightbox-overlay-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.6);
}

.lightbox-content {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.lightbox-content video {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 0.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.5rem;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}
.lightbox-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.lightbox-close::before {
  content: "×";
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.5rem;
}
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
.lightbox-nav:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.lightbox-nav.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.lightbox-prev {
  left: 1rem;
}
.lightbox-prev::before {
  content: "‹";
}

.lightbox-next {
  right: 1rem;
}
.lightbox-next::before {
  content: "›";
}

.lightbox-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
}
.lightbox-caption .caption-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.lightbox-caption .caption-description {
  opacity: 0.9;
}

.lightbox-counter {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.lightbox-gallery .lightbox-thumbnails {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  max-width: 90vw;
  overflow-x: auto;
}
.lightbox-gallery .lightbox-thumbnails::-webkit-scrollbar {
  height: 4px;
}
.lightbox-gallery .lightbox-thumbnails::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
}
.lightbox-gallery .lightbox-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}
.lightbox-gallery .lightbox-thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0.25rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  border: 2px solid transparent;
}
.lightbox-gallery .lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
}
.lightbox-gallery .lightbox-thumb:hover {
  opacity: 0.9;
}
.lightbox-gallery .lightbox-thumb.active {
  opacity: 1;
  border-color: white;
}

.lightbox-video .lightbox-content {
  max-width: 1200px;
}
.lightbox-video .lightbox-content iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 0.25rem;
}

.lightbox-zoom {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
  border-radius: 9999px;
}
.lightbox-zoom button {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  transition: background 0.2s ease;
  border-radius: 50%;
}
.lightbox-zoom button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.lightbox-zoom button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}
.lightbox-zoom .zoom-in::before {
  content: "+";
  font-size: 1.25rem;
}
.lightbox-zoom .zoom-out::before {
  content: "−";
  font-size: 1.25rem;
}
.lightbox-zoom .zoom-reset::before {
  content: "⊙";
  font-size: 1rem;
}

.lightbox-zoomable .lightbox-content img {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.lightbox-zoomable .lightbox-content img.zoomed {
  cursor: zoom-out;
  transform: scale(2);
}

.lightbox-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  border-radius: 50%;
  animation: lightbox-spin 0.8s linear infinite;
}

@keyframes lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lightbox-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes lightbox-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.lightbox-content.zoom-animation {
  animation: lightbox-zoom-in 0.3s ease;
}

.lightbox-slide-left {
  animation: lightbox-slide-left 0.3s ease;
}

.lightbox-slide-right {
  animation: lightbox-slide-right 0.3s ease;
}

@keyframes lightbox-slide-left {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes lightbox-slide-right {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (max-width: 767px) {
  .lightbox {
    padding: 0.5rem;
  }
  .lightbox-content {
    max-width: 95vw;
    max-height: 80vh;
  }
  .lightbox-content img,
  .lightbox-content video {
    max-height: 80vh;
  }
  .lightbox-close {
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
  }
  .lightbox-nav {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
  }
  .lightbox-prev {
    left: 0.5rem;
  }
  .lightbox-next {
    right: 0.5rem;
  }
  .lightbox-caption {
    padding: 1rem;
    font-size: 0.8125rem;
  }
  .lightbox-caption .caption-title {
    font-size: 0.875rem;
  }
  .lightbox-counter {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }
  .lightbox-gallery .lightbox-thumbnails {
    bottom: 0.5rem;
    gap: 0.375rem;
    padding: 0.5rem;
  }
  .lightbox-gallery .lightbox-thumb {
    width: 50px;
    height: 50px;
  }
  .lightbox-zoom {
    top: auto;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .lightbox-zoom button {
    width: 1.75rem;
    height: 1.75rem;
  }
}
@media print {
  .lightbox {
    display: none !important;
  }
}
.lightbox:focus-within .lightbox-close:focus,
.lightbox:focus-within .lightbox-nav:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

.lightbox[data-keyboard=true] .lightbox-caption::after {
  content: "Use ← → keys to navigate";
  display: block;
  margin-top: 0.5rem;
  opacity: 0.7;
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-content,
  .lightbox-slide-left,
  .lightbox-slide-right {
    animation: none !important;
  }
  .lightbox-close:hover {
    transform: none;
  }
}
/*
============================================
Scrolling Text Component
============================================
Animated scrolling and marquee text effects

Base Classes: .scroll-text, .marquee
Variants: .scroll-horizontal, .scroll-vertical

Usage:
<div class="scroll-text">
    <div class="scroll-content">Your scrolling text here</div>
</div>

Combine with utilities:
- Typography: text-*, font-*
- Colors: text-*, bg-*
- Spacing: p-*, m-*
============================================
*/
.scroll-text,
.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}
.scroll-text .scroll-content,
.marquee .scroll-content {
  display: inline-block;
  padding-left: 100%;
  animation: scroll-horizontal 20s linear infinite;
}
.scroll-text:hover .scroll-content,
.marquee:hover .scroll-content {
  animation-play-state: paused;
}

@keyframes scroll-horizontal {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.scroll-slow .scroll-content {
  animation-duration: 40s;
}

.scroll-normal .scroll-content {
  animation-duration: 20s;
}

.scroll-fast .scroll-content {
  animation-duration: 10s;
}

.scroll-ultra-fast .scroll-content {
  animation-duration: 5s;
}

.scroll-reverse .scroll-content {
  animation-name: scroll-horizontal-reverse;
}

@keyframes scroll-horizontal-reverse {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.scroll-vertical {
  height: 300px;
  overflow: hidden;
  white-space: normal;
}
.scroll-vertical .scroll-content {
  display: block;
  padding-left: 0;
  padding-top: 100%;
  animation: scroll-vertical 20s linear infinite;
}
.scroll-vertical:hover .scroll-content {
  animation-play-state: paused;
}

@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
.scroll-vertical-reverse .scroll-content {
  animation-name: scroll-vertical-reverse;
}

@keyframes scroll-vertical-reverse {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.scroll-seamless .scroll-content {
  animation: scroll-seamless 20s linear infinite;
}
.scroll-seamless .scroll-content::after {
  content: attr(data-text);
  padding-left: 2rem;
}

@keyframes scroll-seamless {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.ticker {
  background: var(--background-color, #111827);
  color: white;
  padding: 0.75rem 0;
  overflow: hidden;
}
.ticker .ticker-content {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  animation: scroll-horizontal 30s linear infinite;
}
.ticker .ticker-content .ticker-item {
  display: inline-block;
  padding: 0 2rem;
  position: relative;
}
.ticker .ticker-content .ticker-item::after {
  content: "•";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}
.ticker .ticker-content .ticker-item:last-child::after {
  display: none;
}
.ticker:hover .ticker-content {
  animation-play-state: paused;
}

.typing-text {
  overflow: hidden;
  border-right: 2px solid;
  white-space: nowrap;
  width: 0;
  animation: typing 4s steps(40, end) forwards, blink 0.75s step-end infinite;
}
.typing-text.typing-complete {
  border-right: none;
  animation: none;
  width: auto;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes blink {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: currentColor;
  }
}
.scroll-fade {
  position: relative;
  overflow: hidden;
}
.scroll-fade::before, .scroll-fade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 1;
  pointer-events: none;
}
.scroll-fade::before {
  left: 0;
  background: linear-gradient(to right, var(--background-color, white), transparent);
}
.scroll-fade::after {
  right: 0;
  background: linear-gradient(to left, var(--background-color, white), transparent);
}
.scroll-fade.scroll-vertical::before, .scroll-fade.scroll-vertical::after {
  width: auto;
  left: 0;
  right: 0;
  height: 50px;
}
.scroll-fade.scroll-vertical::before {
  top: 0;
  bottom: auto;
  background: linear-gradient(to bottom, var(--background-color, white), transparent);
}
.scroll-fade.scroll-vertical::after {
  top: auto;
  bottom: 0;
  background: linear-gradient(to top, var(--background-color, white), transparent);
}

.text-bounce {
  animation: text-bounce 2s ease-in-out infinite;
}

@keyframes text-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.text-wave {
  display: inline-block;
}
.text-wave span {
  display: inline-block;
  animation: text-wave 1.5s ease-in-out infinite;
}
.text-wave span:nth-child(1) {
  animation-delay: 0.1s;
}
.text-wave span:nth-child(2) {
  animation-delay: 0.2s;
}
.text-wave span:nth-child(3) {
  animation-delay: 0.3s;
}
.text-wave span:nth-child(4) {
  animation-delay: 0.4s;
}
.text-wave span:nth-child(5) {
  animation-delay: 0.5s;
}
.text-wave span:nth-child(6) {
  animation-delay: 0.6s;
}
.text-wave span:nth-child(7) {
  animation-delay: 0.7s;
}
.text-wave span:nth-child(8) {
  animation-delay: 0.8s;
}
.text-wave span:nth-child(9) {
  animation-delay: 0.9s;
}
.text-wave span:nth-child(10) {
  animation-delay: 1s;
}
.text-wave span:nth-child(11) {
  animation-delay: 1.1s;
}
.text-wave span:nth-child(12) {
  animation-delay: 1.2s;
}
.text-wave span:nth-child(13) {
  animation-delay: 1.3s;
}
.text-wave span:nth-child(14) {
  animation-delay: 1.4s;
}
.text-wave span:nth-child(15) {
  animation-delay: 1.5s;
}
.text-wave span:nth-child(16) {
  animation-delay: 1.6s;
}
.text-wave span:nth-child(17) {
  animation-delay: 1.7s;
}
.text-wave span:nth-child(18) {
  animation-delay: 1.8s;
}
.text-wave span:nth-child(19) {
  animation-delay: 1.9s;
}
.text-wave span:nth-child(20) {
  animation-delay: 2s;
}

@keyframes text-wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.text-glitch {
  position: relative;
  animation: text-glitch-skew 1s ease-in-out infinite alternate;
}
.text-glitch::before, .text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.text-glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00de;
  clip: rect(24px, 550px, 90px, 0);
  animation: text-glitch-anim 3s infinite linear alternate-reverse;
}
.text-glitch::after {
  left: -2px;
  text-shadow: 2px 0 #00ffff;
  clip: rect(85px, 550px, 140px, 0);
  animation: text-glitch-anim 2s infinite linear alternate-reverse;
}

@keyframes text-glitch-anim {
  0% {
    clip: rect(31px, 9999px, 94px, 0);
  }
  25% {
    clip: rect(70px, 9999px, 71px, 0);
  }
  50% {
    clip: rect(90px, 9999px, 29px, 0);
  }
  75% {
    clip: rect(65px, 9999px, 85px, 0);
  }
  100% {
    clip: rect(27px, 9999px, 88px, 0);
  }
}
@keyframes text-glitch-skew {
  0% {
    transform: skew(0deg);
  }
  10% {
    transform: skew(2deg);
  }
  20% {
    transform: skew(-2deg);
  }
  30% {
    transform: skew(1deg);
  }
  40% {
    transform: skew(-1deg);
  }
  50% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}
.text-reveal {
  position: relative;
  overflow: hidden;
}
.text-reveal .reveal-content {
  display: inline-block;
  animation: text-reveal 0.8s ease-out forwards;
}

@keyframes text-reveal {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.text-gradient-animate {
  background: linear-gradient(90deg, var(--primary-color, #007acc), var(--accent-color, #28a745), var(--primary-color, #007acc));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-gradient-shift 3s linear infinite;
}

@keyframes text-gradient-shift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}
.text-fade-in {
  animation: text-fade-in 1s ease-in forwards;
}

.text-fade-out {
  animation: text-fade-out 1s ease-out forwards;
}

@keyframes text-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes text-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.text-scale-in {
  animation: text-scale-in 0.5s ease-out forwards;
}

@keyframes text-scale-in {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.text-rotate-in {
  animation: text-rotate-in 0.6s ease-out forwards;
}

@keyframes text-rotate-in {
  from {
    transform: rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: rotate(0);
    opacity: 1;
  }
}
@media (max-width: 767px) {
  .scroll-text .scroll-content,
  .marquee .scroll-content {
    animation-duration: 15s;
  }
  .ticker {
    padding: 0.5rem 0;
    font-size: 0.875rem;
  }
  .ticker .ticker-item {
    padding: 0 1rem;
  }
  .scroll-vertical {
    height: 200px;
  }
  .scroll-fade::before,
  .scroll-fade::after {
    width: 50px;
  }
  .scroll-fade.scroll-vertical::before,
  .scroll-fade.scroll-vertical::after {
    height: 30px;
  }
  .text-wave span:nth-child(1) {
    animation-delay: 0.05s;
  }
  .text-wave span:nth-child(2) {
    animation-delay: 0.1s;
  }
  .text-wave span:nth-child(3) {
    animation-delay: 0.15s;
  }
  .text-wave span:nth-child(4) {
    animation-delay: 0.2s;
  }
  .text-wave span:nth-child(5) {
    animation-delay: 0.25s;
  }
  .text-wave span:nth-child(6) {
    animation-delay: 0.3s;
  }
  .text-wave span:nth-child(7) {
    animation-delay: 0.35s;
  }
  .text-wave span:nth-child(8) {
    animation-delay: 0.4s;
  }
  .text-wave span:nth-child(9) {
    animation-delay: 0.45s;
  }
  .text-wave span:nth-child(10) {
    animation-delay: 0.5s;
  }
  .text-wave span:nth-child(11) {
    animation-delay: 0.55s;
  }
  .text-wave span:nth-child(12) {
    animation-delay: 0.6s;
  }
  .text-wave span:nth-child(13) {
    animation-delay: 0.65s;
  }
  .text-wave span:nth-child(14) {
    animation-delay: 0.7s;
  }
  .text-wave span:nth-child(15) {
    animation-delay: 0.75s;
  }
  .text-wave span:nth-child(16) {
    animation-delay: 0.8s;
  }
  .text-wave span:nth-child(17) {
    animation-delay: 0.85s;
  }
  .text-wave span:nth-child(18) {
    animation-delay: 0.9s;
  }
  .text-wave span:nth-child(19) {
    animation-delay: 0.95s;
  }
  .text-wave span:nth-child(20) {
    animation-delay: 1s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-text .scroll-content,
  .marquee .scroll-content,
  .ticker .ticker-content,
  .scroll-vertical .scroll-content,
  .typing-text,
  .text-bounce,
  .text-wave span,
  .text-glitch,
  .text-gradient-animate,
  .text-fade-in,
  .text-fade-out,
  .text-scale-in,
  .text-rotate-in {
    animation: none !important;
  }
  .typing-text {
    border-right: none;
    width: auto;
  }
  .scroll-text .scroll-content,
  .marquee .scroll-content {
    padding-left: 0;
    transform: none;
  }
}
@media print {
  .scroll-text,
  .marquee,
  .ticker,
  .typing-text,
  .text-bounce,
  .text-wave,
  .text-glitch {
    animation: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .scroll-text .scroll-content,
  .marquee .scroll-content {
    padding-left: 0;
    transform: none;
  }
}
/*
============================================
Preloader Component
============================================
Loading spinners and preloader animations

Base Classes: .preloader, .spinner
Variants: .spinner-*, .loader-*

Usage:
<div class="preloader">
    <div class="spinner"></div>
</div>

Combine with utilities:
- Position: fixed, absolute
- Colors: text-*, border-*
- Size: w-*, h-*
============================================
*/
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-color, #ffffff);
}
.preloader.preloader-transparent {
  background: rgba(255, 255, 255, 0.9);
}
.preloader.preloader-dark {
  background: rgba(0, 0, 0, 0.8);
}
.preloader.preloader-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.7);
}
.preloader.loaded {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--border-color, #e5e7eb);
  border-top-color: var(--primary-color, #007acc);
  border-radius: 50%;
  animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spinner-sm {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

.spinner-md {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 3px;
}

.spinner-lg {
  width: 4rem;
  height: 4rem;
  border-width: 4px;
}

.spinner-xl {
  width: 5rem;
  height: 5rem;
  border-width: 5px;
}

.spinner-dual {
  width: 3rem;
  height: 3rem;
  position: relative;
}
.spinner-dual::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 3px solid var(--primary-color, #007acc);
  border-color: var(--primary-color, #007acc) transparent var(--primary-color, #007acc) transparent;
  animation: spinner-dual 1.2s linear infinite;
}

@keyframes spinner-dual {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.spinner-dots {
  display: flex;
  gap: 0.5rem;
}
.spinner-dots .dot {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--primary-color, #007acc);
  border-radius: 50%;
  animation: spinner-dots-bounce 1.4s ease-in-out infinite;
}
.spinner-dots .dot:nth-child(1) {
  animation-delay: -0.32s;
}
.spinner-dots .dot:nth-child(2) {
  animation-delay: -0.16s;
}
.spinner-dots .dot:nth-child(3) {
  animation-delay: 0;
}

@keyframes spinner-dots-bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}
.spinner-pulse {
  width: 3rem;
  height: 3rem;
  background: var(--primary-color, #007acc);
  border-radius: 50%;
  animation: spinner-pulse 1.2s ease-in-out infinite;
}

@keyframes spinner-pulse {
  0%, 100% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.5;
  }
}
.spinner-ripple {
  width: 3rem;
  height: 3rem;
  position: relative;
}
.spinner-ripple .ripple {
  position: absolute;
  border: 3px solid var(--primary-color, #007acc);
  border-radius: 50%;
  animation: spinner-ripple 1.5s ease-out infinite;
}
.spinner-ripple .ripple:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes spinner-ripple {
  0% {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.spinner-bars {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  height: 2rem;
}
.spinner-bars .bar {
  width: 0.25rem;
  height: 100%;
  background: var(--primary-color, #007acc);
  animation: spinner-bars 1.2s ease-in-out infinite;
}
.spinner-bars .bar:nth-child(1) {
  animation-delay: -1.08s;
}
.spinner-bars .bar:nth-child(2) {
  animation-delay: -0.96s;
}
.spinner-bars .bar:nth-child(3) {
  animation-delay: -0.84s;
}
.spinner-bars .bar:nth-child(4) {
  animation-delay: -0.72s;
}
.spinner-bars .bar:nth-child(5) {
  animation-delay: -0.6s;
}

@keyframes spinner-bars {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}
.spinner-circle {
  width: 3rem;
  height: 3rem;
  position: relative;
}
.spinner-circle .circle-dot {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--primary-color, #007acc);
  border-radius: 50%;
  animation: spinner-circle 1.2s linear infinite;
}
.spinner-circle .circle-dot:nth-child(1) {
  transform: rotate(45deg) translateY(-1.25rem);
  animation-delay: -1.05s;
}
.spinner-circle .circle-dot:nth-child(2) {
  transform: rotate(90deg) translateY(-1.25rem);
  animation-delay: -0.9s;
}
.spinner-circle .circle-dot:nth-child(3) {
  transform: rotate(135deg) translateY(-1.25rem);
  animation-delay: -0.75s;
}
.spinner-circle .circle-dot:nth-child(4) {
  transform: rotate(180deg) translateY(-1.25rem);
  animation-delay: -0.6s;
}
.spinner-circle .circle-dot:nth-child(5) {
  transform: rotate(225deg) translateY(-1.25rem);
  animation-delay: -0.45s;
}
.spinner-circle .circle-dot:nth-child(6) {
  transform: rotate(270deg) translateY(-1.25rem);
  animation-delay: -0.3s;
}
.spinner-circle .circle-dot:nth-child(7) {
  transform: rotate(315deg) translateY(-1.25rem);
  animation-delay: -0.15s;
}
.spinner-circle .circle-dot:nth-child(8) {
  transform: rotate(360deg) translateY(-1.25rem);
  animation-delay: 0s;
}

@keyframes spinner-circle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.spinner-ellipsis {
  display: inline-block;
  position: relative;
  width: 5rem;
  height: 1rem;
}
.spinner-ellipsis div {
  position: absolute;
  top: 0.375rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--primary-color, #007acc);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.spinner-ellipsis div:nth-child(1) {
  left: 0.5rem;
  animation: spinner-ellipsis1 0.6s infinite;
}
.spinner-ellipsis div:nth-child(2) {
  left: 0.5rem;
  animation: spinner-ellipsis2 0.6s infinite;
}
.spinner-ellipsis div:nth-child(3) {
  left: 2rem;
  animation: spinner-ellipsis2 0.6s infinite;
}
.spinner-ellipsis div:nth-child(4) {
  left: 3.5rem;
  animation: spinner-ellipsis3 0.6s infinite;
}

@keyframes spinner-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spinner-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(1.5rem, 0);
  }
}
@keyframes spinner-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
.spinner-hourglass {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary-color, #007acc);
  border-bottom-color: var(--primary-color, #007acc);
  animation: spinner-hourglass 1.2s ease-in-out infinite;
}

@keyframes spinner-hourglass {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-bar {
  width: 100%;
  max-width: 300px;
  height: 4px;
  background: var(--border-color, #e5e7eb);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}
.loader-bar .loader-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--primary-color, #007acc);
  border-radius: 9999px;
  animation: loader-bar 2s ease-in-out infinite;
}

@keyframes loader-bar {
  0% {
    width: 0%;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
.skeleton-loader {
  background: linear-gradient(90deg, var(--background-color, #f3f4f6) 25%, var(--border-color, #e5e7eb) 50%, var(--background-color, #f3f4f6) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 0.25rem;
}
.skeleton-loader.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}
.skeleton-loader.skeleton-text:last-child {
  width: 80%;
}
.skeleton-loader.skeleton-title {
  height: 1.5rem;
  width: 60%;
  margin-bottom: 1rem;
}
.skeleton-loader.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.skeleton-loader.skeleton-card {
  height: 200px;
  border-radius: 0.5rem;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.loading-text {
  font-size: 1rem;
  color: var(--text-color, #6b7280);
  margin-top: 1rem;
  text-align: center;
}
.loading-text::after {
  content: "";
  animation: loading-text-dots 1.5s steps(3, end) infinite;
}

@keyframes loading-text-dots {
  0%, 20% {
    content: "";
  }
  40% {
    content: ".";
  }
  60% {
    content: "..";
  }
  80%, 100% {
    content: "...";
  }
}
.loader-percentage {
  text-align: center;
}
.loader-percentage .percentage-circle {
  width: 5rem;
  height: 5rem;
  position: relative;
  margin: 0 auto 1rem;
}
.loader-percentage .percentage-circle svg {
  transform: rotate(-90deg);
}
.loader-percentage .percentage-circle circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.loader-percentage .percentage-circle circle.bg {
  stroke: var(--border-color, #e5e7eb);
}
.loader-percentage .percentage-circle circle.progress {
  stroke: var(--primary-color, #007acc);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.3s ease;
}
.loader-percentage .percentage-circle .percentage-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-color, #111827);
}

@media (max-width: 767px) {
  .spinner,
  .spinner-md {
    width: 2rem;
    height: 2rem;
    border-width: 2px;
  }
  .spinner-dual::after {
    width: 2rem;
    height: 2rem;
    border-width: 2px;
  }
  .spinner-dots .dot {
    width: 0.625rem;
    height: 0.625rem;
  }
  .loader-bar {
    max-width: 200px;
    height: 3px;
  }
  .loader-percentage .percentage-circle {
    width: 4rem;
    height: 4rem;
  }
  .loader-percentage .percentage-circle .percentage-text {
    font-size: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .spinner-dual::after,
  .spinner-dots .dot,
  .spinner-pulse,
  .spinner-ripple .ripple,
  .spinner-bars .bar,
  .spinner-circle .circle-dot,
  .spinner-ellipsis div,
  .spinner-hourglass,
  .loader-bar .loader-progress,
  .skeleton-loader,
  .loading-text::after {
    animation: none !important;
  }
  .spinner,
  .spinner-pulse {
    opacity: 0.5;
  }
}
@media print {
  .preloader {
    display: none !important;
  }
}
/*
============================================
Scrollbar Component
============================================
Custom scrollbar styling and utilities

Base Classes: .scrollbar-*, .scroll-*
Variants: Thin, auto-hide, colored scrollbars

Usage:
<div class="scrollbar-thin">
    Scrollable content here
</div>

Combine with utilities:
- Overflow: overflow-*
- Colors: bg-*, border-*
- Size: w-*, h-*
============================================
*/
.scrollbar-custom::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.scrollbar-custom::-webkit-scrollbar-track {
  background: var(--background-color, #f3f4f6);
  border-radius: 10px;
}
.scrollbar-custom::-webkit-scrollbar-thumb {
  background: var(--border-color, #d1d5db);
  border-radius: 10px;
  border: 2px solid var(--background-color, #f3f4f6);
}
.scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background: var(--text-color, #9ca3af);
}
.scrollbar-custom::-webkit-scrollbar-thumb:active {
  background: var(--text-color, #6b7280);
}
.scrollbar-custom::-webkit-scrollbar-corner {
  background: var(--background-color, #f3f4f6);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--border-color, #d1d5db);
  border-radius: 4px;
  border: none;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--text-color, #9ca3af);
}
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, #d1d5db) transparent;
}

.scrollbar-minimal::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.scrollbar-minimal::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-minimal::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.scrollbar-minimal::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
.scrollbar-minimal {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.scrollbar-autohide::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollbar-autohide::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-autohide::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.scrollbar-autohide:hover::-webkit-scrollbar-thumb {
  background: var(--border-color, #d1d5db);
}
.scrollbar-autohide:hover::-webkit-scrollbar-thumb:hover {
  background: var(--text-color, #9ca3af);
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-primary::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scrollbar-primary::-webkit-scrollbar-track {
  background: var(--background-color, #f3f4f6);
  border-radius: 5px;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
  background: var(--primary-color, #007acc);
  border-radius: 5px;
}
.scrollbar-primary::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color, #0066aa);
}
.scrollbar-primary {
  scrollbar-color: var(--primary-color, #007acc) var(--background-color, #f3f4f6);
}

.scrollbar-dark::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scrollbar-dark::-webkit-scrollbar-track {
  background: var(--darker);
  border-radius: 5px;
}
.scrollbar-dark::-webkit-scrollbar-thumb {
  background: var(--gray-700);
  border-radius: 5px;
}
.scrollbar-dark::-webkit-scrollbar-thumb:hover {
  background: var(--gray-600);
}
.scrollbar-dark {
  scrollbar-color: var(--gray-700) var(--darker);
}

.scrollbar-light::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scrollbar-light::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 5px;
}
.scrollbar-light::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 5px;
}
.scrollbar-light::-webkit-scrollbar-thumb:hover {
  background: #d1d5db;
}
.scrollbar-light {
  scrollbar-color: #e5e7eb #ffffff;
}

.scrollbar-gradient::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scrollbar-gradient::-webkit-scrollbar-track {
  background: var(--background-color, #f3f4f6);
  border-radius: 5px;
}
.scrollbar-gradient::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--primary-color, #007acc), var(--accent-color, #28a745));
  border-radius: 5px;
}
.scrollbar-gradient::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-color, #28a745), var(--primary-color, #007acc));
}

.scrollbar-rounded::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.scrollbar-rounded::-webkit-scrollbar-track {
  background: var(--background-color, #f3f4f6);
  border-radius: 20px;
}
.scrollbar-rounded::-webkit-scrollbar-thumb {
  background: var(--border-color, #d1d5db);
  border-radius: 20px;
  border: 3px solid var(--background-color, #f3f4f6);
}
.scrollbar-rounded::-webkit-scrollbar-thumb:hover {
  background: var(--text-color, #9ca3af);
}

.scrollbar-square::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
.scrollbar-square::-webkit-scrollbar-track {
  background: var(--background-color, #f3f4f6);
  border-radius: 0;
}
.scrollbar-square::-webkit-scrollbar-thumb {
  background: var(--border-color, #d1d5db);
  border-radius: 0;
}
.scrollbar-square::-webkit-scrollbar-thumb:hover {
  background: var(--text-color, #9ca3af);
}

.scrollbar-overlay {
  overflow: overlay;
}
.scrollbar-overlay::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
.scrollbar-overlay::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-overlay::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 7px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.scrollbar-overlay::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
  background-clip: content-box;
}

.scrollbar-horizontal-only {
  overflow-x: auto;
  overflow-y: hidden;
}
.scrollbar-horizontal-only::-webkit-scrollbar {
  height: 8px;
}
.scrollbar-horizontal-only::-webkit-scrollbar-track {
  background: var(--background-color, #f3f4f6);
}
.scrollbar-horizontal-only::-webkit-scrollbar-thumb {
  background: var(--border-color, #d1d5db);
  border-radius: 4px;
}
.scrollbar-horizontal-only::-webkit-scrollbar-thumb:hover {
  background: var(--text-color, #9ca3af);
}

.scrollbar-vertical-only {
  overflow-x: hidden;
  overflow-y: auto;
}
.scrollbar-vertical-only::-webkit-scrollbar {
  width: 8px;
}
.scrollbar-vertical-only::-webkit-scrollbar-track {
  background: var(--background-color, #f3f4f6);
}
.scrollbar-vertical-only::-webkit-scrollbar-thumb {
  background: var(--border-color, #d1d5db);
  border-radius: 4px;
}
.scrollbar-vertical-only::-webkit-scrollbar-thumb:hover {
  background: var(--text-color, #9ca3af);
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.scroll-auto {
  scroll-behavior: auto;
}

.scroll-snap-x {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}
.scroll-snap-x > * {
  scroll-snap-align: start;
}

.scroll-snap-y {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
}
.scroll-snap-y > * {
  scroll-snap-align: start;
}

.scroll-snap-center > * {
  scroll-snap-align: center;
}

.scroll-snap-end > * {
  scroll-snap-align: end;
}

.scroll-p-0 {
  scroll-padding: 0;
}

.scroll-p-1 {
  scroll-padding: 0.25rem;
}

.scroll-p-2 {
  scroll-padding: 0.5rem;
}

.scroll-p-4 {
  scroll-padding: 1rem;
}

.scroll-p-8 {
  scroll-padding: 2rem;
}

.scroll-m-0 {
  scroll-margin: 0;
}

.scroll-m-1 {
  scroll-margin: 0.25rem;
}

.scroll-m-2 {
  scroll-margin: 0.5rem;
}

.scroll-m-4 {
  scroll-margin: 1rem;
}

.scroll-m-8 {
  scroll-margin: 2rem;
}

.scrollbar-progress {
  position: relative;
}
.scrollbar-progress::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--primary-color, #007acc);
  z-index: 9999;
  transition: width 0.1s ease;
}

@media (max-width: 767px) {
  .scrollbar-custom::-webkit-scrollbar,
  .scrollbar-thin::-webkit-scrollbar,
  .scrollbar-primary::-webkit-scrollbar,
  .scrollbar-dark::-webkit-scrollbar,
  .scrollbar-light::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar-custom::-webkit-scrollbar-thumb,
  .scrollbar-thin::-webkit-scrollbar-thumb,
  .scrollbar-primary::-webkit-scrollbar-thumb,
  .scrollbar-dark::-webkit-scrollbar-thumb,
  .scrollbar-light::-webkit-scrollbar-thumb {
    border-width: 1px;
  }
  .scrollbar-rounded::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-rounded::-webkit-scrollbar-thumb {
    border-width: 2px;
  }
  .scrollbar-mobile-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-mobile-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}
@media (hover: none) and (pointer: coarse) {
  .scroll-touch {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
  }
  .scroll-touch::-webkit-scrollbar {
    display: none;
  }
}
@media print {
  * {
    overflow: visible !important;
  }
  *::-webkit-scrollbar {
    display: none !important;
  }
  .scrollbar-progress::before {
    display: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  .scrollbar-custom::-webkit-scrollbar-track,
  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--darker);
  }
  .scrollbar-custom::-webkit-scrollbar-thumb,
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--gray-700);
    border-color: var(--darker);
  }
  .scrollbar-custom::-webkit-scrollbar-thumb:hover,
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: var(--gray-600);
  }
  .scrollbar-custom,
  .scrollbar-thin {
    scrollbar-color: var(--gray-700) var(--darker);
  }
}
/*
============================================
Social Media Component
============================================
Social media buttons, share widgets, and icons

Base Classes: .social-*, .share-*
Variants: Platform-specific colors and styles

Usage:
<a href="#" class="social-btn social-facebook">Facebook</a>
<div class="social-share">Share buttons</div>

Combine with utilities:
- Layout: flex-*, grid-*
- Spacing: m-*, p-*
- Colors: bg-*, text-*
============================================
*/
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.social-btn:active {
  transform: translateY(0);
}
.social-btn i, .social-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.social-facebook {
  background-color: #1877f2;
  color: white;
}
.social-facebook:hover {
  background-color: rgb(11.9983606557, 99.6786885246, 213.2016393443);
  color: white;
}

.social-facebook-outline {
  background-color: transparent;
  color: #1877f2;
  border: 1px solid #1877f2;
}
.social-facebook-outline:hover {
  background-color: #1877f2;
  color: white;
}

.social-facebook-text {
  background-color: transparent;
  color: #1877f2;
}
.social-facebook-text:hover {
  background-color: rgba(24, 119, 242, 0.1);
}

.social-twitter {
  background-color: #1da1f2;
  color: white;
}
.social-twitter:hover {
  background-color: rgb(12.5213389121, 139.6610878661, 217.6786610879);
  color: white;
}

.social-twitter-outline {
  background-color: transparent;
  color: #1da1f2;
  border: 1px solid #1da1f2;
}
.social-twitter-outline:hover {
  background-color: #1da1f2;
  color: white;
}

.social-twitter-text {
  background-color: transparent;
  color: #1da1f2;
}
.social-twitter-text:hover {
  background-color: rgba(29, 161, 242, 0.1);
}

.social-instagram {
  background-color: #e4405f;
  color: white;
}
.social-instagram:hover {
  background-color: rgb(220.0880733945, 31.1119266055, 66.8330275229);
  color: white;
}

.social-instagram-outline {
  background-color: transparent;
  color: #e4405f;
  border: 1px solid #e4405f;
}
.social-instagram-outline:hover {
  background-color: #e4405f;
  color: white;
}

.social-instagram-text {
  background-color: transparent;
  color: #e4405f;
}
.social-instagram-text:hover {
  background-color: rgba(228, 64, 95, 0.1);
}

.social-linkedin {
  background-color: #0a66c2;
  color: white;
}
.social-linkedin:hover {
  background-color: rgb(8, 81.6, 155.2);
  color: white;
}

.social-linkedin-outline {
  background-color: transparent;
  color: #0a66c2;
  border: 1px solid #0a66c2;
}
.social-linkedin-outline:hover {
  background-color: #0a66c2;
  color: white;
}

.social-linkedin-text {
  background-color: transparent;
  color: #0a66c2;
}
.social-linkedin-text:hover {
  background-color: rgba(10, 102, 194, 0.1);
}

.social-youtube {
  background-color: #ff0000;
  color: white;
}
.social-youtube:hover {
  background-color: rgb(214.2, 0, 0);
  color: white;
}

.social-youtube-outline {
  background-color: transparent;
  color: #ff0000;
  border: 1px solid #ff0000;
}
.social-youtube-outline:hover {
  background-color: #ff0000;
  color: white;
}

.social-youtube-text {
  background-color: transparent;
  color: #ff0000;
}
.social-youtube-text:hover {
  background-color: rgba(255, 0, 0, 0.1);
}

.social-pinterest {
  background-color: #e60023;
  color: white;
}
.social-pinterest:hover {
  background-color: rgb(189.2, 0, 28.7913043478);
  color: white;
}

.social-pinterest-outline {
  background-color: transparent;
  color: #e60023;
  border: 1px solid #e60023;
}
.social-pinterest-outline:hover {
  background-color: #e60023;
  color: white;
}

.social-pinterest-text {
  background-color: transparent;
  color: #e60023;
}
.social-pinterest-text:hover {
  background-color: rgba(230, 0, 35, 0.1);
}

.social-tiktok {
  background-color: #000000;
  color: white;
}
.social-tiktok:hover {
  background-color: black;
  color: white;
}

.social-tiktok-outline {
  background-color: transparent;
  color: #000000;
  border: 1px solid #000000;
}
.social-tiktok-outline:hover {
  background-color: #000000;
  color: white;
}

.social-tiktok-text {
  background-color: transparent;
  color: #000000;
}
.social-tiktok-text:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.social-snapchat {
  background-color: #fffc00;
  color: white;
}
.social-snapchat:hover {
  background-color: rgb(214.2, 211.68, 0);
  color: white;
}

.social-snapchat-outline {
  background-color: transparent;
  color: #fffc00;
  border: 1px solid #fffc00;
}
.social-snapchat-outline:hover {
  background-color: #fffc00;
  color: white;
}

.social-snapchat-text {
  background-color: transparent;
  color: #fffc00;
}
.social-snapchat-text:hover {
  background-color: rgba(255, 252, 0, 0.1);
}

.social-reddit {
  background-color: #ff4500;
  color: white;
}
.social-reddit:hover {
  background-color: rgb(214.2, 57.96, 0);
  color: white;
}

.social-reddit-outline {
  background-color: transparent;
  color: #ff4500;
  border: 1px solid #ff4500;
}
.social-reddit-outline:hover {
  background-color: #ff4500;
  color: white;
}

.social-reddit-text {
  background-color: transparent;
  color: #ff4500;
}
.social-reddit-text:hover {
  background-color: rgba(255, 69, 0, 0.1);
}

.social-whatsapp {
  background-color: #25d366;
  color: white;
}
.social-whatsapp:hover {
  background-color: rgb(30.9129032258, 176.2870967742, 85.2193548387);
  color: white;
}

.social-whatsapp-outline {
  background-color: transparent;
  color: #25d366;
  border: 1px solid #25d366;
}
.social-whatsapp-outline:hover {
  background-color: #25d366;
  color: white;
}

.social-whatsapp-text {
  background-color: transparent;
  color: #25d366;
}
.social-whatsapp-text:hover {
  background-color: rgba(37, 211, 102, 0.1);
}

.social-telegram {
  background-color: #0088cc;
  color: white;
}
.social-telegram:hover {
  background-color: rgb(0, 108.8, 163.2);
  color: white;
}

.social-telegram-outline {
  background-color: transparent;
  color: #0088cc;
  border: 1px solid #0088cc;
}
.social-telegram-outline:hover {
  background-color: #0088cc;
  color: white;
}

.social-telegram-text {
  background-color: transparent;
  color: #0088cc;
}
.social-telegram-text:hover {
  background-color: rgba(0, 136, 204, 0.1);
}

.social-discord {
  background-color: #5865f2;
  color: white;
}
.social-discord:hover {
  background-color: rgb(50.1466666667, 66.0933333333, 239.0533333333);
  color: white;
}

.social-discord-outline {
  background-color: transparent;
  color: #5865f2;
  border: 1px solid #5865f2;
}
.social-discord-outline:hover {
  background-color: #5865f2;
  color: white;
}

.social-discord-text {
  background-color: transparent;
  color: #5865f2;
}
.social-discord-text:hover {
  background-color: rgba(88, 101, 242, 0.1);
}

.social-github {
  background-color: #181717;
  color: white;
}
.social-github:hover {
  background-color: rgb(3.1659574468, 3.0340425532, 3.0340425532);
  color: white;
}

.social-github-outline {
  background-color: transparent;
  color: #181717;
  border: 1px solid #181717;
}
.social-github-outline:hover {
  background-color: #181717;
  color: white;
}

.social-github-text {
  background-color: transparent;
  color: #181717;
}
.social-github-text:hover {
  background-color: rgba(24, 23, 23, 0.1);
}

.social-dribbble {
  background-color: #ea4c89;
  color: white;
}
.social-dribbble:hover {
  background-color: rgb(229.716, 39.484, 112.928);
  color: white;
}

.social-dribbble-outline {
  background-color: transparent;
  color: #ea4c89;
  border: 1px solid #ea4c89;
}
.social-dribbble-outline:hover {
  background-color: #ea4c89;
  color: white;
}

.social-dribbble-text {
  background-color: transparent;
  color: #ea4c89;
}
.social-dribbble-text:hover {
  background-color: rgba(234, 76, 137, 0.1);
}

.social-behance {
  background-color: #1769ff;
  color: white;
}
.social-behance:hover {
  background-color: rgb(0, 83.8379310345, 237.2);
  color: white;
}

.social-behance-outline {
  background-color: transparent;
  color: #1769ff;
  border: 1px solid #1769ff;
}
.social-behance-outline:hover {
  background-color: #1769ff;
  color: white;
}

.social-behance-text {
  background-color: transparent;
  color: #1769ff;
}
.social-behance-text:hover {
  background-color: rgba(23, 105, 255, 0.1);
}

.social-medium {
  background-color: #000000;
  color: white;
}
.social-medium:hover {
  background-color: black;
  color: white;
}

.social-medium-outline {
  background-color: transparent;
  color: #000000;
  border: 1px solid #000000;
}
.social-medium-outline:hover {
  background-color: #000000;
  color: white;
}

.social-medium-text {
  background-color: transparent;
  color: #000000;
}
.social-medium-text:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.social-dev {
  background-color: #0a0a0a;
  color: white;
}
.social-dev:hover {
  background-color: black;
  color: white;
}

.social-dev-outline {
  background-color: transparent;
  color: #0a0a0a;
  border: 1px solid #0a0a0a;
}
.social-dev-outline:hover {
  background-color: #0a0a0a;
  color: white;
}

.social-dev-text {
  background-color: transparent;
  color: #0a0a0a;
}
.social-dev-text:hover {
  background-color: rgba(10, 10, 10, 0.1);
}

.social-slack {
  background-color: #4a154b;
  color: white;
}
.social-slack:hover {
  background-color: rgb(42.55, 12.075, 43.125);
  color: white;
}

.social-slack-outline {
  background-color: transparent;
  color: #4a154b;
  border: 1px solid #4a154b;
}
.social-slack-outline:hover {
  background-color: #4a154b;
  color: white;
}

.social-slack-text {
  background-color: transparent;
  color: #4a154b;
}
.social-slack-text:hover {
  background-color: rgba(74, 21, 75, 0.1);
}

.social-spotify {
  background-color: #1db954;
  color: white;
}
.social-spotify:hover {
  background-color: rgb(23.4710280374, 149.7289719626, 67.985046729);
  color: white;
}

.social-spotify-outline {
  background-color: transparent;
  color: #1db954;
  border: 1px solid #1db954;
}
.social-spotify-outline:hover {
  background-color: #1db954;
  color: white;
}

.social-spotify-text {
  background-color: transparent;
  color: #1db954;
}
.social-spotify-text:hover {
  background-color: rgba(29, 185, 84, 0.1);
}

.social-twitch {
  background-color: #9146ff;
  color: white;
}
.social-twitch:hover {
  background-color: rgb(120.7405405405, 29.2, 255);
  color: white;
}

.social-twitch-outline {
  background-color: transparent;
  color: #9146ff;
  border: 1px solid #9146ff;
}
.social-twitch-outline:hover {
  background-color: #9146ff;
  color: white;
}

.social-twitch-text {
  background-color: transparent;
  color: #9146ff;
}
.social-twitch-text:hover {
  background-color: rgba(145, 70, 255, 0.1);
}

.social-btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
}
.social-btn-sm i, .social-btn-sm svg {
  width: 1rem;
  height: 1rem;
}

.social-btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}
.social-btn-lg i, .social-btn-lg svg {
  width: 1.25rem;
  height: 1.25rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.social-icon i, .social-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.social-icon:hover {
  transform: translateY(-2px) scale(1.05);
}

.social-icon-sm {
  width: 2rem;
  height: 2rem;
}
.social-icon-sm i, .social-icon-sm svg {
  width: 1rem;
  height: 1rem;
}

.social-icon-lg {
  width: 3rem;
  height: 3rem;
}
.social-icon-lg i, .social-icon-lg svg {
  width: 1.5rem;
  height: 1.5rem;
}

.social-icon-xl {
  width: 4rem;
  height: 4rem;
}
.social-icon-xl i, .social-icon-xl svg {
  width: 2rem;
  height: 2rem;
}

.social-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.social-group.social-group-sm {
  gap: 0.5rem;
}
.social-group.social-group-lg {
  gap: 1rem;
}
.social-group.social-group-vertical {
  flex-direction: column;
  align-items: stretch;
}

.share-buttons {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.share-buttons .share-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #6b7280);
  margin-right: 0.5rem;
}
.share-buttons .share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  text-decoration: none;
}
.share-buttons .share-btn i, .share-buttons .share-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.share-buttons .share-btn:hover {
  transform: translateY(-2px);
}

.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--primary-color, #007acc);
  color: white;
  border: none;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.follow-btn:hover {
  background: var(--accent-color, #0066aa);
  transform: scale(1.05);
}
.follow-btn.following {
  background: var(--background-color, #f3f4f6);
  color: var(--text-color, #374151);
  border: 1px solid var(--border-color, #e5e7eb);
}
.follow-btn.following:hover {
  background: var(--background-color, #fee2e2);
  color: #dc2626;
  border-color: #fecaca;
}
.follow-btn.following:hover::after {
  content: "Unfollow";
}
.follow-btn.following::after {
  content: "Following";
}

.social-count {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: var(--background-color, #f3f4f6);
  color: var(--text-color, #6b7280);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
}
.social-count i, .social-count svg {
  width: 1rem;
  height: 1rem;
}
.social-count .count {
  font-weight: 600;
  color: var(--text-color, #374151);
}

.social-card {
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.social-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.social-card .card-header .avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}
.social-card .card-header .user-info {
  flex: 1;
}
.social-card .card-header .user-info .username {
  font-weight: 600;
  color: var(--text-color, #111827);
  font-size: 0.9375rem;
  line-height: 1.2;
}
.social-card .card-header .user-info .timestamp {
  font-size: 0.8125rem;
  color: var(--text-color, #6b7280);
}
.social-card .card-content {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--text-color, #374151);
}
.social-card .card-content img {
  max-width: 100%;
  border-radius: 0.5rem;
  margin-top: 0.75rem;
}
.social-card .card-actions {
  display: flex;
  gap: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
}
.social-card .card-actions .action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-color, #6b7280);
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.2s ease;
}
.social-card .card-actions .action-btn i, .social-card .card-actions .action-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.social-card .card-actions .action-btn:hover {
  color: var(--primary-color, #007acc);
}
.social-card .card-actions .action-btn.liked {
  color: #ef4444;
}

.profile-card {
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
  text-align: center;
}
.profile-card .profile-cover {
  height: 100px;
  background: linear-gradient(135deg, var(--primary-color, #007acc), var(--accent-color, #28a745));
}
.profile-card .profile-avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 4px solid white;
  margin: -2.5rem auto 1rem;
  object-fit: cover;
}
.profile-card .profile-info {
  padding: 0 1.5rem 1.5rem;
}
.profile-card .profile-info .profile-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color, #111827);
  margin-bottom: 0.25rem;
}
.profile-card .profile-info .profile-handle {
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
  margin-bottom: 1rem;
}
.profile-card .profile-info .profile-bio {
  font-size: 0.875rem;
  color: var(--text-color, #374151);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.profile-card .profile-info .profile-stats {
  display: flex;
  justify-content: space-around;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color, #e5e7eb);
}
.profile-card .profile-info .profile-stats .stat {
  text-align: center;
}
.profile-card .profile-info .profile-stats .stat .stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color, #111827);
}
.profile-card .profile-info .profile-stats .stat .stat-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-color, #6b7280);
}

.share-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
}
.share-float .share-toggle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--primary-color, #007acc);
  color: white;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.share-float .share-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}
.share-float .share-menu {
  position: absolute;
  bottom: 4rem;
  right: 0;
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.share-float .share-menu.active {
  display: flex;
}

.social-bar {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background: white;
  border-radius: 0 0.5rem 0.5rem 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}
.social-bar.social-bar-right {
  left: auto;
  right: 0;
  border-radius: 0.5rem 0 0 0.5rem;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
}

.social-login {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.social-login .login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.social-login .login-btn i, .social-login .login-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.social-login .login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
  .social-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
  .social-icon {
    width: 2.25rem;
    height: 2.25rem;
  }
  .social-card {
    padding: 1rem;
  }
  .share-float {
    bottom: 1rem;
    right: 1rem;
  }
  .share-float .share-toggle {
    width: 3rem;
    height: 3rem;
  }
  .social-bar {
    padding: 0.5rem;
    gap: 0.375rem;
  }
  .social-bar .social-icon {
    width: 2rem;
    height: 2rem;
  }
  .profile-card .profile-avatar {
    width: 4rem;
    height: 4rem;
  }
  .profile-card .profile-info {
    padding: 0 1rem 1rem;
  }
  .profile-card .profile-info .profile-name {
    font-size: 1.125rem;
  }
}
@media print {
  .social-btn,
  .social-icon,
  .share-buttons,
  .share-float,
  .social-bar {
    display: none !important;
  }
}
/*
============================================
Video Player Component
============================================
Custom video player styling and controls

Base Classes: .video-player, .video-container
Variants: .video-responsive, .video-cover

Usage:
<div class="video-container">
    <video src="video.mp4"></video>
</div>

Combine with utilities:
- Position: relative, absolute
- Size: w-*, h-*
- Aspect ratio: aspect-*
============================================
*/
.video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 0.5rem;
}
.video-container video {
  width: 100%;
  height: auto;
  display: block;
}

.video-16-9 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
.video-16-9 video,
.video-16-9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-4-3 {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
}
.video-4-3 video,
.video-4-3 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-1-1 {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}
.video-1-1 video,
.video-1-1 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-21-9 {
  position: relative;
  width: 100%;
  padding-bottom: 42.86%;
}
.video-21-9 video,
.video-21-9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-cover {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.video-cover video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.video-player {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 0.5rem;
  overflow: hidden;
}
.video-player video {
  width: 100%;
  height: auto;
  display: block;
}
.video-player.custom-controls video::-webkit-media-controls {
  display: none !important;
}
.video-player.custom-controls video::-webkit-media-controls-enclosure {
  display: none !important;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.video-player:hover .video-controls, .video-player.paused .video-controls {
  opacity: 1;
}
.video-controls .progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.video-controls .progress-bar .progress-filled {
  height: 100%;
  background: var(--primary-color, #007acc);
  border-radius: 2px;
  transition: width 0.1s linear;
  position: relative;
}
.video-controls .progress-bar .progress-filled::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--primary-color, #007acc);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.video-controls .progress-bar:hover .progress-filled::after {
  opacity: 1;
}
.video-controls .controls-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.video-controls .controls-row .control-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.video-controls .controls-row .control-btn:hover {
  transform: scale(1.1);
}
.video-controls .controls-row .control-btn i, .video-controls .controls-row .control-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.video-controls .controls-row .time-display {
  color: white;
  font-size: 0.875rem;
  font-family: monospace;
}
.video-controls .controls-row .spacer {
  flex: 1;
}
.video-controls .controls-row .volume-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.video-controls .controls-row .volume-control input[type=range] {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  outline: none;
}
.video-controls .controls-row .volume-control input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}
.video-controls .controls-row .volume-control input[type=range]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 1;
}
.video-play-overlay::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}
.video-play-overlay:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) scale(1.1);
}
.video-player.playing .video-play-overlay {
  opacity: 0;
  pointer-events: none;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  cursor: pointer;
  border-radius: 0.5rem;
  overflow: hidden;
}
.video-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
.video-thumbnail .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.video-thumbnail .play-icon::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}
.video-thumbnail:hover .play-icon {
  background: rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.1);
}
.video-thumbnail .duration {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.video-grid.video-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.video-grid.video-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.video-grid.video-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.video-card {
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.video-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.video-card .video-card-thumbnail {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
}
.video-card .video-card-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-card .video-card-content {
  padding: 1rem;
}
.video-card .video-card-content .video-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-color, #111827);
  margin-bottom: 0.5rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-card .video-card-content .video-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-color, #6b7280);
}
.video-card .video-card-content .video-meta .views,
.video-card .video-card-content .video-meta .date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 2rem;
}
.video-modal.active {
  display: flex;
}
.video-modal .modal-content {
  position: relative;
  width: 100%;
  max-width: 1200px;
}
.video-modal .modal-close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.video-modal .modal-close:hover {
  transform: rotate(90deg);
}
.video-modal .modal-close::before {
  content: "×";
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
.video-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: video-spin 0.8s linear infinite;
}

@keyframes video-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@media (max-width: 767px) {
  .video-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .video-grid-2,
  .video-grid-3,
  .video-grid-4 {
    grid-template-columns: 1fr;
  }
  .video-controls {
    padding: 0.75rem;
  }
  .video-controls .controls-row {
    gap: 0.5rem;
  }
  .video-controls .controls-row .control-btn {
    padding: 0.25rem;
  }
  .video-controls .controls-row .control-btn i, .video-controls .controls-row .control-btn svg {
    width: 1rem;
    height: 1rem;
  }
  .video-controls .controls-row .volume-control input[type=range] {
    width: 60px;
  }
  .video-controls .controls-row .time-display {
    font-size: 0.75rem;
  }
  .video-play-overlay {
    width: 3rem;
    height: 3rem;
  }
  .video-play-overlay::before {
    border-left-width: 16px;
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
  .video-modal {
    padding: 1rem;
  }
  .video-modal .modal-close {
    top: -2rem;
    font-size: 1.5rem;
  }
  .video-card .video-card-content {
    padding: 0.75rem;
  }
  .video-card .video-card-content .video-title {
    font-size: 0.875rem;
  }
  .video-card .video-card-content .video-meta {
    font-size: 0.75rem;
  }
}
@media print {
  .video-container,
  .video-player,
  .video-thumbnail,
  .video-background {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .video-loading {
    animation: none;
    border: 3px solid white;
  }
  .video-play-overlay:hover,
  .video-card:hover {
    transform: none;
  }
}
/*
============================================
Audio Player Component
============================================
Custom audio player styling and controls

Base Classes: .audio-player, .audio-*
Variants: .audio-minimal, .audio-card

Usage:
<div class="audio-player">
    <audio src="audio.mp3"></audio>
</div>

Combine with utilities:
- Layout: flex-*, grid-*
- Colors: bg-*, text-*
- Spacing: m-*, p-*
============================================
*/
.audio-player {
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.audio-player audio {
  display: none;
}
.audio-player .player-artwork {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  object-fit: cover;
  margin-bottom: 1rem;
  background: var(--background-color, #f3f4f6);
}
.audio-player .player-info {
  text-align: center;
  margin-bottom: 1.5rem;
}
.audio-player .player-info .track-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color, #111827);
  margin-bottom: 0.25rem;
}
.audio-player .player-info .track-artist {
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
}
.audio-player .player-progress {
  margin-bottom: 0.75rem;
}
.audio-player .player-progress .progress-bar {
  width: 100%;
  height: 6px;
  background: var(--background-color, #e5e7eb);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  margin-bottom: 0.5rem;
}
.audio-player .player-progress .progress-bar .progress-filled {
  height: 100%;
  background: var(--primary-color, #007acc);
  border-radius: 3px;
  position: relative;
}
.audio-player .player-progress .progress-bar .progress-filled::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--primary-color, #007acc);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.audio-player .player-progress .progress-bar:hover .progress-filled::after {
  opacity: 1;
}
.audio-player .player-progress .time-display {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-color, #6b7280);
  font-family: monospace;
}
.audio-player .player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.audio-player .player-controls .control-btn {
  background: transparent;
  border: none;
  color: var(--text-color, #374151);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0.5rem;
}
.audio-player .player-controls .control-btn:hover {
  color: var(--primary-color, #007acc);
  transform: scale(1.1);
}
.audio-player .player-controls .control-btn i, .audio-player .player-controls .control-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.audio-player .player-controls .control-btn.play-btn {
  width: 3rem;
  height: 3rem;
  background: var(--primary-color, #007acc);
  color: white;
  border-radius: 50%;
}
.audio-player .player-controls .control-btn.play-btn i, .audio-player .player-controls .control-btn.play-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.audio-player .player-controls .control-btn.play-btn:hover {
  background: var(--accent-color, #0066aa);
  transform: scale(1.05);
}
.audio-player .player-volume {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
}
.audio-player .player-volume .volume-icon {
  color: var(--text-color, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
}
.audio-player .player-volume .volume-icon i, .audio-player .player-volume .volume-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.audio-player .player-volume input[type=range] {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--background-color, #e5e7eb);
  border-radius: 2px;
  outline: none;
}
.audio-player .player-volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--primary-color, #007acc);
  border-radius: 50%;
  cursor: pointer;
}
.audio-player .player-volume input[type=range]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--primary-color, #007acc);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.audio-minimal {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--background-color, #f9fafb);
  border-radius: 0.5rem;
  padding: 1rem;
}
.audio-minimal .play-btn {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--primary-color, #007acc);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.audio-minimal .play-btn:hover {
  transform: scale(1.05);
}
.audio-minimal .play-btn i, .audio-minimal .play-btn svg {
  width: 1rem;
  height: 1rem;
}
.audio-minimal .track-info {
  flex: 1;
  min-width: 0;
}
.audio-minimal .track-info .track-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-minimal .track-info .track-duration {
  font-size: 0.75rem;
  color: var(--text-color, #6b7280);
}
.audio-minimal .progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border-color, #e5e7eb);
  border-radius: 2px;
  cursor: pointer;
}
.audio-minimal .progress-bar .progress-filled {
  height: 100%;
  background: var(--primary-color, #007acc);
  border-radius: 2px;
}

.audio-card {
  display: flex;
  gap: 1rem;
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: all 0.3s ease;
}
.audio-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.audio-card .card-artwork {
  width: 5rem;
  height: 5rem;
  border-radius: 0.375rem;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--background-color, #f3f4f6);
}
.audio-card .card-content {
  flex: 1;
  min-width: 0;
}
.audio-card .card-content .card-header {
  margin-bottom: 0.75rem;
}
.audio-card .card-content .card-header .track-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-color, #111827);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-card .card-content .card-header .track-artist {
  font-size: 0.8125rem;
  color: var(--text-color, #6b7280);
}
.audio-card .card-content .card-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.audio-card .card-content .card-controls .play-btn {
  width: 2rem;
  height: 2rem;
  background: var(--primary-color, #007acc);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.audio-card .card-content .card-controls .play-btn i, .audio-card .card-content .card-controls .play-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}
.audio-card .card-content .card-controls .progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border-color, #e5e7eb);
  border-radius: 2px;
}
.audio-card .card-content .card-controls .progress-bar .progress-filled {
  height: 100%;
  background: var(--primary-color, #007acc);
  border-radius: 2px;
}
.audio-card .card-content .card-controls .duration {
  font-size: 0.75rem;
  color: var(--text-color, #6b7280);
  font-family: monospace;
  flex-shrink: 0;
}

.audio-playlist {
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
}
.audio-playlist .playlist-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  background: var(--background-color, #f9fafb);
}
.audio-playlist .playlist-header .playlist-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color, #111827);
}
.audio-playlist .playlist-header .playlist-count {
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
}
.audio-playlist .playlist-items {
  max-height: 400px;
  overflow-y: auto;
}
.audio-playlist .playlist-items .playlist-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.audio-playlist .playlist-items .playlist-item:last-child {
  border-bottom: none;
}
.audio-playlist .playlist-items .playlist-item:hover {
  background: var(--background-color, #f9fafb);
}
.audio-playlist .playlist-items .playlist-item.active {
  background: var(--background-color, #eff6ff);
}
.audio-playlist .playlist-items .playlist-item.active .track-number {
  color: var(--primary-color, #007acc);
}
.audio-playlist .playlist-items .playlist-item .track-number {
  width: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-color, #9ca3af);
  font-weight: 500;
  flex-shrink: 0;
}
.audio-playlist .playlist-items .playlist-item .track-info {
  flex: 1;
  min-width: 0;
}
.audio-playlist .playlist-items .playlist-item .track-info .track-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-playlist .playlist-items .playlist-item .track-info .track-artist {
  font-size: 0.75rem;
  color: var(--text-color, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-playlist .playlist-items .playlist-item .track-duration {
  font-size: 0.75rem;
  color: var(--text-color, #6b7280);
  font-family: monospace;
  flex-shrink: 0;
}

.audio-waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 60px;
  padding: 1rem;
  background: var(--background-color, #f9fafb);
  border-radius: 0.5rem;
}
.audio-waveform .wave-bar {
  width: 3px;
  background: var(--primary-color, #007acc);
  border-radius: 2px;
  animation: wave-pulse 1s ease-in-out infinite;
}
.audio-waveform .wave-bar:nth-child(1) {
  height: 39 %;
  animation-delay: 0.05s;
}
.audio-waveform .wave-bar:nth-child(2) {
  height: 69 %;
  animation-delay: 0.1s;
}
.audio-waveform .wave-bar:nth-child(3) {
  height: 22 %;
  animation-delay: 0.15s;
}
.audio-waveform .wave-bar:nth-child(4) {
  height: 64 %;
  animation-delay: 0.2s;
}
.audio-waveform .wave-bar:nth-child(5) {
  height: 31 %;
  animation-delay: 0.25s;
}
.audio-waveform .wave-bar:nth-child(6) {
  height: 40 %;
  animation-delay: 0.3s;
}
.audio-waveform .wave-bar:nth-child(7) {
  height: 21 %;
  animation-delay: 0.35s;
}
.audio-waveform .wave-bar:nth-child(8) {
  height: 70 %;
  animation-delay: 0.4s;
}
.audio-waveform .wave-bar:nth-child(9) {
  height: 32 %;
  animation-delay: 0.45s;
}
.audio-waveform .wave-bar:nth-child(10) {
  height: 34 %;
  animation-delay: 0.5s;
}
.audio-waveform .wave-bar:nth-child(11) {
  height: 74 %;
  animation-delay: 0.55s;
}
.audio-waveform .wave-bar:nth-child(12) {
  height: 45 %;
  animation-delay: 0.6s;
}
.audio-waveform .wave-bar:nth-child(13) {
  height: 55 %;
  animation-delay: 0.65s;
}
.audio-waveform .wave-bar:nth-child(14) {
  height: 46 %;
  animation-delay: 0.7s;
}
.audio-waveform .wave-bar:nth-child(15) {
  height: 39 %;
  animation-delay: 0.75s;
}
.audio-waveform .wave-bar:nth-child(16) {
  height: 53 %;
  animation-delay: 0.8s;
}
.audio-waveform .wave-bar:nth-child(17) {
  height: 35 %;
  animation-delay: 0.85s;
}
.audio-waveform .wave-bar:nth-child(18) {
  height: 66 %;
  animation-delay: 0.9s;
}
.audio-waveform .wave-bar:nth-child(19) {
  height: 37 %;
  animation-delay: 0.95s;
}
.audio-waveform .wave-bar:nth-child(20) {
  height: 22 %;
  animation-delay: 1s;
}
.audio-waveform.paused .wave-bar {
  animation-play-state: paused;
}

@keyframes wave-pulse {
  0%, 100% {
    transform: scaleY(0.5);
    opacity: 0.7;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
.audio-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  border-top: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}
.audio-sticky .sticky-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.audio-sticky .sticky-content .track-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 250px;
}
.audio-sticky .sticky-content .track-info .artwork {
  width: 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  object-fit: cover;
  background: var(--background-color, #f3f4f6);
}
.audio-sticky .sticky-content .track-info .info {
  flex: 1;
  min-width: 0;
}
.audio-sticky .sticky-content .track-info .info .title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-sticky .sticky-content .track-info .info .artist {
  font-size: 0.75rem;
  color: var(--text-color, #6b7280);
}
.audio-sticky .sticky-content .player-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.audio-sticky .sticky-content .player-center .controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.audio-sticky .sticky-content .player-center .controls button {
  background: transparent;
  border: none;
  color: var(--text-color, #374151);
  cursor: pointer;
  padding: 0.375rem;
}
.audio-sticky .sticky-content .player-center .controls button:hover {
  color: var(--primary-color, #007acc);
}
.audio-sticky .sticky-content .player-center .controls button i, .audio-sticky .sticky-content .player-center .controls button svg {
  width: 1.125rem;
  height: 1.125rem;
}
.audio-sticky .sticky-content .player-center .controls button.play-btn i, .audio-sticky .sticky-content .player-center .controls button.play-btn svg {
  width: 1.5rem;
  height: 1.5rem;
}
.audio-sticky .sticky-content .player-center .progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.audio-sticky .sticky-content .player-center .progress .time {
  font-size: 0.75rem;
  color: var(--text-color, #6b7280);
  font-family: monospace;
}
.audio-sticky .sticky-content .player-center .progress .progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border-color, #e5e7eb);
  border-radius: 2px;
  cursor: pointer;
}
.audio-sticky .sticky-content .player-center .progress .progress-bar .progress-filled {
  height: 100%;
  background: var(--primary-color, #007acc);
  border-radius: 2px;
}
.audio-sticky .sticky-content .player-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 150px;
  justify-content: flex-end;
}
.audio-sticky .sticky-content .player-actions button {
  background: transparent;
  border: none;
  color: var(--text-color, #6b7280);
  cursor: pointer;
}
.audio-sticky .sticky-content .player-actions button:hover {
  color: var(--text-color, #374151);
}
.audio-sticky .sticky-content .player-actions button i, .audio-sticky .sticky-content .player-actions button svg {
  width: 1.125rem;
  height: 1.125rem;
}

@media (max-width: 767px) {
  .audio-player {
    padding: 1rem;
  }
  .audio-player .player-controls {
    gap: 0.75rem;
  }
  .audio-player .player-controls .control-btn {
    padding: 0.375rem;
  }
  .audio-player .player-controls .control-btn i, .audio-player .player-controls .control-btn svg {
    width: 1rem;
    height: 1rem;
  }
  .audio-player .player-controls .control-btn.play-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
  .audio-player .player-controls .control-btn.play-btn i, .audio-player .player-controls .control-btn.play-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .audio-card {
    flex-direction: column;
  }
  .audio-card .card-artwork {
    width: 100%;
    height: 200px;
  }
  .audio-sticky {
    padding: 0.75rem;
  }
  .audio-sticky .sticky-content {
    flex-direction: column;
    gap: 1rem;
  }
  .audio-sticky .sticky-content .track-info,
  .audio-sticky .sticky-content .player-actions {
    flex: 1 1 auto;
    width: 100%;
  }
  .audio-sticky .sticky-content .player-center {
    width: 100%;
  }
  .audio-sticky .sticky-content .player-actions {
    justify-content: center;
  }
}
@media print {
  .audio-player,
  .audio-minimal,
  .audio-card,
  .audio-sticky {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .audio-waveform .wave-bar {
    animation: none !important;
  }
}
/*
============================================
Image Gallery Component
============================================
Image gallery layouts and grid systems

Base Classes: .gallery, .gallery-grid
Variants: .gallery-masonry, .gallery-justified

Usage:
<div class="gallery-grid">
    <div class="gallery-item">
        <img src="image.jpg" alt="Image">
    </div>
</div>

Combine with utilities:
- Grid: grid-*, gap-*
- Display: flex-*, block
- Position: relative, absolute
============================================
*/
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  width: 100%;
}
.gallery-grid .gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--background-color, #f3f4f6);
  cursor: pointer;
  aspect-ratio: 1;
}
.gallery-grid .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-grid .gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-grid .gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-grid .gallery-item .overlay .overlay-content {
  color: white;
  text-align: center;
  padding: 1rem;
}
.gallery-grid .gallery-item .overlay .overlay-content .title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.gallery-grid .gallery-item .overlay .overlay-content .description {
  font-size: 0.875rem;
  opacity: 0.9;
}
.gallery-grid .gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-2-col {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-3-col {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-4-col {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-5-col {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-6-col {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-gap-sm {
  gap: 0.5rem;
}

.gallery-gap-md {
  gap: 1rem;
}

.gallery-gap-lg {
  gap: 1.5rem;
}

.gallery-gap-xl {
  gap: 2rem;
}

.gallery-no-gap {
  gap: 0;
}

.gallery-masonry {
  column-count: 3;
  column-gap: 1rem;
}
.gallery-masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  display: inline-block;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}
.gallery-masonry .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.gallery-masonry .gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-masonry.masonry-2 {
  column-count: 2;
}
.gallery-masonry.masonry-4 {
  column-count: 4;
}
.gallery-masonry.masonry-5 {
  column-count: 5;
}

.gallery-justified {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.gallery-justified .gallery-item {
  flex-grow: 1;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.gallery-justified .gallery-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-justified .gallery-item:hover img {
  transform: scale(1.05);
}
.gallery-justified .gallery-item::after {
  content: "";
  flex-grow: 999999999;
}

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 0.5rem;
}
.gallery-mosaic .gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}
.gallery-mosaic .gallery-item:nth-child(1) {
  grid-column: span 3;
  grid-row: span 2;
}
.gallery-mosaic .gallery-item:nth-child(2) {
  grid-column: span 3;
}
.gallery-mosaic .gallery-item:nth-child(3) {
  grid-column: span 2;
}
.gallery-mosaic .gallery-item:nth-child(4) {
  grid-column: span 1;
}
.gallery-mosaic .gallery-item:nth-child(5) {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-mosaic .gallery-item:nth-child(6) {
  grid-column: span 2;
}
.gallery-mosaic .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-mosaic .gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}
.gallery-carousel .carousel-track {
  display: flex;
  transition: transform 0.3s ease;
  gap: 1rem;
}
.gallery-carousel .carousel-track .gallery-item {
  flex: 0 0 auto;
  width: 100%;
  max-width: 800px;
}
.gallery-carousel .carousel-track .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}
.gallery-carousel .carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}
.gallery-carousel .carousel-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}
.gallery-carousel .carousel-nav.prev {
  left: 1rem;
}
.gallery-carousel .carousel-nav.prev::before {
  content: "‹";
  font-size: 1.5rem;
}
.gallery-carousel .carousel-nav.next {
  right: 1rem;
}
.gallery-carousel .carousel-nav.next::before {
  content: "›";
  font-size: 1.5rem;
}
.gallery-carousel .carousel-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}
.gallery-carousel .carousel-dots .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gallery-carousel .carousel-dots .dot.active, .gallery-carousel .carousel-dots .dot:hover {
  background: white;
  transform: scale(1.2);
}

.gallery-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.gallery-thumbnails .main-image {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
}
.gallery-thumbnails .main-image img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-thumbnails .thumbnails {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
}
.gallery-thumbnails .thumbnails::-webkit-scrollbar {
  height: 4px;
}
.gallery-thumbnails .thumbnails::-webkit-scrollbar-track {
  background: var(--background-color, #f3f4f6);
}
.gallery-thumbnails .thumbnails::-webkit-scrollbar-thumb {
  background: var(--border-color, #d1d5db);
  border-radius: 2px;
}
.gallery-thumbnails .thumbnails .thumb {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 0.375rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  border: 2px solid transparent;
}
.gallery-thumbnails .thumbnails .thumb:hover, .gallery-thumbnails .thumbnails .thumb.active {
  opacity: 1;
  border-color: var(--primary-color, #007acc);
}
.gallery-thumbnails .thumbnails .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
}
.product-gallery .thumbnails {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.product-gallery .thumbnails .thumb {
  width: 100px;
  height: 100px;
  border-radius: 0.375rem;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.product-gallery .thumbnails .thumb:hover, .product-gallery .thumbnails .thumb.active {
  border-color: var(--primary-color, #007acc);
}
.product-gallery .thumbnails .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-gallery .main-view {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--background-color, #f9fafb);
  aspect-ratio: 1;
}
.product-gallery .main-view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}
.product-gallery .main-view .zoom-indicator {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.gallery-lightbox .gallery-item {
  cursor: zoom-in;
}
.gallery-lightbox .gallery-item .zoom-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gallery-lightbox .gallery-item .zoom-icon i, .gallery-lightbox .gallery-item .zoom-icon svg {
  width: 1rem;
  height: 1rem;
}
.gallery-lightbox .gallery-item:hover .zoom-icon {
  opacity: 1;
}

.gallery-hover-zoom .gallery-item img {
  transition: transform 0.5s ease;
}
.gallery-hover-zoom .gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-hover-blur .gallery-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter 0.3s ease;
}
.gallery-hover-blur .gallery-item:hover::after {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gallery-hover-grayscale .gallery-item img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.gallery-hover-grayscale .gallery-item:hover img {
  filter: grayscale(0%);
}

.gallery-with-captions .gallery-item .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.gallery-with-captions .gallery-item .caption .caption-title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
}
.gallery-with-captions .gallery-item .caption .caption-description {
  font-size: 0.8125rem;
  opacity: 0.9;
}
.gallery-with-captions .gallery-item:hover .caption {
  transform: translateY(0);
}

.gallery-item[data-lazy] img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item[data-lazy] img.loaded {
  opacity: 1;
}
.gallery-item[data-lazy]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--border-color, #e5e7eb);
  border-top-color: var(--primary-color, #007acc);
  border-radius: 50%;
  animation: gallery-spin 0.8s linear infinite;
}
img.loaded + .gallery-item[data-lazy]::before {
  display: none;
}

@keyframes gallery-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .gallery-3-col {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-4-col,
  .gallery-5-col,
  .gallery-6-col {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery-masonry {
    column-count: 2;
  }
  .gallery-masonry.masonry-4, .gallery-masonry.masonry-5 {
    column-count: 3;
  }
  .gallery-mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 120px;
  }
}
@media (max-width: 767px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .gallery-2-col,
  .gallery-3-col,
  .gallery-4-col,
  .gallery-5-col,
  .gallery-6-col {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-masonry {
    column-count: 1;
  }
  .gallery-masonry.masonry-2, .gallery-masonry.masonry-4, .gallery-masonry.masonry-5 {
    column-count: 2;
  }
  .gallery-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 100px;
  }
  .gallery-mosaic .gallery-item:nth-child(1), .gallery-mosaic .gallery-item:nth-child(5) {
    grid-column: span 2;
  }
  .product-gallery {
    grid-template-columns: 1fr;
  }
  .product-gallery .thumbnails {
    flex-direction: row;
    overflow-x: auto;
  }
  .product-gallery .thumbnails .thumb {
    width: 80px;
    height: 80px;
  }
  .gallery-carousel .carousel-nav {
    width: 2rem;
    height: 2rem;
  }
  .gallery-carousel .carousel-nav.prev {
    left: 0.5rem;
  }
  .gallery-carousel .carousel-nav.next {
    right: 0.5rem;
  }
  .gallery-carousel .carousel-dots {
    bottom: 0.5rem;
  }
}
@media print {
  .gallery-carousel .carousel-nav,
  .gallery-carousel .carousel-dots,
  .gallery-thumbnails .thumbnails,
  .zoom-icon {
    display: none !important;
  }
  .gallery-grid,
  .gallery-masonry {
    break-inside: avoid;
  }
  .gallery-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-item img,
  .gallery-item .overlay,
  .gallery-item .caption,
  .carousel-track,
  .carousel-nav {
    transition: none !important;
  }
  .gallery-item:hover img {
    transform: none !important;
  }
}
/*
============================================
Slider Component
============================================
Image sliders, carousels, and content sliders

Base Classes: .slider, .carousel
Variants: .slider-fade, .slider-vertical

Usage:
<div class="slider">
    <div class="slider-track">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
    </div>
</div>

Combine with utilities:
- Position: relative, absolute
- Display: flex-*, grid-*
- Transform: translate-*
============================================
*/
.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
}
.slider .slider-track {
  display: flex;
  transition: transform 0.5s ease;
}
.slider .slider-track .slide {
  flex: 0 0 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider .slider-track .slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}
.slider .slider-track .slide img {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.slider .slider-track .slide h1, .slider .slider-track .slide h2, .slider .slider-track .slide h3, .slider .slider-track .slide h4, .slider .slider-track .slide h5, .slider .slider-track .slide h6,
.slider .slider-track .slide p, .slider .slider-track .slide span, .slider .slider-track .slide div,
.slider .slider-track .slide .slide-content,
.slider .slider-track .slide .text-content {
  position: relative;
  z-index: 2;
}
.slider .slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--text-color, #374151);
}
.slider .slider-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}
.slider .slider-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.slider .slider-nav.prev {
  left: 1rem;
}
.slider .slider-nav.prev::before {
  content: "‹";
  font-size: 2rem;
  line-height: 1;
}
.slider .slider-nav.next {
  right: 1rem;
}
.slider .slider-nav.next::before {
  content: "›";
  font-size: 2rem;
  line-height: 1;
}
.slider .slider-pagination {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}
.slider .slider-pagination .dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.slider .slider-pagination .dot.active, .slider .slider-pagination .dot:hover {
  background: white;
  transform: scale(1.3);
}

.slider-fade .slider-track .slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.slider-fade .slider-track .slide.active {
  opacity: 1;
  pointer-events: auto;
}

.slider-vertical {
  height: 500px;
}
.slider-vertical .slider-track {
  flex-direction: column;
  height: 100%;
}
.slider-vertical .slider-track .slide {
  flex: 0 0 100%;
  height: 100%;
}
.slider-vertical .slider-nav {
  left: 50%;
  transform: translate(-50%, 0);
}
.slider-vertical .slider-nav.prev {
  top: 1rem;
  left: 50%;
}
.slider-vertical .slider-nav.prev::before {
  content: "‹";
  transform: rotate(90deg);
  display: block;
}
.slider-vertical .slider-nav.next {
  bottom: 1rem;
  top: auto;
  left: 50%;
}
.slider-vertical .slider-nav.next::before {
  content: "›";
  transform: rotate(90deg);
  display: block;
}
.slider-vertical .slider-pagination {
  right: 1rem;
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  flex-direction: column;
}

.slider-multi .slider-track {
  gap: 1rem;
}
.slider-multi .slider-track .slide {
  flex: 0 0 calc(33.333% - 0.667rem);
}
.slider-multi.slider-2 .slide {
  flex: 0 0 calc(50% - 0.5rem);
}
.slider-multi.slider-4 .slide {
  flex: 0 0 calc(25% - 0.75rem);
}
.slider-multi.slider-5 .slide {
  flex: 0 0 calc(20% - 0.8rem);
}

.slider-center {
  padding: 0 15%;
}
.slider-center .slider-track .slide {
  opacity: 0.5;
  transform: scale(0.85);
  transition: all 0.5s ease;
}
.slider-center .slider-track .slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.slider-with-thumbs {
  --slider-main-max-height: 260px;
  --slider-main-max-height-tablet: 320px;
  --slider-main-max-height-mobile: 250px;
  --slider-thumb-max-width: 450px;
  --slider-thumb-width: 100px;
  --slider-thumb-width-mobile: 70px;
  --slider-thumb-img-height: 4rem;
  --slider-thumb-img-height-mobile: 4rem;
  --slider-thumb-gap: 0.75rem;
  --slider-thumb-padding: 4px;
  --slider-thumb-padding-mobile: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.slider-with-thumbs .slider-prev-btn,
.slider-with-thumbs .slider-next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: var(--dark, #2D2D2D);
}
.slider-with-thumbs .slider-prev-btn:hover,
.slider-with-thumbs .slider-next-btn:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}
.slider-with-thumbs .slider-prev-btn:disabled,
.slider-with-thumbs .slider-next-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.slider-with-thumbs .slider-prev-btn i, .slider-with-thumbs .slider-prev-btn svg,
.slider-with-thumbs .slider-next-btn i,
.slider-with-thumbs .slider-next-btn svg {
  font-size: 1.5rem;
}
.slider-with-thumbs .slider-prev-btn {
  left: 0;
}
.slider-with-thumbs .slider-next-btn {
  right: 0;
}
.slider-with-thumbs .main-slider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--slider-main-max-height);
  max-height: var(--slider-main-max-height);
}
.slider-with-thumbs .main-slider .slider {
  width: 100%;
  height: 100%;
  position: relative;
}
.slider-with-thumbs .main-slider .slider-track {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.slider-with-thumbs .main-slider .slide {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}
.slider-with-thumbs .main-slider .slide.active {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
.slider-with-thumbs .main-slider .slide img {
  display: block;
  margin: 0 auto;
  max-height: var(--slider-main-max-height);
  width: auto;
  object-fit: contain;
}
.slider-with-thumbs .thumb-slider {
  width: 100%;
  max-width: var(--slider-thumb-max-width);
  margin-top: 1rem;
}
.slider-with-thumbs .thumb-slider .slider-track {
  display: flex;
  gap: var(--slider-thumb-gap);
  justify-content: center;
}
.slider-with-thumbs .thumb-slider .slider-track .slide {
  flex: 0 0 var(--slider-thumb-width);
  min-height: 72px;
  cursor: pointer;
  opacity: 0.6;
  outline: 2px solid transparent;
  outline-offset: -2px;
  border-radius: 0.375rem;
  padding: var(--slider-thumb-padding);
  background-color: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.slider-with-thumbs .thumb-slider .slider-track .slide:hover {
  opacity: 0.8;
}
.slider-with-thumbs .thumb-slider .slider-track .slide.active {
  opacity: 1;
  outline-color: var(--accent);
}
.slider-with-thumbs .thumb-slider .slider-track .slide img {
  width: 100%;
  height: var(--slider-thumb-img-height);
  min-height: 72px;
  object-fit: contain;
  border-radius: 0.25rem;
  display: block;
}
.slider-with-thumbs .thumb-slider .slider-nav {
  width: 2rem;
  height: 2rem;
  font-size: 1.25rem;
}

.slider-cards {
  padding: 2rem 0;
}
.slider-cards .slider-track {
  gap: 1.5rem;
  padding: 0 1rem;
}
.slider-cards .slider-track .slide {
  flex: 0 0 350px;
}
.slider-cards .slider-track .card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: all 0.3s ease;
}
.slider-cards .slider-track .card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.slider-fullscreen {
  height: 100vh;
  border-radius: 0;
}
.slider-fullscreen .slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  position: relative;
}
.slider-fullscreen .slide .slide-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 2rem;
}
.slider-fullscreen .slide .slide-content h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.slider-fullscreen .slide .slide-content p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: 2rem;
}

.slider-autoplay .slider-pagination .dot.active {
  position: relative;
}
.slider-autoplay .slider-pagination .dot.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 2px solid white;
  border-radius: 50%;
  animation: autoplay-progress 5s linear;
}

@keyframes autoplay-progress {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
.slider-counter {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
}

.slider-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 10;
}
.slider-progress .progress-bar {
  height: 100%;
  background: var(--primary-color, #007acc);
  transition: width 0.3s ease;
}

.slider .slide[data-lazy] {
  background: var(--background-color, #f3f4f6);
  min-height: 400px;
}
.slider .slide[data-lazy] img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slider .slide[data-lazy] img.loaded {
  opacity: 1;
}
.slider .slide[data-lazy]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--border-color, #e5e7eb);
  border-top-color: var(--primary-color, #007acc);
  border-radius: 50%;
  animation: slider-spin 0.8s linear infinite;
}
img.loaded + .slider .slide[data-lazy]::before {
  display: none;
}

@keyframes slider-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.slider-3d {
  perspective: 1000px;
  height: 400px;
}
.slider-3d .slider-track {
  transform-style: preserve-3d;
  position: relative;
  height: 100%;
}
.slider-3d .slider-track .slide {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: center;
  transition: all 0.5s ease;
  backface-visibility: hidden;
}

.slider-testimonials {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1rem;
}
.slider-testimonials .slide {
  text-align: center;
}
.slider-testimonials .slide .quote {
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--text-color, #374151);
  margin-bottom: 2rem;
  font-style: italic;
}
.slider-testimonials .slide .quote::before {
  content: '"';
  font-size: 3rem;
  color: var(--primary-color, #007acc);
  line-height: 0;
  vertical-align: -0.4em;
}
.slider-testimonials .slide .quote::after {
  content: '"';
  font-size: 3rem;
  color: var(--primary-color, #007acc);
  line-height: 0;
  vertical-align: -0.4em;
}
.slider-testimonials .slide .author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.slider-testimonials .slide .author .avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}
.slider-testimonials .slide .author .info {
  text-align: left;
}
.slider-testimonials .slide .author .info .name {
  font-weight: 600;
  color: var(--text-color, #111827);
}
.slider-testimonials .slide .author .info .title {
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
}

.slider-logos .slider-track {
  align-items: center;
  gap: 3rem;
  padding: 2rem 1rem;
}
.slider-logos .slider-track .slide {
  flex: 0 0 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-logos .slider-track .slide img {
  max-width: 100%;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.3s ease;
}
.slider-logos .slider-track .slide img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.slider-logos.slider-infinite .slider-track {
  animation: logo-scroll 30s linear infinite;
}
.slider-logos.slider-infinite:hover .slider-track {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@media (max-width: 1024px) {
  .slider-multi .slide {
    flex: 0 0 calc(50% - 0.5rem);
  }
  .slider-multi.slider-4 .slide, .slider-multi.slider-5 .slide {
    flex: 0 0 calc(33.333% - 0.667rem);
  }
  .slider-center {
    padding: 0 10%;
  }
  .slider-with-thumbs .main-slider {
    height: var(--slider-main-max-height-tablet);
    max-height: var(--slider-main-max-height-tablet);
  }
  .slider-with-thumbs .main-slider .slide img {
    max-height: var(--slider-main-max-height-tablet);
  }
}
@media (max-width: 767px) {
  .slider .slider-nav {
    width: 2.5rem;
    height: 2.5rem;
  }
  .slider .slider-nav.prev {
    left: 0.5rem;
  }
  .slider .slider-nav.next {
    right: 0.5rem;
  }
  .slider .slider-nav::before {
    font-size: 1.5rem;
  }
  .slider .slider-pagination {
    bottom: 0.5rem;
    gap: 0.375rem;
  }
  .slider .slider-pagination .dot {
    width: 0.625rem;
    height: 0.625rem;
  }
  .slider-multi .slide {
    flex: 0 0 100%;
  }
  .slider-multi.slider-2 .slide {
    flex: 0 0 100%;
  }
  .slider-center {
    padding: 0 5%;
  }
  .slider-with-thumbs {
    --slider-main-max-height: var(--slider-main-max-height-mobile);
  }
  .slider-with-thumbs .main-slider {
    height: var(--slider-main-max-height-mobile);
    max-height: var(--slider-main-max-height-mobile);
  }
  .slider-with-thumbs .main-slider .slide img {
    max-height: var(--slider-main-max-height-mobile);
  }
  .slider-with-thumbs .thumb-slider .slide {
    flex: 0 0 var(--slider-thumb-width-mobile);
    padding: var(--slider-thumb-padding-mobile);
  }
  .slider-with-thumbs .thumb-slider .slide img {
    height: var(--slider-thumb-img-height-mobile);
  }
  .slider-cards .slider-track {
    gap: 1rem;
  }
  .slider-cards .slider-track .slide {
    flex: 0 0 280px;
  }
  .slider-vertical {
    height: 400px;
  }
  .slider-testimonials {
    padding: 2rem 1rem;
  }
  .slider-testimonials .slide .quote {
    font-size: 1rem;
  }
  .slider-logos .slider-track {
    gap: 2rem;
  }
  .slider-logos .slider-track .slide {
    flex: 0 0 120px;
  }
}
@media print {
  .slider-nav,
  .slider-pagination,
  .slider-counter {
    display: none !important;
  }
  .slider .slider-track {
    display: block;
  }
  .slider .slider-track .slide {
    page-break-inside: avoid;
    position: relative !important;
    opacity: 1 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slider .slider-track,
  .slider-fade .slide,
  .slider-center .slide,
  .slider-logos .slider-track {
    transition: none !important;
    animation: none !important;
  }
  .slider .slider-nav:hover,
  .slider-cards .card:hover {
    transform: none !important;
  }
}
/*
============================================
Tabs Component
============================================
Tabbed navigation and content panels

Base Classes: .tabs, .tab-list, .tab-panel
Variants: .tabs-vertical, .tabs-pills

Usage:
<div class="tabs">
    <div class="tab-list">
        <button class="tab active">Tab 1</button>
        <button class="tab">Tab 2</button>
    </div>
    <div class="tab-panels">
        <div class="tab-panel active">Content 1</div>
        <div class="tab-panel">Content 2</div>
    </div>
</div>

Combine with utilities:
- Layout: flex-*, grid-*
- Colors: bg-*, text-*, border-*
- Spacing: m-*, p-*
============================================
*/
.tabs {
  width: 100%;
}
.tabs .tab-list {
  display: flex;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
  margin-bottom: 1.5rem;
  gap: 0.5rem;
}
.tabs .tab-list .tab {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-color, #6b7280);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  margin-bottom: -2px;
}
.tabs .tab-list .tab:hover {
  color: var(--text-color, #374151);
  border-bottom-color: var(--border-color, #d1d5db);
}
.tabs .tab-list .tab.active {
  color: var(--primary-color, #007acc);
  border-bottom-color: var(--primary-color, #007acc);
}
.tabs .tab-list .tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.tabs .tab-panels .tab-panel {
  display: none;
}
.tabs .tab-panels .tab-panel.active {
  display: block;
  animation: tab-fade-in 0.3s ease;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tabs-pills .tab-list {
  border-bottom: none;
  margin-bottom: 1.5rem;
  background: var(--background-color, #f9fafb);
  padding: 0.375rem;
  border-radius: 0.5rem;
}
.tabs-pills .tab-list .tab {
  border-radius: 0.375rem;
  border: none;
  margin-bottom: 0;
}
.tabs-pills .tab-list .tab:hover {
  background: rgba(0, 0, 0, 0.05);
}
.tabs-pills .tab-list .tab.active {
  background: white;
  color: var(--primary-color, #007acc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tabs-bordered .tab-list {
  border: 1px solid var(--border-color, #e5e7eb);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  background: var(--background-color, #f9fafb);
  padding: 0;
  gap: 0;
  margin-bottom: 0;
}
.tabs-bordered .tab-list .tab {
  flex: 1;
  text-align: center;
  border-right: 1px solid var(--border-color, #e5e7eb);
  margin-bottom: 0;
  border-bottom: none;
}
.tabs-bordered .tab-list .tab:last-child {
  border-right: none;
}
.tabs-bordered .tab-list .tab:first-child {
  border-radius: 0.5rem 0 0 0;
}
.tabs-bordered .tab-list .tab:last-child {
  border-radius: 0 0.5rem 0 0;
}
.tabs-bordered .tab-list .tab.active {
  background: white;
  border-bottom: 2px solid white;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}
.tabs-bordered .tab-panels {
  border: 1px solid var(--border-color, #e5e7eb);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 1.5rem;
}

.tabs-vertical {
  display: flex;
  gap: 1.5rem;
}
.tabs-vertical .tab-list {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--border-color, #e5e7eb);
  margin-bottom: 0;
  margin-right: 0;
  min-width: 200px;
  gap: 0.25rem;
}
.tabs-vertical .tab-list .tab {
  text-align: left;
  border-bottom: none;
  border-right: 2px solid transparent;
  margin-bottom: 0;
  margin-right: -2px;
}
.tabs-vertical .tab-list .tab:hover {
  border-bottom-color: transparent;
  border-right-color: var(--border-color, #d1d5db);
}
.tabs-vertical .tab-list .tab.active {
  border-bottom-color: transparent;
  border-right-color: var(--primary-color, #007acc);
}
.tabs-vertical .tab-panels {
  flex: 1;
}

.tabs-icon .tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tabs-icon .tab i, .tabs-icon .tab svg {
  width: 1.125rem;
  height: 1.125rem;
}
.tabs-icon .tab.icon-only {
  padding: 0.75rem 1rem;
}
.tabs-icon .tab.icon-only .tab-text {
  display: none;
}

.tabs-justified .tab-list .tab {
  flex: 1;
  text-align: center;
}

.tabs-centered .tab-list {
  justify-content: center;
}

.tabs-right .tab-list {
  justify-content: flex-end;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin-left: 0.5rem;
  background: var(--background-color, #e5e7eb);
  color: var(--text-color, #6b7280);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.tab.active .tab-badge {
  background: var(--primary-color, #007acc);
  color: white;
}

.tabs-scrollable {
  position: relative;
}
.tabs-scrollable .tab-list {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs-scrollable .tab-list::-webkit-scrollbar {
  display: none;
}
.tabs-scrollable .tab-list .tab {
  flex-shrink: 0;
}
.tabs-scrollable .scroll-btn {
  position: absolute;
  top: 0;
  height: calc(100% - 1.5rem);
  width: 2rem;
  background: linear-gradient(to right, white, transparent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.tabs-scrollable .scroll-btn.scroll-left {
  left: 0;
}
.tabs-scrollable .scroll-btn.scroll-left::before {
  content: "‹";
  font-size: 1.5rem;
}
.tabs-scrollable .scroll-btn.scroll-right {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}
.tabs-scrollable .scroll-btn.scroll-right::before {
  content: "›";
  font-size: 1.5rem;
}
.tabs-scrollable .scroll-btn:disabled {
  opacity: 0;
  pointer-events: none;
}

.tabs-card {
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  padding: 1.5rem;
}
.tabs-card .tab-list {
  margin-bottom: 1.5rem;
}

.tabs-underline .tab-list {
  border-bottom-width: 1px;
  position: relative;
}
.tabs-underline .tab-list::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--primary-color, #007acc);
  transition: all 0.3s ease;
}

.tabs-boxed .tab-list {
  border: none;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.tabs-boxed .tab-list .tab {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
  margin-bottom: 0;
}
.tabs-boxed .tab-list .tab:hover {
  border-color: var(--border-color, #d1d5db);
  border-bottom-color: var(--border-color, #d1d5db);
}
.tabs-boxed .tab-list .tab.active {
  background: var(--primary-color, #007acc);
  color: white;
  border-color: var(--primary-color, #007acc);
  border-bottom-color: var(--primary-color, #007acc);
}

.tabs-minimal .tab-list {
  border: none;
  margin-bottom: 1.5rem;
  gap: 2rem;
}
.tabs-minimal .tab-list .tab {
  padding: 0.5rem 0;
  margin-bottom: 0;
  border: none;
  position: relative;
}
.tabs-minimal .tab-list .tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color, #007acc);
  transition: width 0.3s ease;
}
.tabs-minimal .tab-list .tab:hover::after {
  width: 100%;
}
.tabs-minimal .tab-list .tab.active {
  border: none;
}
.tabs-minimal .tab-list .tab.active::after {
  width: 100%;
}

.tabs-segmented .tab-list {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  padding: 0.25rem;
  margin-bottom: 1.5rem;
  gap: 0.25rem;
  background: var(--background-color, #f9fafb);
}
.tabs-segmented .tab-list .tab {
  border-radius: 0.375rem;
  margin-bottom: 0;
  border: none;
}
.tabs-segmented .tab-list .tab.active {
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tabs-accordion .tab-list {
  display: none;
}
.tabs-accordion .tab-panel {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}
.tabs-accordion .tab-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--background-color, #f9fafb);
  cursor: pointer;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}
.tabs-accordion .tab-panel .panel-header:hover {
  background: var(--background-color, #f3f4f6);
}
.tabs-accordion .tab-panel .panel-header .icon {
  transition: transform 0.2s ease;
}
.tabs-accordion .tab-panel .panel-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 1.5rem;
}
.tabs-accordion .tab-panel.active .panel-header {
  background: white;
  color: var(--primary-color, #007acc);
}
.tabs-accordion .tab-panel.active .panel-header .icon {
  transform: rotate(180deg);
}
.tabs-accordion .tab-panel.active .panel-content {
  max-height: 1000px;
  padding: 1rem 1.5rem 1.5rem;
}

@media (max-width: 767px) {
  .tabs .tab-list {
    gap: 0.25rem;
  }
  .tabs .tab-list .tab {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  .tabs-vertical {
    flex-direction: column;
  }
  .tabs-vertical .tab-list {
    flex-direction: row;
    border-right: none;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    min-width: auto;
    margin-right: 0;
    margin-bottom: 1.5rem;
    overflow-x: auto;
  }
  .tabs-vertical .tab-list .tab {
    flex-shrink: 0;
    border-right: none;
    border-bottom: 2px solid transparent;
    margin-right: 0;
    margin-bottom: -2px;
  }
  .tabs-vertical .tab-list .tab:hover, .tabs-vertical .tab-list .tab.active {
    border-right-color: transparent;
    border-bottom-color: var(--primary-color, #007acc);
  }
  .tabs-justified .tab-list {
    overflow-x: auto;
  }
  .tabs-justified .tab-list .tab {
    flex-shrink: 0;
    min-width: 100px;
  }
  .tabs-scrollable .scroll-btn {
    display: none;
  }
  .tabs-mobile-accordion .tab-list {
    display: none;
  }
  .tabs-mobile-accordion .tab-panels .tab-panel {
    display: block;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
  }
  .tabs-mobile-accordion .tab-panels .tab-panel .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--background-color, #f9fafb);
    cursor: pointer;
    font-weight: 500;
  }
  .tabs-mobile-accordion .tab-panels .tab-panel .panel-header::after {
    content: "›";
    font-size: 1.25rem;
    transition: transform 0.2s ease;
  }
  .tabs-mobile-accordion .tab-panels .tab-panel .panel-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .tabs-mobile-accordion .tab-panels .tab-panel.active .panel-header::after {
    transform: rotate(90deg);
  }
  .tabs-mobile-accordion .tab-panels .tab-panel.active .panel-content {
    max-height: 1000px;
    padding: 1rem;
  }
}
@media print {
  .tab-list {
    display: none !important;
  }
  .tab-panels .tab-panel {
    display: block !important;
    page-break-inside: avoid;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tab-panel.active,
  .tabs-underline .tab-list::after,
  .tabs-minimal .tab::after {
    animation: none !important;
    transition: none !important;
  }
}
/*
============================================
Accordion Component
============================================
Collapsible content panels

Base Classes: .accordion, .accordion-item
Variants: .accordion-flush, .accordion-bordered

Usage:
<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">Header</button>
        <div class="accordion-content">Content</div>
    </div>
</div>

Combine with utilities:
- Colors: bg-*, text-*, border-*
- Spacing: m-*, p-*
- Display: flex-*, block
============================================
*/
.accordion {
  width: 100%;
}
.accordion .accordion-item {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.accordion .accordion-item .accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--background-color, #f9fafb);
  border: none;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-color, #111827);
  cursor: pointer;
  transition: all 0.2s ease;
}
.accordion .accordion-item .accordion-header:hover {
  background: var(--background-color, #f3f4f6);
}
.accordion .accordion-item .accordion-header .icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease;
  color: var(--text-color, #6b7280);
}
.accordion .accordion-item .accordion-header .icon::before {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
}
.accordion .accordion-item .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 1.5rem;
}
.accordion .accordion-item .accordion-content .content-inner {
  padding: 1rem 0;
}
.accordion .accordion-item.active .accordion-header {
  background: white;
  color: var(--primary-color, #007acc);
}
.accordion .accordion-item.active .accordion-header .icon {
  transform: rotate(45deg);
  color: var(--primary-color, #007acc);
}
.accordion .accordion-item.active .accordion-content {
  max-height: 1000px;
  padding: 0 1.5rem 1rem;
}

.accordion-flush .accordion-item {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  margin-bottom: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: none;
}
.accordion-flush .accordion-item .accordion-header {
  background: transparent;
  padding: 1.25rem 0;
}
.accordion-flush .accordion-item .accordion-header:hover {
  background: transparent;
  color: var(--primary-color, #007acc);
}
.accordion-flush .accordion-item .accordion-content {
  padding: 0;
}
.accordion-flush .accordion-item .accordion-content .content-inner {
  padding: 0 0 1.25rem;
}
.accordion-flush .accordion-item.active .accordion-header {
  background: transparent;
}
.accordion-flush .accordion-item.active .accordion-content {
  padding: 0;
}

.accordion-bordered {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
}
.accordion-bordered .accordion-item {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  margin-bottom: 0;
}
.accordion-bordered .accordion-item:last-child {
  border-bottom: none;
}

.accordion-arrows .accordion-item .accordion-header .icon::before {
  content: "›";
  font-size: 1.5rem;
  transform: rotate(0deg);
  display: block;
}
.accordion-arrows .accordion-item.active .accordion-header .icon {
  transform: rotate(90deg);
}

.accordion-chevron .accordion-item .accordion-header .icon::before {
  content: "⌄";
  font-size: 1.25rem;
}
.accordion-chevron .accordion-item.active .accordion-header .icon {
  transform: rotate(180deg);
}

.accordion-plus-minus .accordion-item .accordion-header .icon::before {
  content: "+";
}
.accordion-plus-minus .accordion-item.active .accordion-header .icon {
  transform: rotate(0deg);
}
.accordion-plus-minus .accordion-item.active .accordion-header .icon::before {
  content: "−";
}

.accordion-shadow .accordion-item {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease;
}
.accordion-shadow .accordion-item:hover, .accordion-shadow .accordion-item.active {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.accordion-primary .accordion-item.active .accordion-header {
  background: var(--primary-color, #007acc);
  color: white;
}
.accordion-primary .accordion-item.active .accordion-header .icon {
  color: white;
}

.accordion-secondary .accordion-item.active .accordion-header {
  background: var(--secondary-color, #6b7280);
  color: white;
}
.accordion-secondary .accordion-item.active .accordion-header .icon {
  color: white;
}

.accordion-minimal .accordion-item {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}
.accordion-minimal .accordion-item .accordion-header {
  background: transparent;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.accordion-minimal .accordion-item .accordion-header:hover {
  background: transparent;
}
.accordion-minimal .accordion-item .accordion-content {
  padding: 0;
}
.accordion-minimal .accordion-item .accordion-content .content-inner {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.accordion-minimal .accordion-item.active .accordion-header {
  background: transparent;
  border-bottom-color: transparent;
}
.accordion-minimal .accordion-item:last-child .content-inner {
  border-bottom: none;
}

.accordion-card .accordion-item {
  border: 1px solid var(--border-color, #e5e7eb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.accordion-card .accordion-item .accordion-header {
  background: white;
}
.accordion-card .accordion-item .accordion-header:hover {
  background: var(--background-color, #f9fafb);
}
.accordion-card .accordion-item.active {
  border-color: var(--primary-color, #007acc);
}
.accordion-card .accordion-item.active .accordion-header {
  background: white;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.accordion-with-icon .accordion-header .header-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
  color: var(--text-color, #6b7280);
}
.accordion-with-icon .accordion-item.active .accordion-header .header-icon {
  color: var(--primary-color, #007acc);
}

.accordion-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin-left: 0.5rem;
  background: var(--background-color, #e5e7eb);
  color: var(--text-color, #6b7280);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.accordion-item.active .accordion-badge {
  background: var(--primary-color, #007acc);
  color: white;
}

.accordion-faq {
  max-width: 800px;
  margin: 0 auto;
}
.accordion-faq .accordion-item .accordion-header {
  font-size: 1rem;
  font-weight: 600;
  padding: 1.25rem 1.5rem;
}
.accordion-faq .accordion-item .accordion-header::before {
  content: "Q: ";
  color: var(--primary-color, #007acc);
  font-weight: 700;
  margin-right: 0.5rem;
}
.accordion-faq .accordion-item .accordion-content .content-inner {
  padding: 1.25rem 1.5rem;
}
.accordion-faq .accordion-item .accordion-content .content-inner::before {
  content: "A: ";
  color: var(--secondary-color, #6b7280);
  font-weight: 700;
  margin-right: 0.5rem;
}
.accordion-faq .accordion-item.active .accordion-content {
  padding: 0 0 0 1.5rem;
}

.accordion-nested .accordion-item .accordion-content .accordion {
  margin-top: 0.75rem;
}
.accordion-nested .accordion-item .accordion-content .accordion .accordion-item {
  background: var(--background-color, #f9fafb);
  margin-bottom: 0.5rem;
}
.accordion-nested .accordion-item .accordion-content .accordion .accordion-item .accordion-header {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.accordion-nested .accordion-item .accordion-content .accordion .accordion-item .accordion-content {
  padding: 0 1rem;
}
.accordion-nested .accordion-item .accordion-content .accordion .accordion-item .accordion-content .content-inner {
  padding: 0.75rem 0;
}
.accordion-nested .accordion-item .accordion-content .accordion .accordion-item.active .accordion-content {
  padding: 0 1rem 0.75rem;
}

.accordion-timeline {
  position: relative;
  padding-left: 2.5rem;
}
.accordion-timeline::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color, #e5e7eb);
}
.accordion-timeline .accordion-item {
  position: relative;
  border: none;
  border-radius: 0;
}
.accordion-timeline .accordion-item::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 1.25rem;
  width: 1rem;
  height: 1rem;
  background: white;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 50%;
  z-index: 1;
}
.accordion-timeline .accordion-item.active::before {
  background: var(--primary-color, #007acc);
  border-color: var(--primary-color, #007acc);
}
.accordion-timeline .accordion-item .accordion-header {
  background: transparent;
  padding: 1rem 0;
}
.accordion-timeline .accordion-item .accordion-content {
  padding: 0;
  margin-bottom: 1.5rem;
}
.accordion-timeline .accordion-item .accordion-content .content-inner {
  padding: 0.5rem 0 1rem;
}

@media (max-width: 767px) {
  .accordion .accordion-item .accordion-header {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
  }
  .accordion .accordion-item .accordion-content {
    padding: 0 1rem;
  }
  .accordion .accordion-item .accordion-content .content-inner {
    padding: 0.75rem 0;
  }
  .accordion .accordion-item.active .accordion-content {
    padding: 0 1rem 0.875rem;
  }
  .accordion-faq .accordion-item .accordion-header {
    font-size: 0.9375rem;
    padding: 1rem;
  }
  .accordion-faq .accordion-item .accordion-content .content-inner {
    padding: 1rem;
  }
  .accordion-timeline {
    padding-left: 2rem;
  }
  .accordion-timeline .accordion-item::before {
    left: -1.375rem;
    width: 0.75rem;
    height: 0.75rem;
  }
}
@media print {
  .accordion .accordion-item {
    border: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 1rem;
    page-break-inside: avoid;
  }
  .accordion .accordion-item .accordion-header .icon {
    display: none;
  }
  .accordion .accordion-item .accordion-content {
    max-height: none !important;
    padding: 1rem 1.5rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .accordion-item .accordion-header,
  .accordion-item .accordion-header .icon,
  .accordion-item .accordion-content {
    transition: none !important;
  }
}
/*
============================================
Product Tabs Component
============================================
Specialized tabs for product cards with outline/solid styling

Base Classes: .product-tabs
Sub-classes: .tab-buttons, .tab-btn, .tab-panes, .tab-pane

Styling:
- Inactive tabs: outline border with text
- Active tabs: solid fill background with white text
- Uses Remko design tokens (charcoal, accent, light)

Usage:
<div class="product-tabs" data-tabs="unique-id">
    <div class="tab-buttons flex gap-3">
        <button class="tab-btn active" data-tab="key-features">
            Key Features
        </button>
        <button class="tab-btn" data-tab="specifications">
            Specifications
        </button>
    </div>

    <div class="tab-panes m-t-4">
        <div class="tab-pane active" data-tab-content="key-features">
            Content here
        </div>
        <div class="tab-pane" data-tab-content="specifications">
            Content here
        </div>
    </div>
</div>
============================================
*/
.product-card {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.product-card-image {
  max-height: 200px;
  height: auto;
}

.product-tabs {
  width: 100%;
}
.product-tabs .tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}
.product-tabs .tab-buttons .tab-btn {
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--gray-300, #d1d5db);
  background: transparent;
  color: var(--gray-600, #4b5563);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.product-tabs .tab-buttons .tab-btn:hover {
  opacity: 0.8;
  border-color: var(--gray-500, #6b7280);
  color: var(--gray-700, #374151);
}
.product-tabs .tab-buttons .tab-btn.active {
  background: var(--charcoal, #222);
  color: var(--light, #fff);
  border-color: var(--charcoal, #222);
}
.product-tabs .tab-buttons .tab-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.product-tabs .tab-panes {
  text-align: left;
}
.product-tabs .tab-panes .tab-pane {
  display: none;
  animation: tab-fade-in 0.3s ease;
}
.product-tabs .tab-panes .tab-pane.active {
  display: block;
}

@keyframes tab-fade-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  .product-tabs .tab-buttons {
    gap: 0.5rem;
  }
  .product-tabs .tab-buttons .tab-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-tabs .tab-pane.active {
    animation: none;
  }
}
/*
============================================
Footer Component
============================================
Website footer with multiple layouts

Base Classes: .footer, .footer-content
Variants: .footer-simple, .footer-columns

Usage:
<footer class="footer">
    <div class="footer-content">
        <div class="footer-columns">
            <div class="footer-column">...</div>
        </div>
    </div>
</footer>

Combine with utilities:
- Colors: bg-*, text-*
- Spacing: p-*, m-*
- Typography: text-*
============================================
*/
.footer {
  width: 100%;
  background: var(--background-color, #1f2937);
  color: #d1d5db;
  padding: 3rem 0 1.5rem;
  margin-top: auto;
}
.footer .footer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
.footer .footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}
.footer .footer-column .footer-title {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1rem;
}
.footer .footer-column .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer .footer-column .footer-links li {
  margin-bottom: 0.75rem;
}
.footer .footer-column .footer-links li a {
  color: #d1d5db;
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s ease;
}
.footer .footer-column .footer-links li a:hover {
  color: white;
}
.footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer .footer-bottom .footer-copyright {
  font-size: 0.875rem;
  color: #9ca3af;
}
.footer .footer-bottom .footer-social {
  display: flex;
  gap: 1rem;
}
.footer .footer-bottom .footer-social a {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}
.footer .footer-bottom .footer-social a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.footer-simple {
  padding: 2rem 0;
}
.footer-simple .footer-content {
  text-align: center;
}
.footer-simple .footer-columns {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.footer-simple .footer-column .footer-links {
  display: flex;
  gap: 1.5rem;
}
.footer-simple .footer-column .footer-links li {
  margin-bottom: 0;
}
.footer-simple .footer-bottom {
  border-top: none;
  padding-top: 0;
  flex-direction: column;
  gap: 1rem;
}

.footer-minimal {
  padding: 1.5rem 0;
  background: transparent;
  border-top: 1px solid var(--border-color, #e5e7eb);
}
.footer-minimal .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-minimal .footer-columns,
.footer-minimal .footer-bottom {
  display: none;
}
.footer-minimal .footer-copyright {
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
}
.footer-minimal .footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-minimal .footer-links a {
  color: var(--text-color, #6b7280);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}
.footer-minimal .footer-links a:hover {
  color: var(--text-color, #111827);
}

.footer-large {
  padding: 4rem 0 2rem;
}
.footer-large .footer-brand {
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer-large .footer-brand img {
  height: 2.5rem;
  width: auto;
}
.footer-large .footer-brand .brand-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}
.footer-large .footer-description {
  max-width: 400px;
  color: #9ca3af;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.footer-large .footer-newsletter {
  max-width: 400px;
}
.footer-large .footer-newsletter .newsletter-title {
  font-size: 1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.75rem;
}
.footer-large .footer-newsletter .newsletter-form {
  display: flex;
  gap: 0.5rem;
}
.footer-large .footer-newsletter .newsletter-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 0.9375rem;
}
.footer-large .footer-newsletter .newsletter-form input::placeholder {
  color: #9ca3af;
}
.footer-large .footer-newsletter .newsletter-form input:focus {
  outline: none;
  border-color: var(--primary-color, #007acc);
}
.footer-large .footer-newsletter .newsletter-form button {
  padding: 0.75rem 1.5rem;
  background: var(--primary-color, #007acc);
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.footer-large .footer-newsletter .newsletter-form button:hover {
  background: var(--primary-color-dark, #0066aa);
}

.footer-cta {
  position: relative;
}
.footer-cta .footer-cta-section {
  background: var(--primary-color, #007acc);
  padding: 3rem;
  border-radius: 1rem;
  margin-bottom: 3rem;
  text-align: center;
}
.footer-cta .footer-cta-section .cta-title {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}
.footer-cta .footer-cta-section .cta-description {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
}
.footer-cta .footer-cta-section .cta-button {
  display: inline-flex;
  padding: 0.875rem 2rem;
  background: white;
  color: var(--primary-color, #007acc);
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-cta .footer-cta-section .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.footer-sticky {
  position: sticky;
  bottom: 0;
  z-index: 50;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.footer-logos .logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 2rem;
}
.footer-logos .logo-grid img {
  height: 2rem;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  filter: grayscale(100%);
}
.footer-logos .logo-grid img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

.footer-apps {
  margin-top: 1.5rem;
}
.footer-apps .apps-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  margin-bottom: 0.75rem;
}
.footer-apps .app-badges {
  display: flex;
  gap: 0.75rem;
}
.footer-apps .app-badges a {
  display: block;
  transition: transform 0.2s ease;
}
.footer-apps .app-badges a:hover {
  transform: translateY(-2px);
}
.footer-apps .app-badges a img {
  height: 2.5rem;
  width: auto;
}

.footer-payment {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.footer-payment .payment-label {
  font-size: 0.875rem;
  color: #9ca3af;
}
.footer-payment .payment-icons {
  display: flex;
  gap: 0.75rem;
}
.footer-payment .payment-icons img {
  height: 1.5rem;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.footer-payment .payment-icons img:hover {
  opacity: 1;
}

.footer-language .language-selector {
  position: relative;
  display: inline-block;
}
.footer-language .language-selector select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.375rem;
  color: white;
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
}
.footer-language .language-selector select:focus {
  outline: none;
  border-color: var(--primary-color, #007acc);
}
.footer-language .language-selector::after {
  content: "⌄";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: white;
}

.footer-contact .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.footer-contact .contact-item .icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--primary-color, #007acc);
  margin-top: 0.125rem;
}
.footer-contact .contact-item a {
  color: #d1d5db;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-contact .contact-item a:hover {
  color: white;
}

.footer-light {
  background: var(--background-color, #f9fafb);
  color: var(--text-color, #374151);
}
.footer-light .footer-column .footer-title {
  color: var(--text-color, #111827);
}
.footer-light .footer-column .footer-links a {
  color: var(--text-color, #6b7280);
}
.footer-light .footer-column .footer-links a:hover {
  color: var(--text-color, #111827);
}
.footer-light .footer-bottom {
  border-top-color: var(--border-color, #e5e7eb);
}
.footer-light .footer-bottom .footer-copyright {
  color: var(--text-color, #6b7280);
}
.footer-light .footer-bottom .footer-social a {
  color: var(--text-color, #6b7280);
}
.footer-light .footer-bottom .footer-social a:hover {
  color: var(--text-color, #111827);
  background: var(--background-color, #f3f4f6);
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
  }
}
@media (max-width: 1024px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-logos .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 767px) {
  .footer {
    padding: 2rem 0 1rem;
  }
  .footer-columns {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .footer-simple .footer-column .footer-links {
    flex-direction: column;
    gap: 0.75rem;
  }
  .footer-minimal .footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  .footer-minimal .footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-large {
    padding: 2.5rem 0 1.5rem;
  }
  .footer-large .footer-brand {
    margin-bottom: 2rem;
  }
  .footer-large .footer-newsletter .newsletter-form {
    flex-direction: column;
  }
  .footer-large .footer-newsletter .newsletter-form button {
    width: 100%;
  }
  .footer-cta .footer-cta-section {
    padding: 2rem 1.5rem;
  }
  .footer-cta .footer-cta-section .cta-title {
    font-size: 1.5rem;
  }
  .footer-cta .footer-cta-section .cta-description {
    font-size: 1rem;
  }
  .footer-logos .logo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .footer-payment {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}
@media print {
  .footer {
    background: white !important;
    color: black !important;
    border-top: 1px solid #000;
    padding: 1rem 0;
  }
  .footer-social,
  .footer-newsletter,
  .footer-cta-section,
  .footer-apps {
    display: none !important;
  }
  .footer-columns {
    display: none !important;
  }
  .footer-bottom {
    border-top: none !important;
    display: block !important;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-column .footer-links a,
  .footer-social a,
  .footer-cta-section .cta-button,
  .footer-logos .logo-grid img,
  .footer-apps .app-badges a {
    transition: none !important;
  }
}
/* Mega menu styles for header */
/* Resources dropdown - second to last nav-item */
.nav-item:nth-last-child(2) {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: #2c2c2c;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
  font-weight: 400;
}
.nav-link:hover {
  background-color: #9eb221;
  color: #2c2c2c;
}
.nav-link:focus-visible {
  outline: 2px solid #2c2c2c;
  outline-offset: 2px;
}
.nav-link.active, .dropdown.active .nav-link {
  background-color: #9eb221;
  color: #2c2c2c;
}

.dropdown-arrow {
  transition: transform 0.2s ease-in-out;
  transform: rotate(-90deg);
}
.dropdown.active .dropdown-arrow {
  transform: rotate(0deg);
}

.dropdown-menu:not(.mega-menu) {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
  z-index: 1000;
  border: 1px solid #e5e7eb;
}

.dropdown.active .dropdown-menu:not(.mega-menu) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
}

.dropdown-link {
  display: block;
  padding: 0.75rem 1rem;
  color: #111827;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
  line-height: 1.5;
}
.dropdown-link:hover {
  background-color: #e5e7eb;
  color: #111827;
}

.submenu-link {
  display: block;
  padding: 0.5rem 0.75rem;
  color: #111827;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
}
.submenu-link:hover {
  background-color: #e5e7eb;
  color: #111827;
}

.mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max(100%, 800px);
  min-width: 800px;
  max-width: min(1200px, 100vw - 2rem);
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease-in-out;
  z-index: 1000;
  border: none;
  overflow: visible;
}
.dropdown.active .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(10px);
  border-radius: 10px;
}
.mega-menu.is-open {
  border-radius: 0.5rem;
}

.mega-menu-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-radius: 12px;
  overflow: hidden;
}

.mega-menu-sidebar {
  background-color: #1f2937;
  border-right: 1px solid #374151;
  padding: 0.5rem;
}

.mega-category-item {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  color: #fff;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border-radius: 0.25rem;
}
.mega-category-item:hover {
  background-color: #4b5563;
  color: #fff;
}
.mega-category-item.active {
  background-color: #C1D82F;
  color: #2c2c2c;
  font-weight: 600;
  position: relative;
}
.mega-category-item.active::after {
  content: "›";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%) scale(1.2);
  font-size: 1.125rem;
  color: #2c2c2c;
  font-weight: 700;
}

.mega-category-title {
  display: block;
}

.mega-menu-content {
  padding: 0.5rem;
  background: #fff;
}

.mega-content-section {
  display: none;
}
.mega-content-section.active {
  display: block;
}

.mega-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}
@media (min-width: 1201px) {
  .mega-content-header {
    cursor: pointer;
  }
  .mega-content-header h3 {
    text-decoration: underline;
    transition: color 0.2s ease-in-out;
  }
  .mega-content-header h3:hover {
    color: #C1D82F;
  }
}
.mega-content-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

.see-all-link {
  color: #C1D82F;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}
.see-all-link:hover {
  color: #97a82e;
}

.mega-content-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}

.mega-content-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  color: #4b5563;
  text-decoration: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 300;
  transition: all 0.2s ease-in-out;
}
.mega-content-link:hover {
  background-color: #e5e7eb;
  color: #111827;
  border-color: #d1d5db;
}
.mega-content-link--disabled, .mega-content-link[aria-disabled=true] {
  color: var(--gray-400);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.mega-content-link--disabled:hover, .mega-content-link[aria-disabled=true]:hover {
  background-color: transparent;
  color: var(--gray-400);
}

.mega-thumbnail {
  width: 75px;
  height: 68px;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

/* Mobile Navigation Menu Styles */
/* ============================================
   Hamburger Button
   ============================================ */
.hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: var(--z-modal, 1000);
}
.hamburger-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 24px;
}

.hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--gray-900);
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* Active state - transform to X */
.hamburger-btn.is-active .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-btn.is-active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.is-active .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   Mobile Navigation Container
   ============================================ */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-overlay, 700);
  visibility: hidden;
}
.mobile-nav.is-active {
  visibility: visible;
}
.mobile-nav.is-active .mobile-nav__overlay {
  opacity: 1;
}
.mobile-nav.is-active .mobile-nav__drawer {
  transform: translateY(0);
}

/* ============================================
   Overlay Backdrop
   ============================================ */
.mobile-nav__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--dark);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ============================================
   Drawer Panel
   ============================================ */
.mobile-nav__drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 90vh;
  background-color: var(--light);
  box-shadow: 0 4px 16px var(--dark-20);
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

/* ============================================
   Drawer Header
   ============================================ */
.mobile-nav__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.mobile-nav__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.mobile-nav__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-700);
  font-size: 1.5rem;
  transition: color 0.2s ease;
}
.mobile-nav__close:hover {
  color: var(--accent);
}
.mobile-nav__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   Mobile Menu List
   ============================================ */
.mobile-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.mobile-menu__item {
  border-bottom: 1px solid var(--gray-200);
}
.mobile-menu__item.has-submenu {
  padding: 0;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem;
  background: none;
  border: none;
  text-align: left;
  color: var(--gray-900);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mobile-menu__link:hover {
  background-color: var(--gray-100);
  color: var(--accent);
}
.mobile-menu__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.mobile-menu__chevron {
  width: 16px;
  height: 16px;
  color: var(--gray-500);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.mobile-menu__item.is-active .mobile-menu__chevron {
  transform: rotate(180deg);
}

/* ============================================
   Mobile Submenu (Accordion)
   ============================================ */
.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  background-color: var(--gray-50);
  transition: max-height 0.3s ease;
}
.mobile-submenu.is-active {
  max-height: 1000px;
}

/* ============================================
   Mobile Pills (Level 2 - Horizontal Tabs)
   ============================================ */
.mobile-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--light);
  border-bottom: 1px solid var(--gray-200);
}

.mobile-pill {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background-color: var(--gray-200);
  color: var(--gray-700);
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.mobile-pill:hover {
  background-color: var(--gray-300);
}
.mobile-pill.active {
  background-color: var(--accent);
  color: var(--light);
}
.mobile-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   Mobile Product List (Level 3)
   ============================================ */
.mobile-product-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-product-list.hide {
  display: none;
}

.mobile-product-link {
  display: block;
  padding: 1rem;
  color: var(--gray-700);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mobile-product-link:hover {
  background-color: var(--gray-100);
  color: var(--accent);
}
.mobile-product-link:last-child {
  border-bottom: none;
}
.mobile-product-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.mobile-submenu__link {
  display: block;
  padding: 1rem;
  color: var(--gray-700);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mobile-submenu__link:hover {
  background-color: var(--gray-100);
  color: var(--accent);
}
.mobile-submenu__link:last-child {
  border-bottom: none;
}
.mobile-submenu__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ============================================
   Responsive Visibility
   ============================================ */
@media (max-width: 1200px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 1201px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
  overflow: hidden;
}

/*
============================================
Header Component
============================================
Page header sections with various layouts

Base Classes: .header, .header-content
Variants: .header-centered, .header-split

Usage:
<header class="header">
    <div class="header-content">
        <h1 class="header-title">Title</h1>
        <p class="header-subtitle">Subtitle</p>
    </div>
</header>

Combine with utilities:
- Colors: bg-*, text-*
- Spacing: p-*, m-*
- Typography: text-*
============================================
*/
.header {
  width: 100%;
  background: #c4d600;
  padding: 0;
  border: none;
  position: relative;
  z-index: 100;
}
.header .header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  width: 100%;
}
.header .logo, .header .site-branding, .header .custom-logo-link {
  display: flex;
  align-items: center;
  grid-column: 1;
  min-width: 120px;
  flex-shrink: 0;
}
.header .logo img, .header .site-branding img, .header .custom-logo-link img {
  height: 80px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.header .custom-logo {
  height: 80px;
  width: auto;
}
.header .site-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
  margin: 0;
}
.header .header-right {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  grid-column: 3;
  justify-self: flex-end;
}
.header .header-right .search-button {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #222;
  transition: all 0.2s ease;
}
.header .header-right .search-button:hover {
  color: #000;
}
.header .header-right .search-button:focus-visible {
  outline: 2px solid #222;
  outline-offset: 2px;
}
.header .header-right .search-button svg {
  width: 20px;
  height: 20px;
}
.header .header-right .cta-button {
  background: #222e38;
  color: #c4d600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header .header-right .cta-button:hover {
  background: #1a2530;
}
.header .header-right .cta-button svg {
  width: 18px;
  height: 18px;
}
.header .header-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-color, #111827);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.header .header-subtitle {
  font-size: 1.125rem;
  color: var(--text-color, #6b7280);
  margin: 0;
  line-height: 1.6;
}
.header .header-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
}
.header .header-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.header .header-meta .meta-item .icon {
  width: 1rem;
  height: 1rem;
}
.header .header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.header .main-nav, .header .main-navigation {
  grid-column: 2;
  justify-self: center;
}
.header .main-nav .menu-toggle, .header .main-navigation .menu-toggle {
  display: none;
}
.header .header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.header .header-actions .header-contact {
  display: flex;
  align-items: center;
}
.header .header-actions .header-contact a {
  color: var(--dark);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.125rem;
}
.header .header-actions .header-contact a:hover {
  color: var(--charcoal);
}
.header .header-actions .search-toggle {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--dark);
}
.header .header-actions .search-toggle:hover {
  color: var(--charcoal);
}
@media (min-width: 1201px) {
  .header .mobile-nav-drawer {
    display: none !important;
  }
}
.header .search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 1000;
}
.header .search-modal.active {
  display: flex;
}
.header .search-modal .search-modal-content {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  max-width: 600px;
  width: 90%;
  position: relative;
}
.header .search-modal .search-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--gray-500);
}
.header .search-modal .search-modal-close:hover {
  color: var(--dark);
}
.header p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1201px) {
  .nav-menu {
    justify-content: end;
  }
}

.nav-primary {
  position: relative;
}

.nav-item.has-mega-menu, .nav-item.has-dropdown {
  position: relative;
}

.nav-link,
.nav-menu a,
.menu-item a,
.elementor-nav-menu a {
  font-weight: 400;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  color: var(--gray-900);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.nav-link[aria-expanded=true] {
  color: var(--dark);
  background-color: #91a223;
  border-radius: 0.375rem;
}
.nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-link[aria-expanded=true] .nav-icon {
  transform: rotate(180deg);
}

@media (max-width: 1200px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 1201px) {
  .hide-desktop {
    display: none !important;
  }
}

body.menu-open {
  overflow: hidden;
}

.header-centered {
  text-align: center;
}
.header-centered .header-content {
  max-width: 800px;
}
.header-centered .header-meta {
  justify-content: center;
}
.header-centered .header-actions {
  justify-content: center;
}

.header-split .header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-split .header-text {
  flex: 1;
}
.header-split .header-actions {
  margin-top: 0;
  margin-left: 2rem;
}

.header-large .header-title {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}
.header-large .header-subtitle {
  font-size: 1.25rem;
  max-width: 700px;
}

.header-small .header-title {
  font-size: 1.875rem;
}
.header-small .header-subtitle {
  font-size: 1rem;
}

.header-dark {
  background: var(--text-color, #1f2937);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.header-dark .header-title {
  color: white;
}
.header-dark .header-subtitle,
.header-dark .header-meta {
  color: #d1d5db;
}

.header-with-breadcrumbs .header-breadcrumbs {
  margin-bottom: 1.5rem;
}

.header-with-tabs {
  padding-bottom: 0;
  border-bottom: none;
}
.header-with-tabs .header-tabs {
  margin-top: 2rem;
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
}
.header-with-tabs .header-tabs .tab {
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-color, #6b7280);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: -2px;
}
.header-with-tabs .header-tabs .tab:hover {
  color: var(--text-color, #111827);
  border-bottom-color: var(--border-color, #d1d5db);
}
.header-with-tabs .header-tabs .tab.active {
  color: var(--primary-color, #007acc);
  border-bottom-color: var(--primary-color, #007acc);
}

.header-with-image {
  padding: 0;
  position: relative;
  background: none;
}
.header-with-image .header-image {
  width: 100%;
  height: 20rem;
  object-fit: cover;
}
.header-with-image .header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  display: flex;
  align-items: flex-end;
  padding: 3rem 0 2rem;
}
.header-with-image .header-content {
  position: relative;
  z-index: 1;
}
.header-with-image .header-title,
.header-with-image .header-subtitle,
.header-with-image .header-meta {
  color: white;
}

.header-pattern {
  position: relative;
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--primary-color-dark, #0066aa) 100%);
}
.header-pattern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.4;
}
.header-pattern .header-content {
  position: relative;
  z-index: 1;
}
.header-pattern .header-title,
.header-pattern .header-subtitle,
.header-pattern .header-meta {
  color: white;
}

.header-gradient {
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, #8b5cf6 100%);
  border-bottom: none;
}
.header-gradient .header-title,
.header-gradient .header-subtitle,
.header-gradient .header-meta {
  color: white;
}

.header-with-avatar .header-avatar-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.header-with-avatar .header-avatar-section .avatar {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.header-with-avatar .header-avatar-section .avatar-info .header-title {
  margin-bottom: 0.25rem;
}
.header-with-avatar .header-avatar-section .avatar-info .header-subtitle .header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.header-with-avatar .header-avatar-section .avatar-info .header-subtitle .header-actions .header-cta-btn {
  background: #222e38;
  color: #c4d600;
  border-radius: 0.75rem;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: none;
  border: none;
  transition: background 0.2s;
}
.header-with-avatar .header-avatar-section .avatar-info .header-subtitle .header-actions .header-cta-btn:hover {
  background: #1a2530;
}
.header-with-avatar .header-avatar-section .avatar-info .header-subtitle .header-actions .header-cta-btn .header-cta-icon {
  color: #c4d600;
  margin-right: 0.5rem;
}
.header-with-avatar .header-avatar-section .avatar-info .header-subtitle .header-actions .header-cta-btn .header-cta-text {
  color: #c4d600;
}
.header-with-avatar .header-avatar-section .avatar-info .header-subtitle {
  margin: 0;
}

.header-with-stats .header-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
}
.header-with-stats .header-stats .stat .stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-color, #111827);
  margin-bottom: 0.25rem;
}
.header-with-stats .header-stats .stat .stat-label {
  font-size: 0.875rem;
  color: var(--text-color, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.header-with-stats.header-dark .header-stats {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.header-with-stats.header-dark .header-stats .stat-value {
  color: white;
}
.header-with-stats.header-dark .header-stats .stat-label {
  color: #d1d5db;
}

.header-with-tags .header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.header-with-tags .header-tags .tag {
  padding: 0.375rem 0.75rem;
  background: var(--background-color, #f3f4f6);
  color: var(--text-color, #374151);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}
.header-with-tags .header-tags .tag:hover {
  background: var(--background-color, #e5e7eb);
}

.header-minimal {
  background: transparent;
  border-bottom: none;
  padding: 2rem 0 1rem;
}
.header-minimal .header-title {
  font-size: 2rem;
  margin-bottom: 0;
}
.header-minimal .header-subtitle {
  display: none;
}

.header-page .header-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--text-color, #6b7280);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s ease;
}
.header-page .header-back:hover {
  color: var(--text-color, #111827);
}
.header-page .header-back::before {
  content: "←";
  font-size: 1.125rem;
}
.header-page.header-dark .header-back {
  color: #d1d5db;
}
.header-page.header-dark .header-back:hover {
  color: white;
}

.header-sticky {
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
  .header-large .header-title {
    font-size: 2.5rem;
  }
  .header-with-stats .header-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  .header-title {
    font-size: 1.75rem !important;
  }
  .header-subtitle {
    font-size: 1rem !important;
  }
  .header-large {
    padding: 2.5rem 0;
  }
  .header-large .header-title {
    font-size: 2rem !important;
  }
  .header-large .header-subtitle {
    font-size: 1rem !important;
  }
  .header-split .header-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-split .header-actions {
    margin-left: 0;
    margin-top: 1.5rem;
  }
  .header-meta {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .header-with-tabs .header-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .header-with-tabs .header-tabs::-webkit-scrollbar {
    display: none;
  }
  .header-with-tabs .header-tabs .tab {
    flex-shrink: 0;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }
  .header-with-image .header-image {
    height: 15rem;
  }
  .header-with-image .header-overlay {
    padding: 2rem 0 1.5rem;
  }
  .header-with-avatar .header-avatar-section .avatar {
    width: 4rem;
    height: 4rem;
  }
  .header-with-stats .header-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }
  .header-with-stats .header-stats .stat .stat-value {
    font-size: 1.5rem;
  }
}
@media print {
  .header {
    background: white !important;
    border-bottom: 1px solid #000 !important;
    padding: 1rem 0 !important;
  }
  .header-actions,
  .header-tabs,
  .header-back {
    display: none !important;
  }
  .header-title,
  .header-subtitle,
  .header-meta {
    color: black !important;
  }
  .header-with-image .header-overlay {
    background: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-tabs .tab,
  .header-tags .tag,
  .header-back {
    transition: none !important;
  }
}
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
}
.breadcrumbs .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.breadcrumbs .breadcrumb-item:not(:last-child)::after {
  content: "»";
  margin: 0 0.5rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.875rem;
}
.breadcrumbs .breadcrumb-item.active {
  pointer-events: none;
  font-weight: 500;
  color: var(--accent);
}
.breadcrumbs .breadcrumb-item i {
  font-size: 1rem;
  margin-right: 0.25rem;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .breadcrumbs .breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
  }
  .breadcrumbs .breadcrumb-item {
    font-size: 0.8125rem;
  }
  .breadcrumbs .breadcrumb-item:not(:last-child)::after {
    margin: 0 0.2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .breadcrumb-item {
    transition: none !important;
  }
}
/*
============================================
Hero Sections Component
============================================
Hero/Banner sections for landing pages

Base Classes: .hero, .hero-content
Variants: .hero-centered, .hero-split

Usage:
<section class="hero">
    <div class="hero-content">
        <h1 class="hero-title">Title</h1>
        <p class="hero-description">Description</p>
        <div class="hero-actions">
            <button>CTA</button>
        </div>
    </div>
</section>

Combine with utilities:
- Background: bg-*, gradient-*
- Spacing: p-*, m-*
- Typography: text-*
============================================
*/
.hero-slideshow {
  position: relative;
}
.hero-slideshow .hero-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 0;
}
.hero-slideshow .hero-slide.active {
  opacity: 1;
  z-index: 1;
}
.hero-slideshow .hero-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}
.hero-slideshow .hero-slide .bg-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-slideshow .hero-slide .bg-media img {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-slideshow .hero-slide .hero-content {
  position: relative;
  z-index: 2;
}

.hero {
  width: 100%;
  min-height: 500px;
  display: flex;
  align-items: center;
  padding: 4rem 0;
  background: linear-gradient(135deg, var(--primary-color, #007acc) 0%, var(--primary-color-dark, #0066aa) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.hero .hero-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  position: relative;
  z-index: 2;
}
.hero .hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}
.hero .hero-description {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.6;
  margin: 0 0 2rem;
  opacity: 0.95;
  max-width: 700px;
}
.hero .hero-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-centered {
  text-align: center;
}
.hero-centered .hero-content {
  max-width: 900px;
}
.hero-centered .hero-description {
  margin-left: auto;
  margin-right: auto;
}
.hero-centered .hero-actions {
  justify-content: center;
}

.hero-split .hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero-split .hero-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.hero-fullscreen {
  min-height: 100vh;
}

.hero-minimal {
  min-height: auto;
  padding: 6rem 0;
  background: white;
  color: var(--text-color, #111827);
}
.hero-minimal .hero-title {
  color: var(--text-color, #111827);
}
.hero-minimal .hero-description {
  color: var(--text-color, #6b7280);
}

.hero-image-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url("hero-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.hero-video-bg .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-bg .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-pattern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 1;
  opacity: 0.3;
}

.hero-shapes::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: white;
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
  z-index: 1;
}
.hero-shapes .shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  background: white;
}
.hero-shapes .shape.shape-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: 10%;
}
.hero-shapes .shape.shape-2 {
  width: 150px;
  height: 150px;
  bottom: 20%;
  left: 15%;
}
.hero-shapes .shape.shape-3 {
  width: 200px;
  height: 200px;
  top: 40%;
  left: 5%;
}

.hero-search .hero-search-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero-search .hero-search-form input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.hero-search .hero-search-form input:focus {
  outline: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.hero-search .hero-search-form button {
  padding: 1rem 2rem;
  background: var(--text-color, #111827);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hero-search .hero-search-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}

.hero-features .hero-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.hero-features .hero-features-grid .feature .feature-icon {
  width: 3rem;
  height: 3rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.hero-features .hero-features-grid .feature .feature-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}
.hero-features .hero-features-grid .feature .feature-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.hero-features .hero-features-grid .feature .feature-description {
  font-size: 0.9375rem;
  opacity: 0.9;
  line-height: 1.6;
}

.hero-stats .hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-stats .hero-stats-grid .stat {
  text-align: center;
}
.hero-stats .hero-stats-grid .stat .stat-value {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1;
}
.hero-stats .hero-stats-grid .stat .stat-label {
  font-size: 1rem;
  opacity: 0.9;
}

.hero-form .hero-signup-form {
  max-width: 500px;
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.hero-form .hero-signup-form .form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color, #111827);
  margin-bottom: 1.5rem;
}
.hero-form .hero-signup-form .form-group {
  margin-bottom: 1rem;
}
.hero-form .hero-signup-form .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-color, #374151);
}
.hero-form .hero-signup-form .form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color, #d1d5db);
  border-radius: 0.375rem;
  font-size: 1rem;
}
.hero-form .hero-signup-form .form-group input:focus {
  outline: none;
  border-color: var(--primary-color, #007acc);
}
.hero-form .hero-signup-form button {
  width: 100%;
  padding: 0.875rem;
  background: var(--primary-color, #007acc);
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.hero-form .hero-signup-form button:hover {
  background: var(--primary-color-dark, #0066aa);
}

.hero-animated .hero-title,
.hero-animated .hero-description,
.hero-animated .hero-actions {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.8s ease forwards;
}
.hero-animated .hero-title {
  animation-delay: 0.1s;
}
.hero-animated .hero-description {
  animation-delay: 0.3s;
}
.hero-animated .hero-actions {
  animation-delay: 0.5s;
}

@keyframes hero-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-gradient-blue {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.hero-gradient-pink {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.hero-gradient-orange {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.hero-gradient-green {
  background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

@media (max-width: 1024px) {
  .hero-features .hero-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-stats .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media (max-width: 767px) {
  .hero {
    min-height: 400px;
    padding: 3rem 0;
  }
  .hero-split .hero-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero-split .hero-image {
    order: -1;
  }
  .hero-search .hero-search-form {
    flex-direction: column;
  }
  .hero-search .hero-search-form button {
    width: 100%;
  }
  .hero-features .hero-features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-stats .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-top: 2rem;
    margin-top: 2rem;
  }
  .hero-stats .hero-stats-grid .stat .stat-value {
    font-size: 2rem;
  }
  .hero-form .hero-signup-form {
    padding: 1.5rem;
  }
  .hero-shapes::after {
    height: 50px;
  }
  .hero-shapes .shape.shape-1 {
    width: 150px;
    height: 150px;
  }
  .hero-shapes .shape.shape-2 {
    width: 100px;
    height: 100px;
  }
  .hero-shapes .shape.shape-3 {
    width: 120px;
    height: 120px;
  }
}
@media print {
  .hero {
    background: white !important;
    color: black !important;
    min-height: auto !important;
    padding: 2rem 0 !important;
    page-break-inside: avoid;
  }
  .hero-title,
  .hero-description {
    color: black !important;
  }
  .hero-actions,
  .hero-search-form,
  .hero-signup-form,
  .hero-video,
  .hero-overlay,
  .shape {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-animated .hero-title,
  .hero-animated .hero-description,
  .hero-animated .hero-actions {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hero-image-bg {
    background-attachment: scroll;
  }
  .hero-search-form button {
    transition: none !important;
    transform: none !important;
  }
}
/*
============================================
Page Title Hero Component
============================================
Reusable page title section with background image and 50% overlay

Base Class: .page-title
Modifiers: None needed - uses utilities

Usage:
<section class="page-title bg-overlay" style="background-image: url('image.jpg');">
    <div class="page-title__content">
        <div class="tagline">...</div>
        <h1 class="heading heading--hero">Title</h1>
        <p>Description</p>
    </div>
</section>

Combine with utilities:
- Overlay: bg-overlay (50%), bg-overlay-light (30%), bg-overlay-dark (70%)
- Spacing: p-y-*, p-x-*
- Display: d-flex, flex-column, align-items-center
============================================
*/
.page-title {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.page-title::before {
  z-index: 1;
}

.page-title__content {
  position: relative;
  z-index: 2;
}
.page-title__content p {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .page-title {
    background-attachment: scroll;
  }
}
@media print {
  .page-title {
    background: white !important;
    color: black !important;
  }
  .page-title::before {
    display: none !important;
  }
}
/*
============================================
Process Section Component
============================================
Split section with accordion and process visualization

Usage:
<section class="process-section">
    <div class="process-container">
        <div class="process-main">
            <div class="process-header">...</div>
            <div class="process-accordion">...</div>
        </div>
        <div class="process-image">...</div>
    </div>
</section>
============================================
*/
.process-section {
  background-color: var(--accent);
  padding: 2.5rem 1.25rem;
  position: relative;
  z-index: 10;
}
@media (min-width: 768px) {
  .process-section {
    padding: 3.75rem 1.25rem;
  }
}

.process-container {
  max-width: 900px;
  margin: -120px auto 0 auto;
  display: flex;
  height: auto;
  min-height: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.process-main {
  flex: 0 0 50%;
  background-color: var(--dark);
  padding: 1.875rem 2.1875rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.process-header {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.2;
  margin: 0 0 1.25rem 0;
  color: var(--light);
}
.process-header .process-highlight {
  text-decoration: underline;
  color: #C1D82F;
}

.process-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  overflow-y: auto;
  max-height: 400px;
  scrollbar-gutter: stable;
}

.process-accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.process-accordion-item:last-child {
  border-bottom: none;
}

.process-accordion-btn {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  margin: 0;
  background: transparent;
  border: none;
  color: var(--light);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.process-accordion-btn:hover {
  opacity: 0.8;
}
.process-accordion-btn .accordion-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.process-accordion-btn .accordion-icon {
  color: var(--light);
  transition: transform 0.3s ease;
}

.process-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent);
  color: var(--dark);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.process-accordion-content {
  padding: 1rem 0 1rem 2.5rem;
  display: none;
}
.process-accordion-content.active {
  display: block;
}
.process-accordion-content p {
  color: var(--light);
  font-size: 0.75rem;
  line-height: 1.7;
  margin: 0;
  opacity: 0.8;
}

.process-cta-btn {
  background-color: var(--accent);
  color: var(--dark);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  width: 100%;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.process-cta-btn:hover {
  background-color: var(--accent-hover);
}

.process-image {
  flex: 0 0 50%;
  background: url("/assets/img/process.png") center/contain no-repeat #fff;
  border-radius: 0 12px 12px 0;
}

@media (max-width: 1023px) {
  .process-container {
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .process-container {
    flex-direction: column;
    min-height: auto;
  }
  .process-main,
  .process-image {
    flex: 0 0 100%;
    border-radius: 0;
  }
  .process-image {
    min-height: 300px;
  }
}
/*
============================================
Stats Section Component
============================================
Key metrics display with 4-column grid layout

Usage:
<section class="stats-section">
    <div class="stats-container">
        <div class="stats-item">
            <div class="stats-number">1982</div>
            <div class="stats-label">Founded</div>
        </div>
        ...
    </div>
</section>
============================================
*/
.stats-section {
  background-color: var(--dark);
  padding: 3rem 1.25rem;
  position: relative;
  z-index: 5;
}
@media (min-width: 768px) {
  .stats-section {
    padding: 4rem 1.25rem;
  }
}

.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  justify-items: center;
  place-items: center;
}
@media (min-width: 768px) {
  .stats-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stats-number {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--light);
  margin-bottom: 0.75rem;
}
@media (min-width: 768px) {
  .stats-number {
    font-size: 3.5rem;
  }
}
@media (min-width: 1024px) {
  .stats-number {
    font-size: 4rem;
  }
}

.stats-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light);
  opacity: 0.8;
}

/*
============================================
Grid Templates Component
============================================
Pre-built layout grid templates

Base Classes: .layout-*, .grid-*
Variants: Various layout patterns

Usage:
<div class="layout-sidebar-left">
    <aside class="sidebar">...</aside>
    <main class="main-content">...</main>
</div>

Combine with utilities:
- Gap: gap-*
- Width: w-*, max-w-*
- Spacing: p-*, m-*
============================================
*/
.layout-holy-grail {
  display: grid;
  grid-template-areas: "header header header" "left main right" "footer footer footer";
  grid-template-columns: 250px 1fr 250px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1.5rem;
}
.layout-holy-grail .header {
  grid-area: header;
}
.layout-holy-grail .sidebar-left {
  grid-area: left;
}
.layout-holy-grail .main-content {
  grid-area: main;
}
.layout-holy-grail .sidebar-right {
  grid-area: right;
}
.layout-holy-grail .footer {
  grid-area: footer;
}

.layout-sidebar-left {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
  min-height: 100vh;
}
.layout-sidebar-left .sidebar {
  position: sticky;
  top: 1rem;
  height: fit-content;
}
.layout-sidebar-left .main-content {
  flex: 1;
}

.layout-sidebar-right {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  min-height: 100vh;
}
.layout-sidebar-right .main-content {
  flex: 1;
}
.layout-sidebar-right .sidebar {
  position: sticky;
  top: 1rem;
  height: fit-content;
}

.layout-two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.layout-two-column.layout-60-40 {
  grid-template-columns: 60% 40%;
}
.layout-two-column.layout-70-30 {
  grid-template-columns: 70% 30%;
}
.layout-two-column.layout-40-60 {
  grid-template-columns: 40% 60%;
}

.layout-three-column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.layout-four-column {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.layout-dashboard {
  display: grid;
  grid-template-areas: "header header" "sidebar main" "sidebar footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.layout-dashboard .dashboard-header {
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.layout-dashboard .dashboard-sidebar {
  grid-area: sidebar;
  background: var(--background-color, #f9fafb);
  border-right: 1px solid var(--border-color, #e5e7eb);
}
.layout-dashboard .dashboard-main {
  grid-area: main;
  padding: 2rem;
}
.layout-dashboard .dashboard-footer {
  grid-area: footer;
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--border-color, #e5e7eb);
}

.layout-app-shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.layout-app-shell .app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.layout-app-shell .app-main {
  display: grid;
  grid-template-columns: auto 1fr;
}
.layout-app-shell .app-nav {
  width: 64px;
  background: var(--background-color, #1f2937);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
}
.layout-app-shell .app-content {
  padding: 2rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.layout-app-shell .app-footer {
  background: var(--background-color, #f9fafb);
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding: 1.5rem 2rem;
}

.layout-masonry {
  column-count: 3;
  column-gap: 1.5rem;
}
.layout-masonry .masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}
.layout-masonry.masonry-2 {
  column-count: 2;
}
.layout-masonry.masonry-4 {
  column-count: 4;
}

.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.grid-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.grid-features .feature-card {
  padding: 2rem;
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}
.grid-features .feature-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.layout-blog {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}
.layout-blog .blog-main .blog-post {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.layout-blog .blog-main .blog-post:last-child {
  border-bottom: none;
}
.layout-blog .blog-sidebar {
  position: sticky;
  top: 2rem;
  height: fit-content;
}
.layout-blog .blog-sidebar .sidebar-widget {
  background: var(--background-color, #f9fafb);
  padding: 1.5rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}
.grid-products .product-card {
  background: white;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: all 0.2s ease;
}
.grid-products .product-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.grid-products .product-card .product-image {
  aspect-ratio: 1;
  overflow: hidden;
}
.grid-products .product-card .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.grid-products .product-card:hover .product-image img {
  transform: scale(1.05);
}
.grid-products .product-card .product-info {
  padding: 1rem;
}

.grid-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.grid-pricing .pricing-card {
  background: white;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}
.grid-pricing .pricing-card.featured {
  border-color: var(--primary-color, #007acc);
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.grid-pricing .pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.layout-split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.layout-split-screen .split-left,
.layout-split-screen .split-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}
.layout-split-screen .split-left {
  background: var(--primary-color, #007acc);
  color: white;
}
.layout-split-screen .split-right {
  background: white;
}

.layout-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding-left: 3rem;
}
.layout-timeline::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color, #e5e7eb);
}
.layout-timeline .timeline-item {
  position: relative;
  margin-bottom: 2rem;
}
.layout-timeline .timeline-item::before {
  content: "";
  position: absolute;
  left: -2.375rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  background: white;
  border: 3px solid var(--primary-color, #007acc);
  border-radius: 50%;
  z-index: 1;
}
.layout-timeline .timeline-item .timeline-content {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color, #e5e7eb);
}

.layout-kanban {
  display: grid;
  grid-auto-columns: 300px;
  grid-auto-flow: column;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.layout-kanban .kanban-column {
  background: var(--background-color, #f9fafb);
  border-radius: 0.75rem;
  padding: 1rem;
}
.layout-kanban .kanban-column .column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.layout-kanban .kanban-column .kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.layout-kanban .kanban-column .kanban-card {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color, #e5e7eb);
  cursor: pointer;
  transition: all 0.2s ease;
}
.layout-kanban .kanban-column .kanban-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.layout-magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}
.layout-magazine .magazine-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}
.layout-magazine .magazine-item.span-6 {
  grid-column: span 6;
}
.layout-magazine .magazine-item.span-4 {
  grid-column: span 4;
}
.layout-magazine .magazine-item.span-3 {
  grid-column: span 3;
}
.layout-magazine .magazine-item.row-2 {
  grid-row: span 2;
}
.layout-magazine .magazine-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .layout-holy-grail {
    grid-template-areas: "header header" "main main" "footer footer";
    grid-template-columns: 1fr;
  }
  .layout-sidebar-left,
  .layout-sidebar-right,
  .layout-two-column {
    grid-template-columns: 1fr;
  }
  .layout-dashboard {
    grid-template-areas: "header" "main" "footer";
    grid-template-columns: 1fr;
  }
  .layout-blog {
    grid-template-columns: 1fr;
  }
  .layout-blog .blog-sidebar {
    position: static;
  }
  .layout-masonry {
    column-count: 2;
  }
  .grid-pricing {
    grid-template-columns: 1fr;
  }
  .layout-split-screen {
    grid-template-columns: 1fr;
  }
  .layout-magazine .magazine-item.span-6 {
    grid-column: span 12;
  }
}
@media (max-width: 767px) {
  .layout-three-column,
  .layout-four-column {
    grid-template-columns: 1fr;
  }
  .layout-masonry {
    column-count: 1;
  }
  .grid-auto-fit,
  .grid-auto-fill {
    grid-template-columns: 1fr;
  }
  .layout-app-shell .app-main {
    grid-template-columns: 1fr;
  }
  .layout-app-shell .app-nav {
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    padding: 0.75rem;
  }
  .layout-timeline {
    padding-left: 2rem;
  }
  .layout-timeline::before {
    left: 0.5rem;
  }
  .layout-timeline .timeline-item::before {
    left: -1.875rem;
  }
  .layout-magazine {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 150px;
  }
  .layout-magazine .magazine-item.span-6, .layout-magazine .magazine-item.span-4, .layout-magazine .magazine-item.span-3 {
    grid-column: span 6;
  }
}
@media print {
  .layout-holy-grail,
  .layout-sidebar-left,
  .layout-sidebar-right,
  .layout-dashboard,
  .layout-app-shell {
    display: block !important;
  }
  .sidebar,
  .dashboard-sidebar,
  .blog-sidebar,
  .app-nav {
    display: none !important;
  }
  .main-content,
  .dashboard-main,
  .app-content {
    width: 100% !important;
    padding: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .product-card,
  .pricing-card,
  .kanban-card {
    transition: none !important;
    transform: none !important;
  }
  .product-card .product-image img {
    transition: none !important;
  }
}
/*
============================================
Theme Skins Component
============================================
Alternative color themes and skins

Base Classes: .theme-*, .skin-*
Usage: Add class to body or root element

Usage:
<body class="theme-dark">
    <!-- Dark theme applied -->
</body>

Combine with utilities:
- Works with all components
- CSS custom properties override
============================================
*/
.theme-dark {
  --background-color: var(--gray-800);
  --text-color: var(--text-color);
  --border-color: var(--border-color);
  --primary-color: #60a5fa;
  --primary-color-dark: #3b82f6;
  --card-bg: var(--background-color);
  --input-bg: var(--gray-700);
  --input-border: var(--gray-600);
  --input-text: var(--text-color);
  --input-placeholder: var(--gray-400);
  --link-color: var(--primary-color);
  --link-hover: #93c5fd;
  --btn-secondary-bg: var(--gray-700);
  --btn-secondary-hover: var(--gray-600);
  background: var(--background-color);
  color: var(--text-color);
}
.theme-dark .card,
.theme-dark .modal,
.theme-dark .dropdown-menu,
.theme-dark .navbar,
.theme-dark .sidebar {
  background: var(--background-color);
  color: var(--text-color);
  border-color: var(--border-color);
}
.theme-dark input,
.theme-dark textarea,
.theme-dark select {
  background: var(--gray-700);
  color: var(--text-color);
  border-color: var(--gray-600);
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder,
.theme-dark select::placeholder {
  color: var(--gray-400);
}
.theme-dark .btn-secondary {
  background: var(--gray-700);
  color: var(--text-color);
}
.theme-dark .btn-secondary:hover {
  background: var(--gray-600);
}
.theme-dark a:not(.btn) {
  color: #60a5fa;
}
.theme-dark a:not(.btn):hover {
  color: #93c5fd;
}

.theme-light {
  --background-color: #ffffff;
  --text-color: var(--gray-900);
  --border-color: var(--gray-200);
  --primary-color: #007acc;
  --primary-color-dark: #0066aa;
  background: var(--background-color);
  color: var(--text-color);
}

.theme-high-contrast {
  --background-color: var(--background-color);
  --text-color: #ffffff;
  --border-color: #ffffff;
  --primary-color: #ffff00;
  --primary-color-dark: #cccc00;
  background: var(--background-color);
  color: var(--text-color);
}
.theme-high-contrast * {
  border-color: var(--border-color) !important;
}
.theme-high-contrast .btn-primary {
  background: var(--primary-color);
  color: var(--background-color);
  border: 2px solid white;
}
.theme-high-contrast .btn-primary:hover {
  background: var(--primary-color-dark);
}
.theme-high-contrast a {
  color: #ffff00;
  text-decoration: underline;
}
.theme-high-contrast a:hover {
  color: var(--text-color);
}

.theme-sepia {
  --background-color: #f4ecd8;
  --text-color: #5c4a3a;
  --border-color: #d4c5a9;
  --primary-color: #8b6f47;
  --primary-color-dark: #6b5537;
  --card-bg: #faf7f0;
  background: var(--background-color);
  color: var(--text-color);
  filter: sepia(0.3);
}
.theme-sepia .card,
.theme-sepia .modal {
  background: #faf7f0;
}
.theme-sepia input,
.theme-sepia textarea,
.theme-sepia select {
  background: #faf7f0;
  color: #5c4a3a;
}

.theme-midnight {
  --background-color: #0f172a;
  --text-color: var(--text-color);
  --border-color: #1e293b;
  --primary-color: #38bdf8;
  --primary-color-dark: #0284c7;
  --card-bg: var(--background-color);
  --card-border: #334155;
  --input-bg: var(--background-color);
  --input-border: #334155;
  --input-text: var(--text-color);
  background: var(--background-color);
  color: var(--text-color);
}
.theme-midnight .card,
.theme-midnight .modal,
.theme-midnight .navbar {
  background: var(--card-bg);
  border-color: var(--card-border);
}
.theme-midnight input,
.theme-midnight textarea,
.theme-midnight select {
  background: var(--card-bg);
  color: var(--text-color);
  border-color: var(--card-border);
}

.theme-pastel {
  --background-color: #fef3f2;
  --text-color: var(--gray-700);
  --border-color: #fecaca;
  --primary-color: #fb7185;
  --primary-color-dark: #f43f5e;
  --card-bg: #ffffff;
  background: var(--background-color);
  color: var(--text-color);
}
.theme-pastel .card {
  background: white;
  border: 2px solid #fecaca;
}
.theme-pastel .btn-primary {
  background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
  border: none;
}

.theme-ocean {
  --background-color: #0c4a6e;
  --text-color: #e0f2fe;
  --border-color: #075985;
  --primary-color: #38bdf8;
  --primary-color-dark: #0ea5e9;
  --card-bg-alpha: rgba(255, 255, 255, 0.05);
  --card-border-alpha: rgba(255, 255, 255, 0.1);
  --input-bg-alpha: rgba(255, 255, 255, 0.1);
  --input-border-alpha: rgba(255, 255, 255, 0.2);
  background: linear-gradient(180deg, #0c4a6e 0%, #164e63 100%);
  color: #e0f2fe;
}
.theme-ocean .card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.theme-ocean input,
.theme-ocean textarea,
.theme-ocean select {
  background: rgba(255, 255, 255, 0.1);
  color: #e0f2fe;
  border-color: rgba(255, 255, 255, 0.2);
}

.theme-forest {
  --background-color: #064e3b;
  --text-color: #d1fae5;
  --border-color: #065f46;
  --primary-color: #34d399;
  --primary-color-dark: #10b981;
  --card-bg: rgba(6, 78, 59, 0.8);
  --card-border: #059669;
  background: linear-gradient(180deg, #064e3b 0%, #065f46 100%);
  color: #d1fae5;
}
.theme-forest .card {
  background: rgba(6, 78, 59, 0.8);
  border-color: #059669;
}
.theme-forest .btn-primary {
  background: #34d399;
  color: #064e3b;
}

.theme-sunset {
  --background-color: #7c2d12;
  --text-color: #fed7aa;
  --border-color: #9a3412;
  --primary-color: #fb923c;
  --primary-color-dark: #f97316;
  --card-bg: rgba(124, 45, 18, 0.7);
  --card-border: #c2410c;
  background: linear-gradient(180deg, #7c2d12 0%, #9a3412 100%);
  color: #fed7aa;
}
.theme-sunset .card {
  background: rgba(124, 45, 18, 0.7);
  border-color: #c2410c;
}
.theme-sunset .btn-primary {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}

.theme-corporate {
  --background-color: #f8fafc;
  --text-color: #0f172a;
  --border-color: #cbd5e1;
  --primary-color: #1e40af;
  --primary-color-dark: #1e3a8a;
  --navbar-bg: var(--primary-color);
  --navbar-text: #ffffff;
  background: var(--background-color);
  color: var(--text-color);
}
.theme-corporate .navbar {
  background: #1e40af;
  color: var(--text-color);
}
.theme-corporate .btn-primary {
  background: #1e40af;
  border-radius: 0;
}
.theme-corporate .btn-primary:hover {
  background: #1e3a8a;
}
.theme-corporate .card {
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-minimal {
  --background-color: #ffffff;
  --text-color: var(--gray-800);
  --border-color: var(--gray-200);
  --primary-color: var(--gray-900);
  --primary-color-dark: #000000;
  background: white;
  color: var(--gray-800);
  font-family: system-ui, -apple-system, sans-serif;
}
.theme-minimal * {
  border-radius: 0 !important;
}
.theme-minimal .btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  font-size: 0.875rem;
}
.theme-minimal .card {
  border: 1px solid var(--gray-200);
  box-shadow: none;
}

.theme-neon {
  --background-color: var(--background-color);
  --text-color: #00ff00;
  --border-color: #00ff00;
  --primary-color: #ff00ff;
  --primary-color-dark: #cc00cc;
  --card-bg: var(--background-color);
  --card-glow: 0 0 10px var(--text-color);
  --btn-glow: 0 0 10px var(--primary-color);
  --input-bg: var(--background-color);
  --input-glow: inset 0 0 5px var(--text-color);
  background: var(--background-color);
  color: #00ff00;
  font-family: "Courier New", monospace;
}
.theme-neon .card {
  background: var(--background-color);
  border: 2px solid #00ff00;
  box-shadow: 0 0 10px #00ff00;
}
.theme-neon .btn-primary {
  background: transparent;
  border: 2px solid #ff00ff;
  color: #ff00ff;
  box-shadow: 0 0 10px #ff00ff;
}
.theme-neon .btn-primary:hover {
  background: #ff00ff;
  color: black;
}
.theme-neon input,
.theme-neon textarea,
.theme-neon select {
  background: var(--background-color);
  border: 1px solid #00ff00;
  color: #00ff00;
  box-shadow: inset 0 0 5px #00ff00;
}

.theme-colorblind-safe {
  --primary-color: #0077bb;
  --success-color: #009988;
  --warning-color: #ee7733;
  --error-color: #cc3311;
}
.theme-colorblind-safe .btn-primary {
  background: #0077bb;
}
.theme-colorblind-safe .btn-success {
  background: #009988;
}
.theme-colorblind-safe .alert-success {
  background: #d1f2eb;
  color: #006655;
  border-color: #009988;
}
.theme-colorblind-safe .alert-warning {
  background: #fef3e2;
  color: #aa5522;
  border-color: #ee7733;
}
.theme-colorblind-safe .alert-danger {
  background: #fce8e6;
  color: #992211;
  border-color: #cc3311;
}

.skin-glass .card,
.skin-glass .modal,
.skin-glass .navbar {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.skin-glass .btn-primary {
  background: rgba(0, 122, 204, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.skin-glass .btn-primary:hover {
  background: rgba(0, 122, 204, 0.5);
}

.skin-neumorphic {
  background: #e0e5ec;
}
.skin-neumorphic .card,
.skin-neumorphic .btn {
  background: #e0e5ec;
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
  border: none;
}
.skin-neumorphic .btn:active,
.skin-neumorphic .card.pressed {
  box-shadow: inset 9px 9px 16px rgba(163, 177, 198, 0.6), inset -9px -9px 16px rgba(255, 255, 255, 0.5);
}
.skin-neumorphic input,
.skin-neumorphic textarea,
.skin-neumorphic select {
  background: #e0e5ec;
  box-shadow: inset 4px 4px 8px rgba(163, 177, 198, 0.6), inset -4px -4px 8px rgba(255, 255, 255, 0.5);
  border: none;
}

.skin-gradient .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}
.skin-gradient .card {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.skin-gradient .navbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

@media (prefers-color-scheme: dark) {
  .theme-auto {
    --background-color: var(--gray-800);
    --text-color: var(--text-color);
    --border-color: var(--border-color);
    --primary-color: #60a5fa;
    --primary-color-dark: #3b82f6;
    --card-bg: var(--background-color);
    --input-bg: var(--gray-700);
    --input-border: var(--gray-600);
    --input-text: var(--text-color);
    --input-placeholder: var(--gray-400);
    --link-color: var(--primary-color);
    --link-hover: #93c5fd;
    --btn-secondary-bg: var(--gray-700);
    --btn-secondary-hover: var(--gray-600);
    background: var(--background-color);
    color: var(--text-color);
  }
  .theme-auto .card,
  .theme-auto .modal,
  .theme-auto .dropdown-menu,
  .theme-auto .navbar,
  .theme-auto .sidebar {
    background: var(--background-color);
    color: var(--text-color);
    border-color: var(--border-color);
  }
  .theme-auto input,
  .theme-auto textarea,
  .theme-auto select {
    background: var(--gray-700);
    color: var(--text-color);
    border-color: var(--gray-600);
  }
  .theme-auto input::placeholder,
  .theme-auto textarea::placeholder,
  .theme-auto select::placeholder {
    color: var(--gray-400);
  }
  .theme-auto .btn-secondary {
    background: var(--gray-700);
    color: var(--text-color);
  }
  .theme-auto .btn-secondary:hover {
    background: var(--gray-600);
  }
  .theme-auto a:not(.btn) {
    color: #60a5fa;
  }
  .theme-auto a:not(.btn):hover {
    color: #93c5fd;
  }
}
@media (prefers-color-scheme: light) {
  .theme-auto {
    --background-color: #ffffff;
    --text-color: var(--gray-900);
    --border-color: var(--gray-200);
    --primary-color: #007acc;
    --primary-color-dark: #0066aa;
    background: var(--background-color);
    color: var(--text-color);
  }
}
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .card,
  .modal,
  .navbar {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
    box-shadow: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/*
============================================
Hire Section Component
============================================
Remko Hire section with content layout and slider

Structure:
- .hire-content: Container with max-width centering
- .hire-slider: Slider component for product showcase
- .hire-slide: Individual slides with fade transitions
- .hire-dot: Horizontal bar pagination

Usage:
<div class="hire-content">
    <div class="hire-content__left">...</div>
    <div class="hire-content__right">
        <div class="hire-slider">...</div>
    </div>
</div>
============================================
*/
.hire-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hire-slider {
  position: relative;
  width: 100%;
}

.hire-slider__container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
  min-height: 420px;
}

.hire-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hire-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.hire-slide.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 2;
}

.hire-slide__image {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
}
.hire-slide__image img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.hire-slide__content {
  width: 100%;
  padding: 0 1rem;
}

.hire-slide__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-color, #111827);
  margin-bottom: 0.5rem;
  text-transform: capitalize;
}

.hire-slide__subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hire-slider__pagination {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.hire-dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background-color: #6b7280;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.hire-dot:hover {
  background-color: #9ca3af;
}
.hire-dot.active {
  background-color: var(--accent, #c4d600);
  width: 28px;
}

@media (max-width: 1024px) {
  .hire-slider__container {
    min-height: 400px;
  }
}
@media (max-width: 767px) {
  .hire-logo img {
    max-width: 280px;
  }
  .hire-slider__container {
    padding: 0;
    min-height: 400px;
  }
  .hire-slide__image {
    max-width: 240px;
    height: 220px;
  }
  .hire-slide__image img {
    max-height: 100%;
  }
  .hire-slide__title {
    font-size: 1.125rem;
  }
  .hire-slide__subtitle {
    font-size: 0.8125rem;
  }
  .hire-actions {
    flex-direction: column;
  }
  .hire-actions .btn {
    width: 100%;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hire-slide {
    transition: none !important;
  }
}
/*
============================================
Blog Article Header Component
============================================
Hero section for blog articles
Uses utility classes for all spacing
*/
.blog-article-header {
  text-align: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-500, #6b7280);
  font-size: 0.875rem;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .meta-item {
    font-size: 0.8125rem;
  }
}
.meta-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.blog-tag {
  display: inline-block;
  background-color: var(--accent, #C1D82F);
  color: var(--black, #000000);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 575px) {
  .blog-tag {
    padding: 0.3125rem 0.625rem;
    font-size: 0.6875rem;
  }
}

.category-badge {
  display: inline-block;
  background-color: var(--accent, #C1D82F);
  color: var(--black, #000000);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s ease-in-out;
}
@media (max-width: 575px) {
  .category-badge {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }
}

.blog-title {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 300;
  color: var(--black, #000000);
  margin: 0;
}
@media (max-width: 1023px) {
  .blog-title {
    font-size: 2.5rem;
  }
}
@media (max-width: 767px) {
  .blog-title {
    font-size: 2rem;
  }
}
@media (max-width: 575px) {
  .blog-title {
    font-size: 1.5rem;
  }
}

.blog-subtitle {
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--gray-600, #4b5563);
  margin: 0 auto;
  max-width: 56rem;
}
@media (max-width: 1023px) {
  .blog-subtitle {
    font-size: 1.125rem;
  }
}
@media (max-width: 767px) {
  .blog-subtitle {
    font-size: 1rem;
  }
}
@media (max-width: 575px) {
  .blog-subtitle {
    font-size: 0.9375rem;
  }
}

.share-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 575px) {
  .share-section {
    gap: 0.5rem;
  }
}

.share-label {
  color: var(--gray-500, #6b7280);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .share-label {
    font-size: 0.8125rem;
  }
}

.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  background-color: var(--gray-100, #f3f4f6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  flex-shrink: 0;
}
.share-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--dark, #2c2c2c);
  transition: color 0.2s ease-in-out;
}
.share-btn:hover {
  background-color: var(--accent, #C1D82F);
  color: var(--black, #000000);
  transform: translateY(-2px);
}
.share-btn:hover svg {
  color: var(--black, #000000);
}
@media (max-width: 575px) {
  .share-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.375rem;
  }
  .share-btn svg {
    width: 1.125rem;
    height: 1.125rem;
  }
}

.blog-title .text-accent {
  color: var(--accent, #C1D82F);
}

.article-image__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.625rem;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}
.article-image__img:hover {
  transform: scale(1.02);
}
@media (max-width: 767px) {
  .article-image__img {
    border-radius: 0.5rem;
  }
}
@media (max-width: 575px) {
  .article-image__img {
    border-radius: 0.375rem;
  }
}

.article-description {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--gray-800, #1f2937);
  margin: 0;
  text-align: left;
}
@media (max-width: 1023px) {
  .article-description {
    font-size: 1rem;
    line-height: 1.75;
  }
}
@media (max-width: 767px) {
  .article-description {
    font-size: 0.9375rem;
    line-height: 1.7;
  }
}
@media (max-width: 575px) {
  .article-description {
    font-size: 0.875rem;
    line-height: 1.65;
  }
}

.article-section__title {
  font-size: 1.875rem;
  line-height: 1.35;
  font-weight: 300;
  color: var(--dark, #2c2c2c);
  margin: 0;
  text-align: left;
}
@media (max-width: 1023px) {
  .article-section__title {
    font-size: 1.625rem;
  }
}
@media (max-width: 767px) {
  .article-section__title {
    font-size: 1.375rem;
  }
}
@media (max-width: 575px) {
  .article-section__title {
    font-size: 1.1875rem;
  }
}

.article-section__paragraph {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-700, #374151);
  margin: 0;
  text-align: left;
}
@media (max-width: 1023px) {
  .article-section__paragraph {
    font-size: 0.9375rem;
    line-height: 1.75;
  }
}
@media (max-width: 767px) {
  .article-section__paragraph {
    font-size: 0.9rem;
    line-height: 1.7;
  }
}
@media (max-width: 575px) {
  .article-section__paragraph {
    font-size: 0.875rem;
    line-height: 1.65;
  }
}

/*
============================================
Article Stats Component
============================================
Key metrics display with left border accent
Uses utility classes for all spacing
*/
.article-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--accent, #C1D82F);
}
@media (max-width: 1023px) {
  .article-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  .article-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding-left: 1rem;
    border-left-width: 3px;
  }
}
@media (max-width: 575px) {
  .article-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-left: 1rem;
  }
}

.article-stats__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.article-stats__number {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--accent, #C1D82F);
  margin-bottom: 0.5rem;
}
@media (max-width: 1023px) {
  .article-stats__number {
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .article-stats__number {
    font-size: 1.75rem;
    margin-bottom: 0.375rem;
  }
}
@media (max-width: 575px) {
  .article-stats__number {
    font-size: 1.5rem;
  }
}

.article-stats__label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray-700, #374151);
  text-align: center;
}
@media (max-width: 767px) {
  .article-stats__label {
    font-size: 0.8125rem;
  }
}
@media (max-width: 575px) {
  .article-stats__label {
    font-size: 0.75rem;
  }
}

/*
============================================
Article Features Component
============================================
Grid-based feature cards with icons
Uses utility classes for all spacing
*/
.article-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (max-width: 1023px) {
  .article-features__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (max-width: 767px) {
  .article-features__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 575px) {
  .article-features__grid {
    gap: 1.25rem;
  }
}

.article-features__item {
  display: flex;
  gap: 1rem;
  padding: 0;
}
@media (max-width: 767px) {
  .article-features__item {
    gap: 1rem;
  }
}
@media (max-width: 575px) {
  .article-features__item {
    gap: 0.75rem;
  }
}

.article-features__icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent, #C1D82F);
  border-radius: 0.625rem;
  padding: 0.75rem;
}
.article-features__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--black, #000000);
  stroke-width: 2;
}
@media (max-width: 767px) {
  .article-features__icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.625rem;
    border-radius: 0.5rem;
  }
  .article-features__icon svg {
    width: 1.375rem;
    height: 1.375rem;
  }
}
@media (max-width: 575px) {
  .article-features__icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
  }
  .article-features__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.article-features__title {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dark, #2c2c2c);
  margin: 0 0 0.5rem 0;
  text-align: left;
}
@media (max-width: 1023px) {
  .article-features__title {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }
}
@media (max-width: 767px) {
  .article-features__title {
    font-size: 0.9375rem;
  }
}
@media (max-width: 575px) {
  .article-features__title {
    font-size: 0.875rem;
  }
}

.article-features__description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-700, #374151);
  margin: 0;
  text-align: left;
}
@media (max-width: 1023px) {
  .article-features__description {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}
@media (max-width: 767px) {
  .article-features__description {
    font-size: 0.8125rem;
    line-height: 1.5;
  }
}
@media (max-width: 575px) {
  .article-features__description {
    font-size: 0.75rem;
    line-height: 1.5;
  }
}

/*
============================================
Implementation Results Component
============================================
Results showcase with key metrics
Uses utility classes for spacing and layout
*/
.implementation-results {
  background-color: var(--gray-100, #f3f4f6);
  border-radius: 0.75rem;
  padding: 1.5rem;
}
@media (max-width: 767px) {
  .implementation-results {
    padding: 1.25rem;
    border-radius: 0.625rem;
  }
}
@media (max-width: 575px) {
  .implementation-results {
    padding: 1rem;
    border-radius: 0.5rem;
  }
}

.implementation-results__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--black, #000000);
  margin: 0 0 1rem 0;
  text-align: left;
}
@media (max-width: 767px) {
  .implementation-results__title {
    font-size: 1rem;
    margin-bottom: 0.875rem;
  }
}
@media (max-width: 575px) {
  .implementation-results__title {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
  }
}

.implementation-results__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.implementation-results__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.implementation-results__item:last-child {
  border-bottom: none;
}
@media (max-width: 575px) {
  .implementation-results__item {
    padding: 0.375rem 0;
  }
}

.implementation-results__label {
  font-size: 0.9375rem;
  color: var(--gray-700, #374151);
  line-height: 1.5;
}
@media (max-width: 767px) {
  .implementation-results__label {
    font-size: 0.875rem;
  }
}
@media (max-width: 575px) {
  .implementation-results__label {
    font-size: 0.8125rem;
  }
}

.implementation-results__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent, #C1D82F);
  line-height: 1.5;
}
@media (max-width: 767px) {
  .implementation-results__value {
    font-size: 0.875rem;
  }
}
@media (max-width: 575px) {
  .implementation-results__value {
    font-size: 0.8125rem;
  }
}

/*
============================================
Key Takeaways Component
============================================
Dark box with accent title and checkmarked list items
Uses utility classes for spacing
*/
.key-takeaways {
  background-color: var(--charcoal, #2a2a2a);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: left;
}
@media (max-width: 767px) {
  .key-takeaways {
    padding: 1.25rem;
    border-radius: 0.625rem;
  }
}
@media (max-width: 575px) {
  .key-takeaways {
    padding: 1rem;
    border-radius: 0.5rem;
  }
}

.key-takeaways__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent, #C1D82F);
  margin: 0 0 1rem 0;
  text-align: left;
}
@media (max-width: 767px) {
  .key-takeaways__title {
    font-size: 1.125rem;
    margin-bottom: 0.875rem;
  }
}
@media (max-width: 575px) {
  .key-takeaways__title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
}

.key-takeaways__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 575px) {
  .key-takeaways__list {
    gap: 0.625rem;
  }
}

.key-takeaways__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--light, #ffffff);
  border-bottom: 1px solid var(--gray-600, #4b5563);
}
.key-takeaways__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
@media (max-width: 767px) {
  .key-takeaways__item {
    font-size: 0.875rem;
    gap: 0.625rem;
    padding-bottom: 0.625rem;
  }
}
@media (max-width: 575px) {
  .key-takeaways__item {
    font-size: 0.8125rem;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

.key-takeaways__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent, #C1D82F);
  border-radius: 50%;
  font-size: 0.875rem;
  color: var(--black, #000000);
}
@media (max-width: 767px) {
  .key-takeaways__icon {
    width: 1.375rem;
    height: 1.375rem;
    font-size: 0.75rem;
  }
}
@media (max-width: 575px) {
  .key-takeaways__icon {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.6875rem;
  }
}

.key-takeaways__text {
  flex: 1;
  margin: 0;
}

/*
============================================
CTA Section Component
============================================
Full-width call-to-action section with accent background
Uses utility classes for all spacing and layout
*/
.cta-section {
  background-color: var(--accent, #C1D82F);
  padding: 3rem 1.5rem;
  text-align: center;
}
@media (max-width: 767px) {
  .cta-section {
    padding: 2.5rem 1.25rem;
  }
}
@media (max-width: 575px) {
  .cta-section {
    padding: 2rem 1rem;
  }
}

.cta-section__content {
  max-width: 900px;
  margin: 0 auto;
}

.cta-section__title {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--black, #000000);
  margin: 0 0 1rem 0;
}
@media (max-width: 1023px) {
  .cta-section__title {
    font-size: 1.75rem;
  }
}
@media (max-width: 767px) {
  .cta-section__title {
    font-size: 1.5rem;
    margin-bottom: 0.875rem;
  }
}
@media (max-width: 575px) {
  .cta-section__title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
}

.cta-section__description {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--black, #000000);
  margin: 0 0 1.5rem 0;
}
@media (max-width: 767px) {
  .cta-section__description {
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
  }
}
@media (max-width: 575px) {
  .cta-section__description {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
}

.cta-section__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.cta-section__btn.btn--dark {
  background-color: var(--black, #000000);
  color: var(--accent, #C1D82F);
}
.cta-section__btn.btn--dark:hover {
  background-color: var(--dark, #2c2c2c);
  transform: translateY(-2px);
}
.cta-section__btn.btn--light {
  background-color: var(--light, #ffffff);
  color: var(--black, #000000);
}
.cta-section__btn.btn--light:hover {
  background-color: var(--gray-100, #f3f4f6);
  transform: translateY(-2px);
}
@media (max-width: 575px) {
  .cta-section__btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
  }
}

.cta-section__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 575px) {
  .cta-section__actions {
    gap: 0.75rem;
  }
}

/*
============================================
Related Articles Component
============================================
Article grid showcase section
Uses utility classes for spacing
*/
.related-articles {
  text-align: center;
}

.related-articles__header {
  margin-bottom: 3rem;
}

.related-articles__subtitle {
  color: var(--accent, #C1D82F);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 0.5rem 0;
}

.related-articles__title {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--black, #000000);
  margin: 0;
  line-height: 1.2;
}
@media (max-width: 1023px) {
  .related-articles__title {
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .related-articles__title {
    font-size: 1.75rem;
  }
}
@media (max-width: 575px) {
  .related-articles__title {
    font-size: 1.5rem;
  }
}

.related-articles__title--accent {
  color: var(--accent, #C1D82F);
}

.related-articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
@media (max-width: 1023px) {
  .related-articles__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 767px) {
  .related-articles__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.related-articles__actions {
  text-align: center;
}

/*
============================================
FAQ Question Box Component
============================================
Styled container for FAQ questions with
consistent background colors and divider spacing

Classes:
- .faq-item - Container for Q&A pair
- .faq-question - Question text container
- .faq-answer - Answer text with indentation

Usage:
<div class="faq-item">
    <div class="faq-question">What is this product?</div>
    <div class="faq-answer">This is an answer...</div>
    <div class="divider-soft">Back to Top</div>
</div>

Features:
- Consistent accent background for all items
- Proper spacing with dividers
- Answer indentation (left padding)
- Clean visual hierarchy

Responsive: Scales with viewport
============================================
*/
.faq-accordion {
  gap: 0;
}

.faq-item {
  padding: 0px 12px;
  border-radius: 0.5rem;
  margin-bottom: 0;
}

.faq-question {
  padding: 4px 0;
  margin-bottom: 0;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0.5rem;
}
.faq-question:hover {
  color: var(--dark);
}
.faq-question:focus {
  outline: none;
}

.faq-answer {
  padding-left: 16px;
  padding-top: 12px !important;
  padding-bottom: 4px !important;
  color: var(--gray-700);
  line-height: 1.6;
}
.faq-answer p:first-child {
  margin-top: 0;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}
.faq-answer a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.faq-answer a:hover {
  color: var(--accent-hover);
}

.bg-light-gray {
  background-color: var(--gray-50);
}

.hover\:bg-light-gray:hover {
  background-color: var(--gray-100);
}

/*
============================================
Debug Utilities - Simple & Practical
============================================
Quick visual debugging for layout issues.
Add class to <body> or specific element.

Usage:
- .debug            - Shows all element boxes
- .debug-outline    - Highlights single element
- .debug-sections   - Shows section structure

⚠️ Remove before production deployment
============================================
*/
.debug * {
  outline: 1px solid rgba(255, 20, 145, 0.541);
  outline-offset: -1px;
}

.debug-outline {
  outline: 2px solid rgba(255, 20, 145, 0.2);
  background: rgba(255, 20, 147, 0.05);
}

.debug-sections section {
  outline: 2px solid rgba(255, 20, 145, 0.2);
}
.debug-sections .container,
.debug-sections .container-boxed {
  outline: 1px dashed rgba(255, 20, 147, 0.5);
  background: rgba(255, 20, 147, 0.03);
}

.bg-white {
  background-color: var(--white);
}

.bg-black {
  background-color: var(--black);
}

.bg-transparent {
  background-color: var(--transparent);
}

.bg-current {
  background-color: var(--current);
}

.bg-accent {
  background-color: var(--accent);
}

.bg-accent-dark {
  background-color: var(--accent-dark);
}

.bg-accent-light {
  background-color: var(--accent-light);
}

.bg-gray-50 {
  background-color: var(--gray-50);
}

.bg-gray-100 {
  background-color: var(--gray-100);
}

.bg-gray-200 {
  background-color: var(--gray-200);
}

.bg-gray-300 {
  background-color: var(--gray-300);
}

.bg-gray-400 {
  background-color: var(--gray-400);
}

.bg-gray-500 {
  background-color: var(--gray-500);
}

.bg-gray-600 {
  background-color: var(--gray-600);
}

.bg-gray-700 {
  background-color: var(--gray-700);
}

.bg-gray-800 {
  background-color: var(--gray-800);
}

.bg-gray-900 {
  background-color: var(--gray-900);
}

.bg-charcoal {
  background-color: var(--charcoal);
}

.bg-charcoal-light {
  background-color: var(--charcoal-light);
}

.bg-dark {
  background-color: var(--dark);
}

.bg-darker {
  background-color: var(--darker);
}

.bg-light {
  background-color: var(--light);
}

.bg-success {
  background-color: var(--success);
}

.bg-warning {
  background-color: var(--warning);
}

.bg-error {
  background-color: var(--error);
}

.bg-info {
  background-color: var(--info);
}

.bg-accent-hover {
  background-color: var(--accent-hover);
}

.bg-accent-active {
  background-color: var(--accent-active);
}

.bg-accent-disabled {
  background-color: var(--accent-disabled);
}

.bg-success-hover {
  background-color: var(--success-hover);
}

.bg-success-active {
  background-color: var(--success-active);
}

.bg-success-disabled {
  background-color: var(--success-disabled);
}

.bg-warning-hover {
  background-color: var(--warning-hover);
}

.bg-warning-active {
  background-color: var(--warning-active);
}

.bg-warning-disabled {
  background-color: var(--warning-disabled);
}

.bg-error-hover {
  background-color: var(--error-hover);
}

.bg-error-active {
  background-color: var(--error-active);
}

.bg-error-disabled {
  background-color: var(--error-disabled);
}

.bg-info-hover {
  background-color: var(--info-hover);
}

.bg-info-active {
  background-color: var(--info-active);
}

.bg-info-disabled {
  background-color: var(--info-disabled);
}

.bg-dark-hover {
  background-color: var(--dark-hover);
}

.bg-dark-active {
  background-color: var(--dark-active);
}

.bg-dark-disabled {
  background-color: var(--dark-disabled);
}

.bg-darker-hover {
  background-color: var(--darker-hover);
}

.bg-darker-active {
  background-color: var(--darker-active);
}

.bg-darker-disabled {
  background-color: var(--darker-disabled);
}

.bg-light-hover {
  background-color: var(--light-hover);
}

.bg-light-active {
  background-color: var(--light-active);
}

.bg-light-disabled {
  background-color: var(--light-disabled);
}

.bg-accent-10 {
  background-color: var(--accent-10);
}

.bg-accent-20 {
  background-color: var(--accent-20);
}

.bg-accent-30 {
  background-color: var(--accent-30);
}

.bg-accent-50 {
  background-color: var(--accent-50);
}

.bg-accent-80 {
  background-color: var(--accent-80);
}

.bg-accent-90 {
  background-color: var(--accent-90);
}

.bg-success-10 {
  background-color: var(--success-10);
}

.bg-success-20 {
  background-color: var(--success-20);
}

.bg-success-30 {
  background-color: var(--success-30);
}

.bg-success-50 {
  background-color: var(--success-50);
}

.bg-success-80 {
  background-color: var(--success-80);
}

.bg-success-90 {
  background-color: var(--success-90);
}

.bg-warning-10 {
  background-color: var(--warning-10);
}

.bg-warning-20 {
  background-color: var(--warning-20);
}

.bg-warning-30 {
  background-color: var(--warning-30);
}

.bg-warning-50 {
  background-color: var(--warning-50);
}

.bg-warning-80 {
  background-color: var(--warning-80);
}

.bg-warning-90 {
  background-color: var(--warning-90);
}

.bg-error-10 {
  background-color: var(--error-10);
}

.bg-error-20 {
  background-color: var(--error-20);
}

.bg-error-30 {
  background-color: var(--error-30);
}

.bg-error-50 {
  background-color: var(--error-50);
}

.bg-error-80 {
  background-color: var(--error-80);
}

.bg-error-90 {
  background-color: var(--error-90);
}

.bg-info-10 {
  background-color: var(--info-10);
}

.bg-info-20 {
  background-color: var(--info-20);
}

.bg-info-30 {
  background-color: var(--info-30);
}

.bg-info-50 {
  background-color: var(--info-50);
}

.bg-info-80 {
  background-color: var(--info-80);
}

.bg-info-90 {
  background-color: var(--info-90);
}

.bg-dark-10 {
  background-color: var(--dark-10);
}

.bg-dark-20 {
  background-color: var(--dark-20);
}

.bg-dark-30 {
  background-color: var(--dark-30);
}

.bg-dark-50 {
  background-color: var(--dark-50);
}

.bg-dark-80 {
  background-color: var(--dark-80);
}

.bg-dark-90 {
  background-color: var(--dark-90);
}

.bg-darker-10 {
  background-color: var(--darker-10);
}

.bg-darker-20 {
  background-color: var(--darker-20);
}

.bg-darker-30 {
  background-color: var(--darker-30);
}

.bg-darker-50 {
  background-color: var(--darker-50);
}

.bg-darker-80 {
  background-color: var(--darker-80);
}

.bg-darker-90 {
  background-color: var(--darker-90);
}

.bg-light-10 {
  background-color: var(--light-10);
}

.bg-light-20 {
  background-color: var(--light-20);
}

.bg-light-30 {
  background-color: var(--light-30);
}

.bg-light-50 {
  background-color: var(--light-50);
}

.bg-light-80 {
  background-color: var(--light-80);
}

.bg-light-90 {
  background-color: var(--light-90);
}

.text-white {
  color: var(--white);
}

.text-black {
  color: var(--black);
}

.text-transparent {
  color: var(--transparent);
}

.text-current {
  color: var(--current);
}

.text-accent {
  color: var(--accent);
}

.text-accent-dark {
  color: var(--accent-dark);
}

.text-accent-light {
  color: var(--accent-light);
}

.text-gray-50 {
  color: var(--gray-50);
}

.text-gray-100 {
  color: var(--gray-100);
}

.text-gray-200 {
  color: var(--gray-200);
}

.text-gray-300 {
  color: var(--gray-300);
}

.text-gray-400 {
  color: var(--gray-400);
}

.text-gray-500 {
  color: var(--gray-500);
}

.text-gray-600 {
  color: var(--gray-600);
}

.text-gray-700 {
  color: var(--gray-700);
}

.text-gray-800 {
  color: var(--gray-800);
}

.text-gray-900 {
  color: var(--gray-900);
}

.text-charcoal {
  color: var(--charcoal);
}

.text-charcoal-light {
  color: var(--charcoal-light);
}

.text-dark {
  color: var(--dark);
}

.text-darker {
  color: var(--darker);
}

.text-light {
  color: var(--light);
}

.text-success {
  color: var(--success);
}

.text-warning {
  color: var(--warning);
}

.text-error {
  color: var(--error);
}

.text-info {
  color: var(--info);
}

.text-accent-hover {
  color: var(--accent-hover);
}

.text-accent-active {
  color: var(--accent-active);
}

.text-accent-disabled {
  color: var(--accent-disabled);
}

.text-success-hover {
  color: var(--success-hover);
}

.text-success-active {
  color: var(--success-active);
}

.text-success-disabled {
  color: var(--success-disabled);
}

.text-warning-hover {
  color: var(--warning-hover);
}

.text-warning-active {
  color: var(--warning-active);
}

.text-warning-disabled {
  color: var(--warning-disabled);
}

.text-error-hover {
  color: var(--error-hover);
}

.text-error-active {
  color: var(--error-active);
}

.text-error-disabled {
  color: var(--error-disabled);
}

.text-info-hover {
  color: var(--info-hover);
}

.text-info-active {
  color: var(--info-active);
}

.text-info-disabled {
  color: var(--info-disabled);
}

.text-dark-hover {
  color: var(--dark-hover);
}

.text-dark-active {
  color: var(--dark-active);
}

.text-dark-disabled {
  color: var(--dark-disabled);
}

.text-darker-hover {
  color: var(--darker-hover);
}

.text-darker-active {
  color: var(--darker-active);
}

.text-darker-disabled {
  color: var(--darker-disabled);
}

.text-light-hover {
  color: var(--light-hover);
}

.text-light-active {
  color: var(--light-active);
}

.text-light-disabled {
  color: var(--light-disabled);
}

.text-accent-10 {
  color: var(--accent-10);
}

.text-accent-20 {
  color: var(--accent-20);
}

.text-accent-30 {
  color: var(--accent-30);
}

.text-accent-50 {
  color: var(--accent-50);
}

.text-accent-80 {
  color: var(--accent-80);
}

.text-accent-90 {
  color: var(--accent-90);
}

.text-success-10 {
  color: var(--success-10);
}

.text-success-20 {
  color: var(--success-20);
}

.text-success-30 {
  color: var(--success-30);
}

.text-success-50 {
  color: var(--success-50);
}

.text-success-80 {
  color: var(--success-80);
}

.text-success-90 {
  color: var(--success-90);
}

.text-warning-10 {
  color: var(--warning-10);
}

.text-warning-20 {
  color: var(--warning-20);
}

.text-warning-30 {
  color: var(--warning-30);
}

.text-warning-50 {
  color: var(--warning-50);
}

.text-warning-80 {
  color: var(--warning-80);
}

.text-warning-90 {
  color: var(--warning-90);
}

.text-error-10 {
  color: var(--error-10);
}

.text-error-20 {
  color: var(--error-20);
}

.text-error-30 {
  color: var(--error-30);
}

.text-error-50 {
  color: var(--error-50);
}

.text-error-80 {
  color: var(--error-80);
}

.text-error-90 {
  color: var(--error-90);
}

.text-info-10 {
  color: var(--info-10);
}

.text-info-20 {
  color: var(--info-20);
}

.text-info-30 {
  color: var(--info-30);
}

.text-info-50 {
  color: var(--info-50);
}

.text-info-80 {
  color: var(--info-80);
}

.text-info-90 {
  color: var(--info-90);
}

.text-dark-10 {
  color: var(--dark-10);
}

.text-dark-20 {
  color: var(--dark-20);
}

.text-dark-30 {
  color: var(--dark-30);
}

.text-dark-50 {
  color: var(--dark-50);
}

.text-dark-80 {
  color: var(--dark-80);
}

.text-dark-90 {
  color: var(--dark-90);
}

.text-darker-10 {
  color: var(--darker-10);
}

.text-darker-20 {
  color: var(--darker-20);
}

.text-darker-30 {
  color: var(--darker-30);
}

.text-darker-50 {
  color: var(--darker-50);
}

.text-darker-80 {
  color: var(--darker-80);
}

.text-darker-90 {
  color: var(--darker-90);
}

.text-light-10 {
  color: var(--light-10);
}

.text-light-20 {
  color: var(--light-20);
}

.text-light-30 {
  color: var(--light-30);
}

.text-light-50 {
  color: var(--light-50);
}

.text-light-80 {
  color: var(--light-80);
}

.text-light-90 {
  color: var(--light-90);
}

.border-white {
  border-color: var(--white);
}

.border-black {
  border-color: var(--black);
}

.border-transparent {
  border-color: var(--transparent);
}

.border-current {
  border-color: var(--current);
}

.border-accent {
  border-color: var(--accent);
}

.border-accent-dark {
  border-color: var(--accent-dark);
}

.border-accent-light {
  border-color: var(--accent-light);
}

.border-gray-50 {
  border-color: var(--gray-50);
}

.border-gray-100 {
  border-color: var(--gray-100);
}

.border-gray-200 {
  border-color: var(--gray-200);
}

.border-gray-300 {
  border-color: var(--gray-300);
}

.border-gray-400 {
  border-color: var(--gray-400);
}

.border-gray-500 {
  border-color: var(--gray-500);
}

.border-gray-600 {
  border-color: var(--gray-600);
}

.border-gray-700 {
  border-color: var(--gray-700);
}

.border-gray-800 {
  border-color: var(--gray-800);
}

.border-gray-900 {
  border-color: var(--gray-900);
}

.border-charcoal {
  border-color: var(--charcoal);
}

.border-charcoal-light {
  border-color: var(--charcoal-light);
}

.border-dark {
  border-color: var(--dark);
}

.border-darker {
  border-color: var(--darker);
}

.border-light {
  border-color: var(--light);
}

.border-success {
  border-color: var(--success);
}

.border-warning {
  border-color: var(--warning);
}

.border-error {
  border-color: var(--error);
}

.border-info {
  border-color: var(--info);
}

.border-accent-hover {
  border-color: var(--accent-hover);
}

.border-accent-active {
  border-color: var(--accent-active);
}

.border-accent-disabled {
  border-color: var(--accent-disabled);
}

.border-success-hover {
  border-color: var(--success-hover);
}

.border-success-active {
  border-color: var(--success-active);
}

.border-success-disabled {
  border-color: var(--success-disabled);
}

.border-warning-hover {
  border-color: var(--warning-hover);
}

.border-warning-active {
  border-color: var(--warning-active);
}

.border-warning-disabled {
  border-color: var(--warning-disabled);
}

.border-error-hover {
  border-color: var(--error-hover);
}

.border-error-active {
  border-color: var(--error-active);
}

.border-error-disabled {
  border-color: var(--error-disabled);
}

.border-info-hover {
  border-color: var(--info-hover);
}

.border-info-active {
  border-color: var(--info-active);
}

.border-info-disabled {
  border-color: var(--info-disabled);
}

.border-dark-hover {
  border-color: var(--dark-hover);
}

.border-dark-active {
  border-color: var(--dark-active);
}

.border-dark-disabled {
  border-color: var(--dark-disabled);
}

.border-darker-hover {
  border-color: var(--darker-hover);
}

.border-darker-active {
  border-color: var(--darker-active);
}

.border-darker-disabled {
  border-color: var(--darker-disabled);
}

.border-light-hover {
  border-color: var(--light-hover);
}

.border-light-active {
  border-color: var(--light-active);
}

.border-light-disabled {
  border-color: var(--light-disabled);
}

.border-accent-10 {
  border-color: var(--accent-10);
}

.border-accent-20 {
  border-color: var(--accent-20);
}

.border-accent-30 {
  border-color: var(--accent-30);
}

.border-accent-50 {
  border-color: var(--accent-50);
}

.border-accent-80 {
  border-color: var(--accent-80);
}

.border-accent-90 {
  border-color: var(--accent-90);
}

.border-success-10 {
  border-color: var(--success-10);
}

.border-success-20 {
  border-color: var(--success-20);
}

.border-success-30 {
  border-color: var(--success-30);
}

.border-success-50 {
  border-color: var(--success-50);
}

.border-success-80 {
  border-color: var(--success-80);
}

.border-success-90 {
  border-color: var(--success-90);
}

.border-warning-10 {
  border-color: var(--warning-10);
}

.border-warning-20 {
  border-color: var(--warning-20);
}

.border-warning-30 {
  border-color: var(--warning-30);
}

.border-warning-50 {
  border-color: var(--warning-50);
}

.border-warning-80 {
  border-color: var(--warning-80);
}

.border-warning-90 {
  border-color: var(--warning-90);
}

.border-error-10 {
  border-color: var(--error-10);
}

.border-error-20 {
  border-color: var(--error-20);
}

.border-error-30 {
  border-color: var(--error-30);
}

.border-error-50 {
  border-color: var(--error-50);
}

.border-error-80 {
  border-color: var(--error-80);
}

.border-error-90 {
  border-color: var(--error-90);
}

.border-info-10 {
  border-color: var(--info-10);
}

.border-info-20 {
  border-color: var(--info-20);
}

.border-info-30 {
  border-color: var(--info-30);
}

.border-info-50 {
  border-color: var(--info-50);
}

.border-info-80 {
  border-color: var(--info-80);
}

.border-info-90 {
  border-color: var(--info-90);
}

.border-dark-10 {
  border-color: var(--dark-10);
}

.border-dark-20 {
  border-color: var(--dark-20);
}

.border-dark-30 {
  border-color: var(--dark-30);
}

.border-dark-50 {
  border-color: var(--dark-50);
}

.border-dark-80 {
  border-color: var(--dark-80);
}

.border-dark-90 {
  border-color: var(--dark-90);
}

.border-darker-10 {
  border-color: var(--darker-10);
}

.border-darker-20 {
  border-color: var(--darker-20);
}

.border-darker-30 {
  border-color: var(--darker-30);
}

.border-darker-50 {
  border-color: var(--darker-50);
}

.border-darker-80 {
  border-color: var(--darker-80);
}

.border-darker-90 {
  border-color: var(--darker-90);
}

.border-light-10 {
  border-color: var(--light-10);
}

.border-light-20 {
  border-color: var(--light-20);
}

.border-light-30 {
  border-color: var(--light-30);
}

.border-light-50 {
  border-color: var(--light-50);
}

.border-light-80 {
  border-color: var(--light-80);
}

.border-light-90 {
  border-color: var(--light-90);
}

.outline-white {
  outline-color: var(--white);
}

.outline-black {
  outline-color: var(--black);
}

.outline-transparent {
  outline-color: var(--transparent);
}

.outline-current {
  outline-color: var(--current);
}

.outline-accent {
  outline-color: var(--accent);
}

.outline-accent-dark {
  outline-color: var(--accent-dark);
}

.outline-accent-light {
  outline-color: var(--accent-light);
}

.outline-gray-50 {
  outline-color: var(--gray-50);
}

.outline-gray-100 {
  outline-color: var(--gray-100);
}

.outline-gray-200 {
  outline-color: var(--gray-200);
}

.outline-gray-300 {
  outline-color: var(--gray-300);
}

.outline-gray-400 {
  outline-color: var(--gray-400);
}

.outline-gray-500 {
  outline-color: var(--gray-500);
}

.outline-gray-600 {
  outline-color: var(--gray-600);
}

.outline-gray-700 {
  outline-color: var(--gray-700);
}

.outline-gray-800 {
  outline-color: var(--gray-800);
}

.outline-gray-900 {
  outline-color: var(--gray-900);
}

.outline-charcoal {
  outline-color: var(--charcoal);
}

.outline-charcoal-light {
  outline-color: var(--charcoal-light);
}

.outline-dark {
  outline-color: var(--dark);
}

.outline-darker {
  outline-color: var(--darker);
}

.outline-light {
  outline-color: var(--light);
}

.outline-success {
  outline-color: var(--success);
}

.outline-warning {
  outline-color: var(--warning);
}

.outline-error {
  outline-color: var(--error);
}

.outline-info {
  outline-color: var(--info);
}

.outline-accent-hover {
  outline-color: var(--accent-hover);
}

.outline-accent-active {
  outline-color: var(--accent-active);
}

.outline-accent-disabled {
  outline-color: var(--accent-disabled);
}

.outline-success-hover {
  outline-color: var(--success-hover);
}

.outline-success-active {
  outline-color: var(--success-active);
}

.outline-success-disabled {
  outline-color: var(--success-disabled);
}

.outline-warning-hover {
  outline-color: var(--warning-hover);
}

.outline-warning-active {
  outline-color: var(--warning-active);
}

.outline-warning-disabled {
  outline-color: var(--warning-disabled);
}

.outline-error-hover {
  outline-color: var(--error-hover);
}

.outline-error-active {
  outline-color: var(--error-active);
}

.outline-error-disabled {
  outline-color: var(--error-disabled);
}

.outline-info-hover {
  outline-color: var(--info-hover);
}

.outline-info-active {
  outline-color: var(--info-active);
}

.outline-info-disabled {
  outline-color: var(--info-disabled);
}

.outline-dark-hover {
  outline-color: var(--dark-hover);
}

.outline-dark-active {
  outline-color: var(--dark-active);
}

.outline-dark-disabled {
  outline-color: var(--dark-disabled);
}

.outline-darker-hover {
  outline-color: var(--darker-hover);
}

.outline-darker-active {
  outline-color: var(--darker-active);
}

.outline-darker-disabled {
  outline-color: var(--darker-disabled);
}

.outline-light-hover {
  outline-color: var(--light-hover);
}

.outline-light-active {
  outline-color: var(--light-active);
}

.outline-light-disabled {
  outline-color: var(--light-disabled);
}

.outline-accent-10 {
  outline-color: var(--accent-10);
}

.outline-accent-20 {
  outline-color: var(--accent-20);
}

.outline-accent-30 {
  outline-color: var(--accent-30);
}

.outline-accent-50 {
  outline-color: var(--accent-50);
}

.outline-accent-80 {
  outline-color: var(--accent-80);
}

.outline-accent-90 {
  outline-color: var(--accent-90);
}

.outline-success-10 {
  outline-color: var(--success-10);
}

.outline-success-20 {
  outline-color: var(--success-20);
}

.outline-success-30 {
  outline-color: var(--success-30);
}

.outline-success-50 {
  outline-color: var(--success-50);
}

.outline-success-80 {
  outline-color: var(--success-80);
}

.outline-success-90 {
  outline-color: var(--success-90);
}

.outline-warning-10 {
  outline-color: var(--warning-10);
}

.outline-warning-20 {
  outline-color: var(--warning-20);
}

.outline-warning-30 {
  outline-color: var(--warning-30);
}

.outline-warning-50 {
  outline-color: var(--warning-50);
}

.outline-warning-80 {
  outline-color: var(--warning-80);
}

.outline-warning-90 {
  outline-color: var(--warning-90);
}

.outline-error-10 {
  outline-color: var(--error-10);
}

.outline-error-20 {
  outline-color: var(--error-20);
}

.outline-error-30 {
  outline-color: var(--error-30);
}

.outline-error-50 {
  outline-color: var(--error-50);
}

.outline-error-80 {
  outline-color: var(--error-80);
}

.outline-error-90 {
  outline-color: var(--error-90);
}

.outline-info-10 {
  outline-color: var(--info-10);
}

.outline-info-20 {
  outline-color: var(--info-20);
}

.outline-info-30 {
  outline-color: var(--info-30);
}

.outline-info-50 {
  outline-color: var(--info-50);
}

.outline-info-80 {
  outline-color: var(--info-80);
}

.outline-info-90 {
  outline-color: var(--info-90);
}

.outline-dark-10 {
  outline-color: var(--dark-10);
}

.outline-dark-20 {
  outline-color: var(--dark-20);
}

.outline-dark-30 {
  outline-color: var(--dark-30);
}

.outline-dark-50 {
  outline-color: var(--dark-50);
}

.outline-dark-80 {
  outline-color: var(--dark-80);
}

.outline-dark-90 {
  outline-color: var(--dark-90);
}

.outline-darker-10 {
  outline-color: var(--darker-10);
}

.outline-darker-20 {
  outline-color: var(--darker-20);
}

.outline-darker-30 {
  outline-color: var(--darker-30);
}

.outline-darker-50 {
  outline-color: var(--darker-50);
}

.outline-darker-80 {
  outline-color: var(--darker-80);
}

.outline-darker-90 {
  outline-color: var(--darker-90);
}

.outline-light-10 {
  outline-color: var(--light-10);
}

.outline-light-20 {
  outline-color: var(--light-20);
}

.outline-light-30 {
  outline-color: var(--light-30);
}

.outline-light-50 {
  outline-color: var(--light-50);
}

.outline-light-80 {
  outline-color: var(--light-80);
}

.outline-light-90 {
  outline-color: var(--light-90);
}

.skin-accent {
  background-color: var(--accent);
  color: var(--dark);
}
.skin-accent button,
.skin-accent .button {
  background-color: var(--primary);
  color: var(--dark);
  border-color: var(--primary);
}
.skin-accent button:hover,
.skin-accent .button:hover {
  background-color: var(--primary-hover);
}
.skin-accent button:active,
.skin-accent .button:active {
  background-color: var(--primary-active);
}

.skin-primary {
  background-color: var(--primary);
  color: var(--dark);
}
.skin-primary button,
.skin-primary .button {
  background-color: var(--dark);
  color: var(--primary);
  border-color: var(--dark);
}
.skin-primary button:hover,
.skin-primary .button:hover {
  background-color: var(--dark-hover);
}
.skin-primary button:active,
.skin-primary .button:active {
  background-color: var(--dark-active);
}

.skin-secondary {
  background-color: var(--secondary);
  color: var(--light);
}
.skin-secondary button,
.skin-secondary .button {
  background-color: var(--primary);
  color: var(--dark);
  border-color: var(--primary);
}
.skin-secondary button:hover,
.skin-secondary .button:hover {
  background-color: var(--primary-hover);
}
.skin-secondary button:active,
.skin-secondary .button:active {
  background-color: var(--primary-active);
}

.skin-dark {
  background-color: var(--dark);
  color: var(--light);
}
.skin-dark button,
.skin-dark .button {
  background-color: var(--primary);
  color: var(--dark);
  border-color: var(--primary);
}
.skin-dark button:hover,
.skin-dark .button:hover {
  background-color: var(--primary-hover);
}
.skin-dark button:active,
.skin-dark .button:active {
  background-color: var(--primary-active);
}

.skin-light {
  background-color: var(--light);
  color: var(--dark);
}
.skin-light button,
.skin-light .button {
  background-color: var(--primary);
  color: var(--dark);
  border-color: var(--primary);
}
.skin-light button:hover,
.skin-light .button:hover {
  background-color: var(--primary-hover);
}
.skin-light button:active,
.skin-light .button:active {
  background-color: var(--primary-active);
}

.skin-charcoal-light {
  background-color: var(--charcoal-light);
  color: var(--light);
}
.skin-charcoal-light button,
.skin-charcoal-light .button {
  background-color: var(--primary);
  color: var(--dark);
  border-color: var(--primary);
}
.skin-charcoal-light button:hover,
.skin-charcoal-light .button:hover {
  background-color: var(--primary-hover);
}
.skin-charcoal-light button:active,
.skin-charcoal-light .button:active {
  background-color: var(--primary-active);
}

.skin-lime-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--dark);
}
.skin-lime-gradient button,
.skin-lime-gradient .button {
  background-color: var(--dark);
  color: var(--primary);
  border-color: var(--dark);
}
.skin-lime-gradient button:hover,
.skin-lime-gradient .button:hover {
  background-color: var(--dark-hover);
}
.skin-lime-gradient button:active,
.skin-lime-gradient .button:active {
  background-color: var(--dark-active);
}

.skin-gray {
  background-color: var(--gray-200);
  color: var(--dark);
}
.skin-gray button,
.skin-gray .button {
  background-color: var(--primary);
  color: var(--dark);
  border-color: var(--primary);
}
.skin-gray button:hover,
.skin-gray .button:hover {
  background-color: var(--primary-hover);
}
.skin-gray button:active,
.skin-gray .button:active {
  background-color: var(--primary-active);
}

.skin-success {
  background-color: var(--success);
  color: var(--light);
}
.skin-success button,
.skin-success .button {
  background-color: var(--light);
  color: var(--success);
  border-color: var(--light);
}
.skin-success button:hover,
.skin-success .button:hover {
  background-color: var(--light-hover);
}
.skin-success button:active,
.skin-success .button:active {
  background-color: var(--light-active);
}

.skin-warning {
  background-color: var(--warning);
  color: var(--dark);
}
.skin-warning button,
.skin-warning .button {
  background-color: var(--dark);
  color: var(--light);
  border-color: var(--dark);
}
.skin-warning button:hover,
.skin-warning .button:hover {
  background-color: var(--dark-hover);
}
.skin-warning button:active,
.skin-warning .button:active {
  background-color: var(--dark-active);
}

.skin-error {
  background-color: var(--error);
  color: var(--light);
}
.skin-error button,
.skin-error .button {
  background-color: var(--light);
  color: var(--error);
  border-color: var(--light);
}
.skin-error button:hover,
.skin-error .button:hover {
  background-color: var(--light-hover);
}
.skin-error button:active,
.skin-error .button:active {
  background-color: var(--light-active);
}

.skin-info {
  background-color: var(--info);
  color: var(--light);
}
.skin-info button,
.skin-info .button {
  background-color: var(--light);
  color: var(--info);
  border-color: var(--light);
}
.skin-info button:hover,
.skin-info .button:hover {
  background-color: var(--light-hover);
}
.skin-info button:active,
.skin-info .button:active {
  background-color: var(--light-active);
}

.hover\:bg-white:hover {
  background-color: var(--white);
}

.hover\:bg-black:hover {
  background-color: var(--black);
}

.hover\:bg-transparent:hover {
  background-color: var(--transparent);
}

.hover\:bg-current:hover {
  background-color: var(--current);
}

.hover\:bg-accent:hover {
  background-color: var(--accent);
}

.hover\:bg-accent-dark:hover {
  background-color: var(--accent-dark);
}

.hover\:bg-accent-light:hover {
  background-color: var(--accent-light);
}

.hover\:bg-gray-50:hover {
  background-color: var(--gray-50);
}

.hover\:bg-gray-100:hover {
  background-color: var(--gray-100);
}

.hover\:bg-gray-200:hover {
  background-color: var(--gray-200);
}

.hover\:bg-gray-300:hover {
  background-color: var(--gray-300);
}

.hover\:bg-gray-400:hover {
  background-color: var(--gray-400);
}

.hover\:bg-gray-500:hover {
  background-color: var(--gray-500);
}

.hover\:bg-gray-600:hover {
  background-color: var(--gray-600);
}

.hover\:bg-gray-700:hover {
  background-color: var(--gray-700);
}

.hover\:bg-gray-800:hover {
  background-color: var(--gray-800);
}

.hover\:bg-gray-900:hover {
  background-color: var(--gray-900);
}

.hover\:bg-charcoal:hover {
  background-color: var(--charcoal);
}

.hover\:bg-charcoal-light:hover {
  background-color: var(--charcoal-light);
}

.hover\:bg-dark:hover {
  background-color: var(--dark);
}

.hover\:bg-darker:hover {
  background-color: var(--darker);
}

.hover\:bg-light:hover {
  background-color: var(--light);
}

.hover\:bg-success:hover {
  background-color: var(--success);
}

.hover\:bg-warning:hover {
  background-color: var(--warning);
}

.hover\:bg-error:hover {
  background-color: var(--error);
}

.hover\:bg-info:hover {
  background-color: var(--info);
}

.hover\:bg-accent-hover:hover {
  background-color: var(--accent-hover);
}

.hover\:bg-accent-active:hover {
  background-color: var(--accent-active);
}

.hover\:bg-accent-disabled:hover {
  background-color: var(--accent-disabled);
}

.hover\:bg-success-hover:hover {
  background-color: var(--success-hover);
}

.hover\:bg-success-active:hover {
  background-color: var(--success-active);
}

.hover\:bg-success-disabled:hover {
  background-color: var(--success-disabled);
}

.hover\:bg-warning-hover:hover {
  background-color: var(--warning-hover);
}

.hover\:bg-warning-active:hover {
  background-color: var(--warning-active);
}

.hover\:bg-warning-disabled:hover {
  background-color: var(--warning-disabled);
}

.hover\:bg-error-hover:hover {
  background-color: var(--error-hover);
}

.hover\:bg-error-active:hover {
  background-color: var(--error-active);
}

.hover\:bg-error-disabled:hover {
  background-color: var(--error-disabled);
}

.hover\:bg-info-hover:hover {
  background-color: var(--info-hover);
}

.hover\:bg-info-active:hover {
  background-color: var(--info-active);
}

.hover\:bg-info-disabled:hover {
  background-color: var(--info-disabled);
}

.hover\:bg-dark-hover:hover {
  background-color: var(--dark-hover);
}

.hover\:bg-dark-active:hover {
  background-color: var(--dark-active);
}

.hover\:bg-dark-disabled:hover {
  background-color: var(--dark-disabled);
}

.hover\:bg-darker-hover:hover {
  background-color: var(--darker-hover);
}

.hover\:bg-darker-active:hover {
  background-color: var(--darker-active);
}

.hover\:bg-darker-disabled:hover {
  background-color: var(--darker-disabled);
}

.hover\:bg-light-hover:hover {
  background-color: var(--light-hover);
}

.hover\:bg-light-active:hover {
  background-color: var(--light-active);
}

.hover\:bg-light-disabled:hover {
  background-color: var(--light-disabled);
}

.hover\:bg-accent-10:hover {
  background-color: var(--accent-10);
}

.hover\:bg-accent-20:hover {
  background-color: var(--accent-20);
}

.hover\:bg-accent-30:hover {
  background-color: var(--accent-30);
}

.hover\:bg-accent-50:hover {
  background-color: var(--accent-50);
}

.hover\:bg-accent-80:hover {
  background-color: var(--accent-80);
}

.hover\:bg-accent-90:hover {
  background-color: var(--accent-90);
}

.hover\:bg-success-10:hover {
  background-color: var(--success-10);
}

.hover\:bg-success-20:hover {
  background-color: var(--success-20);
}

.hover\:bg-success-30:hover {
  background-color: var(--success-30);
}

.hover\:bg-success-50:hover {
  background-color: var(--success-50);
}

.hover\:bg-success-80:hover {
  background-color: var(--success-80);
}

.hover\:bg-success-90:hover {
  background-color: var(--success-90);
}

.hover\:bg-warning-10:hover {
  background-color: var(--warning-10);
}

.hover\:bg-warning-20:hover {
  background-color: var(--warning-20);
}

.hover\:bg-warning-30:hover {
  background-color: var(--warning-30);
}

.hover\:bg-warning-50:hover {
  background-color: var(--warning-50);
}

.hover\:bg-warning-80:hover {
  background-color: var(--warning-80);
}

.hover\:bg-warning-90:hover {
  background-color: var(--warning-90);
}

.hover\:bg-error-10:hover {
  background-color: var(--error-10);
}

.hover\:bg-error-20:hover {
  background-color: var(--error-20);
}

.hover\:bg-error-30:hover {
  background-color: var(--error-30);
}

.hover\:bg-error-50:hover {
  background-color: var(--error-50);
}

.hover\:bg-error-80:hover {
  background-color: var(--error-80);
}

.hover\:bg-error-90:hover {
  background-color: var(--error-90);
}

.hover\:bg-info-10:hover {
  background-color: var(--info-10);
}

.hover\:bg-info-20:hover {
  background-color: var(--info-20);
}

.hover\:bg-info-30:hover {
  background-color: var(--info-30);
}

.hover\:bg-info-50:hover {
  background-color: var(--info-50);
}

.hover\:bg-info-80:hover {
  background-color: var(--info-80);
}

.hover\:bg-info-90:hover {
  background-color: var(--info-90);
}

.hover\:bg-dark-10:hover {
  background-color: var(--dark-10);
}

.hover\:bg-dark-20:hover {
  background-color: var(--dark-20);
}

.hover\:bg-dark-30:hover {
  background-color: var(--dark-30);
}

.hover\:bg-dark-50:hover {
  background-color: var(--dark-50);
}

.hover\:bg-dark-80:hover {
  background-color: var(--dark-80);
}

.hover\:bg-dark-90:hover {
  background-color: var(--dark-90);
}

.hover\:bg-darker-10:hover {
  background-color: var(--darker-10);
}

.hover\:bg-darker-20:hover {
  background-color: var(--darker-20);
}

.hover\:bg-darker-30:hover {
  background-color: var(--darker-30);
}

.hover\:bg-darker-50:hover {
  background-color: var(--darker-50);
}

.hover\:bg-darker-80:hover {
  background-color: var(--darker-80);
}

.hover\:bg-darker-90:hover {
  background-color: var(--darker-90);
}

.hover\:bg-light-10:hover {
  background-color: var(--light-10);
}

.hover\:bg-light-20:hover {
  background-color: var(--light-20);
}

.hover\:bg-light-30:hover {
  background-color: var(--light-30);
}

.hover\:bg-light-50:hover {
  background-color: var(--light-50);
}

.hover\:bg-light-80:hover {
  background-color: var(--light-80);
}

.hover\:bg-light-90:hover {
  background-color: var(--light-90);
}

.hover\:text-white:hover {
  color: var(--white);
}

.hover\:text-black:hover {
  color: var(--black);
}

.hover\:text-transparent:hover {
  color: var(--transparent);
}

.hover\:text-current:hover {
  color: var(--current);
}

.hover\:text-accent:hover {
  color: var(--accent);
}

.hover\:text-accent-dark:hover {
  color: var(--accent-dark);
}

.hover\:text-accent-light:hover {
  color: var(--accent-light);
}

.hover\:text-gray-50:hover {
  color: var(--gray-50);
}

.hover\:text-gray-100:hover {
  color: var(--gray-100);
}

.hover\:text-gray-200:hover {
  color: var(--gray-200);
}

.hover\:text-gray-300:hover {
  color: var(--gray-300);
}

.hover\:text-gray-400:hover {
  color: var(--gray-400);
}

.hover\:text-gray-500:hover {
  color: var(--gray-500);
}

.hover\:text-gray-600:hover {
  color: var(--gray-600);
}

.hover\:text-gray-700:hover {
  color: var(--gray-700);
}

.hover\:text-gray-800:hover {
  color: var(--gray-800);
}

.hover\:text-gray-900:hover {
  color: var(--gray-900);
}

.hover\:text-charcoal:hover {
  color: var(--charcoal);
}

.hover\:text-charcoal-light:hover {
  color: var(--charcoal-light);
}

.hover\:text-dark:hover {
  color: var(--dark);
}

.hover\:text-darker:hover {
  color: var(--darker);
}

.hover\:text-light:hover {
  color: var(--light);
}

.hover\:text-success:hover {
  color: var(--success);
}

.hover\:text-warning:hover {
  color: var(--warning);
}

.hover\:text-error:hover {
  color: var(--error);
}

.hover\:text-info:hover {
  color: var(--info);
}

.hover\:text-accent-hover:hover {
  color: var(--accent-hover);
}

.hover\:text-accent-active:hover {
  color: var(--accent-active);
}

.hover\:text-accent-disabled:hover {
  color: var(--accent-disabled);
}

.hover\:text-success-hover:hover {
  color: var(--success-hover);
}

.hover\:text-success-active:hover {
  color: var(--success-active);
}

.hover\:text-success-disabled:hover {
  color: var(--success-disabled);
}

.hover\:text-warning-hover:hover {
  color: var(--warning-hover);
}

.hover\:text-warning-active:hover {
  color: var(--warning-active);
}

.hover\:text-warning-disabled:hover {
  color: var(--warning-disabled);
}

.hover\:text-error-hover:hover {
  color: var(--error-hover);
}

.hover\:text-error-active:hover {
  color: var(--error-active);
}

.hover\:text-error-disabled:hover {
  color: var(--error-disabled);
}

.hover\:text-info-hover:hover {
  color: var(--info-hover);
}

.hover\:text-info-active:hover {
  color: var(--info-active);
}

.hover\:text-info-disabled:hover {
  color: var(--info-disabled);
}

.hover\:text-dark-hover:hover {
  color: var(--dark-hover);
}

.hover\:text-dark-active:hover {
  color: var(--dark-active);
}

.hover\:text-dark-disabled:hover {
  color: var(--dark-disabled);
}

.hover\:text-darker-hover:hover {
  color: var(--darker-hover);
}

.hover\:text-darker-active:hover {
  color: var(--darker-active);
}

.hover\:text-darker-disabled:hover {
  color: var(--darker-disabled);
}

.hover\:text-light-hover:hover {
  color: var(--light-hover);
}

.hover\:text-light-active:hover {
  color: var(--light-active);
}

.hover\:text-light-disabled:hover {
  color: var(--light-disabled);
}

.hover\:text-accent-10:hover {
  color: var(--accent-10);
}

.hover\:text-accent-20:hover {
  color: var(--accent-20);
}

.hover\:text-accent-30:hover {
  color: var(--accent-30);
}

.hover\:text-accent-50:hover {
  color: var(--accent-50);
}

.hover\:text-accent-80:hover {
  color: var(--accent-80);
}

.hover\:text-accent-90:hover {
  color: var(--accent-90);
}

.hover\:text-success-10:hover {
  color: var(--success-10);
}

.hover\:text-success-20:hover {
  color: var(--success-20);
}

.hover\:text-success-30:hover {
  color: var(--success-30);
}

.hover\:text-success-50:hover {
  color: var(--success-50);
}

.hover\:text-success-80:hover {
  color: var(--success-80);
}

.hover\:text-success-90:hover {
  color: var(--success-90);
}

.hover\:text-warning-10:hover {
  color: var(--warning-10);
}

.hover\:text-warning-20:hover {
  color: var(--warning-20);
}

.hover\:text-warning-30:hover {
  color: var(--warning-30);
}

.hover\:text-warning-50:hover {
  color: var(--warning-50);
}

.hover\:text-warning-80:hover {
  color: var(--warning-80);
}

.hover\:text-warning-90:hover {
  color: var(--warning-90);
}

.hover\:text-error-10:hover {
  color: var(--error-10);
}

.hover\:text-error-20:hover {
  color: var(--error-20);
}

.hover\:text-error-30:hover {
  color: var(--error-30);
}

.hover\:text-error-50:hover {
  color: var(--error-50);
}

.hover\:text-error-80:hover {
  color: var(--error-80);
}

.hover\:text-error-90:hover {
  color: var(--error-90);
}

.hover\:text-info-10:hover {
  color: var(--info-10);
}

.hover\:text-info-20:hover {
  color: var(--info-20);
}

.hover\:text-info-30:hover {
  color: var(--info-30);
}

.hover\:text-info-50:hover {
  color: var(--info-50);
}

.hover\:text-info-80:hover {
  color: var(--info-80);
}

.hover\:text-info-90:hover {
  color: var(--info-90);
}

.hover\:text-dark-10:hover {
  color: var(--dark-10);
}

.hover\:text-dark-20:hover {
  color: var(--dark-20);
}

.hover\:text-dark-30:hover {
  color: var(--dark-30);
}

.hover\:text-dark-50:hover {
  color: var(--dark-50);
}

.hover\:text-dark-80:hover {
  color: var(--dark-80);
}

.hover\:text-dark-90:hover {
  color: var(--dark-90);
}

.hover\:text-darker-10:hover {
  color: var(--darker-10);
}

.hover\:text-darker-20:hover {
  color: var(--darker-20);
}

.hover\:text-darker-30:hover {
  color: var(--darker-30);
}

.hover\:text-darker-50:hover {
  color: var(--darker-50);
}

.hover\:text-darker-80:hover {
  color: var(--darker-80);
}

.hover\:text-darker-90:hover {
  color: var(--darker-90);
}

.hover\:text-light-10:hover {
  color: var(--light-10);
}

.hover\:text-light-20:hover {
  color: var(--light-20);
}

.hover\:text-light-30:hover {
  color: var(--light-30);
}

.hover\:text-light-50:hover {
  color: var(--light-50);
}

.hover\:text-light-80:hover {
  color: var(--light-80);
}

.hover\:text-light-90:hover {
  color: var(--light-90);
}

.hover\:border-white:hover {
  border-color: var(--white);
}

.hover\:border-black:hover {
  border-color: var(--black);
}

.hover\:border-transparent:hover {
  border-color: var(--transparent);
}

.hover\:border-current:hover {
  border-color: var(--current);
}

.hover\:border-accent:hover {
  border-color: var(--accent);
}

.hover\:border-accent-dark:hover {
  border-color: var(--accent-dark);
}

.hover\:border-accent-light:hover {
  border-color: var(--accent-light);
}

.hover\:border-gray-50:hover {
  border-color: var(--gray-50);
}

.hover\:border-gray-100:hover {
  border-color: var(--gray-100);
}

.hover\:border-gray-200:hover {
  border-color: var(--gray-200);
}

.hover\:border-gray-300:hover {
  border-color: var(--gray-300);
}

.hover\:border-gray-400:hover {
  border-color: var(--gray-400);
}

.hover\:border-gray-500:hover {
  border-color: var(--gray-500);
}

.hover\:border-gray-600:hover {
  border-color: var(--gray-600);
}

.hover\:border-gray-700:hover {
  border-color: var(--gray-700);
}

.hover\:border-gray-800:hover {
  border-color: var(--gray-800);
}

.hover\:border-gray-900:hover {
  border-color: var(--gray-900);
}

.hover\:border-charcoal:hover {
  border-color: var(--charcoal);
}

.hover\:border-charcoal-light:hover {
  border-color: var(--charcoal-light);
}

.hover\:border-dark:hover {
  border-color: var(--dark);
}

.hover\:border-darker:hover {
  border-color: var(--darker);
}

.hover\:border-light:hover {
  border-color: var(--light);
}

.hover\:border-success:hover {
  border-color: var(--success);
}

.hover\:border-warning:hover {
  border-color: var(--warning);
}

.hover\:border-error:hover {
  border-color: var(--error);
}

.hover\:border-info:hover {
  border-color: var(--info);
}

.hover\:border-accent-hover:hover {
  border-color: var(--accent-hover);
}

.hover\:border-accent-active:hover {
  border-color: var(--accent-active);
}

.hover\:border-accent-disabled:hover {
  border-color: var(--accent-disabled);
}

.hover\:border-success-hover:hover {
  border-color: var(--success-hover);
}

.hover\:border-success-active:hover {
  border-color: var(--success-active);
}

.hover\:border-success-disabled:hover {
  border-color: var(--success-disabled);
}

.hover\:border-warning-hover:hover {
  border-color: var(--warning-hover);
}

.hover\:border-warning-active:hover {
  border-color: var(--warning-active);
}

.hover\:border-warning-disabled:hover {
  border-color: var(--warning-disabled);
}

.hover\:border-error-hover:hover {
  border-color: var(--error-hover);
}

.hover\:border-error-active:hover {
  border-color: var(--error-active);
}

.hover\:border-error-disabled:hover {
  border-color: var(--error-disabled);
}

.hover\:border-info-hover:hover {
  border-color: var(--info-hover);
}

.hover\:border-info-active:hover {
  border-color: var(--info-active);
}

.hover\:border-info-disabled:hover {
  border-color: var(--info-disabled);
}

.hover\:border-dark-hover:hover {
  border-color: var(--dark-hover);
}

.hover\:border-dark-active:hover {
  border-color: var(--dark-active);
}

.hover\:border-dark-disabled:hover {
  border-color: var(--dark-disabled);
}

.hover\:border-darker-hover:hover {
  border-color: var(--darker-hover);
}

.hover\:border-darker-active:hover {
  border-color: var(--darker-active);
}

.hover\:border-darker-disabled:hover {
  border-color: var(--darker-disabled);
}

.hover\:border-light-hover:hover {
  border-color: var(--light-hover);
}

.hover\:border-light-active:hover {
  border-color: var(--light-active);
}

.hover\:border-light-disabled:hover {
  border-color: var(--light-disabled);
}

.hover\:border-accent-10:hover {
  border-color: var(--accent-10);
}

.hover\:border-accent-20:hover {
  border-color: var(--accent-20);
}

.hover\:border-accent-30:hover {
  border-color: var(--accent-30);
}

.hover\:border-accent-50:hover {
  border-color: var(--accent-50);
}

.hover\:border-accent-80:hover {
  border-color: var(--accent-80);
}

.hover\:border-accent-90:hover {
  border-color: var(--accent-90);
}

.hover\:border-success-10:hover {
  border-color: var(--success-10);
}

.hover\:border-success-20:hover {
  border-color: var(--success-20);
}

.hover\:border-success-30:hover {
  border-color: var(--success-30);
}

.hover\:border-success-50:hover {
  border-color: var(--success-50);
}

.hover\:border-success-80:hover {
  border-color: var(--success-80);
}

.hover\:border-success-90:hover {
  border-color: var(--success-90);
}

.hover\:border-warning-10:hover {
  border-color: var(--warning-10);
}

.hover\:border-warning-20:hover {
  border-color: var(--warning-20);
}

.hover\:border-warning-30:hover {
  border-color: var(--warning-30);
}

.hover\:border-warning-50:hover {
  border-color: var(--warning-50);
}

.hover\:border-warning-80:hover {
  border-color: var(--warning-80);
}

.hover\:border-warning-90:hover {
  border-color: var(--warning-90);
}

.hover\:border-error-10:hover {
  border-color: var(--error-10);
}

.hover\:border-error-20:hover {
  border-color: var(--error-20);
}

.hover\:border-error-30:hover {
  border-color: var(--error-30);
}

.hover\:border-error-50:hover {
  border-color: var(--error-50);
}

.hover\:border-error-80:hover {
  border-color: var(--error-80);
}

.hover\:border-error-90:hover {
  border-color: var(--error-90);
}

.hover\:border-info-10:hover {
  border-color: var(--info-10);
}

.hover\:border-info-20:hover {
  border-color: var(--info-20);
}

.hover\:border-info-30:hover {
  border-color: var(--info-30);
}

.hover\:border-info-50:hover {
  border-color: var(--info-50);
}

.hover\:border-info-80:hover {
  border-color: var(--info-80);
}

.hover\:border-info-90:hover {
  border-color: var(--info-90);
}

.hover\:border-dark-10:hover {
  border-color: var(--dark-10);
}

.hover\:border-dark-20:hover {
  border-color: var(--dark-20);
}

.hover\:border-dark-30:hover {
  border-color: var(--dark-30);
}

.hover\:border-dark-50:hover {
  border-color: var(--dark-50);
}

.hover\:border-dark-80:hover {
  border-color: var(--dark-80);
}

.hover\:border-dark-90:hover {
  border-color: var(--dark-90);
}

.hover\:border-darker-10:hover {
  border-color: var(--darker-10);
}

.hover\:border-darker-20:hover {
  border-color: var(--darker-20);
}

.hover\:border-darker-30:hover {
  border-color: var(--darker-30);
}

.hover\:border-darker-50:hover {
  border-color: var(--darker-50);
}

.hover\:border-darker-80:hover {
  border-color: var(--darker-80);
}

.hover\:border-darker-90:hover {
  border-color: var(--darker-90);
}

.hover\:border-light-10:hover {
  border-color: var(--light-10);
}

.hover\:border-light-20:hover {
  border-color: var(--light-20);
}

.hover\:border-light-30:hover {
  border-color: var(--light-30);
}

.hover\:border-light-50:hover {
  border-color: var(--light-50);
}

.hover\:border-light-80:hover {
  border-color: var(--light-80);
}

.hover\:border-light-90:hover {
  border-color: var(--light-90);
}

.hover\:outline-white:hover {
  outline-color: var(--white);
}

.hover\:outline-black:hover {
  outline-color: var(--black);
}

.hover\:outline-transparent:hover {
  outline-color: var(--transparent);
}

.hover\:outline-current:hover {
  outline-color: var(--current);
}

.hover\:outline-accent:hover {
  outline-color: var(--accent);
}

.hover\:outline-accent-dark:hover {
  outline-color: var(--accent-dark);
}

.hover\:outline-accent-light:hover {
  outline-color: var(--accent-light);
}

.hover\:outline-gray-50:hover {
  outline-color: var(--gray-50);
}

.hover\:outline-gray-100:hover {
  outline-color: var(--gray-100);
}

.hover\:outline-gray-200:hover {
  outline-color: var(--gray-200);
}

.hover\:outline-gray-300:hover {
  outline-color: var(--gray-300);
}

.hover\:outline-gray-400:hover {
  outline-color: var(--gray-400);
}

.hover\:outline-gray-500:hover {
  outline-color: var(--gray-500);
}

.hover\:outline-gray-600:hover {
  outline-color: var(--gray-600);
}

.hover\:outline-gray-700:hover {
  outline-color: var(--gray-700);
}

.hover\:outline-gray-800:hover {
  outline-color: var(--gray-800);
}

.hover\:outline-gray-900:hover {
  outline-color: var(--gray-900);
}

.hover\:outline-charcoal:hover {
  outline-color: var(--charcoal);
}

.hover\:outline-charcoal-light:hover {
  outline-color: var(--charcoal-light);
}

.hover\:outline-dark:hover {
  outline-color: var(--dark);
}

.hover\:outline-darker:hover {
  outline-color: var(--darker);
}

.hover\:outline-light:hover {
  outline-color: var(--light);
}

.hover\:outline-success:hover {
  outline-color: var(--success);
}

.hover\:outline-warning:hover {
  outline-color: var(--warning);
}

.hover\:outline-error:hover {
  outline-color: var(--error);
}

.hover\:outline-info:hover {
  outline-color: var(--info);
}

.hover\:outline-accent-hover:hover {
  outline-color: var(--accent-hover);
}

.hover\:outline-accent-active:hover {
  outline-color: var(--accent-active);
}

.hover\:outline-accent-disabled:hover {
  outline-color: var(--accent-disabled);
}

.hover\:outline-success-hover:hover {
  outline-color: var(--success-hover);
}

.hover\:outline-success-active:hover {
  outline-color: var(--success-active);
}

.hover\:outline-success-disabled:hover {
  outline-color: var(--success-disabled);
}

.hover\:outline-warning-hover:hover {
  outline-color: var(--warning-hover);
}

.hover\:outline-warning-active:hover {
  outline-color: var(--warning-active);
}

.hover\:outline-warning-disabled:hover {
  outline-color: var(--warning-disabled);
}

.hover\:outline-error-hover:hover {
  outline-color: var(--error-hover);
}

.hover\:outline-error-active:hover {
  outline-color: var(--error-active);
}

.hover\:outline-error-disabled:hover {
  outline-color: var(--error-disabled);
}

.hover\:outline-info-hover:hover {
  outline-color: var(--info-hover);
}

.hover\:outline-info-active:hover {
  outline-color: var(--info-active);
}

.hover\:outline-info-disabled:hover {
  outline-color: var(--info-disabled);
}

.hover\:outline-dark-hover:hover {
  outline-color: var(--dark-hover);
}

.hover\:outline-dark-active:hover {
  outline-color: var(--dark-active);
}

.hover\:outline-dark-disabled:hover {
  outline-color: var(--dark-disabled);
}

.hover\:outline-darker-hover:hover {
  outline-color: var(--darker-hover);
}

.hover\:outline-darker-active:hover {
  outline-color: var(--darker-active);
}

.hover\:outline-darker-disabled:hover {
  outline-color: var(--darker-disabled);
}

.hover\:outline-light-hover:hover {
  outline-color: var(--light-hover);
}

.hover\:outline-light-active:hover {
  outline-color: var(--light-active);
}

.hover\:outline-light-disabled:hover {
  outline-color: var(--light-disabled);
}

.hover\:outline-accent-10:hover {
  outline-color: var(--accent-10);
}

.hover\:outline-accent-20:hover {
  outline-color: var(--accent-20);
}

.hover\:outline-accent-30:hover {
  outline-color: var(--accent-30);
}

.hover\:outline-accent-50:hover {
  outline-color: var(--accent-50);
}

.hover\:outline-accent-80:hover {
  outline-color: var(--accent-80);
}

.hover\:outline-accent-90:hover {
  outline-color: var(--accent-90);
}

.hover\:outline-success-10:hover {
  outline-color: var(--success-10);
}

.hover\:outline-success-20:hover {
  outline-color: var(--success-20);
}

.hover\:outline-success-30:hover {
  outline-color: var(--success-30);
}

.hover\:outline-success-50:hover {
  outline-color: var(--success-50);
}

.hover\:outline-success-80:hover {
  outline-color: var(--success-80);
}

.hover\:outline-success-90:hover {
  outline-color: var(--success-90);
}

.hover\:outline-warning-10:hover {
  outline-color: var(--warning-10);
}

.hover\:outline-warning-20:hover {
  outline-color: var(--warning-20);
}

.hover\:outline-warning-30:hover {
  outline-color: var(--warning-30);
}

.hover\:outline-warning-50:hover {
  outline-color: var(--warning-50);
}

.hover\:outline-warning-80:hover {
  outline-color: var(--warning-80);
}

.hover\:outline-warning-90:hover {
  outline-color: var(--warning-90);
}

.hover\:outline-error-10:hover {
  outline-color: var(--error-10);
}

.hover\:outline-error-20:hover {
  outline-color: var(--error-20);
}

.hover\:outline-error-30:hover {
  outline-color: var(--error-30);
}

.hover\:outline-error-50:hover {
  outline-color: var(--error-50);
}

.hover\:outline-error-80:hover {
  outline-color: var(--error-80);
}

.hover\:outline-error-90:hover {
  outline-color: var(--error-90);
}

.hover\:outline-info-10:hover {
  outline-color: var(--info-10);
}

.hover\:outline-info-20:hover {
  outline-color: var(--info-20);
}

.hover\:outline-info-30:hover {
  outline-color: var(--info-30);
}

.hover\:outline-info-50:hover {
  outline-color: var(--info-50);
}

.hover\:outline-info-80:hover {
  outline-color: var(--info-80);
}

.hover\:outline-info-90:hover {
  outline-color: var(--info-90);
}

.hover\:outline-dark-10:hover {
  outline-color: var(--dark-10);
}

.hover\:outline-dark-20:hover {
  outline-color: var(--dark-20);
}

.hover\:outline-dark-30:hover {
  outline-color: var(--dark-30);
}

.hover\:outline-dark-50:hover {
  outline-color: var(--dark-50);
}

.hover\:outline-dark-80:hover {
  outline-color: var(--dark-80);
}

.hover\:outline-dark-90:hover {
  outline-color: var(--dark-90);
}

.hover\:outline-darker-10:hover {
  outline-color: var(--darker-10);
}

.hover\:outline-darker-20:hover {
  outline-color: var(--darker-20);
}

.hover\:outline-darker-30:hover {
  outline-color: var(--darker-30);
}

.hover\:outline-darker-50:hover {
  outline-color: var(--darker-50);
}

.hover\:outline-darker-80:hover {
  outline-color: var(--darker-80);
}

.hover\:outline-darker-90:hover {
  outline-color: var(--darker-90);
}

.hover\:outline-light-10:hover {
  outline-color: var(--light-10);
}

.hover\:outline-light-20:hover {
  outline-color: var(--light-20);
}

.hover\:outline-light-30:hover {
  outline-color: var(--light-30);
}

.hover\:outline-light-50:hover {
  outline-color: var(--light-50);
}

.hover\:outline-light-80:hover {
  outline-color: var(--light-80);
}

.hover\:outline-light-90:hover {
  outline-color: var(--light-90);
}

.active\:bg-accent-active:active {
  background-color: var(--accent-active);
}

.active\:bg-primary-active:active {
  background-color: var(--primary-active);
}

.active\:bg-secondary-active:active {
  background-color: var(--secondary-active);
}

.active\:bg-success-active:active {
  background-color: var(--success-active);
}

.active\:bg-warning-active:active {
  background-color: var(--warning-active);
}

.active\:bg-error-active:active {
  background-color: var(--error-active);
}

.active\:bg-info-active:active {
  background-color: var(--info-active);
}

.disabled\:bg-accent-disabled:disabled,
.disabled\:bg-accent-disabled[disabled] {
  background-color: var(--accent-disabled);
}

.disabled\:bg-primary-disabled:disabled,
.disabled\:bg-primary-disabled[disabled] {
  background-color: var(--primary-disabled);
}

.disabled\:text-accent-disabled:disabled,
.disabled\:text-accent-disabled[disabled] {
  color: var(--accent-disabled);
}

.font-size-1 {
  font-size: var(--text-xs);
}

.font-size-2 {
  font-size: var(--text-sm);
}

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

.font-size-4 {
  font-size: var(--text-lg);
}

.font-size-5 {
  font-size: var(--text-xl);
}

.font-size-6 {
  font-size: var(--text-2xl);
}

.font-size-7 {
  font-size: var(--text-3xl);
}

.font-size-8 {
  font-size: var(--text-4xl);
}

.font-size-9 {
  font-size: var(--text-5xl);
}

.font-size-10 {
  font-size: var(--text-6xl);
}

.font-size-fluid-1 {
  font-size: var(--text-fluid-sm);
}

.font-size-fluid-2 {
  font-size: var(--text-fluid-base);
}

.font-size-fluid-3 {
  font-size: var(--text-fluid-lg);
}

.font-size-fluid-4 {
  font-size: var(--text-fluid-xl);
}

.font-size-fluid-5 {
  font-size: var(--text-fluid-2xl);
}

.font-size-fluid-6 {
  font-size: var(--text-fluid-3xl);
}

.font-size-fluid-7 {
  font-size: var(--text-fluid-4xl);
}

.font-weight-1 {
  font-weight: var(--font-thin);
}

.font-weight-2 {
  font-weight: 200;
}

.font-weight-3 {
  font-weight: var(--font-light);
}

.font-weight-4 {
  font-weight: var(--font-normal);
}

.font-weight-5 {
  font-weight: var(--font-medium);
}

.font-weight-6 {
  font-weight: var(--font-semibold);
}

.font-weight-7 {
  font-weight: var(--font-bold);
}

.font-weight-8 {
  font-weight: var(--font-extrabold);
}

.font-weight-9 {
  font-weight: var(--font-black);
}

.line-height-1 {
  line-height: var(--line-height-1);
}

.line-height-2 {
  line-height: var(--line-height-2);
}

.line-height-3 {
  line-height: var(--line-height-3);
}

.line-height-4 {
  line-height: var(--line-height-4);
}

.line-height-5 {
  line-height: var(--line-height-5);
}

.line-height-6 {
  line-height: var(--line-height-6);
}

.font-spacing-1 {
  letter-spacing: var(--tracking-tighter);
}

.font-spacing-2 {
  letter-spacing: var(--tracking-tight);
}

.font-spacing-3 {
  letter-spacing: -0.0125em;
}

.font-spacing-4 {
  letter-spacing: var(--tracking-normal);
}

.font-spacing-5 {
  letter-spacing: var(--tracking-wide);
}

.font-spacing-6 {
  letter-spacing: var(--tracking-wider);
}

.font-spacing-7 {
  letter-spacing: var(--tracking-widest);
}

.font-family-sans {
  font-family: var(--font-family-sans);
}

.font-family-serif {
  font-family: var(--font-family-serif);
}

.font-family-mono {
  font-family: var(--font-family-mono);
}

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

.font-align-center {
  text-align: center;
}

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

.font-align-justify {
  text-align: justify;
}

.font-case-upper {
  text-transform: uppercase;
}

.font-case-lower {
  text-transform: lowercase;
}

.font-case-capital {
  text-transform: capitalize;
}

.font-case-none {
  text-transform: none;
}

.font-decoration-underline {
  text-decoration: underline;
}

.font-decoration-line-through {
  text-decoration: line-through;
}

.font-decoration-none {
  text-decoration: none;
}

.font-style-italic {
  font-style: italic;
}

.font-style-normal {
  font-style: normal;
}

.font-clip-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-clip-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.font-clip-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.font-clip-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.font-clip-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.font-clip-none {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
}

.font-space-normal {
  white-space: normal;
}

.font-space-nowrap {
  white-space: nowrap;
}

.font-space-pre {
  white-space: pre;
}

.font-space-pre-line {
  white-space: pre-line;
}

.font-space-pre-wrap {
  white-space: pre-wrap;
}

.font-break-normal {
  overflow-wrap: normal;
  word-break: normal;
}

.font-break-word {
  overflow-wrap: break-word;
}

.font-break-all {
  word-break: break-all;
}

.font-h1 {
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-height);
  letter-spacing: var(--font-h1-spacing);
  font-family: var(--font-family-serif);
}

.font-h2 {
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  line-height: var(--font-h2-height);
  letter-spacing: var(--font-h2-spacing);
  font-family: var(--font-family-serif);
}

.font-h3 {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  line-height: var(--font-h3-height);
  letter-spacing: var(--font-h3-spacing);
  font-family: var(--font-family-serif);
}

.font-h4 {
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  line-height: var(--font-h4-height);
  letter-spacing: var(--font-h4-spacing);
  font-family: var(--font-family-serif);
}

.font-h5 {
  font-size: var(--font-h5-size);
  font-weight: var(--font-h5-weight);
  line-height: var(--font-h5-height);
  letter-spacing: var(--font-h5-spacing);
  font-family: var(--font-family-serif);
}

.font-h6 {
  font-size: var(--font-h6-size);
  font-weight: var(--font-h6-weight);
  line-height: var(--font-h6-height);
  letter-spacing: var(--font-h6-spacing);
  font-family: var(--font-family-serif);
}

.font-p {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  font-family: var(--font-family-sans);
}

@media (min-width: 640px) {
  .sm-font-size-1 {
    font-size: var(--text-xs);
  }
  .sm-font-size-2 {
    font-size: var(--text-sm);
  }
  .sm-font-size-3 {
    font-size: var(--text-base);
  }
  .sm-font-size-4 {
    font-size: var(--text-lg);
  }
  .sm-font-size-5 {
    font-size: var(--text-xl);
  }
  .sm-font-size-6 {
    font-size: var(--text-2xl);
  }
  .sm-font-size-7 {
    font-size: var(--text-3xl);
  }
  .sm-font-size-8 {
    font-size: var(--text-4xl);
  }
  .sm-font-size-9 {
    font-size: var(--text-5xl);
  }
  .sm-font-size-10 {
    font-size: var(--text-6xl);
  }
  .sm-font-weight-1 {
    font-weight: var(--font-thin);
  }
  .sm-font-weight-2 {
    font-weight: 200;
  }
  .sm-font-weight-3 {
    font-weight: var(--font-light);
  }
  .sm-font-weight-4 {
    font-weight: var(--font-normal);
  }
  .sm-font-weight-5 {
    font-weight: var(--font-medium);
  }
  .sm-font-weight-6 {
    font-weight: var(--font-semibold);
  }
  .sm-font-weight-7 {
    font-weight: var(--font-bold);
  }
  .sm-font-weight-8 {
    font-weight: var(--font-extrabold);
  }
  .sm-font-weight-9 {
    font-weight: var(--font-black);
  }
  .sm-font-align-left {
    text-align: left;
  }
  .sm-font-align-center {
    text-align: center;
  }
  .sm-font-align-right {
    text-align: right;
  }
  .sm-font-align-justify {
    text-align: justify;
  }
  .sm-line-height-1 {
    line-height: var(--line-height-1);
  }
  .sm-line-height-2 {
    line-height: var(--line-height-2);
  }
  .sm-line-height-3 {
    line-height: var(--line-height-3);
  }
  .sm-line-height-4 {
    line-height: var(--line-height-4);
  }
  .sm-line-height-5 {
    line-height: var(--line-height-5);
  }
  .sm-line-height-6 {
    line-height: var(--line-height-6);
  }
}
@media (min-width: 768px) {
  .md-font-size-1 {
    font-size: var(--text-xs);
  }
  .md-font-size-2 {
    font-size: var(--text-sm);
  }
  .md-font-size-3 {
    font-size: var(--text-base);
  }
  .md-font-size-4 {
    font-size: var(--text-lg);
  }
  .md-font-size-5 {
    font-size: var(--text-xl);
  }
  .md-font-size-6 {
    font-size: var(--text-2xl);
  }
  .md-font-size-7 {
    font-size: var(--text-3xl);
  }
  .md-font-size-8 {
    font-size: var(--text-4xl);
  }
  .md-font-size-9 {
    font-size: var(--text-5xl);
  }
  .md-font-size-10 {
    font-size: var(--text-6xl);
  }
  .md-font-weight-1 {
    font-weight: var(--font-thin) !important;
  }
  .md-font-weight-2 {
    font-weight: 200 !important;
  }
  .md-font-weight-3 {
    font-weight: var(--font-light) !important;
  }
  .md-font-weight-4 {
    font-weight: var(--font-normal) !important;
  }
  .md-font-weight-5 {
    font-weight: var(--font-medium) !important;
  }
  .md-font-weight-6 {
    font-weight: var(--font-semibold) !important;
  }
  .md-font-weight-7 {
    font-weight: var(--font-bold) !important;
  }
  .md-font-weight-8 {
    font-weight: var(--font-extrabold) !important;
  }
  .md-font-weight-9 {
    font-weight: var(--font-black) !important;
  }
  .md-font-align-left {
    text-align: left;
  }
  .md-font-align-center {
    text-align: center;
  }
  .md-font-align-right {
    text-align: right;
  }
  .md-font-align-justify {
    text-align: justify;
  }
  .md-line-height-1 {
    line-height: var(--line-height-1);
  }
  .md-line-height-2 {
    line-height: var(--line-height-2);
  }
  .md-line-height-3 {
    line-height: var(--line-height-3);
  }
  .md-line-height-4 {
    line-height: var(--line-height-4);
  }
  .md-line-height-5 {
    line-height: var(--line-height-5);
  }
  .md-line-height-6 {
    line-height: var(--line-height-6);
  }
}
@media (min-width: 1024px) {
  .lg-font-size-1 {
    font-size: var(--text-xs);
  }
  .lg-font-size-2 {
    font-size: var(--text-sm);
  }
  .lg-font-size-3 {
    font-size: var(--text-base);
  }
  .lg-font-size-4 {
    font-size: var(--text-lg);
  }
  .lg-font-size-5 {
    font-size: var(--text-xl);
  }
  .lg-font-size-6 {
    font-size: var(--text-2xl);
  }
  .lg-font-size-7 {
    font-size: var(--text-3xl);
  }
  .lg-font-size-8 {
    font-size: var(--text-4xl);
  }
  .lg-font-size-9 {
    font-size: var(--text-5xl);
  }
  .lg-font-size-10 {
    font-size: var(--text-6xl);
  }
  .lg-font-weight-1 {
    font-weight: var(--font-thin);
  }
  .lg-font-weight-2 {
    font-weight: 200;
  }
  .lg-font-weight-3 {
    font-weight: var(--font-light);
  }
  .lg-font-weight-4 {
    font-weight: var(--font-normal);
  }
  .lg-font-weight-5 {
    font-weight: var(--font-medium);
  }
  .lg-font-weight-6 {
    font-weight: var(--font-semibold);
  }
  .lg-font-weight-7 {
    font-weight: var(--font-bold);
  }
  .lg-font-weight-8 {
    font-weight: var(--font-extrabold);
  }
  .lg-font-weight-9 {
    font-weight: var(--font-black);
  }
  .lg-font-align-left {
    text-align: left;
  }
  .lg-font-align-center {
    text-align: center;
  }
  .lg-font-align-right {
    text-align: right;
  }
  .lg-font-align-justify {
    text-align: justify;
  }
  .lg-line-height-1 {
    line-height: var(--line-height-1);
  }
  .lg-line-height-2 {
    line-height: var(--line-height-2);
  }
  .lg-line-height-3 {
    line-height: var(--line-height-3);
  }
  .lg-line-height-4 {
    line-height: var(--line-height-4);
  }
  .lg-line-height-5 {
    line-height: var(--line-height-5);
  }
  .lg-line-height-6 {
    line-height: var(--line-height-6);
  }
}
@media (min-width: 1280px) {
  .xl-font-size-1 {
    font-size: var(--text-xs);
  }
  .xl-font-size-2 {
    font-size: var(--text-sm);
  }
  .xl-font-size-3 {
    font-size: var(--text-base);
  }
  .xl-font-size-4 {
    font-size: var(--text-lg);
  }
  .xl-font-size-5 {
    font-size: var(--text-xl);
  }
  .xl-font-size-6 {
    font-size: var(--text-2xl);
  }
  .xl-font-size-7 {
    font-size: var(--text-3xl);
  }
  .xl-font-size-8 {
    font-size: var(--text-4xl);
  }
  .xl-font-size-9 {
    font-size: var(--text-5xl);
  }
  .xl-font-size-10 {
    font-size: var(--text-6xl);
  }
  .xl-font-weight-1 {
    font-weight: var(--font-thin);
  }
  .xl-font-weight-2 {
    font-weight: 200;
  }
  .xl-font-weight-3 {
    font-weight: var(--font-light);
  }
  .xl-font-weight-4 {
    font-weight: var(--font-normal);
  }
  .xl-font-weight-5 {
    font-weight: var(--font-medium);
  }
  .xl-font-weight-6 {
    font-weight: var(--font-semibold);
  }
  .xl-font-weight-7 {
    font-weight: var(--font-bold);
  }
  .xl-font-weight-8 {
    font-weight: var(--font-extrabold);
  }
  .xl-font-weight-9 {
    font-weight: var(--font-black);
  }
  .xl-font-align-left {
    text-align: left;
  }
  .xl-font-align-center {
    text-align: center;
  }
  .xl-font-align-right {
    text-align: right;
  }
  .xl-font-align-justify {
    text-align: justify;
  }
  .xl-line-height-1 {
    line-height: var(--line-height-1);
  }
  .xl-line-height-2 {
    line-height: var(--line-height-2);
  }
  .xl-line-height-3 {
    line-height: var(--line-height-3);
  }
  .xl-line-height-4 {
    line-height: var(--line-height-4);
  }
  .xl-line-height-5 {
    line-height: var(--line-height-5);
  }
  .xl-line-height-6 {
    line-height: var(--line-height-6);
  }
}
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-none {
  text-transform: none;
}

.text-decoration-none {
  text-decoration: none;
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.letter-spacing-tight {
  letter-spacing: 0.5px;
}

.letter-spacing-normal {
  letter-spacing: 0;
}

.letter-spacing-wide {
  letter-spacing: 1px;
}

.d-inline-block {
  display: inline-block;
}

.p-0 {
  padding: var(--space-0);
}

.p-1 {
  padding: var(--space-1);
}

.p-2 {
  padding: var(--space-2);
}

.p-3 {
  padding: var(--space-3);
}

.p-4 {
  padding: var(--space-4);
}

.p-5 {
  padding: var(--space-5);
}

.p-6 {
  padding: var(--space-6);
}

.p-7 {
  padding: var(--space-7);
}

.p-8 {
  padding: var(--space-8);
}

.p-9 {
  padding: var(--space-9);
}

.p-10 {
  padding: var(--space-10);
}

.p-t-0 {
  padding-top: var(--space-0);
}

.p-t-1 {
  padding-top: var(--space-1);
}

.p-t-2 {
  padding-top: var(--space-2);
}

.p-t-3 {
  padding-top: var(--space-3);
}

.p-t-4 {
  padding-top: var(--space-4);
}

.p-t-5 {
  padding-top: var(--space-5);
}

.p-t-6 {
  padding-top: var(--space-6);
}

.p-t-7 {
  padding-top: var(--space-7);
}

.p-t-8 {
  padding-top: var(--space-8);
}

.p-t-9 {
  padding-top: var(--space-9);
}

.p-t-10 {
  padding-top: var(--space-10);
}

.p-r-0 {
  padding-right: var(--space-0);
}

.p-r-1 {
  padding-right: var(--space-1);
}

.p-r-2 {
  padding-right: var(--space-2);
}

.p-r-3 {
  padding-right: var(--space-3);
}

.p-r-4 {
  padding-right: var(--space-4);
}

.p-r-5 {
  padding-right: var(--space-5);
}

.p-r-6 {
  padding-right: var(--space-6);
}

.p-r-7 {
  padding-right: var(--space-7);
}

.p-r-8 {
  padding-right: var(--space-8);
}

.p-r-9 {
  padding-right: var(--space-9);
}

.p-r-10 {
  padding-right: var(--space-10);
}

.p-b-0 {
  padding-bottom: var(--space-0);
}

.p-b-1 {
  padding-bottom: var(--space-1);
}

.p-b-2 {
  padding-bottom: var(--space-2);
}

.p-b-3 {
  padding-bottom: var(--space-3);
}

.p-b-4 {
  padding-bottom: var(--space-4);
}

.p-b-5 {
  padding-bottom: var(--space-5);
}

.p-b-6 {
  padding-bottom: var(--space-6);
}

.p-b-7 {
  padding-bottom: var(--space-7);
}

.p-b-8 {
  padding-bottom: var(--space-8);
}

.p-b-9 {
  padding-bottom: var(--space-9);
}

.p-b-10 {
  padding-bottom: var(--space-10);
}

.p-l-0 {
  padding-left: var(--space-0);
}

.p-l-1 {
  padding-left: var(--space-1);
}

.p-l-2 {
  padding-left: var(--space-2);
}

.p-l-3 {
  padding-left: var(--space-3);
}

.p-l-4 {
  padding-left: var(--space-4);
}

.p-l-5 {
  padding-left: var(--space-5);
}

.p-l-6 {
  padding-left: var(--space-6);
}

.p-l-7 {
  padding-left: var(--space-7);
}

.p-l-8 {
  padding-left: var(--space-8);
}

.p-l-9 {
  padding-left: var(--space-9);
}

.p-l-10 {
  padding-left: var(--space-10);
}

.p-x-0 {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}

.p-x-1 {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.p-x-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.p-x-3 {
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.p-x-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.p-x-5 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.p-x-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.p-x-7 {
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

.p-x-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.p-x-9 {
  padding-left: var(--space-9);
  padding-right: var(--space-9);
}

.p-x-10 {
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

.p-y-0 {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}

.p-y-1 {
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.p-y-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.p-y-3 {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.p-y-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.p-y-5 {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

.p-y-6 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.p-y-7 {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.p-y-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.p-y-9 {
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.p-y-10 {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.m-0 {
  margin: var(--space-0);
}

.m-1 {
  margin: var(--space-1);
}

.m-2 {
  margin: var(--space-2);
}

.m-3 {
  margin: var(--space-3);
}

.m-4 {
  margin: var(--space-4);
}

.m-5 {
  margin: var(--space-5);
}

.m-6 {
  margin: var(--space-6);
}

.m-7 {
  margin: var(--space-7);
}

.m-8 {
  margin: var(--space-8);
}

.m-9 {
  margin: var(--space-9);
}

.m-10 {
  margin: var(--space-10);
}

.m-t-0 {
  margin-top: var(--space-0);
}

.m-t-1 {
  margin-top: var(--space-1);
}

.m-t-2 {
  margin-top: var(--space-2);
}

.m-t-3 {
  margin-top: var(--space-3);
}

.m-t-4 {
  margin-top: var(--space-4);
}

.m-t-5 {
  margin-top: var(--space-5);
}

.m-t-6 {
  margin-top: var(--space-6);
}

.m-t-7 {
  margin-top: var(--space-7);
}

.m-t-8 {
  margin-top: var(--space-8);
}

.m-t-9 {
  margin-top: var(--space-9);
}

.m-t-10 {
  margin-top: var(--space-10);
}

.m-r-0 {
  margin-right: var(--space-0);
}

.m-r-1 {
  margin-right: var(--space-1);
}

.m-r-2 {
  margin-right: var(--space-2);
}

.m-r-3 {
  margin-right: var(--space-3);
}

.m-r-4 {
  margin-right: var(--space-4);
}

.m-r-5 {
  margin-right: var(--space-5);
}

.m-r-6 {
  margin-right: var(--space-6);
}

.m-r-7 {
  margin-right: var(--space-7);
}

.m-r-8 {
  margin-right: var(--space-8);
}

.m-r-9 {
  margin-right: var(--space-9);
}

.m-r-10 {
  margin-right: var(--space-10);
}

.m-b-0 {
  margin-bottom: var(--space-0);
}

.m-b-1 {
  margin-bottom: var(--space-1);
}

.m-b-2 {
  margin-bottom: var(--space-2);
}

.m-b-3 {
  margin-bottom: var(--space-3);
}

.m-b-4 {
  margin-bottom: var(--space-4);
}

.m-b-5 {
  margin-bottom: var(--space-5);
}

.m-b-6 {
  margin-bottom: var(--space-6);
}

.m-b-7 {
  margin-bottom: var(--space-7);
}

.m-b-8 {
  margin-bottom: var(--space-8);
}

.m-b-9 {
  margin-bottom: var(--space-9);
}

.m-b-10 {
  margin-bottom: var(--space-10);
}

.m-l-0 {
  margin-left: var(--space-0);
}

.m-l-1 {
  margin-left: var(--space-1);
}

.m-l-2 {
  margin-left: var(--space-2);
}

.m-l-3 {
  margin-left: var(--space-3);
}

.m-l-4 {
  margin-left: var(--space-4);
}

.m-l-5 {
  margin-left: var(--space-5);
}

.m-l-6 {
  margin-left: var(--space-6);
}

.m-l-7 {
  margin-left: var(--space-7);
}

.m-l-8 {
  margin-left: var(--space-8);
}

.m-l-9 {
  margin-left: var(--space-9);
}

.m-l-10 {
  margin-left: var(--space-10);
}

.m-x-0 {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}

.m-x-1 {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}

.m-x-2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.m-x-3 {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.m-x-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.m-x-5 {
  margin-left: var(--space-5);
  margin-right: var(--space-5);
}

.m-x-6 {
  margin-left: var(--space-6);
  margin-right: var(--space-6);
}

.m-x-7 {
  margin-left: var(--space-7);
  margin-right: var(--space-7);
}

.m-x-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}

.m-x-9 {
  margin-left: var(--space-9);
  margin-right: var(--space-9);
}

.m-x-10 {
  margin-left: var(--space-10);
  margin-right: var(--space-10);
}

.m-y-0 {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}

.m-y-1 {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.m-y-2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.m-y-3 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.m-y-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.m-y-5 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.m-y-6 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.m-y-7 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}

.m-y-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.m-y-9 {
  margin-top: var(--space-9);
  margin-bottom: var(--space-9);
}

.m-y-10 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-10);
}

.m-x-auto {
  margin-left: auto;
  margin-right: auto;
}

.m-l-auto {
  margin-left: auto;
}

.m-r-auto {
  margin-right: auto;
}

.m-n-1 {
  margin: calc(var(--space-1) * -1);
}

.m-n-2 {
  margin: calc(var(--space-2) * -1);
}

.m-n-3 {
  margin: calc(var(--space-3) * -1);
}

.m-n-4 {
  margin: calc(var(--space-4) * -1);
}

.m-n-5 {
  margin: calc(var(--space-5) * -1);
}

.m-n-6 {
  margin: calc(var(--space-6) * -1);
}

.m-n-7 {
  margin: calc(var(--space-7) * -1);
}

.m-n-8 {
  margin: calc(var(--space-8) * -1);
}

.m-n-9 {
  margin: calc(var(--space-9) * -1);
}

.m-n-10 {
  margin: calc(var(--space-10) * -1);
}

.m-t-n-1 {
  margin-top: calc(var(--space-1) * -1);
}

.m-t-n-2 {
  margin-top: calc(var(--space-2) * -1);
}

.m-t-n-3 {
  margin-top: calc(var(--space-3) * -1);
}

.m-t-n-4 {
  margin-top: calc(var(--space-4) * -1);
}

.m-t-n-5 {
  margin-top: calc(var(--space-5) * -1);
}

.m-t-n-6 {
  margin-top: calc(var(--space-6) * -1);
}

.m-t-n-7 {
  margin-top: calc(var(--space-7) * -1);
}

.m-t-n-8 {
  margin-top: calc(var(--space-8) * -1);
}

.m-t-n-9 {
  margin-top: calc(var(--space-9) * -1);
}

.m-t-n-10 {
  margin-top: calc(var(--space-10) * -1);
}

.m-r-n-1 {
  margin-right: calc(var(--space-1) * -1);
}

.m-r-n-2 {
  margin-right: calc(var(--space-2) * -1);
}

.m-r-n-3 {
  margin-right: calc(var(--space-3) * -1);
}

.m-r-n-4 {
  margin-right: calc(var(--space-4) * -1);
}

.m-r-n-5 {
  margin-right: calc(var(--space-5) * -1);
}

.m-r-n-6 {
  margin-right: calc(var(--space-6) * -1);
}

.m-r-n-7 {
  margin-right: calc(var(--space-7) * -1);
}

.m-r-n-8 {
  margin-right: calc(var(--space-8) * -1);
}

.m-r-n-9 {
  margin-right: calc(var(--space-9) * -1);
}

.m-r-n-10 {
  margin-right: calc(var(--space-10) * -1);
}

.m-b-n-1 {
  margin-bottom: calc(var(--space-1) * -1);
}

.m-b-n-2 {
  margin-bottom: calc(var(--space-2) * -1);
}

.m-b-n-3 {
  margin-bottom: calc(var(--space-3) * -1);
}

.m-b-n-4 {
  margin-bottom: calc(var(--space-4) * -1);
}

.m-b-n-5 {
  margin-bottom: calc(var(--space-5) * -1);
}

.m-b-n-6 {
  margin-bottom: calc(var(--space-6) * -1);
}

.m-b-n-7 {
  margin-bottom: calc(var(--space-7) * -1);
}

.m-b-n-8 {
  margin-bottom: calc(var(--space-8) * -1);
}

.m-b-n-9 {
  margin-bottom: calc(var(--space-9) * -1);
}

.m-b-n-10 {
  margin-bottom: calc(var(--space-10) * -1);
}

.m-l-n-1 {
  margin-left: calc(var(--space-1) * -1);
}

.m-l-n-2 {
  margin-left: calc(var(--space-2) * -1);
}

.m-l-n-3 {
  margin-left: calc(var(--space-3) * -1);
}

.m-l-n-4 {
  margin-left: calc(var(--space-4) * -1);
}

.m-l-n-5 {
  margin-left: calc(var(--space-5) * -1);
}

.m-l-n-6 {
  margin-left: calc(var(--space-6) * -1);
}

.m-l-n-7 {
  margin-left: calc(var(--space-7) * -1);
}

.m-l-n-8 {
  margin-left: calc(var(--space-8) * -1);
}

.m-l-n-9 {
  margin-left: calc(var(--space-9) * -1);
}

.m-l-n-10 {
  margin-left: calc(var(--space-10) * -1);
}

.m-x-n-1 {
  margin-left: calc(var(--space-1) * -1);
  margin-right: calc(var(--space-1) * -1);
}

.m-x-n-2 {
  margin-left: calc(var(--space-2) * -1);
  margin-right: calc(var(--space-2) * -1);
}

.m-x-n-3 {
  margin-left: calc(var(--space-3) * -1);
  margin-right: calc(var(--space-3) * -1);
}

.m-x-n-4 {
  margin-left: calc(var(--space-4) * -1);
  margin-right: calc(var(--space-4) * -1);
}

.m-x-n-5 {
  margin-left: calc(var(--space-5) * -1);
  margin-right: calc(var(--space-5) * -1);
}

.m-x-n-6 {
  margin-left: calc(var(--space-6) * -1);
  margin-right: calc(var(--space-6) * -1);
}

.m-x-n-7 {
  margin-left: calc(var(--space-7) * -1);
  margin-right: calc(var(--space-7) * -1);
}

.m-x-n-8 {
  margin-left: calc(var(--space-8) * -1);
  margin-right: calc(var(--space-8) * -1);
}

.m-x-n-9 {
  margin-left: calc(var(--space-9) * -1);
  margin-right: calc(var(--space-9) * -1);
}

.m-x-n-10 {
  margin-left: calc(var(--space-10) * -1);
  margin-right: calc(var(--space-10) * -1);
}

.m-y-n-1 {
  margin-top: calc(var(--space-1) * -1);
  margin-bottom: calc(var(--space-1) * -1);
}

.m-y-n-2 {
  margin-top: calc(var(--space-2) * -1);
  margin-bottom: calc(var(--space-2) * -1);
}

.m-y-n-3 {
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: calc(var(--space-3) * -1);
}

.m-y-n-4 {
  margin-top: calc(var(--space-4) * -1);
  margin-bottom: calc(var(--space-4) * -1);
}

.m-y-n-5 {
  margin-top: calc(var(--space-5) * -1);
  margin-bottom: calc(var(--space-5) * -1);
}

.m-y-n-6 {
  margin-top: calc(var(--space-6) * -1);
  margin-bottom: calc(var(--space-6) * -1);
}

.m-y-n-7 {
  margin-top: calc(var(--space-7) * -1);
  margin-bottom: calc(var(--space-7) * -1);
}

.m-y-n-8 {
  margin-top: calc(var(--space-8) * -1);
  margin-bottom: calc(var(--space-8) * -1);
}

.m-y-n-9 {
  margin-top: calc(var(--space-9) * -1);
  margin-bottom: calc(var(--space-9) * -1);
}

.m-y-n-10 {
  margin-top: calc(var(--space-10) * -1);
  margin-bottom: calc(var(--space-10) * -1);
}

.gap-0 {
  gap: var(--space-0);
}

.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-7 {
  gap: var(--space-7);
}

.gap-8 {
  gap: var(--space-8);
}

.gap-9 {
  gap: var(--space-9);
}

.gap-10 {
  gap: var(--space-10);
}

.gap-x-0 {
  column-gap: var(--space-0);
}

.gap-x-1 {
  column-gap: var(--space-1);
}

.gap-x-2 {
  column-gap: var(--space-2);
}

.gap-x-3 {
  column-gap: var(--space-3);
}

.gap-x-4 {
  column-gap: var(--space-4);
}

.gap-x-5 {
  column-gap: var(--space-5);
}

.gap-x-6 {
  column-gap: var(--space-6);
}

.gap-x-7 {
  column-gap: var(--space-7);
}

.gap-x-8 {
  column-gap: var(--space-8);
}

.gap-x-9 {
  column-gap: var(--space-9);
}

.gap-x-10 {
  column-gap: var(--space-10);
}

.gap-y-0 {
  row-gap: var(--space-0);
}

.gap-y-1 {
  row-gap: var(--space-1);
}

.gap-y-2 {
  row-gap: var(--space-2);
}

.gap-y-3 {
  row-gap: var(--space-3);
}

.gap-y-4 {
  row-gap: var(--space-4);
}

.gap-y-5 {
  row-gap: var(--space-5);
}

.gap-y-6 {
  row-gap: var(--space-6);
}

.gap-y-7 {
  row-gap: var(--space-7);
}

.gap-y-8 {
  row-gap: var(--space-8);
}

.gap-y-9 {
  row-gap: var(--space-9);
}

.gap-y-10 {
  row-gap: var(--space-10);
}

@media (min-width: 640px) {
  .sm-p-0 {
    padding: var(--space-0);
  }
  .sm-p-t-0 {
    padding-top: var(--space-0);
  }
  .sm-p-r-0 {
    padding-right: var(--space-0);
  }
  .sm-p-b-0 {
    padding-bottom: var(--space-0);
  }
  .sm-p-l-0 {
    padding-left: var(--space-0);
  }
  .sm-p-x-0 {
    padding-left: var(--space-0);
    padding-right: var(--space-0);
  }
  .sm-p-y-0 {
    padding-top: var(--space-0);
    padding-bottom: var(--space-0);
  }
  .sm-p-1 {
    padding: var(--space-1);
  }
  .sm-p-t-1 {
    padding-top: var(--space-1);
  }
  .sm-p-r-1 {
    padding-right: var(--space-1);
  }
  .sm-p-b-1 {
    padding-bottom: var(--space-1);
  }
  .sm-p-l-1 {
    padding-left: var(--space-1);
  }
  .sm-p-x-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .sm-p-y-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .sm-p-2 {
    padding: var(--space-2);
  }
  .sm-p-t-2 {
    padding-top: var(--space-2);
  }
  .sm-p-r-2 {
    padding-right: var(--space-2);
  }
  .sm-p-b-2 {
    padding-bottom: var(--space-2);
  }
  .sm-p-l-2 {
    padding-left: var(--space-2);
  }
  .sm-p-x-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .sm-p-y-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .sm-p-3 {
    padding: var(--space-3);
  }
  .sm-p-t-3 {
    padding-top: var(--space-3);
  }
  .sm-p-r-3 {
    padding-right: var(--space-3);
  }
  .sm-p-b-3 {
    padding-bottom: var(--space-3);
  }
  .sm-p-l-3 {
    padding-left: var(--space-3);
  }
  .sm-p-x-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .sm-p-y-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .sm-p-4 {
    padding: var(--space-4);
  }
  .sm-p-t-4 {
    padding-top: var(--space-4);
  }
  .sm-p-r-4 {
    padding-right: var(--space-4);
  }
  .sm-p-b-4 {
    padding-bottom: var(--space-4);
  }
  .sm-p-l-4 {
    padding-left: var(--space-4);
  }
  .sm-p-x-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .sm-p-y-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .sm-p-5 {
    padding: var(--space-5);
  }
  .sm-p-t-5 {
    padding-top: var(--space-5);
  }
  .sm-p-r-5 {
    padding-right: var(--space-5);
  }
  .sm-p-b-5 {
    padding-bottom: var(--space-5);
  }
  .sm-p-l-5 {
    padding-left: var(--space-5);
  }
  .sm-p-x-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .sm-p-y-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .sm-p-6 {
    padding: var(--space-6);
  }
  .sm-p-t-6 {
    padding-top: var(--space-6);
  }
  .sm-p-r-6 {
    padding-right: var(--space-6);
  }
  .sm-p-b-6 {
    padding-bottom: var(--space-6);
  }
  .sm-p-l-6 {
    padding-left: var(--space-6);
  }
  .sm-p-x-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .sm-p-y-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .sm-p-7 {
    padding: var(--space-7);
  }
  .sm-p-t-7 {
    padding-top: var(--space-7);
  }
  .sm-p-r-7 {
    padding-right: var(--space-7);
  }
  .sm-p-b-7 {
    padding-bottom: var(--space-7);
  }
  .sm-p-l-7 {
    padding-left: var(--space-7);
  }
  .sm-p-x-7 {
    padding-left: var(--space-7);
    padding-right: var(--space-7);
  }
  .sm-p-y-7 {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  .sm-p-8 {
    padding: var(--space-8);
  }
  .sm-p-t-8 {
    padding-top: var(--space-8);
  }
  .sm-p-r-8 {
    padding-right: var(--space-8);
  }
  .sm-p-b-8 {
    padding-bottom: var(--space-8);
  }
  .sm-p-l-8 {
    padding-left: var(--space-8);
  }
  .sm-p-x-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .sm-p-y-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .sm-p-9 {
    padding: var(--space-9);
  }
  .sm-p-t-9 {
    padding-top: var(--space-9);
  }
  .sm-p-r-9 {
    padding-right: var(--space-9);
  }
  .sm-p-b-9 {
    padding-bottom: var(--space-9);
  }
  .sm-p-l-9 {
    padding-left: var(--space-9);
  }
  .sm-p-x-9 {
    padding-left: var(--space-9);
    padding-right: var(--space-9);
  }
  .sm-p-y-9 {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
  .sm-p-10 {
    padding: var(--space-10);
  }
  .sm-p-t-10 {
    padding-top: var(--space-10);
  }
  .sm-p-r-10 {
    padding-right: var(--space-10);
  }
  .sm-p-b-10 {
    padding-bottom: var(--space-10);
  }
  .sm-p-l-10 {
    padding-left: var(--space-10);
  }
  .sm-p-x-10 {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
  .sm-p-y-10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
  .sm-m-0 {
    margin: var(--space-0);
  }
  .sm-m-t-0 {
    margin-top: var(--space-0);
  }
  .sm-m-r-0 {
    margin-right: var(--space-0);
  }
  .sm-m-b-0 {
    margin-bottom: var(--space-0);
  }
  .sm-m-l-0 {
    margin-left: var(--space-0);
  }
  .sm-m-x-0 {
    margin-left: var(--space-0);
    margin-right: var(--space-0);
  }
  .sm-m-y-0 {
    margin-top: var(--space-0);
    margin-bottom: var(--space-0);
  }
  .sm-m-1 {
    margin: var(--space-1);
  }
  .sm-m-t-1 {
    margin-top: var(--space-1);
  }
  .sm-m-r-1 {
    margin-right: var(--space-1);
  }
  .sm-m-b-1 {
    margin-bottom: var(--space-1);
  }
  .sm-m-l-1 {
    margin-left: var(--space-1);
  }
  .sm-m-x-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
  }
  .sm-m-y-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
  .sm-m-2 {
    margin: var(--space-2);
  }
  .sm-m-t-2 {
    margin-top: var(--space-2);
  }
  .sm-m-r-2 {
    margin-right: var(--space-2);
  }
  .sm-m-b-2 {
    margin-bottom: var(--space-2);
  }
  .sm-m-l-2 {
    margin-left: var(--space-2);
  }
  .sm-m-x-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .sm-m-y-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .sm-m-3 {
    margin: var(--space-3);
  }
  .sm-m-t-3 {
    margin-top: var(--space-3);
  }
  .sm-m-r-3 {
    margin-right: var(--space-3);
  }
  .sm-m-b-3 {
    margin-bottom: var(--space-3);
  }
  .sm-m-l-3 {
    margin-left: var(--space-3);
  }
  .sm-m-x-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .sm-m-y-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .sm-m-4 {
    margin: var(--space-4);
  }
  .sm-m-t-4 {
    margin-top: var(--space-4);
  }
  .sm-m-r-4 {
    margin-right: var(--space-4);
  }
  .sm-m-b-4 {
    margin-bottom: var(--space-4);
  }
  .sm-m-l-4 {
    margin-left: var(--space-4);
  }
  .sm-m-x-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .sm-m-y-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .sm-m-5 {
    margin: var(--space-5);
  }
  .sm-m-t-5 {
    margin-top: var(--space-5);
  }
  .sm-m-r-5 {
    margin-right: var(--space-5);
  }
  .sm-m-b-5 {
    margin-bottom: var(--space-5);
  }
  .sm-m-l-5 {
    margin-left: var(--space-5);
  }
  .sm-m-x-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .sm-m-y-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .sm-m-6 {
    margin: var(--space-6);
  }
  .sm-m-t-6 {
    margin-top: var(--space-6);
  }
  .sm-m-r-6 {
    margin-right: var(--space-6);
  }
  .sm-m-b-6 {
    margin-bottom: var(--space-6);
  }
  .sm-m-l-6 {
    margin-left: var(--space-6);
  }
  .sm-m-x-6 {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
  }
  .sm-m-y-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }
  .sm-m-7 {
    margin: var(--space-7);
  }
  .sm-m-t-7 {
    margin-top: var(--space-7);
  }
  .sm-m-r-7 {
    margin-right: var(--space-7);
  }
  .sm-m-b-7 {
    margin-bottom: var(--space-7);
  }
  .sm-m-l-7 {
    margin-left: var(--space-7);
  }
  .sm-m-x-7 {
    margin-left: var(--space-7);
    margin-right: var(--space-7);
  }
  .sm-m-y-7 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-7);
  }
  .sm-m-8 {
    margin: var(--space-8);
  }
  .sm-m-t-8 {
    margin-top: var(--space-8);
  }
  .sm-m-r-8 {
    margin-right: var(--space-8);
  }
  .sm-m-b-8 {
    margin-bottom: var(--space-8);
  }
  .sm-m-l-8 {
    margin-left: var(--space-8);
  }
  .sm-m-x-8 {
    margin-left: var(--space-8);
    margin-right: var(--space-8);
  }
  .sm-m-y-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .sm-m-9 {
    margin: var(--space-9);
  }
  .sm-m-t-9 {
    margin-top: var(--space-9);
  }
  .sm-m-r-9 {
    margin-right: var(--space-9);
  }
  .sm-m-b-9 {
    margin-bottom: var(--space-9);
  }
  .sm-m-l-9 {
    margin-left: var(--space-9);
  }
  .sm-m-x-9 {
    margin-left: var(--space-9);
    margin-right: var(--space-9);
  }
  .sm-m-y-9 {
    margin-top: var(--space-9);
    margin-bottom: var(--space-9);
  }
  .sm-m-10 {
    margin: var(--space-10);
  }
  .sm-m-t-10 {
    margin-top: var(--space-10);
  }
  .sm-m-r-10 {
    margin-right: var(--space-10);
  }
  .sm-m-b-10 {
    margin-bottom: var(--space-10);
  }
  .sm-m-l-10 {
    margin-left: var(--space-10);
  }
  .sm-m-x-10 {
    margin-left: var(--space-10);
    margin-right: var(--space-10);
  }
  .sm-m-y-10 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
  }
  .sm-m-x-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .sm-m-l-auto {
    margin-left: auto;
  }
  .sm-m-r-auto {
    margin-right: auto;
  }
  .sm-gap-0 {
    gap: var(--space-0);
  }
  .sm-gap-x-0 {
    column-gap: var(--space-0);
  }
  .sm-gap-y-0 {
    row-gap: var(--space-0);
  }
  .sm-gap-1 {
    gap: var(--space-1);
  }
  .sm-gap-x-1 {
    column-gap: var(--space-1);
  }
  .sm-gap-y-1 {
    row-gap: var(--space-1);
  }
  .sm-gap-2 {
    gap: var(--space-2);
  }
  .sm-gap-x-2 {
    column-gap: var(--space-2);
  }
  .sm-gap-y-2 {
    row-gap: var(--space-2);
  }
  .sm-gap-3 {
    gap: var(--space-3);
  }
  .sm-gap-x-3 {
    column-gap: var(--space-3);
  }
  .sm-gap-y-3 {
    row-gap: var(--space-3);
  }
  .sm-gap-4 {
    gap: var(--space-4);
  }
  .sm-gap-x-4 {
    column-gap: var(--space-4);
  }
  .sm-gap-y-4 {
    row-gap: var(--space-4);
  }
  .sm-gap-5 {
    gap: var(--space-5);
  }
  .sm-gap-x-5 {
    column-gap: var(--space-5);
  }
  .sm-gap-y-5 {
    row-gap: var(--space-5);
  }
  .sm-gap-6 {
    gap: var(--space-6);
  }
  .sm-gap-x-6 {
    column-gap: var(--space-6);
  }
  .sm-gap-y-6 {
    row-gap: var(--space-6);
  }
  .sm-gap-7 {
    gap: var(--space-7);
  }
  .sm-gap-x-7 {
    column-gap: var(--space-7);
  }
  .sm-gap-y-7 {
    row-gap: var(--space-7);
  }
  .sm-gap-8 {
    gap: var(--space-8);
  }
  .sm-gap-x-8 {
    column-gap: var(--space-8);
  }
  .sm-gap-y-8 {
    row-gap: var(--space-8);
  }
  .sm-gap-9 {
    gap: var(--space-9);
  }
  .sm-gap-x-9 {
    column-gap: var(--space-9);
  }
  .sm-gap-y-9 {
    row-gap: var(--space-9);
  }
  .sm-gap-10 {
    gap: var(--space-10);
  }
  .sm-gap-x-10 {
    column-gap: var(--space-10);
  }
  .sm-gap-y-10 {
    row-gap: var(--space-10);
  }
}
@media (min-width: 768px) {
  .md-p-0 {
    padding: var(--space-0);
  }
  .md-p-t-0 {
    padding-top: var(--space-0);
  }
  .md-p-r-0 {
    padding-right: var(--space-0);
  }
  .md-p-b-0 {
    padding-bottom: var(--space-0);
  }
  .md-p-l-0 {
    padding-left: var(--space-0);
  }
  .md-p-x-0 {
    padding-left: var(--space-0);
    padding-right: var(--space-0);
  }
  .md-p-y-0 {
    padding-top: var(--space-0);
    padding-bottom: var(--space-0);
  }
  .md-p-1 {
    padding: var(--space-1);
  }
  .md-p-t-1 {
    padding-top: var(--space-1);
  }
  .md-p-r-1 {
    padding-right: var(--space-1);
  }
  .md-p-b-1 {
    padding-bottom: var(--space-1);
  }
  .md-p-l-1 {
    padding-left: var(--space-1);
  }
  .md-p-x-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .md-p-y-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .md-p-2 {
    padding: var(--space-2);
  }
  .md-p-t-2 {
    padding-top: var(--space-2);
  }
  .md-p-r-2 {
    padding-right: var(--space-2);
  }
  .md-p-b-2 {
    padding-bottom: var(--space-2);
  }
  .md-p-l-2 {
    padding-left: var(--space-2);
  }
  .md-p-x-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .md-p-y-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .md-p-3 {
    padding: var(--space-3);
  }
  .md-p-t-3 {
    padding-top: var(--space-3);
  }
  .md-p-r-3 {
    padding-right: var(--space-3);
  }
  .md-p-b-3 {
    padding-bottom: var(--space-3);
  }
  .md-p-l-3 {
    padding-left: var(--space-3);
  }
  .md-p-x-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .md-p-y-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .md-p-4 {
    padding: var(--space-4);
  }
  .md-p-t-4 {
    padding-top: var(--space-4);
  }
  .md-p-r-4 {
    padding-right: var(--space-4);
  }
  .md-p-b-4 {
    padding-bottom: var(--space-4);
  }
  .md-p-l-4 {
    padding-left: var(--space-4);
  }
  .md-p-x-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .md-p-y-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .md-p-5 {
    padding: var(--space-5);
  }
  .md-p-t-5 {
    padding-top: var(--space-5);
  }
  .md-p-r-5 {
    padding-right: var(--space-5);
  }
  .md-p-b-5 {
    padding-bottom: var(--space-5);
  }
  .md-p-l-5 {
    padding-left: var(--space-5);
  }
  .md-p-x-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .md-p-y-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .md-p-6 {
    padding: var(--space-6);
  }
  .md-p-t-6 {
    padding-top: var(--space-6);
  }
  .md-p-r-6 {
    padding-right: var(--space-6);
  }
  .md-p-b-6 {
    padding-bottom: var(--space-6);
  }
  .md-p-l-6 {
    padding-left: var(--space-6);
  }
  .md-p-x-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .md-p-y-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .md-p-7 {
    padding: var(--space-7);
  }
  .md-p-t-7 {
    padding-top: var(--space-7);
  }
  .md-p-r-7 {
    padding-right: var(--space-7);
  }
  .md-p-b-7 {
    padding-bottom: var(--space-7);
  }
  .md-p-l-7 {
    padding-left: var(--space-7);
  }
  .md-p-x-7 {
    padding-left: var(--space-7);
    padding-right: var(--space-7);
  }
  .md-p-y-7 {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  .md-p-8 {
    padding: var(--space-8);
  }
  .md-p-t-8 {
    padding-top: var(--space-8);
  }
  .md-p-r-8 {
    padding-right: var(--space-8);
  }
  .md-p-b-8 {
    padding-bottom: var(--space-8);
  }
  .md-p-l-8 {
    padding-left: var(--space-8);
  }
  .md-p-x-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .md-p-y-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .md-p-9 {
    padding: var(--space-9);
  }
  .md-p-t-9 {
    padding-top: var(--space-9);
  }
  .md-p-r-9 {
    padding-right: var(--space-9);
  }
  .md-p-b-9 {
    padding-bottom: var(--space-9);
  }
  .md-p-l-9 {
    padding-left: var(--space-9);
  }
  .md-p-x-9 {
    padding-left: var(--space-9);
    padding-right: var(--space-9);
  }
  .md-p-y-9 {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
  .md-p-10 {
    padding: var(--space-10);
  }
  .md-p-t-10 {
    padding-top: var(--space-10);
  }
  .md-p-r-10 {
    padding-right: var(--space-10);
  }
  .md-p-b-10 {
    padding-bottom: var(--space-10);
  }
  .md-p-l-10 {
    padding-left: var(--space-10);
  }
  .md-p-x-10 {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
  .md-p-y-10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
  .md-m-0 {
    margin: var(--space-0);
  }
  .md-m-t-0 {
    margin-top: var(--space-0);
  }
  .md-m-r-0 {
    margin-right: var(--space-0);
  }
  .md-m-b-0 {
    margin-bottom: var(--space-0);
  }
  .md-m-l-0 {
    margin-left: var(--space-0);
  }
  .md-m-x-0 {
    margin-left: var(--space-0);
    margin-right: var(--space-0);
  }
  .md-m-y-0 {
    margin-top: var(--space-0);
    margin-bottom: var(--space-0);
  }
  .md-m-1 {
    margin: var(--space-1);
  }
  .md-m-t-1 {
    margin-top: var(--space-1);
  }
  .md-m-r-1 {
    margin-right: var(--space-1);
  }
  .md-m-b-1 {
    margin-bottom: var(--space-1);
  }
  .md-m-l-1 {
    margin-left: var(--space-1);
  }
  .md-m-x-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
  }
  .md-m-y-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
  .md-m-2 {
    margin: var(--space-2);
  }
  .md-m-t-2 {
    margin-top: var(--space-2);
  }
  .md-m-r-2 {
    margin-right: var(--space-2);
  }
  .md-m-b-2 {
    margin-bottom: var(--space-2);
  }
  .md-m-l-2 {
    margin-left: var(--space-2);
  }
  .md-m-x-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .md-m-y-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .md-m-3 {
    margin: var(--space-3);
  }
  .md-m-t-3 {
    margin-top: var(--space-3);
  }
  .md-m-r-3 {
    margin-right: var(--space-3);
  }
  .md-m-b-3 {
    margin-bottom: var(--space-3);
  }
  .md-m-l-3 {
    margin-left: var(--space-3);
  }
  .md-m-x-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .md-m-y-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .md-m-4 {
    margin: var(--space-4);
  }
  .md-m-t-4 {
    margin-top: var(--space-4);
  }
  .md-m-r-4 {
    margin-right: var(--space-4);
  }
  .md-m-b-4 {
    margin-bottom: var(--space-4);
  }
  .md-m-l-4 {
    margin-left: var(--space-4);
  }
  .md-m-x-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .md-m-y-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .md-m-5 {
    margin: var(--space-5);
  }
  .md-m-t-5 {
    margin-top: var(--space-5);
  }
  .md-m-r-5 {
    margin-right: var(--space-5);
  }
  .md-m-b-5 {
    margin-bottom: var(--space-5);
  }
  .md-m-l-5 {
    margin-left: var(--space-5);
  }
  .md-m-x-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .md-m-y-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .md-m-6 {
    margin: var(--space-6);
  }
  .md-m-t-6 {
    margin-top: var(--space-6);
  }
  .md-m-r-6 {
    margin-right: var(--space-6);
  }
  .md-m-b-6 {
    margin-bottom: var(--space-6);
  }
  .md-m-l-6 {
    margin-left: var(--space-6);
  }
  .md-m-x-6 {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
  }
  .md-m-y-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }
  .md-m-7 {
    margin: var(--space-7);
  }
  .md-m-t-7 {
    margin-top: var(--space-7);
  }
  .md-m-r-7 {
    margin-right: var(--space-7);
  }
  .md-m-b-7 {
    margin-bottom: var(--space-7);
  }
  .md-m-l-7 {
    margin-left: var(--space-7);
  }
  .md-m-x-7 {
    margin-left: var(--space-7);
    margin-right: var(--space-7);
  }
  .md-m-y-7 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-7);
  }
  .md-m-8 {
    margin: var(--space-8);
  }
  .md-m-t-8 {
    margin-top: var(--space-8);
  }
  .md-m-r-8 {
    margin-right: var(--space-8);
  }
  .md-m-b-8 {
    margin-bottom: var(--space-8);
  }
  .md-m-l-8 {
    margin-left: var(--space-8);
  }
  .md-m-x-8 {
    margin-left: var(--space-8);
    margin-right: var(--space-8);
  }
  .md-m-y-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .md-m-9 {
    margin: var(--space-9);
  }
  .md-m-t-9 {
    margin-top: var(--space-9);
  }
  .md-m-r-9 {
    margin-right: var(--space-9);
  }
  .md-m-b-9 {
    margin-bottom: var(--space-9);
  }
  .md-m-l-9 {
    margin-left: var(--space-9);
  }
  .md-m-x-9 {
    margin-left: var(--space-9);
    margin-right: var(--space-9);
  }
  .md-m-y-9 {
    margin-top: var(--space-9);
    margin-bottom: var(--space-9);
  }
  .md-m-10 {
    margin: var(--space-10);
  }
  .md-m-t-10 {
    margin-top: var(--space-10);
  }
  .md-m-r-10 {
    margin-right: var(--space-10);
  }
  .md-m-b-10 {
    margin-bottom: var(--space-10);
  }
  .md-m-l-10 {
    margin-left: var(--space-10);
  }
  .md-m-x-10 {
    margin-left: var(--space-10);
    margin-right: var(--space-10);
  }
  .md-m-y-10 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
  }
  .md-m-x-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .md-m-l-auto {
    margin-left: auto;
  }
  .md-m-r-auto {
    margin-right: auto;
  }
  .md-gap-0 {
    gap: var(--space-0);
  }
  .md-gap-x-0 {
    column-gap: var(--space-0);
  }
  .md-gap-y-0 {
    row-gap: var(--space-0);
  }
  .md-gap-1 {
    gap: var(--space-1);
  }
  .md-gap-x-1 {
    column-gap: var(--space-1);
  }
  .md-gap-y-1 {
    row-gap: var(--space-1);
  }
  .md-gap-2 {
    gap: var(--space-2);
  }
  .md-gap-x-2 {
    column-gap: var(--space-2);
  }
  .md-gap-y-2 {
    row-gap: var(--space-2);
  }
  .md-gap-3 {
    gap: var(--space-3);
  }
  .md-gap-x-3 {
    column-gap: var(--space-3);
  }
  .md-gap-y-3 {
    row-gap: var(--space-3);
  }
  .md-gap-4 {
    gap: var(--space-4);
  }
  .md-gap-x-4 {
    column-gap: var(--space-4);
  }
  .md-gap-y-4 {
    row-gap: var(--space-4);
  }
  .md-gap-5 {
    gap: var(--space-5);
  }
  .md-gap-x-5 {
    column-gap: var(--space-5);
  }
  .md-gap-y-5 {
    row-gap: var(--space-5);
  }
  .md-gap-6 {
    gap: var(--space-6);
  }
  .md-gap-x-6 {
    column-gap: var(--space-6);
  }
  .md-gap-y-6 {
    row-gap: var(--space-6);
  }
  .md-gap-7 {
    gap: var(--space-7);
  }
  .md-gap-x-7 {
    column-gap: var(--space-7);
  }
  .md-gap-y-7 {
    row-gap: var(--space-7);
  }
  .md-gap-8 {
    gap: var(--space-8);
  }
  .md-gap-x-8 {
    column-gap: var(--space-8);
  }
  .md-gap-y-8 {
    row-gap: var(--space-8);
  }
  .md-gap-9 {
    gap: var(--space-9);
  }
  .md-gap-x-9 {
    column-gap: var(--space-9);
  }
  .md-gap-y-9 {
    row-gap: var(--space-9);
  }
  .md-gap-10 {
    gap: var(--space-10);
  }
  .md-gap-x-10 {
    column-gap: var(--space-10);
  }
  .md-gap-y-10 {
    row-gap: var(--space-10);
  }
}
@media (min-width: 1024px) {
  .lg-p-0 {
    padding: var(--space-0);
  }
  .lg-p-t-0 {
    padding-top: var(--space-0);
  }
  .lg-p-r-0 {
    padding-right: var(--space-0);
  }
  .lg-p-b-0 {
    padding-bottom: var(--space-0);
  }
  .lg-p-l-0 {
    padding-left: var(--space-0);
  }
  .lg-p-x-0 {
    padding-left: var(--space-0);
    padding-right: var(--space-0);
  }
  .lg-p-y-0 {
    padding-top: var(--space-0);
    padding-bottom: var(--space-0);
  }
  .lg-p-1 {
    padding: var(--space-1);
  }
  .lg-p-t-1 {
    padding-top: var(--space-1);
  }
  .lg-p-r-1 {
    padding-right: var(--space-1);
  }
  .lg-p-b-1 {
    padding-bottom: var(--space-1);
  }
  .lg-p-l-1 {
    padding-left: var(--space-1);
  }
  .lg-p-x-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .lg-p-y-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .lg-p-2 {
    padding: var(--space-2);
  }
  .lg-p-t-2 {
    padding-top: var(--space-2);
  }
  .lg-p-r-2 {
    padding-right: var(--space-2);
  }
  .lg-p-b-2 {
    padding-bottom: var(--space-2);
  }
  .lg-p-l-2 {
    padding-left: var(--space-2);
  }
  .lg-p-x-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .lg-p-y-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .lg-p-3 {
    padding: var(--space-3);
  }
  .lg-p-t-3 {
    padding-top: var(--space-3);
  }
  .lg-p-r-3 {
    padding-right: var(--space-3);
  }
  .lg-p-b-3 {
    padding-bottom: var(--space-3);
  }
  .lg-p-l-3 {
    padding-left: var(--space-3);
  }
  .lg-p-x-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .lg-p-y-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .lg-p-4 {
    padding: var(--space-4);
  }
  .lg-p-t-4 {
    padding-top: var(--space-4);
  }
  .lg-p-r-4 {
    padding-right: var(--space-4);
  }
  .lg-p-b-4 {
    padding-bottom: var(--space-4);
  }
  .lg-p-l-4 {
    padding-left: var(--space-4);
  }
  .lg-p-x-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .lg-p-y-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .lg-p-5 {
    padding: var(--space-5);
  }
  .lg-p-t-5 {
    padding-top: var(--space-5);
  }
  .lg-p-r-5 {
    padding-right: var(--space-5);
  }
  .lg-p-b-5 {
    padding-bottom: var(--space-5);
  }
  .lg-p-l-5 {
    padding-left: var(--space-5);
  }
  .lg-p-x-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .lg-p-y-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .lg-p-6 {
    padding: var(--space-6);
  }
  .lg-p-t-6 {
    padding-top: var(--space-6);
  }
  .lg-p-r-6 {
    padding-right: var(--space-6);
  }
  .lg-p-b-6 {
    padding-bottom: var(--space-6);
  }
  .lg-p-l-6 {
    padding-left: var(--space-6);
  }
  .lg-p-x-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .lg-p-y-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .lg-p-7 {
    padding: var(--space-7);
  }
  .lg-p-t-7 {
    padding-top: var(--space-7);
  }
  .lg-p-r-7 {
    padding-right: var(--space-7);
  }
  .lg-p-b-7 {
    padding-bottom: var(--space-7);
  }
  .lg-p-l-7 {
    padding-left: var(--space-7);
  }
  .lg-p-x-7 {
    padding-left: var(--space-7);
    padding-right: var(--space-7);
  }
  .lg-p-y-7 {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  .lg-p-8 {
    padding: var(--space-8);
  }
  .lg-p-t-8 {
    padding-top: var(--space-8);
  }
  .lg-p-r-8 {
    padding-right: var(--space-8);
  }
  .lg-p-b-8 {
    padding-bottom: var(--space-8);
  }
  .lg-p-l-8 {
    padding-left: var(--space-8);
  }
  .lg-p-x-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .lg-p-y-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .lg-p-9 {
    padding: var(--space-9);
  }
  .lg-p-t-9 {
    padding-top: var(--space-9);
  }
  .lg-p-r-9 {
    padding-right: var(--space-9);
  }
  .lg-p-b-9 {
    padding-bottom: var(--space-9);
  }
  .lg-p-l-9 {
    padding-left: var(--space-9);
  }
  .lg-p-x-9 {
    padding-left: var(--space-9);
    padding-right: var(--space-9);
  }
  .lg-p-y-9 {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
  .lg-p-10 {
    padding: var(--space-10);
  }
  .lg-p-t-10 {
    padding-top: var(--space-10);
  }
  .lg-p-r-10 {
    padding-right: var(--space-10);
  }
  .lg-p-b-10 {
    padding-bottom: var(--space-10);
  }
  .lg-p-l-10 {
    padding-left: var(--space-10);
  }
  .lg-p-x-10 {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
  .lg-p-y-10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
  .lg-m-0 {
    margin: var(--space-0);
  }
  .lg-m-t-0 {
    margin-top: var(--space-0);
  }
  .lg-m-r-0 {
    margin-right: var(--space-0);
  }
  .lg-m-b-0 {
    margin-bottom: var(--space-0);
  }
  .lg-m-l-0 {
    margin-left: var(--space-0);
  }
  .lg-m-x-0 {
    margin-left: var(--space-0);
    margin-right: var(--space-0);
  }
  .lg-m-y-0 {
    margin-top: var(--space-0);
    margin-bottom: var(--space-0);
  }
  .lg-m-1 {
    margin: var(--space-1);
  }
  .lg-m-t-1 {
    margin-top: var(--space-1);
  }
  .lg-m-r-1 {
    margin-right: var(--space-1);
  }
  .lg-m-b-1 {
    margin-bottom: var(--space-1);
  }
  .lg-m-l-1 {
    margin-left: var(--space-1);
  }
  .lg-m-x-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
  }
  .lg-m-y-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
  .lg-m-2 {
    margin: var(--space-2);
  }
  .lg-m-t-2 {
    margin-top: var(--space-2);
  }
  .lg-m-r-2 {
    margin-right: var(--space-2);
  }
  .lg-m-b-2 {
    margin-bottom: var(--space-2);
  }
  .lg-m-l-2 {
    margin-left: var(--space-2);
  }
  .lg-m-x-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .lg-m-y-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .lg-m-3 {
    margin: var(--space-3);
  }
  .lg-m-t-3 {
    margin-top: var(--space-3);
  }
  .lg-m-r-3 {
    margin-right: var(--space-3);
  }
  .lg-m-b-3 {
    margin-bottom: var(--space-3);
  }
  .lg-m-l-3 {
    margin-left: var(--space-3);
  }
  .lg-m-x-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .lg-m-y-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .lg-m-4 {
    margin: var(--space-4);
  }
  .lg-m-t-4 {
    margin-top: var(--space-4);
  }
  .lg-m-r-4 {
    margin-right: var(--space-4);
  }
  .lg-m-b-4 {
    margin-bottom: var(--space-4);
  }
  .lg-m-l-4 {
    margin-left: var(--space-4);
  }
  .lg-m-x-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .lg-m-y-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .lg-m-5 {
    margin: var(--space-5);
  }
  .lg-m-t-5 {
    margin-top: var(--space-5);
  }
  .lg-m-r-5 {
    margin-right: var(--space-5);
  }
  .lg-m-b-5 {
    margin-bottom: var(--space-5);
  }
  .lg-m-l-5 {
    margin-left: var(--space-5);
  }
  .lg-m-x-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .lg-m-y-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .lg-m-6 {
    margin: var(--space-6);
  }
  .lg-m-t-6 {
    margin-top: var(--space-6);
  }
  .lg-m-r-6 {
    margin-right: var(--space-6);
  }
  .lg-m-b-6 {
    margin-bottom: var(--space-6);
  }
  .lg-m-l-6 {
    margin-left: var(--space-6);
  }
  .lg-m-x-6 {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
  }
  .lg-m-y-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }
  .lg-m-7 {
    margin: var(--space-7);
  }
  .lg-m-t-7 {
    margin-top: var(--space-7);
  }
  .lg-m-r-7 {
    margin-right: var(--space-7);
  }
  .lg-m-b-7 {
    margin-bottom: var(--space-7);
  }
  .lg-m-l-7 {
    margin-left: var(--space-7);
  }
  .lg-m-x-7 {
    margin-left: var(--space-7);
    margin-right: var(--space-7);
  }
  .lg-m-y-7 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-7);
  }
  .lg-m-8 {
    margin: var(--space-8);
  }
  .lg-m-t-8 {
    margin-top: var(--space-8);
  }
  .lg-m-r-8 {
    margin-right: var(--space-8);
  }
  .lg-m-b-8 {
    margin-bottom: var(--space-8);
  }
  .lg-m-l-8 {
    margin-left: var(--space-8);
  }
  .lg-m-x-8 {
    margin-left: var(--space-8);
    margin-right: var(--space-8);
  }
  .lg-m-y-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .lg-m-9 {
    margin: var(--space-9);
  }
  .lg-m-t-9 {
    margin-top: var(--space-9);
  }
  .lg-m-r-9 {
    margin-right: var(--space-9);
  }
  .lg-m-b-9 {
    margin-bottom: var(--space-9);
  }
  .lg-m-l-9 {
    margin-left: var(--space-9);
  }
  .lg-m-x-9 {
    margin-left: var(--space-9);
    margin-right: var(--space-9);
  }
  .lg-m-y-9 {
    margin-top: var(--space-9);
    margin-bottom: var(--space-9);
  }
  .lg-m-10 {
    margin: var(--space-10);
  }
  .lg-m-t-10 {
    margin-top: var(--space-10);
  }
  .lg-m-r-10 {
    margin-right: var(--space-10);
  }
  .lg-m-b-10 {
    margin-bottom: var(--space-10);
  }
  .lg-m-l-10 {
    margin-left: var(--space-10);
  }
  .lg-m-x-10 {
    margin-left: var(--space-10);
    margin-right: var(--space-10);
  }
  .lg-m-y-10 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
  }
  .lg-m-x-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .lg-m-l-auto {
    margin-left: auto;
  }
  .lg-m-r-auto {
    margin-right: auto;
  }
  .lg-gap-0 {
    gap: var(--space-0);
  }
  .lg-gap-x-0 {
    column-gap: var(--space-0);
  }
  .lg-gap-y-0 {
    row-gap: var(--space-0);
  }
  .lg-gap-1 {
    gap: var(--space-1);
  }
  .lg-gap-x-1 {
    column-gap: var(--space-1);
  }
  .lg-gap-y-1 {
    row-gap: var(--space-1);
  }
  .lg-gap-2 {
    gap: var(--space-2);
  }
  .lg-gap-x-2 {
    column-gap: var(--space-2);
  }
  .lg-gap-y-2 {
    row-gap: var(--space-2);
  }
  .lg-gap-3 {
    gap: var(--space-3);
  }
  .lg-gap-x-3 {
    column-gap: var(--space-3);
  }
  .lg-gap-y-3 {
    row-gap: var(--space-3);
  }
  .lg-gap-4 {
    gap: var(--space-4);
  }
  .lg-gap-x-4 {
    column-gap: var(--space-4);
  }
  .lg-gap-y-4 {
    row-gap: var(--space-4);
  }
  .lg-gap-5 {
    gap: var(--space-5);
  }
  .lg-gap-x-5 {
    column-gap: var(--space-5);
  }
  .lg-gap-y-5 {
    row-gap: var(--space-5);
  }
  .lg-gap-6 {
    gap: var(--space-6);
  }
  .lg-gap-x-6 {
    column-gap: var(--space-6);
  }
  .lg-gap-y-6 {
    row-gap: var(--space-6);
  }
  .lg-gap-7 {
    gap: var(--space-7);
  }
  .lg-gap-x-7 {
    column-gap: var(--space-7);
  }
  .lg-gap-y-7 {
    row-gap: var(--space-7);
  }
  .lg-gap-8 {
    gap: var(--space-8);
  }
  .lg-gap-x-8 {
    column-gap: var(--space-8);
  }
  .lg-gap-y-8 {
    row-gap: var(--space-8);
  }
  .lg-gap-9 {
    gap: var(--space-9);
  }
  .lg-gap-x-9 {
    column-gap: var(--space-9);
  }
  .lg-gap-y-9 {
    row-gap: var(--space-9);
  }
  .lg-gap-10 {
    gap: var(--space-10);
  }
  .lg-gap-x-10 {
    column-gap: var(--space-10);
  }
  .lg-gap-y-10 {
    row-gap: var(--space-10);
  }
}
@media (min-width: 1280px) {
  .xl-p-0 {
    padding: var(--space-0);
  }
  .xl-p-t-0 {
    padding-top: var(--space-0);
  }
  .xl-p-r-0 {
    padding-right: var(--space-0);
  }
  .xl-p-b-0 {
    padding-bottom: var(--space-0);
  }
  .xl-p-l-0 {
    padding-left: var(--space-0);
  }
  .xl-p-x-0 {
    padding-left: var(--space-0);
    padding-right: var(--space-0);
  }
  .xl-p-y-0 {
    padding-top: var(--space-0);
    padding-bottom: var(--space-0);
  }
  .xl-p-1 {
    padding: var(--space-1);
  }
  .xl-p-t-1 {
    padding-top: var(--space-1);
  }
  .xl-p-r-1 {
    padding-right: var(--space-1);
  }
  .xl-p-b-1 {
    padding-bottom: var(--space-1);
  }
  .xl-p-l-1 {
    padding-left: var(--space-1);
  }
  .xl-p-x-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
  }
  .xl-p-y-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .xl-p-2 {
    padding: var(--space-2);
  }
  .xl-p-t-2 {
    padding-top: var(--space-2);
  }
  .xl-p-r-2 {
    padding-right: var(--space-2);
  }
  .xl-p-b-2 {
    padding-bottom: var(--space-2);
  }
  .xl-p-l-2 {
    padding-left: var(--space-2);
  }
  .xl-p-x-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .xl-p-y-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .xl-p-3 {
    padding: var(--space-3);
  }
  .xl-p-t-3 {
    padding-top: var(--space-3);
  }
  .xl-p-r-3 {
    padding-right: var(--space-3);
  }
  .xl-p-b-3 {
    padding-bottom: var(--space-3);
  }
  .xl-p-l-3 {
    padding-left: var(--space-3);
  }
  .xl-p-x-3 {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .xl-p-y-3 {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .xl-p-4 {
    padding: var(--space-4);
  }
  .xl-p-t-4 {
    padding-top: var(--space-4);
  }
  .xl-p-r-4 {
    padding-right: var(--space-4);
  }
  .xl-p-b-4 {
    padding-bottom: var(--space-4);
  }
  .xl-p-l-4 {
    padding-left: var(--space-4);
  }
  .xl-p-x-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .xl-p-y-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
  .xl-p-5 {
    padding: var(--space-5);
  }
  .xl-p-t-5 {
    padding-top: var(--space-5);
  }
  .xl-p-r-5 {
    padding-right: var(--space-5);
  }
  .xl-p-b-5 {
    padding-bottom: var(--space-5);
  }
  .xl-p-l-5 {
    padding-left: var(--space-5);
  }
  .xl-p-x-5 {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
  .xl-p-y-5 {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .xl-p-6 {
    padding: var(--space-6);
  }
  .xl-p-t-6 {
    padding-top: var(--space-6);
  }
  .xl-p-r-6 {
    padding-right: var(--space-6);
  }
  .xl-p-b-6 {
    padding-bottom: var(--space-6);
  }
  .xl-p-l-6 {
    padding-left: var(--space-6);
  }
  .xl-p-x-6 {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  .xl-p-y-6 {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
  .xl-p-7 {
    padding: var(--space-7);
  }
  .xl-p-t-7 {
    padding-top: var(--space-7);
  }
  .xl-p-r-7 {
    padding-right: var(--space-7);
  }
  .xl-p-b-7 {
    padding-bottom: var(--space-7);
  }
  .xl-p-l-7 {
    padding-left: var(--space-7);
  }
  .xl-p-x-7 {
    padding-left: var(--space-7);
    padding-right: var(--space-7);
  }
  .xl-p-y-7 {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }
  .xl-p-8 {
    padding: var(--space-8);
  }
  .xl-p-t-8 {
    padding-top: var(--space-8);
  }
  .xl-p-r-8 {
    padding-right: var(--space-8);
  }
  .xl-p-b-8 {
    padding-bottom: var(--space-8);
  }
  .xl-p-l-8 {
    padding-left: var(--space-8);
  }
  .xl-p-x-8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .xl-p-y-8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
  .xl-p-9 {
    padding: var(--space-9);
  }
  .xl-p-t-9 {
    padding-top: var(--space-9);
  }
  .xl-p-r-9 {
    padding-right: var(--space-9);
  }
  .xl-p-b-9 {
    padding-bottom: var(--space-9);
  }
  .xl-p-l-9 {
    padding-left: var(--space-9);
  }
  .xl-p-x-9 {
    padding-left: var(--space-9);
    padding-right: var(--space-9);
  }
  .xl-p-y-9 {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
  .xl-p-10 {
    padding: var(--space-10);
  }
  .xl-p-t-10 {
    padding-top: var(--space-10);
  }
  .xl-p-r-10 {
    padding-right: var(--space-10);
  }
  .xl-p-b-10 {
    padding-bottom: var(--space-10);
  }
  .xl-p-l-10 {
    padding-left: var(--space-10);
  }
  .xl-p-x-10 {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }
  .xl-p-y-10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
  .xl-m-0 {
    margin: var(--space-0);
  }
  .xl-m-t-0 {
    margin-top: var(--space-0);
  }
  .xl-m-r-0 {
    margin-right: var(--space-0);
  }
  .xl-m-b-0 {
    margin-bottom: var(--space-0);
  }
  .xl-m-l-0 {
    margin-left: var(--space-0);
  }
  .xl-m-x-0 {
    margin-left: var(--space-0);
    margin-right: var(--space-0);
  }
  .xl-m-y-0 {
    margin-top: var(--space-0);
    margin-bottom: var(--space-0);
  }
  .xl-m-1 {
    margin: var(--space-1);
  }
  .xl-m-t-1 {
    margin-top: var(--space-1);
  }
  .xl-m-r-1 {
    margin-right: var(--space-1);
  }
  .xl-m-b-1 {
    margin-bottom: var(--space-1);
  }
  .xl-m-l-1 {
    margin-left: var(--space-1);
  }
  .xl-m-x-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
  }
  .xl-m-y-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
  .xl-m-2 {
    margin: var(--space-2);
  }
  .xl-m-t-2 {
    margin-top: var(--space-2);
  }
  .xl-m-r-2 {
    margin-right: var(--space-2);
  }
  .xl-m-b-2 {
    margin-bottom: var(--space-2);
  }
  .xl-m-l-2 {
    margin-left: var(--space-2);
  }
  .xl-m-x-2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }
  .xl-m-y-2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .xl-m-3 {
    margin: var(--space-3);
  }
  .xl-m-t-3 {
    margin-top: var(--space-3);
  }
  .xl-m-r-3 {
    margin-right: var(--space-3);
  }
  .xl-m-b-3 {
    margin-bottom: var(--space-3);
  }
  .xl-m-l-3 {
    margin-left: var(--space-3);
  }
  .xl-m-x-3 {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
  }
  .xl-m-y-3 {
    margin-top: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .xl-m-4 {
    margin: var(--space-4);
  }
  .xl-m-t-4 {
    margin-top: var(--space-4);
  }
  .xl-m-r-4 {
    margin-right: var(--space-4);
  }
  .xl-m-b-4 {
    margin-bottom: var(--space-4);
  }
  .xl-m-l-4 {
    margin-left: var(--space-4);
  }
  .xl-m-x-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }
  .xl-m-y-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .xl-m-5 {
    margin: var(--space-5);
  }
  .xl-m-t-5 {
    margin-top: var(--space-5);
  }
  .xl-m-r-5 {
    margin-right: var(--space-5);
  }
  .xl-m-b-5 {
    margin-bottom: var(--space-5);
  }
  .xl-m-l-5 {
    margin-left: var(--space-5);
  }
  .xl-m-x-5 {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }
  .xl-m-y-5 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
  }
  .xl-m-6 {
    margin: var(--space-6);
  }
  .xl-m-t-6 {
    margin-top: var(--space-6);
  }
  .xl-m-r-6 {
    margin-right: var(--space-6);
  }
  .xl-m-b-6 {
    margin-bottom: var(--space-6);
  }
  .xl-m-l-6 {
    margin-left: var(--space-6);
  }
  .xl-m-x-6 {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
  }
  .xl-m-y-6 {
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
  }
  .xl-m-7 {
    margin: var(--space-7);
  }
  .xl-m-t-7 {
    margin-top: var(--space-7);
  }
  .xl-m-r-7 {
    margin-right: var(--space-7);
  }
  .xl-m-b-7 {
    margin-bottom: var(--space-7);
  }
  .xl-m-l-7 {
    margin-left: var(--space-7);
  }
  .xl-m-x-7 {
    margin-left: var(--space-7);
    margin-right: var(--space-7);
  }
  .xl-m-y-7 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-7);
  }
  .xl-m-8 {
    margin: var(--space-8);
  }
  .xl-m-t-8 {
    margin-top: var(--space-8);
  }
  .xl-m-r-8 {
    margin-right: var(--space-8);
  }
  .xl-m-b-8 {
    margin-bottom: var(--space-8);
  }
  .xl-m-l-8 {
    margin-left: var(--space-8);
  }
  .xl-m-x-8 {
    margin-left: var(--space-8);
    margin-right: var(--space-8);
  }
  .xl-m-y-8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }
  .xl-m-9 {
    margin: var(--space-9);
  }
  .xl-m-t-9 {
    margin-top: var(--space-9);
  }
  .xl-m-r-9 {
    margin-right: var(--space-9);
  }
  .xl-m-b-9 {
    margin-bottom: var(--space-9);
  }
  .xl-m-l-9 {
    margin-left: var(--space-9);
  }
  .xl-m-x-9 {
    margin-left: var(--space-9);
    margin-right: var(--space-9);
  }
  .xl-m-y-9 {
    margin-top: var(--space-9);
    margin-bottom: var(--space-9);
  }
  .xl-m-10 {
    margin: var(--space-10);
  }
  .xl-m-t-10 {
    margin-top: var(--space-10);
  }
  .xl-m-r-10 {
    margin-right: var(--space-10);
  }
  .xl-m-b-10 {
    margin-bottom: var(--space-10);
  }
  .xl-m-l-10 {
    margin-left: var(--space-10);
  }
  .xl-m-x-10 {
    margin-left: var(--space-10);
    margin-right: var(--space-10);
  }
  .xl-m-y-10 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
  }
  .xl-m-x-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .xl-m-l-auto {
    margin-left: auto;
  }
  .xl-m-r-auto {
    margin-right: auto;
  }
  .xl-gap-0 {
    gap: var(--space-0);
  }
  .xl-gap-x-0 {
    column-gap: var(--space-0);
  }
  .xl-gap-y-0 {
    row-gap: var(--space-0);
  }
  .xl-gap-1 {
    gap: var(--space-1);
  }
  .xl-gap-x-1 {
    column-gap: var(--space-1);
  }
  .xl-gap-y-1 {
    row-gap: var(--space-1);
  }
  .xl-gap-2 {
    gap: var(--space-2);
  }
  .xl-gap-x-2 {
    column-gap: var(--space-2);
  }
  .xl-gap-y-2 {
    row-gap: var(--space-2);
  }
  .xl-gap-3 {
    gap: var(--space-3);
  }
  .xl-gap-x-3 {
    column-gap: var(--space-3);
  }
  .xl-gap-y-3 {
    row-gap: var(--space-3);
  }
  .xl-gap-4 {
    gap: var(--space-4);
  }
  .xl-gap-x-4 {
    column-gap: var(--space-4);
  }
  .xl-gap-y-4 {
    row-gap: var(--space-4);
  }
  .xl-gap-5 {
    gap: var(--space-5);
  }
  .xl-gap-x-5 {
    column-gap: var(--space-5);
  }
  .xl-gap-y-5 {
    row-gap: var(--space-5);
  }
  .xl-gap-6 {
    gap: var(--space-6);
  }
  .xl-gap-x-6 {
    column-gap: var(--space-6);
  }
  .xl-gap-y-6 {
    row-gap: var(--space-6);
  }
  .xl-gap-7 {
    gap: var(--space-7);
  }
  .xl-gap-x-7 {
    column-gap: var(--space-7);
  }
  .xl-gap-y-7 {
    row-gap: var(--space-7);
  }
  .xl-gap-8 {
    gap: var(--space-8);
  }
  .xl-gap-x-8 {
    column-gap: var(--space-8);
  }
  .xl-gap-y-8 {
    row-gap: var(--space-8);
  }
  .xl-gap-9 {
    gap: var(--space-9);
  }
  .xl-gap-x-9 {
    column-gap: var(--space-9);
  }
  .xl-gap-y-9 {
    row-gap: var(--space-9);
  }
  .xl-gap-10 {
    gap: var(--space-10);
  }
  .xl-gap-x-10 {
    column-gap: var(--space-10);
  }
  .xl-gap-y-10 {
    row-gap: var(--space-10);
  }
}
/*
============================================
Height Utilities
============================================
Control element height using viewport units,
fixed heights, and minimum heights.

Usage:
- .vh-{value}     - Viewport height percentage
- .min-vh-{value} - Minimum viewport height
- .h-auto         - Auto height (default)
- .h-full         - 100% height
- .h-screen       - Full viewport height (100vh)

Values:
- 25  = 25%
- 50  = 50%
- 75  = 75%
- 100 = 100%
============================================
*/
.vh-25 {
  height: 25vh;
}

.vh-50 {
  height: 50vh;
}

.vh-75 {
  height: 75vh;
}

.vh-100 {
  height: 100vh;
}

.min-vh-25 {
  min-height: 25vh;
}

.min-vh-50 {
  min-height: 50vh;
}

.min-vh-75 {
  min-height: 75vh;
}

.min-vh-100 {
  min-height: 100vh;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.h-screen-half {
  height: 50vh;
}

.min-h-0 {
  min-height: 0;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

/*
============================================
Width Utilities
============================================
Control element width with precise sizing

Classes:
- .w-{size} - Fixed pixel width
- .w-{size}p - Percentage width
- .w-{size}vw - Viewport width
- .min-w-{size} - Minimum width
- .max-w-{size} - Maximum width

Special values:
- .w-0, .w-a (auto)
- .w-full (100%), .w-screen (100vw)
- .w-min, .w-max, .w-fit

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.w-0 {
  width: 0;
}

.w-a {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.w-min {
  width: min-content;
}

.w-max {
  width: max-content;
}

.w-fit {
  width: fit-content;
}

.w-1 {
  width: 1px;
}

.w-2 {
  width: 2px;
}

.w-3 {
  width: 3px;
}

.w-4 {
  width: 4px;
}

.w-5 {
  width: 5px;
}

.w-6 {
  width: 6px;
}

.w-7 {
  width: 7px;
}

.w-8 {
  width: 8px;
}

.w-9 {
  width: 9px;
}

.w-10 {
  width: 10px;
}

.w-15 {
  width: 15px;
}

.w-20 {
  width: 20px;
}

.w-25 {
  width: 25px;
}

.w-30 {
  width: 30px;
}

.w-35 {
  width: 35px;
}

.w-40 {
  width: 40px;
}

.w-45 {
  width: 45px;
}

.w-50 {
  width: 50px;
}

.w-60 {
  width: 60px;
}

.w-70 {
  width: 70px;
}

.w-80 {
  width: 80px;
}

.w-90 {
  width: 90px;
}

.w-100 {
  width: 100px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

.w-250 {
  width: 250px;
}

.w-300 {
  width: 300px;
}

.w-350 {
  width: 350px;
}

.w-400 {
  width: 400px;
}

.w-450 {
  width: 450px;
}

.w-500 {
  width: 500px;
}

.w-550 {
  width: 550px;
}

.w-600 {
  width: 600px;
}

.w-650 {
  width: 650px;
}

.w-700 {
  width: 700px;
}

.w-750 {
  width: 750px;
}

.w-800 {
  width: 800px;
}

.w-850 {
  width: 850px;
}

.w-900 {
  width: 900px;
}

.w-950 {
  width: 950px;
}

.w-1000 {
  width: 1000px;
}

.w-1200 {
  width: 1200px;
}

.w-1400 {
  width: 1400px;
}

.w-1600 {
  width: 1600px;
}

.w-1800 {
  width: 1800px;
}

.w-2000 {
  width: 2000px;
}

.w-0p {
  width: 0%;
}

.w-10p {
  width: 10%;
}

.w-20p {
  width: 20%;
}

.w-30p {
  width: 30%;
}

.w-40p {
  width: 40%;
}

.w-50p {
  width: 50%;
}

.w-60p {
  width: 60%;
}

.w-70p {
  width: 70%;
}

.w-80p {
  width: 80%;
}

.w-90p {
  width: 90%;
}

.w-100p {
  width: 100%;
}

.w-25p {
  width: 25%;
}

.w-33p {
  width: 33.333333%;
}

.w-50p {
  width: 50%;
}

.w-66p {
  width: 66.666667%;
}

.w-75p {
  width: 75%;
}

.w-8p {
  width: 8.333333%;
}

.w-16p {
  width: 16.666667%;
}

.w-41p {
  width: 41.666667%;
}

.w-58p {
  width: 58.333333%;
}

.w-83p {
  width: 83.333333%;
}

.w-91p {
  width: 91.666667%;
}

.w-25vw {
  width: 25vw;
}

.w-33vw {
  width: 33.333333vw;
}

.w-50vw {
  width: 50vw;
}

.w-66vw {
  width: 66.666667vw;
}

.w-75vw {
  width: 75vw;
}

.w-100vw {
  width: 100vw;
}

.min-w-0 {
  min-width: 0;
}

.min-w-full {
  min-width: 100%;
}

.min-w-min {
  min-width: min-content;
}

.min-w-max {
  min-width: max-content;
}

.min-w-fit {
  min-width: fit-content;
}

.min-w-1 {
  min-width: 1px;
}

.min-w-2 {
  min-width: 2px;
}

.min-w-3 {
  min-width: 3px;
}

.min-w-4 {
  min-width: 4px;
}

.min-w-5 {
  min-width: 5px;
}

.min-w-6 {
  min-width: 6px;
}

.min-w-7 {
  min-width: 7px;
}

.min-w-8 {
  min-width: 8px;
}

.min-w-9 {
  min-width: 9px;
}

.min-w-10 {
  min-width: 10px;
}

.min-w-15 {
  min-width: 15px;
}

.min-w-20 {
  min-width: 20px;
}

.min-w-25 {
  min-width: 25px;
}

.min-w-30 {
  min-width: 30px;
}

.min-w-35 {
  min-width: 35px;
}

.min-w-40 {
  min-width: 40px;
}

.min-w-45 {
  min-width: 45px;
}

.min-w-50 {
  min-width: 50px;
}

.min-w-60 {
  min-width: 60px;
}

.min-w-70 {
  min-width: 70px;
}

.min-w-80 {
  min-width: 80px;
}

.min-w-90 {
  min-width: 90px;
}

.min-w-100 {
  min-width: 100px;
}

.min-w-150 {
  min-width: 150px;
}

.min-w-200 {
  min-width: 200px;
}

.min-w-250 {
  min-width: 250px;
}

.min-w-300 {
  min-width: 300px;
}

.min-w-350 {
  min-width: 350px;
}

.min-w-400 {
  min-width: 400px;
}

.min-w-450 {
  min-width: 450px;
}

.min-w-500 {
  min-width: 500px;
}

.min-w-550 {
  min-width: 550px;
}

.min-w-600 {
  min-width: 600px;
}

.min-w-650 {
  min-width: 650px;
}

.min-w-700 {
  min-width: 700px;
}

.min-w-750 {
  min-width: 750px;
}

.min-w-800 {
  min-width: 800px;
}

.min-w-850 {
  min-width: 850px;
}

.min-w-900 {
  min-width: 900px;
}

.min-w-950 {
  min-width: 950px;
}

.min-w-1000 {
  min-width: 1000px;
}

.min-w-1200 {
  min-width: 1200px;
}

.min-w-1400 {
  min-width: 1400px;
}

.min-w-1600 {
  min-width: 1600px;
}

.min-w-0p {
  min-width: 0%;
}

.min-w-10p {
  min-width: 10%;
}

.min-w-20p {
  min-width: 20%;
}

.min-w-30p {
  min-width: 30%;
}

.min-w-40p {
  min-width: 40%;
}

.min-w-50p {
  min-width: 50%;
}

.min-w-60p {
  min-width: 60%;
}

.min-w-70p {
  min-width: 70%;
}

.min-w-80p {
  min-width: 80%;
}

.min-w-90p {
  min-width: 90%;
}

.min-w-100p {
  min-width: 100%;
}

.min-w-25p {
  min-width: 25%;
}

.min-w-33p {
  min-width: 33.333333%;
}

.min-w-50p {
  min-width: 50%;
}

.min-w-66p {
  min-width: 66.666667%;
}

.min-w-75p {
  min-width: 75%;
}

.max-w-0 {
  max-width: 0;
}

.max-w-none {
  max-width: none;
}

.max-w-full {
  max-width: 100%;
}

.max-w-min {
  max-width: min-content;
}

.max-w-max {
  max-width: max-content;
}

.max-w-fit {
  max-width: fit-content;
}

.max-w-1 {
  max-width: 1px;
}

.max-w-2 {
  max-width: 2px;
}

.max-w-3 {
  max-width: 3px;
}

.max-w-4 {
  max-width: 4px;
}

.max-w-5 {
  max-width: 5px;
}

.max-w-6 {
  max-width: 6px;
}

.max-w-7 {
  max-width: 7px;
}

.max-w-8 {
  max-width: 8px;
}

.max-w-9 {
  max-width: 9px;
}

.max-w-10 {
  max-width: 10px;
}

.max-w-15 {
  max-width: 15px;
}

.max-w-20 {
  max-width: 20px;
}

.max-w-25 {
  max-width: 25px;
}

.max-w-30 {
  max-width: 30px;
}

.max-w-35 {
  max-width: 35px;
}

.max-w-40 {
  max-width: 40px;
}

.max-w-45 {
  max-width: 45px;
}

.max-w-50 {
  max-width: 50px;
}

.max-w-60 {
  max-width: 60px;
}

.max-w-70 {
  max-width: 70px;
}

.max-w-80 {
  max-width: 80px;
}

.max-w-90 {
  max-width: 90px;
}

.max-w-100 {
  max-width: 100px;
}

.max-w-150 {
  max-width: 150px;
}

.max-w-200 {
  max-width: 200px;
}

.max-w-250 {
  max-width: 250px;
}

.max-w-300 {
  max-width: 300px;
}

.max-w-350 {
  max-width: 350px;
}

.max-w-400 {
  max-width: 400px;
}

.max-w-450 {
  max-width: 450px;
}

.max-w-500 {
  max-width: 500px;
}

.max-w-550 {
  max-width: 550px;
}

.max-w-600 {
  max-width: 600px;
}

.max-w-650 {
  max-width: 650px;
}

.max-w-700 {
  max-width: 700px;
}

.max-w-750 {
  max-width: 750px;
}

.max-w-800 {
  max-width: 800px;
}

.max-w-850 {
  max-width: 850px;
}

.max-w-900 {
  max-width: 900px;
}

.max-w-950 {
  max-width: 950px;
}

.max-w-1000 {
  max-width: 1000px;
}

.max-w-1200 {
  max-width: 1200px;
}

.max-w-1400 {
  max-width: 1400px;
}

.max-w-1600 {
  max-width: 1600px;
}

.max-w-1800 {
  max-width: 1800px;
}

.max-w-0p {
  max-width: 0%;
}

.max-w-10p {
  max-width: 10%;
}

.max-w-20p {
  max-width: 20%;
}

.max-w-30p {
  max-width: 30%;
}

.max-w-40p {
  max-width: 40%;
}

.max-w-50p {
  max-width: 50%;
}

.max-w-60p {
  max-width: 60%;
}

.max-w-70p {
  max-width: 70%;
}

.max-w-80p {
  max-width: 80%;
}

.max-w-90p {
  max-width: 90%;
}

.max-w-100p {
  max-width: 100%;
}

.max-w-25p {
  max-width: 25%;
}

.max-w-33p {
  max-width: 33.333333%;
}

.max-w-50p {
  max-width: 50%;
}

.max-w-66p {
  max-width: 66.666667%;
}

.max-w-75p {
  max-width: 75%;
}

@media (min-width: 640px) {
  .sm-w-full {
    width: 100%;
  }
  .sm-w-a {
    width: auto;
  }
  .sm-w-50p {
    width: 50%;
  }
  .sm-w-100p {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .md-w-full {
    width: 100%;
  }
  .md-w-a {
    width: auto;
  }
  .md-w-50p {
    width: 50%;
  }
  .md-w-100p {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .lg-w-full {
    width: 100%;
  }
  .lg-w-a {
    width: auto;
  }
  .lg-w-50p {
    width: 50%;
  }
  .lg-w-100p {
    width: 100%;
  }
}
@media (min-width: 1280px) {
  .xl-w-full {
    width: 100%;
  }
  .xl-w-a {
    width: auto;
  }
  .xl-w-50p {
    width: 50%;
  }
  .xl-w-100p {
    width: 100%;
  }
}
/*
============================================
Flexbox Utilities
============================================
Complete flexbox layout control utilities
for creating flexible, responsive layouts.

Usage - Display:
- .d-flex         - Enable flexbox
- .d-inline-flex  - Inline flexbox

Direction:
- .flex-row       - Horizontal layout (default)
- .flex-column    - Vertical layout
- .flex-row-reverse
- .flex-column-reverse

Justify Content (main axis):
- .justify-start, .justify-center, .justify-end
- .justify-between, .justify-around, .justify-evenly

Align Items (cross axis):
- .align-start, .align-center, .align-end
- .align-stretch, .align-baseline

Wrap:
- .flex-wrap, .flex-nowrap, .flex-wrap-reverse

Gap:
- .gap-{size}  - Gap between flex/grid items
============================================
*/
.d-flex {
  display: flex;
}

.d-inline-flex {
  display: inline-flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

.align-baseline {
  align-items: baseline;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-center {
  align-self: center;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-stretch {
  align-self: stretch;
}

.align-self-baseline {
  align-self: baseline;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

.gap-0 {
  gap: 0;
}

.gap-xs {
  gap: 0.5rem;
}

.gap-sm {
  gap: 1rem;
}

.gap-md {
  gap: 2rem;
}

.gap-lg {
  gap: 3rem;
}

.gap-xl {
  gap: 4rem;
}

.gap-2xl {
  gap: 6rem;
}

.gap-3xl {
  gap: 8rem;
}

.gap-y-0 {
  row-gap: 0;
}

.gap-y-xs {
  row-gap: 0.5rem;
}

.gap-y-sm {
  row-gap: 1rem;
}

.gap-y-md {
  row-gap: 2rem;
}

.gap-y-lg {
  row-gap: 3rem;
}

.gap-y-xl {
  row-gap: 4rem;
}

.gap-y-2xl {
  row-gap: 6rem;
}

.gap-y-3xl {
  row-gap: 8rem;
}

.gap-x-0 {
  column-gap: 0;
}

.gap-x-xs {
  column-gap: 0.5rem;
}

.gap-x-sm {
  column-gap: 1rem;
}

.gap-x-md {
  column-gap: 2rem;
}

.gap-x-lg {
  column-gap: 3rem;
}

.gap-x-xl {
  column-gap: 4rem;
}

.gap-x-2xl {
  column-gap: 6rem;
}

.gap-x-3xl {
  column-gap: 8rem;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-stack {
  display: flex;
  flex-direction: column;
}

.flex-inline {
  display: flex;
  flex-direction: row;
}

@media (min-width: 640px) {
  .sm-justify-start {
    justify-content: flex-start;
  }
  .sm-justify-center {
    justify-content: center;
  }
  .sm-justify-end {
    justify-content: flex-end;
  }
  .sm-justify-between {
    justify-content: space-between;
  }
  .sm-justify-around {
    justify-content: space-around;
  }
  .sm-justify-evenly {
    justify-content: space-evenly;
  }
  .sm-flex-row {
    flex-direction: row;
  }
  .sm-flex-column {
    flex-direction: column;
  }
  .sm-flex-row-reverse {
    flex-direction: row-reverse;
  }
  .sm-flex-column-reverse {
    flex-direction: column-reverse;
  }
}
@media (min-width: 768px) {
  .md-justify-start {
    justify-content: flex-start;
  }
  .md-justify-center {
    justify-content: center;
  }
  .md-justify-end {
    justify-content: flex-end;
  }
  .md-justify-between {
    justify-content: space-between;
  }
  .md-justify-around {
    justify-content: space-around;
  }
  .md-justify-evenly {
    justify-content: space-evenly;
  }
  .md-flex-row {
    flex-direction: row;
  }
  .md-flex-column {
    flex-direction: column;
  }
  .md-flex-row-reverse {
    flex-direction: row-reverse;
  }
  .md-flex-column-reverse {
    flex-direction: column-reverse;
  }
}
@media (min-width: 1024px) {
  .lg-justify-start {
    justify-content: flex-start;
  }
  .lg-justify-center {
    justify-content: center;
  }
  .lg-justify-end {
    justify-content: flex-end;
  }
  .lg-justify-between {
    justify-content: space-between;
  }
  .lg-justify-around {
    justify-content: space-around;
  }
  .lg-justify-evenly {
    justify-content: space-evenly;
  }
  .lg-flex-row {
    flex-direction: row;
  }
  .lg-flex-column {
    flex-direction: column;
  }
  .lg-flex-row-reverse {
    flex-direction: row-reverse;
  }
  .lg-flex-column-reverse {
    flex-direction: column-reverse;
  }
}
@media (min-width: 1280px) {
  .xl-justify-start {
    justify-content: flex-start;
  }
  .xl-justify-center {
    justify-content: center;
  }
  .xl-justify-end {
    justify-content: flex-end;
  }
  .xl-justify-between {
    justify-content: space-between;
  }
  .xl-justify-around {
    justify-content: space-around;
  }
  .xl-justify-evenly {
    justify-content: space-evenly;
  }
  .xl-flex-row {
    flex-direction: row;
  }
  .xl-flex-column {
    flex-direction: column;
  }
  .xl-flex-row-reverse {
    flex-direction: row-reverse;
  }
  .xl-flex-column-reverse {
    flex-direction: column-reverse;
  }
}
/*
============================================
CSS Grid Utilities
============================================
14-column × 14-row grid system with placement utilities

Grid Display:
- .grid, .inline-grid

Grid Template:
- .grid-cols-{1-14} - Column count
- .grid-rows-{1-14} - Row count

Grid Span:
- .col-span-{1-14} - Span columns
- .row-span-{1-14} - Span rows

Grid Placement:
- .col-start-{1-15}, .col-end-{1-15}
- .row-start-{1-15}, .row-end-{1-15}

Grid Flow:
- .grid-flow-row, .grid-flow-col, .grid-flow-dense

Alignment:
- justify-items-*, align-items-*, place-items-*
- justify-content-*, align-content-*, place-content-*
- justify-self-*, align-self-*, place-self-*

Gap:
- .gap-{size}, .gap-x-{size}, .gap-y-{size}

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-13 {
  grid-template-columns: repeat(13, minmax(0, 1fr));
}

.grid-cols-14 {
  grid-template-columns: repeat(14, minmax(0, 1fr));
}

.grid-cols-none {
  grid-template-columns: none;
}

.grid-cols-auto {
  grid-template-columns: auto;
}

.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

.grid-rows-7 {
  grid-template-rows: repeat(7, minmax(0, 1fr));
}

.grid-rows-8 {
  grid-template-rows: repeat(8, minmax(0, 1fr));
}

.grid-rows-9 {
  grid-template-rows: repeat(9, minmax(0, 1fr));
}

.grid-rows-10 {
  grid-template-rows: repeat(10, minmax(0, 1fr));
}

.grid-rows-11 {
  grid-template-rows: repeat(11, minmax(0, 1fr));
}

.grid-rows-12 {
  grid-template-rows: repeat(12, minmax(0, 1fr));
}

.grid-rows-13 {
  grid-template-rows: repeat(13, minmax(0, 1fr));
}

.grid-rows-14 {
  grid-template-rows: repeat(14, minmax(0, 1fr));
}

.grid-rows-none {
  grid-template-rows: none;
}

.grid-rows-auto {
  grid-template-rows: auto;
}

.col-auto {
  grid-column: auto;
}

.col-span-1 {
  grid-column: span 1/span 1;
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.col-span-5 {
  grid-column: span 5/span 5;
}

.col-span-6 {
  grid-column: span 6/span 6;
}

.col-span-7 {
  grid-column: span 7/span 7;
}

.col-span-8 {
  grid-column: span 8/span 8;
}

.col-span-9 {
  grid-column: span 9/span 9;
}

.col-span-10 {
  grid-column: span 10/span 10;
}

.col-span-11 {
  grid-column: span 11/span 11;
}

.col-span-12 {
  grid-column: span 12/span 12;
}

.col-span-13 {
  grid-column: span 13/span 13;
}

.col-span-14 {
  grid-column: span 14/span 14;
}

.col-span-full {
  grid-column: 1/-1;
}

.row-auto {
  grid-row: auto;
}

.row-span-1 {
  grid-row: span 1/span 1;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

.row-span-7 {
  grid-row: span 7/span 7;
}

.row-span-8 {
  grid-row: span 8/span 8;
}

.row-span-9 {
  grid-row: span 9/span 9;
}

.row-span-10 {
  grid-row: span 10/span 10;
}

.row-span-11 {
  grid-row: span 11/span 11;
}

.row-span-12 {
  grid-row: span 12/span 12;
}

.row-span-13 {
  grid-row: span 13/span 13;
}

.row-span-14 {
  grid-row: span 14/span 14;
}

.row-span-full {
  grid-row: 1/-1;
}

.col-start-auto {
  grid-column-start: auto;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-start-9 {
  grid-column-start: 9;
}

.col-start-10 {
  grid-column-start: 10;
}

.col-start-11 {
  grid-column-start: 11;
}

.col-start-12 {
  grid-column-start: 12;
}

.col-start-13 {
  grid-column-start: 13;
}

.col-start-14 {
  grid-column-start: 14;
}

.col-start-15 {
  grid-column-start: 15;
}

.col-end-auto {
  grid-column-end: auto;
}

.col-end-1 {
  grid-column-end: 1;
}

.col-end-2 {
  grid-column-end: 2;
}

.col-end-3 {
  grid-column-end: 3;
}

.col-end-4 {
  grid-column-end: 4;
}

.col-end-5 {
  grid-column-end: 5;
}

.col-end-6 {
  grid-column-end: 6;
}

.col-end-7 {
  grid-column-end: 7;
}

.col-end-8 {
  grid-column-end: 8;
}

.col-end-9 {
  grid-column-end: 9;
}

.col-end-10 {
  grid-column-end: 10;
}

.col-end-11 {
  grid-column-end: 11;
}

.col-end-12 {
  grid-column-end: 12;
}

.col-end-13 {
  grid-column-end: 13;
}

.col-end-14 {
  grid-column-end: 14;
}

.col-end-15 {
  grid-column-end: 15;
}

.row-start-auto {
  grid-row-start: auto;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-start-8 {
  grid-row-start: 8;
}

.row-start-9 {
  grid-row-start: 9;
}

.row-start-10 {
  grid-row-start: 10;
}

.row-start-11 {
  grid-row-start: 11;
}

.row-start-12 {
  grid-row-start: 12;
}

.row-start-13 {
  grid-row-start: 13;
}

.row-start-14 {
  grid-row-start: 14;
}

.row-start-15 {
  grid-row-start: 15;
}

.row-end-auto {
  grid-row-end: auto;
}

.row-end-1 {
  grid-row-end: 1;
}

.row-end-2 {
  grid-row-end: 2;
}

.row-end-3 {
  grid-row-end: 3;
}

.row-end-4 {
  grid-row-end: 4;
}

.row-end-5 {
  grid-row-end: 5;
}

.row-end-6 {
  grid-row-end: 6;
}

.row-end-7 {
  grid-row-end: 7;
}

.row-end-8 {
  grid-row-end: 8;
}

.row-end-9 {
  grid-row-end: 9;
}

.row-end-10 {
  grid-row-end: 10;
}

.row-end-11 {
  grid-row-end: 11;
}

.row-end-12 {
  grid-row-end: 12;
}

.row-end-13 {
  grid-row-end: 13;
}

.row-end-14 {
  grid-row-end: 14;
}

.row-end-15 {
  grid-row-end: 15;
}

.grid-flow-row {
  grid-auto-flow: row;
}

.grid-flow-col {
  grid-auto-flow: column;
}

.grid-flow-dense {
  grid-auto-flow: dense;
}

.grid-flow-row-dense {
  grid-auto-flow: row dense;
}

.grid-flow-col-dense {
  grid-auto-flow: column dense;
}

.auto-cols-auto {
  grid-auto-columns: auto;
}

.auto-cols-min {
  grid-auto-columns: min-content;
}

.auto-cols-max {
  grid-auto-columns: max-content;
}

.auto-cols-fr {
  grid-auto-columns: minmax(0, 1fr);
}

.auto-rows-auto {
  grid-auto-rows: auto;
}

.auto-rows-min {
  grid-auto-rows: min-content;
}

.auto-rows-max {
  grid-auto-rows: max-content;
}

.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

.align-items-start {
  align-items: start;
}

.align-items-end {
  align-items: end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.place-items-start {
  place-items: start;
}

.place-items-end {
  place-items: end;
}

.place-items-center {
  place-items: center;
}

.place-items-stretch {
  place-items: stretch;
}

.justify-content-start {
  justify-content: start;
}

.justify-content-end {
  justify-content: end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-stretch {
  justify-content: stretch;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-content-start {
  align-content: start;
}

.align-content-end {
  align-content: end;
}

.align-content-center {
  align-content: center;
}

.align-content-stretch {
  align-content: stretch;
}

.align-content-between {
  align-content: space-between;
}

.align-content-around {
  align-content: space-around;
}

.align-content-evenly {
  align-content: space-evenly;
}

.place-content-start {
  place-content: start;
}

.place-content-end {
  place-content: end;
}

.place-content-center {
  place-content: center;
}

.place-content-stretch {
  place-content: stretch;
}

.place-content-between {
  place-content: space-between;
}

.place-content-around {
  place-content: space-around;
}

.place-content-evenly {
  place-content: space-evenly;
}

.justify-self-auto {
  justify-self: auto;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-stretch {
  justify-self: stretch;
}

.align-self-auto {
  align-self: auto;
}

.align-self-start {
  align-self: start;
}

.align-self-end {
  align-self: end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.place-self-auto {
  place-self: auto;
}

.place-self-start {
  place-self: start;
}

.place-self-end {
  place-self: end;
}

.place-self-center {
  place-self: center;
}

.place-self-stretch {
  place-self: stretch;
}

@media (min-width: 640px) {
  .sm-grid {
    display: grid;
  }
  .sm-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm-col-span-1 {
    grid-column: span 1/span 1;
  }
  .sm-col-span-2 {
    grid-column: span 2/span 2;
  }
  .sm-col-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 768px) {
  .md-grid {
    display: grid;
  }
  .md-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md-grid-cols-65-35 {
    grid-template-columns: 65fr 35fr;
  }
  .md-col-span-1 {
    grid-column: span 1/span 1;
  }
  .md-col-span-2 {
    grid-column: span 2/span 2;
  }
  .md-col-span-3 {
    grid-column: span 3/span 3;
  }
  .md-col-span-4 {
    grid-column: span 4/span 4;
  }
  .md-col-span-5 {
    grid-column: span 5/span 5;
  }
  .md-col-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 1024px) {
  .lg-grid {
    display: grid;
  }
  .lg-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg-col-span-1 {
    grid-column: span 1/span 1;
  }
  .lg-col-span-2 {
    grid-column: span 2/span 2;
  }
  .lg-col-span-3 {
    grid-column: span 3/span 3;
  }
  .lg-col-span-4 {
    grid-column: span 4/span 4;
  }
  .lg-col-span-5 {
    grid-column: span 5/span 5;
  }
  .lg-col-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 1200px) {
  .xl-grid {
    display: grid;
  }
  .xl-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .xl-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xl-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .xl-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .xl-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .xl-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .xl-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .xl-grid-cols-14 {
    grid-template-columns: repeat(14, minmax(0, 1fr));
  }
  .xl-col-span-1 {
    grid-column: span 1/span 1;
  }
  .xl-col-span-2 {
    grid-column: span 2/span 2;
  }
  .xl-col-span-3 {
    grid-column: span 3/span 3;
  }
  .xl-col-span-4 {
    grid-column: span 4/span 4;
  }
  .xl-col-span-6 {
    grid-column: span 6/span 6;
  }
  .xl-col-span-full {
    grid-column: 1/-1;
  }
}
/*
============================================
Display Utilities
============================================
Control element display types and visibility

Classes:
- .block, .inline, .inline-block
- .flex, .inline-flex
- .grid, .inline-grid
- .table, .table-row, .table-cell
- .flow-root
- .hide, .show
- .visible, .invisible

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.flow-root {
  display: flow-root;
}

.contents {
  display: contents;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.appearance-none {
  appearance: none;
}

@media (min-width: 640px) {
  .sm-block {
    display: block;
  }
  .sm-inline {
    display: inline;
  }
  .sm-inline-block {
    display: inline-block;
  }
  .sm-flex {
    display: flex;
  }
  .sm-inline-flex {
    display: inline-flex;
  }
  .sm-grid {
    display: grid;
  }
  .sm-inline-grid {
    display: inline-grid;
  }
  .sm-table {
    display: table;
  }
  .sm-hide {
    display: none;
  }
  .sm-show {
    display: block;
  }
}
@media (min-width: 768px) {
  .md-block {
    display: block;
  }
  .md-inline {
    display: inline;
  }
  .md-inline-block {
    display: inline-block;
  }
  .md-flex {
    display: flex;
  }
  .md-inline-flex {
    display: inline-flex;
  }
  .md-grid {
    display: grid;
  }
  .md-inline-grid {
    display: inline-grid;
  }
  .md-table {
    display: table;
  }
  .md-hide {
    display: none;
  }
  .md-show {
    display: block;
  }
}
@media (min-width: 1024px) {
  .lg-block {
    display: block;
  }
  .lg-inline {
    display: inline;
  }
  .lg-inline-block {
    display: inline-block;
  }
  .lg-flex {
    display: flex;
  }
  .lg-inline-flex {
    display: inline-flex;
  }
  .lg-grid {
    display: grid;
  }
  .lg-inline-grid {
    display: inline-grid;
  }
  .lg-table {
    display: table;
  }
  .lg-hide {
    display: none;
  }
  .lg-show {
    display: block;
  }
}
@media (min-width: 1280px) {
  .xl-block {
    display: block;
  }
  .xl-inline {
    display: inline;
  }
  .xl-inline-block {
    display: inline-block;
  }
  .xl-flex {
    display: flex;
  }
  .xl-inline-flex {
    display: inline-flex;
  }
  .xl-grid {
    display: grid;
  }
  .xl-inline-grid {
    display: inline-grid;
  }
  .xl-table {
    display: table;
  }
  .xl-hide {
    display: none;
  }
  .xl-show {
    display: block;
  }
}
/*
============================================
Position Utilities
============================================
Control element positioning and placement

Position Types:
- .static, .relative, .absolute, .fixed, .sticky

Position Values:
- .top-{value}, .right-{value}, .bottom-{value}, .left-{value}
- .inset-{value} (all sides)

Values: 0, auto, px (0-100), percentage (0-100)
Negative values: .top-minus-{value}p

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.top-a {
  top: auto;
}

.right-a {
  right: auto;
}

.bottom-a {
  bottom: auto;
}

.left-a {
  left: auto;
}

.inset-a {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

.top-1 {
  top: 1px;
}

.right-1 {
  right: 1px;
}

.bottom-1 {
  bottom: 1px;
}

.left-1 {
  left: 1px;
}

.top-2 {
  top: 2px;
}

.right-2 {
  right: 2px;
}

.bottom-2 {
  bottom: 2px;
}

.left-2 {
  left: 2px;
}

.top-3 {
  top: 3px;
}

.right-3 {
  right: 3px;
}

.bottom-3 {
  bottom: 3px;
}

.left-3 {
  left: 3px;
}

.top-4 {
  top: 4px;
}

.right-4 {
  right: 4px;
}

.bottom-4 {
  bottom: 4px;
}

.left-4 {
  left: 4px;
}

.top-5 {
  top: 5px;
}

.right-5 {
  right: 5px;
}

.bottom-5 {
  bottom: 5px;
}

.left-5 {
  left: 5px;
}

.top-6 {
  top: 6px;
}

.right-6 {
  right: 6px;
}

.bottom-6 {
  bottom: 6px;
}

.left-6 {
  left: 6px;
}

.top-7 {
  top: 7px;
}

.right-7 {
  right: 7px;
}

.bottom-7 {
  bottom: 7px;
}

.left-7 {
  left: 7px;
}

.top-8 {
  top: 8px;
}

.right-8 {
  right: 8px;
}

.bottom-8 {
  bottom: 8px;
}

.left-8 {
  left: 8px;
}

.top-9 {
  top: 9px;
}

.right-9 {
  right: 9px;
}

.bottom-9 {
  bottom: 9px;
}

.left-9 {
  left: 9px;
}

.top-10 {
  top: 10px;
}

.right-10 {
  right: 10px;
}

.bottom-10 {
  bottom: 10px;
}

.left-10 {
  left: 10px;
}

.top-15 {
  top: 15px;
}

.right-15 {
  right: 15px;
}

.bottom-15 {
  bottom: 15px;
}

.left-15 {
  left: 15px;
}

.top-20 {
  top: 20px;
}

.right-20 {
  right: 20px;
}

.bottom-20 {
  bottom: 20px;
}

.left-20 {
  left: 20px;
}

.top-25 {
  top: 25px;
}

.right-25 {
  right: 25px;
}

.bottom-25 {
  bottom: 25px;
}

.left-25 {
  left: 25px;
}

.top-30 {
  top: 30px;
}

.right-30 {
  right: 30px;
}

.bottom-30 {
  bottom: 30px;
}

.left-30 {
  left: 30px;
}

.top-35 {
  top: 35px;
}

.right-35 {
  right: 35px;
}

.bottom-35 {
  bottom: 35px;
}

.left-35 {
  left: 35px;
}

.top-40 {
  top: 40px;
}

.right-40 {
  right: 40px;
}

.bottom-40 {
  bottom: 40px;
}

.left-40 {
  left: 40px;
}

.top-45 {
  top: 45px;
}

.right-45 {
  right: 45px;
}

.bottom-45 {
  bottom: 45px;
}

.left-45 {
  left: 45px;
}

.top-50 {
  top: 50px;
}

.right-50 {
  right: 50px;
}

.bottom-50 {
  bottom: 50px;
}

.left-50 {
  left: 50px;
}

.top-60 {
  top: 60px;
}

.right-60 {
  right: 60px;
}

.bottom-60 {
  bottom: 60px;
}

.left-60 {
  left: 60px;
}

.top-70 {
  top: 70px;
}

.right-70 {
  right: 70px;
}

.bottom-70 {
  bottom: 70px;
}

.left-70 {
  left: 70px;
}

.top-80 {
  top: 80px;
}

.right-80 {
  right: 80px;
}

.bottom-80 {
  bottom: 80px;
}

.left-80 {
  left: 80px;
}

.top-90 {
  top: 90px;
}

.right-90 {
  right: 90px;
}

.bottom-90 {
  bottom: 90px;
}

.left-90 {
  left: 90px;
}

.top-100 {
  top: 100px;
}

.right-100 {
  right: 100px;
}

.bottom-100 {
  bottom: 100px;
}

.left-100 {
  left: 100px;
}

.top-0p {
  top: 0%;
}

.right-0p {
  right: 0%;
}

.bottom-0p {
  bottom: 0%;
}

.left-0p {
  left: 0%;
}

.top-10p {
  top: 10%;
}

.right-10p {
  right: 10%;
}

.bottom-10p {
  bottom: 10%;
}

.left-10p {
  left: 10%;
}

.top-20p {
  top: 20%;
}

.right-20p {
  right: 20%;
}

.bottom-20p {
  bottom: 20%;
}

.left-20p {
  left: 20%;
}

.top-30p {
  top: 30%;
}

.right-30p {
  right: 30%;
}

.bottom-30p {
  bottom: 30%;
}

.left-30p {
  left: 30%;
}

.top-40p {
  top: 40%;
}

.right-40p {
  right: 40%;
}

.bottom-40p {
  bottom: 40%;
}

.left-40p {
  left: 40%;
}

.top-50p {
  top: 50%;
}

.right-50p {
  right: 50%;
}

.bottom-50p {
  bottom: 50%;
}

.left-50p {
  left: 50%;
}

.top-60p {
  top: 60%;
}

.right-60p {
  right: 60%;
}

.bottom-60p {
  bottom: 60%;
}

.left-60p {
  left: 60%;
}

.top-70p {
  top: 70%;
}

.right-70p {
  right: 70%;
}

.bottom-70p {
  bottom: 70%;
}

.left-70p {
  left: 70%;
}

.top-80p {
  top: 80%;
}

.right-80p {
  right: 80%;
}

.bottom-80p {
  bottom: 80%;
}

.left-80p {
  left: 80%;
}

.top-90p {
  top: 90%;
}

.right-90p {
  right: 90%;
}

.bottom-90p {
  bottom: 90%;
}

.left-90p {
  left: 90%;
}

.top-100p {
  top: 100%;
}

.right-100p {
  right: 100%;
}

.bottom-100p {
  bottom: 100%;
}

.left-100p {
  left: 100%;
}

.top-25p {
  top: 25%;
}

.right-25p {
  right: 25%;
}

.bottom-25p {
  bottom: 25%;
}

.left-25p {
  left: 25%;
}

.top-33p {
  top: 33.333333%;
}

.right-33p {
  right: 33.333333%;
}

.bottom-33p {
  bottom: 33.333333%;
}

.left-33p {
  left: 33.333333%;
}

.top-66p {
  top: 66.666667%;
}

.right-66p {
  right: 66.666667%;
}

.bottom-66p {
  bottom: 66.666667%;
}

.left-66p {
  left: 66.666667%;
}

.top-minus-10p {
  top: -10%;
}

.right-minus-10p {
  right: -10%;
}

.bottom-minus-10p {
  bottom: -10%;
}

.left-minus-10p {
  left: -10%;
}

.top-minus-20p {
  top: -20%;
}

.right-minus-20p {
  right: -20%;
}

.bottom-minus-20p {
  bottom: -20%;
}

.left-minus-20p {
  left: -20%;
}

.top-minus-30p {
  top: -30%;
}

.right-minus-30p {
  right: -30%;
}

.bottom-minus-30p {
  bottom: -30%;
}

.left-minus-30p {
  left: -30%;
}

.top-minus-40p {
  top: -40%;
}

.right-minus-40p {
  right: -40%;
}

.bottom-minus-40p {
  bottom: -40%;
}

.left-minus-40p {
  left: -40%;
}

.top-minus-50p {
  top: -50%;
}

.right-minus-50p {
  right: -50%;
}

.bottom-minus-50p {
  bottom: -50%;
}

.left-minus-50p {
  left: -50%;
}

.top-minus-60p {
  top: -60%;
}

.right-minus-60p {
  right: -60%;
}

.bottom-minus-60p {
  bottom: -60%;
}

.left-minus-60p {
  left: -60%;
}

.top-minus-70p {
  top: -70%;
}

.right-minus-70p {
  right: -70%;
}

.bottom-minus-70p {
  bottom: -70%;
}

.left-minus-70p {
  left: -70%;
}

.top-minus-80p {
  top: -80%;
}

.right-minus-80p {
  right: -80%;
}

.bottom-minus-80p {
  bottom: -80%;
}

.left-minus-80p {
  left: -80%;
}

.top-minus-90p {
  top: -90%;
}

.right-minus-90p {
  right: -90%;
}

.bottom-minus-90p {
  bottom: -90%;
}

.left-minus-90p {
  left: -90%;
}

.top-minus-100p {
  top: -100%;
}

.right-minus-100p {
  right: -100%;
}

.bottom-minus-100p {
  bottom: -100%;
}

.left-minus-100p {
  left: -100%;
}

.top-minus-25p {
  top: -25%;
}

.right-minus-25p {
  right: -25%;
}

.bottom-minus-25p {
  bottom: -25%;
}

.left-minus-25p {
  left: -25%;
}

.top-minus-50p {
  top: -50%;
}

.right-minus-50p {
  right: -50%;
}

.bottom-minus-50p {
  bottom: -50%;
}

.left-minus-50p {
  left: -50%;
}

.centered-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.full-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media (min-width: 640px) {
  .sm-static {
    position: static;
  }
  .sm-relative {
    position: relative;
  }
  .sm-absolute {
    position: absolute;
  }
  .sm-fixed {
    position: fixed;
  }
  .sm-sticky {
    position: sticky;
  }
}
@media (min-width: 768px) {
  .md-static {
    position: static;
  }
  .md-relative {
    position: relative;
  }
  .md-absolute {
    position: absolute;
  }
  .md-fixed {
    position: fixed;
  }
  .md-sticky {
    position: sticky;
  }
}
@media (min-width: 1024px) {
  .lg-static {
    position: static;
  }
  .lg-relative {
    position: relative;
  }
  .lg-absolute {
    position: absolute;
  }
  .lg-fixed {
    position: fixed;
  }
  .lg-sticky {
    position: sticky;
  }
}
@media (min-width: 1280px) {
  .xl-static {
    position: static;
  }
  .xl-relative {
    position: relative;
  }
  .xl-absolute {
    position: absolute;
  }
  .xl-fixed {
    position: fixed;
  }
  .xl-sticky {
    position: sticky;
  }
}
/*
============================================
Overflow Utilities
============================================
Control how content overflows element boundaries

Classes:
- .overflow-{value}
- .overflow-x-{value}
- .overflow-y-{value}

Values: hide, auto, scroll, visible

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.overflow-hide {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-visible {
  overflow: visible;
}

.overflow-clip {
  overflow: clip;
}

.overflow-x-hide {
  overflow-x: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-clip {
  overflow-x: clip;
}

.overflow-y-hide {
  overflow-y: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-clip {
  overflow-y: clip;
}

.text-overflow-ellipsis {
  text-overflow: ellipsis;
}

.text-overflow-clip {
  text-overflow: clip;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overscroll-auto {
  overscroll-behavior: auto;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.overscroll-none {
  overscroll-behavior: none;
}

.overscroll-x-auto {
  overscroll-behavior-x: auto;
}

.overscroll-x-contain {
  overscroll-behavior-x: contain;
}

.overscroll-x-none {
  overscroll-behavior-x: none;
}

.overscroll-y-auto {
  overscroll-behavior-y: auto;
}

.overscroll-y-contain {
  overscroll-behavior-y: contain;
}

.overscroll-y-none {
  overscroll-behavior-y: none;
}

@media (min-width: 640px) {
  .sm-overflow-hide {
    overflow: hidden;
  }
  .sm-overflow-auto {
    overflow: auto;
  }
  .sm-overflow-scroll {
    overflow: scroll;
  }
  .sm-overflow-visible {
    overflow: visible;
  }
  .sm-overflow-x-hide {
    overflow-x: hidden;
  }
  .sm-overflow-x-auto {
    overflow-x: auto;
  }
  .sm-overflow-x-scroll {
    overflow-x: scroll;
  }
  .sm-overflow-y-hide {
    overflow-y: hidden;
  }
  .sm-overflow-y-auto {
    overflow-y: auto;
  }
  .sm-overflow-y-scroll {
    overflow-y: scroll;
  }
}
@media (min-width: 768px) {
  .md-overflow-hide {
    overflow: hidden;
  }
  .md-overflow-auto {
    overflow: auto;
  }
  .md-overflow-scroll {
    overflow: scroll;
  }
  .md-overflow-visible {
    overflow: visible;
  }
  .md-overflow-x-hide {
    overflow-x: hidden;
  }
  .md-overflow-x-auto {
    overflow-x: auto;
  }
  .md-overflow-x-scroll {
    overflow-x: scroll;
  }
  .md-overflow-y-hide {
    overflow-y: hidden;
  }
  .md-overflow-y-auto {
    overflow-y: auto;
  }
  .md-overflow-y-scroll {
    overflow-y: scroll;
  }
}
@media (min-width: 1024px) {
  .lg-overflow-hide {
    overflow: hidden;
  }
  .lg-overflow-auto {
    overflow: auto;
  }
  .lg-overflow-scroll {
    overflow: scroll;
  }
  .lg-overflow-visible {
    overflow: visible;
  }
  .lg-overflow-x-hide {
    overflow-x: hidden;
  }
  .lg-overflow-x-auto {
    overflow-x: auto;
  }
  .lg-overflow-x-scroll {
    overflow-x: scroll;
  }
  .lg-overflow-y-hide {
    overflow-y: hidden;
  }
  .lg-overflow-y-auto {
    overflow-y: auto;
  }
  .lg-overflow-y-scroll {
    overflow-y: scroll;
  }
}
@media (min-width: 1280px) {
  .xl-overflow-hide {
    overflow: hidden;
  }
  .xl-overflow-auto {
    overflow: auto;
  }
  .xl-overflow-scroll {
    overflow: scroll;
  }
  .xl-overflow-visible {
    overflow: visible;
  }
  .xl-overflow-x-hide {
    overflow-x: hidden;
  }
  .xl-overflow-x-auto {
    overflow-x: auto;
  }
  .xl-overflow-x-scroll {
    overflow-x: scroll;
  }
  .xl-overflow-y-hide {
    overflow-y: hidden;
  }
  .xl-overflow-y-auto {
    overflow-y: auto;
  }
  .xl-overflow-y-scroll {
    overflow-y: scroll;
  }
}
/*
============================================
Border Utilities
============================================
Control element borders (width and style)

Note: Border colors are in _color-utilities.scss

Border Width Classes:
- .border-{0-5} - All sides
- .border-t-{0-5} - Top
- .border-r-{0-5} - Right
- .border-b-{0-5} - Bottom
- .border-l-{0-5} - Left
- .border-x-{0-5} - Horizontal (left + right)
- .border-y-{0-5} - Vertical (top + bottom)

Border Style Classes:
- .border-solid, .border-dashed, .border-dotted, .border-double, .border-none

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.border-0 {
  border-width: 0;
}

.border-1 {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-3 {
  border-width: 3px;
}

.border-4 {
  border-width: 4px;
}

.border-5 {
  border-width: 5px;
}

.border-t-0 {
  border-top-width: 0;
}

.border-t-1 {
  border-top-width: 1px;
}

.border-t-2 {
  border-top-width: 2px;
}

.border-t-3 {
  border-top-width: 3px;
}

.border-t-4 {
  border-top-width: 4px;
}

.border-t-5 {
  border-top-width: 5px;
}

.border-r-0 {
  border-right-width: 0;
}

.border-r-1 {
  border-right-width: 1px;
}

.border-r-2 {
  border-right-width: 2px;
}

.border-r-3 {
  border-right-width: 3px;
}

.border-r-4 {
  border-right-width: 4px;
}

.border-r-5 {
  border-right-width: 5px;
}

.border-b-0 {
  border-bottom-width: 0;
}

.border-b-1 {
  border-bottom-width: 1px;
}

.border-b-2 {
  border-bottom-width: 2px;
}

.border-b-3 {
  border-bottom-width: 3px;
}

.border-b-4 {
  border-bottom-width: 4px;
}

.border-b-5 {
  border-bottom-width: 5px;
}

.border-l-0 {
  border-left-width: 0;
}

.border-l-1 {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-l-3 {
  border-left-width: 3px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-l-5 {
  border-left-width: 5px;
}

.border-x-0 {
  border-left-width: 0;
  border-right-width: 0;
}

.border-x-1 {
  border-left-width: 1px;
  border-right-width: 1px;
}

.border-x-2 {
  border-left-width: 2px;
  border-right-width: 2px;
}

.border-x-3 {
  border-left-width: 3px;
  border-right-width: 3px;
}

.border-x-4 {
  border-left-width: 4px;
  border-right-width: 4px;
}

.border-x-5 {
  border-left-width: 5px;
  border-right-width: 5px;
}

.border-y-0 {
  border-top-width: 0;
  border-bottom-width: 0;
}

.border-y-1 {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-y-2 {
  border-top-width: 2px;
  border-bottom-width: 2px;
}

.border-y-3 {
  border-top-width: 3px;
  border-bottom-width: 3px;
}

.border-y-4 {
  border-top-width: 4px;
  border-bottom-width: 4px;
}

.border-y-5 {
  border-top-width: 5px;
  border-bottom-width: 5px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-double {
  border-style: double;
}

.border-groove {
  border-style: groove;
}

.border-ridge {
  border-style: ridge;
}

.border-inset {
  border-style: inset;
}

.border-outset {
  border-style: outset;
}

.border-none {
  border-style: none;
}

.border-transparent {
  border-color: transparent;
}

.outline-0 {
  outline-width: 0;
}

.outline-1 {
  outline-width: 1px;
}

.outline-2 {
  outline-width: 2px;
}

.outline-3 {
  outline-width: 3px;
}

.outline-4 {
  outline-width: 4px;
}

.outline-5 {
  outline-width: 5px;
}

.outline-solid {
  outline-style: solid;
}

.outline-dashed {
  outline-style: dashed;
}

.outline-dotted {
  outline-style: dotted;
}

.outline-double {
  outline-style: double;
}

.outline-groove {
  outline-style: groove;
}

.outline-ridge {
  outline-style: ridge;
}

.outline-none {
  outline: none;
}

.outline-offset-0 {
  outline-offset: 0;
}

.outline-offset-1 {
  outline-offset: 1px;
}

.outline-offset-2 {
  outline-offset: 2px;
}

.outline-offset-4 {
  outline-offset: 4px;
}

.outline-offset-8 {
  outline-offset: 8px;
}

.outline-inset {
  outline-offset: -2px;
}

.outline-inset-1 {
  outline-offset: -1px;
}

.outline-inset-2 {
  outline-offset: -2px;
}

.outline-inset-3 {
  outline-offset: -3px;
}

.outline-inset-4 {
  outline-offset: -4px;
}

.outline-inset-5 {
  outline-offset: -5px;
}

.outline-transparent {
  outline-color: transparent;
}

.ring-0 {
  box-shadow: 0 0 0 0 currentColor;
}

.ring-1 {
  box-shadow: 0 0 0 1px currentColor;
}

.ring-2 {
  box-shadow: 0 0 0 2px currentColor;
}

.ring-3 {
  box-shadow: 0 0 0 3px currentColor;
}

.ring-4 {
  box-shadow: 0 0 0 4px currentColor;
}

.divide-x-0 > * + * {
  border-left-width: 0;
}

.divide-x-1 > * + * {
  border-left-width: 1px;
}

.divide-x-2 > * + * {
  border-left-width: 2px;
}

.divide-y-0 > * + * {
  border-top-width: 0;
}

.divide-y-1 > * + * {
  border-top-width: 1px;
}

.divide-y-2 > * + * {
  border-top-width: 2px;
}

.divide-solid > * + * {
  border-style: solid;
}

.divide-dashed > * + * {
  border-style: dashed;
}

.divide-dotted > * + * {
  border-style: dotted;
}

@media (min-width: 640px) {
  .sm-border-0 {
    border-width: 0;
  }
  .sm-border-1 {
    border-width: 1px;
  }
  .sm-border-2 {
    border-width: 2px;
  }
  .sm-border-solid {
    border-style: solid;
  }
  .sm-border-dashed {
    border-style: dashed;
  }
  .sm-border-none {
    border-style: none;
  }
  .sm-outline-0 {
    outline-width: 0;
  }
  .sm-outline-1 {
    outline-width: 1px;
  }
  .sm-outline-2 {
    outline-width: 2px;
  }
  .sm-outline-solid {
    outline-style: solid;
  }
  .sm-outline-dashed {
    outline-style: dashed;
  }
  .sm-outline-none {
    outline: none;
  }
  .sm-outline-inset {
    outline-offset: -2px;
  }
}
@media (min-width: 768px) {
  .md-border-0 {
    border-width: 0;
  }
  .md-border-1 {
    border-width: 1px;
  }
  .md-border-2 {
    border-width: 2px;
  }
  .md-border-solid {
    border-style: solid;
  }
  .md-border-dashed {
    border-style: dashed;
  }
  .md-border-none {
    border-style: none;
  }
  .md-outline-0 {
    outline-width: 0;
  }
  .md-outline-1 {
    outline-width: 1px;
  }
  .md-outline-2 {
    outline-width: 2px;
  }
  .md-outline-solid {
    outline-style: solid;
  }
  .md-outline-dashed {
    outline-style: dashed;
  }
  .md-outline-none {
    outline: none;
  }
  .md-outline-inset {
    outline-offset: -2px;
  }
}
@media (min-width: 1024px) {
  .lg-border-0 {
    border-width: 0;
  }
  .lg-border-1 {
    border-width: 1px;
  }
  .lg-border-2 {
    border-width: 2px;
  }
  .lg-border-solid {
    border-style: solid;
  }
  .lg-border-dashed {
    border-style: dashed;
  }
  .lg-border-none {
    border-style: none;
  }
  .lg-outline-0 {
    outline-width: 0;
  }
  .lg-outline-1 {
    outline-width: 1px;
  }
  .lg-outline-2 {
    outline-width: 2px;
  }
  .lg-outline-solid {
    outline-style: solid;
  }
  .lg-outline-dashed {
    outline-style: dashed;
  }
  .lg-outline-none {
    outline: none;
  }
  .lg-outline-inset {
    outline-offset: -2px;
  }
}
@media (min-width: 1280px) {
  .xl-border-0 {
    border-width: 0;
  }
  .xl-border-1 {
    border-width: 1px;
  }
  .xl-border-2 {
    border-width: 2px;
  }
  .xl-border-solid {
    border-style: solid;
  }
  .xl-border-dashed {
    border-style: dashed;
  }
  .xl-border-none {
    border-style: none;
  }
  .xl-outline-0 {
    outline-width: 0;
  }
  .xl-outline-1 {
    outline-width: 1px;
  }
  .xl-outline-2 {
    outline-width: 2px;
  }
  .xl-outline-solid {
    outline-style: solid;
  }
  .xl-outline-dashed {
    outline-style: dashed;
  }
  .xl-outline-none {
    outline: none;
  }
  .xl-outline-inset {
    outline-offset: -2px;
  }
}
/*
============================================
Shadow Utilities
============================================
Box shadow utilities for depth and elevation

Shadow Levels:
- .shadow-none - No shadow
- .shadow-1 - Subtle shadow (cards, buttons)
- .shadow-2 - Medium shadow (dropdowns, modals)
- .shadow-3 - Strong shadow (prominent elements)

Hover Shadows:
- .hover:shadow-1
- .hover:shadow-2
- .hover:shadow-3
- .hover:shadow-none

Usage:
<div class="shadow-2 hover:shadow-3">
    Elevated card
</div>

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.shadow-none {
  box-shadow: none;
}

.shadow-1 {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-2 {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-3 {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-none:hover {
  box-shadow: none;
}

.hover\:shadow-1:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.hover\:shadow-2:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hover\:shadow-3:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

@media (min-width: 640px) {
  .sm-shadow-none {
    box-shadow: none;
  }
  .sm-shadow-1 {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .sm-shadow-2 {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .sm-shadow-3 {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}
@media (min-width: 768px) {
  .md-shadow-none {
    box-shadow: none;
  }
  .md-shadow-1 {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .md-shadow-2 {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .md-shadow-3 {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}
@media (min-width: 1024px) {
  .lg-shadow-none {
    box-shadow: none;
  }
  .lg-shadow-1 {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .lg-shadow-2 {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .lg-shadow-3 {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}
@media (min-width: 1280px) {
  .xl-shadow-none {
    box-shadow: none;
  }
  .xl-shadow-1 {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  }
  .xl-shadow-2 {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
  .xl-shadow-3 {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}
/*
============================================
Divider & Separator Utilities
============================================
Soft and refined divider components for
separating content sections

Classes:
- .divider-soft - Soft refined divider (minimal)
- .divider-subtle - Very light divider
- .border-bottom-soft - Light bottom border (gray-200)
- .border-bottom-refined - Darker bottom border (gray-300)

Usage:
<div class="divider-soft">
    Separates content
</div>

<div class="faq-item border-bottom-soft">
    Content with soft bottom border
</div>

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.divider-soft {
  display: block;
  height: 1px;
  min-height: 1px;
  background-color: var(--gray-400);
  opacity: 0.3;
  border: none;
  overflow: hidden;
}

.divider-subtle {
  display: block;
  height: 1px;
  min-height: 1px;
  background-color: var(--gray-400);
  opacity: 0.3;
  border: none;
  overflow: hidden;
}

.form .divider-soft,
.form .divider-subtle,
.card-contact .divider-soft,
.card-contact .divider-subtle,
.footer-column .divider-soft,
.footer-column .divider-subtle {
  display: none;
}

.border-bottom-soft {
  border-bottom: 1px solid var(--gray-200);
}

.border-bottom-refined {
  border-bottom: 1px solid var(--gray-300);
}

@media (min-width: 640px) {
  .sm-divider-soft {
    border-top: 1px solid var(--gray-200);
  }
  .sm-divider-subtle {
    border-top: 1px solid var(--gray-200);
  }
  .sm-border-bottom-soft {
    border-bottom: 1px solid var(--gray-200);
  }
  .sm-border-bottom-refined {
    border-bottom: 1px solid var(--gray-300);
  }
}
@media (min-width: 768px) {
  .md-divider-soft {
    border-top: 1px solid var(--gray-200);
  }
  .md-divider-subtle {
    border-top: 1px solid var(--gray-200);
  }
  .md-border-bottom-soft {
    border-bottom: 1px solid var(--gray-200);
  }
  .md-border-bottom-refined {
    border-bottom: 1px solid var(--gray-300);
  }
}
@media (min-width: 1024px) {
  .lg-divider-soft {
    border-top: 1px solid var(--gray-200);
  }
  .lg-divider-subtle {
    border-top: 1px solid var(--gray-200);
  }
  .lg-border-bottom-soft {
    border-bottom: 1px solid var(--gray-200);
  }
  .lg-border-bottom-refined {
    border-bottom: 1px solid var(--gray-300);
  }
}
@media (min-width: 1280px) {
  .xl-divider-soft {
    border-top: 1px solid var(--gray-200);
  }
  .xl-divider-subtle {
    border-top: 1px solid var(--gray-200);
  }
  .xl-border-bottom-soft {
    border-bottom: 1px solid var(--gray-200);
  }
  .xl-border-bottom-refined {
    border-bottom: 1px solid var(--gray-300);
  }
}
/*
============================================
Border Radius Utilities
============================================
Control element corner rounding

Border Radius Classes:
- .radius-{0-12} - All corners
- .radius-100p - Full circle/pill shape
- .radius-tl-{0-12} - Top-left corner
- .radius-tr-{0-12} - Top-right corner
- .radius-bl-{0-12} - Bottom-left corner
- .radius-br-{0-12} - Bottom-right corner
- .radius-t-{0-12} - Top (both top corners)
- .radius-r-{0-12} - Right (both right corners)
- .radius-b-{0-12} - Bottom (both bottom corners)
- .radius-l-{0-12} - Left (both left corners)

Values: 0-12 (in 2px increments), 100p (50%)

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.radius-0 {
  border-radius: 0;
}

.radius-1 {
  border-radius: 2px;
}

.radius-2 {
  border-radius: 4px;
}

.radius-3 {
  border-radius: 6px;
}

.radius-4 {
  border-radius: 8px;
}

.radius-5 {
  border-radius: 10px;
}

.radius-6 {
  border-radius: 12px;
}

.radius-7 {
  border-radius: 14px;
}

.radius-8 {
  border-radius: 16px;
}

.radius-9 {
  border-radius: 18px;
}

.radius-10 {
  border-radius: 20px;
}

.radius-11 {
  border-radius: 22px;
}

.radius-12 {
  border-radius: 24px;
}

.radius-full {
  border-radius: 9999px;
}

.radius-25p {
  border-radius: 25%;
}

.radius-50p {
  border-radius: 50%;
}

.radius-tl-0 {
  border-top-left-radius: 0;
}

.radius-tl-1 {
  border-top-left-radius: 2px;
}

.radius-tl-2 {
  border-top-left-radius: 4px;
}

.radius-tl-3 {
  border-top-left-radius: 6px;
}

.radius-tl-4 {
  border-top-left-radius: 8px;
}

.radius-tl-5 {
  border-top-left-radius: 10px;
}

.radius-tl-6 {
  border-top-left-radius: 12px;
}

.radius-tl-7 {
  border-top-left-radius: 14px;
}

.radius-tl-8 {
  border-top-left-radius: 16px;
}

.radius-tl-9 {
  border-top-left-radius: 18px;
}

.radius-tl-10 {
  border-top-left-radius: 20px;
}

.radius-tl-11 {
  border-top-left-radius: 22px;
}

.radius-tl-12 {
  border-top-left-radius: 24px;
}

.radius-tr-0 {
  border-top-right-radius: 0;
}

.radius-tr-1 {
  border-top-right-radius: 2px;
}

.radius-tr-2 {
  border-top-right-radius: 4px;
}

.radius-tr-3 {
  border-top-right-radius: 6px;
}

.radius-tr-4 {
  border-top-right-radius: 8px;
}

.radius-tr-5 {
  border-top-right-radius: 10px;
}

.radius-tr-6 {
  border-top-right-radius: 12px;
}

.radius-tr-7 {
  border-top-right-radius: 14px;
}

.radius-tr-8 {
  border-top-right-radius: 16px;
}

.radius-tr-9 {
  border-top-right-radius: 18px;
}

.radius-tr-10 {
  border-top-right-radius: 20px;
}

.radius-tr-11 {
  border-top-right-radius: 22px;
}

.radius-tr-12 {
  border-top-right-radius: 24px;
}

.radius-br-0 {
  border-bottom-right-radius: 0;
}

.radius-br-1 {
  border-bottom-right-radius: 2px;
}

.radius-br-2 {
  border-bottom-right-radius: 4px;
}

.radius-br-3 {
  border-bottom-right-radius: 6px;
}

.radius-br-4 {
  border-bottom-right-radius: 8px;
}

.radius-br-5 {
  border-bottom-right-radius: 10px;
}

.radius-br-6 {
  border-bottom-right-radius: 12px;
}

.radius-br-7 {
  border-bottom-right-radius: 14px;
}

.radius-br-8 {
  border-bottom-right-radius: 16px;
}

.radius-br-9 {
  border-bottom-right-radius: 18px;
}

.radius-br-10 {
  border-bottom-right-radius: 20px;
}

.radius-br-11 {
  border-bottom-right-radius: 22px;
}

.radius-br-12 {
  border-bottom-right-radius: 24px;
}

.radius-bl-0 {
  border-bottom-left-radius: 0;
}

.radius-bl-1 {
  border-bottom-left-radius: 2px;
}

.radius-bl-2 {
  border-bottom-left-radius: 4px;
}

.radius-bl-3 {
  border-bottom-left-radius: 6px;
}

.radius-bl-4 {
  border-bottom-left-radius: 8px;
}

.radius-bl-5 {
  border-bottom-left-radius: 10px;
}

.radius-bl-6 {
  border-bottom-left-radius: 12px;
}

.radius-bl-7 {
  border-bottom-left-radius: 14px;
}

.radius-bl-8 {
  border-bottom-left-radius: 16px;
}

.radius-bl-9 {
  border-bottom-left-radius: 18px;
}

.radius-bl-10 {
  border-bottom-left-radius: 20px;
}

.radius-bl-11 {
  border-bottom-left-radius: 22px;
}

.radius-bl-12 {
  border-bottom-left-radius: 24px;
}

.radius-t-0 {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.radius-t-1 {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.radius-t-2 {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.radius-t-3 {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.radius-t-4 {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.radius-t-5 {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.radius-t-6 {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.radius-t-7 {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.radius-t-8 {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.radius-t-9 {
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.radius-t-10 {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.radius-t-11 {
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

.radius-t-12 {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.radius-r-0 {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.radius-r-1 {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.radius-r-2 {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.radius-r-3 {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.radius-r-4 {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.radius-r-5 {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.radius-r-6 {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.radius-r-7 {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.radius-r-8 {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.radius-r-9 {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}

.radius-r-10 {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.radius-r-11 {
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
}

.radius-r-12 {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}

.radius-b-0 {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.radius-b-1 {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.radius-b-2 {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.radius-b-3 {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.radius-b-4 {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.radius-b-5 {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.radius-b-6 {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.radius-b-7 {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

.radius-b-8 {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.radius-b-9 {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.radius-b-10 {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.radius-b-11 {
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
}

.radius-b-12 {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

.radius-l-0 {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.radius-l-1 {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.radius-l-2 {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.radius-l-3 {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.radius-l-4 {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.radius-l-5 {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.radius-l-6 {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.radius-l-7 {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.radius-l-8 {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.radius-l-9 {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.radius-l-10 {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.radius-l-11 {
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
}

.radius-l-12 {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

@media (min-width: 640px) {
  .sm-radius-0 {
    border-radius: 0;
  }
  .sm-radius-2 {
    border-radius: 4px;
  }
  .sm-radius-4 {
    border-radius: 8px;
  }
  .sm-radius-6 {
    border-radius: 12px;
  }
  .sm-radius-full {
    border-radius: 9999px;
  }
  .sm-radius-100p {
    border-radius: 50%;
  }
}
@media (min-width: 768px) {
  .md-radius-0 {
    border-radius: 0;
  }
  .md-radius-2 {
    border-radius: 4px;
  }
  .md-radius-4 {
    border-radius: 8px;
  }
  .md-radius-6 {
    border-radius: 12px;
  }
  .md-radius-full {
    border-radius: 9999px;
  }
  .md-radius-100p {
    border-radius: 50%;
  }
}
@media (min-width: 1024px) {
  .lg-radius-0 {
    border-radius: 0;
  }
  .lg-radius-2 {
    border-radius: 4px;
  }
  .lg-radius-4 {
    border-radius: 8px;
  }
  .lg-radius-6 {
    border-radius: 12px;
  }
  .lg-radius-full {
    border-radius: 9999px;
  }
  .lg-radius-100p {
    border-radius: 50%;
  }
}
@media (min-width: 1280px) {
  .xl-radius-0 {
    border-radius: 0;
  }
  .xl-radius-2 {
    border-radius: 4px;
  }
  .xl-radius-4 {
    border-radius: 8px;
  }
  .xl-radius-6 {
    border-radius: 12px;
  }
  .xl-radius-full {
    border-radius: 9999px;
  }
  .xl-radius-100p {
    border-radius: 50%;
  }
}
/*
============================================
Opacity Utilities
============================================
Control element transparency

Classes:
- .opacity-{0-10} - Opacity from 0.0 to 1.0

Values: 0-10 (0.0 = transparent, 10 = fully opaque)
- opacity-0  = 0.0 (completely transparent)
- opacity-1  = 0.1
- opacity-2  = 0.2
- ...
- opacity-10 = 1.0 (completely opaque)

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 0.1;
}

.opacity-2 {
  opacity: 0.2;
}

.opacity-3 {
  opacity: 0.3;
}

.opacity-4 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-6 {
  opacity: 0.6;
}

.opacity-7 {
  opacity: 0.7;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

.opacity-10 {
  opacity: 1;
}

.opacity-full {
  opacity: 1;
}

.opacity-05 {
  opacity: 0.05;
}

.opacity-15 {
  opacity: 0.15;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-35 {
  opacity: 0.35;
}

.opacity-45 {
  opacity: 0.45;
}

.opacity-55 {
  opacity: 0.55;
}

.opacity-65 {
  opacity: 0.65;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-85 {
  opacity: 0.85;
}

.opacity-95 {
  opacity: 0.95;
}

.hover\:opacity-0:hover {
  opacity: 0;
}

.hover\:opacity-1:hover {
  opacity: 0.1;
}

.hover\:opacity-2:hover {
  opacity: 0.2;
}

.hover\:opacity-3:hover {
  opacity: 0.3;
}

.hover\:opacity-4:hover {
  opacity: 0.4;
}

.hover\:opacity-5:hover {
  opacity: 0.5;
}

.hover\:opacity-6:hover {
  opacity: 0.6;
}

.hover\:opacity-7:hover {
  opacity: 0.7;
}

.hover\:opacity-8:hover {
  opacity: 0.8;
}

.hover\:opacity-9:hover {
  opacity: 0.9;
}

.hover\:opacity-10:hover {
  opacity: 1;
}

.focus\:opacity-0:focus {
  opacity: 0;
}

.focus\:opacity-5:focus {
  opacity: 0.5;
}

.focus\:opacity-10:focus {
  opacity: 1;
}

.disabled\:opacity-5:disabled,
.disabled\:opacity-5[disabled] {
  opacity: 0.5;
}

.disabled\:opacity-4:disabled,
.disabled\:opacity-4[disabled] {
  opacity: 0.4;
}

@media (min-width: 640px) {
  .sm-opacity-0 {
    opacity: 0;
  }
  .sm-opacity-1 {
    opacity: 0.1;
  }
  .sm-opacity-2 {
    opacity: 0.2;
  }
  .sm-opacity-3 {
    opacity: 0.3;
  }
  .sm-opacity-4 {
    opacity: 0.4;
  }
  .sm-opacity-5 {
    opacity: 0.5;
  }
  .sm-opacity-6 {
    opacity: 0.6;
  }
  .sm-opacity-7 {
    opacity: 0.7;
  }
  .sm-opacity-8 {
    opacity: 0.8;
  }
  .sm-opacity-9 {
    opacity: 0.9;
  }
  .sm-opacity-10 {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  .md-opacity-0 {
    opacity: 0;
  }
  .md-opacity-1 {
    opacity: 0.1;
  }
  .md-opacity-2 {
    opacity: 0.2;
  }
  .md-opacity-3 {
    opacity: 0.3;
  }
  .md-opacity-4 {
    opacity: 0.4;
  }
  .md-opacity-5 {
    opacity: 0.5;
  }
  .md-opacity-6 {
    opacity: 0.6;
  }
  .md-opacity-7 {
    opacity: 0.7;
  }
  .md-opacity-8 {
    opacity: 0.8;
  }
  .md-opacity-9 {
    opacity: 0.9;
  }
  .md-opacity-10 {
    opacity: 1;
  }
}
@media (min-width: 1024px) {
  .lg-opacity-0 {
    opacity: 0;
  }
  .lg-opacity-1 {
    opacity: 0.1;
  }
  .lg-opacity-2 {
    opacity: 0.2;
  }
  .lg-opacity-3 {
    opacity: 0.3;
  }
  .lg-opacity-4 {
    opacity: 0.4;
  }
  .lg-opacity-5 {
    opacity: 0.5;
  }
  .lg-opacity-6 {
    opacity: 0.6;
  }
  .lg-opacity-7 {
    opacity: 0.7;
  }
  .lg-opacity-8 {
    opacity: 0.8;
  }
  .lg-opacity-9 {
    opacity: 0.9;
  }
  .lg-opacity-10 {
    opacity: 1;
  }
}
@media (min-width: 1280px) {
  .xl-opacity-0 {
    opacity: 0;
  }
  .xl-opacity-1 {
    opacity: 0.1;
  }
  .xl-opacity-2 {
    opacity: 0.2;
  }
  .xl-opacity-3 {
    opacity: 0.3;
  }
  .xl-opacity-4 {
    opacity: 0.4;
  }
  .xl-opacity-5 {
    opacity: 0.5;
  }
  .xl-opacity-6 {
    opacity: 0.6;
  }
  .xl-opacity-7 {
    opacity: 0.7;
  }
  .xl-opacity-8 {
    opacity: 0.8;
  }
  .xl-opacity-9 {
    opacity: 0.9;
  }
  .xl-opacity-10 {
    opacity: 1;
  }
}
/*
============================================
Z-Index Utilities (Semantic Layer System)
============================================
Control element stacking order with meaningful layer names

Semantic Layers (from lowest to highest):
- z-background    (-1)    Background elements
- z-base          (0)     Default layer
- z-content       (10)    Main content
- z-sticky        (100)   Sticky elements
- z-header        (200)   Site header
- z-footer        (200)   Site footer
- z-floating      (300)   Floating UI elements
- z-dropdown      (400)   Dropdown menus
- z-popover       (500)   Popovers
- z-submenu       (600)   Submenu/nested menus
- z-overlay       (700)   Overlay backgrounds
- z-drawer        (800)   Side drawers
- z-sidebar       (800)   Sidebars
- z-modal-backdrop (900)  Modal backdrop
- z-modal         (1000)  Modal dialogs
- z-dialog        (1000)  Dialog boxes
- z-notification  (1100)  Notifications
- z-toast         (1200)  Toast messages
- z-alert         (1300)  Alert messages
- z-tooltip       (1400)  Tooltips
- z-hint          (1500)  Hints/guides
- z-preloader     (2000)  Loading screens
- z-spinner       (2000)  Loading spinners
- z-debug         (9999)  Debug overlays

Benefits of semantic z-index:
- Self-documenting code
- Prevents z-index conflicts
- Easier maintenance
- Clear stacking context

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.z-background {
  z-index: -1;
}

.z-base {
  z-index: 0;
}

.z-0 {
  z-index: 0;
}

.z-auto {
  z-index: auto;
}

.z-content {
  z-index: 10;
}

.z-sticky {
  z-index: 100;
}

.z-header {
  z-index: 200;
}

.z-footer {
  z-index: 200;
}

.z-floating {
  z-index: 300;
}

.z-dropdown {
  z-index: 400;
}

.z-popover {
  z-index: 500;
}

.z-submenu {
  z-index: 600;
}

.z-overlay {
  z-index: 700;
}

.z-drawer {
  z-index: 800;
}

.z-sidebar {
  z-index: 800;
}

.z-modal-backdrop {
  z-index: 900;
}

.z-modal {
  z-index: 1000;
}

.z-dialog {
  z-index: 1000;
}

.z-notification {
  z-index: 1100;
}

.z-toast {
  z-index: 1200;
}

.z-alert {
  z-index: 1300;
}

.z-tooltip {
  z-index: 1400;
}

.z-hint {
  z-index: 1500;
}

.z-preloader {
  z-index: 2000;
}

.z-spinner {
  z-index: 2000;
}

.z-debug {
  z-index: 9999;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-100 {
  z-index: 100;
}

.z-200 {
  z-index: 200;
}

.z-300 {
  z-index: 300;
}

.z-400 {
  z-index: 400;
}

.z-500 {
  z-index: 500;
}

.z-1000 {
  z-index: 1000;
}

.z-9999 {
  z-index: 9999;
}

.z-minus-1 {
  z-index: -1;
}

.z-minus-10 {
  z-index: -10;
}

.overlay-with-modal.overlay {
  z-index: 700;
}
.overlay-with-modal.modal {
  z-index: 1000;
}

.header-with-dropdown.header {
  z-index: 200;
}
.header-with-dropdown.dropdown {
  z-index: 400;
}

@media (min-width: 640px) {
  .sm-z-0 {
    z-index: 0;
  }
  .sm-z-auto {
    z-index: auto;
  }
  .sm-z-content {
    z-index: 10;
  }
  .sm-z-sticky {
    z-index: 100;
  }
  .sm-z-header {
    z-index: 200;
  }
  .sm-z-modal {
    z-index: 1000;
  }
}
@media (min-width: 768px) {
  .md-z-0 {
    z-index: 0;
  }
  .md-z-auto {
    z-index: auto;
  }
  .md-z-content {
    z-index: 10;
  }
  .md-z-sticky {
    z-index: 100;
  }
  .md-z-header {
    z-index: 200;
  }
  .md-z-modal {
    z-index: 1000;
  }
}
@media (min-width: 1024px) {
  .lg-z-0 {
    z-index: 0;
  }
  .lg-z-auto {
    z-index: auto;
  }
  .lg-z-content {
    z-index: 10;
  }
  .lg-z-sticky {
    z-index: 100;
  }
  .lg-z-header {
    z-index: 200;
  }
  .lg-z-modal {
    z-index: 1000;
  }
}
@media (min-width: 1280px) {
  .xl-z-0 {
    z-index: 0;
  }
  .xl-z-auto {
    z-index: auto;
  }
  .xl-z-content {
    z-index: 10;
  }
  .xl-z-sticky {
    z-index: 100;
  }
  .xl-z-header {
    z-index: 200;
  }
  .xl-z-modal {
    z-index: 1000;
  }
}
/*
USAGE EXAMPLES:

1. Header:
   <header class="z-header">...</header>

2. Dropdown Menu:
   <nav class="z-header">
       <ul class="z-dropdown">...</ul>
   </nav>

3. Modal:
   <div class="z-overlay">...</div>
   <div class="z-modal">...</div>

4. Toast Notification:
   <div class="z-toast">...</div>

5. Debug Overlay:
   <div class="z-debug">...</div>

LAYER HIERARCHY (Low to High):
Background (-1) → Base (0) → Content (10) → Sticky (100) →
Header/Footer (200) → Floating (300) → Dropdown (400) →
Popover (500) → Submenu (600) → Overlay (700) → Drawer/Sidebar (800) →
Modal Backdrop (900) → Modal/Dialog (1000) → Notification (1100) →
Toast (1200) → Alert (1300) → Tooltip (1400) → Hint (1500) →
Preloader/Spinner (2000) → Debug (9999)
*/
/*
============================================
Transform Utilities
============================================
CSS Transform utilities for positioning and effects

Classes:
- .translate-center-x - Center horizontally with transform
- .translate-center-y - Center vertically with transform
- .translate-center - Center both axes
- .no-pointer-events - Disable pointer events
- .pointer-events-auto - Enable pointer events

Usage:
<div class="translate-center-y">
    Vertically centered element
</div>

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.translate-center-x {
  transform: translateX(-50%);
}

.translate-center-y {
  transform: translateY(-50%);
}

.translate-center {
  transform: translate(-50%, -50%);
}

.no-pointer-events {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

@media (min-width: 640px) {
  .sm-translate-center-x {
    transform: translateX(-50%);
  }
  .sm-translate-center-y {
    transform: translateY(-50%);
  }
  .sm-translate-center {
    transform: translate(-50%, -50%);
  }
  .sm-no-pointer-events {
    pointer-events: none;
  }
  .sm-pointer-events-auto {
    pointer-events: auto;
  }
}
@media (min-width: 768px) {
  .md-translate-center-x {
    transform: translateX(-50%);
  }
  .md-translate-center-y {
    transform: translateY(-50%);
  }
  .md-translate-center {
    transform: translate(-50%, -50%);
  }
  .md-no-pointer-events {
    pointer-events: none;
  }
  .md-pointer-events-auto {
    pointer-events: auto;
  }
}
@media (min-width: 1024px) {
  .lg-translate-center-x {
    transform: translateX(-50%);
  }
  .lg-translate-center-y {
    transform: translateY(-50%);
  }
  .lg-translate-center {
    transform: translate(-50%, -50%);
  }
  .lg-no-pointer-events {
    pointer-events: none;
  }
  .lg-pointer-events-auto {
    pointer-events: auto;
  }
}
@media (min-width: 1280px) {
  .xl-translate-center-x {
    transform: translateX(-50%);
  }
  .xl-translate-center-y {
    transform: translateY(-50%);
  }
  .xl-translate-center {
    transform: translate(-50%, -50%);
  }
  .xl-no-pointer-events {
    pointer-events: none;
  }
  .xl-pointer-events-auto {
    pointer-events: auto;
  }
}
.transition-all {
  transition: all 0.3s ease;
}

.transition-colors {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.transition-opacity {
  transition: opacity 0.3s ease;
}

.transition-transform {
  transition: transform 0.3s ease;
}

.transition-shadow {
  transition: box-shadow 0.3s ease;
}

.transition-fast {
  transition-duration: 0.15s;
}

.transition-normal {
  transition-duration: 0.3s;
}

.transition-slow {
  transition-duration: 0.5s;
}

.hover\:lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover\:lift:hover {
  transform: translateY(-4px);
}

.hover\:scale {
  transition: transform 0.3s ease;
}

.hover\:scale:hover {
  transform: scale(1.02);
}

.hover\:fade {
  transition: opacity 0.3s ease;
}

.hover\:fade:hover {
  opacity: 0.8;
}

.hover\:glow {
  transition: box-shadow 0.3s ease;
}

.hover\:glow:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hover\:shadow-1:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hover\:shadow-2:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.hover\:shadow-3:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-4:hover {
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
  .md-hover\:lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .md-hover\:lift:hover {
    transform: translateY(-4px);
  }
  .md-hover\:scale {
    transition: transform 0.3s ease;
  }
  .md-hover\:scale:hover {
    transform: scale(1.02);
  }
}
@media (min-width: 1024px) {
  .lg-hover\:lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .lg-hover\:lift:hover {
    transform: translateY(-4px);
  }
  .lg-hover\:scale {
    transition: transform 0.3s ease;
  }
  .lg-hover\:scale:hover {
    transform: scale(1.02);
  }
}
/*
============================================
Helper Utilities
============================================
Additional utility classes for common patterns

Classes:
- .flex-center - Flexbox center (all axes)
- .cursor-* - Cursor utilities
- .select-* - User select utilities
- .underline, .no-underline, .line-through - Text decoration

Usage:
<div class="flex-center">
    Centered content
</div>

Responsive variants: sm-, md-, lg-, xl-
============================================
*/
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 640px) {
  .sm-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 768px) {
  .md-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 1024px) {
  .lg-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 1280px) {
  .xl-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-default {
  cursor: default;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-wait {
  cursor: wait;
}

.select-none {
  user-select: none;
}

.select-text {
  user-select: text;
}

.select-all {
  user-select: all;
}

.select-auto {
  user-select: auto;
}

.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.line-through {
  text-decoration: line-through;
}

.overline {
  text-decoration: overline;
}

.hover\:underline:hover {
  text-decoration: underline;
}

.hover\:no-underline:hover {
  text-decoration: none;
}

.hover\:line-through:hover {
  text-decoration: line-through;
}

@media (min-width: 640px) {
  .sm-cursor-pointer {
    cursor: pointer;
  }
  .sm-cursor-not-allowed {
    cursor: not-allowed;
  }
  .sm-cursor-default {
    cursor: default;
  }
  .sm-select-none {
    user-select: none;
  }
  .sm-select-text {
    user-select: text;
  }
  .sm-underline {
    text-decoration: underline;
  }
  .sm-no-underline {
    text-decoration: none;
  }
}
@media (min-width: 768px) {
  .md-cursor-pointer {
    cursor: pointer;
  }
  .md-cursor-not-allowed {
    cursor: not-allowed;
  }
  .md-cursor-default {
    cursor: default;
  }
  .md-select-none {
    user-select: none;
  }
  .md-select-text {
    user-select: text;
  }
  .md-underline {
    text-decoration: underline;
  }
  .md-no-underline {
    text-decoration: none;
  }
}
@media (min-width: 1024px) {
  .lg-cursor-pointer {
    cursor: pointer;
  }
  .lg-cursor-not-allowed {
    cursor: not-allowed;
  }
  .lg-cursor-default {
    cursor: default;
  }
  .lg-select-none {
    user-select: none;
  }
  .lg-select-text {
    user-select: text;
  }
  .lg-underline {
    text-decoration: underline;
  }
  .lg-no-underline {
    text-decoration: none;
  }
}
@media (min-width: 1280px) {
  .xl-cursor-pointer {
    cursor: pointer;
  }
  .xl-cursor-not-allowed {
    cursor: not-allowed;
  }
  .xl-cursor-default {
    cursor: default;
  }
  .xl-select-none {
    user-select: none;
  }
  .xl-select-text {
    user-select: text;
  }
  .xl-underline {
    text-decoration: underline;
  }
  .xl-no-underline {
    text-decoration: none;
  }
}
.hide {
  display: none !important;
}

.show {
  display: block !important;
}

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