/* ============================================================
   Duke Education — 在线预约与付款弹窗  booking.css
   与 booking.js 配套。全部 dkb- 前缀，不依赖站内任何 class，
   也不会被 Tailwind purge 影响。删掉这两个文件即可完全回退。
   ============================================================ */

:root{
  --dkb-gold:#E8A020;
  --dkb-gold-l:#F5C842;
  --dkb-dark:#1C1407;
  --dkb-deep:#0F0B05;
  --dkb-cream:#FAF6EF;
  --dkb-cream-l:#FFFDF9;
  --dkb-border:#E8DED0;
  --dkb-muted:#7A6F63;
  --dkb-heading:#1C1407;
  --dkb-ok:#2E7D5B;
  --dkb-warn:#B4741A;
}

/* ── 触发按钮（浮动，可选） ───────────────────── */
.dkb-fab{
  position:fixed; right:20px; bottom:20px; z-index:9000;
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 22px; border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg,var(--dkb-gold),var(--dkb-gold-l));
  color:var(--dkb-dark); font:600 15px/1 'Plus Jakarta Sans',-apple-system,sans-serif;
  box-shadow:0 8px 26px rgba(232,160,32,.42);
  transition:transform .2s, box-shadow .2s;
}
.dkb-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,160,32,.52)}
.dkb-fab svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
@media(max-width:640px){.dkb-fab{right:14px;bottom:14px;padding:12px 18px;font-size:14px}}

/* ── 遮罩与外壳 ──────────────────────────────── */
.dkb-mask{
  position:fixed; inset:0; z-index:9500; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(15,11,5,.66); backdrop-filter:blur(4px);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.dkb-mask.dkb-open{display:flex}
body.dkb-lock{overflow:hidden}

.dkb-modal{
  position:relative; width:100%; max-width:940px; max-height:92vh;
  display:flex; flex-direction:column;
  background:var(--dkb-cream-l); border-radius:24px; overflow:hidden;
  box-shadow:0 24px 70px rgba(15,11,5,.42);
  animation:dkbIn .28s cubic-bezier(.16,1,.3,1);
}
@keyframes dkbIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dkb-modal{animation:none}}

/* ── 头部 ────────────────────────────────────── */
.dkb-head{
  flex:0 0 auto; padding:20px 24px 0;
  background:linear-gradient(135deg,var(--dkb-deep),var(--dkb-dark)); color:var(--dkb-cream);
}
.dkb-head-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.dkb-title{font-family:'Cormorant Garamond',Georgia,serif; font-size:26px; font-weight:600; margin:0 0 3px}
.dkb-sub{font-size:13px; color:rgba(250,246,239,.6); margin:0}
.dkb-x{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(250,246,239,.12); color:var(--dkb-cream); font-size:19px; line-height:1;
  transition:background .2s;
}
.dkb-x:hover{background:rgba(250,246,239,.24)}

/* 步骤条 */
.dkb-steps{display:flex; gap:4px; margin-top:18px}
.dkb-step{flex:1 1 0; min-width:0; padding-bottom:12px; border-bottom:3px solid rgba(250,246,239,.16); transition:border-color .3s}
.dkb-step.dkb-done{border-bottom-color:rgba(232,160,32,.5)}
.dkb-step.dkb-now{border-bottom-color:var(--dkb-gold)}
.dkb-step b{display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(250,246,239,.45); font-weight:600}
.dkb-step.dkb-now b{color:var(--dkb-gold-l)}
.dkb-step span{display:block; font-size:12.5px; color:rgba(250,246,239,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dkb-step.dkb-now span{color:var(--dkb-cream)}
@media(max-width:640px){.dkb-step span{display:none}.dkb-steps{gap:6px}}

/* ── 正文 ────────────────────────────────────── */
.dkb-body{flex:1 1 auto; overflow-y:auto; padding:24px; -webkit-overflow-scrolling:touch}
.dkb-h{font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; color:var(--dkb-heading); margin:0 0 4px; font-weight:600}
.dkb-p{font-size:13.5px; color:var(--dkb-muted); margin:0 0 18px}

/* 分类横向筛选 */
.dkb-cats{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.dkb-cat{
  font:500 12.5px/1 inherit; padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--dkb-border); background:#fff; color:var(--dkb-muted); transition:all .18s;
}
.dkb-cat:hover{border-color:var(--dkb-gold); color:var(--dkb-gold)}
.dkb-cat.dkb-on{background:var(--dkb-dark); border-color:var(--dkb-dark); color:#fff}

/* 通用选项网格 */
.dkb-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.dkb-grid.dkb-2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media(max-width:640px){.dkb-grid,.dkb-grid.dkb-2{grid-template-columns:1fr}}

.dkb-opt{
  position:relative; text-align:left; cursor:pointer; width:100%;
  background:#fff; border:1.5px solid var(--dkb-border); border-radius:16px; padding:16px 18px;
  transition:border-color .18s, box-shadow .18s, transform .18s; font-family:inherit;
}
.dkb-opt:hover{border-color:var(--dkb-gold); box-shadow:0 6px 18px rgba(28,20,7,.08); transform:translateY(-1px)}
.dkb-opt.dkb-on{border-color:var(--dkb-gold); background:#FFFBF2; box-shadow:0 0 0 3px rgba(232,160,32,.15)}
.dkb-opt-t{display:block; font-weight:600; font-size:15px; color:var(--dkb-heading); line-height:1.3}
.dkb-opt-s{display:block; font-size:12.5px; color:var(--dkb-muted); margin-top:4px; line-height:1.5}
.dkb-pill{
  display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; background:rgba(232,160,32,.14); color:#9A6A08; margin-bottom:8px;
}
.dkb-price{float:right; font-family:'Cormorant Garamond',Georgia,serif; font-size:23px; font-weight:700; color:var(--dkb-gold); line-height:1}
.dkb-price small{font-family:inherit; font-size:11px; font-weight:500; color:var(--dkb-muted)}
.dkb-quote{float:right; font-size:12px; font-weight:600; color:var(--dkb-warn)}

/* 教师卡 */
.dkb-tgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
@media(max-width:640px){.dkb-tgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
.dkb-t{
  cursor:pointer; text-align:center; background:#fff; border:1.5px solid var(--dkb-border);
  border-radius:16px; padding:14px 10px; transition:all .18s; font-family:inherit;
}
.dkb-t:hover{border-color:var(--dkb-gold); transform:translateY(-2px)}
.dkb-t.dkb-on{border-color:var(--dkb-gold); background:#FFFBF2; box-shadow:0 0 0 3px rgba(232,160,32,.15)}
.dkb-t img{width:64px; height:64px; border-radius:50%; object-fit:cover; margin:0 auto 9px; display:block; border:2px solid rgba(232,160,32,.22); background:var(--dkb-cream)}
.dkb-t-n{display:block; font-family:'Cormorant Garamond',Georgia,serif; font-size:16px; font-weight:600; color:var(--dkb-heading); line-height:1.2}
.dkb-t-r{display:block; font-size:10.5px; color:var(--dkb-muted); margin-top:4px; line-height:1.4}
.dkb-any{
  display:flex; align-items:center; justify-content:center; min-height:132px;
  background:linear-gradient(135deg,#FFF8EC,#FFFDF9);
}
.dkb-any .dkb-t-n{font-size:15px}

/* 表单 */
.dkb-form{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:640px){.dkb-form{grid-template-columns:1fr}}
.dkb-f{display:flex; flex-direction:column; gap:6px}
.dkb-f.dkb-full{grid-column:1/-1}
.dkb-f label{font-size:12px; font-weight:600; color:var(--dkb-heading); letter-spacing:.02em}
.dkb-f label i{color:var(--dkb-gold); font-style:normal}
.dkb-f input,.dkb-f select,.dkb-f textarea{
  width:100%; padding:11px 13px; border:1px solid var(--dkb-border); border-radius:11px;
  background:#fff; font:400 14px/1.4 inherit; color:var(--dkb-heading); outline:none; transition:border-color .18s;
}
.dkb-f textarea{min-height:74px; resize:vertical}
.dkb-f input:focus,.dkb-f select:focus,.dkb-f textarea:focus{border-color:var(--dkb-gold); box-shadow:0 0 0 3px rgba(232,160,32,.13)}
.dkb-f.dkb-err input,.dkb-f.dkb-err select{border-color:#C0392B; box-shadow:0 0 0 3px rgba(192,57,43,.1)}
.dkb-emsg{font-size:11.5px; color:#C0392B; display:none}
.dkb-f.dkb-err .dkb-emsg{display:block}

/* 摘要卡 */
.dkb-sum{
  background:#fff; border:1px solid var(--dkb-border); border-radius:16px; padding:18px 20px; margin-bottom:18px;
}
.dkb-row{display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:13.5px; border-bottom:1px dashed var(--dkb-border)}
.dkb-row:last-of-type{border-bottom:none}
.dkb-row span:first-child{color:var(--dkb-muted); flex:0 0 auto}
.dkb-row span:last-child{color:var(--dkb-heading); font-weight:600; text-align:right}
.dkb-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:14px; border-top:2px solid var(--dkb-border)}
.dkb-total span{font-size:13px; color:var(--dkb-muted); font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.dkb-total b{font-family:'Cormorant Garamond',Georgia,serif; font-size:34px; color:var(--dkb-gold); line-height:1}
.dkb-total b small{font-family:inherit; font-size:12px; color:var(--dkb-muted); font-weight:500}

/* 提示条 */
.dkb-note{
  display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.6;
  padding:12px 14px; border-radius:12px; margin-bottom:16px;
}
.dkb-note.dkb-info{background:rgba(232,160,32,.09); color:#7A5A12; border:1px solid rgba(232,160,32,.22)}
.dkb-note.dkb-demo{background:#FDF3F1; color:#8E3B2E; border:1px solid #F0CFC8}
.dkb-note svg{flex:0 0 auto; width:15px; height:15px; margin-top:2px; stroke:currentColor; fill:none; stroke-width:2}

/* ── 底栏 ────────────────────────────────────── */
.dkb-foot{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 24px; background:#fff; border-top:1px solid var(--dkb-border);
}
.dkb-foot-info{font-size:12.5px; color:var(--dkb-muted); min-width:0}
.dkb-foot-info b{color:var(--dkb-heading)}
.dkb-acts{display:flex; gap:9px; flex:0 0 auto}
.dkb-btn{
  border:none; border-radius:999px; cursor:pointer; font:600 14px/1 inherit; padding:12px 22px;
  transition:all .18s; white-space:nowrap;
}
.dkb-btn:disabled{opacity:.45; cursor:not-allowed}
.dkb-btn.dkb-ghost{background:transparent; border:1px solid var(--dkb-border); color:var(--dkb-muted)}
.dkb-btn.dkb-ghost:hover:not(:disabled){border-color:var(--dkb-muted); color:var(--dkb-heading)}
.dkb-btn.dkb-go{background:linear-gradient(135deg,var(--dkb-gold),var(--dkb-gold-l)); color:var(--dkb-dark); box-shadow:0 4px 14px rgba(232,160,32,.32)}
.dkb-btn.dkb-go:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 7px 20px rgba(232,160,32,.44)}
@media(max-width:640px){
  .dkb-foot{flex-direction:column; align-items:stretch; padding:13px 16px}
  .dkb-foot-info{order:2; text-align:center}
  .dkb-acts{order:1}
  .dkb-btn{flex:1 1 0}
  .dkb-body{padding:18px 16px}
  .dkb-head{padding:16px 18px 0}
}

/* 结果页 */
.dkb-result{text-align:center; padding:34px 20px}
.dkb-result .dkb-ico{
  width:66px; height:66px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; background:rgba(46,125,91,.11);
}
.dkb-result .dkb-ico svg{width:30px; height:30px; stroke:var(--dkb-ok); fill:none; stroke-width:2.2}
.dkb-result h3{font-family:'Cormorant Garamond',Georgia,serif; font-size:27px; color:var(--dkb-heading); margin:0 0 8px; font-weight:600}
.dkb-result p{font-size:14px; color:var(--dkb-muted); max-width:460px; margin:0 auto 8px; line-height:1.65}
.dkb-ref{
  display:inline-block; margin-top:14px; padding:9px 18px; border-radius:999px;
  background:var(--dkb-cream); border:1px dashed var(--dkb-border);
  font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--dkb-heading);
}

/* 载入中 */
.dkb-load{text-align:center; padding:54px 20px; color:var(--dkb-muted); font-size:14px}
.dkb-spin{
  width:30px; height:30px; margin:0 auto 14px; border-radius:50%;
  border:3px solid var(--dkb-border); border-top-color:var(--dkb-gold);
  animation:dkbSpin .8s linear infinite;
}
@keyframes dkbSpin{to{transform:rotate(360deg)}}