.view-id-user_profiles.view-display-id-block_1, .view-brand-info, .view-current-user-info{
	display: none;
}





.app-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Clip any overflow inside the fixed bounds. Without this, a wordmark
     wider than the container (on very narrow viewports, or if a fallback
     font renders heavier than Plus Jakarta Sans) can spill out and
     trigger a horizontal scrollbar on the document. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  background: #ffffff;
  background: var(--gua-white, #ffffff);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
 
/* Wordmark — gradient text "Go Ultra AI" with gentle shimmer */
.app-loading::before {
  content: "Go Ultra AI";
  display: block;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background-image: linear-gradient(90deg, #f77062 0%, #fe5196 50%, #bc4cf4 100%);
  background-image: var(--gua-gradient, linear-gradient(90deg, #f77062 0%, #fe5196 50%, #bc4cf4 100%));
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: app-loading-shimmer 2.5s ease-in-out infinite alternate;
}
 
/* Spinner */
.app-loading::after {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  border: 3px solid #e9ecef;
  border: 3px solid var(--gua-gray-200, #e9ecef);
  border-top-color: #1a73e8;
  border-top-color: var(--gua-primary, #1a73e8);
  border-radius: 50%;
  animation: app-loading-spin 0.8s linear infinite;
}
 
/* Hide any stale GIF still embedded in old markup. Safe to keep even
   after every page ships without the <img>. */
.app-loading img {
  display: none !important;
}
 
@keyframes app-loading-shimmer {
  to { background-position: 100% 50%; }
}
 
@keyframes app-loading-spin {
  to { transform: rotate(360deg); }
}
 
@media (max-width: 480px) {
  .app-loading::before { font-size: 32px; }
  .app-loading::after  { width: 28px; height: 28px; }
}
 
@media (prefers-reduced-motion: reduce) {
  .app-loading::before {
    animation: none;
    background-position: 50% 50%;
  }
  .app-loading::after {
    animation: none;
  }
}










/* ============================================================
   APP SWITCHER v2 — Global floating menu
   Prefix: as-  |  z-index: 9989–9991
   ============================================================ */

:root {
  --as-primary: var(--yp-primary, var(--yca-primary, #1a73e8));
  --as-primary-hover: var(--yp-primary-hover, var(--yca-primary-hover, #1557b0));
  --as-primary-light: var(--yp-primary-light, var(--yca-primary-light, #e8f0fe));
  --as-bg: var(--yp-bg-primary, var(--yca-bg-primary, #ffffff));
  --as-bg2: var(--yp-bg-secondary, var(--yca-bg-secondary, #f8f9fb));
  --as-bg3: var(--yp-bg-tertiary, var(--yca-bg-tertiary, #f1f3f4));
  --as-text: var(--yp-text-primary, var(--yca-text-primary, #202124));
  --as-text2: var(--yp-text-secondary, var(--yca-text-secondary, #5f6368));
  --as-text3: var(--yp-text-muted, var(--yca-text-muted, #9aa0a6));
  --as-border: var(--yp-border-light, var(--yca-border-light, #e8eaed));
  --as-border2: var(--yp-border-default, var(--yca-border-default, #dadce0));
  --as-shadow-lg: var(--yp-shadow-lg, 0 10px 20px rgba(60,64,67,0.1), 0 4px 8px rgba(60,64,67,0.06));
  --as-shadow-xl: var(--yp-shadow-xl, 0 20px 40px rgba(60,64,67,0.12), 0 8px 16px rgba(60,64,67,0.08));
  --as-radius: var(--yp-radius-md, 10px);
  --as-radius-lg: var(--yp-radius-lg, 16px);
  --as-font: var(--yp-font-family, 'DM Sans', 'Segoe UI', -apple-system, sans-serif);
  --as-fast: var(--yp-transition-fast, 0.15s cubic-bezier(0.4,0,0.2,1));
  --as-base: var(--yp-transition-base, 0.25s cubic-bezier(0.4,0,0.2,1));
  --as-panel-w: 320px;
}

/* ---------- Hide source view ---------- */
.view-app-info { display: none !important; }

/* ---------- Overlay ---------- */
.as-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.22);
  z-index: 9989;
  opacity: 0; visibility: hidden;
  transition: opacity var(--as-base), visibility var(--as-base);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.as-overlay.as-open { opacity: 1; visibility: visible; }

/* ---------- FAB ---------- */
.as-fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--as-text);
  color: #fff;
  border: none; cursor: pointer;
  z-index: 9991;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--as-shadow-lg);
  transition: transform var(--as-fast), box-shadow var(--as-fast), background var(--as-fast), border-radius var(--as-fast);
  padding: 0;
}
.as-fab:hover {
  transform: translateY(-2px);
  box-shadow: var(--as-shadow-xl);
  background: var(--as-primary);
}
.as-fab:active { transform: scale(0.95); }
.as-fab-icon {
  font-size: 18px;
  transition: transform var(--as-fast);
}
.as-fab.as-open { border-radius: 50%; background: var(--as-text2); }
.as-fab.as-open .as-fab-icon { transform: rotate(45deg); }

/* ---------- Panel ---------- */
.as-panel {
  position: fixed;
  bottom: calc(24px + 48px + 12px);
  right: 24px;
  width: var(--as-panel-w);
  max-height: calc(100vh - 140px);
  background: var(--as-bg);
  border-radius: var(--as-radius-lg);
  box-shadow: var(--as-shadow-xl);
  z-index: 9990;
  overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(12px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity var(--as-base), visibility var(--as-base), transform var(--as-base);
  border: 1px solid var(--as-border);
  font-family: var(--as-font);
}
.as-panel.as-open {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}

/* ---------- Panel Header ---------- */
.as-panel-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--as-border);
  background: var(--as-bg2);
  flex-shrink: 0;
}
.as-header-logo {
  width: 34px; height: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--as-border);
  flex-shrink: 0;
}
.as-header-logo-fallback {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--as-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.as-header-info { flex: 1; min-width: 0; }
.as-header-brand {
  font-size: 14px; font-weight: 700;
  color: var(--as-text);
  text-decoration: none;
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.as-header-brand:hover { color: var(--as-primary); }
.as-header-workspace {
  font-size: 11px; color: var(--as-text3);
  line-height: 1.3; margin-top: 1px;
  display: flex; align-items: center; gap: 4px;
}
.as-header-workspace a {
  color: var(--as-text2); text-decoration: none;
}
.as-header-workspace a:hover { color: var(--as-primary); text-decoration: underline; }
.as-header-count {
  font-size: 11px; font-weight: 600;
  color: var(--as-text3);
  background: var(--as-bg3);
  padding: 2px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

/* ---------- Search ---------- */
.as-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--as-border);
  position: relative;
  flex-shrink: 0;
}
.as-search-icon {
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--as-text3);
  pointer-events: none;
}
.as-search-input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  font-size: 13px;
  font-family: var(--as-font);
  background: var(--as-bg);
  color: var(--as-text);
  outline: none;
  transition: border-color var(--as-fast), box-shadow var(--as-fast);
}
.as-search-input:focus {
  border-color: var(--as-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}
.as-search-input::placeholder { color: var(--as-text3); }

/* ---------- App List ---------- */
.as-app-list {
  flex: 1; overflow-y: auto;
  padding: 4px 0;
  overscroll-behavior: contain;
}
.as-app-list::-webkit-scrollbar { width: 4px; }
.as-app-list::-webkit-scrollbar-thumb { background: var(--as-border2); border-radius: 4px; }

.as-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--as-text3);
  font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}

/* ---------- App Row ---------- */
.as-app-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--as-fast);
  color: var(--as-text);
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.as-app-row:hover { background: var(--as-bg3); }
.as-app-row.as-app-active { background: var(--as-primary-light); }
.as-app-row.as-app-active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--as-primary);
}

.as-app-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  flex-shrink: 0;
  transition: transform var(--as-fast);
}
.as-app-row:hover .as-app-icon { transform: scale(1.06); }

.as-app-info { flex: 1; min-width: 0; }
.as-app-name {
  font-size: 13px; font-weight: 600;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.as-app-active .as-app-name { color: var(--as-primary); }

.as-badge-current {
  font-size: 10px; font-weight: 700;
  color: var(--as-primary);
  background: var(--as-primary-light);
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Info button */
.as-info-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  color: var(--as-text3);
  border: none; background: none;
  cursor: pointer;
  border-radius: 99px;
  padding: 0; flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--as-fast), background var(--as-fast), color var(--as-fast);
  font-size: 14px;
}
.as-app-row:hover .as-info-btn { opacity: 1; }
.as-info-btn:hover { background: var(--as-border); color: var(--as-text2); }

/* ---------- Tooltip ---------- */
.as-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  width: 220px;
  background: var(--as-text);
  color: #fff;
  padding: 10px 12px;
  border-radius: var(--as-radius);
  font-size: 12px; line-height: 1.5;
  box-shadow: var(--as-shadow-lg);
  z-index: 2;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity var(--as-fast), visibility var(--as-fast);
}
.as-tooltip.as-tooltip-visible { opacity: 1; visibility: visible; }
.as-tooltip::after {
  content: '';
  position: absolute; right: -5px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right: none;
  border-left-color: var(--as-text);
}
.as-tooltip-title { font-weight: 700; margin-bottom: 3px; font-size: 13px; }

/* ---------- Footer ---------- */
.as-panel-footer {
  border-top: 1px solid var(--as-border);
  background: var(--as-bg2);
  flex-shrink: 0;
  padding: 10px 16px;
}
.as-footer-row {
  display: flex; align-items: center; gap: 10px;
}
.as-footer-avatar {
  width: 30px; height: 30px;
  border-radius: 99px;
  background: var(--as-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.as-footer-user-detail { flex: 1; min-width: 0; }
.as-footer-name {
  font-size: 13px; font-weight: 600;
  color: var(--as-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.as-footer-role {
  font-size: 11px; color: var(--as-text3);
  line-height: 1.3;
}
.as-footer-llm {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border-radius: var(--as-radius);
  background: var(--as-bg3);
  color: var(--as-text2);
  text-decoration: none;
  font-size: 14px;
  flex-shrink: 0;
  transition: background var(--as-fast), color var(--as-fast);
}
.as-footer-llm:hover { background: var(--as-border); color: var(--as-primary); text-decoration: none; }
.as-footer-pill {
  font-size: 10px; font-weight: 700;
  background: var(--as-primary-light);
  color: var(--as-primary);
  padding: 1px 5px;
  border-radius: 99px;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  :root { --as-panel-w: calc(100vw - 32px); }
  .as-fab { bottom: 16px; right: 16px; }
  .as-panel {
    right: 16px;
    bottom: calc(16px + 48px + 10px);
    max-height: calc(100vh - 120px);
  }
  .as-info-btn { opacity: 1; }
  .as-tooltip { display: none !important; }
}

























/* ============================================================
   GO ULTRA AI — Base Design System CSS
   Platform: Drupal 11 + Bootstrap 5
   Version: 1.0.0
   
   Inspired by Google (clean, spacious, functional)
   and Instagram (warm, personal, gradient energy)
   
   USAGE:
   - Load AFTER Bootstrap CSS in your Drupal theme
   - All variables are in :root for easy customization
   - Components use .gua- prefix to avoid conflicts
   - Bootstrap overrides are clearly marked
   ============================================================ */


/* ============================================================
   01. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */

:root {
  /* ---- Color: Brand ---- */
  --gua-primary:          #1a73e8;
  --gua-primary-hover:    #1557b0;
  --gua-primary-light:    #e8f0fe;
  --gua-primary-subtle:   #f0f6ff;
  
  --gua-secondary:        #5f6368;
  --gua-secondary-hover:  #3c4043;
  
  /* ---- Color: Accent Gradient (Instagram-inspired warmth) ---- */
  --gua-accent-start:     #f77062;
  --gua-accent-mid:       #fe5196;
  --gua-accent-end:       #bc4cf4;
  --gua-gradient:         linear-gradient(135deg, var(--gua-accent-start), var(--gua-accent-mid), var(--gua-accent-end));
  --gua-gradient-hover:   linear-gradient(135deg, #e5614f, #eb4586, #a840de);
  --gua-gradient-subtle:  linear-gradient(135deg, rgba(247,112,98,0.08), rgba(254,81,150,0.08), rgba(188,76,244,0.08));
  
  /* ---- Color: Semantic ---- */
  --gua-success:          #0d904f;
  --gua-success-light:    #e6f4ea;
  --gua-warning:          #e37400;
  --gua-warning-light:    #fef7e0;
  --gua-error:            #d93025;
  --gua-error-light:      #fce8e6;
  --gua-info:             #1a73e8;
  --gua-info-light:       #e8f0fe;
  
  /* ---- Color: Neutrals ---- */
  --gua-white:            #ffffff;
  --gua-gray-50:          #f8f9fa;
  --gua-gray-100:         #f1f3f4;
  --gua-gray-200:         #e8eaed;
  --gua-gray-300:         #dadce0;
  --gua-gray-400:         #bdc1c6;
  --gua-gray-500:         #9aa0a6;
  --gua-gray-600:         #80868b;
  --gua-gray-700:         #5f6368;
  --gua-gray-800:         #3c4043;
  --gua-gray-900:         #202124;
  --gua-black:            #1a1a1a;
  
  /* ---- Color: Surfaces ---- */
  --gua-surface:          var(--gua-white);
  --gua-surface-raised:   var(--gua-white);
  --gua-surface-overlay:  var(--gua-white);
  --gua-surface-muted:    var(--gua-gray-50);
  --gua-body-bg:          #f8f9fb;
  
  /* ---- Typography ---- */
  --gua-font-display:     'Plus Jakarta Sans', 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --gua-font-body:        'DM Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --gua-font-mono:        'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Type Scale (Major Third — 1.250) */
  --gua-text-xs:          0.75rem;     /* 12px */
  --gua-text-sm:          0.875rem;    /* 14px */
  --gua-text-base:        1rem;        /* 16px */
  --gua-text-md:          1.125rem;    /* 18px */
  --gua-text-lg:          1.25rem;     /* 20px */
  --gua-text-xl:          1.5rem;      /* 24px */
  --gua-text-2xl:         1.875rem;    /* 30px */
  --gua-text-3xl:         2.25rem;     /* 36px */
  --gua-text-4xl:         3rem;        /* 48px */
  --gua-text-5xl:         3.75rem;     /* 60px */
  
  /* Line Heights */
  --gua-leading-tight:    1.2;
  --gua-leading-snug:     1.35;
  --gua-leading-normal:   1.6;
  --gua-leading-relaxed:  1.75;
  
  /* Font Weights */
  --gua-weight-normal:    400;
  --gua-weight-medium:    500;
  --gua-weight-semibold:  600;
  --gua-weight-bold:      700;
  --gua-weight-extrabold: 800;
  
  /* Letter Spacing */
  --gua-tracking-tight:   -0.025em;
  --gua-tracking-normal:  0;
  --gua-tracking-wide:    0.025em;
  --gua-tracking-wider:   0.05em;
  --gua-tracking-caps:    0.1em;
  
  /* ---- Spacing Scale ---- */
  --gua-space-1:          0.25rem;   /* 4px */
  --gua-space-2:          0.5rem;    /* 8px */
  --gua-space-3:          0.75rem;   /* 12px */
  --gua-space-4:          1rem;      /* 16px */
  --gua-space-5:          1.25rem;   /* 20px */
  --gua-space-6:          1.5rem;    /* 24px */
  --gua-space-8:          2rem;      /* 32px */
  --gua-space-10:         2.5rem;    /* 40px */
  --gua-space-12:         3rem;      /* 48px */
  --gua-space-16:         4rem;      /* 64px */
  --gua-space-20:         5rem;      /* 80px */
  --gua-space-24:         6rem;      /* 96px */
  
  /* ---- Borders & Radius ---- */
  --gua-radius-sm:        6px;
  --gua-radius-md:        10px;
  --gua-radius-lg:        16px;
  --gua-radius-xl:        24px;
  --gua-radius-2xl:       32px;
  --gua-radius-full:      9999px;
  
  --gua-border-color:     var(--gua-gray-200);
  --gua-border-light:     var(--gua-gray-100);
  
  /* ---- Shadows (Google-inspired elevation) ---- */
  --gua-shadow-xs:        0 1px 2px rgba(60, 64, 67, 0.08);
  --gua-shadow-sm:        0 1px 3px rgba(60, 64, 67, 0.12), 0 1px 2px rgba(60, 64, 67, 0.06);
  --gua-shadow-md:        0 4px 6px rgba(60, 64, 67, 0.1), 0 2px 4px rgba(60, 64, 67, 0.06);
  --gua-shadow-lg:        0 10px 20px rgba(60, 64, 67, 0.1), 0 4px 8px rgba(60, 64, 67, 0.06);
  --gua-shadow-xl:        0 20px 40px rgba(60, 64, 67, 0.12), 0 8px 16px rgba(60, 64, 67, 0.08);
  --gua-shadow-glow:      0 0 0 4px rgba(26, 115, 232, 0.15);
  --gua-shadow-gradient:  0 8px 24px rgba(247, 112, 98, 0.2);
  
  /* ---- Transitions ---- */
  --gua-ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --gua-ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --gua-duration-fast:    150ms;
  --gua-duration-base:    250ms;
  --gua-duration-slow:    400ms;
  
  /* ---- Layout ---- */
  --gua-container-max:    1240px;
  --gua-content-max:      780px;
  --gua-sidebar-width:    280px;
  --gua-nav-height:       64px;
  
  /* ---- Z-index Scale ---- */
  --gua-z-dropdown:       100;
  --gua-z-sticky:         200;
  --gua-z-fixed:          300;
  --gua-z-modal-bg:       400;
  --gua-z-modal:          500;
  --gua-z-toast:          600;
  --gua-z-tooltip:        700;
}


/* ============================================================
   02. GLOBAL RESETS & BASE STYLES
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--gua-font-body);
  font-size: var(--gua-text-base);
  font-weight: var(--gua-weight-normal);
  line-height: var(--gua-leading-normal);
  color: var(--gua-gray-900);
  background-color: var(--gua-body-bg);
  letter-spacing: var(--gua-tracking-normal);
}

/* Focus Visible — Accessible focus ring */
:focus-visible {
  outline: 2px solid var(--gua-primary);
  outline-offset: 2px;
  border-radius: var(--gua-radius-sm);
}

::selection {
  background-color: var(--gua-primary-light);
  color: var(--gua-primary-hover);
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ============================================================
   03. TYPOGRAPHY
   ============================================================ */

/* --- Headings --- */
h1, h2, h3, h4, h5, h6,
.gua-h1, .gua-h2, .gua-h3, .gua-h4, .gua-h5, .gua-h6 {
  font-family: var(--gua-font-display);
  font-weight: var(--gua-weight-bold);
  line-height: var(--gua-leading-tight);
  letter-spacing: var(--gua-tracking-tight);
  color: var(--gua-gray-900);
  margin-top: 0;
  margin-bottom: var(--gua-space-4);
}

h1, .gua-h1 {
  font-size: var(--gua-text-4xl);
  font-weight: var(--gua-weight-extrabold);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h2, .gua-h2 {
  font-size: var(--gua-text-3xl);
  font-weight: var(--gua-weight-bold);
}

h3, .gua-h3 {
  font-size: var(--gua-text-2xl);
  font-weight: var(--gua-weight-semibold);
}

h4, .gua-h4 {
  font-size: var(--gua-text-xl);
  font-weight: var(--gua-weight-semibold);
}

h5, .gua-h5 {
  font-size: var(--gua-text-lg);
  font-weight: var(--gua-weight-medium);
}

h6, .gua-h6 {
  font-size: var(--gua-text-md);
  font-weight: var(--gua-weight-medium);
  color: var(--gua-gray-700);
}

/* --- Display Text (Hero / Landing) --- */
.gua-display-xl {
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-5xl);
  font-weight: var(--gua-weight-extrabold);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.gua-display-lg {
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-4xl);
  font-weight: var(--gua-weight-extrabold);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* --- Body Text --- */
.gua-text-lg    { font-size: var(--gua-text-lg); }
.gua-text-md    { font-size: var(--gua-text-md); }
.gua-text-base  { font-size: var(--gua-text-base); }
.gua-text-sm    { font-size: var(--gua-text-sm); }
.gua-text-xs    { font-size: var(--gua-text-xs); }

.gua-lead {
  font-size: var(--gua-text-lg);
  line-height: var(--gua-leading-relaxed);
  color: var(--gua-gray-700);
  font-weight: var(--gua-weight-normal);
}

.gua-subtitle {
  font-size: var(--gua-text-md);
  color: var(--gua-gray-600);
  line-height: var(--gua-leading-normal);
}

.gua-caption {
  font-size: var(--gua-text-xs);
  color: var(--gua-gray-500);
  letter-spacing: var(--gua-tracking-wide);
  text-transform: uppercase;
  font-weight: var(--gua-weight-semibold);
}

/* Paragraph spacing */
p {
  margin-top: 0;
  margin-bottom: var(--gua-space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* --- Gradient Text Utility --- */
.gua-text-gradient {
  background: var(--gua-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Text Colors --- */
.gua-text-primary  { color: var(--gua-primary); }
.gua-text-muted    { color: var(--gua-gray-600); }
.gua-text-light    { color: var(--gua-gray-500); }
.gua-text-dark     { color: var(--gua-gray-900); }
.gua-text-white    { color: var(--gua-white); }

/* --- Links --- */
a {
  color: var(--gua-primary);
  text-decoration: none;
  transition: color var(--gua-duration-fast) var(--gua-ease);
}

a:hover {
  color: var(--gua-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* --- Code / Pre --- */
code, .gua-code {
  font-family: var(--gua-font-mono);
  font-size: 0.875em;
  background: var(--gua-gray-100);
  color: var(--gua-error);
  padding: 2px 6px;
  border-radius: var(--gua-radius-sm);
}

pre {
  font-family: var(--gua-font-mono);
  font-size: var(--gua-text-sm);
  background: var(--gua-gray-900);
  color: var(--gua-gray-100);
  padding: var(--gua-space-6);
  border-radius: var(--gua-radius-md);
  overflow-x: auto;
  line-height: 1.6;
}

pre code {
  background: none;
  color: inherit;
  padding: 0;
}

/* --- Lists --- */
.gua-list {
  padding-left: var(--gua-space-6);
  margin-bottom: var(--gua-space-4);
}

.gua-list li {
  margin-bottom: var(--gua-space-2);
  line-height: var(--gua-leading-normal);
}

.gua-list-check {
  list-style: none;
  padding-left: 0;
}

.gua-list-check li {
  position: relative;
  padding-left: var(--gua-space-8);
}

.gua-list-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gua-success);
  font-weight: var(--gua-weight-bold);
  width: 24px;
  height: 24px;
  background: var(--gua-success-light);
  border-radius: var(--gua-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gua-text-xs);
  top: 2px;
}

/* --- Horizontal Rule --- */
hr, .gua-divider {
  border: none;
  height: 1px;
  background: var(--gua-gray-200);
  margin: var(--gua-space-8) 0;
}


/* ============================================================
   04. LAYOUT & CONTAINER
   ============================================================ */

.gua-container {
  width: 100%;
  max-width: var(--gua-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gua-space-6);
  padding-right: var(--gua-space-6);
}

.gua-container-narrow {
  max-width: var(--gua-content-max);
}

/* Section Spacing */
.gua-section {
  padding-top: var(--gua-space-20);
  padding-bottom: var(--gua-space-20);
}

.gua-section-sm {
  padding-top: var(--gua-space-12);
  padding-bottom: var(--gua-space-12);
}

.gua-section-lg {
  padding-top: var(--gua-space-24);
  padding-bottom: var(--gua-space-24);
}

/* Section header pattern */
.gua-section-header {
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--gua-space-12);
}

.gua-section-header .gua-caption {
  margin-bottom: var(--gua-space-3);
  display: block;
}

.gua-section-header h2 {
  margin-bottom: var(--gua-space-4);
}

.gua-section-header p {
  color: var(--gua-gray-600);
  font-size: var(--gua-text-md);
}

/* Background Variants */
.gua-bg-white   { background-color: var(--gua-white); }
.gua-bg-muted   { background-color: var(--gua-surface-muted); }
.gua-bg-primary  { background-color: var(--gua-primary); color: var(--gua-white); }
.gua-bg-dark     { background-color: var(--gua-gray-900); color: var(--gua-white); }

.gua-bg-gradient-subtle {
  background: var(--gua-gradient-subtle);
}


/* ============================================================
   05. BUTTONS
   ============================================================ */

/* Base Button */
.gua-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gua-space-2);
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-sm);
  font-weight: var(--gua-weight-semibold);
  line-height: 1;
  padding: 12px 24px;
  border: 1.5px solid transparent;
  border-radius: var(--gua-radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--gua-duration-base) var(--gua-ease);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.gua-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.gua-btn:active {
  transform: translateY(0);
}

.gua-btn:disabled,
.gua-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* Button icon */
.gua-btn svg,
.gua-btn .gua-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* --- Primary Button --- */
.gua-btn-primary {
  background-color: var(--gua-primary);
  color: var(--gua-white);
  border-color: var(--gua-primary);
}

.gua-btn-primary:hover {
  background-color: var(--gua-primary-hover);
  border-color: var(--gua-primary-hover);
  color: var(--gua-white);
  box-shadow: var(--gua-shadow-md);
}

/* --- Gradient Button (CTA / Premium) --- */
.gua-btn-gradient {
  background: var(--gua-gradient);
  color: var(--gua-white);
  border-color: transparent;
}

.gua-btn-gradient:hover {
  background: var(--gua-gradient-hover);
  color: var(--gua-white);
  box-shadow: var(--gua-shadow-gradient);
}

/* --- Secondary / Outline Button --- */
.gua-btn-secondary {
  background-color: transparent;
  color: var(--gua-primary);
  border-color: var(--gua-gray-300);
}

.gua-btn-secondary:hover {
  background-color: var(--gua-primary-light);
  border-color: var(--gua-primary);
  color: var(--gua-primary);
}

/* --- Ghost Button --- */
.gua-btn-ghost {
  background-color: transparent;
  color: var(--gua-gray-700);
  border-color: transparent;
}

.gua-btn-ghost:hover {
  background-color: var(--gua-gray-100);
  color: var(--gua-gray-900);
}

/* --- White Button (for dark backgrounds) --- */
.gua-btn-white {
  background-color: var(--gua-white);
  color: var(--gua-gray-900);
  border-color: var(--gua-white);
}

.gua-btn-white:hover {
  background-color: var(--gua-gray-50);
  color: var(--gua-gray-900);
  box-shadow: var(--gua-shadow-lg);
}

/* --- Danger Button --- */
.gua-btn-danger {
  background-color: var(--gua-error);
  color: var(--gua-white);
  border-color: var(--gua-error);
}

.gua-btn-danger:hover {
  background-color: #c12a1f;
  box-shadow: var(--gua-shadow-md);
  color: var(--gua-white);
}

/* --- Button Sizes --- */
.gua-btn-sm {
  font-size: var(--gua-text-xs);
  padding: 8px 16px;
}

.gua-btn-lg {
  font-size: var(--gua-text-base);
  padding: 16px 32px;
}

.gua-btn-xl {
  font-size: var(--gua-text-md);
  padding: 18px 40px;
}

/* Icon-only button */
.gua-btn-icon-only {
  padding: 10px;
  border-radius: var(--gua-radius-full);
}

.gua-btn-icon-only.gua-btn-sm { padding: 6px; }
.gua-btn-icon-only.gua-btn-lg { padding: 14px; }

/* --- Button Group --- */
.gua-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gua-space-3);
  align-items: center;
}


/* ============================================================
   06. FORM ELEMENTS
   ============================================================ */

/* --- Form Group --- */
.gua-form-group {
  margin-bottom: var(--gua-space-6);
}

/* --- Label --- */
.gua-label {
  display: block;
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-sm);
  font-weight: var(--gua-weight-medium);
  color: var(--gua-gray-800);
  margin-bottom: var(--gua-space-2);
}

.gua-label-required::after {
  content: ' *';
  color: var(--gua-error);
}

/* --- Helper Text --- */
.gua-form-help {
  font-size: var(--gua-text-xs);
  color: var(--gua-gray-500);
  margin-top: var(--gua-space-1);
}

.gua-form-error {
  font-size: var(--gua-text-xs);
  color: var(--gua-error);
  margin-top: var(--gua-space-1);
}

/* --- Text Input / Textarea / Select --- */
.gua-input,
.gua-textarea,
.gua-select {
  display: block;
  width: 100%;
  font-family: var(--gua-font-body);
  font-size: var(--gua-text-base);
  font-weight: var(--gua-weight-normal);
  color: var(--gua-gray-900);
  background-color: var(--gua-white);
  border: 1.5px solid var(--gua-gray-300);
  border-radius: var(--gua-radius-md);
  padding: 12px 16px;
  transition: all var(--gua-duration-fast) var(--gua-ease);
  appearance: none;
}

.gua-input::placeholder,
.gua-textarea::placeholder {
  color: var(--gua-gray-400);
}

.gua-input:hover,
.gua-textarea:hover,
.gua-select:hover {
  border-color: var(--gua-gray-400);
}

.gua-input:focus,
.gua-textarea:focus,
.gua-select:focus {
  outline: none;
  border-color: var(--gua-primary);
  box-shadow: var(--gua-shadow-glow);
}

/* Error state */
.gua-input-error {
  border-color: var(--gua-error);
}

.gua-input-error:focus {
  box-shadow: 0 0 0 4px rgba(217, 48, 37, 0.15);
}

/* Success state */
.gua-input-success {
  border-color: var(--gua-success);
}

/* Disabled state */
.gua-input:disabled,
.gua-textarea:disabled,
.gua-select:disabled {
  background-color: var(--gua-gray-100);
  color: var(--gua-gray-500);
  cursor: not-allowed;
}

/* Input sizes */
.gua-input-sm {
  font-size: var(--gua-text-sm);
  padding: 8px 12px;
  border-radius: var(--gua-radius-sm);
}

.gua-input-lg {
  font-size: var(--gua-text-md);
  padding: 16px 20px;
  border-radius: var(--gua-radius-lg);
}

/* Textarea */
.gua-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--gua-leading-normal);
}

/* Select arrow */
.gua-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235f6368' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* --- Search Input --- */
.gua-search-wrap {
  position: relative;
}

.gua-search-wrap .gua-input {
  padding-left: 44px;
  border-radius: var(--gua-radius-full);
  background-color: var(--gua-gray-100);
  border-color: transparent;
}

.gua-search-wrap .gua-input:focus {
  background-color: var(--gua-white);
  border-color: var(--gua-primary);
}

.gua-search-wrap .gua-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--gua-gray-500);
  pointer-events: none;
}

/* --- Input with Icon/Addon --- */
.gua-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.gua-input-group .gua-input {
  flex: 1;
}

.gua-input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--gua-space-4);
  background: var(--gua-gray-100);
  border: 1.5px solid var(--gua-gray-300);
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-600);
  white-space: nowrap;
}

.gua-input-addon:first-child {
  border-right: none;
  border-radius: var(--gua-radius-md) 0 0 var(--gua-radius-md);
}

.gua-input-addon:last-child {
  border-left: none;
  border-radius: 0 var(--gua-radius-md) var(--gua-radius-md) 0;
}

.gua-input-addon + .gua-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.gua-input:has(+ .gua-input-addon) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* --- Checkbox & Radio --- */
.gua-check {
  display: flex;
  align-items: flex-start;
  gap: var(--gua-space-3);
  cursor: pointer;
  margin-bottom: var(--gua-space-3);
}

.gua-check input[type="checkbox"],
.gua-check input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--gua-gray-400);
  background-color: var(--gua-white);
  transition: all var(--gua-duration-fast) var(--gua-ease);
  cursor: pointer;
  margin: 0;
  position: relative;
  top: 1px;
}

.gua-check input[type="checkbox"] {
  border-radius: 4px;
}

.gua-check input[type="radio"] {
  border-radius: 50%;
}

.gua-check input:checked {
  background-color: var(--gua-primary);
  border-color: var(--gua-primary);
}

.gua-check input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5l-3-3 1-1 2 2 5-5 1 1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.gua-check input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='3' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.gua-check input:focus-visible {
  box-shadow: var(--gua-shadow-glow);
  outline: none;
}

.gua-check-label {
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-800);
  line-height: 1.4;
}

/* --- Toggle Switch --- */
.gua-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gua-space-3);
  cursor: pointer;
}

.gua-toggle input {
  appearance: none;
  width: 44px;
  height: 24px;
  background-color: var(--gua-gray-400);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background-color var(--gua-duration-base) var(--gua-ease);
}

.gua-toggle input::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--gua-white);
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: transform var(--gua-duration-base) var(--gua-ease-bounce);
  box-shadow: var(--gua-shadow-xs);
}

.gua-toggle input:checked {
  background-color: var(--gua-primary);
}

.gua-toggle input:checked::after {
  transform: translateX(20px);
}

/* --- File Upload Area --- */
.gua-file-upload {
  border: 2px dashed var(--gua-gray-300);
  border-radius: var(--gua-radius-lg);
  padding: var(--gua-space-10);
  text-align: center;
  cursor: pointer;
  transition: all var(--gua-duration-base) var(--gua-ease);
  background-color: var(--gua-gray-50);
}

.gua-file-upload:hover {
  border-color: var(--gua-primary);
  background-color: var(--gua-primary-subtle);
}

.gua-file-upload.active {
  border-color: var(--gua-primary);
  background-color: var(--gua-primary-light);
}


/* ============================================================
   07. CARDS
   ============================================================ */

/* Base Card */
.gua-card {
  background: var(--gua-surface);
  border: 1px solid var(--gua-border-color);
  border-radius: var(--gua-radius-lg);
  overflow: hidden;
  transition: all var(--gua-duration-base) var(--gua-ease);
}

.gua-card:hover {
  box-shadow: var(--gua-shadow-lg);
  border-color: var(--gua-gray-300);
}

.gua-card-body {
  padding: var(--gua-space-6);
}

.gua-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- Course Card --- */
.gua-card-course {
  position: relative;
}

.gua-card-course:hover {
  transform: translateY(-4px);
}

.gua-card-course .gua-card-body {
  padding: var(--gua-space-6);
}

.gua-card-course .gua-card-meta {
  display: flex;
  align-items: center;
  gap: var(--gua-space-2);
  font-size: var(--gua-text-xs);
  color: var(--gua-gray-500);
  margin-bottom: var(--gua-space-3);
}

.gua-card-course h3 {
  font-size: var(--gua-text-lg);
  margin-bottom: var(--gua-space-2);
}

.gua-card-course p {
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-600);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gua-card-course .gua-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gua-space-4) var(--gua-space-6);
  border-top: 1px solid var(--gua-border-light);
}

/* --- Feature / Info Card --- */
.gua-card-feature {
  padding: var(--gua-space-8);
  text-align: center;
  border: 1px solid var(--gua-border-color);
}

.gua-card-feature:hover {
  transform: translateY(-2px);
}

.gua-card-feature .gua-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--gua-radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--gua-space-5);
  background: var(--gua-primary-light);
  color: var(--gua-primary);
}

.gua-card-feature .gua-card-icon.gradient {
  background: var(--gua-gradient-subtle);
}

.gua-card-feature h4 {
  font-size: var(--gua-text-lg);
  margin-bottom: var(--gua-space-3);
}

.gua-card-feature p {
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-600);
}

/* --- Tool Card --- */
.gua-card-tool {
  display: flex;
  align-items: center;
  gap: var(--gua-space-5);
  padding: var(--gua-space-5);
  border: 1px solid var(--gua-border-color);
}

.gua-card-tool:hover {
  border-color: var(--gua-primary);
  background: var(--gua-primary-subtle);
}

.gua-card-tool .gua-card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--gua-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gua-gray-100);
}

.gua-card-tool h5 {
  font-size: var(--gua-text-base);
  margin-bottom: 2px;
}

.gua-card-tool p {
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-500);
  margin: 0;
}

/* --- Pricing Card --- */
.gua-card-pricing {
  text-align: center;
  padding: var(--gua-space-10) var(--gua-space-8);
  position: relative;
}

.gua-card-pricing.featured {
  border: 2px solid var(--gua-primary);
  box-shadow: var(--gua-shadow-lg);
}

.gua-card-pricing.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--gua-gradient);
  color: var(--gua-white);
  font-size: var(--gua-text-xs);
  font-weight: var(--gua-weight-semibold);
  padding: 4px 16px;
  border-radius: var(--gua-radius-full);
}

.gua-pricing-amount {
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-4xl);
  font-weight: var(--gua-weight-extrabold);
  color: var(--gua-gray-900);
  margin: var(--gua-space-4) 0;
}

.gua-pricing-amount span {
  font-size: var(--gua-text-base);
  font-weight: var(--gua-weight-normal);
  color: var(--gua-gray-500);
}

/* --- Elevated Card (No border, shadow-only) --- */
.gua-card-elevated {
  border: none;
  box-shadow: var(--gua-shadow-sm);
}

.gua-card-elevated:hover {
  box-shadow: var(--gua-shadow-xl);
}


/* ============================================================
   08. BADGES & TAGS
   ============================================================ */

.gua-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gua-space-1);
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-xs);
  font-weight: var(--gua-weight-semibold);
  padding: 4px 10px;
  border-radius: var(--gua-radius-full);
  line-height: 1.4;
  white-space: nowrap;
}

.gua-badge-primary {
  background: var(--gua-primary-light);
  color: var(--gua-primary);
}

.gua-badge-gradient {
  background: var(--gua-gradient);
  color: var(--gua-white);
}

.gua-badge-success {
  background: var(--gua-success-light);
  color: var(--gua-success);
}

.gua-badge-warning {
  background: var(--gua-warning-light);
  color: var(--gua-warning);
}

.gua-badge-error {
  background: var(--gua-error-light);
  color: var(--gua-error);
}

.gua-badge-neutral {
  background: var(--gua-gray-100);
  color: var(--gua-gray-700);
}

/* Tag (removable) */
.gua-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gua-space-2);
  font-size: var(--gua-text-sm);
  padding: 6px 12px;
  background: var(--gua-gray-100);
  border-radius: var(--gua-radius-full);
  color: var(--gua-gray-700);
  border: 1px solid var(--gua-gray-200);
}

.gua-tag-close {
  width: 14px;
  height: 14px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--gua-duration-fast);
}

.gua-tag-close:hover { opacity: 1; }


/* ============================================================
   09. ALERTS & NOTIFICATIONS
   ============================================================ */

.gua-alert {
  display: flex;
  gap: var(--gua-space-3);
  padding: var(--gua-space-4) var(--gua-space-5);
  border-radius: var(--gua-radius-md);
  font-size: var(--gua-text-sm);
  line-height: var(--gua-leading-normal);
  border-left: 4px solid;
}

.gua-alert-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 1px;
}

.gua-alert-info {
  background: var(--gua-info-light);
  border-left-color: var(--gua-info);
  color: var(--gua-gray-800);
}

.gua-alert-success {
  background: var(--gua-success-light);
  border-left-color: var(--gua-success);
  color: var(--gua-gray-800);
}

.gua-alert-warning {
  background: var(--gua-warning-light);
  border-left-color: var(--gua-warning);
  color: var(--gua-gray-800);
}

.gua-alert-error {
  background: var(--gua-error-light);
  border-left-color: var(--gua-error);
  color: var(--gua-gray-800);
}

/* Toast notification */
.gua-toast {
  position: fixed;
  bottom: var(--gua-space-6);
  right: var(--gua-space-6);
  min-width: 320px;
  max-width: 420px;
  padding: var(--gua-space-4) var(--gua-space-5);
  background: var(--gua-gray-900);
  color: var(--gua-white);
  border-radius: var(--gua-radius-md);
  box-shadow: var(--gua-shadow-xl);
  z-index: var(--gua-z-toast);
  font-size: var(--gua-text-sm);
  display: flex;
  align-items: center;
  gap: var(--gua-space-3);
  animation: gua-slideUp var(--gua-duration-slow) var(--gua-ease-bounce);
}

@keyframes gua-slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   10. NAVIGATION OVERRIDES (Bootstrap Navbar)
   ============================================================ */

.gua-navbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--gua-border-light);
  height: var(--gua-nav-height);
  z-index: var(--gua-z-sticky);
}

.gua-navbar .navbar-brand {
  font-family: var(--gua-font-display);
  font-weight: var(--gua-weight-extrabold);
  font-size: var(--gua-text-xl);
  color: var(--gua-gray-900);
  letter-spacing: var(--gua-tracking-tight);
}

.gua-navbar .nav-link {
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-sm);
  font-weight: var(--gua-weight-medium);
  color: var(--gua-gray-700);
  padding: var(--gua-space-2) var(--gua-space-4);
  border-radius: var(--gua-radius-full);
  transition: all var(--gua-duration-fast) var(--gua-ease);
}

.gua-navbar .nav-link:hover {
  color: var(--gua-gray-900);
  background: var(--gua-gray-100);
}

.gua-navbar .nav-link.active {
  color: var(--gua-primary);
  background: var(--gua-primary-light);
}


/* ============================================================
   11. BREADCRUMB
   ============================================================ */

.gua-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gua-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--gua-text-sm);
}

.gua-breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--gua-space-1);
  color: var(--gua-gray-500);
}

.gua-breadcrumb li::after {
  content: '›';
  color: var(--gua-gray-400);
  margin-left: var(--gua-space-1);
}

.gua-breadcrumb li:last-child::after {
  display: none;
}

.gua-breadcrumb li:last-child {
  color: var(--gua-gray-800);
  font-weight: var(--gua-weight-medium);
}

.gua-breadcrumb a {
  color: var(--gua-gray-500);
}

.gua-breadcrumb a:hover {
  color: var(--gua-primary);
  text-decoration: none;
}


/* ============================================================
   12. TABS (Bootstrap Override)
   ============================================================ */

.gua-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--gua-gray-200);
  overflow-x: auto;
  scrollbar-width: none;
}

.gua-tabs::-webkit-scrollbar { display: none; }

.gua-tab {
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-sm);
  font-weight: var(--gua-weight-medium);
  color: var(--gua-gray-600);
  padding: var(--gua-space-3) var(--gua-space-5);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color var(--gua-duration-fast) var(--gua-ease);
}

.gua-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  transition: background var(--gua-duration-fast) var(--gua-ease);
}

.gua-tab:hover {
  color: var(--gua-gray-900);
}

.gua-tab.active {
  color: var(--gua-primary);
}

.gua-tab.active::after {
  background: var(--gua-primary);
}

/* Pill Tabs Variant */
.gua-tabs-pills {
  border-bottom: none;
  gap: var(--gua-space-2);
  background: var(--gua-gray-100);
  padding: 4px;
  border-radius: var(--gua-radius-full);
  width: fit-content;
}

.gua-tabs-pills .gua-tab {
  border-radius: var(--gua-radius-full);
  padding: var(--gua-space-2) var(--gua-space-5);
}

.gua-tabs-pills .gua-tab::after { display: none; }

.gua-tabs-pills .gua-tab.active {
  background: var(--gua-white);
  box-shadow: var(--gua-shadow-sm);
  color: var(--gua-gray-900);
}


/* ============================================================
   13. ACCORDION
   ============================================================ */

.gua-accordion {
  border: 1px solid var(--gua-border-color);
  border-radius: var(--gua-radius-lg);
  overflow: hidden;
}

.gua-accordion-item {
  border-bottom: 1px solid var(--gua-border-color);
}

.gua-accordion-item:last-child {
  border-bottom: none;
}

.gua-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--gua-space-5) var(--gua-space-6);
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-base);
  font-weight: var(--gua-weight-semibold);
  color: var(--gua-gray-900);
  background: var(--gua-white);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--gua-duration-fast) var(--gua-ease);
}

.gua-accordion-header:hover {
  background: var(--gua-gray-50);
}

.gua-accordion-header .gua-accordion-icon {
  width: 20px;
  height: 20px;
  transition: transform var(--gua-duration-base) var(--gua-ease);
  color: var(--gua-gray-500);
}

.gua-accordion-item.open .gua-accordion-icon {
  transform: rotate(180deg);
}

.gua-accordion-body {
  padding: 0 var(--gua-space-6) var(--gua-space-6);
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-600);
  line-height: var(--gua-leading-relaxed);
}


/* ============================================================
   14. PAGINATION
   ============================================================ */

.gua-pagination {
  display: flex;
  align-items: center;
  gap: var(--gua-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.gua-pagination li a,
.gua-pagination li button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--gua-space-3);
  font-size: var(--gua-text-sm);
  font-weight: var(--gua-weight-medium);
  color: var(--gua-gray-700);
  background: var(--gua-white);
  border: 1px solid var(--gua-gray-200);
  border-radius: var(--gua-radius-md);
  text-decoration: none;
  transition: all var(--gua-duration-fast) var(--gua-ease);
}

.gua-pagination li a:hover,
.gua-pagination li button:hover {
  background: var(--gua-gray-100);
  color: var(--gua-gray-900);
  text-decoration: none;
}

.gua-pagination li.active a,
.gua-pagination li.active button {
  background: var(--gua-primary);
  color: var(--gua-white);
  border-color: var(--gua-primary);
}

.gua-pagination li.disabled a,
.gua-pagination li.disabled button {
  opacity: 0.4;
  pointer-events: none;
}


/* ============================================================
   15. MODAL OVERRIDES (Bootstrap)
   ============================================================ */

.gua-modal .modal-content {
  border: none;
  border-radius: var(--gua-radius-xl);
  box-shadow: var(--gua-shadow-xl);
  overflow: hidden;
}

.gua-modal .modal-header {
  border-bottom: 1px solid var(--gua-border-light);
  padding: var(--gua-space-6) var(--gua-space-8);
}

.gua-modal .modal-title {
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-xl);
  font-weight: var(--gua-weight-bold);
}

.gua-modal .modal-body {
  padding: var(--gua-space-8);
}

.gua-modal .modal-footer {
  border-top: 1px solid var(--gua-border-light);
  padding: var(--gua-space-5) var(--gua-space-8);
}

.gua-modal .modal-backdrop {
  backdrop-filter: blur(4px);
}


/* ============================================================
   16. TABLE
   ============================================================ */

.gua-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--gua-text-sm);
}

.gua-table thead th {
  font-family: var(--gua-font-display);
  font-weight: var(--gua-weight-semibold);
  font-size: var(--gua-text-xs);
  color: var(--gua-gray-600);
  text-transform: uppercase;
  letter-spacing: var(--gua-tracking-wider);
  padding: var(--gua-space-3) var(--gua-space-4);
  border-bottom: 2px solid var(--gua-gray-200);
  text-align: left;
}

.gua-table tbody td {
  padding: var(--gua-space-4);
  border-bottom: 1px solid var(--gua-border-light);
  color: var(--gua-gray-800);
  vertical-align: middle;
}

.gua-table tbody tr:hover {
  background-color: var(--gua-gray-50);
}

.gua-table tbody tr:last-child td {
  border-bottom: none;
}


/* ============================================================
   17. AVATAR & USER ELEMENTS
   ============================================================ */

.gua-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--gua-radius-full);
  object-fit: cover;
  background: var(--gua-gray-200);
}

.gua-avatar-sm  { width: 32px; height: 32px; }
.gua-avatar-lg  { width: 56px; height: 56px; }
.gua-avatar-xl  { width: 80px; height: 80px; }

.gua-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gua-font-display);
  font-weight: var(--gua-weight-semibold);
  color: var(--gua-white);
  background: var(--gua-gradient);
}


/* ============================================================
   18. PROGRESS & STATS
   ============================================================ */

.gua-progress {
  width: 100%;
  height: 8px;
  background: var(--gua-gray-200);
  border-radius: var(--gua-radius-full);
  overflow: hidden;
}

.gua-progress-bar {
  height: 100%;
  background: var(--gua-primary);
  border-radius: var(--gua-radius-full);
  transition: width var(--gua-duration-slow) var(--gua-ease);
}

.gua-progress-bar.gradient {
  background: var(--gua-gradient);
}

/* Stat Card */
.gua-stat {
  text-align: center;
}

.gua-stat-value {
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-3xl);
  font-weight: var(--gua-weight-extrabold);
  color: var(--gua-gray-900);
  line-height: 1.1;
}

.gua-stat-label {
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-500);
  margin-top: var(--gua-space-1);
}


/* ============================================================
   19. HERO SECTION PATTERNS
   ============================================================ */

.gua-hero {
  padding: var(--gua-space-24) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.gua-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: radial-gradient(circle at 30% 50%, rgba(26,115,232,0.04) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(247,112,98,0.04) 0%, transparent 50%);
  z-index: 0;
}

.gua-hero > * {
  position: relative;
  z-index: 1;
}

.gua-hero .gua-display-xl {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--gua-space-6);
}

.gua-hero .gua-lead {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--gua-space-8);
}

/* Dark Hero Variant */
.gua-hero-dark {
  background: var(--gua-gray-900);
  color: var(--gua-white);
}

.gua-hero-dark h1,
.gua-hero-dark h2,
.gua-hero-dark .gua-display-xl,
.gua-hero-dark .gua-display-lg {
  color: var(--gua-white);
}

.gua-hero-dark .gua-lead {
  color: var(--gua-gray-400);
}

.gua-hero-dark::before {
  background: radial-gradient(circle at 30% 50%, rgba(26,115,232,0.12) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(247,112,98,0.12) 0%, transparent 50%);
}


/* ============================================================
   20. CTA SECTION PATTERN
   ============================================================ */

.gua-cta {
  background: var(--gua-gradient);
  border-radius: var(--gua-radius-2xl);
  padding: var(--gua-space-16) var(--gua-space-8);
  text-align: center;
  color: var(--gua-white);
  position: relative;
  overflow: hidden;
}

.gua-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
}

.gua-cta > * {
  position: relative;
  z-index: 1;
}

.gua-cta h2 {
  color: var(--gua-white);
  margin-bottom: var(--gua-space-4);
}

.gua-cta p {
  color: rgba(255,255,255,0.85);
  max-width: 500px;
  margin: 0 auto var(--gua-space-8);
}


/* ============================================================
   21. PRICE TAG
   ============================================================ */

.gua-price {
  font-family: var(--gua-font-display);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.gua-price-currency {
  font-size: var(--gua-text-lg);
  font-weight: var(--gua-weight-semibold);
  color: var(--gua-gray-700);
}

.gua-price-amount {
  font-size: var(--gua-text-3xl);
  font-weight: var(--gua-weight-extrabold);
  color: var(--gua-gray-900);
}

.gua-price-period {
  font-size: var(--gua-text-sm);
  font-weight: var(--gua-weight-normal);
  color: var(--gua-gray-500);
}

.gua-price-original {
  text-decoration: line-through;
  color: var(--gua-gray-400);
  font-size: var(--gua-text-sm);
  margin-left: var(--gua-space-2);
}


/* ============================================================
   22. TOOLTIP & DROPDOWN
   ============================================================ */

.gua-tooltip {
  position: relative;
}

.gua-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--gua-gray-900);
  color: var(--gua-white);
  font-size: var(--gua-text-xs);
  padding: 6px 12px;
  border-radius: var(--gua-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all var(--gua-duration-fast) var(--gua-ease);
  z-index: var(--gua-z-tooltip);
}

.gua-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown */
.gua-dropdown {
  position: relative;
  display: inline-block;
}

.gua-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--gua-white);
  border: 1px solid var(--gua-border-color);
  border-radius: var(--gua-radius-md);
  box-shadow: var(--gua-shadow-lg);
  z-index: var(--gua-z-dropdown);
  padding: var(--gua-space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--gua-duration-fast) var(--gua-ease);
}

.gua-dropdown.open .gua-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gua-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--gua-space-3);
  padding: var(--gua-space-2) var(--gua-space-4);
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-700);
  cursor: pointer;
  transition: background var(--gua-duration-fast);
}

.gua-dropdown-item:hover {
  background: var(--gua-gray-100);
  color: var(--gua-gray-900);
  text-decoration: none;
}

.gua-dropdown-divider {
  height: 1px;
  background: var(--gua-gray-200);
  margin: var(--gua-space-2) 0;
}


/* ============================================================
   23. SKELETON / LOADING
   ============================================================ */

.gua-skeleton {
  background: linear-gradient(90deg, var(--gua-gray-200) 25%, var(--gua-gray-100) 50%, var(--gua-gray-200) 75%);
  background-size: 200% 100%;
  animation: gua-shimmer 1.5s infinite;
  border-radius: var(--gua-radius-sm);
}

.gua-skeleton-text {
  height: 14px;
  margin-bottom: 8px;
}

.gua-skeleton-heading {
  height: 24px;
  width: 60%;
  margin-bottom: 12px;
}

.gua-skeleton-img {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--gua-radius-md);
}

.gua-skeleton-circle {
  border-radius: 50%;
}

@keyframes gua-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ============================================================
   24. UTILITY CLASSES
   ============================================================ */

/* Flex shortcuts */
.gua-flex        { display: flex; }
.gua-flex-col    { display: flex; flex-direction: column; }
.gua-flex-center { display: flex; align-items: center; justify-content: center; }
.gua-flex-between { display: flex; align-items: center; justify-content: space-between; }
.gua-flex-wrap   { flex-wrap: wrap; }
.gua-gap-1  { gap: var(--gua-space-1); }
.gua-gap-2  { gap: var(--gua-space-2); }
.gua-gap-3  { gap: var(--gua-space-3); }
.gua-gap-4  { gap: var(--gua-space-4); }
.gua-gap-6  { gap: var(--gua-space-6); }
.gua-gap-8  { gap: var(--gua-space-8); }

/* Text alignment */
.gua-text-center { text-align: center; }
.gua-text-left   { text-align: left; }
.gua-text-right  { text-align: right; }

/* Margin helpers */
.gua-mt-0  { margin-top: 0; }
.gua-mt-4  { margin-top: var(--gua-space-4); }
.gua-mt-8  { margin-top: var(--gua-space-8); }
.gua-mb-0  { margin-bottom: 0; }
.gua-mb-4  { margin-bottom: var(--gua-space-4); }
.gua-mb-8  { margin-bottom: var(--gua-space-8); }
.gua-mx-auto { margin-left: auto; margin-right: auto; }

/* Border radius */
.gua-rounded-sm   { border-radius: var(--gua-radius-sm); }
.gua-rounded-md   { border-radius: var(--gua-radius-md); }
.gua-rounded-lg   { border-radius: var(--gua-radius-lg); }
.gua-rounded-xl   { border-radius: var(--gua-radius-xl); }
.gua-rounded-full { border-radius: var(--gua-radius-full); }

/* Shadows */
.gua-shadow-sm { box-shadow: var(--gua-shadow-sm); }
.gua-shadow-md { box-shadow: var(--gua-shadow-md); }
.gua-shadow-lg { box-shadow: var(--gua-shadow-lg); }

/* Width */
.gua-w-full { width: 100%; }

/* Visually hidden (for accessibility) */
.gua-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;
}

/* Truncate */
.gua-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gua-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gua-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   25. ANIMATIONS
   ============================================================ */

@keyframes gua-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gua-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gua-fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes gua-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.gua-animate-fadeIn   { animation: gua-fadeIn var(--gua-duration-slow) var(--gua-ease); }
.gua-animate-fadeUp   { animation: gua-fadeUp var(--gua-duration-slow) var(--gua-ease); }
.gua-animate-fadeDown { animation: gua-fadeDown var(--gua-duration-slow) var(--gua-ease); }
.gua-animate-scaleIn  { animation: gua-scaleIn var(--gua-duration-slow) var(--gua-ease); }
.gua-animate-spin     { animation: gua-spin 1s linear infinite; }

/* Stagger delays */
.gua-delay-1 { animation-delay: 100ms; animation-fill-mode: both; }
.gua-delay-2 { animation-delay: 200ms; animation-fill-mode: both; }
.gua-delay-3 { animation-delay: 300ms; animation-fill-mode: both; }
.gua-delay-4 { animation-delay: 400ms; animation-fill-mode: both; }
.gua-delay-5 { animation-delay: 500ms; animation-fill-mode: both; }


/* ============================================================
   26. RESPONSIVE ADJUSTMENTS
   ============================================================ */

@media (max-width: 991.98px) {
  :root {
    --gua-text-4xl: 2.25rem;
    --gua-text-5xl: 2.75rem;
  }
  
  .gua-section     { padding-top: var(--gua-space-12); padding-bottom: var(--gua-space-12); }
  .gua-section-lg  { padding-top: var(--gua-space-16); padding-bottom: var(--gua-space-16); }
  .gua-hero        { padding: var(--gua-space-16) 0; }
  .gua-cta         { padding: var(--gua-space-12) var(--gua-space-6); }
}

@media (max-width: 767.98px) {
  :root {
    --gua-text-3xl: 1.75rem;
    --gua-text-4xl: 2rem;
    --gua-text-5xl: 2.25rem;
    --gua-nav-height: 56px;
  }
  
  .gua-container {
    padding-left: var(--gua-space-4);
    padding-right: var(--gua-space-4);
  }
  
  .gua-hero        { padding: var(--gua-space-12) 0; }
  .gua-section     { padding-top: var(--gua-space-10); padding-bottom: var(--gua-space-10); }
  .gua-section-header { margin-bottom: var(--gua-space-8); }
  
  .gua-btn-xl {
    padding: 14px 28px;
    font-size: var(--gua-text-base);
  }
  
  .gua-card-course:hover,
  .gua-card-feature:hover {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .gua-btn-group {
    flex-direction: column;
    width: 100%;
  }
  
  .gua-btn-group .gua-btn {
    width: 100%;
  }
}


/* ============================================================
   27. DRUPAL 11 / BOOTSTRAP 5 SPECIFIC OVERRIDES
   ============================================================ */

/* 
   These overrides ensure Go Ultra AI styles coexist cleanly
   with Bootstrap 5 defaults loaded by the Drupal theme.
   Apply .gua-theme to <body> or a wrapper to scope if needed.
*/

/* Override Bootstrap container */
.gua-theme .container,
.gua-theme .container-fluid {
  max-width: var(--gua-container-max);
}

/* Override Bootstrap .btn to not conflict */
.gua-theme .btn:not([class*="gua-btn"]) {
  /* Leave default Bootstrap buttons alone */
}

/* Override Bootstrap form-control when gua-input is applied */
.gua-theme .form-control.gua-input {
  border-radius: var(--gua-radius-md);
  border: 1.5px solid var(--gua-gray-300);
  box-shadow: none;
}

.gua-theme .form-control.gua-input:focus {
  border-color: var(--gua-primary);
  box-shadow: var(--gua-shadow-glow);
}

/* Override Bootstrap card */
.gua-theme .card.gua-card {
  border-radius: var(--gua-radius-lg);
  border: 1px solid var(--gua-border-color);
}

/* Override Bootstrap .nav-tabs for gua-tabs */
.gua-theme .nav-tabs.gua-tabs {
  border-bottom: 1px solid var(--gua-gray-200);
}

.gua-theme .nav-tabs.gua-tabs .nav-link {
  border: none;
  border-radius: 0;
}

/* Drupal admin toolbar offset */
body.toolbar-tray-open .gua-navbar {
  top: 79px; /* Adjust for Drupal toolbar */
}

body.toolbar-horizontal .gua-navbar {
  top: 39px;
}

/* Override Drupal messages */
.gua-theme .messages {
  border-radius: var(--gua-radius-md);
  font-family: var(--gua-font-body);
}

/* Override Drupal views exposed form */
.gua-theme .views-exposed-form .form-item {
  margin-bottom: var(--gua-space-4);
}

.gua-theme .views-exposed-form .form-item label {
  font-family: var(--gua-font-display);
  font-size: var(--gua-text-sm);
  font-weight: var(--gua-weight-medium);
  margin-bottom: var(--gua-space-2);
}

/* Override Drupal pager */
.gua-theme .pager__items {
  display: flex;
  gap: var(--gua-space-1);
  justify-content: center;
  list-style: none;
  padding: 0;
}

.gua-theme .pager__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--gua-gray-200);
  border-radius: var(--gua-radius-md);
  font-size: var(--gua-text-sm);
  color: var(--gua-gray-700);
  text-decoration: none;
}

.gua-theme .pager__item a:hover {
  background: var(--gua-gray-100);
}

.gua-theme .pager__item--active a {
  background: var(--gua-primary);
  color: var(--gua-white);
  border-color: var(--gua-primary);
}


/* ============================================================
   28. PRINT STYLES
   ============================================================ */

@media print {
  .gua-navbar,
  .gua-toast,
  .gua-btn-gradient {
    display: none !important;
  }
  
  .gua-card {
    border: 1px solid #ddd;
    box-shadow: none;
    break-inside: avoid;
  }
  
  body {
    background: white;
    color: black;
  }
}