
/* KNN YouTube Shorts 1.1 — vertical, snap-scrolling Shorts experience */
.knn-shorts-feed{background:#050505;color:#fff;width:100%;height:min(88vh,900px);min-height:560px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;scrollbar-width:none;position:relative}
.knn-shorts-feed::-webkit-scrollbar{display:none}
.knn-short-slide,.knn-shorts-ad{height:100%;min-height:560px;max-height:900px;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;background:#050505}
.knn-short-frame{height:100%;width:min(100%,506px);aspect-ratio:9/16;max-height:100%;position:relative;background:#050505;overflow:hidden}
.knn-short-player,.knn-short-player iframe{position:absolute;inset:0;width:100%;height:100%}
.knn-short-player iframe{border:0;opacity:0;transition:opacity .2s;background:#000}
.knn-short-slide.is-loaded iframe{opacity:1}
.knn-short-play{position:absolute;inset:0;width:100%;height:100%;border:0;background-size:cover;background-position:center;background-color:#111;cursor:pointer;z-index:2;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.knn-short-play span{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#0009;font-size:27px;padding-left:5px}
.knn-short-play small{font:600 13px/1.3 Arial,sans-serif;text-shadow:0 1px 4px #000}
.knn-short-slide.is-loaded .knn-short-play{display:none}
.knn-short-shade{position:absolute;inset:48% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.82));pointer-events:none;z-index:1}
.knn-short-caption{position:absolute;left:18px;right:76px;bottom:24px;z-index:3;font-size:20px;font-weight:700;line-height:1.42;text-shadow:0 1px 4px #000}
.knn-short-caption a{color:#fff;text-decoration:none}
.knn-short-actions{position:absolute;right:14px;bottom:22px;display:flex;flex-direction:column;gap:12px;z-index:5}
.knn-short-action{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:7px;background:rgba(35,35,35,.72);color:#fff;text-decoration:none;font-size:25px;cursor:pointer;box-shadow:0 1px 4px #0004}
.knn-short-action:focus-visible{outline:2px solid #fff;outline-offset:2px}
.knn-action-home{font-size:31px;line-height:1}
.knn-sound-icon{font-size:22px}
.knn-whatsapp-icon{font-size:25px;font-weight:700}
.knn-share-icon{font-size:29px}
.knn-shorts-ad{background:#101010;padding:24px}
.knn-ad-label{position:absolute;top:12px;left:14px;color:#aaa;font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.knn-ad-content{width:min(100%,728px);max-height:100%;overflow:hidden;background:#fff;color:#111;padding:8px;min-height:100px;display:flex;align-items:center;justify-content:center}
.knn-shorts-empty{padding:20px}
.knn-shorts-grid{display:grid;grid-template-columns:repeat(var(--knn-grid-cols,4),minmax(0,1fr));gap:22px;width:100%}
.knn-shorts-card{display:block;position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:12px;background:#171717;color:#fff;text-decoration:none;isolation:isolate}
.knn-shorts-card img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;transition:transform .25s}
.knn-shorts-card:hover img{transform:scale(1.035)}
.knn-card-gradient{position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.94));z-index:1}
.knn-card-play{position:absolute;top:0;left:0;background:#e00000;color:#fff;padding:10px 13px;font-size:20px;z-index:2}
.knn-card-title{position:absolute;left:13px;right:12px;bottom:15px;font-size:17px;line-height:1.4;font-weight:700;color:#fff;z-index:2}
.knn-shorts-more{text-align:right;margin-top:16px}
.knn-shorts-more a{display:inline-block;border:1px solid #ddd;border-radius:30px;padding:9px 18px;color:#d00;text-decoration:none}
.knn-shorts-single-wrap{width:100%;max-width:none;margin:0;padding:0}
.knn-shorts-single-head{display:none}
.knn-shorts-feed:focus{outline:none}
body.single-knn_short{background:#050505}
body.single-knn_short #content,body.single-knn_short .container,body.single-knn_short .site-content{max-width:none;width:100%;padding:0;margin:0}
@media(max-width:767px){
 .knn-shorts-feed{height:calc(100svh - 0px);height:100dvh;min-height:480px;margin:0;width:100%;border:0}
 .knn-short-slide,.knn-shorts-ad{min-height:100%;height:100%;max-height:none}
 .knn-short-frame{width:100%;height:100%;max-height:none;aspect-ratio:auto}
 .knn-short-caption{font-size:19px;left:16px;right:78px;bottom:24px}
 .knn-short-actions{right:12px;bottom:22px;gap:13px}
 .knn-short-action{width:46px;height:46px;border-radius:6px;background:rgba(45,45,45,.76)}
 .knn-shorts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .knn-card-title{font-size:14px;left:9px;right:8px;bottom:10px}
 .knn-card-play{font-size:16px;padding:7px 10px}
 .knn-shorts-single-wrap{padding:0;margin:0}
 .knn-shorts-ad{padding:12px}
 .knn-ad-content{width:100%}
}
@media(min-width:768px) and (max-width:1050px){.knn-shorts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.knn-short-hint{position:absolute;z-index:4;top:18px;left:50%;transform:translateX(-50%);padding:9px 15px;border-radius:24px;background:rgba(0,0,0,.62);color:#fff;font:600 13px/1.25 Arial,sans-serif;white-space:nowrap;pointer-events:none;animation:knnHintFade 1s ease 6s forwards}
.knn-short-hint span{font-size:18px;margin-right:5px}
.knn-shorts-pagination{margin:28px 0;text-align:center}
.knn-shorts-pagination ul{display:flex;justify-content:center;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.knn-shorts-pagination a,.knn-shorts-pagination span{display:inline-flex;padding:9px 13px;border:1px solid #ddd;border-radius:5px;text-decoration:none}
.knn-shorts-pagination .current{background:#222;color:#fff;border-color:#222}
@keyframes knnHintFade{to{opacity:0;visibility:hidden}}
@media(max-width:767px){.knn-short-hint{top:16px;font-size:12px;padding:8px 12px}.knn-shorts-pagination{padding:0 12px}}

/* Homepage latest Shorts block */
.knn-shorts-latest-section{width:100%;margin:24px 0 32px}
.knn-shorts-latest-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.knn-shorts-latest-heading h2{font-size:26px;line-height:1.25;margin:0;font-weight:700;color:inherit}
.knn-shorts-view-all{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border:1px solid #ddd;border-radius:30px;color:#d00;text-decoration:none;font-size:14px;background:#fff}
.knn-shorts-view-all:hover{border-color:#d00;color:#b00}
@media(max-width:767px){
 .knn-shorts-latest-section{margin:18px 0 24px}
 .knn-shorts-latest-heading{margin-bottom:12px}
 .knn-shorts-latest-heading h2{font-size:21px}
 .knn-shorts-view-all{padding:7px 12px;font-size:13px}
}

/* Desktop up/down navigation, placed outside the portrait player like TV news Shorts pages */
.knn-short-slide{position:relative}
.knn-short-desktop-nav{position:absolute;left:calc(50% + 265px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;z-index:8}
.knn-short-desktop-nav button{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.32);border-radius:7px;background:rgba(25,25,25,.62);color:#fff;font:400 38px/1 Arial,sans-serif;cursor:pointer;padding:0}
.knn-short-desktop-nav button:hover{background:rgba(65,65,65,.9);border-color:#fff}
.knn-short-desktop-nav button:disabled{opacity:.32;cursor:default}
@media(max-width:767px){.knn-short-desktop-nav{display:none}}
@media(min-width:768px) and (max-width:1100px){
 .knn-short-desktop-nav{left:calc(50% + min(35vw, 250px) + 14px)}
 .knn-short-desktop-nav button{width:48px;height:48px;font-size:32px}
}
