/* V66：會員登入後近期已報名活動提示 */
.upcoming-reminder-modal{
  max-width:620px;
  border-color:rgba(255,122,24,.72);
}

#upcomingRegistrationReminderBody{min-width:0}

.upcoming-reminder-head{
  display:grid;
  gap:4px;
  padding:1px 52px 15px 0;
  border-bottom:1px solid rgba(168,163,196,.28);
}

.upcoming-reminder-head h3{margin:0}

.upcoming-reminder-head>p:last-child{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}

.upcoming-reminder-kicker{
  margin:0;
  color:var(--orange);
  font-family:var(--font-head);
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
}

.upcoming-reminder-list{
  display:grid;
  gap:10px;
  margin:14px 0;
}

.upcoming-reminder-card{
  display:grid;
  min-width:0;
  gap:9px;
  padding:14px;
  border:1px solid rgba(112,126,174,.62);
  border-left:4px solid var(--orange);
  border-radius:13px;
  background:var(--night-1);
}

.upcoming-reminder-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.upcoming-reminder-status,
.upcoming-reminder-slot{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1.2;
}

.upcoming-reminder-status.is-payment-due{background:var(--yellow);color:var(--ink-deep)}
.upcoming-reminder-status.is-reviewing{background:var(--cyan);color:var(--ink-deep)}
.upcoming-reminder-status.is-confirmed{background:var(--green);color:var(--ink-deep)}
.upcoming-reminder-slot{border:1px solid rgba(255,167,51,.62);color:var(--amber);background:rgba(255,167,51,.08)}

.upcoming-reminder-card h4{
  min-width:0;
  margin:0;
  color:var(--cream);
  font-size:17px;
  line-height:1.38;
  overflow-wrap:anywhere;
}

.upcoming-reminder-meta{
  display:grid;
  gap:7px;
  min-width:0;
  margin:0;
}

.upcoming-reminder-meta>div{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:start;
  gap:8px;
}

.upcoming-reminder-meta dt{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}

.upcoming-reminder-meta dd{
  min-width:0;
  margin:0;
  color:var(--paper);
  font-size:13px;
  font-weight:700;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.upcoming-reminder-action{
  justify-self:start;
  min-height:44px;
  margin-top:1px;
}

.upcoming-reminder-dismiss{min-height:44px}

.upcoming-reminder-action:focus-visible,
.upcoming-reminder-dismiss:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:3px;
}

@media(max-width:520px){
  .upcoming-reminder-modal{
    width:100%;
    max-width:none;
    max-height:calc(100dvh - 10px);
  }

  .upcoming-reminder-head{padding-right:48px}
  .upcoming-reminder-list{gap:9px;margin-block:12px}
  .upcoming-reminder-card{padding:12px 11px}
  .upcoming-reminder-meta>div{grid-template-columns:58px minmax(0,1fr);gap:6px}
  .upcoming-reminder-action{width:100%;justify-self:stretch}
}

@media(max-width:350px){
  .upcoming-reminder-head>p:last-child{font-size:12px}
  .upcoming-reminder-card{padding-inline:9px}
  .upcoming-reminder-meta>div{grid-template-columns:1fr;gap:1px}
  .upcoming-reminder-meta dt{font-size:10px}
}