/*!
Theme Name: WAPMobile
Theme URI: https://mmsbaba.com/
Author: WAPMobile
Author URI: https://mmsbaba.com/
Description: WAPMobile is a Video Streaming WordPress Theme
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: WAPMobile
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ===================== GLOBAL VARS ===================== */
:root{
  --box-w: 600px;   /* .box-layout max-width */
  --edge-pad: 10px; /* right inner padding for anchored elements */
}

/* ===================== UTILITIES ===================== */
* { padding:0; margin:0; box-sizing:border-box; transition:all .3s; }
.hidden { display:none !important; }

/* ===================== BASE ===================== */
body {
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size:16px; line-height:1.2; background:#101218; color:#ccc;
}
.box-layout { background-color:#202124; max-width:600px; margin:15px auto; border-radius:14px; box-shadow:0 0 20px 20px #00000026; }
a { color:#ececec; text-decoration:none; }
svg { width:24px; }
img { width:100%; height:auto; }
h1,h2,h3 { margin-bottom:10px; font-weight:500; }
h1 { font-size:1.5em; } h2 { font-size:1.3em; } h3 { font-size:1em; }
p { margin-bottom:15px; }
ul,ol { margin:0 0 1em 2em; }
.page-content { padding:10px; }
div#video-container { aspect-ratio:16 / 9; width:100%; }
img.hicon { width:38px; }

/* ===================== HEADER ===================== */
header.main-header { display:flex; justify-content:space-between; padding:8px 15px; position:relative; border-bottom:1px solid #101218; }
.hleft { display:flex; gap:10px; align-items:center; font-size:18px; flex:1; }
.hright { display:flex; gap:10px; align-items:center; }
ul.post-categories { margin:0; display:inline-block; list-style:none; }
.hlink { background:transparent; height:40px; width:40px; padding:3px; border-radius:100%; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; color:inherit; font:inherit; }
.hlink:hover { background:#303134; }

/* ===================== CONTENT ===================== */
section.content { padding:10px; position:relative; }
h1.title { font-size:18px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; padding-right:26px; }

.btns { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.btnlink { display:flex; gap:10px; align-items:center; background:#394457; border-radius:99px; padding:10px; justify-content:center; flex:auto; color:#ccc; border:0; cursor:pointer; }
.btnlink svg { width:18px; height:18px; }
.btnlink:hover { background:#2b2d34; }

.videos { padding:10px; display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
article.video { position:relative; border-radius:5px; overflow:hidden; }
span.rtitle { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; position:absolute; z-index:1; bottom:0; padding:5px; background:#0000004a; width:100%; backdrop-filter:blur(100px); }

section.categories { padding:10px; display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
a.category-item { aspect-ratio:16 / 9; border-radius:5px; overflow:hidden; position:relative; }
.category-meta { display:flex; justify-content:space-between; align-items:center; padding:5px; position:absolute; bottom:0; z-index:3; width:100%; background:#3F51B5; }

.fmenu a { flex:auto; padding:10px; text-align:center; }
.fmenu { display:flex; gap:5px; border-top:1px solid #101218; }
.fmenu a:hover { background:#2b2d34; }
.border { height:1px; background:#101218; margin:10px 0; }

/* ===================== DROPDOWN ===================== */
.dropbtn { border:none; cursor:pointer; background:transparent; padding:0; color:inherit; }
.dropdown { position:relative; display:inline-block; }

/* Default (keep as it was): absolute inside header */
.dropdown-content{
  display:none;
  position:absolute;   /* ← keep original */
  right:3px;           /* ← keep original */
  top:56px;            /* ← keep original */
  min-width:160px;
  background-color:#202124;
  box-shadow:0 8px 16px rgba(0,0,0,.2);
  border-radius:10px;
  z-index:99;
  opacity:0;
  transition:opacity .3s ease;
}
.show { display:block !important; opacity:1 !important; transition:opacity .3s ease; }
svg.dropbtn, svg.dropbtn path { pointer-events:none; }

/* Arrow for dropdown */
.dropdown-content:before {
  content:'';
  position:absolute;
  background:#202124;
  width:11px; height:11px; rotate:45deg;
  top:-6px; right:12px; z-index:-1;
}
.dropdown-content a { padding:12px 16px; text-decoration:none; display:block; }
.dropdown-content ul { list-style:none; margin:0; padding:0; }
.dropdown-content li { margin:0; padding:0; }
.dropdown-content ul li a { padding:12px 16px; text-decoration:none; display:block; }
.dropdown-content a:hover, .dropdown-content ul li a:hover { background-color:#2b2d34; }

/* === ONLY WHEN HEADER IS STICKY: pin to .box-layout right edge === */
.header-sticky .dropdown-content{
  position: fixed !important;
  top: 56px !important;
  right: max(var(--edge-pad), calc((100vw - var(--box-w)) / 2 + var(--edge-pad))) !important;
  z-index: 2000;
}
.header-sticky .dropdown-content::before{ right:12px !important; }

/* ===================== SLIDER ===================== */
section.slider { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; }
img.mySlides { object-fit:cover; height:100%; }
.slider-btns { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:100; display:flex; align-items:center; justify-content:space-between; width:95%; }
.slbtns {
  padding:12px 17px; border:0; background:rgba(0,0,0,.5); backdrop-filter:blur(10px);
  color:#fff; border-radius:100%; line-height:16px; cursor:pointer; min-width:44px; min-height:44px;
}
.slbtns:hover { transform:scale(1.2); }

/* ===================== PAGE HEADER ===================== */
.page-header { display:flex; align-items:center; justify-content:space-between; padding:10px; border-bottom:1px solid #101218; }
h1.page-title { font-size:20px; margin:0; font-weight:normal; }
.link { width:100%; height:100%; display:block; z-index:1; position:absolute; }
.vdicon { display:flex; gap:5px; align-items:center; }
.vdicon:before {
  content:''; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M2 8.25A3.25 3.25 0 0 1 5.25 5h6.5A3.25 3.25 0 0 1 15 8.25v7.5A3.25 3.25 0 0 1 11.75 19h-6.5A3.25 3.25 0 0 1 2 15.75zm17.257 9.438L16 15.44V8.562l3.257-2.249c1.161-.802 2.745.03 2.745 1.44v8.495c0 1.41-1.584 2.242-2.745 1.44'/%3E%3C/svg%3E");
  width:20px; height:20px; background-size:20px 20px; display:block;
}
.slider-indicators { position:absolute; bottom:15px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:101; }

/* ===================== SEARCH (FIXED) ===================== */
.search-container{
  position: fixed;
  top: 60px;
  right: max(10px, calc((100vw - 600px)/2 + 10px));
  z-index: 2000;
  background-color:#202124;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);
  padding:10px;
  display:none;
  opacity:0;
  transition:opacity 0.3s ease, visibility 0.3s ease;
  visibility:hidden;
  pointer-events:none;
}
.show-search { display:block !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }
.search-form { display:flex; align-items:center; }
.search-field {
  background-color:#2b2d34; border:none; padding:10px 15px; border-radius:20px;
  color:#ccc; width:200px; font-size:14px;
}
.search-field:focus { outline:none; background-color:#303134; }
.search-submit {
  background:transparent; border:none; padding:5px; margin-left:-40px; cursor:pointer; color:#ccc;
  min-width:44px; min-height:44px;
}
.search-submit svg { width:20px; height:20px; }
.search-btn:hover { background:#303134; }

/* keep fixed when header becomes sticky */
.header-sticky .search-container { position: fixed; top: 60px; }

/* ===================== STICKY HEADER ===================== */
.header-wrapper { width:100%; position:relative; }
.header-sticky {
  position:fixed!important; top:-60px; left:0; right:0; width:100%; max-width:600px; margin:0 auto;
  z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.1); transition:top .3s ease-in-out;
  background-color:#202124; border-radius:14px 14px 0 0;
}

/* ===================== RESPONSIVE (HEADER/SEARCH/DROPDOWN) ===================== */
@media screen and (max-width:370px){
  .hleft { gap:5px; } .hright { gap:5px; } .hlink { width:35px; height:35px; }
  svg { width:20px; } img.hicon { width:32px; }
  .hlogo { font-size:14px; max-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; }

  .search-container { top:55px; right: max(5px, calc((100vw - 600px)/2 + 5px)); }

  .dropdown-content { top:50px; }
  .dropdown-content a { padding:10px 14px; }

  /* sticky alignment on tiny screens */
  .header-sticky .dropdown-content{
    top:50px !important;
    right: max(5px, calc((100vw - var(--box-w)) / 2 + 5px)) !important;
  }
}
@media screen and (max-width:320px){
  .hleft { gap:3px; } .hright { gap:2px; } .hlink { width:30px; height:30px; padding:2px; }
  svg { width:18px; } img.hicon { width:28px; padding:3px; }
  header.main-header { padding:8px 5px; }
  .search-container { right: max(5px, calc((100vw - 600px)/2 + 5px)); width:250px; max-width:calc(100% - 20px); }
  .dropdown-content:before { right:6px; }
  .dropdown-content a { padding:8px 12px; font-size:14px; }
}

/* ===================== PAGINATION ===================== */
.nav-links { display:flex; gap:5px; width:100%; }
.pagination { text-align:center; margin:20px 10px; clear:both; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.pagination .page-numbers { flex:auto; padding:8px 12px; background-color:#394457; color:#ccc; border-radius:5px; text-decoration:none; transition:all .3s ease; text-align:center; }
.pagination .page-numbers.current { background-color:#3F51B5; color:#fff; }
.pagination .page-numbers:hover:not(.current) { background-color:#2b2d34; color:#fff; }
.pagination .dots { background-color:transparent; padding:8px 0; display:none; }
.screen-reader-text { border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal!important; }

/* ===================== TAXONOMY CARDS ===================== */
.taxonomy-filters { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; padding:10px; }
.filter-label { margin-right:15px; font-weight:500; color:#fff; }
.filter-options { display:flex; flex-wrap:wrap; gap:10px; }
.filter-option { padding:8px 15px; background-color:rgba(255,255,255,.1); color:#fff; border-radius:20px; text-decoration:none; transition:all .3s ease; }
.filter-option:hover { background-color:#3F51B5; color:#fff; }
.filter-option.active { background-color:#3F51B5; font-weight:500; color:#ffffff; }

.taxonomy-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; margin-bottom:40px; }
.taxonomy-item { background-color:#272727; border-radius:8px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; text-decoration:none; color:#fff; }
.taxonomy-item:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(0,0,0,.3); }
.taxonomy-image { aspect-ratio:16/9; overflow:hidden; position:relative; }
.taxonomy-image img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.taxonomy-item:hover .taxonomy-image img { transform:scale(1.05); }
.taxonomy-meta { padding:15px; }
.taxonomy-title { margin:0 0 10px 0; font-size:18px; font-weight:500; color:#fff; }
.taxonomy-details { display:flex; align-items:center; justify-content:space-between; font-size:14px; color:rgba(255,255,255,.7); }
.taxonomy-count { display:flex; align-items:center; }
.taxonomy-count::before {
  content:""; display:inline-block; width:16px; height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z'/%3E%3C/svg%3E");
  background-size:contain; margin-right:5px; opacity:.7;
}
.taxonomy-date { font-style:italic; }
.no-results { grid-column:1 / -1; text-align:center; padding:40px 20px; background-color:rgba(255,255,255,.05); border-radius:8px; }

@media (max-width:768px){
  .taxonomy-grid { grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
  .taxonomy-title { font-size:16px; }
  .taxonomy-filters { flex-direction:column; align-items:stretch; }
  .filter-label { margin-right:0; margin-bottom:10px; text-align:center; }
  .filter-options { justify-content:center; }
}
@media (max-width:480px){
  .taxonomy-grid { grid-template-columns:1fr 1fr; gap:15px; }
  .taxonomy-meta { padding:10px; }
  .taxonomy-title { font-size:14px; margin-bottom:5px; }
  .taxonomy-details { font-size:12px; }
}

/* ===================== TAXONOMY TABLE ===================== */
.taxonomy-table-container { border-bottom:1px solid #2b2d34; }
.taxonomy-table { width:100%; border-collapse:collapse; overflow:hidden; }
.taxonomy-table th { padding:15px; text-align:left; font-weight:500; color:#fff; border-bottom:1px solid #2b2d34; }
.taxonomy-table th.term-count { text-align:center; width:100px; }
.taxonomy-table th.term-date { text-align:right; width:120px; }
.taxonomy-table td { padding:12px 15px; border-bottom:1px solid #2b2d34; transition:background-color .2s ease; color:rgba(255,255,255,.9); }
.taxonomy-table tr:last-child td { border-bottom:none; }
.taxonomy-table tr:hover { background-color:#2b2d34; }
.taxonomy-table .term-title { font-weight:500; }
.taxonomy-table .term-count { text-align:center; font-size:14px; color:rgba(255,255,255,.7); }
.taxonomy-table .term-date { text-align:right; font-size:14px; color:rgba(255,255,255,.7); font-style:italic; }
.term-link { display:flex; align-items:center; text-decoration:none; color:#fff; }
.folder-icon {
  display:inline-block; width:24px; height:24px; margin-right:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffbf00'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; transition:transform .2s ease;
}
.term-link:hover .folder-icon {
  transform:scale(1.1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233F51B5'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}
.term-name { font-weight:500; transition:color .2s ease; }
.term-link:hover .term-name { color:#3F51B5; }
td.ctbl-title:hover { background:rgba(255,255,255,.05); }
td.ctbl-title a { justify-content:space-between; }
td.ctbl-title { width:50%; border:1px solid #2b2d34; background:#101218; }
.no-results-row td { text-align:center; padding:30px 15px; color:rgba(255,255,255,.5); font-style:italic; }

@media (max-width:600px){
  .taxonomy-table th, .taxonomy-table td { padding:10px; }
  .taxonomy-table th.term-count { width:60px; }
  .taxonomy-table th.term-date { width:80px; }
  .folder-icon { width:20px; height:20px; margin-right:8px; }
  .term-name { font-size:14px; }
  .taxonomy-table .term-count, .taxonomy-table .term-date { font-size:12px; }
}
@media (max-width:480px){
  .taxonomy-table th.term-date, .taxonomy-table td.term-date { display:none; }
  .taxonomy-table th.term-count { width:50px; }
  .filter-option { font-size:12px; }
}
@media (max-width:360px){
  .taxonomy-table th, .taxonomy-table td { padding:8px 5px; }
  .folder-icon { width:16px; height:16px; margin-right:5px; }
  .term-name { font-size:13px; }
}

/* ===================== TABLE SEARCH ===================== */
.table-search-container { margin-bottom:15px; width:100%; }
.table-search-field{
  width:100%; padding:12px 20px 12px 40px; font-size:16px;
  border:1px solid rgba(255,255,255,.1); border-radius:5px; background-color:#1E1E1E; color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23707070' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:10px center; background-size:20px 20px; transition:all .3s ease;
}
.table-search-field:focus { outline:none; border-color:#3F51B5; box-shadow:0 0 5px rgba(63,81,181,.5); }
a.tblink { background:#3b4456; font-size:12px; white-space:nowrap; border-radius:99px; padding:6px 20px; }
.tblink:hover { background:#3F51B5; }

/* ===================== ACCESSIBILITY ===================== */
.skip-link { background:#3F51B5; color:white; font-weight:700; padding:10px 15px; position:absolute; transform:translateY(-120%); transition:transform .3s; z-index:9999; left:0; top:0; }
.skip-link:focus { transform:translateY(0); }

/* ===================== HOME LINKS ===================== */
.home-links a { flex:auto; padding:10px; text-align:center; border-right:1px solid #2b2d34; }
.home-links a:hover { background:#2b2d34; }
.home-links a:last-child { border-right:0; }
.home-links { display:flex; gap:5px; border-bottom:1px solid #2b2d34; }
.art-icon svg { width:70%; }

/* ===================== MODAL ===================== */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; z-index:999; backdrop-filter:blur(5px); }
.modal-backdrop.active { display:block; }
.modal-box{
  position:fixed; bottom:0; left:0; right:0; background:#202124; height:50vh;
  border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:0 -4px 16px rgba(0,0,0,.2);
  animation:slideUp .3s ease-out; overflow-y:scroll; max-width:600px; margin:auto; scrollbar-width:none;
  padding-bottom:52px;
}
.modal-box::-webkit-scrollbar { display:none; }
@keyframes slideUp { from{transform:translateY(100%);} to{transform:translateY(0);} }
.close-btn{
  position:absolute; top:3px; right:12px;
  background:none; font-size:24px; border:none; cursor:pointer; z-index:1100; color:#c9c9c9;
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
}
.close-btn:hover { background:#2c2d2f; color:#fff; }
button.info-btnx { background:none; border:none; color:#fff; cursor:pointer; position:absolute; top:7px; right:10px; }
button.info-btnx svg { width:30px; height:30px; }

.dialog-header{
  padding:10px; background:#394457; padding-right:56px;
  position:sticky; top:0; z-index:1; border-top-left-radius:20px; border-top-right-radius:20px;
}
.dialog-header h2 { margin:0; font-size:18px; font-weight:500; color:#fff; word-break:break-word; }
.metadata-content { padding:10px; }
.metadata-breadcrumb{
  font-size:14px; color:#888; padding:10px; position:absolute; bottom:0; white-space:nowrap; overflow:hidden; display:block; width:100%;
  background:linear-gradient(180deg, rgba(32,33,36,0) 0%, rgba(32,33,36,1) 40%);
}
.metadata-breadcrumb a { color:#4e69ff; text-decoration:none; }
.metadata-breadcrumb a:hover { text-decoration:underline!important; }

table.metadata-table { width:100%; border-collapse:collapse; }
table.metadata-table a { color:#4e69ff; }
.metadata-table th, .metadata-table td { padding:10px; border-bottom:1px solid #2b2d34; text-align:left; color:#d4d4d4; }
.metadata-table th { width:100px; font-weight:500; color:#a8a8a8; }
.metadata-table td a { color:#3F51B5; text-decoration:none; }
.metadata-table td a:hover { text-decoration:underline; }
.metadata-table tr:last-child th, .metadata-table tr:last-child td { border-bottom:none; }

/* ===================== MISC ===================== */
svg#playsvg { width:40px; height:40px; }
#playsvg { animation:ckw 5s infinite linear; transform-origin:50% 50%; display:inline-block; }
@keyframes ckw { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
a.hlogo { font-size:24px; font-weight: bold;}
button.hlink { appearance:none; -webkit-appearance:none; background-color:transparent; border:none; padding:0; margin:0; line-height:normal; }
span.time.clock {
    position: absolute;
    top: 0px;
    left: 0px;
    color: #f2f2f2;
    background: #0000008c;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px 0px 9px 0px;
}
.ago {
    right: 0px;
    top: 0px;
    position: absolute;
    opacity: 0.9;
    font-weight: normal;
    text-shadow: 0px 0px 4px #000;
    color: #f2f2f2;
    background: #0000008c;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 0px 4px 0px 8px;
}

.ago:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 13px;
    background-image: url(https://fsiblog.cc/wp-content/themes/fox/img/eay.svg);
    background-size: 16px 16px;
    margin-right: 0px;
}