/* The membership card (app/card_face.php): pearl-to-rainbow holographic face, gold footer.
   Everything inside is sized in container units, so the card scales to whatever width
   it is given (admin grid, 540px ID card page, 85.6mm wide when printed). */

.rgc {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 698;
  border-radius: 3.4% / 5.3%;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  text-rendering: geometricPrecision;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.rgc-face {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 76% at 15% 24%, #f1f0f3 0%, rgba(241, 240, 243, 0.94) 46%, rgba(241, 240, 243, 0) 100%),
    radial-gradient(ellipse 105% 135% at 92% 95%, #9b5fd8 0%, #7d6cf0 14%, #5a9cf5 26%, #59cde0 36%, #8fda8a 46%, #ece46a 57%, #ffae4a 68%, #ff6258 79%, #f68aa6 92%);
}

.rgc-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
}

.rgc-head {
  position: absolute;
  left: 5.6cqw;
  top: 6cqw;
  display: flex;
  align-items: center;
  gap: 3.2cqw;
}
.rgc-emblem { width: 13.4cqw; height: 13.4cqw; }
.rgc-title {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  font-weight: 400;
  font-size: 7.1cqw;
  line-height: 1;
  letter-spacing: 0.05cqw;
  word-spacing: -0.4cqw;
  white-space: nowrap;
  filter: drop-shadow(0 0.15cqw 0.1cqw rgba(90, 60, 20, 0.25));
}
.rgc-title span {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rgc-title .lgbt { background-image: linear-gradient(180deg, #e2c27a, #a8803a 55%, #cfa75a); }
.rgc-title .community {
  background-image: linear-gradient(90deg, #c38d5c, #d98a86 18%, #c9a35c 34%, #93b27a 50%, #7ea7cc 66%, #9a86c8 82%, #c79a5a);
}

.rgc-details {
  position: absolute;
  left: 5.5cqw;
  top: 25cqw;
  font-size: 3.1cqw;
  line-height: 1.62;
}
.rgc-row { display: flex; }
.rgc-row .label {
  width: 19.2cqw;
  flex-shrink: 0;
  margin-right: 2.1cqw;
  border-right: 0.22cqw solid #b88a45;
  color: #8a6838;
  font-weight: 400;
}
.rgc-row .value {
  max-width: 34cqw;
  color: #111;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rgc-photo {
  position: absolute;
  left: 70.4cqw;
  top: 19.7cqw;
  width: 19.6cqw;
  height: 23.8cqw;
  border-radius: 50% / 40%;
  border: 0.65cqw solid #fff;
  box-shadow: 0 0.8cqw 2.4cqw rgba(30, 20, 60, 0.25);
  overflow: hidden;
  background: #e2e8f0;
}
.rgc-photo img,
.rgc-photo svg { display: block; width: 100%; height: 100%; object-fit: cover; }

.rgc-seal {
  position: absolute;
  left: 74.6cqw;
  top: 39.4cqw;
  width: 11.2cqw;
  height: 11.2cqw;
  filter: drop-shadow(0 0.4cqw 0.6cqw rgba(60, 40, 0, 0.35));
}

.rgc-foot {
  position: absolute;
  inset: auto 0 0 0;
  height: 12.3cqw;
  display: flex;
  align-items: center;
  padding: 0 4cqw 0 5.6cqw;
  border-top: 0.25cqw solid #f6e3a6;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.08)),
    linear-gradient(90deg, #a87a2e 0%, #d6ae5c 18%, #f3dc98 38%, #d9b25f 55%, #f1d993 72%, #c4974a 88%, #a77a30 100%);
}
.rgc-foot-title {
  flex: 1;
  font-size: 4.3cqw;
  font-weight: 700;
  letter-spacing: 0.03cqw;
  color: #241a0e;
}
.rgc-qr {
  width: 9.4cqw;
  height: 9.4cqw;
  padding: 0.4cqw;
  margin-right: 1.6cqw;
  background: #fff;
}
.rgc-contact { font-size: 1.95cqw; line-height: 1.45; color: #241a0e; }

/* Expired: card dimmed with a big red stamp across it */
.rgc.is-expired .rgc-face { filter: grayscale(0.65); opacity: 0.75; }
.rgc-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
  padding: 1cqw 5cqw;
  border: 1.4cqw solid #dc2626;
  border-radius: 2cqw;
  color: #dc2626;
  background: rgba(255, 255, 255, 0.55);
  font-size: 12cqw;
  font-weight: 800;
  letter-spacing: 1.5cqw;
  line-height: 1.1;
  pointer-events: none;
}