/* ======================================
   QUICK SOCIAL – BASE WRAPPER
====================================== */

.s1-quick-social {
    position: fixed;
    z-index: 9999;
    pointer-events: auto;
}

/* Inner flex container */
.s1-quick-social__inner {
    display: flex;
    gap: 12px;
}

/* ======================================
   ICON ITEM (CIRCLE)
====================================== */

.s1-quick-social__item {

    /* Outer circle size */
    

    background: var(--s1-icon-bg);
    color: var(--s1-icon-color);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius:var(--s1-border-radius);
    text-decoration: none;

    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: all 0.3s ease;
}

/* Hover */
.s1-quick-social__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    background: var(--s1-icon-bg-hover);
    color: var(--s1-icon-color-hover);
}

/* ======================================
   ICON WRAPPER (UNIVERSAL SIZE CONTROL)
====================================== */

.s1-quick-social__icon {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG */
.s1-quick-social__icon svg {
   
    display: block;
    fill: currentColor;
    width:var(--s1-icon-size);
    height:var(--s1-icon-size);
}

/* IMAGE */
.s1-quick-social__icon img {
    width:var(--s1-icon-size);
    height:var(--s1-icon-size);
    object-fit: contain;
}

/* Safety */
.s1-quick-social__icon img{
    max-width: 100%;
    max-height: 100%;
}


/* ======================================
   STYLE 1 – LEFT FLOAT
====================================== */

.s1-quick-social--style1 {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.s1-quick-social--style1 .s1-quick-social__inner {
    flex-direction: column;
    padding-left: 14px;
}


/* ======================================
   STYLE 2 – RIGHT FLOAT
====================================== */

.s1-quick-social--style2 {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.s1-quick-social--style2 .s1-quick-social__inner {
    flex-direction: column;
    padding-right: 14px;
}


/* ======================================
   STYLE 3 – BOTTOM CENTER BAR
====================================== */

.s1-quick-social--style3 {
    bottom:20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: flex;
    justify-content: center;
}


.s1-quick-social__item {
    outline: none;
}

.s1-quick-social__item:focus,
.s1-quick-social__item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

/* ======================================
   VISIBILITY CONTROL
====================================== */

@media (max-width:1024px) {
    .s1-quick-social[data-visibility="show-desktop"] {
        display: none;
    }
}

@media (min-width:1025px) {
    .s1-quick-social[data-visibility="show-tab-mobile"] {
        display: none;
    }
}