/* «راديو هلا كندا» – uses the theme's tokens. */

/* Play / stop button */
.hr-btn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--hc-red);color:#fff;cursor:pointer;transition:transform .15s ease,background .15s ease}
.hr-btn:hover{background:var(--hc-red-dark);transform:scale(1.05)}
.hr-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--hc-red)}
.hr-btn svg{width:46%;height:46%}
.hr-btn__stop,.hr-btn__spin{display:none}
.hr-btn.is-playing .hr-btn__play,.hr-btn.is-loading .hr-btn__play{display:none}
.hr-btn.is-playing .hr-btn__stop{display:block}
.hr-btn.is-loading .hr-btn__spin{display:block;position:absolute;inset:6px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:hr-spin .8s linear infinite}
.hr-btn--lg{width:64px;height:64px}
.hr-btn--xl{width:84px;height:84px}
@keyframes hr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.hr-btn.is-loading .hr-btn__spin{animation-duration:2s}}

.hr-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#ff8a8d;vertical-align:middle}
.hr-live .hc-pulse{background:#ff4d4f}
.hr-live--lg{font-size:14px}
.hr-link{border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hr-error{grid-column:1/-1;margin:0;font-size:14px;color:#ffb3b5}

/* Homepage band */
.hr-band{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 24px;padding:20px 24px;border-radius:var(--hc-radius-lg);background:linear-gradient(90deg,var(--hc-dark) 0%,#1d222b 100%);color:#fff;box-shadow:inset 0 -3px 0 var(--hc-red)}
.hr-band__art img{width:88px;height:88px;border-radius:10px;object-fit:cover;background:#2a2f38}
.hr-band__info{display:flex;flex-direction:column;gap:6px;min-width:0}
.hr-band__title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:22px;color:#fff}
.hr-band__now{font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-band__label{color:var(--hc-on-dark-2);font-weight:500}
.hr-band__links{display:flex;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--hc-on-dark)}
.hr-band__links a{color:var(--hc-on-dark);text-decoration:underline;text-underline-offset:3px}
.hr-band__links a:hover,.hr-band .hr-link:hover{color:#fff}
.hr-band__ctrl{display:flex;flex-direction:column;align-items:center;gap:6px}
.hr-band__state{font-size:13px;font-weight:600;color:var(--hc-on-dark)}

/* Small player on every page: floating card on desktop, pinned strip on phones */
.hr-mini{position:fixed;z-index:60;inset-inline-end:20px;bottom:20px;display:flex;align-items:center;gap:10px;width:320px;max-width:calc(100vw - 40px);padding:10px 10px 10px 14px;border-radius:14px;background:var(--hc-dark);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.hr-mini .hr-btn{width:44px;height:44px}
.hr-mini__info{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;color:#fff}
.hr-mini__info:hover{color:#fff}
.hr-mini__name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.hr-mini__now{font-size:12px;color:var(--hc-on-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-mini__close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--hc-on-dark-2);cursor:pointer}
.hr-mini__close:hover{background:var(--hc-dark-2);color:#fff}
.hr-mini__close svg{width:18px;height:18px}

/* Radio page */
.hr-page{display:flex;flex-direction:column;gap:32px;padding-block:24px 56px}
.hr-hero{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding:28px;border-radius:16px;background:radial-gradient(circle at 85% 20%,#2b3140 0%,var(--hc-dark) 60%);color:#fff;box-shadow:inset 0 -4px 0 var(--hc-red)}
.hr-hero__art img{width:220px;height:220px;border-radius:14px;object-fit:cover;background:#2a2f38;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hr-hero__body{display:flex;flex-direction:column;gap:10px;min-width:0}
.hr-hero__title{font-size:clamp(28px,3vw,40px);color:#fff}
.hr-hero__now{font-size:18px;line-height:1.7}
.hr-hero__ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:6px}
.hr-hero__links{font-size:14px;color:var(--hc-on-dark)}
.hr-volume{display:inline-flex;align-items:center;gap:8px;color:var(--hc-on-dark)}
.hr-volume svg{width:20px;height:20px}
.hr-volume input{width:140px;accent-color:var(--hc-red)}
.hr-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
.hr-promos h2,.hr-about h2{font-size:22px;border-bottom:2px solid var(--hc-ink);padding-bottom:8px;margin-bottom:12px}
.hr-promos__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;justify-items:center}

/* Ad / promo slots inside the players */
.hc-ad--468x60{width:468px;height:60px}
.hr-band__promo{grid-column:1/-1;display:flex;justify-content:center}
.hr-band__promo .hc-ad__ph{background:rgba(255,255,255,.06);border-color:#4a505b;color:var(--hc-on-dark-2)}
.hr-popup__promo{margin-top:12px}
.hr-popup__promo .hc-ad__ph{background:rgba(255,255,255,.06);border-color:#4a505b;color:var(--hc-on-dark-2)}
.hr-about p{line-height:1.9;color:var(--hc-ink-3)}
.hr-about__list{margin-top:10px;padding-inline-start:20px;line-height:1.9;color:var(--hc-ink-3)}

/* Pop-out window */
.hr-popup-body{margin:0;min-height:100vh;background:var(--hc-dark);color:#fff}
.hr-popup{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 20px 28px;text-align:center}
.hr-popup__logo{height:40px;width:auto}
.hr-popup__title{font-size:22px;color:#fff}
.hr-popup__now{min-height:3.4em;font-size:15px;line-height:1.7;color:var(--hc-on-dark)}
.hr-popup .hr-band__state{margin-top:-2px}
.hr-popup__app{margin-top:10px;font-size:14px;color:var(--hc-on-dark)}
.hr-popup .hc-badges{justify-content:center}

@media (max-width:1024px){
	.hr-cols{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:768px){
	.hr-band{grid-template-columns:auto 1fr;padding:16px}
	.hr-band__art img{width:64px;height:64px}
	.hr-band__title{font-size:18px}
	.hr-band__now{font-size:14px;white-space:normal}
	.hr-band__ctrl{grid-column:1/-1;flex-direction:row;justify-content:flex-start;gap:12px}
	.hr-band__links{font-size:13px}

	.hr-hero{grid-template-columns:1fr;justify-items:center;text-align:center;padding:20px}
	.hr-hero__art img{width:180px;height:180px}
	.hr-hero__ctrl{justify-content:center}

	/* Pinned strip at the bottom of the screen, as in the mobile design */
	.hr-mini{inset-inline:0;bottom:0;width:auto;max-width:none;border-radius:0;padding:8px 12px;box-shadow:0 -4px 16px rgba(0,0,0,.25);border-top:2px solid var(--hc-red)}
	.hr-has-mini body{padding-bottom:64px}
}

@media print{.hr-mini,.hr-band{display:none !important}}

/* Homepage sidebar card (replaces the wide band, Oct 15) */
.hr-card{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--hc-radius-lg);background:var(--hc-dark);color:#fff}
.hr-card__top{display:flex;align-items:center;gap:12px}
.hr-card__art{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.hr-card__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hr-card__title{font-size:16px;line-height:1.4;color:#fff}
.hr-card__links{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--hc-on-dark-2)}
.hr-card__links a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hr-card .hr-error{font-size:13px;color:#ffb3b5}