/**
 * OneContact Frontend Stylesheet
 * Responsive Floating & Sticky Contact Badges for WordPress
 */

:root {
    --oc-color-whatsapp: #25D366;
    --oc-text-whatsapp: #ffffff;
    --oc-color-telegram: #229ED9;
    --oc-text-telegram: #ffffff;
    --oc-color-phone: #0284c7;
    --oc-text-phone: #ffffff;
    --oc-dt-trigger-bg: #0284c7;
    --oc-dt-trigger-text: #ffffff;
    --oc-mb-trigger-bg: #0284c7;
    --oc-mb-trigger-text: #ffffff;
    --oc-dt-size: 48px;
    --oc-mb-size: 48px;
    --oc-dt-offset-x: 24px;
    --oc-dt-offset-y: 24px;
    --oc-dt-gap: 10px;
    --oc-mb-offset-x: 16px;
    --oc-mb-offset-y: 16px;
    --oc-mb-gap: 8px;
    --oc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --oc-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.08);
    --oc-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.24), 0 3px 6px rgba(0, 0, 0, 0.12);
    --oc-trans: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base Widget Container */
#onecontact-widget {
    position: fixed;
    z-index: var(--oc-dt-z-index, var(--oc-z-index, 99990));
    display: flex;
    flex-direction: column;
    font-family: var(--oc-font);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    border: none !important;
    outline: none !important;
    background: transparent;
    pointer-events: auto;
}

#onecontact-widget * {
    box-sizing: border-box;
}

/* Hide trigger button by default */
#onecontact-widget .onecontact-trigger-btn {
    display: none;
}

/* Badges Group */
.onecontact-badges-group {
    display: flex;
    flex-direction: column;
    gap: var(--oc-dt-gap);
    margin: 0;
    padding: 0;
    border: none !important;
    background: transparent;
}

/* Individual Contact Badge */
.onecontact-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--oc-dt-size, 48px);
    padding: 0 calc(var(--oc-dt-size, 48px) * 0.38);
    font-size: calc(var(--oc-dt-size, 48px) * 0.29);
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 600;
    line-height: 1;
    box-shadow: var(--oc-shadow);
    transition: var(--oc-trans);
    cursor: pointer;
    border: none !important;
    outline: none !important;
    user-select: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.onecontact-badge:hover,
.onecontact-badge:focus-visible {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--oc-shadow-hover);
    text-decoration: none !important;
}

.onecontact-badge:active {
    transform: translateY(0) scale(0.98);
}

.onecontact-badge:focus-visible {
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.4), var(--oc-shadow-hover);
}

/* Brand Colors & Custom Text Colors */
.onecontact-badge-whatsapp {
    background-color: var(--oc-color-whatsapp) !important;
    color: var(--oc-text-whatsapp) !important;
}
.onecontact-badge-telegram {
    background-color: var(--oc-color-telegram) !important;
    color: var(--oc-text-telegram) !important;
}
.onecontact-badge-phone {
    background-color: var(--oc-color-phone) !important;
    color: var(--oc-text-phone) !important;
}

/* SVG Icons */
.onecontact-badge-icon,
.onecontact-trigger-icon-open,
.onecontact-trigger-icon-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onecontact-svg {
    display: block;
    fill: currentColor;
    width: calc(var(--oc-dt-size, 48px) * 0.46);
    height: calc(var(--oc-dt-size, 48px) * 0.46);
}

.onecontact-badge-label {
    display: inline-block;
    letter-spacing: 0.2px;
}

/* ==========================================================================
   BUTTON SIZES PRESETS (Backward Compatibility)
   ========================================================================== */
.onecontact-size-small { --oc-dt-size: 40px; }
.onecontact-size-medium { --oc-dt-size: 48px; }
.onecontact-size-large { --oc-dt-size: 56px; }
.onecontact-size-xlarge { --oc-dt-size: 64px; }

/* ==========================================================================
   ANIMATIONS: ALTERNATING WAVE PULSE & VIVID GLOW
   ========================================================================== */
@keyframes oc-pulse-wave {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    }
    18% {
        transform: scale(1.10);
        box-shadow: 0 0 16px currentColor, 0 8px 24px rgba(0, 0, 0, 0.28);
    }
    36% {
        transform: scale(1);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    }
}

@keyframes oc-glow-aura {
    0%, 100% {
        box-shadow: 0 0 8px currentColor, 0 4px 12px rgba(0, 0, 0, 0.16);
        filter: drop-shadow(0 0 3px currentColor);
    }
    50% {
        box-shadow: 0 0 24px currentColor, 0 0 44px currentColor, 0 6px 24px rgba(0, 0, 0, 0.3);
        filter: drop-shadow(0 0 12px currentColor);
    }
}

@keyframes oc-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Sequential animation, one badge at a time - onecontact-frontend.js cycles
   the .oc-flash class across badges on a timer (any number of channels,
   including the newer link/social ones, all get their turn); the CSS here
   only defines which single-run animation plays while a badge carries it. */
.onecontact-dt-anim-pulse .onecontact-badge.oc-flash,
.onecontact-mb-anim-pulse .onecontact-badge.oc-flash,
.onecontact-dt-anim-pulse .onecontact-trigger-btn.oc-flash,
.onecontact-mb-anim-pulse .onecontact-trigger-btn.oc-flash {
    animation: oc-pulse-wave 1.2s ease-in-out;
}

/* Sequential Chromatic Glow Application */
.onecontact-dt-anim-glow .onecontact-badge.oc-flash,
.onecontact-mb-anim-glow .onecontact-badge.oc-flash,
.onecontact-dt-anim-glow .onecontact-trigger-btn.oc-flash,
.onecontact-mb-anim-glow .onecontact-trigger-btn.oc-flash {
    animation: oc-glow-aura 1.2s ease-in-out;
}

/* Bounce Application */
.onecontact-dt-anim-bounce .onecontact-badge.oc-flash,
.onecontact-mb-anim-bounce .onecontact-badge.oc-flash,
.onecontact-dt-anim-bounce .onecontact-trigger-btn.oc-flash,
.onecontact-mb-anim-bounce .onecontact-trigger-btn.oc-flash {
    animation: oc-bounce 1.2s ease-in-out;
}

/* ==========================================================================
   DESKTOP VIEW (>= 768px)
   ========================================================================== */
@media screen and (min-width: 768px) {
    .onecontact-hide-desktop {
        display: none !important;
    }

    /* Positions */
    #onecontact-widget.onecontact-dt-pos-bottom-right {
        bottom: var(--oc-dt-offset-y);
        right: var(--oc-dt-offset-x);
        left: auto;
        top: auto;
        transform: none;
        align-items: flex-end;
    }
    #onecontact-widget.onecontact-dt-pos-bottom-right .onecontact-badges-group {
        flex-direction: column;
        align-items: flex-end;
    }

    #onecontact-widget.onecontact-dt-pos-bottom-left {
        bottom: var(--oc-dt-offset-y);
        left: var(--oc-dt-offset-x);
        right: auto;
        top: auto;
        transform: none;
        align-items: flex-start;
    }
    #onecontact-widget.onecontact-dt-pos-bottom-left .onecontact-badges-group {
        flex-direction: column;
        align-items: flex-start;
    }

    #onecontact-widget.onecontact-dt-pos-bottom-center {
        bottom: var(--oc-dt-offset-y);
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        top: auto;
        align-items: center;
    }

    #onecontact-widget.onecontact-dt-pos-bottom-center .onecontact-badges-group {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    #onecontact-widget.onecontact-dt-pos-middle-right {
        top: 50%;
        transform: translateY(-50%);
        right: var(--oc-dt-offset-x);
        left: auto;
        bottom: auto;
        align-items: flex-end;
    }
    #onecontact-widget.onecontact-dt-pos-middle-right .onecontact-badges-group {
        flex-direction: column;
        align-items: flex-end;
    }

    #onecontact-widget.onecontact-dt-pos-middle-left {
        top: 50%;
        transform: translateY(-50%);
        left: var(--oc-dt-offset-x);
        right: auto;
        bottom: auto;
        align-items: flex-start;
    }
    #onecontact-widget.onecontact-dt-pos-middle-left .onecontact-badges-group {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Layout: Icon Stack (Circular buttons) */
    #onecontact-widget.onecontact-dt-layout-icon_stack .onecontact-badge {
        width: var(--oc-dt-size, 48px) !important;
        height: var(--oc-dt-size, 48px) !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    #onecontact-widget.onecontact-dt-layout-icon_stack .onecontact-badge-label {
        display: none !important;
    }

    /* Labels toggle */
    #onecontact-widget:not(.onecontact-dt-show-labels) .onecontact-badge-label {
        display: none !important;
    }
    #onecontact-widget:not(.onecontact-dt-show-labels) .onecontact-badge {
        width: var(--oc-dt-size, 48px) !important;
        height: var(--oc-dt-size, 48px) !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    /* Layout: Floating Trigger Desktop */
    #onecontact-widget.onecontact-dt-layout-floating_trigger {
        flex-direction: column-reverse !important;
    }
    #onecontact-widget.onecontact-dt-layout-floating_trigger .onecontact-trigger-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: var(--oc-dt-size, 48px);
        padding: 0 calc(var(--oc-dt-size, 48px) * 0.42);
        border-radius: 999px;
        background-color: var(--oc-dt-trigger-bg);
        color: var(--oc-dt-trigger-text);
        font-size: calc(var(--oc-dt-size, 48px) * 0.31);
        font-weight: 700;
        border: none !important;
        box-shadow: var(--oc-shadow);
        cursor: pointer;
        transition: var(--oc-trans);
        z-index: 2;
        white-space: nowrap;
    }
    #onecontact-widget.onecontact-dt-layout-floating_trigger .onecontact-trigger-btn:hover {
        transform: scale(1.05);
        box-shadow: var(--oc-shadow-hover);
    }
    #onecontact-widget.onecontact-dt-layout-floating_trigger .onecontact-trigger-icon-close {
        display: none;
    }
    #onecontact-widget.onecontact-dt-layout-floating_trigger .onecontact-badges-group {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px) scale(0.95);
        transition: var(--oc-trans);
        margin-bottom: 12px;
        pointer-events: none;
    }
    #onecontact-widget.onecontact-dt-layout-floating_trigger.is-open .onecontact-badges-group {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    #onecontact-widget.onecontact-dt-layout-floating_trigger.is-open .onecontact-trigger-icon-open {
        display: none;
    }
    #onecontact-widget.onecontact-dt-layout-floating_trigger.is-open .onecontact-trigger-icon-close {
        display: inline-flex;
    }
}

/* ==========================================================================
   MOBILE VIEW (< 768px)
   ========================================================================== */
@media screen and (max-width: 767px) {
    .onecontact-hide-mobile {
        display: none !important;
    }

    #onecontact-widget {
        z-index: var(--oc-mb-z-index, var(--oc-z-index, 99990)) !important;
        bottom: var(--oc-mb-offset-y);
        right: var(--oc-mb-offset-x);
        gap: var(--oc-mb-gap);
    }

    #onecontact-widget .onecontact-badge {
        height: var(--oc-mb-size, 48px) !important;
        padding: 0 calc(var(--oc-mb-size, 48px) * 0.36) !important;
        font-size: calc(var(--oc-mb-size, 48px) * 0.28) !important;
    }
    #onecontact-widget .onecontact-svg {
        width: calc(var(--oc-mb-size, 48px) * 0.45) !important;
        height: calc(var(--oc-mb-size, 48px) * 0.45) !important;
    }

    /* Orientation: Vertical on Sides (bottom-right / bottom-left) */
    #onecontact-widget.onecontact-mb-pos-bottom-right {
        right: var(--oc-mb-offset-x);
        left: auto;
        transform: none;
        align-items: flex-end;
    }
    #onecontact-widget.onecontact-mb-pos-bottom-right .onecontact-badges-group {
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    #onecontact-widget.onecontact-mb-pos-bottom-left {
        left: var(--oc-mb-offset-x);
        right: auto;
        transform: none;
        align-items: flex-start;
    }
    #onecontact-widget.onecontact-mb-pos-bottom-left .onecontact-badges-group {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Orientation: Horizontal ONLY when bottom-center */
    #onecontact-widget.onecontact-mb-pos-bottom-center {
        bottom: var(--oc-mb-offset-y);
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        align-items: center;
    }
    #onecontact-widget.onecontact-mb-pos-bottom-center .onecontact-badges-group {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Lo spazio extra inferiore per icone al centro in basso (anti-sbordamento)
       NON sposta le icone: restano sempre alla posizione configurata
       (--oc-mb-offset-y). Lo spazio in più lo crea solo il pannello a
       scorrimento normale inserito prima del widget
       (ensureMobileFooterClearance in onecontact-frontend.js). */

    /* Labels toggle on Mobile */
    #onecontact-widget:not(.onecontact-mb-show-labels) .onecontact-badge-label {
        display: none !important;
    }
    #onecontact-widget:not(.onecontact-mb-show-labels) .onecontact-badge {
        padding: 0 !important;
        border-radius: 50% !important;
        width: var(--oc-mb-size, 48px) !important;
        height: var(--oc-mb-size, 48px) !important;
    }

    /* Layout: Floating Trigger on Mobile */
    #onecontact-widget.onecontact-mb-layout-floating_trigger {
        flex-direction: column-reverse !important;
    }
    #onecontact-widget.onecontact-mb-layout-floating_trigger .onecontact-trigger-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--oc-mb-size, 48px);
        height: var(--oc-mb-size, 48px);
        padding: 0;
        border-radius: 50%;
        background-color: var(--oc-mb-trigger-bg);
        color: var(--oc-mb-trigger-text);
        border: none !important;
        box-shadow: var(--oc-shadow);
        cursor: pointer;
        transition: var(--oc-trans);
        z-index: 2;
    }
    #onecontact-widget.onecontact-mb-layout-floating_trigger .onecontact-trigger-btn svg {
        width: calc(var(--oc-mb-size, 48px) * 0.46) !important;
        height: calc(var(--oc-mb-size, 48px) * 0.46) !important;
    }
    #onecontact-widget.onecontact-mb-layout-floating_trigger .onecontact-trigger-label {
        display: none;
    }
    #onecontact-widget.onecontact-mb-layout-floating_trigger .onecontact-trigger-icon-close {
        display: none;
    }
    #onecontact-widget.onecontact-mb-layout-floating_trigger .onecontact-badges-group {
        opacity: 0;
        visibility: hidden;
        transform: translateY(12px) scale(0.95);
        transition: var(--oc-trans);
        margin-bottom: 10px;
        pointer-events: none;
    }
    #onecontact-widget.onecontact-mb-layout-floating_trigger.is-open .onecontact-badges-group {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    #onecontact-widget.onecontact-mb-layout-floating_trigger.is-open .onecontact-trigger-icon-open {
        display: none;
    }
    #onecontact-widget.onecontact-mb-layout-floating_trigger.is-open .onecontact-trigger-icon-close {
        display: inline-flex;
    }

    /* Layout: Sticky Bottom Bar */
    #onecontact-widget.onecontact-mb-layout-bottom_bar,
    #onecontact-widget.onecontact-mb-pos-bottom-bar {
        position: fixed;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        padding: 8px 12px;
        z-index: var(--oc-mb-z-index, var(--oc-z-index, 99990)) !important;
        flex-direction: row !important;
    }

    #onecontact-widget.onecontact-mb-layout-bottom_bar .onecontact-trigger-btn,
    #onecontact-widget.onecontact-mb-pos-bottom-bar .onecontact-trigger-btn {
        display: none !important;
    }

    #onecontact-widget.onecontact-mb-layout-bottom_bar .onecontact-badges-group,
    #onecontact-widget.onecontact-mb-pos-bottom-bar .onecontact-badges-group {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: var(--oc-mb-gap);
        justify-content: space-around !important;
        align-items: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    #onecontact-widget.onecontact-mb-layout-bottom_bar .onecontact-badge,
    #onecontact-widget.onecontact-mb-pos-bottom-bar .onecontact-badge {
        flex: 1 1 0;
        min-width: 0;
        height: 44px !important;
        padding: 6px 10px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    #onecontact-widget.onecontact-mb-layout-bottom_bar .onecontact-badge .onecontact-badge-label,
    #onecontact-widget.onecontact-mb-pos-bottom-bar .onecontact-badge .onecontact-badge-label {
        display: inline-block !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12.5px;
    }
}