/*
 * Floating Click-to-Chat (WhatsApp) / Call Now buttons
 * (core/views/partials/floating-contact.php). These custom "fc-*" classes
 * used to be styled by the old /assets/css/front.css, which stopped being
 * loaded once the front-end was rebuilt around the new theme — moved here,
 * on the new stylesheet stack, with the call button recolored to match the
 * site's current accent instead of the old theme's --primary variable.
 */
.fc-group {
    position: fixed;
    z-index: 1000;
    display: flex;
    gap: 12px;
}

.fc-group-right { right: 20px; bottom: 20px; flex-direction: column; align-items: flex-end; }
.fc-group-left { left: 20px; bottom: 20px; flex-direction: column; align-items: flex-start; }
.fc-group-center { left: 50%; bottom: 20px; transform: translateX(-50%); flex-direction: row; align-items: center; }
.fc-group-full-bottom { left: 0; right: 0; bottom: 0; padding: 10px 0; justify-content: center; flex-direction: row; align-items: center; }

/* WhatsApp / Call / Quick Inquiry, flush together as squares pinned to the
   vertical center of the left edge — gap: 0 so they read as one solid
   stack, not three separate floating buttons. */
.fc-group-left-center { left: 0; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-start; gap: 0; }
.fc-group-left-center .fc-btn { border-radius: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.fc-group-left-center .fc-btn:hover,
.fc-group-left-center .fc-btn:focus-visible { transform: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

.fc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.fc-btn:hover,
.fc-btn:focus-visible {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    color: #ffffff;
}

.fc-btn:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 2px;
}

/* A button with visible text becomes a pill instead of a circle. */
.fc-btn-text {
    width: auto;
    height: 48px;
    border-radius: 24px;
    padding: 0 18px;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.fc-whatsapp { background: #25d366; }
.fc-call { background: var(--rs-theme-light-blue); }
.fc-inquiry {
    /* Distinct from WhatsApp's green (was a duplicate #25d366 before, making
       the two top buttons in the desktop stack visually blend into one) —
       the site's own orange accent instead, so all 3 stack colors read as a
       deliberate trio (orange / green / blue). */
    background: var(--rs-theme-orange);
    border: none;
    cursor: pointer;
    font-size: 22px;
}

.fc-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: #111827;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.fc-group-left .fc-tooltip,
.fc-group-left-center .fc-tooltip { right: auto; left: calc(100% + 12px); }
.fc-group-center .fc-tooltip,
.fc-group-full-bottom .fc-tooltip { display: none; }

.fc-btn:hover .fc-tooltip,
.fc-btn:focus-visible .fc-tooltip {
    opacity: 1;
}

/* "Display on" (Settings -> Call Now Button / WhatsApp -> Presentation). */
@media (min-width: 769px) { .fc-mobile-only { display: none !important; } }
@media (max-width: 768px) { .fc-desktop-only { display: none !important; } }

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

@media (max-width: 480px) {
    .fc-group-right { right: 14px; bottom: 14px; gap: 10px; }
    .fc-group-left { left: 14px; bottom: 14px; gap: 10px; }
    .fc-btn { width: 50px; height: 50px; }
    .fc-btn-text { width: auto; height: 44px; }
    .fc-tooltip { display: none; }
    .fc-group-left-center .fc-btn { width: 44px; height: 44px; }
}

/* Mobile-only label text (WhatsApp / Call Now / Quick Inquiry), hidden on
   desktop where these buttons stay icon-only circles with a hover tooltip. */
.fc-mobile-label { display: none; }

/* On mobile, the left-center icon stack (Quick Inquiry/WhatsApp/Call) becomes
   3 solid color pill buttons in a row, floating just above the bottom edge —
   each in its own brand color (site blue / WhatsApp green / deep blue) with
   white icon+text — instead of the vertical colored icon column used on
   desktop. Overrides the 480px block above via source order (same selector
   specificity, this rule comes later), so it applies down to the smallest
   phone widths too. */
@media (max-width: 768px) {
    .fc-group-left-center {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: none;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        background: transparent;
        box-shadow: none;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0));
        box-sizing: border-box;
    }

    .fc-group-left-center .fc-btn,
    .fc-group-left-center .fc-btn.fc-btn-text {
        flex: 1 1 0;
        width: auto;
        height: auto;
        min-height: 50px;
        border-radius: 8px;
        flex-direction: row;
        gap: 6px;
        font-size: 13px;
        font-weight: 700;
        padding: 8px 6px;
        color: #ffffff;
        border: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        text-align: center;
    }

    .fc-group-left-center .fc-btn svg,
    .fc-group-left-center .fc-btn i {
        width: 18px;
        height: 18px;
        font-size: 18px;
        flex-shrink: 0;
        color: #ffffff;
    }

    .fc-group-left-center .fc-mobile-label { display: inline; }
    .fc-group-left-center .fc-tooltip { display: none; }

    /* No color overrides here on purpose — .fc-inquiry/.fc-whatsapp/.fc-call
       already carry the desktop colors (orange/green/light-blue) from the
       base rules above, and this bar should match the desktop stack rather
       than use its own palette. */

    /* The theme's "back to top" button (main.css .backtotop-wrap) sits
       bottom:20-30px/right:20-30px by default, which now lands underneath
       this bar (z-index: 1000, taller than the button) — push it up clear
       of the bar instead of letting it get visually swallowed. */
    .backtotop-wrap {
        bottom: 84px !important;
        z-index: 999;
    }
}