/* ======================================================================
   AquariumLesson Member Experience System
   Phase 3A: Low-risk feedback primitives

   Scope:
   - Empty states
   - Skeleton/loading placeholders
   - Inline notices/feedback states

   This file intentionally avoids cards, buttons, tabs, forms, modals,
   header/auth UI, and product-specific tanks/profile/dashboard surfaces.
   ====================================================================== */

#alMemberArea {
  --almx-empty-padding: 18px;
  --almx-empty-border: color-mix(in srgb, var(--almx-color-border) 85%, #fff);
  --almx-empty-radius: var(--almx-radius-lg);
  --almx-empty-bg: var(--almx-color-surface-muted);
  --almx-empty-text: var(--almx-color-text-muted);
  --almx-skeleton-radius: var(--almx-radius-sm);
  --almx-skeleton-bg: color-mix(in srgb, var(--almx-color-border) 55%, #fff);
  --almx-notice-radius: var(--almx-radius-lg);
  --almx-notice-text: var(--almx-color-text);
}

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

#alMemberArea .almx-empty__title {
  margin: 0;
  color: var(--almx-color-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

#alMemberArea .almx-empty__copy {
  margin: 6px 0 0;
  color: var(--almx-color-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

#alMemberArea .almx-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--almx-space-3);
  align-items: center;
  margin-top: var(--almx-space-4);
}

#alMemberArea .almx-skeleton,
#alMemberArea:not(.al-tanks) .al-skeleton {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: var(--almx-skeleton-radius, var(--almx-radius-sm)) !important;
  background: var(--almx-skeleton-bg, color-mix(in srgb, var(--almx-color-border) 55%, #fff)) !important;
}

#alMemberArea .almx-skeleton::after,
#alMemberArea:not(.al-tanks) .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: almx-skeleton-shimmer 1.05s ease-in-out infinite !important;
}

#alMemberArea .almx-skeleton-card {
  min-height: 160px;
  border-radius: var(--almx-card-radius);
}

@keyframes almx-skeleton-shimmer {
  0% { transform: translateX(-60%); }
  100% { transform: translateX(160%); }
}

@media (prefers-reduced-motion: reduce) {
  #alMemberArea .almx-skeleton::after,
  #alMemberArea:not(.al-tanks) .al-skeleton::after {
    animation: none !important;
  }
}

#alMemberArea .almx-notice,
#alMemberArea:not(.al-tanks) .al-notice,
#alMemberArea:not(.al-tanks) .notice,
#alMemberArea:not(.al-tanks) .woocommerce-message,
#alMemberArea:not(.al-tanks) .woocommerce-info,
#alMemberArea:not(.al-tanks) .woocommerce-error {
  margin: 0 0 var(--almx-space-5) !important;
  padding: 12px 14px !important;
  border: 1px solid var(--almx-notice-border, color-mix(in srgb, var(--almx-color-border) 85%, #fff)) !important;
  border-radius: var(--almx-notice-radius, var(--almx-radius-lg)) !important;
  background: var(--almx-notice-bg, var(--almx-color-surface)) !important;
  color: var(--almx-notice-text, var(--almx-color-text)) !important;
  box-shadow: var(--almx-shadow-xs) !important;
}

#alMemberArea .almx-notice--success,
#alMemberArea:not(.al-tanks) .al-notice--success,
#alMemberArea:not(.al-tanks) .woocommerce-message {
  --almx-notice-border: color-mix(in srgb, var(--almx-color-success) 32%, var(--almx-color-border));
  --almx-notice-bg: color-mix(in srgb, var(--almx-color-success) 8%, #fff);
}

#alMemberArea .almx-notice--warning,
#alMemberArea:not(.al-tanks) .al-notice--warn {
  --almx-notice-border: color-mix(in srgb, var(--almx-color-warning) 28%, var(--almx-color-border));
  --almx-notice-bg: color-mix(in srgb, var(--almx-color-warning) 8%, #fff);
}

#alMemberArea .almx-notice--danger,
#alMemberArea:not(.al-tanks) .al-notice--error,
#alMemberArea:not(.al-tanks) .woocommerce-error {
  --almx-notice-border: color-mix(in srgb, var(--almx-color-danger) 28%, var(--almx-color-border));
  --almx-notice-bg: color-mix(in srgb, var(--almx-color-danger) 7%, #fff);
}

#alMemberArea .almx-notice--info,
#alMemberArea:not(.al-tanks) .al-notice--info,
#alMemberArea:not(.al-tanks) .woocommerce-info {
  --almx-notice-border: color-mix(in srgb, var(--almx-color-info) 24%, var(--almx-color-border));
  --almx-notice-bg: color-mix(in srgb, var(--almx-color-info) 6%, #fff);
}