/*
|--------------------------------------------------------------------------
| SIGBUY V-CARD
|--------------------------------------------------------------------------
*/


.vcard-builder-layout {
  display: grid;

  grid-template-columns:
    minmax(420px, 0.9fr)
    minmax(560px, 1.1fr);

  gap: 26px;

  align-items: start;
}


/*
|--------------------------------------------------------------------------
| PREVIEW PANEL
|--------------------------------------------------------------------------
*/

.vcard-preview-panel {
  position: sticky;

  top: 96px;

  overflow: hidden;

  background: #ffffff;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius);
}


.vcard-preview-stage {
  padding: 34px;

  background:
    #f6f6f4;
}


/*
|--------------------------------------------------------------------------
| BUSINESS CARD
|--------------------------------------------------------------------------
*/

.digital-business-card {
  width: 100%;

  max-width: 620px;

  min-height: 330px;

  margin:
    0 auto;

  padding: 34px;

  background:
    #ffffff;

  border-radius:
    20px;

  box-shadow:
    0 20px 60px
    rgba(14, 29, 51, 0.10);

  color:
    #151515;
}


.digital-card-top {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 28px;
}


/*
|--------------------------------------------------------------------------
| PERSON
|--------------------------------------------------------------------------
*/

.digital-card-person {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 20px;
}


.digital-card-portrait {
  flex-shrink: 0;

  width: 76px;
  height: 76px;

  overflow: hidden;

  border-radius: 50%;

  background:
    #efede7;
}


.digital-card-portrait.is-empty::after {
  content: "";

  display: block;

  width: 100%;
  height: 100%;
}


.digital-card-portrait img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.digital-card-name {
  color:
    var(--navy);

  font-size: 25px;

  line-height: 1.1;

  font-weight: 750;

  letter-spacing:
    -0.025em;
}


.digital-card-position {
  margin-top: 6px;

  color:
    var(--muted);

  font-size: 13px;

  line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| LOGO
|--------------------------------------------------------------------------
*/

.digital-card-logo {
  flex-shrink: 0;

  width: 150px;

  display: flex;

  align-items: flex-start;

  justify-content: flex-end;
}


.digital-card-logo img {
  display: block;

  max-width: 145px;
  max-height: 72px;

  object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| DIVIDER
|--------------------------------------------------------------------------
*/

.digital-card-divider {
  margin:
    28px 0;

  border-top:
    1px solid #dedbd3;
}


/*
|--------------------------------------------------------------------------
| LOWER CARD AREA
|--------------------------------------------------------------------------
*/

.digital-card-bottom {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    22px 30px;
}


.digital-card-company {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.digital-card-company strong {
  color:
    var(--navy);

  font-size: 14px;
}


.digital-card-company span {
  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.45;
}


.digital-card-contact {
  display: flex;

  flex-direction: column;

  gap: 5px;

  color:
    #343431;

  font-size: 12px;

  line-height: 1.45;
}


/*
|--------------------------------------------------------------------------
| SOCIALS
|--------------------------------------------------------------------------
*/

.digital-card-socials {
  grid-column:
    1 / -1;

  min-height: 20px;

  display: flex;

  align-items: center;

  gap: 12px;
}


.digital-card-socials a {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 24px;
  height: 24px;

  text-decoration: none;
}


.digital-card-socials img {
  display: block;

  width: 18px;
  height: 18px;

  opacity: 0.8;
}


/*
|--------------------------------------------------------------------------
| QR CARD
|--------------------------------------------------------------------------
*/

.vcard-qr-card {
  max-width: 620px;

  min-height: 215px;

  margin:
    22px auto 0;

  padding: 26px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  background:
    #ffffff;

  border-radius:
    18px;

  box-shadow:
    0 14px 40px
    rgba(14, 29, 51, 0.06);
}


.vcard-qr-card h3 {
  margin:
    6px 0 8px;

  color:
    var(--navy);

  font-size: 21px;
}


.vcard-qr-card p {
  max-width: 300px;

  margin: 0;

  color:
    var(--muted);

  font-size: 12px;

  line-height: 1.55;
}


/*
|--------------------------------------------------------------------------
| QR CODE
|--------------------------------------------------------------------------
|
| qrcode.js erzeugt intern:
|
| - Canvas
| - Image
|
| Eines davon wird durch qrcode.js selbst ausgeblendet.
|
| Deshalb hier NICHT beide mit display:block erzwingen.
|--------------------------------------------------------------------------
*/

.vcard-qr-code {
  flex-shrink: 0;

  width: 166px;
  height: 166px;

  padding: 3px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    #ffffff;
}


.vcard-qr-code canvas {
  width: 160px !important;
  height: 160px !important;

  max-width: 160px;

  display: block;

  margin: 0;

  padding: 0;
}


.vcard-qr-code img {
  width: 160px;
  height: 160px;

  max-width: 160px;

  margin: 0;

  padding: 0;
}


/*
|--------------------------------------------------------------------------
| ACTIONS
|--------------------------------------------------------------------------
*/

.vcard-actions {
  max-width: 620px;

  margin:
    22px auto 0;

  display: flex;

  gap: 10px;

  flex-wrap: wrap;
}


/*
|--------------------------------------------------------------------------
| WALLET INFO
|--------------------------------------------------------------------------
*/

.wallet-coming-soon {
  max-width: 620px;

  margin:
    18px auto 0;

  padding:
    14px 16px;

  display: flex;

  align-items: center;

  gap: 13px;

  border:
    1px solid #dedbd3;

  border-radius:
    12px;

  background:
    rgba(255, 255, 255, 0.5);

  color:
    var(--muted);

  font-size: 11px;
}


.wallet-coming-soon span {
  padding:
    5px 8px;

  border-radius:
    999px;

  background:
    var(--navy);

  color:
    #ffffff;

  font-size: 9px;

  font-weight: 800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.wallet-coming-soon strong {
  font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| UPLOAD
|--------------------------------------------------------------------------
*/

.vcard-upload-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

  .vcard-builder-layout {
    grid-template-columns: 1fr;
  }


  .vcard-preview-panel {
    position: static;
  }

}


@media (max-width: 700px) {

  .vcard-preview-stage {
    padding:
      22px 14px;
  }


  .digital-business-card {
    padding:
      24px 20px;
  }


  .digital-card-top {
    flex-direction: column;
  }


  .digital-card-logo {
    width: auto;

    justify-content: flex-start;
  }


  .digital-card-bottom {
    grid-template-columns: 1fr;
  }


  .vcard-qr-card {
    align-items: flex-start;

    flex-direction: column;
  }


  .vcard-upload-grid {
    grid-template-columns: 1fr;
  }

}

/*
|--------------------------------------------------------------------------
| SIGBUY WALLET
|--------------------------------------------------------------------------
*/

.vcard-wallet-panel {
  margin-top:
    18px;

  padding:
    18px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr) auto;

  align-items:
    center;

  gap:
    20px;

  border:
    1px solid
    rgba(209, 173, 105, 0.28);

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(14, 29, 51, 0.98),
      rgba(23, 47, 75, 0.96)
    );

  box-shadow:
    0 16px 40px
    rgba(14, 29, 51, 0.14);
}


.vcard-wallet-panel[hidden] {
  display:
    none !important;
}


.vcard-wallet-copy {
  min-width:
    0;
}


.vcard-wallet-kicker {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #d1ad69;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


.vcard-wallet-copy strong {
  display:
    block;

  color:
    #ffffff;

  font-size:
    14px;

  line-height:
    1.35;
}


.vcard-wallet-copy p {
  max-width:
    390px;

  margin:
    6px 0 0;

  color:
    rgba(255, 255, 255, 0.64);

  font-size:
    11px;

  line-height:
    1.5;
}


.vcard-wallet-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    9px;

  flex-wrap:
    wrap;
}


.vcard-wallet-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  line-height:
    0;

  text-decoration:
    none;

  transition:
    transform 150ms ease,
    opacity 150ms ease;
}


.vcard-wallet-button:hover {
  transform:
    translateY(-1px);
}


.vcard-wallet-button img {
  display:
    block;

  width:
    auto;

  height:
    38px;
}


@media (
  max-width: 720px
) {

  .vcard-wallet-panel {
    grid-template-columns:
      1fr;
  }


  .vcard-wallet-actions {
    justify-content:
      flex-start;
  }

}


@media (
  max-width: 420px
) {

  .vcard-wallet-button img {
    height:
      34px;
  }

}