/* =============================================================
   484 Media TikiLive Cams — frontend.css  v1.0.0
   ============================================================= */

/* ── Single embed ── */
.tlc-wrap { width: 100%; margin-bottom: 1.5rem; }

.tlc-label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 12px;
	background: rgba(8,24,48,0.82);
	border: 1px solid rgba(100,180,255,0.18);
	border-bottom: none;
	border-radius: 8px 8px 0 0;
}

.tlc-label-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(220,240,255,0.92);
	letter-spacing: 0.03em;
}

.tlc-label-loc {
	font-size: 0.68rem;
	font-weight: 300;
	color: rgba(140,200,255,0.6);
}

/* ── Embed wrapper ── */
.tlc-embed-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #040d16;
	overflow: hidden;
	border: 1px solid rgba(100,180,255,0.15);
	border-radius: 0 0 8px 8px;
}

.tlc-wrap:not(:has(.tlc-label)) .tlc-embed-wrap {
	border-radius: 8px;
}

.tlc-embed-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

/* ── Error ── */
.tlc-error {
	padding: 10px 14px;
	background: rgba(200,50,50,0.12);
	border: 1px solid rgba(200,80,80,0.3);
	border-radius: 6px;
	font-size: 0.82rem;
	color: #ffaaaa;
}

/* ── Grid ── */
.tlc-grid-section { width: 100%; margin-bottom: 2rem; }

.tlc-grid-title {
	font-size: clamp(1.1rem, 3vw, 1.6rem);
	font-weight: 600;
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid rgba(100,180,255,0.2);
	color: rgba(220,240,255,0.9);
}

.tlc-grid { display: grid; gap: 14px; }
.tlc-cols-1 { grid-template-columns: 1fr; }
.tlc-cols-2 { grid-template-columns: repeat(2,1fr); }
.tlc-cols-3 { grid-template-columns: repeat(3,1fr); }
.tlc-cols-4 { grid-template-columns: repeat(4,1fr); }

.tlc-grid-item {
	background: rgba(8,22,40,0.7);
	border: 1px solid rgba(100,180,255,0.18);
	border-radius: 10px;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.tlc-grid-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	border-color: rgba(100,180,255,0.4);
}

.tlc-grid-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(0,0,0,0.35);
	border-bottom: 1px solid rgba(100,180,255,0.12);
}

.tlc-grid-icon { font-size: 1rem; flex-shrink: 0; line-height: 1; }

.tlc-grid-meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.tlc-grid-name {
	font-size: 0.76rem;
	font-weight: 500;
	color: rgba(220,240,255,0.9);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tlc-grid-loc {
	font-size: 0.62rem;
	font-weight: 300;
	color: rgba(140,200,255,0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tlc-live-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4dff91;
	box-shadow: 0 0 6px #4dff91;
	flex-shrink: 0;
	animation: tlc-pulse 2s ease-in-out infinite;
}

@keyframes tlc-pulse {
	0%,100% { opacity:1; transform:scale(1); }
	50%      { opacity:.3; transform:scale(.75); }
}

.tlc-grid-item .tlc-embed-wrap {
	border: none;
	border-radius: 0;
	padding-top: 56.25%;
}

/* ── Responsive ── */
@media (max-width: 1100px) { .tlc-cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 860px)  { .tlc-cols-3, .tlc-cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px)  {
	.tlc-grid { gap: 8px; }
	.tlc-cols-2, .tlc-cols-3, .tlc-cols-4 { grid-template-columns: 1fr; }
}