/* Shell shared by the two summary pages.
   Parent spec 5.4 and 5.5. */

/* Same measure as .prm-page: a member arrives here from PRM, and a
   narrower column made the two read as different pages. */
.acec-summary-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* --- Back link ---------------------------------------------------------
   The portal's shared back control, kept identical to PRM.css .prm-back-link
   so the same button appears on every page of the flow. This was a bare text
   link, which read as body copy against the netFORUM host chrome rather than
   as the control it is. */
.acec-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--acec-border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-main);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acec-navy);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.acec-back-link:hover {
  border-color: var(--acec-gold);
}

.acec-back-link:focus-visible {
  border-color: var(--acec-gold);
  box-shadow: 0 0 0 0.2rem var(--acec-focus-ring);
  outline: none;
}

/* --- Muted banner ------------------------------------------------------
   The desaturation is the signal that this registration is no longer the
   member's. Parent spec 5.4. */
.acec-muted-banner {
  position: relative;
  margin-bottom: 1.75rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.acec-muted-banner__img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  filter: grayscale(35%);
}

.acec-muted-banner__fallback {
  display: block;
  width: 100%;
  height: 220px;
  background: var(--acec-navy);
}

.acec-muted-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 20, 28, 0.62);
}

.acec-muted-banner__content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.5rem 2rem;
}

.acec-muted-banner__title {
  margin-bottom: 0.5rem;
  font-family: var(--font-title);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--white);
}

.acec-muted-banner__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--font-main);
  font-size: 0.88rem;
  color: var(--white-80);
}

.acec-muted-banner__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* --- Summary card ------------------------------------------------------ */
.acec-summary-card {
  padding: 1.75rem;
  border: 1px solid var(--acec-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

/* THE SAME BOX, RESTATED AT A SPECIFICITY THAT CLEARS THE HOST. These pages
   are injected into the ACEC site, whose acec.css reaches bare elements
   globally (see acec-base.css's neutralisers) — and a host rule carrying a
   class plus an element, the shape of "main > div:first-child", outranks a
   single class of ours. It showed on Access Denied and not on Registration
   Transferred because there the card is not the first child: the back link
   and the banner are ahead of it, so the same host rule never reached it
   [Ahmet 09-03]. Restated rather than folded into the rule above, so the
   class still works on its own and so this reads as what it is — a shield,
   not a design decision. Same treatment PRM.css gives the tooltip panel. */
.acec-summary-page .acec-summary-card {
  border: 1px solid var(--acec-border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.acec-summary-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.acec-summary-heading {
  margin-bottom: 0.75rem;
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--acec-navy);
  text-align: center;
}

/* Parent spec 5.4 sets the transfer headline at 1.35rem; 5.5 sets the
   cancellation heading at 1.1rem. */
.acec-summary-heading--transfer {
  font-size: 1.35rem;
  line-height: 1.3;
}

.acec-summary-heading--cancellation {
  font-size: 1.1rem;
}

.acec-summary-body {
  margin-bottom: 1.25rem;
  font-family: var(--font-main);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--acec-gray);
  text-align: center;
}

.acec-summary-body strong {
  color: var(--acec-navy);
}

.acec-summary-section-label {
  margin-bottom: 0.6rem;
  font-family: var(--font-main);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acec-muted);
}

.acec-summary-item-row {
  padding: 0.65rem 0;
  border-top: 1px solid var(--acec-border-light);
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--acec-gray);
}

.acec-summary-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.55rem 0;
  border-top: 1px solid var(--acec-border-light);
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--acec-navy);
}

.acec-summary-divider {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid var(--acec-border);
}

.acec-summary-note {
  margin-top: 0.35rem;
  font-family: var(--font-main);
  font-size: 0.8rem;
  color: var(--acec-muted);
}

.acec-summary-actions {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.acec-summary-actions .acec-btn {
  padding: 0.75rem 1.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

@media (max-width: 575.98px) {
  .acec-muted-banner__content {
    padding: 1.25rem 1.25rem;
  }
  .acec-muted-banner__title {
    font-size: 1.3rem;
  }
}