/* Vertikales StackPanel (Default) */
.stack-vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem; 
}

/* Horizontales StackPanel */
.stack-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem; 
}
.ads {
    flex: 0 0 auto;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-lightbox-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--layer-modal);
}

.modal-content {
  background: var(--color-bg-light);
  color: var(--color-text);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.alert {
  min-width: 250px;
  max-width: 320px;
  background: var(--color-panel-overlay);
  color: var(--color-text);
  padding: var(--space-md) var(--space-md);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg-dark);
  font-size: var(--font-size-md);
  pointer-events: auto;
  animation: slide-in 0.3s ease forwards;
  position: relative;
  opacity: 0;
}

.alert.success {
  border-left: 5px solid var(--color-alert-success-marker);
  background: var(--color-alert-success);
}

.alert.error {
  border-left: 5px var(--color-alert-error-marker);
  background: var(--color-alert-error);
}
.alert.info {
  border-left: 5px var(--color-alert-info-marker);
  background: var(--color-alert-info);
}
/* === Lightbox === */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-lightbox-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: var(--layer-modal);
}

.lightbox.hidden {
  display: none;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.lightbox-content img,
.lightbox-content video {
  max-width: 90vw;
  max-height: 90vh;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 1.5rem;
  background: none;
  color: var(--color-accent);
  border: none;
  cursor: pointer;
}