@charset "utf-8";
/* ==========================================================================
   创智云在线教育 · 课程列表页 + 课程详情页 视觉改版 (cz_course_v2.css)
   --------------------------------------------------------------------------
   作用域：本文件仅由 apps/course/Tpl/default/Video/index.html 和 view.html
           引入，因此其中所有选择器天然只作用于这两个页面，不影响其他页面。
   搭配：这两个页面同时引入了 cz_home_v2.css（复用头/尾/侧栏的现代覆盖），
         本文件只负责「列表页 + 详情页」内容区的覆盖。
   原则：只覆盖视觉，不改业务逻辑 / DOM / 事件钩子。选择器前缀照抄旧样式，
         保证权重压得住（旧样式如 .content-card .card-body .nav-item）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 设计令牌（与 cz_home_v2.css 相同；重复声明保证本文件可独立工作）
   -------------------------------------------------------------------------- */
:root {
  --cz-bg: #f6f8fb;
  --cz-surface: #ffffff;
  --cz-surface-2: #f1f4f9;
  --cz-surface-3: #e8eef7;
  --cz-line: #e6ebf2;
  --cz-line-strong: #d5dde9;
  --cz-ink: #0c1420;
  --cz-ink-2: #4a5769;
  --cz-ink-3: #8393a8;
  --cz-brand: #1668e3;
  --cz-brand-hover: #1259c7;
  --cz-brand-ink: #0b3e8f;
  --cz-brand-tint: #edf3fe;
  --cz-brand-tint-2: #dbe7fd;
  --cz-free: #0b9b6b;
  --cz-live: #e8542f;
  --cz-r-card: 16px;
  --cz-r-ctl: 10px;
  --cz-r-pill: 999px;
  --cz-sh-sm: 0 1px 2px rgba(12, 20, 32, .05), 0 0 0 1px rgba(12, 20, 32, .03);
  --cz-sh-md: 0 4px 14px -2px rgba(12, 20, 32, .08), 0 2px 5px -2px rgba(12, 20, 32, .04);
  --cz-sh-lg: 0 18px 44px -12px rgba(12, 20, 32, .16), 0 4px 12px -4px rgba(12, 20, 32, .06);
  --cz-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   一、列表页 + 详情页 公共基底
   ========================================================================== */
/* 旧灰底 → 冷调近白 */
body .content {
  background: var(--cz-bg) !important;
}

/* 列表页 / 详情页统一的容器节奏 */
.content .wrap {
  margin-top: 24px;
}

/* ==========================================================================
   二、课程列表页（course/Video/index.html + course.css）
   ========================================================================== */
/* 2.1 筛选区：白卡 + 胶囊 chip */
.search-box .card-body {
  border-radius: var(--cz-r-card) !important;
  box-shadow: var(--cz-sh-sm);
  border: 1px solid var(--cz-line);
  padding: 6px 0;
}

.search-box .card-body span {
  color: var(--cz-ink-2) !important;
  font-weight: 600;
  line-height: 40px !important;
  padding: 0 0 0 20px !important;
  width: 64px;
  text-align: left;
}

.search-box .card-body ul {
  width: auto !important;
}

.search-box .card-body ul li {
  margin: 5px 4px !important;
  border-radius: var(--cz-r-pill) !important;
  transition: background .15s var(--cz-ease), color .15s;
}

.search-box .card-body ul li a {
  padding: 5px 16px !important;
  line-height: 24px !important;
  color: var(--cz-ink-2) !important;
  border-radius: var(--cz-r-pill);
}

.search-box .card-body ul li a:hover {
  color: var(--cz-brand) !important;
  background: var(--cz-brand-tint);
}

.search-box .card-body ul li.selected,
.card-body .selected {
  background: var(--cz-brand) !important;
}

.search-box .card-body ul li.selected a {
  color: #fff !important;
}

/* 子级分类行：弱化分隔 */
.search-box .card-body .subs {
  border: 0 !important;
  border-top: 1px dashed var(--cz-line) !important;
  border-radius: 0 !important;
  margin-left: 0 !important;
}

.search-box .card-body .subs .sub-course {
  padding-left: 84px !important;
}

/* 2.2 类型条（直播/点播/班级） */
.video-clearfix-nav {
  background: var(--cz-surface) !important;
  border-radius: var(--cz-r-card);
  box-shadow: var(--cz-sh-sm);
  border: 1px solid var(--cz-line);
  padding: 6px 0;
  margin-top: 16px;
}

.video-clearfix-nav span {
  color: var(--cz-ink-2) !important;
  font-weight: 600;
  margin-top: 14px !important;
}

.video-clearfix-nav label {
  padding: 10px 20px !important;
  color: var(--cz-ink-2);
}

.video-clearfix-nav label:hover {
  color: var(--cz-brand) !important;
}

/* 2.3 排序条 */
.content-card .card-body dt {
  height: 48px !important;
  line-height: 48px !important;
  border-bottom: 1px solid var(--cz-line);
}

.content-card .card-body .nav-item {
  border-width: 0 !important;
  margin-left: 0 !important;
  padding: 0 16px !important;
  color: var(--cz-ink-2) !important;
}

.content-card .card-body .nav-item.active,
.content-card .card-body .nav-item:hover {
  background: transparent !important;
  border-color: transparent !important;
}

.content-card .card-body .nav-item a {
  color: var(--cz-ink-2) !important;
}

.content-card .card-body .nav-item.active a,
.content-card .card-body .nav-item:hover a,
.content-card .card-body .nav-item label:hover {
  color: var(--cz-brand) !important;
}

.content-card .card-body .nav-item.active a {
  font-weight: 600;
}

.content-card .card-body .special-video .nav-item label {
  color: var(--cz-ink-2);
}

.content-card .card-body .nav-item .Triangleup,
.content-card .card-body .nav-item .Triangledow {
  border-bottom-color: var(--cz-ink-3);
  border-top-color: var(--cz-ink-3);
}

.content-card .card-body .nav-item .Triangleup.red {
  border-bottom-color: var(--cz-brand);
}

.content-card .card-body .nav-item .Triangledow.red2 {
  border-top-color: var(--cz-brand);
}

/* 价格区间浮层 */
.price_ara_box {
  border: 1px solid var(--cz-line) !important;
  border-radius: var(--cz-r-ctl) !important;
  box-shadow: var(--cz-sh-lg);
}

.price_ara_ul li:hover {
  color: var(--cz-brand) !important;
}

.price_ara_sw a.btn {
  background: var(--cz-brand) !important;
  border-radius: 6px;
}

/* 2.4 课程卡片：float → grid，卡片现代化 */
.content-card .card-main .classlist {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.classlist li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: 1px solid var(--cz-line) !important;
  border-radius: var(--cz-r-card) !important;
  background: var(--cz-surface) !important;
  overflow: hidden;
  transition: transform .25s var(--cz-ease), box-shadow .25s var(--cz-ease), border-color .25s;
}

.classlist li:hover {
  transform: translateY(-6px);
  box-shadow: var(--cz-sh-lg);
  border-color: var(--cz-line-strong) !important;
}

.classlist .pic {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 580 / 320;
  border-radius: 0 !important;
}

.classlist .pic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .5s var(--cz-ease);
}

.classlist li:hover .pic img {
  transform: scale(1.05);
}

.classlist .pic .span02,
.classlist .pic .span03 {
  border-radius: 0 0 10px 0;
}

.classlist .pic .hasbuy {
  border-radius: 6px 0 0 0;
  background: rgba(12, 20, 32, .55);
}

.classlist h3 {
  margin: 14px 16px 8px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 46px;
}

.classlist h3 a {
  font-size: 16px !important;
  color: var(--cz-ink) !important;
  font-weight: 500;
}

.classlist h3 a:hover {
  color: var(--cz-brand) !important;
}

.classlist .info {
  border-bottom: 0 !important;
  padding: 0 16px 12px !important;
  overflow: hidden;
}

.classlist .info .fr {
  color: var(--cz-ink-3) !important;
  line-height: 28px !important;
}

.classlist .price {
  float: left !important;
  color: var(--cz-brand) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
}

.classlist .price.free {
  color: var(--cz-free) !important;
}

.classlist .price .del {
  color: var(--cz-ink-3) !important;
}

.classlist .bot {
  margin: 0 16px !important;
  height: 52px !important;
  border-top: 1px solid var(--cz-line);
  padding-top: 6px;
}

.classlist .std {
  padding: 8px 0 0 !important;
  height: auto !important;
}

.classlist .std span a {
  color: var(--cz-ink-3) !important;
}

.classlist .std img {
  border-radius: 50% !important;
}

.classlist .name {
  color: var(--cz-ink-3) !important;
  line-height: 20px !important;
  padding-top: 12px;
}

/* 2.5 猜你喜欢 */
.guess_like {
  margin-top: 20px;
}

.guess_like_tit {
  color: var(--cz-ink) !important;
  font-size: 18px !important;
  font-weight: 600;
  line-height: 32px !important;
  margin-bottom: 16px !important;
  padding-left: 12px;
  position: relative;
}

.guess_like_tit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--cz-brand);
}

.classlist02 {
  margin-right: 0 !important;
  padding: 0 !important;
  list-style: none;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.classlist02 li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  border: 1px solid var(--cz-line) !important;
  border-radius: var(--cz-r-card) !important;
  overflow: hidden;
  transition: transform .25s var(--cz-ease), box-shadow .25s var(--cz-ease);
}

.classlist02 li:hover {
  transform: translateY(-4px);
  box-shadow: var(--cz-sh-md);
}

.classlist02 .pic {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 580 / 320;
}

.classlist02 .pic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.classlist02 h3 {
  margin: 10px 12px 6px !important;
}

.classlist02 h3 a {
  color: var(--cz-ink) !important;
  font-weight: 500;
}

.classlist02 h3 a:hover {
  color: var(--cz-brand) !important;
}

.classlist02 .info {
  margin: 0 12px 12px !important;
}

.classlist02 .price {
  color: var(--cz-brand) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.classlist02 .price.free {
  color: var(--cz-free) !important;
}

/* 2.6 分页 */
.pagebox a {
  border: 1px solid var(--cz-line) !important;
  background: var(--cz-surface) !important;
  color: var(--cz-ink-2) !important;
  border-radius: 8px !important;
  line-height: 32px !important;
  transition: all .15s var(--cz-ease);
}

.pagebox a:hover {
  border-color: var(--cz-brand) !important;
  color: var(--cz-brand) !important;
}

.pagebox .current,
.pagebox a.cursor {
  border: 1px solid var(--cz-brand) !important;
  background: var(--cz-brand) !important;
  color: #fff !important;
}

.pagebox a.end,
.pagebox a.home,
.pagebox a.next,
.pagebox a.pre {
  border-radius: 8px !important;
}

/* ==========================================================================
   三、课程详情页（course/Video/view.html + view.css）
   ========================================================================== */
/* 3.1 顶部信息卡容器 */
.topbox {
  background: var(--cz-bg) !important;
  padding: 24px 0 0 !important;
}

.topbox .wrap {
  background: var(--cz-surface) !important;
  width: 1200px !important;
  padding: 15px !important;
  box-sizing: border-box;
  border-radius: var(--cz-r-card);
  box-shadow: var(--cz-sh-sm);
}

.classtopbox {
  padding-bottom: 0 !important;
}

/* 封面 */
.classtopbox .left {
  width: 580px !important;
  height: 320px !important;
  border-radius: 12px;
  overflow: hidden;
}

.classtopbox .left img {
  width: 100% !important;
  min-height: 0 !important;
  height: 100% !important;
  object-fit: cover;
}

.classtopbox .left a {
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px;
}

.classtopbox .left .cover-btn:hover {
  background-color: rgba(0, 0, 0, .45);
}

/* 右侧信息 */
.classtopbox .right {
  margin-left: 30px !important;
  width: 560px !important;
}

.classtopbox h3 {
  color: var(--cz-ink) !important;
  font-size: 26px !important;
  line-height: 1.4 !important;
  font-weight: 600;
}

.classtopbox .right .inils {
  border-bottom: 1px solid var(--cz-line) !important;
  color: var(--cz-ink-3) !important;
}

.classtopbox .classtopitem {
  color: var(--cz-ink-2) !important;
}

.classtopbox .classtopitem .l1 {
  color: var(--cz-ink-3) !important;
}

.classtopbox .classtopitem .l2 {
  color: var(--cz-ink-2) !important;
}

.classtopbox .l2 em {
  background-color: var(--cz-live) !important;
  border-radius: 4px;
}

/* 优惠券 */
.coupons .face {
  color: var(--cz-ink-3) !important;
}

.coupons .more {
  color: var(--cz-ink-3) !important;
}

/* 价格 */
.classtopbox .price {
  height: 54px !important;
  line-height: 54px !important;
}

.classtopbox .new_price {
  color: var(--cz-brand) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  height: 54px !important;
}

.classtopbox .new_price em {
  font-size: 15px !important;
  color: var(--cz-ink-3) !important;
  font-weight: 400;
}

.classtopbox .new_price span {
  font-size: 28px !important;
}

.classtopbox .old_price {
  color: var(--cz-ink-3) !important;
  line-height: 56px !important;
}

/* 购买类型胶囊 */
.classtopbox .buytype a {
  border: 1px solid var(--cz-line-strong) !important;
  border-radius: var(--cz-r-ctl) !important;
  color: var(--cz-ink-2) !important;
  height: 32px !important;
  line-height: 32px !important;
  transition: all .15s var(--cz-ease);
}

.classtopbox .buytype a.on,
.classtopbox .buytype a:hover {
  width: 74px;
  height: 32px !important;
  border: 1px solid var(--cz-brand) !important;
  color: var(--cz-brand) !important;
  background: var(--cz-brand-tint);
  line-height: 32px !important;
}

/* 购买按钮 */
.classtopbox .btn a {
  border-radius: var(--cz-r-ctl) !important;
  font-weight: 600;
  transition: all .18s var(--cz-ease);
}

.classtopbox .btn a.buy {
  border: 1px solid var(--cz-brand) !important;
  background-color: var(--cz-brand) !important;
  box-shadow: 0 8px 22px -8px rgba(22, 104, 227, .5);
}

.classtopbox .btn a.buy:hover {
  background-color: var(--cz-brand-hover) !important;
  border-color: var(--cz-brand-hover) !important;
}

.classtopbox .btn a.learn {
  border: 1px solid var(--cz-brand) !important;
  color: var(--cz-brand) !important;
  background: var(--cz-surface);
}

.classtopbox .btn a.learn:hover {
  background: var(--cz-brand-tint) !important;
}

/* 收藏/分享/客服/手机查看 */
.classtopbox .info div {
  color: var(--cz-ink-3) !important;
}

.classtopbox .info a {
  color: var(--cz-ink-3);
}

.classtopbox .info a:hover {
  color: var(--cz-brand);
}

/* 3.2 主体区（目录/简介/资料 + 右侧栏） */
.content.bgf7.pt20 {
  padding-top: 24px !important;
}

.content.bgf7.pt20 .wrap {
  margin-top: 0 !important;
}

/* Tab 导航 */
.classmain-hd {
  background: var(--cz-surface) !important;
  border-radius: var(--cz-r-card) var(--cz-r-card) 0 0;
  border: 1px solid var(--cz-line);
  border-bottom: 0;
  height: 60px !important;
}

.classmain-hd ul {
  border-bottom: 1px solid var(--cz-line) !important;
  padding: 0 12px !important;
  height: 59px !important;
}

.classmain-hd li {
  margin-right: 8px !important;
}

.classmain-hd li a {
  color: var(--cz-ink-2) !important;
  font-size: 15px !important;
  line-height: 58px !important;
  position: relative;
}

.classmain-hd li a:hover {
  color: var(--cz-brand) !important;
  background: transparent !important;
}

.classmain-hd li.on a {
  color: var(--cz-brand) !important;
  font-weight: 600;
  border-bottom: 0 !important;
}

.classmain-hd li.on a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cz-brand);
}

/* 内容区 */
.classmain-bd {
  background: var(--cz-surface) !important;
  border: 1px solid var(--cz-line);
  border-top: 0;
  border-radius: 0 0 var(--cz-r-card) var(--cz-r-card);
  padding: 20px 0 !important;
}

/* 课程目录（模板实际类名：.ml-tit 章节 / .ml-list 课时） */
.ml-tit {
  border-bottom: 1px solid var(--cz-line) !important;
  background: var(--cz-surface-2);
  border-radius: 8px;
  margin-bottom: 8px;
}

.ml-tit .two-tit {
  color: var(--cz-ink) !important;
  font-weight: 600;
}

.ml-list {
  border-bottom: 1px solid var(--cz-line) !important;
}

.classmain_con dd:hover {
  background: var(--cz-brand-tint) !important;
  color: var(--cz-ink) !important;
}

.ml-list .three {
  color: var(--cz-ink-2) !important;
}

.lesson-free,
.lesson-money {
  border-radius: 4px !important;
}

.lesson-free {
  background: var(--cz-free) !important;
}

.lesson-money {
  background: var(--cz-brand) !important;
}

.begin {
  background: var(--cz-brand) !important;
  border: 2px solid var(--cz-brand) !important;
  border-radius: var(--cz-r-pill) !important;
}

.flish {
  color: var(--cz-brand) !important;
}

.classmain_con dd .two .imgpos,
.classmain_con dd .two .imgpos:after {
  border-color: var(--cz-brand) !important;
}

/* 右侧栏 */
.classsideitem {
  background: var(--cz-surface) !important;
  border-radius: var(--cz-r-card);
  border: 1px solid var(--cz-line);
  box-shadow: var(--cz-sh-sm);
  overflow: hidden;
}

.classsidetit {
  border-bottom: 1px solid var(--cz-line) !important;
  color: var(--cz-ink) !important;
  font-size: 16px !important;
  font-weight: 600;
  height: 56px !important;
  line-height: 56px !important;
}

.classsidecon {
  padding: 20px !important;
}

.class_js_dl dt img,
.class_jg_dl dt img {
  border-radius: 50%;
  object-fit: cover;
}

.class_js_dl dd h3 a,
.class_jg_dl dd h3 a {
  color: var(--cz-ink) !important;
  font-weight: 600;
}

.class_js_txt,
.class_jg_txt {
  color: var(--cz-ink-3) !important;
  line-height: 1.7;
}

.class_jg_ul {
  display: flex;
  border-top: 1px solid var(--cz-line);
  margin-top: 16px;
  padding-top: 16px;
}

.class_jg_ul li {
  flex: 1;
  text-align: center;
}

.class_jg_ul li p {
  color: var(--cz-ink-3) !important;
}

.class_jg_ul li span {
  color: var(--cz-ink) !important;
  font-size: 18px;
  font-weight: 600;
}

/* 评论/提问/笔记输入区 */
.qa-comment-input img {
  border-radius: 50% !important;
}

.btn-mini {
  background: var(--cz-brand) !important;
  border-radius: 8px !important;
}

.qa-ci-iarea {
  border-color: var(--cz-line) !important;
  border-radius: var(--cz-r-ctl) !important;
  color: var(--cz-ink-2) !important;
}