/* YOOtheme Floating Contact Bar 2.0
 * Structural/runtime CSS only. Visual defaults are intentionally low-specificity
 * fallbacks. YOOtheme > Style > Floating Contact Bar compiles the global design
 * values into the theme CSS and overrides these variables.
 */

:where(.yt-fcb) {
    --fcb-bg-color: #f8f8f8;
    --fcb-bg-image: linear-gradient(135deg, transparent, transparent);
    --fcb-border-width: 0;
    --fcb-border-color: transparent;
    --fcb-radius: 35px 0 0 35px;
    --fcb-padding: 25px 15px;
    --fcb-shadow: -5px 10px 15px 0 rgba(0, 0, 0, .2);
    --fcb-backdrop: blur(0px) brightness(100%) contrast(100%) saturate(100%) grayscale(0%) sepia(0%);

    --fcb-gap: 20px;
    --fcb-mobile-gap: 20px;
    --fcb-mobile-padding: 12px 15px;
    --fcb-mobile-radius: 20px 20px 0 0;

    --fcb-item-bg-color: transparent;
    --fcb-item-bg-image: linear-gradient(135deg, transparent, transparent);
    --fcb-item-border-width: 0;
    --fcb-item-border-color: transparent;
    --fcb-item-radius: 0;
    --fcb-item-padding: 0;
    --fcb-item-content-gap: 3px;
    --fcb-item-shadow: 0 5px 15px 0 transparent;
    --fcb-item-backdrop: blur(0px) brightness(100%) contrast(100%) saturate(100%) grayscale(0%) sepia(0%);

    --fcb-item-icon: #2a2a2a;
    --fcb-item-icon-hover: #2fd1b9;
    --fcb-item-icon-size: 24px;
    --fcb-item-mobile-icon-size: 24px;
    --fcb-item-label: #2a2a2a;
    --fcb-item-label-hover: #2a2a2a;
    --fcb-item-label-size: 13px;
    --fcb-item-mobile-label-size: 13px;

    --fcb-item-hover-bg-color: transparent;
    --fcb-item-hover-bg-image: linear-gradient(135deg, transparent, transparent);
    --fcb-item-hover-border-color: transparent;
    --fcb-item-hover-delay: 60ms;
    --fcb-item-hover-duration: 220ms;
    --fcb-item-hover-easing: ease;
    --fcb-item-hover-transform: none;
}

.yt-fcb {
    position: fixed;
    top: var(--fcb-desktop-top);
    z-index: var(--fcb-z);
    display: grid;
    grid-template-columns: max-content;
    gap: var(--fcb-gap);
    box-sizing: border-box;
    margin: 0;
    padding: var(--fcb-padding);
    background-color: var(--fcb-bg-color);
    background-image: var(--fcb-bg-image);
    border: var(--fcb-border-width) solid var(--fcb-border-color);
    border-radius: var(--fcb-radius);
    box-shadow: var(--fcb-shadow);
    -webkit-backdrop-filter: var(--fcb-backdrop);
    backdrop-filter: var(--fcb-backdrop);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.yt-fcb[data-yt-fcb] { position: fixed; }
.yt-fcb--desktop-right { right: var(--fcb-desktop-margin); }
.yt-fcb--desktop-left { left: var(--fcb-desktop-margin); }

.yt-fcb--effect-none { transition: none; }
.yt-fcb--effect-fade,
.yt-fcb--effect-fade-slide {
    transition:
        opacity var(--fcb-transition) ease,
        transform var(--fcb-transition) ease,
        visibility 0s linear var(--fcb-transition);
}

.yt-fcb--effect-fade.yt-fcb-is-visible,
.yt-fcb--effect-fade-slide.yt-fcb-is-visible {
    transition:
        opacity var(--fcb-transition) ease,
        transform var(--fcb-transition) ease,
        visibility 0s linear 0s;
}

.yt-fcb.yt-fcb-is-js[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible) {
    visibility: hidden;
    pointer-events: none;
}

.yt-fcb.yt-fcb-is-js.yt-fcb--effect-fade[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible),
.yt-fcb.yt-fcb-is-js.yt-fcb--effect-fade-slide[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible) {
    opacity: 0;
}

.yt-fcb.yt-fcb-is-js.yt-fcb--effect-fade-slide.yt-fcb--desktop-right[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible) {
    transform: translateX(12px);
}
.yt-fcb.yt-fcb-is-js.yt-fcb--effect-fade-slide.yt-fcb--desktop-left[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible) {
    transform: translateX(-12px);
}

.yt-fcb__item {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
}

.yt-fcb__link {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--fcb-item-icon-size);
    min-height: var(--fcb-item-icon-size);
    padding: var(--fcb-item-padding);
    background-color: var(--fcb-item-bg-color);
    background-image: var(--fcb-item-bg-image);
    border: var(--fcb-item-border-width) solid var(--fcb-item-border-color);
    border-radius: var(--fcb-item-radius);
    box-shadow: var(--fcb-item-shadow);
    -webkit-backdrop-filter: var(--fcb-item-backdrop);
    backdrop-filter: var(--fcb-item-backdrop);
    text-align: center;
    text-decoration: none;
    transform: none;
    transform-origin: center;
    transition-property: transform, background-color, background-image, border-color, box-shadow, backdrop-filter, -webkit-backdrop-filter;
    transition-duration: var(--fcb-item-hover-duration);
    transition-timing-function: var(--fcb-item-hover-easing);
    transition-delay: 0ms;
}

.yt-fcb__content {
    display: block !important;
    width: 100%;
    min-width: max-content;
    text-align: center !important;
}

.yt-fcb__icon {
    display: block !important;
    width: var(--fcb-item-icon-size);
    height: var(--fcb-item-icon-size);
    margin: 0 auto !important;
    color: var(--fcb-item-icon) !important;
    text-align: center !important;
    line-height: 0;
    transition: color var(--fcb-item-hover-duration) var(--fcb-item-hover-easing) 0ms;
}

.yt-fcb__icon svg {
    display: block !important;
    width: var(--fcb-item-icon-size) !important;
    height: var(--fcb-item-icon-size) !important;
    margin: 0 auto !important;
    color: var(--fcb-item-icon) !important;
}

.yt-fcb__icon svg[stroke]:not([stroke="none"]),
.yt-fcb__icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

.yt-fcb__icon svg[fill]:not([fill="none"]),
.yt-fcb__icon svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

.yt-fcb__label {
    display: var(--fcb-label-display-desktop);
    width: 100%;
    margin: var(--fcb-item-content-gap) 0 0 !important;
    color: var(--fcb-item-label);
    font-size: var(--fcb-item-label-size);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center !important;
    transition: color var(--fcb-item-hover-duration) var(--fcb-item-hover-easing) 0ms;
}

.yt-fcb__link:hover,
.yt-fcb__link:focus-visible {
    background-color: var(--fcb-item-hover-bg-color);
    background-image: var(--fcb-item-hover-bg-image);
    border-color: var(--fcb-item-hover-border-color);
    text-decoration: none;
    transition-delay: var(--fcb-item-hover-delay);
}

.yt-fcb__link:hover .yt-fcb__icon,
.yt-fcb__link:focus-visible .yt-fcb__icon,
.yt-fcb__link:hover .yt-fcb__icon svg,
.yt-fcb__link:focus-visible .yt-fcb__icon svg {
    color: var(--fcb-item-icon-hover) !important;
    transition-delay: var(--fcb-item-hover-delay);
}

.yt-fcb__link:hover .yt-fcb__label,
.yt-fcb__link:focus-visible .yt-fcb__label {
    color: var(--fcb-item-label-hover);
    transition-delay: var(--fcb-item-hover-delay);
}

.yt-fcb__link:focus-visible {
    outline: 2px solid var(--fcb-item-icon-hover);
    outline-offset: 4px;
    transform: var(--fcb-item-hover-transform);
}

@media (hover: hover) {
    .yt-fcb__link:hover { transform: var(--fcb-item-hover-transform); }
}

@media (max-width: 959px) {
    .yt-fcb {
        display: flex;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        gap: var(--fcb-mobile-gap);
        padding: var(--fcb-mobile-padding);
        border-radius: var(--fcb-mobile-radius);
    }

    .yt-fcb__item { width: auto; }

    .yt-fcb__link {
        width: auto;
        min-width: var(--fcb-item-mobile-icon-size);
        min-height: var(--fcb-item-mobile-icon-size);
    }

    .yt-fcb__icon {
        width: var(--fcb-item-mobile-icon-size);
        height: var(--fcb-item-mobile-icon-size);
    }

    .yt-fcb__icon svg {
        width: var(--fcb-item-mobile-icon-size) !important;
        height: var(--fcb-item-mobile-icon-size) !important;
    }

    .yt-fcb__label {
        display: var(--fcb-label-display-mobile);
        font-size: var(--fcb-item-mobile-label-size);
    }

    .yt-fcb--mobile-top,
    .yt-fcb--mobile-bottom {
        left: 50%;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        transform: translate(-50%, 0);
    }

    .yt-fcb--mobile-top { top: var(--fcb-mobile-margin); }
    .yt-fcb--mobile-bottom { bottom: var(--fcb-mobile-margin); }

    .yt-fcb--mobile-left,
    .yt-fcb--mobile-right {
        top: 50%;
        flex-direction: column;
        transform: translate(0, -50%);
    }

    .yt-fcb--mobile-left { left: var(--fcb-mobile-margin); }
    .yt-fcb--mobile-right { right: var(--fcb-mobile-margin); }

    .yt-fcb.yt-fcb-is-js.yt-fcb--effect-fade-slide.yt-fcb--mobile-top[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible) {
        transform: translate(-50%, -12px);
    }
    .yt-fcb.yt-fcb-is-js.yt-fcb--effect-fade-slide.yt-fcb--mobile-bottom[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible) {
        transform: translate(-50%, 12px);
    }
    .yt-fcb.yt-fcb-is-js.yt-fcb--effect-fade-slide.yt-fcb--mobile-left[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible) {
        transform: translate(-12px, -50%);
    }
    .yt-fcb.yt-fcb-is-js.yt-fcb--effect-fade-slide.yt-fcb--mobile-right[data-visibility-mode="scroll"]:not(.yt-fcb-is-visible) {
        transform: translate(12px, -50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .yt-fcb { transition: none !important; }
    .yt-fcb__link,
    .yt-fcb__icon,
    .yt-fcb__label {
        transition-duration: 0ms !important;
        transition-delay: 0ms !important;
    }
    .yt-fcb__link:hover,
    .yt-fcb__link:focus-visible { transform: none !important; }
}

.yt-fcb__item--example .yt-fcb__link { cursor: default; }