/**
 * Contact Floating Widget Styles
 *
 * @package Cxb_B2B_Product_Showcase
 */

/* ---- Container ---- */
.nbb2b-contact-widget {
    position: fixed;
    top: 50%;
    z-index: 99999;
    transform: translateY(-50%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    display: flex;
    flex-direction: column;
    width: 40px;
    background: #f5f5f5;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    overflow: visible;
}

.nbb2b-contact-widget.nbb2b-cw-right {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.nbb2b-contact-widget.nbb2b-cw-left {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ---- Individual item ---- */
.nbb2b-cw-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background-color .25s ease;
}

.nbb2b-cw-item + .nbb2b-cw-item {
    border-top: 1px solid #d0d0d0;
}

.nbb2b-cw-item:first-child {
    border-radius: 4px 4px 0 0;
}

.nbb2b-contact-widget.nbb2b-cw-right .nbb2b-cw-item:first-child {
    border-top-right-radius: 0;
}

.nbb2b-contact-widget.nbb2b-cw-left .nbb2b-cw-item:first-child {
    border-top-left-radius: 0;
}

.nbb2b-cw-item:last-child {
    border-radius: 0 0 4px 4px;
}

.nbb2b-contact-widget.nbb2b-cw-right .nbb2b-cw-item:last-child {
    border-bottom-right-radius: 0;
}

.nbb2b-contact-widget.nbb2b-cw-left .nbb2b-cw-item:last-child {
    border-bottom-left-radius: 0;
}

/* ---- Icon ---- */
/* Default icon size: 26px (20px x 1.3). The chat icon overrides this below
   with higher specificity and is intentionally excluded from the bump. */
.nbb2b-cw-icon {
    width: 26px;
    height: 26px;
    transition: transform .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nbb2b-cw-icon img {
    width: 26px;
    height: 26px;
    display: block;
}

/* chat icon uses chat-icon.svg – size it at 30px */
.nbb2b-cw-item[data-type="chat"] .nbb2b-cw-icon,
.nbb2b-cw-item[data-type="chat"] .nbb2b-cw-icon img {
    width: 30px;
    height: 30px;
}

/* phone & email icons are black stroke-based SVGs; colour them on hover via CSS filter */
.nbb2b-cw-item[data-type="phone"] .nbb2b-cw-icon img,
.nbb2b-cw-item[data-type="email"] .nbb2b-cw-icon img {
    transition: filter .25s ease;
}

/* Hover – scale icon */
.nbb2b-cw-item:hover .nbb2b-cw-icon {
    transform: scale(1.18);
}

/* ---- Tooltip ---- */
.nbb2b-cw-tooltip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    background: #333;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 100000;
}

/* Right-side widget: tooltip goes left */
.nbb2b-cw-right .nbb2b-cw-tooltip {
    right: 100%;
    margin-right: 8px;
}

/* Left-side widget: tooltip goes right */
.nbb2b-cw-left .nbb2b-cw-tooltip {
    left: 100%;
    margin-left: 8px;
}

/* Arrow for tooltip */
.nbb2b-cw-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
}

.nbb2b-cw-right .nbb2b-cw-tooltip::after {
    left: 100%;
    border-left-color: #333;
}

.nbb2b-cw-left .nbb2b-cw-tooltip::after {
    right: 100%;
    border-right-color: #333;
}

.nbb2b-cw-item:hover .nbb2b-cw-tooltip {
    opacity: 1;
}

.nbb2b-cw-right .nbb2b-cw-item:hover .nbb2b-cw-tooltip {
    transform: translateY(-50%) translateX(-2px);
}

.nbb2b-cw-left .nbb2b-cw-item:hover .nbb2b-cw-tooltip {
    transform: translateY(-50%) translateX(2px);
}

/* When an item has a richer hover popup (e.g. WeChat / WhatsApp QR),
   suppress the small text tooltip so they don't render at the same time. */
.nbb2b-cw-item.nbb2b-cw-has-popup .nbb2b-cw-tooltip {
    display: none;
}

/* ---- Back to top ---- */
.nbb2b-cw-item.nbb2b-cw-backtop {
    display: none; /* hidden by default, shown via JS */
}

.nbb2b-cw-item.nbb2b-cw-backtop.nbb2b-cw-visible {
    display: flex;
}

.nbb2b-cw-item.nbb2b-cw-backtop .nbb2b-cw-icon img {
    transition: filter .25s ease;
}

/* ---- Hover popup (QR + account) ---- */
.nbb2b-cw-popup {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(.96);
    transform-origin: center;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    padding: 12px 14px;
    min-width: 170px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 100000;
}

/* Right-side widget: popup opens to the LEFT of the icon */
.nbb2b-cw-right .nbb2b-cw-popup {
    right: 100%;
    margin-right: 12px;
}

/* Left-side widget: popup opens to the RIGHT of the icon */
.nbb2b-cw-left .nbb2b-cw-popup {
    left: 100%;
    margin-left: 12px;
}

/* Show popup on hover/focus of the parent item.
   Note: on touch devices, the first tap triggers :hover (popup shows) and
   a second tap elsewhere dismisses it -- this is the intended fallback for
   the WeChat icon since it no longer has a click handler. On the WhatsApp
   icon the popup will briefly flash before wa.me opens, which is acceptable. */
.nbb2b-cw-item:hover .nbb2b-cw-popup,
.nbb2b-cw-item:focus-within .nbb2b-cw-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

/* Little arrow pointing back to the icon */
.nbb2b-cw-popup::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
}

.nbb2b-cw-right .nbb2b-cw-popup::after {
    left: 100%;
    border-left-color: #fff;
}

.nbb2b-cw-left .nbb2b-cw-popup::after {
    right: 100%;
    border-right-color: #fff;
}

.nbb2b-cw-popup-label {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.2;
    color: #07C160;
}

.nbb2b-cw-popup--whatsapp .nbb2b-cw-popup-label {
    color: #25D366;
}

.nbb2b-cw-popup-img {
    width: 150px;
    height: 150px;
    margin: 0 auto 8px;
    display: block;
    border-radius: 4px;
    object-fit: contain;
    background: #fff;
}

.nbb2b-cw-popup-account {
    font-size: 12px;
    color: #333;
    margin: 0;
    word-break: break-all;
    line-height: 1.4;
}

/* ---- Floating mode (when a horizontal margin is set) ---- */
/* Default: the widget sits flush against the screen edge, so only the two
   inner corners are rounded. When a horizontal margin pushes it away from
   the edge, restore the rounded corners on all four sides. */
.nbb2b-contact-widget.nbb2b-cw-floating.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-floating.nbb2b-cw-left {
    border-radius: 4px;
}

.nbb2b-contact-widget.nbb2b-cw-floating.nbb2b-cw-right .nbb2b-cw-item:first-child,
.nbb2b-contact-widget.nbb2b-cw-floating.nbb2b-cw-left .nbb2b-cw-item:first-child {
    border-radius: 4px 4px 0 0;
}

.nbb2b-contact-widget.nbb2b-cw-floating.nbb2b-cw-right .nbb2b-cw-item:last-child,
.nbb2b-contact-widget.nbb2b-cw-floating.nbb2b-cw-left .nbb2b-cw-item:last-child {
    border-radius: 0 0 4px 4px;
}

/* ---- Responsive – slightly smaller on mobile ---- */
@media (max-width: 768px) {
    .nbb2b-contact-widget {
        width: 36px;
    }
    .nbb2b-cw-item {
        width: 36px;
        height: 36px;
    }
    .nbb2b-cw-icon,
    .nbb2b-cw-icon img {
        width: 23px;
        height: 23px;
    }
}

/* ============================================================
 * Style 2 — Hover Side-Slide Animation
 * ------------------------------------------------------------
 * Activated when the widget container carries the
 * .nbb2b-cw-style2 class (added in render_contact_widget()
 * when the backend "Style Selection" field is set to Style 2).
 *
 * Behaviour:
 *   • Square buttons, no rounded corners.
 *   • Button background = global element colour (injected via
 *     wp_add_inline_style in enqueue_contact_widget_assets()).
 *   • SVG icons forced white; the icon stays on the OUTER side
 *     (screen edge) and never moves.
 *   • 1px gap between buttons.
 *   • On hover the contact label slides + fades out on the INNER
 *     side (toward the page content), revealing it next to the icon.
 *
 * Stability note: the button (.nbb2b-cw-item) is the hover target
 * and is deliberately kept STATIC — it never transforms. Only the
 * label animates, and the label has pointer-events disabled. This
 * removes the previous hover jitter, which was caused by the button
 * sliding out from under the cursor and repeatedly losing :hover.
 *
 * Slide direction is automatic: a right-docked widget reveals the
 * label to the left, a left-docked widget reveals it to the right.
 * ============================================================ */

/* ---- Container: drop background, shadow and rounding ---- */
.nbb2b-contact-widget.nbb2b-cw-style2 {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    gap: 1px;                 /* 1px gap between buttons */
    overflow: visible;
}

.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-left,
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-floating.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-floating.nbb2b-cw-left {
    border-radius: 0;
}

/* ---- Square buttons ----
   The button is the stable hover target and NEVER moves — this is
   what keeps the animation smooth and shake-free. */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item {
    width: 40px;
    height: 40px;
    border-radius: 0 !important;
    transform: none !important;   /* never move the hover target */
    overflow: visible;
    z-index: 1;                   /* sit above the sliding label */
}

/* Remove the 1px top divider used by the Minimal style — the
   1px gap on the container provides the separation instead. */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item + .nbb2b-cw-item {
    border-top: 0;
}

.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:first-child,
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:last-child {
    border-radius: 0 !important;
}

/* ---- White SVG icons ----
   Icons come in two flavours: stroke-based (currentColor) and
   fill-based (hard-coded brand colours). brightness(0) invert(1)
   forces both kinds to solid white. The icon stays on the OUTER
   side (screen edge) and does not move on hover. */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-icon img {
    filter: brightness(0) invert(1);
}

/* Disable the Minimal-style icon scale-up on hover (keeps it still). */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:hover .nbb2b-cw-icon {
    transform: none;
}

/* ---- Slide-out label (reuses the .nbb2b-cw-tooltip element) ----
   The label sits on the INNER side of the button (toward the page
   content) and slides + fades into view on hover. pointer-events
   are disabled so the label never becomes its own hover target,
   which keeps the reveal perfectly stable. */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-tooltip {
    top: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 14px;
    background: #333;          /* dark-gray label background */
    color: #fff;               /* white label text */
    border-radius: 0;
    font-size: 13px;
    line-height: 40px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

/* No arrow on the Style-2 label. */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-tooltip::after {
    display: none;
}

/* Right-docked widget: icon on the right (outer edge), label
   revealed on the LEFT (inner side). At rest the label is nudged
   toward the button; on hover it slides left into place. */
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-right .nbb2b-cw-tooltip {
    right: 100%;
    left: auto;
    transform: translateX(14px);
}
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-right .nbb2b-cw-item:hover .nbb2b-cw-tooltip {
    transform: translateX(0);
}

/* Left-docked widget: icon on the left (outer edge), label
   revealed on the RIGHT (inner side). */
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-left .nbb2b-cw-tooltip {
    left: 100%;
    right: auto;
    transform: translateX(-14px);
}
.nbb2b-contact-widget.nbb2b-cw-style2.nbb2b-cw-left .nbb2b-cw-item:hover .nbb2b-cw-tooltip {
    transform: translateX(0);
}

/* Fade the label in on hover (paired with the slide above). */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item:hover .nbb2b-cw-tooltip {
    opacity: 1;
    visibility: visible;
}

/* QR-popup items (WhatsApp / WeChat with an uploaded QR code):
   suppress the dark-gray slide-out label so that hovering only
   expands the richer QR popup (QR image + account ID). Note: a
   WhatsApp button with no QR code has no .nbb2b-cw-has-popup class,
   so it keeps the normal slide-out label. */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item.nbb2b-cw-has-popup .nbb2b-cw-tooltip {
    display: none;
}

/* ---- "Top" / back-to-top button ----
   The Top button does NOT use the slide-out animation. It simply
   darkens on hover. The inset box-shadow darkens the button
   background while leaving the white icon (a child element)
   untouched, and works regardless of the element colour. */
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-backtop .nbb2b-cw-tooltip {
    display: none;             /* no slide-out label for the Top button */
}
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-backtop {
    transition: box-shadow .2s ease;
}
.nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-backtop:hover {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .22);
}

/* ---- Responsive — match the Minimal style's mobile sizing ---- */
@media (max-width: 768px) {
    .nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-item {
        width: 36px;
        height: 36px;
    }
    .nbb2b-contact-widget.nbb2b-cw-style2 .nbb2b-cw-tooltip {
        height: 36px;
        line-height: 36px;
        font-size: 12px;
    }
}

/* ============================================================
 * Style 3 — Circular Buttons
 * ------------------------------------------------------------
 * Activated when the widget container carries the
 * .nbb2b-cw-style3 class (added in render_contact_widget()
 * when the backend "Style Selection" field is set to Style 3).
 *
 * Behaviour:
 *   • Circular buttons.
 *   • 5px gap between buttons.
 *   • Button background = global element colour, EXCEPT:
 *       – WhatsApp / WeChat : brand green
 *       – Facebook          : brand blue
 *     (the element-colour base is injected via wp_add_inline_style
 *     in enqueue_contact_widget_assets(); the brand exceptions are
 *     defined below.)
 *   • All SVG icons forced white.
 *   • Hover behaves like Style 1 — the simple tooltip/label is
 *     shown. This is handled by the base Minimal tooltip rules,
 *     which are not style-scoped, so they apply here unchanged.
 * ============================================================ */

/* ---- Container: transparent, no shadow, 5px gap ---- */
.nbb2b-contact-widget.nbb2b-cw-style3 {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    gap: 5px;                 /* 5px gap between buttons */
    overflow: visible;
}

.nbb2b-contact-widget.nbb2b-cw-style3.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-style3.nbb2b-cw-left,
.nbb2b-contact-widget.nbb2b-cw-style3.nbb2b-cw-floating.nbb2b-cw-right,
.nbb2b-contact-widget.nbb2b-cw-style3.nbb2b-cw-floating.nbb2b-cw-left {
    border-radius: 0;
}

/* ---- Circular buttons ---- */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item {
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    /* background-color (element colour) supplied by inline dynamic CSS */
}

/* Drop the 1px divider used by the Minimal style — the 5px gap
   on the container provides the separation instead. */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item + .nbb2b-cw-item {
    border-top: 0;
}

/* Keep every button fully circular (override the Minimal style's
   first-/last-child corner rounding). */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item:first-child,
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item:last-child {
    border-radius: 50% !important;
}

/* ---- White SVG icons ----
   brightness(0) invert(1) forces both stroke-based (currentColor)
   and fill-based (brand-colour) SVGs to solid white. */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-icon img {
    filter: brightness(0) invert(1);
}

/* ---- Per-button background colour exceptions ----
   These override the element-colour base. Each selector includes a
   :hover variant so the colour also holds while hovering — the base
   element-colour :hover rule from the inline dynamic CSS would
   otherwise win on hover. */

/* WhatsApp — brand green */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="whatsapp"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="whatsapp"]:hover {
    background-color: #25D366;
}

/* WeChat — brand green */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="wechat"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="wechat"]:hover {
    background-color: #07C160;
}

/* Facebook — brand blue */
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="facebook"],
.nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item[data-type="facebook"]:hover {
    background-color: #1877F2;
}

/* ---- Responsive — match the Minimal style's mobile sizing ---- */
@media (max-width: 768px) {
    .nbb2b-contact-widget.nbb2b-cw-style3 .nbb2b-cw-item {
        width: 36px;
        height: 36px;
    }
}