/* ============================================================
   官网 · 洗护 / 美容类团购（按时间预约）的样子（v110 帮手 W；照 App 的样子图：日子一排、时间格子、约满灰掉、选中珊瑚色）
   团购详情页 [data-a110]、购物车那一行、我的 AOW 的预约那一块（.ap-od）、门店页「在 AOW 预约」的时间（.ap-wk）。
   颜色、字照 site.css 的变量；手机 375 一行 4 个时间格子，电脑自己排开。
   ============================================================ */
.ap-box { gap: 12px; }
.ap-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
.ap-head small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ap-meta { margin: -4px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.ap-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--paper-2); color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.ap-msg.bad { background: #FDF1F0; color: #B4332A; }
.ap-retry { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--coral-deep); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 日子一排（横着滑；选中珊瑚色、店休 / 约满灰掉） */
.ap-days { min-width: 0; }
.ap-day-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ap-day { flex: none; display: grid; justify-items: center; align-content: center; gap: 1px; width: 60px; min-height: 76px; padding: 6px 2px; border-radius: 14px;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; cursor: pointer; scroll-snap-align: start; transition: border-color .15s, background .15s; }
.ap-day:hover:not(:disabled) { border-color: var(--coral); }
.ap-day .ap-mon { min-height: 13px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--coral-deep); line-height: 1.2; }
.ap-day small { font-size: 12px; font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.ap-day b { font-size: 19px; font-weight: 800; line-height: 1.15; }
.ap-day em { min-height: 13px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.ap-day.on { border-color: var(--coral); background: var(--coral); color: #fff; }
.ap-day.on small, .ap-day.on .ap-mon, .ap-day.on em { color: #fff; }
.ap-day.off, .ap-day:disabled { background: var(--paper-2); border-color: var(--line); color: var(--ink-3); cursor: default; }
.ap-day.off b { color: #B3A79B; }
.ap-more { border-style: dashed; }
.ap-more b .ico { width: 18px; height: 18px; color: var(--coral-deep); }

/* 那一天能开始的时间（剩几位 / 约满 / 已选） */
.ap-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ap-times[hidden] { display: none; }
.ap-times .ap-msg { grid-column: 1 / -1; }
.ap-time { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 54px; padding: 6px 2px; border-radius: 12px;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.ap-time:hover:not(:disabled) { border-color: var(--coral); }
.ap-time b { font-size: 15px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ap-time small { font-size: 11.5px; font-weight: 700; color: #1F7A43; line-height: 1.2; }
.ap-time.on { border-color: var(--coral); background: var(--coral); color: #fff; }
.ap-time.on small { color: #fff; }
.ap-time.off, .ap-time:disabled { background: var(--paper-2); border-color: var(--line); color: #B3A79B; cursor: default; }
.ap-time.off small { color: var(--ink-3); font-weight: 600; }
.ap-span { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.ap-span:empty { display: none; }
@media (min-width: 600px) {
  .ap-times { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* 几只、给哪只小宝 */
.ap-step { padding-top: 10px; border-top: 1px dashed var(--line); }
.ap-who { display: grid; gap: 8px; }
.ap-who-t { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ap-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-mine[hidden] { display: none; }
.ap-mine > span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ap-chip { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid rgba(244, 120, 75, .45); background: var(--coral-tint); color: var(--coral-deep);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ap-chip:hover { border-color: var(--coral); }
.ap-rows { display: grid; gap: 10px; }
.ap-pet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ap-pet-n { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.ap-in { display: grid; gap: 4px; min-width: 0; }
.ap-in > span { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.ap-in .bd-input { height: 42px; padding: 0 12px; font-size: 14.5px; }
.ap-in-w { grid-column: 1 / -1; }

/* 购物车那一行的小宝 */
.ap-cart-pets { color: var(--ink-3); }

/* 我的 AOW：一单的预约 */
.ap-od { margin: 6px 0 8px; padding: 10px 12px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line-2); }
.ap-od.ok { background: #F1FAF4; border-color: rgba(31, 122, 67, .25); }
.ap-od.wait { background: #FFF8EC; border-color: rgba(214, 140, 30, .3); }
.ap-od-st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; }
.ap-od .st { font-weight: 800; font-size: 13px; }
.st.ap-st-booked, .st.ap-st-done, .st.ap-st-changed { background: #E6F4EA; color: #2E6B3E; }
.st.ap-st-pending, .st.ap-st-held, .st.ap-st-unbooked { background: #FFF1E0; color: #A85A07; }
.st.ap-st-declined, .st.ap-st-timeout, .st.ap-st-noshow { background: #FDEDE4; color: #A0331A; }
.st.ap-st-cancelled, .st.ap-st-lapsed, .st.ap-st-expired { background: #EEF0F3; color: #5B6470; }
.ap-od-no { font-size: 12px; color: var(--ink-3); }
.ap-od-when { display: grid; gap: 2px; margin: 0 0 6px; padding: 10px 12px; border-radius: 12px; background: var(--coral-tint); }
.ap-od-when b { font-size: 15.5px; font-weight: 800; color: var(--coral-deep); line-height: 1.35; font-variant-numeric: tabular-nums; }
.ap-od-when small { font-size: 12px; font-weight: 600; color: var(--coral-deep); opacity: .85; }
.ap-od-n { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; overflow-wrap: anywhere; }
.ap-od-n.bad { color: #B4332A; }
.ap-od-pets { font-size: 13.5px; }
.ap-od-pets b { color: var(--ink); font-weight: 700; }
.ap-od-tip { color: var(--ink-3); }
.ap-od-acts { margin-top: 10px; }
/* 改时间 / 约时间 / 取消预约那一块（画在这一单下面；里面的日子、时间格子照团购页那一套，窄一点的地方格子自己排） */
.ap-cbar { display: grid; gap: 10px; }
.ap-cbar > p { margin: 0; }
.ap-cbar .row { margin-top: 0; }
.ap-cbar-t { font-size: 14px; color: var(--ink); }
.ap-cbar-n { font-size: 12.5px; color: #6E3016; }
.ap-cbar .ap-day { background: #fff; }
.ap-cbar .ap-day.on { background: var(--coral); }
.ap-cbar .ap-day.off { background: rgba(255, 255, 255, .55); }
.ap-cbar .ap-times { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.ap-cbar .ap-time.off { background: rgba(255, 255, 255, .55); }
.ap-cbar .od-err { margin: 0; }
.ap-cbar .ap-step { border-top: 0; padding-top: 0; }

/* 门店页「在 AOW 预约」：开了预约日历的店，约满的那一格下面写「约满」 */
.sx-chip.ap-wk { display: inline-grid; justify-items: center; align-content: center; height: auto; min-height: 38px; padding: 4px 12px; }
.sx-chip.ap-wk small { font-size: 10.5px; font-weight: 600; line-height: 1.2; }
.ap-wk-note { flex-basis: 100%; margin: 4px 0 0; font-size: 12.5px; }

/* 付款卡片：「付款后不可取消，也不退款」「付款后不可改时间」（和「不支持无理由退款」同一个框，钉在「去付款」正上面；几样就几行） */
.ap-paynote .ap-pn { display: grid; gap: 6px; min-width: 0; }
.ap-paynote .ap-pn p span { color: var(--ink-3, #6B7280); }