@import url("identity-back.css");
@import url("passport-layout.css");
@import url("residence-layout.css");
@import url("residence-back.css");
@import url("portrait-effects.css");

/* Keep identity values between the labels printed on the supplied artwork.
   Crop only its white outer margins, preserving the complete card design.
   Container units keep the same spacing on screen, mobile, and print. */
.identity.reference-front .reference-art {
  aspect-ratio: 85.60 / 53.98;
  background: url("identity-front.png") center / 100% 120.26% no-repeat;
  border-radius: inherit;
}

.card-back.identity {
  aspect-ratio: 85.60 / 53.98;
  min-height: 0;
  container-type: inline-size;
}

/* Scale the reverse-side content with the card, so the fixed ratio never
   clips the QR, reference area, or footer on narrow screens or in print. */
.card-back.identity .back-top {
  padding: 3cqw 4.1cqw;
  font-size: 1.48cqw;
  line-height: 1.3;
  letter-spacing: .18cqw;
}

.card-back.identity .back-content {
  padding: 3.1cqw 4.1cqw 1.3cqw;
  grid-template-columns: 1fr 15.4cqw;
  gap: 4.6cqw;
}

.card-back.identity .back-info small {
  font-size: 1.3cqw;
  letter-spacing: .18cqw;
  margin: 0 0 .55cqw;
}

.card-back.identity .back-info strong {
  font-size: 1.85cqw;
  line-height: 1.2;
  margin-bottom: .9cqw;
  letter-spacing: .09cqw;
}

.card-back.identity .back-info p {
  font-size: 1.48cqw;
  margin: 1.1cqw 0;
}

.card-back.identity .qr-wrap {
  padding-top: .74cqw;
  font-size: .93cqw;
  line-height: 1.4;
}

.card-back.identity .qr {
  width: 14.1cqw !important;
  height: 14.1cqw !important;
  border-width: .9cqw;
}

.card-back.identity .qr-wrap small,
.card-back.identity .qr-wrap span {
  font-size: .93cqw;
  letter-spacing: .09cqw;
}

.card-back.identity .qr-wrap small {
  margin-top: .93cqw;
}

.card-back.identity .qr-wrap span {
  display: block;
}

.card-back.identity .mrz-label {
  font-size: 1.11cqw;
  letter-spacing: .296cqw;
  margin: 0 4.1cqw .93cqw;
}

.card-back.identity .mrz {
  font-size: 2.03cqw;
  letter-spacing: .18cqw;
  margin: 0 4.1cqw 2.22cqw;
  padding: 1.48cqw 2cqw;
}

.card-back.identity .disclaimer {
  font-size: 1.3cqw;
  padding: 1.48cqw 4.1cqw;
}

.meta {
  gap: 12px;
  flex-wrap: wrap;
}

@media print {
  .card.identity {
    width: 85.60mm !important;
    height: 53.98mm !important;
    min-height: 0 !important;
    max-width: none;
    aspect-ratio: auto !important;
    box-sizing: border-box;
  }

  .identity.reference-front .reference-art {
    height: 100%;
    aspect-ratio: auto;
  }
}

.identity.reference-front .disclaimer {
  display: none;
}

.identity.reference-front .artwork {
  visibility: hidden;
}

.identity.reference-front .ref-doctitle,
.identity.reference-front .ref-photo span {
  display: none;
}

.identity.reference-front .ref-photo {
  left: 5.6%;
  top: 27.5%;
  width: 22.2%;
  height: 59%;
  border-radius: 2.5cqw;
  font-size: 0;
}

.identity.reference-front .ref-value {
  font-size: 2.2cqw;
  line-height: 1.15;
  margin: 0;
  padding: 0;
  width: 61%;
  max-width: 61%;
}

.identity.reference-front .ref-surname {
  top: 31.8%;
  font-size: 2.35cqw;
}

.identity.reference-front .ref-first {
  top: 41.6%;
  font-size: 2.35cqw;
}

.identity.reference-front .ref-dob {
  top: 51.3%;
}

.identity.reference-front .ref-sex,
.identity.reference-front .ref-nationality {
  top: 61.6%;
}

.identity.reference-front .ref-sex {
  max-width: 20%;
}

.identity.reference-front .ref-nationality {
  max-width: 38%;
}

.identity.reference-front .ref-person {
  top: 71.4%;
  font-size: 2.05cqw;
}

.identity.reference-front .ref-document {
  top: 81%;
  font-size: 2.05cqw;
}

.identity.reference-front .ref-issued,
.identity.reference-front .ref-expiry {
  top: 90.8%;
  max-width: 22%;
}

/* Typeset lettering independently of the stretched decorative bitmap. */
.identity-static-label {
  display: none;
}

.card.identity .identity-static-label {
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: flex-start;
  z-index: 3;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background: #fffafa;
  color: #9c1220;
  font: 700 1.65cqw / 1.1 Arial, Helvetica, sans-serif;
  letter-spacing: .045cqw;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  transform: none;
}

.card.identity .identity-static-label.identity-heading {
  justify-content: center;
  font: 700 4cqw / 1 Georgia, serif;
  letter-spacing: 0;
}

.card.identity .identity-static-label.identity-subheading {
  justify-content: center;
  font-size: 2cqw;
  letter-spacing: .42cqw;
}

.card.identity .identity-static-label.identity-footer {
  justify-content: center;
  font-size: 1.45cqw;
  font-weight: 600;
  letter-spacing: 0;
}

.identity.reference-front .ref-value,
.card.card-back.identity #outBirth,
.card.card-back.identity .back-field {
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-size: 2.2cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: left;
  transform: none;
}

.actions {
  flex-wrap: wrap;
}

.export-600 {
  border-color: #9c2439;
  color: #9c2439;
}

.signature-editor {
  min-width: 0;
  margin: 18px 0 0;
  padding: 12px;
  border: 1px solid #dedbd6;
  border-radius: 8px;
}

.signature-editor legend {
  padding: 0 5px;
  font-size: 12px;
}

.signature-pad {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3;
  background: #fff;
  outline: 1px solid #d6d1ca;
  border-radius: 4px;
  touch-action: none;
  user-select: none;
  cursor: crosshair;
}

.signature-pad[aria-disabled="true"] {
  pointer-events: none;
  opacity: .6;
}

.signature-pad:focus-visible {
  outline: 2px solid #9c2439;
  outline-offset: 2px;
}

.signature-tools {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.signature-tools button {
  padding: 7px 11px;
  font-size: 12px;
}

.signature-editor p {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.nationality-help {
  display: block;
  margin-top: 6px;
  color: #766b65;
  font-size: 10px;
  line-height: 1.5;
}

.nationality-help[hidden] {
  display: none;
}

@media print {
  .export-600 { display: none !important; }
}