/* ============================================
   KA Radio — base CSS (sticky-bar spacing + inline section wrapper)
   Main vintage styles sú v skin-afro.css.
============================================ */

/* Sticky bar spacing — pridá padding aby bar nikdy nezakrýval footer */
body.ka-sb-spacer { padding-bottom: 64px; }

/* PWA install tip — 1× toast po prvom play na mobile */
.ka-radio-tip {
	position: fixed;
	bottom: 84px; left: 12px; right: 12px;
	z-index: 99999;
	background: linear-gradient(135deg, rgba(45,27,105,0.96), rgba(13,11,16,0.96));
	color: #fff;
	border: 1px solid rgba(212,175,55,0.55);
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.55);
	font-family: 'DM Sans', sans-serif;
	font-size: 0.88rem; line-height: 1.45;
	display: flex; align-items: flex-start; gap: 10px;
	transform: translateY(20px); opacity: 0;
	transition: transform 0.35s, opacity 0.35s;
	max-width: 480px; margin: 0 auto;
}
.ka-radio-tip.is-visible { transform: translateY(0); opacity: 1; }
.ka-radio-tip-text { flex: 1; color: rgba(255,255,255,0.95); }
.ka-radio-tip strong { color: #F0C040; font-weight: 700; }
.ka-radio-tip small  { color: rgba(255,255,255,0.6); display: inline-block; margin-top: 4px; font-size: 0.78rem; }
.ka-radio-tip-close {
	background: none; border: none; color: #fff;
	font-size: 22px; line-height: 1; cursor: pointer;
	padding: 0 4px; opacity: 0.7;
}
.ka-radio-tip-close:hover { opacity: 1; }
@media (min-width: 721px) { .ka-radio-tip { display: none !important; } }

/* ═══════ /radio/ STATIONS PAGE GRID ═══════ */
.ka-radio-page-sub {
	text-align: center; max-width: 560px; margin: 14px auto 0;
	color: rgba(255,255,255,0.65); font-size: 0.95rem;
}
.ka-radio-genre-block { max-width: 1200px; margin: 40px auto 0; padding: 0 20px; }
.ka-radio-genre-title {
	font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
	color: var(--ka-genre-color, #c9a84c);
	font-size: 1.8rem;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	display: flex; align-items: center; gap: 12px;
}
.ka-radio-genre-emoji { font-size: 1.5rem; }
.ka-radio-genre-count {
	margin-left: auto;
	font-family: 'DM Sans', sans-serif; font-style: normal;
	font-size: 0.78rem;
	background: rgba(255,255,255,0.08);
	color: rgba(255,255,255,0.6);
	padding: 4px 12px; border-radius: 50px; font-weight: 600;
	letter-spacing: 0.04em;
}

.ka-radio-stn-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
}
.ka-radio-stn {
	all: unset; cursor: pointer;
	display: flex; flex-direction: column; align-items: center;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 20px 14px 18px;
	text-align: center;
	transition: transform 0.18s, border-color 0.18s, background 0.18s;
}
.ka-radio-stn:hover {
	transform: translateY(-4px);
	background: rgba(201,168,76,0.06);
	border-color: var(--ka-genre-color, #c9a84c);
}
.ka-radio-stn-logo {
	width: 84px; height: 84px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1a1522, #221d2e);
	border: 2px solid rgba(255,255,255,0.1);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	margin-bottom: 12px;
	position: relative;
	transition: border-color 0.18s, box-shadow 0.18s;
}
.ka-radio-stn:hover .ka-radio-stn-logo {
	border-color: var(--ka-genre-color, #c9a84c);
	box-shadow: 0 0 24px rgba(201,168,76,0.35);
}
.ka-radio-stn-logo img {
	width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.ka-radio-stn-logo.no-logo::before {
	content: '📻'; font-size: 32px; opacity: 0.5;
}
.ka-radio-stn-play {
	position: absolute; inset: 0;
	background: rgba(13,11,16,0.7);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 22px;
	opacity: 0; transition: opacity 0.2s;
	border-radius: 50%;
}
.ka-radio-stn:hover .ka-radio-stn-play { opacity: 1; }
.ka-radio-stn-play span {
	display: inline-block;
	color: var(--ka-genre-color, #c9a84c);
	filter: drop-shadow(0 2px 8px rgba(201,168,76,0.6));
}
.ka-radio-stn-name {
	font-size: 0.85rem; font-weight: 600;
	color: #e8e0d5; line-height: 1.3;
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
	margin-bottom: 4px;
	min-height: 2.4em;
}
.ka-radio-stn-country {
	font-size: 0.7rem; color: rgba(255,255,255,0.45);
	letter-spacing: 0.06em; text-transform: uppercase;
}

@media (max-width: 700px) {
	.ka-radio-stn-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.ka-radio-stn { padding: 14px 8px 12px; }
	.ka-radio-stn-logo { width: 64px; height: 64px; }
	.ka-radio-stn-name { font-size: 0.74rem; }
	.ka-radio-genre-title { font-size: 1.3rem; }
}

/* Wrapper pre [ka_radio_player] shortcode — kontajner okolo .ka-player */
.ka-radio-wrap {
	max-width: 1200px;
	margin: 30px auto 50px;
	padding: 0 24px;
}

/* ─── STICKY BAR FORCE-VISIBLE (v0.4.7) ─────────────────────────────────
   Astra/iné themes občas resetnú button bgcolor na transparent, alebo nastavia
   `button { padding:0 0 0 0; width:auto }` ktoré schová kruh úplne. Tieto
   pravidlá sú PÔVODNE z Customizer Additional CSS (overené že fungujú).
   Presunuté do plug-inu aby boli verzionovo konzistentné a nezávislé na DB stave.
─────────────────────────────────────────────────────────────────────── */

html body #ka-sticky-bar {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
	z-index: 99999 !important;
}

html body #ka-sticky-bar .ka-sb-center {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
}

/* Nav buttons (prev/next) */
html body #ka-sticky-bar .ka-sb-nav {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	border-radius: 50% !important;
	background: rgba(201, 168, 76, 0.08) !important;
	border: 1px solid rgba(201, 168, 76, 0.4) !important;
	color: #e8c97a !important;
	cursor: pointer !important;
	padding: 0 !important;
	overflow: visible !important;
	font-size: 0 !important;
}
html body #ka-sticky-bar .ka-sb-nav:hover {
	background: rgba(201, 168, 76, 0.2) !important;
	border-color: #c9a84c !important;
}

/* Play button */
html body #ka-sticky-bar .ka-sb-play {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, #e8c97a, #c9a84c) !important;
	border: none !important;
	color: #000 !important;
	cursor: pointer !important;
	padding: 0 !important;
	overflow: visible !important;
	font-size: 0 !important;
	box-shadow: 0 0 14px rgba(201, 168, 76, 0.5) !important;
}
html body #ka-sticky-bar .ka-sb-play:hover {
	transform: scale(1.08) !important;
}

/* SVG ikony — common visual props ale BEZ display rule pre .i-pause.
   .i-play je vždy renderovaná (JS prepína cez style.display).
   .i-pause začína s inline style="display:none" v render.php, JS toggle.
   Display NEFORCEUJEME na .i-pause aby inline style.display fungoval. */
html body #ka-sticky-bar .ka-sb-nav svg,
html body #ka-sticky-bar .ka-sb-play .i-play {
	display: block !important;
}
html body #ka-sticky-bar .ka-sb-nav svg,
html body #ka-sticky-bar .ka-sb-play svg {
	width: 16px !important;
	height: 16px !important;
	visibility: visible !important;
	opacity: 1 !important;
	overflow: visible !important;
	pointer-events: none !important;
}

/* Path fill — hardcoded farby (nie currentColor, niektoré themy ho prepisujú) */
html body #ka-sticky-bar .ka-sb-nav svg path {
	fill: #e8c97a !important;
}
html body #ka-sticky-bar .ka-sb-play svg path {
	fill: #000 !important;
}

/* Brand chip — palm + Afro Latino label v sticky bar */
#ka-sticky-bar .ka-sb-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: 50px;
	background: linear-gradient(135deg, rgba(201,168,76,0.18), rgba(45,27,105,0.4));
	border: 1px solid rgba(201,168,76,0.35);
	color: #e8c97a;
	font-family: 'Playfair Display', serif;
	font-size: 0.85rem;
	font-style: italic;
	flex-shrink: 0;
	margin-right: 4px;
}
#ka-sticky-bar .ka-sb-brand span { font-weight: 700; letter-spacing: 0.5px; }