/* =====================================================================
   SMG Mitgliederbereich — Base Design System
   v1.0.0 | Glassmorphism + Purple Gradients
   Fonts: Bricolage Grotesque (display) + Outfit (body)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

/* -- Design Tokens ---------------------------------------------------- */
:root {
  /* Brand */
  --smg-purple:     #7c3aed;
  --smg-purple-dk:  #6d28d9;
  --smg-purple-lt:  #a78bfa;
  --smg-purple-xlt: #ddd6fe;
  --smg-electric:   #38d9ff;

  /* Surfaces */
  --smg-bg:            #f8f8fd;
  --smg-surface:       #ffffff;
  --smg-surface-glass: rgba(255, 255, 255, 0.82);

  /* Text */
  --smg-text-1: #0a0a18;
  --smg-text-2: #3c3c58;
  --smg-text-3: #6a6a8c;
  --smg-text-4: #9898bb;

  /* Semantic */
  --smg-success:      #22d3a5;
  --smg-success-text: #065f46;
  --smg-warning:      #f59e0b;
  --smg-warning-text: #92400e;
  --smg-error:        #f87171;
  --smg-error-text:   #991b1b;
  --smg-info:         #3B82F6;
  --smg-info-text:    #1e40af;

  /* Borders */
  --smg-border:       rgba(124, 58, 237, 0.08);
  --smg-border-solid: #e8e4f0;

  /* Shadows (5 levels) */
  --smg-shadow-xs:   0 1px 2px rgba(124, 58, 237, 0.04);
  --smg-shadow-sm:   0 1px 3px rgba(15, 17, 23, 0.05), 0 4px 12px rgba(124, 58, 237, 0.04);
  --smg-shadow-base: 0 1px 3px rgba(15, 17, 23, 0.05), 0 4px 16px rgba(124, 58, 237, 0.06);
  --smg-shadow-md:   0 4px 24px rgba(15, 17, 23, 0.08), 0 1px 4px rgba(124, 58, 237, 0.05);
  --smg-shadow-hero: 0 2px 4px rgba(15, 17, 23, 0.03),
                     0 8px 24px rgba(15, 17, 23, 0.07),
                     0 24px 64px rgba(124, 58, 237, 0.08);

  /* Radii (6 levels) */
  --smg-radius-xs:   4px;
  --smg-radius-sm:   6px;
  --smg-radius-md:   10px;
  --smg-radius-lg:   16px;
  --smg-radius-xl:   20px;
  --smg-radius-pill: 9999px;

  /* Typography */
  --smg-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --smg-font:         'Outfit', system-ui, sans-serif;

  /* Font Scale */
  --smg-fs-2xs:  0.6875rem;
  --smg-fs-xs:   0.75rem;
  --smg-fs-sm:   0.8125rem;
  --smg-fs-base: 0.875rem;
  --smg-fs-md:   0.9375rem;
  --smg-fs-lg:   1.125rem;
  --smg-fs-xl:   1.5rem;
  --smg-fs-2xl:  1.875rem;
  --smg-fs-3xl:  2.25rem;

  /* Easing */
  --smg-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --smg-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Durations */
  --smg-dur-fast: 150ms;
  --smg-dur-base: 250ms;
  --smg-dur-slow: 400ms;

  /* Gradients */
  --smg-gradient:        linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  --smg-gradient-vivid:  linear-gradient(135deg, #7c3aed 0%, #38d9ff 100%);
  --smg-gradient-subtle: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(56, 217, 255, 0.06) 100%);

  /* Layout */
  --smg-max-w:    960px;
  --smg-gap:      1rem;
  --smg-card-pad: 1.5rem;

  /* Selection */
  --smg-selection-bg: rgba(124, 58, 237, 0.15);
}


/* -- Body / Wrapper Reset --------------------------------------------- */

.smg-standalone-body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--smg-bg) !important;
  min-height: 100vh !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

body.smg-standalone-body {
  background:
    radial-gradient(ellipse 50% 40% at 85% 5%, rgba(124, 58, 237, 0.05) 0%, transparent 70%),
    linear-gradient(160deg, #f8f8fd 0%, #f4f0ff 30%, #f0ecff 60%, #f8f8fd 100%) !important;
  background-attachment: fixed !important;
}

html:has(> body.smg-standalone-body) {
  background: var(--smg-bg) !important;
}


/* -- Elementor Neutralisation ----------------------------------------- */

.smg-wrapper .elementor-widget-container,
.smg-wrapper .elementor-element {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}


/* -- Wrapper ---------------------------------------------------------- */

.smg-wrapper {
  font-family: var(--smg-font) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--smg-text-2) !important;
  background: transparent !important;
  min-height: 100vh !important;
}

.smg-wrapper * {
  box-sizing: border-box !important;
}


/* -- Container -------------------------------------------------------- */

.smg-container {
  max-width: var(--smg-max-w) !important;
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
}

@media (min-width: 768px) {
  .smg-container {
    padding: 0 1.5rem !important;
  }
}


/* -- Site Header (Sticky Glassmorphism) ------------------------------- */

.smg-site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--smg-surface-glass) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border-bottom: 1px solid var(--smg-border) !important;
  box-shadow: var(--smg-shadow-xs) !important;
  font-family: var(--smg-font) !important;
}

.admin-bar .smg-site-header {
  top: 32px !important;
}

@media (max-width: 782px) {
  .admin-bar .smg-site-header {
    top: 46px !important;
  }
}

.smg-site-header__inner {
  max-width: var(--smg-max-w) !important;
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 64px !important;
}

@media (min-width: 768px) {
  .smg-site-header__inner {
    padding: 0 1.5rem !important;
  }
}

.smg-site-header__logo-link {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  color: var(--smg-text-1) !important;
}

.smg-site-header__logo-img {
  height: 32px !important;
  width: auto !important;
}

.smg-site-header__logo-fallback {
  font-family: var(--smg-font-display) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--smg-text-1) !important;
}

.smg-site-header__actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.smg-site-header__welcome {
  display: none !important;
  font-size: 0.875rem !important;
  color: var(--smg-text-3) !important;
}

@media (min-width: 640px) {
  .smg-site-header__welcome {
    display: inline !important;
  }
}

/* -- User Dropdown ---------------------------------------------------- */

.smg-user-dropdown {
  position: relative !important;
}

.smg-user-dropdown__trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--smg-border-solid) !important;
  background: var(--smg-surface) !important;
  color: var(--smg-text-2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.smg-user-dropdown__trigger:hover {
  border-color: var(--smg-purple-lt) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08) !important;
}

.smg-user-dropdown__menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  min-width: 180px !important;
  background: var(--smg-surface) !important;
  border: 1px solid var(--smg-border-solid) !important;
  border-radius: var(--smg-radius-lg) !important;
  box-shadow: var(--smg-shadow-md) !important;
  padding: 0.375rem !important;
  z-index: 200 !important;
}

.smg-user-dropdown.is-open .smg-user-dropdown__menu {
  display: block !important;
}

.smg-user-dropdown__item {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: var(--smg-radius-sm) !important;
  font-size: 0.875rem !important;
  color: var(--smg-text-2) !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  font-family: var(--smg-font) !important;
}

.smg-user-dropdown__item:hover {
  background: rgba(124, 58, 237, 0.06) !important;
  color: var(--smg-purple) !important;
}

.smg-user-dropdown__item--active {
  color: var(--smg-purple) !important;
  font-weight: 500 !important;
}

.smg-user-dropdown__divider {
  height: 1px !important;
  background: var(--smg-border-solid) !important;
  margin: 0.25rem 0 !important;
}


/* -- Site Footer ------------------------------------------------------ */

.smg-site-footer {
  border-top: 1px solid var(--smg-border) !important;
  padding: 1.5rem 0 !important;
  margin-top: 3rem !important;
  font-family: var(--smg-font) !important;
}

.smg-site-footer__inner {
  max-width: var(--smg-max-w) !important;
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  font-size: 0.8125rem !important;
  color: var(--smg-text-4) !important;
}

.smg-site-footer__links {
  display: flex !important;
  gap: 1rem !important;
}

.smg-site-footer__links a {
  color: var(--smg-text-4) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.smg-site-footer__links a:hover {
  color: var(--smg-purple) !important;
}


/* -- Chat FAB --------------------------------------------------------- */

.smg-chat-fab {
  position: fixed !important;
  bottom: 90px !important;
  right: 1.25rem !important;
  z-index: 90 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--smg-purple) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--smg-shadow-md) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.smg-chat-fab:hover {
  transform: scale(1.08) !important;
  box-shadow: var(--smg-shadow-hero) !important;
}


/* -- Global Font Override (vs Hello Elementor) ------------------------ */

.smg-wrapper p,
.smg-wrapper span,
.smg-wrapper a,
.smg-wrapper li,
.smg-wrapper div,
.smg-wrapper h1,
.smg-wrapper h2,
.smg-wrapper h3,
.smg-wrapper h4,
.smg-wrapper label,
.smg-wrapper input,
.smg-wrapper select,
.smg-wrapper textarea,
.smg-wrapper button,
.smg-offcanvas p,
.smg-offcanvas span,
.smg-offcanvas div,
.smg-offcanvas h1,
.smg-offcanvas h2,
.smg-offcanvas h3,
.smg-offcanvas label {
  font-family: var(--smg-font) !important;
}


/* -- Display Font (explicit opt-in) ----------------------------------- */

.smg-wrapper .smg-welcome__heading,
.smg-wrapper .smg-page-title,
.smg-wrapper .smg-stat-card__value,
.smg-wrapper .smg-card__title,
.smg-wrapper .smg-offcanvas__title,
.smg-wrapper .smg-alert__title,
.smg-offcanvas .smg-offcanvas__title {
  font-family: var(--smg-font-display) !important;
}


/* -- Selection -------------------------------------------------------- */

.smg-wrapper ::selection {
  background: var(--smg-selection-bg) !important;
  color: var(--smg-text-1) !important;
}


/* -- Focus States ----------------------------------------------------- */

.smg-wrapper :focus-visible {
  outline: 2px solid var(--smg-purple) !important;
  outline-offset: 2px !important;
}


/* -- Typography ------------------------------------------------------- */

.smg-wrapper h1,
.smg-wrapper h2,
.smg-wrapper h3,
.smg-wrapper h4 {
  font-family: var(--smg-font-display) !important;
  color: var(--smg-text-1) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 0.5rem !important;
}


/* =====================================================================
   COMPONENT: Buttons
   ===================================================================== */

.smg-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.65rem 1.25rem !important;
  font-family: var(--smg-font) !important;
  font-size: var(--smg-fs-base) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  border: none !important;
  border-radius: var(--smg-radius-md) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform var(--smg-dur-fast) ease,
              box-shadow var(--smg-dur-base) ease,
              background var(--smg-dur-fast) ease !important;
  min-height: 44px !important;
}

.smg-btn:active {
  transform: translateY(0.5px) !important;
}

/* Primary */
.smg-btn--primary {
  color: #fff !important;
  background: var(--smg-gradient) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.smg-btn--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Secondary */
.smg-btn--secondary {
  color: var(--smg-purple) !important;
  background: var(--smg-surface) !important;
  border: 1.5px solid var(--smg-purple-xlt) !important;
  box-shadow: var(--smg-shadow-xs) !important;
}

.smg-btn--secondary:hover {
  background: rgba(124, 58, 237, 0.04) !important;
  border-color: var(--smg-purple-lt) !important;
}

/* Ghost */
.smg-btn--ghost {
  color: var(--smg-purple) !important;
  background: transparent !important;
}

.smg-btn--ghost:hover {
  background: rgba(124, 58, 237, 0.06) !important;
}

/* Danger */
.smg-btn--danger {
  color: #fff !important;
  background: var(--smg-error) !important;
}

.smg-btn--danger:hover {
  background: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(248, 113, 113, 0.3) !important;
}

/* Small variant */
.smg-btn--sm {
  padding: 0.4rem 0.875rem !important;
  font-size: var(--smg-fs-sm) !important;
  min-height: 36px !important;
}


/* =====================================================================
   COMPONENT: Cards
   ===================================================================== */

.smg-card {
  background: var(--smg-surface) !important;
  border-radius: var(--smg-radius-lg) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: var(--smg-shadow-base), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  padding: var(--smg-card-pad) !important;
  animation: smgCardReveal 0.45s var(--smg-ease) both !important;
  transition: box-shadow var(--smg-dur-base) var(--smg-ease),
              transform var(--smg-dur-base) var(--smg-ease) !important;
}

.smg-card--glass {
  background: var(--smg-surface-glass) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
}

.smg-card__title {
  font-family: var(--smg-font-display) !important;
  font-size: var(--smg-fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--smg-text-3) !important;
  margin-bottom: 1rem !important;
}


/* =====================================================================
   COMPONENT: Alert (Gate System)
   PHP: smg-alert, smg-alert--{warning,info,info-purple,muted,pending-cancel}
   Inner: smg-alert__inner, __icon, __content, __title, __text,
          __form, __actions, __progress, __fallback
   ===================================================================== */

.smg-alert {
  border-radius: var(--smg-radius-md) !important;
}

.smg-alert__inner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.75rem !important;
  border-radius: var(--smg-radius-md) !important;
  padding: 0.875rem 1.125rem !important;
  border: 1px solid transparent !important;
}

.smg-alert__icon {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.smg-alert__icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

.smg-alert__content {
  flex: 1 !important;
  min-width: 0 !important;
}

.smg-alert__title {
  font-family: var(--smg-font-display) !important;
  font-size: var(--smg-fs-base) !important;
  font-weight: 700 !important;
  margin-bottom: 0.1rem !important;
  line-height: 1.3 !important;
}

.smg-alert__text {
  font-size: var(--smg-fs-sm) !important;
  line-height: 1.45 !important;
  opacity: 0.85 !important;
  margin: 0 !important;
}

.smg-alert__actions {
  flex-shrink: 0 !important;
}

.smg-alert__form {
  flex-basis: 100% !important;
  margin-top: 0.25rem !important;
}

.smg-alert__progress {
  flex-basis: 100% !important;
  margin-top: 0.5rem !important;
}

.smg-alert__fallback {
  font-size: var(--smg-fs-sm) !important;
  color: var(--smg-text-3) !important;
  margin: 0 !important;
}

/* Warning (ld, 2fa) */
.smg-alert--warning .smg-alert__inner {
  background: #fef3c7 !important;
  border-color: #fde68a !important;
  color: var(--smg-warning-text) !important;
}

.smg-alert--warning .smg-alert__icon {
  color: var(--smg-warning) !important;
}

/* Info (zg, ec, check) */
.smg-alert--info .smg-alert__inner {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: var(--smg-info-text) !important;
}

.smg-alert--info .smg-alert__icon {
  color: var(--smg-info) !important;
}

/* Info-Purple (einrichten, setup) */
.smg-alert--info-purple .smg-alert__inner {
  background: rgba(124, 58, 237, 0.06) !important;
  border-color: var(--smg-purple-xlt) !important;
  color: var(--smg-purple-dk) !important;
}

.smg-alert--info-purple .smg-alert__icon {
  color: var(--smg-purple) !important;
}

/* Muted (gekuendigt) */
.smg-alert--muted .smg-alert__inner {
  background: rgba(248, 248, 253, 0.8) !important;
  border-color: var(--smg-border-solid) !important;
  color: var(--smg-text-3) !important;
}

.smg-alert--muted .smg-alert__icon {
  color: var(--smg-text-4) !important;
}

/* Pending-Cancel */
.smg-alert--pending-cancel .smg-alert__inner {
  background: rgba(245, 158, 11, 0.06) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: var(--smg-warning-text) !important;
}

.smg-alert--pending-cancel .smg-alert__icon {
  color: var(--smg-warning) !important;
}


/* =====================================================================
   COMPONENT: Status Chip
   ===================================================================== */

.smg-status-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-family: var(--smg-font) !important;
  font-size: var(--smg-fs-sm) !important;
  font-weight: 500 !important;
  color: var(--smg-text-3) !important;
  white-space: nowrap !important;
}

.smg-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.smg-status-dot--aktiv {
  background: var(--smg-success) !important;
  box-shadow: 0 0 0 2px rgba(34, 211, 165, 0.2) !important;
  animation: smgPulse 2s ease-in-out infinite !important;
}

.smg-status-dot--fehler {
  background: var(--smg-error) !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2) !important;
}

.smg-status-dot--warnung {
  background: var(--smg-warning) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important;
}

.smg-status-dot--info {
  background: var(--smg-info) !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* Color aliases used by smg-header.php */
.smg-status-dot--green { background: var(--smg-success) !important; box-shadow: 0 0 0 2px rgba(34, 211, 165, 0.2) !important; animation: smgPulse 2s ease-in-out infinite !important; }
.smg-status-dot--yellow { background: var(--smg-warning) !important; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2) !important; }
.smg-status-dot--red { background: var(--smg-error) !important; box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2) !important; }
.smg-status-dot--grey { background: var(--smg-text-4) !important; }

.smg-status-dot--neutral {
  background: var(--smg-text-4) !important;
}

.smg-status-chip__plan {
  font-size: var(--smg-fs-2xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 0.18em 0.55em !important;
  border-radius: 100px !important;
  border: 1px solid var(--smg-border-solid) !important;
  color: var(--smg-text-3) !important;
}

.smg-status-chip__plan--light    { background: rgba(167, 139, 250, 0.1) !important; border-color: var(--smg-purple-xlt) !important; }
.smg-status-chip__plan--standard { background: rgba(124, 58, 237, 0.08) !important; border-color: var(--smg-purple-lt) !important; }
.smg-status-chip__plan--premium  { background: rgba(56, 217, 255, 0.08) !important; border-color: rgba(56, 217, 255, 0.3) !important; }


/* =====================================================================
   COMPONENT: Tab Navigation (Fixed Bottom Pill)
   ===================================================================== */

.smg-tab-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.375rem !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: var(--smg-radius-lg) !important;
  position: fixed !important;
  bottom: 1.25rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 200 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  gap: 0.375rem !important;
}

/* Mobile: full-width bottom bar */
@media (max-width: 639px) {
  .smg-tab-nav {
    left: 0.75rem !important;
    right: 0.75rem !important;
    transform: none !important;
    bottom: 0.75rem !important;
    padding-bottom: calc(0.375rem + env(safe-area-inset-bottom)) !important;
  }
}

.smg-tab-nav__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 0.4rem 0.875rem !important;
  font-family: var(--smg-font) !important;
  font-size: var(--smg-fs-base) !important;
  font-weight: 500 !important;
  color: var(--smg-text-3) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all var(--smg-dur-fast) ease !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.smg-tab-nav__item svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.7 !important;
}

.smg-tab-nav__item:hover {
  color: var(--smg-text-2) !important;
  background: rgba(0, 0, 0, 0.035) !important;
}

.smg-tab-nav__item--active {
  color: #fff !important;
  background: var(--smg-purple) !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.3) !important;
  font-weight: 600 !important;
}

.smg-tab-nav__item--active svg {
  opacity: 1 !important;
}


/* -- Tab Content Panels ----------------------------------------------- */

.smg-tab-content {
  outline: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--smg-gap) !important;
}

.smg-tab-content[hidden],
.smg-tab-content.smg-tab-hidden {
  display: none !important;
}


/* =====================================================================
   COMPONENT: Page Loader
   ===================================================================== */

.smg-page-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--smg-bg) !important;
  transition: opacity var(--smg-dur-slow) ease !important;
}

.smg-page-loader.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.smg-page-loader__spinner {
  width: 32px !important;
  height: 32px !important;
  border: 3px solid var(--smg-purple-xlt) !important;
  border-top-color: var(--smg-purple) !important;
  border-radius: 50% !important;
  animation: smgSpinner 0.7s linear infinite !important;
}


/* =====================================================================
   GRAVITY FORMS OVERRIDES
   CRITICAL: NO display !important on .gfield
   ===================================================================== */

.smg-wrapper .gform_wrapper,
.smg-offcanvas .gform_wrapper {
  font-family: var(--smg-font) !important;
  color: var(--smg-text-2) !important;
}

/* Force single-column layout in offcanvas (override GF grid) */
.smg-offcanvas .gform_wrapper .gform_fields {
  grid-template-columns: 1fr !important;
}

.smg-offcanvas .gform_wrapper .gfield {
  grid-column: span 1 !important;
}

/* Field spacing — NO display !important here! */
.smg-wrapper .gform_wrapper .gfield,
.smg-offcanvas .gform_wrapper .gfield {
  margin-bottom: 1rem !important;
}

/* Labels */
.smg-wrapper .gform_wrapper .gfield_label,
.smg-offcanvas .gform_wrapper .gfield_label {
  font-family: var(--smg-font) !important;
  font-size: var(--smg-fs-sm) !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 0.4rem !important;
  letter-spacing: 0.01em !important;
}

/* Required indicator — subtle, not red */
.smg-wrapper .gform_wrapper .gfield_required,
.smg-offcanvas .gform_wrapper .gfield_required {
  color: var(--smg-purple-lt) !important;
  font-weight: 400 !important;
  font-size: var(--smg-fs-xs) !important;
}

.smg-wrapper .gform_wrapper .gfield_required_text,
.smg-offcanvas .gform_wrapper .gfield_required_text {
  color: var(--smg-text-4) !important;
  font-size: var(--smg-fs-xs) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Sub-labels / Descriptions */
.smg-wrapper .gform_wrapper .gfield_description,
.smg-offcanvas .gform_wrapper .gfield_description {
  font-size: 13px !important;
  color: #9CA3AF !important;
  margin-top: 0.3rem !important;
  line-height: 1.45 !important;
}

/* Text Inputs */
.smg-wrapper .gform_wrapper input[type="text"],
.smg-wrapper .gform_wrapper input[type="email"],
.smg-wrapper .gform_wrapper input[type="password"],
.smg-wrapper .gform_wrapper input[type="url"],
.smg-wrapper .gform_wrapper input[type="tel"],
.smg-wrapper .gform_wrapper input[type="number"],
.smg-offcanvas .gform_wrapper input[type="text"],
.smg-offcanvas .gform_wrapper input[type="email"],
.smg-offcanvas .gform_wrapper input[type="password"] {
  width: 100% !important;
  padding: 12px 16px !important;
  font-family: var(--smg-font) !important;
  font-size: var(--smg-fs-base) !important;
  color: var(--smg-text-1) !important;
  background: rgba(248, 248, 253, 0.6) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  outline: none !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

.smg-wrapper .gform_wrapper input[type="text"]:focus,
.smg-wrapper .gform_wrapper input[type="email"]:focus,
.smg-wrapper .gform_wrapper input[type="password"]:focus,
.smg-wrapper .gform_wrapper input[type="url"]:focus,
.smg-wrapper .gform_wrapper input[type="tel"]:focus,
.smg-wrapper .gform_wrapper input[type="number"]:focus,
.smg-offcanvas .gform_wrapper input[type="text"]:focus,
.smg-offcanvas .gform_wrapper input[type="email"]:focus,
.smg-offcanvas .gform_wrapper input[type="password"]:focus {
  border-color: var(--smg-purple) !important;
  background: var(--smg-surface) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10) !important;
}

/* Placeholder */
.smg-wrapper .gform_wrapper input::placeholder,
.smg-wrapper .gform_wrapper textarea::placeholder,
.smg-offcanvas .gform_wrapper input::placeholder,
.smg-offcanvas .gform_wrapper textarea::placeholder {
  color: var(--smg-text-4) !important;
  opacity: 0.7 !important;
}

/* Selects */
.smg-wrapper .gform_wrapper select,
.smg-offcanvas .gform_wrapper select,
.smg-offcanvas select {
  width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 12px 2.5rem 12px 16px !important;
  font-family: var(--smg-font) !important;
  font-size: var(--smg-fs-base) !important;
  line-height: 1.4 !important;
  color: var(--smg-text-1) !important;
  background-color: rgba(248, 248, 253, 0.6) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a6a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.smg-wrapper .gform_wrapper select option,
.smg-offcanvas .gform_wrapper select option,
.smg-offcanvas select option {
  color: var(--smg-text-1) !important;
  background: var(--smg-surface) !important;
}

.smg-wrapper .gform_wrapper select:focus,
.smg-offcanvas .gform_wrapper select:focus,
.smg-offcanvas select:focus {
  border-color: var(--smg-purple) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10) !important;
}

/* Textarea */
.smg-wrapper .gform_wrapper textarea,
.smg-offcanvas .gform_wrapper textarea {
  width: 100% !important;
  padding: 12px 16px !important;
  font-family: var(--smg-font) !important;
  font-size: var(--smg-fs-base) !important;
  color: var(--smg-text-1) !important;
  background: rgba(248, 248, 253, 0.6) !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  outline: none !important;
  min-height: 100px !important;
  resize: vertical !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.smg-wrapper .gform_wrapper textarea:focus,
.smg-offcanvas .gform_wrapper textarea:focus {
  border-color: var(--smg-purple) !important;
  background: var(--smg-surface) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10) !important;
}

/* Submit Button */
.smg-wrapper .gform_wrapper .gform_button,
.smg-wrapper .gform_wrapper input[type="submit"],
.smg-wrapper .gform_wrapper .gform_submit_button,
.smg-offcanvas .gform_wrapper .gform_button,
.smg-offcanvas .gform_wrapper input[type="submit"],
.smg-offcanvas .gform_wrapper .gform_submit_button,
.smg-wrapper .gform_footer .gform_button,
.smg-wrapper .gform-footer .gform_button,
.smg-offcanvas .gform_footer .gform_button,
.smg-offcanvas .gform-footer .gform_button,
.smg-offcanvas .gform_footer input[type="submit"],
.smg-offcanvas .gform-footer input[type="submit"] {
  width: 100% !important;
  padding: 14px 28px !important;
  font-family: var(--smg-font) !important;
  font-size: var(--smg-fs-base) !important;
  font-weight: 600 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08),
              0 4px 12px rgba(124, 58, 237, 0.20),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: transform var(--smg-dur-fast) ease, box-shadow var(--smg-dur-base) ease !important;
  min-height: 48px !important;
  letter-spacing: 0.01em !important;
  margin-top: 0.5rem !important;
}

.smg-wrapper .gform_wrapper .gform_button:hover,
.smg-wrapper .gform_wrapper input[type="submit"]:hover,
.smg-wrapper .gform_wrapper .gform_submit_button:hover,
.smg-offcanvas .gform_wrapper .gform_button:hover,
.smg-offcanvas .gform_wrapper input[type="submit"]:hover,
.smg-offcanvas .gform_wrapper .gform_submit_button:hover,
.smg-wrapper .gform_footer .gform_button:hover,
.smg-wrapper .gform-footer .gform_button:hover,
.smg-offcanvas .gform_footer .gform_button:hover,
.smg-offcanvas .gform-footer .gform_button:hover,
.smg-offcanvas .gform_footer input[type="submit"]:hover,
.smg-offcanvas .gform-footer input[type="submit"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.40),
              0 1px 3px rgba(0, 0, 0, 0.06),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.smg-wrapper .gform_wrapper .gform_button:active,
.smg-wrapper .gform_wrapper .gform_submit_button:active,
.smg-offcanvas .gform_wrapper .gform_button:active,
.smg-offcanvas .gform_wrapper .gform_submit_button:active,
.smg-offcanvas .gform_footer .gform_button:active,
.smg-offcanvas .gform-footer .gform_button:active,
.smg-offcanvas .gform_footer input[type="submit"]:active,
.smg-offcanvas .gform-footer input[type="submit"]:active {
  transform: translateY(0.5px) !important;
}

/* Validation Error (top message) */
.smg-wrapper .gform_wrapper .validation_error,
.smg-offcanvas .gform_wrapper .validation_error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  color: #EF4444 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.5 !important;
}

/* Field Error */
.smg-wrapper .gform_wrapper .gfield_error input,
.smg-wrapper .gform_wrapper .gfield_error select,
.smg-wrapper .gform_wrapper .gfield_error textarea,
.smg-offcanvas .gform_wrapper .gfield_error input,
.smg-offcanvas .gform_wrapper .gfield_error select,
.smg-offcanvas .gform_wrapper .gfield_error textarea {
  border-color: #EF4444 !important;
  background: rgba(254, 242, 242, 0.5) !important;
}

.smg-wrapper .gform_wrapper .gfield_error input:focus,
.smg-wrapper .gform_wrapper .gfield_error select:focus,
.smg-wrapper .gform_wrapper .gfield_error textarea:focus,
.smg-offcanvas .gform_wrapper .gfield_error input:focus,
.smg-offcanvas .gform_wrapper .gfield_error select:focus,
.smg-offcanvas .gform_wrapper .gfield_error textarea:focus {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10) !important;
}

.smg-wrapper .gform_wrapper .gfield_error .gfield_label,
.smg-offcanvas .gform_wrapper .gfield_error .gfield_label {
  color: #374151 !important;
}

.smg-wrapper .gform_wrapper .gfield_error .validation_message,
.smg-wrapper .gform_wrapper .gfield_validation_message,
.smg-offcanvas .gform_wrapper .gfield_error .validation_message,
.smg-offcanvas .gform_wrapper .gfield_validation_message {
  color: #EF4444 !important;
  font-size: 13px !important;
  margin-top: 0.35rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

/* Confirmation Message — success with checkmark */
.smg-wrapper .gform_wrapper .gform_confirmation_message,
.smg-offcanvas .gform_wrapper .gform_confirmation_message,
.smg-wrapper .gform_confirmation_message,
.smg-offcanvas .gform_confirmation_message {
  background: rgba(16, 185, 129, 0.06) !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  color: var(--smg-success-text) !important;
  font-size: var(--smg-fs-base) !important;
  font-weight: 500 !important;
  text-align: center !important;
  position: relative !important;
  animation: smgFadeInUp 0.4s var(--smg-ease) both !important;
}

.smg-wrapper .gform_wrapper .gform_confirmation_message::before,
.smg-offcanvas .gform_wrapper .gform_confirmation_message::before,
.smg-wrapper .gform_confirmation_message::before,
.smg-offcanvas .gform_confirmation_message::before {
  content: '\2713' !important;
  display: block !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  margin: 0 auto 0.75rem !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #10B981 !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Radio 2-choice fields (Ja/Nein) — force side-by-side */
.smg-wrapper .gform_wrapper .gfield_radio:has(.gchoice:nth-child(2)):not(:has(.gchoice:nth-child(3))),
.smg-offcanvas .gform_wrapper .gfield_radio:has(.gchoice:nth-child(2)):not(:has(.gchoice:nth-child(3))) {
  flex-wrap: nowrap !important;
}

/* Radio & Checkbox — custom styling */
.smg-wrapper .gform_wrapper .gfield--type-radio .gchoice,
.smg-wrapper .gform_wrapper .gfield--type-checkbox .gchoice,
.smg-offcanvas .gform_wrapper .gfield--type-radio .gchoice,
.smg-offcanvas .gform_wrapper .gfield--type-checkbox .gchoice {
  margin-bottom: 0.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.smg-wrapper .gform_wrapper .gfield--type-radio .gchoice label,
.smg-wrapper .gform_wrapper .gfield--type-checkbox .gchoice label,
.smg-offcanvas .gform_wrapper .gfield--type-radio .gchoice label,
.smg-offcanvas .gform_wrapper .gfield--type-checkbox .gchoice label {
  font-size: var(--smg-fs-base) !important;
  font-weight: 400 !important;
  color: var(--smg-text-2) !important;
  cursor: pointer !important;
}

.smg-wrapper .gform_wrapper input[type="radio"],
.smg-offcanvas .gform_wrapper input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 2px solid var(--smg-border) !important;
  border-radius: 50% !important;
  background: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.smg-wrapper .gform_wrapper input[type="radio"]:checked,
.smg-offcanvas .gform_wrapper input[type="radio"]:checked {
  border-color: var(--smg-purple) !important;
  background: #fff !important;
}

.smg-wrapper .gform_wrapper input[type="radio"]:checked::after,
.smg-offcanvas .gform_wrapper input[type="radio"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--smg-purple) !important;
}

.smg-wrapper .gform_wrapper input[type="radio"]:focus-visible,
.smg-offcanvas .gform_wrapper input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

.smg-wrapper .gform_wrapper input[type="checkbox"],
.smg-offcanvas .gform_wrapper input[type="checkbox"] {
  accent-color: var(--smg-purple) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

/* Image Choices (Radio with images) — elegant toggle cards */

/* Override GF Orbital theme blue focus color with our purple */
.smg-wrapper .gform_wrapper,
.smg-offcanvas .gform_wrapper {
  --gf-color-primary: var(--smg-purple) !important;
  --gf-ctrl-border-color-focus: var(--smg-purple) !important;
  --gf-ctrl-outline-color-focus: rgba(124, 58, 237, 0.35) !important;
}

/* Hide the native radio — the card IS the toggle */
.smg-wrapper .gform_wrapper .image-choices-choice input[type="radio"],
.smg-offcanvas .gform_wrapper .image-choices-choice input[type="radio"] {
  display: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  --gf-local-border-color: transparent !important;
  --gf-local-outline-color: transparent !important;
  --gf-local-outline-width: 0 !important;
}

/* Shrink the image to a small icon */
.smg-wrapper .gform_wrapper .image-choices-choice-image-wrap,
.smg-offcanvas .gform_wrapper .image-choices-choice-image-wrap {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  background-size: 20px 20px !important;
  background-position: center !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* Kill IC plugin's ::after overlay (200px tall blue inset shadow) */
.smg-wrapper .gform_wrapper .image-choices-choice-image-wrap::after,
.smg-offcanvas .gform_wrapper .image-choices-choice-image-wrap::after {
  display: none !important;
}

.smg-wrapper .gform_wrapper .image-choices-choice-image,
.smg-offcanvas .gform_wrapper .image-choices-choice-image {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

/* Choice container — side by side */
.smg-wrapper .gform_wrapper .image-choices-choice,
.smg-offcanvas .gform_wrapper .image-choices-choice {
  margin-bottom: 0 !important;
  position: relative !important;
  outline: none !important;
}

/* Kill any browser/GF focus outlines on image choice elements */
.smg-wrapper .gform_wrapper .image-choices-choice *:focus,
.smg-offcanvas .gform_wrapper .image-choices-choice *:focus,
.smg-wrapper .gform_wrapper .image-choices-choice *:focus-visible,
.smg-offcanvas .gform_wrapper .image-choices-choice *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Label — horizontal pill with icon + text */
.smg-wrapper .gform_wrapper .image-choices-choice label,
.smg-offcanvas .gform_wrapper .image-choices-choice label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.85rem 1.25rem !important;
  background: rgba(248, 248, 253, 0.6) !important;
  border: 2px solid #E5E7EB !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}

.smg-wrapper .gform_wrapper .image-choices-choice label:hover,
.smg-offcanvas .gform_wrapper .image-choices-choice label:hover {
  border-color: var(--smg-purple-xlt) !important;
  background: rgba(124, 58, 237, 0.04) !important;
  transform: translateY(-1px) !important;
}

/* Selected state */
.smg-wrapper .gform_wrapper .image-choices-choice input:checked + label,
.smg-offcanvas .gform_wrapper .image-choices-choice input:checked + label {
  border-color: var(--smg-purple) !important;
  background: rgba(124, 58, 237, 0.07) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10) !important;
}

/* Focus-visible for accessibility */
.smg-wrapper .gform_wrapper .image-choices-choice input:focus-visible + label,
.smg-offcanvas .gform_wrapper .image-choices-choice input:focus-visible + label {
  outline: 2px solid var(--smg-purple) !important;
  outline-offset: 2px !important;
}

/* Choice text */
.smg-wrapper .gform_wrapper .image-choices-choice-text,
.smg-offcanvas .gform_wrapper .image-choices-choice-text {
  font-size: var(--smg-fs-base) !important;
  font-weight: 500 !important;
  color: var(--smg-text-1) !important;
}

/* GF Footer (button container) — GF 2.8+ renders footer outside .gform_wrapper */
.smg-wrapper .gform_wrapper .gform_footer,
.smg-wrapper .gform_wrapper .gform_page_footer,
.smg-offcanvas .gform_wrapper .gform_footer,
.smg-offcanvas .gform_wrapper .gform_page_footer,
.smg-wrapper > .gform_footer,
.smg-wrapper > .gform-footer,
.smg-offcanvas__body > .gform_footer,
.smg-offcanvas__body > .gform-footer {
  padding-top: 0.5rem !important;
  margin-top: 0.25rem !important;
  border: none !important;
}

/* GF Progress Bar (multi-page forms) */
.smg-wrapper .gform_wrapper .gf_progressbar,
.smg-offcanvas .gform_wrapper .gf_progressbar {
  background: rgba(248, 248, 253, 0.8) !important;
  border-radius: 100px !important;
  height: 8px !important;
  overflow: hidden !important;
  margin-bottom: 1.25rem !important;
  border: none !important;
}

.smg-wrapper .gform_wrapper .gf_progressbar_percentage,
.smg-offcanvas .gform_wrapper .gf_progressbar_percentage {
  background: var(--smg-gradient) !important;
  border-radius: 100px !important;
  height: 100% !important;
  transition: width 0.4s var(--smg-ease) !important;
}

.smg-wrapper .gform_wrapper .gf_progressbar_title,
.smg-offcanvas .gform_wrapper .gf_progressbar_title {
  font-size: var(--smg-fs-xs) !important;
  color: var(--smg-text-4) !important;
  margin-bottom: 0.4rem !important;
}

/* GF Section break */
.smg-wrapper .gform_wrapper .gsection,
.smg-offcanvas .gform_wrapper .gsection {
  border-bottom: none !important;
  border-top: 1px solid var(--smg-border-solid) !important;
  padding-top: 1rem !important;
  padding-bottom: 0 !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.25rem !important;
}

.smg-wrapper .gform_wrapper .gsection_title,
.smg-offcanvas .gform_wrapper .gsection_title {
  font-family: var(--smg-font-display) !important;
  font-size: var(--smg-fs-md) !important;
  font-weight: 700 !important;
  color: var(--smg-text-1) !important;
}

.smg-wrapper .gform_wrapper .gsection_description,
.smg-offcanvas .gform_wrapper .gsection_description {
  font-size: 13px !important;
  color: #9CA3AF !important;
  margin-top: 0.2rem !important;
}

/* GF Spinner */
.smg-wrapper .gform_wrapper .gform_ajax_spinner,
.smg-offcanvas .gform_wrapper .gform_ajax_spinner {
  display: none !important;
}

/* GF Next/Previous buttons (multi-page) */
.smg-wrapper .gform_wrapper .gform_next_button,
.smg-offcanvas .gform_wrapper .gform_next_button {
  background: var(--smg-gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  min-height: 48px !important;
  font-family: var(--smg-font) !important;
}

.smg-wrapper .gform_wrapper .gform_previous_button,
.smg-offcanvas .gform_wrapper .gform_previous_button {
  background: transparent !important;
  color: var(--smg-purple) !important;
  border: 1.5px solid var(--smg-purple-xlt) !important;
  border-radius: 12px !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  min-height: 48px !important;
  font-family: var(--smg-font) !important;
}


/* =====================================================================
   COMPONENT: Offcanvas System
   ===================================================================== */

/* Overlay: only Dashboard uses this (is-active toggle) */
.smg-dashboard-body .smg-offcanvas-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(10, 10, 24, 0.4) !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity var(--smg-dur-base) ease, visibility var(--smg-dur-base) ease !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.smg-dashboard-body .smg-offcanvas-overlay.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Offcanvas positioning: scoped to Dashboard (centered popup / bottom sheet) */
.smg-dashboard-body .smg-offcanvas {
  position: fixed !important;
  z-index: 1001 !important;
  background: var(--smg-surface) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform var(--smg-dur-base) var(--smg-ease) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Mobile: bottom sheet */
.smg-dashboard-body .smg-offcanvas {
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  max-height: 90vh !important;
  border-radius: var(--smg-radius-xl) var(--smg-radius-xl) 0 0 !important;
  transform: translateY(100%) !important;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12) !important;
}

.smg-dashboard-body .smg-offcanvas.is-open {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Desktop: centered popup */
@media (min-width: 768px) {
  .smg-dashboard-body .smg-offcanvas {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 520px !important;
    max-width: calc(100vw - 3rem) !important;
    max-height: 75vh !important;
    border-radius: var(--smg-radius-xl) !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
    opacity: 0 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transition: transform var(--smg-dur-base) var(--smg-ease),
                opacity var(--smg-dur-base) ease !important;
  }

  .smg-dashboard-body .smg-offcanvas.is-open {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Admin bar offset */
  .admin-bar.smg-dashboard-body .smg-offcanvas {
    top: calc(50% + 16px) !important;
  }
}

.smg-offcanvas__header {
  position: sticky !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.25rem var(--smg-card-pad) !important;
  border-bottom: 1px solid var(--smg-border-solid) !important;
  background: var(--smg-surface) !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

.smg-offcanvas__title {
  font-family: var(--smg-font-display) !important;
  font-size: var(--smg-fs-lg) !important;
  font-weight: 700 !important;
  color: var(--smg-text-1) !important;
  margin: 0 !important;
}

.smg-offcanvas__close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  background: transparent !important;
  border: 1.5px solid var(--smg-border-solid) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  color: var(--smg-text-4) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: background var(--smg-dur-fast) ease,
              color var(--smg-dur-fast) ease,
              border-color var(--smg-dur-fast) ease,
              transform var(--smg-dur-fast) ease !important;
}

.smg-offcanvas__close:hover {
  background: rgba(124, 58, 237, 0.06) !important;
  border-color: var(--smg-purple-xlt) !important;
  color: var(--smg-purple) !important;
  transform: rotate(90deg) !important;
}

.smg-offcanvas__close svg {
  width: 14px !important;
  height: 14px !important;
}

.smg-offcanvas__body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 1.5rem var(--smg-card-pad) 2rem !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Mobile: drag handle hint */
.smg-offcanvas__drag-handle {
  display: block !important;
  width: 36px !important;
  height: 4px !important;
  background: var(--smg-border-solid) !important;
  border-radius: 2px !important;
  margin: 0.5rem auto 0 !important;
}

@media (min-width: 768px) {
  .smg-offcanvas__drag-handle {
    display: none !important;
  }
}

/* Offcanvas GF Success Feedback (shown after form submit) */
.smg-offcanvas__success {
  display: none !important;
  text-align: center !important;
  padding: 2rem 1rem !important;
}

.smg-offcanvas__success--visible {
  display: block !important;
  animation: smgFadeInUp 0.4s var(--smg-ease) both !important;
}


/* =====================================================================
   KEYFRAMES
   ===================================================================== */

@keyframes smgCardReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes smgFadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes smgPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.7; }
}

@keyframes smgSpinner {
  to { transform: rotate(360deg); }
}


/* =====================================================================
   UTILITIES
   ===================================================================== */

.smg-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;
}

/* IMPORTANT: .smg-hidden must NOT be used on .gfield elements */
.smg-hidden {
  display: none !important;
}

.smg-text-center { text-align: center !important; }
.smg-text-left   { text-align: left !important; }
.smg-text-right  { text-align: right !important; }


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================================
   ADMIN BAR HANDLING
   ===================================================================== */

.admin-bar .smg-page-loader {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .admin-bar .smg-page-loader {
    top: 46px !important;
  }
}