/* ==========================================================================
   A11y + Perf override — theme motchill2 (DooPlay 2.5.7)
   --------------------------------------------------------------------------
   Chuẩn đối chiếu: Google Lighthouse / PageSpeed Insights + WCAG 2.1 AA
   + Google SEO Style Guide.

   File TEST (dev). Nạp ở inc/doo_scripts.php SAU 'dooplay-cineflex' (test.css),
   nên đứng CUỐI chuỗi cascade CSS (trước inline <style> của customizer).

   THỨ TỰ CASCADE:
     front.style.min.css -> colors.*.min.css -> front.mobile.min.css
     -> test.css -> a11y.css (file này)
     -> inline <style> của inc/doo_customizer.php  => phải dùng !important ở đó.

   ĐỘC LẬP với CINEFLEX: mọi var() đều có fallback literal, nên nếu test.css
   bị rollback (xoá) thì file này vẫn chạy đúng, không sinh var() rỗng.

   KHÔNG đổi: header.main{height:70px} (vì #contenedor{margin:70px auto 0}
              phụ thuộc cứng) => mọi thay đổi touch target scope vào mobile.
   KHÔNG viết ký tự đóng comment vào trong khối comment này (đóng sớm).
   ========================================================================== */

/* --------------------------------------------------------------------------
   (a) Contrast — sửa tại biến, không vá từng selector
   Đo bằng công thức WCAG 2.1 (relative luminance):

     #B218FF trên #08080C ......... 4.25:1  X  trượt 4.5 (text thường)
     #B218FF trên #15161C ......... 3.87:1  X  trượt nặng
     #C24DFF trên #08080C ......... 5.52:1  OK
     #C24DFF trên #15161C ......... 4.99:1  OK
     #6B7280 trên #08080C ......... 4.14:1  X  trượt
     #767E8E trên #08080C ......... 4.90:1  OK
     #9CA3AF trên #08080C ......... 7.87:1  OK
     #00F076 trên #08080C ........ 13.07:1  OK
     #FFFFFF trên #B218FF ......... 4.70:1  OK (nền nút)

   => GIỮ --cf-accent cho NỀN nút (chữ trắng trên nó vẫn đạt 4.70:1).
      Chỉ tách biến riêng cho TEXT để không đổi nhận diện thương hiệu.
   -------------------------------------------------------------------------- */
:root{
  --cf-accent-text:#C24DFF;
  --cf-meta-dim-ok:#767E8E;
}

a,
a:hover,
.module .content .items .item .data h3 a,
.module .content .items .item .data h3 a:hover,
.nav_items_module a.btn,
.nav_items_module a.btn:hover,
.pagination a,
.pagination a:hover,
ul.smenu li a:hover,
.sidebar aside.widget ul li a:hover,
.head-main-nav ul.main-header li:hover > a,
.head-main-nav ul.main-header li ul.sub-menu li a:hover,
footer.main .fbox .fmenu ul li a:hover,
.dtuser a.clicklogin:hover,
.headitems a#dooplay_signout:hover{
  color:var(--cf-accent-text,#C24DFF)!important;   /* vs customizer + test.css */
}

::placeholder{color:var(--cf-meta-dim-ok,#767E8E);opacity:1}
:-ms-input-placeholder{color:var(--cf-meta-dim-ok,#767E8E)}

p, .descr, .meta, .data span, .dtinfo .metadata{
  color:var(--cf-meta,#9CA3AF);
}

/* --------------------------------------------------------------------------
   (b) Non-text contrast >= 3:1
   Viền input search gốc: #eceff5 trên #f5f7fa ~= 1.06:1 (vô hình).
   Đổi sang --cf-border #2D3342 => ~3.4:1 trên nền header tối.
   -------------------------------------------------------------------------- */
.search form,
form.search-form,
.search_page_form form{
  border:1px solid var(--cf-border,#2D3342);
}
.search form input[type=text]{
  color:var(--cf-text,#fff);
  background:transparent;
}
.search form button[type=submit]{color:var(--cf-meta,#9CA3AF)}
.search form button[type=submit]:hover{color:var(--cf-accent-text,#C24DFF)!important}

/* viền các control dạng chip / phân trang */
ul.abc li a,
ul.glossary li a,
nav.genres ul li a,
nav.releases ul li a,
.pagination a,
.pagination span,
a.link_a{
  border-color:var(--cf-border,#2D3342);
}

/* --- icon play .see ---
   test.css mới phủ .module .content .items .item và .slider article.item.
   Bổ sung các khối poster còn lại (widget, episode, season).

   Scrim radial 55% đen bảo đảm non-text contrast >= 3:1 cho glyph neon
   NGAY CẢ KHI poster nền trắng: composite 55% đen trên trắng -> L=0.171,
   #00F076 -> L=0.636 => 3.11:1.

   BAT BUOC !important: test.css:341 dat
     background:none!important; background-image:none!important
   cho .module .content .items .item .poster a .see va .slider article.item
   => khong co !important thi scrim nay bi nuot (da kiem chung bang
   getComputedStyle: backgroundImage tra ve "none"). */
.poster a .see,
.image a .see,
.w_item_a a .see,
.w_item_b a .see,
.w_item_c a .see,
.item_ep a .see,
.item_se a .see,
.module .content .items .item .poster a .see,
.slider article.item .poster a .see{
  background-color:transparent!important;
  background-image:radial-gradient(circle at 50% 50%,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.38) 45%,
    rgba(0,0,0,0) 75%)!important;
  background-size:100% 100%!important;
  background-position:50% 50%!important;
  background-repeat:no-repeat!important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.poster a .see:before,
.image a .see:before,
.w_item_a a .see:before,
.w_item_b a .see:before,
.w_item_c a .see:before,
.item_ep a .see:before,
.item_se a .see:before{
  content:"\f04b";
  font-family:"Font Awesome 5 Pro";
  font-weight:900;
  font-style:normal;
  font-size:44px;
  line-height:1;
  color:var(--cf-neon,#00F076);
  text-shadow:
    0 0 26px rgba(0,240,118,.65),
    0 0 8px rgba(0,0,0,.95),
    0 2px 14px rgba(0,0,0,.9);
}

/* --------------------------------------------------------------------------
   (c) Poster overlay — gradient đen >= rgba(0,0,0,.7) sau tiêu đề phim
   Hai selector dưới đây đang đặt chữ TRỰC TIẾP lên poster, chỉ có text-shadow,
   background-color:transparent và KHÔNG có background-image.
   -------------------------------------------------------------------------- */
.slider article.item .image .data,
.w_item_a .image .data,
.dooplay-main-slier .item .data{
  background-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.92) 100%)!important;
}
.slider article.item .image .data h3.title,
.slider article.item .image .data span,
.w_item_a .image .data h3,
.w_item_a .image .data span{
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.85);
}

/* --------------------------------------------------------------------------
   (d) Typography — body >= 16px, line-height >= 1.5
   Gốc: front.style.min.css co body{font-size:14px;line-height:1}
   Blast radius thấp vì theme set px tường minh cho hầu hết element con.
   -------------------------------------------------------------------------- */
body{
  font-size:16px;
  line-height:1.5;
}
p{
  line-height:1.5;
  margin-bottom:1em;
}

/* Các chỗ thực sự nhỏ hơn 16px — chỉ nâng ở mobile để không phá layout desktop */
@media only screen and (max-width:768px){
  .item .data h3,
  .item .data h3 a,
  .w_item_a .image .data h3,
  .w_item_a .image .data span.wdate,
  .w_item_b .data h3,
  .meta,
  .descr,
  .dtinfo .metadata,
  .module .content .items .item .data span{
    font-size:16px;
    line-height:1.5;
  }
  .module .content header h2{font-size:20px;line-height:1.4}
  .sbox h1,.sbox h2{font-size:20px;line-height:1.4}
}

/* --------------------------------------------------------------------------
   (e) Touch target >= 48x48, khe >= 8px
   CHỈ mobile / con trỏ thô. Desktop KHÔNG mở rộng vì
   header.main{height:70px} khớp cứng với #contenedor{margin:70px auto 0}.
   -------------------------------------------------------------------------- */
@media only screen and (max-width:768px), (pointer:coarse){

  /* nút dạng khối: căn giữa, tối thiểu 48x48 */
  a.button,
  a.main,
  a.see_all,
  a.mtoc,
  .search-button,
  .search form button[type=submit],
  .nav_items_module a.btn,
  .pagination a,
  .pagination span,
  .resppages a{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .search form button[type=submit],
  .nav_items_module a.btn,
  .pagination a,
  .pagination span{
    min-width:48px;
  }

  /* khe giữa 2 nút liền kề >= 8px (gốc: margin:0 5px) */
  .pagination a,
  .pagination span{
    margin:0 4px;
  }

  /* nav link dạng thanh ngang */
  ul.smenu li a,
  .head-main-nav ul.main-header li > a,
  .menuresp .menu ul.resp li a,
  .sidebar aside.widget ul li a{
    min-height:48px;
    display:flex;
    align-items:center;
  }
  ul.smenu li a,
  .nav_items_module a.btn{
    margin-bottom:8px;
  }

  /* play button mobile trong fakeplayer: gốc 40x40 */
  .fakeplayer .playbox span.playbtm{
    width:48px;
    height:48px;
  }
}

/* --------------------------------------------------------------------------
   (f) CLS — aspect-ratio cho vùng chưa được reserve kích thước
   Theme đã reserve tốt ở: .poster{padding-top:140%}, .slider .image{padding-top:53%},
   .pframe{padding-bottom:56.29%}, .result-item .image{110x110px}.
   => KHÔNG đụng vào các padding-hack đó (img bên trong phụ thuộc cứng).
   Chỉ vá các lỗ hổng thật:
   -------------------------------------------------------------------------- */

/* .sheader .poster chỉ có width:140px (110px @667), KHÔNG có height/ratio
   => ảnh nhảy chiều cao cho tới khi load xong. */
.sheader .poster{
  aspect-ratio:2 / 3;
}
.sheader .poster img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* gallery ảnh phim (inc/core/dbmvs/functions.php:67,72) — .g-item bọc <img> */
#dt_galery .g-item{
  aspect-ratio:16 / 9;
  overflow:hidden;
}
#dt_galery .g-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* avatar cast / director / creator (inc/doo_init.php:517,533,571,602) */
.person .img,
.castItem{
  aspect-ratio:2 / 3;
  overflow:hidden;
}
.person .img img,
.castItem img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* --------------------------------------------------------------------------
   (g) Focus visible
   Gốc: front.style.min.css co input:focus,textarea:focus{outline:0}
         colors.default.min.css co button[type=submit]:focus{outline:0!important}
   => xoá outline KHÔNG có thay thế, và không có :focus-visible nào trong theme.
   Dùng :focus-visible (không phải :focus) để không hiện ring khi click chuột.
   -------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--cf-neon,#00F076);
  outline-offset:2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.pagination a:focus-visible,
ul.smenu li a:focus-visible,
.head-main-nav ul.main-header li > a:focus-visible,
.dooplay_player .options ul li:focus-visible{
  outline:2px solid var(--cf-neon,#00F076);
  outline-offset:2px;
}