/* 2026-11-04: okienko „Radio pani M.” (presentation/templates/first_page_radio.tpl). Telefon: blok w styles/mobile.css */

#kzRadio{margin:0 0 12px;border:1px solid #d6e9f5;background:#fff;font-family:Verdana,Geneva,sans-serif}
#kzRadio .box_title{margin:0}
#kzRadio .kzr-in{display:flex;gap:14px;padding:12px;align-items:center}
#kzRadio .kzr-pic{flex:0 0 46%;}
#kzRadio .kzr-pic svg{display:block;width:100%;height:auto}
#kzRadio .kzr-rec{flex:1;text-align:center;position:relative}
#kzRadio .kzr-lead{font:italic 12px Georgia,serif;color:#555;margin:0 0 8px}
#kzRadio .kzr-cov{position:relative;display:inline-block}
#kzRadio .kzr-cov img{width:170px;height:170px;object-fit:cover;box-shadow:0 3px 10px rgba(0,0,0,.25);display:block}
#kzRadio .kzr-n{position:absolute;color:#1f4e79;font:20px serif;opacity:0;animation:kzrFly 5s linear infinite;pointer-events:none}
#kzRadio .kzr-n:nth-child(2){left:10%;top:20%;animation-delay:0s}
#kzRadio .kzr-n:nth-child(3){left:80%;top:10%;animation-delay:1.2s;color:#c0392b}
#kzRadio .kzr-n:nth-child(4){left:50%;top:0;animation-delay:2.4s}
#kzRadio .kzr-n:nth-child(5){left:95%;top:55%;animation-delay:3.6s;color:#b8861b}
@keyframes kzrFly{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translate(-60px,-70px) rotate(-25deg);opacity:0}}
#kzRadio .kzr-t{font-size:11px;color:#333;margin:8px 0 2px;line-height:1.35}
#kzRadio .kzr-t b{color:#0072bc}
#kzRadio .kzr-p{font-weight:bold;font-size:13px;margin:2px 0 6px}
#kzRadio .kzr-ask{font:italic 13px Georgia,serif;color:#c0392b;margin:4px 0 8px}
#kzRadio .kzr-btn{display:inline-block;background:#c0392b;color:#fff;font:bold 12px Verdana,sans-serif;padding:7px 16px;border-radius:4px;text-decoration:none}
#kzRadio .kzr-btn:hover{background:#a02f23}
#kzRadio{margin:0 0 20px;border:1px solid #d7d7d7}
#kzRadio h2.box_title{background:url(/images/featured-box_bg.gif) 0 100% repeat-x #00aeef;color:#fff;font:700 14px Verdana,Geneva,sans-serif;padding:7px 10px;margin:0}
#kzRadio .kzr-lead{margin:0 0 14px}
#kzRadio .kzr-n{font-size:24px;text-shadow:0 1px 2px rgba(255,255,255,.8)}
#kzRadio .kzr-n:nth-child(2){left:-8%;top:30%}#kzRadio .kzr-n:nth-child(4){left:40%;top:8%}
#kzRadio .kzr-in{align-items:stretch}
#kzRadio .kzr-pic{display:flex;border-radius:6px;overflow:hidden}
#kzRadio .kzr-pic svg{width:100%;height:100%;min-height:280px}
#kzRadio .kzr-rec{display:flex;flex-direction:column;align-items:center;justify-content:space-between}
#kzRadio .kzr-pic{position:relative}
#kzRadio .kzr-promo{position:absolute;left:50%;top:10px;transform:translateX(-50%) scale(0);background:#c0392b;color:#fff;font:bold 13px/1.25 Verdana,sans-serif;padding:7px 12px;border-radius:14px;box-shadow:0 3px 8px rgba(0,0,0,.3);white-space:nowrap;text-align:center;animation:kzP 60s linear infinite;pointer-events:none}
#kzRadio .kzr-promo:after{content:"";position:absolute;right:28px;bottom:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#c0392b}
@keyframes kzP{0%{transform:translateX(-50%) scale(0)}5.000%{transform:translateX(-50%) scale(0)}5.667%{transform:translateX(-50%) scale(1.15)}6.167%{transform:translateX(-50%) scale(1)}20.000%{transform:translateX(-50%) scale(1)}20.500%{transform:translateX(-50%) scale(1.08)}21.000%{transform:translateX(-50%) scale(1)}36.000%{transform:translateX(-50%) scale(1)}36.667%{transform:translateX(-50%) scale(0)}100%{transform:translateX(-50%) scale(0)}}
@media (prefers-reduced-motion:reduce){#kzRadio .kzr-promo{animation:none}}
#kzRadio .kzr-promo{display:none}
#kzRadio .kzr-rab{display:inline-block;font-weight:bold;animation:kzRab 60s linear infinite;transform-origin:center}
@keyframes kzRab{0%{opacity:0;transform:scale(.3)}5.000%{opacity:0;transform:scale(.3)}5.667%{opacity:1;transform:scale(1.25)}6.333%{opacity:1;transform:scale(1)}36.000%{opacity:1;transform:scale(1)}37.000%{opacity:0;transform:scale(.3)}100%{opacity:0;transform:scale(.3)}}
@media (prefers-reduced-motion:reduce){#kzRadio .kzr-rab{animation:none}}
@keyframes kzRab{0%{opacity:0;transform:scale(.3)}36.667%{opacity:0;transform:scale(.3)}37.333%{opacity:1;transform:scale(1.25)}38.000%{opacity:1;transform:scale(1)}74.167%{opacity:1;transform:scale(1)}75.000%{opacity:0;transform:scale(.3)}100%{opacity:0;transform:scale(.3)}}
#kzRadio .kzr-form{margin:0}
#kzRadio button.kzr-btn{border:0;cursor:pointer;line-height:normal;-webkit-appearance:none;appearance:none}
#kzRadio a.kzr-tit{color:inherit;text-decoration:none}
#kzRadio a.kzr-tit:hover{color:#0072bc;text-decoration:underline}
#kzRadio .kzr-cov img{transition:opacity .4s}
/* v2: włącznik dźwięku i bieżący utwór */
#kzRadio .kzr-play{margin:0 0 10px;width:100%}
#kzRadio button.kzr-on{border:1px solid #1f4e79;background:#fff;color:#1f4e79;font:bold 12px Verdana,sans-serif;padding:6px 14px;border-radius:16px;cursor:pointer}
#kzRadio button.kzr-on:hover{background:#eef4fa}
#kzRadio.kzr-live button.kzr-on{background:#1f4e79;color:#fff}
#kzRadio .kzr-now{font-size:11px;color:#555;margin-top:6px;line-height:1.35;overflow-wrap:anywhere}
#kzRadio .kzr-of{color:#999;white-space:nowrap}

/* v4: po „Wyłącz radio” wszystko stoi w bieżącej klatce */
#kzRadio.kzr-stop *,#kzRadio.kzr-stop *::before,#kzRadio.kzr-stop *::after{animation-play-state:paused!important}

/* v5: wszystkie egzemplarze zarezerwowane przez innych słuchaczy */
#kzRadio .kzr-full{font:italic 13px/1.35 Georgia,serif;color:#7a5a2a;background:#fbf1df;border:1px dashed #c9a877;border-radius:4px;padding:6px 9px;margin:4px 0 6px}

/* v6: radio wyłączone – bez obietnicy rabatu */
#kzRadio.kzr-stop .kzr-rab{display:none!important}

/* v8: szerszy obrazek pani M. – prawa kolumna węższa o ok. 12% (okładka bez zmian) */
#kzRadio .kzr-pic{flex:0 0 52%}

/* v9: „Zrób pani M. niespodziankę!” i w drugim rzędzie „Kup tę płytę z 10% rabatem!” */
#kzRadio .kzr-rab{display:block;margin-top:2px}
#kzRadio .kzr-ask{white-space:nowrap}
#kzRadio.kzr-stop .kzr-rab{display:block!important;visibility:hidden}   /* radio wyłączone: rząd zostaje (przycisk nie skacze), ale bez rabatu */

/* v10: pokój pani M. jeszcze szerszy (55%), prawa kolumna ok. 224 px, okładka bez zmian */
#kzRadio .kzr-pic{flex:0 0 55%}

/* v12: stała wysokość okienka – utwór, artysta i tytuł płyty po jednej linii z „…” (pełny tekst w podpowiedzi) */
#kzRadio .kzr-now,#kzRadio .kzr-art,#kzRadio .kzr-tit{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
#kzRadio .kzr-t{width:100%}
#kzRadio .kzr-rec{min-width:0}   /* bez tego długi tekst w jednej linii rozpycha kolumnę */

/* v12: gdy znika rabat i wbiega myszka – w drugim rzędzie „Ups! Tamten pan był szybszy!” (46,5–60 s wzorca, jak myszka) */
#kzRadio .kzr-ask{position:relative}
#kzRadio .kzr-ups{position:absolute;left:0;right:0;bottom:0;font-weight:bold;opacity:0;transform-origin:center;pointer-events:none;animation:kzUps 60s linear infinite}
@keyframes kzUps{0%{opacity:0;transform:scale(.3)}77.500%{opacity:0;transform:scale(.3)}78.333%{opacity:1;transform:scale(1.2)}79.167%{opacity:1;transform:scale(1)}99.000%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
#kzRadio.kzr-stop .kzr-ups{visibility:hidden}
@media (prefers-reduced-motion:reduce){#kzRadio .kzr-ups{display:none}}
#kzRadio .kzr-ask{align-self:stretch}   /* pełna szerokość kolumny – „Ups!” wyśrodkowane */

/* v13: „▶ Włącz radio” delikatnie pulsuje, gdy radio jest wyłączone (zaprasza do kliknięcia); przy włączonym – spokój.
   Tylko transform i box-shadow – nic się nie przesuwa. */
@keyframes kzrPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(192,57,43,0)}50%{transform:scale(1.06);box-shadow:0 0 0 7px rgba(192,57,43,.18),0 0 12px 2px rgba(31,78,121,.25)}}
#kzRadio:not(.kzr-live) button.kzr-on{animation:kzrPulse 1.6s ease-in-out infinite}
#kzRadio.kzr-stop button.kzr-on{animation-play-state:running!important}   /* wyłączone radio zatrzymuje animacje w okienku – oprócz tego przycisku */
#kzRadio:not(.kzr-live) button.kzr-on:hover{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){#kzRadio button.kzr-on{animation:none!important}}