/**
 * 预约表单页专用样式。
 *
 * 跟详情页共用同一套两栏骨架（.detail__grid / .detail__main / .detail__side，
 * 定义在 web-clinic.css），不再另起一套 —— 表单原来锁在 .form-narrow 的 640px
 * 窄列里，桌面上跟页面其余部分（详情页、价目表都是接近整页宽）比起来又窄又小，
 * 看着像另一个产品。改用同一套骨架之后宽度、留白节奏跟别的页面一致。
 *
 * 只在预约页加载（见 LeadWebController::render 的 $css），所以放大内边距这类
 * 只影响这一页的调整可以直接写在 .card 上，不用另起一层类名去避开别的页面。
 */
.booking__lead { margin-bottom: var(--mb-gap-lg); }

/* 卡片标题：图标 + 文字一行，字距比默认紧一点，图标跟文字对齐 */
.card__title { display: flex; align-items: center; gap: 6px; }
.card__title .ico { color: var(--mb-brand-ink); flex-shrink: 0; }
.card__hint { margin: 4px 0 var(--mb-gap-lg); font-size: var(--mb-font-md); color: var(--mb-muted); }

/* 桌面上再放宽一档：预约这类要认真填的表单，16px 内边距跟旁边变宽的两栏
   比起来还是显得局促，此时屏幕也够宽，放到 24px 更从容 */
@media (min-width: 768px) {
  .booking__grid .detail__main > .card { padding: var(--mb-gap-xl); }
}

/* 期望日期：整行可点，配合 web-clinic.js 的 initDatePick() 弹出日期选择器 */
.field--date { cursor: pointer; }

/* 预约须知：图标 + 一句话，一行一条 */
.notes { display: grid; gap: var(--mb-gap); margin: 0; padding: 0; list-style: none; }
.notes__item { display: flex; gap: var(--mb-gap-sm); align-items: flex-start; }
.notes__item > .ico { flex-shrink: 0; margin-top: 2px; color: var(--mb-brand-ink); }
.notes__text { font-size: var(--mb-font-base); color: var(--mb-sub); line-height: 1.6; }

/**
 * 手机号前面的国家/地区区号 + 号码本体。`.field select` 本来就是
 * `width:100%`（见 web-ui.css），这里要的是并排两栏，各自收窄写死。
 */
.tel { display: flex; flex-wrap: wrap; gap: var(--mb-gap-sm); }
.tel__cc { flex: 0 0 auto; width: 132px; }
.tel__num { flex: 1 1 180px; min-width: 0; }

/* 可搜索的区号组合框：外壳仿 .field input 的边框/圆角，菜单浮在下面 */
.cc { position: relative; width: 100%; }
/* 两个类叠加把选择器权重顶过 web-ui.css 的 `.field select { width:100% }`，
   否则原生 select 虽然视觉上被藏起来了，仍占着 100% 宽把布局撑乱 */
.tel__cc .cc__native { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.cc__input {
  width: 100%; padding: 9px var(--mb-gap); border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-md); background: var(--mb-card);
  font: var(--mb-font-base)/1.5 var(--mb-font-family); color: var(--mb-text);
}
.cc.is-open .cc__input { border-color: var(--mb-brand); outline: 2px solid var(--mb-brand-soft); outline-offset: -1px; }
.cc__menu {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto; background: var(--mb-card);
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius-md);
  box-shadow: var(--mb-shadow-up);
}
.cc__opt { padding: 8px var(--mb-gap); font-size: var(--mb-font-base); cursor: pointer; white-space: nowrap; }
.cc__opt:hover, .cc__opt.is-on { background: var(--mb-brand-soft); color: var(--mb-brand-ink); }
.cc__none { padding: 8px var(--mb-gap); font-size: var(--mb-font-md); color: var(--mb-muted); text-align: center; }