/* 活动详情页专用样式。event.php 和 event.html 共用这一份 ——
   原来两个文件各内联一份，复制过去就开始漂移（选中态的光晕、单选圈的
   画法、分组标题的间距都跑偏了），同一个页面在两条路径下长得不一样。 */
.crumb{padding:18px 0;font-size:13.5px;color:var(--ink-3)}
  .crumb a:hover{color:var(--brand)}
  .detail{display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:start}
  /* no artwork and no seating plan: drop the column rather than show an
     empty frame where the poster would be */
  .detail.no-art{grid-template-columns:1fr;max-width:820px}
  .poster{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
    background:var(--surface-2);box-shadow:var(--shadow)}
  .poster img,.poster .gencover{width:100%;aspect-ratio:3/4;object-fit:cover}
  h1{margin:0 0 14px;font-size:clamp(22px,3vw,32px);font-weight:680;
    letter-spacing:-.025em;line-height:1.25}
  .facts{display:grid;grid-template-columns:auto 1fr;gap:11px 18px;
    margin:22px 0;font-size:14.5px}
  .facts dt{color:var(--ink-3)}
  .facts dd{margin:0;color:var(--ink)}
  .onsale{display:flex;align-items:center;gap:13px;padding:15px 18px;
    border-radius:var(--r);background:var(--brand-wash);
    border:1px solid rgba(var(--brand-rgb),.2);margin:22px 0}
  .onsale .cd{font-family:var(--mono);font-size:19px;font-weight:600;color:var(--brand-dark)}
  .onsale .lb{font-size:13px;color:var(--brand-dark);opacity:.85}
  /* ticket tiers */
  .tiers{display:flex;flex-direction:column;gap:9px;margin:10px 0 20px}
  .tier{display:flex;align-items:center;gap:14px;padding:14px 16px;
    border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;
    background:var(--surface);transition:all .16s var(--ease)}
  .tier:hover{border-color:var(--ink-3)}
  .tier.on{border-color:var(--brand);background:var(--brand-wash);
    box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}
  .tier .radio{width:18px;height:18px;border-radius:50%;flex:0 0 auto;
    border:1.5px solid var(--line-2);display:grid;place-items:center}
  .tier.on .radio{border-color:var(--brand)}
  .tier.on .radio::after{content:'';width:9px;height:9px;border-radius:50%;
    background:var(--brand)}
  /* 名字占剩下的位置、放不下就折行；余量角标和价钱不缩 —— 不然窄屏上价钱
     被挤出卡片右边，只看得到半个数字 */
  .tier .nm{font-weight:550;font-size:14.5px;flex:1 1 auto;min-width:0}
  .tier .left,.tier .amt{flex:0 0 auto}
  .tier .amt{white-space:nowrap}
  .tier-group{font-size:12px;font-weight:650;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-3);margin:8px 0 -2px;padding-left:2px}
  .tier-group:first-child{margin-top:0}
  /* 票档的长说明。放在名字那一格里当块级元素，整行就自然变成两行高，
     不用改 .tier 的 flex 布局。 */
  .tier .tnote{display:block;margin-top:5px;font-size:12px;font-weight:400;
    color:var(--ink-3);line-height:1.55;max-width:52ch}
  .tier-hint{margin:2px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.6}
  .tier-hint a{color:var(--brand);text-decoration:underline}
  /* 票档行：名字 → 余量角标 → 价格。角标用 margin-left:auto 顶到中间偏右，
     价格再靠自己的 margin-left 拉到最右，中间留出呼吸位。 */
  .tier .left{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--err);
    white-space:nowrap}
  .tier .left.hot{padding:2px 8px;border-radius:var(--r-pill);
    background:var(--err);color:#fff}
  .tier .amt{margin-left:14px;font-family:var(--mono);font-weight:650;font-size:15.5px}
  /* 首单折扣：划线原价 + 折后价。原价缩小、压暗，但不能不显示 —— 只给折后价
     等于白折；只给原价等于没折。两个一起出现，优惠才看得见。 */
  .amt .was, .total .v .was{color:var(--ink-3);font-weight:500;font-size:.82em;
    margin-right:6px;text-decoration:line-through}
  .amt .now, .total .v .now{color:var(--brand)}
  /* 票面价那一行。大字是客人自己的货币（换算的），这一行是票面上真正的数字
     和币种 —— 他拿到的票、我们收款的凭据都是它，不能不显示，但也不该抢戏。
     换算不出来时这一行根本不会生成，所以不用管它空着的样子。 */
  .amt .face, .total .v .face{display:block;font-weight:500;font-size:.72em;
    color:var(--ink-3);margin-top:1px;letter-spacing:.01em}
  .tier .amt{text-align:right}
  /* purchase panel */
  .buy{position:sticky;top:calc(var(--head-h) + 20px)}
  .qty{display:flex;align-items:center;gap:0;border:1px solid var(--line-2);
    border-radius:var(--r-pill);overflow:hidden;width:fit-content}
  .qty button{width:38px;height:38px;border:0;background:var(--surface);
    cursor:pointer;font-size:17px;color:var(--ink-2)}
  .qty button:hover{background:var(--surface-2);color:var(--ink)}
  .qty span{min-width:44px;text-align:center;font-family:var(--mono);font-weight:600}
  .total{display:flex;align-items:baseline;justify-content:space-between;
    padding:16px 0;margin-top:6px;border-top:1px dashed var(--line-2)}
  .total .v{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--brand)}
  .seatmap{margin-top:12px;border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden;background:var(--surface)}
  .seatmap img{width:100%}
  .sec-sm{font-size:15px;font-weight:650;margin:30px 0 10px;letter-spacing:-.01em}
  @media(max-width:880px){
    /* minmax(0,1fr) 而不是 1fr：1fr 的下限是内容的最小宽度，座位图、长场馆名
       会把这一列撑到比手机屏幕还宽，整页能左右滑、右边被切掉一截 */
    .detail{grid-template-columns:minmax(0,1fr);gap:24px}
    .detail > *{min-width:0}
    .poster{max-width:260px}
    .buy{position:static}
  }

/* 点开看大图。座位图原图上千像素宽，缩在侧栏里图例根本看不清，
   而同名不同价的票档正指望买家看它来分辨。 */
.poster img,.seatmap img{cursor:zoom-in}
.seatmap{position:relative}
.seatmap .zoom-hint{position:absolute;right:8px;bottom:8px;padding:3px 9px;
  border-radius:var(--r-pill);background:rgba(0,0,0,.62);color:#fff;
  font-size:11.5px;letter-spacing:.01em;pointer-events:none;opacity:.9}

.lb{position:fixed;inset:0;z-index:300;background:rgba(10,10,12,.93);
  display:grid;place-items:center;padding:22px;cursor:zoom-out;overflow:auto;
  overscroll-behavior:contain;animation:lbIn .14s ease-out}
.lb img{max-width:100%;max-height:calc(100vh - 44px);object-fit:contain;
  cursor:zoom-in;border-radius:6px;background:#fff}
/* 放大后按原始尺寸显示，可以拖着看 —— 手机上双指也行 */
.lb.zoom{place-items:start;cursor:default}
.lb.zoom img{max-width:none;max-height:none;cursor:zoom-out}
.lb-x{position:fixed;top:14px;right:18px;width:38px;height:38px;border:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:23px;
  line-height:1;cursor:pointer;display:grid;place-items:center}
.lb-x:hover{background:rgba(255,255,255,.28)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lb{animation:none}}

/* 场次选择。一个商品常常排好几天，买家挑的是其中某一场。
   场次多的时候（见过 26 场的课程排期）列表限高，滚动看。 */
.perf-note{margin:0 0 10px;font-size:12.5px;color:var(--ink-3)}
.perfs{display:flex;flex-direction:column;gap:7px;margin-bottom:20px;
  max-height:268px;overflow-y:auto;padding-right:2px}
.perf{display:flex;align-items:center;gap:12px;padding:11px 14px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;
  background:var(--surface);transition:all .16s var(--ease)}
.perf:hover{border-color:var(--ink-3)}
.perf.on{border-color:var(--brand);background:var(--brand-wash);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12)}
.perf .radio{width:17px;height:17px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--line-2);display:grid;place-items:center}
.perf.on .radio{border-color:var(--brand)}
.perf.on .radio::after{content:'';width:8.5px;height:8.5px;border-radius:50%;
  background:var(--brand)}
.perf .nm{font-size:14px;font-weight:500}
.perf .left{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--err);
  white-space:nowrap}
.perf .left.hot{padding:2px 8px;border-radius:var(--r-pill);
  background:var(--err);color:#fff}

/* 挂单自带的小标签（Clear view / Best value…）。转售平台给每条挂单打的，
   跟在档位名后面 —— 它们是挑座位的依据，但不能抢走价格的视觉位置，
   所以做得比档位名小一号、不加底色。 */
.tier .nm .tg{display:inline-block;margin-left:7px;padding:1px 6px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:10.5px;font-style:normal;color:var(--ink-2);white-space:nowrap;
  vertical-align:1px}
@media(max-width:560px){
  /* 窄屏一行放不下名字 + 标签 + 余量 + 价钱，标签换到下一行 */
  .tier .nm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
  .tier .nm .tg{margin-left:0;margin-right:6px}
  /* 一行放不下「名字 + 余量 + 价钱」：余量角标挪到名字下面，价钱单独占右边
     一列（换算价 + 票面价两行也放得下） */
  .tier{display:grid;grid-template-columns:18px minmax(0,1fr) auto;
    column-gap:10px;row-gap:5px;padding:13px 12px}
  .tier .radio{grid-column:1;grid-row:1 / span 2;align-self:center}
  .tier .nm{grid-column:2;grid-row:1}
  .tier .left{grid-column:2;grid-row:2;margin-left:0;justify-self:start}
  .tier .amt{grid-column:3;grid-row:1 / span 2;align-self:center;margin-left:0;font-size:14.5px}
}

/* 已结束 / 今日开演的场次：照样列出来，置灰、点不了。 */
.perf.off{cursor:not-allowed;opacity:.5}
.perf.off:hover{border-color:var(--line-2)}
.perf .left.shut{color:var(--ink-3);font-weight:500}

/* 二级市场提醒（只在挂二级价的场次弹，见 event.js） */
.rn{position:fixed;inset:0;z-index:310;background:rgba(10,10,12,.55);
  display:grid;place-items:center;padding:16px;animation:lbIn .14s ease-out}
.rn-card{background:var(--surface);color:var(--ink);border-radius:14px;
  width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;
  padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.rn-card h2{margin:0 0 10px;font-size:19px}
.rn-card p{margin:0 0 14px;color:var(--ink-2);line-height:1.6;font-size:14.5px}
.rn-safe{background:var(--ok-wash);border-radius:10px;padding:12px 14px;
  margin-bottom:16px;font-size:14px;line-height:1.55}
.rn-safe b{color:var(--ok)}
.rn-safe ul{margin:6px 0 8px;padding-left:18px}
.rn-safe li{margin:3px 0}
.rn-safe a{color:var(--ok);font-weight:600}
.rn-ok{width:100%}

/* 票档「显示更多」（一次 8 条，见 event.js buildTiers） */
.tier-more{margin-top:10px}
.tier[hidden],.tier-hint[hidden],.tier-more[hidden]{display:none}