/* public/css/public-style.css */

/* Material Icons Font - Lokales Hosting */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../../assets/icons/material-icons/MaterialIcons-Regular.woff2') format('woff2');
  font-display: swap; /* Ensures text remains visible during font loading */
}

.fbw-material-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Default icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Globale Box-Sizing Regel */
.fbw-container, .fbw-container *, .fbw-container *::before, .fbw-container *::after {
    box-sizing: border-box;
}

/* Sichtbarkeitsklassen */
.fbw-visible-all { display: block !important; }
.fbw-visible-xs { display: none !important; } /* Hidden by default, shown on XS */
.fbw-hidden-lg.fbw-hidden-md { display: block !important; } /* Hidden on LG/MD, shown on SM/XS */

@media (max-width: 767.98px) { /* Extra Small devices (phones) */
    .fbw-visible-xs { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) { /* Small devices (tablets) */
    .fbw-visible-xs { display: none !important; }
    .fbw-hidden-lg.fbw-hidden-md { display: block !important; }
}
@media (min-width: 992px) { /* Medium devices (desktops) and up */
    .fbw-visible-xs { display: none !important; }
    .fbw-hidden-lg.fbw-hidden-md { display: none !important; }
}

/* Keyframes für Animationen */
@keyframes fbw-list-fade-in {
    0% { opacity: 0; transform: translateY(5px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fbw-list-fade-out {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(5px) scale(0.95); }
}
@keyframes fbw-item-scale-in {
    0% { opacity: 0; transform: translateY(10px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.fbw-container {
    position: fixed;
    z-index: 99999;
}

.fbw-fab-wrapper {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
}

.fbw-fab-button {
    border: none;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 100000;
}
.fbw-fab-button:hover {
    transform: scale(1.1);
}
.fbw-fab-button.fbw-rotate-enabled.fbw-active {
    transform: rotate(45deg);
}
.fbw-fab-button.fbw-rotate-enabled.fbw-active:hover {
    transform: rotate(45deg) scale(1.1);
}

.fbw-fab-button svg,
.fbw-fab-button .fbw-material-icon {
    width: 24px;
    height: 24px;
    display: block;
    line-height: 24px;
}

.fbw-options-list {
    position: absolute;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    z-index: 99998;
    opacity: 0;
    width: 48px;
    left: 4px; /* (56px wrapper - 48px list) / 2 */
    bottom: 70px; /* 56px main button height + 14px desired spacing (default for bottom-placed) */
    transform-origin: center bottom;
    animation: fbw-list-fade-out 0.2s ease-out forwards;
}

/* Adjustments for top-placed main buttons */
.fbw-container.fbw-corner-right-top .fbw-options-list,
.fbw-container.fbw-corner-left-top .fbw-options-list {
    bottom: auto;
    top: 70px; /* 56px main button height + 14px desired spacing from top */
    transform-origin: center top;
}

.fbw-options-list.fbw-active {
    display: flex;
    align-items: center;
    opacity: 1;
    animation: fbw-list-fade-in 0.25s ease-out forwards;
    gap: 14px; /* Definiert den Abstand zwischen den Child-Buttons */
    flex-direction: column-reverse; /* Default für unten positionierte Buttons */
}

/* For top-placed main buttons (list below main button), revert to normal column flow */
.fbw-container.fbw-corner-right-top .fbw-options-list.fbw-active,
.fbw-container.fbw-corner-left-top .fbw-options-list.fbw-active {
    flex-direction: column;
}

.fbw-options-list li {
    position: relative; /* For tooltip positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    opacity: 0; /* Initial state for item animation */
    transform: scale(0.8) translateY(10px); /* Initial state for item animation */
    margin-top: 0;
    margin-bottom: 0;
}

.fbw-options-list.fbw-active li {
    animation: fbw-item-scale-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Staggered animation for child items based on their DOM order. */
.fbw-options-list.fbw-active li:nth-child(1) { animation-delay: 0.05s; }
.fbw-options-list.fbw-active li:nth-child(2) { animation-delay: 0.1s; }
.fbw-options-list.fbw-active li:nth-child(3) { animation-delay: 0.15s; }
.fbw-options-list.fbw-active li:nth-child(4) { animation-delay: 0.2s; }


.fbw-options-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.fbw-options-list li a:hover {
    transform: scale(1.1);
    box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
}

.fbw-options-list li a svg,
.fbw-options-list li a .fbw-material-icon {
    width: 22px;
    height: 22px;
    display: block;
    line-height: 22px;
}

/* Tooltip Styling */
.fbw-tooltip {
    position: absolute;
    white-space: nowrap;
    display: block;
    padding: 6px 12px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    border-radius: 4px;
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    pointer-events: none;
    z-index: 1;
    left: 100%;
    margin-left: 12px;
    transform: translateX(-10px); /* Startposition für Animation */
}

/* Tooltip Position für rechts positionierte Buttons */
.fbw-container.fbw-corner-right-bottom .fbw-tooltip,
.fbw-container.fbw-corner-right-top .fbw-tooltip {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 12px;
    transform: translateX(10px); /* Startposition für Animation von rechts */
}

/* NEU: Tooltips sichtbar machen, wenn die Optionsliste die Klasse .fbw-tooltips-visible hat */
.fbw-options-list.fbw-tooltips-visible .fbw-tooltip {
    opacity: 1;
    transform: translateX(0); /* Endposition der Animation */
}

/* Die Hover-Regel ist jetzt optional, da die Tooltips ohnehin sichtbar sind,
   kann aber für zusätzliche Effekte auf Desktop beibehalten oder entfernt werden.
   Wenn sie entfernt wird, ist die obige Regel ausreichend.
   Wenn sie bleibt, sorgt sie dafür, dass der Tooltip auch bei Hover erscheint,
   falls die .fbw-tooltips-visible Klasse aus irgendeinem Grund nicht gesetzt wäre.
*/
.fbw-options-list li:hover .fbw-tooltip {
    opacity: 1; /* Stellt sicher, dass es auch bei Hover sichtbar ist */
    transform: translateX(0);
}

/* Dark Theme for Tooltips */
.fbw-tooltip-dark .fbw-tooltip {
    background-color: rgba(40,40,40,0.95);
    color: #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* Light Theme for Tooltips */
.fbw-tooltip-light .fbw-tooltip {
    background-color: rgba(250,250,250,0.98);
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid #e0e0e0;
}