/* TopL2 Twitch Streams - Dark Theme (leve e responsivo)
   ✅ ALTERADO: agora TODO o bloco do plugin fica em tema dark (submit + empty + textos)
*/
.topl2-twitch-wrap{margin:14px 0;}
.topl2-twitch-head{margin-bottom:12px;}
.topl2-twitch-title{font-size:28px;line-height:1.1;margin:0 0 8px;color:#fff;}
.topl2-twitch-subtitle{margin:0;color:#9ca3af;max-width:820px}

/* ✅ ADICIONADO: variáveis do tema dark */
.topl2-twitch-wrap,
.topl2-twitch-submit{
	--topl2-bg:#0b0f19;
	--topl2-border:rgba(255,255,255,.10);
	--topl2-text:#e5e7eb;
	--topl2-muted:#9ca3af;
	--topl2-input:#111827;
	--topl2-input-border:rgba(255,255,255,.12);
	--topl2-btn:#111827;
}

.topl2-twitch-grid{
	display:grid;
	grid-template-columns:repeat(var(--topl2-cols, 3), minmax(0, 1fr));
	gap:14px;
}

@media (max-width: 900px){
	.topl2-twitch-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 560px){
	.topl2-twitch-grid{grid-template-columns:repeat(1, minmax(0, 1fr));}
}

.topl2-twitch-card{
	display:block;
	text-decoration:none!important;
	border-radius:12px;
	overflow:hidden;
	border:1px solid var(--topl2-border);
	background:var(--topl2-bg);
	box-shadow:0 10px 30px rgba(0,0,0,.20);
	transition:transform .12s ease, box-shadow .12s ease;
}
.topl2-twitch-card:hover{
	transform:translateY(-2px);
	box-shadow:0 18px 45px rgba(0,0,0,.28);
}

.topl2-twitch-thumb{
	position:relative;
	padding-top:56.25%;
	background-size:cover;
	background-position:center;
}

/* ✅ ADICIONADO (v1.1.8): garante que a thumbnail (<img>) preencha o card (corrige mobile 'pela metade') */
.topl2-twitch-thumb{overflow:hidden;}
.topl2-twitch-thumb img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.topl2-twitch-live{
	position:absolute;
	left:10px; top:10px;
	background:#ff2d2d;
	color:#fff;
	font-weight:800;
	font-size:12px;
	padding:5px 8px;
	border-radius:8px;
	letter-spacing:.3px;
}
.topl2-twitch-viewers{
	position:absolute;
	left:10px; bottom:10px;
	background:rgba(0,0,0,.65);
	color:#fff;
	font-weight:700;
	font-size:12px;
	padding:5px 8px;
	border-radius:8px;
}

.topl2-twitch-meta{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 12px;
	background:var(--topl2-bg);
}
.topl2-twitch-avatar{
	width:34px;height:34px;
	border-radius:999px;
	object-fit:cover;
	flex:0 0 auto;
	border:1px solid rgba(255,255,255,.12);
}
.topl2-twitch-avatar--placeholder{
	display:inline-block;
	background:rgba(255,255,255,.08);
}
.topl2-twitch-text{min-width:0;}
.topl2-twitch-stream-title{
	font-size:14px;
	font-weight:800;
	color:#fff;
	line-height:1.2;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	margin-bottom:4px;
}
.topl2-twitch-stream-user{
	font-size:12px;
	color:var(--topl2-muted);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* ✅ ALTERADO: empty state no tema dark */
.topl2-twitch-empty{
	grid-column:1 / -1;
	padding:14px;
	border-radius:12px;
	background:rgba(255,255,255,.06);
	border:1px solid var(--topl2-border);
	color:var(--topl2-text);
}

/* Submit form - Dark */
.topl2-twitch-submit{
	border:1px solid var(--topl2-border);
	border-radius:12px;
	padding:14px;
	background:var(--topl2-bg);
	color:var(--topl2-text);
}
.topl2-twitch-submit-title{margin:0 0 8px;font-size:18px;color:#fff;}
.topl2-twitch-submit-sub{margin:0 0 12px;color:var(--topl2-muted);}

.topl2-twitch-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:0 0 10px;}
.topl2-twitch-label{display:block;width:100%;font-weight:800;margin-bottom:6px;color:#fff;}
.topl2-twitch-input{
	min-width:260px;
	padding:10px 12px;
	border:1px solid var(--topl2-input-border);
	border-radius:10px;
	background:var(--topl2-input);
	color:var(--topl2-text);
}
.topl2-twitch-input::placeholder{color:rgba(229,231,235,.55);}

.topl2-twitch-btn{
	padding:10px 14px;
	border-radius:10px;
	border:1px solid var(--topl2-border);
	background:var(--topl2-btn);
	color:#fff;
	font-weight:900;
	cursor:pointer;
}
.topl2-twitch-btn--ghost{
	background:transparent;
	color:var(--topl2-text);
}

.topl2-twitch-submit-msg{
	margin:0 0 12px;
	padding:10px 12px;
	border-radius:10px;
	background:rgba(255,255,255,.06);
	border:1px solid var(--topl2-border);
	color:var(--topl2-text);
}
.topl2-twitch-submit-msg--err{
	background:rgba(255,0,0,.10);
	border:1px solid rgba(255,0,0,.25);
	color:#fecaca;
}

.topl2-badge{
	display:inline-block;
	padding:4px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:900;
}
.topl2-badge--ok{background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.25);}
.topl2-badge--warn{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.25);}
.topl2-badge--err{background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.25);}

/* ✅ ADICIONADO: lista de canais do usuário */
.topl2-twitch-userlist{margin-top:12px;border-top:1px solid var(--topl2-border);padding-top:12px;}
.topl2-twitch-userlist-title{font-weight:900;margin-bottom:10px;color:#fff;}
.topl2-twitch-userrow{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:10px 12px;
	border:1px solid var(--topl2-border);
	border-radius:12px;
	background:rgba(255,255,255,.03);
	margin-bottom:10px;
}
.topl2-twitch-userlink{color:#fff;text-decoration:none;font-weight:900;}
.topl2-twitch-userlink:hover{text-decoration:underline;}
.topl2-twitch-userstatus{margin-top:6px;color:var(--topl2-muted);font-size:12px;}
.topl2-twitch-removeform{margin:0;}

/* Loading shimmer */
.topl2-twitch-grid--loading{
	min-height:120px;
	background:linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.04) 63%);
	background-size:400% 100%;
	animation:topl2-shimmer 1.2s ease-in-out infinite;
	border-radius:12px;
	border:1px solid var(--topl2-border);
}
@keyframes topl2-shimmer{
	0%{background-position:100% 0}
	100%{background-position:0 0}
}


/* ✅ ADICIONADO: melhora no mobile (thumb menor) */
@media (max-width: 560px){
	.topl2-twitch-wrap[data-columns="1"] .topl2-twitch-thumb{
		width:42%;
		min-width:42%;
		height:96px;
	}
}

/* ============================================================
   ✅ ALTERADO (v1.1.3): columns="1" agora fica PEQUENO mesmo com 1 stream.
   Problema:
   - Quando só tem 1 stream online, o card esticava e ficava ENORME.
   Solução:
   - Mantém o layout padrão (card), mas limita a largura de cada card.
   - O grid cria colunas "lado a lado" quando houver espaço, porém
     sem esticar além do tamanho máximo.
   ============================================================ */
.topl2-twitch-wrap[data-columns="1"] .topl2-twitch-grid{
	/* ✅ ALTERADO: min = 240px, max = 360px (não estica para 100% da tela) */
	grid-template-columns:repeat(auto-fit, minmax(240px, 360px));
	justify-content:flex-start; /* ✅ ADICIONADO: não centraliza e não estica */
}

/* ✅ ADICIONADO: em mobile ocupa 100% (evita overflow) */
@media (max-width: 520px){
	.topl2-twitch-wrap[data-columns="1"] .topl2-twitch-grid{
		grid-template-columns:repeat(1, minmax(0, 1fr));
	}
}

/* ✅ ADICIONADO: em telas MUITO largas, evita cards "gigantes" */
@media (min-width: 1400px){
	.topl2-twitch-wrap[data-columns="1"] .topl2-twitch-grid{
		grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
	}
}


/* ✅ ADICIONADO (v1.1.5): botão "Adicionar stream" no topo */
.topl2-twitch-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.topl2-twitch-head-row .topl2-twitch-title{margin:0;}
.topl2-twitch-subtitle{margin:0;color:#9ca3af;max-width:820px}
.topl2-twitch-addbtn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;border:1px solid var(--topl2-border);background:rgba(255,255,255,.06);color:var(--topl2-text);text-decoration:none;font-weight:700;font-size:13px;line-height:1;}
.topl2-twitch-addbtn:hover{background:rgba(255,255,255,.10);}
.topl2-twitch-addbtn:focus{outline:2px solid rgba(172,145,91,.55);outline-offset:2px;}


/* ✅ ADICIONADO (v1.2.0): correção do "pela metade" no mobile (columns="1")
   Motivo: existia uma regra antiga que forçava .topl2-twitch-thumb com width:42% no mobile,
   porém o card continua vertical (thumb em cima + texto embaixo), então sobra um "vazio" ao lado.
   Solução: no mobile, o thumb volta a ocupar 100% da largura do card.
*/
@media (max-width: 560px){
	.topl2-twitch-wrap[data-columns="1"] .topl2-twitch-thumb{
		width:100% !important;
		min-width:0 !important;
		height:auto !important;
	}
}


/* =========================================================
   ✅ ADICIONADO (v1.3.0): Página interna de assistir stream
   Shortcode: [topl2_twitch_watch]
   ========================================================= */
.topl2-twitch-watch{
	margin:14px 0;
	--topl2-bg:#0b0f19;
	--topl2-border:rgba(255,255,255,.10);
	--topl2-text:#e5e7eb;
	--topl2-muted:#9ca3af;
}
.topl2-twitch-watch--empty{
	border:1px solid var(--topl2-border);
	background:var(--topl2-bg);
	border-radius:12px;
	padding:14px;
	color:var(--topl2-text);
}
.topl2-twitch-watch-inner{
	display:grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap:14px;
	/* ✅ ALTERADO (v1.3.3): antes estava 'start' e o chat ficava com altura bem pequena.
	   Agora usamos 'stretch' para o chat esticar e ficar do mesmo tamanho do player no desktop. */
	align-items:stretch;
}
@media (max-width: 900px){
	.topl2-twitch-watch-inner{grid-template-columns: minmax(0, 1fr);}
}
.topl2-twitch-player,
.topl2-twitch-chat{
	position:relative;
	border:1px solid var(--topl2-border);
	background:var(--topl2-bg);
	border-radius:12px;
	overflow:hidden;
}

/* ✅ ADICIONADO (v1.3.3): mantém o player responsivo via aspect-ratio */
.topl2-twitch-player{
	aspect-ratio: 16 / 9;
}

/* ✅ ALTERADO (v1.3.3): o chat NÃO deve usar aspect-ratio (senão fica baixo/pequeno).
   No desktop ele vai esticar para a altura do player (por causa do align-items:stretch no grid).
   No mobile a gente define uma altura fixa/limitada para não sumir. */
.topl2-twitch-chat{
	min-height:0;
	height:100%;
}
@media (max-width: 900px){
	/* ✅ ALTERADO (v1.3.3): no mobile o grid vira 1 coluna e o chat precisa ter altura própria */
	.topl2-twitch-chat{
		margin-top:14px;
		height:520px;
		max-height:70vh;
	}
}
.topl2-twitch-player iframe,
.topl2-twitch-chat iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
}