/* ============================================================
   ArabTV Live — Mobile Theme v2.0 (2026-05-30)
   ============================================================ */

:root{
    --brand:#0a66c2;
    --brand-dark:#084c97;
    --brand-soft:#e8f1fb;
    --accent:#f97316;
    --live:#e8362b;
    --ink:#1a1f2e;
    --ink-soft:#6b7280;
    --line:#e5e9f0;
    --bg:#f0f4fa;
    --card:#ffffff;
    --nav-h:3rem;
    --r:0.5rem;
    --sh:0 2px 10px rgba(15,30,70,.07);
}

* { box-sizing:border-box; }

html{ font-size:4vw; height:100%; -webkit-text-size-adjust:100%; }

body,div,table,td,input,button,form{
    font-size:0.95rem;
    font-family:'Segoe UI','PingFang SC','Helvetica Neue',Arial,sans-serif;
}
body{
    color:var(--ink);
    background:var(--bg);
    padding:0;
    margin:0;
    -webkit-font-smoothing:antialiased;
}
*:focus{ outline:none; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
form,fieldset,legend,input,textarea,p,blockquote,th,td{
    padding:0; margin:0;
}
ul,ol,li{ list-style:none; }
img{ vertical-align:top; border:0; }
a{
    color:var(--ink); text-decoration:none; outline:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:hover{ text-decoration:none; }
table{ border-collapse:collapse; border-spacing:0; }
input,button,select,textarea{ outline:0; }
textarea{ resize:none; }
.clearfix{ font-size:1px; clear:both; }


/* ============================================================
   顶部导航
   ============================================================ */
.top_bg{
    width:100%;
    height:var(--nav-h);
    background:linear-gradient(135deg,#0d1b3e 0%,#0a3880 55%,var(--brand) 100%);
    position:fixed;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 0.6rem 0 0.8rem;
    box-shadow:0 2px 12px rgba(8,20,60,.35);
}

/* 文字 logo（不依赖图片） */
.mob_logo{ display:inline-flex; align-items:center; }
.mob_logo_text{
    font-size:1.1rem;
    font-weight:800;
    color:#fff;
    letter-spacing:-.3px;
    line-height:1;
}
.mob_logo_tv{ color:rgba(255,255,255,.85); }
.mob_logo_live{ color:var(--accent); font-weight:700; font-size:.9rem; }

/* 旧图片 logo 兼容 */
.logo_1{ display:none; }
.logo_1 img{ width:6.5rem; height:auto; margin:0.4rem 0 0 0.5rem; }

/* 导航链接 */
.top_link{
    display:flex;
    align-items:center;
    gap:2px;
}
.top_link a{
    font-size:0.8rem;
    color:rgba(220,235,255,.8);
    padding:0.38rem 0.5rem;
    border-radius:999px;
    font-weight:600;
    display:inline-block;
    transition:background .15s,color .15s;
    white-space:nowrap;
}
.top_link a:hover,
.top_link a.nav_active{
    background:rgba(255,255,255,.18);
    color:#fff;
}

/* Mobile Sign In button */
.mob_signin{
    background:#fff !important;
    color:#0a3880 !important;
    font-weight:700 !important;
    padding:0.3rem 0.7rem !important;
    border-radius:999px !important;
    font-size:0.78rem !important;
    box-shadow:0 1px 6px rgba(0,0,0,.18) !important;
}
.mob_signin:hover{ background:#e8f1fb !important; }
.mob_vip{
    background:linear-gradient(135deg,#f97316,#fbbf24) !important;
    color:#fff !important;
}

/* Mobile Subscribe button */
.mob_sub_btn{
    background:linear-gradient(135deg,#f97316,#ef4444) !important;
    color:#fff !important;
    font-weight:800 !important;
    padding:0.3rem 0.7rem !important;
    border-radius:999px !important;
    font-size:0.76rem !important;
    box-shadow:0 0 0 0 rgba(249,115,22,.5);
    animation:mob_pulse 2.4s ease-in-out infinite;
}
@keyframes mob_pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(249,115,22,.5); }
    50%     { box-shadow:0 0 0 5px rgba(249,115,22,0); }
}

/* Mobile social login bar */
.mob_social_bar{
    width:100%;
    background:linear-gradient(90deg,#0d1b3e,#0a3880);
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 0.8rem;
    height:38px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    position:fixed;
    top:var(--nav-h);
    z-index:998;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.mob_social_bar::-webkit-scrollbar{ display:none; }
.mob_social_label{
    font-size:11px;
    color:rgba(200,220,255,.65);
    font-weight:600;
    white-space:nowrap;
    flex-shrink:0;
}
.mob_social_btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    flex-shrink:0;
    transition:background .15s;
}
.mob_social_btn:hover{ background:rgba(255,255,255,.25); }
.mob_social_btn svg{ width:14px; height:14px; }


/* ============================================================
   快捷二级目录横向滚动
   ============================================================ */
.head_link{
    height:2.6rem;
    background:#fff;
    clear:both;
    padding:0 0.5rem;
    padding-top:var(--nav-h);
    overflow:hidden;
}
.head_link_box{
    white-space:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}
.head_link_box::-webkit-scrollbar{ display:none; }
.head_link_box div{
    line-height:2.7rem;
    margin-right:0.5rem;
    font-size:0.9rem;
    display:inline-block;
}
.head_link_box div a{ color:#3a4460; }
.head_link_box div a:hover{ color:var(--brand); }

.ge{ height:0; clear:both; }


/* ============================================================
   日期切换
   ============================================================ */
.today_box{ margin:0.5rem 0.4rem; position:relative; }
.today{
    text-align:center; vertical-align:top;
    width:29vw;
    border-radius:999px;
    font-size:0.78rem;
    padding:0.55rem 0;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    margin:0 auto; overflow:hidden;
    transition:background .15s;
}
.today:hover{ background:var(--brand-soft); border-color:var(--brand); }


/* ============================================================
   比赛列表
   ============================================================ */
.body_box{ padding:0 0 0.5rem; z-index:1; }

.list_box{
    margin:0 0.4rem;
    height:6.3rem;
    clear:both;
    border-radius:var(--r);
    background:var(--card);
    border:1px solid var(--line);
    margin-top:0.4rem;
    vertical-align:middle;
    box-shadow:var(--sh);
    overflow:hidden;
    transition:box-shadow .2s,transform .2s;
}
.list_box:active{ transform:scale(.98); }

.part_a{ float:left; width:23vw; text-align:left; padding-top:1.1rem; }
.part_a_time{ font-size:0.75rem; color:var(--ink-soft); line-height:1.8rem; padding-left:0.7rem; }
.part_a_name{ font-size:0.72rem; color:#9a9a9a; line-height:1.8rem; padding-left:0.7rem; }

.part_b{ float:left; width:46vw; padding-top:1.2rem; }
.part_b_dui{ clear:both; height:2.3rem; }
.part_b_dui div{ float:left; }
.part_b_dui_str{
    margin-left:0.5rem;
    font-size:0.8rem; font-weight:700; color:var(--ink);
    line-height:1.7rem; height:1.7rem;
    overflow:hidden; display:inline-block;
}
.part_b_dui img{ width:1.7rem; height:1.7rem; border:0; border-radius:50%; }

.part_c{ float:left; width:24vw; vertical-align:middle; text-align:center; padding-top:2.5rem; }
.part_c_guankan{
    padding:0.45rem 0.7rem;
    background:rgba(232,54,43,.1);
    color:var(--live);
    border-radius:999px; font-size:0.72rem; font-weight:700;
    display:inline-block;
}
.part_c_wait{
    padding:0.45rem 0.7rem;
    border:1px solid var(--line);
    background:#f5f5f5;
    color:#888;
    border-radius:999px; font-size:0.72rem;
    display:inline-block;
}


/* ============================================================
   底部
   ============================================================ */
.foot{
    padding:0.8rem 0.5rem;
    background:#0d1b3e;
}
.foot div{
    text-align:center;
    line-height:1.6rem;
    font-size:0.72rem;
    color:#8fa3c8;
}
.foot a{ color:#8fa3c8; }
.foot img{ width:8rem; height:auto; border:0; margin:0.5rem auto; filter:brightness(0) invert(1) opacity(.6); }


/* ============================================================
   播放页内页
   ============================================================ */
.show_place{
    height:2.4rem; line-height:2.4rem;
    padding-left:0.5rem;
    font-size:0.78rem; color:#666;
}
.show_place a{ color:#666; font-size:0.78rem; }
.vs{ font-family:Georgia,"Times New Roman",Times,serif; color:var(--brand); font-weight:bold; font-size:1rem; }

/* 信号 */
.xinhao_list{
    line-height:2.3rem;
    background:#fff;
    text-align:center;
    padding:0.5rem 0;
    border-radius:var(--r);
    margin:0 0.4rem 0.5rem;
    box-shadow:var(--sh);
}
.xinhao_list_but{
    border-radius:999px; font-size:0.78rem;
    padding:0.45rem 1.2rem;
    color:var(--ink-soft);
    background:#f0f4fa;
    border:1px solid var(--line);
    margin:0.25rem 0.3rem;
    white-space:nowrap;
    display:inline-block;
    font-weight:600;
    transition:background .15s;
}
.xinhao_list_focus{ color:#fff !important; background:linear-gradient(135deg,var(--brand),var(--brand-dark)) !important; border-color:transparent !important; }
.xinhao_list_limit{ color:#fff !important; background:var(--accent) !important; border-color:transparent !important; }

.xinhao_tishi{
    background:#f7f9fc;
    padding:0.8rem 0;
    text-align:center;
    border-radius:var(--r);
    margin:0 0.4rem 0.5rem;
}
.fuzhi_input{
    border:1px solid var(--line); background:#fff;
    font-size:0.78rem; padding:0.3rem 1rem;
    border-radius:999px 0 0 999px;
    color:#222; width:60%; height:2.4rem;
    line-height:1.8rem; vertical-align:top;
}
.fuzhi_but{
    border:1px solid var(--line); border-left:0;
    background:#fff;
    font-size:0.78rem;
    border-radius:0 999px 999px 0;
    color:var(--brand);
    height:2.4rem; width:4.5rem;
    font-weight:700;
}
.xinhao_text{
    background:#fff;
    padding:0.8rem 0.5rem;
    border-radius:var(--r);
    margin:0 0.4rem;
    box-shadow:var(--sh);
}
.xinhao_text div{ line-height:1.5rem; font-size:0.78rem; color:var(--ink); }
.xinhao_text div p{ line-height:1.5rem; font-size:0.78rem; color:var(--ink-soft); padding:0 0.2rem; }


/* ============================================================
   TV 频道
   ============================================================ */
.tv_pindao{ height:2.8rem; line-height:2.8rem; font-size:1rem; font-weight:700; color:var(--ink); padding-left:0.7rem; border-left:4px solid var(--brand); margin:0.6rem 0.4rem 0.2rem; }
.tv_outside{ background:#fff; clear:both; padding:0.9rem 0 0.9rem 0.4rem; overflow:hidden; border-radius:var(--r); margin:0 0.4rem 0.5rem; box-shadow:var(--sh); }

.tvlist_box{ white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; vertical-align:top; }
.tvlist_box::-webkit-scrollbar{ display:none; }

.tv_move{ display:inline-block; margin:1vw 1.5vw; vertical-align:top; }
.tv_img img{ width:28vw; height:20vw; border-radius:var(--r); box-shadow:var(--sh); object-fit:cover; }
.tv_name{ font-size:0.8rem; margin-top:0.5rem; text-align:center; color:#3a4460; }