.fp-module { margin-top: 32px; }
.fp-module:first-child { margin-top: 16px; }

.fp-tabs,
.fp-track { scrollbar-width: none; }
.fp-tabs::-webkit-scrollbar,
.fp-track::-webkit-scrollbar { display: none; }

.fp-tabs { display: flex; gap: 16px; overflow-x: auto; margin-bottom: 12px; }
.fp-tab { flex-shrink: 0; padding: 6px 12px 4px; font-size: 16px; font-weight: 700; line-height: 1.5; color: #000; background: transparent; border: 1px solid #e5e7eb; border-radius: 9999px; cursor: pointer; }
.fp-tab:focus { outline: none; }
.fp-tab.is-active { color: #dc2626; border-color: #dc2626; }

.fp-row { display: none; position: relative; }
.fp-row.is-active { display: block; }

.fp-track { --fp-count: 5; --fp-gap: 16px; display: flex; gap: var(--fp-gap); overflow-x: auto; scroll-snap-type: x mandatory; user-select: none; -webkit-user-select: none; }
.fp-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }

.fp-card { flex: 0 0 calc((100% - var(--fp-gap) * (var(--fp-count) - 1)) / var(--fp-count)); scroll-snap-align: start; display: block; overflow: hidden; color: #000; text-decoration: none; cursor: pointer; }
.fp-card:hover,
.fp-card:focus { color: #000; text-decoration: none; }

.fp-img { position: relative; display: block; overflow: hidden; border-radius: 12px; background: #fff; }
.fp-img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.fp-img img.is-fallback { object-fit: contain; padding: 8px; }
.fp-djModule .fp-img,
.fp-djModule .fp-img img,
.fp-tvModule .fp-img { border-radius: 16px; }

.fp-name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; margin-top: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; }

.fp-live { display: none; position: absolute; top: 4px; right: 8px; color: #dc2626; font-size: 12px; font-weight: 700; }
.fp-card.is-online .fp-live { display: block; }

.fp-arrow { position: absolute; z-index: 10; top: 40%; transform: translateY(-40%); display: flex; align-items: center; justify-content: center; width: 40px; padding: 10px 0; font-size: 40px; line-height: 40px; color: #616161; background: #bdbdbd; border: 0; opacity: .8; cursor: pointer; transition: all .35s; }
.fp-arrow:hover { opacity: 1; }
.fp-arrow:focus { outline: none; }
.fp-arrow-prev { left: 0; border-radius: 0 10px 10px 0; }
.fp-arrow-next { right: 0; border-radius: 10px 0 0 10px; }

@media (min-width: 640px) {
	.fp-live { font-size: 14px; }
}

@media (max-width: 768px) {
	.fp-track { --fp-count: 4; --fp-gap: 8px; }
	.fp-arrow { top: 35%; transform: translateY(-35%) scale(.65); }
	.fp-arrow-prev { transform-origin: left center; }
	.fp-arrow-next { transform-origin: right center; }
}

@media (min-width: 769px) {
	.fp-live { font-size: 16px; }
}

@media (min-width: 1024px) {
	.fp-tab { padding: 10px 16px 8px; font-size: 24px; }
	.fp-name { font-size: 18px; }
	.fp-live { font-size: 18px; }
}
