/* AI subtitle availability badge for KVS video cards. */ .list-videos .item .img .ai-subtitle-badge { position: absolute; left: 6px; bottom: 6px; z-index: 4; display: none; align-items: center; max-width: calc(100% - 64px); min-height: 20px; padding: 4px 7px 4px 5px; overflow: hidden; color: #fff; background: rgba(8, 8, 10, .86); border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px; box-shadow: 0 2px 7px rgba(0, 0, 0, .42); font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .05px; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; user-select: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } /* * Card blocks may be cached independently from the current KVS locale. Keep * their markup language-neutral and let the live select both the * matching track and its label. This prevents a Turkish cached label from * leaking into English, German or Arabic pages. */ html[lang^="tr"] .list-videos .item .img .ai-subtitle-badge.has-tr, html[lang^="en"] .list-videos .item .img .ai-subtitle-badge.has-en, html[lang^="de"] .list-videos .item .img .ai-subtitle-badge.has-de, html[lang^="ar"] .list-videos .item .img .ai-subtitle-badge.has-ar { display: inline-flex; } html[lang^="tr"] .list-videos .item .img .ai-subtitle-badge.has-tr::after { content: "T\00FC rk\00E7 e altyaz\0131 l\0131"; } html[lang^="en"] .list-videos .item .img .ai-subtitle-badge.has-en::after { content: "English subtitles"; } html[lang^="de"] .list-videos .item .img .ai-subtitle-badge.has-de::after { content: "Deutsche Untertitel"; } html[lang^="ar"] .list-videos .item .img .ai-subtitle-badge.has-ar { direction: rtl; } html[lang^="ar"] .list-videos .item .img .ai-subtitle-badge.has-ar::after { content: "\062A\0631\062C\0645\0629\0020\0639\0631\0628\064A\0629"; } .list-videos .item .img .ai-subtitle-badge::before { content: "CC"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; height: 13px; margin-right: 5px; padding: 0 3px; color: #fff; background: #e80016; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; font-size: 8.5px; font-weight: 800; line-height: 13px; letter-spacing: .2px; } .list-videos .item .img .ai-subtitle-badge::after { min-width: 0; overflow: hidden; text-overflow: ellipsis; } html[lang^="ar"] .list-videos .item .img .ai-subtitle-badge.has-ar::before { margin-right: 0; margin-left: 5px; } @media (max-width: 767px) { .list-videos .item .img .ai-subtitle-badge { /* Keep the badge inside edge-to-edge cards, including scrollbar gutters. */ left: 12px; bottom: 5px; max-width: calc(100% - 70px); min-height: 21px; padding: 3px 6px 3px 4px; font-size: 11.5px; } .list-videos .item .img .ai-subtitle-badge::before { height: 14px; font-size: 9.5px; line-height: 14px; } } @media (prefers-reduced-transparency: reduce) { .list-videos .item .img .ai-subtitle-badge { background: #101012; -webkit-backdrop-filter: none; backdrop-filter: none; } }