/* Sirmax Radio API Display - Frontend Styles
 * Modern, clean, responsive, and theme-friendly.
 */

html {
	scroll-behavior: smooth;
}

#sirmax-news-detail {
	scroll-margin-top: 20px;
}

.sirmax-radio-home,
.sirmax-radio-config,
.sirmax-radio-news,
.sirmax-radio-shows,
.sirmax-radio-store {
	box-sizing: border-box;
}

.sirmax-radio-home,
.sirmax-radio-section,
.sirmax-radio-config,
.sirmax-radio-news,
.sirmax-radio-shows,
.sirmax-radio-store {
	margin: 0 auto 2.5rem;
	padding: 0 1.25rem;
	max-width: 1120px;
}

.sirmax-section-title {
	font-size: 1.5rem;
	margin: 0 0 1.25rem;
	font-weight: 600;
}

.sirmax-radio-hero {
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.02));
	border-radius: 1rem;
	padding: 1.75rem 1.5rem;
	margin-bottom: 2.5rem;
}

.sirmax-radio-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.sirmax-radio-hero-logo img {
	max-width: 160px;
	height: auto;
	display: block;
}

.sirmax-radio-hero-title {
	font-size: 2rem;
	margin: 0 0 0.5rem;
	font-weight: 700;
	text-align: center;
}

.sirmax-radio-hero-subtitle {
	margin: 0 0 1.25rem;
	text-align: center;
	color: inherit;
	opacity: 0.85;
}

.sirmax-radio-hero-actions {
	display: flex;
	justify-content: center;
}

.sirmax-radio-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.sirmax-radio-button-primary {
	background-color: #111827;
	color: #ffffff;
	border-color: #111827;
}

.sirmax-radio-button:hover,
.sirmax-radio-button:focus {
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
	transform: translateY(-1px);
}

.sirmax-radio-button-primary:hover,
.sirmax-radio-button-primary:focus {
	background-color: #020617;
	border-color: #020617;
	color: #ffffff;
}

.sirmax-radio-config .sirmax-radio-logo img {
	max-width: 180px;
	height: auto;
}

.sirmax-radio-news-list,
.sirmax-radio-shows-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.sirmax-radio-news-item,
.sirmax-radio-show-item {
	margin: 0;
}

.sirmax-radio-news-title {
	margin: 0 0 0.4rem;
	font-weight: 600;
	font-size: 1.05rem;
}

.sirmax-radio-news-title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.sirmax-radio-news-title a:hover,
.sirmax-radio-news-title a:focus {
	border-bottom-color: rgba(15, 23, 42, 0.5);
}

.sirmax-radio-news-description {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.9;
}

.sirmax-radio-show-card {
	border-radius: 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	padding: 0.9rem 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.sirmax-radio-show-card:hover {
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
	border-color: rgba(0, 0, 0, 0.16);
	transform: translateY(-1px);
}

.sirmax-radio-show-title {
	font-weight: 600;
}

.sirmax-radio-show-time {
	font-size: 0.9rem;
	opacity: 0.85;
}

.sirmax-radio-store-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.sirmax-radio-store-card {
	border-radius: 0.9rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	padding: 0.9rem;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.sirmax-radio-store-card:hover {
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
	border-color: rgba(0, 0, 0, 0.16);
	transform: translateY(-2px);
}

.sirmax-radio-store-image img {
	width: 100%;
	height: auto;
	border-radius: 0.6rem;
	object-fit: cover;
	margin-bottom: 0.6rem;
}

.sirmax-radio-store-name {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.sirmax-radio-store-price {
	font-size: 0.95rem;
	opacity: 0.9;
}

.sirmax-radio-visualizer {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0.35rem;
	opacity: 0.25; /* faint idle state so bars are always visible */
	transition: opacity 0.3s ease;
}

.sirmax-radio-visualizer.is-playing {
	opacity: 0.9; /* brighter when the stream is playing */
}

.sirmax-radio-bar {
	width: 0.22rem;
	border-radius: 999px;
	background: linear-gradient(to top, #ED1E4F, #FD3DC2);
	transform-origin: bottom;
	animation: sirmax-radio-equalize 1s ease-in-out infinite;
}

.sirmax-radio-bar-1 { height: 25%; animation-duration: 1s; }
.sirmax-radio-bar-2 { height: 55%; animation-duration: 1.25s; }
.sirmax-radio-bar-3 { height: 85%; animation-duration: 0.9s; }
.sirmax-radio-bar-4 { height: 45%; animation-duration: 1.4s; }
.sirmax-radio-bar-5 { height: 70%; animation-duration: 1.15s; }
.sirmax-radio-bar-6 { height: 40%; animation-duration: 1.3s; }
.sirmax-radio-bar-7 { height: 80%; animation-duration: 1.05s; }
.sirmax-radio-bar-8 { height: 95%; animation-duration: 1.5s; }
.sirmax-radio-bar-9 { height: 60%; animation-duration: 1.1s; }

@keyframes sirmax-radio-equalize {
	0%,
	100% {
		transform: scaleY(0.4);
	}
	50% {
		transform: scaleY(1);
	}
}

.sirmax-empty-state {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.85;
}

.sirmax-radio-error {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background-color: rgba(220, 38, 38, 0.06);
	border: 1px solid rgba(220, 38, 38, 0.25);
	color: inherit;
}

.sirmax-footer-player {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	pointer-events: none;
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.sirmax-footer-player.sirmax-footer-player-visible {
	transform: translateY(0);
	opacity: 1;
}

.sirmax-footer-player-inner {
	pointer-events: auto;
	margin: 0 auto;
	max-width: 1120px;
	border-radius: 999px;
	background: rgba(10, 3, 20, 0.92);
	backdrop-filter: blur(14px);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.55rem 1rem;
	border: 1px solid rgba(148, 163, 184, 0.25);
}

body.admin-bar .sirmax-footer-player-inner {
	margin-bottom: 0.75rem;
}

.sirmax-footer-player-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: linear-gradient(135deg, #38059B, #8C0DFF);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(55, 48, 163, 0.6);
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
}

.sirmax-footer-player-play:hover {
	transform: translateY(-1px) scale(1.03);
	box-shadow: 0 16px 40px rgba(55, 48, 163, 0.8);
}

.sirmax-footer-player-play-icon {
	font-size: 26px;
}

.sirmax-footer-player-meta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
}

.sirmax-footer-player-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #e5e7eb;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.sirmax-footer-player-subtitle {
	font-size: 0.75rem;
	color: #9ca3af;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

@media (max-width: 640px) {
	.sirmax-footer-player-inner {
		margin: 0.35rem 0.75rem 0.75rem;
		padding-inline: 0.8rem;
	}

	.sirmax-footer-player-title {
		font-size: 0.85rem;
	}

	.sirmax-footer-player-subtitle {
		display: none;
	}
}

@media (min-width: 640px) {
	.sirmax-radio-hero-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.sirmax-radio-hero-title {
		text-align: left;
	}

	.sirmax-radio-hero-subtitle {
		text-align: left;
	}

	.sirmax-radio-hero-actions {
		justify-content: flex-start;
	}
}

@media (min-width: 768px) {
	.sirmax-radio-news-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sirmax-radio-shows-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sirmax-radio-store-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sirmax-radio-news-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Load more shows functionality */
.sirmax-show-hidden {
	display: none;
}

.sirmax-show-hidden.sirmax-show-visible {
	display: flex;
	animation: sirmax-show-fade-in 0.4s ease-out;
}

@keyframes sirmax-show-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Enhanced dark theme styling for shows section */
.sirmax-show-card {
	background: #ffffff;
}

.dark .sirmax-show-card {
	background: #1a0f2e;
	border-color: #2b1b45;
}

.sirmax-show-card:hover {
	border-color: rgba(140, 13, 255, 0.5);
	box-shadow: 0 8px 24px rgba(56, 5, 155, 0.2);
}

.dark .sirmax-show-card:hover {
	background: #24153a;
	border-color: rgba(140, 13, 255, 0.4);
	box-shadow: 0 8px 24px rgba(140, 13, 255, 0.15);
}

/* Show detail view styling (home shortcode) */
.sirmax-show-detail {
	position: relative;
	background: radial-gradient(circle at 10% 10%, rgba(253, 61, 194, 0.12), transparent 35%),
		radial-gradient(circle at 90% 20%, rgba(56, 5, 155, 0.2), transparent 40%),
		linear-gradient(135deg, #0f1024, #1a0f2e);
	border: 1px solid #2b1b45;
	backdrop-filter: blur(8px);
}

.dark .sirmax-show-detail {
	background: radial-gradient(circle at 10% 10%, rgba(253, 61, 194, 0.12), transparent 35%),
		radial-gradient(circle at 90% 20%, rgba(140, 13, 255, 0.2), transparent 40%),
		linear-gradient(135deg, #0f1024, #1a0f2e);
	border-color: #2b1b45;
}

.sirmax-show-detail-body {
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.sirmax-show-detail-body {
		padding: 2rem;
	}
}

.sirmax-show-detail-media {
	position: relative;
}

.sirmax-show-detail-media-inner {
	position: relative;
	background: #0f172a;
}

.sirmax-show-detail-media-img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform 0.3s ease;
}

.sirmax-show-detail-media-inner:hover .sirmax-show-detail-media-img {
	transform: scale(1.03);
}

.sirmax-show-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sirmax-show-chip-soft {
	background: rgba(56, 5, 155, 0.1);
	color: #38059b;
	border: 1px solid rgba(56, 5, 155, 0.2);
}

.dark .sirmax-show-chip-soft {
	background: rgba(140, 13, 255, 0.18);
	color: #f3e8ff;
	border-color: rgba(140, 13, 255, 0.28);
}

.sirmax-show-chip-outline {
	border: 1px dashed rgba(0, 0, 0, 0.2);
	color: #111418;
	background: rgba(255, 255, 255, 0.7);
}

.dark .sirmax-show-chip-outline {
	border-color: rgba(255, 255, 255, 0.2);
	color: #f3f4f6;
	background: rgba(26, 15, 46, 0.7);
}

.sirmax-show-chip-time {
	position: absolute;
	left: 0.9rem;
	bottom: 0.9rem;
	background: linear-gradient(135deg, #38059b, #fd3dc2);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 10px 30px rgba(56, 5, 155, 0.35);
}

.sirmax-show-chip-link {
	text-decoration: none;
	background: rgba(253, 61, 194, 0.12);
	color: #d00079;
	border: 1px solid rgba(253, 61, 194, 0.25);
	transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sirmax-show-chip-link:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px rgba(253, 61, 194, 0.25);
}

.dark .sirmax-show-chip-link {
	background: rgba(253, 61, 194, 0.16);
	color: #ffb7e1;
	border-color: rgba(253, 61, 194, 0.35);
}

/* Ensure text visibility in dark mode */
.dark .sirmax-show-card h3 {
	color: #ffffff;
}

.dark .sirmax-show-card p {
	color: #d1d5db;
}

/* Load more button styling */
.sirmax-load-more-shows {
	background: linear-gradient(135deg, #38059B, #8C0DFF);
	color: #ffffff;
}

.sirmax-load-more-shows:hover {
	background: linear-gradient(135deg, #8C0DFF, #FD3DC2);
	box-shadow: 0 10px 30px rgba(140, 13, 255, 0.4);
}

/* Events section styling */
.sirmax-event-card {
	background: #ffffff;
}

.dark .sirmax-event-card {
	background: #021017;
	border-color: rgba(16, 185, 129, 0.6);
}

.sirmax-event-card:hover {
	box-shadow: 0 10px 30px rgba(16, 185, 129, 0.25);
}

.dark .sirmax-event-card:hover {
	box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35);
}

/* Load more events button */
.sirmax-load-more-events {
	background: linear-gradient(135deg, #22c55e, #06b6d4);
	color: #ffffff;
}

.sirmax-load-more-events:hover {
	background: linear-gradient(135deg, #06b6d4, #22c55e);
	box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

/* Load more events functionality */
.sirmax-event-hidden {
	display: none;
}

.sirmax-event-hidden.sirmax-event-visible {
	display: flex;
	animation: sirmax-event-fade-in 0.4s ease-out;
}

@keyframes sirmax-event-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* News detail view styling (home shortcode) */
.sirmax-news-detail {
	position: relative;
	background: radial-gradient(circle at 10% 10%, rgba(253, 61, 194, 0.12), transparent 35%),
		radial-gradient(circle at 90% 20%, rgba(56, 5, 155, 0.2), transparent 40%),
		linear-gradient(135deg, #0f1024, #1a0f2e);
	border: 1px solid #2b1b45;
	backdrop-filter: blur(8px);
}

.dark .sirmax-news-detail {
	background: radial-gradient(circle at 10% 10%, rgba(253, 61, 194, 0.12), transparent 35%),
		radial-gradient(circle at 90% 20%, rgba(140, 13, 255, 0.2), transparent 40%),
		linear-gradient(135deg, #0f1024, #1a0f2e);
	border-color: #2b1b45;
}

.sirmax-news-detail-body {
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.sirmax-news-detail-body {
		padding: 2rem;
	}
}

.sirmax-news-detail-media {
	position: relative;
}

.sirmax-news-detail-media-inner {
	position: relative;
	background: #0f172a;
}

.sirmax-news-detail-media-img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	transition: transform 0.3s ease;
}

.sirmax-news-detail-media-inner:hover .sirmax-news-detail-media-img {
	transform: scale(1.03);
}

.sirmax-news-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.sirmax-news-chip-soft {
	background: rgba(253, 61, 194, 0.1);
	color: #fd3dc2;
	border: 1px solid rgba(253, 61, 194, 0.2);
}

.dark .sirmax-news-chip-soft {
	background: rgba(253, 61, 194, 0.18);
	color: #ffb7e1;
	border-color: rgba(253, 61, 194, 0.28);
}

.sirmax-news-chip-outline {
	border: 1px dashed rgba(0, 0, 0, 0.2);
	color: #111418;
	background: rgba(255, 255, 255, 0.7);
}

.dark .sirmax-news-chip-outline {
	border-color: rgba(255, 255, 255, 0.2);
	color: #f3f4f6;
	background: rgba(26, 15, 46, 0.7);
}

.sirmax-news-chip-time {
	position: absolute;
	left: 0.9rem;
	bottom: 0.9rem;
	background: linear-gradient(135deg, #fd3dc2, #8c0dff);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 10px 30px rgba(253, 61, 194, 0.35);
}

.sirmax-news-chip-link {
	text-decoration: none;
	background: rgba(253, 61, 194, 0.12);
	color: #d00079;
	border: 1px solid rgba(253, 61, 194, 0.25);
	transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.sirmax-news-chip-link:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px rgba(253, 61, 194, 0.25);
}

.dark .sirmax-news-chip-link {
	background: rgba(253, 61, 194, 0.16);
	color: #ffb7e1;
	border-color: rgba(253, 61, 194, 0.35);
}

/* News card styling */
.sirmax-news-card {
	background: #ffffff;
}

.dark .sirmax-news-card {
	background: #1a0f2e;
	border-color: #2b1b45;
}

.sirmax-news-card:hover {
	border-color: rgba(253, 61, 194, 0.5);
	box-shadow: 0 8px 24px rgba(253, 61, 194, 0.2);
}

.dark .sirmax-news-card:hover {
	background: #24153a;
	border-color: rgba(253, 61, 194, 0.4);
	box-shadow: 0 8px 24px rgba(253, 61, 194, 0.15);
}

/* Ensure text visibility in dark mode */
.dark .sirmax-news-card h3 {
	color: #ffffff;
}

.dark .sirmax-news-card p {
	color: #d1d5db;
}

/* Load more news button styling */
.sirmax-load-more-news {
	background: linear-gradient(135deg, #fd3dc2, #8c0dff);
	color: #ffffff;
}

.sirmax-load-more-news:hover {
	background: linear-gradient(135deg, #8c0dff, #fd3dc2);
	box-shadow: 0 10px 30px rgba(253, 61, 194, 0.4);
}

/* Load more news functionality */
.sirmax-news-hidden {
	display: none;
}

.sirmax-news-hidden.sirmax-news-visible {
	display: flex;
	animation: sirmax-news-fade-in 0.4s ease-out;
}

@keyframes sirmax-news-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Store card styling */
.sirmax-store-card {
	background: #ffffff;
}

.dark .sirmax-store-card {
	background: #1a0f2e;
	border-color: #2b1b45;
}

.sirmax-store-card:hover {
	border-color: rgba(140, 13, 255, 0.5);
	box-shadow: 0 8px 24px rgba(140, 13, 255, 0.2);
}

.dark .sirmax-store-card:hover {
	background: #24153a;
	border-color: rgba(253, 61, 194, 0.4);
	box-shadow: 0 8px 24px rgba(253, 61, 194, 0.15);
}

/* Ensure text visibility in dark mode */
.dark .sirmax-store-card h4 {
	color: #ffffff;
}

/* Buy button styling */
.sirmax-buy-button {
	text-decoration: none;
	background: linear-gradient(135deg, #38059b, #fd3dc2);
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 15px rgba(56, 5, 155, 0.3);
}

.sirmax-buy-button:hover {
	background: linear-gradient(135deg, #fd3dc2, #ff6ec7);
	box-shadow: 0 6px 20px rgba(253, 61, 194, 0.4);
	color: #ffffff;
	text-decoration: none;
}

.sirmax-buy-button:active {
	transform: scale(0.95);
}

.sirmax-buy-button-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Load more store button styling */
.sirmax-load-more-store {
	background: linear-gradient(135deg, #38059b, #fd3dc2);
	color: #ffffff;
}

.sirmax-load-more-store:hover {
	background: linear-gradient(135deg, #fd3dc2, #ff6ec7);
	box-shadow: 0 10px 30px rgba(253, 61, 194, 0.4);
}

/* Load more store functionality */
.sirmax-store-card.sirmax-store-hidden {
	display: none !important;
}

.sirmax-store-card.sirmax-store-hidden.sirmax-store-visible {
	display: flex !important;
	animation: sirmax-store-fade-in 0.4s ease-out;
}

@keyframes sirmax-store-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}