/* YOOtheme Quick Contact 2.1.4
 * Structural CSS only. Visual values are supplied per element instance via
 * validated CSS custom properties on the root <nav> element.
 */

.yt-qc {
    position: fixed;
    top: var(--qc-desktop-top, 36%);
    z-index: var(--qc-z-index, 9999);
    display: grid;
    grid-template-columns: max-content;
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: var(--qc-gap, 20px);
    box-sizing: border-box;
    margin: 0;
    padding: var(--qc-padding, 25px 15px);
    background-color: var(--qc-bg-color, #f8f8f8);
    background-image: var(--qc-bg-image, none);
    border: var(--qc-border-width, 0) solid var(--qc-border-color, transparent);
    border-radius: var(--qc-border-radius, 35px 0 0 35px);
    box-shadow: var(--qc-shadow, none);
    -webkit-backdrop-filter: var(--qc-backdrop, none);
    backdrop-filter: var(--qc-backdrop, none);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.yt-qc--desktop-right {
    right: var(--qc-desktop-margin, 0);
}

.yt-qc--desktop-left {
    left: var(--qc-desktop-margin, 0);
}

/* Reveal behaviour ------------------------------------------------------- */

.yt-qc--effect-none {
    transition: none;
}

.yt-qc--effect-fade,
.yt-qc--effect-fade-slide {
    transition:
        opacity var(--qc-reveal-duration, 250ms) ease,
        transform var(--qc-reveal-duration, 250ms) ease,
        visibility 0s linear var(--qc-reveal-duration, 250ms);
}

.yt-qc--effect-fade.yt-qc-is-visible,
.yt-qc--effect-fade-slide.yt-qc-is-visible {
    transition-delay: 0s;
}

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

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

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

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

/* Items ----------------------------------------------------------------- */

.yt-qc__item {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.yt-qc__link {
    display: block;
    width: 100%;
    height: 100%;
    min-width: var(--qc-icon-size, 24px);
    min-height: var(--qc-icon-size, 24px);
    box-sizing: border-box;
    padding: var(--qc-item-padding, 0);
    background-color: var(--qc-item-bg-color, transparent);
    background-image: var(--qc-item-bg-image, none);
    border: var(--qc-item-border-width, 0) solid var(--qc-item-border-color, transparent);
    border-radius: var(--qc-item-border-radius, 0);
    box-shadow: var(--qc-item-shadow, none);
    -webkit-backdrop-filter: var(--qc-item-backdrop, none);
    backdrop-filter: var(--qc-item-backdrop, none);
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition-property: background-color, border-color, box-shadow, backdrop-filter, -webkit-backdrop-filter;
    transition-duration: var(--qc-hover-duration, 220ms);
    transition-timing-function: var(--qc-hover-easing, ease);
    transition-delay: 0ms;
}

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

.yt-qc .yt-qc__icon {
    display: block;
    width: var(--qc-icon-size, 24px);
    height: var(--qc-icon-size, 24px);
    margin: 0 auto;
    color: var(--qc-icon-color, #2a2a2a) !important;
    line-height: 0;
    text-align: center;
    transition: color var(--qc-hover-duration, 220ms) var(--qc-hover-easing, ease) 0ms;
}

.yt-qc .yt-qc__icon > svg {
    display: block;
    width: var(--qc-icon-size, 24px);
    height: var(--qc-icon-size, 24px);
    margin: 0 auto;
    color: currentColor !important;
}

/* UIkit icons are injected after page load and the theme stylesheet is loaded
 * after this plugin stylesheet. Keep the component color authoritative without
 * changing any global .uk-icon rules. */
.yt-qc .yt-qc__icon > svg[stroke]:not([stroke="none"]),
.yt-qc .yt-qc__icon > svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

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

.yt-qc__label {
    display: var(--qc-label-display-desktop, block);
    width: 100%;
    margin: var(--qc-item-content-gap, 3px) 0 0;
    color: var(--qc-label-color, #2a2a2a);
    font-size: var(--qc-label-size, 13px);
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    transition: color var(--qc-hover-duration, 220ms) var(--qc-hover-easing, ease) 0ms;
}

.yt-qc__link:hover,
.yt-qc__link:focus-visible {
    background-color: var(--qc-item-hover-bg-color, var(--qc-item-bg-color, transparent));
    background-image: var(--qc-item-hover-bg-image, var(--qc-item-bg-image, none));
    border-color: var(--qc-item-hover-border-color, var(--qc-item-border-color, transparent));
    text-decoration: none;
    transition-delay: var(--qc-hover-delay, 60ms);
}

.yt-qc .yt-qc__link:hover .yt-qc__icon,
.yt-qc .yt-qc__link:focus-visible .yt-qc__icon {
    color: var(--qc-icon-hover-color, var(--qc-icon-color, #2a2a2a)) !important;
    transition-delay: var(--qc-hover-delay, 60ms);
}

.yt-qc__link:hover .yt-qc__label,
.yt-qc__link:focus-visible .yt-qc__label {
    color: var(--qc-label-hover-color, var(--qc-label-color, #2a2a2a));
    transition-delay: var(--qc-hover-delay, 60ms);
}

.yt-qc__link:focus-visible {
    outline: 2px solid var(--qc-icon-hover-color, #2a2a2a);
    outline-offset: 4px;
}

/* Mobile ---------------------------------------------------------------- */

@media (max-width: 959px) {
    .yt-qc {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        gap: var(--qc-mobile-gap, 20px);
        padding: var(--qc-mobile-padding, 12px 15px);
        border-radius: var(--qc-mobile-border-radius, 20px 20px 0 0);
    }

    .yt-qc__item {
        width: 100%;
        height: 100%;
    }

    .yt-qc__link {
        width: 100%;
        height: 100%;
        min-width: var(--qc-mobile-icon-size, 24px);
        min-height: var(--qc-mobile-icon-size, 24px);
    }

    .yt-qc__icon,
    .yt-qc__icon > svg {
        width: var(--qc-mobile-icon-size, 24px);
        height: var(--qc-mobile-icon-size, 24px);
    }

    .yt-qc__label {
        display: var(--qc-label-display-mobile, block);
        font-size: var(--qc-mobile-label-size, 13px);
    }

    .yt-qc--mobile-top,
    .yt-qc--mobile-bottom {
        left: 50%;
        grid-template-columns: none;
        grid-template-rows: 1fr;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        align-items: stretch;
        justify-items: stretch;
        width: max-content;
        transform: translateX(-50%);
    }

    .yt-qc--mobile-top {
        top: var(--qc-mobile-margin, 0);
    }

    .yt-qc--mobile-bottom {
        bottom: var(--qc-mobile-margin, 0);
    }

    .yt-qc--mobile-left,
    .yt-qc--mobile-right {
        top: 50%;
        grid-template-columns: max-content;
        grid-template-rows: none;
        grid-auto-flow: row;
        grid-auto-rows: 1fr;
        align-items: stretch;
        justify-items: stretch;
        width: max-content;
        transform: translateY(-50%);
    }

    .yt-qc--mobile-left {
        left: var(--qc-mobile-margin, 0);
    }

    .yt-qc--mobile-right {
        right: var(--qc-mobile-margin, 0);
    }

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .yt-qc,
    .yt-qc__link,
    .yt-qc__icon,
    .yt-qc__label {
        transition-duration: 0ms;
        transition-delay: 0ms;
    }
}

.yt-qc__item--example .yt-qc__link {
    cursor: default;
}