/* Default styles - will be overridden by admin settings */
.clickban-floating-button {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background-color: rgb(27, 27, 27);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: fixed;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.11);
    z-index: 9999;
    padding: 0;
}

.clickban-floating-button .svgIcon,
.clickban-floating-button .clickban-icon-img {
    height: 1em;
    width: 1em;
    transition: all 0.3s ease;
}

.clickban-floating-button .svgIcon {
    fill: rgb(214, 178, 255);
}

.clickban-floating-button .clickban-icon-img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.clickban-floating-button .icon2 {
    width: 18px;
    height: 5px;
    border-bottom: 2px solid rgb(182, 143, 255);
    border-left: 2px solid rgb(182, 143, 255);
    border-right: 2px solid rgb(182, 143, 255);
}

.clickban-floating-button .tooltip {
    position: absolute;
    top: -40px;
    opacity: 0;
    background-color: rgb(12, 12, 12);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: .2s;
    pointer-events: none;
    letter-spacing: 0.5px;
    font-size: 12px;
    white-space: nowrap;
}

.clickban-floating-button .tooltip::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: rgb(12, 12, 12);
    transform: rotate(45deg);
    bottom: -15%;
    transition-duration: .3s;
}

.clickban-floating-button:hover .tooltip {
    opacity: 1;
    transition-duration: .3s;
}

.clickban-floating-button:hover {
    background-color: rgb(150, 94, 255);
    transition-duration: .3s;
}

.clickban-floating-button:hover .icon2 {
    border-bottom: 2px solid rgb(235, 235, 235);
    border-left: 2px solid rgb(235, 235, 235);
    border-right: 2px solid rgb(235, 235, 235);
}

.clickban-floating-button:hover .svgIcon,
.clickban-floating-button:hover .clickban-icon-img {
    fill: rgb(255, 255, 255); /* برای SVG */
    animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* Position classes - now handled dynamically in PHP, but fallback */
.clickban-floating-button.bottom-right {
    bottom: 20px;
    right: 20px;
}

.clickban-floating-button.bottom-left {
    bottom: 20px;
    left: 20px;
}

.clickban-floating-button.top-right {
    top: 20px;
    right: 20px;
}

.clickban-floating-button.top-left {
    top: 20px;
    left: 20px;
}

/* Adjust tooltip position for top positions */
.clickban-floating-button.top-right .tooltip,
.clickban-floating-button.top-left .tooltip {
    top: auto;
    bottom: -40px;
}

.clickban-floating-button.top-right .tooltip::before,
.clickban-floating-button.top-left .tooltip::before {
    bottom: auto;
    top: -15%;
}

/* Dynamic styles from admin settings (using CSS variables) */
.clickban-floating-button {
    background-color: var(--clickban-bg-color, rgb(27, 27, 27)) !important;
}

.clickban-floating-button .svgIcon {
    fill: var(--clickban-icon-color, rgb(214, 178, 255)) !important;
}

.clickban-floating-button .icon2 {
    border-bottom: 2px solid var(--clickban-border-color, rgb(182, 143, 255)) !important;
    border-left: 2px solid var(--clickban-border-color, rgb(182, 143, 255)) !important;
    border-right: 2px solid var(--clickban-border-color, rgb(182, 143, 255)) !important;
}

.clickban-floating-button:hover {
    background-color: var(--clickban-hover-bg, rgb(150, 94, 255)) !important;
}

.clickban-floating-button:hover .svgIcon {
    fill: var(--clickban-hover-icon, rgb(255, 255, 255)) !important;
}

.clickban-floating-button:hover .clickban-icon-img {
    filter: brightness(1.2); /* مثال برای هاور روی img - می‌تونید تغییر بدید */
}

.clickban-floating-button:hover .icon2 {
    border-bottom: 2px solid var(--clickban-hover-border, rgb(235, 235, 235)) !important;
    border-left: 2px solid var(--clickban-hover-border, rgb(235, 235, 235)) !important;
    border-right: 2px solid var(--clickban-hover-border, rgb(235, 235, 235)) !important;
}

.clickban-floating-button .tooltip {
    background-color: var(--clickban-tooltip-bg, rgb(12, 12, 12)) !important;
    color: var(--clickban-tooltip-text, white) !important;
}

.clickban-floating-button .tooltip::before {
    background-color: var(--clickban-tooltip-bg, rgb(12, 12, 12)) !important;
}