/* ============================================================
   旅可伴服务交易平台 · 公共布局（全站加载）
   深靛整条页头 + 浅色页脚 + 共用组件（服务卡片 / 区块标题 / 按钮 / 内页横幅）
   类名前缀：bk_ （交互 ID 沿用 xy_hd_bar / zh_mb_* / xy_msearch / zh_feedback_btn 不变）
   ============================================================ */

body.bk_body { background: var(--bk-pearl); color: var(--bk-ink); font-size: 15px; }
.bk_in { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.bk_main { min-height: 50vh; }

/* ---------- ① 信息条 ---------- */
.bk_top { background: var(--bk-night); color: var(--bk-lav-soft); font-size: 12.5px; }
.bk_top_in { display: flex; align-items: center; justify-content: space-between; height: 34px; gap: 16px; }
.bk_top_l, .bk_top_r { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.bk_top_l i { color: var(--bk-gold); margin-right: 6px; }
.bk_top_sep { width: 1px; height: 12px; background: rgba(169,166,216,.3); }
.bk_top_r a { color: var(--bk-lav-soft); }
.bk_top_r a:hover { color: #fff; }
.bk_top_r i { margin-right: 5px; }
.bk_top_join { color: var(--bk-gold-light) !important; }

/* ---------- ② 主栏 ---------- */
.bk_bar { position: sticky; top: 0; z-index: 1000; background: var(--bk-indigo-deep);
    background-image: linear-gradient(90deg, #232052 0%, #2A2766 45%, #34318A 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset; transition: box-shadow .2s; }
.bk_bar.is_stuck { box-shadow: 0 8px 24px rgba(20,17,48,.35); }
.bk_bar_in { display: flex; align-items: center; height: 72px; gap: 28px; }

.bk_logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.bk_logo img { height: 40px; width: auto; }
.bk_logo_sub { font-size: 12px; color: var(--bk-gold-light); letter-spacing: 2px; padding-left: 12px;
    border-left: 1px solid rgba(230,207,122,.35); line-height: 1.2; }

.bk_nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.bk_nav > a, .bk_nav_item > a { display: inline-flex; align-items: center; gap: 4px; height: 72px; padding: 0 12px;
    color: rgba(255,255,255,.82); font-size: 15px; position: relative; white-space: nowrap; }
.bk_nav > a::after, .bk_nav_item > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 18px;
    height: 2px; background: var(--bk-gold); transform: scaleX(0); transition: transform .2s; }
.bk_nav > a:hover, .bk_nav_item > a:hover, .bk_nav a.active { color: #fff; }
.bk_nav > a:hover::after, .bk_nav_item > a:hover::after, .bk_nav a.active::after { transform: scaleX(1); }
.bk_nav_item { position: relative; }
.bk_nav_item i { font-size: 11px; opacity: .7; }
.bk_nav_drop { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: #fff;
    border-radius: 0 0 var(--bk-radius) var(--bk-radius); box-shadow: var(--bk-shadow-lg); padding: 8px 0; }
.bk_nav_item:hover .bk_nav_drop { display: block; }
.bk_nav_drop a { display: block; padding: 8px 18px; color: var(--bk-ink); font-size: 14px; }
.bk_nav_drop a:hover { background: var(--bk-lav-tint); color: var(--bk-indigo); }

.bk_search { position: relative; width: 250px; flex-shrink: 0; }
.bk_search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bk-lav-soft); font-size: 13px; }
.bk_search input { width: 100%; height: 38px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08); color: #fff; padding: 0 16px 0 38px; font-size: 13px; outline: none; transition: all .2s; }
.bk_search input::placeholder { color: rgba(255,255,255,.5); }
.bk_search input:focus { background: rgba(255,255,255,.14); border-color: var(--bk-gold); }

.bk_bar_r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bk_icon_btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(255,255,255,.08); border: none; font-size: 15px; }
.bk_icon_btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.bk_msearch { display: none; }
.bk_cart { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px;
    border-radius: 999px; background: var(--bk-gold); color: var(--bk-night); font-weight: 600; font-size: 14px; }
.bk_cart:hover { background: var(--bk-gold-light); color: var(--bk-night); }
.bk_cart em { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: #fff; color: var(--bk-indigo-deep); font-size: 11px; font-style: normal; font-weight: 700;
    line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bk-indigo-deep); }
.bk_burger { display: none; background: none; border: none; color: #fff; font-size: 20px; padding: 4px 6px; }

/* ---------- 移动端抽屉（覆盖 app.css 基础样式） ---------- */
.zh_mb_drawer { left: auto; right: 0; transform: translateX(100%); background: var(--bk-pearl); }
.zh_mb_drawer.show { transform: translateX(0); }
.zh_mb_drawer_head { background: var(--bk-grad-night); border-bottom: 2px solid var(--bk-gold); }
.bk_mb_logo { height: 30px; width: auto; }
.zh_mb_drawer_search form { border-color: var(--bk-indigo); border-radius: 999px; }
.zh_mb_drawer_search button { background: var(--bk-indigo); }
.zh_mb_drawer_section { background: #fff; margin-bottom: 8px; border-bottom: none; }
.zh_mb_drawer_section a:hover { background: var(--bk-lav-tint); color: var(--bk-indigo); }

/* ---------- 通知 ---------- */
.zh_alert_success { background: var(--bk-lav-tint); color: var(--bk-indigo-deep); border-left: 4px solid var(--bk-indigo); }
.zh_alert_error { background: var(--bk-rose-tint); color: var(--bk-rose); border-left: 4px solid var(--bk-rose); }

/* ---------- 页脚（浅色） ---------- */
.bk_ft { margin-top: 64px; background: var(--bk-pearl-2); color: var(--bk-ink-2); border-top: 3px solid var(--bk-indigo); }
.bk_ft_assure { background: #fff; border-bottom: 1px solid var(--bk-line); }
.bk_ft_assure_in { display: grid; grid-template-columns: repeat(4, 1fr); }
.bk_ft_assure_it { display: flex; align-items: center; gap: 14px; padding: 22px 18px; }
.bk_ft_assure_it + .bk_ft_assure_it { border-left: 1px solid var(--bk-line-soft); }
.bk_ft_assure_it > i { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; background: var(--bk-lav-tint); color: var(--bk-indigo); font-size: 18px; }
.bk_ft_assure_it b { display: block; color: var(--bk-ink); font-size: 15px; }
.bk_ft_assure_it span { font-size: 12.5px; color: var(--bk-ink-3); }

.bk_ft_main_in { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; gap: 40px; padding-top: 44px; padding-bottom: 40px; }
.bk_ft_logo { height: 46px; width: auto; margin-bottom: 16px; }
.bk_ft_brand p { font-size: 13.5px; line-height: 1.9; max-width: 420px; }
.bk_ft_col h4 { font-size: 15px; font-weight: 700; color: var(--bk-indigo-deep); margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--bk-pearl-3); position: relative; }
.bk_ft_col h4::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 28px; height: 2px; background: var(--bk-gold); }
.bk_ft_col a, .bk_ft_col span { display: block; font-size: 13.5px; color: var(--bk-ink-2); padding: 5px 0; line-height: 1.7; }
.bk_ft_col a:hover { color: var(--bk-indigo); }
.bk_ft_contact a, .bk_ft_contact span { display: flex; gap: 10px; }
.bk_ft_contact i { color: var(--bk-indigo); width: 14px; margin-top: 5px; flex-shrink: 0; }

.bk_ft_copy { background: var(--bk-pearl-3); font-size: 12.5px; color: var(--bk-ink-3); }
.bk_ft_copy_in { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; padding-top: 16px; padding-bottom: 16px; }
.bk_ft_copy a { color: var(--bk-ink-2); }
.bk_ft_copy a:hover { color: var(--bk-indigo); }

/* ---------- 回顶 / 反馈弹窗 配色 ---------- */
.zh_scroll_top { background: var(--bk-indigo) !important; color: #fff !important; border-radius: 50% !important; }
.zh_scroll_top:hover { background: var(--bk-indigo-deep) !important; }
.zh_fb_header { background: var(--bk-grad-night) !important; }
.zh_fb_submit { background: var(--bk-indigo) !important; }

/* ============================================================
   共用组件
   ============================================================ */

/* 区块标题：左对齐，金色序号 + 标题 + 描述，右侧链接 */
.bk_sec { padding: 56px 0 0; }
.bk_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.bk_head_no { display: block; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--bk-gold-deep); margin-bottom: 6px; }
.bk_head h2 { font-size: 26px; font-weight: 800; color: var(--bk-ink); margin: 0; letter-spacing: .5px; }
.bk_head p { margin: 6px 0 0; font-size: 14px; color: var(--bk-ink-3); }
.bk_more { font-size: 14px; color: var(--bk-indigo); white-space: nowrap; }
.bk_more i { font-size: 12px; margin-left: 4px; transition: transform .2s; }
.bk_more:hover i { transform: translateX(3px); }

/* 按钮 / 标签 */
.bk_btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 24px;
    border-radius: 999px; font-size: 15px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: all .2s; }
.bk_btn_gold { background: var(--bk-gold); color: var(--bk-night); }
.bk_btn_gold:hover { background: var(--bk-gold-light); color: var(--bk-night); }
.bk_btn_indigo { background: var(--bk-indigo); color: #fff; }
.bk_btn_indigo:hover { background: var(--bk-indigo-deep); color: #fff; }
.bk_btn_line { background: transparent; color: var(--bk-indigo); border-color: var(--bk-indigo); }
.bk_btn_line:hover { background: var(--bk-indigo); color: #fff; }
.bk_chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px;
    font-size: 12px; background: var(--bk-lav-tint); color: var(--bk-indigo); white-space: nowrap; }
.bk_chip_gold { background: var(--bk-gold-tint); color: var(--bk-gold-deep); }

/* 价格：¥500 / 8小时 */
.bk_price { display: inline-flex; align-items: baseline; gap: 4px; color: var(--bk-indigo); font-weight: 800; }
.bk_price small { font-size: 13px; font-weight: 700; }
.bk_price b { font-size: 22px; line-height: 1; font-family: "DIN Alternate", "Helvetica Neue", Arial, sans-serif; }
.bk_price em { font-style: normal; font-size: 13px; color: var(--bk-ink-3); font-weight: 400; }

/* 服务卡片（列表 / 推荐 / 相关） */
.bk_card { display: flex; flex-direction: column; background: #fff; border-radius: var(--bk-radius); overflow: hidden;
    border: 1px solid var(--bk-line); transition: transform .25s, box-shadow .25s, border-color .25s; height: 100%; }
.bk_card:hover { transform: translateY(-4px); box-shadow: var(--bk-shadow-lg); border-color: transparent; }
.bk_card_img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bk-pearl-2); }
.bk_card_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.bk_card:hover .bk_card_img img { transform: scale(1.05); }
.bk_card_city { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; height: 26px;
    padding: 0 10px; border-radius: 999px; background: rgba(27,24,64,.78); color: #fff; font-size: 12px; backdrop-filter: blur(4px); }
.bk_card_city i { color: var(--bk-gold-light); }
.bk_card_flag { position: absolute; right: 12px; top: 12px; height: 24px; padding: 0 9px; border-radius: 4px;
    background: var(--bk-gold); color: var(--bk-night); font-size: 12px; font-weight: 700; line-height: 24px; }
.bk_card_body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.bk_card_cat { font-size: 12px; color: var(--bk-gold-deep); font-weight: 600; margin-bottom: 4px; }
.bk_card_name { font-size: 15.5px; font-weight: 700; line-height: 1.5; margin: 0 0 8px; color: var(--bk-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 46px; }
.bk_card_name a { color: inherit; }
.bk_card_name a:hover { color: var(--bk-indigo); }
.bk_card_meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--bk-ink-3); margin-bottom: 12px; }
.bk_card_meta i { color: var(--bk-lav); margin-right: 4px; }
.bk_card_foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 12px;
    border-top: 1px dashed var(--bk-line); }
.bk_card_who { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--bk-ink-2); }
.bk_card_who span { width: 22px; height: 22px; border-radius: 50%; background: var(--bk-indigo); color: #fff; font-size: 11px;
    font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* 服务者首字母头像 */
.bk_avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 800;
    color: #fff; background: var(--bk-grad-indigo); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--bk-gold); }

/* 内页横幅 */
.bk_pagehero { position: relative; color: #fff; background: var(--bk-night) center / cover no-repeat; overflow: hidden; }
.bk_pagehero::before { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(27,24,64,.94) 0%, rgba(27,24,64,.78) 45%, rgba(27,24,64,.35) 100%); }
.bk_pagehero_in { position: relative; padding-top: 44px; padding-bottom: 44px; }
.bk_crumb { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.bk_crumb a { color: rgba(255,255,255,.8); }
.bk_crumb a:hover { color: var(--bk-gold-light); }
.bk_crumb span { margin: 0 8px; opacity: .5; }
.bk_pagehero h1 { font-size: 32px; font-weight: 800; margin: 0 0 10px; }
.bk_pagehero h1 i { color: var(--bk-gold); margin-right: 12px; font-size: 26px; }
.bk_pagehero p { max-width: 640px; font-size: 14.5px; line-height: 1.8; color: rgba(255,255,255,.8); margin: 0; }

/* 分页 */
.zh_pager .pagination { gap: 6px; }
.zh_pager .page-link { border-radius: 8px !important; color: var(--bk-indigo); border-color: var(--bk-line); }
.zh_pager .page-item.active .page-link { background: var(--bk-indigo); border-color: var(--bk-indigo); color: #fff; }

/* 空状态 */
.bk_empty { text-align: center; padding: 60px 20px; background: #fff; border-radius: var(--bk-radius); border: 1px dashed var(--bk-line); }
.bk_empty i { font-size: 40px; color: var(--bk-lav-soft); margin-bottom: 14px; }
.bk_empty h3 { font-size: 17px; margin-bottom: 6px; }
.bk_empty p { color: var(--bk-ink-3); font-size: 14px; margin: 0; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1200px) {
    .bk_search { width: 190px; }
    .bk_nav > a, .bk_nav_item > a { padding: 0 9px; font-size: 14.5px; }
    .bk_logo_sub { display: none; }
}
@media (max-width: 992px) {
    .bk_top { display: none; }
    .bk_bar_in { height: 60px; gap: 12px; }
    .bk_nav, .bk_search { display: none; }
    .bk_burger, .bk_msearch { display: inline-flex; }
    .bk_logo { flex: 1; }
    .bk_logo img { height: 32px; }
    .bk_cart span { display: none; }
    .bk_cart { width: 38px; padding: 0; justify-content: center; }
    .bk_ft_assure_in { grid-template-columns: repeat(2, 1fr); }
    .bk_ft_assure_it:nth-child(3) { border-left: none; }
    .bk_ft_assure_it:nth-child(n+3) { border-top: 1px solid var(--bk-line-soft); }
    .bk_ft_main_in { grid-template-columns: 1fr 1fr; gap: 28px; }
    .bk_ft_brand { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
    .bk_in { padding: 0 16px; }
    .bk_acc { display: none; }
    .bk_ft { margin-top: 44px; }
    .bk_ft_assure_in { grid-template-columns: 1fr; }
    .bk_ft_assure_it { padding: 14px 4px; border-left: none !important; }
    .bk_ft_assure_it + .bk_ft_assure_it { border-top: 1px solid var(--bk-line-soft); }
    .bk_ft_main_in { grid-template-columns: 1fr; }
    .bk_head { flex-direction: column; align-items: flex-start; }
    .bk_head h2 { font-size: 22px; }
    .bk_sec { padding-top: 40px; }
    .bk_pagehero h1 { font-size: 24px; }
}

/* 共用：卡片网格子项可收缩 */
.bk_card, .bk_card_body { min-width: 0; }
.bk_ft_main_in > *, .bk_ft_assure_in > * { min-width: 0; }
.bk_ft_col a, .bk_ft_col span { overflow-wrap: anywhere; }