/* Frontend styles for RoZoKa Social Buttons PLUS */
.rsb-wrap-front{ --rsb-primary:#8a2be2; --rsb-secondary:#00e5ff; --rsb-text:#fff; --rsb-hover:#ffd700; --rsb-glow:#7cfcff; }
.rsb-wrap-front .rsb-buttons{ display:flex; flex-wrap:wrap; gap:var(--rsb-gap,12px); justify-content:center; }
.rsb-align-left .rsb-buttons{ justify-content:flex-start; }
.rsb-align-right .rsb-buttons{ justify-content:flex-end; }

/* Base button */
.rsb-btn{ position:relative; display:inline-flex; align-items:center; gap:.6em; padding:.9em 1.25em; text-decoration:none; border-radius:var(--rsb-rounded,20px); font-weight:var(--rsb-fw,700); letter-spacing:.3px; color:var(--rsb-text); overflow:hidden; transform:translateZ(0); will-change:transform, box-shadow; transition: all .18s ease; }
.rsb-size-sm .rsb-btn{ padding:.5em .8em; font-size:.9rem; }
.rsb-size-md .rsb-btn{ padding:.7em 1em; font-size:1rem; }
.rsb-size-lg .rsb-btn{ padding:.9em 1.25em; font-size:1.05rem; }
.rsb-size-xl .rsb-btn{ padding:1.1em 1.5em; font-size:1.15rem; }

.rsb-btn .rsb-icon{ display:inline-flex; width:1.2em; height:1.2em; }
.rsb-btn .rsb-icon svg{ width:100%; height:100%; fill:currentColor; filter: drop-shadow(0 0 6px rgba(255,255,255,.2)); }
.rsb-btn .rsb-label{ position:relative; z-index:2; }

/* VARIANTS (5 trendi stílus) */
/* 1) NEON */
.rsb-variant-neon{ background: linear-gradient(135deg,var(--rsb-primary), var(--rsb-secondary)); box-shadow: 0 10px 25px rgba(0,0,0,.35), 0 0 18px var(--rsb-glow); }
.rsb-variant-neon:hover{ box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 26px var(--rsb-hover); transform: translateY(-2px) scale(1.02); }
.rsb-variant-neon .rsb-glow{ content:""; position:absolute; inset:0; background: radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.35), transparent 60%); opacity:0; transition:opacity .2s ease; }
.rsb-variant-neon:hover .rsb-glow{ opacity:1; }

/* 2) PILL (trend: nagy, lekerekített, clean) */
.rsb-variant-pill{ background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); backdrop-filter: saturate(140%) blur(6px); color:#fff; }
.rsb-variant-pill:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.rsb-variant-pill .rsb-icon svg{ filter:none; }

/* 3) GLASS (üveg, frosted) */
.rsb-variant-glass{ background: linear-gradient(135deg, rgba(138,43,226,.35), rgba(0,229,255,.35)); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.25); }
.rsb-variant-glass:hover{ background: linear-gradient(135deg, rgba(138,43,226,.45), rgba(0,229,255,.45)); }

/* 4) OUTLINE GLOW */
.rsb-variant-outline{ background: transparent; border:2px solid currentColor; color: var(--rsb-hover); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.rsb-variant-outline:hover{ box-shadow: 0 0 16px var(--rsb-hover); transform: translateY(-1px); }
.rsb-variant-outline .rsb-icon svg{ filter:none; }

/* 5) 3D SOLID */
.rsb-variant-threed{ background: linear-gradient(180deg, var(--rsb-primary), var(--rsb-secondary)); box-shadow: 0 6px 0 rgba(0,0,0,.25), 0 14px 24px rgba(0,0,0,.35); }
.rsb-variant-threed:hover{ transform: translateY(-2px); box-shadow: 0 8px 0 rgba(0,0,0,.25), 0 18px 28px rgba(0,0,0,.45); }

/* Platform-specific accent overrides */
.rsb-discord{ --rsb-primary:#5865F2; --rsb-secondary:#8EA1E1; }
.rsb-youtube{ --rsb-primary:#FF0000; --rsb-secondary:#D00000; }
.rsb-x{ --rsb-primary:#111; --rsb-secondary:#333; }
.rsb-tiktok{ --rsb-primary:#25F4EE; --rsb-secondary:#FE2C55; }
.rsb-instagram{ --rsb-primary:#F58529; --rsb-secondary:#DD2A7B; }
.rsb-facebook{ --rsb-primary:#1877F2; --rsb-secondary:#3b5998; }
.rsb-twitch{ --rsb-primary:#9146FF; --rsb-secondary:#772CE8; }
.rsb-telegram{ --rsb-primary:#229ED9; --rsb-secondary:#0e86c7; }
.rsb-kick{ --rsb-primary:#53FC19; --rsb-secondary:#2ecc71; }
.rsb-reddit{ --rsb-primary:#FF4500; --rsb-secondary:#FF8759; }
.rsb-threads{ --rsb-primary:#111; --rsb-secondary:#444; }

/* Hover tint + motion prefs */
.rsb-btn:hover{ color: var(--rsb-hover); }
@media (prefers-reduced-motion: reduce){
  .rsb-btn, .rsb-btn *{ transition: none !important; animation: none !important; }
}