/* ============================================================
   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 0 56px;
    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 Language Switcher */
.mob_lang_wrap{ position:relative; display:inline-flex; align-items:center; }
.mob_lang_btn{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    border-radius:6px;
    padding:3px 5px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:2px;
    height:28px;
    color:#fff;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.mob_lang_btn img{ border-radius:2px; display:block; }
.mob_lang_menu{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    margin-top:6px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    padding:6px;
    z-index:1001;
    min-width:170px;
    max-height:300px;
    overflow-y:auto;
}
.mob_lang_menu.open{ display:block; }
.mob_lang_opt{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:8px;
    font-size:0.8rem;
    color:var(--ink);
    text-decoration:none;
    transition:background .1s;
}
.mob_lang_opt:active{ background:var(--brand-soft); }
.mob_lang_opt.active{ background:var(--brand-soft); color:var(--brand); font-weight:700; }
.mob_lang_opt img{ border-radius:2px; width:20px; height:15px; }

/* Mobile Sign In button */
.mob_signin{
    color:#fff !important;
    background:rgba(255,255,255,.15) !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:rgba(255,255,255,.25) !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; }


/* ============================================================
   日期切换 — App-style pills
   ============================================================ */
.date_pills_row{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:0.5rem 0.4rem;
    scrollbar-width:none;
}
.date_pills_row::-webkit-scrollbar{ display:none; }
.date_pills{
    display:flex;
    gap:0.4rem;
    white-space:nowrap;
}
.date_pill{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:0.45rem 1.1rem;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--line);
    color:var(--ink);
    text-decoration:none;
    min-width:4.2rem;
    transition:background .15s,border-color .15s,transform .15s;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.date_pill:active{ transform:scale(.95); }
.date_pill.active{
    background:var(--brand);
    border-color:var(--brand);
    color:#fff;
    box-shadow:0 2px 8px rgba(10,102,194,.3);
}
.dp_day{
    font-size:0.7rem;
    font-weight:700;
    line-height:1.3;
}
.dp_date{
    font-size:0.6rem;
    color:var(--ink-soft);
    line-height:1.3;
}
.date_pill.active .dp_date{ color:rgba(255,255,255,.8); }

/* Legacy date styles (kept for backward compat) */
.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;
    animation:live_pulse 2s ease-in-out infinite;
}
@keyframes live_pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(232,54,43,.3); }
    50%{ box-shadow:0 0 0 6px rgba(232,54,43,0); }
}
.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;
}


/* ============================================================
   比赛分组 & 卡片
   ============================================================ */
.match_section{margin:0 0.4rem 0.4rem}
.match_section_hd{
    display:flex; align-items:center; gap:6px;
    padding:0.6rem 0.4rem 0.3rem;
    font-size:0.85rem; font-weight:700; color:var(--ink);
}
.match_section_hd .sec_count{
    margin-left:auto;
    font-size:0.65rem; color:var(--ink-soft);
    background:var(--line); border-radius:999px;
    padding:0.1rem 0.5rem;
}
.match_section_hd .sec_icon{font-size:1rem}

.match_card{
    display:block; color:inherit; text-decoration:none;
    background:var(--card); border-radius:var(--r);
    border:1px solid var(--line); box-shadow:var(--sh);
    margin-bottom:0.35rem; overflow:hidden;
    transition:transform .15s;
}
.match_card:active{transform:scale(.98)}
.match_card_live{border-left:3px solid var(--live)}
.match_card_ended{opacity:.6}

.match_card_league{
    display:flex; align-items:center; gap:4px;
    padding:0.5rem 0.7rem 0.2rem;
    font-size:0.7rem; color:var(--ink-soft);
}
.match_card_time{
    margin-left:auto;
    font-size:0.7rem; font-weight:600; color:var(--ink);
}
.match_card_body{
    display:flex; align-items:center; padding:0.3rem 0.7rem 0.6rem;
    gap:0.3rem;
}
.match_card_team{
    display:flex; align-items:center; gap:6px;
    flex:1; min-width:0;
}
.match_card_team:last-child{flex-direction:row-reverse; text-align:right}
.match_card_team_logo{width:1.8rem; height:1.8rem; border-radius:50%; object-fit:contain; background:var(--line); border:2px solid var(--line); box-sizing:content-box}
.match_card_team_name{
    font-size:0.8rem; font-weight:700; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width:35vw;
}
.match_card_vs{
    font-size:0.75rem; font-weight:800; color:var(--ink-soft);
    flex:0 0 auto; padding:0 4px;
}
.match_card_status{
    margin-left:auto; padding:0 0.4rem 0 0;
}
.match_card_badge{
    display:inline-block;
    padding:0.2rem 0.5rem; border-radius:999px;
    font-size:0.6rem; font-weight:700;
}
.badge_live{background:rgba(232,54,43,.12); color:var(--live); animation:live_pulse 2s infinite}
.badge_soon{background:rgba(10,102,194,.12); color:var(--brand)}
.badge_ended{background:var(--line); color:var(--ink-soft)}

/* Solo event (no team2) — single line */
.match_card_solo .match_card_body{justify-content:center;padding:0.5rem 0.7rem}
.match_card_solo .match_card_title{
    font-size:0.85rem; font-weight:700; color:var(--ink);
    text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Empty state */
.no_match_tip{
    text-align:center; padding:2.5rem 1rem; color:var(--ink-soft);
}
.no_match_tip p{font-size:0.85rem; margin-top:0.5rem}

/* ============================================================
   播放页 — Hero & Player
   ============================================================ */
.player_wrap{
    margin:0 0.4rem 0.5rem;
    background:#000; border-radius:var(--r); overflow:hidden;
    aspect-ratio:16/9; position:relative;
}
.player_ratio{width:100%;height:100%}
.player_ratio video{width:100%;height:100%;background:#000;object-fit:contain}

.show_hero{
    margin:0 0.4rem 0.5rem;
    background:linear-gradient(135deg,#0d1b3e,#0a3880);
    border-radius:var(--r); padding:0.8rem;
    color:#fff; text-align:center;
    position:relative; isolation:isolate;
}
.show_hero_status{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-size:3rem; font-weight:900;
    opacity:0.05; pointer-events:none; z-index:0;
    white-space:nowrap;
}
.show_hero_status.live{color:#e74c3c;animation:hero_live_pulse 3s ease-in-out infinite}
.show_hero_status.pre{color:#3498db}
.show_hero_status.ended{color:#7f8c8d}
.show_hero_status .dot{display:none}
@keyframes hero_live_pulse{0%,100%{opacity:0.04}50%{opacity:0.12}}

.show_hero_teams{display:flex;align-items:center;justify-content:center;gap:0.3rem}
.show_hero_team{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.show_hero_logo{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:contain;background:rgba(255,255,255,.1);padding:4px}
.show_hero_name{font-size:0.85rem;font-weight:700;color:#fff;max-width:35vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.show_hero_vs{font-size:1.2rem;font-weight:900;color:rgba(255,255,255,.4)}
.show_hero_meta{margin-top:0.5rem;font-size:0.7rem;color:rgba(255,255,255,.6)}
.show_hero_league{font-size:0.7rem;color:rgba(255,255,255,.5);margin-top:0.3rem}

/* Live Now recommendation section */
.show_recommend{
    background:var(--card);
    border-radius:var(--r);
    margin:0.6rem;
    padding:0.7rem 0.8rem;
    box-shadow:var(--sh);
}
.show_recommend_head{
    font-size:0.85rem;
    font-weight:700;
    color:var(--ink);
    margin-bottom:0.5rem;
    padding-bottom:0.4rem;
    border-bottom:2px solid var(--live);
    display:flex;
    align-items:center;
    gap:6px;
}
.show_recommend_list{ display:flex; flex-direction:column; gap:4px; }
.rec_item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.5rem 0.6rem;
    border-radius:8px;
    background:var(--bg);
    font-size:0.8rem;
    color:var(--ink);
    text-decoration:none;
    transition:background .1s;
}
.rec_item:active{ background:var(--brand-soft); }
.rec_item_meta{
    font-size:0.7rem;
    color:var(--ink-soft);
    white-space:nowrap;
    margin-left:8px;
}

/* TV hero — simpler single-line */
.show_hero_tv .show_hero_name{font-size:1rem;max-width:80vw}


/* ============================================================
   底部 Tab Bar — App-style
   ============================================================ */
.tab_bar{
    position:fixed;
    bottom:0; left:0; right:0;
    height:56px;
    background:linear-gradient(135deg,#0d1b3e 0%,#0a3880 55%,var(--brand) 100%);
    display:flex;
    align-items:center;
    justify-content:space-around;
    z-index:1000;
    box-shadow:0 -2px 12px rgba(8,20,60,.35);
    padding-bottom:env(safe-area-inset-bottom,0);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}
.tab_item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    height:100%;
    color:rgba(220,235,255,.55);
    text-decoration:none;
    gap:2px;
    transition:color .15s;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    border:0;
    background:transparent;
    cursor:pointer;
    padding:0;
}
.tab_item:active{ opacity:.65; }
.tab_item.active{
    color:#fff;
    position:relative;
}
.tab_item.active::after{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:20px;
    height:3px;
    border-radius:0 0 3px 3px;
    background:var(--accent);
}
.tab_icon{
    font-size:1.25rem;
    line-height:1;
}
.tab_label{
    font-size:0.55rem;
    font-weight:600;
    line-height:1;
    letter-spacing:.3px;
}

/* ============================================================
   底部
   ============================================================ */
.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,transform .15s;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.xinhao_list_but:active{ transform:scale(.95); }
.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; }