:root {
	--rfs-offset-x: 20px;
	--rfs-offset-y: 20px;
    --rfs-spacing: 10px;
    --rfs-button-size: 50px;
}

.royalfloatsocialbuttons {
	position: fixed;
	z-index: 999;
}

/* --- Positioning System --- */
.royalfloatsocialbuttons[data-position="bottom-right"] { bottom: 0; right: 0; transform: translate(calc(-1 * var(--rfs-offset-x)), calc(-1 * var(--rfs-offset-y))); }
.royalfloatsocialbuttons[data-position="bottom-left"] { bottom: 0; left: 0; transform: translate(var(--rfs-offset-x), calc(-1 * var(--rfs-offset-y))); }
.royalfloatsocialbuttons[data-position="bottom-center"] { bottom: 0; left: 50%; transform: translate(calc(-50% + var(--rfs-offset-x)), calc(-1 * var(--rfs-offset-y))); }
.royalfloatsocialbuttons[data-position="top-right"] { top: 0; right: 0; transform: translate(calc(-1 * var(--rfs-offset-x)), var(--rfs-offset-y)); }
.royalfloatsocialbuttons[data-position="top-left"] { top: 0; left: 0; transform: translate(var(--rfs-offset-x), var(--rfs-offset-y)); }
.royalfloatsocialbuttons[data-position="top-center"] { top: 0; left: 50%; transform: translate(calc(-50% + var(--rfs-offset-x)), var(--rfs-offset-y)); }
.royalfloatsocialbuttons[data-position="center-right"] { top: 50%; right: 0; transform: translate(calc(-1 * var(--rfs-offset-x)), calc(-50% + var(--rfs-offset-y))); }
.royalfloatsocialbuttons[data-position="center-left"] { top: 50%; left: 0; transform: translate(var(--rfs-offset-x), calc(-50% + var(--rfs-offset-y))); }


/* --- Main Container & Button Styles --- */
.rfs-toggle, .rfs-item {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	cursor: pointer;
    text-decoration: none;
}

.rfs-item .elementor-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-mask: none;
    mask: none;
}

/* --- Open/Close Mode Specific Styles --- */
.royalfloatsocialbuttons:not(.behavior-always-open) .rfs-toggle,
.royalfloatsocialbuttons:not(.behavior-always-open) .rfs-item {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.rfs-toggle { 
    z-index: 2; 
    transition: transform 0.3s ease; 
}

.rfs-item {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transform: translate(0, 0) scale(0.5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s, visibility 0.2s;
    color: #fff;
}

.royalfloatsocialbuttons.is-open .rfs-item {
	opacity: 1;
	visibility: visible;
}

/* --- Icon Toggle Behavior --- */
.rfs-toggle .rfs-icon-close { display: none; }
.rfs-toggle .rfs-icon-open { display: inline-flex; }

.royalfloatsocialbuttons.is-open .rfs-toggle .rfs-icon-close { display: inline-flex; }
.royalfloatsocialbuttons.is-open .rfs-toggle .rfs-icon-open { display: none; }
.royalfloatsocialbuttons.is-open .rfs-toggle { transform: rotate(135deg); }


/* --- Pulse Animation --- */
.rfs-toggle.pulse-active { animation: rfs-pulse 1.5s infinite; }
.rfs-toggle:hover { animation-name: none; }

@keyframes rfs-pulse {
	0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.3); }
	70% { box-shadow: 0 0 0 15px rgba(0,0,0,0); }
	100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* --- Always Open Behavior --- GRID-BASED LAYOUT --- */
.royalfloatsocialbuttons.behavior-always-open {
    width: auto !important;
    height: auto !important;
    display: grid;
    gap: var(--rfs-spacing);
}
.royalfloatsocialbuttons.behavior-always-open .rfs-item {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    width: var(--rfs-button-size);
    height: var(--rfs-button-size);
}

/* --- Grid directions for Always Open --- */
.royalfloatsocialbuttons.behavior-always-open[data-direction="br_top"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="bl_top"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="tr_bottom"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="tl_bottom"] {
    grid-template-columns: 1fr; /* Single column */
}

.royalfloatsocialbuttons.behavior-always-open[data-direction="br_left"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="bl_right"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="tr_left"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="tl_right"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="bc_both_lr"] {
    grid-template-rows: 1fr; /* Single row */
    grid-auto-flow: column;
}

.royalfloatsocialbuttons.behavior-always-open[data-direction="br_both_tl"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="bl_both_tr"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="tr_both_bl"],
.royalfloatsocialbuttons.behavior-always-open[data-direction="tl_both_br"] {
    /* Creates a grid that wraps, effectively creating rows and columns */
    grid-template-columns: repeat(auto-fill, minmax(var(--rfs-button-size), 1fr));
    /* Adjust max-width based on how many columns you want before wrapping */
    max-width: calc(3 * var(--rfs-button-size) + 2 * var(--rfs-spacing));
}


/* --- Official Elementor Colors (Full Control) --- */
.elementor-social-icon { background-color: #C4C4C4; color: #FFFFFF; }
.elementor-social-icon-facebook-f { background-color: #3b5998; }
.elementor-social-icon-twitter { background-color: #1da1f2; }
.elementor-social-icon-youtube { background-color: #cd201f; }
.elementor-social-icon-pinterest { background-color: #bd081c; }
.elementor-social-icon-linkedin-in { background-color: #0077b5; }
.elementor-social-icon-instagram { background-color: #E1306C; }
.elementor-social-icon-whatsapp { background-color: #25D366; }
.elementor-social-icon-wordpress { background-color: #21759b; }
.elementor-social-icon-dribbble { background-color: #ea4c89; }
.elementor-social-icon-envelope { background-color: #D44638; }
/* Add other official colors as needed */