/*
* 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; }