/* Messengers & social links: header icons, floating button (right), footer icons.
   Independent file: not touched by OCMOD refresh. */

/* ---------- shared: Font Awesome glyph on a coloured circle ---------- */
.msg-fa { display: inline-block; border-radius: 50%; color: #fff; text-align: center; }

/* ---------- header icons (inside the existing .soccetimes block) ---------- */
.soccetimes ul.msg-header { list-style: none; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 15px auto 0; padding: 0; }
.soccetimes ul.msg-header li { margin: 0; }
.soccetimes ul.msg-header li a { display: block; line-height: 0; }
.soccetimes ul.msg-header li img, .soccetimes ul.msg-header .msg-fa { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; transition: transform .2s ease, box-shadow .2s ease; }
.soccetimes ul.msg-header .msg-fa { line-height: 32px; }
.soccetimes ul.msg-header .msg-fa i.fa { font-size: 17px; line-height: 32px; color: #fff; }
.soccetimes ul.msg-header li a:hover img, .soccetimes ul.msg-header li a:hover .msg-fa { transform: translateY(-2px) scale(1.08); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }

/* ---------- footer icons ---------- */
ul.socseti.msg-footer { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
ul.socseti.msg-footer li { padding: 0; margin: 0; }
ul.socseti.msg-footer li a { display: block; line-height: 0; }
ul.socseti.msg-footer li img, ul.socseti.msg-footer .msg-fa { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
ul.socseti.msg-footer .msg-fa { background: rgba(255, 255, 255, 0.14); line-height: 36px; }
ul.socseti.msg-footer .msg-fa i.fa { font-size: 19px; line-height: 36px; color: #fff; }
ul.socseti.msg-footer li a:hover img, ul.socseti.msg-footer li a:hover .msg-fa { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
ul.socseti.msg-footer li a:hover .msg-fa { background: #00b956; }

/* ---------- floating button (right) ---------- */
.mw { position: fixed; right: 22px; bottom: 26px; z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; }

.mw__btn {
	position: relative;
	width: 64px; height: 64px;
	padding: 0; border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(255, 255, 255, 0.9);
	cursor: pointer;
	outline: none;
	animation: mw-beat 2.6s ease-in-out infinite;
	-webkit-tap-highlight-color: transparent;
}
.mw__btn:hover { box-shadow: 0 10px 30px rgba(0, 185, 86, 0.45), 0 0 0 3px #fff; }

/* waves */
.mw__wave { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; border: 2px solid #00b956; opacity: 0; pointer-events: none; animation: mw-wave 2.6s cubic-bezier(.2, .6, .4, 1) infinite; }
.mw__wave--2 { animation-delay: .85s; }
.mw__wave--3 { animation-delay: 1.7s; }

/* cycling icons */
.mw__cycle { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; overflow: hidden; transition: opacity .2s ease; }
.mw__slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4) rotate(-90deg); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .3, 1.2); }
.mw__slide.is-on { opacity: 1; transform: none; }
.mw__slide.is-out { opacity: 0; transform: scale(.4) rotate(90deg); }
.mw__slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.mw__slide .msg-fa { width: 100%; height: 100%; line-height: 64px; }
.mw__slide .msg-fa i.fa { font-size: 32px; line-height: 64px; color: #fff; }

/* close icon (visible when open) */
.mw__close { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; background: #232323; color: #fff; font-size: 26px; line-height: 64px; opacity: 0; transform: rotate(-90deg) scale(.5); transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .3, 1.2); }
.mw--open .mw__close { opacity: 1; transform: none; }
.mw--open .mw__cycle { opacity: 0; }
.mw--open .mw__btn { animation: none; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.9); }
.mw--open .mw__wave { animation: none; opacity: 0; }

/* popped-up list */
.mw__list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.mw__list li { margin: 0; padding: 0; opacity: 0; transform: translateY(24px) scale(.5); transform-origin: bottom right; transition: opacity .2s ease, transform .35s cubic-bezier(.2, .8, .3, 1.3); }
.mw--open .mw__list { pointer-events: auto; }
.mw--open .mw__list li { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms); }

.mw__item { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mw__label { order: -1; padding: 8px 14px; border-radius: 22px; background: #fff; color: #232323; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); transition: background .2s ease, color .2s ease; }
.mw__ico { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 3px #fff; overflow: hidden; transition: transform .2s ease; }
.mw__ico img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw__ico .msg-fa { display: block; width: 100%; height: 100%; line-height: 52px; }
.mw__ico .msg-fa i.fa { font-size: 26px; line-height: 52px; color: #fff; }
.mw__item:hover .mw__ico { transform: scale(1.1); }
.mw__item:hover .mw__label { background: #00b956; color: #fff; }

/* dim the page a little while open */
.mw__veil { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(20, 20, 20, 0.28); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: -1; }
.mw--open .mw__veil { opacity: 1; visibility: visible; }

@keyframes mw-wave {
	0% { transform: scale(1); opacity: 0; }
	12% { opacity: .75; }
	100% { transform: scale(2.1); opacity: 0; }
}
@keyframes mw-beat {
	0%, 60%, 100% { transform: scale(1); }
	70% { transform: scale(1.09); }
	80% { transform: scale(.97); }
	90% { transform: scale(1.05); }
}

@media (max-width: 767px) {
	.mw { right: 14px; bottom: 16px; }
	.mw__btn { width: 58px; height: 58px; }
	.mw__slide .msg-fa { line-height: 58px; }
	.mw__slide .msg-fa i.fa { line-height: 58px; font-size: 28px; }
	.mw__close { line-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
	.mw__btn, .mw__wave { animation: none !important; }
}