/* S-02B visual layer. The original UniApp detail and fixed-booking components
   retain their data sources, handlers, routes, and submission flow. */
body.s02b-detail, body.s02b-fixed { background: #f7f8fa; color: #292d31; }
body.s02b-detail uni-page-body, body.s02b-fixed uni-page-body {
  display: block; max-width: 520px; min-height: 100vh; margin: 0 auto;
  background: #f7f8fa; box-shadow: 0 0 26px rgba(30, 25, 20, .06);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body.s02b-detail uni-page-body > .content,
body.s02b-fixed uni-page-body > .content {
  width: 100% !important; height: auto !important; min-height: 100vh;
  padding: calc(58px + env(safe-area-inset-top)) 14px 108px !important;
  background: linear-gradient(160deg, #fff7ec, #f7f8fa 230px) !important;
}
body.s02b-detail uni-page-body > .content::before,
body.s02b-fixed uni-page-body > .content::before {
  display: block; margin: 0 3px 18px; color: #30302f;
  font-size: 25px; line-height: 1.3; font-weight: 750; letter-spacing: -.4px;
}
body.s02b-detail uni-page-body > .content::before { content: '老师详细资料'; }
body.s02b-fixed uni-page-body > .content::before { content: '固定课程预约'; }
body.s02b-detail #s02-return, body.s02b-fixed #s02-return {
  top: calc(12px + env(safe-area-inset-top));
  left: max(14px, calc((100vw - 520px)/2 + 14px));
  z-index: 10002; padding: 8px 12px; border-radius: 11px;
  font-size: 13px; font-weight: 650; color: #d46b1a;
  background: #fff; border-color: #f1ddc9;
}

/* Original teacher detail page, presented as a profile and video. */
body.s02b-detail .content > .listItem {
  display: flex; flex-direction: column; gap: 12px; width: 100% !important;
  margin: 0 !important; border-radius: 0 !important;
}
body.s02b-detail .listItem > .BoxItem {
  order: 0; width: 100% !important; margin: 0 !important; padding: 19px !important;
  border: 1px solid #f1e9e1; border-radius: 18px !important;
  background: #fff; box-shadow: 0 6px 22px rgba(83, 54, 28, .05);
}
body.s02b-detail .listItem::before {
  content: '自我介绍视频'; order: 1; display: block;
  margin: 11px 3px 0; font-size: 17px; font-weight: 730; color: #33312f;
}
body.s02b-detail .listItem > uni-video {
  order: 2; display: block; width: 100% !important; height: 225px !important;
  overflow: hidden; border-radius: 16px !important; background: #202020;
  box-shadow: 0 9px 25px rgba(25, 20, 16, .13);
}
body.s02b-detail .listItem .BoxOne { display: flex; align-items: center; gap: 13px; }
body.s02b-detail .listItem .BoxContent { min-width: 0; }
body.s02b-detail .listItem .BoxTop { margin-left: 0 !important; flex-wrap: wrap; gap: 4px; }
body.s02b-detail .listItem .BoxTop .title { font-size: 21px !important; color: #282b2c !important; }
body.s02b-detail .listItem .BoxTop .Newtitle { color: #cf6f22 !important; font-size: 12px !important; }
body.s02b-detail .listItem .solid { border: 0 !important; height: 1px !important; background: #f0ebe6 !important; margin: 17px 0 !important; }
body.s02b-detail .listItem .headers_title { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 !important; }
body.s02b-detail .listItem .headers_title::before { content: '老师介绍'; font-size: 15px; font-weight: 700; color: #333; }
body.s02b-detail .listItem .headers_title > .view { display: none; }
body.s02b-detail .listItem .headers_title > uni-text { margin: 0 !important; color: #696662 !important; font-size: 13px !important; line-height: 1.7; white-space: pre-wrap; }
body.s02b-detail .s02-detail-contact-row { width: 100%; margin: 12px 0 0; padding: 0 3px; }
body.s02b-detail .s02-detail-contact-row button { width: 100%; min-height: 44px; margin: 0; border: 1px solid #f4c89f; border-radius: 11px; background: #fff4e9; color: #cc6d20; font-size: 14px; font-weight: 700; }
/* Reviews are deferred to S-02B-Reviews; hide the existing summary and list together. */
body.s02b-detail .content > .BoxItemNew,
body.s02b-detail .content > .MenusLists { display: none !important; }
body.s02b-detail .regular {
  left: 50% !important; transform: translateX(-50%); max-width: 520px;
  gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  background: rgba(255,255,255,.97) !important; box-shadow: 0 -5px 18px rgba(57,41,27,.07) !important;
}
body.s02b-detail .regular button {
  flex: 1; min-width: 0; height: 44px !important; margin: 0 !important;
  border-radius: 10px !important; font-size: 13px !important; font-weight: 700 !important;
}
body.s02b-detail .regular .leftButton { color: #d97827 !important; background: #fff4e8 !important; border: 1px solid #f8d2ab; }
body.s02b-detail .regular .rightButton { color: #fff !important; background: #ee842a !important; border: 1px solid #ee842a; }

/* Original fixed course page. Styling and step cues leave its number boxes,
   weekly timetable, card picker, QR flow, and handlers untouched. */
body.s02b-fixed .content > .Box,
body.s02b-fixed .content > .message_Flex,
body.s02b-fixed .content > .headers_Flex,
body.s02b-fixed .content > .headers {
  width: 100% !important; margin: 0 0 12px !important;
  border: 1px solid #f1e8de; border-radius: 17px !important;
  background: #fff !important; box-shadow: 0 5px 20px rgba(83,54,28,.045);
}
body.s02b-fixed .content > .Box { padding: 16px !important; }
body.s02b-fixed .Box .BoxView { align-items: flex-start; }
body.s02b-fixed .Box .BoxContent { min-width: 0; }
body.s02b-fixed .Box .title { font-size: 20px !important; color: #282b2c !important; }
body.s02b-fixed .Box .Newtitle { color: #77716b !important; font-size: 12px !important; }
body.s02b-fixed .content > .Box::after {
  content: '本周创建固定预约 · 下周开始自动开课'; display: block;
  margin: 14px 0 0; padding: 9px 11px; border-radius: 9px;
  color: #b86520; background: #fff4e8; font-size: 12px; line-height: 1.5;
}
body.s02b-fixed .content > .message_Flex { padding: 12px 14px !important; color: #7e6c5b !important; background: #fffaf4 !important; font-size: 12px !important; line-height: 1.6; }
body.s02b-fixed .content > .headers_title, body.s02b-fixed .content > .scrollBody { display: none !important; }
body.s02b-fixed .content > .headers_Flex { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px !important; }
body.s02b-fixed .content > .headers_Flex::before {
  content: 'STEP 1 · 选择预约数量'; flex: 0 0 100%; margin-bottom: 9px;
  color: #db7623; font-size: 11px; font-weight: 750; letter-spacing: .3px;
}
body.s02b-fixed .content > .headers_Flex:nth-child(7)::before { content: 'STEP 2 · 选择每周课程数'; }
body.s02b-fixed .content > .headers_Flex .headers_title { margin: 0 !important; font-weight: 720; }
body.s02b-fixed .content > .headers_Flex .headers_title .view { background: #ed852d !important; }
body.s02b-fixed .content > .headers_Flex .u-number-box { margin-left: auto; }
body.s02b-fixed .content > .working_hours { padding: 2px 8px 12px; margin: -7px 0 12px !important; color: #8c8278; font-size: 12px; }
body.s02b-fixed .content > .text_flex { padding: 7px 8px; color: #8c8278; font-size: 12px; line-height: 1.5; }
body.s02b-fixed .content > .headers { display: block; padding: 16px 9px 9px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.s02b-fixed .content > .headers::before {
  content: 'STEP 3 · 选择固定星期与时间'; display: block; margin: 0 7px 12px;
  color: #db7623; font-size: 11px; font-weight: 750; letter-spacing: .3px;
}
body.s02b-fixed .content > .buttonFlex { display: flex; gap: 10px; align-items: stretch; width: 100%; margin: 10px 0 20px !important; }
body.s02b-fixed .content > .buttonFlex .Single_appointment {
  flex: 1; width: auto !important; min-width: 0; height: 46px !important;
  margin: 0 !important; border-radius: 11px !important;
  background: #ee842a !important; color: white !important;
  font-size: 13px !important; font-weight: 720; letter-spacing: 0 !important;
}
body.s02b-fixed .content > .buttonFlex .Single_appointment:nth-child(2) { background: #fff2e5 !important; color: #d47120 !important; border: 1px solid #f4c594; }
body.s02b-fixed-pair .content > .buttonFlex .Single_appointment:nth-child(1) { background: #fff2e5 !important; color: #d47120 !important; border: 1px solid #f4c594; }
body.s02b-fixed-pair .content > .buttonFlex .Single_appointment:nth-child(2) { background: #ee842a !important; color: white !important; border: 1px solid #ee842a; }
body.s02b-fixed .u-popup .u-popup__content { border-radius: 20px 20px 0 0 !important; }

/* Mobile containment for the existing profile and fixed-booking markup. */
body.s02b-detail uni-page-body > .content,
body.s02b-fixed uni-page-body > .content,
body.s02b-detail .content > .listItem,
body.s02b-detail .listItem > .BoxItem,
body.s02b-detail .listItem > uni-video,
body.s02b-detail .regular,
body.s02b-fixed .content > .Box,
body.s02b-fixed .content > .message_Flex,
body.s02b-fixed .content > .headers_Flex,
body.s02b-fixed .content > .headers,
body.s02b-fixed .content > .buttonFlex {
  box-sizing: border-box !important;
  max-width: 100%;
  min-width: 0;
}
body.s02b-detail uni-page-body > .content,
body.s02b-fixed uni-page-body > .content {
  padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important;
}
body.s02b-detail .listItem .BoxOne,
body.s02b-fixed .Box .BoxView { max-width: 100%; min-width: 0; }
body.s02b-detail .listItem .BoxContent,
body.s02b-detail .listItem .BoxTop,
body.s02b-detail .listItem .headers_title > uni-text,
body.s02b-fixed .Box .BoxContent,
body.s02b-fixed .Box .title,
body.s02b-fixed .content > .headers_Flex .headers_title {
  max-width: 100%; overflow-wrap: anywhere;
}
body.s02b-detail .listItem > uni-video {
  height: auto !important;
  aspect-ratio: 16 / 9;
}
body.s02b-detail .regular { width: 100% !important; max-width: 520px; }
body.s02b-fixed .content > .headers_Flex { gap: 8px; }
body.s02b-fixed .content > .headers_Flex .u-number-box { flex-shrink: 0; max-width: 100%; }
body.s02b-fixed .u-popup .u-popup__content {
  box-sizing: border-box; max-width: 100vw;
  max-height: calc(100dvh - env(safe-area-inset-top));
  overflow-y: auto;
}

@media (max-width: 380px) {
  body.s02b-detail .listItem > .BoxItem { padding: 14px !important; }
  body.s02b-fixed .content > .buttonFlex .Single_appointment { font-size: 12px !important; }
}

/* Original single appointment: visual treatment only. The original dates,
   slot buttons, card picker, and submit handlers stay in their UniApp page. */
body.s02b-single { background: #f7f8fa; color: #292d31; }
body.s02b-single uni-page-body {
  display: block; max-width: 520px; min-height: 100vh; margin: 0 auto;
  background: #f7f8fa; box-shadow: 0 0 26px rgba(30,25,20,.06);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body.s02b-single uni-page-body > .content {
  box-sizing: border-box; width: 100% !important; max-width: 100%; height: auto !important;
  min-height: 100vh; overflow-x: hidden;
  padding: calc(59px + env(safe-area-inset-top)) 14px calc(110px + env(safe-area-inset-bottom)) !important;
  background: linear-gradient(160deg, #fff7ec, #f7f8fa 230px) !important;
}
body.s02b-single uni-page-body > .content::before {
  content: '单次预约'; display: block; margin: 0 3px 17px;
  color: #30302f; font-size: 25px; line-height: 1.3; font-weight: 750;
}
body.s02b-single #s02-return {
  top: calc(12px + env(safe-area-inset-top));
  left: max(14px, calc((100vw - 520px)/2 + 14px)); z-index: 10002;
  padding: 8px 12px; border-radius: 11px; font-size: 13px;
  font-weight: 650; color: #d46b1a; background: #fff; border-color: #f1ddc9;
}
body.s02b-single .content > .Box,
body.s02b-single .content > .scrollBody,
body.s02b-single .content > .working_hours,
body.s02b-single .content > .headers,
body.s02b-single .content > .button_flex {
  box-sizing: border-box; width: 100% !important; max-width: 100%; min-width: 0;
  margin: 0 0 13px !important; border: 1px solid #f1e8de;
  border-radius: 17px !important; background: #fff !important;
  box-shadow: 0 5px 20px rgba(83,54,28,.045);
}
body.s02b-single .content > .Box { padding: 16px !important; }
body.s02b-single .Box .BoxView, body.s02b-single .Box .BoxOne { max-width: 100%; min-width: 0; }
body.s02b-single .Box .BoxContent { min-width: 0; }
body.s02b-single .Box .BoxTop { flex-wrap: wrap; gap: 4px; }
body.s02b-single .Box .title { overflow-wrap: anywhere; font-size: 20px !important; color: #282b2c !important; }
body.s02b-single .Box .Newtitle { overflow-wrap: anywhere; color: #77716b !important; font-size: 12px !important; }
body.s02b-single .content > .headers_title {
  display: flex; align-items: center; gap: 8px; margin: 23px 3px 11px !important;
  color: #33312f; font-size: 16px !important; font-weight: 730;
}
body.s02b-single .content > .headers_title .view { background: #ed852d !important; }
body.s02b-single .content > .scrollBody { padding: 13px 15px !important; line-height: 1.7; color: #706b66; overflow-wrap: anywhere; }
body.s02b-single .content > .working_hours {
  display: flex; flex-wrap: wrap; gap: 9px 16px; padding: 13px 15px !important;
  color: #776e66; font-size: 12px;
}
body.s02b-single .content > .headers {
  display: flex; flex-wrap: nowrap; gap: 6px; padding: 11px 9px !important;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
body.s02b-single .headers uni-scroll-view.view { flex: 0 0 50px; min-width: 50px; }
body.s02b-single .headers .sun1 { color: #e77c25 !important; font-weight: 750; }
body.s02b-single .content > .button_flex {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; padding: 14px 10px !important;
}
body.s02b-single .button_flex > uni-view { min-width: 0; }
body.s02b-single .button_flex uni-button {
  box-sizing: border-box; width: 100% !important; min-width: 0; height: 39px !important;
  margin: 0 !important; padding: 0 2px !important; border-radius: 10px !important;
  font-size: 12px !important; line-height: 39px !important;
}
body.s02b-single .button_flex uni-button:not(.heihei):not(.hhhh) {
  background: #f1f2f3 !important; color: #aaa6a2 !important;
}
body.s02b-single .button_flex uni-button.heihei {
  background: #fff2e5 !important; color: #ca6b20 !important;
  border: 1px solid #f6d5b3;
}
body.s02b-single .button_flex uni-button.hhhh {
  background: #ed842a !important; color: #fff !important;
  border: 1px solid #ed842a; font-weight: 730;
}
body.s02b-single .content > .statusType { margin: 12px 4px 20px !important; color: #857b72; font-size: 12px; }
body.s02b-single .content > .Single_appointment {
  box-sizing: border-box; width: 100% !important; max-width: 100%;
  min-height: 46px; border-radius: 11px !important;
  background: #ed842a !important; color: #fff !important; font-weight: 720;
}
body.s02b-single .u-popup .u-popup__content {
  box-sizing: border-box; max-width: 100vw;
  max-height: calc(100dvh - env(safe-area-inset-top)); overflow-y: auto;
}
@media (max-width: 360px) {
  body.s02b-single .content > .button_flex { gap: 6px; padding: 12px 8px !important; }
  body.s02b-single .button_flex uni-button { font-size: 11px !important; }
}