/**
 * Mystic Elementor Widgets CSS - Optimized
 * 100% pixel-perfect recreation of Figma Design System Components
 *
  * Components:
 * - Design Button (6 variants: Primary, Secondary, White, Outline, Link, FAB)
 * - Section Badge (5 types: Postal, Federal, HBR, Healthcare Providers, Section)
 * - Button Group (Horizontal/Vertical layouts with configurable buttons)
 * - Heading Component (3 variants: Default, Hero Centered, Hero Left-aligned)
 * - Label Component (4 color variants: Pink, Green, Blue, Purple)
 * - Accordion Component (expandable content with animations)
 * - Icon Component (10 icons with size and color variants)
 * - Rating Badge (3 visual variants)
 * - User Profile (with avatar and rating integration)
 * - Info/No-BG/Horizontal Cards (flexible card layouts)
 * - Tabs Component (interactive tabs with animations)
 * - FAQ Components (accordion and section layouts)
 * - Radio Button (form input component)
 *
 * Typography: Public Sans font family
 * Colors: Extracted directly from Figma design specifications
 * Layout: Responsive design with mobile-first approach
 */

/* ========================================
   CSS VARIABLES & BASE STYLES
   ======================================== */

:root {
  /* Brand Colors */
  --brand-yellow: var(--e-global-color-7ae1c95, var(--mystic-brand-yellow));
  --brand-blue: var(--e-global-color-819a535, var(--mystic-brand-blue));
  --brand-brown: var(--e-global-color-fb5cce0, var(--mystic-brand-brown));
  --brand-yellow-alt: var(--e-global-color-alt, #fefbec);

  /* UI Colors */
  --blue-600: var(--e-global-color-51343bb, #0f7eba);
  --blue-900-main: #13496a;
  --yellow-300-main: #f7cd46;
  --Black-50: rgba(20, 20, 20, 0.05);
  --neutral-300: var(--e-global-color-2abcfaa, #b9b9c0);

  /* Additional Button Colors */
  --yellow-400: #f5bc2a;
  --yellow-950: #431b05;
  --blue-950: #0c2d45;
  --blue-800: #0f557d;
  --blue-100: #e2f2fc;
  --white-1000: #fff;

  /* Section Badge Colors */
  --postal-bg: var(--e-global-color-1fc7cad, #dfcfff);
  --postal-text: var(--e-global-color-12761f1, #5c2dd0);
  --federal-bg: var(--e-global-color-62a8ae5, #ffcfff);
  --federal-text: var(--e-global-color-f9636f0, #d02dd0);
  --hbr-bg: var(--e-global-color-387cdec, #cfe7ff);
  --hbr-text: var(--e-global-color-46c8fe9, var(--mystic-info));
  --healthcare-bg: var(--e-global-color-b2607db, #ffcfcf);
  --healthcare-text: var(--e-global-color-06cbffb, var(--mystic-error));
  --section-bg: var(--e-global-color-d9fa151, var(--mystic-success));
  --section-text: var(--e-global-color-07f66aa, #d3ffe4);

  /* Typography */
  --font-public-sans: var(--e-global-typography-2d573f7-font-family, "Public Sans"), -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Common Spacing */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 120px;
  --border-radius-full: 100px;

  /* Transitions */
  --transition-fast: all 0.2s ease-in-out;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-accordion: all 0.5s ease-in-out;

  /* Blues */
  --blue-50: #f1f9fe;
  /* --blue-100: #e2f2fc; */
  --blue-200: #bee4f9;
  --blue-300: #85cff4;
  --blue-400: #4586eb;
  --blue-500: #1d90da;
  /* --blue-600: #0f7eba; */
  --blue-700: #0e6496;
  /* --blue-800: #0f557d; */
  --blue-900: var(--blue-900-main);
  /* --blue-950: #0c2d45; */
  --lightblue: var(--blue-600);

  /* Yellows */
  --yellow-50: #fefbec;
  --yellow-100: #fdf2c8;
  --yellow-200: #fae48d;
  --yellow-300: #f7cd46;
  --yellow-400: #f5bc2a;
  --yellow-500: #ef9811;
  --yellow-600: #d4760b;
  --yellow-700: #b0540d;
  --yellow-800: #8f4111;
  --yellow-900: #753612;
  --yellow-950: #431b05;

  /* Blacks */
  --black-50: #1414141a;
  --black-100: #1414142b;
  --black-200: #14141442;
  --black-300: #1414146b;
  --black-400: #1414147d;
  --black-500: #14141494;
  --black-600: #141414a6;
  --black-700: #141414b2;
  --black-800: #141414bf;
  --black-900: #141414cc;
  --black-950: #141414e3;
  --black-999: #14141499;
  --black-1000: #141414;

  /* Whites */
  --white-50: #ffffff12;
  --white-100: #ffffff17;
  --white-200: #ffffff24;
  --white-300: #ffffff54;
  --white-400: #ffffff63;
  --white-500: #ffffff78;
  --white-600: #ffffffb9;
  --white-700: #ffffffc9;
  --white-800: #ffffffe0;
  --white-900: #FFFFFFF10;
  --white-1000: #FFFFFFF;

  /* Greens */
  --green-01: #12556c;
  --green-02: #d3ffe4;

  /* Reds */
  --red-01: #d02323;
  --red-02: #f9e6e6;

  /* Pinks */
  --pink-01: #d02dd0;
  --pink-02: #fce9fa;

  /* Purples */
  --purple-01: #5c2dd0;
  --purple-02: #dfcfff;

  /* iOS Blues */
  --ios-blue-01: #007aff;
  --ios-blue-02: #dbedff;

  /* Illustration Accents */
  --illustration-accent-01-shape: #f7cd46;
  --illustration-accent-01-graphic: #ffeca5;
  --illustration-accent-01-background: #fdf2c8;
  --illustration-accent-02-shape: #374fda;
  --illustration-accent-02-graphic: #87c5f9;
  --illustration-accent-02-background: #96cdfb;
  --illustration-accent-02-text: #243dc7;
  --illustration-accent-01-text: #b0540d;
}

/* Elementor Kit Variable Overrides - Multiple Kit IDs for compatibility */
.elementor-kit-10,
.elementor-kit-11,
.elementor-kit-12,
.elementor-kit-13,
.elementor-kit-14,
.elementor-kit-15,
.elementor-kit-16,
.elementor-kit-17,
.elementor-kit-18,
.elementor-kit-19,
.elementor-kit-20,
.elementor-kit-88,
[class*="elementor-kit-"] {
  /* Brand Colors */
  --brand-yellow: var(--e-global-color-7ae1c95, var(--mystic-brand-yellow));
  --brand-blue: var(--e-global-color-819a535, var(--mystic-brand-blue));
  --brand-brown: var(--e-global-color-fb5cce0, var(--mystic-brand-brown));
  --brand-yellow-alt: var(--e-global-color-alt, #fefbec);

  /* UI Colors */
  --blue-600: var(--e-global-color-51343bb, #0f7eba);
  --blue-900-main: #13496a;
  --yellow-300-main: #f7cd46;
  --Black-50: rgba(20, 20, 20, 0.05);

  /* Section Badge Colors */
  --postal-bg: var(--e-global-color-1fc7cad, #dfcfff);
  --postal-text: var(--e-global-color-12761f1, #5c2dd0);
  --federal-bg: var(--e-global-color-62a8ae5, #ffcfff);
  --federal-text: var(--e-global-color-f9636f0, #d02dd0);
  --hbr-bg: var(--e-global-color-387cdec, #cfe7ff);
  --hbr-text: var(--e-global-color-46c8fe9, var(--mystic-info));
  --healthcare-bg: var(--e-global-color-b2607db, #ffcfcf);
  --healthcare-text: var(--e-global-color-06cbffb, var(--mystic-error));
  --section-bg: var(--e-global-color-d9fa151, var(--mystic-success));
  --section-text: var(--e-global-color-07f66aa, #d3ffe4);

  /* Typography */
  --font-public-sans: var(--e-global-typography-2d573f7-font-family, "Public Sans"), -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Fallback for when Elementor global variables are not available */
body:not([class*="elementor-kit-"]) {
  /* Brand Colors */
  --brand-yellow: var(--mystic-brand-yellow);
  --brand-blue: var(--mystic-brand-blue);
  --brand-brown: var(--mystic-brand-brown);
  --brand-yellow-alt: #fefbec;

  /* UI Colors */
  --blue-600: #0f7eba;
  --blue-900-main: var(--blue-900);
  --yellow-300-main: #f7cd46;
  --Black-50: rgba(20, 20, 20, 0.05);

  /* Section Badge Colors */
  --postal-bg: #dfcfff;
  --postal-text: #5c2dd0;
  --federal-bg: #ffcfff;
  --federal-text: #d02dd0;
  --hbr-bg: #cfe7ff;
  --hbr-text: var(--mystic-info);
  --healthcare-bg: #ffcfcf;
  --healthcare-text: var(--mystic-error);
  --section-bg: var(--mystic-success);
  --section-text: #d3ffe4;

  /* Typography */
  --font-public-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Base flex utilities */
body {
  width: 100%;
  overflow-x: hidden;
}
.mystic-flex {
  display: flex;
}

.mystic-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* ========================================
                   DESIGN BUTTON COMPONENT STYLES
                   ======================================== */

.mystic-design-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 150%;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  text-decoration: none;
  gap: 8px;
  outline: none;
  min-width: fit-content;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Button text overflow handling */
.mystic-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

/* Ensure proper spacing when buttons have icons and text is truncated */
.mystic-design-button--with-icons .mystic-button-text {
  margin: 0 4px;
}

/* Maintain button integrity when text is very short */
.mystic-design-button .mystic-button-text:empty {
  display: none;
}

.mystic-design-button:focus {
  outline: none;
}

.mystic-design-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.mystic-design-button:disabled:hover {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* Button variants */
.mystic-design-button--primary {
  background: #f7cd46;
  color: #431b05;
  border: none;
  border-radius: 8px;
  padding: 15px 20px;
  height: 48px;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  gap: 8px;
  transition: all 0.2s ease;
  min-width: 0;
  width: auto;
}

.mystic-design-button--primary:hover {
  background: #f5bc2a;
  color: #431b05;
}

.mystic-design-button--primary:focus-visible {
  outline: 2px solid var(--blue-900) !important;
  outline-offset: -2px !important;
  /* outline: none; */
}

.mystic-design-button--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f7cd46;
  color: #431b05;
}

.mystic-design-button--secondary {
  background: var(--blue-900);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 15px 20px;
  height: 48px;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  gap: 8px;
  transition: all 0.2s ease;
  min-width: 0;
  width: auto;
}

.mystic-design-button--secondary:hover {
  background: var(--blue-950);
  color: white;
}

.mystic-design-button--secondary:focus {
  box-shadow: 0 0 0 4px var(--blue-900);
  outline: none;
}

.mystic-design-button--secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--blue-900);
  color: white;
}

.mystic-design-button--white {
  background: white !important;
  color: var(--blue-900) !important;
  border: none !important;
  border-radius: 8px;
  padding: 15px 20px;
  height: 48px;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  gap: 8px;
  transition: all 0.2s ease !important;
  min-width: 0;
  width: auto;
}

.mystic-design-button--white svg path {
  stroke: currentColor !important;
}

.mystic-design-button--white:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  transition: all 0.2s ease !important;
}

.mystic-design-button--white:hover svg path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--white:hover .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--white:focus {
  box-shadow: 0 0 0 4px var(--blue-900);
  outline: none;
}

.mystic-design-button--white:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: white !important;
  color: var(--blue-900) !important;
}

/* Additional hover rule with higher specificity */
.mystic-button-wrapper .mystic-design-button--white:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
}

/* Ensure arrow icons maintain blue color on hover with maximum specificity */
.mystic-button-wrapper .mystic-design-button--white:hover svg path,
.mystic-button-wrapper .mystic-design-button--white:hover .mystic-arrow-icon path,
.mystic-button-wrapper .mystic-design-button--white:hover .mystic-download-icon path {
  stroke: var(--blue-900) !important;
}

/* Override any default button styles that might interfere */
.mystic-design-button--white,
.mystic-design-button--white:link,
.mystic-design-button--white:visited,
.mystic-design-button--white:active {
  background: white !important;
  color: var(--blue-900) !important;
  border: none !important;
  text-decoration: none !important;
}

/* Override any default button hover styles */
.mystic-design-button--white:hover,
.mystic-design-button--white:hover:link,
.mystic-design-button--white:hover:visited,
.mystic-design-button--white:hover:active {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  text-decoration: none !important;
}

/* Force override any theme or plugin styles that might interfere */
a.mystic-design-button--white:hover,
button.mystic-design-button--white:hover,
.elementor-button.mystic-design-button--white:hover,
.wp-block-button__link.mystic-design-button--white:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  text-decoration: none !important;
}

/* Ensure icons inherit the correct color on hover */
a.mystic-design-button--white:hover svg path,
button.mystic-design-button--white:hover svg path,
a.mystic-design-button--white:hover .mystic-arrow-icon path,
button.mystic-design-button--white:hover .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

/* Legacy support for old white-bg class name */
.mystic-design-button--white-bg {
  background: white !important;
  color: var(--blue-900) !important;
  border: none !important;
  border-radius: 8px;
  padding: 15px 20px;
  height: 48px;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  gap: 8px;
  transition: all 0.2s ease !important;
  min-width: 0;
  width: auto;
}

.mystic-design-button--white-bg svg path {
  stroke: currentColor !important;
}

.mystic-design-button--white-bg:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  transition: all 0.2s ease !important;
}

.mystic-design-button--white-bg:hover svg path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--white-bg:hover .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--white-bg:focus {
  box-shadow: 0 0 0 4px var(--blue-900);
  outline: none;
}

.mystic-design-button--white-bg:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: white !important;
  color: var(--blue-900) !important;
}

/* Additional hover rule with higher specificity for legacy class */
.mystic-button-wrapper .mystic-design-button--white-bg:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
}

/* Ensure arrow icons maintain blue color on hover with maximum specificity for legacy class */
.mystic-button-wrapper .mystic-design-button--white-bg:hover svg path,
.mystic-button-wrapper .mystic-design-button--white-bg:hover .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

/* Override any default button styles that might interfere for legacy class */
.mystic-design-button--white-bg,
.mystic-design-button--white-bg:link,
.mystic-design-button--white-bg:visited,
.mystic-design-button--white-bg:active {
  background: white !important;
  color: var(--blue-900) !important;
  border: none !important;
  text-decoration: none !important;
}

/* Override any default button hover styles for legacy class */
.mystic-design-button--white-bg:hover,
.mystic-design-button--white-bg:hover:link,
.mystic-design-button--white-bg:hover:visited,
.mystic-design-button--white-bg:hover:active {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  text-decoration: none !important;
}

/* Force override any theme or plugin styles that might interfere for legacy class */
a.mystic-design-button--white-bg:hover,
button.mystic-design-button--white-bg:hover,
.elementor-button.mystic-design-button--white-bg:hover,
.wp-block-button__link.mystic-design-button--white-bg:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  text-decoration: none !important;
}

/* Ensure icons inherit the correct color on hover for legacy class */
a.mystic-design-button--white-bg:hover svg path,
button.mystic-design-button--white-bg:hover svg path,
a.mystic-design-button--white-bg:hover .mystic-arrow-icon path,
button.mystic-design-button--white-bg:hover .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--outline {
  background: transparent !important;
  color: var(--blue-900) !important;
  border: 1px solid var(--blue-900) !important;
  border-radius: 8px;
  padding: 15px 20px;
  height: 48px;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  gap: 10px;
  transition: all 0.2s ease !important;
  min-width: 0;
  width: auto;
}

.mystic-design-button--outline svg path {
  stroke: currentColor !important;
}

.mystic-design-button--outline:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  border-color: var(--blue-900) !important;
  transition: all 0.2s ease !important;
}

.mystic-design-button--outline:hover svg path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--outline:hover .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--outline:focus {
  /* box-shadow: 0 0 0 4px var(--blue-900); */
  /* outline: none; */
}

.mystic-design-button--outline:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent !important;
  color: var(--blue-900) !important;
  border-color: var(--blue-900) !important;
}

/* Additional hover rule with higher specificity */
.mystic-button-wrapper .mystic-design-button--outline:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
}

/* Ensure arrow icons maintain blue color on hover with maximum specificity */
.mystic-button-wrapper .mystic-design-button--outline:hover svg path,
.mystic-button-wrapper .mystic-design-button--outline:hover .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}
.mystic-data-table--healthcare
  thead
  .mystic-data-table__row:last-child
  .mystic-data-table__cell
  .mystic-table-main-content {
  font-size: 12px !important;
}

.custom-table
  .mystic-data-table--healthcare
  thead
  .mystic-data-table__row:last-child
  .mystic-data-table__cell
  .mystic-table-main-content {
  font-size: 16px !important;
}

@media (max-width: 1024px) {
  .custom-table
    .mystic-data-table--healthcare
    thead
    .mystic-data-table__row:last-child
    .mystic-data-table__cell
    .mystic-table-main-content {
    font-size: 12px !important;
  }
}
/* Override any default button styles that might interfere */
.mystic-design-button--outline,
.mystic-design-button--outline:link,
.mystic-design-button--outline:visited,
.mystic-design-button--outline:active {
  background: transparent !important;
  color: var(--blue-900) !important;
  border: 1px solid var(--blue-900) !important;
  text-decoration: none !important;
}

/* Override any default button hover styles */
.mystic-design-button--outline:hover,
.mystic-design-button--outline:hover:link,
.mystic-design-button--outline:hover:visited,
.mystic-design-button--outline:hover:active {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  border-color: var(--blue-900) !important;
  text-decoration: none !important;
}

/* Force override any theme or plugin styles that might interfere */
a.mystic-design-button--outline:hover,
button.mystic-design-button--outline:hover,
.elementor-button.mystic-design-button--outline:hover,
.wp-block-button__link.mystic-design-button--outline:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  border-color: var(--blue-900) !important;
  text-decoration: none !important;
}

/* Ensure icons inherit the correct color on hover */
a.mystic-design-button--outline:hover svg path,
button.mystic-design-button--outline:hover svg path,
a.mystic-design-button--outline:hover .mystic-arrow-icon path,
button.mystic-design-button--outline:hover .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--link {
  background: transparent;
  color: var(--blue-900);
  padding: 0 !important;
  border: none;
  height: auto;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  gap: 10px;
  transition: all 0.2s ease;
  border-radius: 8px;
  min-width: 0;
  width: auto;
}

.mystic-design-button--link:hover {
  color: #0f557d;
}

.mystic-design-button--link:focus {
  box-shadow: 0 0 0 4px var(--blue-900);
  outline: none;
}

.mystic-design-button--link:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--blue-900);
}

.mystic-design-button--fab {
  background: white !important;
  color: var(--black-1000) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  padding: 18px !important;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 56px !important;
  max-width: 56px !important;
  overflow: hidden;
}

/* FAB buttons should not show text - they are icon-only */
.mystic-design-button--fab .mystic-button-text {
  display: none !important;
}

.mystic-design-button--fab:hover {
  background: #f5f5f5 !important;
  color: var(--black-1000) !important;
}

.mystic-design-button--fab:focus {
  box-shadow: 0 0 0 4px var(--blue-900) !important;
  outline: none;
}

.mystic-design-button--fab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: white !important;
  color: var(--black-1000) !important;
}

/* FAB with blue background variant */
.mystic-design-button--fab.mystic-design-button--fab-blue {
  background: var(--blue-900) !important;
  color: white !important;
  border-radius: 50% !important;
}

.mystic-design-button--fab.mystic-design-button--fab-blue:hover {
  background: var(--blue-950) !important;
  color: white !important;
}

.mystic-design-button--fab.mystic-design-button--fab-blue:disabled {
  background: var(--blue-900) !important;
  color: white !important;
  opacity: 0.4;
}

/* FAB with border variant */
.mystic-design-button--fab.mystic-design-button--fab-border {
  background: white !important;
  color: var(--black-1000) !important;
  border: 2px solid var(--blue-900) !important;
  border-radius: 50% !important;
}

.mystic-design-button--fab.mystic-design-button--fab-border:hover {
  background: #f5f5f5 !important;
  color: var(--black-1000) !important;
  border-color: var(--blue-900) !important;
}

.mystic-design-button--fab.mystic-design-button--fab-border:disabled {
  background: white !important;
  color: var(--black-1000) !important;
  border-color: var(--blue-900) !important;
  opacity: 0.4;
}

/* Ensure all FAB variants are perfectly circular with highest specificity */
.mystic-design-button--fab,
.mystic-design-button--fab.mystic-design-button--fab-blue,
.mystic-design-button--fab.mystic-design-button--fab-border,
a.mystic-design-button--fab,
button.mystic-design-button--fab,
.elementor-button.mystic-design-button--fab,
.mystic-button-wrapper .mystic-design-button--fab {
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Button text and icons */
.mystic-button-text {
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button size variants */
.mystic-design-button--sm {
  padding: 10px 16px;
  height: 40px;
  font-size: 14px;
  gap: 6px;
}

.mystic-design-button--sm .mystic-button-text {
  font-size: 14px;
}

.mystic-design-button--md {
  padding: 15px 20px;
  height: 48px;
  font-size: 16px;
  gap: 8px;
}

.mystic-design-button--md .mystic-button-text {
  font-size: 16px;
}

.mystic-design-button--lg {
  padding: 18px 24px;
  height: 56px;
  font-size: 18px;
  gap: 10px;
}

.mystic-design-button--lg .mystic-button-text {
  font-size: 18px;
}

.mystic-arrow-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.mystic-arrow-icon--sm {
  width: 16px;
  height: 16px;
}
.mystic-arrow-icon--md {
  width: 20px;
  height: 20px;
}
.mystic-arrow-icon--lg {
  width: 24px;
  height: 24px;
}

/* Solid arrow styling */
.mystic-arrow-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ========================================
                   SECTION BADGE COMPONENT STYLES
                   ======================================== */

.mystic-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 4px 16px;
  border-radius: var(--border-radius-md);
}

.mystic-badge-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mystic-badge-icon,
.mystic-badge-icon-element {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-public-sans);
  font-weight: 700;
  font-size: 16px;
  color: inherit;
  flex-shrink: 0;
  line-height: 1;
}

.mystic-badge-icon svg {
  width: 100%;
  height: 100%;
}

.mystic-badge-label {
  color: var(--Black-900, rgba(20, 20, 20, 0.9));
  font-family: "Public Sans";
  font-size: var(--Paragraph-p1, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
}

/* Badge variants */
.mystic-section-badge--postal {
  background-color: var(--postal-bg);
}

.mystic-section-badge--federal {
  background-color: var(--federal-bg);
}

.mystic-section-badge--hbr {
  background-color: var(--hbr-bg);
}

.mystic-section-badge--healthcare-providers {
  background-color: var(--healthcare-bg);
}

.mystic-section-badge--section {
  background-color: var(--section-bg);
}

/* ========================================
                   BUTTON GROUP COMPONENT STYLES
                   ======================================== */

.mystic-button-group {
  display: flex;
  gap: 16px;
}

.mystic-button-group--horizontal,
.mystic-button-group--vertical {
  flex-direction: column;
}

@media (min-width: 1025px) {
  .mystic-button-group--horizontal {
    flex-direction: row;
  }
}

/* Ensure horizontal layout stacks on tablet and mobile */
@media (max-width: 1024px) {
  .mystic-button-group--horizontal {
    flex-direction: column;
  }

  /* Override any inline styles that might be set by Elementor */
  .mystic-button-group--horizontal[style*="flex-direction"] {
    flex-direction: column;
  }
}

/* Additional breakpoint for larger tablets */
@media (max-width: 1200px) {
  .mystic-button-group--horizontal {
    flex-direction: column;
  }
}

.mystic-button-group[style*="text-align: center"] {
  justify-content: center;
}
.mystic-button-group[style*="text-align: right"] {
  justify-content: flex-end;
}
.mystic-button-group[style*="text-align: justify"] .mystic-design-button {
  flex: 1;
}

/* ========================================
                   HEADING COMPONENT STYLES
                   ======================================== */

.mystic-heading-component {
  width: 100%;
}

/* Wrapper Styles */
.mystic-heading-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.mystic-heading-wrapper--default {
  max-width: 824px;
  gap: 24px;
}

.mystic-heading-wrapper--hero-centered {
  max-width: 814px;
  gap: 24px;
}

.mystic-heading-wrapper--hero-leftaligned {
  align-items: stretch;
  gap: 32px;
  max-width: none;
  width: 100%;
}

/* Content Layout */
.mystic-heading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.mystic-heading-layout {
  display: flex;
  padding: 32px 24px 0px 16px;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.mystic-heading-columns {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 16px;
}

.mystic-heading-left-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  flex: 0 1 auto;
  max-width: 431px;
}

.mystic-heading-right-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 1;
}

/* Title and Subtitle */
.mystic-heading-title {
  width: 100%;
}

.mystic-heading-subtitle {
  width: 100%;
}

/* Buttons */
.mystic-heading-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mystic-heading-buttons--full {
  width: 100%;
}

.mystic-heading-buttons--full .mystic-design-button {
  width: 100%;
}

.mystic-heading-buttons--fit {
  width: fit-content;
}

.mystic-heading-buttons--fit .mystic-design-button {
  width: fit-content;
}

.mystic-heading-buttons--auto {
  width: auto;
}

.mystic-heading-buttons--auto .mystic-design-button {
  width: auto;
}

/* CTA Section */
.mystic-heading-cta-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* Headline Styles - Allow Elementor typography controls to work */
.mystic-headline {
  margin: 0;
  padding: 0;
  /* Allow Elementor typography controls to work properly */
  font-family: var(--font-public-sans);
  color: var(--black-1000);
}

/* Simple Heading Component - Allow Elementor controls to work properly */
.mystic-simple-heading {
  /* Container styles - allow Elementor controls to override */
}

.mystic-simple-heading .mystic-headline {
  /* Reset to allow Elementor typography controls to work */
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Simple heading component enhanced styling */
.mystic-simple-heading .mystic-heading-text-link {
  color: #0f557d;
  text-decoration: underline;
}

.mystic-simple-heading .mystic-heading-text-link:hover {
  color: #0a3d5a;
}

.mystic-simple-heading .mystic-heading-highlight {
  color: #b0540d;
  font-weight: inherit;
}

.mystic-simple-heading .mystic-heading-display-link {
  color: #0f557d;
  text-decoration: underline;
  cursor: default;
}

/* Simple heading bullet point styles */
.mystic-simple-heading .mystic-heading-main-content {
  margin-bottom: 8px;
}

.mystic-simple-heading .mystic-heading-main-content:last-child {
  margin-bottom: 0;
}

.mystic-simple-heading .mystic-heading-bullet-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
  list-style: none;
}

.mystic-simple-heading .mystic-heading-bullet-item {
  position: relative;
  margin-bottom: 4px;
}

.mystic-simple-heading .mystic-heading-bullet-item:before {
  content: "•";
  position: absolute;
  left: -15px;
  color: inherit;
}

/* Heading Component - Apply Simple Heading Component Technique */
.mystic-heading-component .mystic-headline {
  /* Allow Elementor typography controls to work properly */
  margin: 0;
  padding: 0;
  font-family: var(--font-public-sans);
  color: var(--black-1000);
}

.mystic-heading-component .mystic-headline .mystic-heading-highlight {
  /* Highlighted text inherits from headline by default */
  color: var(--blue-600);
}

/* Default typography values - minimal defaults that Elementor controls can override */
.mystic-heading-component--default .mystic-headline {
  text-align: center;
}

.mystic-heading-component--hero-centered .mystic-headline {
  text-align: center;
}

.mystic-heading-component--hero-leftaligned .mystic-headline {
  text-align: left;
}

/* Highlight spans - allow Elementor controls to work */
.mystic-headline span,
.mystic-headline .mystic-heading-highlight {
  /* Color and typography will be controlled by Elementor */
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* Ensure highlight text inherits from headline by default */
.mystic-headline .mystic-heading-highlight {
  /* Inherit typography from parent headline unless overridden */
  display: inline;
  color: var(--blue-600);
}

/* Subtitle Styles - Allow Elementor typography controls to work */
.mystic-subtitle {
  margin: 0;
  padding: 0;
  /* Allow Elementor typography controls to work properly */
  font-family: var(--font-public-sans);
  color: #b0540d;
}

/* Description Styles - Allow Elementor typography controls to work */
.mystic-description {
  margin: 0;
  padding: 0;
  width: 100%;
  /* Allow Elementor typography controls to work properly */
  font-family: var(--font-public-sans);
  color: rgba(20, 20, 20, 0.7);
}

.mystic-description-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mystic-description-sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.mystic-description-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mystic-section-title {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--mystic-text-dark);
  width: 100%;
  text-align: center;
  margin: 0 !important;
}

.mystic-section-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Checklist Styles */
.mystic-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.mystic-checklist-item--centered {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mystic-checklist-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: fit-content;
}

/* CTA Label */
.mystic-cta-label {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--mystic-text-dark);
  width: 100%;
  margin: 0 !important;
}

/* Left-aligned variant adjustments */
.mystic-heading-component--hero-leftaligned .mystic-description-items,
.mystic-heading-component--hero-leftaligned .mystic-description-sections,
.mystic-heading-component--hero-leftaligned .mystic-description-section,
.mystic-heading-component--hero-leftaligned .mystic-section-items {
  align-items: flex-start;
}

.mystic-heading-component--hero-leftaligned .mystic-section-title {
  text-align: left;
}

.mystic-heading-component--hero-leftaligned .mystic-description {
  text-align: left;
}

/* Legacy support for old styles */
.mystic-heading-component p,
.mystic-heading-component div[style*="font-family"] {
  font-family: var(--font-public-sans);
  margin: 0 !important;
  padding: 0 !important;
}

.mystic-heading-highlight {
  color: var(--mystic-info);
  background: none;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}

.mystic-heading-highlight-secondary {
  color: var(--blue-600);
  background: none;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}

/* ========================================
                   LABEL COMPONENT STYLES
                   ======================================== */

.mystic-label-component {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--border-radius-full);
  font-family: var(--font-public-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.mystic-label-component--01 {
  background-color: var(--federal-bg);
  color: var(--federal-text);
}
.mystic-label-component--02 {
  background-color: var(--section-bg);
  color: var(--section-text);
}
.mystic-label-component--03 {
  background-color: var(--hbr-bg);
  color: var(--hbr-text);
}
.mystic-label-component--04 {
  background-color: var(--postal-bg);
  color: var(--postal-text);
}

/* ========================================
                   ACCORDION COMPONENT STYLES
                   ======================================== */

.mystic-accordion-component {
  width: 100%;
  max-width: 696px;
  margin: 0 auto;
}

.mystic-accordion-item {
  overflow: hidden;
}

.mystic-accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  padding: 16px 0;
  border-radius: 4px;
  position: relative;
}

.mystic-accordion-header:hover {
  background-color: #f5f5f5;
  background-color: #fff;
}
/* .mystic-accordion-header:focus {
  outline: 3px solid var(--blue-900) !important;
  outline-offset: 2px !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3) !important;
  border-radius: 4px !important;
} */

/* .mystic-accordion-header:focus-visible {
  outline: 3px solid var(--blue-900) !important;
  outline-offset: 2px !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3) !important;
  border-radius: 4px !important;
} */

/* Ensure focus is always visible */
/* .mystic-accordion-header:focus,
.mystic-accordion-header:focus-visible {
  outline: 3px solid var(--blue-900) !important;
  outline-offset: 2px !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3) !important;
  border-radius: 4px !important;
} */

/* More specific selector to ensure focus states work */
button.mystic-accordion-header:focus-visible {
  outline: 2px solid var(--blue-900) !important;
  outline-offset: -2px !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3) !important;
  border-radius: 4px !important;
  overflow: hidden;
  padding: 16px 4px;
}

/* Override any global focus removal */
/* .mystic-accordion-header:focus,
.mystic-accordion-header:focus-visible,
button.mystic-accordion-header:focus,
button.mystic-accordion-header:focus-visible {
  outline: 2px solid var(--blue-900) !important;
  outline-offset: -2px !important;
  background-color: #f8f9fa !important;
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.3) !important;
  border-radius: 4px !important;
} */

/* Force focus visibility with maximum specificity */
/* .mystic-accordion-component .mystic-accordion-header:focus,
.mystic-accordion-component .mystic-accordion-header:focus-visible,
.mystic-accordion-component button.mystic-accordion-header:focus,
.mystic-accordion-component button.mystic-accordion-header:focus-visible {
  outline: 2px solid var(--blue-900) !important;
  outline-offset: -2px !important;
  background-color: #fff !important;
  box-shadow: none !important;
  border-radius: 4px !important;
} */

/* Override any global button focus removal */
/* .mystic-accordion-header[tabindex]:focus,
.mystic-accordion-header[tabindex]:focus-visible {
  outline: 2px solid var(--blue-900) !important;
  outline-offset: -2px !important;
  background-color: #fff !important;
  box-shadow: none !important;
  border-radius: 4px !important;
} */

.mystic-accordion-component button.mystic-accordion-header:focus-visible {
  /* outline-offset: -1px !important; */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-accordion-header:focus,
  .mystic-accordion-header:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: -2px !important;
    background-color: #fff !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mystic-accordion-header,
  .mystic-accordion-content,
  .mystic-accordion-arrow svg {
    transition: none;
  }
}

.mystic-accordion-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mystic-accordion-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mystic-accordion-dot-new {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #d4760b;
}

.mystic-accordion-title {
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -0.18px;
  color: var(--mystic-brand-blue);
}

.mystic-accordion-arrow {
  flex-shrink: 0;
}

.mystic-accordion-arrow svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
}

.mystic-accordion-header[aria-expanded="true"] .mystic-accordion-arrow svg {
  transform: rotate(180deg);
}

.mystic-accordion-content {
  max-height: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  position: relative;
  margin-top: 0 !important;
}

/* Screen reader only text for accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mystic-accordion-content.expanded {
  max-height: none;
  height: auto;
  opacity: 1;
  margin-top: 0 !important;
}

.mystic-accordion-content-inner {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  padding: 0 16px 16px 16px;
}

.mystic-accordion-description {
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  color: var(--mystic-brand-blue);
  opacity: 0.7;
  margin: 0 0 12px 0 !important;
}

.mystic-accordion-description:last-child {
  margin-bottom: 0;
}

.mystic-accordion-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.mystic-accordion-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mystic-accordion-check-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.mystic-accordion-check-item {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  /* color: var(--brand-brown); */
  opacity: 0.7;
  flex: 1;
}

/* Extra Description Styles */
.mystic-accordion-extra-description {
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: 0.16px;
  color: var(--mystic-brand-blue) !important;
  margin: 0 !important;
}

.mystic-accordion-extra-description:last-child {
  margin-bottom: 0;
}

/* Extra Check Items Styles */
.mystic-accordion-extra-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0 0;
}

/* Plain list items (no icon) within accordion */
.mystic-accordion-plain-list {
  margin-top: 12px;
  padding-left: 35px;
  display: block;
}
.mystic-accordion-plain-list.standalone-list {
  margin-top: 20px;
}
.mystic-accordion-plain-list-item + .mystic-accordion-plain-list-item {
  margin-top: 5px;
}
.mystic-accordion-plain-list-text {
  color: var(--black-700);
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: var(--paragraph-p1, 14px);
  line-height: 160%;
  font-weight: 400;
  letter-spacing: 0;
  display: block;
}
.mystic-accordion-plain-list-text .mystic-heading-highlight {
  color: var(--black-1000, #141414);
  font-weight: 600;
}
.mystic-accordion-check-item.list-title {
  color: var(--black-1000) !important;
}

/* Subsections wrapper spacing */
.mystic-accordion-subsections {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mystic-accordion-subsection .mystic-accordion-plain-list {
  margin-top: 8px;
}

.mystic-feature-note {
  margin-top: 24px;
  background: var(--pink-02, #fce9fa);
  border-radius: 16px;
  padding: 20px 24px;
  display: block;
}
.mystic-feature-note__content {
  font-size: 16px;
  line-height: 170%;
  font-weight: 500;
}

.mystic-feature-note__title {
  font-weight: 700;
  margin-right: 0px;
  letter-spacing: 0.1px;
}

.mystic-feature-note__content p {
  margin: 0 0 8px 0;
}

.mystic-feature-note__content p:last-child {
  margin-bottom: 0;
}

.mystic-feature-note__content ul,
.mystic-feature-note__content ol {
  margin: 8px 0;
  padding-left: 20px;
}

.mystic-feature-note__content li {
  margin-bottom: 4px;
}

.mystic-accordion-extra-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mystic-accordion-extra-check-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.mystic-accordion-extra-check-item {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  /* color: var(--brand-brown) !important; */
  flex: 1;
  opacity: 0.7;
}
.mystic-accordion-extra-check:has(.mystic-accordion-extra-check-item) svg {
  /* display: none; */
}
.mystic-accordion-content-inner a {
  text-decoration: underline;
}
.mystic-accordion-content-inner a[role="button"] {
  text-decoration: none;
}

.mystic-accordion-content-inner .phone-link,
.email-link {
  color: var(--blue-800);
  text-decoration: underline;
}

.mystic-accordion-content-inner .mystic-accordion-check-item a {
  color: var(--blue-800);
  text-decoration: underline;
}
/* .mystic-accordion-extra-description::after {
              content: url("/wp-content/uploads/2025/09/arrows-diagram.png");
              display: inline-block;
              vertical-align: middle;
              height: 20px;
            } */
.mystic-accordion-extra-check-item a {
  color: var(--e-global-color-ef1318b) !important;
}
.mystic-accordion-content-inner .mystic-design-button {
  margin-top: 16px;
  align-self: flex-start;
  max-width: 100%;
  width: auto;
  min-width: 0;
}
.no-shadow .e-con.e-child::before {
  background: none !important;
}
/* Ensure proper text overflow for accordion buttons */
.mystic-accordion-content-inner .mystic-design-button .mystic-button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}

/* Remove negative margin from accordion content */
.mystic-accordion-content,
.mystic-accordion-content.expanded,
[id*="accordion-item-"][id*="-content"] {
  margin-top: 0 !important;
}

.mystic-accordion-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 16px 15px 20px;
  border: 1px solid var(--brand-blue);
  border-radius: var(--border-radius-sm);
  background: white;
  color: var(--brand-blue);
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
  transition: var(--transition-fast);
  cursor: pointer;
}

.mystic-accordion-button:hover {
  background-color: var(--brand-blue);
  color: white;
}

.mystic-accordion-button:focus {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.mystic-accordion-button:focus-visible {
  background-color: var(--brand-blue);
  color: white;
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.mystic-accordion-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* ========================================
                   ICON COMPONENT STYLES
                   ======================================== */

.mystic-icon-component-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mystic-icon-component {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--e-global-color-2abcfaa);
  background-color: transparent;
  color: var(--blue-600);
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.mystic-icon-component:hover {
  transform: scale(1.05);
}
.mystic-icon-component:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--blue-600);
}

.mystic-icon-component:focus-visible {
  transform: scale(1.05);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--blue-600);
}

/* Icon sizes */
.mystic-icon-sm {
  width: 40px;
  height: 40px;
  padding: 8px;
}
.mystic-icon-md {
  width: 56px;
  height: 56px;
  padding: 16px;
}
.mystic-icon-lg {
  width: 64px;
  height: 64px;
  padding: 16px;
}

.mystic-icon-sm-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.mystic-icon-md-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.mystic-icon-lg-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.mystic-icon-component svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
}

/* Unified Icon Container Classes */
.mystic-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--mystic-border-light);
  background: #fff;
  flex-shrink: 0;
}

.mystic-icon-container--info-card {
  width: 64px;
  height: 64px;
  padding: 16px;
  border-radius: var(--border-radius-lg);
}

.mystic-icon-container--horizontal-card {
  padding: 14px;
  border-radius: 84px;
}

.mystic-icon-container--no-bg-card {
  width: 56px;
  height: 56px;
  padding: 16px;
  border-radius: var(--border-radius-lg);
}

.mystic-icon-container .mystic-icon-component,
.mystic-icon-container .mystic-elementor-icon {
  border: none;
  background: transparent;
  padding: 0 !important;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mystic-icon-container .mystic-elementor-icon i,
.mystic-icon-container .mystic-elementor-icon svg {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

/* Info Card specific icon sizing - allows Elementor controls to override */
.mystic-icon-container--info-card .mystic-elementor-icon {
  width: auto !important;
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mystic-icon-container--info-card .mystic-elementor-icon i,
.mystic-icon-container--info-card .mystic-elementor-icon svg {
  width: auto !important;
  height: auto !important;
  font-size: inherit !important;
}

/* ========================================
                   RATING BADGE COMPONENT STYLES
                   ======================================== */

.mystic-rating-badge-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.mystic-rating-badge {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  border-radius: var(--border-radius-full);
  font-family: var(--font-public-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  flex-shrink: 0;
  min-height: 18px;
  height: 18px;
  box-sizing: border-box;
  transition: var(--transition-fast);
}

.mystic-rating-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--mystic-shadow-medium);
}

.mystic-rating-badge__text {
  font-family: var(--font-public-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: inherit;
  margin: 0 !important;
  padding: 0 !important;
}

.mystic-rating-badge__star {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  display: inline-block;
}

/* Rating badge variants */
.mystic-rating-badge--01 {
  background-color: var(--section-bg);
  color: var(--brand-brown);
}
.mystic-rating-badge--01 .mystic-rating-badge__star {
  fill: var(--brand-brown);
}

.mystic-rating-badge--02 {
  background-color: var(--blue-600);
  color: var(--brand-brown);
}
.mystic-rating-badge--02 .mystic-rating-badge__star {
  fill: var(--brand-brown);
}

.mystic-rating-badge--03 {
  background-color: var(--federal-text);
  color: white;
}
.mystic-rating-badge--03 .mystic-rating-badge__star {
  fill: white;
}

/* ========================================
                   USER PROFILE COMPONENT STYLES
                   ======================================== */

.mystic-user-profile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mystic-user-profile__avatar {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.mystic-user-profile__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}

.mystic-user-profile__header {
  display: flex;
  height: 18px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.mystic-user-profile__name {
  color: white;
  font-family: var(--font-public-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  margin: 0 !important;
  padding: 0 !important;
}

.mystic-user-profile__description {
  color: white;
  opacity: 0.6;
  font-family: var(--font-public-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
                   CARD COMPONENT STYLES (Shared)
                   ======================================== */

.mystic-card-title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brand-brown);
  font-family: var(--font-public-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}

.mystic-card-description {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brand-brown);
  opacity: 0.7;
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

/* Card bullet point styles */
.mystic-card-description .mystic-heading-bullet-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
  list-style: none;
}

.mystic-card-description .mystic-heading-bullet-item {
  position: relative;
  margin-bottom: 4px;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.mystic-card-description .mystic-heading-bullet-item:before {
  content: "•";
  position: absolute;
  left: -15px;
  color: inherit;
}

/* Specific card bullet point styles */
.mystic-info-card__description .mystic-heading-bullet-list,
.mystic-no-bg-card__description .mystic-heading-bullet-list,
.mystic-card-horizontal__description .mystic-heading-bullet-list,
.mystic-maven-card-description .mystic-heading-bullet-list {
  margin: 8px 0 0 0;
  padding-left: 20px;
  list-style: none;
}

.mystic-info-card__description .mystic-heading-bullet-item,
.mystic-no-bg-card__description .mystic-heading-bullet-item,
.mystic-card-horizontal__description .mystic-heading-bullet-item,
.mystic-maven-card-description .mystic-heading-bullet-item {
  position: relative;
  margin-bottom: 4px;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.mystic-info-card__description .mystic-heading-bullet-item:before,
.mystic-no-bg-card__description .mystic-heading-bullet-item:before,
.mystic-card-horizontal__description .mystic-heading-bullet-item:before,
.mystic-maven-card-description .mystic-heading-bullet-item:before {
  content: "•";
  position: absolute;
  left: -15px;
  color: inherit;
}

/* Info Card */
.mystic-info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  padding: 24px;
  border-radius: var(--border-radius-md);
  background: #fff;
  box-shadow:
    0 1px 3px 0 var(--mystic-shadow-medium),
    0 1px 2px 0 var(--mystic-shadow-light);
  transition: var(--transition-fast);
}

.mystic-info-card:hover {
  box-shadow:
    0 4px 6px -1px var(--mystic-shadow-medium),
    0 2px 4px -1px var(--mystic-shadow-light);
}

.mystic-info-card--auto-size {
  flex: 1;
  width: 100%;
}

/* Auto Flex Styles for Info Card Widget */
.mystic-info-card[data-auto-flex="yes"] {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: auto;
  min-height: auto;
}

.mystic-info-card--auto-size {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: auto;
  min-height: auto;
}

/* Override any conflicting styles */
.elementor-widget-mystic_info_card .mystic-info-card[data-auto-flex="yes"] {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: auto;
  min-height: auto;
}

.elementor-widget-mystic_info_card .mystic-info-card--auto-size {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: auto;
  min-height: auto;
}

/* Editor-specific styles */
.elementor-editor-active .mystic-info-card[data-auto-flex="yes"] {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: auto;
  min-height: auto;
}

.elementor-editor-active .mystic-info-card--auto-size {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: auto;
  min-height: auto;
}

/* Force editor preview updates */
.elementor-editor-active .elementor-widget-mystic_info_card .mystic-info-card[data-auto-flex="yes"] {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: auto;
  min-height: auto;
}

.elementor-editor-active .elementor-widget-mystic_info_card .mystic-info-card--auto-size {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: auto;
  min-height: auto;
}

/* Ensure content doesn't break when auto flex is enabled */
.mystic-info-card[data-auto-flex="yes"] .mystic-info-card__content,
.mystic-info-card--auto-size .mystic-info-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mystic-info-card[data-auto-flex="yes"] .mystic-info-card__text-content,
.mystic-info-card--auto-size .mystic-info-card__text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Responsive auto flex styles */
@media (max-width: 768px) {
  .mystic-info-card[data-auto-flex="yes"],
  .mystic-info-card--auto-size {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-width: auto;
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .mystic-info-card[data-auto-flex="yes"],
  .mystic-info-card--auto-size {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-width: auto;
    min-height: auto;
  }
}

.mystic-info-card__icon-container {
  display: flex;
  width: 56px;
  height: 56px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--brand-brown);
  opacity: 0.1;
  background: #fff;
  flex-shrink: 0;
}

.mystic-info-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.mystic-info-card__text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.mystic-info-card__title {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mystic-text-dark);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

.mystic-info-card__description {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mystic-text-medium);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

/* No Background Card */
.mystic-no-bg-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  padding: 32px 0;
  width: 354px;
}

.mystic-no-bg-card--auto-size {
  flex: 1;
  width: 100%;
}

.mystic-no-bg-card__icon-container {
  display: flex;
  width: 56px;
  height: 56px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--brand-brown);
  opacity: 0.1;
  background: #fff;
  flex-shrink: 0;
}

.mystic-no-bg-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.mystic-no-bg-card__text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.mystic-no-bg-card__title {
  align-self: stretch;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mystic-text-dark);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

.mystic-no-bg-card__description {
  align-self: stretch;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mystic-text-medium);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

.mystic-no-bg-card__button {
  align-self: flex-start;
}

.highlight-word {
  color: var(--Black-1000);
  font-family: "Public Sans";
  font-size: var(--Paragraph-p1, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: 0.16px;
}

/* Horizontal Card */
.mystic-card-horizontal {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.mystic-card-horizontal--auto-size {
  flex: 1;
  width: 100%;
}

.mystic-card-horizontal__icon-container {
  display: flex;
  padding: 14px;
  justify-content: center;
  align-items: center;
  border-radius: 84px;
  border: 1px solid var(--brand-brown);
  opacity: 0.1;
  background: #fff;
  flex-shrink: 0;
}

.mystic-card-horizontal__icon-container .mystic-icon-component {
  border: none;
  background: transparent;
  padding: 0 !important;
  width: 28px;
  height: 28px;
}

.mystic-card-horizontal__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}

.mystic-card-horizontal__text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.mystic-card-horizontal__title {
  align-self: stretch;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mystic-text-dark);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

.mystic-card-horizontal__description {
  align-self: stretch;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mystic-text-medium);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

/* ========================================
                   TABS COMPONENT STYLES
                   ======================================== */

/* CSS Variables for better customization */
:root {
  --mystic-tab-gap: 16px;
  --mystic-tab-padding: 8px;
  --mystic-tab-min-width: fit-content;
  --mystic-tab-font-size: 16px;
  --mystic-tab-letter-spacing: -0.16px;
}

.mystic-tabs-wrapper {
  width: 100%;
  position: relative;
}

.mystic-tabs-component {
  width: 100%;
  position: relative;
}

/* Scroll fade indicators for better UX */
.mystic-tabs-wrapper::before,
.mystic-tabs-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 20px;
  width: 20px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mystic-tabs-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent);
}

.mystic-tabs-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
}

.mystic-tabs-wrapper.has-scroll-left::before {
  opacity: 1;
}

.mystic-tabs-wrapper.has-scroll-right::after {
  opacity: 1;
}

/* Tabs Navigation Container */
.mystic-tabs-nav-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  /* padding: 0 30px; */
}

.mystic-tabs-nav {
  display: flex;
  align-items: flex-start;
  gap: var(--mystic-tab-gap);
  align-self: stretch;
  border-bottom: 1.5px solid;
  border-bottom-color: rgba(20, 20, 20, 0.1);
  position: relative;
  padding-bottom: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  scroll-padding: 0 16px;
  flex: 1;
  transition: all 0.5s;
}

.mystic-tabs-nav::-webkit-scrollbar {
  display: none;
}

/* Navigation Arrows */
.mystic-tabs-arrow {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: #eee;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 18px;
  transition: background 0.2s ease;
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  outline: none;
}

.mystic-tabs-arrow:hover {
  background: rgb(201, 204, 207);
  border-color: #d1d5db;
  color: #374151;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mystic-tabs-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.mystic-tabs-arrow:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.mystic-tabs-arrow--left {
  left: -16px;
}

.mystic-tabs-arrow--right {
  right: -16px;
}

@media (max-width: 1024px) {
  .mystic-tabs-arrow {
    /* width: 28px;
        height: 28px; */
    font-size: 16px;
  }

  .mystic-tabs-arrow--left {
    left: -12px;
  }

  .mystic-tabs-arrow--right {
    right: -12px;
  }
}

@media (max-width: 767px) {
  .mystic-tabs-arrow {
    /* width: 24px;
        height: 24px; */
    font-size: 14px;
  }

  .mystic-tabs-arrow--left {
    left: -8px;
  }

  .mystic-tabs-arrow--right {
    right: -8px;
  }
}
.mystic-tabs-arrow svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.mystic-tabs-arrow:hover svg {
  transform: scale(1.1);
}

/* Arrow visibility states */
.mystic-tabs-arrow[style*="display: none"] {
  opacity: 0;
  pointer-events: none;
}

.mystic-tabs-arrow:not([style*="display: none"]) {
  opacity: 1;
  pointer-events: auto;
}

/* Ensure arrows work with existing scroll indicators */
.mystic-tabs-wrapper.has-scroll-left .mystic-tabs-arrow--left {
  display: flex !important;
}

.mystic-tabs-wrapper.has-scroll-right .mystic-tabs-arrow--right {
  display: flex !important;
}

/* Hide arrows when no scrolling is needed */
.mystic-tabs-wrapper:not(.has-scroll-left) .mystic-tabs-arrow--left {
  display: none !important;
}

.mystic-tabs-wrapper:not(.has-scroll-right) .mystic-tabs-arrow--right {
  display: none !important;
}

.mystic-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  cursor: pointer;
  transition: var(--transition-smooth);
  padding-bottom: 0;
  flex-shrink: 0;
  min-width: var(--mystic-tab-min-width);
  outline: none;
  border-radius: 4px;
  margin-top: 4px;
  padding-left: var(--mystic-tab-padding);
  padding-right: var(--mystic-tab-padding);
}

/* WCAG 2.2 Compliant Focus Indicators for Tabs */
.mystic-tab:focus-visible {
  outline: 2px solid var(--blue-600);
  box-shadow: 0 0 0 2px rgba(15, 126, 186, 0.1);
  border-radius: 4px;
  position: relative;
}

.mystic-tab:focus-visible::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid var(--blue-600);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}

.mystic-tab:focus-visible .mystic-tab__label {
  color: var(--blue-600);
  font-weight: 700;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-tab:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 1px;
    box-shadow: none;
  }

  .mystic-tab:focus-visible::before {
    border-color: #000000;
    border-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mystic-tab,
  .mystic-tab__label,
  .mystic-tabs-nav::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Screen reader only class */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mystic-tab:hover .mystic-tab__label {
  color: var(--blue-600);
}

/* Hover animations */
.mystic-tab:hover {
  transform: translateY(-1px);
}

.mystic-tab--hover-scale:hover {
  transform: scale(1.05);
}

.mystic-tab--hover-rotate:hover {
  transform: rotate(2deg);
}

.mystic-tab--hover-translateY:hover {
  transform: translateY(-1px);
}

.mystic-tab__label {
  color: #b9b9c0;
  font-family: var(--font-public-sans);
  font-size: var(--mystic-tab-font-size);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: var(--mystic-tab-letter-spacing);
  transition: var(--transition-smooth);
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: visible;
  text-overflow: unset;
  max-width: none;
  min-width: max-content;
  padding: 0 8px;
}

.mystic-tab--active .mystic-tab__label {
  color: var(--blue-600);
}

/* Fallback underline for active tab if JavaScript underline fails */
.mystic-tabs-nav:not([style*="--underline-width"]) .mystic-tab--active::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--blue-600);
  border-radius: 1px;
  z-index: 1;
}

/* Sliding underline animation */
.mystic-tabs-nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 1.5px;
  background: var(--blue-600);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 1px;
  left: var(--underline-left, 0);
  width: var(--underline-width, 0);
  transform-origin: left center;
  opacity: 0;
}

/* Show underline when width is set */
.mystic-tabs-nav[style*="--underline-width"]::after {
  opacity: 1;
}

.mystic-tabs-nav[data-active-index]::after {
  animation: slideToTab 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideToTab {
  0% {
    transform: scaleX(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scaleX(1.05);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.mystic-tab:hover {
  transform: translateY(-1px);
}
.mystic-tab:active {
  transform: translateY(0);
}

.mystic-tabs-nav.mystic-sliding-animation::after {
  animation: enhancedSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes enhancedSlide {
  0% {
    transform: scaleX(0.9);
    opacity: 0.9;
  }
  50% {
    transform: scaleX(1.02);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.mystic-tab__label {
  transition:
    color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mystic-tab {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mystic-tab__underline {
  display: none;
}

/* Tab Content Styles */
.mystic-tab-content {
  display: none;
  padding: 1.5rem 0;
}

.mystic-tab-content--active {
  display: block;
}
.mystic-tab-content--inactive {
  display: none;
}

/* WCAG 2.2 Compliant Tab Panel Styles */
.mystic-tab-panels {
  position: relative;
  width: 100%;
  display: block; /* Show the panels container */
}

.mystic-tab-panel {
  display: none;
  padding: 0; /* Remove padding to eliminate empty space */
  outline: none;
}

.mystic-tab-panel--active {
  display: block !important;
}

.mystic-tab-panel:focus-visible {
  outline: 2px solid var(--blue-900);
  outline-offset: 2px;
  border-radius: 4px;
}

.mystic-tab-panel-content {
  width: 100%;
}

/* Ensure proper focus management for tab panels */
.mystic-tab-panel[aria-hidden="true"] {
  display: none !important;
  visibility: hidden;
}

.mystic-tab-panel[aria-hidden="false"] {
  display: block !important;
  visibility: visible;
}

.elementor-element.mystic-tab-content {
  display: none;
}
.elementor-element.mystic-tab-content--active {
  display: block;
}
.elementor-element.mystic-tab-content--inactive {
  display: none;
}

/* Editor Mode Styles */
.mystic-tabs-content-editor .mystic-tab-content {
  display: block;
  margin-bottom: 32px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: var(--border-radius-sm);
  background: #f9fafb;
}

.mystic-tab-content-header {
  font-weight: 600;
  margin-bottom: 16px;
  color: #374151;
  font-size: 14px;
}

.mystic-tab-content-body {
  color: #6b7280;
  line-height: 1.6;
}

/* ========================================
                   VERTICAL TABS COMPONENT STYLES
                   ======================================== */

.mystic-vertical-tabs-wrapper {
  width: 100%;
  position: relative;
}

.mystic-vertical-tabs-component {
  width: 100%;
  position: relative;
}

.mystic-vertical-tabs-nav {
  display: flex;
  width: 180px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.mystic-vertical-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  position: relative;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.mystic-vertical-tab--active {
  gap: 16px;
}

.mystic-vertical-tab:not(.mystic-vertical-tab--active) {
  gap: 8px;
}

.mystic-vertical-tab__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  position: relative;
}

.mystic-vertical-tab__label {
  color: rgba(20, 20, 20, 0.4);
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.16px;
  position: relative;
  transition: var(--transition-smooth);
}

.mystic-vertical-tab--active .mystic-vertical-tab__label {
  color: var(--blue-600);
}

.mystic-vertical-tab:hover .mystic-vertical-tab__label {
  color: var(--blue-600);
}

.mystic-vertical-tab__underline {
  width: 180px;
  height: 1.5px;
  background: var(--blue-600);
  position: relative;
  transition: var(--transition-smooth);
}

/* Hover Animations */
.mystic-vertical-tab--hover-translateX:hover {
  transform: translateX(4px);
}

.mystic-vertical-tab--hover-scale:hover {
  transform: scale(1.02);
}

/* Focus States for Accessibility */
.mystic-vertical-tab {
  outline: none;
  border-radius: 4px;
}

.mystic-vertical-tab:focus-visible {
  outline: 2px solid var(--blue-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.1);
}

.mystic-vertical-tab:focus-visible .mystic-vertical-tab__label {
  color: var(--blue-600);
}

/* Active State Enhancement */
.mystic-vertical-tab--active {
  position: relative;
}

.mystic-vertical-tab--active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 100%;
  background: var(--blue-600);
  border-radius: 2px;
  opacity: 0;
  transition: var(--transition-smooth);
}

.mystic-vertical-tabs-wrapper[data-enhance-active="true"] .mystic-vertical-tab--active::before {
  opacity: 1;
}

/* Content States */
.mystic-vertical-tab-content--active {
  display: block;
}

.mystic-vertical-tab-content--inactive {
  display: none;
}

/* Mobile Responsiveness for Vertical Tabs */
@media (max-width: 768px) {
  .mystic-vertical-tabs-nav {
    width: 100%;
    max-width: 300px;
  }

  .mystic-vertical-tab__underline {
    width: 100%;
  }

  .mystic-vertical-tab__label {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mystic-vertical-tabs-nav {
    gap: 16px;
  }

  .mystic-vertical-tab {
    gap: 12px;
  }

  .mystic-vertical-tab:not(.mystic-vertical-tab--active) {
    gap: 4px;
  }

  .mystic-vertical-tab__label {
    font-size: 13px;
  }
}

/* ========================================
                   FAQ ACCORDION COMPONENT STYLES - 100% FIGMA MATCH
                   ======================================== */

.mystic-faq-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mystic-faq-item {
  /* Exact Figma structure: display:flex;width:536px;padding:24px;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;border-radius:16px;background:#FFF; */
  display: flex;
  width: 100%;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0; /* Remove default gap to prevent spacing when collapsed */
  border-radius: 16px;
  background: var(--mystic-bg-white);
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

/* Add gap only when content is expanded */
.mystic-faq-item:has(.mystic-faq-content.expanded) {
  gap: 24px;
}

/* Fallback for browsers that don't support :has() */
.mystic-faq-item.faq-expanded {
  gap: 24px;
}

/* Removed hover shadow effect as requested */

.mystic-faq-header {
  /* Exact Figma structure: display:flex;align-items:flex-start;gap:24px;align-self:stretch; */
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  background: none;
  border: none;
  padding: 0 !important;
  cursor: pointer;
  text-align: left;
  position: relative;
  outline: 0 !important;
}

.mystic-faq-header:focus {
  /* outline: 2px solid #0e6496; */
  outline: 0px solid #0e6496;
  outline-offset: 2px;
  outline-offset: 0px;
  border-radius: 4px;
}

.mystic-faq-header:focus-visible {
  outline: 2px solid #0e6496 !important;
  outline-offset: 2px;
}
.mystic-faq-question {
  color: var(--black-1000) !important;
}
.mystic-faq-question {
  /* Exact Figma structure: flex:1 0 0;color:var(--black-1000);font-family:'Public Sans';font-size:18px;font-weight:600;line-height:130%; */
  flex: 1 0 0;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--mystic-text-dark);
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  position: relative;
}

.mystic-faq-arrow {
  /* Exact Figma structure: width:24px;height:24px;position:relative */
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}

.mystic-faq-arrow svg {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease-in-out;
}

/* Arrow rotation for expanded state */
.mystic-faq-header[aria-expanded="true"] .mystic-faq-arrow svg {
  transform: rotate(180deg);
}

/* Fallback for browsers that don't support :has() */
.mystic-faq-item.faq-expanded .mystic-faq-arrow svg {
  transform: rotate(180deg);
}

.mystic-faq-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  width: 100%;
}

.mystic-faq-content.expanded {
  max-height: 1000px;
  opacity: 1;
}

.mystic-faq-content-inner {
  /* Exact Figma structure: display:flex;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  position: relative;
}

/* Description 01 - Exact Figma styling */
.mystic-faq-content-inner .description-01 {
  /* align-self:stretch; */
  align-self: stretch;
}

/* Check Items - Exact Figma styling */
.mystic-faq-content-inner .check-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  margin: 0 !important;
}

.mystic-faq-content-inner .check-item {
  /* Exact Figma structure: display:flex;align-items:flex-start;gap:8px;align-self:stretch; */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  position: relative;
}

.mystic-faq-content-inner .check-icon {
  /* Exact Figma structure: width:24px;height:24px;position:relative */
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}

.mystic-faq-content-inner .check-item .mystic-faq-answer {
  /* Exact Figma structure: display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  margin: 0 !important;
}

/* Enhanced check items styling for rich text */
.mystic-faq-content-inner .check-item .mystic-faq-answer p {
  margin: 0 !important;
  line-height: 1.6;
}

.mystic-faq-content-inner .check-item .mystic-faq-answer ul,
.mystic-faq-content-inner .check-item .mystic-faq-answer ol {
  margin: 4px 0;
  padding-left: 16px;
}

.mystic-faq-content-inner .check-item .mystic-faq-answer li {
  margin-bottom: 2px;
  line-height: 1.5;
}

.mystic-faq-content-inner .check-item .mystic-faq-answer strong,
.mystic-faq-content-inner .check-item .mystic-faq-answer b {
  font-weight: 600;
}

.mystic-faq-content-inner .check-item .mystic-faq-answer em,
.mystic-faq-content-inner .check-item .mystic-faq-answer i {
  font-style: italic;
}

/* Description 02 - Exact Figma styling */
.mystic-faq-content-inner .description-02 {
  /* align-self:stretch; */
  align-self: stretch;
}

/* Original Answer (fallback) */
.mystic-faq-content-inner .original-answer {
  align-self: stretch;
}

.mystic-faq-answer {
  /* Exact Figma structure: align-self:stretch;color:rgba(20, 20, 20, 0.70);font-family:'Public Sans';font-size:16px;font-weight:400;line-height:160%;letter-spacing:0.16px; */
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch;
  color: var(--brand-brown);
  opacity: 0.7;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  position: relative;
}

/* Rich text formatting support */
.mystic-faq-answer p {
  margin: 0 0 12px 0;
}

.mystic-faq-answer p:last-child {
  margin-bottom: 0;
}

.mystic-faq-answer strong,
.mystic-faq-answer b {
  font-weight: 700;
  color: var(--black-1000);
}

.mystic-faq-answer em,
.mystic-faq-answer i {
  font-style: italic;
  color: inherit;
}

.mystic-faq-answer ul,
.mystic-faq-answer ol {
  margin: 8px 0;
  padding-left: 20px;
}

.mystic-faq-answer li {
  margin-bottom: 4px;
  line-height: 1.6;
}

.mystic-faq-answer ul li {
  list-style-type: disc;
}

.mystic-faq-answer ol li {
  list-style-type: decimal;
}

.mystic-faq-answer h1,
.mystic-faq-answer h2,
.mystic-faq-answer h3,
.mystic-faq-answer h4,
.mystic-faq-answer h5,
.mystic-faq-answer h6 {
  margin: 16px 0 8px 0;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

.mystic-faq-answer h1:first-child,
.mystic-faq-answer h2:first-child,
.mystic-faq-answer h3:first-child,
.mystic-faq-answer h4:first-child,
.mystic-faq-answer h5:first-child,
.mystic-faq-answer h6:first-child {
  margin-top: 0;
}

.mystic-faq-answer blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--blue-700);
  background-color: rgba(14, 100, 150, 0.05);
  font-style: italic;
}

.mystic-faq-answer code {
  background-color: var(--mystic-shadow-medium);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 14px;
}

.mystic-faq-answer pre {
  background-color: var(--mystic-shadow-light);
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 12px 0;
}

.mystic-faq-answer pre code {
  background: none;
  padding: 0 !important;
}

/* ========================================
                   ICON TEXT COMPONENT
                   100% Figma-accurate recreation
                   ======================================== */

.mystic-icon-text-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
}

.mystic-icon-text-item {
  display: flex;
  padding: 20px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  position: relative;
}

/* Border styling - matching Figma exactly */
.mystic-icon-text-item.has-border {
  border-top: 1px solid rgba(20, 20, 20, 0.1);
}

.mystic-icon-text-item.has-border.is-last-item {
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}

.mystic-icon-text-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  position: relative;
}

.mystic-icon-text-icon {
  width: 28px;
  height: 28px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-900);
}

.mystic-icon-text-icon svg {
  width: 28px;
  height: 28px;
  /* Preserve original SVG styling for custom uploaded icons */
  /* Only apply color changes when explicitly set via Elementor controls */
}

/* For Elementor icon library icons, apply default styling */
.mystic-icon-text-icon .elementor-icon svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mystic-icon-text-icon i {
  font-size: 28px;
  line-height: 1;
  color: inherit;
}

.mystic-icon-text-text {
  color: var(--blue-900);
  font-family: var(--font-public-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 27px */
  letter-spacing: -0.18px;
  position: relative;
  flex: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mystic-icon-text-item {
    padding: 16px 0;
  }

  .mystic-icon-text-content {
    gap: 10px;
  }

  .mystic-icon-text-icon {
    width: 24px;
    height: 24px;
  }

  .mystic-icon-text-icon svg {
    width: 24px;
    height: 24px;
  }

  .mystic-icon-text-icon .elementor-icon svg {
    width: 24px;
    height: 24px;
  }

  .mystic-icon-text-icon i {
    font-size: 24px;
  }

  .mystic-icon-text-text {
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.16px;
  }
}

@media (max-width: 480px) {
  .mystic-icon-text-item {
    padding: 14px 0;
  }

  .mystic-icon-text-content {
    gap: 8px;
  }

  .mystic-icon-text-icon {
    width: 20px;
    height: 20px;
  }

  .mystic-icon-text-icon svg {
    width: 20px;
    height: 20px;
  }

  .mystic-icon-text-icon .elementor-icon svg {
    width: 20px;
    height: 20px;
  }

  .mystic-icon-text-icon i {
    font-size: 20px;
  }

  .mystic-icon-text-text {
    font-size: 14px;
    line-height: 150%;
    letter-spacing: -0.14px;
  }
}

/* Elementor editor specific styles */
.elementor-editor-active .mystic-icon-text-list {
  min-height: 50px;
}

/* Hover effects for better UX */
.mystic-icon-text-item {
  transition: all 0.2s ease;
}

.mystic-icon-text-item:hover {
  background-color: rgba(19, 73, 106, 0.02);
}

/* Accessibility improvements */
.mystic-icon-text-icon {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Print styles */
@media print {
  .mystic-icon-text-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

.mystic-faq-link {
  color: var(--blue-900) !important;
  text-decoration: none;
  font-weight: 600;
  transition: text-decoration 0.2s ease;
}

.mystic-faq-link:hover {
  text-decoration: underline;
}

.mystic-faq-link:focus {
  outline: 2px solid var(--blue-700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Responsive styles for FAQ accordion */
@media (max-width: 768px) {
  .mystic-faq-accordion {
    gap: 12px;
  }

  .mystic-faq-item {
    padding: 20px;
  }

  .mystic-faq-header {
    gap: 16px;
  }

  .mystic-faq-question {
    font-size: 16px;
  }

  .mystic-faq-arrow {
    margin-left: 16px;
  }

  .mystic-faq-arrow svg {
    width: 20px;
    height: 20px;
  }

  .mystic-faq-content.expanded {
    padding-top: 16px;
  }

  .mystic-faq-answer {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .mystic-faq-accordion {
    gap: 8px;
  }

  .mystic-faq-item {
    padding: 16px;
  }

  .mystic-faq-header {
    gap: 12px;
  }

  .mystic-faq-question {
    font-size: 15px;
  }

  .mystic-faq-arrow {
    margin-left: 12px;
  }

  .mystic-faq-arrow svg {
    width: 18px;
    height: 18px;
  }

  .mystic-faq-content.expanded {
    padding-top: 12px;
  }

  .mystic-faq-answer {
    font-size: 14px;
  }
}

/* Accessibility for FAQ accordion */
@media (prefers-reduced-motion: reduce) {
  .mystic-faq-content {
    transition: none;
  }

  .mystic-faq-arrow svg {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-faq-item {
    border: 2px solid currentColor;
  }

  .mystic-faq-link {
    border-bottom: 1px solid currentColor;
  }
}

/* ========================================
                   FAQ SECTION COMPONENT STYLES - 100% FIGMA MATCH
                   ======================================== */

.mystic-faq-section {
  width: 100%;
  max-width: 100%;
}

.mystic-faq-section-container {
  /* Main container: display:flex;width:1080px;padding:0px 24px 0px 16px;align-items:center;gap:8px; */
  display: flex;
  width: 100%;
  /* max-width: 1080px; */
  margin: 0 auto;
  padding: 0;
  align-items: center;
  gap: 8px;
}

.mystic-faq-section-content {
  /* Content wrapper: display:flex;padding:64px 24px 48px 24px;flex-direction:column;align-items:flex-start;gap:8px;flex:1 0 0;border-radius:12px;background:#FFF; */
  display: flex;
  padding: 64px 24px 48px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 12px;
  background: var(--mystic-bg-white);
  position: relative;
}

.mystic-faq-section-inner {
  /* Inner content: display:flex;width:992px;flex-direction:column;align-items:flex-start;gap:48px; */
  display: flex;
  width: 100%;
  /* max-width: 992px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  position: relative;
}

/* Heading Component */
.mystic-faq-section-header {
  /* Heading: display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;align-self:stretch; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  position: relative;
}

.mystic-faq-section-title-container {
  /* Title container: display:flex;width:814px;max-width:824px;flex-direction:column;justify-content:center;align-items:center;gap:24px; */
  display: flex;
  width: 100%;
  max-width: 824px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  position: relative;
}

.mystic-faq-section-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  position: relative;
}

.mystic-faq-section-title {
  /* Title styling: align-self:stretch;color:var(--blue-600);text-align:center;font-family:'Public Sans';font-size:48px;font-style:italic;font-weight:500;line-height:105%;letter-spacing:-1.44px; */
  align-self: stretch;
  text-align: center;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 105%;
  letter-spacing: -1.44px;
  color: var(--mystic-text-dark);
  position: relative;
}

.mystic-faq-section-title .highlight {
  color: var(--blue-600);
}

.mystic-faq-section-description {
  /* Description styling: align-self:stretch;color:var(--black-1000);text-align:center;font-family:'Public Sans';font-size:16px;font-style:normal;font-weight:400;line-height:160%;letter-spacing:0.16px; */
  align-self: stretch;
  text-align: center;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  color: rgba(20, 20, 20, 0.7);
  position: relative;
}

/* Main Content */
.mystic-faq-section-main {
  /* Main content: display:flex;align-items:flex-start;gap:16px;align-self:stretch; */
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  position: relative;
}

/* Image Container */
.mystic-faq-section-image-container {
  /* Image container: display:flex;height:296px;padding-right:72px;align-items:center; */
  display: flex;
  height: 296px;
  padding-right: 72px;
  align-items: flex-start;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 24px;
  z-index: 10;
  flex-shrink: 0;
  align-self: flex-start;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.mystic-faq-section-image-sticky {
  height: fit-content;
}

.mystic-faq-section-image {
  /* Image: width:240px;height:296px;border-radius:12px; */
  width: 240px;
  height: 296px !important;
  border-radius: 12px;
  object-fit: cover;
  position: relative;
}

/* Tablet and Mobile Image Hiding - Hidden by default on tablet and mobile */
.mystic-faq-section-image-container--tablet-mobile-hidden {
  display: block;
}

/* Hide on tablet and mobile (max-width: 1024px) */
@media (max-width: 1024px) {
  .mystic-faq-section-image-container--tablet-mobile-hidden {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
  }
}

/* FAQ Items Container */
.mystic-faq-section-items {
  /* FAQ items wrapper: display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:32px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 1;
  margin-bottom: 0 !important;
}

.mystic-faq-items-container {
  /* FAQ items container: display:flex;width:664px;flex-direction:column;align-items:flex-start;gap:8px; */
  display: flex;
  width: 100%;
  /* max-width: 664px; */
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

/* FAQ Item */
.mystic-faq-section-item {
  /* FAQ item: display:flex;padding:24px 0px;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;align-self:stretch;border-radius:16px; */
  display: flex;
  padding: 0px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0px;
  align-self: stretch;
  border-radius: 16px;
  position: relative;
  margin-bottom: 0 !important;
}

.mystic-faq-section-item-header {
  /* Header: display:flex;align-items:flex-start;gap:24px;align-self:stretch; */
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  background: none;
  border: none;
  padding: 24px 0px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  position: relative;
  pointer-events: auto;
  user-select: none;
}

.mystic-faq-section-item-header:focus-visible {
  outline: 2px solid var(--blue-600) !important;
  outline-offset: 0;
  border-radius: 4px;
  padding: 24px 2px;
}

.mystic-faq-section-item-question {
  /* Question: flex:1 0 0;color:var(--black-1000);font-family:'Public Sans';font-size:18px;font-style:normal;font-weight:600;line-height:130%; */
  flex: 1 0 0;
  color: var(--mystic-text-dark) !important;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  position: relative;
  text-align: left;
}

.mystic-faq-section-item-arrow {
  /* Arrow: width:24px;height:24px; */
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.mystic-faq-section-item-content {
  /* Content: display:flex;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch; */
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  width: 100%;
  max-height: 0px;
  opacity: 0;
}

.mystic-faq-section-item-content.expanded {
  opacity: 1;
  max-height: 1000px;
}

/* Ensure FAQ content is hidden by default in editor */
.elementor-editor .mystic-faq-section-item-content:not(.expanded) {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}

.mystic-faq-section-item-content-inner {
  /* Content inner: display:flex;flex-direction:column;align-items:flex-start;gap:12px;align-self:stretch; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  position: relative;
  padding-bottom: 24px;
}

.mystic-faq-section-item-answer {
  /* Answer: align-self:stretch;color:rgba(20, 20, 20, 0.70);font-family:'Public Sans';font-size:16px;font-style:normal;font-weight:400;line-height:160%;letter-spacing:0.16px; */
  align-self: stretch;
  color: var(--brand-brown);
  opacity: 0.7;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  position: relative;
}

/* Divider */
.mystic-faq-divider {
  /* Divider: width:664px;height:1px;background:rgba(20, 20, 20, 0.10); */
  width: 100%;
  height: 1px;
  background: var(--brand-brown);
  opacity: 0.1;
  position: relative;
}

/* Button */
.mystic-faq-section-button-container {
  /* Button container: display:flex;align-items:center;gap:16px; */
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

/* Links within FAQ answers */
.mystic-faq-section-link {
  color: var(--blue-700);
  text-decoration: none;
  transition: text-decoration 0.2s ease;
  position: relative;
}

.mystic-faq-section-link:hover {
  text-decoration: underline;
}

.mystic-faq-section-link:focus {
  outline: 2px solid var(--blue-700);
  outline-offset: 0px;
  border-radius: 2px;
}

/* WCAG 2.2 Enhanced Focus Indicators */
.mystic-faq-section-link:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: -1px;
  border-radius: 2px;
  /* box-shadow: 0 0 0 4px rgba(15, 126, 186, 0.2); */
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-faq-section-link:focus-visible {
    outline: 3px solid var(--blue-700);
    outline-offset: 1px;
    box-shadow: none;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mystic-faq-section-link {
    transition: none;
  }
}

/* Check Items for FAQ Section - Exact Figma styling */
.mystic-faq-section-item-content-inner .check-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  margin: 0 !important;
}

.mystic-faq-section-item-content-inner .check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  position: relative;
  width: 100%;
}

.mystic-faq-section-item-content-inner .check-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
}

.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

/* Rich text formatting support for FAQ Section */
.mystic-faq-section-item-answer p {
  margin: 0 0 12px 0;
}

.mystic-faq-section-item-answer p:last-child {
  margin-bottom: 0;
}

.mystic-faq-section-item-answer strong,
.mystic-faq-section-item-answer b {
  font-weight: 700;
  color: inherit;
}

.mystic-faq-section-item-answer em,
.mystic-faq-section-item-answer i {
  font-style: italic;
  color: inherit;
}

.mystic-faq-section-item-answer ul,
.mystic-faq-section-item-answer ol {
  margin: 8px 0;
  padding-left: 20px;
}

.mystic-faq-section-item-answer li {
  margin-bottom: 4px;
  line-height: 1.6;
}

.mystic-faq-section-item-answer ul li {
  list-style-type: disc;
}

.mystic-faq-section-item-answer ol li {
  list-style-type: decimal;
}

.mystic-faq-section-item-answer h1,
.mystic-faq-section-item-answer h2,
.mystic-faq-section-item-answer h3,
.mystic-faq-section-item-answer h4,
.mystic-faq-section-item-answer h5,
.mystic-faq-section-item-answer h6 {
  margin: 16px 0 8px 0;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

.mystic-faq-section-item-answer h1:first-child,
.mystic-faq-section-item-answer h2:first-child,
.mystic-faq-section-item-answer h3:first-child,
.mystic-faq-section-item-answer h4:first-child,
.mystic-faq-section-item-answer h5:first-child,
.mystic-faq-section-item-answer h6:first-child {
  margin-top: 0;
}

.mystic-faq-section-item-answer blockquote {
  margin: 12px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--blue-700);
  background-color: rgba(14, 100, 150, 0.05);
  font-style: italic;
}

.mystic-faq-section-item-answer code {
  background-color: var(--mystic-shadow-medium);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: "Courier New", monospace;
  font-size: 14px;
}

.mystic-faq-section-item-answer pre {
  background-color: var(--mystic-shadow-light);
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 12px 0;
}

.mystic-faq-section-item-answer pre code {
  background: none;
  padding: 0 !important;
}

/* Enhanced check items styling for rich text in FAQ Section */
.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer p {
  margin: 0 !important;
  line-height: 1.6;
}

.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer ul,
.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer ol {
  margin: 4px 0;
  padding-left: 16px;
}

.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer li {
  margin-bottom: 2px;
  line-height: 1.5;
}

.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer strong,
.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer b {
  font-weight: 600;
}

.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer em,
.mystic-faq-section-item-content-inner .check-item .mystic-faq-section-item-answer i {
  font-style: italic;
}

/* Responsive styles for FAQ section */
@media (max-width: 1024px) {
  .mystic-faq-section-container {
    /* padding: 0px 16px; - Removed to allow Elementor control */
  }

  .mystic-faq-section-content {
    padding: 48px 16px 32px 16px;
  }

  .mystic-faq-section-main {
    flex-direction: column;
    gap: 32px;
  }

  .mystic-faq-section-image-container {
    height: auto;
    padding-right: 0;
    justify-content: center;
    order: -1;
    position: static;
    transition: none;
    display: none;
  }

  .mystic-faq-section-image-sticky {
    height: auto;
  }

  .mystic-faq-section-items {
    width: 100%;
  }
  .mystic-faq-section-items > div {
    max-width: 100% !important;
  }
  .mystic-faq-section-image {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  .mystic-faq-section-title {
    font-size: 36px;
    letter-spacing: -1.08px;
  }

  .mystic-faq-section-description {
    font-size: 15px;
  }

  .mystic-faq-section-content {
    padding: 32px 12px 24px 12px;
    gap: 32px;
  }

  .mystic-faq-section-inner {
    gap: 32px;
  }

  .mystic-faq-section-item-header {
    padding: 20px 0px;
    gap: 16px;
  }

  .mystic-faq-section-item-question {
    font-size: 16px;
  }

  .mystic-faq-section-item-answer {
    font-size: 15px;
  }

  .mystic-faq-section-image {
    /* width: 180px;
                    height: 222px; */
  }
}

@media (max-width: 480px) {
  .mystic-faq-section-title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  .mystic-faq-section-description {
    font-size: 14px;
  }

  .mystic-faq-section-content {
    /* padding: 24px 8px 16px 8px; - Removed to allow Elementor control */
  }

  .mystic-faq-section-item-header {
    padding: 16px 0px;
    gap: 12px;
  }

  .mystic-faq-section-item-question {
    font-size: 15px;
  }

  .mystic-faq-section-item-answer {
    font-size: 14px;
  }

  .mystic-faq-section-image {
    /* width: 160px;
                    height: 197px; */
  }

  .mystic-faq-section-button {
    padding: 12px 14px 12px 16px;
  }

  .mystic-faq-section-button-text {
    font-size: 14px;
  }
}

/* Accessibility for FAQ section */
@media (prefers-reduced-motion: reduce) {
  .mystic-faq-section-item-content {
    transition: none;
  }

  .mystic-faq-section-item-arrow {
    transition: none;
  }

  .mystic-faq-section-button {
    transition: none;
  }
}

/* High contrast mode support for FAQ section */
@media (prefers-contrast: high) {
  .mystic-faq-section-content {
    border: 2px solid currentColor;
  }

  .mystic-faq-divider {
    background: currentColor;
  }

  .mystic-faq-section-button {
    border: 2px solid var(--black-1000);
  }
}

/* ========================================
                   ALERT COMPONENT STYLES
                   ======================================== */

.mystic-alert-component {
  display: flex;
  width: 100%;
  max-width: 976px;
  padding: 16px;
  align-items: flex-start;
  gap: 16px;
  border-radius: 12px;
  border: 1px solid #ef9b11;
  background: #fff7dc;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  font-family: var(--font-public-sans);
  transition: var(--transition-fast);
  position: relative;
  overflow: visible;
  min-height: 80px;
  box-sizing: border-box;
}

.mystic-alert-component:hover {
  box-shadow: 0 2px 4px 0 rgba(16, 24, 40, 0.08);
}

/* Alert Variants */
.mystic-alert-component--warning {
  background: var(--brand-yellow-alt);
  border-color: var(--brand-yellow);
}

.mystic-alert-component--info {
  background: #f0f8ff;
  border-color: #3182ce;
}

.mystic-alert-component--success {
  background: #f0fff4;
  border-color: #38a169;
}

.mystic-alert-component--error {
  background: #fed7d7;
  border-color: #e53e3e;
}

/* Alert Icon */
.mystic-alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--brand-brown);
  align-self: center;
}

.mystic-alert-component--warning .mystic-alert-icon {
  color: var(--brand-brown);
}

.mystic-alert-component--info .mystic-alert-icon {
  color: #3182ce;
}

.mystic-alert-component--success .mystic-alert-icon {
  color: #38a169;
}

.mystic-alert-component--error .mystic-alert-icon {
  color: #e53e3e;
}

.mystic-alert-icon svg,
.mystic-alert-icon i {
  width: 20px;
  height: 20px;
  fill: currentColor;
  color: currentColor;
}

.mystic-alert-icon-element {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

/* Alert Content */
.mystic-alert-content {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
  flex-wrap: wrap;
  line-height: 1.5;
  padding-right: 44px;
}

.mystic-alert-highlight {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  color: var(--brand-brown);
  opacity: 0.9;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
  display: flex;
  align-items: center;
  align-self: center;
}

.mystic-alert-text {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.16px;
  color: var(--brand-brown);
  opacity: 0.9;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1;
  display: flex;
  align-items: center;
  align-self: center;
}

/* Alert Close Button */
.mystic-alert-close {
  display: flex;
  width: 36px;
  height: 36px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--neutral-400);
  transition: var(--transition-fast);
  flex-shrink: 0;
  position: absolute;
  top: 2px;
  right: 2px;
}

.mystic-alert-close:hover {
  background-color: var(--neutral-400);
  opacity: 0.1;
  color: var(--neutral-500);
}

.mystic-alert-close:focus {
  outline: 2px solid var(--neutral-400);
  opacity: 0.5;
  outline-offset: 2px;
  border-radius: 4px;
}

.mystic-alert-close:active {
  background-color: var(--neutral-400);
  opacity: 0.2;
  transform: scale(0.95);
}

.mystic-alert-close svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-alert-component {
    padding: 14px;
    gap: 12px;
    min-height: 70px;
    border-radius: 10px;
  }

  .mystic-alert-highlight,
  .mystic-alert-text {
    font-size: 15px;
  }

  .mystic-alert-close {
    width: 32px;
    height: 32px;
    padding: 6px;
    top: 1px;
    right: 1px;
  }

  .mystic-alert-close svg {
    width: 18px;
    height: 18px;
  }

  .mystic-alert-icon svg,
  .mystic-alert-icon i {
    width: 18px;
    height: 18px;
  }

  .mystic-alert-icon {
    width: 18px;
    height: 18px;
  }

  .mystic-alert-icon-element {
    width: 18px;
    height: 18px;
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .mystic-alert-component {
    padding: 12px;
    gap: 10px;
    min-height: 60px;
    border-radius: 8px;
  }

  .mystic-alert-highlight,
  .mystic-alert-text {
    font-size: 14px;
  }

  .mystic-alert-content {
    gap: 2px;
    padding-right: 32px;
  }

  .mystic-alert-close {
    width: 28px;
    height: 28px;
    padding: 4px;
    top: 0;
    right: 0;
  }

  .mystic-alert-close svg {
    width: 16px;
    height: 16px;
  }

  .mystic-alert-icon svg,
  .mystic-alert-icon i {
    width: 16px;
    height: 16px;
  }

  .mystic-alert-icon {
    width: 16px;
    height: 16px;
  }

  .mystic-alert-icon-element {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }

  /* Text can wrap on very small screens */
  .mystic-alert-highlight {
    white-space: normal;
  }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
  .mystic-alert-component,
  .mystic-alert-close {
    transition: none;
  }

  .mystic-alert-close:active {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .mystic-alert-component {
    border-width: 2px;
  }

  .mystic-alert-close {
    border: 1px solid currentColor;
  }
}

/* Print Styles */
@media print {
  .mystic-alert-close {
    display: none;
  }

  .mystic-alert-component {
    box-shadow: none;
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .mystic-alert-highlight,
  .mystic-alert-text {
    color: #000;
  }
}

/* ========================================
                   RESPONSIVE STYLES
                   ======================================== */

@media (max-width: 768px) {
  /* Mobile styles - inherit from desktop unless specifically overridden in Elementor */
  /* No forced typography overrides - let Elementor handle responsive typography */

  /* Mobile layout adjustments - typography handled by Elementor responsive controls */

  /* Mobile layout fixes for hero-leftaligned */
  .mystic-heading-component--hero-leftaligned .mystic-heading-layout {
    flex-direction: column;
    gap: 24px;
    padding: 16px 12px 0px 12px;
  }

  .mystic-heading-component--hero-leftaligned .mystic-heading-columns {
    flex-direction: column;
    gap: 24px;
  }

  .mystic-heading-component--hero-leftaligned .mystic-heading-left-column {
    max-width: 100%;
  }

  .mystic-heading-component--hero-leftaligned div[style*="display: flex"] {
    flex-direction: column;
    gap: 24px;
  }

  .mystic-heading-component--hero-leftaligned div[style*="width: 688px"] {
    width: 100%;
  }

  /* Subtitle mobile adjustments - removed hardcoded font sizes to allow Elementor typography controls to work */
  /* Typography controls will now handle responsive sizing automatically */

  /* Button adjustments */
  .mystic-design-button--primary,
  .mystic-design-button--secondary,
  .mystic-design-button--white-bg,
  .mystic-design-button--outline {
    padding: 12px 20px;
  }

  .mystic-button-group {
    gap: 12px;
  }

  /* Mobile button group layout fixes */
  .mystic-button-group--horizontal {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .mystic-button-group--horizontal .mystic-design-button {
    width: 100%;
    max-width: 280px;
  }
  .mystic-badge-label {
    /* Typography controls will handle responsive sizing */
  }
  .mystic-label-component {
    /* Typography controls will handle responsive sizing */
    padding: 5px 10px;
  }

  /* Accordion adjustments */
  .mystic-accordion-item {
    /* margin-bottom: 12px; */
  }
  .mystic-accordion-header {
    padding: 12px;
  }
  .mystic-accordion-content-inner {
    padding: 0 12px 12px 12px;
    gap: 0;
    height: auto;
    min-height: 0;
  }
  .mystic-accordion-title {
    font-size: 16px;
  }
  .mystic-accordion-description {
    font-size: 14px;
    margin: 0 !important;
  }

  .mystic-accordion-check-item {
    font-size: 14px;
  }

  .mystic-accordion-checks {
    margin-bottom: 12px;
  }
  .mystic-accordion-button {
    padding: 12px 14px 12px 16px;
    font-size: 14px;
  }

  .mystic-accordion-content-inner .mystic-design-button {
    margin-top: 12px;
    max-width: 100%;
    width: auto;
    min-width: 0;
  }

  /* Ensure proper text overflow for accordion buttons on mobile */
  .mystic-accordion-content-inner .mystic-design-button .mystic-button-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
  }

  .mystic-accordion-dot-new {
    width: 6px;
    height: 6px;
  }

  .mystic-accordion-dot-new {
    width: 6px;
    height: 6px;
  }

  /* Icon adjustments */
  .mystic-icon-lg {
    width: 56px;
    height: 56px;
    padding: 14px;
  }
  .mystic-icon-lg-icon {
    width: 28px;
    height: 28px;
  }
  .mystic-icon-md {
    width: 48px;
    height: 48px;
    padding: 12px;
  }
  .mystic-icon-md-icon {
    width: 24px;
    height: 24px;
  }

  /* Rating badge adjustments */
  .mystic-rating-badge {
    font-size: 11px;
    letter-spacing: 0.22px;
    padding: 0px 5px;
    height: 16px;
  }
  .mystic-rating-badge__text {
    font-size: 11px;
    letter-spacing: 0.22px;
  }
  .mystic-rating-badge__star {
    width: 9px;
    height: 9px;
  }

  /* User profile adjustments */
  .mystic-user-profile {
    gap: 10px;
  }
  .mystic-user-profile__avatar {
    width: 40px;
    height: 40px;
  }
  .mystic-user-profile__name,
  .mystic-user-profile__description {
    font-size: 13px;
  }

  /* Card adjustments */
  .mystic-info-card {
    gap: 32px;
    padding: 20px;
  }
  .mystic-info-card__icon-container {
    width: 48px;
    height: 48px;
    padding: 12px;
  }
  .mystic-card-title {
    font-size: 16px;
  }
  .mystic-card-description {
    font-size: 15px;
  }

  .mystic-no-bg-card {
    gap: 24px;
  }
  .mystic-no-bg-card__icon-container {
    width: 48px;
    height: 48px;
    padding: 12px;
  }
  .mystic-no-bg-card__content {
    gap: 20px;
  }

  .mystic-card-horizontal {
    flex-direction: column;
    gap: 20px;
  }
  .mystic-card-horizontal__icon-container {
    padding: 12px;
  }
  .mystic-card-horizontal__content {
    gap: 14px;
  }

  /* Enhanced mobile tabs with better touch targets and overflow handling */
  .mystic-tabs-nav {
    gap: 8px;
    padding-bottom: 12px;
    padding-left: 8px;
    padding-right: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mystic-tab {
    padding-bottom: 0;
    gap: 16px;
    flex-shrink: 0;
    min-width: fit-content;
    padding-left: 12px;
    padding-right: 12px;
    scroll-snap-align: start;
  }

  .mystic-tab__label {
    font-size: 14px;
    letter-spacing: -0.14px;
    white-space: nowrap;
    text-align: center;
    word-break: keep-all;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
    min-width: max-content;
    padding: 0 8px;
    line-height: 1.2;
  }
  .mystic-tabs-content-editor .mystic-tab-content {
    margin-bottom: 24px;
    padding: 16px;
  }
  .mystic-tab-content-header {
    font-size: 13px;
    margin-bottom: 12px;
  }

  /* FAQ Section adjustments */
  .mystic-faq-section {
    flex-direction: column;
    gap: 48px;
    /* padding: 60px 20px; - Removed to allow Elementor control */
  }

  .mystic-faq-section-image-container {
    width: 100%;
    height: 300px;
    position: static;
    order: -1;
  }

  .mystic-faq-section-title {
    font-size: 36px;
    letter-spacing: -1.08px;
  }
  .mystic-faq-section-description {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  /* Small mobile layout adjustments - typography handled by Elementor responsive controls */

  /* Icon adjustments */
  .mystic-icon-lg {
    width: 48px;
    height: 48px;
    padding: 12px;
  }
  .mystic-icon-lg-icon {
    width: 24px;
    height: 24px;
  }
  .mystic-icon-md {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
  .mystic-icon-md-icon {
    width: 20px;
    height: 20px;
  }

  /* Rating badge adjustments */
  .mystic-rating-badge {
    font-size: 10px;
    letter-spacing: 0.2px;
    padding: 0px 4px;
    height: 14px;
  }
  .mystic-rating-badge__text {
    font-size: 10px;
    letter-spacing: 0.2px;
  }
  .mystic-rating-badge__star {
    width: 8px;
    height: 8px;
  }

  /* User profile adjustments */
  .mystic-user-profile {
    gap: 8px;
  }
  .mystic-user-profile__avatar {
    width: 36px;
    height: 36px;
  }
  .mystic-user-profile__name,
  .mystic-user-profile__description {
    font-size: 12px;
  }
  .mystic-user-profile__header {
    gap: 6px;
  }

  /* Card adjustments */
  .mystic-info-card {
    gap: 24px;
    padding: 16px;
  }
  .mystic-info-card__icon-container {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
  .mystic-info-card__content {
    gap: 16px;
  }
  .mystic-info-card__text-content {
    gap: 10px;
  }
  .mystic-card-title {
    font-size: 15px;
  }
  .mystic-card-description {
    font-size: 14px;
  }

  .mystic-no-bg-card {
    gap: 20px;
    padding: 20px 0;
    width: 100%;
  }
  .mystic-no-bg-card__icon-container {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
  .mystic-no-bg-card__content {
    gap: 16px;
  }
  .mystic-no-bg-card__text-content {
    gap: 8px;
  }

  /* Enhanced small mobile tabs */
  .mystic-tabs-nav {
    gap: 6px;
    padding-bottom: 12px;
    padding-left: 6px;
    padding-right: 6px;
  }

  .mystic-tabs-nav::after {
    height: 1.5px;
  }

  .mystic-tab {
    padding-bottom: 0;
    gap: 12px;
    flex-shrink: 0;
    min-width: fit-content;
    padding-left: 8px;
    padding-right: 8px;
  }

  .mystic-tab__label {
    font-size: 13px;
    letter-spacing: -0.13px;
    white-space: nowrap;
    text-align: center;
    overflow: visible;
    text-overflow: unset;
    max-width: none;
  }

  /* Mobile arrow adjustments */
  .mystic-tabs-arrow {
    width: 28px;
    height: 28px;
  }

  .mystic-tabs-arrow--left {
    left: -14px;
  }

  .mystic-tabs-arrow--right {
    right: -14px;
  }

  .mystic-tabs-arrow svg {
    width: 14px;
    height: 14px;
    min-width: max-content;
    padding: 0 6px;
    line-height: 1.1;
  }
  .mystic-tabs-content-editor .mystic-tab-content {
    margin-bottom: 20px;
    padding: 12px;
  }
  .mystic-tab-content-header {
    font-size: 12px;
    margin-bottom: 10px;
  }

  /* FAQ Section adjustments */
  .mystic-faq-section {
    /* padding: 40px 16px; - Removed to allow Elementor control */
  }
  .mystic-faq-section-title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }
  .mystic-faq-section-description {
    font-size: 15px;
  }
}

/* ========================================
                   ACCESSIBILITY & UTILITY STYLES
                   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .mystic-design-button,
  .mystic-icon-component,
  .mystic-rating-badge {
    transition: none;
  }

  .mystic-icon-component:hover,
  .mystic-rating-badge:hover {
    transform: none;
  }
}

.mystic-design-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Primary button focus-visible styles */
.mystic-design-button--primary:focus-visible {
  background: #f5bc2a;
  color: #431b05;
}

/* Secondary button focus-visible styles */
.mystic-design-button--secondary:focus-visible {
  background: var(--blue-950);
  color: white;
  outline: 2px solid var(--blue-900);
  outline-offset: 2px;
}

/* White button focus-visible styles */
.mystic-design-button--white:focus-visible,
.mystic-design-button--white-bg:focus-visible {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  outline: 2px solid var(--blue-900);
  outline-offset: 2px;
}

.mystic-design-button--white:focus-visible svg path,
.mystic-design-button--white-bg:focus-visible svg path {
  stroke: var(--blue-900) !important;
}

.mystic-design-button--white:focus-visible .mystic-arrow-icon path,
.mystic-design-button--white-bg:focus-visible .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

/* Outline button focus-visible styles */
.mystic-design-button--outline:focus-visible {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  border-color: var(--blue-900) !important;
  outline: 2px solid var(--blue-900) !important;
  outline-offset: -2px !important;
}

.mystic-design-button--outline:focus-visible .mystic-arrow-icon path {
  stroke: var(--blue-900) !important;
}

/* Link button focus-visible styles */
.mystic-design-button--link:focus-visible {
  color: #0f557d;
  outline: 2px solid var(--blue-900) !important;
  outline-offset: -2px !important;
}

/* FAB button focus-visible styles */
.mystic-design-button--fab:focus-visible {
  background: #f5f5f5 !important;
  color: var(--black-1000) !important;
  outline: 2px solid var(--blue-900);
  outline-offset: 2px;
}

/* FAB blue variant focus-visible styles */
.mystic-design-button--fab.mystic-design-button--fab-blue:focus-visible {
  background: var(--blue-950) !important;
  color: white !important;
  outline: 2px solid var(--blue-900);
  outline-offset: 2px;
}

@media (prefers-contrast: high) {
  .mystic-design-button--primary {
    border: 2px solid var(--brand-brown);
  }
  .mystic-design-button--secondary {
    border: 2px solid white;
  }

  .mystic-section-badge {
    border: 2px solid currentColor;
  }
  .mystic-icon-component {
    border-width: 2px;
  }
  .mystic-rating-badge {
    border: 1px solid currentColor;
  }
}

@media (prefers-color-scheme: dark) {
  .mystic-design-button--fab {
    background-color: #1f2937;
    color: #f9fafb;
    border-color: #374151;
  }

  .mystic-design-button--fab:hover {
    background-color: #111827;
  }

  .mystic-icon-component {
    border-color: rgba(255, 255, 255, 0.2);
    color: #60a5fa;
  }
}

@media print {
  .mystic-design-button,
  .mystic-section-badge,
  .mystic-rating-badge {
    color: black;
    background: white;
    border: 1px solid black;
  }

  .mystic-rating-badge__star {
    fill: black;
  }
}

/* ========================================
                   DISCLAIMER COMPONENT STYLES
                   ======================================== */

.mystic-disclaimer-component {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 992px;
  font-family: var(--font-public-sans);
}

/* Default variant */
.mystic-disclaimer-component--default {
  padding: 24px;
  gap: 8px;
  border-radius: var(--border-radius-md);
  background-color: var(--federal-bg);
}

.mystic-disclaimer-component--default .mystic-disclaimer-content {
  flex: 1;
  color: var(--black-900);
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  letter-spacing: 0.16px;
}

.mystic-disclaimer-component--default .mystic-disclaimer-highlight {
  font-weight: 700;
}

.mystic-disclaimer-component--default .mystic-disclaimer-bold {
  font-weight: 700;
}

.mystic-disclaimer-component--default .mystic-disclaimer-link {
  color: var(--Illustration-Accent-02-text, #243dc7);
  font-family: "Public Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 170%;
  letter-spacing: 0.16px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: var(--transition-fast);
}

.mystic-disclaimer-component--default .mystic-disclaimer-link:hover {
  text-decoration: none;
}

/* Side note variant */
.mystic-disclaimer-component--side-note {
  padding: 24px;
  gap: 8px;
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  border-left: 2px solid var(--federal-text);
  background-color: var(--federal-bg);
}

.mystic-disclaimer-component--side-note .mystic-disclaimer-content {
  flex: 1;
  color: var(--black-900);
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  letter-spacing: 0.16px;
}

.mystic-disclaimer-component--side-note .mystic-disclaimer-highlight {
  font-weight: 700;
}

.mystic-disclaimer-component--side-note .mystic-disclaimer-bold {
  font-weight: 700;
}

.mystic-disclaimer-component--side-note .mystic-disclaimer-link {
  color: var(--Illustration-Accent-02-text, #243dc7);
  font-family: "Public Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 170%;
  letter-spacing: 0.16px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: var(--transition-fast);
}

.mystic-disclaimer-component--side-note .mystic-disclaimer-link:hover {
  text-decoration: none;
}

/* CTA variant */
.mystic-disclaimer-component--cta {
  padding: 20px 24px;
  gap: 16px;
  border-radius: var(--border-radius-md);
  background-color: var(--brand-yellow-alt);
}

.mystic-disclaimer-component--cta .mystic-disclaimer-content {
  flex: 1;
  color: var(--brand-brown);
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
}

.mystic-disclaimer-component--cta .mystic-disclaimer-tip {
  color: var(--brand-brown);
  font-weight: 700;
}

.mystic-disclaimer-component--cta .mystic-disclaimer-bold {
  font-weight: 700;
}

.mystic-disclaimer-component--cta .mystic-disclaimer-link {
  color: var(--blue-600);
  text-decoration: underline;
  transition: var(--transition-fast);
}

.mystic-disclaimer-component--cta .mystic-disclaimer-link:hover {
  text-decoration: none;
}

.mystic-disclaimer-component--cta .mystic-disclaimer-button {
  display: flex;
  width: 260px;
  height: 48px;
  padding: 15px 16px 15px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: var(--border-radius-sm);
  background-color: var(--brand-yellow);
  color: var(--brand-brown);
  text-decoration: none;
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  transition: var(--transition-fast);
  border: none;
  cursor: pointer;
}

.mystic-disclaimer-component--cta .mystic-disclaimer-button:hover {
  background-color: #e6bb00;
  text-decoration: none;
}

.mystic-disclaimer-component--cta .mystic-disclaimer-button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--brand-yellow);
}

.mystic-disclaimer-component--cta .mystic-disclaimer-button .mystic-button-text {
  color: var(--brand-brown);
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

.mystic-disclaimer-component--cta .mystic-disclaimer-button .mystic-arrow-icon {
  width: 20px;
  height: 20px;
  color: var(--brand-brown);
  flex-shrink: 0;
}

/* Responsive styles */
@media (max-width: 768px) {
  .mystic-disclaimer-component {
    max-width: 100%;
  }

  .mystic-disclaimer-component--default,
  .mystic-disclaimer-component--side-note {
    padding: 20px;
    gap: 6px;
  }

  .mystic-disclaimer-component--default .mystic-disclaimer-content,
  .mystic-disclaimer-component--side-note .mystic-disclaimer-content {
    font-size: 15px;
    line-height: 160%;
    letter-spacing: 0.15px;
  }

  .mystic-disclaimer-component--cta {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px;
    gap: 16px;
  }

  .mystic-disclaimer-component--cta .mystic-disclaimer-content {
    font-size: 13px;
  }

  .mystic-disclaimer-component--cta .mystic-disclaimer-button {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .mystic-disclaimer-component--default,
  .mystic-disclaimer-component--side-note {
    padding: 16px;
  }

  .mystic-disclaimer-component--default .mystic-disclaimer-content,
  .mystic-disclaimer-component--side-note .mystic-disclaimer-content {
    font-size: 14px;
    line-height: 155%;
  }

  .mystic-disclaimer-component--cta {
    padding: 16px 18px;
  }

  .mystic-disclaimer-component--cta .mystic-disclaimer-content {
    font-size: 12px;
  }

  .mystic-disclaimer-component--cta .mystic-disclaimer-button {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .mystic-disclaimer-link,
  .mystic-disclaimer-button {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .mystic-disclaimer-component--default,
  .mystic-disclaimer-component--side-note {
    border: 2px solid var(--federal-text);
  }

  .mystic-disclaimer-component--cta {
    border: 2px solid var(--blue-600);
  }

  .mystic-disclaimer-component--cta .mystic-disclaimer-button {
    border: 2px solid var(--brand-brown);
  }
}

/* Print styles */
@media print {
  .mystic-disclaimer-component {
    background: white;
    border: 1px solid black;
  }

  .mystic-disclaimer-content,
  .mystic-disclaimer-link,
  .mystic-disclaimer-tip {
    color: black;
  }

  .mystic-disclaimer-button {
    background: white;
    color: black;
    border: 1px solid black;
  }
}

/* ========================================
                   ELEMENTOR SPECIFIC STYLES
                   ======================================== */

.elementor-widget-mystic-design-button .elementor-widget-container,
.elementor-widget-mystic-section-badge .elementor-widget-container,
.elementor-widget-mystic-button-group .elementor-widget-container,
.elementor-widget-mystic-heading-component .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-widget .mystic-button-wrapper,
.elementor-widget .mystic-badge-wrapper {
  text-align: inherit;
}

.elementor-editor .mystic-design-button,
.elementor-editor .mystic-section-badge,
.elementor-editor .mystic-heading-component a {
  pointer-events: none;
}

/* ========================================
                   INNER BANNER COMPONENT STYLES
                   ======================================== */

.mystic-inner-banner-wrapper {
  width: 100%;
  max-width: 976px;
  margin: 0 auto;
}

/* Headline Variant */
.mystic-inner-banner--headline {
  display: flex;
  padding: 32px;
  align-items: flex-start;
  gap: 32px;
  border-radius: 16px;
  background: var(--brand-blue);
  position: relative;
  overflow: hidden;
}

.mystic-inner-banner-content {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 32px;
  z-index: 1;
}

.mystic-inner-banner-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.mystic-inner-banner-title {
  color: var(--White-1000, #fff);
  /* Headline/h4 */
  font-family: "Public Sans";
  font-size: var(--headline-h4, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 28.8px */
  letter-spacing: -0.48px;
  margin: 0 !important;
}

.mystic-inner-banner-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.mystic-inner-banner-subtitle {
  color: var(--White-1000, #fff);
  /* Paragraph/p1-regular */
  font-family: "Public Sans";
  font-size: var(--Paragraph-p1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
  letter-spacing: 0.16px;
  margin: 0 !important;
}

.mystic-inner-banner-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.mystic-inner-banner-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mystic-inner-banner-check-icon {
  color: var(--brand-yellow);
}

.mystic-inner-banner-item-text {
  color: var(--White-1000, #fff);
  /* Paragraph/p1-regular */
  font-family: "Public Sans";
  font-size: var(--Paragraph-p1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
  letter-spacing: 0.16px;
}

.mystic-inner-banner-highlight {
  color: var(--blue-300);
  /* Paragraph/p1-regular */
  font-family: "Public Sans";
  font-size: var(--Paragraph-p1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.mystic-inner-banner-link {
  color: inherit;
  /* Paragraph/p1-regular */
  font-family: "Public Sans";
  font-size: var(--Paragraph-p1, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: var(--transition-fast);
}

.mystic-inner-banner-link:hover {
  opacity: 0.8;
}

/* Star Decoration */
.mystic-inner-banner-star-decoration {
  position: absolute;
  right: -140px;
  bottom: -170px;
  width: 400px;
  height: 400px;
  pointer-events: none;
}

.mystic-inner-banner-star-group {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Plus shape bars */
.mystic-inner-banner-star-plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 199.557px;
  height: 203.394px;
}

/* Diagonal bars */
.mystic-inner-banner-star-diagonals {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 199.557px;
  height: 203.394px;
}

.mystic-inner-banner-star-bar {
  position: absolute;
  background: #165277;
  border-radius: 3.562px;
}

/* Plus shape bars */
.mystic-inner-banner-star-bar--vertical {
  width: 26.863px;
  height: 199.557px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mystic-inner-banner-star-bar--horizontal {
  width: 199.557px;
  height: 26.863px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* Diagonal bars */
.mystic-inner-banner-star-bar--diagonal1 {
  width: 26.863px;
  height: 199.557px;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.mystic-inner-banner-star-bar--diagonal2 {
  width: 26.863px;
  height: 199.557px;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
}

/* Button */
.mystic-inner-banner-button-wrapper {
  margin-top: 8px;
}

.mystic-inner-banner-button {
  display: inline-flex;
  padding: 12px 24px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--brand-blue);
  color: white;
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: var(--transition-fast);
  border: none;
  cursor: pointer;
}

.mystic-inner-banner-button:hover {
  background: #0f3d5a;
  color: white;
  text-decoration: none;
}

/* Column Links Variant */
.mystic-inner-banner--column-links {
  display: flex;
  padding: 32px;
  align-items: flex-start;
  gap: 32px;
  border-radius: 16px;
  background: var(--brand-yellow-alt);
  border: 1px solid var(--brand-yellow);
}

.mystic-inner-banner-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.mystic-inner-banner-column-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.mystic-inner-banner-column--left .mystic-inner-banner-column-content {
  align-items: flex-start;
}

.mystic-inner-banner-column-title {
  font-family: "Public Sans";
  font-size: var(--headline-h5, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 26px */
  color: var(--brand-blue);
  margin: 0 !important;
}

.mystic-inner-banner-column-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.mystic-inner-banner-column-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mystic-inner-banner-column-link {
  font-family: "Public Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-underline-position: from-font;
  text-decoration-color: var(--blue-600);
  transition: var(--transition-fast);
}

.mystic-inner-banner-column-link:hover {
  color: var(--brand-brown);
}

.mystic-inner-banner-column-button-wrapper {
  margin-top: 8px;
}

.mystic-inner-banner-column-button {
  display: inline-flex;
  padding: 12px 24px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--brand-blue);
  color: white;
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: var(--transition-fast);
  border: none;
  cursor: pointer;
}

.mystic-inner-banner-column-button:hover {
  background: #0f3d5a;
  color: white;
  text-decoration: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-inner-banner--headline {
    padding: 24px;
    gap: 24px;
    flex-direction: column;
  }

  .mystic-inner-banner-content {
    gap: 24px;
    flex-direction: column;
  }

  .mystic-inner-banner-title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  .mystic-inner-banner-subtitle {
    font-size: 16px;
  }

  .mystic-inner-banner-item-text {
    font-size: 15px;
  }

  .mystic-inner-banner--column-links {
    padding: 24px;
    gap: 24px;
    flex-direction: column;
  }

  .mystic-inner-banner-column-title {
    font-size: 20px;
    letter-spacing: -0.6px;
  }

  .mystic-inner-banner-column-link {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .mystic-inner-banner--headline {
    padding: 20px;
    gap: 20px;
  }

  .mystic-inner-banner-content {
    gap: 20px;
  }

  .mystic-inner-banner-title {
    font-size: 24px;
    letter-spacing: -0.72px;
  }

  .mystic-inner-banner-subtitle {
    font-size: 15px;
  }

  .mystic-inner-banner-item-text {
    font-size: 14px;
  }

  .mystic-inner-banner--column-links {
    padding: 20px;
    gap: 20px;
  }

  .mystic-inner-banner-column-title {
    font-size: 18px;
    letter-spacing: -0.54px;
  }

  .mystic-inner-banner-column-link {
    font-size: 14px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .mystic-inner-banner-link,
  .mystic-inner-banner-column-link,
  .mystic-inner-banner-button,
  .mystic-inner-banner-column-button {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .mystic-inner-banner--headline,
  .mystic-inner-banner--column-links {
    border-width: 2px;
  }

  .mystic-inner-banner-button,
  .mystic-inner-banner-column-button {
    border: 2px solid var(--brand-brown);
  }
}

/* Print styles */
@media print {
  .mystic-inner-banner--headline,
  .mystic-inner-banner--column-links {
    background: white;
    border: 1px solid black;
    box-shadow: none;
  }

  .mystic-inner-banner-title,
  .mystic-inner-banner-subtitle,
  .mystic-inner-banner-item-text,
  .mystic-inner-banner-column-title,
  .mystic-inner-banner-column-link {
    color: black;
  }

  .mystic-inner-banner-button,
  .mystic-inner-banner-column-button {
    background: white;
    color: black;
    border: 1px solid black;
  }
}

/* ========================================
                   NUMBER LIST COMPONENT STYLES
                   ======================================== */

.mystic-number-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 656px;
  gap: 0;
}

.mystic-number-list-item {
  display: flex;
  width: 100%;
  padding: 16px 0;
  align-items: flex-start;
  gap: 16px;
  border-top: 1px solid var(--mystic-border-light);
  position: relative;
  min-height: 88px;
}

/* Removed the rule that hides the line for the last child to fix the vertical line bug */

.mystic-number-list-left {
  display: flex;
  width: 36px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
}

.mystic-number-list-number-container {
  display: flex;
  width: 24px;
  padding: 3px 0 32px 0;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
}

.mystic-number-list-number {
  width: 24px;
  color: var(--number-color, rgba(20, 20, 20, 0.7));
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  position: absolute;
  left: 0px;
  top: 3px;
  height: 21px;
  text-align: left;
}

.mystic-number-list-line {
  width: 1px;
  height: 56px;
  background: var(--line-color, var(--mystic-border-light));
  position: relative;
}

.mystic-number-list-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
  position: relative;
}

.mystic-number-list-title {
  align-self: stretch;
  color: var(--black-1000);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  position: relative;
}

.mystic-number-list-description {
  align-self: stretch;
  color: var(--description-color, rgba(20, 20, 20, 0.7));
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  position: relative;
}

.mystic-number-list-highlight {
  font-weight: 600;
  color: var(--black-1000);
}

/* Number List Link Styling - High Specificity to Override Elementor */
.mystic-number-list .mystic-number-list-description .mystic-number-list-text-link,
.mystic-number-list-description .mystic-number-list-text-link,
.mystic-number-list-text-link {
  text-decoration: underline !important;
  text-decoration-skip-ink: none !important;
  font-weight: inherit !important;
  background: transparent !important;
}

/* Override any Elementor global link styles */
.elementor-widget .mystic-number-list .mystic-number-list-text-link,
.elementor-widget .mystic-number-list-description .mystic-number-list-text-link {
  text-decoration: underline !important;
}

.mystic-number-list-text-link:hover {
  color: #0a3d5a;
}

.mystic-number-list-text-link:focus {
  outline: 2px solid #0f557d;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Display-only link styling (visual only, not clickable) */
.mystic-number-list-display-link {
  color: #0f557d !important;
  text-decoration: underline !important;
  text-decoration-skip-ink: none !important;
  font-weight: inherit !important;
  background: transparent !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Responsive styles for number list */
@media (max-width: 768px) {
  .mystic-number-list {
    max-width: 100%;
  }

  .mystic-number-list-item {
    padding: 12px 0;
    gap: 12px;
    min-height: 72px;
  }

  .mystic-number-list-left {
    width: 32px;
  }

  .mystic-number-list-number-container {
    width: 20px;
    padding: 3px 0 24px 0;
  }

  .mystic-number-list-number {
    width: 20px;
    font-size: 13px;
  }

  .mystic-number-list-line {
    height: 48px;
  }

  .mystic-number-list-title {
    font-size: 15px;
  }

  .mystic-number-list-description {
    font-size: 15px;
  }

  .mystic-number-list-text-link {
    font-size: 15px;
  }
}

/* ========================================
                   IMAGE CARD COMPONENT STYLES
                   ======================================== */

.mystic-image-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  border-radius: var(--radius-01, 12px);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    width 0.3s ease;
  min-width: 80px; /* Further reduced to allow much more flexible shrinking */
  min-height: 350px;
  max-width: 500px;
  flex-shrink: 0;
  width: 280px;
}

/* Auto flex support for image cards */
.mystic-image-card-auto-flex {
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-width: 80px; /* Further reduced to allow much more flexible shrinking */
}

.mystic-image-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 320px;
}

/* Auto flex hover behavior */
.mystic-image-card-auto-flex:hover {
  width: 100%;
  flex: 1.2 1 auto;
}

.mystic-image-card-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.mystic-image-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.mystic-image-card-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 248px;
  z-index: 2;
  pointer-events: none;
}

.mystic-image-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: var(--spacing-06, 24px);
  transition: transform 0.3s ease;
}

.mystic-image-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-02, 8px);
  width: 100%;
  margin-bottom: 0;
  transition: margin-bottom 0.3s ease;
}

.mystic-image-card:hover .mystic-image-card-text {
  margin-bottom: var(--spacing-06, 24px);
}

.mystic-image-card-caption {
  color: var(--White-700, rgba(255, 255, 255, 0.7));
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: var(--Caption-c1, 12px);
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.24px;
}

.mystic-image-card-title {
  color: var(--White-1000, #ffffff);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: var(--headline-h5, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  width: 100%;
}

.mystic-image-card-description {
  color: rgba(255, 255, 255, 0.8);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  width: 100%;
}

.mystic-image-card-button {
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  align-self: flex-start;
}

.mystic-image-card:hover .mystic-image-card-button {
  opacity: 1;
  transform: translateY(0);
}

.mystic-image-card-fab {
  display: flex;
  width: 56px;
  height: 56px;
  padding: 18px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: var(--White-1000, #ffffff);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  text-decoration: none;
}

.mystic-image-card-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.mystic-image-card-fab svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mystic-image-card {
    min-width: 60px; /* Further reduced to allow much more flexible shrinking */
    min-height: 300px;
  }

  .mystic-image-card-auto-flex {
    min-width: 60px; /* Further reduced to allow much more flexible shrinking */
    flex: 1 1 auto;
  }

  .mystic-image-card-content {
    padding: 20px;
    gap: 20px;
  }

  .mystic-image-card-title {
    font-size: 18px;
  }

  .mystic-image-card-caption {
    font-size: 11px;
  }

  .mystic-image-card-fab {
    width: 48px;
    height: 48px;
    padding: 14px;
  }

  .mystic-image-card-fab svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .mystic-image-card {
    min-width: 50px; /* Further reduced to allow much more flexible shrinking */
    min-height: 250px;
  }

  .mystic-image-card-auto-flex {
    min-width: 50px; /* Further reduced to allow much more flexible shrinking */
    flex: 1 1 auto;
  }

  .mystic-image-card:hover {
    width: 280px;
  }

  .mystic-image-card-auto-flex:hover {
    flex: 1.1 1 auto;
  }
}

/* =============================================
                   ADVANCED ACCORDION COMPONENT
                   ============================================= */

.advanced-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1040px;
}

.advanced-accordion-item {
  border-radius: 16px;
  background: var(--mystic-bg-white);
  border: none;
  margin-bottom: 16px;
}

/* Remove margin when expanded to eliminate gap */
.advanced-accordion-item.expanded {
  margin-bottom: 0;
}

.advanced-accordion-header {
  display: flex;
  width: 100%;
  height: 64px;
  padding: 8px 24px;
  align-items: center;
  gap: 8px;
  border: none;
  background: var(--mystic-bg-white);
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.advanced-accordion-header:hover {
  background: #f8f9fa;
}

.advanced-accordion-header:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(19, 73, 106, 0.2);
}

.advanced-accordion-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.advanced-accordion-title-section {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.advanced-accordion-number {
  width: 24px;
  color: rgba(20, 20, 20, 0.6);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}

.advanced-accordion-divider {
  width: 1px;
  height: 16px;
  background: #d9d9de;
}

.advanced-accordion-title {
  color: var(--mystic-text-dark);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 130%;
}

.advanced-accordion-arrow {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.advanced-accordion-arrow.expanded {
  transform: rotate(180deg);
}

.advanced-accordion-arrow.collapsed {
  transform: rotate(0deg);
}

/* Accordion Content Sections */
.advanced-accordion-content {
  padding: 24px 16px;
  background-color: var(--mystic-bg-white);
  border-top: 1px solid #eeeef0;
  transition: all 0.3s ease;
  border-radius: 0 0 16px 16px;
  margin-bottom: 16px;
  padding-top: 0px;
}

/* Default state - all corners rounded */
.advanced-accordion-header {
  border-radius: 16px;
}

/* When accordion item is expanded, header has only top rounded corners */
.advanced-accordion-item.expanded .advanced-accordion-header {
  border-radius: 16px 16px 0 0;
}

/* Override any Elementor styles */
.elementor-widget-mystic_advanced_accordion .advanced-accordion-item.expanded .advanced-accordion-header {
  border-radius: 16px 16px 0 0;
}

/* Force override for all accordion items */
.advanced-accordion .advanced-accordion-item.expanded .advanced-accordion-header {
  border-radius: 16px 16px 0 0;
}

/* Advanced Accordion Badge Styles */
.advanced-accordion-badge {
  display: flex;
  padding: var(--spacing-01, 4px) var(--spacing-03, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-03, 12px);
  align-self: stretch;
  border-radius: var(--radius-02, 16px);
  background: var(--Black-100, rgba(20, 20, 20, 0.1));
  margin-left: 12px;
}

.advanced-accordion-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--Black-700, rgba(20, 20, 20, 0.7));
  flex-shrink: 0;
}

.advanced-accordion-badge-icon svg {
  width: 100%;
  height: 100%;
}

.advanced-accordion-badge-text {
  color: var(--Black-700, rgba(20, 20, 20, 0.7));
  font-family: "Public Sans";
  font-size: var(--Paragraph-p2, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

/* Responsive badge styles */
@media (max-width: 768px) {
  .advanced-accordion-badge {
    margin-left: 8px;
    padding: 3px 8px;
    gap: 8px;
  }

  .advanced-accordion-badge-icon {
    width: 16px;
    height: 16px;
  }

  .advanced-accordion-badge-text {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .advanced-accordion-badge {
    margin-left: 6px;
    padding: 2px 6px;
    gap: 6px;
  }

  .advanced-accordion-badge-icon {
    width: 14px;
    height: 14px;
  }

  .advanced-accordion-badge-text {
    font-size: 11px;
  }
}

/* =============================================
                   TIMELINE CAROUSEL COMPONENT
                   ============================================= */

.timeline-carousel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px;
  background: var(--e-global-color-white, #fff);
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow: visible;
}

/* Header */
.timeline-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.timeline-carousel-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-carousel-main-title {
  font-family:
    var(--e-global-typography-primary-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: var(--e-global-typography-primary-font-size, 64px);
  font-weight: var(--e-global-typography-primary-font-weight, 500);
  font-style: italic;
  line-height: 115%;
  letter-spacing: -1.92px;
  color: var(--black-1000);
  margin: 0 !important;
}

.timeline-carousel-highlight {
  color: var(--e-global-color-accent, #0e6496);
}

.timeline-carousel-subtitle {
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: var(--e-global-typography-text-font-size, 18px);
  font-weight: var(--e-global-typography-text-font-weight, 400);
  line-height: 150%;
  letter-spacing: 0.18px;
  color: var(--e-global-color-text-muted, rgba(0, 0, 0, 0.7));
  margin: 0 !important;
}

/* Navigation Arrows */
.timeline-carousel-navigation {
  display: flex;
  align-items: center;
  gap: 16px;
}

.timeline-carousel-nav-button {
  display: flex;
  width: 56px;
  height: 56px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
}

.timeline-carousel-nav-button.prev {
  border: 1px solid var(--e-global-color-secondary, var(--mystic-brand-blue));
  color: var(--blue-950);
  background: var(--e-global-color-white, #fff);
}

.timeline-carousel-nav-button.next {
  background: var(--e-global-color-secondary, #0f557d);
  color: var(--e-global-color-white, #f1f9fe);
}

.timeline-carousel-nav-button:hover:not(:disabled) {
  transform: scale(1.05);
}

.timeline-carousel-nav-button:disabled,
.timeline-carousel-nav-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Main Content */
.timeline-carousel-content {
  display: flex;
  height: 480px;
  gap: 134px;
  align-items: stretch;
  width: 100%;
  overflow: visible;
  margin-top: 8px;
}

/* Image Section - Takes 1/3 of available space */
.timeline-carousel-image-container {
  flex: 1;
  height: 100%;
  min-width: 0;
  position: relative;
}

/* Ensure Elementor images have 100% height */
.elementor img {
  height: 100%;
}

.timeline-carousel-image-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.timeline-carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: scale(1.05);
}

.timeline-carousel-image.active {
  opacity: 1;
  transform: scale(1);
}

/* Right Content - Takes 2/3 of available space */
.timeline-carousel-right {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-width: 0;
  overflow: visible;
  position: relative;
  min-height: 0;
}

/* Timeline */
.timeline-carousel-timeline-container {
  width: 100%;
  position: relative;
  margin-bottom: 16px;
  overflow: visible;
  padding-bottom: 8px;
  max-width: 100%;
}

.timeline-carousel-timeline {
  display: flex;
  align-items: center;
  gap: 40px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-width: 0;
  padding-left: 0px;
  padding-right: 0px;
  border-top: 2px solid rgba(15, 126, 186, 0.1);
}

.timeline-carousel-timeline::-webkit-scrollbar {
  display: none;
}

/* .timeline-carousel-timeline::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 0;
      right: 0;
      height: 2px;
      background: rgba(15, 126, 186, 0.1);
      z-index: 1;
    } */

.timeline-carousel-content-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

.timeline-carousel-year-context {
  margin: 0;
  visibility: hidden;
  position: absolute;
}

.timeline-carousel-year-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s ease;
  z-index: 10;
}

.timeline-carousel-year-indicator {
  width: 100%;
  height: 2px;
  background: transparent;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.timeline-carousel-year-item.active .timeline-carousel-year-indicator {
  background: var(--blue-600);
}

.timeline-carousel-year-text {
  font-family:
    var(--e-global-typography-accent-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: var(--e-global-typography-accent-font-size, 48px);
  font-weight: var(--e-global-typography-accent-font-weight, 500);
  line-height: 125%;
  letter-spacing: -1.92px;
  color: var(--e-global-color-text-light, #e8ecef);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.timeline-carousel-year-item.active {
  background: transparent !important;
}

.timeline-carousel-year-item.active .timeline-carousel-year-text {
  color: var(--blue-600);
}

.timeline-carousel-year-item:hover .timeline-carousel-year-text {
  color: var(--blue-600);
  opacity: 0.8;
}

/* Content Text */
.timeline-carousel-text-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
}

.timeline-carousel-text-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.timeline-carousel-content-item {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  display: none;
}
.timeline-carousel-content-item-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  max-width: 60%;
}

.timeline-carousel-content-item.active {
  position: absolute;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  display: block;
}

.timeline-carousel-content-title {
  font-family:
    var(--e-global-typography-primary-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: var(--e-global-typography-primary-font-size, 40px);
  font-weight: var(--e-global-typography-primary-font-weight, 500);
  line-height: 120%;
  letter-spacing: -1.2px;
  color: var(--black-1000);
  margin: 0 0 16px 0;
}

.timeline-carousel-content-description {
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: var(--e-global-typography-text-font-size, 18px);
  font-weight: var(--e-global-typography-text-font-weight, 400);
  line-height: 150%;
  letter-spacing: 0.18px;
  color: var(--e-global-color-text-muted, rgba(0, 0, 0, 0.7));
  margin: 0 !important;
}

/* Responsive Design */
@media (max-width: 1440px) {
  .timeline-carousel {
    padding: 24px 16px;
  }
}

@media (max-width: 1024px) {
  .timeline-carousel {
    padding: 24px 16px;
  }

  .timeline-carousel-main-title {
    font-size: 48px;
    letter-spacing: -1.44px;
  }

  .timeline-carousel-content {
    flex-direction: column-reverse;
    gap: 32px;
  }

  .timeline-carousel-image-container {
    width: 100%;
    height: 300px;
    order: 2;
  }

  .timeline-carousel-content-item {
    height: auto;
  }
  .timeline-carousel-content-item-inner {
    max-width: 100%;
    justify-content: flex-start;
  }

  .timeline-carousel-right {
    width: 100%;
    order: 1;
  }

  .timeline-carousel-text-content {
    width: 100%;
  }

  .timeline-carousel-year-text {
    font-size: 32px;
    letter-spacing: -1.28px;
  }

  .timeline-carousel-year-indicator {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .timeline-carousel {
    gap: 24px;
    padding: 16px;
  }

  .timeline-carousel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .timeline-carousel-main-title {
    font-size: 32px;
    letter-spacing: -0.96px;
  }

  .timeline-carousel-timeline {
    gap: 20px;
  }

  .timeline-carousel-year-text {
    font-size: 24px;
    letter-spacing: -0.96px;
  }

  .timeline-carousel-year-indicator {
    width: 100%;
  }

  .timeline-carousel-content-title {
    font-size: 24px;
    letter-spacing: -0.72px;
    line-height: 125%;
  }

  .timeline-carousel-content-description {
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.16px;
  }

  .timeline-carousel-nav-button {
    width: 48px;
    height: 48px;
    padding: 12px;
  }

  .timeline-carousel-image-container {
    height: 240px;
  }
}

/* Mobile Timeline Carousel Layout Optimization */
@media (max-width: 768px) {
  /* Reorder elements for mobile: Title -> Arrows -> Timeline -> Text -> Image */
  .timeline-carousel {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px 16px;
  }

  .timeline-carousel-header {
    order: 1;
    gap: 20px;
  }

  .timeline-carousel-content {
    order: 2;
    flex-direction: column;
    gap: 32px;
    height: 600px;
  }

  /* Move timeline tabs outside of right content and after header */
  .timeline-carousel-right {
    order: 1;
    width: 100%;
  }

  .timeline-carousel-timeline-container {
    order: 2;
    position: static;
    margin-top: 24px;
    margin-bottom: 32px;
  }

  .timeline-carousel-text-content {
    order: 3;
    width: 100%;
    margin-bottom: 24px;
  }

  .timeline-carousel-image-container {
    order: 4;
    width: 100%;
    height: 280px;
  }
}

/* Extra small mobile optimization */
@media (max-width: 480px) {
  .timeline-carousel {
    gap: 24px;
    padding: 16px;
  }

  .timeline-carousel-header {
    gap: 16px;
  }

  .timeline-carousel-main-title {
    font-size: 28px;
    letter-spacing: -0.84px;
  }

  .timeline-carousel-subtitle {
    font-size: 14px;
    line-height: 140%;
  }

  .timeline-carousel-timeline-container {
    margin-top: 20px;
    margin-bottom: 24px;
  }

  .timeline-carousel-timeline {
    gap: 20px;
  }

  .timeline-carousel-year-text {
    font-size: 20px;
    letter-spacing: -0.8px;
  }

  .timeline-carousel-year-indicator {
    width: 100%;
  }

  .timeline-carousel-content {
    gap: 24px;
    height: 700px;
  }

  .timeline-carousel-image-container {
    height: 220px;
  }

  .timeline-carousel-content-title {
    font-size: 20px;
    letter-spacing: -0.6px;
    line-height: 120%;
  }

  .timeline-carousel-content-description {
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.14px;
  }

  .timeline-carousel-nav-button {
    width: 44px;
    height: 44px;
    padding: 10px;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .advanced-accordion {
    max-width: 100%;
  }

  .advanced-accordion-header {
    padding: 8px 16px;
  }

  .advanced-accordion-title-section {
    gap: 8px;
  }

  .advanced-accordion-title {
    font-size: 16px;
  }

  .advanced-accordion-number {
    font-size: 12px;
    width: 20px;
  }
}

@media (max-width: 480px) {
  .mystic-number-list-item {
    padding: 10px 0;
    gap: 10px;
    min-height: 64px;
  }

  .mystic-number-list-left {
    width: 28px;
  }

  .mystic-number-list-number-container {
    width: 18px;
    padding: 3px 0 20px 0;
  }

  .mystic-number-list-number {
    width: 18px;
    font-size: 12px;
  }

  .mystic-number-list-line {
    height: 40px;
  }

  .mystic-number-list-title {
    font-size: 14px;
  }

  .mystic-number-list-description {
    font-size: 14px;
  }

  .mystic-number-list-text-link {
    font-size: 14px;
  }
}

/* ========================================
                   HERO BUTTON COMPONENT STYLES
                   ======================================== */

.hero-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  transition: all 0.2s ease-in-out;
  border-top: 1px solid var(--mystic-shadow-medium);
  text-decoration: none;
  background: transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-public-sans);
  /* Ensure proper focus behavior */
  outline: none;
}

.hero-button:hover {
  padding: 20px 24px;
  background-color: var(--brand-blue);
}

.hero-button-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.hero-button-caption {
  font-family: var(--font-public-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
  margin: 0 !important;
  color: var(--brand-brown);
}

.hero-button-text {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  text-decoration: underline;
  margin: 0 !important;
  color: var(--brand-blue);
}

.hero-button-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: color 0.2s ease-in-out;
  color: var(--brand-blue);
}

.hero-button:focus {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.hero-button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  padding: 20px 24px;
}

.hero-button:focus-visible .hero-button-arrow {
  color: white;
}

.hero-button:focus-visible .hero-button-caption {
  color: rgba(255, 255, 255, 0.5);
}

.hero-button:focus-visible .hero-button-text {
  color: white;
}

/* Mobile-specific focus handling with improved hover animations - FIXED VERSION */
@media (max-width: 768px) {
  .hero-button {
    padding: 16px 0;
    /* Prevent hover on touch devices by default */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    /* CRITICAL FIX: Ensure content is always visible */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* CRITICAL FIX: Ensure button content is ALWAYS visible on mobile */
  .hero-button .hero-button-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .hero-button .hero-button-caption {
    color: var(--brand-brown) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  .hero-button .hero-button-text {
    color: var(--brand-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  .hero-button .hero-button-arrow {
    color: var(--brand-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }

  /* Disable default hover effects on touch devices */
  .hero-button:hover {
    padding: 16px 0;
    background-color: transparent;
  }

  .hero-button:hover .hero-button-arrow {
    color: var(--brand-blue) !important;
  }

  .hero-button:hover .hero-button-caption {
    color: var(--brand-brown) !important;
  }

  .hero-button:hover .hero-button-text {
    color: var(--brand-blue) !important;
  }

  /* Touch hover animation - only applied via JavaScript */
  .hero-button.hero-button-touch-hover {
    padding: 16px 20px;
    background-color: var(--brand-blue);
    transition: all 0.2s ease-in-out;
    /* Ensure content remains visible during animation */
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button.hero-button-touch-hover .hero-button-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .hero-button.hero-button-touch-hover .hero-button-arrow {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button.hero-button-touch-hover .hero-button-caption {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button.hero-button-touch-hover .hero-button-text {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Keyboard focus-visible for accessibility - should show hover animation */
  .hero-button:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
    padding: 16px 20px;
    background-color: var(--brand-blue);
    /* Ensure content remains visible during focus */
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:focus-visible .hero-button-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .hero-button:focus-visible .hero-button-arrow {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:focus-visible .hero-button-caption {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:focus-visible .hero-button-text {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* CRITICAL FIX: Ensure proper focus removal for non-keyboard focus but keep content visible */
  .hero-button:focus:not(:focus-visible) {
    outline: none;
    background-color: transparent;
    padding: 16px 0;
    /* NEVER hide content */
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:focus:not(:focus-visible) .hero-button-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .hero-button:focus:not(:focus-visible) .hero-button-caption {
    color: var(--brand-brown) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:focus:not(:focus-visible) .hero-button-text {
    color: var(--brand-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:focus:not(:focus-visible) .hero-button-arrow {
    color: var(--brand-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* CRITICAL FIX: Ensure button content remains visible after click/active state */
  .hero-button:active {
    background-color: transparent;
    padding: 16px 0;
    /* NEVER hide content */
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:active .hero-button-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .hero-button:active .hero-button-arrow {
    color: var(--brand-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:active .hero-button-caption {
    color: var(--brand-brown) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button:active .hero-button-text {
    color: var(--brand-blue) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* CRITICAL FIX: Force content visibility in all states */
  .hero-button,
  .hero-button:hover,
  .hero-button:focus,
  .hero-button:focus-visible,
  .hero-button:active,
  .hero-button.hero-button-touch-hover {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-button .hero-button-content,
  .hero-button:hover .hero-button-content,
  .hero-button:focus .hero-button-content,
  .hero-button:focus-visible .hero-button-content,
  .hero-button:active .hero-button-content,
  .hero-button.hero-button-touch-hover .hero-button-content {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
  }

  .hero-button .hero-button-caption,
  .hero-button .hero-button-text,
  .hero-button .hero-button-arrow,
  .hero-button:hover .hero-button-caption,
  .hero-button:hover .hero-button-text,
  .hero-button:hover .hero-button-arrow,
  .hero-button:focus .hero-button-caption,
  .hero-button:focus .hero-button-text,
  .hero-button:focus .hero-button-arrow,
  .hero-button:active .hero-button-caption,
  .hero-button:active .hero-button-text,
  .hero-button:active .hero-button-arrow {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
}

.hero-button:hover .hero-button-arrow {
  color: white;
}

.hero-button:hover .hero-button-caption {
  color: rgba(255, 255, 255, 0.5);
}

.hero-button:hover .hero-button-text {
  color: white;
}

/* ========================================
                   TESTIMONIAL CARD COMPONENT STYLES
                   ======================================== */

.mystic-testimonial-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mystic-testimonial-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 429px;
  min-height: 400px;
  border-radius: 17px;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: var(--transition-smooth);
}

/* Auto Flex Styles */
.mystic-testimonial-card-auto-flex {
  width: 100%;
  height: 100%;
  flex: 1;
  min-width: 429px;
  min-height: 400px;
}

.mystic-testimonial-card-wrapper:has(.mystic-testimonial-card-auto-flex) {
  display: flex;
  width: 100%;
  height: 100%;
}

.mystic-testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.mystic-testimonial-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}

.mystic-testimonial-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-height: 352px;
  padding: 24px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  border-radius: 0 16px 16px 16px;
}

.mystic-testimonial-quote-container {
  width: 100%;
  margin-bottom: 24px;
}

.mystic-testimonial-quote {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff;
  font-family: var(--font-public-sans);
  font-size: 24px;
  font-weight: 600;
  font-style: normal;
  line-height: 28.8px;
  letter-spacing: -0.48px;
  text-align: left;
}

.mystic-testimonial-customer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mystic-testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mystic-testimonial-customer-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.mystic-testimonial-customer-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mystic-testimonial-customer-name {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff;
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

.mystic-testimonial-customer-description {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-public-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}

.mystic-testimonial-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: #d3ffe4;
  border-radius: 8px;
  color: var(--mystic-text-dark);
  font-family: var(--font-public-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 150%;
}

.mystic-testimonial-rating-text {
  margin: 0 !important;
  padding: 0 !important;
}

.mystic-testimonial-rating-star {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--mystic-text-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-testimonial-card {
    width: 100%;
    max-width: 400px;
    min-height: 350px;
  }

  .mystic-testimonial-card-auto-flex {
    min-width: 300px;
    min-height: 350px;
  }

  .mystic-testimonial-content {
    min-height: 300px;
    padding: 20px;
  }

  .mystic-testimonial-quote {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.4px;
  }

  .mystic-testimonial-customer-name {
    font-size: 14px;
  }

  .mystic-testimonial-customer-description {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .mystic-testimonial-card {
    min-height: 320px;
  }

  .mystic-testimonial-card-auto-flex {
    min-width: 280px;
    min-height: 320px;
  }

  .mystic-testimonial-content {
    min-height: 280px;
    padding: 16px;
  }

  .mystic-testimonial-quote {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: -0.36px;
  }

  .mystic-testimonial-avatar {
    width: 36px;
    height: 36px;
  }

  .mystic-testimonial-customer-name {
    font-size: 13px;
  }

  .mystic-testimonial-customer-description {
    font-size: 11px;
  }

  .mystic-testimonial-rating {
    padding: 3px 6px;
    font-size: 11px;
  }

  .mystic-testimonial-rating-star {
    width: 8px;
    height: 8px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .mystic-testimonial-card {
    transition: none;
  }

  .mystic-testimonial-card:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .mystic-testimonial-card {
    border: 2px solid #000000;
  }

  .mystic-testimonial-quote {
    color: #000000;
    text-shadow: 1px 1px 0 #ffffff;
  }

  .mystic-testimonial-customer-name {
    color: #000000;
    text-shadow: 1px 1px 0 #ffffff;
  }

  .mystic-testimonial-customer-description {
    color: #000000;
    text-shadow: 1px 1px 0 #ffffff;
  }
}

/* Print Styles */
@media print {
  .mystic-testimonial-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000000;
  }

  .mystic-testimonial-overlay {
    display: none;
  }

  .mystic-testimonial-content {
    background: none;
    color: #000000;
  }

  .mystic-testimonial-quote,
  .mystic-testimonial-customer-name,
  .mystic-testimonial-customer-description {
    color: #000000;
  }
}

/* ===== TESTIMONIAL CARD KEYBOARD ACCESSIBILITY ===== */

/* Focus indicators for all testimonial cards */
.mystic-testimonial-card:focus,
.mystic-testimonial-card-variant:focus,
.mystic-testimonial-card-variant-2:focus {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Focus indicators for mobile devices */
@media (max-width: 768px) {
  .mystic-testimonial-card:focus,
  .mystic-testimonial-card-variant:focus,
  .mystic-testimonial-card-variant-2:focus {
    outline: 3px solid var(--blue-600);
    outline-offset: 3px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-testimonial-card:focus,
  .mystic-testimonial-card-variant:focus,
  .mystic-testimonial-card-variant-2:focus {
    outline: 3px solid #000000;
    outline-offset: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mystic-testimonial-card,
  .mystic-testimonial-card-variant,
  .mystic-testimonial-card-variant-2 {
    transition: none;
  }

  .mystic-testimonial-card:focus,
  .mystic-testimonial-card-variant:focus,
  .mystic-testimonial-card-variant-2:focus {
    transform: none;
  }
}

/* ===== CONTENT CAROUSEL STYLES (WORDPRESS) ===== */

/* Screen Reader Only - Accessibility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Main Container */
.elementor-widget-mystic_content_carousel .content-carousel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 !important;
  max-width: 993px;
  margin: 0 auto;
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
}

.content-carousel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 !important;
  max-width: 993px;
  margin: 0 auto;
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
}

/* Header */
.content-carousel-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.content-carousel-indicator-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  position: relative;
}

.content-carousel-indicator-line {
  width: 100%;
  height: 1px;
  background: rgba(15, 126, 186, 0.1);
  position: relative;
}

.content-carousel-indicator-active {
  width: 106px;
  height: 2px;
  background: var(--blue-600);
  position: absolute;
  top: 3px;
  transition: left 0.3s ease;
  max-width: calc(100% - 20px);
}

.content-carousel-title-and-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.content-carousel-title-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

/* Navigation Arrows */
.content-carousel-navigation {
  display: flex;
  width: 96px;
  height: 40px;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.content-carousel-nav-button {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.content-carousel-nav-button.prev {
  background: #f1f9fe;
  color: var(--blue-950);
}

.content-carousel-nav-button.next {
  background: #0f557d;
  color: #f1f9fe;
}

.content-carousel-nav-button:hover:not(:disabled) {
  transform: scale(1.05);
}

.content-carousel-nav-button:disabled,
.content-carousel-nav-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Main Content */
.content-carousel-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 45px;
  width: 100%;
  min-height: 400px;
}

/* Image Section - Takes 1/3 of available space */
.content-carousel-image-container {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  min-height: 300px;
  max-height: 408px;
  position: relative;
  overflow: hidden;
}

/* Ensure Elementor images have 100% height */
.elementor img {
  height: 100%;
}

.content-carousel-image-container .content-carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
  z-index: 1;
}

.content-carousel-image.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* Right Content - Takes 2/3 of available space */
.content-carousel-right {
  display: flex;
  flex: 2;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  min-width: 0;
}

/* Content Items */
.content-carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(30px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  display: none;
}

.content-carousel-item.active {
  position: relative;
  transform: translateX(0);
  pointer-events: auto;
  display: block;
}

/* Title and Description */
.content-carousel-text-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.content-carousel-title {
  width: 100%;
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: -0.48px;
  color: #0e6496;
  margin: 0 !important;
}

.content-carousel-description {
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  color: var(--e-global-color-text, #3a3a40);
  margin: 0 !important;
}

/* Bullet Points */
.content-carousel-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content-carousel-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.content-carousel-bullet-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--mystic-success);
}

.content-carousel-bullet-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}

.content-carousel-bullet-text {
  align-self: stretch;
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  color: rgba(20, 20, 20, 0.7);
}

.content-carousel-bullet-text strong,
.content-carousel-bullet-text b {
  font-weight: 700;
  color: rgba(20, 20, 20, 1);
}

.content-carousel-bullet-link {
  color: var(--blue-600);
  text-decoration: underline;
  font-weight: 400;
}

.content-carousel-bullet-link:hover {
  color: #0e6496;
}

/* Tip Box */
.content-carousel-tip-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 12px;
  background: #f1f9fe;
  margin-top: 20px;
}

.content-carousel-tip-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.content-carousel-tip-title {
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
  color: var(--mystic-text-dark);
  margin: 0 !important;
}

.content-carousel-tip-content {
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: rgba(20, 20, 20, 0.8);
  margin: 0 !important;
}

.content-carousel-tip-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content-carousel-tip-bullets .content-carousel-bullet-text {
  font-size: 14px;
  color: rgba(20, 20, 20, 0.8);
}

/* Enhanced Bullet List Styles */
.enhanced-bullet-content {
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  color: rgba(20, 20, 20, 0.7);
}

.enhanced-bullet-link {
  background: var(--blue-600);
  text-decoration: underline;
  font-weight: 400;
}

.enhanced-bullet-link:hover {
  color: var(--e-global-color-accent, #0e6496);
}

/* Responsive Design */
@media (max-width: 1440px) {
  .content-carousel {
    padding: 24px 16px;
  }
}

@media (max-width: 1024px) {
  .content-carousel {
    padding: 24px 16px;
  }

  .content-carousel-content {
    height: auto;
    flex-direction: column-reverse;
    gap: 24px;
  }

  .content-carousel-image-container {
    width: 100%;
    height: 300px;
  }

  .content-carousel-right {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .content-carousel {
    gap: 24px;
    padding: 16px;
  }

  .content-carousel-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .content-carousel-title {
    font-size: 20px;
  }

  .content-carousel-nav-button {
    width: 36px;
    height: 36px;
  }

  .content-carousel-image-container {
    height: 200px;
  }

  .content-carousel-right {
    gap: 24px;
  }
}

/* ===== DATA TABLE STYLES (WORDPRESS) ===== */

.elementor-widget-mystic_data_table .data-table-wrapper {
  width: 100%;
  overflow: hidden;
}

.data-table {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  border-radius: 12px;
  border: 4px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.data-table-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
}

.data-table-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
  min-height: 60px;
}

.data-table-cell {
  display: flex;
  padding: 20px 24px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  min-height: 60px;
  flex: 1;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.data-table-cell:last-child {
  border-right: none;
}

.data-table-row:last-child .data-table-cell {
  border-bottom: none;
}

/* Responsive table */
.data-table--responsive {
  width: 100%;
}

.data-table--responsive .data-table-cell {
  flex: 1;
  min-width: 0;
  max-width: none;
}

/* Fixed width table with scroll */
.data-table--fixed {
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
}

.data-table--fixed .data-table-content {
  min-width: max-content;
  width: 100%;
}

/* Regular fixed table cells (not sticky) */
.data-table--fixed:not(.data-table--sticky-first) .data-table-cell {
  min-width: 150px;
  flex-shrink: 0;
  flex: 0 0 auto;
}

/* Mystic Data Table - Semantic HTML Structure */
.mystic-data-table-wrapper {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

.mystic-data-table {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mystic-data-table__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  display: flex;
  flex-direction: column;
}

.mystic-data-table__header {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  display: contents;
}

.mystic-data-table__body {
  display: contents;
}

.mystic-data-table__row {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  min-width: 0;
}

.mystic-data-table__row:last-child {
  border-bottom: none;
}

.mystic-data-table__cell {
  padding: 20px 24px;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-height: 60px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}

.mystic-data-table__cell:last-child {
  border-right: none;
}

.mystic-data-table__cell--header {
  font-weight: 600;
  color: rgba(20, 20, 20, 0.8);
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  line-height: 160%;
  letter-spacing: 0.16px;
  background: rgba(255, 255, 255, 0.1);
  justify-content: center;
  align-items: center;
  text-transform: none;
}

.mystic-data-table__cell--data {
  color: rgba(20, 20, 20, 0.7);
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

/* Responsive Table */
.mystic-data-table--responsive {
  overflow-x: visible;
}

.mystic-data-table--responsive.mystic-data-table--scrollable {
  overflow-x: auto;
}

.mystic-data-table--responsive .mystic-data-table__table {
  table-layout: auto;
  min-width: var(--table-min-width, 800px);
  width: 100%;
}

.mystic-data-table--responsive .mystic-data-table__cell {
  min-width: 150px;
}

/* Fixed Width Table */
.mystic-data-table--fixed {
  overflow-x: auto;
}

.mystic-data-table--fixed .mystic-data-table__table {
  min-width: max-content;
}

.mystic-data-table--fixed .mystic-data-table__cell {
  min-width: 160px;
  width: 160px;
}

/* ========================================
                   NEW STICKY COLUMN IMPLEMENTATION
                   ======================================== */

/* Sticky Column Layout - Main Container */
.mystic-data-table--sticky-column {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
}

/* Sticky First Column Container */
.mystic-sticky-column {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 20;
  background: var(--table-bg-primary, #ffffff);
  border-right: 2px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
  min-width: 200px;
  width: 30%; /* Default width, will be overridden by JavaScript */
  max-width: 400px; /* Allow for wider columns */
  overflow: visible;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

/* Sticky Column Header */
.mystic-sticky-column__header {
  position: sticky;
  top: 0;
  z-index: 25;
  background: var(--table-bg-primary, #ffffff);
  border-bottom: 1px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Sticky Column Body */
.mystic-sticky-column__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: visible;
}

/* Sticky Column Cells */
.mystic-sticky-column__cell {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px 16px;
  min-height: 60px;
  border-bottom: 1px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  background: var(--table-bg-primary, #ffffff);
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  flex-direction: column;
}

.mystic-sticky-column__cell--header {
  font-weight: 600;
  color: rgba(20, 20, 20, 0.8);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  line-height: 140%;
  text-align: left;
  background: var(--table-bg-primary, #ffffff);
  border-bottom: 2px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
}

.mystic-sticky-column__cell--data {
  color: rgba(20, 20, 20, 0.7);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  text-align: left;
}

/* Scrollable Columns Container */
.mystic-scrollable-columns {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  background: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.mystic-scrollable-columns::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.mystic-scrollable-columns::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.mystic-scrollable-columns::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.mystic-scrollable-columns::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Scrollable Columns Header */
.mystic-scrollable-columns__header {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--table-bg-primary, #ffffff);
  border-bottom: 2px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row;
  min-width: max-content;
}

/* Scrollable Columns Body */
.mystic-scrollable-columns__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: max-content;
}

/* Scrollable Columns Row */
.mystic-scrollable-columns__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 60px;
  border-bottom: 1px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  min-width: max-content;
  height: auto; /* Allow dynamic height */
  box-sizing: border-box;
}

.mystic-scrollable-columns__row:last-child {
  border-bottom: none;
}

/* Scrollable Columns Cells */
.mystic-scrollable-columns__cell {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px;
  min-height: 60px;
  min-width: 250px; /* Increased minimum width */
  width: 300px; /* Increased default width */
  flex: 0 0 300px; /* Increased default flex basis */
  border-right: 1px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
  background: var(--table-bg-primary, #ffffff);
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  flex-direction: column;
}

.mystic-scrollable-columns__cell:last-child {
  border-right: none;
}

.mystic-scrollable-columns__cell--header {
  font-weight: 600;
  color: rgba(20, 20, 20, 0.8);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  line-height: 140%;
  text-align: center;
  background: var(--table-bg-primary, #ffffff);
}

.mystic-scrollable-columns__cell--data {
  color: rgba(20, 20, 20, 0.7);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  text-align: center;
}

/* Hidden cells for merging */
.mystic-scrollable-columns__cell--hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  flex: 0 !important;
}

/* Enhanced height synchronization for sticky columns */
.mystic-data-table--sticky-column .mystic-sticky-column__cell,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
  box-sizing: border-box;
  overflow: visible;
  align-items: flex-start !important; /* Force consistent alignment */
}

/* Ensure row alignment */
.mystic-data-table--sticky-column .mystic-sticky-column__body,
.mystic-data-table--sticky-column .mystic-scrollable-columns__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.mystic-data-table--sticky-column .mystic-sticky-column__cell .mystic-table-main-content,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell .mystic-table-main-content {
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mystic-data-table--sticky-column .mystic-sticky-column__cell .mystic-table-bullet-list,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell .mystic-table-bullet-list {
  width: 100%;
  margin: 0;
  padding-left: 20px;
}

.mystic-data-table--sticky-column .mystic-sticky-column__cell .mystic-table-note-container,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell .mystic-table-note-container {
  width: 100%;
  margin: 0;
}

/* Enhanced content flow within cells */
.mystic-sticky-column__cell > *,
.mystic-scrollable-columns__cell > * {
  width: 100%;
  margin: 0;
  padding: 0;
}

.mystic-sticky-column__cell .mystic-table-main-content,
.mystic-scrollable-columns__cell .mystic-table-main-content {
  margin-bottom: 12px;
}

.mystic-sticky-column__cell .mystic-table-main-content:last-child,
.mystic-scrollable-columns__cell .mystic-table-main-content:last-child {
  margin-bottom: 0;
}

/* Mobile optimization for sticky columns - COMPREHENSIVE HORIZONTAL SCROLLING FIX */
@media (max-width: 768px) {
  /* CRITICAL: Ensure parent wrapper enables horizontal scrolling */
  .mystic-data-table-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    /* Add scroll indicators */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent !important;
  }

  /* Custom scrollbar styling for better UX */
  .mystic-data-table-wrapper::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
  }

  .mystic-data-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
  }

  .mystic-data-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
  }

  .mystic-data-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4) !important;
  }

  .mystic-data-table--sticky-column {
    /* CRITICAL: Force content wider than viewport to enable scrolling */
    display: flex !important;
    flex-direction: row !important;
    overflow: visible !important;
    min-width: 900px !important; /* Force wider than mobile viewport */
    width: max-content !important;
    position: relative !important;
  }

  .mystic-data-table--sticky-column .mystic-sticky-column {
    position: sticky !important;
    left: 0 !important;
    z-index: 20 !important;
    background: #ffffff !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1) !important;
    min-width: 200px !important;
    width: 200px !important;
    flex: 0 0 200px !important;
    overflow: visible !important;
  }

  .mystic-data-table--sticky-column .mystic-scrollable-columns {
    /* CRITICAL: Enable horizontal scrolling within scrollable columns */
    flex: 1 1 auto !important;
    min-width: 700px !important; /* Force wider than remaining viewport */
    overflow-x: auto !important;
    overflow-y: visible !important;
    position: relative !important;
    z-index: 10 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* CRITICAL: Force scrollable content to be wider than container */
  .mystic-data-table--sticky-column .mystic-scrollable-columns__header,
  .mystic-data-table--sticky-column .mystic-scrollable-columns__body {
    min-width: 1000px !important; /* Force content wider than scrollable container */
    width: max-content !important;
    display: flex !important;
    flex-direction: row !important;
  }

  /* CRITICAL: Ensure rows force horizontal scrolling */
  .mystic-data-table--sticky-column .mystic-scrollable-columns__row {
    display: flex !important;
    flex-direction: row !important;
    min-width: 1000px !important; /* Force content wider than scrollable container */
    width: max-content !important;
  }

  .mystic-data-table--sticky-column .mystic-sticky-column__cell,
  .mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
    min-width: 150px !important;
    padding: 16px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .mystic-data-table--sticky-column .mystic-sticky-column__cell--header,
  .mystic-data-table--sticky-column .mystic-scrollable-columns__cell--header {
    padding: 12px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* CRITICAL: Force scrollable columns to have fixed widths for horizontal scrolling */
  .mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
    flex: 0 0 200px !important; /* Increased width for better readability */
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }
}

/* Enhanced visual alignment for sticky columns */
.mystic-data-table--sticky-column {
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.mystic-data-table--sticky-column .mystic-sticky-column,
.mystic-data-table--sticky-column .mystic-scrollable-columns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Ensure consistent cell spacing */
.mystic-sticky-column__cell,
.mystic-scrollable-columns__cell {
  margin: 0;
  padding: 20px 16px;
  border-collapse: collapse;
}

/* Merged cells */
.mystic-scrollable-columns__cell--merged {
  flex: 0 0 auto;
  width: auto;
  min-width: 300px;
}

/* Enhanced variants for sticky column */
.mystic-data-table--enhanced.mystic-data-table--sticky-column {
  border-radius: 16px;
  background: var(--table-bg-primary, #ffffff);
  border: 1px solid var(--table-border-color, #eeeef0);
}

/* Healthcare variant for sticky column */
.mystic-data-table--healthcare.mystic-data-table--sticky-column {
  border-radius: 0;
  background: var(--table-bg-primary, #ffffff);
  border: none;
}

.mystic-data-table--enhanced.mystic-data-table--sticky-column .mystic-sticky-column__cell {
  background: var(--table-bg-primary, #ffffff);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
}

.mystic-data-table--enhanced.mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
  background: var(--table-bg-primary, #ffffff);
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
}

/* Healthcare variant sticky column cell borders */
.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-sticky-column__cell {
  background: var(--table-bg-primary, #ffffff);
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
}

.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
  background: var(--table-bg-primary, #ffffff);
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
}

.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-scrollable-columns__cell:last-child {
  border-right: none;
}

.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-sticky-column__cell:last-child,
.mystic-data-table--healthcare.mystic-data-table--sticky-column
  .mystic-scrollable-columns__row:last-child
  .mystic-scrollable-columns__cell {
  border-bottom: none;
}

/* Striped rows for enhanced variants */
.mystic-data-table--enhanced.mystic-data-table--sticky-column .mystic-sticky-column__cell--data:nth-child(even) {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--enhanced.mystic-data-table--sticky-column
  .mystic-scrollable-columns__row:nth-child(even)
  .mystic-scrollable-columns__cell {
  background: var(--table-bg-secondary, #f7f7f8);
}

/* Healthcare variant striped rows for sticky column */
.mystic-data-table--healthcare.mystic-data-table--sticky-column .mystic-sticky-column__cell--data:nth-child(even) {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--healthcare.mystic-data-table--sticky-column
  .mystic-scrollable-columns__row:nth-child(even)
  .mystic-scrollable-columns__cell {
  background: var(--table-bg-secondary, #f7f7f8);
}

/* Row Height Synchronization */
.mystic-data-table--sticky-column .mystic-sticky-column__cell,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell {
  min-height: 60px;
  height: auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* Hover Effects */
.mystic-data-table--sticky-column .mystic-sticky-column__cell:hover,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell:hover {
  background-color: rgba(15, 85, 125, 0.05);
  transition: background-color 0.2s ease;
}

/* Focus States for Accessibility */
.mystic-data-table--sticky-column .mystic-sticky-column__cell:focus,
.mystic-data-table--sticky-column .mystic-scrollable-columns__cell:focus {
  outline: 2px solid var(--blue-600);
  outline-offset: -2px;
  background-color: rgba(15, 85, 125, 0.1);
}

/* Shadow Effect for Sticky Column */
.mystic-sticky-column::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
  pointer-events: none;
  z-index: 30;
}

/* Scroll Indicators for Scrollable Columns */
.mystic-scrollable-columns::before,
.mystic-scrollable-columns::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mystic-scrollable-columns::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.9), transparent);
}

.mystic-scrollable-columns::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
}

.mystic-scrollable-columns.has-scroll-left::before {
  opacity: 1;
}

.mystic-scrollable-columns.has-scroll-right::after {
  opacity: 1;
}

/* Mobile Responsive Behavior */
@media (max-width: 768px) {
  /* Mobile: Stack sticky column above scrollable columns */
  .mystic-data-table--sticky-column {
    flex-direction: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mystic-sticky-column {
    position: static;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--table-border-color, rgba(238, 238, 240, 0.8));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .mystic-sticky-column__header,
  .mystic-sticky-column__body {
    width: 100%;
  }

  .mystic-sticky-column__cell {
    width: 100%;
    min-width: 100%;
    padding: 16px 12px;
    min-height: 50px;
    font-size: 14px;
  }

  .mystic-scrollable-columns {
    width: 100%;
    min-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
  }

  .mystic-scrollable-columns__header,
  .mystic-scrollable-columns__body,
  .mystic-scrollable-columns__row {
    min-width: max-content;
  }

  .mystic-scrollable-columns__cell {
    min-width: 120px;
    width: 120px;
    flex: 0 0 120px;
    padding: 16px 12px;
    min-height: 50px;
    font-size: 14px;
  }

  /* Remove shadow effect on mobile */
  .mystic-sticky-column::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .mystic-sticky-column__cell {
    padding: 12px 8px;
    min-height: 45px;
    font-size: 13px;
  }

  .mystic-scrollable-columns__cell {
    min-width: 100px;
    width: 100px;
    flex: 0 0 100px;
    padding: 12px 8px;
    min-height: 45px;
    font-size: 13px;
  }
}

/* Touch Scrolling Optimization */
@media (hover: none) and (pointer: coarse) {
  .mystic-scrollable-columns {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .mystic-data-table--sticky-column {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Performance Optimizations */
.mystic-data-table--sticky-column {
  contain: layout style;
  will-change: scroll-position;
}

.mystic-sticky-column,
.mystic-scrollable-columns {
  contain: layout;
  transform: translateZ(0); /* Force hardware acceleration */
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .mystic-sticky-column {
    border-right-color: #000000;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
  }

  .mystic-sticky-column__cell,
  .mystic-scrollable-columns__cell {
    border-color: #000000;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .mystic-sticky-column__cell,
  .mystic-scrollable-columns__cell,
  .mystic-scrollable-columns::before,
  .mystic-scrollable-columns::after {
    transition: none;
  }

  .mystic-data-table--sticky-column .mystic-sticky-column__cell:hover,
  .mystic-data-table--sticky-column .mystic-scrollable-columns__cell:hover {
    transition: none;
  }
}

/* Print Styles */
@media print {
  .mystic-data-table--sticky-column {
    flex-direction: column;
    overflow: visible;
    box-shadow: none;
    border: 1px solid #000000;
  }

  .mystic-sticky-column,
  .mystic-scrollable-columns {
    position: static;
    width: 100%;
    overflow: visible;
    box-shadow: none;
    border: none;
  }

  .mystic-sticky-column__cell,
  .mystic-scrollable-columns__cell {
    background: white !important;
    color: black !important;
    border-color: #000000 !important;
  }
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .mystic-data-table__cell {
    padding: 16px 20px;
    min-height: 50px;
    height: 50px;
    font-size: 14px;
  }

  /* Mobile adjustments for sticky layout */
  .mystic-data-table--sticky .mystic-data-table__row {
    min-height: 50px;
  }

  .mystic-data-table--sticky .mystic-data-table__cell {
    min-height: 50px;
    height: 50px;
    padding: 12px 16px;
  }

  .mystic-data-table__sticky-first-column {
    min-width: 120px;
    width: 120px;
    max-width: 120px;
  }

  .mystic-data-table__scrollable-columns {
    width: calc(100% - 120px);
  }

  .mystic-data-table--fixed .mystic-data-table__cell,
  .mystic-data-table--sticky .mystic-data-table__cell {
    min-width: 120px;
    width: 120px;
    min-height: 60px;
    height: 60px;
  }

  .mystic-data-table__sticky-first-column {
    min-width: 120px;
    width: 120px;
    max-width: 120px;
  }

  .mystic-data-table__scrollable-columns {
    width: calc(100% - 120px);
    flex: 1 1 auto;
  }

  /* Elementor widget specific responsive overrides */
  .elementor-widget-mystic_data_table .mystic-data-table__sticky-first-column {
    min-width: 120px !important;
    width: 120px !important;
    max-width: 120px !important;
  }

  .elementor-widget-mystic_data_table .mystic-data-table__scrollable-columns {
    width: calc(100% - 120px) !important;
    flex: 1 1 auto !important;
  }
}

@media (max-width: 480px) {
  .mystic-data-table__cell {
    padding: 12px 16px;
    min-height: 45px;
    height: 45px;
    font-size: 13px;
  }

  .mystic-data-table--fixed .mystic-data-table__cell,
  .mystic-data-table--sticky .mystic-data-table__cell {
    min-width: 100px;
    width: 100px;
    min-height: 60px;
    height: 60px;
  }

  .mystic-data-table__sticky-first-column {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
  }

  .mystic-data-table__scrollable-columns {
    width: calc(100% - 100px);
    flex: 1 1 auto;
  }

  /* Elementor widget specific responsive overrides */
  .elementor-widget-mystic_data_table .mystic-data-table__sticky-first-column {
    min-width: 100px !important;
    width: 100px !important;
    max-width: 100px !important;
  }

  .elementor-widget-mystic_data_table .mystic-data-table__scrollable-columns {
    width: calc(100% - 100px) !important;
    flex: 1 1 auto !important;
  }
}

/* ========================================
                   DATA TABLE CELL MERGING STYLES
                   ======================================== */

/* Merged cell styling */
.mystic-data-table__cell--merged {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: inherit;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  flex-shrink: 0; /* Prevent merged cells from shrinking */
}

/* Ensure first column maintains fixed width when other columns are merged */
.mystic-data-table__row:has(.mystic-data-table__cell--merged) .mystic-data-table__cell--first {
  flex: 1;
  flex-shrink: 0; /* Prevent first column from shrinking */
}

/* Ensure proper flex distribution in rows with merged cells */
.mystic-data-table__row:has(.mystic-data-table__cell--merged) {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Reset flex for all cells in rows with merged cells, then apply proper distribution */
.mystic-data-table__row:has(.mystic-data-table__cell--merged)
  .mystic-data-table__cell:not(.mystic-data-table__cell--first):not(.mystic-data-table__cell--merged):not(
    .mystic-data-table__cell--hidden
  ) {
  flex: 1;
  flex-shrink: 1; /* Allow non-merged cells to shrink if needed */
  min-width: 0; /* Allow cells to shrink below their content width */
}

/* Ensure merged cells take up the correct amount of space */
.mystic-data-table__row:has(.mystic-data-table__cell--merged) .mystic-data-table__cell--merged {
  flex-shrink: 0; /* Prevent merged cells from shrinking */
}

/* Hidden cells (part of a merge) */
.mystic-data-table__cell--hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  flex: 0 !important; /* Ensure hidden cells take no space */
}

/* ========================================
                   ROW HEIGHT CONTROLS STYLES
                   ======================================== */

/* Row height controls for manual height settings */
.mystic-data-table__cell[style*="height"],
.mystic-sticky-column__cell[style*="height"],
.mystic-scrollable-columns__cell[style*="height"] {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-height: none; /* Allow heights up to 800px */
}

/* Ensure row wrapper maintains grid layout */
.mystic-scrollable-columns__row {
  display: flex; /* preserve original flex layout */
}

/* Ensure content within height-controlled cells is properly contained */
.mystic-data-table__cell[style*="height"] .mystic-table-main-content,
.mystic-sticky-column__cell[style*="height"] .mystic-table-main-content,
.mystic-scrollable-columns__cell[style*="height"] .mystic-table-main-content {
  width: 100%;
  overflow: inherit;
}

/* Bullet lists within height-controlled cells */
.mystic-data-table__cell[style*="height"] .mystic-table-bullet-list,
.mystic-sticky-column__cell[style*="height"] .mystic-table-bullet-list,
.mystic-scrollable-columns__cell[style*="height"] .mystic-table-bullet-list {
  width: 100%;
  margin: 0;
  padding-left: 20px;
  overflow: inherit;
}

/* Note containers within height-controlled cells */
.mystic-data-table__cell[style*="height"] .mystic-table-note-container,
.mystic-sticky-column__cell[style*="height"] .mystic-table-note-container,
.mystic-scrollable-columns__cell[style*="height"] .mystic-table-note-container {
  width: 100%;
  margin: 0;
  overflow: inherit;
}

/* Overflow handling for different overflow settings */
.mystic-data-table__cell[style*="overflow: hidden"],
.mystic-sticky-column__cell[style*="overflow: hidden"],
.mystic-scrollable-columns__cell[style*="overflow: hidden"] {
  text-overflow: ellipsis;
}

.mystic-data-table__cell[style*="overflow: scroll"],
.mystic-sticky-column__cell[style*="overflow: scroll"],
.mystic-scrollable-columns__cell[style*="overflow: scroll"] {
  overflow-y: auto;
  overflow-x: hidden;
}

.mystic-data-table__cell[style*="overflow: auto"],
.mystic-sticky-column__cell[style*="overflow: auto"],
.mystic-scrollable-columns__cell[style*="overflow: auto"] {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ensure sticky column and scrollable columns maintain height synchronization */
.mystic-data-table--sticky-column .mystic-sticky-column__cell[style*="height"] {
  height: inherit !important;
}

/* Mobile responsive adjustments for row heights */
@media (max-width: 768px) {
  .mystic-data-table__cell[style*="height"],
  .mystic-sticky-column__cell[style*="height"],
  .mystic-scrollable-columns__cell[style*="height"] {
    min-height: 50px !important;
    height: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 480px) {
  .mystic-data-table__cell[style*="height"],
  .mystic-sticky-column__cell[style*="height"],
  .mystic-scrollable-columns__cell[style*="height"] {
    min-height: 45px !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Enhanced variant merged cells */
.mystic-data-table--enhanced .mystic-data-table__cell--merged {
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
  background: inherit;
}

/* Enhanced variant first column width control when merging */
.mystic-data-table--enhanced
  .mystic-data-table__row:has(.mystic-data-table__cell--merged)
  .mystic-data-table__cell--first {
  flex: 1;
  flex-shrink: 0;
}

/* Healthcare variant merged cells */
.mystic-data-table--healthcare .mystic-data-table__cell--merged {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Healthcare variant first column width control when merging */
.mystic-data-table--healthcare
  .mystic-data-table__row:has(.mystic-data-table__cell--merged)
  .mystic-data-table__cell--first {
  flex: none !important;
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
}

/* Ensure merged cells maintain proper text alignment */
.mystic-data-table__cell--merged.mystic-data-table__cell--first {
  justify-content: flex-start;
  text-align: left;
}

.mystic-data-table__cell--merged:not(.mystic-data-table__cell--first) {
  justify-content: center;
  text-align: center;
}

/* Merged cell content styling */
.mystic-data-table__cell--merged .mystic-table-main-content,
.mystic-data-table__cell--merged .mystic-table-bullet-list,
.mystic-data-table__cell--merged .mystic-table-note-container {
  width: 100%;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Responsive adjustments for merged cells */
@media (max-width: 768px) {
  .mystic-data-table__cell--merged {
    padding: 16px 12px;
    min-height: 60px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mystic-data-table__cell--merged {
    padding: 12px 8px;
    min-height: 50px;
    font-size: 13px;
  }
}

/* ========================================
                   ENHANCED DATA TABLE COMPONENT STYLES
                   ======================================== */

.mystic-enhanced-data-table-wrapper {
  width: 100%;
  position: relative;
}

.mystic-enhanced-table-caption {
  font-family: "Public Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--black-1000);
  margin-bottom: 16px;
  text-align: center;
}

.mystic-enhanced-data-table {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: var(--table-bg-primary, #ffffff);
  border: 1px solid #eeeef0;
  font-family: "Public Sans", sans-serif;
}

.mystic-enhanced-data-table-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mystic-enhanced-data-table-row {
  display: flex;
  border-bottom: 1px solid #eeeef0;
  height: 122px; /* Force exact height for all rows */
}

.mystic-enhanced-data-table-row:last-child {
  border-bottom: none;
}

.mystic-enhanced-data-table-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  border-right: 1px solid #eeeef0;
  flex: 1;
  height: 100%;
  box-sizing: border-box;
}

.mystic-enhanced-data-table-cell--first-column {
  justify-content: flex-start;
}

.mystic-enhanced-data-table-cell:last-child {
  border-right: none;
}

.mystic-enhanced-data-table-cell-content {
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  color: rgba(20, 20, 20, 0.6);
  display: block;
  text-align: inherit;
}

/* Header cell styling */
.mystic-enhanced-data-table-cell--header {
  background: #ffffff;
  border-top: 1px solid #eeeef0;
}

.mystic-enhanced-data-table-cell--header .mystic-enhanced-data-table-cell-content {
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  color: rgba(20, 20, 20, 0.6);
  text-align: center;
}

.mystic-enhanced-data-table-cell--first-column.mystic-enhanced-data-table-cell--header
  .mystic-enhanced-data-table-cell-content {
  text-align: left;
}

/* Data cell styling */
.mystic-enhanced-data-table-cell--data .mystic-enhanced-data-table-cell-content {
  color: #0f557d;
  text-align: center;
}

.mystic-enhanced-data-table-cell--first-column.mystic-enhanced-data-table-cell--data
  .mystic-enhanced-data-table-cell-content {
  text-align: left;
  color: rgba(20, 20, 20, 0.6);
}

/* Cell with icon styling */
.mystic-enhanced-table-cell-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
}

/* ========================================
                   MYSTIC DATA TABLE RESPONSIVE STYLES
                   ======================================== */

/* Responsive breakpoints for data table */
@media (max-width: 1024px) {
  /* Tablet styles */
  .mystic-data-table-wrapper {
    width: 100%;
  }

  .mystic-data-table {
    width: 100%;
  }

  .mystic-data-table__cell {
    padding: 16px 12px;
    min-height: 50px;
  }

  .mystic-data-table__cell--header {
    font-size: 14px;
    line-height: 140%;
  }

  .mystic-data-table__cell--data {
    font-size: 14px;
    line-height: 140%;
  }

  /* Responsive table adjustments */
  .mystic-data-table--responsive .mystic-data-table__cell {
    min-width: 120px;
  }

  /* Sticky table adjustments for tablet */
  .mystic-data-table--sticky .mystic-data-table__sticky-first-column {
    flex: 0 0 35%;
  }

  .mystic-data-table--sticky .mystic-data-table__scrollable-columns {
    flex: 0 0 65%;
  }
}

/* Mobile styles removed - now handled by data-table-mobile-fixes.css */

.mystic-enhanced-data-table-cell--first-column .mystic-enhanced-table-cell-with-icon {
  justify-content: flex-start;
}

.mystic-enhanced-table-icon-label {
  font-size: 16px;
  font-weight: 600;
  line-height: 160%;
  color: #0f557d;
}

/* Text highlighting */
.mystic-enhanced-table-highlight {
  color: var(--highlight-color, #b0540d);
  font-weight: 500;
  display: inline;
}

/* ========================================
                   MYSTIC NALC FORMS COMPONENT STYLES
                   ======================================== */

/* NALC Forms Component Styles */
.nalc-forms-component {
  font-family: "Public Sans", sans-serif;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* Ensure immediate responsive behavior */
  min-height: 200px;
  opacity: 1;
  visibility: visible;
  /* Prevent layout shift during initialization */
  contain: layout style;
  /* Ensure proper container fit */
  margin: 0;
  padding: 0;
}

/* Ensure component fits within container without overflow */
.nalc-forms-component * {
  box-sizing: border-box;
  max-width: 100%;
}

/* Prevent horizontal overflow */
.nalc-forms-component,
.nalc-forms-component * {
  overflow-x: hidden;
}

/* Ensure proper flex behavior */
.nalc-forms-desktop,
.nalc-forms-mobile {
  flex-shrink: 1;
  min-width: 0;
}

/* Critical responsive behavior - ensure immediate responsiveness */
@media (max-width: 1024px) {
  .nalc-forms-component .nalc-forms-desktop {
    display: none !important;
  }

  .nalc-forms-component .nalc-forms-mobile {
    display: flex !important;
    flex-direction: column;
  }
}

@media (min-width: 1025px) {
  .nalc-forms-component .nalc-forms-desktop {
    display: flex !important;
  }

  .nalc-forms-component .nalc-forms-mobile {
    display: none !important;
  }
}

/* Ensure component is immediately visible and responsive */
.nalc-forms-component:not(.nalc-forms-component--loading) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.nalc-forms-component--loading {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* Handle initial state before JavaScript loads */
.nalc-forms-component:not([data-initialized]) {
  /* Ensure proper layout even before JS initialization */
  min-height: 200px;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  /* Ensure immediate visibility */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.nalc-forms-component:not([data-initialized]) .nalc-forms-desktop,
.nalc-forms-component:not([data-initialized]) .nalc-forms-mobile {
  /* Prevent flash of unstyled content */
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
  /* Ensure proper display */
  display: flex !important;
  flex-direction: column;
}

/* Ensure proper initial display for desktop layout */
.nalc-forms-component:not([data-initialized]) .nalc-forms-desktop {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
}

/* Ensure proper initial display for mobile layout */
@media (max-width: 1024px) {
  .nalc-forms-component:not([data-initialized]) .nalc-forms-desktop {
    display: none !important;
  }

  .nalc-forms-component:not([data-initialized]) .nalc-forms-mobile {
    display: flex !important;
    flex-direction: column;
  }
}

/* Ensure form cards display properly in initial state */
.nalc-forms-component:not([data-initialized]) .nalc-form-card {
  display: flex !important;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--mystic-primary-color, #0e6496);
  background: #ffffff;
  margin-bottom: 12px;
  opacity: 1;
  visibility: visible;
}

.nalc-forms-component:not([data-initialized]) .nalc-form-card__title {
  display: block !important;
  opacity: 1;
  visibility: visible;
  color: var(--black-1000);
  font-family: "Public Sans";
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
  margin: 0;
}

.nalc-forms-component:not([data-initialized]) .nalc-form-card__excerpt {
  display: block !important;
  opacity: 1;
  visibility: visible;
  color: var(--Black-800, rgba(20, 20, 20, 0.8));
  font-family: "Public Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin: 0;
}

.nalc-forms-component:not([data-initialized]) .nalc-form-card__download-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  width: 100%;
  font-family: "Public Sans", sans-serif;
  opacity: 1;
  visibility: visible;
}

/* Ensure controls display properly in initial state */
.nalc-forms-component:not([data-initialized]) .nalc-forms-controls {
  display: flex !important;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  opacity: 1;
  visibility: visible;
}

.nalc-forms-component:not([data-initialized]) .nalc-forms-search {
  flex: 1;
  min-width: 200px;
  opacity: 1;
  visibility: visible;
}

.nalc-forms-component:not([data-initialized]) .nalc-forms-search__input {
  width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid rgba(20, 20, 20, 0.2);
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
}

.nalc-forms-component:not([data-initialized]) .nalc-forms-filter {
  min-width: 150px;
  opacity: 1;
  visibility: visible;
}

.nalc-forms-component:not([data-initialized]) .nalc-forms-filter__select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(20, 20, 20, 0.2);
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
}

/* Ensure section titles display properly in initial state */
.nalc-forms-component:not([data-initialized]) .nalc-forms-section-title {
  display: block !important;
  opacity: 1;
  visibility: visible;
  color: var(--black-1000);
  font-family: "Public Sans";
  font-size: 24px;
  font-weight: 500;
  line-height: 120%;
  margin: 0 0 20px 0;
}

.nalc-forms-component:not([data-initialized]) .nalc-forms-section-subtitle {
  display: block !important;
  opacity: 1;
  visibility: visible;
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  color: var(--black-1000);
  margin: 0 0 16px 0;
}

/* Desktop Layout */
.nalc-forms-desktop {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  border-top: 1px solid rgba(20, 20, 20, 0.1);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* Ensure proper container fit */
  margin: 0;
  padding: 0;
}

.nalc-forms-mobile {
  display: none;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* Ensure mobile layout is ready immediately */
  min-height: 0;
  opacity: 1;
  visibility: visible;
  /* Ensure proper container fit */
  margin: 0;
  padding: 0;
}

/* Popular Section - 1/3 width */
.nalc-forms-popular {
  flex: 0 0 33.333%;
  padding: 32px 24px 0 24px;
  border-right: 1px solid rgba(20, 20, 20, 0.1);
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  /* Ensure immediate responsive behavior */
  max-width: 33.333%;
  /* Ensure proper container fit */
  margin: 0;
  flex-shrink: 1;
}

/* Main Forms Section - 2/3 width */
.nalc-forms-main {
  flex: 0 0 66.667%;
  padding: 32px 24px 40px 24px;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  /* Ensure immediate responsive behavior */
  max-width: 66.667%;
  /* Ensure proper container fit */
  margin: 0;
  flex-shrink: 1;
}

/* Section Titles */
.nalc-forms-section-title {
  color: var(--black-1000);
  font-family: "Public Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  margin: 0 0 20px 0;
}

.nalc-forms-section-subtitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 120%;
  color: var(--black-1000);
  margin: 0 0 16px 0;
}

/* Form Cards */
.nalc-form-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--mystic-primary-color, #0e6496);
  background: #ffffff;
  transition: all 0.2s ease;
  font-family: "Public Sans", sans-serif;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.nalc-form-card--popular {
  background: #ffffff;
  border-color: var(--e-global-color-ef1318b, #0e6496);
  margin-bottom: 12px;
  /* Ensure proper text display in popular section */
  min-width: 0;
  overflow: hidden;
}

/* Specific styles for popular section cards */
.nalc-form-card--popular .nalc-form-card__title {
  /* Allow natural text wrapping in popular section without truncation */
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow: visible;
  text-overflow: unset;
  display: block;
}

.nalc-form-card--popular .nalc-form-card__excerpt {
  /* Allow natural text wrapping in popular section without truncation */
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow: visible;
  text-overflow: unset;
  display: block;
}

/* Most Popular form buttons should use white button variant */
.nalc-form-card--popular .nalc-form-card__download-btn,
.nalc-form-card--popular .mystic-design-button--primary {
  background: white !important;
  color: var(--blue-900) !important;
  border: 1px solid var(--blue-900) !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  width: 100%;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  min-width: 0;
  padding: 12px 16px;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  /* Remove any scrollbar appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Ensure clean button appearance */
  box-shadow: none;
  outline: none;
}

.nalc-form-card--popular .nalc-form-card__download-btn:hover,
.nalc-form-card--popular .mystic-design-button--primary:hover {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  border-color: var(--blue-900) !important;
}

.nalc-form-card--popular .nalc-form-card__download-btn:focus,
.nalc-form-card--popular .mystic-design-button--primary:focus {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  border-color: var(--blue-900) !important;
  box-shadow: 0 0 0 4px var(--blue-900);
  outline: none;
}

.nalc-form-card--popular.nalc-form-card--selected {
  background: var(--mystic-secondary-color, #f1f9fe) !important;
  border-color: var(--mystic-primary-color, #0e6496);
}

.nalc-form-card--list {
  margin-bottom: 12px;
}

.nalc-form-card--selected {
  background: var(--mystic-secondary-color, #f1f9fe);
  border-color: var(--mystic-primary-color, #0e6496);
}

.nalc-form-card--list:not(.nalc-form-card--selected) {
  background: #ffffff;
  border-color: rgba(20, 20, 20, 0.1);
}

.nalc-form-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.nalc-form-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  overflow: hidden;
}

.nalc-form-card__title {
  color: var(--black-1000);
  font-family: "Public Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  color: var(--black-1000);
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: visible;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  display: block;
  white-space: normal;
}

.nalc-form-card__excerpt {
  overflow: visible;
  color: var(--Black-800, rgba(20, 20, 20, 0.8));
  font-family: "Public Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  color: var(--e-global-color-0d5860f, #141414ad);
  margin: 0;
  display: block;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  text-overflow: unset;
  /* Prevent text repetition */
  white-space: normal;
}

.nalc-form-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.nalc-form-card__read-more {
  background: none;
  border: none;
  color: var(--mystic-primary-color, #0e6496);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: underline;
  font-family: "Public Sans", sans-serif;
}

.nalc-form-card__read-more:hover {
  color: var(--mystic-primary-hover, #0a4a6b);
}

.nalc-form-card__read-more svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.nalc-form-card__read-more:hover svg {
  transform: translateY(1px);
}

.nalc-form-checkbox {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nalc-form-checkbox input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.nalc-form-checkbox__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(20, 20, 20, 0.3);
  border-radius: 4px;
  background: #ffffff;
  transition: all 0.2s ease;
  cursor: pointer;
}

.nalc-form-checkbox input:checked + .nalc-form-checkbox__mark {
  background: var(--mystic-primary-color, #0e6496);
  border-color: var(--mystic-primary-color, #0e6496);
}

.nalc-form-checkbox:hover .nalc-form-checkbox__mark {
  border-color: var(--mystic-primary-color, #0e6496);
}

.nalc-form-checkbox input:focus {
  outline: 2px solid var(--mystic-primary-color, #0e6496);
  outline-offset: 2px;
}

.nalc-form-checkbox input:focus + .nalc-form-checkbox__mark {
  outline: 2px solid var(--mystic-primary-color, #0e6496);
  outline-offset: 2px;
  border-color: var(--mystic-primary-color, #0e6496);
}

.nalc-form-checkbox__mark svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 2;
}

.nalc-form-checkbox input:checked + .nalc-form-checkbox__mark svg {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

.nalc-form-card__download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  width: 100%;
  font-family: "Public Sans", sans-serif;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  min-width: 0;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  /* Remove any scrollbar appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Ensure clean button appearance */
  background: var(--mystic-primary-color, #0e6496);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

/* Override button component styles for NALC forms */
.nalc-form-card .mystic-design-button--primary {
  background: var(--mystic-primary-color, #0e6496);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  width: 100%;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  min-width: 0;
  padding: 12px 16px;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  /* Remove any scrollbar appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Ensure clean button appearance */
  box-shadow: none;
  outline: none;
}

.nalc-form-card .mystic-design-button--primary:hover {
  background: var(--mystic-primary-hover, #0a4a6b);
}

.nalc-form-card__download-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.nalc-form-card__links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
}

/* Ensure form list buttons are left-aligned */
.nalc-form-card__links .mystic-design-button {
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100%;
  justify-content: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  min-width: 0;
  flex-shrink: 1;
  /* Remove any scrollbar appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Ensure clean button appearance */
  box-shadow: none;
  outline: none;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
/* .nalc-form-card__links .mystic-design-button--link span {
                  display: block;
                  cursor: pointer;
                } */
.nalc-form-card__links .mystic-design-button--link {
  appearance: auto !important;
  border: 2px solid transparent !important;
}
.nalc-form-card__links .mystic-design-button--link:focus {
  border: 2px solid var(--mystic-primary-color, #0e6496) !important;
  /* outline-offset: 2px !important; */
}

.nalc-form-card__link {
  color: var(--Blue-800, #0f557d);
  font-family: "Public Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border: 1px solid rgba(14, 100, 150, 0.2);
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  max-width: 100%;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  min-width: 0;
  flex-shrink: 1;
  /* Remove any scrollbar appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Ensure clean link appearance */
  box-shadow: none;
  outline: none;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.nalc-form-card__link:hover {
  background: #e9ecef;
  border-color: var(--mystic-primary-color, #0e6496);
}

.nalc-forms-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* Ensure immediate responsive behavior */
  min-height: 0;
  flex-wrap: wrap;
}

.nalc-forms-search {
  flex: 1;
  min-width: 200px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.nalc-forms-search__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.nalc-forms-search__icon {
  position: absolute;
  left: 12px;
  color: #666666;
  pointer-events: none;
}

.nalc-forms-search__input {
  width: 100%;
  max-width: 100%;
  padding: 12px 12px 12px 40px;
  border: 1px solid rgba(20, 20, 20, 0.2);
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  transition: all 0.2s ease;
  box-sizing: border-box;
  overflow: hidden;
}

.nalc-forms-search__input::placeholder {
  color: #999999;
}

.nalc-forms-search__input:focus {
  outline: none;
  border-color: #0e6496;
  box-shadow: 0 0 0 3px rgba(14, 100, 150, 0.1);
}

.nalc-forms-search__suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

.nalc-forms-search__suggestion {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14px;
  color: var(--black-1000);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.nalc-forms-search__suggestion:hover,
.nalc-forms-search__suggestion:focus {
  background: #f8f9fa;
}

.nalc-forms-filter {
  min-width: 150px;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.nalc-forms-filter__select {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(20, 20, 20, 0.2);
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  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 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  box-sizing: border-box;
  overflow: hidden;
}

.nalc-forms-filter__select:focus {
  outline: none;
  border-color: #0e6496;
  box-shadow: 0 0 0 3px rgba(14, 100, 150, 0.1);
}

.nalc-forms-filter__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666666;
  pointer-events: none;
}

.nalc-forms-bulk-actions {
  display: flex;
  padding: 12px 12px 12px 16px;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  border-radius: 16px;
  background: var(--Black-50, rgba(20, 20, 20, 0.05));
  margin-bottom: 16px;
}

.nalc-forms-bulk-actions__info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.nalc-forms-bulk-actions__clear {
  background: none;
  border: none;
  color: #666666;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.2s ease;
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.nalc-forms-bulk-actions__clear:hover {
  color: var(--black-1000);
}

.nalc-forms-bulk-actions__clear svg {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
}

.nalc-forms-bulk-actions__count {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  color: var(--blue-900-main, var(--blue-900));
}

.nalc-forms-bulk-actions__divider {
  width: 1px;
  height: 24px;
  background: rgba(20, 20, 20, 0.1);
}

/* Bulk actions styling - using standard button classes */
.nalc-forms-bulk-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(20, 20, 20, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
}

/* Loading spinner animation */
.loading-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Disabled button state */
.mystic-design-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.nalc-forms-bulk-actions__download svg {
  width: 16px;
  height: 16px;
}

/* Bulk actions download button styling */
.nalc-forms-bulk-actions .mystic-design-button {
  display: flex;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 8px;
  background: var(--yellow-300-main, #f7cd46);
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 24px */
  color: var(--brand-brown);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  /* Remove any scrollbar appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Ensure clean button appearance */
  box-shadow: none;
  outline: none;
  /* Proper text handling */
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  min-width: 0;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.nalc-forms-bulk-actions .mystic-design-button:hover {
  background: var(--yellow-300-main, #f7cd46);
  opacity: 0.9;
  color: var(--brand-brown);
}

.nalc-forms-bulk-actions .mystic-design-button:focus {
  box-shadow: 0 0 0 2px var(--yellow-300-main, #f7cd46);
  outline: none;
}

.nalc-forms-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  /* Ensure immediate visibility */
  opacity: 1;
  visibility: visible;
  min-height: 120px;
}

.nalc-forms-popular-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Ensure immediate visibility */
  opacity: 1;
  visibility: visible;
  min-height: 100px;
}

.nalc-forms-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nalc-forms-pagination__numbers {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nalc-forms-pagination__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 8px);
  background: #ffffff;
  color: var(--black-1000);
  text-align: center;
  font-family: "Public Sans";
  font-size: var(--Components-Alert-Global-fontSize, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

.nalc-forms-pagination__number:hover {
  background: #f8f9fa;
}
.nalc-forms-pagination__number:focus {
  outline: 2px solid #0e6496;
  outline-offset: -2px !important;
}

.nalc-forms-pagination__number--active {
  background: var(--Blue-200, #bee4f9);
  color: var(--black-1000);
  border: none;
}

.nalc-forms-pagination__gap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #666666;
  font-size: 14px;
}

/* Mobile Layout */
@media (max-width: 1024px) {
  .nalc-forms-desktop {
    display: none;
  }

  .nalc-forms-mobile {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .nalc-forms-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .nalc-forms-controls .nalc-forms-search,
  .nalc-forms-controls .nalc-forms-filter {
    width: 100%;
  }

  .nalc-forms-popular-mobile {
    margin-bottom: 24px;
  }

  .nalc-forms-popular-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scrollbar-width: thin;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .nalc-forms-popular-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .nalc-forms-popular-scroll::-webkit-scrollbar-track {
    background: rgba(20, 20, 20, 0.1);
    border-radius: 2px;
  }

  .nalc-forms-popular-scroll::-webkit-scrollbar-thumb {
    background: rgba(20, 20, 20, 0.3);
    border-radius: 2px;
  }

  .nalc-form-card--popular-mobile {
    flex: 0 0 280px;
    min-width: 280px;
  }

  .nalc-form-card--popular-mobile.nalc-form-card--selected {
    background: #f1f9fe;
    border-color: #0e6496;
  }

  .nalc-form-card__download-btn--mobile {
    padding: 12px 16px;
    font-size: 14px;
    background: var(--mystic-primary-color, #0e6496);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    min-width: 0;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    /* Remove any scrollbar appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Ensure clean button appearance */
    box-shadow: none;
    outline: none;
  }

  /* Most Popular mobile buttons should use white variant */
  .nalc-form-card--popular-mobile .nalc-form-card__download-btn--mobile {
    background: white !important;
    color: var(--blue-900) !important;
    border: 1px solid var(--blue-900) !important;
  }

  .nalc-form-card--popular-mobile .nalc-form-card__download-btn--mobile:hover {
    background: var(--blue-100) !important;
    color: var(--blue-900) !important;
    border-color: var(--blue-900) !important;
  }

  .nalc-forms-bulk-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .nalc-forms-bulk-actions__info {
    justify-content: space-between;
  }

  .nalc-forms-bulk-actions__divider {
    display: none;
  }

  .nalc-forms-bulk-actions__download {
    justify-content: center;
  }

  /* Tablet styles for bulk actions download button */
  .nalc-forms-bulk-actions .mystic-design-button {
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 15px;
    /* Remove any scrollbar appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Ensure clean button appearance */
    box-shadow: none;
    outline: none;
    /* Proper text handling */
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    min-width: 0;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .nalc-forms-pagination__numbers {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Tablet styles for NALC form card links */
  .nalc-form-card__links {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .nalc-form-card__links .mystic-design-button {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 14px 20px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nalc-form-card__link {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 14px 20px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 768px) {
  .nalc-forms-mobile {
    padding: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .nalc-forms-section-title {
    font-size: 20px;
  }

  .nalc-forms-section-subtitle {
    font-size: 16px;
  }

  .nalc-form-card {
    padding: 16px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .nalc-form-card__title {
    font-size: 14px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    overflow: visible;
    text-overflow: unset;
  }

  .nalc-form-card__excerpt {
    font-size: 13px;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    overflow: visible;
    text-overflow: unset;
  }

  .nalc-form-card--popular-mobile {
    flex: 0 0 240px;
    min-width: 240px;
    max-width: 240px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .nalc-form-card--popular-mobile.nalc-form-card--selected {
    background: #f1f9fe;
    border-color: #0e6496;
  }

  .nalc-forms-controls {
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Mobile styles for bulk actions download button */
  .nalc-forms-bulk-actions .mystic-design-button {
    padding: 14px 16px;
    border-radius: 4px;
    font-size: 14px;
    /* Remove any scrollbar appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Ensure clean button appearance */
    box-shadow: none;
    outline: none;
    /* Proper text handling */
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    min-width: 0;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Mobile styles for NALC form card links */
  .nalc-form-card__links {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .nalc-form-card__links .mystic-design-button {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 12px 16px;
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .nalc-form-card__link {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

@media (max-width: 480px) {
  .nalc-forms-mobile {
    padding: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .nalc-form-card--popular-mobile {
    flex: 0 0 200px;
    min-width: 200px;
    max-width: 200px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .nalc-form-card--popular-mobile.nalc-form-card--selected {
    background: #f1f9fe;
    border-color: #0e6496;
  }

  .nalc-forms-pagination__numbers {
    gap: 4px;
  }

  .nalc-forms-pagination__number {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* Extra small mobile styles for NALC form card links */
  .nalc-form-card__links {
    gap: 8px;
  }

  .nalc-form-card__links .mystic-design-button {
    padding: 10px 12px;
    font-size: 13px;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .nalc-form-card__link {
    padding: 10px 12px;
    font-size: 13px;
    justify-content: flex-start;
    text-align: left;
  }

  /* Extra small mobile styles for bulk actions download button */
  .nalc-forms-bulk-actions .mystic-design-button {
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 13px;
    /* Remove any scrollbar appearance */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Ensure clean button appearance */
    box-shadow: none;
    outline: none;
    /* Proper text handling */
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    min-width: 0;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
}

/* Desktop Controls Layout */
@media (min-width: 1025px) {
  .nalc-forms-controls {
    flex-direction: row;
    align-items: center;
  }

  .nalc-forms-search {
    flex: 1;
    max-width: 400px;
  }

  .nalc-forms-filter {
    flex-shrink: 0;
  }
}

/* Focus States */
.nalc-form-card:focus-within {
  outline: 2px solid #0e6496;
  outline-offset: -2px;
}

.nalc-forms-search__input:focus,
.nalc-forms-filter__select:focus,
.nalc-forms-pagination__number:focus,
.nalc-form-card__download-btn:focus,
.nalc-forms-bulk-actions__download:focus,
.nalc-forms-bulk-actions__clear:focus {
  outline: 2px solid #0e6496 !important;
  outline-offset: -2px;
  border: 2px solid #0e6496 !important;
}

/* Fallback for browsers that don't support outline-offset */
@supports not (outline-offset: 2px) {
  .nalc-form-card:focus-within {
    outline: 2px solid #0e6496;
    box-shadow:
      0 0 0 2px #ffffff,
      0 0 0 4px #0e6496;
  }

  .nalc-forms-search__input:focus,
  .nalc-forms-filter__select:focus,
  .nalc-forms-pagination__number:focus,
  .nalc-form-card__download-btn:focus,
  .nalc-forms-bulk-actions__download:focus,
  .nalc-forms-bulk-actions__clear:focus {
    outline: 2px solid #0e6496;
    box-shadow:
      0 0 0 2px #ffffff,
      0 0 0 4px #0e6496;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .nalc-form-card {
    border-width: 2px;
  }

  .nalc-form-checkbox__mark {
    border-width: 2px;
  }

  .nalc-forms-search__input,
  .nalc-forms-filter__select {
    border-width: 2px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .nalc-form-card,
  .nalc-form-card__download-btn,
  .nalc-form-card__link,
  .nalc-forms-search__input,
  .nalc-forms-filter__select,
  .nalc-forms-pagination__number,
  .nalc-forms-bulk-actions__download,
  .nalc-form-checkbox__mark {
    transition: none;
  }
}

/* Responsive table */
.mystic-enhanced-data-table--responsive {
  width: 100%;
}

.mystic-enhanced-data-table--responsive .mystic-enhanced-data-table-cell {
  flex: 1;
  min-width: 0;
}

/* Fixed width table with scroll */
.mystic-enhanced-data-table--fixed {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mystic-enhanced-data-table--fixed .mystic-enhanced-data-table-content {
  min-width: max-content;
  width: auto;
}

.mystic-enhanced-data-table--fixed .mystic-enhanced-data-table-cell {
  min-width: 180px;
  flex: none;
}

/* Two-container sticky column layout */
.mystic-enhanced-data-table--sticky-first {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.mystic-enhanced-data-table--sticky-first .mystic-enhanced-data-table-content {
  flex-direction: column;
}

/* Fixed first column container */
.mystic-enhanced-data-table-fixed-column {
  display: flex;
  flex-direction: column;
  min-width: 293px;
  max-width: 293px;
  flex-shrink: 0;
  border-right: 1px solid #eeeef0;
  background: var(--table-bg-primary, #ffffff);
}

.mystic-enhanced-data-table-fixed-column .mystic-enhanced-data-table-row {
  border-right: none;
}

/* Scrollable columns container */
.mystic-enhanced-data-table-scrollable {
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mystic-enhanced-data-table-scrollable .mystic-enhanced-data-table-content {
  min-width: max-content;
}

.mystic-enhanced-data-table-scrollable .mystic-enhanced-data-table-cell {
  min-width: 200px;
  flex: none;
}

/* Variant-specific styling */
.mystic-enhanced-data-table--comparison .mystic-enhanced-data-table-cell--header {
  text-align: center;
}

/* Comparison table variant - 16px border radius */
.mystic-data-table--comparison {
  border-radius: 16px !important;
}

/* Comparison table variant specific styling */
.mystic-data-table--comparison .mystic-data-table__cell {
  background: var(--table-bg-primary, #ffffff);
}

.mystic-data-table--comparison .mystic-data-table__cell--first {
  background: var(--table-bg-primary, #ffffff);
}

.mystic-data-table--comparison .mystic-data-table__cell--data {
  background: var(--table-bg-primary, #ffffff);
}

.mystic-data-table--comparison .mystic-data-table__cell--header {
  background: var(--table-bg-primary, #ffffff);
}

/* Comparison table variant alternating row backgrounds */
.mystic-data-table--comparison .mystic-data-table__row:nth-child(even) .mystic-data-table__cell {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--comparison .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--first {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--comparison .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--data {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--comparison .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--header {
  background: var(--table-bg-secondary, #f7f7f8);
}

/* Ensure header styling takes precedence over first column styling for comparison variant */
.mystic-data-table--comparison .mystic-data-table__cell--header.mystic-data-table__cell--first {
  text-align: center !important;
  color: rgba(20, 20, 20, 0.6) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 140% !important;
  text-transform: none !important;
}

.mystic-enhanced-data-table--checklist .mystic-enhanced-data-table-cell {
  justify-content: center;
}

.mystic-enhanced-data-table--checklist .mystic-enhanced-data-table-cell--first-column {
  justify-content: flex-start;
}

/* Icon styling */
.mystic-checkmark-icon,
.mystic-x-mark-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Ensure SVG icons are visible in data table cells */
.mystic-table-cell-with-icon .mystic-checkmark-icon,
.mystic-table-cell-with-icon .mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Override any global SVG styles that might hide the icons */
.mystic-data-table svg.mystic-checkmark-icon,
.mystic-data-table svg.mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Ensure icons are visible in enhanced data table variants */
.mystic-enhanced-data-table .mystic-checkmark-icon,
.mystic-enhanced-data-table .mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Additional fixes for checklist variant icons */
.mystic-enhanced-data-table--checklist .mystic-checkmark-icon,
.mystic-enhanced-data-table--checklist .mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Force icon visibility in all table contexts */
.mystic-data-table .mystic-checkmark-icon svg,
.mystic-data-table .mystic-x-mark-icon svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Override any global stroke color rules for data table icons */
.mystic-data-table .mystic-checkmark-icon svg path,
.mystic-data-table .mystic-x-mark-icon svg path {
  stroke: inherit !important;
}

/* Ensure checkmark icon maintains green color */
.mystic-data-table .mystic-checkmark-icon svg path {
  stroke: #12b56c !important;
}

/* Ensure x-mark icon maintains red color */
.mystic-data-table .mystic-x-mark-icon svg path {
  stroke: #eb4536 !important;
}

/* Override any button hover effects on data table icons */
.mystic-data-table .mystic-checkmark-icon svg path,
.mystic-data-table .mystic-x-mark-icon svg path {
  stroke: inherit !important;
}

/* Specific overrides for enhanced data table variants */
.mystic-enhanced-data-table .mystic-checkmark-icon svg path {
  stroke: #12b56c !important;
}

.mystic-enhanced-data-table .mystic-x-mark-icon svg path {
  stroke: #eb4536 !important;
}

/* Checklist variant specific color overrides */
.mystic-enhanced-data-table--checklist .mystic-checkmark-icon svg path {
  stroke: #12b56c !important;
}

.mystic-enhanced-data-table--checklist .mystic-x-mark-icon svg path {
  stroke: #eb4536 !important;
}

/* Ultimate override for any global styles that might affect data table icons */
.mystic-data-table svg[class*="mystic-checkmark-icon"] path,
.mystic-data-table svg[class*="mystic-x-mark-icon"] path {
  stroke: inherit !important;
}

.mystic-data-table svg.mystic-checkmark-icon path {
  stroke: #12b56c !important;
}

.mystic-data-table svg.mystic-x-mark-icon path {
  stroke: #eb4536 !important;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .mystic-enhanced-data-table {
    border-radius: 12px;
  }

  /* Ensure icons remain visible on mobile */
  .mystic-enhanced-data-table .mystic-checkmark-icon,
  .mystic-enhanced-data-table .mystic-x-mark-icon {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    width: 24px !important;
    height: 24px !important;
  }

  /* Ensure proper stroke colors on mobile */
  .mystic-enhanced-data-table .mystic-checkmark-icon svg path {
    stroke: #12b56c !important;
  }

  .mystic-enhanced-data-table .mystic-x-mark-icon svg path {
    stroke: #eb4536 !important;
  }

  .mystic-enhanced-data-table-cell {
    padding: 16px 12px;
    min-height: 60px;
  }

  .mystic-enhanced-data-table-cell-content {
    font-size: 14px;
  }

  .mystic-enhanced-table-icon-label {
    font-size: 14px;
  }

  .mystic-enhanced-data-table-fixed-column {
    min-width: 200px;
    max-width: 200px;
  }

  .mystic-enhanced-data-table-scrollable .mystic-enhanced-data-table-cell {
    min-width: 150px;
  }

  /* Force horizontal scroll on mobile for fixed tables */
  .mystic-enhanced-data-table--fixed .mystic-enhanced-data-table-cell {
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .mystic-enhanced-data-table-cell {
    padding: 12px 8px;
    min-height: 50px;
  }

  .mystic-enhanced-data-table-cell-content {
    font-size: 13px;
  }

  .mystic-enhanced-table-icon-label {
    font-size: 13px;
  }

  .mystic-enhanced-data-table-fixed-column {
    min-width: 160px;
    max-width: 160px;
  }

  .mystic-enhanced-data-table-scrollable .mystic-enhanced-data-table-cell {
    min-width: 120px;
  }

  .mystic-enhanced-data-table--fixed .mystic-enhanced-data-table-cell {
    min-width: 100px;
  }
}

/* Focus states for accessibility */
.mystic-enhanced-data-table-cell:focus {
  outline: 2px solid #007cba;
  outline-offset: -2px;
}

.mystic-enhanced-data-table-cell:focus-visible {
  outline: 2px solid #007cba;
  outline-offset: -2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-enhanced-data-table {
    border: 2px solid;
  }

  .mystic-enhanced-data-table-cell {
    border-right: 1px solid;
  }

  .mystic-enhanced-data-table-row {
    border-bottom: 1px solid;
  }
}

/* ========================================
                   DATA TABLE LINK FUNCTIONALITY
                   ======================================== */

/* Header links */
.mystic-table-header-link {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
  display: block;
  width: 100%;
  height: 100%;
}

.mystic-table-header-link:hover {
  color: #0f557d;
  text-decoration: none;
}

.mystic-table-header-link:focus {
  outline: 2px solid #0f557d;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Cell links */
.mystic-table-cell-link {
  color: inherit;
  text-decoration: none;
  transition: all 0.2s ease;
  display: block;
  width: 100%;
  height: 100%;
}

.mystic-table-cell-link:hover {
  color: #0f557d;
  text-decoration: none;
  transform: translateY(-1px);
}

.mystic-table-cell-link:focus {
  outline: 2px solid #0f557d;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Ensure links work with all content types */
.mystic-table-cell-link .mystic-table-cell-with-icon {
  transition: all 0.2s ease;
}

.mystic-table-cell-link:hover .mystic-table-cell-with-icon {
  transform: translateY(-1px);
}

.mystic-table-cell-link .mystic-table-bullet-list {
  transition: all 0.2s ease;
}

.mystic-table-cell-link:hover .mystic-table-bullet-list {
  transform: translateY(-1px);
}

.mystic-table-cell-link .mystic-table-main-content {
  transition: all 0.2s ease;
}

.mystic-table-cell-link:hover .mystic-table-main-content {
  transform: translateY(-1px);
}

.mystic-table-cell-link .mystic-table-note-container {
  transition: all 0.2s ease;
}

.mystic-table-cell-link:hover .mystic-table-note-container {
  transform: translateY(-1px);
}

/* External link indicators */
.mystic-table-cell-link[target="_blank"]::after,
.mystic-table-header-link[target="_blank"]::after {
  content: "↗";
  font-size: 0.8em;
  margin-left: 4px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.mystic-table-cell-link[target="_blank"]:hover::after,
.mystic-table-header-link[target="_blank"]:hover::after {
  opacity: 1;
}

/* Accessibility improvements for links */
@media (prefers-reduced-motion: reduce) {
  .mystic-table-cell-link,
  .mystic-table-header-link,
  .mystic-table-cell-link .mystic-table-cell-with-icon,
  .mystic-table-cell-link .mystic-table-bullet-list,
  .mystic-table-cell-link .mystic-table-main-content,
  .mystic-table-cell-link .mystic-table-note-container {
    transition: none;
  }

  .mystic-table-cell-link:hover,
  .mystic-table-header-link:hover,
  .mystic-table-cell-link:hover .mystic-table-cell-with-icon,
  .mystic-table-cell-link:hover .mystic-table-bullet-list,
  .mystic-table-cell-link:hover .mystic-table-main-content,
  .mystic-table-cell-link:hover .mystic-table-note-container {
    transform: none;
  }
}

/* High contrast mode support for links */
@media (prefers-contrast: high) {
  .mystic-table-cell-link,
  .mystic-table-header-link {
    border: 1px solid transparent;
  }

  .mystic-table-cell-link:hover,
  .mystic-table-header-link:hover {
    border-color: currentColor;
  }

  .mystic-table-cell-link:focus,
  .mystic-table-header-link:focus {
    outline-width: 3px;
    outline-color: currentColor;
  }
}

/* ========================================
                   ENHANCED DATA TABLE FEATURES FOR EXISTING WIDGET
                   ======================================== */

/* Enhanced variant styling */
.mystic-data-table--enhanced {
  border-radius: 16px;
  font-family: "Public Sans", sans-serif;
  background: var(--table-bg-primary, #ffffff);
  border: 1px solid var(--table-border-color, #eeeef0);
}

.mystic-data-table--enhanced .mystic-data-table__cell {
  padding: 24px 16px;
  min-height: 74px;
  border-right: 1px solid var(--table-border-color, #eeeef0);
  border-bottom: 1px solid var(--table-border-color, #eeeef0);
  background: var(--table-bg-primary, #ffffff);
}

/* Healthcare variant overrides for enhanced styling */
.mystic-data-table--healthcare {
  border: none !important;
  border-radius: 0 !important;
}

.mystic-data-table--healthcare .mystic-data-table__cell {
  border-right: 1px solid var(--table-border-color, #eeeef0) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-top: none !important;
  padding: 12px 16px !important;
}

.mystic-data-table--enhanced .mystic-data-table__cell--header {
  background: var(--table-bg-primary, #ffffff);
  border-top: 1px solid var(--table-border-color, #eeeef0);
  font-weight: 700;
  font-size: 16px;
  line-height: 140%;
  color: rgba(20, 20, 20, 0.6);
  text-align: center;
}

.mystic-data-table--enhanced .mystic-data-table__cell--first {
  text-align: left;
  background: var(--table-bg-primary, #ffffff);
}

/* Ensure header styling takes precedence over first column styling */
.mystic-data-table--enhanced .mystic-data-table__cell--header.mystic-data-table__cell--first {
  text-align: center !important;
  color: rgba(20, 20, 20, 0.6) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 140% !important;
  text-transform: none !important;
}

.mystic-data-table--enhanced .mystic-data-table__cell--first:not(.mystic-data-table__cell--header) {
  text-align: left;
}

.mystic-data-table--enhanced .mystic-data-table__cell--data {
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  color: #0f557d;
  text-align: center;
  background: var(--table-bg-primary, #ffffff);
}

.mystic-data-table--enhanced .mystic-data-table__cell--first.mystic-data-table__cell--data {
  color: rgba(20, 20, 20, 0.6);
  text-align: left;
  background: var(--table-bg-primary, #ffffff);
}

/* Enhanced variant alternating row backgrounds */
.mystic-data-table--enhanced .mystic-data-table__row:nth-child(even) .mystic-data-table__cell {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--enhanced .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--header {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--enhanced .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--first {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--enhanced .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--data {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--enhanced
  .mystic-data-table__row:nth-child(even)
  .mystic-data-table__cell--first.mystic-data-table__cell--data {
  background: var(--table-bg-secondary, #f7f7f8);
}

/* Healthcare variant specific styling */
.mystic-data-table--healthcare {
  background: var(--table-bg-primary, #ffffff);
  border: none;
  border-radius: 0;
  padding: 0;
}

.mystic-data-table--healthcare .mystic-data-table__cell {
  background: var(--table-bg-primary, #ffffff);
  border-left: none;
  border-bottom: none;
  border-right: 1px solid var(--table-border-color, #eeeef0);
}

.mystic-data-table--healthcare .mystic-data-table__cell:first-child {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  flex: none;
  border-left: none;
  border-bottom: none;
  border-right: 1px solid var(--table-border-color, #eeeef0);
  background: var(--table-bg-primary, #ffffff);
}

.mystic-data-table--healthcare .mystic-data-table__cell--first {
  border-left: none;
  border-bottom: none;
  border-right: 1px solid var(--table-border-color, #eeeef0);
  background: var(--table-bg-primary, #ffffff);
}

.mystic-data-table--healthcare .mystic-data-table__cell--last {
  border-right: none;
  border-bottom: none;
  background: var(--table-bg-primary, #ffffff);
}

.mystic-data-table--healthcare .mystic-data-table__row:last-child .mystic-data-table__cell {
  border-bottom: none;
  background: var(--table-bg-primary, #ffffff);
  padding: 19px 16px !important;
}

/* Add proper borders for healthcare variant */
.mystic-data-table--healthcare .mystic-data-table__row {
  border-bottom: 1px solid var(--table-border-color, #eeeef0) !important;
}

.mystic-data-table--healthcare .mystic-data-table__row:last-child {
  /* border-bottom: none !important; */
}

.mystic-data-table--healthcare thead .mystic-data-table__row:last-child {
  border-bottom: none !important;
}
.mystic-data-table--healthcare .mystic-data-table__cell {
  border-right: 1px solid var(--table-border-color, #eeeef0) !important;
  border-bottom: none !important;
  border-top: none !important;
}

.mystic-data-table--healthcare .mystic-data-table__cell--header {
  border-right: 1px solid var(--table-border-color, #eeeef0) !important;
  border-bottom: 1px solid var(--table-border-color, #eeeef0) !important;
  border-top: none !important;
}

.mystic-data-table--healthcare .mystic-data-table__cell--data {
  border-right: 1px solid var(--table-border-color, #eeeef0) !important;
  border-bottom: none !important;
  border-top: none !important;
}

.mystic-data-table--healthcare .mystic-data-table__cell--first {
  border-left: none !important;
  border-right: 1px solid var(--table-border-color, #eeeef0) !important;
  border-bottom: none !important;
  border-top: none !important;
}

.mystic-data-table--healthcare .mystic-data-table__cell--last {
  border-right: none !important;
  border-bottom: none !important;
  border-top: none !important;
}

.mystic-data-table--healthcare .mystic-data-table__cell--header.mystic-data-table__cell--last {
  border-right: none !important;
  border-bottom: 1px solid var(--table-border-color, #eeeef0) !important;
  border-top: none !important;
}

/* Healthcare variant alternating row backgrounds */
.mystic-data-table--healthcare .mystic-data-table__row:nth-child(even) .mystic-data-table__cell {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--healthcare .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--first {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--healthcare .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--data {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--healthcare .mystic-data-table__row:nth-child(even) .mystic-data-table__cell--last {
  background: var(--table-bg-secondary, #f7f7f8);
}

/* Ensure header styling takes precedence over first column styling for healthcare variant */
.mystic-data-table--healthcare .mystic-data-table__cell--header.mystic-data-table__cell--first {
  text-align: center !important;
  color: rgba(20, 20, 20, 0.6) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 140% !important;
  text-transform: none !important;
  border-bottom: 1px solid var(--table-border-color, #eeeef0) !important;
}

/* Text highlighting */
.mystic-table-highlight {
  color: var(--highlight-color, #b0540d);
  font-weight: 500;
}

/* Striped rows for enhanced variants */
.mystic-data-table--enhanced .mystic-data-table__row:nth-child(even) {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--enhanced .mystic-data-table__row:nth-child(odd) {
  background: var(--table-bg-primary, #ffffff);
}

/* Ensure equal column widths */
.mystic-data-table--enhanced .mystic-data-table__cell {
  width: auto !important;
  flex: 1;
  padding: 36px 16px !important;
  justify-content: center !important;
}

/* Content styling for enhanced variants */
.mystic-table-highlight {
  font-weight: 600;
  color: var(--highlight-color, #0f557d);
}

.mystic-table-cell-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* Ensure icons are properly displayed in table cells */
.mystic-table-cell-with-icon svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  flex-shrink: 0;
}

/* Ensure proper stroke colors in table cells */
.mystic-table-cell-with-icon .mystic-checkmark-icon svg path {
  stroke: #12b56c !important;
}

.mystic-table-cell-with-icon .mystic-x-mark-icon svg path {
  stroke: #eb4536 !important;
}

.mystic-data-table__cell--first .mystic-table-cell-with-icon {
  justify-content: flex-start;
}

.mystic-table-icon-label {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 160%;
  color: #0f557d;
}

.mystic-checkmark-icon,
.mystic-x-mark-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Ensure SVG icons are visible in data table cells */
.mystic-table-cell-with-icon .mystic-checkmark-icon,
.mystic-table-cell-with-icon .mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Override any global SVG styles that might hide the icons */
.mystic-data-table svg.mystic-checkmark-icon,
.mystic-data-table svg.mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Ensure icons are visible in enhanced data table variants */
.mystic-enhanced-data-table .mystic-checkmark-icon,
.mystic-enhanced-data-table .mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Bullet point styling */
.mystic-table-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  align-self: stretch;
}

.mystic-table-bullet-item {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: inherit;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mystic-table-bullet-item:before {
  content: "•";
  position: absolute;
  left: 0;
  color: inherit;
  font-weight: bold;
  font-size: 16px;
}

.mystic-table-bullet-item:last-child {
  margin-bottom: 0;
}

/* Main content styling for better text wrapping */
.mystic-table-main-content {
  align-self: stretch;
  color: inherit;
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.mystic-table-main-content:last-child {
  margin-bottom: 0;
}

/* Special styling for notes and callouts */
.mystic-table-note-container {
  display: flex;
  padding: 20px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 12px;
  background: #f1f9fe;
  margin-top: 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mystic-table-note-content {
  flex: 1 0 0;
  color: var(--blue-900);
  font-family:
    "Public Sans",
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.mystic-table-note-label {
  font-weight: 700;
}

/* Striped rows for enhanced variants */
.mystic-data-table--enhanced .mystic-data-table__row:nth-child(even) {
  background: var(--table-bg-secondary, #f7f7f8);
}

.mystic-data-table--enhanced .mystic-data-table__row:nth-child(odd) {
  background: var(--table-bg-primary, #ffffff);
}

/* Ensure equal column widths */
.mystic-data-table--enhanced .mystic-data-table__cell {
  width: auto !important;
  flex: 1;
}

/* Mobile responsive adjustments for enhanced variants */
@media (max-width: 768px) {
  .mystic-data-table--enhanced .mystic-data-table__cell {
    padding: 16px 12px;
    min-height: 60px;
    font-size: 14px;
  }

  .mystic-table-icon-label {
    font-size: 14px;
  }

  .mystic-data-table--healthcare {
    padding: 0;
    overflow-x: auto;
  }

  .mystic-data-table--healthcare .mystic-data-table__cell:first-child {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
  }

  .mystic-data-table--healthcare .mystic-data-table__cell {
    padding: 16px 8px;
    font-size: 14px;
  }

  .mystic-data-table--healthcare .mystic-data-table__cell--header {
    padding: 6px 8px;
    min-height: 48px;
    font-size: 10px;
  }

  .mystic-data-table__table {
    min-width: 600px;
  }
}

@media (max-width: 480px) {
  .mystic-data-table--enhanced .mystic-data-table__cell {
    padding: 12px 8px;
    min-height: 50px;
    font-size: 13px;
  }

  .mystic-table-icon-label {
    font-size: 13px;
  }
}

/* Header cells */
.data-table-cell--header {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

.data-table-cell--first-row .data-table-cell-content {
  align-self: stretch;
  color: rgba(20, 20, 20, 0.7);
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

/* Data cells */
.data-table-cell--data:not(.data-table-cell--first-row) {
  justify-content: center;
  align-items: center;
}

.data-table-cell--first-column:not(.data-table-cell--first-row) {
  justify-content: flex-start;
  align-items: flex-start;
}

.data-table-cell--first-column:not(.data-table-cell--first-row) .data-table-cell-content {
  flex: 1;
  color: rgba(20, 20, 20, 0.7);
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

.data-table-cell--data:not(.data-table-cell--first-column):not(.data-table-cell--first-row) .data-table-cell-content {
  flex: 1;
  color: var(--e-global-color-primary, #0f557d);
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  text-align: center;
}

.data-table-cell-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

/* Header cell content centering */
.data-table-cell--header:not(.data-table-cell--first-column) {
  justify-content: center;
  align-items: center;
}

.data-table-cell--header:not(.data-table-cell--first-column) .data-table-cell-content {
  align-self: stretch;
  text-align: center;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .data-table {
    border: 2px solid rgba(255, 255, 255, 0.6);
    margin: 0 16px;
  }

  .data-table-cell {
    padding: 16px 20px;
    min-height: 50px;
  }

  .data-table-cell-content {
    font-size: 14px;
  }

  .data-table--fixed {
    margin: 0 !important;
  }

  /* Force horizontal scroll on mobile for fixed tables */
  .data-table--fixed:not(.data-table--sticky-first) .data-table-cell {
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .data-table-cell {
    padding: 12px 16px;
    min-height: 45px;
  }

  .data-table-cell-content {
    font-size: 13px;
  }

  .data-table--fixed:not(.data-table--sticky-first) .data-table-cell {
    min-width: 100px;
  }
}

/* ========================================
                   TESTIMONIAL CARD VARIANT COMPONENT STYLES
                   ======================================== */

.mystic-testimonial-card-variant-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mystic-testimonial-card-variant {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 547px;
  min-height: 400px;
  border-radius: 17px;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: var(--transition-smooth);
}

.mystic-testimonial-card-variant:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Auto Flex Styles for Testimonial Card Variant */
.mystic-testimonial-card-variant-auto-flex {
  width: 100%;
  height: 100%;
  flex: 1;
  min-width: 547px;
  min-height: 400px;
}

.mystic-testimonial-card-variant-wrapper:has(.mystic-testimonial-card-variant-auto-flex) {
  display: flex;
  width: 100%;
  height: 100%;
}

.mystic-testimonial-overlay-variant {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.mystic-testimonial-content-variant {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  min-height: 400px;
  padding: 24px;
  border-radius: 16px;
}

.mystic-testimonial-quote-container-variant {
  width: 100%;
  margin-bottom: 24px;
}

.mystic-testimonial-quote-variant {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--Yellow-950, var(--mystic-brand-brown));
  font-family: "Public Sans";
  font-size: var(--headline-h4, 24px);
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 28.8px */
  letter-spacing: -0.48px;
  text-align: left;
}

.mystic-testimonial-customer-variant {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mystic-testimonial-avatar-variant {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.mystic-testimonial-customer-info-variant {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.mystic-testimonial-customer-header-variant {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mystic-testimonial-customer-name-variant {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--black-1000);
  font-family: "Public Sans";
  font-size: var(--Paragraph-p2, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
}

.mystic-testimonial-customer-description-variant {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--Black-400, rgba(20, 20, 20, 0.4));
  font-family: "Public Sans";
  font-size: var(--Paragraph-p2, 14px);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
}

.mystic-testimonial-rating-variant {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: #d3ffe4;
  border-radius: 8px;
  color: var(--mystic-text-dark);
  font-family: var(--font-public-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 150%;
}

.mystic-testimonial-rating-text-variant {
  margin: 0 !important;
  padding: 0 !important;
}

.mystic-testimonial-rating-star-variant {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--mystic-text-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-testimonial-card-variant {
    width: 100%;
    max-width: 500px;
    min-height: 350px;
  }

  .mystic-testimonial-card-variant-auto-flex {
    min-width: 300px;
    min-height: 350px;
  }

  .mystic-testimonial-content-variant {
    min-height: 350px;
    padding: 20px;
  }

  .mystic-testimonial-quote-variant {
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.4px;
  }

  .mystic-testimonial-customer-name-variant {
    font-size: 13px;
  }

  .mystic-testimonial-customer-description-variant {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .mystic-testimonial-card-variant {
    min-height: 320px;
  }

  .mystic-testimonial-card-variant-auto-flex {
    min-width: 280px;
    min-height: 320px;
  }

  .mystic-testimonial-content-variant {
    min-height: 320px;
    padding: 16px;
  }

  .mystic-testimonial-quote-variant {
    font-size: 18px;
    line-height: 120%;
    letter-spacing: -0.36px;
  }

  .mystic-testimonial-avatar-variant {
    width: 36px;
    height: 36px;
  }

  .mystic-testimonial-customer-name-variant {
    font-size: 12px;
  }

  .mystic-testimonial-customer-description-variant {
    font-size: 11px;
  }

  .mystic-testimonial-rating-variant {
    padding: 3px 6px;
    font-size: 11px;
  }

  .mystic-testimonial-rating-star-variant {
    width: 8px;
    height: 8px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .mystic-testimonial-card-variant {
    transition: none;
  }

  .mystic-testimonial-card-variant:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .mystic-testimonial-card-variant {
    border: 2px solid #000000;
  }

  .mystic-testimonial-quote-variant {
    color: #000000;
    text-shadow: 1px 1px 0 #ffffff;
  }

  .mystic-testimonial-customer-name-variant {
    color: #000000;
    text-shadow: 1px 1px 0 #ffffff;
  }

  .mystic-testimonial-customer-description-variant {
    color: #000000;
    text-shadow: 1px 1px 0 #ffffff;
  }
}

/* Print Styles */
@media print {
  .mystic-testimonial-card-variant {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #000000;
  }

  .mystic-testimonial-overlay-variant {
    display: none;
  }

  .mystic-testimonial-content-variant {
    background: none;
    color: #000000;
  }

  .mystic-testimonial-quote-variant,
  .mystic-testimonial-customer-name-variant,
  .mystic-testimonial-customer-description-variant {
    color: #000000;
  }
}

/* ========================================
                   TESTIMONIAL CARD VARIANT 2
                   ======================================== */

.mystic-testimonial-card-variant-2-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mystic-testimonial-card-variant-2 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 992px;
  min-height: 448px;
  border-radius: 16px;
  overflow: hidden;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.mystic-testimonial-card-variant-2:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

.mystic-testimonial-card-variant-2-auto-flex {
  width: 100%;
  height: 100%;
  flex: 1;
  min-width: 992px;
  min-height: 448px;
}

.mystic-testimonial-card-variant-2-wrapper:has(.mystic-testimonial-card-variant-2-auto-flex) {
  display: flex;
  width: 100%;
  height: 100%;
}

.mystic-testimonial-overlay-variant-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(88deg, #00000099 0%, #00000000 100%);
  z-index: 1;
}

.mystic-testimonial-content-variant-2 {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  min-height: 448px;
  padding: 24px;
  box-sizing: border-box;
}

.mystic-testimonial-quote-container-variant-2 {
  margin-bottom: 24px;
  text-align: left;
}

.mystic-testimonial-quote-variant-2 {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 28.8px;
  letter-spacing: -0.48px;
  text-align: left;
}

.mystic-user-profile-variant-2 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 429px;
}

.mystic-user-profile-avatar-variant-2 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mystic-user-profile-content-variant-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}

.mystic-user-profile-header-variant-2 {
  display: flex;
  height: 18px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.mystic-user-profile-name-variant-2 {
  color: #ffffff;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

.mystic-user-profile-description-variant-2 {
  color: #ffffff;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.mystic-rating-badge-variant-2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background-color: var(--Pink-01, #d02dd0);
  border-radius: 4px;
  color: #ffffff;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}

.mystic-rating-badge-text-variant-2 {
  color: inherit;
}

.mystic-rating-badge-star-variant-2 {
  width: 10px;
  height: 10px;
  color: #ffffff;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .mystic-testimonial-card-variant-2 {
    width: 100%;
    min-height: 400px;
  }

  .mystic-testimonial-card-variant-2-auto-flex {
    min-width: 300px;
    min-height: 400px;
  }

  .mystic-testimonial-content-variant-2 {
    min-height: 400px;
    padding: 20px;
  }

  .mystic-testimonial-quote-variant-2 {
    font-size: 20px;
    line-height: 24px;
  }

  .mystic-user-profile-name-variant-2 {
    font-size: 13px;
  }

  .mystic-user-profile-description-variant-2 {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .mystic-testimonial-card-variant-2 {
    min-height: 350px;
  }

  .mystic-testimonial-card-variant-2-auto-flex {
    min-width: 280px;
    min-height: 350px;
  }

  .mystic-testimonial-content-variant-2 {
    min-height: 350px;
    padding: 16px;
  }

  .mystic-testimonial-quote-variant-2 {
    font-size: 18px;
    line-height: 22px;
  }

  .mystic-user-profile-avatar-variant-2 {
    width: 40px;
    height: 40px;
  }

  .mystic-user-profile-name-variant-2 {
    font-size: 12px;
  }

  .mystic-user-profile-description-variant-2 {
    font-size: 12px;
  }

  .mystic-rating-badge-variant-2 {
    font-size: 10px;
    padding: 1px 4px;
  }

  .mystic-rating-badge-star-variant-2 {
    width: 8px;
    height: 8px;
  }
}

/* Accessibility and Performance */
@media (prefers-reduced-motion: reduce) {
  .mystic-testimonial-card-variant-2 {
    transition: none;
  }

  .mystic-testimonial-card-variant-2:hover {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .mystic-testimonial-card-variant-2 {
    border: 2px solid #000000;
  }

  .mystic-testimonial-quote-variant-2 {
    color: #000000;
    text-shadow: 1px 1px 2px #ffffff;
  }

  .mystic-user-profile-name-variant-2,
  .mystic-user-profile-description-variant-2 {
    color: #000000;
    text-shadow: 1px 1px 2px #ffffff;
  }
}

@media print {
  .mystic-testimonial-card-variant-2 {
    background-image: none;
    background-color: var(--mystic-bg-white);
    color: #000000;
    border: 1px solid #000000;
  }

  .mystic-testimonial-overlay-variant-2 {
    display: none;
  }

  .mystic-testimonial-content-variant-2 {
    color: #000000;
  }

  .mystic-testimonial-quote-variant-2,
  .mystic-user-profile-name-variant-2,
  .mystic-user-profile-description-variant-2 {
    color: #000000;
  }
}

/* ========================================
                   STEP BY STEP COMPONENT STYLES - 100% FIGMA MATCH
                   ======================================== */

.mystic-step-container {
  width: 100%;
  font-family: var(--font-public-sans);
}

/* Grid Layouts */
.mystic-step-grid {
  display: grid;
  gap: 16px;
}

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

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

/* 2 Rows Layout (2x2 Grid) */
.mystic-step-rows--2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 16px 16px;
  row-gap: 48px;
}

/* 1 Column Layout */
.mystic-step-column {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Individual Step Item */
.mystic-step-item {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
}

/* Step Header with dividers and number */
.mystic-step-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.mystic-step-divider {
  height: 1px;
  background-color: var(--mystic-border-light);
  width: 100%;
}

.mystic-step-number-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.mystic-step-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mystic-step-number {
  font-family: var(--font-public-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.24px;
  text-transform: none;
}

/* Step Content */
.mystic-step-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

/* Icon */
.mystic-step-icon {
  display: flex;
  padding: 14px;
  justify-content: center;
  align-items: center;
  border-radius: 84px;
  border: 1px solid #eeeef0;
  background-color: transparent;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.mystic-step-icon i,
.mystic-step-icon svg {
  width: 28px;
  height: 28px;
  color: var(--blue-600);
  fill: var(--blue-600);
}

/* Title */
.mystic-step-title {
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 160%;
  color: var(--mystic-text-dark);
  margin: 0 !important;
  align-self: stretch;
  text-align: left;
  text-transform: none !important;
}

.mystic-highlighted-text {
  font-weight: 600;
}

/* Text highlighting for simple heading component */
.mystic-highlight {
  color: var(--highlight-color, #b0540d);
  font-weight: 600;
}

/* Ensure highlight works within heading component descriptions */
.mystic-heading-component .mystic-description .mystic-highlight {
  color: var(--highlight-color, #b0540d);
  font-weight: 600;
}
.mystic-heading-component .mystic-description .strong {
  color: var(--black-1000);
  font-weight: 600;
}
/* Bullet List */
.mystic-step-bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: stretch;
}

.mystic-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mystic-checkmark-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 0;
  align-self: flex-start;
}

.mystic-bullet-text {
  flex: 1;
  font-family: var(--font-public-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  color: var(--mystic-text-dark);
  margin: 0 !important;
}

.mystic-bullet-highlighted {
  font-weight: 400;
  color: rgba(20, 20, 20, 0.7);
}

.mystic-bullet-link {
  color: #0e6496;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: var(--transition-fast);
}

.mystic-bullet-link:hover {
  color: #0a5578;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .mystic-step-grid--4-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .mystic-step-grid--3-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .mystic-step-grid--4-columns,
  .mystic-step-grid--3-columns,
  .mystic-step-rows--2x2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mystic-step-column {
    gap: 32px;
  }

  .mystic-step-item {
    gap: 24px;
  }

  .mystic-step-content {
    gap: 16px;
  }

  .mystic-step-title {
    font-size: 15px;
  }

  .mystic-bullet-text {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .mystic-step-title {
    font-size: 14px;
  }

  .mystic-bullet-text {
    font-size: 14px;
  }

  .mystic-step-icon {
    width: 48px;
    height: 48px;
    padding: 10px;
  }

  .mystic-step-icon i,
  .mystic-step-icon svg {
    width: 24px;
    height: 24px;
  }
}

/* Accessibility for Step by Step */
@media (prefers-reduced-motion: reduce) {
  .mystic-step-item {
    transition: none;
  }

  .mystic-bullet-link {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-step-item {
    border: 1px solid currentColor;
    padding: 12px;
    border-radius: 8px;
  }

  .mystic-step-divider {
    background-color: currentColor;
    opacity: 0.5;
  }
}

/* ========================================
                   PLAN CARD COMPONENT - FIGMA DESIGN
                   ======================================== */

.mystic-plan-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 40px 24px 16px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  width: 100%;
  max-width: 496px;
  box-sizing: border-box;
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
}

/* Card Title */
.mystic-plan-card-title {
  align-self: stretch;
  color: var(--black-1000);
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.48px;
  margin: 0 !important;
  text-align: left;
}

/* Accordion Wrapper */
.mystic-plan-accordion-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Accordion Container */
.mystic-plan-accordion {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  box-sizing: border-box;
}

/* Accordion Header */
.mystic-plan-accordion-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.mystic-plan-accordion-header:hover {
  opacity: 0.8;
}

.mystic-plan-accordion-title {
  flex: 1 0 0;
  color: var(--black-1000);
  font-family: "Public Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%; /* 23.4px */
  margin: 0 !important;
}

/* Accordion Icon */
.mystic-plan-accordion-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.mystic-plan-accordion-icon.expanded {
  transform: rotate(180deg);
}

/* Accordion Content */
.mystic-plan-accordion-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease;
  opacity: 0;
}

.mystic-plan-accordion-content.expanded {
  max-height: 1000px;
  opacity: 1;
  padding-top: 8px;
}

/* Accordion List */
.mystic-plan-accordion-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

/* Accordion List Item */
.mystic-plan-accordion-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

/* Checkmark Icon */
.mystic-plan-checkmark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Accordion Text */
.mystic-plan-accordion-text {
  flex: 1 0 0;
  color: rgba(20, 20, 20, 0.7);
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  margin: 0 !important;
}

/* Button Wrapper */
.mystic-plan-button-wrapper {
  align-self: stretch;
}

/* Button */
.mystic-plan-button {
  display: flex;
  height: 48px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  background: var(--e-global-color-accent, #f7cd46);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  width: 100%;
  box-sizing: border-box;
}

.mystic-plan-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(247, 205, 70, 0.3);
}

.mystic-plan-button:active {
  transform: translateY(0);
}

/* Button Content */
.mystic-plan-button-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Button Text */
.mystic-plan-button-text {
  color: var(--e-global-color-text-dark, var(--mystic-brand-brown));
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button Icon */
.mystic-plan-button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-plan-card {
    max-width: 100%;
    padding: 32px 20px 16px 20px;
    gap: 20px;
  }

  .mystic-plan-card-title {
    font-size: 22px;
    letter-spacing: -0.44px;
  }

  .mystic-plan-accordion {
    padding: 20px;
    gap: 14px;
  }

  .mystic-plan-accordion-title {
    font-size: 17px;
  }

  .mystic-plan-accordion-text {
    font-size: 15px;
  }

  .mystic-plan-button-text {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .mystic-plan-card {
    padding: 24px 16px 12px 16px;
    gap: 16px;
  }

  .mystic-plan-card-title {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .mystic-plan-accordion {
    padding: 16px;
    gap: 12px;
  }

  .mystic-plan-accordion-title {
    font-size: 16px;
  }

  .mystic-plan-accordion-text {
    font-size: 14px;
    line-height: 150%;
  }

  .mystic-plan-button {
    height: 44px;
    padding: 12px 16px;
  }

  .mystic-plan-button-text {
    font-size: 14px;
  }

  .mystic-plan-button-icon {
    width: 18px;
    height: 18px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .mystic-plan-accordion-icon,
  .mystic-plan-accordion-content,
  .mystic-plan-button {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-plan-card {
    border: 2px solid currentColor;
  }

  .mystic-plan-accordion {
    border: 1px solid currentColor;
  }

  .mystic-plan-button {
    border: 2px solid currentColor;
  }
}

/* ========================================
                   CARD DOCUMENT COMPONENT - FIGMA DESIGN
                   ======================================== */

.mystic-card-document {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 32px;
  border-radius: 12px;
  width: 100%;
  max-width: 482px;
  box-sizing: border-box;
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  overflow: hidden;
}

/* Variant Backgrounds */
.mystic-card-document--blue {
  background-color: #f1f9fe;
}

.mystic-card-document--yellow {
  background-color: #fefbec;
}

/* Content Section */
.mystic-card-document-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* Header */
.mystic-card-document-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
}

.mystic-card-document-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}

/* Title */
.mystic-card-document-title {
  color: var(--black-1000);
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  margin: 0 !important;
  align-self: stretch;
}

/* Description */
.mystic-card-document-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;
  overflow: hidden;
  color: rgba(20, 20, 20, 0.8);
  text-overflow: ellipsis;
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.16px;
  margin: 0 !important;
}

/* Bullet List */
.mystic-card-document-bullets {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.mystic-card-document-bullet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

/* Checkmark Icon */
.mystic-card-document-checkmark {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Bullet Text */
.mystic-card-document-bullet-text {
  flex: 1 0 0;
  color: rgba(20, 20, 20, 0.8);
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  margin: 0 !important;
}

/* Highlighted Text */
.mystic-card-document-highlight {
  font-weight: 700;
  color: inherit;
}

/* Button Wrapper */
.mystic-card-document-button-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

/* Button */
.mystic-card-document-button {
  display: flex;
  height: 40px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border-radius: 8px;
  background: var(--e-global-color-secondary, var(--mystic-brand-blue));
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  box-sizing: border-box;
}

.mystic-card-document-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(19, 73, 106, 0.3);
}

.mystic-card-document-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(19, 73, 106, 0.3);
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.mystic-card-document-button:active {
  transform: translateY(0);
}

/* Button Content */
.mystic-card-document-button-content {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Button Text */
.mystic-card-document-button-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  color: var(--e-global-color-text-light, #ffffff);
  text-overflow: ellipsis;
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  white-space: nowrap;
}

/* Button Icon */
.mystic-card-document-button-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Auto Flex Styles */
.mystic-card-document-auto-flex {
  width: 100%;
  max-width: 100%;
  height: 100%;
  flex: 1;
  min-width: 200px;
  min-height: 300px;
  overflow: hidden;
}

.mystic-card-document-auto-flex .mystic-card-document-content {
  max-width: 100%;
  overflow: hidden;
}

.mystic-card-document-auto-flex .mystic-card-document-title {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.mystic-card-document-auto-flex .mystic-card-document-description {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.mystic-card-document-auto-flex .mystic-card-document-bullet-text {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-card-document {
    max-width: 100%;
    padding: 24px;
    gap: 24px;
  }

  .mystic-card-document-auto-flex {
    min-width: 200px;
    min-height: 300px;
    max-width: 100%;
    overflow: hidden;
  }

  .mystic-card-document-auto-flex .mystic-card-document-content {
    max-width: 100%;
    overflow: hidden;
  }

  .mystic-card-document-auto-flex .mystic-card-document-title {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .mystic-card-document-auto-flex .mystic-card-document-description {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .mystic-card-document-auto-flex .mystic-card-document-bullet-text {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .mystic-card-document-title {
    font-size: 15px;
  }

  .mystic-card-document-description {
    font-size: 15px;
  }

  .mystic-card-document-bullet-text {
    font-size: 15px;
  }

  .mystic-card-document-button-text {
    font-size: 15px;
  }
}

/* =====================================
                   Card Feature Styles
                   ===================================== */

/* Base Card Styles */
.mystic-card-feature {
  position: relative;
  display: flex;
  width: 453px;
  height: 360px;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: var(--transition-smooth);
}

/* Auto Flex Option */
.mystic-card-feature-auto-flex {
  width: 100%;
  flex: 1 1 auto;
  flex-shrink: 1;
  max-width: none;
  min-width: 0;
}

/* Background Image */
.mystic-card-feature-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* Shadow Overlay */
.mystic-card-feature-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  z-index: 1;
}

/* Variant 1 Shadow (Bottom positioned content) - Default fallback */
.mystic-card-feature-variant1 .mystic-card-feature-shadow {
  background: linear-gradient(58deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Variant 2 Shadow (Top positioned content) - Default fallback */
.mystic-card-feature-variant2 .mystic-card-feature-shadow {
  background: linear-gradient(112deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Content Container */
.mystic-card-feature-content {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(100% - 48px);
  flex: 1;
}

/* Variant 1 Content Positioning (Bottom) */
.mystic-card-feature-variant1 .mystic-card-feature-content {
  bottom: 24px;
  left: 24px;
  right: 24px;
}

/* Variant 2 Content Positioning (Top) */
.mystic-card-feature-variant2 .mystic-card-feature-content {
  top: 24px;
  left: 24px;
  right: 24px;
}

/* Number Styles */
.mystic-card-feature-number {
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.24px;
  margin-bottom: 0;
}

/* Variant 1 Number (White text) */
.mystic-card-feature-variant1 .mystic-card-feature-number {
  color: #ffffff;
}

/* Variant 2 Number (Dark blue text) */
.mystic-card-feature-variant2 .mystic-card-feature-number {
  color: var(--mystic-brand-blue);
}

/* Text Styles */
.mystic-card-feature-text {
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.48px;
  margin: 0 !important;
  word-wrap: break-word;
}

/* Variant 1 Text (White text) */
.mystic-card-feature-variant1 .mystic-card-feature-text {
  color: #ffffff;
}

/* Variant 2 Text (Dark blue text) */
.mystic-card-feature-variant2 .mystic-card-feature-text {
  color: var(--mystic-brand-blue);
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-card-feature {
    width: 100%;
    min-height: 280px;
    height: auto;
  }

  .mystic-card-feature-auto-flex {
    width: 100%;
    flex: 1 1 auto;
    flex-shrink: 1;
    max-width: none;
    min-width: 0;
  }

  .mystic-card-feature-content {
    max-width: calc(100% - 32px);
  }

  .mystic-card-feature-variant1 .mystic-card-feature-content,
  .mystic-card-feature-variant2 .mystic-card-feature-content {
    left: 16px;
    right: 16px;
  }

  .mystic-card-feature-variant1 .mystic-card-feature-content {
    bottom: 16px;
  }

  .mystic-card-feature-variant2 .mystic-card-feature-content {
    top: 16px;
  }

  .mystic-card-feature-number {
    font-size: 11px;
  }

  .mystic-card-feature-text {
    font-size: 20px;
    letter-spacing: -0.4px;
  }
}

@media (max-width: 480px) {
  .mystic-card-feature {
    min-height: 240px;
  }

  .mystic-card-feature-auto-flex {
    width: 100%;
    flex: 1 1 auto;
    flex-shrink: 1;
    max-width: none;
    min-width: 0;
  }

  .mystic-card-feature-text {
    font-size: 18px;
    letter-spacing: -0.36px;
  }
}

/* ===== CARD FEATURE HOVER EFFECTS AND KEYBOARD ACCESSIBILITY ===== */

/* Hover effects for card feature (same as testimonial cards) */
.mystic-card-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Focus indicators for card feature */
.mystic-card-feature:focus {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Focus indicators for mobile devices */
@media (max-width: 768px) {
  .mystic-card-feature:focus {
    outline: 3px solid var(--blue-600);
    outline-offset: 3px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-card-feature:focus {
    outline: 3px solid #000000;
    outline-offset: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mystic-card-feature {
    transition: none;
  }

  .mystic-card-feature:focus {
    transform: none;
  }
}

/* =====================================
                   Slide Items Styles
                   ===================================== */

/* Base Container */
.mystic-slide-items {
  display: flex;
  flex-direction: column;
  width: 708px;
  min-height: auto;
  overflow: hidden;
}

/* Auto Flex Option */
.mystic-slide-items-auto-flex {
  width: 100%;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
}

/* Auto Flex Container Styles */
.mystic-slide-items-auto-flex .mystic-slide-item {
  max-width: 100%;
  overflow: hidden;
}

.mystic-slide-items-auto-flex .mystic-slide-item-content {
  max-width: 100%;
  overflow: hidden;
}

.mystic-slide-items-auto-flex .mystic-slide-item-title {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.mystic-slide-items-auto-flex .mystic-slide-item-description {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Base Item Styles */
.mystic-slide-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--mystic-bg-white);
  border-left: 1.5px solid var(--mystic-border-light);
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover Effect */
.mystic-slide-item:hover {
  border-left-color: var(--blue-600);
}

/* Focus Effect for Active Items */
.mystic-slide-item.active:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  transform: translateX(2px);
}

/* Enhanced focus indicators for keyboard navigation */
.mystic-slide-item:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-left-color: var(--blue-600);
  transform: translateX(2px);
}

/* Hover effect on tab focus for image slide carousel */
/* .mystic-slide-carousel-container .mystic-slide-item:focus {
              border-left-color: var(--blue-600) !important;
              transform: translateX(2px);
              box-shadow: 0 4px 12px rgba(15, 126, 186, 0.15);
              outline: 2px solid var(--blue-600);
              outline-offset: 2px;
            } */

.mystic-slide-carousel-container .mystic-slide-item:focus-visible {
  border-left-color: var(--blue-600) !important;
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(15, 126, 186, 0.15);
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

/* Enhanced hover effects for image slide carousel */
.mystic-slide-carousel-container .mystic-slide-item:hover {
  border-left-color: var(--blue-600);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(15, 126, 186, 0.15);
}

/* Active state with focus */
.mystic-slide-carousel-container .mystic-slide-item.active:focus,
.mystic-slide-carousel-container .mystic-slide-item.active:focus-visible {
  border-left-color: var(--blue-600) !important;
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(15, 126, 186, 0.15);
  outline: 2px solid var(--blue-600);
  outline-offset: -2px;
}

/* Ensure all slide items in carousel are focusable */
.mystic-slide-carousel-container .mystic-slide-item {
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Mobile responsive focus indicators for carousel */
@media (max-width: 768px) {
  .mystic-slide-carousel-container .mystic-slide-item:focus,
  .mystic-slide-carousel-container .mystic-slide-item:focus-visible,
  .mystic-slide-carousel-container .mystic-slide-item.active:focus,
  .mystic-slide-carousel-container .mystic-slide-item.active:focus-visible {
    outline: 3px solid var(--blue-600);
    outline-offset: 3px;
  }
}

/* High contrast mode support for carousel */
@media (prefers-contrast: high) {
  .mystic-slide-carousel-container .mystic-slide-item:focus,
  .mystic-slide-carousel-container .mystic-slide-item:focus-visible,
  .mystic-slide-carousel-container .mystic-slide-item.active:focus,
  .mystic-slide-carousel-container .mystic-slide-item.active:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
  }
}

/* Mobile focus indicators */
@media (max-width: 768px) {
  .mystic-slide-item:focus,
  .mystic-slide-item.active:focus,
  .mystic-slide-item:focus-visible {
    outline: 3px solid var(--blue-600);
    outline-offset: 3px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-slide-item:focus,
  .mystic-slide-item.active:focus,
  .mystic-slide-item:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mystic-slide-item {
    transition: none;
  }

  .mystic-slide-item:focus,
  .mystic-slide-item.active:focus,
  .mystic-slide-item:focus-visible {
    transform: none;
  }
}

/* Active State */
.mystic-slide-item.active {
  border-left-color: var(--blue-600);
  gap: 20px;
  padding: 16px 24px;
}

/* Inactive State */
.mystic-slide-item.inactive {
  padding: 16px 24px;
  height: 56px;
  display: flex;
  align-items: center;
}

/* Content Container */
.mystic-slide-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  overflow: hidden;
}

/* Title Styles */
.mystic-slide-item-title {
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin: 0 !important;
  flex: 1;
}

/* Active Title Color */
.mystic-slide-item.active .mystic-slide-item-title {
  color: var(--mystic-text-dark);
}

/* Inactive Title Color */
.mystic-slide-item.inactive .mystic-slide-item-title {
  color: var(--e-global-color-68e06a1);
}

/* Description Styles */
.mystic-slide-item-description {
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  color: rgba(20, 20, 20, 0.7);
  margin: 0 !important;
  width: 100%;
  opacity: 1;
  transition:
    opacity 0.2s ease,
    height 0.2s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Hide Description on Inactive Items */
.mystic-slide-item.inactive .mystic-slide-item-description {
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-slide-items {
    width: 100%;
  }

  .mystic-slide-items-auto-flex {
    width: 100%;
    max-width: 100%;
  }

  .mystic-slide-item-title {
    font-size: 18px;
  }

  .mystic-slide-item-description {
    font-size: 15px;
  }

  .mystic-slide-item.active {
    padding: 12px 16px;
    gap: 16px;
  }

  .mystic-slide-item.inactive {
    padding: 12px 16px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .mystic-slide-item-title {
    font-size: 16px;
  }

  .mystic-slide-item-description {
    font-size: 14px;
  }
}

/* =====================================
                   Accordion Table Styles
                   ===================================== */

/* Base Container */
.mystic-accordion-table {
  display: flex;
  width: 100%;
  max-width: 448px;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  box-sizing: border-box;
  height: auto;
  min-height: auto;
}

/* Force collapse when content is collapsed */
.mystic-accordion-table:has(.mystic-accordion-content.collapsed) {
  height: auto;
  min-height: auto;
  max-height: none;
}

/* Alternative for browsers without :has() support */
.mystic-accordion-table .mystic-accordion-content.collapsed ~ * {
  display: none;
}

/* When content is collapsed, remove gap and hide completely */
.mystic-accordion-table .mystic-accordion-content.collapsed {
  margin-top: -16px;
  height: 0;
  max-height: 0;
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  min-height: 0;
  border: none;
  visibility: hidden;
  display: none;
}

/* Collapse the Elementor widget container when accordion is collapsed */
.elementor-widget-mystic_accordion_table .elementor-widget-container {
  height: auto;
  min-height: auto;
}

.elementor-widget-mystic_accordion_table .elementor-widget-container .mystic-accordion-content.collapsed {
  height: 0;
  max-height: 0;
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  min-height: 0;
  border: none;
  visibility: hidden;
  display: none;
}

/* General rule for any Elementor widget containing collapsed accordion */
.elementor-widget-container:has(.mystic-accordion-content.collapsed) {
  height: auto;
  min-height: auto;
}

/* Alternative approach for browsers that don't support :has() */
.elementor-widget-container .mystic-accordion-content.collapsed {
  height: 0;
  max-height: 0;
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  min-height: 0;
  border: none;
  visibility: hidden;
  display: none;
}

/* Force the accordion table to collapse when content is collapsed */
div.mystic-accordion-table:has(.mystic-accordion-content.collapsed) {
  height: auto;
  min-height: auto;
  max-height: none;
}

/* Direct targeting of the accordion table with collapsed content */
div.mystic-accordion-table .mystic-accordion-content.collapsed {
  height: 0;
  max-height: 0;
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  min-height: 0;
  border: none;
  visibility: hidden;
  display: none;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* Auto Flex Option */
.mystic-accordion-table-auto-flex {
  width: 100%;
  max-width: none;
  flex: 1;
}

/* Header */
.mystic-accordion-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  cursor: pointer;
}

/* Disable accordion functionality in Elementor editor */
.elementor-editor .mystic-accordion-header {
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.elementor-editor .mystic-accordion-header:hover {
  background: none;
  transform: none;
}

.elementor-editor .mystic-accordion-header:active {
  background: none;
  transform: none;
}

.elementor-editor .mystic-accordion-header:focus {
  outline: none;
  box-shadow: none;
}

/* Title */
.mystic-accordion-title {
  flex: 1;
  color: var(--mystic-text-dark);
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  margin: 0 !important;
}

/* Icon */
.mystic-accordion-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

/* Content Container */
.mystic-accordion-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
  min-height: 0;
  flex: 1;
}

/* Content Inner - for bullet items */
.mystic-accordion-content-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

/* Button Wrapper - ensures button stays at bottom */
.mystic-accordion-table .mystic-accordion-button-wrapper {
  margin-top: auto;
  width: 100%;
  flex-shrink: 0;
  align-self: flex-end;
}

/* Collapsed State */
.mystic-accordion-content.collapsed {
  height: 0;
  max-height: 0;
  opacity: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  min-height: 0;
  border: none;
  visibility: hidden;
  display: none;
}

/* Expanded State */
.mystic-accordion-content.expanded {
  height: auto;
  max-height: none;
  opacity: 1;
  display: flex;
  flex-direction: column;
  visibility: visible;
}

/* Bullet List Container */
.mystic-accordion-bullets {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* Individual Bullet Item */
.mystic-accordion-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

/* Bullet Icon */
.mystic-accordion-bullet-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Bullet Text */
.mystic-accordion-bullet-text {
  flex: 1;
  color: rgba(20, 20, 20, 0.7);
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  margin: 0 !important;
}

/* Button */
.mystic-accordion-button {
  display: flex;
  height: 48px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-radius: 8px;
  background: #f7cd46;
  color: var(--mystic-brand-brown);
  text-decoration: none;
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  transition: all 0.2s ease;
  border: none;
  outline: none;
  cursor: pointer;
}

/* Button Hover */
.mystic-accordion-button:hover {
  background: #f5c832;
  transform: translateY(-1px);
}

/* Button Focus */
.mystic-accordion-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(247, 205, 70, 0.5);
}

/* Button Icon */
.mystic-accordion-button-icon {
  width: 20px;
  height: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .mystic-accordion-table {
    width: 100%;
    padding: 20px;
    gap: 12px;
  }

  .mystic-accordion-title {
    font-size: 16px;
  }

  .mystic-accordion-bullet-text {
    font-size: 15px;
  }

  .mystic-accordion-button {
    height: 44px;
    padding: 12px 16px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .mystic-accordion-table {
    padding: 16px;
  }

  .mystic-accordion-title {
    font-size: 15px;
  }

  .mystic-accordion-bullet-text {
    font-size: 14px;
  }
}

/* =====================================
                   Plan Card Styles with Accordion Table
                   ===================================== */

/* Base Plan Card Container */
.mystic-plan-card {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 448px;
  min-height: 300px;
  height: 100%;
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

/* Auto Flex Option */
.mystic-plan-card-auto-flex {
  width: 100%;
  flex: 1;
  min-width: auto;
}

/* Plan Card Title */
.mystic-plan-card-title {
  font-family: var(--font-public-sans, "Public Sans", -apple-system, Helvetica, sans-serif);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  color: var(--mystic-text-dark);
  margin: 0 !important;
  text-align: center;
}

/* Accordion Table within Plan Card */
.mystic-plan-card .mystic-accordion-table {
  flex: 1;
  width: 100%;
  min-width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ensure accordion content uses available space */
.mystic-plan-card .mystic-accordion-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  justify-content: space-between;
}

/* Bullet container takes available space */
.mystic-plan-card .mystic-accordion-bullets {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Button always stays at bottom */
.mystic-plan-card .mystic-accordion-button {
  margin-top: auto;
  flex-shrink: 0;
  align-self: stretch;
}

/* Responsive Design for Plan Card */
@media (max-width: 768px) {
  .mystic-plan-card {
    min-width: 100%;
    padding: 20px;
    gap: 20px;
  }

  .mystic-plan-card-title {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .mystic-plan-card {
    padding: 16px;
    gap: 16px;
  }

  .mystic-plan-card-title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .mystic-card-document {
    padding: 20px;
    gap: 20px;
  }

  .mystic-card-document-auto-flex {
    min-width: 280px;
    min-height: 280px;
  }

  .mystic-card-document-title {
    font-size: 14px;
  }

  .mystic-card-document-description {
    font-size: 14px;
  }

  .mystic-card-document-bullet-text {
    font-size: 14px;
    line-height: 150%;
  }

  .mystic-card-document-button {
    height: 36px;
    padding: 12px 16px;
  }

  .mystic-card-document-button-text {
    font-size: 14px;
  }

  .mystic-card-document-button-icon {
    width: 18px;
    height: 18px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .mystic-card-document-button {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-card-document {
    border: 2px solid currentColor;
  }

  .mystic-card-document-button {
    border: 2px solid currentColor;
  }
}

/* ========================================
                   IMAGE CARD GRID COMPONENT
                   ======================================== */

/* Grid Container */
.mystic-image-card-grid-container {
  width: 100%;
  display: flex;
  justify-content: center;
  --expand-ratio: 2.2;
  --shrink-ratio: 0.6;
  padding: 8px 0;
}

.mystic-image-card-grid {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  transition: all 0.3s ease;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

/* Individual Grid Item */
.mystic-image-card-grid-item {
  position: relative;
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  background: #f0f0f0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  flex: 1 1 0;
  min-width: 80px;
  max-width: none;
}

/* When grid has a hovered card, shrink all non-hovered cards */
.mystic-image-card-grid.has-hovered-card .mystic-image-card-grid-item:not(.is-hovered) {
  flex: var(--shrink-ratio) 1 0;
  transform: scale(0.95);
  opacity: 0.7;
}

/* Hover state - expanded card */
.mystic-image-card-grid-item:hover,
.mystic-image-card-grid-item.is-hovered {
  flex: var(--expand-ratio) 1 0;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 2;
  opacity: 1;
}

/* Focus states for accessibility */
.mystic-image-card-grid-item:focus,
.mystic-image-card-grid-item:focus-visible {
  outline: 2px solid var(--blue-900);
  outline-offset: 2px;
  flex: var(--expand-ratio) 1 0;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  z-index: 10;
  opacity: 1;
}

/* Mobile-specific focus z-index fix */
@media (max-width: 768px) {
  .mystic-image-card-grid-item:focus,
  .mystic-image-card-grid-item:focus-visible {
    z-index: 20 !important;
    position: relative !important;
  }
}

@media (max-width: 480px) {
  .mystic-image-card-grid-item:focus,
  .mystic-image-card-grid-item:focus-visible {
    z-index: 20 !important;
    position: relative !important;
  }
}

/* Link wrapper */
.mystic-image-card-grid-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Image Container */
.mystic-image-card-grid-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}

.mystic-image-card-grid-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); /* Smoother, longer transition */
  will-change: transform; /* Optimize for transforms */
}

.mystic-image-card-grid-item:hover .mystic-image-card-grid-image,
.mystic-image-card-grid-item:focus .mystic-image-card-grid-image {
  transform: scale(1.03); /* Reduced scale to prevent too much movement */
  transition-delay: 0.1s; /* Slight delay to sync with card hover */
}

/* Gradient Overlay */
.mystic-image-card-grid-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--mystic-overlay-start, rgba(0, 0, 0, 0)) 40%,
    var(--mystic-overlay-end, #000000) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Content */
.mystic-image-card-grid-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  transform: translateY(75px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px;
  pointer-events: none;
  z-index: 5;
  min-height: 120px;
  width: 100%;
}
.mystic-image-card-grid-item:hover .mystic-image-card-grid-content {
  transform: translateY(0px);
}
.mystic-image-card-grid-item:focus .mystic-image-card-grid-content {
  transform: translateY(0px);
}

.mystic-image-card-grid-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.mystic-image-card-grid-caption {
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: 0.24px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 !important;
  text-align: left;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Show ellipsis for truncated text */
}

.mystic-image-card-grid-title {
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
  color: #ffffff;
  margin: 0 !important;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Show ellipsis for truncated text */
  text-align: left;
  word-wrap: normal; /* Don't break words */
  hyphens: none; /* Disable hyphenation */
}

.mystic-image-card-grid-item:hover .mystic-image-card-grid-title {
  /* Title already shows full text in default state, no changes needed on hover */
}

/* Button */
.mystic-image-card-grid-button {
  display: flex;
  width: 56px;
  height: 56px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: var(--mystic-bg-white);
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: auto;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  border: none;
  align-self: flex-start;
  will-change: opacity, transform;
}

.mystic-image-card-grid-item:hover .mystic-image-card-grid-button,
.mystic-image-card-grid-item:focus .mystic-image-card-grid-button {
  opacity: 1;
  transform: translateY(0);
}

.mystic-image-card-grid-button:hover {
  opacity: 1;
  transform: translateY(0) scale(1.05);
  box-shadow: 0 4px 12px var(--mystic-shadow-medium);
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.mystic-image-card-grid-button:focus-visible {
  opacity: 1;
  transform: translateY(0) scale(1.05);
  box-shadow: 0 4px 12px var(--mystic-shadow-medium);
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.mystic-image-card-grid-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1000px) {
  .mystic-image-card-grid {
    max-width: 900px;
  }

  .mystic-image-card-grid-item:nth-child(n + 6) {
    display: none; /* Hide 6th+ cards on smaller screens */
  }

  /* Adjust font sizes for better readability in narrow cards */
  .mystic-image-card-grid-title {
    font-size: 18px;
  }

  .mystic-image-card-grid-caption {
    font-size: 11px;
  }
}

@media (max-width: 850px) {
  .mystic-image-card-grid {
    max-width: 750px;
  }

  .mystic-image-card-grid-item:nth-child(n + 5) {
    display: none; /* Hide 5th+ cards on smaller screens */
  }

  /* Further reduce font sizes for very narrow cards */
  .mystic-image-card-grid-title {
    font-size: 16px;
  }

  .mystic-image-card-grid-caption {
    font-size: 10px;
  }
}

@media (max-width: 700px) {
  .mystic-image-card-grid {
    max-width: 600px;
  }

  .mystic-image-card-grid-item:nth-child(n + 4) {
    display: none; /* Show only 3 cards */
  }

  /* Even smaller font sizes for very narrow cards */
  .mystic-image-card-grid-title {
    font-size: 14px;
  }

  .mystic-image-card-grid-caption {
    font-size: 9px;
  }
}

@media (max-width: 768px) {
  .mystic-image-card-grid {
    flex-direction: column;
    gap: 12px;
    max-width: 576px;
    padding: 0 20px;
  }

  .mystic-image-card-grid-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 320px;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Disable hover effects on mobile but keep focus for accessibility */
  .mystic-image-card-grid-item:hover {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  /* Keep focus styles for accessibility on mobile */
  .mystic-image-card-grid-item:focus {
    outline: 2px solid var(--blue-900) !important;
    outline-offset: 2px !important;
  }

  /* Ensure all cards show on mobile */
  .mystic-image-card-grid-item:nth-child(n + 1) {
    display: flex !important;
  }

  /* Reset any sibling hover effects */
  .mystic-image-card-grid-item:hover ~ .mystic-image-card-grid-item,
  .mystic-image-card-grid-item:hover + .mystic-image-card-grid-item,
  .mystic-image-card-grid-item:focus ~ .mystic-image-card-grid-item,
  .mystic-image-card-grid-item:focus + .mystic-image-card-grid-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .mystic-image-card-grid-content {
    padding: 20px;
    gap: 20px;
  }

  .mystic-image-card-grid-title {
    font-size: 18px;
  }

  .mystic-image-card-grid-caption {
    font-size: 11px;
  }

  .mystic-image-card-grid-button {
    width: 48px;
    height: 48px;
  }

  .mystic-image-card-grid-button svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .mystic-image-card-grid {
    gap: 12px;
    max-width: 400px;
    padding: 0 16px;
  }

  .mystic-image-card-grid-item {
    height: 280px;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Disable hover effects on mobile but keep focus for accessibility */
  .mystic-image-card-grid-item:hover {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  /* Keep focus styles for accessibility on mobile */
  .mystic-image-card-grid-item:focus {
    outline: 2px solid var(--blue-900) !important;
    outline-offset: 2px !important;
  }

  /* Reset any sibling hover effects */
  .mystic-image-card-grid-item:hover ~ .mystic-image-card-grid-item,
  .mystic-image-card-grid-item:hover + .mystic-image-card-grid-item,
  .mystic-image-card-grid-item:focus ~ .mystic-image-card-grid-item,
  .mystic-image-card-grid-item:focus + .mystic-image-card-grid-item {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .mystic-image-card-grid-content {
    padding: 16px;
    transform: translateY(65px);
    gap: 16px;
  }
  .mystic-image-card-grid-title {
    font-size: 16px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  .mystic-image-card-grid-caption {
    font-size: 10px;
  }

  .mystic-image-card-grid-button {
    width: 44px !important;
    height: 44px !important;
  }

  .mystic-image-card-grid-button svg {
    width: 16px;
    height: 16px;
  }
}

/* ========================================
                   IMAGE SLIDE CAROUSEL COMPONENT
                   ======================================== */

.mystic-slide-carousel-container {
  width: 100%;
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  position: relative;
}

/* Desktop Layout */
.mystic-slide-carousel-desktop {
  display: flex;
  align-items: stretch !important;
  gap: 40px;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.mystic-slide-carousel-image {
  width: 100% !important;
  height: 100% !important;
  border-radius: 16px;
  display: none !important;
  object-fit: cover;
  aspect-ratio: 288/400; /* This will be overridden when height mode is 'match_content' */
  transition: opacity 0.3s ease;
}

.mystic-slide-carousel-image.active {
  display: block !important;
  opacity: 1;
}

.mystic-slide-items-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* When no button is present, ensure content container has proper height */
.mystic-slide-items-container.no-button {
  min-height: 200px; /* Reduced from 400px to allow smaller heights */
}

.mystic-slide-items-container.no-button .mystic-slide-items-list {
  flex: 1;
  justify-content: flex-start;
}

.mystic-slide-carousel-image-container {
  position: relative;
  flex: 1 1 288px;
  max-width: 288px;
  min-height: 200px; /* Reduced from 400px to allow smaller heights */
  max-height: 492px !important;
  height: auto;
}

/* Ensure image container matches content height when no button is present */
.mystic-slide-carousel-desktop:has(.mystic-slide-items-container.no-button) .mystic-slide-carousel-image-container {
  max-height: 492px !important;
}
.mystic-slide-items-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  height: auto;
  min-height: auto;
  width: 100%;
  max-width: 100%;
  flex: 1;
}

.mystic-slide-carousel-container .mystic-slide-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-left: 3px solid var(--mystic-border-light);
  background: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: auto;
  position: relative;
  outline: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* .mystic-slide-carousel-container .mystic-slide-item::before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      bottom: 0;
      width: 3px;
      height: 100%;
      background: var(--mystic-border-light);;
      z-index: 99;
    } */

.mystic-slide-carousel-container .mystic-slide-item.active {
  padding: 16px 24px;
  gap: 20px;
  border-left-color: var(--blue-600);
  background: #fff;
  outline: none;
}

.mystic-slide-carousel-container .mystic-slide-item.inactive {
  padding: 16px 20px;
  gap: 8px;
  min-height: 0;
  height: auto;
  overflow: visible;
  max-height: none;
  flex-shrink: 0;
  background: #fff;
}

.mystic-slide-carousel-container .mystic-slide-item.inactive:hover {
  border-left-color: var(--blue-600);
  background: rgba(15, 126, 186, 0.02);
  outline: none;
}

/* Enhanced accessibility - Focus styles for keyboard navigation */
.mystic-slide-carousel-container .mystic-slide-item:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-left-color: var(--blue-600);
}

.mystic-slide-carousel-container .mystic-slide-item {
  outline: none;
  position: relative;
}

.mystic-slide-carousel-container .mystic-slide-item:focus {
  outline: none;
  box-shadow: none;
}

.mystic-slide-carousel-container .mystic-slide-item:focus-visible {
  outline: none;
  box-shadow: none;
}

.mystic-slide-carousel-container .mystic-slide-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  height: auto;
  min-height: auto;
  overflow: visible;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mystic-slide-carousel-container .mystic-slide-item-title {
  color: var(--mystic-text-dark);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  margin: 0 !important;
  align-self: stretch;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal;
  text-overflow: unset;
  overflow: visible;
  height: auto;
  max-height: none;
}

.mystic-slide-carousel-container .mystic-slide-item.inactive .mystic-slide-item-title {
  color: rgba(20, 20, 20, 0.4);
  white-space: normal;
  height: auto;
  min-height: auto;
  max-height: none;
  overflow: visible;
  text-overflow: unset;
  line-height: 130%;
}

.mystic-slide-carousel-container .mystic-slide-item-description {
  align-self: stretch;
  color: rgba(20, 20, 20, 0.7);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  margin: 0 !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  display: none;
  transition: opacity 0.3s ease;
}

.mystic-slide-carousel-container .mystic-slide-item.active .mystic-slide-item-description {
  display: block;
  opacity: 1;
}

/* Carousel Main Content */
.mystic-carousel-main-content {
  margin: 0 0 8px 0;
}

.mystic-carousel-main-content:last-child {
  margin-bottom: 0;
}

/* Carousel Bullet List */
.mystic-carousel-bullet-list {
  margin: 8px 0;
  padding: 0;
  list-style: none;
}

.mystic-carousel-highlight {
  font-weight: 600 !important;
}
.mystic-carousel-bullet-list:last-child {
  margin-bottom: 0;
}

.mystic-carousel-bullet-item {
  position: relative;
  padding-left: 20px;
  margin-bottom: 4px;
  color: rgba(20, 20, 20, 0.7);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
}

.mystic-carousel-bullet-item:last-child {
  margin-bottom: 0;
}

.mystic-carousel-bullet-item::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(20, 20, 20, 0.7);
  font-weight: 700;
}

.mystic-slide-button-container {
  display: flex;
  padding: 16px 24px 0 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-left: 3px solid var(--mystic-border-light);
  background: #fff;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.mystic-slide-carousel-button {
  display: flex;
  height: 48px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 8px;
  background: #f7cd46;
  text-decoration: none;
  color: var(--mystic-text-dark);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  outline: none;
}

.mystic-slide-carousel-button:focus-visible {
  outline: 2px solid var(--blue-600) !important;
  outline-offset: -2px;
}

.mystic-slide-carousel-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mystic-slide-carousel-button svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Carousel Button Design Variants */
.mystic-slide-carousel-button.mystic-design-button--primary {
  background-color: var(--brand-yellow);
  color: var(--brand-brown);
}

.mystic-slide-carousel-button.mystic-design-button--primary:hover {
  background-color: #e6b800;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mystic-slide-carousel-button.mystic-design-button--secondary {
  background-color: var(--brand-blue);
  color: white;
}

.mystic-slide-carousel-button.mystic-design-button--secondary:hover {
  background-color: #0f5a7a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mystic-slide-carousel-button.mystic-design-button--white-bg {
  background-color: white;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
}

.mystic-slide-carousel-button.mystic-design-button--white-bg:hover {
  background-color: var(--brand-blue);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mystic-slide-carousel-button.mystic-design-button--outline {
  background-color: transparent;
  color: var(--brand-blue);
  border: 2px solid var(--brand-blue);
}

.mystic-slide-carousel-button.mystic-design-button--outline:hover {
  background-color: var(--brand-blue);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mystic-slide-carousel-button .mystic-slide-carousel-button.mystic-design-button--link {
  background-color: transparent;
  color: var(--brand-blue);
  box-shadow: none;
  padding: 8px 0;
}

.mystic-slide-carousel-button.mystic-design-button--link:hover {
  color: #0f5a7a;
  text-decoration: underline;
  transform: none;
  box-shadow: none;
}

.mystic-slide-carousel-button.mystic-design-button--fab {
  width: 56px;
  height: 56px;
  padding: 0 !important;
  border-radius: 50%;
  background-color: var(--brand-yellow);
  color: var(--brand-brown);
  justify-content: center;
  align-items: center;
  gap: 0;
}

.mystic-slide-carousel-button.mystic-design-button--fab:hover {
  background-color: #e6b800;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mystic-slide-carousel-button.mystic-design-button--fab svg {
  width: 24px;
  height: 24px;
}

/* Mobile Layout */
.mystic-slide-carousel-mobile {
  display: none;
}

.mystic-slide-mobile-container {
  display: flex;
  padding: 0 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
}

.mystic-slide-mobile-image-container {
  position: relative;
  height: 264px;
  align-self: stretch;
}

.mystic-slide-mobile-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.mystic-slide-mobile-slide.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.mystic-slide-mobile-image {
  width: 100%;
  height: 264px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
}

.mystic-slide-mobile-arrows {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  left: 20px;
  bottom: 15px;
  width: 108px;
  height: 48px;
}

.mystic-slide-arrow {
  display: flex;
  width: 48px;
  height: 48px;
  padding: 14px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 3;
  position: relative;
}

.mystic-slide-arrow:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px var(--mystic-shadow-medium);
}

.mystic-slide-arrow:active {
  transform: scale(0.95);
}

.mystic-slide-arrow svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mystic-slide-mobile-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.mystic-slide-mobile-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.mystic-slide-counter {
  color: rgba(20, 20, 20, 0.4);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

.mystic-slide-counter .current {
  color: var(--blue-600);
}

.mystic-slide-mobile-title {
  align-self: stretch;
  color: var(--mystic-text-dark);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  margin: 0 !important;
}

.mystic-slide-mobile-description {
  align-self: stretch;
  color: rgba(20, 20, 20, 0.6);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  margin: 0 !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .mystic-slide-carousel-desktop {
    gap: 24px;
  }

  .mystic-slide-carousel-image-container {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .mystic-slide-carousel-desktop {
    display: none;
  }

  .mystic-slide-carousel-mobile {
    display: block;
  }

  .mystic-slide-mobile-container {
    padding: 0 12px;
  }

  .mystic-slide-mobile-image-container {
    height: 560px;
    overflow: hidden;
    border-radius: 15px;
  }

  .mystic-slide-mobile-image {
    object-fit: cover;
    object-position: center;
  }

  .mystic-slide-mobile-arrows {
    bottom: 15px;
  }
}

@media (max-width: 480px) {
  .mystic-slide-mobile-container {
    padding: 0 8px;
    gap: 24px;
  }

  .mystic-slide-mobile-image-container {
    height: 450px;
  }

  .mystic-slide-mobile-image {
    /* height: 200px; */
  }

  .mystic-slide-mobile-arrows {
    /* top: 140px; */
    bottom: 12px;
    left: 16px;
  }

  .mystic-slide-mobile-title {
    font-size: 18px;
  }

  .mystic-slide-mobile-description {
    font-size: 14px;
  }
}
@media (max-width: 390px) {
  .mystic-slide-mobile-image-container {
    height: 330px;
  }
}

/* ========================================
                   NAVIGATION BAR COMPONENT
                   ======================================== */

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap");

.mystic-navigation-container {
  display: flex;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  border-bottom: 2px solid var(--mystic-nav-border-color, var(--blue-900));
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  background: transparent;
}

/* Override Elementor's CSS with higher specificity */
.elementor-widget-mystic_navigation_bar .mystic-navigation-container,
.elementor-element .mystic-navigation-container,
.mystic-navigation-container {
  border-bottom-color: var(--mystic-nav-border-color, var(--blue-900));
}

/* Set initial CSS custom property value */
:root {
  --mystic-nav-border-color: var(--blue-900);
}

/* Top Navigation Section */
.mystic-nav-top {
  display: flex;
  width: 100%;
  padding: 0 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f7f7f8;
  position: relative;
}

.mystic-nav-top-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.mystic-nav-tabs-column {
  display: flex;
  padding-top: 8px;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.mystic-nav-tab {
  display: flex;
  padding: 16px 16px 18px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px 8px 0 0;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}
.mystic-nav-tab:focus-visible {
  outline: 2px solid #005FCC;
  outline-offset: -2px;
}


.mystic-nav-tab.active {
  background: #fff;
}

.mystic-nav-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.5);
}

.mystic-nav-tab-text {
  color: var(--mystic-brand-blue);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  margin: 0 !important;
  white-space: nowrap;
}

.mystic-nav-buttons-column {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

/* Navigation buttons now use Design Button plugin - styling handled by mystic-design-button classes */

/* Bottom Navigation Section */
.mystic-nav-bottom {
  display: flex;
  width: 100%;
  padding: 0 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eeeef0;
  background: #fff;
  position: relative;
  min-height: 70px;
}

.mystic-nav-bottom-container {
  display: flex;
  padding: 12px 0;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.mystic-nav-logo {
  display: flex;
  width: auto;
  height: auto;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 8px;
  overflow: visible;
  line-height: 0;
  margin: 0;
  padding: 0;
}
.mystic-nav-logo.top-nav{
  margin-right: 15px !important;
}

.mystic-nav-logo img {
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.mystic-nav-subnav {
  display: flex;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
  gap: 0;
}

.mystic-nav-subnav-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
}

.mystic-nav-sublink {
  display: flex;
  height: 46px;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.mystic-nav-sublink:hover {
  background: rgba(19, 73, 106, 0.1);
}

.mystic-nav-sublink-text {
  color: var(--e-global-color-primary, var(--mystic-brand-blue));
  font-family:
    var(--e-global-typography-primary-font-family, "Public Sans"),
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: var(--e-global-typography-primary-font-size, 16px);
  font-style: var(--e-global-typography-primary-font-style, normal);
  font-weight: var(--e-global-typography-primary-font-weight, 500);
  line-height: var(--e-global-typography-primary-line-height, 160%);
  margin: 0 !important;
  white-space: nowrap;
}

/* Mobile Header */
.mystic-mobile-header {
  display: none;
  padding: 12px 16px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  background: #fff;
  border-bottom: 1px solid var(--mystic-border-light);
  position: relative;
}

.mystic-mobile-logo {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.mystic-mobile-logo img {
  max-width: 64px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.mystic-mobile-menu-button {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 !important;
  position: relative;
}

.mystic-mobile-menu-text {
  color: var(--blue-950);
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  position: relative;
}

.mystic-mobile-menu-icon {
  width: 48px;
  height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mystic-mobile-menu-icon svg:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  fill: #f5f5f5;
}

.mystic-mobile-menu-icon svg:last-child {
  position: absolute;
  left: 14px;
  top: 20px;
  width: 20px;
  height: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Mobile Menu Overlay */
.mystic-mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.mystic-mobile-menu-overlay.open {
  display: block;
}

/* Mobile Menu */
.mystic-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 90vw;
  background: #fff;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  overflow-y: auto;
  box-shadow: -4px 0 20px var(--mystic-shadow-medium);
}

.mystic-mobile-menu.open {
  display: block;
  transform: translateX(0);
}

.mystic-mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mystic-border-light);
}

.mystic-mobile-menu-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--blue-950);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.mystic-mobile-menu-close:hover {
  background: rgba(20, 20, 20, 0.05);
}

.mystic-mobile-menu-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
}

.mystic-mobile-main-tab {
  margin-bottom: 8px;
}

.mystic-mobile-main-tab-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f7f7f8;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--mystic-brand-blue);
  text-align: left;
  transition: all 0.3s ease;
}

.mystic-mobile-main-tab-button:hover,
.mystic-mobile-main-tab-button.expanded {
  background: #eeeef0;
}

.mystic-mobile-direct-link {
  text-decoration: none !important;
  color: inherit !important;
}

.mystic-mobile-direct-link:hover {
  text-decoration: none !important;
  color: inherit !important;
}

.mystic-mobile-main-tab-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.mystic-mobile-main-tab-icon.expanded {
  transform: rotate(180deg);
}

.mystic-mobile-sub-tabs {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #fff;
  border-radius: 0 0 8px 8px;
  margin-top: -8px;
  border: 1px solid #eeeef0;
  border-top: none;
}

.mystic-mobile-sub-tabs.expanded {
  max-height: 400px;
}

.mystic-mobile-sub-tab {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--mystic-brand-blue);
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #eeeef0;
  text-decoration: none;
  box-sizing: border-box;
}

.mystic-mobile-sub-tab:last-child {
  border-bottom: none;
}

.mystic-mobile-sub-tab:hover {
  background: #f7f7f8;
}

.mystic-mobile-menu-buttons {
  margin-top: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Breadcrumbs */
.mystic-breadcrumbs {
  display: none;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid var(--mystic-border-light);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  box-sizing: border-box;
}

/* Removed .mystic-breadcrumbs.show rule - breadcrumbs should only show on mobile */

.mystic-breadcrumb-item {
  color: var(--e-global-color-text, #757682);
  font-family:
    var(--e-global-typography-secondary-font-family, "Public Sans"),
    -apple-system,
    Roboto,
    Helvetica,
    sans-serif;
  font-size: var(--e-global-typography-secondary-font-size, 14px);
  font-weight: var(--e-global-typography-secondary-font-weight, 400);
  line-height: var(--e-global-typography-secondary-line-height, 130%);
  text-decoration: none;
}

.mystic-breadcrumb-item.active {
  color: var(--e-global-color-primary, var(--mystic-brand-blue));
  font-weight: var(--e-global-typography-secondary-font-weight, 500);
}

.mystic-breadcrumb-separator {
  width: 14px;
  height: 14px;
  margin: 0 4px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .mystic-navigation-container {
    flex-direction: column;
  }

  .mystic-mobile-header {
    display: flex;
  }

  .mystic-nav-top,
  .mystic-nav-bottom {
    display: none;
  }

  .mystic-breadcrumbs {
    display: none;
  }

  .mystic-breadcrumbs.mobile-show {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
  }
}

@media (max-width: 1200px) {
  .mystic-nav-bottom {
    padding: 0 40px;
  }

  .mystic-nav-tabs-column {
    gap: 2px;
  }

  .mystic-nav-tab {
    padding: 12px 12px 14px 12px;
  }

  .mystic-nav-tab-text {
    font-size: 14px;
  }
}

@media (max-width: 968px) {
  .mystic-nav-top {
    padding: 0 16px;
  }

  .mystic-nav-bottom {
    padding: 0 20px;
  }

  .mystic-nav-tabs-column {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mystic-nav-subnav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mystic-nav-sublink {
    padding: 0 12px;
    height: 40px;
  }

  .mystic-nav-sublink-text {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .mystic-nav-top-container {
    flex-direction: column;
    gap: 16px;
  }

  .mystic-nav-buttons-column {
    justify-content: center;
    flex: none;
  }

  .mystic-nav-tab {
    padding: 10px 10px 12px 10px;
  }

  .mystic-nav-tab-text {
    font-size: 13px;
  }

  /* Navigation buttons now use Design Button plugin */
}

@media (max-width: 480px) {
  .mystic-nav-tabs-column {
    gap: 1px;
  }

  .mystic-nav-tab {
    padding: 8px 8px 10px 8px;
  }

  .mystic-nav-tab-text {
    font-size: 12px;
  }

  .mystic-nav-buttons-column {
    gap: 8px;
  }

  /* Navigation buttons now use Design Button plugin */

  .mystic-nav-subnav {
    gap: 4px;
  }

  .mystic-nav-sublink {
    padding: 0 8px;
    height: 36px;
  }

  .mystic-nav-sublink-text {
    font-size: 13px;
  }
}

.mystic-accordion-buttons {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

@media (max-width: 968px) {
  .mystic-accordion-buttons {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    flex-direction: column;
  }
}

/* ========================================
                   MEGA MENU STYLES
                   ======================================== */

/* Desktop Mega Menu */
.mega-menu-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--mystic-bg-white);
  border: 1px solid #eeeef0;
  border-top: none;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  max-height: 0;
  overflow: hidden;
  /* Ensure mega menu is not clipped by parent containers */
  min-width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.mega-menu-container.visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  max-height: 500px !important;
  display: block !important;
}

.mega-menu-content {
  display: none;
  padding: 0 20px !important;
}

.mega-menu-content.active {
  display: block !important;
}

.mega-menu-sections {
  display: flex;
  gap: 32px !important;
  padding-left: 0px;
  max-width: 1240px !important;
  margin: 0 auto;
}
@media (min-width: 1560px) {
  .mega-menu-sections {
    max-width: 1440px !important;
    padding-left: 0px;
  }
}

.mega-menu-section {
  flex: 1;
  padding: 32px;
  padding-left: 0;
}

.mega-menu-category-title {
  color: var(--blue-900-main, #13496a) !important;
  font-size: var(--Components-Alert-Global-fontSize, 14px) !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 130%; /* 18.2px */
  margin: 0 0 16px 0;
  text-transform: none !important;
}

.mega-menu-list {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}

.mega-menu-list li {
  margin-bottom: 12px;
}

.mega-menu-list a {
  color: var(--blue-900-main, #13496a) !important;
  font-size: var(--Typography-Font-Size-fontSizeLG, 16px) !important;
  font-style: normal;
  font-weight: 600;
  line-height: 26px; /* 162.5% */
  text-decoration: none;
  transition: color 0.2s ease;
  padding: 8px 0;
  display: block;
}

.mega-menu-list a:hover {
  color: var(--blue-900-main, #13496a);
  opacity: 0.8;
}

/* Featured Posts in Mega Menu */
.mega-menu-featured {
  flex: 1;
  border-left: 1px solid #eeeef0;
  padding: 24px 100px 24px 32px;
  background: var(--Yellow-50, #fefbec);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mega-menu-featured-title {
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  color: #6b7280;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px !important;
  text-transform: uppercase !important;
}

.mega-menu-featured-post {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.mega-menu-featured-post:hover {
  transform: translateY(-2px);
}

.mega-menu-featured-post-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.mega-menu-featured-post-content {
  flex: 1;
}

.mega-menu-featured-post-title {
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--mystic-brand-blue);
  margin: 0 0 4px 0;
  line-height: 140%;
}

.mega-menu-featured-post-excerpt {
  font-family: "Public Sans", sans-serif;
  font-size: 12px;
  color: #666;
  margin: 0 !important;
  line-height: 140%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ========================================
                   FOOTER COMPONENT
                   ======================================== */

.mystic-footer-container {
  display: flex;
  width: 100%;
  padding: 40px 100px 24px 100px;
  flex-direction: column;
  align-items: flex-start;
  gap: 120px;
  background: var(--mystic-brand-blue);
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  min-height: 406px;
  box-sizing: border-box;
}

.mystic-footer-content {
  display: flex;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.mystic-footer-logo-container {
  display: flex;
  width: 278px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  position: relative;
}

.mystic-footer-logo {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mystic-footer-logo img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
}

.mystic-footer-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  position: relative;
}

.mystic-footer-address,
.mystic-footer-hours {
  align-self: stretch;
  color: #fff;
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin: 0 !important;
}

.mystic-footer-links-container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

.mystic-footer-links-column {
  display: flex;
  width: 180px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

.mystic-footer-links-title {
  align-self: stretch;
  color: #f7cd46;
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  margin: 0 !important;
  text-transform: uppercase;
}

.mystic-footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  align-self: stretch;
  position: relative;
}

.mystic-footer-link {
  align-self: stretch;
  color: #fff;
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin: 0 !important;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0 !important;
  text-align: left;
  width: 100%;
  display: block;
}

.mystic-footer-link:hover {
  opacity: 0.8;
}

.mystic-footer-link:not(.clickable) {
  cursor: default;
}

.mystic-footer-link:not(.clickable):hover {
  opacity: 1;
}

.mystic-footer-copyright {
  color: #fff;
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  margin: 0 !important;
  align-self: center;
  text-align: center;
  max-width: 1240px;
  width: 100%;
}

/* Footer Mobile Responsive */
@media (max-width: 968px) {
  .mystic-footer-container {
    padding: 32px 24px 20px 24px;
    gap: 80px;
  }

  .mystic-footer-content {
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  .mystic-footer-logo-container {
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .mystic-footer-text-container {
    align-items: center;
  }

  .mystic-footer-address,
  .mystic-footer-hours {
    text-align: center;
  }

  .mystic-footer-links-container {
    flex-direction: column;
    gap: 32px;
    width: 100%;
    align-items: center;
  }

  .mystic-footer-links-column {
    width: 100%;
    max-width: 300px;
    align-items: center;
  }

  .mystic-footer-links-title {
    text-align: center;
  }

  .mystic-footer-links {
    align-items: center;
  }

  .mystic-footer-link {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .mystic-footer-container {
    padding: 24px 16px 16px 16px;
    gap: 60px;
  }

  .mystic-footer-content {
    gap: 32px;
  }

  .mystic-footer-links-container {
    gap: 24px;
  }

  .mystic-footer-links-column {
    gap: 16px;
  }
}

/* ========================================
                   NEWS SECTION WIDGET STYLES
                   ======================================== */

/* New Grid Layout Styles */
.elementor-widget-mystic_news_section .news-grid-new {
  display: grid !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

.elementor-widget-mystic_news_section .news-grid-new[data-columns="1"] {
  grid-template-columns: 1fr !important;
}

.elementor-widget-mystic_news_section .news-grid-new[data-columns="2"] {
  grid-template-columns: repeat(2, 1fr) !important;
}

.elementor-widget-mystic_news_section .news-grid-new[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr) !important;
}

.elementor-widget-mystic_news_section .news-grid-new[data-columns="4"] {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* New Card Styles */
.elementor-widget-mystic_news_section .news-card-new {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.elementor-widget-mystic_news_section .news-card-new-image {
  position: relative;
  height: 264px;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
}

.elementor-widget-mystic_news_section .news-card-new-image-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.elementor-widget-mystic_news_section .news-card-new-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.elementor-widget-mystic_news_section .news-card-new:hover .news-card-new-img {
  transform: scale(1.05);
}

.elementor-widget-mystic_news_section .news-card-new-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.elementor-widget-mystic_news_section .news-card-new-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.elementor-widget-mystic_news_section .news-card-new-dot {
  width: 5px;
  height: 5px;
  flex-shrink: 0;
}
.news-card-new-dot circle {
  color: #d02dd0 !important;
  fill: #d02dd0 !important;
}

.elementor-widget-mystic_news_section .news-card-new-date {
  overflow: hidden;
  color: var(--Black-700, rgba(20, 20, 20, 0.70));
  text-overflow: ellipsis;
  font-family: var(--e-global-typography-text-font-family, "Public Sans"), -apple-system, Helvetica, sans-serif;
  font-size: var(--Caption-c1, 12px);
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0.24px;
  text-transform: uppercase;
}

.elementor-widget-mystic_news_section .news-card-new-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--Black-1000, #000);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.3em * 2); /* Fallback for browsers that don't support line-clamp */
}

.elementor-widget-mystic_news_section .news-card-new-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.elementor-widget-mystic_news_section .news-card-new-title-link:hover {
  color: #666666;
}
.elementor-widget-mystic_news_section .news-card-new-title-link:focus-visible {
  outline: 2px solid var(--blue-900) !important;
  outline-offset: -2px !important;
}

.elementor-widget-mystic_news_section .news-card-new-excerpt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(20, 20, 20, 0.7);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elementor-widget-mystic_news_section .news-card-new-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1.25rem;
  font-size: 0.625rem;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  max-width: max-content;
}

/* Ensure inline styles take precedence for tag colors - remove any conflicting rules */

/* Default tag colors - only apply when no inline styles are present */
.news-card-new:nth-child(1) .news-card-new-tag:not([style*="color"]) {
  background: #dfcfff;
  color: #5c2dd0;
}

/* 2nd tag */
.news-card-new:nth-child(2) .news-card-new-tag:not([style*="color"]) {
  background: #dbedff;
  color: #007aff;
}

/* 3rd tag */
.news-card-new:nth-child(3) .news-card-new-tag:not([style*="color"]) {
  background: #d3ffe4;
  color: #12b56c;
}

/* 4th tag */
.news-card-new:nth-child(4) .news-card-new-tag:not([style*="color"]) {
  background: #fce9fa;
  color: #d02dd0;
}

/* repeat pattern for every 4 posts */
.news-card-new:nth-child(4n + 1) .news-card-new-tag:not([style*="color"]) {
  background: #dfcfff;
  color: #5c2dd0;
}
.news-card-new:nth-child(4n + 2) .news-card-new-tag:not([style*="color"]) {
  background: #dbedff;
  color: #007aff;
}
.news-card-new:nth-child(4n + 3) .news-card-new-tag:not([style*="color"]) {
  background: #d3ffe4;
  color: #12b56c;
}
.news-card-new:nth-child(4n + 4) .news-card-new-tag:not([style*="color"]) {
  background: #fce9fa;
  color: #d02dd0;
}

/* Responsive Grid Behavior */
@media (max-width: 1024px) {
  .elementor-widget-mystic_news_section .news-grid-new[data-columns="4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .elementor-widget-mystic_news_section .news-grid-new[data-columns="3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .elementor-widget-mystic_news_section .news-grid-new[data-columns="4"],
  .elementor-widget-mystic_news_section .news-grid-new[data-columns="3"],
  .elementor-widget-mystic_news_section .news-grid-new[data-columns="2"] {
    grid-template-columns: 1fr !important;
  }
}

.elementor-widget-mystic_news_section .news-section {
  display: flex;
  padding: 0 !important;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  position: relative;
}

.elementor-widget-mystic_news_section .news-section-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

/* Header */
.elementor-widget-mystic_news_section .news-section-header {
  display: flex;
  width: 100%;
  max-width: 824px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  position: relative;
}

.elementor-widget-mystic_news_section .news-section-headline {
  align-self: stretch;
  text-align: center;
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -1.44px;
  position: relative;
  margin: 0 !important;
  color: var(--black-1000);
}

.elementor-widget-mystic_news_section .news-section-headline-accent {
  background: var(--blue-600);
}

.elementor-widget-mystic_news_section .news-section-headline-main {
  color: var(--black-1000);
}

.elementor-widget-mystic_news_section .news-section-description {
  align-self: stretch;
  color: rgba(20, 20, 20, 0.7);
  text-align: center;
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.16px;
  position: relative;
  margin: 0 !important;
}

/* Content Grid */
.elementor-widget-mystic_news_section .news-section-content {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.elementor-widget-mystic_news_section .news-section-grid {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.elementor-widget-mystic_news_section .news-section-featured {
  width: 50%;
  flex-shrink: 0;
}

.elementor-widget-mystic_news_section .news-section-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
  position: relative;
}

.elementor-widget-mystic_news_section .news-section-simple-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  position: relative;
}

.elementor-widget-mystic_news_section .news-section-divider {
  width: 100%;
  height: 1px;
  background: var(--mystic-border-light);
  position: relative;
}

/* News Cards */
.elementor-widget-mystic_news_section .news-card {
  display: flex;
  position: relative;
}

.elementor-widget-mystic_news_section .news-card--featured {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.elementor-widget-mystic_news_section .news-card--secondary {
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* Images */
.elementor-widget-mystic_news_section .news-card-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.elementor-widget-mystic_news_section .news-card-image-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.elementor-widget-mystic_news_section .news-card-image {
  border-radius: 16px;
  position: relative;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.elementor-widget-mystic_news_section .news-card--featured .news-card-image {
  min-height: 264px;
  width: 100%;
}

.elementor-widget-mystic_news_section .news-card-image-container--small {
  flex-shrink: 0;
}

.elementor-widget-mystic_news_section .news-card-image--small {
  width: 160px;
  height: 123px;
  flex-shrink: 0;
}

.elementor-widget-mystic_news_section .news-card:hover .news-card-image,
.elementor-widget-mystic_news_section .news-card-image-container:hover .news-card-image {
  transform: scale(1.05);
}

.elementor-widget-mystic_news_section .news-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.elementor-widget-mystic_news_section .news-card--featured .news-card-content {
  align-self: stretch;
}

.elementor-widget-mystic_news_section .news-card-content--secondary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  align-self: stretch;
  gap: 8px;
}

.elementor-widget-mystic_news_section .news-card-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  position: relative;
}

.elementor-widget-mystic_news_section .news-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.elementor-widget-mystic_news_section .news-dot {
  width: 5px;
  height: 5px;
  aspect-ratio: 1/1;
  position: relative;
}

.elementor-widget-mystic_news_section .news-card-date {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--Black-700, rgba(20, 20, 20, 0.70));
  text-overflow: ellipsis;
  font-family: var(--e-global-typography-text-font-family, "Public Sans"), -apple-system, Helvetica, sans-serif;
  font-size: var(--Caption-c1, 12px);
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  position: relative;
}

/* Text */
.elementor-widget-mystic_news_section .news-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  position: relative;
  flex-grow: 1;
}

.elementor-widget-mystic_news_section .news-card-title {
  align-self: stretch;
  color: var(--black-1000);
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  position: relative;
  margin: 0 !important;
}

.elementor-widget-mystic_news_section .news-card-title--secondary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 160%;
}

.elementor-widget-mystic_news_section .news-card-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.elementor-widget-mystic_news_section .news-card-title-link:hover,
.elementor-widget-mystic_news_section .news-card:hover .news-card-title-link {
  color: #666666;
}

.elementor-widget-mystic_news_section .news-card-title-link:visited {
  color: inherit;
}

/* Enhanced focus states for better accessibility */
.elementor-widget-mystic_news_section .news-card-title-link:focus {
  outline: 3px solid var(--blue-900) !important;
  outline-offset: 4px !important;
  position: relative !important;
  z-index: 10 !important;
  display: inline-block !important;
  border-radius: 2px;
}

/* Ensure focus outline is never clipped */
.elementor-widget-mystic_news_section .news-card-title,
.elementor-widget-mystic_news_section .news-card-content {
  /* overflow: visible !important; */
}

.elementor-widget-mystic_news_section .news-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;
  overflow: hidden;
  color: rgba(20, 20, 20, 0.7);
  text-overflow: ellipsis;
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  position: relative;
  margin: 0 !important;
}

/* Tags */
.elementor-widget-mystic_news_section .news-tag {
  display: flex;
  padding: 6px 12px;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  font-family:
    "Public Sans",
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  position: relative;
  text-decoration: none;
  transition: all 0.2s ease;
}

.elementor-widget-mystic_news_section .news-tag:hover {
  transform: translateY(-1px);
}

.elementor-widget-mystic_news_section .news-tag-icon {
  width: 12px;
  height: 12px;
  position: relative;
}

/* Button */
.elementor-widget-mystic_news_section .news-section-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.elementor-widget-mystic_news_section .news-section-button {
  display: flex;
  height: 48px;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--e-global-color-accent, #f7cd46);
  color: var(--e-global-color-secondary, var(--mystic-brand-brown));
  text-decoration: none;
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  position: relative;
  transition: all 0.2s ease;
}

.elementor-widget-mystic_news_section .news-section-button:hover {
  background: #f5c332;
  color: var(--mystic-brand-brown);
  transform: translateY(-1px);
}

.elementor-widget-mystic_news_section .news-section-button svg {
  width: 20px;
  height: 20px;
  position: relative;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .elementor-widget-mystic_news_section .news-section {
    padding: 48px 20px;
  }

  .elementor-widget-mystic_news_section .news-section-container {
    gap: 32px;
  }

  .elementor-widget-mystic_news_section .news-section-header {
    gap: 16px;
  }

  .elementor-widget-mystic_news_section .news-section-headline {
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.96px;
  }

  .elementor-widget-mystic_news_section .news-section-description {
    font-size: 14px;
  }

  /* Mobile layout: all cards become horizontal */
  .elementor-widget-mystic_news_section .news-section-grid {
    flex-direction: column;
    gap: 24px;
  }

  .elementor-widget-mystic_news_section .news-section-featured {
    width: 100%;
  }

  .elementor-widget-mystic_news_section .news-section-secondary {
    width: 100%;
  }

  .elementor-widget-mystic_news_section .news-card--featured {
    flex-direction: row;
    gap: 16px;
  }

  .elementor-widget-mystic_news_section .news-card--featured .news-card-image {
    width: 112px;
    min-height: 123px;
    flex-shrink: 0;
  }

  .elementor-widget-mystic_news_section .news-card-image--small {
    width: 112px;
    height: 123px;
  }

  .elementor-widget-mystic_news_section .news-card--featured .news-card-content {
    flex: 1;
    gap: 8px;
  }

  .elementor-widget-mystic_news_section .news-card--featured .news-card-text {
    gap: 4px;
  }

  .elementor-widget-mystic_news_section .news-card--featured .news-card-title {
    font-size: 16px;
    line-height: 160%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden !important;
    text-overflow: ellipsis;
  }
  .elementor-widget-mystic_news_section .news-card-title-link {
    max-height: calc(1.5em * 2) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }

  /* Hide excerpt on mobile for featured cards */
  .elementor-widget-mystic_news_section .news-card-excerpt {
    display: none;
  }

  /* Ensure new grid layout titles are properly truncated on mobile */
  .elementor-widget-mystic_news_section .news-card-new-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: calc(1.3em * 2) !important;
  }
}

@media (max-width: 480px) {
  .elementor-widget-mystic_news_section .news-section {
    padding: 32px 16px;
  }

  /* Ensure title truncation works on small mobile screens */
  .elementor-widget-mystic_news_section .news-card-new-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-height: calc(1.3em * 2) !important;
  }

  .elementor-widget-mystic_news_section .news-section-headline {
    font-size: 28px;
  }

  .elementor-widget-mystic_news_section .news-section-button {
    width: 100%;

    /* ========================================
                   FIGMA 3X1 AND 3X2 LAYOUTS
                   ======================================== */

    /* Container */
    .elementor-widget-mystic_news_section .news-figma-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 64px;
      position: relative;
      width: 100%;
      max-width: 992px;
      margin: 0 auto;
      padding: 64px 24px;
      box-sizing: border-box;
    }

    /* Grid Layout */
    .elementor-widget-mystic_news_section .news-figma-grid {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 48px;
      position: relative;
      width: 100%;
    }

    /* 3x1 Layout (Single Row) */
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x1 {
      display: flex;
      width: 100%;
      align-items: flex-start;
      gap: 24px;
      position: relative;
    }

    /* 3x2 Layout (Two Rows) */
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 48px;
      position: relative;
    }

    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(1),
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(2),
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(3) {
      width: calc((100% - 48px) / 3);
    }

    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(4),
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(5),
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(6) {
      width: calc((100% - 48px) / 3);
    }

    /* Create rows for 3x2 layout */
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2::before {
      content: "";
      display: block;
      width: 100%;
    }

    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(1) {
      order: 1;
    }

    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(2) {
      order: 2;
    }

    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(3) {
      order: 3;
    }

    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(4) {
      order: 4;
    }

    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(5) {
      order: 5;
    }

    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 .news-figma-card:nth-child(6) {
      order: 6;
    }

    /* Better approach: Use CSS Grid for 3x2 layout */
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, auto);
      gap: 48px 24px;
      width: 100%;
    }

    /* News Card */
    .elementor-widget-mystic_news_section .news-figma-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
      flex: 1 0 0;
      position: relative;
      transition: transform 0.3s ease;
    }

    .elementor-widget-mystic_news_section .news-figma-card:hover {
      transform: translateY(-4px);
    }

    /* For 3x1 layout, ensure equal width */
    .elementor-widget-mystic_news_section .news-figma-grid--grid_3x1 .news-figma-card {
      flex: 1 0 0;
    }

    /* Image Container */
    .elementor-widget-mystic_news_section .news-figma-image-container {
      height: 264px;
      align-self: stretch;
      position: relative;
      overflow: hidden;
      border-radius: 16px;
    }

    .elementor-widget-mystic_news_section .news-figma-image {
      width: 100%;
      height: 264px;
      flex-shrink: 0;
      border-radius: 16px;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .elementor-widget-mystic_news_section .news-figma-card:hover .news-figma-image {
      transform: scale(1.05);
    }

    /* FAB Button */
    .elementor-widget-mystic_news_section .news-figma-fab {
      display: none !important;
    }
    .elementor-widget-mystic_news_section .news-figma-fab-bg {
      display: none !important;
    }

    /* Content */
    .elementor-widget-mystic_news_section .news-figma-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      align-self: stretch;
      position: relative;
    }

    /* Meta */
    .elementor-widget-mystic_news_section .news-figma-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
    }

    .elementor-widget-mystic_news_section .news-figma-dot {
      width: 5px;
      height: 5px;
      aspect-ratio: 1/1;
      position: relative;
    }

    .elementor-widget-mystic_news_section .news-figma-dot[data-dot-index="1"] circle {
      fill: #d02dd0;
    }

    .elementor-widget-mystic_news_section .news-figma-dot[data-dot-index="2"] circle {
      fill: #12b56c;
    }

    .elementor-widget-mystic_news_section .news-figma-dot[data-dot-index="3"] circle {
      fill: #007aff;
    }

    .elementor-widget-mystic_news_section .news-figma-dot[data-dot-index="4"] circle {
      fill: #5c2dd0;
    }

    .elementor-widget-mystic_news_section .news-figma-date {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      color: rgba(20, 20, 20, 0.5);
      text-overflow: ellipsis;
      font-family:
        "Public Sans",
        -apple-system,
        Roboto,
        Helvetica,
        sans-serif;
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: 120%; /* 14.4px */
      letter-spacing: 0.24px;
      text-transform: uppercase;
      position: relative;
    }

    /* Text */
    .elementor-widget-mystic_news_section .news-figma-text {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      align-self: stretch;
      position: relative;
    }

    .elementor-widget-mystic_news_section .news-figma-text-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      align-self: stretch;
      position: relative;
    }

    .elementor-widget-mystic_news_section .news-figma-title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      align-self: stretch;
      overflow: hidden;
      color: #000;
      text-overflow: ellipsis;
      font-family:
        "Public Sans",
        -apple-system,
        Roboto,
        Helvetica,
        sans-serif;
      font-size: 20px;
      font-style: normal;
      font-weight: 700;
      line-height: 130%; /* 26px */
      position: relative;
      margin: 0;
    }

    .elementor-widget-mystic_news_section .news-figma-title-link {
      color: inherit;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .elementor-widget-mystic_news_section .news-figma-title-link:hover {
      color: #666666;
    }

    .elementor-widget-mystic_news_section .news-figma-title-link:focus {
      outline: 3px solid var(--blue-900);
      outline-offset: 4px;
    }

    .elementor-widget-mystic_news_section .news-figma-excerpt {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      align-self: stretch;
      overflow: hidden;
      color: rgba(20, 20, 20, 0.7);
      text-overflow: ellipsis;
      font-family:
        "Public Sans",
        -apple-system,
        Roboto,
        Helvetica,
        sans-serif;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%; /* 21px */
      position: relative;
      margin: 0;
    }

    /* Tags */
    .elementor-widget-mystic_news_section .news-figma-tag {
      display: flex;
      padding: 6px 12px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 100px;
      position: relative;
    }

    .elementor-widget-mystic_news_section .news-figma-tag[data-color-index="1"] {
      background: #fce9fa;
      color: #d02dd0;
    }

    .elementor-widget-mystic_news_section .news-figma-tag[data-color-index="2"] {
      background: #d3ffe4;
      color: #12b56c;
    }

    .elementor-widget-mystic_news_section .news-figma-tag[data-color-index="3"] {
      background: #dbedff;
      color: #007aff;
    }

    .elementor-widget-mystic_news_section .news-figma-tag[data-color-index="4"] {
      background: #dfcfff;
      color: #5c2dd0;
    }

    .elementor-widget-mystic_news_section .news-figma-tag span {
      font-family:
        "Public Sans",
        -apple-system,
        Roboto,
        Helvetica,
        sans-serif;
      font-size: 10px;
      font-style: normal;
      font-weight: 700;
      line-height: 130%; /* 13px */
      letter-spacing: 0.2px;
      text-transform: uppercase;
    }

    /* ========================================
                   RESPONSIVE DESIGN
                   ======================================== */

    /* Tablet */
    @media (max-width: 768px) {
      .elementor-widget-mystic_news_section .news-figma-container {
        padding: 48px 20px;
        gap: 32px;
      }

      .elementor-widget-mystic_news_section .news-figma-grid--grid_3x1 {
        flex-direction: column;
        gap: 32px;
      }

      .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
      }

      .elementor-widget-mystic_news_section .news-figma-card {
        gap: 16px;
      }

      .elementor-widget-mystic_news_section .news-figma-image-container {
        height: 200px;
      }

      .elementor-widget-mystic_news_section .news-figma-image {
        height: 200px;
      }

      .elementor-widget-mystic_news_section .news-figma-title {
        font-size: 18px;
        line-height: 125%;
      }
    }

    /* Mobile */
    @media (max-width: 480px) {
      .elementor-widget-mystic_news_section .news-figma-container {
        padding: 32px 16px;
        gap: 24px;
      }

      .elementor-widget-mystic_news_section .news-figma-grid--grid_3x1,
      .elementor-widget-mystic_news_section .news-figma-grid--grid_3x2 {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .elementor-widget-mystic_news_section .news-figma-card {
        gap: 12px;
      }

      .elementor-widget-mystic_news_section .news-figma-image-container {
        height: 160px;
      }

      .elementor-widget-mystic_news_section .news-figma-image {
        height: 160px;
      }

      .elementor-widget-mystic_news_section .news-figma-title {
        font-size: 16px;
        line-height: 120%;
      }

      .elementor-widget-mystic_news_section .news-figma-excerpt {
        font-size: 12px;
        line-height: 140%;
      }

      .elementor-widget-mystic_news_section .news-figma-fab {
        width: 48px;
        height: 48px;
        right: 12px;
        bottom: 12px;
      }

      .elementor-widget-mystic_news_section .news-figma-fab-bg {
        width: 48px;
        height: 48px;
        padding: 14px;
      }
    }
    max-width: 280px;
  }
}

/* ========================================
                   MOBILE MENU FOOTER AND MEGA CATEGORY STYLES
                   ======================================== */

.mystic-mobile-menu-footer {
  border-top: 1px solid #eeeef0;
  padding: 20px;
  margin-top: auto;
}

.mystic-mobile-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.mystic-mobile-menu-brand-bars {
  display: flex;
  height: 4px;
  gap: 0;
}

.mystic-mobile-brand-bar {
  flex: 1;
  height: 100%;
}

.mystic-mobile-brand-bar--postal {
  background: #5c2dd0;
}

.mystic-mobile-brand-bar--federal {
  background: #d02dd0;
}

.mystic-mobile-brand-bar--hbr {
  background: var(--mystic-info);
}

.mystic-mobile-brand-bar--healthcare {
  background: var(--mystic-error);
}

.mystic-mobile-mega-category {
  margin-bottom: 24px;
}

.mystic-mobile-mega-category:last-child {
  margin-bottom: 0;
}

.mystic-mobile-mega-category-title {
  color: var(--blue-900-main, #13496a);
  font-family: "Public Sans";
  font-size: var(--Components-Alert-Global-fontSize, 14px);
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 18.2px */
  margin: 0 0 16px 0;
}

.mystic-mobile-mega-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mystic-mobile-mega-link {
  color: var(--blue-900-main, #13496a);
  font-family: "Public Sans";
  font-size: var(--Typography-Font-Size-fontSizeLG, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: 26px; /* 162.5% */
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid #eeeef0;
  transition: color 0.2s ease;
  display: block;
}

.mystic-mobile-mega-link:hover {
  color: var(--blue-900-main, #13496a);
  opacity: 0.8;
}

.mystic-mobile-mega-featured {
  margin-top: 24px;
  border-top: 1px solid #eeeef0;
  padding: 20px;
  background: var(--Yellow-50, #fefbec);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mystic-mobile-mega-featured-title {
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  color: #6b7280;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mystic-mobile-mega-featured-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--mystic-bg-white);
  border-radius: 8px;
  border: 1px solid #eeeef0;
}

.mystic-mobile-mega-featured-image {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
}

.mystic-mobile-mega-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mystic-mobile-mega-featured-content {
  flex: 1;
}

.mystic-mobile-mega-featured-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mystic-mobile-mega-featured-tag {
  font-family: "Public Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 133%;
  color: #ffffff;
  background: #13496a;
  padding: 4px 8px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 8px;
}

.mystic-mobile-mega-featured-post-title {
  margin: 0 !important;
}

.mystic-mobile-mega-featured-post-title a {
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mystic-mobile-mega-featured-post-title a:hover {
  color: #13496a;
  opacity: 0.8;
}

/* Responsive adjustments for mega menu */
@media (max-width: 992px) {
  .mega-menu-sections {
    gap: 32px;
  }

  .mega-menu-featured {
    padding-left: 24px;
  }
}

@media (max-width: 768px) {
  .mega-menu-container {
    display: none;
  }
}

/* ========================================
                   MOBILE TOP TABS STYLES
                   ======================================== */

.mystic-mobile-top-tabs {
  border-bottom: 1px solid #eeeef0;
  padding: 0 20px;
}

.mystic-mobile-tabs-container {
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mystic-mobile-tabs-container::-webkit-scrollbar {
  display: none;
}

.mystic-mobile-top-tab {
  position: relative;
  flex-shrink: 0;
  padding: 16px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.mystic-mobile-top-tab.active {
  border-bottom-color: #d02dd0;
}

.mystic-mobile-top-tab-text {
  font-family: "Public Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  color: var(--mystic-brand-blue);
  white-space: nowrap;
}

.mystic-mobile-top-tab-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #d02dd0;
}

/* Mobile Content */
.mystic-mobile-content {
  flex: 1;
  overflow-y: auto;
}

.mystic-mobile-tab-content {
  display: none;
  padding: 0 !important;
}

.mystic-mobile-tab-content.active {
  display: block;
}

.mystic-mobile-main-tab {
  border-bottom: 1px solid #eeeef0;
}

.mystic-mobile-main-tab-button {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Public Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--mystic-brand-blue);
  text-align: left;
  transition: background-color 0.2s ease;
}

.mystic-mobile-main-tab-button:hover {
  background-color: #f5f5f5;
}

.mystic-mobile-direct-link {
  text-decoration: none !important;
  color: inherit !important;
}

.mystic-mobile-direct-link:hover {
  text-decoration: none !important;
  color: inherit !important;
}

.mystic-mobile-main-tab-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.mystic-mobile-main-tab-icon.expanded {
  transform: rotate(180deg);
}

.mystic-mobile-main-tab-content {
  display: none;
  padding: 20px;
  background: #f7f7f8;
}

.mystic-mobile-main-tab-content.expanded {
  display: block;
}

.mystic-mobile-sub-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mystic-mobile-sub-tab {
  padding: 12px 0;
  border-bottom: 1px solid #eeeef0;
  cursor: pointer;
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--mystic-brand-blue);
  transition: color 0.2s ease;
}

.mystic-mobile-sub-tab:last-child {
  border-bottom: none;
}

.mystic-mobile-sub-tab:hover {
  color: var(--blue-600);
}

/* ========================================
                   MEGA MENU FEATURED ITEM STYLES
                   ======================================== */

.mega-menu-featured-item {
  display: flex;
  gap: 16px;
  margin-bottom: 24px !important;
  align-items: flex-start;
}
.mega-menu-featured-item:last-child {
  margin-bottom: 0 !important;
}

.mega-menu-featured-image {
  flex-shrink: 0;
  width: 160px !important;
  height: 105px !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.mega-menu-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mega-menu-featured-content {
  flex: 1;
}

.mega-menu-featured-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 6px !important;
  flex-wrap: wrap;
}

.mega-menu-featured-tag {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #f7cd46 !important;
  background: #13496a !important;
  padding: 4px 8px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  margin-bottom: 0px !important;
}

.mega-menu-featured-post-title {
  margin: 0 !important;
}

.mega-menu-featured-post-title a {
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  color: #000000;
  text-decoration: none;
  transition: color 0.2s ease;
}

.mega-menu-featured-post-title a:hover {
  color: #13496a;
  opacity: 0.8;
}

.mega-menu-featured-post-excerpt {
  font-family: "Public Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
  color: #757682;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
                   MAVEN CARD STYLES
                   ======================================== */

.mystic-maven-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(20, 20, 20, 0.1);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mystic-maven-card--auto-flex {
  flex: 1;
  min-width: 0;
}

.mystic-maven-card--no-bg {
  background: transparent;
  box-shadow: none;
  border: none;
}

.mystic-maven-card-logo {
  display: flex;
  height: 48px;
  padding: 12px 0;
  align-items: center;
}

.mystic-maven-card-logo svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto !important;
  height: auto !important;
}

.mystic-maven-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto !important;
  height: auto !important;
}

.mystic-maven-card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.mystic-maven-card-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mystic-maven-card-title {
  color: var(--black-1000);
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  margin: 0;
}

.mystic-maven-card-description {
  color: rgba(20, 20, 20, 0.7);
  font-size: 16px;
  line-height: 160%;
  margin: 0;
}

.mystic-maven-card-button {
  margin-top: auto;
}

/* Responsive styles */
@media (max-width: 768px) {
  .mystic-maven-card {
    padding: 20px;
    gap: 20px;
  }

  .mystic-maven-card-title {
    font-size: 16px;
  }

  .mystic-maven-card-description {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .mystic-maven-card {
    padding: 16px;
    gap: 16px;
  }

  .mystic-maven-card-title {
    font-size: 15px;
  }

  .mystic-maven-card-description {
    font-size: 13px;
  }
}

/* ========================================
                   CHECKLIST TABLE STYLES
                   ======================================== */

/* Check and Cross Icon Styling - Available for All Variants */
.mystic-checkmark-icon,
.mystic-x-mark-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* SVG styling for check and cross icons */
.mystic-checkmark-icon svg,
.mystic-x-mark-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ensure proper stroke colors */
.mystic-checkmark-icon svg path {
  stroke: #12b56c !important;
}

.mystic-x-mark-icon svg path {
  stroke: #eb4536 !important;
}

/* Responsive adjustments for check and cross icons */
@media (max-width: 768px) {
  .mystic-checkmark-icon,
  .mystic-x-mark-icon {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 480px) {
  .mystic-checkmark-icon,
  .mystic-x-mark-icon {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Print styles for check and cross icons */
@media print {
  .mystic-checkmark-icon,
  .mystic-x-mark-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .mystic-checkmark-icon svg path {
    stroke: #000 !important;
  }

  .mystic-x-mark-icon svg path {
    stroke: #000 !important;
  }
}

/* High contrast mode support for check and cross icons */
@media (prefers-contrast: high) {
  .mystic-checkmark-icon svg path {
    stroke: #000 !important;
    stroke-width: 2px !important;
  }

  .mystic-x-mark-icon svg path {
    stroke: #000 !important;
    stroke-width: 2px !important;
  }
}

/* ========================================
                   TEXT-BASED LINK STYLES FOR DATA TABLE
                   ======================================== */

/* Text-based link styles */
.mystic-table-text-link {
  color: #0f557d;
  text-decoration: underline;
  text-decoration-color: rgba(15, 85, 125, 0.3);
  text-underline-offset: 2px;
  transition: all 0.2s ease;
  font-weight: 500;
  cursor: pointer;
}

.mystic-table-text-link:hover {
  color: #0a3d5a;
  text-decoration-color: #0a3d5a;
  text-underline-offset: 3px;
}

.mystic-table-text-link:focus {
  outline: 2px solid rgba(15, 85, 125, 0.3);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Display-only links (no URL, just styling) */
.mystic-table-display-link {
  color: #0f557d;
  text-decoration: underline;
  text-decoration-color: rgba(15, 85, 125, 0.3);
  text-underline-offset: 2px;
  font-weight: 500;
  cursor: default;
  pointer-events: none;
}

/* Ensure links work well with highlighting */
.mystic-table-highlight .mystic-table-text-link {
  color: inherit;
  text-decoration-color: currentColor;
}

.mystic-table-highlight .mystic-table-text-link:hover {
  opacity: 0.8;
}

.mystic-table-highlight .mystic-table-display-link {
  color: inherit;
  text-decoration-color: currentColor;
}

/* Enhanced typography controls for data table */
.mystic-data-table__cell--header {
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.6);
}

.mystic-data-table__cell--data {
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    Helvetica,
    sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  color: rgba(20, 20, 20, 0.6);
}

/* Enhanced color system for data table variants */
.mystic-data-table--enhanced {
  --table-bg-primary: #ffffff;
  --table-bg-secondary: #f7f7f8;
  --table-border-color: #eeeef0;
  --highlight-color: #0f557d;
}

/* Link underline control */
.mystic-data-table[data-link-underlines="no"] .mystic-table-text-link {
  text-decoration: none;
}

.mystic-data-table[data-link-underlines="no"] .mystic-table-display-link {
  text-decoration: none;
}

/* Enhanced bullet point styling */
.mystic-table-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: inherit;
}

.mystic-table-bullet-item {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mystic-table-bullet-item:before {
  content: "•";
  position: absolute;
  left: 0;
  color: inherit;
  font-weight: bold;
  font-size: inherit;
}

.mystic-table-bullet-item:last-child {
  margin-bottom: 0;
}

/* Enhanced note container styling */
.mystic-table-note-container {
  display: flex;
  padding: 20px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 12px;
  background: #f1f9fe;
  margin-top: 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mystic-table-note-content {
  flex: 1 0 0;
  color: var(--blue-900);
  font-family: inherit;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.mystic-table-note-label {
  font-weight: 700;
}

/* Enhanced main content styling */
.mystic-table-main-content {
  align-self: stretch;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  line-height: inherit;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.mystic-table-main-content:last-child {
  margin-bottom: 0;
}

/* Enhanced highlighting */
.mystic-table-highlight {
  font-weight: 600;
  color: var(--highlight-color, #0f557d);
}

/* Cell content with icon styling */
.mystic-table-cell-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.mystic-data-table__cell--first .mystic-table-cell-with-icon {
  justify-content: flex-start;
}

.mystic-table-icon-label {
  flex: 1;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  color: inherit;
}

/* Icon styling */
.mystic-checkmark-icon,
.mystic-x-mark-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* Ensure SVG icons are visible in data table cells */
.mystic-table-cell-with-icon .mystic-checkmark-icon,
.mystic-table-cell-with-icon .mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Override any global SVG styles that might hide the icons */
.mystic-data-table svg.mystic-checkmark-icon,
.mystic-data-table svg.mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Ensure icons are visible in enhanced data table variants */
.mystic-enhanced-data-table .mystic-checkmark-icon,
.mystic-enhanced-data-table .mystic-x-mark-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  width: 26px !important;
  height: 26px !important;
}

/* Responsive enhancements for enhanced variants */
@media (max-width: 768px) {
  .mystic-data-table--enhanced .mystic-data-table__cell {
    padding: 16px 12px;
    min-height: 60px;
    font-size: 14px;
  }

  .mystic-table-icon-label {
    font-size: 14px;
  }

  .mystic-table-note-content {
    font-size: 13px;
  }

  .mystic-table-main-content {
    font-size: inherit;
  }
}

@media (max-width: 480px) {
  .mystic-data-table--enhanced .mystic-data-table__cell {
    padding: 12px 8px;
    min-height: 50px;
    font-size: 13px;
  }

  .mystic-table-icon-label {
    font-size: 13px;
  }

  .mystic-table-note-content {
    font-size: 12px;
  }
}

/* High contrast mode support for enhanced features */
@media (prefers-contrast: high) {
  .mystic-table-text-link,
  .mystic-table-display-link {
    border: 1px solid transparent;
  }

  .mystic-table-text-link:hover,
  .mystic-table-display-link:hover {
    border-color: currentColor;
  }

  .mystic-table-text-link:focus,
  .mystic-table-display-link:focus {
    outline-width: 3px;
    outline-color: currentColor;
  }

  .mystic-table-note-container {
    border: 2px solid currentColor;
  }
}

/* ========================================
                   DATA TABLE MOBILE RESPONSIVE FIXES
                   ======================================== */

/* Mobile-first responsive design for data tables */
@media (max-width: 768px) {
  /* Prevent layout thrashing on mobile */
  .mystic-data-table {
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: auto; /* Let browser decide what to optimize */
    overflow-x: auto; /* Ensure horizontal scroll works */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  /* Simplify table structure on mobile */
  .mystic-data-table__table {
    min-width: 100%;
    width: 100%;
    display: block; /* Change from flex to block for better mobile handling */
  }

  .mystic-data-table__row {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping on mobile */
    min-width: 100%;
    width: 100%;
  }

  /* Optimize cell sizing for mobile */
  .mystic-data-table__cell {
    padding: 12px 16px;
    min-height: 50px;
    height: auto; /* Allow natural height */
    font-size: 14px;
    line-height: 1.4;
    flex-shrink: 0; /* Prevent cells from shrinking */
    min-width: 120px; /* Minimum width for readability */
    max-width: none; /* Allow expansion */
  }

  /* Header cells on mobile */
  .mystic-data-table__cell--header {
    font-size: 13px;
    font-weight: 600;
    padding: 19px 16px;
    min-height: 40px;
    background: rgba(255, 255, 255, 0.3);
  }

  /* First column optimization */
  .mystic-data-table__cell--first {
    min-width: 140px; /* Slightly wider for labels */
    font-weight: 500;
  }

  /* Sticky table mobile optimizations */
  .mystic-data-table--sticky {
    overflow-x: auto;
    position: relative;
    display: block; /* Change from flex to block */
    width: 100%;
  }

  .mystic-data-table--sticky .mystic-data-table__table {
    display: block;
    width: 100%;
  }

  .mystic-data-table__sticky-first-column {
    position: sticky;
    left: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    min-width: 140px;
    width: 140px;
    flex-shrink: 0;
    overflow-y: hidden;
  }

  .mystic-data-table__scrollable-columns {
    flex: 1;
    min-width: 0;
    width: calc(100% - 140px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Fixed width table mobile optimization */
  .mystic-data-table--fixed {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mystic-data-table--fixed .mystic-data-table__cell {
    min-width: 120px;
    width: 120px;
    flex-shrink: 0;
  }

  /* Responsive table mobile optimization */
  .mystic-data-table--responsive {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .mystic-data-table--responsive .mystic-data-table__cell {
    min-width: 120px;
    flex: 1;
  }

  /* Enhanced table mobile optimizations */
  .mystic-data-table--enhanced .mystic-data-table__cell {
    padding: 12px 16px;
    min-height: 50px;
    font-size: 14px;
  }

  .mystic-table-icon-label {
    font-size: 13px;
  }

  .mystic-table-note-content {
    font-size: 12px;
    padding: 8px 12px;
  }

  .mystic-table-main-content {
    font-size: 14px;
  }

  /* Bullet list mobile optimization */
  .mystic-table-bullet-list {
    margin: 8px 0;
    padding-left: 16px;
  }

  .mystic-table-bullet-item {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 4px;
  }

  /* Note container mobile optimization */
  .mystic-table-note-container {
    margin: 8px 0;
    padding: 8px 12px;
    border-radius: 6px;
  }

  /* Icon sizing for mobile */
  .mystic-checkmark-icon,
  .mystic-x-mark-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }

  /* Cell with icon mobile layout */
  .mystic-table-cell-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }
}

/* Extra small mobile devices */
@media (max-width: 480px) {
  .mystic-data-table__cell {
    padding: 8px 12px;
    min-height: 45px;
    font-size: 13px;
    min-width: 100px;
  }

  .mystic-data-table__cell--header {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 35px;
  }

  .mystic-data-table__cell--first {
    min-width: 120px;
    font-size: 13px;
  }

  .mystic-data-table__sticky-first-column {
    min-width: 120px;
    width: 120px;
  }

  .mystic-data-table__scrollable-columns {
    width: calc(100% - 120px);
  }

  .mystic-data-table--fixed .mystic-data-table__cell,
  .mystic-data-table--sticky .mystic-data-table__cell {
    min-width: 100px;
    width: 100px;
  }

  .mystic-data-table--enhanced .mystic-data-table__cell {
    padding: 8px 12px;
    min-height: 45px;
    font-size: 13px;
  }

  .mystic-table-icon-label {
    font-size: 12px;
  }

  .mystic-table-note-content {
    font-size: 11px;
    padding: 6px 10px;
  }

  .mystic-table-main-content {
    font-size: 13px;
  }

  .mystic-table-bullet-item {
    font-size: 12px;
  }

  /* Smaller icons for very small screens */
  .mystic-checkmark-icon,
  .mystic-x-mark-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .mystic-data-table__cell {
    padding: 8px 12px;
    min-height: 40px;
  }

  .mystic-data-table__cell--header {
    min-height: 30px;
  }
}

/* High DPI mobile devices */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .mystic-data-table {
    border-width: 0.5px; /* Thinner borders for high DPI */
  }

  .mystic-data-table__cell {
    border-right-width: 0.5px;
    border-bottom-width: 0.5px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .mystic-data-table {
    -webkit-tap-highlight-color: transparent;
  }

  .mystic-data-table__cell {
    touch-action: pan-x; /* Allow horizontal scrolling */
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .mystic-data-table {
    transition: none;
  }

  .mystic-data-table__cell {
    transition: none;
  }
}

/* Dark mode mobile support */
@media (prefers-color-scheme: dark) {
  .mystic-data-table {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .mystic-data-table__cell--header {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
  }

  .mystic-data-table__cell--data {
    color: rgba(255, 255, 255, 0.7);
  }
}

/* Print styles for mobile */
@media print {
  .mystic-data-table {
    background: white !important;
    border: 1px solid #000 !important;
    overflow: visible !important;
  }

  .mystic-data-table__cell {
    border: 1px solid #000 !important;
    background: white !important;
    color: black !important;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .mystic-table-text-link,
  .mystic-table-display-link {
    transition: none;
  }
}

/* Print styles for enhanced features */
@media print {
  .mystic-table-text-link,
  .mystic-table-display-link {
    color: #000;
    text-decoration: underline;
  }

  .mystic-table-note-container {
    background: #f0f0f0;
    border: 1px solid #000;
  }

  .mystic-table-note-content {
    color: #000;
  }

  .mystic-table-highlight {
    color: #000;
    font-weight: bold;
  }
}

/* ========================================
                   CAROUSEL ACCESSIBILITY ENHANCEMENTS
                   ======================================== */

/* High contrast mode support for carousel */
@media (prefers-contrast: high) {
  .mystic-slide-carousel-container .mystic-slide-item {
    border-left: 2px solid #000000;
  }

  .mystic-slide-carousel-container .mystic-slide-item.active,
  .mystic-slide-carousel-container .mystic-slide-item:focus-visible {
    border-left-color: #000000;
    outline: 2px solid #000000;
  }

  .mystic-slide-carousel-button {
    border: 2px solid #000000;
  }
}

/* Reduced motion support for carousel */
@media (prefers-reduced-motion: reduce) {
  .mystic-slide-carousel-container .mystic-slide-item,
  .mystic-slide-carousel-button,
  .mystic-slide-arrow,
  .mystic-slide-mobile-slide {
    transition: none;
  }

  .mystic-slide-carousel-button:hover,
  .mystic-slide-arrow:hover {
    transform: none;
  }
}

.e-n-tabs-heading {
  border-bottom: 1px solid #0000001a;
  gap: 32px !important;
  min-width: 100%;
  display: flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.e-n-tabs-heading button {
  background: none !important;
  color: var(--black-999) !important;
  font-weight: 700 !important;
  font-size: 16px;
  outline: 0 !important;
  padding: 15px 2px !important;
  margin: 0 !important;
}
.e-n-tabs-heading button:focus {
  outline: none !important;
}
.e-n-tabs-heading button:focus-visible {
  outline: 2px solid var(--blue-600) !important;
  outline-offset: -2px !important;
}
.e-n-tabs-heading button span {
  transition: ease all 0.3s;
}
.e-n-tabs-heading button:hover span {
  color: var(--blue-900) !important;
  transform: translatey(-1.2px);
}
.e-n-tabs-heading button[aria-selected="true"] {
  color: var(--blue-900) !important;
  border-bottom: 1px solid var(--lightblue) !important;
}
.tab-heading h3 {
  font-size: 24px !important;
  font-weight: 600;
  line-height: 31px;
  color: var(--black-1000) !important;
}
.auto-height img {
  height: unset !important;
}

/* News Section - Default Tab Text Typography (non-active state) */
.elementor-widget-mystic_news_section .mystic-tab:not(.mystic-tab--active) .mystic-tab__label,
.elementor-widget-mystic_news_section .e-n-tabs-heading button:not([aria-selected="true"]) > span {
  color: var(--black-900, rgba(20, 20, 20, 0.9)) !important;
  font-family: var(--font-public-sans, "Public Sans") !important;
  font-size: var(--paragraph-p1, 16px) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 160% !important; /* 25.6px when 16px */
}

@media screen and (max-width: 767px) {
  .tab-heading h3 br {
    display: none;
  }
  .tab-heading {
    margin-bottom: 1rem !important;
  }
  .mystic-simple-heading {
    max-width: unset !important;
  }
}

/* ========================================
       DATE & READ TIME WIDGET
       ======================================== */

.mystic-date-read-time {
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: #b0540d;
  display: inline-block;
  white-space: nowrap;
}

.mystic-date-read-time .mystic-date {
  color: inherit;
}

.mystic-date-read-time .mystic-separator {
  color: inherit;
  margin: 0 4px;
}

.mystic-date-read-time .mystic-read-time {
  color: inherit;
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
  .mystic-date-read-time {
    font-size: 13px;
  }
}

/* ========================================
       MERGED CELL BUTTONS STYLING
       ======================================== */

/* Merged cell buttons container */
.mystic-merged-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.mystic-merged-buttons--vertical {
  flex-direction: column;
  gap: 8px;
}

.mystic-merged-buttons--horizontal {
  flex-direction: row;
}

/* Button alignment classes */
.mystic-merged-buttons--left {
  justify-content: flex-start;
}

.mystic-merged-buttons--center {
  justify-content: center;
}

.mystic-merged-buttons--right {
  justify-content: flex-end;
}

.mystic-merged-buttons--space-between {
  justify-content: space-between;
}

.mystic-merged-header-content {
  display: flex;
  width: 100%;
  align-items: center;
}

.mystic-merged-header-text {
  width: 50% !important;
  display: inline-block !important;
  text-align: left !important;
  padding: 0 8px;
  box-sizing: border-box;
}

.mystic-merged-header-text:first-child {
  padding-left: 0;
}

.mystic-merged-header-text:last-child {
  padding-right: 0;
  padding-left: 40px;
}
@media (max-width: 1024px) {
  .mystic-merged-header-text:last-child {
    padding-left: 0;
  }
}

/* Full width buttons */
.mystic-merged-buttons--full-width {
  width: 100%;
}

.mystic-merged-buttons--full-width .mystic-merged-button {
  flex: 1;
  min-width: 0; /* Allow buttons to shrink below content size */
  justify-content: center;
}

/* Fluid buttons */
.mystic-merged-buttons--fluid {
  width: 100%;
  display: flex;
  /* Gap will be set dynamically via inline styles */
}

.mystic-merged-buttons--fluid .mystic-merged-button {
  flex-shrink: 0;
  justify-content: center;
  min-width: 0; /* Allow buttons to shrink below content size */
  /* Flex value will be set inline via style attribute */
}

/* Individual merged cell button */
.mystic-merged-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0f557d;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-family:
    var(--e-global-typography-text-font-family, "Public Sans"),
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  min-height: 36px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* Button Size Variants */
.mystic-merged-button--small {
  padding: 6px 12px;
  font-size: 12px;
  min-height: 28px;
  gap: 6px;
  border-radius: 4px;
}

.mystic-merged-button--medium {
  padding: 8px 16px;
  font-size: 14px;
  min-height: 36px;
  gap: 8px;
  border-radius: 6px;
}

.mystic-merged-button--large {
  padding: 12px 24px;
  font-size: 16px;
  min-height: 44px;
  gap: 10px;
  border-radius: 8px;
  justify-content: center;
}

.mystic-merged-button:hover {
  background: #0a3d5a;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 85, 125, 0.3);
}

.mystic-merged-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 85, 125, 0.2);
}

.mystic-merged-button i {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon sizing for different button sizes */
.mystic-merged-button--small i {
  font-size: 12px;
}

.mystic-merged-button--medium i {
  font-size: 14px;
}

.mystic-merged-button--large i {
  font-size: 16px;
}

.mystic-merged-button-text {
  font-weight: 500;
}

/* Button Variants */
.mystic-merged-button--primary {
  background: #f7cd46;
  color: #431b05;
  border: 1px solid #f7cd46;
}

.mystic-merged-button--primary:hover {
  background: #f5bc2a;
  color: #431b05;
  border-color: #f5bc2a;
  box-shadow: 0 4px 12px rgba(247, 205, 70, 0.3);
}

.mystic-merged-button--secondary {
  background: #0f557d;
  color: #ffffff;
  border: 1px solid #0f557d;
}

.mystic-merged-button--secondary:hover {
  background: #0a3d5a;
  color: #ffffff;
  border-color: #0a3d5a;
  box-shadow: 0 4px 12px rgba(15, 85, 125, 0.3);
}

.mystic-merged-button--white {
  background: #ffffff;
  color: #0f557d;
  border: 1px solid #0f557d;
}

.mystic-merged-button--white:hover {
  background: #e2f2fc;
  color: #0f557d;
  border-color: #0f557d;
  box-shadow: 0 4px 12px rgba(15, 85, 125, 0.2);
}

.mystic-merged-button--outline {
  background: transparent;
  color: #0f557d;
  border: 1px solid #0f557d;
}

.mystic-merged-button--outline:hover {
  background: #0f557d;
  color: #ffffff;
  border-color: #0f557d;
  box-shadow: 0 4px 12px rgba(15, 85, 125, 0.2);
}

.mystic-merged-button--link {
  background: transparent;
  color: #0f557d;
  border: none;
  padding: 8px 0;
  text-decoration: underline;
}

.mystic-merged-button--link:hover {
  background: transparent;
  color: #0a3d5a;
  border: none;
  text-decoration: underline;
  box-shadow: none;
  transform: none;
}
.mystic-download-icon--lg {
  min-width: 20px;
}

/* Merged cell wrapper for alignment */
.mystic-merged-cell-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Merged text content spacing */
.mystic-merged-text-content {
  margin-bottom: 8px;
}

.mystic-merged-text-content:last-child {
  margin-bottom: 0;
}

/* Responsive adjustments for merged buttons */
@media (max-width: 1024px) {
  .mystic-merged-buttons--horizontal {
    flex-direction: column;
    gap: 20px !important;
  }
  .mystic-data-table--enhanced .mystic-data-table__cell {
    padding: 24px 12px;
    min-height: 60px;
    font-size: 14px;
  }

  .mystic-merged-buttons--fluid {
    flex-direction: column;
    gap: 20px !important;
  }

  .mystic-merged-buttons--full-width {
    flex-direction: column;
    gap: 20px !important;
  }
  .mystic-merged-header-text {
    width: auto !important;
    display: inline-block !important;
    text-align: left !important;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .mystic-merged-buttons--fluid .mystic-merged-button {
    flex: none;
    width: 100%;
  }

  .mystic-merged-buttons--full-width .mystic-merged-button {
    flex: none;
    width: 100%;
  }
  .mystic-merged-button--large {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .mystic-merged-buttons {
    gap: 8px;
  }

  .mystic-merged-button {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 32px;
  }

  .mystic-merged-button--small {
    padding: 4px 8px;
    font-size: 11px;
    min-height: 24px;
  }

  .mystic-merged-button--medium {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 32px;
  }

  .mystic-merged-button--large {
    padding: 8px 16px;
    font-size: 12px;
    min-height: 36px;
  }

  .mystic-merged-buttons--vertical {
    gap: 6px;
  }

  /* Mobile alignment adjustments */
  .mystic-merged-buttons--left,
  .mystic-merged-buttons--center,
  .mystic-merged-buttons--right {
    justify-content: center; /* Center on mobile for better UX */
  }

  .mystic-merged-button--link {
    padding: 6px 0;
  }
}

/* ========================================
   Slider Carousel Widget Styles
   ======================================== */

.mystic-slider-carousel {
  position: relative;
  width: 100%;
  max-width: 1392px;
  height: 680px;
  overflow: hidden;
  border-radius: 16px;
  margin: 0 auto;
  aspect-ratio: 1392 / 680;
}

/* Responsive aspect ratio maintenance */
@media (max-width: 1392px) {
  .mystic-slider-carousel {
    height: calc(100vw * 680 / 1392);
    max-height: 680px;
  }
}

@media (max-width: 1080px) {
  .mystic-slider-carousel {
    height: calc(100vw * 680 / 1392);
    max-height: 500px;
  }
}

.mystic-slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  overflow: hidden;
}

.mystic-slider-slides-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.mystic-slider-slide {
  position: relative;
  min-width: 100%;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: block;
}

.mystic-slider-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mystic-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mystic-slider-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.mystic-slider-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 3;
  padding: 40px;
  box-sizing: border-box;
}

/* Content Alignment Classes */
.mystic-slider-content-wrapper.content-left-top {
  align-items: flex-start;
  justify-content: flex-start;
}

.mystic-slider-content-wrapper.content-left-center {
  align-items: center;
  justify-content: flex-start;
}

.mystic-slider-content-wrapper.content-left-bottom {
  align-items: flex-end;
  justify-content: flex-start;
}

.mystic-slider-content-wrapper.content-center-top {
  align-items: flex-start;
  justify-content: center;
}

.mystic-slider-content-wrapper.content-center-center {
  align-items: center;
  justify-content: center;
}

.mystic-slider-content-wrapper.content-center-bottom {
  align-items: flex-end;
  justify-content: center;
}

.mystic-slider-content-wrapper.content-right-top {
  align-items: flex-start;
  justify-content: flex-end;
}

.mystic-slider-content-wrapper.content-right-center {
  align-items: center;
  justify-content: flex-end;
}

.mystic-slider-content-wrapper.content-right-bottom {
  align-items: flex-end;
  justify-content: flex-end;
}

.mystic-slider-content {
  max-width: 350px;
  color: #141414;
}

.mystic-slider-content h2 {
  font-family: "Public Sans", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  line-height: 105%;
  letter-spacing: -3%;
  margin: 0 0 20px 0;
  color: #0c2d45;
}

.mystic-slider-content p {
  font-family: "Public Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px; /* Paragraph/p1 equivalent */
  line-height: 160%;
  letter-spacing: 1%;
  margin: 0 0 30px 0;
  color: rgba(0, 0, 0, 0.7);
}

.mystic-slider-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 154px;
  height: 48px;
  padding: 15px 20px;
  background-color: #ffd700;
  color: #141414;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-family: "Public Sans", sans-serif;
  gap: 8px;
  box-sizing: border-box;
}

.mystic-slider-button:hover {
  background-color: #0f7eba;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 126, 186, 0.3);
}

.mystic-slider-button svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.mystic-slider-button:hover svg {
  transform: translateX(2px);
}

/* Navigation Arrows */
.mystic-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  color: #666666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mystic-slider-nav:hover {
  color: #0f7eba;
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.mystic-slider-prev {
  left: 20px;
}


.mystic-slider-next {
  right: 20px;
}

.mystic-slider-nav svg {
  width: 20px;
  height: 20px;
}

/* Dots Navigation */
.mystic-slider-dots {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 4;
}

.mystic-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.mystic-slider-dot:hover {
  background-color: rgba(15, 126, 186, 0.7);
  transform: scale(1.2);
}

.mystic-slider-dot.active {
  background-color: #0f7eba;
  transform: scale(1.3);
}
.mystic-slider-mobile-arrows {
  display: none;
}
.mystic-slider-dots-mobile {
  display: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .mystic-slider-carousel {
    height: auto !important;
    min-height: 300px;
    max-height: none !important;
    aspect-ratio: auto;
  }

  .mystic-slider-dots {
    display: none;
  }
  .mystic-slider-dots-mobile {
    display: block;
    display: flex;
    position: absolute;
    right: 32px;
    top: 450px;
    z-index: 99;
  }

  .mystic-slider-nav.desktop-arrows {
    display: none !important;
}

  .mystic-slider-mobile-arrows {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    bottom: 20px;
    right: 20px;
  }
  .mystic-slider-mobile-arrows .mystic-slider-nav {
    position: relative;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    transform: translateY(0%);
  }

  .mystic-slider-content-wrapper {
    padding: 20px 0;
    position: relative;
    height: auto;
  }
  .mystic-slider-image {
    position: relative;
    max-height: 480px;
    border-radius: 16px;
    overflow: hidden;
    /* aspect-ratio: 1392 / 680; */
  }

  .mystic-slider-image img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center;
  }
  .mystic-slider-content {
    width: 100%;
    max-width: 100% !important;
  }

  .mystic-slider-content h2 {
    font-size: 28px;
    line-height: 105%;
    letter-spacing: -3%;
    margin-bottom: 15px;
  }

  .mystic-slider-content p {
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 1%;
    margin-bottom: 20px;
  }

  .mystic-slider-button {
    min-width: 130px;
    height: 42px;
    padding: 12px 16px;
    font-size: 0.9rem;
  }

  .mystic-slider-nav {
    width: 35px;
    height: 35px;
    display: flex !important; /* Force show on mobile */
  }

  /* Mobile layout adjustments */
  .mystic-slider-content-wrapper.content-left-center,
  .mystic-slider-content-wrapper.content-left-bottom,
  .mystic-slider-content-wrapper.content-right-center,
  .mystic-slider-content-wrapper.content-right-bottom {
    align-items: flex-end;
  }

  .mystic-slider-content-wrapper.content-center-center,
  .mystic-slider-content-wrapper.content-center-bottom {
    align-items: flex-end;
  }
}

@media (max-width: 480px) {
  .mystic-slider-carousel {
    height: auto;
    /* min-height: 250px; */
  }
  .mystic-slider-mobile-arrows {
    right: 4px;
  }

  .mystic-slider-content-wrapper {
    padding: 15px 0;
  }

  .mystic-slider-content h2 {
    font-size: 24px;
    line-height: 105%;
    letter-spacing: -3%;
    margin-bottom: 12px;
  }

  .mystic-slider-content p {
    font-size: 13px;
    line-height: 160%;
    letter-spacing: 1%;
    margin-bottom: 15px;
  }

  .mystic-slider-button {
    /* width: 120px; */
    height: 40px;
    padding: 10px 14px;
    font-size: 0.85rem;
  }

  .mystic-slider-nav {
    width: 30px;
    height: 30px;
    display: flex !important;
  }

  .mystic-slider-nav svg {
    width: 16px;
    height: 16px;
  }

  .mystic-slider-prev {
    left: 10px;
  }

  .mystic-slider-next {
    right: 10px;
  }

  .mystic-slider-dots {
    bottom: 10px;
    right: 10px;
  }
}

/* Screen Reader Only Class */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Accessibility Improvements */
.mystic-slider-carousel:focus {
  /* outline: 2px solid #005fcc; */
  /* outline-offset: 2px; */
}

.mystic-slider-nav:focus,
.mystic-slider-dot:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

.mystic-slider-button:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Disabled state styling */
.mystic-slider-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mystic-slider-nav:disabled:hover {
  /* transform: translateY(-50%); */
  background-color: rgba(255, 255, 255, 0.9);
  color: #666666;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mystic-slider-nav,
  .mystic-slider-dot,
  .mystic-slider-button {
    border: 2px solid currentColor;
  }

  .mystic-slider-nav:focus,
  .mystic-slider-dot:focus,
  .mystic-slider-button:focus {
    outline: 3px solid #000000;
    outline-offset: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mystic-slider-slide {
    transition: none;
  }

  .mystic-slider-nav,
  .mystic-slider-dot,
  .mystic-slider-button {
    transition: none;
  }
}

/* Animation for smooth transitions */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mystic-slider-slide.slide-in-right {
  animation: slideInRight 0.3s ease-in-out;
}

.mystic-slider-slide.slide-in-left {
  animation: slideInLeft 0.3s ease-in-out;
}