/* ---------------------------------------------------------------------------
   papalah dark theme (redesign-dark branch, 2026-11-14)
   A restyle on top of allcss.css: same markup, URLs, headings and ad slots.
   Loaded after allcss.css from config/page_top.php. Ad containers (.banner,
   iframes, ins) are deliberately left alone so every slot keeps its size.
   --------------------------------------------------------------------------- */

:root{
    --pp-bg:      #141414;   /* neutral near-black: page */
    --pp-card:    #1E1E1E;   /* cards, panels */
    --pp-raised:  #2A2A2A;   /* chips, inputs, buttons */
    --pp-line:    #3A3A3A;   /* hairlines, borders */
    --pp-text:    #EDEDED;
    --pp-muted:   #9E9E9E;
    --pp-pink:    #ED1B6B;   /* the brand, used sparingly */
    --pp-pink-hi: #FF3D86;
    --pp-radius:  12px;
    --pp-font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", "Helvetica Neue", Arial, sans-serif;
}

/* ---- base ---------------------------------------------------------------- */
html body{
    background-color: var(--pp-bg);
    color: var(--pp-text);
    font-family: var(--pp-font);
    -webkit-font-smoothing: antialiased;
}
html body a{ color: var(--pp-text); }
html body a:hover, html body a:focus{ color: var(--pp-pink-hi); text-decoration: none; }
html body :focus-visible{ outline: 2px solid var(--pp-pink); outline-offset: 2px; }

/* ---- header: keeps the brand pink bar, tidied ------------------------------- */
html body .navbar-default{
    background-color: var(--pp-pink);
    border: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 18px rgba(237, 27, 107, .18);
}
html body .navbar-default .navbar-nav > li > a{
    color: #fff;
    font-weight: 600;
    letter-spacing: .02em;
    transition: color .15s, box-shadow .15s;
}
html body .navbar-default .navbar-nav > li > a:hover,
html body .navbar-default .navbar-nav > li > a:focus,
html body .navbar-default .navbar-nav > .open > a,
html body .navbar-default .navbar-nav > .open > a:hover,
html body .navbar-default .navbar-nav > .open > a:focus{
    color: #fff;
    background-color: transparent;
}
/* hover/open underline: its own line, as wide as the text, sitting on the bar's bottom edge. The links are
   50px but the logo makes the bar 52px, hence bottom:-2px (desktop only; the phone menu is a stacked list) */
@media (min-width: 768px){
    html body .navbar-default .navbar-nav > li > a::after{
        content: "";
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: -2px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: #fff;
        opacity: 0;
        transition: opacity .15s;
    }
    html body .navbar-default .navbar-nav > li > a:hover::after,
    html body .navbar-default .navbar-nav > li > a:focus-visible::after,
    html body .navbar-default .navbar-nav > .open > a::after{ opacity: 1; }
}
html body .navbar-default .navbar-toggle{ border-color: rgba(255, 255, 255, .55); border-radius: 10px; }
html body .navbar-default .navbar-toggle:hover,
html body .navbar-default .navbar-toggle:focus{ background-color: rgba(255, 255, 255, .15); }
html body .navbar-default .navbar-toggle .icon-bar{ background-color: #fff; }
html body .navbar-default .navbar-collapse{ border-color: rgba(255, 255, 255, .25); }
html body .navbar .dropdown-menu{
    background-color: var(--pp-card);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}
html body .navbar .dropdown-menu > li > a{ color: var(--pp-text); }
html body .navbar .dropdown-menu > li > a:hover{ background-color: var(--pp-raised); color: var(--pp-pink-hi); }
html body .navbar .dropdown-menu .divider{ background-color: var(--pp-line); }
/* phone menu opened from the toggle: stays on pink, items white */
html body .navbar-default .navbar-nav .open .dropdown-menu > li > a{ color: #fff; }
html body .navbar-default .navbar-nav > li > a .caret{ border-top-color: #fff; border-bottom-color: #fff; }

/* search: a translucent white pill on the pink bar */
html body .search-outer .stylish-input-group{
    background-color: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    overflow: hidden;
}
html body .search-outer .txtSearch,
html body .search-outer .input-group-addon,
html body .search-outer .btnSearch{
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
}
html body .search-outer .txtSearch::placeholder{ color: rgba(255, 255, 255, .8); }
html body .search-outer .stylish-input-group:focus-within{ background-color: rgba(255, 255, 255, .26); border-color: #fff; }

/* ---- "tired of popups?" notice -------------------------------------------- */
html body .site-notice{
    margin-bottom: 20px;
    padding: 10px 16px;
    background-color: var(--pp-card);
    border: 1px solid var(--pp-line);
    border-left: 3px solid var(--pp-pink);
    border-radius: var(--pp-radius);
    font-size: 15px;
    line-height: 32px;
    text-align: center;
    color: var(--pp-text);
}

/* ---- buttons ------------------------------------------------------------- */
html body .btn-primary{
    background-color: var(--pp-pink);
    border-color: var(--pp-pink);
    border-radius: 999px;
    font-weight: 600;
    padding-left: 14px;
    padding-right: 14px;
}
html body .btn-primary:hover, html body .btn-primary:focus{ background-color: var(--pp-pink-hi); border-color: var(--pp-pink-hi); }
html body .btn-default{
    background-color: var(--pp-raised);
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    color: var(--pp-text);
}
html body .btn-default:hover, html body .btn-default:focus{ border-color: var(--pp-pink); color: var(--pp-text); background-color: var(--pp-raised); }

/* ---- page title + filters ------------------------------------------------- */
html body h1.page-title{
    color: var(--pp-text);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.3;
}
html body h1.page-title a{ color: inherit; }
html body .ddl-filter{
    background-color: var(--pp-raised);
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    color: var(--pp-text);
    box-shadow: none;
}
html body .ddl-filter:focus{ border-color: var(--pp-pink); }
html body .filter-text{ color: var(--pp-text); }

/* ---- tag chips -------------------------------------------------------------- */
html body .popular_keywords a{
    background-color: var(--pp-raised);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--pp-text);
    transition: color .15s, border-color .15s;
}
html body .popular_keywords a:hover,
html body .popular_keywords a:focus{ color: var(--pp-text); border-color: var(--pp-pink); }
/* phones: every tag stays visible and wraps (home-page tag links bring ~10k tag-page visits a day,
   a swipe row hid most of them); compact chips so the block is no taller than before */
@media (max-width: 767px){
    html body .popular_keywords{
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    html body .popular_keywords a{ margin: 0; padding: 3px 11px; font-size: 13px; line-height: 1.5; }
}

/* ---- video cards: the one bold element -------------------------------------- */
html body .listing .v-thumb-outer{
    background-color: var(--pp-card);
    border: 0;
    border-radius: var(--pp-radius);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--pp-line);
    transition: box-shadow .15s;
}
/* :hover on the box itself too: on admin cards the Share link nests an <a> inside the card link, the browser
   splits the card, and the thumbnail is no longer inside the hovered <a> */
html body .listing a:hover .v-thumb-outer,
html body .listing .v-thumb-outer:hover,
html body .listing a:focus-visible .v-thumb-outer{
    border: 0;
    opacity: 1;
    box-shadow: 0 0 0 2px var(--pp-pink);
}
html body .listing .v-thumb{ object-fit: cover; width: 100%; }
html body .listing a:focus-visible{ outline: 0; }
html body .listing .v-duration{
    background-color: rgba(0, 0, 0, .72);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    border-radius: 999px;
    padding: 1px 8px;
    right: 6px;
    bottom: 6px;
    letter-spacing: .02em;
}
html body .listing .v-name{
    color: var(--pp-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    height: auto;
    max-height: 2.9em;
}
/* Rows of cards are flex rows, so a row is only as tall as its tallest title: one line when every title fits,
   two when one wraps. Bootstrap 3's float grid needs equal heights or the cards snag and break the rows. */
html body .listing .row:has(> .item){ display: flex; flex-wrap: wrap; }
html body .listing .row:has(> .item)::before,
html body .listing .row:has(> .item)::after{ display: none; }
html body .listing .row:has(> .item) > .item{ float: none; display: flex; flex-direction: column; }
/* views / date line sits at the bottom of the card, level across the row even when a neighbour's title wraps */
html body .listing .row:has(> .item) > .item > .item-footer{ margin-top: auto; }
/* browsers without :has (pre-2022) keep the float grid, so they keep fixed two-line titles */
@supports not selector(:has(*)){
    html body .listing .v-name{ height: 2.9em; }
}
/* views / date under each card: a darker grey so the title stays the brightest line */
html body .listing .item-footer{ color: #8C8C8C; font-size: 12px; }
html body .listing .item-footer .fa{ color: #8C8C8C; }
html body .v-thumb-outer .btn-watch-later{
    background: rgba(20, 20, 20, .72);
    border-radius: 999px;
    color: var(--pp-text);
}
/* saved: same dark disc, the clock turns pink with a pink ring (no pink fill) */
html body .v-thumb-outer .btn-watch-later.saved,
html body .v-thumb-outer .btn-watch-later.saved:hover{
    background: rgba(20, 20, 20, .72);
    color: var(--pp-pink-hi);
    box-shadow: inset 0 0 0 2px var(--pp-pink);
}

/* ---- pagination ------------------------------------------------------------- */
html body .pagination > li > a,
html body .pagination > li > span{
    background-color: var(--pp-raised);
    border: 1px solid var(--pp-line);
    color: var(--pp-text);
    margin: 0 3px;
    border-radius: 10px !important;
}
html body .pagination > li > a:hover{ border-color: var(--pp-pink); color: var(--pp-text); background-color: var(--pp-raised); }
html body .pagination > .active > a,
html body .pagination > .active > a:hover,
html body .pagination > .active > span{
    background-color: var(--pp-pink);
    border-color: var(--pp-pink);
    color: #fff;
}
html body .no-record{ background-color: var(--pp-card); border-color: var(--pp-line); border-radius: var(--pp-radius); color: var(--pp-text); }

/* ---- video page ------------------------------------------------------------- */
html body .video-js{ border-radius: var(--pp-radius); overflow: hidden; }
html body .video-js .vjs-big-play-button{
    background-color: rgba(237, 27, 107, .9);
    border: 0;
}
html body .video-js .vjs-play-progress,
html body .video-js .vjs-volume-level{ background-color: var(--pp-pink); }
html body .v-skip-btn{
    background-color: var(--pp-raised);
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    color: var(--pp-text);
}
html body .v-skip-btn:hover{ border-color: var(--pp-pink); }
/* 稍後觀看 / 收藏: grey when off, solid pink with white text when on (v.php gives the "on" state btn-primary) */
html body .btn-watch-later.btn-default, html body .btn-favorite.btn-default{ background-color: var(--pp-raised); color: var(--pp-text); }
html body .btn-watch-later.btn-primary, html body .btn-favorite.btn-primary,
html body .btn-watch-later.btn-primary:hover, html body .btn-favorite.btn-primary:hover,
html body .btn-watch-later.btn-primary:focus, html body .btn-favorite.btn-primary:focus{
    background-color: var(--pp-pink);
    border-color: var(--pp-pink);
    color: #fff;
    box-shadow: 0 4px 14px rgba(237, 27, 107, .35);
}
html body .btn-watch-later.btn-primary .fa, html body .btn-favorite.btn-primary .fa{ color: #fff; }
/* the share/meta/buttons row under the player: allcss fixes it at 34px, so when the pill buttons wrap on a
   phone (admins also get a delete button) the wrapped line spilled over the "下一個影片" box below */
html body .v-label-outer{ height: auto; min-height: 34px; }
html body .v-footer .v-label{ margin-bottom: 6px; }
html body .v-footer .btn-delete{ padding: 6px 10px; border-radius: 999px; }
html body .nav-tabs{ border-bottom: 1px solid var(--pp-line); }
html body .nav-tabs > li > a{ border: 0; border-radius: 0; color: var(--pp-text); }
html body .nav-tabs > li > a .page-title{ color: inherit; }
html body .nav-tabs > li.active > a,
html body .nav-tabs > li.active > a:hover,
html body .nav-tabs > li.active > a:focus{
    background: transparent;
    border: 0;
    color: var(--pp-text);
    box-shadow: inset 0 -2px 0 var(--pp-pink);
}
html body .nav-tabs > li > a:hover{ background: transparent; color: var(--pp-text); }
html body .v-desc{
    background: var(--pp-card);
    border: 1px solid var(--pp-line);
    border-radius: var(--pp-radius);
}
html body .v-desc-title{ color: var(--pp-pink-hi); }
html body .v-desc p{ color: var(--pp-text); }
/* video tags: the same pills as the tag cloud */
html body .v-keywords{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; color: var(--pp-text); }
html body .v-keywords-label{ color: #8C8C8C; font-size: 13px; margin-right: 2px; }
html body .v-keywords a{
    display: inline-block;
    padding: 3px 12px;
    background-color: var(--pp-raised);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--pp-text);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color .15s;
}
html body .v-keywords a:hover, html body .v-keywords a:focus{ color: var(--pp-text); border-color: var(--pp-pink); }
html body .sponsor-outer-frame{ background-color: var(--pp-card); border-radius: var(--pp-radius); }

/* ---- footer ----------------------------------------------------------------- */
html body .footer_keywords b,
html body .footer_partners b{ color: var(--pp-text); font-weight: 700; }
html body .footer_keywords a,
html body .partners a{ color: var(--pp-text); }
html body .footer_keywords a:hover,
html body .partners a:hover{ color: var(--pp-pink-hi); }
html body div#footer{
    background-color: rgba(20, 20, 20, .96);
    border-top: 1px solid var(--pp-line);
    color: var(--pp-text);
}
html body div#footer a{ color: var(--pp-text); }

/* ---- watch-later button + modal ---------------------------------------------- */
html body .pop_bot a{ background-color: var(--pp-pink); box-shadow: 0 6px 18px rgba(237, 27, 107, .35); }
html body .modal-content{
    background-color: var(--pp-card);
    border: 1px solid var(--pp-line);
    border-radius: 16px;
    color: var(--pp-text);
}
html body .modal-header, html body .modal-footer{ border-color: var(--pp-line); }
html body .modal-header .close{ color: var(--pp-text); opacity: .7; text-shadow: none; }

/* ---- forms (login / register / contact) -------------------------------------- */
html body .form-control{
    background-color: var(--pp-raised);
    border: 1px solid var(--pp-line);
    border-radius: 10px;
    color: var(--pp-text);
    box-shadow: none;
}
html body .form-control:focus{ border-color: var(--pp-pink); box-shadow: 0 0 0 3px rgba(237, 27, 107, .2); }

@media (prefers-reduced-motion: reduce){
    html body *{ transition: none !important; }
}