body,
.field {
  font-family: "Calibiri", sans-serif;
}
.card-container {
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

#card-preview.music-id-card {
  width: 600px;
  height: 343px;
}

#card-preview.embassy-cert-card {
  width: 800px;
  height: 1035px;
}

.field {
  position: absolute;
  font-family: Calibri, Arial, sans-serif;
  white-space: nowrap;
  transform: translate(0, -50%);
}

/* --- Music ID Fields --- */
.music-id-card .photo-back {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  position: absolute;
  opacity: 1;
}

.music-id-card .name,
.music-id-card .society,
.music-id-card .publisher,
.music-id-card .label,
.music-id-card .since,
.music-id-card .special,
.music-id-card .ipi {
  z-index: 2;
  color: #000;
}

.music-id-card .name {
  top: 50%;
  left: 36%;
  font-size: 22px;
  font-weight: normal;
}

.music-id-card .since {
  top: 42.2%;
  left: 50%;
  font-size: 18px;
  color: #313131 !important;
}

.music-id-card .special {
  top: 57%;
  left: 36%;
  font-size: 18px;
}

.music-id-card .ipi {
  bottom: 9%;
  left: 4.5%;
  font-size: 18px;
}

.music-id-card .society {
  top: 72%;
  left: 4.5%;
  font-size: 18px;
}

.music-id-card .publisher {
  top: 71.8%;
  left: 22.8%;
  font-size: 18px;
}

.music-id-card .label {
  top: 83%;
  left: 22.8%;
  font-size: 18px;
}

/* --- Embassy Certificate --- */
.embassy-cert-card .cert-id {
  top: 35.5%;
  left: 4.5%;
  font-size: 30px;
  font-weight: bold;
}

.embassy-cert-card .cert-date {
  top: 41%;
  left: 4.5%;
  font-size: 22px;
  font-weight: normal;
}

.embassy-cert-card .cert-name {
  top: 53%;
  left: 4.5%;
  font-size: 30px;
  font-weight: normal;
}

.embassy-cert-card .cert-title {
  top: 59%;
  left: 4.5%;
  font-size: 27px;
  font-weight: normal;
}
.music-id-card .photo-crop {
  width: 173px;
  height: 181px;
  object-fit: cover;
  clip-path: polygon(50% 2%, 95% 25%, 95% 75%, 52% 98%, 7% 75%, 7% 25%);
  position: absolute;
  top: 34%;
  left: 5%;
  z-index: 1;
}
.photo-container {
  clip-path: polygon(50% 2%, 95% 25%, 95% 75%, 52% 98%, 7% 75%, 7% 25%);
  overflow: hidden;
  position: absolute;
}