/*
Theme Name: KissKH2026
Theme URI: https://kisskh.hk/
Author: KissKH2026
Author URI: https://kisskh.hk/
Description: Custom WordPress theme for the KissKH2026 entertainment site.
Version: 24.8.1
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: kisskh2026
*/


/* UX polish: request, explore, favorites, logo and lightweight featured hero. */
.request-page form{max-width:680px;background:#171717;border:1px solid #2b2b2b;border-radius:8px;padding:28px;display:grid;gap:16px}.request-page label{display:grid;gap:7px;color:#aaa;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.request-page input,.request-page textarea{width:100%;box-sizing:border-box;background:#0d0d0d;color:#f5f5f5;border:1px solid #333;border-radius:4px;padding:12px;font:inherit;letter-spacing:normal;text-transform:none;outline:none}.request-page input:focus,.request-page textarea:focus{border-color:#f4c84a;box-shadow:0 0 0 2px #f4c84a22}.request-page form p{color:#f4c84a;margin:0;font-size:13px}.explore-page .page-title{padding:30px 0 20px;margin-bottom:18px}.explore-page .page-title h1,.favorites-page .page-title h1{font-size:34px;line-height:1.1;margin:6px 0}.explore-page .page-title p,.favorites-page .page-title p{font-size:13px}.explore-filters{border-radius:8px;border:1px solid #252525;box-shadow:0 12px 30px #0002}.favorites-page .page-title{padding:30px 0 20px;margin-bottom:24px}.favorites-page .drama-grid{min-height:260px}.hero{transition:background-image .5s ease}.hero:after{content:"";position:absolute;right:28px;bottom:24px;width:8px;height:8px;border-radius:50%;background:#f4c84a;box-shadow:16px 0 #ffffff55,32px 0 #ffffff55;opacity:.9}.hero{position:relative}@media(max-width:720px){.request-page form{padding:18px}.explore-filters{grid-template-columns:1fr 1fr}.explore-filters label:first-child{grid-column:1/-1}.header-actions{gap:8px}.sign-in{font-size:11px}}

.auth-links{display:flex;align-items:center;gap:12px}.auth-links a{color:var(--muted);font-size:13px;text-decoration:none}.auth-links a:hover{color:var(--accent)}.auth-links .sign-up{border:1px solid var(--accent);padding:7px 10px;border-radius:3px;color:var(--accent)}.seo-home-content{max-width:900px;margin:0 auto;padding:30px 28px 60px;color:#ddd;background:#101010}.seo-home-content h1,.seo-home-content h2{color:#fff}.seo-home-content p{color:#aaa;line-height:1.7}.seo-home-content a{color:#f4c84a}

.home-intro{max-width:900px;margin:0 auto 34px;padding:26px 28px;background:#151515;border:1px solid #292929;border-radius:8px}.home-intro h2{font-family:Playfair Display,serif;font-size:28px;margin:0 0 10px;color:#fff}.home-intro p{margin:0;color:#aaa;line-height:1.75;font-size:14px}.auth-links{display:flex;align-items:center;gap:12px}.auth-links a{color:var(--muted);font-size:13px;text-decoration:none}.auth-links a:hover{color:var(--accent)}.auth-links .sign-up{border:1px solid var(--accent);padding:7px 10px;border-radius:3px;color:var(--accent)}

.footer-description{max-width:520px;color:#aaa!important;line-height:1.7;font-size:13px;margin:0}.pwa-install-card{position:fixed;right:22px;bottom:22px;z-index:100;background:#171717;color:#f4f4f4;border:1px solid #3a3a3a;border-radius:10px;box-shadow:0 16px 45px #000b;padding:16px 42px 16px 18px;display:flex;flex-direction:column;gap:5px;max-width:300px}.pwa-install-card strong{color:#f4c84a;font-size:15px}.pwa-install-card span{color:#aaa;font-size:12px;line-height:1.45}.pwa-install-card button{background:#f4c84a;border:0;border-radius:4px;color:#171717;font-weight:700;padding:9px 12px;margin-top:7px;cursor:pointer}.pwa-install-card button[aria-label=Close]{position:absolute;right:8px;top:7px;background:transparent;color:#aaa;padding:2px 6px;margin:0;font-size:18px}@media(max-width:600px){.pwa-install-card{left:14px;right:14px;bottom:14px;max-width:none}.footer-description{font-size:12px}}

/* Keep the public footer clean while preserving the install prompt. */
.footer-description{display:none!important}.hero-content>p{max-width:620px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* Avoid reserving a large empty intrinsic-height block at the end of the homepage. */
.home-content{padding-bottom:0!important;margin-bottom:0!important}
.home-content .kisskh-last-home-rail{margin-bottom:18px!important}
.kisskh-home-guide{margin-bottom:0!important}
.kisskh-home-route .site-footer{padding-top:18px!important}
.hero{contain:layout paint}

/* The app bundle uses a full-screen search overlay; keep every result a real, clickable card. */
.search-overlay{z-index:1000;overflow-y:auto;pointer-events:auto}
.search-overlay .search-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important;gap:18px!important;align-items:start;padding:8px 4px 26px}
.search-overlay .kisskh-search-card{display:block;min-width:0;color:#f4f4f4;text-decoration:none!important;cursor:pointer;pointer-events:auto;border-radius:5px;overflow:hidden;background:#161616;transition:transform .18s ease,box-shadow .18s ease}
.search-overlay .kisskh-search-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #0009;color:#fff}
.kisskh-search-poster{position:relative;aspect-ratio:2/3;background:#222;overflow:hidden}
.kisskh-search-poster img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.kisskh-search-poster>span:not(.kisskh-search-badge){display:grid;place-items:center;width:100%;height:100%;color:#888;font-size:12px}
.kisskh-search-badge{position:absolute;left:7px;bottom:7px;padding:4px 7px;border-radius:3px;background:#f4c84a;color:#151515;font-size:10px;font-weight:700}
.kisskh-search-info{display:grid;gap:5px;padding:9px 8px 10px}
.kisskh-search-info strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:12px;line-height:1.35;color:#f4f4f4}
.kisskh-search-info>span{color:#aaa;font-size:10px}
.kisskh-search-empty{grid-column:1/-1;padding:20px;color:#bbb}
.search-overlay .filter-tabs button.kisskh-filter-active{background:#f4c84a!important;color:#151515!important;border-color:#f4c84a!important}

/* Responsive, server-rendered editorial section placed beneath Top Series. */
.kisskh-home-guide{box-sizing:border-box;width:calc(100% - 56px);max-width:1180px;margin:24px auto 0;padding:clamp(20px,2.5vw,30px);background:#141414;border:1px solid #292929;border-radius:8px}
.kisskh-home-guide h2{margin:0 0 10px;color:#fff;font-family:Playfair Display,serif;font-size:clamp(21px,2vw,26px);line-height:1.25}
.kisskh-home-guide p{margin:0;max-width:900px;color:#aaa;font-size:clamp(13px,1.1vw,15px);line-height:1.75}

/* Request form: explicit scope and specificity avoid app-bundle reset collisions. */
body .request-page form{display:grid;gap:16px;max-width:680px;margin:0 auto 32px;padding:clamp(18px,4vw,30px);background:#171717;border:1px solid #303030;border-radius:9px}
body .request-page form label{display:grid;gap:7px;color:#ccc;font-size:13px;letter-spacing:normal;text-transform:none}
body .request-page form input,body .request-page form textarea,body .request-page form select{display:block;width:100%;min-height:44px;box-sizing:border-box;background:#0d0d0d;color:#f5f5f5;border:1px solid #393939;border-radius:5px;padding:11px 13px;font:inherit;letter-spacing:normal;text-transform:none;outline:none}
body .request-page form textarea{min-height:130px;resize:vertical}
body .request-page form input:focus,body .request-page form textarea:focus,body .request-page form select:focus{border-color:#f4c84a;box-shadow:0 0 0 2px #f4c84a22}
body .request-page form button[type=submit],body .request-page form input[type=submit]{min-height:44px;padding:11px 18px;background:#f4c84a;color:#151515;border:0;border-radius:5px;font-weight:700;cursor:pointer}
body .request-page form button[type=submit]:hover,body .request-page form input[type=submit]:hover{filter:brightness(1.08)}
body .request-page form p{margin:0;color:#ddd;line-height:1.5}

/* Episode player server selectors. */
.kisskh-server-controls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.kisskh-server-button{padding:8px 13px;background:#202020;color:#eee;border:1px solid #383838;border-radius:5px;font:inherit;font-size:12px;cursor:pointer}
.kisskh-server-button[aria-pressed=true]{background:#f4c84a;color:#171717;border-color:#f4c84a}

/* Native install prompt: desktop card and mobile-safe placement above bottom navigation. */
.pwa-install-card{position:fixed;right:16px;bottom:16px;z-index:10000;display:flex;flex-direction:row;align-items:center;gap:9px;width:min(310px,calc(100vw - 32px));max-width:310px;box-sizing:border-box;padding:11px 36px 11px 11px;background:#171717;color:#f4f4f4;border:1px solid #393939;border-radius:10px;box-shadow:0 12px 32px #000a}
.pwa-install-copy{display:grid;gap:3px;min-width:0;flex:1}
.pwa-install-icon{display:block;width:36px;height:36px;flex:0 0 36px;object-fit:cover;border-radius:8px}
.pwa-install-copy strong{color:#fff;font-size:12px}
.pwa-install-copy span{color:#aaa;font-size:10px;line-height:1.3}
.pwa-install-card .pwa-install-action{flex:0 0 auto;background:#f4c84a;border:0;border-radius:5px;color:#151515;font-weight:700;padding:8px 9px;margin:0;font-size:10px;cursor:pointer}
.pwa-install-card .pwa-install-close{position:absolute;right:7px;top:7px;width:26px;height:26px;display:grid;place-items:center;background:transparent;border:0;color:#aaa;padding:0;margin:0;font-size:20px;line-height:1;cursor:pointer}
@media(max-width:700px){.search-overlay .search-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;gap:12px!important}.kisskh-home-guide{width:auto;margin:18px 14px 0;padding:19px}.kisskh-home-guide h2{font-size:20px}.kisskh-home-guide p{font-size:13px;line-height:1.7}.pwa-install-card{left:auto;right:14px;bottom:calc(74px + env(safe-area-inset-bottom));width:min(310px,calc(100vw - 28px));max-width:310px;gap:7px;padding:10px 33px 10px 10px}.pwa-install-card .pwa-install-action{padding:7px 8px;font-size:10px}}

/* Keep the pages and navigation; hide only their oversized intro heading blocks. */
.favorites-page>.page-title,.request-page>.page-title,.faq-page>.page-title{display:none!important}

/* Clean homepage rails with visible, accessible carousel arrows instead of scrollbar tracks. */
.home-content .cards-rail{scrollbar-width:none!important;-ms-overflow-style:none!important;scroll-behavior:smooth!important;-webkit-overflow-scrolling:touch;padding-bottom:4px!important}
.home-content .cards-rail::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.home-content .kisskh-carousel-section{position:relative}
.home-content .kisskh-carousel-arrows{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 8px;pointer-events:none;transform:translateY(-50%)}
.home-content .kisskh-carousel-arrows[hidden]{display:none!important}
.home-content .kisskh-carousel-arrow{width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;margin:0;padding:0;border:1px solid #555;border-radius:50%;background:rgba(12,12,12,.88);color:#f4c84a;box-shadow:0 4px 16px #0008;backdrop-filter:blur(6px);cursor:pointer;pointer-events:auto;transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,opacity .16s ease}
.home-content .kisskh-carousel-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-content .kisskh-carousel-arrow:hover:not(:disabled){transform:scale(1.06);border-color:#f4c84a;background:#f4c84a;color:#141414}
.home-content .kisskh-carousel-arrow:disabled{opacity:.25;cursor:default}
.home-content .kisskh-carousel-arrow:focus-visible{outline:2px solid #f4c84a;outline-offset:3px}
@media(max-width:700px){.home-content .kisskh-carousel-arrows{padding:0 4px}.home-content .kisskh-carousel-arrow{width:34px;height:34px;flex-basis:34px}.home-content .kisskh-carousel-arrow svg{width:17px;height:17px}}

/* JS-failure recovery view: hidden automatically once React mounts into #root. */
.kisskh-fallback{box-sizing:border-box;width:calc(100% - 56px);max-width:1180px;margin:24px auto 0;padding:28px;background:#141414;border:1px solid #292929;border-radius:8px;color:#f4f4f4}
#root:not(:empty)+.kisskh-fallback{display:none}
.kisskh-fallback-head{margin-bottom:18px}.kisskh-fallback-eyebrow{display:block;color:#f4c84a;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.kisskh-fallback h1{margin:7px 0 8px;font-family:Playfair Display,serif;font-size:clamp(24px,3vw,36px);line-height:1.15}.kisskh-fallback p{margin:0;color:#aaa;line-height:1.6}.kisskh-fallback-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.kisskh-fallback-card{display:grid;gap:7px;min-height:70px;padding:14px;background:#1c1c1c;border:1px solid #333;border-radius:6px;color:#f4f4f4;text-decoration:none}.kisskh-fallback-card:hover{border-color:#f4c84a;background:#222}.kisskh-fallback-card strong{font-size:14px;line-height:1.35}.kisskh-fallback-card span{color:#f4c84a;font-size:11px}.kisskh-fallback-empty{color:#aaa}
@media(max-width:700px){.kisskh-fallback{width:auto;margin:18px 14px 0;padding:19px}.kisskh-fallback-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.kisskh-fallback-card{padding:11px;min-height:62px}}