/**
 * EquaSign signer page — standalone styles (theme-independent).
 *
 * The signer page renders full-screen, outside the site theme, so it carries
 * its own tokens on the .equasign-signer root (never :root, to stay isolated).
 * Palette + spirit follow the EquaSuite charter (accent #1981DE, deep blue
 * #0C3A66, light blue #34BFFF, night #000D1C). Every class name and behaviour
 * of the original sheet is preserved — this is a visual harmonisation only.
 */

.equasign-signer {
	/* Charter tokens. */
	--equasign-blue:        #1981DE;
	--equasign-blue-dark:   #0C3A66;
	--equasign-blue-light:  #34BFFF;
	--equasign-night:       #000D1C;
	--equasign-blue-hover:  #156fc0;

	--equasign-surface:     #ffffff;
	--equasign-bg:          #f4f6f9;
	--equasign-border:      #e3e8ef;
	--equasign-border-strong:#cfd8e3;
	--equasign-text:        #1f2d3d;
	--equasign-muted:       #5b6b7f;
	--equasign-faint:       #8a99ab;

	--equasign-ok:          #00833f;
	--equasign-warn:        #b5651d;
	--equasign-error:       #d63638;

	--equasign-radius:      12px;
	--equasign-radius-sm:   8px;
	--equasign-shadow:      0 1px 2px rgba(12,58,102,.04), 0 6px 20px rgba(12,58,102,.07);

	margin: 0;
	padding: 0;
	background: var(--equasign-bg);
	color: var(--equasign-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.equasign-header {
	background: var(--equasign-surface);
	border-bottom: 1px solid var(--equasign-border);
	border-top: 3px solid var(--equasign-blue);
	padding: 24px 20px;
	text-align: center;
}

.equasign-header h1 { margin: 0 0 4px; font-size: 22px; color: var(--equasign-blue-dark); letter-spacing: -.3px; }
.equasign-sub { margin: 0; color: var(--equasign-muted); }

.equasign-main {
	max-width: 960px;
	margin: 0 auto;
	padding: 20px;
}

.equasign-doc {
	background: var(--equasign-surface);
	border: 1px solid var(--equasign-border);
	border-radius: var(--equasign-radius);
	box-shadow: var(--equasign-shadow);
	padding: 18px;
	margin-bottom: 20px;
}

.equasign-doc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}
.equasign-doc-head h2 { margin: 0; font-size: 17px; color: var(--equasign-blue-dark); }

.equasign-fullscreen {
	background: var(--equasign-bg);
	border: 1px solid var(--equasign-border-strong);
	border-radius: var(--equasign-radius-sm);
	padding: 5px 12px;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
	color: var(--equasign-blue-dark);
	transition: border-color .15s, color .15s;
}
.equasign-fullscreen:hover { border-color: var(--equasign-blue); color: var(--equasign-blue); }

.equasign-viewer {
	width: 100%;
	background: var(--equasign-surface);
	border: 1px solid var(--equasign-border-strong);
	border-radius: var(--equasign-radius-sm);
	overflow: hidden;
}
.equasign-viewer iframe {
	width: 100%;
	height: 75vh;
	min-height: 520px;
	border: 0;
	background: #fff;
	display: block;
}
/* In fullscreen, the iframe fills the whole screen. */
.equasign-viewer:fullscreen { border: 0; border-radius: 0; }
.equasign-viewer:fullscreen iframe { height: 100vh; min-height: 100vh; }

@media (max-width: 600px) {
	.equasign-viewer iframe { height: 65vh; min-height: 360px; }
}

/* Document-type presentation block + per-type viewer stack (P6d). The viewer
   dimensions come from the type/placeholder cascade and are applied inline on
   each iframe, so here we defer to that inline height (no floor that would
   override a smaller configured size). */
.equasign-presentation {
	max-width: 960px;
	margin: 0 auto 22px;
	color: var(--equasign-text);
}
.equasign-viewer-stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.equasign-doc-view {
	margin: 0 auto;
	width: 100%;
}
.equasign-viewer-stack .equasign-viewer iframe {
	height: 620px;      /* fallback; the inline per-type height wins */
	min-height: 0;
}
.equasign-signatures { margin-top: 8px; }

.equasign-checkboxes { margin: 14px 0; }
.equasign-checkbox-row { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; }
.equasign-checkbox-row em { color: var(--equasign-error); font-style: normal; }

.equasign-sign-area { margin-top: 14px; }

.equasign-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.equasign-tab {
	background: var(--equasign-bg);
	border: 1px solid var(--equasign-border-strong);
	border-radius: var(--equasign-radius-sm);
	padding: 6px 14px;
	cursor: pointer;
	font-size: 14px;
	color: var(--equasign-blue-dark);
	transition: background .15s, border-color .15s, color .15s;
}
.equasign-tab.is-active { background: var(--equasign-blue); color: #fff; border-color: var(--equasign-blue); }

.equasign-canvas {
	width: 100%;
	max-width: 600px;
	height: 160px;
	border: 1px dashed var(--equasign-border-strong);
	border-radius: var(--equasign-radius-sm);
	background: #fff;
	touch-action: none;
	display: block;
}

.equasign-clear, .equasign-link {
	background: none;
	border: none;
	color: var(--equasign-blue);
	cursor: pointer;
	padding: 6px 0;
	font-size: 13px;
	text-decoration: underline;
}

.equasign-typed {
	width: 100%;
	max-width: 600px;
	padding: 10px;
	border: 1px solid var(--equasign-border-strong);
	border-radius: var(--equasign-radius-sm);
	font-size: 16px;
	color: var(--equasign-text);
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.equasign-typed:focus { border-color: var(--equasign-blue); box-shadow: 0 0 0 3px rgba(25,129,222,.13); }
.equasign-preview {
	min-height: 60px;
	font-size: 40px;
	color: var(--equasign-night);
	font-family: "Brush Script MT", "Segoe Script", cursive;
}

.equasign-finalize {
	background: var(--equasign-surface);
	border: 1px solid var(--equasign-border);
	border-radius: var(--equasign-radius);
	box-shadow: var(--equasign-shadow);
	padding: 18px;
}

.equasign-note { color: var(--equasign-muted); font-size: 13px; margin-top: 0; }

.equasign-otp { margin: 14px 0; }
.equasign-otp-channel {
	border: 1px solid var(--equasign-border-strong);
	border-radius: var(--equasign-radius-sm);
	padding: 10px 14px;
	margin-bottom: 12px;
}
.equasign-otp-channel legend { font-weight: 600; padding: 0 6px; color: var(--equasign-blue-dark); }
.equasign-otp-channel label { display: block; margin: 6px 0; }
.equasign-otp-input { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.equasign-otp-input input {
	padding: 10px;
	font-size: 18px;
	letter-spacing: 4px;
	border: 1px solid var(--equasign-border-strong);
	border-radius: var(--equasign-radius-sm);
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.equasign-otp-input input:focus { border-color: var(--equasign-blue); box-shadow: 0 0 0 3px rgba(25,129,222,.13); }

.equasign-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.equasign-btn {
	border: 1px solid var(--equasign-blue);
	background: var(--equasign-surface);
	color: var(--equasign-blue);
	border-radius: var(--equasign-radius-sm);
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.equasign-btn:hover { border-color: var(--equasign-blue-hover); }
.equasign-btn:active { transform: translateY(1px); }
.equasign-btn:disabled { opacity: .6; cursor: default; }
.equasign-btn-primary { background: var(--equasign-blue); color: #fff; box-shadow: 0 2px 8px rgba(25,129,222,.28); }
.equasign-btn-primary:hover { background: var(--equasign-blue-hover); color: #fff; }
.equasign-btn-danger { border-color: var(--equasign-error); color: var(--equasign-error); background: var(--equasign-surface); }
.equasign-btn-danger:hover { background: #fdecea; }

.equasign-message { margin-top: 14px; font-weight: 600; min-height: 1.4em; }
.equasign-message.equasign-ok { color: var(--equasign-ok); }
.equasign-message.equasign-error { color: var(--equasign-error); }
.equasign-message.equasign-warn { color: var(--equasign-warn); }

.equasign-footer { text-align: center; color: var(--equasign-faint); font-size: 12px; padding: 20px; }

/* Terminal states */
.equasign-state { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.equasign-card {
	background: var(--equasign-surface);
	border: 1px solid var(--equasign-border);
	border-top: 3px solid var(--equasign-blue);
	border-radius: var(--equasign-radius);
	box-shadow: var(--equasign-shadow);
	padding: 40px;
	max-width: 480px;
	text-align: center;
	margin: 20px;
}
.equasign-card h1 { font-size: 20px; margin-top: 0; color: var(--equasign-blue-dark); }
.equasign-ok h1 { color: var(--equasign-ok); }
.equasign-warn h1 { color: var(--equasign-warn); }