/* MLOsign */
.mlosign-app,
.mlosign-signer {
  --mlosign-primary: #2563eb;
  --mlosign-text: #111827;
  --mlosign-muted: #6b7280;
  --mlosign-border: #e5e7eb;
  --mlosign-bg: #f8fafc;
  font-family: Inter, Arial, sans-serif;
  color: var(--mlosign-text);
}

.mlosign-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;

  padding: 20px;
  border-radius: 18px;

}

.mlosign-header h2 {
  margin: 0 0 4px;
  color: #fff;
}

.mlosign-header p {
  margin: 0;
  opacity: .9;
}

.mlosign-badge {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  padding: 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 13px;
}

.mlosign-card,
.mlosign-public-card {
  background: #fff;
  border: 1px solid var(--mlosign-border);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.mlosign-card h3,
.mlosign-public-card h2 {
  margin-top: 0;
}

.mlosign-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.mlosign-grid label,
.mlosign-signature-form label {
  display: block;
}

.mlosign-grid span {
  display: block;
  font-size: 13px;
  color: var(--mlosign-muted);
  margin-bottom: 6px;
  font-weight: 700;
}

.mlosign-grid input,
.mlosign-grid select,
.mlosign-type-signature {
  width: 100%;
  border: 1px solid var(--mlosign-border);
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}

.mlosign-actions,
.mlosign-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.mlosign-btn,
.mlosign-btn-secondary,
.mlosign-btn-light {
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  cursor: pointer;
  font-weight: 800;
  transition: transform .15s ease, opacity .15s ease;
}

.mlosign-btn:hover,
.mlosign-btn-secondary:hover,
.mlosign-btn-light:hover {
  transform: translateY(-1px);
}

.mlosign-btn {
  background: var(--mlosign-primary);
  color: #fff;
}

.mlosign-btn-secondary {
  background: #eef2ff;
  color: #1e3a8a;
}

.mlosign-btn-light {
  background: #f3f4f6;
  color: #111827;
  margin-top: 10px;
}

.mlosign-note {
  color: var(--mlosign-muted);
  font-size: 13px;
}

.mlosign-table-wrap {
  overflow-x: auto;
}

.mlosign-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

.mlosign-table th,
.mlosign-table td {
  border-bottom: 1px solid var(--mlosign-border);
  padding: 12px 10px;
  text-align: left;
  font-size: 14px;
}

.mlosign-table th {
  color: var(--mlosign-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mlosign-status {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: #f3f4f6;
}

.mlosign-status.signed { background: #dcfce7; color: #166534; }
.mlosign-status.sent { background: #dbeafe; color: #1d4ed8; }
.mlosign-status.viewed { background: #ffedd5; color: #c2410c; }
.mlosign-status.cancelled { background: #fee2e2; color: #991b1b; }

.mlosign-alert,
.mlosign-message {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
  margin: 12px 0;
}

.mlosign-message.success {
  background: #ecfdf5;
  color: #166534;
  border-color: #bbf7d0;
}

.mlosign-public-card {
  max-width: 760px;
  margin: 24px auto;
}

.mlosign-doc-summary {
  background: var(--mlosign-bg);
  border: 1px solid var(--mlosign-border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 18px;
}

.mlosign-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  font-weight: 800;
}

.mlosign-sign-box {
  border: 1px dashed #94a3b8;
  border-radius: 16px;
  padding: 12px;
  background: #f8fafc;
}

#mlosign-signature-canvas {
  width: 100%;
  max-width: 100%;
  height: 180px;
  background: #fff;
  border-radius: 12px;
  touch-action: none;
}

.mlosign-auto-date {
  margin: 18px 0;
  color: var(--mlosign-muted);
}

.mlosign-full {
  width: 100%;
  font-size: 16px;
}

@media (max-width: 720px) {
  .mlosign-header,
  .mlosign-actions,
  .mlosign-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .mlosign-grid {
    grid-template-columns: 1fr;
  }

  .mlosign-badge {
    align-self: flex-start;
  }
}

/* v0.3.0 - document actions and visual field editor */
.mlosign-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mlosign-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  background: #f3f4f6;
  color: #111827;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
}

.mlosign-mini-btn:hover {
  opacity: .88;
}

.mlosign-signed-btn {
  background: #dcfce7;
  color: #166534;
}

.mlosign-danger {
  background: #fee2e2;
  color: #991b1b;
}

.mlosign-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
}

.mlosign-modal.is-open {
  display: block;
}

.mlosign-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .56);
  backdrop-filter: blur(4px);
}

.mlosign-modal-panel {
  position: relative;
  width: min(1180px, calc(100vw - 28px));
  height: min(92vh, 980px);
  margin: 4vh auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(15, 23, 42, .30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mlosign-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid #e5e7eb;
}

.mlosign-modal-head h3 {
  margin: 0 0 4px;
}

.mlosign-modal-head p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
}

.mlosign-icon-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #f3f4f6;
  color: #111827;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}

.mlosign-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.mlosign-editor-note {
  color: #6b7280;
  font-size: 12px;
}

.mlosign-editor-wrap {
  position: relative;
  flex: 1;
  background: #111827;
  overflow: hidden;
}

#mlosign-editor-pdf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

#mlosign-field-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

#mlosign-page-frame {
  position: absolute;
  width: 62%;
  height: 88%;
  left: 19%;
  top: 6%;
  border: 2px dashed rgba(37, 99, 235, .35);
  background: rgba(255,255,255,.02);
  box-sizing: border-box;
  pointer-events: none;
}

.mlosign-drag-field {
  position: absolute;
  left: 8%;
  top: 78%;
  width: 28%;
  height: 7%;
  border: 2px solid #2563eb;
  background: rgba(37, 99, 235, .15);
  color: #1e3a8a;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: move;
  pointer-events: auto;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .22);
}

.mlosign-date-field {
  left: 42%;
  top: 78%;
  width: 18%;
  height: 5%;
  border-color: #16a34a;
  background: rgba(22, 163, 74, .15);
  color: #166534;
  box-shadow: 0 12px 26px rgba(22, 163, 74, .18);
}

.mlosign-drag-field.is-dragging {
  transform: scale(1.02);
  z-index: 9;
}

.mlosign-signer-pdf-wrap {
  height: min(70vh, 760px);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  margin: 16px 0 20px;
  background: #f8fafc;
}

.mlosign-signer-pdf-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.mlosign-public-wide {
  max-width: 1080px;
}

@media (max-width: 760px) {
  .mlosign-modal-panel {
    width: calc(100vw - 12px);
    height: 96vh;
    margin: 2vh auto;
    border-radius: 16px;
  }

  .mlosign-editor-toolbar {
    flex-wrap: wrap;
  }

  .mlosign-signer-pdf-wrap {
    height: 58vh;
  }
}


/* v0.3.2 field visibility fix */
#mlosign-page-frame {
  overflow: visible !important;
}

.mlosign-drag-field {
  min-width: 90px ;
  min-height: 34px ;
  z-index: 20 !important;
  font-size: 13px !important;
  line-height: 1 ;
}

.mlosign-drag-field strong {
  pointer-events: none;
}

#mlosign-field-layer .mlosign-drag-field[data-field-type="signature"] {
  border-color: #2563eb !important;
  background: rgba(37, 99, 235, .28) !important;
  color: #0f2f86 !important;
}

#mlosign-field-layer .mlosign-drag-field[data-field-type="date"] {
  border-color: #16a34a !important;
  background: rgba(22, 163, 74, .28) !important;
  color: #14532d !important;
}


/* v0.4.0 exact PDF.js editor */
.mlosign-editor-wrap {
  position: relative !important;
  flex: 1 !important;
  background: #202020 !important;
  overflow: auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 26px !important;
  box-sizing: border-box !important;
}

#mlosign-pdf-page-stage {
  position: relative !important;
  margin: 0 auto !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.35) !important;
  background: #fff !important;
  line-height: 0 ;
}

#mlosign-editor-canvas {
  display: block !important;
  background: #fff !important;
}

#mlosign-page-frame {
  position: absolute !important;
  inset: 0 !important;
  width: 100% ;
  height: 100% ;
  left: 0 ;
  top: 0 ;
  border: 2px dashed rgba(37, 99, 235, .45) !important;
  background: transparent !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 5 !important;
}

.mlosign-drag-field {
  position: absolute !important;
  left: 8% ;
  top: 78% ;
  width: 28% ;
  height: 7% ;
  min-width: 92px ;
  min-height: 32px ;
  border: 2px solid #2563eb !important;
  background: rgba(37, 99, 235, .24) !important;
  color: #0f2f86 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
  cursor: move !important;
  pointer-events: auto !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .22) !important;
  z-index: 20 !important;
  font-size: 13px !important;
  line-height: 1 ;
}

.mlosign-date-field {
  left: 42% ;
  top: 88% ;
  width: 18% ;
  height: 5% ;
  border-color: #16a34a !important;
  background: rgba(22, 163, 74, .24) !important;
  color: #14532d !important;
}

.mlosign-drag-field.is-dragging {
  transform: scale(1.02) !important;
  z-index: 30 !important;
}


/* v0.4.1 draggable field fix */
#mlosign-page-frame {
  pointer-events: auto !important;
}

#mlosign-editor-canvas {
  pointer-events: none !important;
}

#mlosign-page-frame .mlosign-drag-field {
  pointer-events: auto !important;
  cursor: grab !important;
  touch-action: none !important;
}

#mlosign-page-frame .mlosign-drag-field.is-dragging {
  cursor: grabbing !important;
}

/* Remove fixed-position effect caused by older !important rules */
#mlosign-page-frame .mlosign-drag-field {
  left: var(--mlosign-field-left, 8%) ;
  top: var(--mlosign-field-top, 78%) ;
  width: var(--mlosign-field-width, 28%) ;
  height: var(--mlosign-field-height, 7%) ;
}

#mlosign-page-frame .mlosign-date-field {
  left: var(--mlosign-field-left, 42%) ;
  top: var(--mlosign-field-top, 88%) ;
  width: var(--mlosign-field-width, 18%) ;
  height: var(--mlosign-field-height, 5%) ;
}

/*todo el ancho*/
body:has(.mlosign-signer) .entry-title,
body:has(.mlosign-signer) .ast-single-post-order,
body:has(.mlosign-signer) header.entry-header {
  display: none !important;
}

/* v0.6.0 multi-signer UI */
.mlosign-signers-box {
  margin-top: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  background: #f8fafc;
}

.mlosign-signer-row {
  display: grid;
  grid-template-columns: 18px 1fr 1fr 1fr minmax(120px, auto);
  gap: 12px;
  align-items: end;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  margin-top: 10px;
}

.mlosign-remove-signer {
  /* Fuerza al botón a posicionarse en la quinta columna */
  grid-column: 5;
}


.mlosign-sms-field {
  display: flex;
  flex-direction: column; /* Mantiene la etiqueta arriba y el input abajo */
  align-items: center;    /* Centra horizontalmente todo el contenido */
  width: 100%;            /* Se asegura de ocupar todo el espacio de la columna */
}

/*mejorando el input del correo*/
/* 1. Ajustes al contenedor (La Opción 1 que ya tenías) */
.mlosign-email-field,
.mlosign-sms-field {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra el contenido horizontalmente */
  width: 100%;
  gap: 6px;            /* Espacio perfecto entre el texto y el input */
}

/* 2. Diseño del texto superior (Label) */
.mlosign-email-field span,
.mlosign-sms-field span {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;      /* Un gris suave elegante */
  align-self: flex-start; /* Opcional: mantiene el texto alineado a la izquierda del input */
  margin-left: 4px;
}

/* 3. Diseño del Input adaptativo */
.mlosign-email-field input[type="email"],
.mlosign-sms-field input[type="tel"]{
  width: 100%;          /* ¡CLAVE! Se estira dinámicamente según el tamaño de la columna */
  max-width: 100%;     /* Límite para que no se vea exageradamente largo en pantallas enormes */
  min-width: 160px;     /* Límite mínimo para que siempre sea usable */
  
  /* Estilos visuales */
  padding: 10px 14px;
  font-size: 14px;
  color: #1f2937;
  background-color: #f9fafb; /* Fondo sutilmente gris para que resalte del fondo blanco */
  border: 1px solid #d1d5db;
  border-radius: 8px;   /* Bordes redondeados modernos */
  transition: all 0.2s ease-in-out; /* Suaviza el efecto focus */
  
  /* Truco extra para correos largos: */
  text-overflow: ellipsis; /* Si el correo supera el ancho, añade "..." al final en lugar de romperse */
}

/* 4. Efecto Focus (Cuando el usuario hace clic para escribir) */
.mlosign-email-field input[type="email"]:focus,
.mlosign-sms-field input[type="tel"]:focus {
  outline: none;
  border-color: #4f46e5;       /* Color morado/azul de enfoque */
  background-color: #fff;       /* Se vuelve completamente blanco */
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); /* Brillo sutil */
}

/* Estilo para el placeholder (texto de fondo) */
.mlosign-email-field input[type="email"]::placeholder,
.mlosign-sms-field input[type="tel"]::placeholder{
  color: #9ca3af;
}

/*fin de la mejora del input del correo*/



.mlosign-signer-color {
  width: 14px;
  height: 44px;
  border-radius: 999px;
  display: block;
  background: #2563eb;
}

.mlosign-editor-signers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  background: #fff;
}

.mlosign-signer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 7px 10px;
  background: #f8fafc;
  font-weight: 800;
  font-size: 13px;
}

.mlosign-signer-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}

.mlosign-field-inner {
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
}

.mlosign-field-inner small {
  display: block;
  font-size: 10px;
  opacity: .8;
  margin-top: 2px;
}

.mlosign-action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mlosign-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  padding: 7px 10px;
  background: #eef2ff;
  color: #1e3a8a;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}

.mlosign-mini-green {
  background: #dcfce7;
  color: #166534;
}

.mlosign-status.partial_0_2,
.mlosign-status.partial_1_2,
.mlosign-status.partial_1_3,
.mlosign-status.partial_2_3,
.mlosign-status.partially_signed {
  background: #ffedd5;
  color: #c2410c;
}

/* v0.6.0 signer consent + live preview */
.mlosign-consent-card {
  max-width: 820px;
  margin: 28px auto;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 34px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, .10);
  text-align: center;
}

.mlosign-consent-icon {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dcfce7;
  color: #166534;
  font-size: 42px;
  font-weight: 900;
}

.mlosign-consent-card h1 {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: #111827;
}

.mlosign-consent-lead {
  font-size: 18px;
  color: #374151;
  margin: 0 auto 18px;
  max-width: 680px;
}

.mlosign-consent-box {
  text-align: left;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 18px;
  color: #374151;
  line-height: 1.65;
  margin: 18px 0;
}

.mlosign-consent-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  max-width: 680px;
  margin: 18px auto;
  font-weight: 800;
  color: #111827;
}

.mlosign-consent-check input {
  width: 24px;
  height: 24px;
}

.mlosign-live-preview {
  margin: 18px 0 24px;
  background: #202020;
  border-radius: 18px;
  overflow: auto;
  padding: 18px;
}

.mlosign-live-preview-head {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

#mlosign-public-pdf-stage {
  position: relative;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  line-height: 0;
}

#mlosign-public-preview-canvas {
  display: block;
  background: #fff;
}

#mlosign-public-preview-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

#mlosign-public-signature-preview {
  position: absolute;
  border-bottom: 2px solid rgba(17,24,39,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  font-weight: 600;
  font-style: italic;
  overflow: hidden;
  opacity: .96;
}

#mlosign-public-signature-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

#mlosign-public-date-preview {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  font-weight: 700;
  font-size: 12px;
  overflow: hidden;
}

@media (max-width: 900px) {
  .mlosign-signer-row {
    grid-template-columns: 14px 1fr;
  }
}

#mlosign-page-frame{pointer-events:auto!important;}#mlosign-editor-canvas{pointer-events:none!important;}


/* v0.6.1 ensure multi-signer placement boxes are visible */
#mlosign-page-frame .mlosign-drag-field {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 999 !important;
  pointer-events: auto !important;
  justify-content: flex-start !important;
}

#mlosign-page-frame {
  pointer-events: auto !important;
  overflow: visible !important;
}

#mlosign-editor-canvas {
  pointer-events: none !important;
}


/* v0.6.2 MLOsign PDF page controls */
.mlosign-pdf-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}

#mlosign-page-info {
  font-weight: 900;
  color: #111827;
  padding: 0 6px;
  white-space: nowrap;
}

.mlosign-pdf-controls .mlosign-btn-light {
  margin-top: 0 !important;
  padding: 9px 12px !important;
}

.mlosign-pdf-controls .mlosign-btn-light:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}

.mlosign-editor-wrap {
  min-height: 640px;
}

@media (max-width: 900px) {
  .mlosign-pdf-controls {
    width: 100%;
  }

  .mlosign-pdf-controls .mlosign-btn-light {
    flex: 1 1 auto;
  }
}


/* v0.6.3 PDF controls and zoom usability */
.mlosign-editor-wrap {
  height: 68vh !important;
  min-height: 700px !important;
  overflow: auto !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.mlosign-pdf-controls {
  position: relative;
  z-index: 50;
}

.mlosign-pdf-controls .mlosign-btn-light {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.mlosign-pdf-controls .mlosign-btn-light:not(:disabled):hover {
  transform: translateY(-1px);
  opacity: .9;
}

#mlosign-page-info {
  min-width: 150px;
  text-align: center;
}

#mlosign-pdf-page-stage {
  transition: none !important;
  margin-bottom: 120px !important;
}


/* v0.6.4 controls stability */
.mlosign-pdf-controls,
.mlosign-pdf-controls * {
  pointer-events: auto !important;
}

.mlosign-editor-wrap {
  overflow: auto !important;
  scroll-behavior: auto !important;
}

#mlosign-pdf-page-stage {
  margin-top: 0 !important;
}


/* v0.6.5 native PDF controls */
.mlosign-pdf-controls {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

.mlosign-pdf-controls button {
  position: relative !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
}

.mlosign-pdf-controls button:not(:disabled) {
  cursor: pointer !important;
}


/* v0.6.6 isolate PDF controls from global table/DataTables scripts */
.mlosign-pdf-controls,
.mlosign-pdf-controls button,
.mlosign-editor-toolbar {
  isolation: isolate !important;
}

.mlosign-pdf-controls button {
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}


/* v0.6.7: keep PDF stage re-render predictable */
#mlosign-editor-canvas {
  display: block !important;
}

#mlosign-page-frame {
  z-index: 20 !important;
}

#mlosign-pdf-page-stage {
  position: relative !important;
}


/* v0.7.0 Signer Field Manager */
.mlosign-editor-workspace {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 280px;
  gap: 0;
  min-height: 680px;
  background: #202020;
}

.mlosign-pages-panel,
.mlosign-field-manager {
  background: #f8fafc;
  border-right: 1px solid #e5e7eb;
  overflow: auto;
  padding: 14px;
}

.mlosign-field-manager {
  border-right: 0;
  border-left: 1px solid #e5e7eb;
}

.mlosign-panel-title {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #64748b;
  margin-bottom: 10px;
}

.mlosign-pages-list {
  display: grid;
  gap: 8px;
}

.mlosign-page-thumb {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  border-radius: 12px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  font-weight: 900;
}

.mlosign-page-thumb small {
  display: block;
  color: #64748b;
  font-weight: 700;
  margin-top: 3px;
}

.mlosign-page-thumb.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: 0 8px 20px rgba(37,99,235,.14);
}

.mlosign-field-manager-list {
  display: grid;
  gap: 12px;
}

.mlosign-manager-signer {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-left: 5px solid var(--signer-color, #2563eb);
  border-radius: 14px;
  padding: 12px;
}

.mlosign-manager-signer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #111827;
}

.mlosign-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.mlosign-manager-actions .mlosign-mini-btn {
  font-size: 11px;
  padding: 6px 8px;
}

.mlosign-manager-fields {
  display: grid;
  gap: 6px;
}

.mlosign-manager-field {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 6px;
  align-items: center;
}

.mlosign-manager-go {
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #111827;
  border-radius: 9px;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}

.mlosign-manager-go:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1e3a8a;
}

.mlosign-manager-delete {
  border: 0;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 9px;
  height: 30px;
  cursor: pointer;
  font-weight: 900;
}

.mlosign-manager-empty,
.mlosign-empty-panel {
  color: #64748b;
  font-size: 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 10px;
}

.mlosign-field-highlight {
  animation: mlosignPulseField 1.4s ease-in-out;
}

@keyframes mlosignPulseField {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 26px rgba(37,99,235,.22); }
  35%, 65% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(37,99,235,.18), 0 16px 34px rgba(37,99,235,.25); }
}

.mlosign-editor-workspace .mlosign-editor-wrap {
  min-height: 680px !important;
  height: 68vh !important;
}

@media (max-width: 1100px) {
  .mlosign-editor-workspace {
    grid-template-columns: 1fr;
  }

  .mlosign-pages-panel,
  .mlosign-field-manager {
    max-height: 220px;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
  }

  .mlosign-pages-list {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}


/* v0.8.0 improved page thumbnails/search + duplicate */
.mlosign-page-search-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  margin-bottom: 10px;
}

#mlosign-page-search {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px;
  font-weight: 800;
  box-sizing: border-box;
}

.mlosign-page-thumb {
  position: relative;
}

.mlosign-page-thumb.is-active::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2563eb;
}

.mlosign-manager-helper {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 12px;
}

.mlosign-manager-field {
  grid-template-columns: 1fr 30px 30px !important;
}

.mlosign-manager-duplicate {
  border: 0;
  background: #e0f2fe;
  color: #075985;
  border-radius: 9px;
  height: 30px;
  cursor: pointer;
  font-weight: 900;
}

.mlosign-manager-duplicate:hover {
  background: #bae6fd;
}

.mlosign-pages-panel,
.mlosign-field-manager {
  min-width: 0;
}

.mlosign-field-manager-list {
  padding-bottom: 30px;
}


/* v0.8.1 page navigation fix */
.mlosign-page-thumb,
#mlosign-page-search-btn,
#mlosign-page-search {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10001 !important;
}

.mlosign-page-thumb {
  cursor: pointer !important;
}

#mlosign-page-search-btn {
  cursor: pointer !important;
}


/* v0.8.2 direct left panel navigation */
.mlosign-page-thumb,
#mlosign-page-search-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* v0.8.3 left page panel uses main PDF control listener */
.mlosign-page-thumb[data-mlosign-control="page"],
#mlosign-page-search-btn[data-mlosign-control="go-input"] {
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* v0.8.4 final left page panel navigation */
.mlosign-page-thumb[data-mlosign-control="page"],
#mlosign-page-search-btn[data-mlosign-control="go-input"] {
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
}


/* v0.8.7 finalize status */
.mlosign-status.finalize_needed {
  background: #fef3c7;
  color: #92400e;
}

.mlosign-finalize-doc {
  background: #fff7ed !important;
  color: #9a3412 !important;
}


/* v0.9.1 zoom controls fix */
#mlosign-zoom-in,
#mlosign-zoom-out,
#mlosign-fit-page {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 10050 !important;
}


/* v0.9.2 stability */
#mlosign-zoom-in,
#mlosign-zoom-out,
#mlosign-fit-page,
[data-mlosign-control] {
  touch-action: manipulation !important;
}

#mlosign-editor-canvas {
  image-rendering: auto;
}


/* v0.9.3 Fullscreen Prepare Document editor */
body.mlosign-editor-open {
  overflow: hidden !important;
}

#mlosign-editor-modal.is-open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  padding: 0 !important;
}

#mlosign-editor-modal.is-open .mlosign-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, .72) !important;
  backdrop-filter: blur(8px);
}

#mlosign-editor-modal.is-open .mlosign-modal-panel {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  background: #ffffff !important;
}

#mlosign-editor-modal.is-open .mlosign-modal-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  padding: 14px 22px !important;
}

#mlosign-editor-modal.is-open .mlosign-modal-head h3 {
  font-size: 24px !important;
  margin: 0 0 3px !important;
}

#mlosign-editor-modal.is-open .mlosign-modal-head p {
  margin: 0 !important;
}

#mlosign-editor-modal.is-open .mlosign-editor-signers {
  z-index: 55 !important;
  padding: 10px 22px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #eef2f7 !important;
  max-height: 76px !important;
  overflow: auto !important;
}

#mlosign-editor-modal.is-open .mlosign-editor-toolbar {
  z-index: 54 !important;
  display: grid !important;
  grid-template-columns: auto auto auto minmax(360px, auto) 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 22px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#mlosign-editor-modal.is-open .mlosign-editor-toolbar > .mlosign-btn,
#mlosign-editor-modal.is-open .mlosign-editor-toolbar > .mlosign-btn-secondary,
#mlosign-editor-modal.is-open .mlosign-editor-toolbar > .mlosign-btn-light {
  min-height: 44px !important;
  white-space: nowrap !important;
}

#mlosign-editor-modal.is-open .mlosign-pdf-controls {
  justify-self: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#mlosign-editor-modal.is-open .mlosign-editor-note {
  font-size: 12px !important;
  color: #64748b !important;
  max-width: 360px !important;
}

#mlosign-editor-modal.is-open .mlosign-editor-workspace {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) 340px !important;
  background: #1f1f1f !important;
  overflow: hidden !important;
}

#mlosign-editor-modal.is-open .mlosign-pages-panel,
#mlosign-editor-modal.is-open .mlosign-field-manager {
  height: 100% !important;
  max-height: none !important;
  overflow: auto !important;
  background: #f8fafc !important;
  padding: 16px !important;
}

#mlosign-editor-modal.is-open .mlosign-pages-panel {
  border-right: 1px solid #dbe3ef !important;
}

#mlosign-editor-modal.is-open .mlosign-field-manager {
  border-left: 1px solid #dbe3ef !important;
}

#mlosign-editor-modal.is-open .mlosign-editor-wrap {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 28px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at center top, rgba(255,255,255,.08), transparent 34%),
    #202020 !important;
}

#mlosign-editor-modal.is-open #mlosign-pdf-page-stage {
  margin: 0 auto 160px !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.38) !important;
}

#mlosign-editor-modal.is-open #mlosign-editor-result {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 70 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
}

#mlosign-editor-modal.is-open #mlosign-editor-result .mlosign-message {
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 12px 22px !important;
}

#mlosign-editor-modal.is-open .mlosign-icon-close {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 24px !important;
}

#mlosign-editor-modal.is-open .mlosign-page-thumb {
  padding: 12px !important;
  border-radius: 14px !important;
}

#mlosign-editor-modal.is-open .mlosign-manager-signer {
  border-radius: 16px !important;
}

#mlosign-editor-modal.is-open .mlosign-manager-go {
  min-height: 38px !important;
}

@media (max-width: 1180px) {
  #mlosign-editor-modal.is-open .mlosign-editor-toolbar {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  #mlosign-editor-modal.is-open .mlosign-pdf-controls,
  #mlosign-editor-modal.is-open .mlosign-editor-note {
    grid-column: 1 / -1 !important;
  }

  #mlosign-editor-modal.is-open .mlosign-editor-workspace {
    grid-template-columns: 160px minmax(0, 1fr) 300px !important;
  }
}

@media (max-width: 900px) {
  #mlosign-editor-modal.is-open .mlosign-editor-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  #mlosign-editor-modal.is-open .mlosign-pages-panel,
  #mlosign-editor-modal.is-open .mlosign-field-manager {
    max-height: 190px !important;
    height: auto !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  #mlosign-editor-modal.is-open .mlosign-pages-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }

  #mlosign-editor-modal.is-open .mlosign-editor-wrap {
    min-height: 50vh !important;
  }
}


/* v0.9.4 - Use the black workspace width for the PDF */
#mlosign-editor-modal.is-open .mlosign-editor-wrap {
  justify-content: center !important;
  align-items: flex-start !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

#mlosign-editor-modal.is-open #mlosign-pdf-page-stage {
  max-width: none !important;
}


/* v0.9.5 manual field placement */
#mlosign-page-frame:empty::after {
  content: "No fields on this page. Add Signature or Date from the Signers & Fields panel.";
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: 520px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, .72);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  opacity: .88;
}


/* v0.9.6 signer color consistency + temporarily hide Both */
.mlosign-drag-field.mlosign-date-field {
  border-color: currentColor !important;
}

.mlosign-manager-actions [data-add-pair],
button[data-add-pair] {
  display: none !important;
}


/* v1.0.9 optional Checkbox/Textbox fields */
.mlosign-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner strong,
.mlosign-drag-field.mlosign-textbox-field .mlosign-field-inner strong {
  font-size: 12px;
}

.mlosign-drag-field.mlosign-checkbox-field {
  min-width: 22px !important;
  min-height: 22px !important;
}

.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner {
  align-items: center;
  justify-content: center;
}

.mlosign-drag-field.mlosign-textbox-field {
  min-width: 90px !important;
  min-height: 28px !important;
}

.mlosign-public-extra-field {
  position: absolute;
  z-index: 15;
  box-sizing: border-box;
}

.mlosign-public-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.75);
  border: 2px solid #111827;
  border-radius: 4px;
}

.mlosign-public-checkbox input {
  width: 80%;
  height: 80%;
  margin: 0;
  cursor: pointer;
}

.mlosign-public-textbox {
  border: 2px solid #2563eb;
  border-radius: 6px;
  background: rgba(255,255,255,.92);
  padding: 4px 7px;
  font-size: 13px;
  color: #111827;
  outline: none;
}


/* v1.1.0 Premium field identity */
.mlosign-drag-field.mlosign-premium-field {
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 12px !important;
  backdrop-filter: blur(1px);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, .12),
    0 0 0 1px rgba(255,255,255,.52) inset !important;
  overflow: hidden !important;
}

.mlosign-drag-field.mlosign-premium-field::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  height: 1px;
  background: currentColor;
  opacity: .72;
  pointer-events: none;
}

.mlosign-drag-field.mlosign-premium-field .mlosign-field-inner {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;

  justify-content: flex-end !important;
  padding: 5px 8px 10px !important;
  text-align: left !important;
}

.mlosign-drag-field.mlosign-premium-field .mlosign-field-inner strong {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

.mlosign-drag-field.mlosign-premium-field .mlosign-field-inner small {
  font-size: 8px !important;
  line-height: 1.05 !important;
  margin-top: 2px !important;
  opacity: .76 !important;
}

.mlosign-drag-field.mlosign-textbox-field::before {
  left: 10px;
  right: 10px;
  bottom: 8px;
}

.mlosign-drag-field.mlosign-checkbox-field {
  border-radius: 8px !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, .10),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
}

.mlosign-drag-field.mlosign-checkbox-field::before {
  content: "";
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  width: 52%;
  height: 52%;
  transform: translate(-50%, -50%);
  border: 2px solid currentColor;
  border-radius: 4px;
  background: rgba(255,255,255,.42);
  opacity: .95;
}

.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner {
  padding: 0 !important;
  justify-content: center !important;
}

.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner strong,
.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner small {
  display: none !important;
}

.mlosign-public-textbox {
  border: 2px solid #2563eb;
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  padding: 0 7px 2px;
  font-size: 13px;
  line-height: 1;
  color: #111827;
  outline: none;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 10px 28px rgba(37,99,235,.14);
}

.mlosign-public-checkbox {
  background: rgba(255,255,255,.96);
  border: 2px solid #111827;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15,23,42,.10);
}

.mlosign-public-checkbox input {
  width: 78%;
  height: 78%;
  margin: 0;
  cursor: pointer;
  accent-color: #111827;
}


/* v1.1.1 visual adjustment: smaller field heights + larger signer name */
.mlosign-drag-field.mlosign-premium-field .mlosign-field-inner small {
  font-size: 12px !important;
}

/* Make premium fields visually slimmer without changing width */
.mlosign-drag-field.mlosign-premium-field .mlosign-field-inner {
  padding-top: 3px !important;
  padding-bottom: 7px !important;
}

.mlosign-drag-field.mlosign-premium-field::before {
  bottom: 5px !important;
}

.mlosign-drag-field.mlosign-textbox-field::before {
  bottom: 6px !important;
}


/* v1.2.0 Wow fullscreen signer experience */
body.mlosign-public-fullscreen {
  overflow: hidden !important;
  background: #0f172a !important;
}

body.mlosign-public-fullscreen .site-header,
body.mlosign-public-fullscreen .site-footer,
body.mlosign-public-fullscreen header.entry-header,
body.mlosign-public-fullscreen .entry-title,
body.mlosign-public-fullscreen .ast-single-post-order,
body.mlosign-public-fullscreen .ast-container,
body.mlosign-public-fullscreen .site-content,
body.mlosign-public-fullscreen #content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.mlosign-public-fullscreen .site-header,
body.mlosign-public-fullscreen .site-footer,
body.mlosign-public-fullscreen header.entry-header,
body.mlosign-public-fullscreen .entry-title,
body.mlosign-public-fullscreen .ast-single-post-order {
  display: none !important;
}

body.mlosign-public-fullscreen .mlosign-signer,
body.mlosign-public-fullscreen .mlosign-public-card.mlosign-signing-card {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.mlosign-public-fullscreen .mlosign-public-card.mlosign-signing-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  padding: 0 !important;
  background: #f8fafc !important;
}

body.mlosign-public-fullscreen .mlosign-signing-card > h2,
body.mlosign-public-fullscreen .mlosign-signing-card > p,
body.mlosign-public-fullscreen .mlosign-doc-summary {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

body.mlosign-public-fullscreen .mlosign-signing-card > h2 {
  margin: 0 !important;
  padding-top: 14px !important;
  font-size: 24px !important;
  color: #0f172a !important;
}

body.mlosign-public-fullscreen .mlosign-signing-card > p {
  margin: 0 !important;
  padding-top: 2px !important;
  padding-bottom: 8px !important;
  color: #64748b !important;
}

body.mlosign-public-fullscreen .mlosign-doc-summary {
  margin: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
}

.mlosign-signer-workspace {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 320px;
  background: #111827;
  overflow: hidden;
}

.mlosign-signer-pages,
.mlosign-signer-required {
  background: #f8fafc;
  padding: 16px;
  overflow: auto;
  border-color: #dbe3ef;
}

.mlosign-signer-pages {
  border-right: 1px solid #dbe3ef;
}

.mlosign-signer-required {
  border-left: 1px solid #dbe3ef;
}

.mlosign-signer-panel-title {
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mlosign-public-pages-list,
.mlosign-public-required-list {
  display: grid;
  gap: 10px;
}

.mlosign-public-page-thumb,
.mlosign-required-item {
  width: 100%;
  text-align: left;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
  transition: .18s ease;
}

.mlosign-public-page-thumb:hover,
.mlosign-required-item:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 12px 28px rgba(37,99,235,.10);
}

.mlosign-public-page-thumb.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.mlosign-public-page-thumb strong,
.mlosign-required-item strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
}

.mlosign-public-page-thumb small,
.mlosign-required-item small {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-top: 3px;
}

.mlosign-required-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: center;
}

.mlosign-required-item span {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.mlosign-required-item.is-pending span {
  background: #fef3c7;
  color: #b91c1c;
}

.mlosign-required-item.is-done span {
  background: #dcfce7;
  color: #15803d;
}

.mlosign-required-item.is-optional span {
  background: #e0f2fe;
  color: #0369a1;
}

.mlosign-required-item.is-done {
  border-color: #86efac;
  background: #f0fdf4;
}

.mlosign-required-progress {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  margin-bottom: 10px;
}

.mlosign-next-required {
  width: 100%;
  margin-bottom: 14px;
}

.mlosign-optional-title {
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.mlosign-signer-document {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at center top, rgba(255,255,255,.08), transparent 36%),
    #171717;
}

.mlosign-signer-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(15,23,42,.96);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #ffffff;
}

#mlosign-public-page-info {
  font-weight: 900;
  padding: 0 8px;
}

.mlosign-toolbar-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.18);
  margin: 0 4px;
}

.mlosign-signer-pdf-scroll {
  min-height: 0;
  overflow: auto;
  padding: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

body.mlosign-public-fullscreen #mlosign-public-pdf-stage {
  position: relative;
  margin: 0 auto 120px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

body.mlosign-public-fullscreen #mlosign-public-preview-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.mlosign-public-sign-target,
.mlosign-public-date-target {
  position: absolute;
  box-sizing: border-box;
}

.mlosign-public-sign-target {
  border: 2px solid rgba(37,99,235,.72);
  border-radius: 10px;
  background: rgba(219,234,254,.25);
  cursor: pointer;
  overflow: visible;
  transition: .18s ease;
}

.mlosign-public-sign-target:hover {
  background: rgba(219,234,254,.45);
  box-shadow: 0 16px 34px rgba(37,99,235,.22);
}

.mlosign-sign-sticker {
  position: absolute;
  left: 50%;
  top: -36px;
  transform: translateX(-50%);
  z-index: 20;
  min-width: 118px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fde047;
  color: #b91c1c;
  border: 2px solid #ef4444;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .06em;
  text-align: center;
  box-shadow: 0 14px 30px rgba(239,68,68,.22);
  animation: mlosignSignPulse 1.4s ease-in-out infinite;
}

.mlosign-sign-sticker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ef4444;
}

@keyframes mlosignSignPulse {
  0%,100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.04); }
}

.mlosign-public-sign-target.is-complete {
  border-color: rgba(22,163,74,.85);
  background: rgba(220,252,231,.25);
}

.mlosign-signed-badge {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.mlosign-public-signature-render {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 8px 3px;
  color: #111827;
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
}

.mlosign-public-signature-render img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mlosign-public-date-target {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
  color: #111827;
  font-size: 13px;
  font-weight: 700;
}

.mlosign-preview-placeholder {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.mlosign-submit-bar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 12px 22px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.mlosign-submit-bar strong {
  display: block;
  color: #0f172a;
}

.mlosign-submit-bar span {
  color: #64748b;
  font-size: 13px;
}

.mlosign-signature-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.mlosign-signature-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.72);
  backdrop-filter: blur(8px);
}

.mlosign-signature-modal-card {
  position: relative;
  z-index: 2;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  margin: 20px auto;
  padding: 26px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}

.mlosign-signature-modal-card h3 {
  font-size: 24px;
  margin: 0 0 6px;
}

.mlosign-signature-modal-card p {
  color: #64748b;
  margin: 0 0 16px;
}

.mlosign-signature-modal-close {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #f1f5f9;
  font-size: 24px;
  cursor: pointer;
}

.mlosign-signature-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 1020px) {
  .mlosign-signer-workspace {
    grid-template-columns: 150px minmax(0, 1fr) 260px;
  }
}

@media (max-width: 780px) {
  body.mlosign-public-fullscreen {
    overflow: auto !important;
  }

  body.mlosign-public-fullscreen .mlosign-public-card.mlosign-signing-card {
    height: auto !important;
    min-height: 100vh !important;
  }

  .mlosign-signer-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(70vh, 1fr) auto;
  }

  .mlosign-signer-pages,
  .mlosign-signer-required {
    max-height: 220px;
    border: 0;
  }

  .mlosign-public-pages-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .mlosign-signer-pdf-scroll {
    padding: 18px;
  }

  .mlosign-submit-bar {
    flex-direction: column;
    align-items: stretch;
  }
}


/* v1.2.1 Astra-safe fixed fullscreen signer workspace */
body.mlosign-public-fullscreen {
  overflow: hidden !important;
}

body.mlosign-public-fullscreen .mlosign-signer-fullscreen-card {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  overflow: hidden !important;
}

body.mlosign-public-fullscreen .mlosign-signer-fullscreen-card,
body.mlosign-public-fullscreen .mlosign-signer-fullscreen-card * {
  box-sizing: border-box;
}

body.mlosign-public-fullscreen .mlosign-signer-fullscreen-card .mlosign-signer-workspace {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Do not depend on Astra containers after consent */
body.mlosign-public-fullscreen .mlosign-signer-fullscreen-card {
  transform: none !important;
}

/* Emergency visibility guard */
body.mlosign-public-fullscreen #mlosign-signing-card.mlosign-signer-fullscreen-card {
  visibility: visible !important;
  opacity: 1 !important;
}


/* v1.2.2 Fix signer interactive layer */
body.mlosign-public-fullscreen #mlosign-public-pdf-stage {
  position: relative !important;
}

body.mlosign-public-fullscreen #mlosign-public-preview-canvas {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

body.mlosign-public-fullscreen #mlosign-public-preview-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}

.mlosign-public-sign-target {
  z-index: 70 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.mlosign-sign-sticker,
.mlosign-public-signature-render,
.mlosign-signed-badge {
  pointer-events: auto !important;
}

.mlosign-public-extra-field,
.mlosign-public-checkbox,
.mlosign-public-textbox {
  z-index: 80 !important;
  pointer-events: auto !important;
}

.mlosign-public-checkbox,
.mlosign-public-checkbox input {
  cursor: pointer !important;
}

.mlosign-public-textbox {
  cursor: text !important;
  user-select: text !important;
}

.mlosign-signature-modal {
  z-index: 1000005 !important;
}

.mlosign-submit-bar {
  z-index: 1000000 !important;
  position: relative !important;
}

/* Make submit button visible in the fixed footer */
body.mlosign-public-fullscreen .mlosign-submit-bar .mlosign-btn {
  min-width: 220px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
}


/* v1.2.3 Signature persistence + premium buttons */
.mlosign-rendered-typed-signature {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1;
  color: #111827;
  display: inline-block;
  transform: translateY(4px);
}

.mlosign-public-sign-target.is-complete .mlosign-public-signature-render {
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 4px !important;
}

.mlosign-public-sign-target.is-complete .mlosign-public-signature-render img {
  max-width: 96% !important;
  max-height: 92% !important;
  object-fit: contain !important;
}

#mlosign-apply-signature.mlosign-btn,
.mlosign-submit-bar .mlosign-btn,
button.mlosign-btn[type="submit"] {
  appearance: none !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 45%, #0f2f94 100%) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  padding: 13px 22px !important;
  min-height: 48px !important;
  box-shadow:
    0 14px 30px rgba(37, 99, 235, .28),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

#mlosign-apply-signature.mlosign-btn:hover,
.mlosign-submit-bar .mlosign-btn:hover,
button.mlosign-btn[type="submit"]:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
  box-shadow:
    0 18px 38px rgba(37, 99, 235, .34),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#mlosign-apply-signature.mlosign-btn:active,
.mlosign-submit-bar .mlosign-btn:active,
button.mlosign-btn[type="submit"]:active {
  transform: translateY(0) !important;
}

/* Make checkbox final visual state clearer while signing */
.mlosign-public-checkbox input:checked {
  accent-color: #16a34a !important;
}


/* v1.2.5 signature scope selector */
.mlosign-sign-scope {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

.mlosign-sign-scope label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 11px;
  border-radius: 12px;
  background: #ffffff;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  border: 1px solid #e5e7eb;
}

.mlosign-sign-scope input {
  accent-color: #2563eb;
}

.mlosign-public-sign-target.is-complete {
  border-color: #16a34a !important;
  background: rgba(220, 252, 231, .22) !important;
}


/* v1.2.7 checkbox field settings popover in Prepare Document */
.mlosign-checkbox-popover {
  position: absolute;
  z-index: 9999;
  width: 270px;
  padding: 12px;
  background: rgba(255,255,255,.98);
  border: 1px solid #dbeafe;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(15,23,42,.18);
  backdrop-filter: blur(10px);
}

.mlosign-checkbox-popover-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 900;
  color: #0f172a;
  margin-bottom: 10px;
}

.mlosign-checkbox-popover-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.mlosign-switch-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  margin: 8px 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
}

.mlosign-switch-option input {
  appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: .18s ease;
}

.mlosign-switch-option input::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  position: absolute;
  left: 3px;
  top: 3px;
  box-shadow: 0 2px 8px rgba(15,23,42,.22);
  transition: .18s ease;
}

.mlosign-switch-option input:checked {
  background: linear-gradient(135deg, #2563eb, #16a34a);
}

.mlosign-switch-option input:checked::before {
  transform: translateX(16px);
}

.mlosign-switch-option strong {
  display: block;
  font-size: 13px;
  line-height: 1.1;
  color: #0f172a;
}

.mlosign-switch-option small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
  color: #64748b;
}

.mlosign-checkbox-editor-badges {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  white-space: nowrap;
  pointer-events: none;
}

.mlosign-checkbox-editor-badges span {
  font-size: 9px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-weight: 900;
}

/* v1.2.7 scope radios live in the modal action footer */
.mlosign-signature-modal-actions {
  align-items: center !important;
  gap: 12px !important;
}

.mlosign-signature-scope-inline {
  margin: 0 auto 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px !important;
}

.mlosign-signature-scope-inline label {
  min-height: 42px;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  border: 1px solid #dbeafe !important;
  background: #f8fbff !important;
  box-shadow: 0 8px 22px rgba(37,99,235,.06);
}

@media (max-width: 760px) {
  .mlosign-signature-modal-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mlosign-signature-scope-inline {
    width: 100% !important;
  }

  .mlosign-signature-scope-inline label {
    flex: 1 1 100%;
  }
}


/* v1.2.8 clearer signer right panel */
.mlosign-required-item strong {
  color: #0f172a !important;
}

.mlosign-required-item small {
  font-weight: 700;
}

.mlosign-required-item.is-done strong {
  color: #166534 !important;
}

.mlosign-required-item.is-pending {
  border-color: #fecaca !important;
  background: #fff7f7 !important;
}

.mlosign-required-item.is-pending strong {
  color: #991b1b !important;
}

.mlosign-required-item.is-pending small {
  color: #b91c1c !important;
}

.mlosign-required-item.is-optional {
  border-color: #dbeafe !important;
  background: #ffffff !important;
}

.mlosign-required-item.is-optional strong {
  color: #0f172a !important;
}

.mlosign-required-item.is-optional small {
  color: #475569 !important;
}

.mlosign-required-item.is-optional span {
  background: #e0f2fe !important;
  color: #0369a1 !important;
}

.mlosign-required-item.is-optional.is-filled {
  border-color: #bae6fd !important;
  background: #f0f9ff !important;
}

.mlosign-required-item.is-optional.is-filled span {
  background: #dcfce7 !important;
  color: #15803d !important;
}

.mlosign-optional-title {
  padding-top: 10px;
  border-top: 1px dashed #cbd5e1;
}


/* v1.2.9 signer clarity improvements */
.mlosign-required-item {
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
}

.mlosign-required-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mlosign-required-item strong,
.mlosign-required-item small {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.mlosign-required-item small {
  margin-top: 0 !important;
}

.mlosign-sign-top-alert {
  margin: 16px 0 18px;
}

.mlosign-message.mlosign-message-blocking {
  background: linear-gradient(180deg, #fff7ed 0%, #fff1f2 100%);
  border: 1px solid #fdba74;
  box-shadow: 0 14px 34px rgba(249,115,22,.12);
}

.mlosign-message-head {
  font-size: 18px;
  font-weight: 900;
  color: #9a3412;
  margin-bottom: 6px;
}

.mlosign-message-text {
  font-size: 14px;
  color: #7c2d12;
  margin-bottom: 8px;
}

.mlosign-message-list {
  margin: 0;
  padding-left: 18px;
  color: #9a3412;
}

.mlosign-message-list li {
  margin: 4px 0;
  font-weight: 700;
}


/* v1.3.0 Thank You premium screen */
.mlosign-thankyou-screen {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(37,99,235,.22), transparent 36%),
    linear-gradient(135deg, #0f172a 0%, #111827 46%, #172554 100%);
}

.mlosign-thankyou-card {
  width: min(720px, calc(100vw - 32px));
  text-align: center;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 32px;
  padding: 44px 38px;
  box-shadow:
    0 34px 90px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.mlosign-thankyou-icon {
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;
  font-size: 48px;
  font-weight: 1000;
  box-shadow:
    0 20px 44px rgba(22,163,74,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.mlosign-thankyou-kicker {
  margin: 0 0 8px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mlosign-thankyou-card h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  font-weight: 950;
}

.mlosign-thankyou-message {
  max-width: 560px;
  margin: 16px auto 0;
  color: #475569;
  font-size: 17px;
  line-height: 1.55;
}

.mlosign-thankyou-details {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mlosign-thankyou-details span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-size: 13px;
  font-weight: 900;
}

body.mlosign-public-fullscreen .mlosign-public-card:has(.mlosign-thankyou-screen) {
  padding: 0 !important;
  background: transparent !important;
}


/* v1.3.1 Documents table action polish */
.mlosign-mini-danger {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fecaca !important;
}

.mlosign-mini-danger:hover {
  background: #fecaca !important;
}

.mlosign-muted {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.mlosign-action-list small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}


/* v1.3.4 MLOsign user channel access */
.mlosign-access-warning {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-weight: 800;
  line-height: 1.35;
}

.mlosign-app[data-recipient-email-access="0"][data-recipient-sms-access="0"] #mlosign-send-form .mlosign-btn[type="submit"] {
  opacity: .55;
  pointer-events: none;
}


/* v1.3.5 frontend admin notice */
.mlosign-access-admin-note {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-weight: 800;
  line-height: 1.35;
}


/* v1.3.7 Final PDF email status */
.mlosign-final-email-cell {
  display: grid;
  gap: 4px;
  min-width: 150px;
}
.mlosign-final-email-cell strong {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.mlosign-final-email-cell small {
  color: #64748b;
  font-weight: 700;
  line-height: 1.25;
}
.mlosign-final-email-sent strong {
  background: #dcfce7;
  color: #15803d;
}
.mlosign-final-email-partial strong {
  background: #fef3c7;
  color: #92400e;
}
.mlosign-final-email-failed strong {
  background: #fee2e2;
  color: #991b1b;
}
.mlosign-final-email-pending strong {
  background: #e0f2fe;
  color: #0369a1;
}
.mlosign-final-log-summary {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  display: grid;
  gap: 4px;
}
.mlosign-final-log-summary strong {
  font-size: 16px;
  font-weight: 950;
}
.mlosign-final-email-badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: #f1f5f9;
  color: #475569;
}
.mlosign-final-email-badge.mlosign-final-email-sent {
  background: #dcfce7;
  color: #15803d;
}
.mlosign-final-email-badge.mlosign-final-email-failed {
  background: #fee2e2;
  color: #991b1b;
}


/* v1.3.8 SMS consent confirmation */
.mlosign-sms-consent-box {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #fed7aa;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
  box-shadow: 0 12px 30px rgba(249, 115, 22, .08);
}
.mlosign-sms-consent-box input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #f97316;
}
.mlosign-sms-consent-box strong {
  display: block;
  color: #9a3412;
  font-weight: 950;
}
.mlosign-sms-consent-box small {
  display: block;
  margin-top: 4px;
  color: #7c2d12;
  line-height: 1.45;
  font-weight: 700;
}


/* v1.3.9 SMS delivery status */
.mlosign-sms-status-cell {
  display: grid;
  gap: 4px;
  min-width: 140px;
}
.mlosign-sms-status-cell strong {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 900;
}
.mlosign-sms-status-cell small {
  color: #64748b;
  font-weight: 700;
  line-height: 1.25;
}
.mlosign-sms-status-delivered strong {
  background: #dcfce7;
  color: #15803d;
}
.mlosign-sms-status-failed strong,
.mlosign-sms-status-undelivered strong,
.mlosign-sms-status-opted_out strong {
  background: #fee2e2;
  color: #991b1b;
}
.mlosign-sms-status-partial strong {
  background: #fef3c7;
  color: #92400e;
}
.mlosign-sms-status-queued strong,
.mlosign-sms-status-sent strong,
.mlosign-sms-status-accepted strong,
.mlosign-sms-status-sending strong {
  background: #e0f2fe;
  color: #0369a1;
}
.mlosign-sms-log-summary {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0369a1;
  display: grid;
  gap: 4px;
}
.mlosign-sms-log-summary strong {
  font-size: 16px;
  font-weight: 950;
}
.mlosign-sms-status-badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: #f1f5f9;
  color: #475569;
}
.mlosign-sms-status-badge.mlosign-sms-status-delivered {
  background: #dcfce7;
  color: #15803d;
}
.mlosign-sms-status-badge.mlosign-sms-status-failed,
.mlosign-sms-status-badge.mlosign-sms-status-undelivered,
.mlosign-sms-status-badge.mlosign-sms-status-opted_out {
  background: #fee2e2;
  color: #991b1b;
}


/* v1.4.0 Premium icon-based Documents table */
.mlosign-table-wrap {
  border-radius: 22px;
  border: 1px solid #e5e7eb;
  overflow: auto;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.mlosign-table {
  min-width: 1120px;
}

.mlosign-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.mlosign-doc-row {
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.mlosign-doc-row:hover {
  background: #f8fbff;
  box-shadow: inset 4px 0 0 #2563eb;
}

.mlosign-doc-title {
  display: inline-block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  color: #0f172a;
}

.mlosign-recipient-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 4px 8px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.mlosign-recipient-pill span {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 1000;
}

.mlosign-status-icon,
.mlosign-sms-status-icon,
.mlosign-final-email-icon,
.mlosign-icon-static,
.mlosign-icon-action {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  box-shadow: 0 8px 18px rgba(15,23,42,.05);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
}

.mlosign-status-icon span,
.mlosign-sms-status-icon span,
.mlosign-final-email-icon span,
.mlosign-icon-static span,
.mlosign-icon-action span {
  transform: translateY(-.5px);
}

.mlosign-status-icon.signed,
.mlosign-status-icon[class*="partial_"],
.mlosign-status-icon.partially_signed,
.mlosign-status-icon.finalize_needed {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #15803d;
}

.mlosign-status-icon.sent,
.mlosign-status-icon.viewed {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.mlosign-status-icon.draft {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

.mlosign-status-icon.cancelled {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.mlosign-icon-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 76px;
}

.mlosign-sms-status-delivered,
.mlosign-final-email-sent,
.mlosign-icon-static.is-complete {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.mlosign-sms-status-failed,
.mlosign-sms-status-undelivered,
.mlosign-sms-status-opted_out,
.mlosign-final-email-failed {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.mlosign-sms-status-partial,
.mlosign-final-email-partial {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.mlosign-sms-status-pending,
.mlosign-sms-status-queued,
.mlosign-sms-status-accepted,
.mlosign-sms-status-sending,
.mlosign-sms-status-sent,
.mlosign-final-email-pending {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0369a1;
}

.mlosign-icon-action {
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.mlosign-icon-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15,23,42,.13);
  border-color: #93c5fd;
}

.mlosign-action-view-original,
.mlosign-action-log {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.mlosign-action-prepare,
.mlosign-action-finalize {
  background: linear-gradient(135deg, #2563eb, #1e40af);
  border-color: #1d4ed8;
  color: #ffffff;
}

.mlosign-action-view-signed {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}

.mlosign-action-resend {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.mlosign-action-delete,
.mlosign-mini-danger.mlosign-icon-action {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}

.mlosign-action-cancel {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.mlosign-icon-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.mlosign-action-list {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mlosign-mini-count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15,23,42,.16);
}

.mlosign-icon-static.is-muted {
  opacity: .55;
}

.mlosign-table td:nth-child(3),
.mlosign-table td:nth-child(5),
.mlosign-table td:nth-child(6) {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

/* Keep old buttons usable in other plugin areas */
.mlosign-mini-btn.mlosign-icon-action {
  width: 38px;
  height: 38px;
  padding: 0;
}


/* v1.4.1 Premium formal Documents table refinement */
.mlosign-table {
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
}

.mlosign-table th,
.mlosign-table td {
  padding: 14px 12px;
  vertical-align: middle;
}

.mlosign-table th {
  font-size: 11px;
  color: #64748b;
  letter-spacing: .07em;
  font-weight: 900;
}

.mlosign-doc-row:hover {
  background: linear-gradient(90deg, #f8fbff 0%, #ffffff 48%, #f8fbff 100%);
}

.mlosign-doc-title {
  max-width: 210px;
  font-size: 13px;
  line-height: 1.35;
}

.mlosign-recipient-pill {
  min-height: 26px;
  padding: 4px 9px;
  background: #ffffff;
  border-color: #dbeafe;
  box-shadow: 0 6px 16px rgba(15,23,42,.04);
}

.mlosign-recipient-pill span {
  background: #eef2ff;
  color: #2563eb;
}

.mlosign-recipient-pill svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mlosign-status-icon {
  width: auto;
  min-width: 44px;
  height: 34px;
  gap: 7px;
  padding: 0 10px;
  border-radius: 999px;
  justify-content: flex-start;
}

.mlosign-status-icon > span {
  width: 17px;
  height: 17px;
  display: inline-flex;
}

.mlosign-status-icon em {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .02em;
  white-space: nowrap;
}

.mlosign-status-icon svg,
.mlosign-sms-status-icon svg,
.mlosign-final-email-icon svg,
.mlosign-icon-static svg,
.mlosign-icon-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mlosign-sms-status-icon,
.mlosign-final-email-icon,
.mlosign-icon-static,
.mlosign-icon-action {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  box-shadow: 0 7px 16px rgba(15,23,42,.06);
}

.mlosign-icon-cell {
  min-width: auto;
  justify-content: center;
}

.mlosign-icon-action {
  background: #ffffff;
}

.mlosign-icon-actions,
.mlosign-action-list {
  gap: 6px;
  justify-content: center;
}

.mlosign-action-view-original {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

.mlosign-action-prepare,
.mlosign-action-finalize {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}

.mlosign-action-view-signed {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #15803d;
}

.mlosign-action-cancel {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.mlosign-action-delete {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.mlosign-action-resend {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.mlosign-action-log {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

.mlosign-mini-count {
  min-width: 20px;
  height: 20px;
  font-size: 10px;
  margin-left: -2px;
}

.mlosign-table td:nth-child(4),
.mlosign-table td:nth-child(7),
.mlosign-table td:nth-child(8),
.mlosign-table td:nth-child(9),
.mlosign-table td:nth-child(10),
.mlosign-table td:nth-child(11) {
  text-align: center;
}

.mlosign-table td:nth-child(3),
.mlosign-table td:nth-child(5),
.mlosign-table td:nth-child(6) {
  font-size: 12px;
  color: #475569;
}

.mlosign-table td:nth-child(5) {
  line-height: 1.25;
}

.mlosign-sms-status-none,
.mlosign-icon-static.is-muted {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
}

.mlosign-final-email-pending {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0284c7;
}

@media (max-width: 900px) {
  .mlosign-table {
    min-width: 1040px;
  }

  .mlosign-status-icon em {
    display: none;
  }

  .mlosign-status-icon {
    width: 34px;
    min-width: 34px;
    padding: 0;
    justify-content: center;
  }
}


/* v1.4.2 Documents table based on grouped premium concept */
.mlosign-table-wrap {
  border-radius: 20px !important;
  border: 1px solid #d7dde6 !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.06) !important;
}

.mlosign-table {
  min-width: 1160px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.mlosign-table th,
.mlosign-table td {
  padding: 16px 14px !important;
  vertical-align: middle !important;
}

.mlosign-table th {
  font-size: 12px !important;
  color: #172033 !important;
  letter-spacing: .045em !important;
  font-weight: 950 !important;
  background: #ffffff !important;
}

.mlosign-table tr:hover td {
  background-color: rgba(248,250,252,.82);
}

/* Soft grouped backgrounds like the mockup */
.mlosign-table th:nth-child(7),
.mlosign-table td:nth-child(7) {
  background: linear-gradient(180deg, rgba(218,244,255,.72), rgba(235,250,255,.72)) !important;
}
.mlosign-table th:nth-child(8),
.mlosign-table td:nth-child(8) {
  background: linear-gradient(180deg, rgba(213,248,250,.76), rgba(236,253,245,.76)) !important;
}
.mlosign-table th:nth-child(9),
.mlosign-table td:nth-child(9) {
  background: linear-gradient(180deg, rgba(219,249,232,.76), rgba(240,253,244,.76)) !important;
}

.mlosign-doc-title {
  max-width: 235px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #061a2e !important;
  line-height: 1.35 !important;
}

.mlosign-recipient-pill {
  background: #f8fafc !important;
  border: 1px solid #cfd8e3 !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  min-height: 30px !important;
  box-shadow: none !important;
}
.mlosign-recipient-pill span {
  width: 20px !important;
  height: 20px !important;
  background: #eef6ff !important;
  color: #2563eb !important;
}
.mlosign-recipient-pill strong {
  font-size: 13px !important;
  color: #0f172a !important;
  font-weight: 100;
}

/* Status remains readable as text */
.mlosign-status {
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .025em !important;
  border: 1px solid #d1d5db !important;
}
.mlosign-status.sent { background: #eaf3ff !important; color: #0b59d1 !important; border-color: #9ec5ff !important; }
.mlosign-status.draft { background: #f3f4f6 !important; color: #111827 !important; border-color: #d1d5db !important; }
.mlosign-status.signed,
.mlosign-status[class*="partial_"] { background: #ecfdf5 !important; color: #057a45 !important; border-color: #6ee7b7 !important; }
.mlosign-status.cancelled { background: #fff1f2 !important; color: #be123c !important; border-color: #fda4af !important; }

/* Large service icons: SMS, Final PDF, Resend */
.mlosign-large-service-icon,
.mlosign-mail-action,
.mlosign-icon-action,
.mlosign-icon-static {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
}

.mlosign-large-service-icon {
  width: 58px !important;
  height: 58px !important;
  border: 0 !important;
  background: transparent !important;
  color: #0b3145 !important;
  box-shadow: none !important;
}
.mlosign-large-service-icon svg {
  width: 54px !important;
  height: 54px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.mlosign-final-email-sent { color: #0f766e !important; }
.mlosign-final-email-pending { color: #0b3145 !important; }
.mlosign-final-email-failed,
.mlosign-sms-status-failed,
.mlosign-sms-status-undelivered,
.mlosign-sms-status-opted_out { color: #be123c !important; }
.mlosign-sms-status-delivered { color: #0f766e !important; }

.mlosign-mail-action {
  width: 62px !important;
  height: 50px !important;
  background: transparent !important;
  border: 0 !important;
  color: #0b3145 !important;
  box-shadow: none !important;
}
.mlosign-mail-action svg {
  width: 58px !important;
  height: 46px !important;
  stroke-width: 1.75 !important;
}

.mlosign-mini-count {
  min-width: 22px !important;
  height: 22px !important;
  margin-left: -12px !important;
  margin-top: -26px !important;
  background: #071327 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 8px 18px rgba(2,6,23,.25) !important;
}

/* Action icon style like the mockup */
.mlosign-icon-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  justify-content: center !important;
}
.mlosign-icon-action,
.mlosign-icon-static {
  width: 42px !important;
  height: 42px !important;
  background: transparent !important;
  border: 0 !important;
  color: #102638 !important;
  box-shadow: none !important;
  transition: transform .15s ease, color .15s ease, background .15s ease !important;
}
.mlosign-icon-action:hover {
  transform: translateY(-2px) scale(1.04) !important;
  background: rgba(15,23,42,.06) !important;
}
.mlosign-icon-action svg,
.mlosign-icon-static svg {
  width: 31px !important;
  height: 31px !important;
  stroke-width: 1.8 !important;
}
.mlosign-action-delete { color: #991b1b !important; }
.mlosign-action-prepare { color: #1d4ed8 !important; }
.mlosign-action-view-signed { color: #0f766e !important; }
.mlosign-action-cancel { color: #c2410c !important; }
.mlosign-action-log {
  width: 30px !important;
  height: 30px !important;
  color: #0f172a !important;
}
.mlosign-action-log svg {
  width: 20px !important;
  height: 20px !important;
}

.mlosign-table td:nth-child(4),
.mlosign-table td:nth-child(7),
.mlosign-table td:nth-child(8),
.mlosign-table td:nth-child(9),
.mlosign-table td:nth-child(10),
.mlosign-table td:nth-child(11) {
  text-align: center !important;
}

.mlosign-table td:nth-child(3),
.mlosign-table td:nth-child(5),
.mlosign-table td:nth-child(6) {
  font-size: 13px !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Hide old small service text/icon remnants */
.mlosign-status-icon { display: none !important; }


/* v1.4.3 Compact one-line icon layout */
.mlosign-table {
  min-width: 1080px;
}

.mlosign-table th,
.mlosign-table td {
  padding: 12px 10px !important;
}

.mlosign-table td:nth-child(7),
.mlosign-table td:nth-child(8),
.mlosign-table td:nth-child(9),
.mlosign-table td:nth-child(10),
.mlosign-table td:nth-child(11) {
  white-space: nowrap !important;
  vertical-align: middle !important;
}

.mlosign-icon-actions,
.mlosign-action-list,
.mlosign-icon-cell,
.mlosign-service-cell,
.mlosign-resend-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

.mlosign-icon-action,
.mlosign-icon-static,
.mlosign-large-service-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  border-radius: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.mlosign-large-service-icon {
  border: 1px solid rgba(15, 23, 42, .12) !important;
  background: rgba(255,255,255,.50) !important;
  color: #0f3348 !important;
}

.mlosign-large-service-icon svg,
.mlosign-icon-action svg,
.mlosign-icon-static svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
}

.mlosign-large-service-icon span,
.mlosign-icon-action span,
.mlosign-icon-static span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.mlosign-clickable-status {
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.mlosign-clickable-status:hover,
.mlosign-icon-action:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .14) !important;
  border-color: #60a5fa !important;
}

.mlosign-mini-count {
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  margin-left: -2px !important;
}

.mlosign-recipient-pill {
  max-width: 130px !important;
}

.mlosign-recipient-pill strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.mlosign-status {
  white-space: nowrap !important;
  font-size: 11px !important;
  padding: 6px 11px !important;
}

/* Ensure action column never stacks icons vertically */
.mlosign-table td:last-child .mlosign-icon-actions {
  min-width: 104px !important;
}

/* Remove extra log icon next to SMS/Final PDF because the main icon opens the report */
.mlosign-service-cell .mlosign-action-log {
  display: none !important;
}


/* v1.4.4 Drag & Drop placement from Signers & Fields */
.mlosign-field-source {
  cursor: grab !important;
  user-select: none;
}

.mlosign-field-source:active {
  cursor: grabbing !important;
}

body.mlosign-field-dragging-source .mlosign-editor-wrap {
  cursor: copy !important;
}

#mlosign-page-frame.mlosign-drop-ready::after {
  content: "Drop field here";
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 25;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .88);
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  pointer-events: none;
  opacity: .86;
  box-shadow: 0 16px 36px rgba(15,23,42,.22);
}

#mlosign-page-frame.mlosign-drop-hover {
  outline: 3px solid rgba(37, 99, 235, .55);
  outline-offset: 5px;
  box-shadow: 0 0 0 8px rgba(37, 99, 235, .12), 0 24px 70px rgba(37,99,235,.16);
}

#mlosign-page-frame.mlosign-drop-hover::after {
  content: "Release to place field";
  background: rgba(37, 99, 235, .94);
}

.mlosign-field-highlight {
  animation: mlosignFieldPulse 1.2s ease-in-out 1;
}

@keyframes mlosignFieldPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .45), 0 18px 42px rgba(37,99,235,.20); transform: scale(1); }
  45% { box-shadow: 0 0 0 12px rgba(37, 99, 235, .0), 0 24px 60px rgba(37,99,235,.28); transform: scale(1.015); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .0), 0 18px 42px rgba(37,99,235,.18); transform: scale(1); }
}


/* v1.4.6 Radio field groups */
.mlosign-manager-actions .mlosign-mini-btn[data-add-field="radio"] {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.mlosign-radio-field .mlosign-field-inner::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: block;
  margin: 0 auto 5px auto;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.75);
}

.mlosign-radio-field {
  border-style: solid !important;
}

.mlosign-field-options-popover {
  width: 300px;
}

.mlosign-radio-layout-options {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.mlosign-radio-layout-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569;
}

.mlosign-radio-layout-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
}

.mlosign-add-radio-same-group {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(37,99,235,.20);
}

.mlosign-radio-group-note {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.mlosign-public-radio {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid #111827 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
  cursor: pointer;
  padding: 0 !important;
}

.mlosign-public-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.mlosign-public-radio input[type="radio"]:checked {
  background: #111827;
  box-shadow: inset 0 0 0 1px #111827;
}


/* v1.4.7 Compact Documents table with details popover */
.mlosign-documents-compact-table {
  table-layout: fixed !important;
  width: 100% !important;
  min-width: 760px !important;
}

.mlosign-documents-compact-table th,
.mlosign-documents-compact-table td {
  vertical-align: middle !important;
}

.mlosign-documents-compact-table th:nth-child(1),
.mlosign-documents-compact-table td:nth-child(1) {
  width: 28% !important;
}

.mlosign-documents-compact-table th:nth-child(2),
.mlosign-documents-compact-table td:nth-child(2) {
  width: 42% !important;
}

.mlosign-documents-compact-table th:nth-child(3),
.mlosign-documents-compact-table td:nth-child(3) {
  width: 16% !important;
  text-align: center !important;
}

.mlosign-documents-compact-table th:nth-child(4),
.mlosign-documents-compact-table td:nth-child(4) {
  width: 76px !important;
  text-align: center !important;
}

.mlosign-doc-compact-row {
  position: relative !important;
}

.mlosign-doc-compact-row .mlosign-doc-title {
  font-size: 15px !important;
  font-weight: 100 !important;
  color: #0f172a !important;
}

.mlosign-compact-recips {
  display: flex !important;
  gap: 7px !important;
  align-items: flex-start !important;
  align-content: flex-start;
  flex-direction: column;
}

.mlosign-compact-view {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 88px !important;
  height: 38px !important;
  border-radius: 14px !important;
  color: #334155 !important;
  background: #f8fafc !important;
  border: 1px solid #dbeafe !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

.mlosign-compact-view:hover {
  transform: translateY(-1px) !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}

.mlosign-compact-view svg {
  width: 18px !important;
  height: 18px !important;
}

.mlosign-doc-more-wrap {
  position: relative !important;
  display: inline-flex !important;
  justify-content: center !important;
}

.mlosign-doc-more-toggle {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid #bae6fd !important;
  background: linear-gradient(180deg, #ffffff, #f0f9ff) !important;
  color: #0f172a !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  cursor: pointer !important;
  box-shadow: 0 10px 22px rgba(14, 165, 233, .18) !important;
}

.mlosign-doc-more-toggle span {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #334155 !important;
  display: block !important;
}

.mlosign-doc-more-toggle:hover,
.mlosign-doc-more-wrap.is-open .mlosign-doc-more-toggle {
  border-color: #38bdf8 !important;
  background: #e0f2fe !important;
  transform: translateY(-1px) !important;
}

.mlosign-doc-more-panel {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 12px) !important;
  width: min(920px, calc(100vw - 42px)) !important;
  z-index: 99999 !important;
  display: none !important;
  grid-template-columns: 1.05fr 1.35fr 1fr 1.35fr !important;
  gap: 0 !important;
  text-align: left !important;
  border: 1px solid rgba(148, 163, 184, .45) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .20) !important;
  overflow: hidden !important;
}

.mlosign-doc-more-wrap.is-open .mlosign-doc-more-panel {
  display: grid !important;
}

.mlosign-doc-more-section {
  padding: 18px 20px !important;
  border-right: 1px solid rgba(148, 163, 184, .35) !important;
  min-width: 0 !important;
}

.mlosign-doc-more-section:last-child {
  border-right: 0 !important;
}

.mlosign-doc-more-section h4 {
  margin: 0 0 14px 0 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #64748b !important;
  font-weight: 900 !important;
}

.mlosign-doc-more-row {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 9px 0 !important;
  color: #0f172a !important;
  font-size: 13px !important;
}

.mlosign-doc-more-row span {
  color: #475569 !important;
  font-weight: 700 !important;
}

.mlosign-doc-more-row strong {
  font-weight: 800 !important;
  overflow-wrap: anywhere !important;
}

.mlosign-doc-more-actions,
.mlosign-doc-more-action-list {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 36px !important;
  margin: 8px 0 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

.mlosign-doc-more-action-list .mlosign-icon-actions,
.mlosign-doc-more-action-list .mlosign-icon-cell,
.mlosign-doc-more-action-list .mlosign-resend-wrap,
.mlosign-doc-more-actions .mlosign-icon-cell {
  justify-content: flex-start !important;
}

.mlosign-doc-more-panel .mlosign-icon-action,
.mlosign-doc-more-panel .mlosign-icon-static,
.mlosign-doc-more-panel .mlosign-large-service-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.mlosign-doc-more-panel .mlosign-icon-action svg,
.mlosign-doc-more-panel .mlosign-icon-static svg,
.mlosign-doc-more-panel .mlosign-large-service-icon svg {
  width: 17px !important;
  height: 17px !important;
}

.mlosign-doc-more-panel .mlosign-status {
  display: inline-flex !important;
  width: fit-content !important;
}

.mlosign-doc-more-panel .mlosign-mini-count {
  transform: scale(.88) !important;
  transform-origin: left center !important;
}

@media (max-width: 900px) {
  .mlosign-doc-more-panel {
    grid-template-columns: 1fr 1fr !important;
    width: min(680px, calc(100vw - 28px)) !important;
  }

  .mlosign-doc-more-section:nth-child(2n) {
    border-right: 0 !important;
  }
}

@media (max-width: 640px) {
  .mlosign-documents-compact-table {
    min-width: 620px !important;
  }

  .mlosign-doc-more-panel {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    top: 110px !important;
    width: auto !important;
    max-height: calc(100vh - 150px) !important;
    overflow: auto !important;
    grid-template-columns: 1fr !important;
  }

  .mlosign-doc-more-section {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, .35) !important;
  }
}


/* v1.4.8 Documents compact table fixes */
.mlosign-table-wrap:has(.mlosign-documents-compact-table) {
  overflow: visible !important;
}

.mlosign-documents-compact-table {
  table-layout: fixed !important;
  min-width: 720px !important;
}

.mlosign-documents-compact-table th:nth-child(1),
.mlosign-documents-compact-table td:nth-child(1) {
  width: 48% !important;
}

.mlosign-documents-compact-table th:nth-child(2),
.mlosign-documents-compact-table td:nth-child(2) {
  width: 34% !important;
}

.mlosign-documents-compact-table th:nth-child(3),
.mlosign-documents-compact-table td:nth-child(3) {
  width: 110px !important;
}

.mlosign-documents-compact-table th:nth-child(4),
.mlosign-documents-compact-table td:nth-child(4) {
  width: 70px !important;
}

.mlosign-doc-compact-row .mlosign-doc-title {
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 100 !important;
  font-size: 15px !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
}

.mlosign-compact-recips {
  flex-wrap: wrap !important;
  overflow: visible !important;
}

.mlosign-compact-recips .mlosign-recipient-pill {
  max-width: none !important;
  width: auto !important;
  white-space: nowrap !important;
}

.mlosign-compact-recips .mlosign-recipient-pill strong {
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.mlosign-compact-signers-label {
  display: block !important;
  margin-top: 5px !important;
  white-space: nowrap !important;
  color: #0f172a !important;
  padding-left: .6em;
}

.mlosign-compact-view-empty {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 88px !important;
  height: 38px !important;
  color: transparent !important;
  pointer-events: none !important;
}

.mlosign-doc-more-wrap {
  position: relative !important;
  z-index: 50 !important;
}

.mlosign-doc-more-wrap.is-open {
  z-index: 999999 !important;
}

.mlosign-doc-more-wrap.is-open .mlosign-doc-more-panel {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mlosign-doc-more-panel {
  transform: translateZ(0) !important;
}

/* Put the popover slightly inside the table so it does not get clipped by the page edge */
.mlosign-documents-compact-table td:last-child .mlosign-doc-more-panel {
  right: 0 !important;
}

@supports not selector(:has(*)) {
  .mlosign-table-wrap {
    overflow: visible !important;
  }
}


/* v1.4.11 Signers UI adjustment */
.mlosign-signers-head {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  margin-bottom: 14px !important;
}

.mlosign-signers-title-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.mlosign-signers-title-wrap h3 {
  margin-bottom: 0 !important;
}

.mlosign-add-signer-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 999px !important;
  border: 2px solid #2563eb !important;
  background: #ffffff !important;
  color: #2563eb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .16) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}

.mlosign-add-signer-icon span {
  display: block !important;
  line-height: 1 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  margin-top: -2px !important;
}

.mlosign-add-signer-icon:hover {
  transform: translateY(-1px) scale(1.04) !important;
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, .24) !important;
}

.mlosign-add-signer-icon:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .26) !important;
  outline-offset: 3px !important;
}


/* v1.4.12 Signer mobile and guided required-field experience */
.mlosign-required-sticker {
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .02em;
  color: #b42318;
  background: #fff176;
  border: 2px solid #ef4444;
  box-shadow: 0 8px 18px rgba(15,23,42,.18);
  pointer-events: none;
  white-space: nowrap;
}

.mlosign-required-sticker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #ef4444;
}

.mlosign-check-sticker { color:#92400e; }
.mlosign-select-sticker { color:#7c2d12; }
.mlosign-fill-sticker { color:#7f1d1d; }

.mlosign-public-extra-field-wrap {
  position: absolute !important;
  display: block !important;
  z-index: 5 !important;
}

.mlosign-public-extra-field-wrap .mlosign-public-textbox {
  position: absolute !important;
  left: 0 !important;

  width: 100% !important;
  height: 50% !important;
  background: #dfdcab !important;
  border: solid 1px #ffcc14 !important;
}

.mlosign-public-focus-pulse {
  animation: mlosignPublicFocusPulse 1.45s ease-in-out 1 !important;
}

@keyframes mlosignPublicFocusPulse {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,.55), 0 0 0 rgba(37,99,235,0); }
  45% { box-shadow: 0 0 0 12px rgba(37,99,235,0), 0 16px 38px rgba(37,99,235,.30); transform: scale(1.025); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,0), 0 0 0 rgba(37,99,235,0); transform: scale(1); }
}

.mlosign-saved-signature-choice {
  margin: 12px 0 16px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  box-shadow: 0 12px 30px rgba(37,99,235,.10);
}

.mlosign-saved-signature-choice strong {
  display: block;
  font-size: 14px;
  color: #0f172a;
  margin-bottom: 3px;
}

.mlosign-saved-signature-choice span {
  display: block;
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
}

.mlosign-saved-signature-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.mlosign-next-required-guide {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 999999;
  border: 0;
  border-radius: 18px;
  padding: 12px 16px;
  min-width: 190px;
  text-align: left;
  color: #ffffff;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  box-shadow: 0 18px 38px rgba(37,99,235,.30);
  cursor: pointer;
  display: none;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

.mlosign-next-required-guide.is-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.mlosign-next-required-guide strong,
.mlosign-next-required-guide span {
  display: block;
}

.mlosign-next-required-guide strong {
  font-size: 14px;
  font-weight: 950;
}

.mlosign-next-required-guide span {
  margin-top: 2px;
  font-size: 12px;
  opacity: .88;
}

.mlosign-next-required-guide::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 900;
}

@media (max-width: 760px) {
  body.mlosign-public-fullscreen {
    overflow: hidden !important;
  }

  .mlosign-signer-fullscreen-card {
    grid-template-rows: auto 1fr auto !important;
  }

  .mlosign-signer-fullscreen-card > h2 {
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin: 14px 18px 6px !important;
  }

  .mlosign-signer-fullscreen-card > p {
    margin: 0 18px 10px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .mlosign-doc-summary {
    display: none !important;
  }

  .mlosign-signer-workspace {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    min-height: 0 !important;
    height: calc(100vh - 235px) !important;
  }

  .mlosign-signer-pages,
  .mlosign-signer-required {
    display: none !important;
  }

  .mlosign-signer-document {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .mlosign-signer-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 10px !important;
    min-height: 0 !important;
    background: rgba(15,23,42,.92) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 0 !important;
  }

  .mlosign-signer-toolbar #mlosign-public-zoom-out,
  .mlosign-signer-toolbar #mlosign-public-zoom-in,
  .mlosign-signer-toolbar #mlosign-public-fit,
  .mlosign-signer-toolbar .mlosign-toolbar-sep {
    display: none !important;
  }

  .mlosign-signer-toolbar .mlosign-btn-light,
  .mlosign-signer-toolbar button {
    min-height: 40px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  #mlosign-public-page-info {
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  .mlosign-signer-pdf-scroll {
    height: calc(100vh - 315px) !important;
    min-height: 300px !important;
    overflow: auto !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  #mlosign-public-pdf-stage {
    margin: 0 auto !important;
  }

  .mlosign-submit-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99998 !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.96) !important;
    border-top: 1px solid #e5e7eb !important;
    box-shadow: 0 -16px 30px rgba(15,23,42,.10) !important;
  }

  .mlosign-submit-bar > div {
    display: none !important;
  }

  .mlosign-submit-bar .mlosign-btn {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 18px !important;
  }

  .mlosign-next-required-guide {
    left: 14px !important;
    right: 14px !important;
    bottom: 86px !important;
    min-width: 0 !important;
  }

  .mlosign-sign-sticker,
  .mlosign-required-sticker {
    transform: translateX(-50%) scale(.78) !important;
    transform-origin: center bottom !important;
  }

  .mlosign-public-signature-render .mlosign-preview-placeholder {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .mlosign-signature-modal-card {
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 34px) !important;
    overflow: auto !important;
    border-radius: 22px !important;
  }
}


/* v1.4.13 Inline next guide + checkbox/radio click fixes */
.mlosign-next-required-guide {
  display: none !important;
}

.mlosign-inline-next-guide {
  position: absolute;
  z-index: 45;
  border: 0;
  border-radius: 18px;
  padding: 10px 38px 10px 13px;
  min-width: 162px;
  text-align: left;
  color: #ffffff;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.22), transparent 35%),
    linear-gradient(135deg, #2563eb, #172554);
  box-shadow: 0 16px 34px rgba(37,99,235,.33);
  cursor: pointer;
  animation: mlosignInlineNextPulse 1.6s ease-in-out infinite;
}

.mlosign-inline-next-guide::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #2563eb;
}

.mlosign-inline-next-guide::after {
  content: "→";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
}

.mlosign-inline-next-guide .mlosign-inline-next-kicker,
.mlosign-inline-next-guide strong,
.mlosign-inline-next-guide small {
  display: block;
}

.mlosign-inline-next-guide .mlosign-inline-next-kicker {
  color: #fde68a;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.mlosign-inline-next-guide strong {
  font-size: 13px;
  line-height: 1.1;
  font-weight: 950;
}

.mlosign-inline-next-guide small {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,.86);
  font-weight: 700;
}

@keyframes mlosignInlineNextPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 16px 34px rgba(37,99,235,.33);
  }
  50% {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(37,99,235,.42);
  }
}

.mlosign-public-checkbox,
.mlosign-public-radio,
.mlosign-public-extra-field-wrap,
.mlosign-required-sticker {
  pointer-events: auto !important;
}

.mlosign-public-checkbox input,
.mlosign-public-radio input {
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .mlosign-inline-next-guide {
    min-width: 138px !important;
    max-width: 165px !important;
    padding: 9px 34px 9px 11px !important;
    border-radius: 16px !important;
  }

  .mlosign-inline-next-guide strong {
    font-size: 12px !important;
  }

  .mlosign-inline-next-guide small {
    font-size: 10px !important;
  }
}



/*PROBANDO ENCABEZADO*/
/* Variables de Color para personalización fácil */
  :root {
    --bg-dark-blend: #53101e;
    --corinto-base: #7f0113;
    --corinto-glow: #540c16;
    --gold-accent: #d4af37; /* Tono dorado elegante usado en la opción D */
    --white: #ffffff;
    --text-muted: #bdaeb0;
  }

  /* Contenedor principal con el Degradado Corinto solicitado */
  .mlosign-wrapper {
    background: none;

    padding: 1px 30px;

    margin: 20px auto; /* Centra el contenedor en la pantalla */
    text-align: center; /* Centra todo el contenido internamente */

    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
  }

  .mlosign-header {
    position: relative;
    z-index: 2;
  }

  /* --- LOGO COMPUESTO (OPCIÓN D) --- */
  .mlosign-logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
  }

  /* Isotipo: Cuadro Rojo con la "M" */
  .mlosign-icon-box {
    background: linear-gradient(135deg, #e61938 0%, #99001a 100%);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(230, 25, 56, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    margin-right: 14px;
    flex-shrink: 0;
  }

  .mlosign-icon-box span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 24px;
    color: var(--white);
    transform: translateY(-1px);
  }

  /* Tipografía MLO */
  .logo-text-mlo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 38px;
    color: #750202;
    letter-spacing: -1px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
  }

  /* Tipografía sign (Letra de Carta / Firma) */
  .logo-text-sign {
    font-family: 'Mrs Saint Delafield', cursive;
    font-size: 76px; /* Ajustada por la escala de las fuentes manuscritas */
    font-weight: 400;
    color: var(--gold-accent);
    line-height: 0.5;
    margin-left: -2px;
    position: relative;
    transform: rotate(-3deg) translateY(10px);
  }

  /* Trazo inferior característico de la Opción D */
  .logo-text-sign::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: -10px;
    width: 120%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-accent) 20%, rgba(212, 175, 55, 0.4) 80%, transparent);
    border-radius: 50%;
  }

  /* --- DETALLES Y CONTENIDO --- */
  .mlosign-header p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    letter-spacing: 0.3px;
    line-height: 1.5;
  }

  .mlosign-header strong {
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.07);
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
  }

  /* Badge Multi-Signer */
  .mlosign-badge {
    display: inline-block;
    background: linear-gradient(90deg, rgba(214, 175, 55, 0.12) 0%, rgba(214, 175, 55, 0.03) 100%);
    color: var(--gold-accent);
    border: 1px solid rgba(214, 175, 87, 0.25);
    padding: 5px 16px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }


/* v1.4.14 signature modal mobile scroll + START/NEXT/FINISH guide */
.mlosign-inline-next-guide {
  min-width: 82px !important;
  width: auto !important;
  padding: 10px 34px 10px 15px !important;
  border-radius: 999px !important;
  text-align: center !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.26), transparent 36%),
    linear-gradient(135deg, #f97316, #dc2626) !important;
  box-shadow: 0 16px 36px rgba(249, 115, 22, .36) !important;
  border: 2px solid rgba(255,255,255,.82) !important;
}

.mlosign-inline-next-guide strong {
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.mlosign-inline-next-guide span {
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.mlosign-inline-next-guide .mlosign-inline-next-kicker,
.mlosign-inline-next-guide small,
.mlosign-inline-next-guide::after {
  display: none !important;
}

.mlosign-inline-next-guide::before {
  border-right-color: #f97316 !important;
}

.mlosign-inline-next-start {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.26), transparent 36%),
    linear-gradient(135deg, #22c55e, #15803d) !important;
  box-shadow: 0 16px 36px rgba(34, 197, 94, .34) !important;
}

.mlosign-inline-next-start::before {
  border-right-color: #22c55e !important;
}

.mlosign-inline-next-finish {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.26), transparent 36%),
    linear-gradient(135deg, #7c3aed, #1d4ed8) !important;
  box-shadow: 0 16px 36px rgba(124, 58, 237, .34) !important;
}

.mlosign-inline-next-finish::before {
  border-right-color: #7c3aed !important;
}

@media (max-width: 760px) {
  .mlosign-signature-modal {
    position: fixed !important;
    inset: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 10px calc(22px + env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
  }

  .mlosign-signature-modal.is-open {
    display: block !important;
  }

  .mlosign-signature-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
  }

  .mlosign-signature-modal-card {
    position: relative !important;
    margin: 12px auto calc(28px + env(safe-area-inset-bottom)) !important;
    width: min(96vw, 720px) !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-bottom: 22px !important;
  }

  .mlosign-signature-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid #e5e7eb !important;
    padding-top: 12px !important;
    margin-bottom: 0 !important;
  }

  .mlosign-signature-modal-actions .mlosign-btn,
  .mlosign-signature-modal-actions .mlosign-btn-light {
    min-height: 46px !important;
  }

  .mlosign-inline-next-guide {
    min-width: 76px !important;
    padding: 9px 32px 9px 13px !important;
  }

  .mlosign-inline-next-guide strong {
    font-size: 12px !important;
  }
}


/* v1.4.15 mobile pinch zoom + locked signature method + drag-only fields */
body.mlosign-public-fullscreen,
.mlosign-signer-workspace,
.mlosign-signer-document,
.mlosign-signer-pdf-scroll,
#mlosign-public-pdf-stage,
#mlosign-public-preview-canvas,
#mlosign-public-preview-layer {
  touch-action: pan-x pan-y pinch-zoom !important;
  -ms-touch-action: pan-x pan-y pinch-zoom !important;
}

.mlosign-signer-pdf-scroll {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

#mlosign-public-pdf-stage {
  transform-origin: 0 0 !important;
}

.mlosign-field-source {
  cursor: grab !important;
}



.mlosign-sign-method-block {
  margin: 10px 0 14px;
}

.mlosign-locked-signature-method-note {
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(37,99,235,.10);
}

.mlosign-locked-signature-method-note strong {
  color: #172554;
  font-weight: 950;
}

.mlosign-signature-modal.is-signature-method-locked .mlosign-sign-method-block:not(.is-allowed-signature-method) {
  display: none !important;
}


/* v1.4.18 FINISH attention + SMS signed PDF download */
.mlosign-submit-attention {
  animation: mlosignSubmitShake 1.15s ease-in-out 0s 3, mlosignSubmitGlow 1.4s ease-in-out infinite !important;
}

@keyframes mlosignSubmitShake {
  0%, 100% { transform: translateX(0) scale(1); }
  12% { transform: translateX(-5px) scale(1.01); }
  24% { transform: translateX(5px) scale(1.01); }
  36% { transform: translateX(-4px) scale(1.01); }
  48% { transform: translateX(4px) scale(1.01); }
  60% { transform: translateX(-2px) scale(1.01); }
  72% { transform: translateX(2px) scale(1.01); }
}

@keyframes mlosignSubmitGlow {
  0%, 100% { box-shadow: 0 16px 34px rgba(37,99,235,.28); }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,.18), 0 22px 50px rgba(37,99,235,.42); }
}

.mlosign-thankyou-download {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 20px !important;
  min-height: 52px !important;
  padding: 0 22px !important;
  border-radius: 18px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  box-shadow: 0 18px 38px rgba(37,99,235,.28) !important;
}

.mlosign-thankyou-download:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 24px 46px rgba(37,99,235,.34) !important;
}

.mlosign-thankyou-download-note {
  margin: 10px auto 0 !important;
  max-width: 420px !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}


/* v1.4.21 Delivery Method recipient visibility */
.mlosign-delivery-mode-form .mlosign-signer-row {
  transition: grid-template-columns .18s ease, gap .18s ease;
}

.mlosign-delivery-mode-form.mlosign-method-email .mlosign-sms-field,
.mlosign-delivery-mode-form.mlosign-method-sms .mlosign-email-field {
  display: none !important;
}

.mlosign-delivery-mode-form.mlosign-method-email .mlosign-signer-row,
.mlosign-delivery-mode-form.mlosign-method-sms .mlosign-signer-row {
  grid-template-columns: 16px minmax(260px, 1.2fr) minmax(260px, .9fr) auto !important;
}

.mlosign-delivery-mode-form.mlosign-method-both .mlosign-signer-row {
  grid-template-columns: 16px minmax(240px, 1.1fr) minmax(210px, .85fr) minmax(210px, .85fr) auto !important;
}

@media (max-width: 900px) {
  .mlosign-delivery-mode-form.mlosign-method-email .mlosign-signer-row,
  .mlosign-delivery-mode-form.mlosign-method-sms .mlosign-signer-row,
  .mlosign-delivery-mode-form.mlosign-method-both .mlosign-signer-row {
    grid-template-columns: 16px 1fr !important;
  }
}


/* v1.4.22 Prepare Document placement improvements */
.mlosign-drag-field {
  position: absolute !important;
}

.mlosign-field-delete-x {
  position: absolute !important;
  top: -12px !important;
  right: -12px !important;
  z-index: 20 !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 18px !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 20px rgba(185, 28, 28, .25) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.mlosign-field-delete-x:hover {
  transform: scale(1.07) !important;
  box-shadow: 0 14px 26px rgba(185, 28, 28, .34) !important;
}

.mlosign-checkbox-field,
.mlosign-radio-field {
  min-width: 18px !important;
  min-height: 18px !important;
  overflow: visible !important;
}

.mlosign-checkbox-field .mlosign-field-inner,
.mlosign-radio-field .mlosign-field-inner {
  opacity: .18 !important;
}

.mlosign-check-placement-x {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 12 !important;
  transform: translate(-50%, -50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #dc2626 !important;
  border: 2px solid #dc2626 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: 0 10px 24px rgba(220, 38, 38, .18) !important;
  pointer-events: none !important;
}

.mlosign-radio-field .mlosign-check-placement-x {
  border-radius: 50% !important;
  color: #7c3aed !important;
  border-color: #7c3aed !important;
}

.mlosign-textbox-field {
  min-width: 90px !important;
  min-height: 34px !important;
  resize: none !important;
}

.mlosign-textbox-field .mlosign-field-inner {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 9px 12px !important;
  text-align: left !important;
}

.mlosign-field-resize-handle {
  position: absolute !important;
  right: -7px !important;
  bottom: -7px !important;
  z-index: 19 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #2563eb, #1e40af) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .24) !important;
  cursor: nwse-resize !important;
}

.mlosign-field-resize-handle::before {
  content: "" !important;
  position: absolute !important;
  right: 3px !important;
  bottom: 3px !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid rgba(255,255,255,.95) !important;
  border-bottom: 2px solid rgba(255,255,255,.95) !important;
}

.mlosign-drag-field.is-resizing {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .18), 0 18px 38px rgba(15, 23, 42, .15) !important;
}

.mlosign-textbox-popover {
  width: 310px !important;
}

/* v1.4.22 Make typed signatures more elegant in the browser preview too. */
.mlosign-rendered-typed-signature {

  font-weight: 400 !important;
  letter-spacing: .01em !important;
}


/* v1.4.24 Prepare Document field UI hotfix */
.mlosign-drag-field {
  overflow: visible !important;
}

.mlosign-field-delete-x {
  position: absolute !important;
  top: -13px !important;
  right: -13px !important;
  z-index: 999 !important;
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  min-height: 25px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 20px !important;
  font-weight: 950 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 22px rgba(185, 28, 28, .30) !important;
  cursor: pointer !important;
  padding: 0 !important;
  opacity: 1 !important;
}

.mlosign-field-delete-x:hover {
  transform: scale(1.08) !important;
}

.mlosign-checkbox-field,
.mlosign-radio-field {
  min-width: 22px !important;
  min-height: 22px !important;
  width: 28px;
  height: 28px;
  border-width: 2px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.11) !important;
  cursor: move !important;
}

.mlosign-radio-field {
  border-radius: 999px !important;
}

.mlosign-checkbox-field .mlosign-field-inner,
.mlosign-radio-field .mlosign-field-inner,
.mlosign-checkbox-field .mlosign-field-inner::before,
.mlosign-radio-field .mlosign-field-inner::before {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

.mlosign-checkbox-field .mlosign-compact-marker-inner,
.mlosign-radio-field .mlosign-compact-marker-inner {
  display: block !important;
  opacity: 1 !important;
}

.mlosign-check-placement-x {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 30 !important;
  transform: translate(-50%, -50%) !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #ef4444 !important;
  border: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.mlosign-radio-field .mlosign-check-placement-x {
  color: #7c3aed !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.mlosign-textbox-field {
  overflow: visible !important;
  cursor: move !important;
}

.mlosign-textbox-field .mlosign-field-resize-handle {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mlosign-checkbox-editor-badges {
  left: 50% !important;
  top: calc(100% + 7px) !important;
  z-index: 90 !important;
}

.mlosign-checkbox-popover {
  z-index: 1000000 !important;
}

.mlosign-field-options-popover {
  pointer-events: auto !important;
}


/* v1.4.25 Prepare Document visual cleanup
   Fix clipped delete X, remove inner checkbox/radio box, enlarge textbox resize handle.
*/

#mlosign-page-frame,
#mlosign-pdf-page-stage,
.mlosign-editor-wrap {
  overflow: visible !important;
}

.mlosign-drag-field {
  overflow: visible !important;
  isolation: isolate !important;
}

/* Delete X: move farther outside the field and make it impossible to clip visually */
.mlosign-drag-field .mlosign-field-delete-x {
  position: absolute !important;
  top: -18px !important;
  right: -18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 99999 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  border-radius: 999px !important;
  border: 3px solid #ffffff !important;
  background: linear-gradient(135deg, #ff5a5f, #b91c1c) !important;
  color: #ffffff !important;
  font-size: 21px !important;
  line-height: 24px !important;
  font-weight: 950 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-shadow: 0 12px 28px rgba(185, 28, 28, .36) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.mlosign-drag-field .mlosign-field-delete-x:hover {
  transform: scale(1.08) !important;
}

/* Checkbox / Radio editor markers: only the real outer field + center target */
.mlosign-drag-field.mlosign-checkbox-field,
.mlosign-drag-field.mlosign-radio-field {
  min-width: 26px !important;
  min-height: 26px !important;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  border-width: 2px !important;
  background: rgba(239, 246, 255, .68) !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.12) !important;
}

.mlosign-drag-field.mlosign-checkbox-field {
  border-radius: 7px !important;
}

.mlosign-drag-field.mlosign-radio-field {
  border-radius: 999px !important;
}

/* Kill every old pseudo/inner marker that creates the second square/circle */
.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner,
.mlosign-drag-field.mlosign-radio-field .mlosign-field-inner,
.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner *,
.mlosign-drag-field.mlosign-radio-field .mlosign-field-inner *,
.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner::before,
.mlosign-drag-field.mlosign-radio-field .mlosign-field-inner::before,
.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-inner::after,
.mlosign-drag-field.mlosign-radio-field .mlosign-field-inner::after,
.mlosign-drag-field.mlosign-checkbox-field::before,
.mlosign-drag-field.mlosign-radio-field::before,
.mlosign-drag-field.mlosign-checkbox-field::after,
.mlosign-drag-field.mlosign-radio-field::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* But keep the badges visible below the field */
.mlosign-drag-field.mlosign-checkbox-field .mlosign-checkbox-editor-badges,
.mlosign-drag-field.mlosign-checkbox-field .mlosign-checkbox-editor-badges *,
.mlosign-drag-field.mlosign-radio-field .mlosign-checkbox-editor-badges,
.mlosign-drag-field.mlosign-radio-field .mlosign-checkbox-editor-badges * {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
}

/* Center target mark: clear and visible, not another box */
.mlosign-drag-field .mlosign-check-placement-x {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 50 !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #dc2626 !important;
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  pointer-events: none !important;
}

.mlosign-drag-field.mlosign-radio-field .mlosign-check-placement-x {
  color: #7c3aed !important;
}

/* Textbox resize handle: bigger and easier to grab */
.mlosign-drag-field.mlosign-textbox-field .mlosign-field-resize-handle {
  position: absolute !important;
  right: -13px !important;
  bottom: -13px !important;
  z-index: 99998 !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .34) !important;
  cursor: nwse-resize !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mlosign-drag-field.mlosign-textbox-field .mlosign-field-resize-handle::before {
  content: "" !important;
  position: absolute !important;
  right: 6px !important;
  bottom: 6px !important;
  width: 12px !important;
  height: 12px !important;
  border-right: 3px solid rgba(255,255,255,.98) !important;
  border-bottom: 3px solid rgba(255,255,255,.98) !important;
}

.mlosign-drag-field.mlosign-textbox-field {
  overflow: visible !important;
}


/* v1.4.26 Delete X positioning fix for all Prepare Document fields */
#mlosign-page-frame,
#mlosign-pdf-page-stage,
#mlosign-pdf-page-stage .mlosign-page-layer,
#mlosign-pdf-page-stage .mlosign-fields-layer,
#mlosign-pdf-page-stage .mlosign-render-layer,
.mlosign-editor-canvas,
.mlosign-editor-stage,
.mlosign-drag-field {
  overflow: visible !important;
}

.mlosign-drag-field .mlosign-field-delete-x {
  position: absolute !important;
  z-index: 2147483000 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 999px !important;
  border: 3px solid #ffffff !important;
  background: linear-gradient(135deg, #ff5757, #c1121f) !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  box-shadow: 0 12px 24px rgba(193,18,31,.34) !important;
  transform: none !important;
  clip-path: none !important;
}

/* Large fields: keep the delete X outside the top-right corner */
.mlosign-drag-field:not(.mlosign-checkbox-field):not(.mlosign-radio-field) .mlosign-field-delete-x {
  top: -18px !important;
  right: -18px !important;
  left: auto !important;
  bottom: auto !important;
}

/* Small fields: place the delete X above/right with enough offset to avoid clipping */
.mlosign-drag-field.mlosign-checkbox-field .mlosign-field-delete-x,
.mlosign-drag-field.mlosign-radio-field .mlosign-field-delete-x {
  top: -24px !important;
  right: -24px !important;
  left: auto !important;
  bottom: auto !important;
}

/* Date fields are smaller than signatures; give them a safer offset too */
.mlosign-drag-field.mlosign-date-field .mlosign-field-delete-x {
  top: -18px !important;
  right: -18px !important;
}

/* Make the handle and delete X coexist on textboxes */
.mlosign-drag-field.mlosign-textbox-field .mlosign-field-delete-x {
  top: -18px !important;
  right: -18px !important;
}

.mlosign-drag-field .mlosign-field-delete-x:hover {
  transform: scale(1.08) !important;
}

/* Ensure small checkbox/radio target remains clean while delete button floats outside */
.mlosign-drag-field.mlosign-checkbox-field,
.mlosign-drag-field.mlosign-radio-field {
  overflow: visible !important;
  position: absolute !important;
}


/* v1.4.27 Signature/Date delete X final override */
.mlosign-drag-field[data-field-type="signature"],
.mlosign-drag-field[data-field-type="date"],
.mlosign-drag-field.mlosign-signature-field,
.mlosign-drag-field.mlosign-date-field {
  overflow: visible !important;
  position: absolute !important;
  isolation: isolate !important;
}

/* Make sure the old red folded corner/visual marker does not hide the delete button */
.mlosign-drag-field[data-field-type="signature"]::before,
.mlosign-drag-field[data-field-type="signature"]::after,
.mlosign-drag-field[data-field-type="date"]::before,
.mlosign-drag-field[data-field-type="date"]::after,
.mlosign-drag-field.mlosign-signature-field::before,
.mlosign-drag-field.mlosign-signature-field::after,
.mlosign-drag-field.mlosign-date-field::before,
.mlosign-drag-field.mlosign-date-field::after {
  z-index: 1 !important;
}

/* Signature and Date delete X: force it to be a complete floating circle */
.mlosign-drag-field[data-field-type="signature"] > .mlosign-field-delete-x,
.mlosign-drag-field[data-field-type="date"] > .mlosign-field-delete-x,
.mlosign-drag-field.mlosign-signature-field > .mlosign-field-delete-x,
.mlosign-drag-field.mlosign-date-field > .mlosign-field-delete-x,
.mlosign-field-delete-x-signature,
.mlosign-field-delete-x-date {
  position: absolute !important;
  top: -19px !important;
  right: -19px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 2147483647 !important;
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  max-width: 31px !important;
  max-height: 31px !important;
  border-radius: 999px !important;
  border: 3px solid #ffffff !important;
  background: #ef4444 !important;
  background-image: linear-gradient(135deg, #ff6161, #b91c1c) !important;
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  box-shadow: 0 13px 28px rgba(185, 28, 28, .38) !important;
  transform: none !important;
  clip-path: none !important;
}

/* Keep the X symbol centered */
.mlosign-drag-field[data-field-type="signature"] > .mlosign-field-delete-x::before,
.mlosign-drag-field[data-field-type="date"] > .mlosign-field-delete-x::before,
.mlosign-drag-field.mlosign-signature-field > .mlosign-field-delete-x::before,
.mlosign-drag-field.mlosign-date-field > .mlosign-field-delete-x::before {
  content: none !important;
}

/* If any inner element was covering the button, keep it below */
.mlosign-drag-field[data-field-type="signature"] .mlosign-field-inner,
.mlosign-drag-field[data-field-type="date"] .mlosign-field-inner,
.mlosign-drag-field.mlosign-signature-field .mlosign-field-inner,
.mlosign-drag-field.mlosign-date-field .mlosign-field-inner {
  position: relative !important;
  z-index: 2 !important;
}

.mlosign-drag-field[data-field-type="signature"] > .mlosign-field-delete-x:hover,
.mlosign-drag-field[data-field-type="date"] > .mlosign-field-delete-x:hover,
.mlosign-drag-field.mlosign-signature-field > .mlosign-field-delete-x:hover,
.mlosign-drag-field.mlosign-date-field > .mlosign-field-delete-x:hover {
  transform: scale(1.08) !important;
}


/* v1.4.29 Public signer radio/checkbox minimal UI */
.mlosign-public-radio,
.mlosign-public-checkbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  cursor: pointer !important;
}

/* Keep the clickable area, but visually only show a small centered control */
.mlosign-public-radio input[type="radio"],
.mlosign-public-checkbox input[type="checkbox"] {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  opacity: .92 !important;
  cursor: pointer !important;
  accent-color: #16a34a !important;
}

/* Radio should not render a large custom oval over the PDF text */
.mlosign-public-radio::before,
.mlosign-public-radio::after,
.mlosign-public-checkbox::before,
.mlosign-public-checkbox::after {
  display: none !important;
  content: none !important;
}

/* When completed, keep it clean and do not add a large visual background */
.mlosign-public-radio.is-complete,
.mlosign-public-checkbox.is-complete {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Required sticker for public signer: smaller, cleaner, less invasive */
.mlosign-public-radio .mlosign-required-sticker,
.mlosign-public-checkbox .mlosign-required-sticker,
.mlosign-select-sticker,
.mlosign-check-sticker {
  min-width: 54px !important;
  height: 15px !important;
  padding: 0 7px !important;
  top: -15px !important;
  font-size: 7px !important;
  line-height: 1 !important;
  border-width: 1.5px !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 12px rgba(15,23,42,.14) !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

.mlosign-public-radio .mlosign-required-sticker::after,
.mlosign-public-checkbox .mlosign-required-sticker::after,
.mlosign-select-sticker::after,
.mlosign-check-sticker::after {
  bottom: -5px !important;
  border-left-width: 5px !important;
  border-right-width: 5px !important;
  border-top-width: 5px !important;
}

/* Make SELECT ONE shorter visually on radio fields */
.mlosign-public-radio .mlosign-select-sticker {
  color: #92400e !important;
  background: #fef3c7 !important;
  border-color: #f97316 !important;
}

/* Mobile: even smaller so it does not cover the PDF */
@media (max-width: 760px) {
  .mlosign-public-radio input[type="radio"],
  .mlosign-public-checkbox input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }

  .mlosign-public-radio .mlosign-required-sticker,
  .mlosign-public-checkbox .mlosign-required-sticker,
  .mlosign-select-sticker,
  .mlosign-check-sticker {
    transform: translateX(-50%) scale(.72) !important;
    transform-origin: center bottom !important;
  }
}


/* v1.4.30 Type Signature editable hint */
.mlosign-type-signature-label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

.mlosign-type-signature-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mlosign-type-signature-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.10) !important;
}

.mlosign-type-signature-hint::before {
  content: "✎" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

.mlosign-type-signature-wrap {
  position: relative !important;
  margin-bottom: 16px !important;
}

.mlosign-type-signature-wrap .mlosign-type-signature {
  width: 100% !important;
  padding-right: 118px !important;
  border: 1px solid #cbd5e1 !important;
  background:
    linear-gradient(90deg, rgba(239,246,255,.55), rgba(255,255,255,1)) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease !important;
}

.mlosign-type-signature-wrap .mlosign-type-signature:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 10px 22px rgba(15,23,42,.06) !important;
}

.mlosign-type-signature-wrap .mlosign-type-signature:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.14), 0 14px 28px rgba(37,99,235,.10) !important;
  background: #ffffff !important;
  outline: none !important;
}

.mlosign-type-edit-badge {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #eef2ff !important;
  color: #1e40af !important;
  border: 1px solid #c7d2fe !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  pointer-events: none !important;
  opacity: .92 !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.mlosign-type-signature-wrap .mlosign-type-signature:focus + .mlosign-type-edit-badge {
  opacity: 0 !important;
  transform: translateY(-50%) scale(.94) !important;
}

@media (max-width: 760px) {
  .mlosign-type-signature-label {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .mlosign-type-signature-hint {
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  .mlosign-type-signature-wrap .mlosign-type-signature {
    padding-right: 92px !important;
    min-height: 48px !important;
  }

  .mlosign-type-edit-badge {
    right: 8px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}


/* v1.4.31 forced Type Signature editable hint */
.mlosign-type-signature-label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 8px !important;
}

.mlosign-type-signature-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 900 !important;
}

.mlosign-type-signature-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #eff6ff, #ffffff) !important;
  border: 1px solid #bfdbfe !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.10) !important;
}

.mlosign-type-signature-hint::before {
  content: "✎" !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

.mlosign-type-signature-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

.mlosign-type-signature-wrap .mlosign-type-signature,
.mlosign-type-signature-wrap input[name="typed_signature"] {
  width: 100% !important;
  padding-right: 118px !important;
  border: 1px solid #cbd5e1 !important;
  background: linear-gradient(90deg, rgba(239,246,255,.62), #ffffff) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.mlosign-type-signature-wrap .mlosign-type-signature:hover,
.mlosign-type-signature-wrap input[name="typed_signature"]:hover {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 10px 22px rgba(15,23,42,.06) !important;
}

.mlosign-type-signature-wrap .mlosign-type-signature:focus,
.mlosign-type-signature-wrap input[name="typed_signature"]:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.14), 0 14px 28px rgba(37,99,235,.10) !important;
  background: #ffffff !important;
  outline: none !important;
}

.mlosign-type-edit-badge {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #eef2ff !important;
  color: #1e40af !important;
  border: 1px solid #c7d2fe !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.mlosign-type-signature-wrap .mlosign-type-signature:focus + .mlosign-type-edit-badge,
.mlosign-type-signature-wrap input[name="typed_signature"]:focus + .mlosign-type-edit-badge {
  opacity: 0 !important;
}

@media (max-width: 760px) {
  .mlosign-type-signature-label {
    gap: 8px !important;
  }

  .mlosign-type-signature-hint {
    width: 100% !important;
    font-size: 11px !important;
    padding: 7px 10px !important;
  }

  .mlosign-type-signature-wrap .mlosign-type-signature,
  .mlosign-type-signature-wrap input[name="typed_signature"] {
    padding-right: 92px !important;
    min-height: 48px !important;
  }

  .mlosign-type-edit-badge {
    right: 8px !important;
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}


/* v1.4.32 Type Signature malformed HTML cleanup support */
.mlosign-type-signature-wrap > .mlosign-type-edit-badge {
  display: inline-flex !important;
}

.mlosign-signature-modal-card > .mlosign-type-edit-badge,
.mlosign-radio + .mlosign-type-edit-badge {
  display: none !important;
}


/* v1.4.36 Typed signature one-line script font */
@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap');

.mlosign-rendered-typed-signature {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 4.1vw, 48px) !important;
  line-height: .82 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: .01em !important;

}

.mlosign-public-signature-render {
  overflow: hidden !important;
  white-space: nowrap !important;
}

.mlosign-public-sign-target.is-signed .mlosign-public-signature-render {
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 760px) {
  .mlosign-rendered-typed-signature {
    font-size: clamp(20px, 7.2vw, 38px) !important;
  }
}


/* v1.4.38 Public checkbox/radio coordinate precision */
.mlosign-public-checkbox,
.mlosign-public-radio {
  transform: none !important;
  padding: 0 !important;
}

.mlosign-public-checkbox input[type="checkbox"],
.mlosign-public-radio input[type="radio"] {
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
}

/* Keep sticker above without moving the actual control */
.mlosign-public-checkbox .mlosign-required-sticker,
.mlosign-public-radio .mlosign-required-sticker {
  left: 0 !important;
  transform: translateX(-35%) !important;
}

/* Signature/date preview should sit on the lower guide line of the placed rectangle */
.mlosign-public-signature-render {
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding-bottom: 0 !important;
}

.mlosign-public-date-target {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  line-height: 1 !important;
  padding-bottom: 0 !important;
}


/* v1.4.39 Signature preview + checkbox/radio target alignment */
.mlosign-public-checkbox,
.mlosign-public-radio {
  transform: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.mlosign-public-checkbox input[type="checkbox"],
.mlosign-public-radio input[type="radio"] {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  margin: 0 !important;
}

/* Keep sticker above, but don't move the real input */
.mlosign-public-checkbox .mlosign-required-sticker,
.mlosign-public-radio .mlosign-required-sticker {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* The signer must see the full typed signature, not a clipped piece */
.mlosign-public-sign-target,
.mlosign-public-signature-render {
  overflow: visible !important;
}

.mlosign-public-sign-target.is-signed .mlosign-public-signature-render {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 4px 1px 4px !important;
}

.mlosign-rendered-typed-signature {
  display: block !important;
  max-width: none !important;
  width: auto !important;
  min-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: .82 !important;
  font-size: clamp(28px, 4.6vw, 56px) !important;
}

@media (max-width: 760px) {
  .mlosign-rendered-typed-signature {
    font-size: clamp(24px, 8vw, 44px) !important;
  }
}


/* v1.4.40 Point coordinates + professional typed signature containment */
.mlosign-public-sign-target,
.mlosign-public-signature-render {
  overflow: hidden !important;
}

.mlosign-public-sign-target.is-signed .mlosign-public-signature-render {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 4px 2px 4px !important;
}

.mlosign-rendered-typed-signature {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .mlosign-rendered-typed-signature {
    font-size: 13px !important;
  }
}


/* v1.4.41 Final center-point model and contained signature preview */
.mlosign-public-checkbox,
.mlosign-public-radio {
  overflow: visible !important;
  padding: 0 !important;
  transform: none !important;
}

.mlosign-public-checkbox input[type="checkbox"],
.mlosign-public-radio input[type="radio"] {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
  margin: 0 !important;
  accent-color: #16a34a !important;
}

.mlosign-public-sign-target {
  overflow: hidden !important;
}

.mlosign-public-signature-render {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 5px 2px 5px !important;
  box-sizing: border-box !important;
}

.mlosign-rendered-typed-signature {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .mlosign-rendered-typed-signature {
    font-size: 13px !important;
  }
}


/* v1.4.42 force checkbox/radio visible input to the field center */
.mlosign-public-checkbox,
.mlosign-public-radio {
  overflow: visible !important;
  padding: 0 !important;
}

.mlosign-public-checkbox input[type="checkbox"],
.mlosign-public-radio input[type="radio"] {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: 13px !important;
  height: 13px !important;
  min-width: 13px !important;
  min-height: 13px !important;
}


/* v1.4.43 Fixed typed signature size */
.mlosign-public-sign-target {
  overflow: visible !important;
}

.mlosign-public-signature-render {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 0 4px 2px 4px !important;
  box-sizing: border-box !important;
}

.mlosign-rendered-typed-signature {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  font-size: 35px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  transform: none !important;
  letter-spacing: .01em !important;
}

/* Keep the actual signed field border from clipping long script ascenders/descenders. */
.mlosign-public-sign-target.is-signed {
  overflow: visible !important;
}

@media (max-width: 760px) {
  .mlosign-rendered-typed-signature {
    font-size: 18px !important;
    line-height: 1 !important;
  }
}


/* v1.4.45 Textbox (LOE) and Textbox (Forms) */
.mlosign-textbox-loe-field .mlosign-field-inner strong::after {
  content: "  multiline";
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(37,99,235,.10);
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mlosign-textbox-form-field {
  min-height: 28px !important;
}

.mlosign-textbox-form-field .mlosign-field-inner strong::after {
  content: "  single line";
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(16,185,129,.12);
  color: #047857;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mlosign-textbox-form-field .mlosign-field-resize-handle {
  cursor: ew-resize !important;
}

/* Public signer LOE multiline */
.mlosign-public-textbox-wrap {
  display: block !important;
  overflow: visible !important;
}

.mlosign-public-textbox-loe-wrap {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(37,99,235,.45);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15,23,42,.10);
}

.mlosign-public-textbox-loe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  resize: none !important;
  padding: 6px 7px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.92) !important;
  color: #111827 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-family: Arial, sans-serif !important;
  white-space: pre-wrap !important;
  overflow: auto !important;
  box-sizing: border-box !important;
}

.mlosign-textbox-loe-helper {
  position: absolute;
  right: 5px;
  bottom: -16px;
  font-size: 9px;
  line-height: 1;
  color: #64748b;
  background: rgba(255,255,255,.92);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 3px 6px;
  pointer-events: none;
}

/* Public signer Forms single-line */
.mlosign-public-textbox-form-wrap {
  background: transparent;
  border: 0;
  overflow: visible !important;
}

.mlosign-public-textbox-form {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 4px 2px 4px !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(37,99,235,.55) !important;
  outline: 0 !important;
  background: rgba(255,255,255,.68) !important;
  color: #111827 !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}

.mlosign-public-textbox-form:focus {
  background: none !important;

  border-radius: 0 !important;
}

.mlosign-textbox-form-warning {
  display: none;
  position: absolute;
  left: 0;
  bottom: -22px;
  z-index: 40;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(154,52,18,.14);
  white-space: nowrap;
  pointer-events: none;
}

.mlosign-public-textbox-form-wrap.has-overflow-warning .mlosign-textbox-form-warning {
  display: inline-flex;
}

@media (max-width: 760px) {
  .mlosign-public-textbox-loe {
    font-size: 11px !important;
    padding: 5px 6px !important;
  }

  .mlosign-public-textbox-form {
    font-size: 11px !important;
  }

  .mlosign-textbox-form-warning {
    font-size: 9px;
    bottom: -20px;
  }
}


/* v1.4.46 Mobile keyboard/focus fix for Textbox tools */
.mlosign-public-textbox-wrap,
.mlosign-public-textbox-wrap * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

.mlosign-public-textbox-loe,
.mlosign-public-textbox-form {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(37,99,235,.14) !important;
  caret-color: #1d4ed8 !important;
  cursor: text !important;
  z-index: 20 !important;
}

.mlosign-public-textbox-wrap {
  pointer-events: auto !important;
  z-index: 30 !important;
}


/* v1.4.47 stronger mobile textbox keyboard lock */
.mlosign-public-textbox-wrap {
  pointer-events: auto !important;
  z-index: 999 !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

.mlosign-public-textbox-loe,
.mlosign-public-textbox-form {
  position: absolute !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
  touch-action: auto !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  cursor: text !important;
}


/* v1.4.49 Borrower/coborrower editable signer selector */
.mlosign-signer-name-field {
  position: relative;
}
.mlosign-signer-name-field input[data-mlosign-signer-name] {
  padding-right: 34px;
}
.mlosign-signer-name-field::after {
  content: "⌄";
  position: absolute;
  right: 14px;
  bottom: 13px;
  font-size: 20px;
  font-weight: 900;
  color: #28364b;
  pointer-events: none;
}
.mlosign-signer-suggestions {
  position: absolute;
  z-index: 99999;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow: auto;
  background: #ffffff;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  padding: 8px;
}
.mlosign-signer-suggestion {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 11px;
  padding: 10px 11px;
  text-align: left;
  cursor: pointer;
  display: block;
}
.mlosign-signer-suggestion:hover,
.mlosign-signer-suggestion:focus {
  background: #eef5ff;
  outline: none;
}
.mlosign-signer-suggestion strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.25;
}
.mlosign-signer-suggestion span,
.mlosign-signer-suggestion-empty {
  display: block;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 3px;
}
.mlosign-signer-suggestion-empty {
  padding: 10px 11px;
}

.mlosign-remove-signer {
  background: -webkit-linear-gradient(45deg, #dd0303, #ff0000, #f63737);
  color: white;
  padding: 10px 11px;
}

/* v1.4.51 Hide placed-fields list in Prepare Document sidebar.
   Fields are managed directly on the PDF canvas. */


/* v1.4.52 Restore Signers & Fields add buttons.
   Hide only the list of placed fields, not the signer action panel. */
.mlosign-signer-field-actions,
.mlosign-signer-field-actions *,
.mlosign-signer-tools,
.mlosign-signer-tools *,
.mlosign-add-field-buttons,
.mlosign-add-field-buttons *,
[data-add-field],
[data-add-field] * {
  display: revert !important;
  visibility: visible !important;
}

button[data-add-field],
.mlosign-add-field,
.mlosign-field-add-btn {
  display: inline-flex !important;
  visibility: visible !important;
}



/* v1.4.53 Restore field add buttons in Signers & Fields.
   Only placed-field rows are hidden by JS; add buttons must always show. */
#mlosign-prepare-modal [data-add-field],
#mlosign-prepare-modal [data-add-field] *,
.mlosign-prepare-modal [data-add-field],
.mlosign-prepare-modal [data-add-field] *,
.mlosign-signer-field-actions,
.mlosign-signer-field-actions *,
.mlosign-signer-card [data-add-field],
.mlosign-signer-card [data-add-field] *,
.mlosign-fields-sidebar [data-add-field],
.mlosign-fields-sidebar [data-add-field] * {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#mlosign-prepare-modal .mlosign-signer-card,
#mlosign-prepare-modal .mlosign-signer-row,
#mlosign-prepare-modal .mlosign-signer-field-actions,
.mlosign-prepare-modal .mlosign-signer-card,
.mlosign-prepare-modal .mlosign-signer-row,
.mlosign-prepare-modal .mlosign-signer-field-actions {
  display: block !important;
  visibility: visible !important;
}

#mlosign-prepare-modal button[data-add-field],
.mlosign-prepare-modal button[data-add-field] {
  display: inline-flex !important;
}

/* v1.4.54: placed field rows are not rendered in JS; no display:none on #mlosign-field-manager-list. */


/* v1.4.55 Signers & Fields: do not render placed-field list.
   Original add buttons/classes are kept so design and drag behavior stay intact. */
#mlosign-field-manager-list .mlosign-manager-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#mlosign-field-manager-list .mlosign-field-source {
  display: inline-flex;
}


/* v1.4.56 Initials field */
.mlosign-initials-field .mlosign-field-inner strong {
  letter-spacing: .02em;
}

.mlosign-initials-field .mlosign-field-inner small {
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
}

.mlosign-public-initials-target {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 2px 1px 2px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .10em;
  color: #111827;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}


/* v1.4.57 Initials editor delete button visibility */
.mlosign-drag-field.mlosign-initials-field,
.mlosign-premium-field.mlosign-initials-field {
  overflow: visible !important;
}

.mlosign-initials-field .mlosign-field-delete-x,
.mlosign-initials-field .mlosign-field-delete-x-initials {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: -14px !important;
  right: -14px !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mlosign-initials-field .mlosign-field-inner {
  padding-right: 10px !important;
}

.mlosign-initials-field .mlosign-field-inner strong {
  font-size: 11px !important;
}

.mlosign-initials-field .mlosign-field-inner small {
  display: block !important;
  line-height: 1.1 !important;
}


/* v1.4.58 Compact Signers & Fields panel */
.mlosign-compact-tools-panel {
  display: grid;
  gap: 16px;
}

.mlosign-active-signer-card {
  border: 1px solid rgba(37, 99, 235, .16);
  border-left: 5px solid var(--signer-color, #2563eb);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.mlosign-active-signer-label,
.mlosign-toolbox-section-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

.mlosign-active-signer-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #ffffff;
  border: 1px solid #dbe6f7;
  border-radius: 14px;
  padding: 9px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.mlosign-active-signer-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
  flex: 0 0 auto;
}

.mlosign-active-signer-select {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #0f172a;
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
  min-width: 0;
}

.mlosign-active-signer-hint {
  margin-top: 9px;
  color: #64748b;
  font-size: 11px;
  line-height: 1.35;
}

.mlosign-active-signer-hint strong {
  color: #0f172a;
}

.mlosign-toolbox-section {
  border: 1px solid #e5edf8;
  background: #ffffff;
  border-radius: 18px;
  padding: 13px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .05);
}

.mlosign-toolbox-grid {
  display: grid;
  gap: 8px;
}

.mlosign-toolbox-button.mlosign-field-source {
  width: 100%;


  gap: 8px;
  justify-content: stretch;
  text-align: left;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--signer-color, #2563eb) 30%, #dbe6f7);
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--signer-color, #2563eb) 7%, #f8fbff) 100%);
  color: #0f172a;
  padding: 5px 10px;
  min-height: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
  cursor: grab;
}

.mlosign-toolbox-button.mlosign-field-source:hover {
  border-color: var(--signer-color, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(15, 23, 42, .10);
}

.mlosign-toolbox-button.mlosign-field-source:active {
  cursor: grabbing;
  transform: translateY(0);
}

.mlosign-toolbox-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;

  border-radius: 999px;
  background: var(--signer-color, #2563eb);
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.mlosign-toolbox-label {
  min-width: 0;
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mlosign-toolbox-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--signer-color, #2563eb) 12%, #eef4ff);
  color: var(--signer-color, #2563eb);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 4px 7px;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .mlosign-toolbox-button.mlosign-field-source {
    border-color: #dbe6f7;
    background: #f8fbff;
  }

  .mlosign-toolbox-drag {
    background: #eef4ff;
    color: #2563eb;
  }
}


/* v1.4.59 Manage Sent Document Phase 1 */
.mlosign-action-manage-sent {
  background: #eef6ff !important;
  border-color: #bfdbfe !important;
  color: #1d4ed8 !important;
}

.mlosign-manage-sent-mode #mlosign-send-prepared {
  background: linear-gradient(135deg, #0f766e, #2563eb) !important;
}

.mlosign-manage-sent-mode #mlosign-editor-result .mlosign-message {
  border-left-color: #0f766e;
}

.mlosign-manage-sent-mode .mlosign-editor-note::after {
  content: " Manage mode: existing signer links remain active.";
  color: #0f766e;
  font-weight: 800;
}


/* v1.4.60 Active signer dropdown refresh visibility */
.mlosign-active-signer-card {
  transition: border-color .18s ease, box-shadow .18s ease;
}

.mlosign-active-signer-card:focus-within {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .10), 0 12px 28px rgba(15, 23, 42, .06);
}


/* v1.4.61 Manage Sent Document Phase 2 */
.mlosign-manage-signer-admin {
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border-radius: 18px;
  padding: 13px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .05);
}

.mlosign-manage-signer-list {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.mlosign-manage-signer-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 6px;
  align-items: center;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  border-radius: 12px;
  padding: 8px;
}

.mlosign-manage-signer-name {
  font-size: 11px;
  font-weight: 900;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mlosign-manage-signer-status,
.mlosign-manage-signer-locked {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 4px 6px;
  background: #eef4ff;
  color: #2563eb;
}

.mlosign-manage-signer-locked {
  background: #ecfdf5;
  color: #047857;
}

.mlosign-remove-pending-signer {
  border: 0;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 10px;
  font-weight: 900;
  border-radius: 999px;
  padding: 5px 8px;
  cursor: pointer;
}

.mlosign-remove-pending-signer:hover {
  background: #fecaca;
}

.mlosign-add-pending-signer-box {
  border-top: 1px dashed #cbd5e1;
  padding-top: 10px;
}

.mlosign-add-pending-signer-box summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  color: #1d4ed8;
  margin-bottom: 8px;
}

.mlosign-add-pending-signer-grid {
  display: grid;
  gap: 8px;
}

.mlosign-add-pending-signer-grid input,
.mlosign-add-pending-signer-grid select {
  width: 100%;
  border: 1px solid #dbe6f7;
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 12px;
  outline: none;
}

.mlosign-add-pending-signer-grid input:focus,
.mlosign-add-pending-signer-grid select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}


/* v1.4.62 Manage mode send link after saving fields */
.mlosign-save-send-active-link {
  background: linear-gradient(135deg, #16a34a, #2563eb) !important;
}

.mlosign-send-signer-link {
  border: 0;
  background: #dcfce7;
  color: #15803d;
  font-size: 10px;
  font-weight: 900;
  border-radius: 999px;
  padding: 5px 8px;
  cursor: pointer;
}

.mlosign-send-signer-link:hover {
  background: #bbf7d0;
}


/* v1.4.63 Manage mode smart-save visual consistency */
.mlosign-manage-sent-mode .mlosign-drag-field {
  transition: box-shadow .16s ease, border-color .16s ease;
}


/* v1.4.64 Signed signer field lock */
.mlosign-signed-locked-field {
  cursor: not-allowed !important;
  opacity: .92;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, .20), 0 12px 26px rgba(15, 23, 42, .08) !important;
}

.mlosign-signed-locked-field .mlosign-field-inner {
  pointer-events: none !important;
}

.mlosign-signed-field-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .16);
  color: #047857;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.1;
  white-space: nowrap;
}

.mlosign-signed-locked-field .mlosign-field-delete-x,
.mlosign-signed-locked-field .mlosign-field-resize-handle {
  display: none !important;
}


/* v1.4.65 stable: START top-left + remove textbox bubbles only */
.mlosign-inline-next-start {
  z-index: 9999 !important;
}

.mlosign-fill-sticker {
  display: none !important;
}

/* Keep textbox placeholder visible and fields functional. */
.mlosign-public-textbox::placeholder {
  opacity: .9;
}


/* v1.4.66 stable: textbox overflow warning fixes */
.mlosign-public-textbox-form-wrap {
  overflow: visible;
}

.mlosign-public-textbox-form-wrap:not(.has-overflow-warning) .mlosign-textbox-form-warning {
  display: none !important;
}

.mlosign-public-textbox-form-wrap.has-overflow-warning .mlosign-textbox-form-warning {
  display: inline-flex;
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  z-index: 6;
  max-width: 100%;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 760px) {
  .mlosign-public-textbox-form-wrap.has-overflow-warning .mlosign-textbox-form-warning {
    top: calc(100% + 1px);
    left: 0;
    max-width: 115%;
    transform: scale(.72);
    transform-origin: top left;
    font-size: 10px !important;
    padding: 2px 6px !important;
    box-shadow: 0 4px 10px rgba(127,29,29,.12) !important;
  }
}


/* v1.4.67 stable: dynamic NEXT/FINISH placement */
.mlosign-inline-next-guide {
  max-width: 132px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .mlosign-inline-next-guide {
    max-width: 112px;
    transform: scale(.86);
    transform-origin: top left;
  }
}


/* v1.4.68 stable: sharper PDF canvas on mobile pinch zoom */
#mlosign-public-preview-canvas {
  image-rendering: auto !important;
}

@media (max-width: 760px) {
  #mlosign-public-preview-canvas {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}


/* v1.4.69 stable: clean radio guidance */
.mlosign-public-radio .mlosign-select-sticker:not(.mlosign-select-sticker-single) {
  display: none !important;
}

.mlosign-public-radio.needs-selection {
  overflow: visible !important;
}

.mlosign-radio-pulse-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #facc15;
  border: 2px solid #fff7ad;
  box-shadow: 0 0 0 0 rgba(250, 204, 21, .70);
  pointer-events: none;
  animation: mlosignRadioPulseDot 1.15s ease-out infinite;
  z-index: 4;
}

@keyframes mlosignRadioPulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, .70);
    transform: translate(-50%, -50%) scale(.80);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(250, 204, 21, 0);
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    transform: translate(-50%, -50%) scale(.80);
  }
}

.mlosign-public-radio.is-complete .mlosign-radio-pulse-dot {
  display: none !important;
}

.mlosign-select-sticker-single {
  z-index: 6 !important;
}

/* Keep radio guidance readable on mobile without adding extra bubbles. */
@media (max-width: 760px) {
  .mlosign-radio-pulse-dot {
    width: 10px;
    height: 10px;
    border-width: 1.5px;
  }

  .mlosign-select-sticker-single {
    transform: scale(.76);
    transform-origin: center bottom;
  }
}


/* v1.4.72: dynamic Prepare Document popovers */
.mlosign-checkbox-popover.mlosign-field-options-popover {
  position: absolute !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.mlosign-checkbox-popover.is-above::after,
.mlosign-checkbox-popover.is-below::before {
  content: "";
  position: absolute;
  left: 28px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-left: 1px solid rgba(148,163,184,.35);
  border-top: 1px solid rgba(148,163,184,.35);
  transform: rotate(45deg);
}

.mlosign-checkbox-popover.is-above::after {
  bottom: -8px;
  border-left: 0;
  border-top: 0;
  border-right: 1px solid rgba(148,163,184,.35);
  border-bottom: 1px solid rgba(148,163,184,.35);
}

.mlosign-checkbox-popover.is-below::before {
  top: -8px;
}


/* v1.4.74: public signer guide cleanup */
.mlosign-select-sticker,
.mlosign-select-sticker-single {
  /* Safety only. SELECT ONE is no longer rendered by JS. */
  display: none !important;
}

.mlosign-inline-next-finish {
  z-index: 999999 !important;
  pointer-events: auto !important;
}

.mlosign-public-sign-target .mlosign-signed-badge {
  z-index: 5;
}

@media (max-width: 760px) {
  .mlosign-inline-next-finish {
    transform: scale(.92);
    transform-origin: top left;
  }
}


/* v1.4.75: Apply Your Signature real flush accordion */
.mlosign-signature-methods-accordion {
  margin: 14px 0 12px;
  border-top: 1px solid rgba(148, 163, 184, .40);
}

.mlosign-signature-accordion-section {
  border-bottom: 1px solid rgba(148, 163, 184, .40);
}

.mlosign-signature-accordion-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: #111827;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.mlosign-signature-method-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-weight: 800;
}

.mlosign-signature-method-dot {
  width: 16px;
  height: 16px;
  border: 2px solid #94a3b8;
  border-radius: 999px;
  background: #fff;
  position: relative;
  flex: 0 0 auto;
}

.mlosign-signature-accordion-section.is-open .mlosign-signature-method-dot {
  border-color: #2563eb;
}

.mlosign-signature-accordion-section.is-open .mlosign-signature-method-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #2563eb;
  border-radius: 999px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mlosign-signature-method-arrow {
  color: #64748b;
  font-size: 20px;
  line-height: 1;
  transition: transform .18s ease;
}

.mlosign-signature-accordion-section.is-open .mlosign-signature-method-arrow {
  transform: rotate(180deg);
}

.mlosign-signature-accordion-content {
  display: none !important;
  padding: 0 0 16px;
}

.mlosign-signature-accordion-section.is-open > .mlosign-signature-accordion-content {
  display: block !important;
}

.mlosign-signature-method-hidden-radio {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

.mlosign-signature-accordion-content .mlosign-type-signature-hint {
  display: block;
  margin: 0 0 8px;
}

.mlosign-signature-accordion-content .mlosign-type-signature-wrap {
  margin-top: 0;
}

.mlosign-signature-accordion-content .mlosign-sign-box {
  margin-top: 0;
}

.mlosign-signature-accordion-content #mlosign-signature-image {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 760px) {
  .mlosign-signature-accordion-toggle {
    padding: 14px 0;
  }

  .mlosign-signature-accordion-content {
    padding: 0 0 14px;
  }

  .mlosign-signature-method-left {
    font-size: 15px;
  }

  .mlosign-signature-accordion-content .mlosign-sign-box canvas {
    width: 100% !important;
    max-width: 100%;
    height: auto;
  }
}


/* v1.4.76: polished Apply Your Signature accordion */
.mlosign-signature-methods-accordion {
  margin: 16px 0 14px !important;
  border: 0 !important;
  display: grid;
  gap: 10px;
}

.mlosign-signature-accordion-section {
  border: 1px solid rgba(148, 163, 184, .34) !important;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mlosign-signature-accordion-section.is-open {
  border-color: rgba(37, 99, 235, .55) !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, .14);
}

.mlosign-signature-accordion-toggle {
  padding: 15px 16px !important;
  min-height: 54px;
  border: 0 !important;
  background: transparent !important;
}

.mlosign-signature-method-left {
  gap: 0 !important;
  font-size: 15px;
  letter-spacing: -.01em;
}

.mlosign-signature-method-dot {
  display: none !important;
}

.mlosign-signature-method-left::before {
  content: "▸";
  color: #64748b;
  font-size: 15px;
  margin-right: 10px;
  transition: transform .18s ease, color .18s ease;
}

.mlosign-signature-accordion-section.is-open .mlosign-signature-method-left::before {
  transform: rotate(90deg);
  color: #2563eb;
}

.mlosign-signature-method-arrow {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #eef2ff;
  color: #2563eb !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
}

.mlosign-signature-accordion-section.is-open .mlosign-signature-method-arrow {
  transform: rotate(180deg);
  background: #dbeafe;
}

.mlosign-signature-accordion-content {
  padding: 0 16px 16px !important;
  background: transparent;
}

.mlosign-signature-accordion-section:not(.is-open) .mlosign-signature-accordion-content {
  display: none !important;
}

.mlosign-signature-accordion-section.is-open > .mlosign-signature-accordion-content {
  display: block !important;
}

.mlosign-signature-accordion-section.is-disabled-signature-method {
  opacity: .58;
}

.mlosign-signature-accordion-section.is-disabled-signature-method .mlosign-signature-accordion-toggle {
  cursor: not-allowed;
}

.mlosign-signature-modal-card {
  overflow: auto;
}

@media (max-width: 760px) {
  .mlosign-signature-methods-accordion {
    gap: 9px;
    margin-top: 14px !important;
  }

  .mlosign-signature-accordion-section {
    border-radius: 14px;
  }

  .mlosign-signature-accordion-toggle {
    padding: 14px 14px !important;
    min-height: 52px;
  }

  .mlosign-signature-accordion-content {
    padding: 0 14px 14px !important;
  }

  .mlosign-signature-method-left {
    font-size: 15px;
  }

  .mlosign-public-sign-target,
  .mlosign-public-sign-target * {
    touch-action: manipulation;
  }
}


/* v1.4.78: dynamic document more panel positioning */
.mlosign-doc-more-wrap.is-open .mlosign-doc-more-panel {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mlosign-doc-more-panel {
  z-index: 999999 !important;
  box-sizing: border-box !important;
}

.mlosign-doc-more-panel.is-above,
.mlosign-doc-more-panel.is-below {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
}

@media (max-width: 700px) {
  .mlosign-doc-more-panel.is-above,
  .mlosign-doc-more-panel.is-below {
    left: 14px !important;
    right: auto !important;
    top: auto;
    width: calc(100vw - 28px) !important;
    grid-template-columns: 1fr !important;
  }
}


/* v1.4.79: document more panel open visibility fix */
.mlosign-doc-more-wrap.is-open .mlosign-doc-more-panel {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 999999 !important;
}

.mlosign-doc-more-panel.is-above,
.mlosign-doc-more-panel.is-below {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  .mlosign-doc-more-panel.is-above,
  .mlosign-doc-more-panel.is-below {
    left: 14px !important;
    right: auto !important;
    width: calc(100vw - 28px) !important;
    grid-template-columns: 1fr !important;
  }
}


/* v1.4.80: force-visible native doc-more panel */
.mlosign-doc-more-panel.mlosign-doc-more-native-open {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  z-index: 999999 !important;
  right: auto !important;
  bottom: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  .mlosign-doc-more-panel.mlosign-doc-more-native-open {
    grid-template-columns: 1fr !important;
  }
}


/* v1.4.81: keep doc-more panel open after pointer release */
.mlosign-doc-more-wrap.is-open .mlosign-doc-more-panel.mlosign-doc-more-native-open {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* v1.4.83: responsive public signer next arrow guide */
.mlosign-inline-next-guide.mlosign-inline-next-next {
  min-width: 42px !important;
  width: 42px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .34), 0 0 0 8px rgba(37, 99, 235, .10) !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

.mlosign-inline-next-guide.mlosign-inline-next-next span {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
}

.mlosign-inline-next-guide.mlosign-inline-next-next:hover,
.mlosign-inline-next-guide.mlosign-inline-next-next:focus {
  transform: translateY(-1px) scale(1.04);
}

@media (max-width: 760px) {
  .mlosign-inline-next-guide.mlosign-inline-next-next {
    min-width: 38px !important;
    width: 38px !important;
    height: 32px !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .34), 0 0 0 7px rgba(37, 99, 235, .10) !important;
  }

  .mlosign-inline-next-guide.mlosign-inline-next-next span {
    font-size: 20px !important;
  }
}


/* v1.4.84: cleaner single-arrow guide */
.mlosign-inline-next-guide.mlosign-inline-next-next {
  min-width: 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #2563eb !important;
  color: #fff !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .28) !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  line-height: 1 !important;
}

.mlosign-inline-next-guide.mlosign-inline-next-next strong {
  display: none !important;
}

.mlosign-inline-next-guide.mlosign-inline-next-next span {
  display: block !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  transform: translateY(-1px);
}

.mlosign-inline-next-guide.mlosign-inline-next-next::before,
.mlosign-inline-next-guide.mlosign-inline-next-next::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 760px) {
  .mlosign-inline-next-guide.mlosign-inline-next-next {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-width: 2px !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .25) !important;
  }

  .mlosign-inline-next-guide.mlosign-inline-next-next span {
    font-size: 20px !important;
  }
}


/* v1.4.85: radio group guide fix marker */
.mlosign-public-radio.mlosign-public-focus-pulse {
  box-shadow: 0 0 0 6px rgba(37, 99, 235, .14) !important;
}


/* v1.4.89: iPhone/iPad public signer visual fixes */
.mlosign-public-textbox-form-wrap,
.mlosign-public-textbox-loe-wrap {
  background: rgba(250, 204, 21, .14) !important;
  border-color: rgba(245, 158, 11, .55) !important;
}

.mlosign-public-textbox-form {
  /*
   * iOS Safari has a different internal input baseline.
   * These values prevent the typed text from being vertically clipped.
   */
  -webkit-appearance: none !important;
  appearance: none !important;
  top: 0 !important;
  bottom: auto !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 5px !important;
  border-radius: 0 !important;
  background: rgba(250, 204, 21, .14) !important;
  border-bottom: 1px solid rgba(245, 158, 11, .65) !important;
  line-height: normal !important;
  vertical-align: middle !important;
  overflow: visible !important;
  transform: translateZ(0);
}

.mlosign-public-textbox-loe {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: rgba(250, 204, 21, .12) !important;
  line-height: 1.35 !important;
  padding: 5px 7px !important;
  overflow: auto !important;
  transform: translateZ(0);
}

.mlosign-public-textbox-form:focus,
.mlosign-public-textbox-loe:focus {
  background: rgba(250, 204, 21, .18) !important;
}

/* Better iOS keyboard/text rendering without changing final PDF output. */
@supports (-webkit-touch-callout: none) {
  .mlosign-public-textbox-form {
    font-size: 16px !important;
    line-height: normal !important;
    padding: 0 5px !important;
    height: 100% !important;
    min-height: 26px !important;
    display: block !important;
  }

  .mlosign-public-textbox-loe {
    font-size: 15px !important;
    line-height: 1.35 !important;
    padding: 5px 7px !important;
  }
}

@media (max-width: 760px) {
  .mlosign-public-textbox-form {
    font-size: 15px !important;
    line-height: normal !important;
    min-height: 24px !important;
    padding: 0 5px !important;
  }

  .mlosign-public-textbox-loe {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}

/*
 * v1.4.89: keep the dynamic NEXT guide, but render it as a simple blue arrow:
 * no circle, no background, no border. The JS positioning logic remains unchanged.
 */
.mlosign-inline-next-guide.mlosign-inline-next-next {
  min-width: 34px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 4px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  background-image: none !important;
  color: #2563eb !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  line-height: 1 !important;
  text-shadow: 0 2px 6px rgba(37, 99, 235, .18);
}

.mlosign-inline-next-guide.mlosign-inline-next-next strong,
.mlosign-inline-next-guide.mlosign-inline-next-next::before,
.mlosign-inline-next-guide.mlosign-inline-next-next::after {
  content: none !important;
  display: none !important;
}

.mlosign-inline-next-guide.mlosign-inline-next-next span {
  display: block !important;
  font-size: 42px !important;
  line-height: .8 !important;
  font-weight: 950 !important;
  transform: none !important;
  color: #2563eb !important;
}

.mlosign-inline-next-guide.mlosign-inline-next-next:hover,
.mlosign-inline-next-guide.mlosign-inline-next-next:focus {
  transform: scale(1.04) !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  .mlosign-inline-next-guide.mlosign-inline-next-next {
    min-width: 32px !important;
    padding: 0 3px !important;
  }

  .mlosign-inline-next-guide.mlosign-inline-next-next span {
    font-size: 40px !important;
  }
}


/* v1.4.90: clean public signer text fields + red pulsing placeholder */
.mlosign-public-textbox-form-wrap,
.mlosign-public-textbox-loe-wrap {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.mlosign-public-textbox-form,
.mlosign-public-textbox-loe,
.mlosign-public-textbox-form:focus,
.mlosign-public-textbox-loe:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Keep entered text neutral; only the empty-field guidance is red. */
.mlosign-public-textbox-form,
.mlosign-public-textbox-loe {
  color: #111827 !important;
}

.mlosign-public-textbox-form::placeholder,
.mlosign-public-textbox-loe::placeholder {
  color: #dc2626 !important;
  opacity: .95;
  animation: mlosignTextboxPlaceholderPulse 1.35s ease-in-out infinite;
}

/* Extra WebKit coverage for iPhone/iPad Safari. */
.mlosign-public-textbox-form::-webkit-input-placeholder,
.mlosign-public-textbox-loe::-webkit-input-placeholder {
  color: #dc2626 !important;
  opacity: .95;
  animation: mlosignTextboxPlaceholderPulse 1.35s ease-in-out infinite;
}

@keyframes mlosignTextboxPlaceholderPulse {
  0%, 100% { opacity: .52; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mlosign-public-textbox-form::placeholder,
  .mlosign-public-textbox-loe::placeholder,
  .mlosign-public-textbox-form::-webkit-input-placeholder,
  .mlosign-public-textbox-loe::-webkit-input-placeholder {
    animation: none !important;
    opacity: .95 !important;
  }
}


/* v1.4.91: stronger override for inherited yellow textbox skin */
.mlosign-public-extra-field-wrap .mlosign-public-textbox,
.mlosign-public-extra-field-wrap .mlosign-public-textbox-form,
.mlosign-public-extra-field-wrap .mlosign-public-textbox-loe,
.mlosign-public-extra-field-wrap .mlosign-public-textbox:focus,
.mlosign-public-extra-field-wrap .mlosign-public-textbox-form:focus,
.mlosign-public-extra-field-wrap .mlosign-public-textbox-loe:focus {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.mlosign-public-extra-field-wrap.mlosign-public-textbox-form-wrap,
.mlosign-public-extra-field-wrap.mlosign-public-textbox-loe-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* v1.4.92: stronger dynamic blue NEXT arrow */
.mlosign-inline-next-guide.mlosign-inline-next-next {
  min-width: 44px !important;
  padding: 0 5px !important;
  text-shadow: none !important;
  filter: none !important;
}

.mlosign-inline-next-guide.mlosign-inline-next-next span {
  display: inline-block !important;
  font-size: 54px !important;
  line-height: .76 !important;
  font-weight: 1000 !important;
  color: #2563eb !important;
  -webkit-text-stroke: .35px rgba(30, 64, 175, .45);
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 3px 8px rgba(37, 99, 235, .30),
    0 7px 14px rgba(37, 99, 235, .18) !important;
  filter: drop-shadow(0 2px 5px rgba(37,99,235,.28));
  transform-origin: center center !important;
  animation: mlosignNextArrowPresence 1.15s ease-in-out infinite;
}

.mlosign-inline-next-guide.mlosign-inline-next-next:hover span,
.mlosign-inline-next-guide.mlosign-inline-next-next:focus span {
  animation-duration: .9s !important;
}

@keyframes mlosignNextArrowPresence {
  0%, 100% {
    transform: translateX(0) scale(1);
    opacity: .92;
  }
  50% {
    transform: translateX(2px) scale(1.08);
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .mlosign-inline-next-guide.mlosign-inline-next-next {
    min-width: 40px !important;
    padding: 0 4px !important;
  }

  .mlosign-inline-next-guide.mlosign-inline-next-next span {
    font-size: 50px !important;
    -webkit-text-stroke: .30px rgba(30, 64, 175, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mlosign-inline-next-guide.mlosign-inline-next-next span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* v1.5.0: Digital Templates */
.mlosign-template-field select { width:100%; }
.mlosign-template-field small,
.mlosign-template-pdf-note { display:block; margin-top:6px; color:#64748b; font-size:12px; }
.mlosign-pdf-upload-field.is-template-disabled { opacity:.72; }
.mlosign-pdf-upload-field.is-template-disabled input[type="file"] { background:#f8fafc; cursor:not-allowed; }

.mlosign-template-hidden-stage { display:none !important; }
body.mlosign-public-template-mode { background:#f4f7fb !important; overflow:auto !important; }
body.mlosign-public-template-mode .mlosign-public-wide { max-width:980px !important; margin:24px auto !important; }
body.mlosign-public-template-mode .mlosign-signing-card { min-height:0 !important; position:relative !important; inset:auto !important; }
body.mlosign-public-template-mode .mlosign-submit-bar { position:sticky; bottom:0; z-index:100; }

.mlosign-digital-template {
  max-width:860px;
  margin:22px auto 110px;
  padding:clamp(18px, 4vw, 42px);
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:20px;
  box-shadow:0 18px 50px rgba(15,23,42,.08);
}
.mlosign-template-header { text-align:center; margin-bottom:28px; }
.mlosign-template-kicker { display:inline-block; margin-bottom:8px; color:#2563eb; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.mlosign-template-header h3 { margin:0 0 10px; color:#0f172a; font-size:clamp(21px,3.4vw,30px); letter-spacing:.01em; }
.mlosign-template-header p { max-width:720px; margin:0 auto; color:#64748b; font-size:13px; line-height:1.55; }
.mlosign-template-section { margin:0 0 22px; }
.mlosign-template-label { display:block; margin-bottom:10px; color:#334155; font-size:13px; font-weight:800; }
.mlosign-template-radio-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.mlosign-template-radio {
  position:relative !important; inset:auto !important; width:auto !important; height:auto !important;
  display:flex !important; align-items:center; gap:9px; padding:13px 14px;
  background:#fff !important; border:1px solid #cbd5e1 !important; border-radius:12px !important;
  cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mlosign-template-radio:has(input:checked) { border-color:#2563eb !important; background:#eff6ff !important; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
.mlosign-template-radio input[type="radio"] {
  position:static !important; opacity:1 !important; appearance:auto !important; -webkit-appearance:radio !important;
  width:18px !important; height:18px !important; margin:0 !important; flex:0 0 auto;
}
.mlosign-template-radio span { color:#0f172a; font-size:13px; font-weight:700; }
.mlosign-template-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:17px 14px; }
.mlosign-template-control { display:block; min-width:0; }
.mlosign-template-control.mlosign-template-full { grid-column:1 / -1; }
.mlosign-template-control.mlosign-template-city { grid-column:auto; }
.mlosign-template-control > span { display:block; margin:0 0 7px; color:#334155; font-size:12px; font-weight:800; }
.mlosign-template-control > small { display:block; margin-top:5px; color:#64748b; font-size:10px; line-height:1.35; }
.mlosign-template-control .mlosign-public-textbox,
.mlosign-template-control .mlosign-public-textbox-form {
  position:static !important; inset:auto !important; width:100% !important; height:46px !important; min-height:46px !important;
  padding:0 13px !important; box-sizing:border-box !important;
  border:1px solid #cbd5e1 !important; border-radius:10px !important;
  background:#fff !important; color:#0f172a !important; box-shadow:none !important;
  font:500 15px/1.2 Arial,sans-serif !important;
}
.mlosign-template-control .mlosign-public-textbox:focus,
.mlosign-template-control .mlosign-public-textbox-form:focus { border-color:#2563eb !important; box-shadow:0 0 0 3px rgba(37,99,235,.10) !important; outline:0 !important; }
.mlosign-template-control .mlosign-public-textbox::placeholder { color:#94a3b8 !important; animation:none !important; opacity:1 !important; }
.mlosign-template-legal { margin:26px 0 22px; padding:18px; background:#f8fafc; border-radius:14px; color:#334155; font-size:12px; line-height:1.55; }
.mlosign-template-legal p { margin:0 0 8px; }
.mlosign-template-legal p:last-child { margin-bottom:0; font-weight:700; }
.mlosign-template-sign-row { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:28px; align-items:end; }
.mlosign-template-signature-target {
  position:relative !important; inset:auto !important; width:100% !important; min-height:92px !important;
  display:flex !important; flex-direction:column; align-items:flex-start !important; justify-content:flex-end !important;
  padding:12px 8px 7px !important; background:#fff !important; border:0 !important; border-bottom:1.5px solid #334155 !important;
  border-radius:0 !important; box-shadow:none !important; color:#0f172a !important; cursor:pointer;
}
.mlosign-template-signature-target .mlosign-public-signature-render { width:100%; min-height:48px; display:flex; align-items:flex-end; justify-content:flex-start; font-size:34px; }
.mlosign-template-signature-target .mlosign-preview-placeholder { color:#dc2626 !important; font:800 14px/1 Arial,sans-serif !important; letter-spacing:.04em; }
.mlosign-template-signature-target small,
.mlosign-template-date-box small { display:block; margin-top:6px; color:#475569; font-size:10px; font-weight:700; }
.mlosign-template-date-box { min-height:92px; display:flex; flex-direction:column; justify-content:flex-end; padding:12px 8px 7px; border-bottom:1.5px solid #334155; }
.mlosign-template-date-box strong { color:#0f172a; font-size:16px; }

@media (max-width:760px) {
  body.mlosign-public-template-mode .mlosign-public-wide { margin:0 !important; border-radius:0 !important; }
  .mlosign-digital-template { margin:10px 8px 105px; padding:20px 16px 24px; border-radius:15px; }
  .mlosign-template-radio-grid { grid-template-columns:1fr 1fr; }
  .mlosign-template-grid { grid-template-columns:1fr 1fr; gap:15px 10px; }
  .mlosign-template-control.mlosign-template-full { grid-column:1 / -1; }
  .mlosign-template-control.mlosign-template-city { grid-column:1 / -1; }
  .mlosign-template-sign-row { grid-template-columns:1fr; gap:18px; }
  .mlosign-template-date-box { min-height:64px; }
  .mlosign-template-control .mlosign-public-textbox,
  .mlosign-template-control .mlosign-public-textbox-form { font-size:16px !important; height:48px !important; min-height:48px !important; }
}


/* v1.5.3: Template #1 smart guidance and professional validation */
.mlosign-template-smart-guide {
  position:sticky; top:10px; z-index:90; display:flex; align-items:center; gap:12px;
  width:max-content; max-width:100%; margin:0 0 22px; padding:7px 10px 7px 7px;
  background:rgba(255,255,255,.96); border:1px solid #dbeafe; border-radius:999px;
  box-shadow:0 10px 28px rgba(37,99,235,.12); backdrop-filter:blur(10px);
}
.mlosign-template-guide-button {
  display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; padding:9px 14px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; cursor:pointer;
  font:800 12px/1 Arial,sans-serif; letter-spacing:.04em; box-shadow:0 7px 16px rgba(37,99,235,.24);
}
.mlosign-template-guide-arrow { font-size:21px; line-height:.7; animation:mlosignTemplateArrow 1.05s ease-in-out infinite; }
.mlosign-template-guide-status { color:#475569; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@keyframes mlosignTemplateArrow { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }

.mlosign-template-guide-step { position:relative; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.mlosign-template-guide-step.is-guide-active { z-index:3; }
.mlosign-template-guide-step.is-guide-active::before {
  content:'→'; position:absolute; left:-42px; top:50%; transform:translateY(-50%); z-index:5;
  color:#2563eb; font:900 34px/.8 Arial,sans-serif; text-shadow:0 4px 10px rgba(37,99,235,.24);
  animation:mlosignTemplateFieldArrow .95s ease-in-out infinite; pointer-events:none;
}
.mlosign-template-guide-step.is-guide-active .mlosign-public-textbox,
.mlosign-template-guide-step.is-guide-active .mlosign-public-textbox-form,
.mlosign-template-section.is-guide-active .mlosign-template-radio-grid {
  border-color:#2563eb !important; box-shadow:0 0 0 4px rgba(37,99,235,.10),0 12px 28px rgba(37,99,235,.10) !important;
}
.mlosign-template-signature-target.is-guide-active { box-shadow:0 10px 24px rgba(37,99,235,.12) !important; }
@keyframes mlosignTemplateFieldArrow { 0%,100%{transform:translate(-2px,-50%);opacity:.72} 50%{transform:translate(5px,-50%);opacity:1} }

.mlosign-template-guide-step.is-complete:not(.is-guide-active)::after {
  content:'✓'; position:absolute; right:8px; top:6px; width:19px; height:19px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#16a34a; color:#fff; font:900 12px/1 Arial,sans-serif; box-shadow:0 4px 10px rgba(22,163,74,.18); pointer-events:none;
}
.mlosign-template-section.is-complete::after { top:-2px; }
.mlosign-template-guide-step.is-invalid .mlosign-public-textbox,
.mlosign-template-guide-step.is-invalid .mlosign-public-textbox-form { border-color:#dc2626 !important; box-shadow:0 0 0 3px rgba(220,38,38,.08) !important; }
.mlosign-template-validation { min-height:14px; color:#dc2626 !important; font-size:10px !important; font-weight:700; }
.mlosign-template-submit-ready .mlosign-btn { box-shadow:0 0 0 5px rgba(37,99,235,.12),0 12px 30px rgba(37,99,235,.22); }

@media(max-width:760px){
  .mlosign-template-smart-guide { top:6px; margin-bottom:18px; }
  .mlosign-template-guide-status { max-width:180px; }
  .mlosign-template-guide-step.is-guide-active::before { left:-24px; font-size:28px; }
}


/* v1.5.5: safer card-brand advisory + featured Templates discovery area */
.mlosign-template-guide-step.is-warning .mlosign-public-textbox,
.mlosign-template-guide-step.is-warning .mlosign-public-textbox-form {
  border-color:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.10) !important;
}
.mlosign-template-validation.is-warning { color:#b45309 !important; }

.mlosign-template-discovery {
  position:relative;
  overflow:hidden;
  padding:15px 16px 13px !important;
  border:1px solid #bfdbfe;
  border-radius:16px;
  background:linear-gradient(135deg,#f8fbff 0%,#eff6ff 58%,#f5f3ff 100%);
  box-shadow:0 8px 22px rgba(37,99,235,.08);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.mlosign-template-discovery::after {
  content:''; position:absolute; right:-42px; top:-52px; width:145px; height:145px; border-radius:50%;
  background:radial-gradient(circle,rgba(96,165,250,.18),rgba(96,165,250,0) 68%); pointer-events:none;
}
.mlosign-template-discovery:focus-within {
  border-color:#60a5fa; box-shadow:0 0 0 4px rgba(37,99,235,.08),0 12px 30px rgba(37,99,235,.11);
}
.mlosign-grid .mlosign-template-field-heading {
  position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin:0 0 3px;
}
.mlosign-grid .mlosign-template-field-title {
  display:block; margin:0; color:#0f172a; font-size:14px; font-weight:900; letter-spacing:.01em;
}
.mlosign-grid .mlosign-template-new-badge {
  display:inline-flex; align-items:center; justify-content:center; width:auto; margin:0; padding:3px 7px;
  border-radius:999px; background:#2563eb; color:#fff; font-size:9px; line-height:1; font-weight:900; letter-spacing:.08em;
  box-shadow:0 4px 10px rgba(37,99,235,.22); animation:mlosignTemplateNewPulse 2.2s ease-in-out infinite;
}
.mlosign-grid .mlosign-template-feature-copy {
  position:relative; z-index:1; display:block; margin:0 0 10px; color:#475569; font-size:11px; font-weight:600;
}
.mlosign-grid .mlosign-template-select-shell { position:relative; z-index:1; display:block; margin:0; }
.mlosign-grid .mlosign-template-select-icon {
  position:absolute; left:13px; top:50%; transform:translateY(-50%); z-index:2; margin:0;
  color:#2563eb; font-size:15px; line-height:1; pointer-events:none;
}
.mlosign-template-discovery #mlosign-template-select {
  position:relative; z-index:1; height:46px; padding-left:38px !important; padding-right:38px !important;
  border:1px solid #93c5fd !important; background:#fff !important; color:#0f172a; font-weight:700;
  box-shadow:0 4px 12px rgba(37,99,235,.06);
}
.mlosign-template-discovery #mlosign-template-select:hover { border-color:#60a5fa !important; }
.mlosign-template-discovery #mlosign-template-help {
  position:relative; z-index:1; display:block; margin:8px 0 0; color:#3b5f8a; font-size:10px; line-height:1.35; font-weight:600;
}
@keyframes mlosignTemplateNewPulse {
  0%,100% { transform:scale(1); box-shadow:0 4px 10px rgba(37,99,235,.20); }
  50% { transform:scale(1.045); box-shadow:0 5px 15px rgba(37,99,235,.30); }
}
@media (prefers-reduced-motion: reduce) { .mlosign-grid .mlosign-template-new-badge { animation:none !important; } }
@media (max-width:760px) { .mlosign-template-discovery { padding:13px 14px 12px !important; } }


/* v1.5.6: template submit validation — clear field-by-field guidance */
.mlosign-template-submit-validation {
  display:block;
  margin-top:6px;
  color:#b91c1c !important;
  font-size:11px !important;
  line-height:1.35;
  font-weight:750;
}

.mlosign-template-guide-step.mlosign-template-submit-invalid .mlosign-public-textbox,
.mlosign-template-guide-step.mlosign-template-submit-invalid .mlosign-public-textbox-form,
.mlosign-template-section.mlosign-template-submit-invalid .mlosign-template-radio-grid,
.mlosign-template-signature-target.mlosign-template-submit-invalid {
  border-color:#dc2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.10), 0 8px 20px rgba(220,38,38,.06) !important;
}

.mlosign-template-submit-attention {
  animation: mlosignTemplateSubmitAttention .72s ease-in-out 2;
}

@keyframes mlosignTemplateSubmitAttention {
  0%,100% { transform:translateX(0); }
  35% { transform:translateX(3px); }
  65% { transform:translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .mlosign-template-submit-attention { animation:none !important; }
}


/* v1.5.7: template signer-mode guidance */
.mlosign-template-signer-mode-note {
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:4px;
  padding:6px 10px;
  border:1px solid #bbf7d0;
  border-radius:999px;
  background:#f0fdf4;
  color:#166534;
  font-size:11px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}
.mlosign-template-signer-mode-note[hidden] { display:none !important; }
.mlosign-template-signer-lock {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#16a34a;
  color:#fff;
  font-size:11px;
  font-weight:900;
  box-shadow:0 3px 8px rgba(22,163,74,.20);
}
.mlosign-single-signer-template .mlosign-signers-head {
  align-items:center;
}
@media (max-width:760px) {
  .mlosign-template-signer-mode-note {
    margin-left:0;
    margin-top:7px;
    white-space:normal;
  }
  .mlosign-single-signer-template .mlosign-signers-title-wrap {
    flex-wrap:wrap;
  }
}

/* v1.6.0 - Borrowers' Certification and Authorization digital template */
.mlosign-template-borrowers-auth .mlosign-template-header {
  margin-bottom: 18px;
}

.mlosign-auth-legal {
  border: 1px solid #dbe4f0;
  border-radius: 18px;
  padding: 22px 24px;
  background: #fff;
  color: #26354d;
  line-height: 1.62;
  box-shadow: 0 10px 28px rgba(15,23,42,.05);
}

.mlosign-auth-legal h4 {
  margin: 4px 0 10px;
  color: #111827;
  font-size: 14px;
  letter-spacing: .04em;
  text-align: center;
}

.mlosign-auth-legal h4:not(:first-child) {
  margin-top: 22px;
}

.mlosign-auth-legal p {
  margin: 0 0 11px;
  font-size: 13px;
}

.mlosign-auth-identity {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(190px, .7fr);
  gap: 14px;
  margin: 18px 0;
}

.mlosign-auth-identity > div {
  border: 1px solid #cfe0fb;
  border-radius: 14px;
  background: #f8fbff;
  padding: 14px 16px;
}

.mlosign-auth-meta-label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mlosign-auth-identity strong {
  color: #111827;
  font-size: 15px;
}

.mlosign-auth-sign-row {
  border-top: 1px solid #dbe4f0;
  padding-top: 18px;
}

.mlosign-auth-signature-target.mlosign-auth-guide-active {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 5px rgba(37,99,235,.10), 0 16px 34px rgba(37,99,235,.14) !important;
  animation: mlosignAuthSignAttention 1.15s ease-in-out infinite;
}

@keyframes mlosignAuthSignAttention {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.mlosign-fixed-role-template .mlosign-signer-row[data-template-role="borrower"] .mlosign-signer-color {
  background: #2563eb !important;
}

.mlosign-fixed-role-template .mlosign-signer-row[data-template-role="coborrower"] .mlosign-signer-color {
  background: #16a34a !important;
}

@media (max-width: 760px) {
  .mlosign-auth-legal { padding: 17px 16px; border-radius: 14px; }
  .mlosign-auth-identity { grid-template-columns: 1fr; }
  .mlosign-auth-sign-row { gap: 12px; }
}


/* v1.6.2 - Template #2 signed-state completion marker */
.mlosign-auth-signature-target {
  position: relative;
}

.mlosign-auth-signature-target.is-complete::after {
  content: '✓';
  position: absolute;
  right: 8px;
  top: 6px;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  font: 900 12px/1 Arial, sans-serif;
  box-shadow: 0 4px 10px rgba(22,163,74,.18);
  pointer-events: none;
  z-index: 8;
}

.mlosign-auth-signature-target.is-complete .mlosign-preview-placeholder {
  display: none !important;
}


/* v1.6.5 - Template #2 legal copy mirrors the source Borrowers Authorization form */
.mlosign-auth-legal-original-copy {
  font-family: Georgia, 'Times New Roman', serif;
  color: #111827;
  line-height: 1.50;
  text-align: left;
}

.mlosign-auth-legal-original-copy h4 {
  margin: 2px 0 16px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mlosign-auth-legal-original-copy h4:not(:first-child) {
  margin-top: 30px;
}

.mlosign-auth-legal-original-copy .mlosign-auth-intro {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.mlosign-auth-numbered-list {
  margin: 0;
  padding-left: 28px;
}

.mlosign-auth-numbered-list li {
  padding-left: 7px;
  margin: 0 0 17px;
  font-size: 14px;
  line-height: 1.50;
}

.mlosign-auth-numbered-list li:last-child {
  margin-bottom: 0;
}

.mlosign-auth-company-line {
  display: inline;
  padding: 0 8px 1px;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid #111827;
}

@media (max-width: 760px) {
  .mlosign-auth-legal-original-copy {
    line-height: 1.45;
  }

  .mlosign-auth-legal-original-copy h4 {
    font-size: 14px;
    margin-bottom: 13px;
  }

  .mlosign-auth-legal-original-copy h4:not(:first-child) {
    margin-top: 24px;
  }

  .mlosign-auth-legal-original-copy .mlosign-auth-intro,
  .mlosign-auth-numbered-list li {
    font-size: 13px;
  }

  .mlosign-auth-numbered-list {
    padding-left: 22px;
  }

  .mlosign-auth-numbered-list li {
    padding-left: 4px;
    margin-bottom: 14px;
  }

  .mlosign-auth-company-line {
    white-space: normal;
    padding-left: 4px;
    padding-right: 4px;
  }
}


/* v1.6.6 - stronger send cues for digital templates */
#mlosign-send-form .mlosign-template-send-button {
  position: relative;
  min-width: 210px;
  box-shadow: 0 10px 24px rgba(37,99,235,.20);
}

#mlosign-send-form .mlosign-template-send-button::after {
  content: '→';
  display: inline-block;
  margin-left: 9px;
  font-size: 18px;
  line-height: 0;
  vertical-align: -1px;
  transition: transform .18s ease;
}

#mlosign-send-form .mlosign-template-send-button:hover::after {
  transform: translateX(3px);
}

.mlosign-submit-bar.mlosign-template-final-ready {
  border-color: rgba(22,163,74,.26) !important;
  background: linear-gradient(90deg, rgba(240,253,244,.86), rgba(255,255,255,.98)) !important;
  box-shadow: 0 12px 32px rgba(15,23,42,.08), 0 0 0 1px rgba(22,163,74,.06) !important;
}

.mlosign-submit-bar.mlosign-template-final-ready > div strong {
  color: #166534 !important;
}

.mlosign-submit-bar .mlosign-template-submit-callout {
  position: relative;
  min-width: 238px;
  box-shadow: 0 12px 30px rgba(37,99,235,.26) !important;
}

.mlosign-submit-bar .mlosign-template-submit-callout::after {
  content: '→';
  display: inline-block;
  margin-left: 9px;
  font-size: 19px;
  line-height: .7;
}

.mlosign-submit-bar .mlosign-template-submit-callout-run {
  animation: mlosignTemplateSubmitCallout 1.05s ease-in-out 2;
}

@keyframes mlosignTemplateSubmitCallout {
  0%,100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 12px 30px rgba(37,99,235,.26), 0 0 0 0 rgba(37,99,235,.22) !important;
  }
  50% {
    transform: translateY(-2px) scale(1.035);
    box-shadow: 0 16px 36px rgba(37,99,235,.32), 0 0 0 8px rgba(37,99,235,0) !important;
  }
}

@media (max-width:760px) {
  #mlosign-send-form .mlosign-template-send-button,
  .mlosign-submit-bar .mlosign-template-submit-callout {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mlosign-submit-bar .mlosign-template-submit-callout-run { animation: none !important; }
  #mlosign-send-form .mlosign-template-send-button::after { transition: none !important; }
}


/* v1.6.8: restore explicit SIGN HERE placeholder inside template signature box */
.mlosign-template-signature-target .mlosign-public-signature-render {
  justify-content: center;
}

.mlosign-template-signature-target.is-complete .mlosign-public-signature-render {
  justify-content: flex-start;
}

.mlosign-template-signature-target .mlosign-preview-placeholder {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  color: #dc2626 !important;
  font: 800 14px/1 Arial, sans-serif !important;
  letter-spacing: .04em;
}


/* v1.7.3: signature modal redesign from accordion to responsive tabs */
.mlosign-signature-modal-card {
  width: min(760px, calc(100vw - 28px));
}

.mlosign-signature-methods-tabs {
  margin: 18px 0 14px;
}

.mlosign-signature-tablist {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: linear-gradient(180deg, #eef4ff, #e8f0ff);
  border: 1px solid rgba(96, 165, 250, .34);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.mlosign-signature-tab-toggle {
  appearance: none;
  border: 1px solid rgba(37, 99, 235, .22);
  background: #ffffff;
  color: #164e63;
  border-radius: 12px;
  min-height: 50px;
  min-width: 110px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.mlosign-signature-tab-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .09);
}

.mlosign-signature-tab-toggle:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .22);
  outline-offset: 2px;
}

.mlosign-signature-tab-toggle.is-active {
  background: linear-gradient(180deg, #145b86, #0f6a98);
  border-color: #0f4f73;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(20, 91, 134, .28);
}

.mlosign-signature-tab-toggle.is-disabled-signature-method,
.mlosign-signature-tab-toggle:disabled {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.mlosign-signature-tab-toggle-icon {
  min-width: 76px;
  padding: 0 14px;
}

.mlosign-signature-camera-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mlosign-signature-camera-icon svg {
  width: 30px;
  height: 30px;
}

.mlosign-signature-tab-panels {
  margin-top: 14px;
}

.mlosign-signature-tab-panel {
  display: none;
  border: 1px solid rgba(96, 165, 250, .34);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
  padding: 16px;
}

.mlosign-signature-tab-panel.is-active {
  display: block;
}

.mlosign-signature-upload-panel {
  display: grid;
  gap: 10px;
}

.mlosign-signature-upload-prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: #0f172a;
}

.mlosign-signature-upload-prompt::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow: 0 6px 14px rgba(37, 99, 235, .24);
}

.mlosign-signature-tab-panel #mlosign-signature-image {
  width: 100%;
  max-width: 100%;
}

.mlosign-signature-modal-actions {
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.mlosign-signature-modal-actions .mlosign-signature-scope-inline {
  order: 1;
  flex: 1 1 300px;
  margin: 0;
}

.mlosign-signature-modal-actions #mlosign-signature-modal-cancel {
  order: 2;
}

.mlosign-signature-modal-actions #mlosign-apply-signature {
  order: 3;
}

.mlosign-sign-scope {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

@media (max-width: 760px) {
  .mlosign-signature-modal-card {
    width: min(96vw, 720px) !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .mlosign-signature-modal-card h3 {
    font-size: 22px;
  }

  .mlosign-signature-tablist {
    display: grid;
    grid-template-columns: 1fr 1fr 78px;
    width: 100%;
    gap: 8px;
    padding: 7px;
  }

  .mlosign-signature-tab-toggle {
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    font-size: 15px;
  }

  .mlosign-signature-tab-toggle-icon {
    min-width: 0;
  }

  .mlosign-signature-tab-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .mlosign-signature-tab-panel .mlosign-sign-box canvas {
    width: 100% !important;
    max-width: 100%;
    height: auto;
  }

  .mlosign-sign-scope {
    grid-template-columns: 1fr;
  }

  .mlosign-signature-modal-actions {
    gap: 12px;
  }

  .mlosign-signature-modal-actions .mlosign-signature-scope-inline,
  .mlosign-signature-modal-actions #mlosign-signature-modal-cancel,
  .mlosign-signature-modal-actions #mlosign-apply-signature {
    width: 100%;
    flex: 1 1 100%;
  }

  .mlosign-signature-modal-actions #mlosign-signature-modal-cancel,
  .mlosign-signature-modal-actions #mlosign-apply-signature {
    min-height: 48px;
  }
}


/* v1.7.4: strict visibility behavior for signature method tabs */
#mlosign-signature-modal .mlosign-signature-tab-panel:not(.is-active) {
  display: none !important;
}

#mlosign-signature-modal .mlosign-signature-tab-panel.is-active {
  display: block !important;
}


/* v1.7.6: upload-or-camera signature image actions */
.mlosign-signature-image-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mlosign-signature-image-action {
  min-height: 72px;
  border: 1px solid rgba(37, 99, 235, .26);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .06);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.mlosign-signature-image-action:hover {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, .55);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .12);
  background: #f8fbff;
}

.mlosign-signature-image-action-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf2ff;
  color: #1d4ed8;
  font-size: 18px;
  font-weight: 900;
}

.mlosign-signature-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mlosign-signature-image-status {
  margin-top: 10px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 560px) {
  .mlosign-signature-image-actions {
    grid-template-columns: 1fr;
  }
  .mlosign-signature-image-action {
    min-height: 58px;
  }
}


/* v1.7.7: keep SIGN HERE hit target stable on touch/mobile input.
   The attention cue may still pulse via shadow, but it must not physically
   move under the finger while a tap is being completed. */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .mlosign-auth-signature-target.mlosign-auth-guide-active {
    animation: mlosignAuthSignAttentionTouch 1.15s ease-in-out infinite !important;
  }

  @keyframes mlosignAuthSignAttentionTouch {
    0%, 100% {
      transform: none;
      box-shadow: 0 0 0 4px rgba(37,99,235,.08), 0 12px 26px rgba(37,99,235,.10);
    }
    50% {
      transform: none;
      box-shadow: 0 0 0 7px rgba(37,99,235,.12), 0 16px 32px rgba(37,99,235,.16);
    }
  }

  .mlosign-public-sign-target,
  .mlosign-template-signature-target,
  .mlosign-auth-signature-target {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
  }
}


/* v1.7.8: real camera preview/capture inside the signature modal */
.mlosign-signature-image-action {
  font: inherit;
}

.mlosign-signature-camera-stage {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, .28);
  border-radius: 18px;
  background: #f8fbff;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.mlosign-signature-camera-live,
#mlosign-signature-camera-preview {
  position: relative;
  width: 100%;
  max-height: 360px;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
}

#mlosign-signature-camera-video {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  background: #0f172a;
}

#mlosign-signature-camera-preview {
  display: block;
  object-fit: contain;
  background: #fff;
}

.mlosign-signature-camera-guide {
  position: absolute;
  inset: 16%;
  border: 2px dashed rgba(255,255,255,.82);
  border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(2,6,23,.18);
  pointer-events: none;
}

.mlosign-signature-camera-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}

.mlosign-signature-camera-controls .mlosign-btn,
.mlosign-signature-camera-controls .mlosign-btn-light {
  min-height: 42px;
}

@media (max-width: 560px) {
  .mlosign-signature-camera-stage {
    padding: 9px;
    border-radius: 15px;
  }

  .mlosign-signature-camera-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mlosign-signature-camera-controls .mlosign-btn,
  .mlosign-signature-camera-controls .mlosign-btn-light {
    width: 100%;
    min-height: 46px;
    background: #0369a1;
    color: #ffffff;
  }
}


/* v1.7.9: deterministic camera capture controls */
#mlosign-signature-camera-stage .is-hidden,
#mlosign-signature-camera-stage [hidden] {
  display: none !important;
}

#mlosign-signature-camera-preview:not(.is-hidden) {
  display: block !important;
}

#mlosign-retake-signature-photo:not(.is-hidden),
#mlosign-use-signature-photo:not(.is-hidden) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

#mlosign-use-signature-photo:not(.is-hidden) {
  background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
}

@media (max-width: 560px) {
  #mlosign-retake-signature-photo:not(.is-hidden),
  #mlosign-use-signature-photo:not(.is-hidden) {
    display: flex !important;
    width: 100%;
  }
}

/* v1.8.0: maximize usable width for Digital Templates on phones without losing the card look */
@media (max-width: 760px) {
  /* Neutralize Astra/page wrapper gutters only while the public Digital Template signer is active. */
  body.mlosign-public-template-mode .site-content,
  body.mlosign-public-template-mode #content,
  body.mlosign-public-template-mode .ast-container,
  body.mlosign-public-template-mode .site-main,
  body.mlosign-public-template-mode .content-area,
  body.mlosign-public-template-mode article,
  body.mlosign-public-template-mode .entry-content,
  body.mlosign-public-template-mode .entry-content > .wp-block-group,
  body.mlosign-public-template-mode .entry-content > .wp-block-group > .wp-block-group__inner-container {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.mlosign-public-template-mode .mlosign-signer,
  body.mlosign-public-template-mode .mlosign-public-card.mlosign-public-wide,
  body.mlosign-public-template-mode .mlosign-signing-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Preserve a small phone-safe gutter while using nearly all available width. */
  body.mlosign-public-template-mode .mlosign-digital-template {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin: 8px 6px 105px !important;
    padding: 16px 12px 22px !important;
    box-sizing: border-box !important;
  }

  /* Borrower Authorization legal copy needs the most horizontal breathing room. */
  body.mlosign-public-template-mode .mlosign-template-borrowers-auth .mlosign-auth-legal {
    padding: 14px 10px !important;
    border-radius: 14px !important;
  }

  body.mlosign-public-template-mode .mlosign-template-borrowers-auth .mlosign-auth-numbered-list {
    padding-left: 20px !important;
  }

  body.mlosign-public-template-mode .mlosign-template-borrowers-auth .mlosign-auth-numbered-list li {
    padding-left: 2px !important;
  }

  /* Keep the sticky submit action aligned with the wider form. */
  body.mlosign-public-template-mode .mlosign-submit-bar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

/* Extra-tight phones: retain a clean 4px outer gutter instead of re-compressing the form. */
@media (max-width: 420px) {
  body.mlosign-public-template-mode .mlosign-digital-template {
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.mlosign-public-template-mode .mlosign-template-borrowers-auth .mlosign-auth-legal {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* v1.9.0 - Generated Document workflow / VOE selector */
.mlosign-generated-template-panel{
  margin:18px 0 4px;padding:20px;border:1px solid #dbe7f5;border-radius:22px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);box-shadow:0 18px 46px rgba(15,23,42,.07);
}
.mlosign-generated-template-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:17px;border-bottom:1px solid #e7eef7;}
.mlosign-generated-template-head h3{margin:7px 0 5px;font-size:20px;color:#0f172a;}
.mlosign-generated-template-head p{margin:0;color:#64748b;font-weight:650;}
.mlosign-generated-template-badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;background:#e0f2fe;color:#0369a1;font-size:10px;font-weight:950;letter-spacing:.08em;}
.mlosign-generated-no-signature{flex:0 0 auto;border:1px solid #bbf7d0;background:#ecfdf5;color:#15803d;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:900;}
.mlosign-generated-step{padding:19px 0 3px;}
.mlosign-generated-step + .mlosign-generated-step{margin-top:7px;border-top:1px dashed #dbe3ef;}
.mlosign-generated-step-title{display:flex;align-items:center;gap:11px;margin-bottom:13px;}
.mlosign-generated-step-title>span{width:30px;height:30px;border-radius:10px;background:#0f5f8c;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:950;box-shadow:0 8px 18px rgba(15,95,140,.22);}
.mlosign-generated-step-title strong{display:block;color:#0f172a;font-size:14px;}
.mlosign-generated-step-title small{display:block;color:#64748b;margin-top:2px;font-weight:650;}
.mlosign-voe-group-grid,.mlosign-voe-employment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.mlosign-voe-group-card,.mlosign-voe-employment-card{position:relative;text-align:left;border:1px solid #dbe3ef;background:#fff;border-radius:16px;padding:13px 38px 13px 13px;min-height:88px;cursor:pointer;transition:.17s ease;box-shadow:0 8px 20px rgba(15,23,42,.045);}
.mlosign-voe-group-card:hover,.mlosign-voe-employment-card:hover{background: transparent; transform:translateY(-1px);border-color:#93c5fd;box-shadow:0 12px 25px rgba(37,99,235,.10);}
.mlosign-voe-group-card.is-selected,.mlosign-voe-employment-card.is-selected{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 3px rgba(37,99,235,.10),0 12px 26px rgba(37,99,235,.12);}
.mlosign-voe-group-code,.mlosign-voe-employment-code{display:inline-flex;border-radius:8px;padding:4px 7px;background:#eef2ff;color:#3730a3;font-size:10px;font-weight:950;letter-spacing:.05em;margin-bottom:7px;}
.mlosign-voe-group-card strong,.mlosign-voe-employment-card strong{display:block;color:#0f172a;font-size:13px;line-height:1.25;}
.mlosign-voe-group-card small,.mlosign-voe-employment-card small{display:block;margin-top:5px;color:#64748b;font-size:11px;font-weight:700;}
.mlosign-voe-select-check{position:absolute;right:12px;top:12px;width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#16a34a;color:#fff;font-size:11px;font-weight:950;opacity:0;transform:scale(.75);transition:.16s ease;}
.is-selected>.mlosign-voe-select-check{opacity:1;transform:scale(1);}
.mlosign-voe-employment-card.is-incomplete{opacity:.58;cursor:not-allowed;}
.mlosign-voe-person-section{margin-top:13px;}
.mlosign-voe-person-heading{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.mlosign-voe-person-heading>span{font-size:9px;font-weight:950;letter-spacing:.08em;color:#475569;background:#f1f5f9;border-radius:999px;padding:5px 8px;}
.mlosign-voe-person-heading strong{font-size:12px;color:#334155;}
.mlosign-generated-loading,.mlosign-generated-empty{grid-column:1/-1;border:1px dashed #cbd5e1;border-radius:14px;padding:16px;text-align:center;color:#64748b;background:#fff;font-weight:750;}
.mlosign-generated-empty.compact{padding:11px;text-align:left;font-size:12px;}
.mlosign-voe-ready{margin-top:18px;border:1px solid #bbf7d0;background:linear-gradient(180deg,#f0fdf4,#ecfdf5);border-radius:18px;padding:14px;display:flex;align-items:flex-start;gap:12px;}
.mlosign-voe-ready-icon{width:34px;height:34px;flex:0 0 auto;border-radius:999px;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:950;box-shadow:0 8px 18px rgba(22,163,74,.22);}
.mlosign-voe-ready-copy{min-width:0;flex:1;}.mlosign-voe-ready-copy>strong{display:block;color:#166534;margin-bottom:9px;}
.mlosign-voe-ready-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.mlosign-voe-ready-details span{border:1px solid rgba(134,239,172,.8);background:#fff;border-radius:11px;padding:8px 9px;min-width:0;}
.mlosign-voe-ready-details small{display:block;color:#64748b;font-size:9px;text-transform:uppercase;font-weight:900;letter-spacing:.05em;}
.mlosign-voe-ready-details b{display:block;margin-top:3px;color:#0f172a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mlosign-generated-download-button{background:linear-gradient(135deg,#0f5f8c,#0b7a9f)!important;box-shadow:0 12px 25px rgba(15,95,140,.25)!important;}

@media(max-width:900px){
  .mlosign-voe-group-grid,.mlosign-voe-employment-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:620px){
  .mlosign-generated-template-panel{padding:14px;border-radius:18px;}
  .mlosign-generated-template-head{flex-direction:column;gap:9px;}
  .mlosign-generated-no-signature{align-self:flex-start;}
  .mlosign-voe-group-grid,.mlosign-voe-employment-grid{grid-template-columns:1fr;}
  .mlosign-voe-ready-details{grid-template-columns:1fr;}
  .mlosign-generated-step-title{align-items:flex-start;}
}


/* v1.9.1 - Generated documents in Documents table */
.mlosign-generated-employment-name{display:block;margin-top:4px;color:#64748b;font-size:12px;font-weight:600;}
.mlosign-generated-recipient{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mlosign-generated-status-pill{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#ecfdf5;border:1px solid #bbf7d0;color:#047857;font-size:10px;font-weight:800;letter-spacing:.05em;}
.mlosign-status.generated{background:#ecfdf5!important;border-color:#bbf7d0!important;color:#047857!important;}

/* v1.10.0: MLOform generated-document workspace */
.mloform-app .mloform-intro{margin:-4px 0 18px;color:#64748b;font-weight:600;}
.mloform-app .mloform-template-grid{grid-template-columns:minmax(280px,720px);}
.mloform-app .mloform-documents-note{margin:3px 0 0;color:#64748b;font-size:12px;font-weight:600;}
.mloform-app .mlosign-card-head>div h3{margin-bottom:0;}
@media(max-width:760px){.mloform-app .mloform-template-grid{grid-template-columns:1fr;}}


/* v1.10.5 Prepare Document drawing annotations */
#mlosign-annotation-canvas{position:absolute;inset:0;z-index:4;display:block;pointer-events:none;touch-action:none;cursor:crosshair;}
#mlosign-editor-modal.mlosign-drawing-active #mlosign-annotation-canvas{pointer-events:auto!important;}
#mlosign-editor-modal.mlosign-drawing-active #mlosign-page-frame{pointer-events:none!important;}
.mlosign-drawing-panel{margin-top:16px;padding:14px;border:1px solid #dbe3ef;border-radius:16px;background:#fff;}
.mlosign-field-group-label{font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:10px;}
.mlosign-drawing-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.mlosign-drawing-tool{border:1px solid #dbe3ef;border-radius:10px;background:#f8fafc;color:#0f172a;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:900;cursor:pointer;}
.mlosign-drawing-tool.is-active{background:#eff6ff;border-color:#60a5fa;color:#1d4ed8;box-shadow:0 0 0 2px rgba(37,99,235,.08);}
.mlosign-drawing-options{display:grid;grid-template-columns:1fr 86px;gap:8px;margin-top:10px;align-items:end;}
.mlosign-drawing-options label{font-size:10px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.05em;}
.mlosign-drawing-options label span{display:block;margin-bottom:4px;}
#mlosign-drawing-size{width:100%;border:1px solid #dbe3ef;border-radius:9px;padding:7px;background:#fff;}
#mlosign-drawing-color{width:100%;height:34px;padding:2px;border:1px solid #dbe3ef;border-radius:9px;background:#fff;}
.mlosign-drawing-swatches{display:flex;gap:7px;margin-top:9px;}
.mlosign-drawing-swatches button{width:24px;height:24px;border-radius:999px;border:2px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #cbd5e1;cursor:pointer;}
.mlosign-drawing-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;}
.mlosign-drawing-actions button{border:1px solid #dbe3ef;border-radius:9px;background:#fff;min-height:34px;font-size:10px;font-weight:900;cursor:pointer;}
#mlosign-drawing-clear{grid-column:1/-1;color:#b91c1c;border-color:#fecaca;background:#fff7f7;}
.mlosign-drawing-help{font-size:10px;line-height:1.35;color:#64748b;margin:9px 0 0;}
#mlosign-public-annotation-canvas{position:absolute;inset:0;z-index:2;display:block;pointer-events:none!important;touch-action:pan-x pan-y pinch-zoom!important;}
#mlosign-public-preview-layer{z-index:4!important;}


/* v1.11.2 - California Addendum mobile-first digital signer experience */
.mlosign-template-california-addendum .mlosign-template-header { margin-bottom:18px; }
.mlosign-california-company {
  margin:0 0 14px; padding:18px 20px; border:1px solid #d9e5f5; border-radius:16px;
  background:linear-gradient(135deg,#f8fbff,#fff); text-align:center;
}
.mlosign-california-company span,
.mlosign-california-loan-info span {
  display:block; margin-bottom:5px; color:#64748b; font-size:10px; font-weight:900;
  letter-spacing:.06em; text-transform:uppercase;
}
.mlosign-california-company strong { color:#111827; font-size:clamp(20px,3.5vw,28px); font-family:Georgia,'Times New Roman',serif; font-weight:600; }
.mlosign-california-loan-info {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 18px;
}
.mlosign-california-loan-info > div {
  min-width:0; padding:14px 16px; border:1px solid #dbe4f0; border-radius:14px; background:#f8fafc;
}
.mlosign-california-loan-info .mlosign-california-info-wide { grid-column:1 / -1; }
.mlosign-california-loan-info strong { display:block; color:#111827; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.mlosign-california-notice { margin:0 0 18px; }
.mlosign-california-notice ol { margin:8px 0 0 22px; padding:0; }
.mlosign-california-notice li { margin:0 0 10px; font-size:13px; line-height:1.55; }
.mlosign-california-ack { margin:22px 0 0 !important; padding-top:16px; border-top:1px solid #e2e8f0; color:#111827; }
.mlosign-california-signer-info { margin-top:18px; }
.mlosign-california-sign-row { margin-top:4px; }
.mlosign-california-signature-target.mlosign-california-guide-active {
  border-color:#2563eb !important;
  box-shadow:0 0 0 5px rgba(37,99,235,.10),0 16px 34px rgba(37,99,235,.14) !important;
  animation:mlosignAuthSignAttention 1.15s ease-in-out infinite;
}
@media(max-width:760px){
  .mlosign-california-company { padding:15px 14px; }
  .mlosign-california-loan-info { grid-template-columns:1fr; gap:10px; }
  .mlosign-california-loan-info .mlosign-california-info-wide { grid-column:auto; }
  .mlosign-california-loan-info > div { padding:13px 14px; }
  .mlosign-california-notice li { font-size:12.5px; }
  .mlosign-california-sign-row { gap:12px; }
}


/* v1.12.0 Pre-Approval Letter generated-template preview */
.mloform-preapproval-dear-row{margin-top:12px;padding-top:10px;border-top:1px dashed #dbe3ef;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;}
.mloform-preapproval-dear-row small{color:#64748b;font-size:10px;font-weight:950;letter-spacing:.05em;text-transform:uppercase;}
.mloform-preapproval-dear-row strong{color:#0f172a;font-size:13px;}