/*
Template Name: 洛圣都 GTA
Description: GTA V 洛圣都黄昏 · 城市夜行
Color: #f7a600
Layout: hero, marquee, family, features, shots, flow, pricing, notice, sellers, board, faq
 */

/* ============================================================
   模板 gta5 · 洛圣都 · 官网
   —— Grand Theft Auto V 世界观：洛杉矶日落 / 犯罪都市夜行
   ============================================================ */

/* ===================== 配色（GTA V 洛圣都） ===================== */
body.ui-gta5 {
    --bg:         #0a0e1a;            /* 午夜蓝夜 */
    --bg-soft:    #101627;
    --panel:      rgba(12, 18, 33, .92);
    --panel-2:    rgba(22, 30, 50, .94);
    --border:     #2a3655;
    --border-2:   #55679a;
    --text:       #dfe6ff;
    --text-sub:   #aeb9d8;
    --text-dim:   #7c87a8;
    --text-strong:#ffffff;

    --primary:    #f7a600;            /* GTA 橙金 */
    --primary-2:  #b87700;
    --primary-rgb:    247, 166, 0;
    --primary-2-rgb:  184, 119, 0;

    --accent:     #3ac9ff;            /* 洛圣都海岸蓝 */
    --accent-2:   #0f86b8;
    --success:    #37c06b;
    --warning:    #ffcf3f;
    --danger:     #ff5a5f;

    --radius:     0px;
    --shadow:     0 8px 30px rgba(3, 6, 16, .7);
    --nav-bg:     rgba(8, 12, 24, .95);
    --mask:       rgba(8, 12, 24, .9);

    --gta-orange: #f7a600;
    --gta-orange-2:#b87700;
    --gta-blue:   #3ac9ff;
    --gta-blue-2: #0f86b8;
    --gta-pink:   #ff3d8a;            /* 犯罪都市粉 */
    --gta-night:  #0a0e1a;
    --gta-night-2:#101627;
}

/* ===================== 导航栏 ===================== */
body.ui-gta5 .nav {
    position: sticky;
    background: #05070f;              /* 不透明实底，避免半透明黑条叠在背景图上 */
    backdrop-filter: none;            /* 关闭默认模糊，消除视觉上的透明矩形 */
    border-bottom: 1px solid rgba(163, 129, 245, .25);
    box-shadow: none;
}

/* ===================== 背景：洛圣都黄昏天际线 ===================== */
/* 说明：不要用 background-attachment:fixed —— 背景会锁定在视口，滚动时长页
   正文落在暗色渐变下方，看起来像被一层黑色矩形框覆盖、文字颜色变深。
   改为随内容滚动的柔和渐变即可。 */
body.ui-gta5 {
    background:
        linear-gradient(180deg, #101627 0%, #0a0e1a 45%, #05070f 100%);
    color: var(--text);
}

/* ===================== 字体（游戏 HUD 粗斜感） ===================== */
body.ui-gta5,
body.ui-gta5 .btn,
body.ui-gta5 input,
body.ui-gta5 textarea,
body.ui-gta5 select {
    font-family: 'Arial Black', 'Microsoft YaHei', 'PingFang SC', system-ui, sans-serif;
    letter-spacing: .5px;
}
body.ui-gta5 :is(h1, h2, h3),
body.ui-gta5 .sec-title {
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-strong);
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
}
body.ui-gta5 .sec-title {
    position: relative;
    padding-bottom: 14px;
    text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
body.ui-gta5 .sec-title::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent, var(--gta-blue), var(--gta-orange), var(--gta-pink), var(--gta-orange), var(--gta-blue), transparent);
}
body.ui-gta5 .sec-sub {
    color: var(--gta-blue);
    font-weight: 700;
}

/* ============================================================
   自定义区块 ① marquee —— 洛圣都机场接客大屏
   （GTA V 开场「Welcome to Los Santos」飞机广播质感）
   ============================================================ */
body.ui-gta5 .nb-marquee {
    position: relative;
    padding: 22px 26px;
    background:
        linear-gradient(90deg, rgba(247,166,0,.10), rgba(255,61,138,.05)),
        var(--panel);
    border: 1px solid var(--border-2);
    border-left: 4px solid var(--gta-orange);
    box-shadow: var(--shadow);
    overflow: hidden;
}
body.ui-gta5 .nb-marquee::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg,
        transparent 0, transparent 3px, rgba(255,255,255,.018) 3px, rgba(255,255,255,.018) 4px);
    pointer-events: none;
}
body.ui-gta5 .nb-marquee-tag {
    display: inline-block;
    padding: 2px 10px;
    margin-bottom: 10px;
    background: var(--gta-orange);
    color: #151000;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
}
body.ui-gta5 .nb-marquee b {
    display: block;
    font-size: 26px;
    letter-spacing: 3px;
    color: var(--text-strong);
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0,0,0,.5), 4px 4px 0 rgba(247,166,0,.35);
    margin-bottom: 6px;
}
body.ui-gta5 .nb-marquee p {
    margin: 0;
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.8;
}

/* ============================================================
   自定义区块 ② family —— GTA V 三主角阵营
   (Michael 蓝 / Franklin 绿 / Trevor 橙)
   ============================================================ */
body.ui-gta5 .nb-family {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
body.ui-gta5 .nb-protagonist {
    position: relative;
    padding: 22px 20px;
    background: var(--panel);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow);
    overflow: hidden;
}
body.ui-gta5 .nb-protagonist::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
}
body.ui-gta5 .nb-protagonist.michael::before { background: var(--gta-blue); }
body.ui-gta5 .nb-protagonist.franklin::before { background: var(--gta-orange-2); }
body.ui-gta5 .nb-protagonist.trevor::before   { background: var(--gta-pink); }

body.ui-gta5 .nb-protagonist .nb-band {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
body.ui-gta5 .nb-protagonist.michael .nb-band { color: var(--gta-blue); }
body.ui-gta5 .nb-protagonist.franklin .nb-band { color: var(--gta-orange); }
body.ui-gta5 .nb-protagonist.trevor .nb-band { color: var(--gta-pink); }

body.ui-gta5 .nb-protagonist b {
    display: block;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--text-strong);
    text-transform: uppercase;
    text-shadow: 2px 2px 0 rgba(0,0,0,.45);
    margin-bottom: 8px;
}
body.ui-gta5 .nb-protagonist p {
    margin: 0;
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.8;
}
body.ui-gta5 .nb-protagonist:hover {
    border-color: var(--text-strong);
    transform: translateY(-2px);
}

/* ===================== 面板 / 卡片（飞行状态栏/差事卡质感） ===================== */
body.ui-gta5 .goods-card,
body.ui-gta5 .product-card,
body.ui-gta5 .shop-item,
body.ui-gta5 .card,
body.ui-gta5 .plan,
body.ui-gta5 .seller,
body.ui-gta5 .board-box,
body.ui-gta5 .faq-item,
body.ui-gta5 .notice-bar {
    background: var(--panel);
    border: 1px solid var(--border-2);
    box-shadow: var(--shadow);
}
body.ui-gta5 .plan {
    border-top: 3px solid var(--gta-orange);
    position: relative;
}
body.ui-gta5 .plan.on {
    border-top-color: var(--gta-pink);
}
body.ui-gta5 .plan:hover,
body.ui-gta5 .seller:hover {
    border-top-color: var(--gta-blue);
}
body.ui-gta5 .plan .price,
body.ui-gta5 .plan .amount,
body.ui-gta5 .goods-card .price {
    color: var(--gta-orange);
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
body.ui-gta5 .plan-badge {
    background: var(--gta-pink);
    color: #fff;
}

/* ===================== 按钮（GTA 界面大按钮） ===================== */
body.ui-gta5 .btn-primary {
    background: linear-gradient(180deg, var(--gta-orange), var(--gta-orange-2));
    border: 0;
    color: #191000;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 0 3px 0 var(--gta-orange-2);
}
body.ui-gta5 .btn-primary:hover {
    filter: brightness(1.08);
}
body.ui-gta5 .btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--gta-orange-2);
}
body.ui-gta5 .btn-ghost,
body.ui-gta5 .btn-outline {
    border-color: var(--gta-blue);
    color: var(--gta-blue);
    background: transparent;
}
body.ui-gta5 .btn-ghost:hover,
body.ui-gta5 .btn-outline:hover {
    background: rgba(58, 201, 255, .10);
}

/* ===================== 页签选中态（监狱/探员蓝横条） ===================== */
body.ui-gta5 .tab.active,
body.ui-gta5 .tag.active,
body.ui-gta5 .filter-item.active {
    background: var(--gta-blue);
    color: #051225;
    font-weight: 900;
    text-shadow: none;
}
body.ui-gta5 .tabs .tab,
body.ui-gta5 .filter-item {
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--text-sub);
}

/* ===================== 通用字段 ===================== */
body.ui-gta5 input,
body.ui-gta5 textarea,
body.ui-gta5 select {
    background: rgba(10, 14, 26, .6);
    border: 1px solid var(--border-2);
    color: var(--text);
}
body.ui-gta5 input:focus,
body.ui-gta5 textarea:focus,
body.ui-gta5 select:focus {
    border-color: var(--gta-blue);
}

/* ===================== 响应式 ===================== */
@media (max-width: 820px) {
    body.ui-gta5 .nb-family { grid-template-columns: 1fr; }
    body.ui-gta5 .nb-marquee b { font-size: 20px; }
}