/* Curiouser · camp 订位组件样式。
   camp-booking 和 camp-details 共用这一份，别再往页面里内联。 */
/* =========================================================
   伦敦站 · Camp 订位（2026-09-26）
   一张「天 × 时段」矩阵：一天只能选一格，选了全天，当天的上午/下午自动锁掉并写明原因；
   延时班只接在全天或下午场之后；午餐是下面一个开关，自动跟着「选了哪几天」走。
   配色跟 classes-timetable 那版一致（都从设计稿采样）：
     格子 #EBDBD2 / 选中 #B0533E + 白字 / 锁住 #EDE7E1 / 金 #8F6926

   ⚠ 下面 CAMPS 里的日期和 SESSIONS 里的价格是按站上现有文案 + 订课系统里看到的数字填的，
     上线前一定要核对：营期日期、每档价格、每档扣几个 credit、午餐单价。
   ========================================================= */
#cx-camp{--cream:#F6F2EC;--cellA:#EBDBD2;--cellB:#E2CAC0;--sel:#B0533E;--lock:#EDE7E1;
  --gold:#8F6926;--slate:#5C707A;--ink:#3F4D51;--line:#E4E4E4;
  /* 锁住的格子底色偏浅，普通 slate 压上去只有 4.4:1，这一档专用 */
  --slate2:#53666F;
  font-family:Lato,sans-serif;color:var(--ink);max-width:1240px;margin:0 auto;padding:0 20px 8px}
#cx-camp *{box-sizing:border-box}
#cx-camp button{font-family:inherit;color:var(--ink);background:none}

/* ---------- 顶部信息条 ---------- */
#cx-camp .cp-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  background:var(--ink);color:#fff;padding:13px 18px;margin-bottom:16px}
#cx-camp .cp-bar .vp{font-size:11px;line-height:1;opacity:.85}
#cx-camp .cp-bar b{font:700 15px/21px Arvo, Georgia, serif}
#cx-camp .cp-bar .addr{font:400 13px/19px Lato,sans-serif;color:#E4DCD3}
#cx-camp .cp-bar .sp{flex:1}
#cx-camp .cp-bar .meta{font:400 13px/19px Lato,sans-serif;color:#E4DCD3}
#cx-camp .cp-bar select{flex:0 0 auto;max-width:260px;background:#fff;color:var(--ink);border:0;
  padding:7px 10px;font:400 13px/1.2 Lato,sans-serif}

/* ---------- 矩阵 ---------- */
#cx-camp .cp-cols{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start}
#cx-camp .cp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#cx-camp .cp-grid{display:grid;gap:4px;min-width:640px}
#cx-camp .cp-hd{background:#fff;padding:12px 6px;text-align:center}
#cx-camp .cp-hd .d-name{font:400 10px/14px Lato,sans-serif;letter-spacing:1.1px;color:var(--slate)}
#cx-camp .cp-hd .d-num{font:400 19px/26px Lato,sans-serif;color:var(--ink)}
#cx-camp .cp-rh{background:#fff;padding:12px 12px;text-align:left}
#cx-camp .cp-rh b{display:block;font:700 14px/19px Lato,sans-serif}
#cx-camp .cp-rh i{display:block;font-style:normal;font:400 11.5px/16px Lato,sans-serif;color:var(--slate)}
#cx-camp .cp-rh u{display:block;text-decoration:none;font:700 11.5px/17px Lato,sans-serif;
  color:var(--sel);margin-top:3px}

#cx-camp .cp-c{position:relative;display:block;width:100%;border:1px solid transparent;
  background:var(--cellA);padding:11px 6px;text-align:center;cursor:pointer;min-height:74px}
#cx-camp .cp-c:hover{border-color:var(--sel)}
#cx-camp .cp-c .p{display:block;font:700 15px/21px Lato,sans-serif;color:var(--ink)}
#cx-camp .cp-c .c{display:block;font:400 11.5px/16px Lato,sans-serif;color:var(--ink)}
#cx-camp .cp-c .tick{position:absolute;top:6px;right:7px;font:700 12px/1 Lato,sans-serif;
  color:#fff;display:none}
#cx-camp .cp-c.on{background:var(--sel);border-color:var(--sel)}
#cx-camp .cp-c.on .p,#cx-camp .cp-c.on .c{color:#fff}
#cx-camp .cp-c.on .tick{display:block}
#cx-camp .cp-c.off{cursor:default;background:var(--lock);
  background-image:repeating-linear-gradient(135deg,rgba(63,77,81,.05) 0 6px,transparent 6px 12px)}
#cx-camp .cp-c.off .p{display:block;font:400 17px/20px Lato,sans-serif;color:var(--slate2)}
#cx-camp .cp-c.off .c{color:var(--slate2)}
#cx-camp .cp-c.off:hover{border-color:transparent}

/* ---------- 午餐开关 ---------- */
#cx-camp .cp-lunch{display:flex;align-items:center;gap:14px;background:#fff;
  border:1px solid var(--line);padding:14px 16px;margin-top:10px}
#cx-camp .cp-sw{position:relative;flex:0 0 46px;width:46px;height:26px;border-radius:999px;
  background:#CFC7BF;border:0;cursor:pointer;transition:background .15s}
#cx-camp .cp-sw:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:999px;background:#fff;transition:left .15s}
#cx-camp .cp-sw.on{background:var(--sel)}
#cx-camp .cp-sw.on:after{left:23px}
#cx-camp .cp-lunch .t{flex:1;min-width:0}
#cx-camp .cp-lunch .t b{display:block;font:700 14px/20px Lato,sans-serif}
#cx-camp .cp-lunch .t i{display:block;font-style:normal;font:400 12.5px/18px Lato,sans-serif;color:var(--slate)}
#cx-camp .cp-lunch .amt{font:700 15px/21px Lato,sans-serif;white-space:nowrap}
#cx-camp .cp-lunch .amt span{font-weight:400;font-size:12.5px;color:var(--slate);margin-right:8px}
#cx-camp .cp-rule{font:400 12.5px/19px Lato,sans-serif;color:var(--slate);margin:12px 0 0}

/* ---------- 右侧清单 ---------- */
#cx-camp .cp-bk{background:var(--cream);border:1px solid var(--line);padding:18px;position:sticky;top:20px}
#cx-camp .cp-bk h3{font:700 17px/23px Arvo, Georgia, serif;margin:0 0 3px}
#cx-camp .cp-bk .who{font:400 12.5px/18px Lato,sans-serif;color:var(--slate);margin:0 0 14px}
#cx-camp .cp-bk .none{font:400 13px/20px Lato,sans-serif;color:var(--slate);margin:0;padding:8px 0 4px}
#cx-camp .cp-it{display:flex;gap:10px;background:#fff;border:1px solid var(--line);
  padding:9px 10px;margin:0 0 7px}
#cx-camp .cp-it .d{flex:0 0 40px;text-align:center;background:var(--cream);padding:4px 2px;height:fit-content}
#cx-camp .cp-it .d b{display:block;font:700 9px/12px Lato,sans-serif;letter-spacing:.8px;color:var(--slate)}
#cx-camp .cp-it .d i{display:block;font-style:normal;font:700 14px/18px Arvo, Georgia, serif}
#cx-camp .cp-it .x{flex:1;min-width:0}
#cx-camp .cp-it .x b{display:block;font:700 13px/18px Lato,sans-serif}
#cx-camp .cp-it .x i{display:block;font-style:normal;font:400 11.5px/17px Lato,sans-serif;color:var(--slate)}
#cx-camp .cp-it .x u{display:block;text-decoration:none;font:400 11.5px/17px Lato,sans-serif;color:var(--gold)}
#cx-camp .cp-it .rm{border:0;cursor:pointer;font:700 16px/1 Lato,sans-serif;color:var(--slate);
  padding:0 0 0 4px;align-self:flex-start}
#cx-camp .cp-sum{border-top:1px solid var(--line);margin-top:13px;padding-top:13px}
#cx-camp .cp-sum .l{display:flex;justify-content:space-between;gap:10px;padding:3px 0;
  font:400 13px/20px Lato,sans-serif}
#cx-camp .cp-sum .l b{font-weight:700}
#cx-camp .cp-sum .tot{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  border-top:1px solid var(--line);margin-top:9px;padding-top:11px;
  font:700 17px/23px Arvo, Georgia, serif}
#cx-camp .cp-alt{background:#FDF8EE;border-left:3px solid var(--gold);padding:10px 12px;margin-top:12px;
  font:400 12.5px/19px Lato,sans-serif}
#cx-camp .cp-note{font:400 12px/18px Lato,sans-serif;color:var(--slate);margin:12px 0 0}

/* ---------- 笔刷按钮 ---------- */
#cx-camp .cp-cta{--cxh:50px;position:relative;display:flex;align-items:center;
  justify-content:flex-start;width:100%;
  height:var(--cxh);padding-left:26px;padding-right:calc(var(--cxh)*2.05);
  padding-top:calc(var(--cxh)*0.046);
  color:#fff;font:700 14.5px/1.32 Lato,sans-serif;letter-spacing:.03em;white-space:pre;
  text-decoration:none;background-color:var(--sel);margin-top:14px;
  -webkit-mask-image:url(/wp-content/uploads/curiouser/brush-375.svg),linear-gradient(#000,#000);
  mask-image:url(/wp-content/uploads/curiouser/brush-375.svg),linear-gradient(#000,#000);
  -webkit-mask-position:right center,left calc(var(--cxh)*0.0712);
  mask-position:right center,left calc(var(--cxh)*0.0712);
  -webkit-mask-size:auto 100%,calc(100% - var(--cxh)*1.95) calc(var(--cxh)*0.903);
  mask-size:auto 100%,calc(100% - var(--cxh)*1.95) calc(var(--cxh)*0.903);
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat}
#cx-camp .cp-cta.gold{background-color:var(--gold);--cxh:44px;font-size:13px;margin-top:9px}
#cx-camp .cp-cta:hover{opacity:.9}

@media(max-width:1024px){
  #cx-camp .cp-cols{grid-template-columns:1fr}
  #cx-camp .cp-bk{position:static}
}
@media(max-width:767px){
  #cx-camp{padding:0 20px 8px}
  #cx-camp .cp-bar{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}
  #cx-camp .cp-bar .sp{display:none}
  #cx-camp .cp-grid{min-width:560px}
  #cx-camp .cp-rh{padding:10px 8px}
  #cx-camp .cp-rh b{font-size:13px}
  #cx-camp .cp-c{min-height:66px;padding:9px 4px}
  #cx-camp .cp-c .p{font-size:14px;line-height:19px}
  #cx-camp .cp-hint{display:block}
  #cx-camp .cp-lunch{flex-wrap:wrap;gap:10px}
  #cx-camp .cp-lunch .amt{flex:0 0 100%;text-align:right}
}
#cx-camp .cp-hint{display:none;font:400 12px/18px Lato,sans-serif;color:var(--slate);margin:0 0 8px}
@media(max-width:767px){#cx-camp .cp-hint{display:block}}