/* AltID presentation — the right-hand panel on /altid.
   Implements the AltID Modtager Design Scheme v0.9 "AltID brandet (cross device)" layout.
   Loaded on top of kiosk.css, which owns the 1920x1080 artboard and the result screens.

   Sizes are scaled up from the scheme's web values (16/22 heading, 14/17 body): this is a
   1080p kiosk read from standing distance, not a 375px phone. The type roles are preserved —
   Inter Semibold for the handlingsanvisning, Inter Regular for everything else. */

:root {
  /* Scheme palette, p27. Do not substitute these with the FrontDesk tokens. */
  --altid-dark-blue: #0e2c4c;
  --altid-cool-grey: #586b7d;
  --altid-light-grey: #e4eaeb;
  --altid-white: #ffffff;
  --altid-green: #0cb85e;
  --altid-blue: #1f7ade;
}

.altid-card {
  background: var(--altid-white);
  border: 1px solid var(--altid-light-grey);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 700px;
  flex: none;
}

/* AltID brand — the approved vertical lockup, unmodified. */
.altid-card__brand {
  height: 76px;
  width: auto;
  display: block;
}

.altid-card__ask {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* Handlingsanvisning: says what happens on scan, never what is being asked for. */
.altid-card__instruction {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--altid-dark-blue);
}

/* Jeres navn. */
.altid-card__requester {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  color: var(--altid-cool-grey);
}

/* The scheme's QR safety margin: a white frame of at least 12px around the symbol. */
.altid-card__frame {
  background: var(--altid-white);
  padding: 16px;
  border-radius: 12px;
  display: block;
}

.altid-card__code {
  width: 390px;
  height: 390px;
  display: block;
  transition: opacity 160ms ease;
}

/* Opfordring til borgere om at tjekke, før de deler. */
.altid-card__reminder {
  margin: 0;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: var(--altid-light-grey);
  color: var(--altid-dark-blue);
  font-size: 20px;
  font-weight: 400;
}

/* Info om og hjælp til AltID. */
.altid-card__foot {
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--altid-light-grey);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  font-weight: 400;
  color: var(--altid-cool-grey);
}

.altid-card__help {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--altid-blue);
  text-decoration: none;
  white-space: nowrap;
}

/* The URL is spelled out because a kiosk screen cannot be tapped to follow the link. */
.altid-card__help-url {
  color: var(--altid-cool-grey);
  font-size: 14px;
}

/* ---------- Scan status, deliberately outside the AltID card ---------- */

.altid-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 48px;
}

.altid-status__waiting {
  display: flex;
  align-items: center;
  gap: 14px;
}

.altid-status__label {
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
}

.altid-status__validity {
  font-size: 20px;
  font-weight: 500;
  color: var(--faint);
}

.altid-status__countdown {
  font-family: var(--font-mono);
}