/*
* SeihaMotion - custom layer
* Fonts: Play (English) + Google Sans, with Khmer web font fallback (auto by script)
* 8px rounded corners on posters, slider, sidebar, related, player
* TOP IMDb thumbnails in 5:7 poster ratio
* Server name labels hidden
* Loaded LAST so it overrides the base theme.
*/

:root{
    /* Latin -> Play ; Khmer codepoints fall through to the Khmer fonts automatically */
    --seiha-font: 'Play','Google Sans','Product Sans','Kantumruy Pro','Noto Sans Khmer',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Typography (icons untouched) ---- */
html, body{ font-family: var(--seiha-font) !important; }
button, input, select, textarea, optgroup,
.contact .wrapper fieldset textarea,
.report_modal .box .form form fieldset textarea{
    font-family: var(--seiha-font) !important;
}

/* Header menu: Play for English, Khmer font for Khmer (single stack, auto-split by glyph) */
.head-main-nav #main_header a,
.head-main-nav .main-header a,
.head-main-nav ul li a,
.menuresp .menu a,
.menuresp .menu li a{
    font-family: 'Play','Google Sans','Kantumruy Pro','Noto Sans Khmer',sans-serif !important;
}

/* Header menu Font Awesome icons (added via each menu item's CSS Classes,
   e.g. 'fas fa-video' / 'fad fa-tv'). Styled to match the clean look. */
.head-main-nav ul.main-header li::before,
.head-main-nav ul.main-header li > a > i,
.head-main-nav ul.main-header li > a > span[class*="fa-"]{
    margin-right: 8px;
    font-size: 17px;
    line-height: 1;
    vertical-align: -2px;
    color: #b3b3b3;                 /* muted grey like the screenshot */
    --fa-primary-color: #e6e6e6;    /* duotone (fad) layers */
    --fa-secondary-color: #8a8a8a;
    --fa-secondary-opacity: 1;
    transition: color .2s ease;
}
/* keep the label in Play/Khmer, never the icon font */
.head-main-nav ul.main-header li > a{ font-family: 'Play','Google Sans','Kantumruy Pro','Noto Sans Khmer',sans-serif !important; }
.head-main-nav ul.main-header li:hover::before,
.head-main-nav ul.main-header li:hover > a > i,
.head-main-nav ul.main-header li:hover > a > span[class*="fa-"]{
    color: #ffffff;
    --fa-primary-color: #ffffff;
    --fa-secondary-color: #ffffff;
}

/* ---- 8px rounded corners ---- */
/* Main slider + module sliders (item_b landscape images) */
.slider .item .image,
.slider .item .image img,
.item .image,
.item .image img,
.dooplay-main-slier .item .image,
.dooplay-main-slier .item .image img,
/* Sidebar widget items */
.w_item_b .image,
.w_item_b .image img,
aside .image img,
#sidebar .image img,
.widget .image img,
/* Grid posters / carousels */
.item .poster,
.item .poster img,
.items.featured .item .poster,
.items.featured .item .poster img,
.owl-carousel .poster,
.owl-carousel .poster img,
/* Related / Similar titles */
#single .content .srelacionados article,
#single .content .srelacionados article img,
.srelacionados article,
.srelacionados article img,
/* Single page posters */
#single .sheader .poster,
#single .sheader .poster img,
.dtsingle .poster,
.dtsingle .poster img{
    border-radius: 8px !important;
    overflow: hidden;
}

/* keep hover play overlay clipped */
.item .poster .see,
.items.featured .item .poster .see{ border-radius: 8px; }

/* ---- Player container rounded 8px ---- */
.dooplay_player .play,
.dooplay_player .play .pframe,
.dooplay_player .play iframe,
.dooplay_player #dooplay_player_response,
.dooplay_player #dooplay_player_response iframe{
    border-radius: 8px !important;
    overflow: hidden;
}

/* ---- TOP IMDb thumbnails in 5:7 poster ratio (50 x 70) ---- */
.top-imdb-list .top-imdb-item{ min-height: 90px; }
.top-imdb-list .top-imdb-item .image{
    width: 50px !important;
    height: 70px !important;   /* 50:70 = 5:7 */
}
.top-imdb-list .top-imdb-item .image .poster,
.top-imdb-list .top-imdb-item .image .poster a,
.top-imdb-list .top-imdb-item .image .poster img{
    width: 100% !important;
    height: 100% !important;
}
.top-imdb-list .top-imdb-item .image .poster img{
    object-fit: cover;
    border-radius: 6px;
}

/* ---- Hide server name labels ---- */
.dooplay_player .server,
span.server,
.server{ display: none !important; }

/* ===== Synopsis: more breathing room + gallery spacing & rounding ===== */
#single #info.sbox{ padding-bottom: 8px; }
#single .wp-content,
#single .wp-content p{ line-height: 1.75; }
#single .wp-content p{ margin-bottom: 14px; }
#single #dt_galery,
#single .galeria{ margin-top: 20px; margin-bottom: 12px; }
/* a little more gap between the gallery thumbnails */
.galeria .g-item{ padding-left: 14px; padding-right: 14px; }
/* round the gallery thumbnails (the on-screen carousel) */
.galeria .g-item,
.galeria .g-item a,
.galeria .g-item img,
#dt_galery .g-item img{ border-radius: 8px !important; overflow: hidden; }

/* ===== Slider container + images rounded 8px ===== */
.slider,
.slider .item,
.slider .item .image,
.slider .item .image img{ border-radius: 8px !important; }

/* ===== Scrollbar -> blue (#408BEA) ===== */
html{ scrollbar-width: thin; scrollbar-color: #408BEA rgba(0,0,0,.12); }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: rgba(0,0,0,.08); }
::-webkit-scrollbar-thumb{ background: #408BEA; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: #2f6fce; }
/* theme's custom (mCustomScrollbar) thumb -> blue */
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{ background-color: #408BEA !important; }

/* ===== TVPop player: kill the pure-black band around it (dark-mode navy) ===== */
.tvpop-top{ background: transparent !important; }
#single .sheader .tvpop-top{ margin-bottom: 12px; }

/* ===== Titles & paragraphs -> Play + Google Sans (smooth, Khmer-aware) ===== */
#single .data h1,
#single .sheader .data h1,
#single .wp-content,
#single .wp-content p,
.sbox h2,
.sbox h3,
h1.entry-title, h2.entry-title,
.data .title, .title{
    font-family: 'Play','Google Sans','Kantumruy Pro','Noto Sans Khmer',sans-serif !important;
}

/* ===== Poster ribbon + quality badge (movies & TV shows) ===== */
.item .poster{ position: relative; overflow: hidden; }

/* Diagonal corner ribbon (top-left), like the "COMPLETED" tag */
.item .poster .dt-ribbon{
    position: absolute; top: 11px; left: -46px; z-index: 4;
    width: 130px;                         /* fixed width -> text always centers */
    transform: rotate(-45deg);            /* ribbon diagonal */
    transform-origin: center;
    text-align: center;
    padding: 3px 0; line-height: 1.1;
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    /* default gradient: red into dark */
    background: linear-gradient(20.08deg, #ff5b5b 0%, #5a0d0d 100%);
}
.item .poster .dt-ribbon .dt-ribbon-txt{
    color: #fff; font-size: clamp(8px, 0.9vw, 10px); font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    font-family: 'Play','Google Sans','Kantumruy Pro','Noto Sans Khmer',sans-serif;
}
/* Per-status gradients (color -> dark) */
.item .poster .dt-ribbon-completed{ background: linear-gradient(20.08deg, #ff5b5b 0%, #5a0d0d 100%); }  /* red (lighter) -> dark */
.item .poster .dt-ribbon-ongoing{   background: linear-gradient(20.08deg, #4f9dff 0%, #0a2a4a 100%); }  /* blue (lighter) -> dark */
.item .poster .dt-ribbon-new{        background: linear-gradient(20.08deg, #4ade80 0%, #0c3d1e 100%); }  /* green (lighter) -> dark */
.item .poster .dt-ribbon-cc{         background: linear-gradient(20.08deg, #ffb74d 0%, #5a3500 100%); }  /* CC: amber -> dark */
/* aliases so other words also get a color */
.item .poster .dt-ribbon-finished{  background: linear-gradient(20.08deg, #ff5b5b 0%, #5a0d0d 100%); }  /* red -> dark */
.item .poster .dt-ribbon-airing{    background: linear-gradient(20.08deg, #4f9dff 0%, #0a2a4a 100%); }  /* blue -> dark */
.item .poster .dt-ribbon-subtitle{  background: linear-gradient(20.08deg, #ffb74d 0%, #5a3500 100%); }  /* CC alias -> amber */
.item .poster .dt-ribbon-hd{         background: linear-gradient(20.08deg, #2d7dff 0%, #07203f 100%); }   /* blue -> dark */

/* Quality / type badge (top-right), like the orange "Drama" tag */
.item .poster .mepo{ position: absolute; top: 10px; right: 0; left: auto; z-index: 6; }
.item .poster .mepo .quality{
    display: inline-block; background: #f5a623; color: #1a1a1a;
    font-size: 11px; font-weight: 800; letter-spacing: .3px;
    padding: 4px 10px; border-radius: 4px 0 0 4px;
    text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.4);
    font-family: 'Play','Google Sans','Kantumruy Pro','Noto Sans Khmer',sans-serif;
}

/* ===== Tighter single-page header padding (was 25px) ===== */
#single .sheader{ padding: 6px !important; }

/* ===== Footer: less empty space (was margin-bottom 90px) ===== */
footer.main{ margin-bottom: 18px !important; }
footer.main .fcopy, footer.main .fbox{ padding-top: 10px; padding-bottom: 10px; }

/* ===== Featured tag -> diagonal ribbon (matches the others, 20.08° gradient) ===== */
.items.featured .item .poster{ position: relative; overflow: hidden; }
.items.featured .item .poster .featu{
    position: absolute; top: 14px; left: -46px; right: auto; z-index: 5;
    width: 130px; padding: 3px 0; line-height: 1.1;
    transform: rotate(-45deg); transform-origin: center;
    text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .4px;
    color: #fff; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.6);
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    background: linear-gradient(20.08deg, #2ecc71 0%, #0b3d22 100%); /* green -> dark */
    font-family: 'Play','Google Sans','Kantumruy Pro','Noto Sans Khmer',sans-serif;
}

/* ===== JW / DooPlay player container styled like TVPop wrapper ===== */
.dooplay_player .play{
    --bg-dark: #000000;
    --bg-darker: #000000;
    --btn-bg: #0d0d0d;
    --btn-hover: #1a1a1a;
    --accent: #2d7dff;
    --text: #fff;
    background-color: var(--bg-dark) !important;
    color: var(--text);
    border-radius: 8px !important;
    padding: 6px !important;
    overflow: hidden;
    box-sizing: border-box;
}
/* keep the video/iframe rounded to the inner edge */
.dooplay_player .play .pframe,
.dooplay_player .play iframe,
.dooplay_player .play #dooplay_player_response,
.dooplay_player .play #dooplay_player_response iframe{
    border-radius: 6px !important;
    overflow: hidden;
}