/*
 * Speedy Support Menu - Container
 * Positions the entire menu at the bottom-right of the screen.
 */
.speedy-support-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: block;
    z-index: 9999;
}

/*
 * Support Button - The main pulsating button (e.g., the Chat/Contact icon)
 */
.support-button {
    width: 70px;
    height: 70px;
    position: relative;
    right: 0;
    background-color: #0084ff; /* Primary blue color */
    border-radius: 50px;
    box-sizing: border-box; /* Standardized property */
    text-align: center;
    display: flex; /* Using flexbox for easy centering */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 #000;
    transform: scale(1);
    animation: pulse 2s infinite; /* Applying the animation */
    overflow: hidden;
}

/*
 * Pulse Animation for the Support Button
 */
@keyframes pulse {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(43, 65, 161, .7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(43, 65, 161, 0);
    }
    100% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(43, 65, 161, 0);
    }
}

/*
 * Speedy Support Menu Block - The flyout panel containing the list of options
 */
.speedy-support-menu-block {
    background: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2);
    width: 320px;
    position: absolute;
    bottom: 80px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 0;
    box-sizing: border-box;
    border-radius: 7px;
    /* Transformation for the scale-in effect */
    transform-origin: 80% 105%;
    transform: scale(0);
    transition: ease-out .12s all;
    z-index: 10000;
}

/*
 * Pointer/Arrow for the Menu Block
 */
.speedy-support-menu-block:before {
    content: '';
    position: absolute;
    bottom: -7px;
    right: 25px;
    left: auto; /* Ensure it's right-aligned */
    display: inline-block !important;
    border-right: 8px solid transparent;
    border-top: 8px solid #fff;
    border-left: 8px solid transparent;
}

/*
 * SVG Icon within the Menu Block (initially no rotation/scaling)
 */
.speedy-support-menu-block svg {
    transform: rotate(0) scale(1);
}

/*
 * Class to show the Menu Block (scales it to full size)
 */
.show-speedy-support-menu-block {
    transform: scale(1);
}

/*
 * Section List Container (wraps the menu items)
 */
.section-list {
    width: 100%;
    float: right; /* Often unnecessary with flexbox, but kept for legacy/compatibility */
}

/*
 * Class to hide a section
 */
.hide-section {
    transform: scale(0);
    display: none;
}

/*
 * Individual Menu Item Style
 */
.speedy-support-menu-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding: 8px 20px 8px 60px; /* Increased left padding for icon */
    position: relative;
    min-height: 54px;
    text-decoration: none;
    color: #28303d !important;
    transition: background-color .1s ease-in-out; /* Added transition for hover effect */
}

.speedy-support-menu-list:hover {
    background-color: #eee;
}

/*
 * Icon Wrapper/Badge for the Menu Item
 */
.speedy-support-menu-list span {
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -20px;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #0084ff;
    margin-right: 10px;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

/*
 * Text/Paragraph within the Menu Item
 */
.speedy-support-menu-list p {
    font-size: 14px;
    margin: 0;
}

/*
 * SVG Icon Centering (for callback, icons-line, and menu list)
 */
.support-button .callback-state svg,
.support-button .icons-line span svg,
.speedy-support-menu-list span svg {
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
}

/*
 * Smaller SVG Icon Centering for Callback State
 */
.support-button .callback-state svg {
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
}

/*
 * Initial static icon position (redundant, removed: .support-button .static {margin-top: -12px;})
 */

/*
 * Icons Container (for rotating/scrolling icons inside the button)
 */
.support-button .icons {
    background-color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    transition: .2s all; /* Grouped with .support-button .static transition */
}

.support-button .icons.hide {
    opacity: 0;
    transform: scale(0);
}

/*
 * Icons Line - The strip of icons that scrolls horizontally
 */
.support-button .icons-line {
    top: 11px;
    left: 14px;
    display: flex;
    position: absolute;
    /* Original transition was problematic, simplifying for now. */
    transition: transform .2s all;
    animation-delay: 0;
    transform: translateX(30px); /* Initial offset for the scroll effect */
    height: 24px;
    overflow: hidden;
    color: #0084ff;
}

.support-button .icons-line.stop {
    animation-play-state: paused;
}

/*
 * Individual icon wrapper in the scrolling line
 */
.support-button .icons-line span {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    margin-right: 40px; /* Space between icons */
}

/* Removing redundant margin-left on first icon: .support-button .icons .icon:first-of-type {margin-left:0} */

/*
 * Static Icon/State (The default visible icon)
 */
.support-button .static {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -19px;
    margin-left: -26px;
    width: 52px;
    height: 52px;
    text-align: center;
    transition: .2s all; /* Grouped with .support-button .icons transition */
}

.support-button .static.hide {
    opacity: 0;
    transform: scale(0);
}

.support-button .static svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.support-button .static p {
    font-size: 9px;
    color: #fff;
    margin-top: -5px;
}

/*
 * Callback State (a separate state, possibly for after a click)
 */
.support-button .callback-state {
    width: 70px;
    height: 70px;
    position: relative;
    z-index: 99;
    background-color: #0084ff;
    border-radius: 50px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .2s all;
    transform: scale(0); /* Initially hidden */
    color: #fff;
}

.support-button .callback-state.show {
    transform: scale(1);
}

/*
 * Background Colors for Specific Social/Contact Icons
 * These target the 'span' element within the 'speedy-support-menu-list'
 */
.section-instagram-btn span { background-color: #f06; }
.section-telegram-btn span { background-color: #20afde; }
.section-whatsapp-btn span { background-color: #1ebea5; }
.section-phone-btn span { background-color: #38c215; }
.section-twitter-btn span { background-color: #1c9cea; }
.section-facebook-btn span { background-color: #4064ac; }
.section-linkedin-btn span { background-color: #0270ad; }
.section-googleplus-btn span { background-color: #d64937; }
.section-pinterest-btn span { background-color: #df0022; }
.section-tumblr-btn span { background-color: #2f4155; }
.section-aparat-btn span { background-color: #e61358; }
.section-youtube-btn span { background-color: #dc2424; }
.section-contact-us-btn span { background-color: #45a3de; }
.section-soroush-btn span { background-color: #196ff0; }
.section-bale-btn span { background-color: #00b894; }
.section-eitaa-btn span { background-color:#f37f00; }
.section-rubika-us-btn span { background-color: #315589; }

/*
 * Media Queries for Responsiveness (Desktop/Web vs. Mobile/Desk)
 */
@media only screen and (max-width: 1200px) {
    .web-btn {
        display: none; /* Hide web-specific buttons on smaller screens */
    }
}

@media only screen and (min-width: 1199px) {
    .desk-btn {
        display: none; /* Hide desktop-specific buttons on larger screens (1199px and up) */
    }
}