/*#######################################################################
# FRONTEND-CHILD.CSS - Zentrale Admin-Styles
# ----------------------------------------------------------------------
# WEBASMEDIA | Andreas Schoene
# 
# KONFIGURATION
# --------------------------------------
# * Shortcodes-Liste (shortcodes.php)
# * Rechtes Sticky-Menü (Fly-out)
#
# AENDERUNGEN
# --------------------------------------
# * 16.05.2026 - letzte Optimierung
#
#######################################################################*/

/***********************************************************************
 *** Shortcodes-Liste (shortcodes.php)                               ***
 ***********************************************************************/
.wam-shortcode-container { 
  margin-top: 10px; 
}

.wam-shortcode-item { 
  margin: 6px 0; 
}

.wam-shortcode-title {
  width: 100%;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 0;
  border: 0px solid #e2e2e2;
}

.wam-shortcode-title:focus { 
  outline: 0px solid #265366; 
  outline-offset: 1px; 
  background: var(--wam-gray-200);
}

.wam-shortcode-content {
  padding: 8px;
  border: 0px solid #e2e2e2;
  border-top: 0;
  border-radius: 0 0 2px 2px;
  background: #fff;
}

.wam-shortcode-example { margin: 0; }
.wam-shortcode-example code { word-break: break-all; }

/***********************************************************************
 *** Rechtes Sticky-Menü (Fly-out)                                   ***
 ***********************************************************************/
.wam-sticky {
  position: fixed;
  top: 38vh;
  right: 0px;              /* 5px Abstand zum Rand */
  inset-inline-end: 0px;   /* RTL-sicher ebenfalls 5px */
  z-index: 999999;         /* über Scrollbar */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* eigener Stacking-Context je Item (robuste z-index-Steuerung) */
.wam-sticky__viewport {
  position: relative;
  width: 56px;
  height: 56px;
  pointer-events: auto;
  overflow: visible;
  isolation: isolate;
}

/* Box (bleibt stehen, liegt über dem Slider) */
.wam-sticky__square {
  position: absolute;
  right: 0;
  top: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #265366; /* Fallback */
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border-radius: 0;
  z-index: 30;
}

.wam-sticky__icon {
  width: 30px;
  height: 30px;
  color: #fff;
  transition: filter .2s ease;
}
.wam-sticky__viewport:hover .wam-sticky__icon {
  filter: drop-shadow(0 0 6px rgba(255,255,255,1));
}

/* Slider: bündig an linker Boxkante, fährt nach links raus, unter der Box */
.wam-sticky__labelbox {
  position: absolute;
  top: 0;
  right: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  background: #265366; /* Fallback */
  color: #fff;
  font: 700 15px/1 Quicksand,system-ui,Arial,sans-serif;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border-radius: 0;
  transform: translateX(100%);      /* Start direkt hinter der Box */
  transition: transform .25s ease-out;
  z-index: 10;
  pointer-events: none;             /* Klick bleibt auf der Box */
}

/* Trennlinie deaktivieren (der kleine Balken rechts ist weg) */
.wam-sticky__labelbox::after {
  display: none !important;
}

/* ausklappen */
.wam-sticky__viewport:hover .wam-sticky__labelbox {
  transform: translateX(0);
}

/* Farben pro Item */
.wam-sticky__viewport.wam-bg-call .wam-sticky__square,
.wam-sticky__viewport.wam-bg-call .wam-sticky__labelbox { background:#7BB236; }

.wam-sticky__viewport.wam-bg-wa   .wam-sticky__square,
.wam-sticky__viewport.wam-bg-wa   .wam-sticky__labelbox { background:#25D366; }


/* --------------------------------- Responsive: 800px --------------------------------- */
@media (max-width: 800px) {
  .wam-sticky { top: 40vh; }
  .wam-sticky__labelbox { display: none; } /* mobil nur Kachel */
}