/* Radioguide - "Who is playing <artist> / <song> right now?" (app/components/onair/OnAirView.php).
   Common parts first, then design 2 (.oa--d2, rows are quick-listen tiles), design 3 (.oa--d3) and design 1 (.oa--d1). */
.oa-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.oa-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); animation: oa-pulse 2s ease-out infinite; }
@keyframes oa-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .45); } 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .oa-dot { animation: none; } }

/* head: summary + map button */
.oa-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.oa-sum { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 700; font-size: 17px; line-height: 1.35; }
.oa-mapbtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e1e4eb; background: #fff; color: inherit; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.oa-mapbtn:hover { border-color: #ee6f00; }
.oa-mapbtn[hidden], .oa-map[hidden], .oa-chips[hidden], .oa-more[hidden], .oa-sug[hidden] { display: none; }
.oa-map { margin: 0 0 14px; }
.oa-map__box { height: 300px; border-radius: 14px; overflow: hidden; background: #e9eef3; }
.oa-map__note { margin: 6px 0 0; font-size: 12px; color: #6b7185; }

/* country chips */
.oa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.oa-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e1e4eb; background: #fff; color: #151a2d; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1.3; }
.oa-chip span:last-child { font-weight: 500; color: #5b6378; }
.oa-chip:hover { border-color: #ee6f00; }
.oa-chip.is-active { background: #151a2d; border-color: #151a2d; color: #fff; }
.oa-chip.is-active span:last-child { color: #d5d8e0; }

/* rows (shared) */
.oa-list { list-style: none; margin: 0; padding: 0; }
.oa-row[hidden] { display: none !important; }
.oa-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; text-align: left; gap: 1px; }
.oa-song { font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #151a2d; }
.oa-song b { font-weight: 700; }
.oa-by { font-weight: 400; color: #5b6378; font-size: 13px; }
.oa-station { font-size: 14px; font-weight: 600; color: #2b3045; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-where { font-size: 13px; color: #5b6378; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-flag { font-size: 15px; }
.oa-when { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #5b6378; white-space: nowrap; }
.oa-row--recent .oa-when { font-weight: 500; }
.oa-more { margin: 12px 0 0; font-weight: 700; }
.oa-sub { margin: 18px 0 8px; font-weight: 700; font-size: 14px; color: #5b6378; }
.oa-empty { margin: 8px 0 0; color: #5b6378; }
.oa-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; font-weight: 600; }
.oa-h3 { margin: 6px 0 10px; font-size: 15px; }
.oa-h3 + .oa-artists + .oa-h3 { margin-top: 20px; }

/* hero */
.oa-hero { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.oa-hero__txt { min-width: 0; }
.oa-hero h1 { margin-bottom: 6px; }
.oa-hero .rgl-actions { margin-top: 12px; }

/* search with suggestions */
.oa-search { position: relative; display: flex; gap: 8px; max-width: 600px; margin: 18px 0 0; }
.oa-search__box { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; background: #fff; border: 1px solid #e1e4eb; border-radius: 999px; padding: 0 16px; height: 50px; margin: 0; color: #5b6378; font-weight: 400; }
.oa-search__box:focus-within { border-color: #ee6f00; box-shadow: 0 0 0 3px rgba(238, 111, 0, .15); }
.oa-search input { border: 0; outline: 0; flex: 1; min-width: 0; height: 46px; padding: 0; background: transparent; font: inherit; font-size: 16px; color: #151a2d; box-shadow: none; }
.oa-btn { flex: none; border: 0; border-radius: 999px; background: #ee6f00; color: #fff; font: inherit; font-weight: 700; padding: 0 22px; cursor: pointer; }
.oa-btn:hover { background: #c95d00; }
.oa-sug { position: absolute; left: 0; right: 0; top: 56px; z-index: 60; list-style: none; margin: 0; padding: 6px; background: #fff; color: #151a2d; border: 1px solid #e1e4eb; border-radius: 14px; box-shadow: 0 12px 32px rgba(21, 26, 45, .16); text-align: left; }
.oa-sug li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.oa-sug li[aria-selected="true"], .oa-sug li:hover { background: #fff1e6; }
.oa-sug__t { display: flex; flex-direction: column; min-width: 0; }
.oa-sug__t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-sug__t span { font-size: 12.5px; color: #5b6378; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-sug small { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #15803d; font-weight: 600; }
.oa-sug .oa-sug__none { cursor: default; color: #5b6378; }

/* artist / song grids on /on-air */
.oa-artists { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.oa-artists a { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #e7e9ef; border-radius: 14px; background: #fff; color: #151a2d; text-decoration: none; min-width: 0; }
.oa-artists a:hover { border-color: #ee6f00; color: #151a2d; }
.oa-artists span { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.oa-artists b, .oa-artists em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-artists em { font-style: normal; font-size: 13px; color: #5b6378; }
.oa-artists small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #5b6378; }

/* "On the radio now (3)" next to chart songs */
.oa-nowlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: #15803d !important; text-decoration: none; white-space: nowrap; }
.oa-nowlink:hover { text-decoration: underline; }
.oa-nowlink .oa-dot { width: 7px; height: 7px; }

/* ---------------- design 2: quick-listen tiles as rows ---------------- */
.oa--d2 .oa-list { display: flex; flex-direction: column; gap: 8px; }
.t2 .oa--d2 .qp-t__a { aspect-ratio: auto; flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; gap: 14px; padding: 10px 44px 10px 12px; border-radius: 16px; }
.t2 .oa--d2 .qp-t__a:hover { transform: none; }
.oa--d2 .qp-t__logo { width: 60px; height: 60px; border-radius: 12px; }
.t2 .oa--d2 .qp-t__name { width: auto; font-size: 14px; font-weight: 600; color: #2b3045; }
.oa--d2 .qp-t__eq { top: 8px; left: 8px; }
.t2 .oa--d2 .qp-t__info { top: 50%; right: 10px; margin-top: -12px; }
.oa--d2 .oa-row--recent .qp-t__logo { width: 48px; height: 48px; }
.oa-pagehead .oa-search { margin-top: 20px; }
.t2 .oa-page { padding-top: 6px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 20px; }
.t2 .oa-pagehead h1 { font-size: 34px; }
.t2 .oa-box .t2-box__head { flex-wrap: wrap; gap: 6px 14px; }
.t2 .oa-box .t2-box__head a { font-weight: 700; font-size: 14px; }

/* ---------------- designs 1 and 3: own rows, play in the site player bar ---------------- */
.oa--d1 .oa-row, .oa--d3 .oa-row { border-top: 1px solid #eef0f4; }
.oa--d1 .oa-row:first-child, .oa--d3 .oa-row:first-child { border-top: 0; }
.oa-a { display: flex; align-items: center; gap: 12px; padding: 10px 8px; color: inherit !important; text-decoration: none !important; border-radius: 8px; }
.oa-a:hover { background: #f8f9fb; }
.oa-logo { position: relative; width: 52px; height: 52px; flex: none; border-radius: 8px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eef0f4; color: #fff; font-weight: 700; font-size: 15px; }
.oa-logo img { width: 100%; height: 100%; object-fit: contain; }
.oa-row--recent .oa-logo { width: 42px; height: 42px; }
.oa-pbtn { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #ee6f00; color: #fff; display: inline-flex; align-items: center; justify-content: center; padding-left: 2px; }
.oa-row--recent .oa-pbtn { background: #fff; color: #ee6f00; box-shadow: inset 0 0 0 2px #ee6f00; }
.oa-row.is-playing .oa-a { background: #fff1e4; box-shadow: inset 3px 0 0 #ee6f00; }
.oa-row.is-playing .oa-pbtn { background: #151a2d; color: #fff; box-shadow: none; }
/* design 3: purple hero, boxes */
.oa--d3 .oa-sum { color: #1f2433; }
.t3 .oa-page { display: flex; flex-direction: column; gap: 18px; padding-top: 22px; padding-bottom: 30px; }
.t3 .hero3 .oa-search__box { border-color: transparent; }
.t3 .hero3 .oa-hero h1 { color: #fff; }
.t3 .oa-box .sec-h a { font-size: 13px; }
/* design 3: the fixed station bar of the layout steps aside while the site player bar plays */
html.oa-bar body.t3 > #player { display: none; }
/* design 1 */
.oa--d1 .oa-sum { font-size: 16px; }
.oa-page .rg-ch-box.oa-box { margin-bottom: 20px; }
.oa-lead { font-size: 16px; color: #5b6378; }

@media (max-width: 760px) {
    .oa-sum { font-size: 15.5px; }
    .oa-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding: 2px 2px 4px; }
    .oa-chips::-webkit-scrollbar { display: none; }
    .oa-map__box { height: 220px; }
    .oa-hero { gap: 14px; align-items: flex-start; }
    .oa-hero > :first-child { width: 64px !important; height: 64px !important; font-size: 22px !important; flex: none; }
    .t2 .oa-pagehead h1 { font-size: 25px; }
    .oa-search { flex-wrap: nowrap; }
    .oa-search__box { height: 46px; padding: 0 12px; }
    .oa-btn { padding: 0 14px; }
    .oa-song { font-size: 15px; }
    .oa-when { font-size: 11.5px; gap: 5px; }
    .t2 .oa--d2 .qp-t__a { gap: 10px; padding: 8px 10px; border-radius: 14px; }
    .oa--d2 .qp-t__logo { width: 48px; height: 48px; }
    .oa-a { gap: 10px; padding: 9px 4px; }
    .oa-logo { width: 46px; height: 46px; }
    .oa-pbtn { width: 34px; height: 34px; }
    .oa-row .oa-when { position: absolute; right: 10px; top: 8px; }
    .oa-row { position: relative; }
    .oa-row .oa-txt { padding-right: 0; }
    .oa-row .oa-song { padding-right: 86px; }
    .oa-artists { grid-template-columns: 1fr; }
}

/* today's playlist of the station (station playlist pages) */
.oa-row { position: relative; }
.oa-row .oa-when { align-self: flex-start; margin-top: 4px; }
.oa-pl { position: absolute; right: 56px; bottom: 9px; font-size: 12.5px; font-weight: 600; color: #b85500 !important; text-decoration: none; }
.oa--d2 .oa-pl { right: 46px; }
.oa-pl:hover { text-decoration: underline; }
.t3 .hero3 .rgl-actions button { color: #1f2433; }
@media (max-width: 760px) {
    .oa-pl { right: 10px; bottom: 7px; font-size: 12px; }
    .oa--d2 .oa-pl { right: 10px; }
}
@media (max-width: 760px) { .oa--d1 .oa-pl, .oa--d3 .oa-pl { right: 48px; } }
/* the search box keeps its own look inside every design's form styles */
.oa-search .oa-search__box { display: flex !important; flex-wrap: nowrap; }
.oa-search .oa-search__box svg { flex: none; }
.oa-search .oa-search__box input { flex: 1 1 0; width: auto !important; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent !important; height: 44px !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; }
@media (max-width: 760px) {
    .oa-row:has(.oa-pl) .oa-a, .t2 .oa-row:has(.oa-pl) .qp-t__a { padding-bottom: 24px; }
}
@media (max-width: 760px) {
    .oa--d1 .oa-row .oa-when, .oa--d3 .oa-row .oa-when { right: 50px; }
    .oa--d1 .oa-row .oa-song, .oa--d3 .oa-row .oa-song { padding-right: 84px; }
}
/* phones: "2 min ago started" on its own line under the station (it overlapped the song title in the top
   right corner); the playlist link stays bottom right */
@media (max-width: 760px) {
    .oa-row .oa-a, .oa-row .qp-t__a { flex-wrap: wrap; row-gap: 2px; }
    .oa--d2 .oa-row .oa-when { margin-left: 58px; }
    .oa-row .oa-when { position: static; flex: 1 0 100%; order: 10; margin: 2px 0 0 56px; padding-right: 72px; }
    .oa-row .oa-song { padding-right: 0; }
    .oa-row--recent .oa-when { margin-left: 52px; }
}