/* Stili personalizzati per il contenitore del PDF per garantire che si adatti alla larghezza */
#pdfContainer {
  align-items: center;
  width: 100%;
}

.pdf-page-wrapper {
  position: relative;
  display: block;
  /* Shrink-to-fit so the wrapper box IS the canvas box: signature overlays are
     positioned in % of this element, so any extra padding/margin here would
     offset every overlay. Keep spacing on the wrapper, never on the canvas. */
  width: fit-content;
  margin: 20px auto;
}

#pdfContainer canvas {
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0;
  max-width: 100%;
  height: auto;
}

.signature-field-overlay {
  position: absolute;
  /* Transparent so the signer can read the document text underneath: this box can
     sit anywhere on the page, including over existing words. The painted area moves
     to a chip on .signature-field-text, which keeps the theme's background/text
     colour pairing intact. The dashed border still marks the field. */
  background-color: transparent;
  border: 2px dashed var(--sidebarBackgroundColor, #563e7d);
  border-radius: 4px;
  display: flex;
  /* Row, not column: the field is 164x45pt (~3.6:1), so on a phone the box is only
     ~23px of usable height. A column must fit the SUM of the label and icon heights
     and cannot; a row only needs the MAX of the two. */
  flex-direction: row;
  column-gap: 6px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  /* No % padding: percentages resolve against the containing block's WIDTH -- here
     the whole page wrapper (~800px), which collapsed this box's content height to 0
     and pushed the label out of view. The 2px dashed border is the visual inset. */
  padding: 0;
  box-sizing: border-box;
  /* No min-width/min-height: the box must match the real 164x45pt field exactly,
     and a pixel minimum would clamp it back to desktop size on phones. */
  transition: all 0.3s ease;
}

.signature-field-text {
  color: var(--sidebarBackgroundColor, #563e7d);
  /* Chip: the same background/text pair the theme already ships, shrunk from the
     whole box down to hugging the name. Keeping the pair together means this
     introduces no contrast case that did not already exist. */
  background-color: var(--inputBoxBackgroundColor);
  padding: 1px 4px;
  border-radius: 2px;
  font-weight: 600;
  text-align: center;
  /* Viewport-based, not container-based: below 768px the sidebar is off-canvas so
     the canvas (and therefore this box) tracks the viewport width directly. The
     plain 14px fallback is safe on its own -- with the icon hidden below 992px a
     14px line fits even the 23px-tall phone box. */
  font-size: 14px;
  font-size: min(14px, 3vw);
  line-height: 1.1;
  /* min-width: 0 is required: a flex item's automatic minimum size is its
     min-content width, which would push the name past the box instead of
     letting text-overflow ellipsize it. */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signature-field-icon {
  /* Hidden by default. Below 992px the overlay is only 27-51px tall (and it is
     SMALLER at 768px than at 767px, because the sidebar claims 20rem there), so
     the name needs the whole box. Shown only where it demonstrably fits. */
  display: none;
}

/* Fixed px, not % or container units: both box-relative mechanisms tried here
   (cqh, then % height on a flex item) failed to resolve in real browsers, and a
   px max-height that becomes the binding value is worse than no cap at all.
   20x16 is exactly the 640/512 viewBox ratio, so no aspect-ratio resolution is
   needed. Worst case at this breakpoint (sidebar shown) is a 50.8px-tall box. */
@media (min-width: 992px) {
  .signature-field-icon {
    display: block;
    width: 20px;
    height: 16px;
    flex: 0 0 auto;
    order: -1;
    fill: var(--sidebarTitleColor, #563e7d);
  }
}

body {
  display: flex;
  flex-direction: column;
  /*min-height: 100vh;
    margin: 0; /* Rimuove il margine predefinito del body */
  overflow: hidden;
  background-color: rgba(249, 250, 251, 1);
  /* Impedisce lo scorrimento del body */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
  /* Rimuove il margine top predefinito dal footer */
  z-index: 20;
  height: 4rem;
  background-color: var(--footerBackgroundColor) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

#footerContainer {
  display: flex;
  justify-content: center;
  width: 100%;
}

#footerContainer.homePageFooter {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  align-items: center;
}

#footerButtons {
  grid-column: 2;
  display: flex;
  gap: 10px;
  justify-content: center;
}

#footerText {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  text-align: right;
}

#footerText h4 {
  color: var(--headerTitleColor);
  margin: 0;
  padding-right: 25px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  justify-content: space-between;
  color: var(--headerTitleColor);
  display: var(--hideHeader);
  align-items: center;
  z-index: 20;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background-color: var(--headerBackgroundColor);
  padding-left: 1rem;
  padding-right: 1rem;
}

.loader-container {
  color: var(--sidebarBackgroundColor);
  width: 250px;
  height: 200px;
  text-align: center;
}

#mainContent {
  height: calc(100vh - 4rem - var(--marginHeader));
  height: calc(100dvh - 4rem - var(--marginHeader));
  /* better mobile viewport support */
  min-height: 100px;
  /* Ensure a minimum height to prevent scrollbar issues */
  margin-top: var(--marginHeader);
  margin-bottom: var(--marginHeader);
  padding-bottom: 5rem;
  /* Extra padding so the content scrolls into view completely */
  box-sizing: border-box;
  /* Prevent padding from altering element's total height */
  overflow-y: auto;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  /* ease-in-out */
  transition-duration: 300ms;
  z-index: 10;
  text-align: center;
  background-color: #fafafa;
}

#downloadButton {
  display: var(--hideDownloadValidated);
}

#downloadSigned {
  display: var(--hideDownloadSigned);
}

#sidebar {
  /* Altezza sidebar tiene conto dell'header */
  /* height: calc(100vh); */
  /* Equivalente a h-16 dell'header */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  border-right-color: rgb(229, 231, 235);
  border-right-width: 1px;
  width: 18rem;
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.1);
  z-index: 30;
  transform: translateX(-100%);
  transition: transform 300ms ease-in-out;
  padding: 16px;
  text-align: center;
  background-color: var(--sidebarBackgroundColor);

}

a {
  text-decoration: none;
}

#sidebar label,
#sidebar input {
  width: 100%;
  border: 0;
}

#sidebar img {
  max-width: 14rem;
  display: block;
  margin: auto;
}

#sidebar h2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--tw-text-gray-700);
  /* or the specific hex value for gray-700 */
  margin-bottom: 1rem;
}

#sidebar .esignatureLogo {
  max-height: 50px;
  width: auto;
  margin-bottom: 10px;
}

#sidebar .procedureInfo {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-left: 10px;
  margin-top: 20px;
}

.documentElements {
  background-color: var(--buttonBackgroundColor) !important;
  padding: 0.25rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 1px rgba(0, 0, 0, 0.1);
  margin-top: 8px;

}

.documentElements h3 {
  color: var(--sidebarTextColor) !important;
  font-size: 0.875rem !important;
  font-weight: 600;
  margin: 0;
  margin-bottom: 5px;
}

.documentElements {
  text-align: center;
  color: var(--sidebarTextColor) !important;
  font-size: 0.750rem;
  text-align: center;
  /* background-color: var(--sidebarBackgroundColor)!important; */
}

#sidebarText {
  color: var(--sidebarTextColor);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

#sidebarTitle {
  color: var(--sidebarTitleColor) !important;
}

h2 {
  margin: 0;
}

#burgerMenu {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem;
  border-radius: 0.375rem;
  display: var(--burgerMenuDisplay);
  z-index: 50;
}

#burgerMenu svg {
  width: 1.5rem;
  height: 1.5rem;
}

#burgerMenu:hover {
  background-color: var(--sidebarBackgroundColor);
}

#burgerMenu:focus {
  outline: none !important;
  --tw-ring-color: rgba(255, 255, 255, 0.5);
  --tw-ring-inset: inset;
  box-shadow: 0 0 0 calc(2px + 1px) var(--tw-ring-color);
}

#headerText {
  text-align: center;
  width: 100%;
  padding: 0 75px;
  /* Equal padding so text-align: center remains visually flawless relative to the screen width */
  box-sizing: border-box;
  min-width: 0;
}


#documentTitle {
  width: 100%;
  font-size: 1.125rem;
  /* Shrunk from 1.25rem to eliminate the upper bleed completely */
  line-height: 1.35rem;
  text-align: center;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Maximum number of lines permitted to prevent vertical explosion of the header layout */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#documentDescription {
  font-size: 0.875rem;
  text-align: center;
  color: var(--headerSubtitleColor);
  margin: 0;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal .formContent {
  margin-top: 50vh;
  transform: translateY(-50%);
  margin-left: 10px;
  margin-right: 10px;
}

.formContent {
  border-radius: 8px;
  padding: 15px !important;
  box-sizing: border-box;
  background-color: white;
  margin: 5% auto;
  background-color: var(--sidebarBackgroundColor);
  margin: 20px 5px;
  padding: 20px;
  border-radius: 8px;
}

.formContent.inputBox {
  background-color: var(--inputBoxBackgroundColor);
  border: solid 1.5px #bcbcbc;
}

#mainContent h2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: black;
  /* or the specific hex value for gray-700 */
  text-align: left;
  padding: 10px;
}

#mainContent h3 {
  color: black;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  margin-top: 0;
}

#mainContent.completedProcedureView {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#mainContent.completedProcedureView::before,
#mainContent.completedProcedureView::after {
  content: '';
  margin: auto 0;
}

#mainContent .completedProcedureIcon {
  max-height: 150px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

#otp {
  font-size: 40px;
  letter-spacing: 20px;
  width: 240px;
  padding-left: 40px;
  padding-right: 0px;
  text-align: center;
  overflow: hidden;
}

.formContent input {
  border-radius: 4px;
  border: 1px solid #ccc;
  width: 99%;
  max-width: 550px;
  font-size: 30px;
  padding: 5px;
  text-align: center;
}

#email {
  font-size: 25px;
}

.formContent p {
  color: black;
  font-size: .8rem;
}

.formBlock {
  border-radius: 8px;
  background-color: var(--sidebarBackgroundColor);
  padding: 10px;
  margin: 20px 0;

}

.formButtons {
  clear: both;
  height: 2rem;
  border-top: 1px solid #00000009 !important;
  padding-top: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px
}

#signaturePreview {
  font-family: 'Homemade Apple', cursive;
  font-size: 30px;
  padding: 10px;
  /* border-bottom: 1px solid #ccc;
  margin-bottom: 5px; */
}

#signatureCanvas {
  width: 100%;
  height: 150px;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: block;
  /* Prevent inline-block spacing issues */
  margin: 0 auto;
  margin-bottom: 1rem;
  background-color: white;
}

.signButton,
#signButton,
#downloadSigned {
  background-color: var(--signButtonBackgroundColor);
  color: var(--signButtonTextColor);
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 13.333px;
}

.signButton:hover {
  background-color: var(--signButtonBackgroundColorHover);
  color: var(--signButtonTextColorHover);
}

.isHidden {
  display: none !important;
}

.button,
button {
  cursor: pointer;
  border-radius: 5px;
  border: 0px;
  padding: 0.5rem 1.5rem !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 200ms ease-in-out;
  /* padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; */
  color: var(--buttonTextColor);
  background-color: var(--buttonBackgroundColor);
  font-family: inherit;
  margin-left: 5px;
  margin-right: 5px;
}

.button:hover,
button:hover {
  color: var(--buttonTextColor);
  background-color: var(--buttonBackgroundColorHover);
}

button:disabled,
.button:disabled,
.signButton:disabled {
  color: var(--buttonTextColor);
  background-color: var(--buttonBackgroundColor);
  opacity: 0.5;
  animation: fadeIn 2s ease-in-out infinite;
}

.button.backButton {
  color: #ffffff;
  background-color: #939293;
}

.button.backButton:hover {
  background-color: #bcbcbc;
}

@keyframes fadeIn {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.7;
  }
}

#sidebarButtons svg,
#footerContainer a svg {
  float: left;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
}

#sidebarOverlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  display: none;
}

#sidebarButtons {
  position: fixed;
  bottom: 0;
  width: 90%;
  margin-bottom: 0.25rem;
}

#sidebarButtons li {
  list-style-type: none;
}

#sidebarButtons ul {
  padding: 0;
  margin: 0;
}

.sidebarButtons {
  display: block;
  margin-bottom: 1rem;
}

#useDrawnSignature,
#useTypedSignature,
#verifyOTP,
#sendSms,
#sendEmail {
  float: right;
}

/* Mostra la sidebar di default per dispositivi non mobili */
#verifyOTP {
  display: none;
}

@media (min-width: 768px) {

  #sidebar {
    transform: translateX(var(--hideSidebar)) !important;
  }

  #burgerMenu {
    display: none;
  }

  #headerText,
  #mainContent,
  #footerContainer {
    padding-left: var(--paddingSidebar);
  }

  #signatureCanvas {
    width: 550px;
    height: 150px;
  }

  .modal .formContent {
    max-width: 750px;
    margin-inline: auto;

  }

  #email {
    font-size: 30px;
  }
}

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: auto;
}

/* Vertical Line */
.timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  /* Center of the 2rem circle */
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background-color: #4B5563;
  z-index: 0;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 10;
  /* Above line */
}

.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.step-active .step-number {
  background-color: white;
  color: var(--primary-blue);
}

.step-active .step-text {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--sidebarTextColor);
}

.step-inactive.step-1 {
  opacity: 0.6;
}

.step-inactive.step-2 {
  opacity: 0.6;
}

.step-inactive.step-3 {
  opacity: 0.6;
}

.step-inactive.step-4 {
  opacity: 0.6;
}

.step-inactive.step-idv {
  opacity: 0.6;
}

/* Verifica d'identità incorporata: il frame riempie l'area di contenuto.
   #mainContent ha già height calc(100dvh - ...) e overflow-y auto, quindi qui mi limito
   a occupare il 100% senza toccare quel calcolo, condiviso con le altre 11 pagine. */
.idvEmbed {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;
  padding: 10px;
  box-sizing: border-box;
}

#idvFrame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 420px;
  border: 0;
  border-radius: 8px;
  background-color: #ffffff;
}

.step-inactive .step-number {
  background-color: #6B7280;
  color: #D1D5DB;
}

.step-inactive .step-text {
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--sidebarTextColor);
}

.sidebarFooter {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(55, 65, 81, 0.5);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sidebarFooter .eidasLogo {
  margin-bottom: 20px !important;
  max-height: 40px;
  width: auto;
}

.signerData {
  font-size: 0.875rem;
  color: #D1D5DB;
  margin-bottom: 1rem;
  line-height: 1.4;
  font-weight: 300;
}

.signerData strong {
  color: white;
  font-weight: 500;
}

.signerData p {
  margin-block-start: 0;
  margin-block-end: 0;
}

.status-section {
  margin-bottom: 1.5rem;
}

.text-bg-warning {
  color: #000 !important;
  background-color: rgb(254, 217, 72) !important;
}

.text-bg-success {
  color: #fff !important;
  background-color: rgb(24, 182, 80) !important;
}

.text-bg-danger {
  color: #fff !important;
  background-color: rgb(220, 53, 69) !important;
}

.badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 10px;
}

.stepTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 20px;
}

.signatureChoiceBtn {
  height: 20px;
  width: auto;
}

.switchButtonsContainer {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.hidden {
  display: none !important;
}

.languageSelectContainer {
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
  right: 0;
  top: 100%;
  padding: 8px 0;
  list-style: none;
  border-radius: 4px;
  margin: 0;
}

.dropdown-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f1f1f1;
}

.dropdown-menu a {
  text-decoration: none;
  color: #333;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.dropdown-toggle {
  cursor: pointer;
  display: block;
}

/* Show on hover or when open class is applied */
.dropdown:hover .dropdown-menu {
  display: block;
}

.flag-img {
  width: 24px;
  height: auto;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Banner "ambiente di test" per l'OTP di debug: deliberatamente vistoso e non
   confondibile con l'UI di produzione. Reso solo via JS quando arriva debugOtp. */
/* Avviso sullo step firma quando il signer viene rimandato indietro perche'
   l'immagine della firma non era piu' disponibile all'invio dell'OTP */
.resignNotice {
  margin: 0 0 1rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid #b45309;
  border-left-width: 6px;
  border-radius: 8px;
  background-color: #fff7ed;
  color: #7c2d12;
}

/* Quante volte la verifica d'identità è già stata tentata: contorno, non messaggio */
.idvRetryAttempts {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Errore 921: il ritentativo non è partito. È una condizione transitoria, quindi ha il peso
   visivo di un avviso e non quello della schermata di fallimento definitivo. */
.idvRetryError {
  margin: 0 0 1rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid #b45309;
  border-left-width: 6px;
  border-radius: 8px;
  background-color: #fff7ed;
  color: #7c2d12;
}

/* Terminal notice on the OTP page: same box model as .idvRetryError but a danger palette,
   because unlike an IDV retry this state cannot be resolved by the signer. */
.otpBlockedNotice {
  margin: 0 0 1rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid #b91c1c;
  border-left-width: 6px;
  border-radius: 8px;
  background-color: #fef2f2;
  color: #7f1d1d;
}

/* Avviso sulla finestra di verifica, prima dell'avvio: non è un errore ma una condizione da
   conoscere, quindi ha lo stesso peso visivo di .idvRetryAttempts, senza riquadro. La dimensione
   del testo non la ridichiaro: la detta ".formContent p", che è più specifico, e una regola qui
   non avrebbe alcun effetto. */
.idvTimeLimitNotice {
  margin: 0 0 1rem 0;
  opacity: 0.75;
}

/* Tempo che resta per completare la verifica. Nel blocco dell'iframe è l'unica cosa che il
   firmatario legge di nostro, quindi sta centrata e leggibile anche accanto al frame.
   Il selettore è qualificato con "p" per pareggiare la specificità di ".formContent p": lo stesso
   paragrafo compare dentro .idvWait (che sta in .formContent) e accanto al frame (che non ci sta),
   e senza il tag il conto alla rovescia risulterebbe più piccolo in uno dei due posti. */
p.idvCountdown {
  flex: 0 0 auto;
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.9375rem;
}

.idvCountdownValue {
  font-weight: 600;
  /* Cifre a larghezza fissa: senza questo la riga si muove a ogni secondo che cambia */
  font-variant-numeric: tabular-nums;
}

/* Ultimi due minuti: cambio solo il colore del tempo, non il tono del messaggio. Chi sta
   fotografando il documento non ha bisogno di un allarme, solo di sapere che deve sbrigarsi. */
.idvCountdown.isUrgent {
  color: rgb(220, 53, 69);
  font-weight: 600;
}

/* Conto alla rovescia a zero: il verdetto non è nostro, lo dà il backend al prossimo polling.
   Qualificato con "p" per lo stesso motivo di p.idvCountdown, che questo rimpiazza. */
p.idvCountdownChecking {
  flex: 0 0 auto;
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.9375rem;
  opacity: 0.75;
}

.debugOtpBanner {
  margin: 0 0 1rem 0;
  padding: 1rem 1.25rem;
  border: 2px solid #b45309;
  border-left-width: 6px;
  border-radius: 8px;
  background-color: #fff7ed;
  color: #7c2d12;
}

.debugOtpBanner__title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}

.debugOtpBanner__title::before {
  content: "⚠ ";
}

.debugOtpBanner__text {
  margin: 0 0 0.6rem 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.debugOtpBanner__code {
  display: inline-block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  padding: 0.35rem 0.75rem;
  background-color: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  /* Selezionabile/copiabile con un clic */
  user-select: all;
  -webkit-user-select: all;
}