/* ======================================================================
   AquariumLesson — AL Members Design System (BASELINE)
   File: al-members.modern.css
   Scope: #alMemberArea (ONLY)
   WP/Woo/Elementor-safe: no @layer, high specificity, !important
   ====================================================================== */

/* ----------------------------------------------------------------------
   TOKENS
---------------------------------------------------------------------- */
#alMemberArea{
  --al-accent: #2C6B4A !important;
  --al-accent-2: #5CA892 !important;

  --al-bg: #FFFFFF !important;
  --al-surface: #FFFFFF !important;
  --al-surface-2: #F8FAFC !important;
  --al-border: #E6E8EC !important;

  --al-text: #0F172A !important;
  --al-muted: #64748B !important;
  --al-soft: #94A3B8 !important;

  --al-r1: 14px !important;
  --al-r2: 18px !important;
  --al-r3: 24px !important;

  --al-sh0: 0 1px 0 rgba(16,24,40,.04) !important;
  --al-sh1: 0 12px 30px rgba(16,24,40,.10) !important;
  --al-sh2: 0 20px 60px rgba(16,24,40,.14) !important;

  --al-1: 8px !important;
  --al-2: 12px !important;
  --al-3: 16px !important;
  --al-4: 24px !important;
  --al-5: 32px !important;
  --al-6: 40px !important;

  --al-control-h: 42px !important;
  --al-control-r: 14px !important;

  --al-ring: 0 0 0 4px color-mix(in srgb, var(--al-accent) 14%, transparent) !important;

  --al-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
  --al-text-size: 14px !important;
  --al-line: 1.45 !important;

  --al-content-max: 1120px !important;
  --al-accent-grad: linear-gradient(90deg, var(--al-accent), var(--al-accent-2)) !important;
  /* XP/RING – Single Source of Truth */
  --al-xp-grad: linear-gradient(90deg, #a7f3d0 0%, #22c55e 100%) !important;
  --al-xp-c1: #a7f3d0 !important;
  --al-xp-c2: #22c55e !important;
}

:root{
  --al-sidebar-w: 72px;
  --al-sidebar-gap: 16px;
}

/* =========================================================
   Tanks-local product mode
   Blau = interaction
   Grün = health/success
========================================================= */
#alMemberArea.al-tanks{
  --al-accent: #2563EB !important;
  --al-accent-2: #60A5FA !important;
  --al-ring: 0 0 0 4px rgba(37,99,235,.14) !important;

  --al-tanks-success: #16A34A !important;
  --al-tanks-warn: #D97706 !important;
  --al-tanks-danger: #DC2626 !important;

  --al-tanks-surface-1: #FFFFFF !important;
  --al-tanks-surface-2: #F8FAFC !important;
  --al-tanks-surface-3: #F1F5F9 !important;
  --al-tanks-border: rgba(15,23,42,.08) !important;
  --al-tanks-text: #0F172A !important;
  --al-tanks-muted: #64748B !important;
}

/* =========================================================
   AquariumLesson — Mobile Page Gutter (SAFE / Elementor)
   Ziel:
   - Horizontal: 16px (einmalig, nur vom Elementor Wrapper)
   - Vertikal: 0px (damit oben kein 65px-Stack entsteht)
========================================================= */

@media (max-width: 1023px){

  /* 1) Global verfügbar machen (Elementor Wrapper ist oft oberhalb #alMemberArea) */
  body{
    --al-page-gutter-x: 16px;
    --al-page-gutter-y: 0px;
  }

  /* 2) Elementor Page Container: nur EIN Seitenabstand (X), Y = 0 */
  body .elementor-element.e-con-full.e-flex.e-con.e-parent{
    padding-left:  var(--al-page-gutter-x, 16px) !important;
    padding-right: var(--al-page-gutter-x, 16px) !important;
    padding-top:   var(--al-page-gutter-y, 0px) !important;
    padding-bottom:var(--al-page-gutter-y, 0px) !important;
  }

  /* 3) AL Wrapper dürfen horizontal NICHT nochmal addieren */
  #alMemberArea .al-container,
  #alMemberArea [class*="__container"],
  #alMemberArea [class*="__shell"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) AL Wrapper dürfen vertikal NICHT nochmal „oben“ addieren (optional, aber für deinen Case sinnvoll) */
  #alMemberArea .al-container,
  #alMemberArea [class*="__container"],
  #alMemberArea [class*="__shell"]{
    padding-top: 0 !important;
  }

  /* 5) Achievements/Sections: außen komplett 0 (Gutter kommt vom Page Wrapper) */
  #alMemberArea .al-achievements,
  #alMemberArea #alAchievements{
    padding: 0 !important;
  }

  /* 6) Tanks: Shell killen (genau dein Problem-Node) */
  #alMemberArea .al-tanks__shell{
    padding: 0 !important;
  }
}

@media (max-width: 1023px){
  body.woocommerce-account #alMemberArea.al-tanks .al-tanks-shell{
    padding-top: 0 !important;
    /* optional, nur wenn unten auch unnötig ist */
    /* padding-bottom: 0 !important; */
  }
}

/* =========================================================
   AquariumLesson — Mobile Page Gutter (H=16px, V=0px)
   Scope: ALL pages that contain #alMemberArea
========================================================= */

@media (max-width: 1023px){

  /* Scope only when MemberArea exists */
  body:has(#alMemberArea){
    --al-page-gutter: 16px;
  }

  /* Elementor wrapper(s): keep ONLY horizontal gutter, kill vertical */
  body:has(#alMemberArea) .elementor-element.e-con-full.e-flex.e-con.e-parent,
  body:has(#alMemberArea) .elementor-element.e-con-full.e-con.e-parent,
  body:has(#alMemberArea) .elementor-element.e-con.e-parent{
    padding-left:  var(--al-page-gutter, 16px) !important;
    padding-right: var(--al-page-gutter, 16px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Some Elementor setups put padding on inner wrapper */
  body:has(#alMemberArea) .e-con-inner{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* AL wrappers must NOT add horizontal padding again */
  body:has(#alMemberArea) #alMemberArea .al-container,
  body:has(#alMemberArea) #alMemberArea [class*="__container"],
  body:has(#alMemberArea) #alMemberArea [class*="__shell"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =========================================================
   AquariumLesson — Vertikalpadding eliminieren fuer Mobile Page Gutter (SAFE / Elementor)
   Fix: CSS var available outside #alMemberArea + fallback
========================================================= */

/* Desktop workspace offset: ONLY content, never header */
@media (min-width: 1024px){
  body.al-workspace{
    padding-left: 0 !important; /* safety */
  }

  body.al-workspace #content,
  body.al-workspace .site-content,
  body.al-workspace .ast-container,
  body.al-workspace main{
    position: relative;
  }

  /* Offset the main content area */
  body.al-workspace #content{
    padding-left: calc(var(--al-sidebar-w) + var(--al-sidebar-gap));
  }

  /* If Astra uses .ast-container for inner width, keep it aligned */
  body.al-workspace #content .ast-container{
    padding-left: 0;
  }
}



/* ----------------------------------------------------------------------
   BASE / RESET (ONLY inside #alMemberArea)
---------------------------------------------------------------------- */
#alMemberArea,
#alMemberArea *{
  box-sizing:border-box !important;
}

#alMemberArea{
  font-family: var(--al-font) !important;
  font-size: var(--al-text-size) !important;
  line-height: var(--al-line) !important;
  color: var(--al-text) !important;
}

#alMemberArea a{
  color: color-mix(in srgb, var(--al-accent) 90%, #000) !important;
  text-decoration:none !important;
}

/* --------------------------------------------
   LINKS — tap target + crisp underline (baseline)
-------------------------------------------- */
#alMemberArea a{
  text-decoration: none !important;
}

#alMemberArea a:active{
  opacity: .82 !important;
}

#alMemberArea a:hover{
  text-decoration: none !important;
  opacity: .9 !important;
}

#alMemberArea .muted,
#alMemberArea .u-muted{
  color: var(--al-muted) !important;
}

#alMemberArea :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline: 3px solid color-mix(in srgb, var(--al-accent) 28%, transparent) !important;
  outline-offset: 2px !important;
  border-radius: 12px !important;
}

/* Headings */
#alMemberArea h1{
  font-size: 26px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 0 0 10px !important;
}
#alMemberArea h2{
  font-size: 18px !important;
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
}
#alMemberArea h3{
  font-size: 15px !important;
  font-weight: 900 !important;
  margin: 0 0 6px !important;
}
#alMemberArea p{
  margin: 0 0 12px !important;
}

/* ----------------------------------------------------------------------
   WOO MY ACCOUNT (ONLY inside #alMemberArea)
---------------------------------------------------------------------- */
#alMemberArea .woocommerce{
  max-width: var(--al-content-max) !important;
  margin: 0 auto !important;
  padding: var(--al-4) !important;
}

#alMemberArea .woocommerce-MyAccount-navigation,
#alMemberArea .woocommerce-MyAccount-content{
  float:none !important;
  width:auto !important;
}

@media (min-width: 980px){
  #alMemberArea .woocommerce{
    display:grid !important;
    grid-template-columns: 300px minmax(0,1fr) !important;
    gap: var(--al-4) !important;
    align-items:start !important;
  }
  #alMemberArea .woocommerce-MyAccount-navigation{
    position: sticky !important;
    top: 110px !important;
    align-self:start !important;
  }
}

/* Navigation card */
#alMemberArea .woocommerce-MyAccount-navigation{
  background: var(--al-surface) !important;
  border: 1px solid var(--al-border) !important;
  border-radius: var(--al-r2) !important;
  box-shadow: var(--al-sh0) !important;
  padding: 10px !important;
}

#alMemberArea .woocommerce-MyAccount-navigation ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

#alMemberArea .woocommerce-MyAccount-navigation li a{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height: var(--al-control-h) !important;
  padding: 0 12px !important;
  border-radius: var(--al-control-r) !important;
  font-weight: 900 !important;
  color: var(--al-text) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}

#alMemberArea .woocommerce-MyAccount-navigation li a:hover{
  background: var(--al-surface-2) !important;
  border-color: var(--al-border) !important;
  text-decoration:none !important;
}

#alMemberArea .woocommerce-MyAccount-navigation li.is-active a,
#alMemberArea .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.is-active a{
  background: color-mix(in srgb, var(--al-accent) 10%, #fff) !important;
  border-color: color-mix(in srgb, var(--al-accent) 26%, var(--al-border)) !important;
}

/* Content blocks as cards */
#alMemberArea .woocommerce-MyAccount-content > *{
  background: linear-gradient(180deg,#fff 0%,#fff 70%,var(--al-surface-2) 100%) !important;
  border:1px solid color-mix(in srgb,var(--al-border) 85%,#fff) !important;
  border-radius: var(--al-r2) !important;
  box-shadow: var(--al-sh0) !important;
  padding: 16px !important;
  margin: 0 0 var(--al-4) !important;
}

/* ----------------------------------------------------------------------
   BUTTONS (Poppins-optimized) — Premium SaaS 2026
---------------------------------------------------------------------- */
#alMemberArea :is(
  .al-btn,.al-btn-primary,.al-btn-ghost,
  .al-btn--primary,.al-btn--ghost,
  .button,.wp-element-button,.woocommerce-Button,.elementor-button,
  button,input[type="button"],input[type="submit"]
){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  min-height: var(--al-control-h) !important;
  padding: 0 14px !important;
  border-radius: var(--al-control-r) !important;

  font-family: var(--al-font) !important; /* -> Poppins in deinem Token */
  font-size: 14px !important;            /* Poppins: 13 wirkt oft zu dicht */
   font-weight: 800 !important;       /* leichteres Gewicht als 900 */
  letter-spacing: 0.02em !important; /* Mehr Luft für Klarheit */
  line-height: 1.18 !important;      /* Wenig Abstand für Klarheit */
  text-transform: capitalize !important; /* Wenn sinnvoll – mehr „Stil“ */

  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;

  border: 1px solid color-mix(in srgb, var(--al-border) 84%, #fff) !important;
  background: #fff !important;
  color: var(--al-text) !important;

  cursor: pointer !important;
  text-decoration:none !important;
  user-select: none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  white-space: nowrap !important;

  /* Premium depth (clean, not "puffy") */
box-shadow: 0 1px 0 rgba(16,24,40,.05) !important;

  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background-color .14s ease,
    filter .14s ease !important;

  width:auto !important;
}

/* Button stacks: wenn mehrere Buttons untereinander stehen */
#alMemberArea :is(.u-right, .al-actions, .al-btn-group) > :is(
  .al-btn, .al-btnn,
  .button, .wp-element-button, .woocommerce-Button, .elementor-button,
  button, input[type="button"], input[type="submit"]
) + :is(
  .al-btn, .al-btnn,
  .button, .wp-element-button, .woocommerce-Button, .elementor-button,
  button, input[type="button"], input[type="submit"]
){
  margin-top: var(--al-2) !important; /* 12px Abstand */
}


/* Hover: crisp lift */
#alMemberArea :is(.al-btn,.button,.wp-element-button,.woocommerce-Button,.elementor-button,button):hover{
  transform: translateY(-2px) !important;  /* stärkere "Hover-Lift" */
  box-shadow: 0 6px 14px rgba(16,24,40,.10) !important;
}


/* Active: press */
#alMemberArea :is(.al-btn,.button,.wp-element-button,.woocommerce-Button,.elementor-button,button):active{
  transform: translateY(0px) scale(.99) !important;
  box-shadow: 0 1px 0 rgba(16,24,40,.05) !important;
}


/* Focus-visible */
#alMemberArea :is(.al-btn,.button,.wp-element-button,.woocommerce-Button,.elementor-button,button):focus-visible{
  outline: none !important;
  box-shadow:
    var(--al-ring),
    0 1px 0 rgba(16,24,40,.05),
    0 10px 22px rgba(16,24,40,.10) !important;
}

/* Disabled */
#alMemberArea :is(button,[type="button"],[type="submit"],.button,.wp-element-button,.woocommerce-Button,.elementor-button)[disabled],
#alMemberArea :is(button,[type="button"],[type="submit"],.button,.wp-element-button,.woocommerce-Button,.elementor-button).disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: saturate(.9) !important;
  box-shadow:
    0 1px 0 rgba(16,24,40,.04),
    0 8px 18px rgba(16,24,40,.06) !important;
}


/* ----------------------------
   PRIMARY — AquariumLesson Aqua Surface
---------------------------- */
#alMemberArea :is(.al-btn-primary,.al-btn--primary,.button.alt){
  background: linear-gradient(180deg, #2C6B4A 0%, #1f7a4d 100%) !important;
  color: #ffffff !important;

  border: 1px solid #1f7a4d !important;

  box-shadow:
    0 10px 24px rgba(22,101,52,.22),
    inset 0 1px 0 rgba(255,255,255,.16) !important;

  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

#alMemberArea.al-tanks :is(.al-btn-primary,.al-btn--primary,.button.alt){
  background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(37,99,235,.92) !important;
  box-shadow:
    0 10px 24px rgba(37,99,235,.20),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

#alMemberArea :is(.al-btn-primary,.al-btn--primary,.button.alt):hover{
  transform: translateY(-1px) !important;

  box-shadow:
    0 14px 30px rgba(22,101,52,.28),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

#alMemberArea :is(.al-btn-primary,.al-btn--primary,.button.alt):active{
  transform: translateY(0) scale(.98) !important;
  box-shadow:
    0 4px 12px rgba(22,101,52,.2) !important;
}

#alMemberArea.al-tanks :is(.al-btn--ghost,.al-btn-ghost){
  background: rgba(255,255,255,.88) !important;
  color: #0F172A !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 1px 0 rgba(16,24,40,.04) !important;
}


#alMemberArea :is(.al-btn-primary,.al-btn--primary,.button.alt):hover{
  box-shadow: 0 18px 40px color-mix(in srgb, var(--al-accent) 26%, transparent) !important;
}

/* ----------------------------
   GHOST — true ghost, not "grey button"
---------------------------- */
#alMemberArea :is(.al-btn-ghost,.al-btn--ghost){
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 92%, #fff) !important;
  color: var(--al-text) !important;
  box-shadow: none !important;  /* Kein tiefer Schatten */
  transition: background-color .15s ease, border-color .15s ease !important;
}

#alMemberArea :is(.al-btn-ghost,.al-btn--ghost):hover{
  background: color-mix(in srgb, var(--al-surface-2) 20%, #fff) !important; /* mehr Kontrast */
  border-color: color-mix(in srgb, var(--al-accent) 80%, #fff) !important;    /* Subtiler Fokus */
}

/* ----------------------------
   Small size (Poppins: keep readable)
---------------------------- */
#alMemberArea .al-btn--sm{
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;

  font-size: 13px !important;          /* 12 -> 13 (Poppins wins here) */
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  line-height: 1.15 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #alMemberArea :is(
    .al-btn,.al-btn-primary,.al-btn-ghost,
    .al-btn--primary,.al-btn--ghost,
    .button,.wp-element-button,.woocommerce-Button,.elementor-button,
    button,input[type="button"],input[type="submit"]
  ){
    transition: none !important;
  }
}

/* ----------------------------------------------------------------------
   CARDS / STATES / UTILS (Member UI only)
---------------------------------------------------------------------- */
#alMemberArea .al-card{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffffff 78%,
      var(--al-surface-2) 100%
    ) !important;

  border: 1px solid color-mix(in srgb, var(--al-border) 90%, #fff) !important;
  border-radius: var(--al-r2) !important;

  /* Crisp elevation — NO white blur, NO glow */
  box-shadow:
    0 1px 0 rgba(16,24,40,.04),
    0 8px 18px rgba(16,24,40,.08) !important;

  overflow: hidden !important;
  background-clip: padding-box !important;
}

#alMemberArea .al-empty,
#alMemberArea .al-empty-state{
  padding:18px !important;
  border-radius: var(--al-r2) !important;
  border:1px dashed color-mix(in srgb, var(--al-border) 85%, #fff) !important;
  background: var(--al-surface-2) !important;
  color: var(--al-muted) !important;
}


#alMemberArea .u-right{ margin-left:auto !important; }
#alMemberArea .u-visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
}

/* ======================================================================
   BASELINE FIX — Card spacing (Woo/MyAccount + generic cards)
   ====================================================================== */

/* 1) Woo content stack: always spacing between modules */
#alMemberArea .woocommerce-MyAccount-content{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--al-4) !important;               /* <- DAS ist der Hauptfix */
  min-width: 0 !important;
}

/* 2) If Woo injects blocks as first-level children, keep them full-width */
#alMemberArea .woocommerce-MyAccount-content > *{
  width: 100% !important;
  margin: 0 !important;                      /* avoid random theme margins */
}

/* 3) Fallback spacing for cards you control (non-Woo blocks / custom cards) */
#alMemberArea .al-card{
  margin: 0 !important;
}

#alMemberArea .al-card:last-child{
  margin-bottom: 0 !important;
}

@media (max-width: 767px){
  #alMemberArea .al-security-grid > .al-card{
    margin-bottom: var(--al-3) !important;
  }

  #alMemberArea .al-security-grid > .al-card:last-child{
    margin-bottom: 0 !important;
  }
}

/* 4) Fallback margin ONLY if gap isn't applied (older/overridden cases) */
#alMemberArea .woocommerce-MyAccount-content > *{
  margin-bottom: 0 !important;
}
#alMemberArea .woocommerce-MyAccount-content:not([style*="gap"]) > *{
  margin-bottom: var(--al-4) !important;
}
#alMemberArea .woocommerce-MyAccount-content:not([style*="gap"]) > *:last-child{
  margin-bottom: 0 !important;
}

/* ======================================================================
   BASELINE PATCH — missing essentials (safe + scoped)
   Append this at end of al-members.modern.css
   ====================================================================== */

/* --------------------------------------------
   0) Member area canvas (optional but recommended)
-------------------------------------------- */
#alMemberArea{
  background: var(--al-bg) !important;
  min-height: 60vh !important;
}


/* --------------------------------------------
   1) Fix form selector: don't nuke checkboxes/radios etc.
-------------------------------------------- */
#alMemberArea :where(input,select,textarea){
  font: inherit !important;
}

#alMemberArea :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
                     select,textarea){
  width: 100% !important;
  min-height: var(--al-control-h) !important;
  border-radius: var(--al-control-r) !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 86%, #fff) !important;
  padding: 10px 12px !important;
  background: #fff !important;
  color: var(--al-text) !important;
  box-shadow: var(--al-sh0) !important;
}

#alMemberArea :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
                     select,textarea):focus{
  outline: none !important;
  border-color: color-mix(in srgb, var(--al-accent) 45%, var(--al-border)) !important;
  box-shadow: var(--al-ring) !important;
}

/* Checkboxes / radios aligned + clickable */
#alMemberArea :where(input[type="checkbox"], input[type="radio"]){
  width: auto !important;
  min-height: auto !important;
  margin: 0 !important;
  transform: translateY(1px) !important;
  accent-color: var(--al-accent) !important;
}

#alMemberArea :where(label){
  font-weight: 800 !important;
  color: var(--al-text) !important;
}

/* Help text */
#alMemberArea .description,
#alMemberArea .help,
#alMemberArea .u-help{
  color: var(--al-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* --------------------------------------------
   FORMS — premium baseline polish
-------------------------------------------- */
#alMemberArea :where(input,select,textarea)::placeholder{
  color: color-mix(in srgb, var(--al-muted) 80%, #fff) !important;
  opacity: 1 !important;
}

#alMemberArea :where(input,select,textarea):disabled{
  opacity: .65 !important;
  cursor: not-allowed !important;
  background: color-mix(in srgb, var(--al-surface-2) 70%, #fff) !important;
}

/* Chrome autofill */
#alMemberArea input:-webkit-autofill{
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--al-text) !important;
  border-color: color-mix(in srgb, var(--al-border) 80%, #fff) !important;
}


/* --------------------------------------------
   2) Buttons: disabled + active + loading-friendly
-------------------------------------------- */
#alMemberArea :is(.al-btn,.al-btn-primary,.al-btn-ghost,.al-btn--primary,.al-btn--ghost,.button,.wp-element-button,.woocommerce-Button,.elementor-button,button,input[type="button"],input[type="submit"]):active{
  transform: translateY(0px) scale(.99) !important;
  box-shadow: var(--al-sh0) !important;
}

#alMemberArea :is(button,[type="button"],[type="submit"],.button,.wp-element-button,.woocommerce-Button,.elementor-button)[disabled],
#alMemberArea :is(button,[type="button"],[type="submit"],.button,.wp-element-button,.woocommerce-Button,.elementor-button).disabled{
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: var(--al-sh0) !important;
}

/* --------------------------------------------
   3) Lists / separators / small type baseline
-------------------------------------------- */
#alMemberArea ul,
#alMemberArea ol{
  margin: 0 0 0px !important;
  padding-left: 4px !important;
}

#alMemberArea li{
  margin: 6px 0 !important;
}

#alMemberArea hr{
  border: 0 !important;
  height: 1px !important;
  background: color-mix(in srgb, var(--al-border) 90%, #fff) !important;
  margin: var(--al-4) 0 !important;
}

#alMemberArea small,
#alMemberArea .u-small{
  font-size: 12px !important;
  color: var(--al-muted) !important;
}

/* Inline code (subtle, premium) */
#alMemberArea code,
#alMemberArea .al-code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" !important;
  font-size: 12px !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--al-surface-2) 80%, #fff) !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 80%, #fff) !important;
}

/* --------------------------------------------
   4) Tables (most pages eventually need this)
-------------------------------------------- */
#alMemberArea table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border-radius: var(--al-r2) !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 85%, #fff) !important;
  background: #fff !important;
  box-shadow: var(--al-sh0) !important;
}

#alMemberArea th,
#alMemberArea td{
  padding: 12px 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--al-border) 80%, #fff) !important;
  text-align: left !important;
  vertical-align: middle !important;
}

#alMemberArea th{
  font-size: 12px !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: var(--al-muted) !important;
  background: linear-gradient(180deg, var(--al-surface-2), #fff) !important;
}

#alMemberArea tr:last-child td{
  border-bottom: 0 !important;
}

/* --------------------------------------------
   5) Notices / alerts (success, error, info, warn)
-------------------------------------------- */
#alMemberArea .al-notice,
#alMemberArea .notice,
#alMemberArea .woocommerce-message,
#alMemberArea .woocommerce-info,
#alMemberArea .woocommerce-error{
  border-radius: var(--al-r2) !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 85%, #fff) !important;
  background: #fff !important;
  box-shadow: var(--al-sh0) !important;
  padding: 12px 14px !important;
  margin: 0 0 var(--al-4) !important;
}

#alMemberArea .al-notice--success,
#alMemberArea .woocommerce-message{
  border-color: color-mix(in srgb, var(--al-accent) 35%, var(--al-border)) !important;
  background: color-mix(in srgb, var(--al-accent) 8%, #fff) !important;
}

#alMemberArea .al-notice--info,
#alMemberArea .woocommerce-info{
  border-color: color-mix(in srgb, #2563eb 24%, var(--al-border)) !important;
  background: color-mix(in srgb, #2563eb 6%, #fff) !important;
}

#alMemberArea .al-notice--warn{
  border-color: color-mix(in srgb, #ca8a04 28%, var(--al-border)) !important;
  background: color-mix(in srgb, #ca8a04 8%, #fff) !important;
}

#alMemberArea .al-notice--error,
#alMemberArea .woocommerce-error{
  border-color: color-mix(in srgb, #dc2626 28%, var(--al-border)) !important;
  background: color-mix(in srgb, #dc2626 7%, #fff) !important;
}

/* --------------------------------------------
   6) Layout utilities (baseline, no markup changes needed)
-------------------------------------------- */
#alMemberArea .al-stack{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--al-4) !important;
  min-width: 0 !important;
}

/* --------------------------------------------
   UTIL — subtle divider line
-------------------------------------------- */
#alMemberArea .u-divider{
  height: 1px !important;
  background: color-mix(in srgb, var(--al-border) 90%, #fff) !important;
}

/* --------------------------------------------
   Button stacks (mobile-safe spacing)
-------------------------------------------- */

/* Wenn Buttons untereinander stehen */
#alMemberArea .al-stack > :is(
  .al-btn,
  .button,
  .wp-element-button,
  .woocommerce-Button,
  .elementor-button
){
  margin: 0 !important; /* Buttons bleiben clean */
}

/* Optional: engeres Spacing für kompakte Stacks */
#alMemberArea .al-stack.al-stack--tight{
  gap: var(--al-3) !important;
}

#alMemberArea .al-row{
  display: flex !important;
  align-items: center !important;
  gap: var(--al-3) !important;
  min-width: 0 !important;
}



#alMemberArea .al-wrap{
  flex-wrap: wrap !important;
}

#alMemberArea .al-grid{
  display: grid !important;
  row-gap: var(--al-4) !important;
column-gap: var(--al-3) !important; /* 16px statt 24px */
  min-width: 0 !important;
}

@media (min-width: 820px){
  #alMemberArea .al-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #alMemberArea .al-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* --------------------------------------------
   7) Make "card spacing fix" not double-apply
   (your current file sets gap + margin-bottom; this prevents accidental extra space)
-------------------------------------------- */
#alMemberArea .woocommerce-MyAccount-content{
  gap: var(--al-4) !important;
}

#alMemberArea .woocommerce-MyAccount-content > *{
  margin-bottom: 0 !important; /* gap already handles spacing */
}

/* ======================================================================
   BASELINE COMPONENTS — grid, cards, skeleton, button variants
   Scope: #alMemberArea only
   ====================================================================== */

/* -------- Grid system (mobile-first) -------- */
#alMemberArea .al-gap{
  row-gap: var(--al-4) !important;     /* vertikal bleibt großzügig */
  column-gap: var(--al-3) !important;  /* horizontal enger (16px) */
}


#alMemberArea .al-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: var(--al-4) !important;
column-gap: var(--al-3) !important;
  min-width: 0 !important;
}

/* Your markup uses .al-grid-2 / .al-grid-3 (not --2/--3) */
@media (min-width: 820px){
  #alMemberArea .al-grid.al-grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #alMemberArea .al-grid.al-grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* Spans */
#alMemberArea .al-col-span-2{ grid-column: auto !important; }
#alMemberArea .al-col-span-full{ grid-column: 1 / -1 !important; }

@media (min-width: 820px){
  #alMemberArea .al-col-span-2{ grid-column: span 2 !important; }
}

/* Prevent grid children from overflowing */
#alMemberArea .al-grid > *{ min-width: 0 !important; }

/* -------- Card structure (works for all pages) -------- */
#alMemberArea .al-card{
  background: linear-gradient(180deg,#fff 0%,#fff 72%,var(--al-surface-2) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 85%, #fff) !important;
  border-radius: var(--al-r2) !important;
  box-shadow: var(--al-sh0) !important;
  overflow: hidden !important;
}

#alMemberArea .al-card-head{
  padding: 16px 18px !important;  /* Sanfte Anpassung für bessere Balance */
  border-bottom: 1px solid color-mix(in srgb, var(--al-border) 75%, #fff) !important;
}

#alMemberArea .al-card-body{
  padding: 16px !important;
  min-width: 0 !important;
}

#alMemberArea .al-card-foot{
  padding: 14px 18px !important;
  color: var(--al-muted) !important; /* Subtile Abstufung */
}

/* Better heading rhythm inside card heads */
#alMemberArea .al-card-head h2,
#alMemberArea .al-card-head h3{
  margin: 0 !important;
}
#alMemberArea .al-card-head h2{ font-size: 18px !important; }
#alMemberArea .al-card-head h3{ font-size: 15px !important; }

/* --------------------------------------------
   CARDS — subtle interactive polish (baseline)
-------------------------------------------- */
#alMemberArea .al-card{
  transition: box-shadow .16s ease, border-color .16s ease, background-color .16s ease !important;
}

@media (hover:hover){
#alMemberArea .al-card:hover:not(.al-tanks__hero-card){
  transform: none !important;
  box-shadow: var(--al-shadow) !important;
  border-color: rgba(0,0,0,.06) !important;
}
}

/* -------- Skeletons (generic loading) -------- */
#alMemberArea .al-skeleton{
  position: relative !important;
  display: block !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--al-border) 55%, #fff) !important;
  overflow: hidden !important;
}
#alMemberArea .al-skeleton::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateX(-60%) !important;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, #fff 55%, transparent),
    transparent
  ) !important;
  animation: al-skeleton 1.05s ease-in-out infinite !important;
}
@keyframes al-skeleton{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(160%); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #alMemberArea .al-skeleton::after{ animation: none !important; }
  #alMemberArea :is(.al-btn,.button,.wp-element-button,.woocommerce-Button,.elementor-button,button){ transition: none !important; }
}

/* -------- Button variants used in dashboard markup -------- */
/* secondary: clean white, slightly stronger border */
#alMemberArea :is(.al-btn--secondary,.al-btn-secondary){
  background: #fff !important;
  border-color: color-mix(in srgb, var(--al-border) 92%, #000) !important;
  color: var(--al-text) !important;
}

/* link: inline-ish, aligned with buttons */
#alMemberArea :is(.al-btn--link,.al-btn-link){
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;

  /* === ALIGNMENT FIX === */
  display: inline-flex !important;
  align-items: center !important;
  min-height: var(--al-control-h) !important;
  padding: 0 4px !important;

  font-weight: 900 !important;
  color: color-mix(in srgb, var(--al-accent) 92%, #000) !important;
}

#alMemberArea :is(.al-btn--link,.al-btn-link):hover{
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  opacity: .88 !important;
}

/* Make primary/secondary buttons look good together in footers */
#alMemberArea .al-card-foot .al-btn{ margin: 0 !important; }

/* --------------------------------------------
   PROGRESS (native <progress>) — baseline
-------------------------------------------- */
#alMemberArea progress{
  width: 100% !important;
  height: 6px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--al-border) 80%, #fff) !important;
}

#alMemberArea progress::-webkit-progress-bar{
  background: color-mix(in srgb, var(--al-border) 80%, #fff) !important;
}

#alMemberArea progress::-webkit-progress-value{
  background: linear-gradient(
    90deg,
    var(--al-accent),
    var(--al-accent-2)
  ) !important;
  border-radius: 999px !important;
}

#alMemberArea progress::-moz-progress-bar{
  background: linear-gradient(
    90deg,
    var(--al-accent),
    var(--al-accent-2)
  ) !important;
  border-radius: 999px !important;
}

/* --------------------------------------------
   CONTENT RHYTHM — prevent double spacing
-------------------------------------------- */
#alMemberArea .al-card-body > *:last-child,
#alMemberArea .al-card-foot > *:last-child{
  margin-bottom: 0 !important;
}

/* --------------------------------------------
   TEXT OVERFLOW SAFETY
-------------------------------------------- */
#alMemberArea .u-truncate{
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#alMemberArea .u-wrap{
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* --------------------------------------------
   MEDIA SAFETY
-------------------------------------------- */
/* Content media (NOT UI emoji/icons) */
#alMemberArea img:not(.emoji),
#alMemberArea video{
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
}

/* UI emoji/icons (Twemoji SVG img) */
#alMemberArea img.emoji{
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  max-width: none !important;
  vertical-align: -0.15em;
}

/* --------------------------------------------
   EMPTY STATES (neutral)
-------------------------------------------- */
#alMemberArea .al-empty,
#alMemberArea .al-empty-state{
  text-align: center !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* --------------------------------------------
   OVERFLOW SAFETY — safer than global hidden
-------------------------------------------- */
#alMemberArea{
  overflow-x: clip !important; /* clip > hidden, weniger Nebenwirkungen */
}

#alMemberArea .al-card,
#alMemberArea .woocommerce-MyAccount-content,
#alMemberArea .al-container{
  min-width: 0 !important;
}



/* --------------------------------------------
   TYPO RHYTHM — better default spacing in cards
-------------------------------------------- */
#alMemberArea .al-card :where(h1,h2,h3){
  scroll-margin-top: 90px !important;
}

#alMemberArea .al-card :where(p){
  max-width: 70ch !important;
}

/* =====================================================
   AL — Gradient / Glow / Progress Kit (GLOBAL)
   Scope: #alMemberArea only
   ===================================================== */
#alMemberArea{
  /* Accent palette */
  --al-g1: #22c55e;    /* green-500 */
  --al-g2: #14b8a6;    /* teal-500 */
  --al-g3: #0ea5e9;    /* sky-500 */
  --al-g4: #059669;    /* emerald-600 */
  --al-ink-900: #0f172a;

  /* Premium gradients */
  --al-grad-emerald: radial-gradient(circle at 0% 0%, #34d399, #059669 45%, #022c22 100%);
  --al-grad-aurora: linear-gradient(90deg, var(--al-g1), var(--al-g2), var(--al-g3));
  --al-grad-surface: radial-gradient(circle at top left, rgba(16,185,129,.14), transparent 55%),
                     radial-gradient(circle at bottom right, rgba(59,130,246,.12), transparent 55%),
                     var(--al-ink-900);

  /* Shadows */
  --al-shadow-glow: 0 20px 40px rgba(15,118,110,.45);
  --al-shadow-card: 0 10px 22px rgba(15,23,42,.06);
  --al-shadow-card-hover: 0 18px 30px rgba(15,23,42,.08);

  /* Radius */
  --al-r-card: 18px;
  --al-r-pill: 999px;
}

/* ---------- HERO / HIGHLIGHT CARD ---------- */
#alMemberArea .al-hero-card{
  position: relative;
  border-radius: var(--al-r-card);
  padding: 1.4rem 1.6rem;
  background: var(--al-grad-emerald);
  color: #ecfdf5;
  box-shadow: var(--al-shadow-glow);
  overflow: hidden;
  isolation: isolate;
}
#alMemberArea .al-hero-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,.24), transparent 55%),
    radial-gradient(circle at 85% 120%, rgba(22,163,74,.5), transparent 60%);
  opacity:.55;
  pointer-events:none;
  z-index:-1;
}

/* Alternative dunkle Hero (wie achievements-hero) */
#alMemberArea .al-hero-card--dark{
  background: var(--al-grad-surface);
  color: #e5f6ff;
  box-shadow: 0 18px 40px rgba(2,6,23,.35);
}

/* ---------- PILLS ---------- */
#alMemberArea .al-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.35rem .85rem;
  border-radius: var(--al-r-pill);
  border: 1px solid rgba(148,163,184,.55);
  background: rgba(15,23,42,.78);
  color: #e5e7eb;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform: uppercase;
}

/* ---------- PROGRESS (XP / generic) ---------- */
#alMemberArea .al-bar{
  width:100%;
  height:8px;
  border-radius: var(--al-r-pill);
  background: rgba(15,23,42,.8);
  overflow:hidden;
}
#alMemberArea .al-bar__fill{
  height:100%;
  width:0%;
  border-radius: inherit;
  background: var(--al-grad-aurora);
  transform-origin:left center;
  transition: width .45s ease-out;
}

/* Light progress (für weiße Cards) */
#alMemberArea .al-bar--light{
  background: #e5e7eb;
}
#alMemberArea .al-bar--light .al-bar__fill{
  background: linear-gradient(90deg, #3b82f6, #22c55e);
}

/* ---------- PREMIUM NEUTRAL CARD ---------- */
#alMemberArea .al-card--soft{
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: var(--al-shadow-card);
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
#alMemberArea .al-card--soft:hover{
  transform: none;
  box-shadow: var(--al-shadow-card);
}

/* ===============================
   STATUS PROGRESS (BASELINE)
   =============================== */

.al-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.10);
  overflow: hidden;
  position: relative;
}

.al-progress::before {
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  pointer-events:none;
  opacity: .55;
}

.al-progress__fill {
  height: 100%;
  width: var(--p,0%);
  border-radius: 999px;
  background: rgba(44,107,74,.85); /* brand green */
}


/* =========================================================
   WORKSPACE: CONTENT SIDEBAR DESKTOP Content dockt links an die Rail an (global, ohne Page-IDs)
   ========================================================= */

:root{
  --al-sidebar-w: 72px;
  --al-sidebar-gap: 16px;
  --al-workspace-pad-r: 24px;
}

@media (min-width: 1024px){

  /* Der eigentliche Shift passiert (hast du schon), wir ergänzen nur rechts-Padding */
  body.al-workspace #content{
    padding-left: calc(var(--al-sidebar-w) + var(--al-sidebar-gap)) !important;
    padding-right: var(--al-workspace-pad-r) !important;
  }

  /* Astra Container NICHT zentrieren -> links andocken */
  body.al-workspace #content .ast-container{
    margin-left: 0 !important;
    margin-right: auto !important;

    /* optional: weiterhin “nice max width”, aber links statt centered */
    max-width: var(--al-content-max, 1120px) !important;
  }

  /* Elementor boxed Container ebenfalls links andocken */
  body.al-workspace .elementor-section.elementor-section-boxed > .elementor-container{
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: var(--al-content-max, 1120px) !important;
  }
}

/* Account-Area: Member-Root wird um die Rail verschoben */
@media (min-width: 1024px){
  body.account-area #alMemberArea{
    padding-left: calc(var(--al-sidebar-w, 72px) + var(--al-sidebar-gap, 16px)) !important;
    padding-right: 24px !important; /* optional */
    box-sizing: border-box;
  }
}


/* =========================================================
   ACCOUNT WORKSPACE: left-anchored SaaS Layout
   ========================================================= */
@media (min-width: 1024px){

  /* 1) Elementor/Astra Centering im Account-Bereich neutralisieren */
  body.account-area :is(.elementor-section-wrap, [data-elementor-id]) > .e-con{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.account-area #content .ast-container{
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* 2) Workspace: wir geben dem eigentlichen Member-Root eine Layout-Schiene */
  body.account-area #alMemberArea{
    /* Rail Offset */
    padding-left: calc(var(--al-rail-w) + var(--al-rail-gap)) !important;
    padding-right: var(--al-workspace-pad) !important;
    box-sizing: border-box;
  }

  /* 3) “Content Frame” im Workspace: full width, aber capped + links am Rail */
  body.account-area #alMemberArea > *{
    max-width: var(--al-workspace-max);
    margin-left: 0 !important;
    margin-right: auto !important;
  }

/* =========================================================
   HIDE WORKSPACE SIDEBAR ON MOBILE / TABLET
   Desktop-only rail (>=1024px)
   ========================================================= */

@media (max-width: 1023px){
  aside.al-sidebar{
    display: none !important;
  }
}

/* =========================================================
   AL MEMBER AREA — FULL BLEED (no unwanted left/right gaps)
   Put at VERY END of al-members.modern.css
========================================================= */

/* 1) Remove Astra/Elementor container clamping on account/member pages */
body.account-area #content,
body.account-area .site-content,
body.account-area .ast-container,
body.account-area .elementor-section,
body.account-area .elementor-container,
body.account-area .e-con{
  max-width: none !important;
  width: 100% !important;
}

/* Astra container adds padding that looks like "gaps" */
body.account-area .ast-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Elementor containers sometimes keep inner gutters */
body.account-area .e-con,
body.account-area .elementor-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Remove your member-area internal paddings that create the two gaps */
body.account-area #alMemberArea{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* 3) Safety: if any wrapper is centering with auto margins */
body.account-area #alMemberArea,
body.account-area #alMemberArea .ast-container,
body.account-area #alMemberArea .elementor-container,
body.account-area #alMemberArea .e-con{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 4) If a workspace/rail offset still pushes content on desktop */
body.account-area.al-workspace #content{
  padding-left: 0 !important;
}

#alProfile .alpp-follow{
  transition: transform .08s ease, opacity .18s ease;
}
@media (hover:hover){
  #alProfile .alpp-follow:hover{ transform: translateY(-1px); }
}
#alProfile .alpp-follow:active{ transform: translateY(0); }
#alProfile .alpp-follow.is-following{
  background:#fff;
  border:1px solid var(--al-border);
  color: var(--al-text);
}
#alProfile .alpp-follow[data-loading="1"]{
  opacity:.7;
  pointer-events:none;
}

/* =========================================================
   DESKTOP: Account 2-Column Wrapper sauber machen (GENERIC)
   - links: Elementor Shortcode-Widget (Spacer)
   - rechts: #alMemberArea Content
   - verhindert "zu breiten" Gap UND verhindert "Content unter Rail"
========================================================= */

@media (min-width:1024px){

  :root{ --al-rail-w: 260px; } /* <- exakt deine Rail-Breite */

  /* 1) Doppelte Offsets killen (sonst Spacer + Padding = fetter Gap) */
  body.account-area #content,
  body.account-area #alMemberArea{
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* 2) Rail-Breite ist die Wahrheit */
  html body.account-area.logged-in aside.al-sidebar.al-rail{
    left: 0 !important;
    width: var(--al-rail-w) !important;
    max-width: var(--al-rail-w) !important;
  }

  /* 3) Finde den Elementor-Parent, der #alMemberArea enthält UND links den "Ghost Shortcode" */
  body.account-area .e-con.e-parent:has(#alMemberArea)
  :is(.e-con, .e-con-inner):has(> .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile){
    display: grid !important;
    grid-template-columns: var(--al-rail-w) minmax(0, 1fr) !important;
    column-gap: 0 !important;
    align-items: start !important;
  }

  /* 4) Der Spacer (egal welche ID) bekommt exakt Rail-Breite */
  body.account-area .e-con.e-parent:has(#alMemberArea)
  :is(.e-con, .e-con-inner):has(> .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile)
  > .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile{
    width: var(--al-rail-w) !important;
    max-width: var(--al-rail-w) !important;
    min-width: var(--al-rail-w) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 5) Inhalt darf nicht überlaufen */
  body.account-area #alMemberArea{
    min-width: 0 !important;
  }
}

/* =========================================================
   ACCOUNT LAYOUT – FINAL FIX
   Rail = fixed
   Spacer = echte Spalte
   Content = kein eigener Offset
========================================================= */

@media (min-width: 1024px){

  /* 1) Rail ist fix, aber NICHT Layout-tragend */
  aside.al-sidebar.al-rail{
    position: fixed !important;
    left: 16px !important;
    width: 260px !important;
    z-index: 10 !important;
  }

  /* 2) Elementor Spacer = EINZIGE Quelle für Layout-Breite */
  body.account-area
  .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile{
    /* Reserve the full desktop rail lane: fixed left offset + rail width + gap.
       Profile and tanks align against this same lane. */
    flex: 0 0 calc(var(--al-rail-left) + var(--al-rail-w) + var(--al-rail-gap)) !important;
    width: calc(var(--al-rail-left) + var(--al-rail-w) + var(--al-rail-gap)) !important;
    min-width: calc(var(--al-rail-left) + var(--al-rail-w) + var(--al-rail-gap)) !important;
    max-width: calc(var(--al-rail-left) + var(--al-rail-w) + var(--al-rail-gap)) !important;

    padding: 0 !important;
    margin: 0 !important;
  }

  /* 3) Content darf KEINEN eigenen Offset haben */
  body.account-area #content,
  body.account-area main,
  body.account-area .site-content,
  body.account-area .ast-container,
  body.account-area #alMemberArea{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* 4) Elementor Parent sauber halten */
  body.account-area .e-con.e-parent{
    column-gap: 0 !important;
  }
}

@media (min-width: 1024px){
  body.account-area{
    --al-rail-left: 16px;
    --al-rail-w: 260px;
    --al-rail-gap: 14px; /* 12–16 nach Geschmack */
  }

  /* Der Ghost/Spacer ist das Shortcode-Widget, das Elementor links als "Slot" nutzt */
  body.account-area .e-con.e-parent:has(#alMemberArea)
  .elementor-widget-shortcode.elementor-hidden-tablet.elementor-hidden-mobile{
    flex: 0 0 calc(var(--al-rail-left) + var(--al-rail-w) + var(--al-rail-gap)) !important;
    width: calc(var(--al-rail-left) + var(--al-rail-w) + var(--al-rail-gap)) !important;
    min-width: calc(var(--al-rail-left) + var(--al-rail-w) + var(--al-rail-gap)) !important;
    max-width: calc(var(--al-rail-left) + var(--al-rail-w) + var(--al-rail-gap)) !important;
  }
}

/* Security: Danger Zone (minimal) */
.al-pane .al-pane-card--danger{
  border-color: rgba(255, 60, 60, .25);
}

.al-btn--danger{
  border: 1px solid rgba(255, 60, 60, .45);
  color: inherit;
}

.al-btn--danger:hover{
  border-color: rgba(255, 60, 60, .75);
}

/* Placeholder-Style (klein + zentriert) */
#alMemberArea .al-tank-media img{
  width: 220px !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* =====================================================
   Tanks override — remove global underline
===================================================== */
#alMemberArea.al-tanks a:hover{
  text-decoration: none !important;
}


/* =========================================================
   Orders Drawer
========================================================= */
#alMemberArea .al-order-drawer[hidden]{
  display: none !important;
}

#alMemberArea .al-order-drawer{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  display: block !important;
}

#alMemberArea .al-order-drawer__backdrop{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(15,23,42,.44) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

#alMemberArea .al-order-drawer__panel{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  height: 100dvh !important;
  width: min(560px, 100vw) !important;
  background: linear-gradient(180deg,#fff 0%,#fff 78%,var(--al-surface-2) 100%) !important;
  border-left: 1px solid color-mix(in srgb, var(--al-border) 86%, #fff) !important;
  box-shadow: -24px 0 60px rgba(15,23,42,.18) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#alMemberArea .al-order-drawer__head{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 18px 16px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--al-border) 82%, #fff) !important;
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#alMemberArea .al-order-drawer__head h3{
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

#alMemberArea .al-order-drawer__body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  padding: 18px !important;
}

#alMemberArea .al-order-detail-items{
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#alMemberArea .al-order-detail-item{
  padding: 12px 14px !important;
  border: 1px solid color-mix(in srgb, var(--al-border) 86%, #fff) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--al-sh0) !important;
}

#alMemberArea .al-order-detail-total{
  margin: 0 0 18px !important;
  font-weight: 800 !important;
  color: var(--al-text) !important;
}

#alMemberArea .al-order-detail-total .woocommerce-Price-amount{
  font-weight: 900 !important;
}

body.al-noscroll{
  overflow: hidden !important;
}

@media (max-width: 767px){
  #alMemberArea .al-order-drawer__panel{
    inset: auto 0 0 0 !important;
    top: auto !important;
    right: auto !important;
    width: 100vw !important;
    height: min(86dvh, 860px) !important;
    border-left: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--al-border) 86%, #fff) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -20px 60px rgba(15,23,42,.18) !important;
  }

  #alMemberArea .al-order-drawer__head{
    padding: 16px !important;
  }

  #alMemberArea .al-order-drawer__body{
    padding: 16px !important;
  }
}

#alMemberArea .al-pane-grid,
#alMemberArea .al-security-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--al-4) !important;
}

#alMemberArea .al-stack-gap-xs{
  margin-top:10px !important;
}

#alMemberArea .al-stack-gap-sm{
  margin-top:12px !important;
}

#alMemberArea .al-danger-copy{
  margin:0 0 12px !important;
}

#alMemberArea .al-form-actions--inline{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

#alMemberArea #alDash .al-tank-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

#alMemberArea #alDash .al-tank-media img{
  display: block;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ---------------------------------------------------------
   Shared contextual navigation
   Used only for local subviews: tank detail, community, saved, settings.
--------------------------------------------------------- */
#alMemberArea .al-context-nav{
  width:100%;
  max-width:100%;
  margin:0 0 16px;
  padding:4px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.045);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

#alMemberArea .al-context-nav__list,
#alMemberArea .al-context-nav:is([role="tablist"], .al-tabs, .al-settings-nav){
  display:flex;
  align-items:center;
  gap:4px;
  min-width:max-content;
}

#alMemberArea .al-context-nav__link{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:rgba(15,23,42,.72);
  font-size:13px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  box-shadow:none;
  transform:none;
  transition:background-color .14s ease, border-color .14s ease, color .14s ease;
}

#alMemberArea .al-context-nav__link:hover,
#alMemberArea .al-context-nav__link:focus-visible{
  background:rgba(15,23,42,.035);
  color:#0f172a;
  transform:none !important;
  outline:none;
}

#alMemberArea .al-context-nav__link.is-active,
#alMemberArea .al-context-nav__link[aria-selected="true"],
#alMemberArea .al-context-nav__link[aria-current="page"],
#alMemberArea .al-context-nav__item.is-active{
  color:#1f553a;
  background:rgba(44,107,74,.075);
  border-color:rgba(44,107,74,.18);
  box-shadow:inset 0 -2px 0 rgba(44,107,74,.42);
}

#alMemberArea .al-context-nav--tank .al-context-nav__link.is-active,
#alMemberArea .al-context-nav--tank .al-context-nav__link[aria-selected="true"],
#alMemberArea .al-context-nav--tank .al-context-nav__item.is-active{
  color:#1559bf;
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.20);
  box-shadow:inset 0 -2px 0 rgba(37,99,235,.50);
}

#alMemberArea .al-context-nav .al-settings-tab__icon,
#alMemberArea .al-context-nav .al-settings-tab__sub{
  display:none !important;
}

#alMemberArea .al-context-nav .al-settings-tab{
  height:auto !important;
  min-height:36px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

@media (max-width:700px){
  #alMemberArea .al-context-nav{
    margin-bottom:14px;
    border-radius:13px;
  }

  #alMemberArea .al-context-nav__link{
    min-height:34px;
    padding-inline:12px;
    font-size:13px;
  }
}

/* Generic member cards should stay visually stable unless the element itself is interactive. */
#alMemberArea .al-card{
  transition:box-shadow .16s ease, border-color .16s ease, background-color .16s ease !important;
}

@media (hover:hover){
  #alMemberArea .al-card:hover:not(a):not(button):not([role="button"]):not(.al-tanks__hero-card){
    transform:none !important;
    box-shadow:
      0 1px 0 rgba(16,24,40,.04),
      0 8px 18px rgba(16,24,40,.08) !important;
    border-color:color-mix(in srgb, var(--al-border) 90%, #fff) !important;
  }
}

/* Final context-nav density pass: local tabs should feel light, not like page cards. */
#alMemberArea .al-context-nav{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 0 12px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

#alMemberArea .al-context-nav__list,
#alMemberArea .al-context-nav:is([role="tablist"], .al-tabs, .al-settings-nav){
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  min-width:max-content !important;
}

#alMemberArea .al-context-nav__link{
  position:relative !important;
  min-height:34px !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(15,23,42,.68) !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

#alMemberArea .al-context-nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:1px;
  height:2px;
  border-radius:999px;
  background:rgba(44,107,74,.78);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .14s ease;
}

#alMemberArea .al-context-nav__link:hover,
#alMemberArea .al-context-nav__link:focus-visible{
  background:transparent !important;
  color:#0f172a !important;
  outline:none;
}

#alMemberArea .al-context-nav__link:focus-visible{
  box-shadow:0 0 0 3px rgba(44,107,74,.16) !important;
  border-radius:8px !important;
}

#alMemberArea .al-context-nav__link.is-active,
#alMemberArea .al-context-nav__link[aria-selected="true"],
#alMemberArea .al-context-nav__link[aria-current="page"],
#alMemberArea .al-context-nav__item.is-active{
  color:#1f553a !important;
  background:transparent !important;
  border-color:transparent !important;
  font-weight:600 !important;
  box-shadow:none !important;
}

#alMemberArea .al-context-nav__link.is-active::after,
#alMemberArea .al-context-nav__link[aria-selected="true"]::after,
#alMemberArea .al-context-nav__link[aria-current="page"]::after,
#alMemberArea .al-context-nav__item.is-active::after{
  transform:scaleX(1);
}

#alMemberArea .al-context-nav--tank{
  width:max-content !important;
  max-width:100% !important;
  padding:3px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(15,23,42,.035) !important;
}

#alMemberArea .al-context-nav--tank .al-context-nav__list{
  gap:2px !important;
}

#alMemberArea .al-context-nav--tank .al-context-nav__link{
  min-height:38px !important;
  padding:0 12px !important;
  border:1px solid transparent !important;
  border-radius:9px !important;
}

#alMemberArea .al-context-nav--tank .al-context-nav__link::after{
  content:none !important;
}

#alMemberArea .al-context-nav--tank .al-context-nav__link.is-active,
#alMemberArea .al-context-nav--tank .al-context-nav__link[aria-selected="true"],
#alMemberArea .al-context-nav--tank .al-context-nav__item.is-active{
  color:#1559bf !important;
  background:rgba(37,99,235,.08) !important;
  border-color:rgba(37,99,235,.20) !important;
  box-shadow:none !important;
}

#alMemberArea .al-context-nav .al-settings-tab{
  min-height:inherit !important;
  padding:0 !important;
}

#alMemberArea .al-context-nav .al-settings-tab__title{
  font-weight:inherit !important;
}

@media (max-width:700px){
  #alMemberArea .al-context-nav{
    width:100% !important;
    margin-bottom:10px !important;
  }

  #alMemberArea .al-context-nav__list,
  #alMemberArea .al-context-nav:is([role="tablist"], .al-tabs, .al-settings-nav){
    gap:14px !important;
  }

  #alMemberArea .al-context-nav--tank{
    width:100% !important;
  }

  #alMemberArea .al-context-nav--tank .al-context-nav__list{
    gap:2px !important;
  }
}