/* WhatsApp Channel Card - frontend styles */
.wcc-wrap{margin:32px 0;clear:both}
.wcc-card{
	--wcc-c1:#25D366;--wcc-c2:#128C7E;--wcc-radius:22px;
	position:relative;overflow:hidden;border-radius:var(--wcc-radius);
	box-sizing:border-box;font-family:inherit;line-height:1.4;
	isolation:isolate;
}
.wcc-card *,.wcc-card *::before,.wcc-card *::after{box-sizing:border-box}
.wcc-inner{position:relative;z-index:2;display:flex;align-items:center;gap:20px;padding:24px 26px}

/* Decorative orbs */
.wcc-orb{position:absolute;border-radius:50%;z-index:1;pointer-events:none;filter:blur(2px)}
.wcc-orb-1{width:220px;height:220px;right:-60px;top:-90px;background:rgba(255,255,255,.14)}
.wcc-orb-2{width:140px;height:140px;left:-40px;bottom:-70px;background:rgba(255,255,255,.1)}

/* Avatar */
.wcc-avatar{position:relative;flex:0 0 auto;width:78px;height:78px}
.wcc-avatar img,.wcc-avatar-icon{
	width:100%;height:100%;border-radius:50%;object-fit:cover;display:flex;
	align-items:center;justify-content:center;
	border:3px solid rgba(255,255,255,.9);box-shadow:0 8px 22px rgba(0,0,0,.22);
}
.wcc-avatar-icon{background:#fff;color:var(--wcc-c1)}
.wcc-avatar-icon svg{width:44px;height:44px}
.wcc-verified{position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;background:#fff;border-radius:50%;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.wcc-verified svg{width:100%;height:100%;display:block}

/* Text */
.wcc-body{flex:1 1 auto;min-width:0}
.wcc-badge{
	display:inline-block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
	padding:4px 11px;border-radius:999px;margin-bottom:8px;
	background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(4px);
}
.wcc-title{margin:0 0 6px!important;padding:0!important;font-size:22px!important;line-height:1.25!important;font-weight:800!important;color:#fff;letter-spacing:-.2px}
.wcc-desc{margin:0 0 10px!important;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.wcc-followers{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#fff;background:rgba(0,0,0,.16);padding:4px 12px;border-radius:999px}
.wcc-followers b{font-weight:700}
.wcc-dot{width:8px;height:8px;border-radius:50%;background:#7CFFB2;display:inline-block;box-shadow:0 0 0 0 rgba(124,255,178,.7)}

/* Button */
.wcc-btn{
	position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
	padding:15px 24px;border-radius:999px;background:#fff;color:var(--wcc-c2)!important;
	font-weight:800;font-size:15.5px;text-decoration:none!important;white-space:nowrap;
	box-shadow:0 10px 26px rgba(0,0,0,.25);overflow:hidden;
	transition:transform .25s ease,box-shadow .25s ease;border:0;
}
.wcc-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 34px rgba(0,0,0,.32);color:var(--wcc-c2)!important}
.wcc-btn:active{transform:scale(.98)}
.wcc-btn-ic svg{width:22px;height:22px;display:block;color:var(--wcc-c1)}
.wcc-btn-arrow svg{width:18px;height:18px;display:block;transition:transform .25s ease}
.wcc-btn:hover .wcc-btn-arrow svg{transform:translateX(4px)}

/* ---------- Style: gradient ---------- */
.wcc-style-gradient{
	background:linear-gradient(135deg,var(--wcc-c1) 0%,var(--wcc-c2) 100%);
	box-shadow:0 18px 40px -12px var(--wcc-c2),0 6px 14px rgba(0,0,0,.08);
}

/* ---------- Style: light ---------- */
.wcc-style-light{
	background:#fff;border:1px solid rgba(0,0,0,.07);
	box-shadow:0 18px 40px -16px rgba(0,0,0,.25);
}
.wcc-style-light::before{
	content:"";position:absolute;left:0;top:0;bottom:0;width:7px;z-index:2;
	background:linear-gradient(180deg,var(--wcc-c1),var(--wcc-c2));
}
.wcc-style-light .wcc-orb{background:linear-gradient(135deg,var(--wcc-c1),var(--wcc-c2));opacity:.1}
.wcc-style-light .wcc-title{color:#111b21}
.wcc-style-light .wcc-desc{color:#54656f}
.wcc-style-light .wcc-badge{background:rgba(0,0,0,.06);color:var(--wcc-c2)}
.wcc-style-light .wcc-followers{background:rgba(0,0,0,.05);color:#111b21}
.wcc-style-light .wcc-avatar img,.wcc-style-light .wcc-avatar-icon{border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.16),0 0 0 3px var(--wcc-c1)}
.wcc-style-light .wcc-avatar-icon{background:linear-gradient(135deg,var(--wcc-c1),var(--wcc-c2));color:#fff}
.wcc-style-light .wcc-btn{background:linear-gradient(135deg,var(--wcc-c1),var(--wcc-c2));color:#fff!important;box-shadow:0 10px 24px -6px var(--wcc-c2)}
.wcc-style-light .wcc-btn:hover{color:#fff!important}
.wcc-style-light .wcc-btn-ic svg{color:#fff}

/* ---------- Style: dark ---------- */
.wcc-style-dark{
	background:linear-gradient(145deg,#0b141a,#111f27);
	box-shadow:0 18px 44px -14px rgba(0,0,0,.6);
}
.wcc-style-dark::before{
	content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:3;pointer-events:none;
	background:linear-gradient(135deg,var(--wcc-c1),transparent 45%,var(--wcc-c2));
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;
}
.wcc-style-dark .wcc-orb{background:radial-gradient(circle,var(--wcc-c1),transparent 70%);opacity:.35}
.wcc-style-dark .wcc-badge{background:rgba(255,255,255,.08);color:var(--wcc-c1)}
.wcc-style-dark .wcc-avatar img,.wcc-style-dark .wcc-avatar-icon{box-shadow:0 0 0 3px var(--wcc-c1),0 0 26px var(--wcc-c1)}
.wcc-style-dark .wcc-avatar-icon{background:#0b141a;color:var(--wcc-c1)}
.wcc-style-dark .wcc-btn{background:linear-gradient(135deg,var(--wcc-c1),var(--wcc-c2));color:#fff!important;box-shadow:0 10px 30px -6px var(--wcc-c1)}
.wcc-style-dark .wcc-btn:hover{color:#fff!important}
.wcc-style-dark .wcc-btn-ic svg{color:#fff}

/* ---------- Animations ---------- */
@keyframes wcc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wcc-pulse{0%{box-shadow:0 10px 26px rgba(0,0,0,.25),0 0 0 0 rgba(255,255,255,.65)}70%{box-shadow:0 10px 26px rgba(0,0,0,.25),0 0 0 16px rgba(255,255,255,0)}100%{box-shadow:0 10px 26px rgba(0,0,0,.25),0 0 0 0 rgba(255,255,255,0)}}
@keyframes wcc-pulse-c{0%{box-shadow:0 0 0 0 var(--wcc-c1)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@keyframes wcc-shine{0%{left:-80%}60%,100%{left:140%}}
@keyframes wcc-dot{0%{box-shadow:0 0 0 0 rgba(124,255,178,.7)}100%{box-shadow:0 0 0 9px rgba(124,255,178,0)}}
@keyframes wcc-orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,10px) scale(1.08)}}

.wcc-anim .wcc-avatar{animation:wcc-float 3.4s ease-in-out infinite}
.wcc-anim .wcc-btn{animation:wcc-pulse 2.2s infinite}
.wcc-anim.wcc-style-light .wcc-btn,.wcc-anim.wcc-style-dark .wcc-btn{animation:wcc-pulse-c 2.2s infinite}
.wcc-anim .wcc-btn::after{
	content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
	transform:skewX(-20deg);animation:wcc-shine 3.2s ease-in-out infinite;
}
.wcc-anim .wcc-dot{animation:wcc-dot 1.6s infinite}
.wcc-anim .wcc-orb-1{animation:wcc-orb 7s ease-in-out infinite}
.wcc-anim .wcc-orb-2{animation:wcc-orb 9s ease-in-out infinite reverse}

@media (prefers-reduced-motion:reduce){
	.wcc-anim *,.wcc-anim *::after{animation:none!important}
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
	.wcc-inner{flex-direction:column;text-align:center;padding:24px 18px;gap:16px}
	.wcc-btn{width:100%;justify-content:center}
	.wcc-title{font-size:20px!important}
	.wcc-style-light::before{width:100%;height:6px;bottom:auto}
}