/* ==========================================================================
   Fixed contact CTA bar (bottom of every page) — ONE element at every width.
   .btn-fixed-wrap-desctop is a green pill bar centred in the content area
   (offset right by the 306px sidebar on desktop; full width once the sidebar
   is gone <900px), gold-gradient icons inside each link. Desktop shows all 4
   buttons; small screens (<700px) show only Contact + WhatsApp — the two
   desktop-only buttons (Live Chat, phone) carry .bfw-lg and hide.
   (The old separate mobile .btn-fixed-wrap was merged in — class kept as-is to
   avoid touching blog.css / other refs.) Ported from live, tidied.
   ========================================================================== */

/* ---------- the bar ---------- */
/* The wrap spans EXACTLY the #content box (right of the 306px sidebar → right
   edge); the bar is centred inside and capped to that width, so it can never
   spill past the sidebar or the right border. */
.btn-fixed-wrap-desctop {
    position: fixed;
    left: 306px;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    pointer-events: none;        /* empty area doesn't block clicks */
}
/* On wide screens the content column reserves the CLA right-rail (--cla-rail);
   reserve it here too so the button bar centres over the CONTENT column, not
   the full menu-to-edge area — matching the container's alignment. */
@media screen and (min-width: 1400px) {
    /* Only offset by the rail on pages that reserve it (body.cla-rail). Without
       the CLA banner the bar centres over the full content width. */
    body.cla-rail .btn-fixed-wrap-desctop { right: var(--cla-rail); }
}
.btn-fixed-wrap-desctop ul {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;                    /* spaces the pill buttons; no fragile separators */
    list-style: none;
    margin: 0;
    padding: 8px;
    max-width: 100%;             /* never wider than #content */
    background-color: var(--brand-green);
    color: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 0 12px rgb(0 0 0 / 25%);
}
.btn-fixed-wrap-desctop ul li {
    display: flex;
    white-space: nowrap;
}

.btn-fixed-wrap-desctop ul li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.10);   /* subtle pill; distinct without dividers */
    font-size: 15px;
    letter-spacing: 0.2px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.btn-fixed-wrap-desctop ul li a:hover { background-color: var(--brand-green-dark); text-decoration: none; }
/* WhatsApp: WhatsApp-green button (brand gradient) with white label + white icon. */
.btn-fixed-wrap-desctop ul li a.bfw-wa {
    background: linear-gradient(180deg, #5cd670 0%, #23a44f 100%);
    color: #fff;
}
.btn-fixed-wrap-desctop ul li a.bfw-wa:hover {
    background: linear-gradient(180deg, #4ec462 0%, #1c8e42 100%);
}

/* LiveAgent availability indicator: the Live-Chat rail label is white by
   default and turns gold the moment the chat is actually live (body gets
   .livechat-online from livechat.php once LiveAgent renders its button). The
   rail icon is already gold-gradient, so only the text needs to change.
   NB: target the label <span>, not the <a> — the anchor colour is locked
   white by an !important rule; the span colour is free. */
.btn-fixed-wrap-desctop ul li a.live-chat span { transition: color 0.3s ease; }
body.livechat-online .btn-fixed-wrap-desctop ul li a.live-chat span { color: var(--brand-gold); }

/* icon inside the link — same colour as the label text (spacing via the link's gap) */
.btn-fixed-wrap-desctop ul li a i {
    font-size: 19px;
    color: inherit;
}
.btn-fixed-wrap-desctop ul li span.flag-icon { box-shadow: 0 0 1px 0.1px #fff; }

/* Tighter widths (esp. 1400–1600px, where the CLA rail is reserved on the right
   leaving only viewport−306−380 for the bar): shrink type/spacing so the four
   items always fit and never spill LEFT under the 306px menu. The ul is
   centre-justified, so an overflow would push its left edge under the menu —
   this keeps it inside the content column. */
@media screen and (max-width: 1620px) {
    .btn-fixed-wrap-desctop ul { gap: 4px; padding: 5px; }
    .btn-fixed-wrap-desctop ul li a { font-size: 13px; padding: 7px 10px; gap: 4px; }
    .btn-fixed-wrap-desctop ul li a i { font-size: 16px; }
    .btn-fixed-wrap-desctop ul li span.flag-icon { transform: scale(.85); }
}

/* The bar is fixed at bottom:0 (shown at every width) — reserve space under the
   footer so it never covers the last row. */
#footer { padding-bottom: 50px; }

/* ---------- combined bar: responsive button count ----------
   One bar at all widths. Below 900px the left sidebar is gone, so the bar spans
   the full width; on small screens only Contact + WhatsApp remain (the
   desktop-only buttons — Live Chat + phone number — carry .bfw-lg and hide). */
@media screen and (max-width: 900px) {
    .btn-fixed-wrap-desctop { left: 0; }
}
@media screen and (max-width: 700px) {
    .btn-fixed-wrap-desctop ul li.bfw-lg { display: none; }
}