/* ============================================================
   KPT PRODUCTION — SHORTS PAGE STYLES (Shorts pages ONLY)
   Scoped under .kpt-shorts-page — never touches global styling.
   ============================================================ */
.kpt-shorts-page{background:#09090d;color:#fff;overflow:hidden}
.kpt-shorts-page__main{height:100dvh}

/* ---------- Top bar: BACK BUTTON ONLY ---------- */
.kpt-shorts-topbar{position:fixed;inset:0 0 auto;height:64px;z-index:20;display:flex;align-items:center;padding:env(safe-area-inset-top) 16px 0;background:linear-gradient(#000b,transparent);pointer-events:none}
.kpt-shorts-topbar>*{pointer-events:auto}
.kpt-shorts-topbar__back{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);color:#fff;font-size:30px;line-height:1;text-decoration:none;transition:background .2s ease,transform .2s ease}
.kpt-shorts-topbar__back:hover{background:rgba(0,0,0,.7);transform:scale(1.05)}
.kpt-shorts-topbar__back:active{transform:scale(.95)}

/* ---------- Feed ---------- */
.kpt-shorts-feed{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.kpt-shorts-feed::-webkit-scrollbar{display:none}
.kpt-short-slide{position:relative;height:100dvh;min-height:100dvh;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;background:#000;isolation:isolate}
.kpt-short-slide__media{position:absolute;inset:0;z-index:-1;display:flex;align-items:center;justify-content:center;background:#050509}
.kpt-short-video,.kpt-short-slide__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.kpt-short-slide__thumb{z-index:0}
.kpt-short-video{z-index:1}
.kpt-short-slide.is-active .kpt-short-slide__thumb{opacity:0;transition:opacity .4s ease}

/* ---------- Mute button (same size/location as before, icon state fixed) ---------- */
.kpt-shorts-mute{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:4;display:inline-flex;align-items:center;justify-content:center;border:0;background:rgba(0,0,0,.5);color:#fff;border-radius:50%;width:42px;height:42px;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s ease,transform .15s ease}
.kpt-shorts-mute:hover{background:rgba(0,0,0,.75)}
.kpt-shorts-mute:active{transform:scale(.92)}
.kpt-shorts-mute svg{width:20px;height:20px}
.kpt-shorts-mute .kpt-shorts-ico-sound-on{display:none}
.kpt-shorts-mute.is-muted .kpt-shorts-ico-sound-on{display:block}
.kpt-shorts-mute.is-muted .kpt-shorts-ico-sound-off{display:none}

/* ---------- Action rail (Like / Comments / Share — modern SVG icons) ---------- */
.kpt-shorts-slide__actions{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(120px + env(safe-area-inset-bottom));z-index:4;display:flex;flex-direction:column;gap:18px}
.kpt-shorts-action{border:0;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:6px;text-shadow:0 2px 8px #000;transition:transform .15s ease,opacity .2s ease}
.kpt-shorts-action:hover{transform:scale(1.1)}
.kpt-shorts-action:active{transform:scale(.9)}
.kpt-shorts-action svg{width:30px;height:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.8));transition:fill .2s ease,stroke .2s ease}
.kpt-shorts-action span{font-size:12px;font-weight:600}
.kpt-shorts-action.is-liked{color:#ff3b5c}
.kpt-shorts-action.is-liked svg{fill:#ff3b5c;stroke:#ff3b5c;animation:kpt-shorts-pop .35s ease}
@keyframes kpt-shorts-pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- Overlay: title / description / CTA ---------- */
.kpt-shorts-slide__overlay{position:absolute;left:max(16px,env(safe-area-inset-left));right:84px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:3;text-shadow:0 2px 8px #000}
.kpt-shorts-slide__title{font-size:20px;margin:0 0 8px}
.kpt-shorts-slide__desc{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpt-more-less.is-expanded .kpt-shorts-slide__desc{-webkit-line-clamp:unset}
.kpt-more-less button{background:none;border:0;color:#fff;text-decoration:underline;padding:4px 0;cursor:pointer}
.kpt-shorts-slide__cta{display:inline-block;margin-top:10px;color:#fff;background:#c9a84c;padding:8px 12px;border-radius:5px;text-decoration:none}

/* ---------- Comments: modern bottom-sheet panel ---------- */
.kpt-shorts-comments{position:absolute;z-index:10;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:68%;padding-bottom:max(12px,env(safe-area-inset-bottom));background:rgba(15,15,22,.97);border-top:1px solid rgba(255,255,255,.14);border-radius:20px 20px 0 0;backdrop-filter:blur(24px);box-shadow:0 -16px 60px rgba(0,0,0,.65);animation:kpt-shorts-sheet-up .28s cubic-bezier(.2,.8,.3,1)}
@keyframes kpt-shorts-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.kpt-shorts-comments__grabber{width:42px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);margin:8px auto 0;flex:0 0 auto}
.kpt-shorts-comments__count{color:rgba(255,255,255,.5);font-weight:500;font-size:12px;margin-left:4px}
@media (prefers-reduced-motion: reduce){.kpt-shorts-comments{animation:none}}
.kpt-shorts-comments[hidden]{display:none}
.kpt-shorts-comments__head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.kpt-shorts-comments__title{font-weight:700;font-size:15px}
.kpt-shorts-comments__head [data-comments-close]{background:none;color:#fff;border:0;font-size:26px;line-height:1;cursor:pointer;padding:2px 8px}
.kpt-shorts-comments__list{flex:1;overflow-y:auto;padding:10px 18px;-webkit-overflow-scrolling:touch}
.kpt-shorts-comment{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.kpt-shorts-comment__author{font-weight:700;font-size:13px;color:#c9a84c}
.kpt-shorts-comment__body{margin:4px 0 2px;font-size:14px;line-height:1.45;word-wrap:break-word}
.kpt-shorts-comment__date{font-size:11px;color:rgba(255,255,255,.5)}
.kpt-shorts-comments__empty,.kpt-shorts-comments__loading{color:rgba(255,255,255,.6);font-size:14px;padding:14px 0;text-align:center}
.kpt-shorts-comments__form{display:flex;gap:8px;margin:8px 18px 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.kpt-shorts-comments__form input{flex:1;min-width:0;padding:12px 14px;border-radius:22px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:14px;outline:none}
.kpt-shorts-comments__form input:focus{border-color:#c9a84c}
.kpt-shorts-comments__form button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border:0;border-radius:22px;background:linear-gradient(135deg,#d8b45c,#c9a84c);color:#0a0a0f;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(201,168,76,.3);transition:opacity .2s ease,transform .15s ease,box-shadow .2s ease}
.kpt-shorts-comments__form button svg{display:block}
.kpt-shorts-comments__form button:hover{opacity:.95;box-shadow:0 6px 18px rgba(201,168,76,.45)}
.kpt-shorts-comments__form button:active{transform:scale(.95)}
.kpt-shorts-comments__form button.is-sending svg{animation:kpt-shorts-send-spin .8s linear infinite}
@keyframes kpt-shorts-send-spin{to{transform:rotate(360deg)}}
.kpt-shorts-comments__form button:disabled{opacity:.55;cursor:default;box-shadow:none}

/* ---------- Toast ("Link copied", moderation notice) ---------- */
.kpt-shorts-toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:60;padding:10px 18px;border-radius:22px;background:rgba(20,20,28,.92);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.kpt-shorts-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- Errors / empty ---------- */
.kpt-error-state{color:#fff;text-align:center}
.kpt-shorts-empty{height:100dvh;display:grid;place-items:center}

/* ---------- Focus visibility (accessibility) ---------- */
.kpt-shorts-topbar__back:focus-visible,.kpt-shorts-action:focus-visible,.kpt-shorts-mute:focus-visible,.kpt-shorts-comments button:focus-visible,.kpt-shorts-comments input:focus-visible{outline:2px solid #c9a84c;outline-offset:3px}

/* ---------- Desktop: centered vertical viewer ---------- */
@media (min-width:768px){
    .kpt-short-slide__media{inset:0 25%}
    .kpt-shorts-slide__overlay{left:calc(25% + 16px);right:calc(25% + 84px)}
    .kpt-shorts-slide__actions{right:calc(25% - 66px);bottom:50%;transform:translateY(50%)}
    .kpt-shorts-mute{right:calc(25% + 16px)}
    .kpt-shorts-comments{left:25%;right:25%;border-radius:16px 16px 0 0}
    .kpt-shorts-topbar__back{left:calc(25% + 0px)}
    .kpt-shorts-topbar{padding-left:calc(25% + 0px)}
}
@media (prefers-reduced-motion: reduce){
    .kpt-shorts-action,.kpt-shorts-mute,.kpt-shorts-topbar__back{transition:none}
    .kpt-shorts-action.is-liked svg{animation:none}
}