/**
 * Floating Contact Bar - Frontend Styles
 *
 * Layout-Modi:
 * - Desktop & Tablet (>= 768px): Floating Buttons rechts/links unten
 * - Mobile (< 768px): Sticky Bottom Bar mit Icon + Label, vollbreite Kacheln
 *
 * Farb-Variablen werden vom Plugin per wp_add_inline_style auf .fcb-container
 * gesetzt: --fcb-bg, --fcb-bg-hover, --fcb-icon, --fcb-icon-hover.
 */

/* =====================================================================
   DESKTOP & TABLET: Floating Buttons (>= 768px)
   ===================================================================== */

.fcb-container {
    position: fixed;
    bottom: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.fcb-bottom-right {
    right: 30px;
}

.fcb-bottom-left {
    left: 30px;
}

.fcb-button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--fcb-bg, #1e8aff);
    color: var(--fcb-icon, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    pointer-events: auto;
    border: none;
    outline: none;
}

/*
 * Hover/Focus: Hintergrund und Icon wechseln auf die Hover-Variablen.
 * Klasse-Selektor ist spezifischer als ein typisches Theme-`a:hover`,
 * sodass Theme-Hover-Farben nicht ins Plugin-Icon einfärben.
 */
.fcb-button:hover,
.fcb-button:focus-visible {
    background-color: var(--fcb-bg-hover, var(--fcb-bg, #1e8aff));
    color: var(--fcb-icon-hover, var(--fcb-icon, #ffffff));
}

.fcb-button:focus-visible {
    outline: 2px solid var(--fcb-icon, #ffffff);
    outline-offset: 3px;
}

.fcb-button svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* Label ist auf Desktop versteckt - aria-label übernimmt die Accessibility */
.fcb-button .fcb-label {
    display: none;
}

/*
 * WhatsApp behält das offizielle Branding-Grün überall.
 * Icon-Farbe explizit auf Weiß gepinnt, damit Theme-Hover-Styles nicht durchschlagen.
 */
.fcb-button.fcb-whatsapp,
.fcb-button.fcb-whatsapp:hover,
.fcb-button.fcb-whatsapp:focus-visible {
    color: #ffffff;
}

.fcb-button.fcb-whatsapp {
    background-color: #25D366;
}

.fcb-button.fcb-whatsapp:hover,
.fcb-button.fcb-whatsapp:focus-visible {
    background-color: #1ebe5d;
}

/* Tablet & kleinere Desktops */
@media (max-width: 1024px) and (min-width: 769px) {
    .fcb-container {
        bottom: 24px;
        gap: 10px;
    }
    .fcb-bottom-right { right: 24px; }
    .fcb-bottom-left  { left: 24px; }
}

/* =====================================================================
   MOBILE: Sticky Bottom Bar (< 768px)
   ===================================================================== */

@media (max-width: 767px) {

    /* Container wird zur vollbreiten Bar am unteren Rand */
    .fcb-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: row;
        gap: 0;
        padding: 0;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
        background-color: var(--fcb-bg, #1e8aff);
    }

    /* Egal ob bottom-right oder bottom-left konfiguriert: Mobile = Bar */
    .fcb-bottom-right,
    .fcb-bottom-left {
        right: 0;
        left: 0;
    }

    /* Buttons werden zu vollbreiten Kacheln, gleich verteilt via flex */
    .fcb-button {
        flex: 1 1 0;
        width: auto;
        height: auto;
        min-height: 64px;
        border-radius: 0;
        box-shadow: none;
        flex-direction: column;
        gap: 4px;
        padding: 10px 6px;
        background-color: var(--fcb-bg, #1e8aff);
        color: var(--fcb-icon, #ffffff);
    }

    /* Hover/Focus auf Mobile: gleicher Farbwechsel wie Desktop, kein Lift */
    .fcb-button:hover,
    .fcb-button:focus-visible {
        background-color: var(--fcb-bg-hover, var(--fcb-bg, #1e8aff));
        color: var(--fcb-icon-hover, var(--fcb-icon, #ffffff));
        box-shadow: none;
    }

    /* Trennlinie zwischen Kacheln */
    .fcb-button + .fcb-button {
        border-left: 1px solid rgba(255, 255, 255, 0.18);
    }

    .fcb-button svg {
        width: 24px;
        height: 24px;
    }

    /* Label sichtbar auf Mobile */
    .fcb-button .fcb-label {
        display: block;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.02em;
        font-family: inherit;
        text-align: center;
    }

    /* WhatsApp-Kachel behält Brand-Grün */
    .fcb-button.fcb-whatsapp,
    .fcb-button.fcb-whatsapp:hover,
    .fcb-button.fcb-whatsapp:focus-visible {
        color: #ffffff;
    }

    .fcb-button.fcb-whatsapp {
        background-color: #25D366;
    }

    .fcb-button.fcb-whatsapp:hover,
    .fcb-button.fcb-whatsapp:focus-visible {
        background-color: #1ebe5d;
    }

    /* Body padding-bottom, damit Content nicht hinter der Bar versteckt wird */
    body.fcb-active {
        padding-bottom: 76px !important;
    }
}

/* =====================================================================
   ACCESSIBILITY: Reduced Motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .fcb-button {
        transition: none;
    }
}