@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&display=swap');

/* Lifetime membership card (front + back). Everything scales with the card width via container units. */
.jsc-card {
  --jsc-red: #b91c1c;
  --jsc-red-dark: #8e0f0f;
  --jsc-navy: #1e3a8a;
  --jsc-navy-dark: #0b1f5c;
  --jsc-gold: #e8b10d;
  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1000 / 630;
  margin: 1rem auto 0;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f2f5fb 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  font-family: "Hind", "Noto Sans Devanagari", "Mangal", system-ui, sans-serif;
  color: #1f2937;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.jsc-card *,
.jsc-card *::before,
.jsc-card *::after {
  box-sizing: border-box;
}
.jsc-in {
  position: absolute;
  inset: 0;
  font-size: 10px;
  font-size: 1.6cqw;
  line-height: 1.3;
}
.jsc-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.jsc-watermark {
  position: absolute;
  left: 40%;
  top: 33%;
  width: 34%;
  opacity: .07;
  pointer-events: none;
}
.jsc-watermark--back {
  left: 30%;
  top: 22%;
  width: 40%;
  opacity: .06;
}

/* ---------- Front ---------- */
.jsc-logo {
  position: absolute;
  left: 3.5%;
  top: 5%;
  width: 20.5%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 .3em 1em rgba(0, 0, 0, .25);
}
.jsc-tr-text {
  position: absolute;
  right: 2%;
  top: 3%;
  width: 15%;
  text-align: center;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.35em;
  line-height: 1.1;
}
.jsc-tr-text small {
  font-size: .8em;
  font-weight: 400;
}
.jsc-heart {
  color: #ef4444;
  font-style: normal;
}
.jsc-org {
  position: absolute;
  left: 25%;
  top: 4%;
  width: 52%;
  text-align: center;
}
.jsc-org-hi {
  color: var(--jsc-navy-dark);
  font-size: 2.15em;
  font-weight: 700;
  line-height: 1.15;
}
.jsc-org-en {
  margin-top: .25em;
  color: var(--jsc-red);
  font-size: 1.05em;
  font-weight: 700;
  white-space: nowrap;
}
.jsc-reg {
  color: var(--jsc-navy);
  font-size: 1.05em;
  font-weight: 600;
}
.jsc-title {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: .45em;
  padding: .3em 1.8em .25em;
  border: .15em solid var(--jsc-gold);
  border-radius: 999px;
  background: linear-gradient(135deg, #d32f2f 0%, var(--jsc-red-dark) 100%);
  box-shadow: 0 .25em .7em rgba(142, 15, 15, .35);
  color: #fff;
  line-height: 1.15;
}
.jsc-title-hi {
  font-size: 1.75em;
  font-weight: 700;
}
.jsc-title-en {
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: .08em;
}
.jsc-photo {
  position: absolute;
  left: 4.8%;
  top: 41%;
  width: 18.5%;
  height: 38%;
  overflow: hidden;
  border: .3em solid var(--jsc-navy);
  border-radius: .5em;
  background: #fff;
  box-shadow: 0 .3em .9em rgba(0, 0, 0, .2);
}
.jsc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jsc-photo-ph {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #eef2f7;
  color: #94a3b8;
  font-size: 4em;
  font-weight: 700;
}
.jsc-fields {
  position: absolute;
  left: 25.5%;
  top: 39.5%;
  width: 51%;
}
.jsc-row {
  display: grid;
  grid-template-columns: 50% 4% 46%;
  align-items: baseline;
  margin-bottom: .2em;
  font-size: 1.27em;
  line-height: 1.45;
}
.jsc-l {
  color: var(--jsc-navy-dark);
  font-weight: 700;
  white-space: nowrap;
}
.jsc-l em {
  color: #374151;
  font-size: .78em;
  font-style: normal;
  font-weight: 500;
}
.jsc-c {
  color: var(--jsc-navy-dark);
  font-weight: 700;
}
.jsc-v {
  color: #111827;
  font-weight: 600;
  white-space: nowrap;
}
.jsc-v--name {
  font-weight: 700;
}
.jsc-v--bg {
  color: var(--jsc-red);
  font-weight: 700;
}
.jsc-identity .jsc-org {
  top: 3.2%;
}
.jsc-identity .jsc-title {
  margin-top: .45em;
  padding: .22em 1.5em .18em;
}
.jsc-identity .jsc-title-hi {
  font-size: 1.55em;
}
.jsc-identity .jsc-title-en {
  font-size: .95em;
}
.jsc-identity .jsc-v--id {
  color: var(--jsc-red);
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
.jsc-identity .jsc-photo {
  top: 40%;
  height: 34%;
}
.jsc-identity .jsc-fields {
  top: 39%;
  width: 51%;
}
.jsc-identity .jsc-side {
  top: 38%;
}
.jsc-identity .jsc-row {
  margin-bottom: .1em;
  font-size: 1.12em;
  line-height: 1.3;
}
.jsc-identity .jsc-row--addr {
  align-items: flex-start;
}
.jsc-identity .jsc-v--addr {
  white-space: normal;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.jsc-identity .jsc-bl-text {
  display: none;
}
.jsc-identity .jsc-foot {
  height: 19%;
}
.jsc-pill {
  display: inline-block;
  padding: 0 1em;
  border-radius: 999px;
  background: linear-gradient(135deg, #15803d 0%, #166534 100%);
  color: #fff;
  font-weight: 700;
}
.jsc-side {
  position: absolute;
  right: 3%;
  top: 36%;
  width: 18%;
  text-align: center;
}
.jsc-qr {
  width: 68%;
  margin: 0 auto;
  padding: .35em;
  border: .2em solid var(--jsc-red);
  border-radius: .5em;
  background: #fff;
}
.jsc-qr img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}
.jsc-qr-cap {
  margin-top: .3em;
  color: #111827;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.15;
}
.jsc-qr-cap small {
  font-size: .85em;
  font-weight: 500;
}
.jsc-slogan {
  margin-top: .9em;
  color: var(--jsc-navy-dark);
  font-size: 1.75em;
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  transform: rotate(-8deg);
}
.jsc-bl-text {
  position: absolute;
  left: 2.5%;
  bottom: 3.5%;
  display: flex;
  gap: .5em;
  align-items: center;
  color: #fff;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.15;
}
.jsc-drop {
  display: inline-flex;
  width: 2.3em;
  height: 2.3em;
}
.jsc-drop svg {
  width: 100%;
  height: 100%;
}

/* ---------- Back ---------- */
.jsc-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  height: 12%;
  background: linear-gradient(135deg, #d32f2f 0%, var(--jsc-red-dark) 100%);
}
.jsc-band::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 58.5%;
  background: var(--jsc-gold);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3em) 100%, 0 100%);
}
.jsc-band-l,
.jsc-band-r {
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
}
.jsc-band-l {
  width: 57%;
  padding-left: 3%;
  background: linear-gradient(135deg, var(--jsc-navy) 0%, var(--jsc-navy-dark) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 3em) 100%, 0 100%);
  font-size: 1.6em;
}
.jsc-band-r {
  flex: 1;
  justify-content: center;
  padding: 0 2% 0 1%;
  font-size: 1.15em;
  text-align: center;
}
.jsc-feat {
  position: absolute;
  left: 3%;
  top: 15%;
  bottom: 21%;
  width: 54%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.jsc-feat li {
  display: flex;
  gap: .8em;
  align-items: center;
  margin-bottom: .75em;
  padding-bottom: .75em;
  border-bottom: 1px solid rgba(30, 58, 138, .12);
}
.jsc-feat li:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
.jsc-ico {
  display: inline-flex;
  flex: 0 0 4.4em;
  justify-content: center;
  align-items: center;
  width: 4.4em;
  height: 4.4em;
  border: .2em solid #fff;
  border-radius: 50%;
  box-shadow: 0 .2em .6em rgba(0, 0, 0, .2);
}
.jsc-ico svg {
  width: 55%;
  height: 55%;
}
.jsc-ico--red { background: linear-gradient(135deg, #e53935 0%, var(--jsc-red-dark) 100%); }
.jsc-ico--green { background: linear-gradient(135deg, #22a34a 0%, #166534 100%); }
.jsc-ico--navy { background: linear-gradient(135deg, #2f4fb0 0%, var(--jsc-navy-dark) 100%); }
.jsc-feat-txt {
  color: #374151;
  font-size: 1.05em;
  line-height: 1.3;
}
.jsc-feat-txt strong {
  display: block;
  color: var(--jsc-navy-dark);
  font-size: 1.25em;
}
.jsc-right {
  position: absolute;
  left: 60%;
  top: 15%;
  bottom: 21%;
  width: 37%;
  overflow: hidden;
}
.jsc-box {
  position: relative;
  padding: .7em .9em;
  border: 1px solid #f3d58a;
  border-radius: .7em;
  background: #fff8e1;
}
.jsc-quote {
  padding: .9em 1.6em;
  color: var(--jsc-navy-dark);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.jsc-q {
  position: absolute;
  color: var(--jsc-red);
  font-family: Georgia, serif;
  font-size: 2.6em;
  line-height: 1;
}
.jsc-q--open { left: .15em; top: .05em; }
.jsc-q--close { right: .15em; bottom: -.3em; }
.jsc-box-title {
  margin-bottom: .3em;
  color: var(--jsc-red);
  font-size: 1.2em;
  font-weight: 700;
}
.jsc-box-title em {
  color: #6b7280;
  font-size: .8em;
  font-style: normal;
  font-weight: 500;
}
.jsc-family-list {
  margin: 0;
  padding-left: 1.3em;
  color: #111827;
  font-size: 1.08em;
  line-height: 1.4;
}
.jsc-family-list strong {
  color: var(--jsc-navy-dark);
}
.jsc-family-list span {
  color: #4b5563;
  font-size: .9em;
}
.jsc-notice {
  margin-top: .7em;
}
.jsc-notice-tag {
  display: inline-block;
  padding: .1em .9em;
  border-radius: .3em .9em .9em .3em;
  background: var(--jsc-red);
  color: #fff;
  font-size: 1.15em;
  font-weight: 700;
}
.jsc-notice ul {
  margin: .4em 0 0;
  padding-left: 1.1em;
  color: #374151;
  font-size: 1em;
  line-height: 1.3;
}
.jsc-notice li {
  margin-bottom: .2em;
}
.jsc-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 21%;
  border-top: .28em solid var(--jsc-gold);
  background: #fff;
  overflow: hidden;
  z-index: 2;
}
.jsc-foot-l {
  display: flex;
  flex: 0 0 54%;
  gap: .55em;
  align-items: center;
  padding: 0.35em 0.7em 0.35em 2.2%;
  min-width: 0;
  overflow: hidden;
}
.jsc-director {
  display: flex;
  flex: 0 0 auto;
  gap: .35em;
  align-items: center;
  padding-right: .7em;
  border-right: 1px solid #cbd5e1;
  line-height: 1.12;
}
.jsc-director-ico {
  display: inline-flex;
  width: 2em;
  height: 2em;
}
.jsc-director-ico svg {
  width: 100%;
  height: 100%;
}
.jsc-director small {
  display: block;
  color: #4b5563;
  font-size: .85em;
}
.jsc-director strong {
  display: block;
  color: var(--jsc-navy-dark);
  font-size: 1.15em;
}
.jsc-foot-org {
  min-width: 0;
  flex: 1;
  line-height: 1.2;
  overflow: hidden;
}
.jsc-foot-org strong {
  display: block;
  color: var(--jsc-navy-dark);
  font-size: 1.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jsc-foot-org span {
  display: block;
  color: #4b5563;
  font-size: .82em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jsc-foot-r {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  margin-left: -2.4em;
  padding: 0.3em 1.6% 0.3em 3.5em;
  background: linear-gradient(135deg, #c62828 0%, var(--jsc-red-dark) 100%);
  clip-path: polygon(2.2em 0, 100% 0, 100% 100%, 0 100%);
  color: #fff;
  font-size: .78em;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
}
.jsc-foot-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .12em;
  min-width: 0;
  flex: 1;
  width: 100%;
  overflow: hidden;
}
.jsc-foot-line {
  display: flex;
  gap: .28em;
  align-items: center;
  min-width: 0;
}
.jsc-foot-line > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jsc-foot-line--email {
  align-items: center;
}
.jsc-foot-line--web {
  align-items: center;
}
.jsc-foot-line--address {
  align-items: flex-start;
  flex-shrink: 0;
}
.jsc-foot-line--address > span {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  word-break: break-word;
  line-height: 1.15;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
.jsc-foot-line small {
  display: inline;
  font-size: .9em;
  opacity: .9;
}
.jsc-foot-line--phone {
  align-items: center;
  font-size: 1.05em;
  font-weight: 700;
}
.jsc-foot .mc-back-footer__ico {
  display: inline-flex;
  flex: 0 0 1.4em;
  width: 1.4em;
  height: 1.4em;
  color: #fff;
}
.jsc-foot .mc-back-footer__ico svg {
  width: 100%;
  height: 100%;
}

/* Stack used on account, print and app pages */
.mc-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}
.mc-card-stack .jsc-card {
  margin-top: 0;
}

@media print {
  .jsc-card {
    box-shadow: none !important;
    border: 1px solid #cbd5e1;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}