/* Universal Programme ID & Certificate Manager — Frontend Styles (Phase 2)
 * Uses --upicm-c1..c4 CSS custom properties, scoped per-form-wrapper and
 * set inline per organization (see UPICM_Frontend::build_theme_css()).
 * Defaults here cover any wrapper that didn't get inline overrides.
 */

.upicm-frontend {
	--upicm-c1: #2563eb; /* Primary */
	--upicm-c2: #1e293b; /* Secondary */
	--upicm-c3: #2563eb; /* Accent */
	--upicm-c4: #1e293b; /* Accent 2 */

	max-width: 720px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--upicm-c2);
}

.upicm-frontend h2 {
	margin-bottom: 4px;
	color: var(--upicm-c2);
}

.upicm-frontend h3 {
	margin: 24px 0 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--upicm-c1);
	color: var(--upicm-c2);
	font-size: 16px;
}

.upicm-org-logo {
	max-height: 70px;
	margin-bottom: 10px;
}

.upicm-frontend .upicm-org {
	color: #555;
	font-weight: 600;
	margin-top: 0;
}

.upicm-meta-list {
	list-style: none;
	margin: 16px 0;
	padding: 0;
}

.upicm-meta-list li {
	padding: 4px 0;
	border-bottom: 1px solid #eee;
}

.upicm-frontend-notice {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 14px;
}

.upicm-notice-info {
	background: #eef6ff;
	color: #1d4e89;
	border: 1px solid #cfe3fb;
}

.upicm-notice-error {
	background: #fdecea;
	color: #7a271a;
	border: 1px solid #f7c9c4;
}

.upicm-error-list {
	margin: 6px 0 0 18px;
}

/* Form layout */
.upicm-form {
	margin-top: 20px;
}

.upicm-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.upicm-row .upicm-field {
	flex: 1 1 220px;
}

.upicm-field {
	margin-bottom: 16px;
}

.upicm-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 5px;
	font-size: 14px;
}

.upicm-field input[type="text"],
.upicm-field input[type="tel"],
.upicm-field input[type="email"],
.upicm-field input[type="date"],
.upicm-field input[type="file"],
.upicm-field select,
.upicm-field textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
}

.upicm-field input:focus,
.upicm-field select:focus,
.upicm-field textarea:focus {
	outline: none;
	border-color: var(--upicm-c1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--upicm-c1) 20%, transparent);
}

.upicm-required {
	color: #d63638;
}

.upicm-hint {
	font-size: 12px;
	color: #6b7280;
	margin: 4px 0 0;
}

.upicm-photo-preview {
	margin-top: 10px;
	max-width: 150px;
	max-height: 150px;
	border-radius: 6px;
	border: 2px solid var(--upicm-c1);
	object-fit: cover;
}

.upicm-paste-zone {
	border: 2px dashed var(--upicm-c1);
	border-radius: 6px;
	padding: 14px;
	text-align: center;
	cursor: pointer;
	background: color-mix(in srgb, var(--upicm-c1) 5%, transparent);
	margin-bottom: 8px;
	transition: background .15s ease, border-color .15s ease;
}

.upicm-paste-zone:focus {
	outline: none;
	background: color-mix(in srgb, var(--upicm-c1) 12%, transparent);
}

.upicm-paste-zone.upicm-paste-success {
	border-color: #16a34a;
	background: #ecfdf3;
}

.upicm-paste-hint {
	font-size: 13px;
	color: var(--upicm-c2);
}

.upicm-consent label {
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.upicm-honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* Buttons */
.upicm-btn {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
}

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

.upicm-btn-primary:hover {
	filter: brightness(0.92);
}

.upicm-btn-secondary {
	background: #fff;
	color: var(--upicm-c2);
	border: 2px solid var(--upicm-c2);
	margin-right: 8px;
}

.upicm-btn-disabled {
	background: #e5e7eb;
	color: #9ca3af;
	cursor: not-allowed;
	margin-right: 8px;
}

/* Success screen */
.upicm-success-box {
	text-align: center;
	padding: 30px 20px;
	border: 2px solid var(--upicm-c1);
	border-radius: 10px;
}

.upicm-success-icon {
	width: 56px;
	height: 56px;
	line-height: 56px;
	border-radius: 50%;
	background: var(--upicm-c1);
	color: #fff;
	font-size: 28px;
	margin: 0 auto 12px;
}

.upicm-success-sub {
	color: #555;
	margin-top: 0;
}

.upicm-regid-box {
	display: inline-block;
	margin: 20px auto;
	padding: 14px 28px;
	border: 2px dashed var(--upicm-c1);
	border-radius: 8px;
}

.upicm-regid-label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #6b7280;
}

.upicm-regid-value {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: var(--upicm-c2);
	letter-spacing: .03em;
}

.upicm-success-table {
	margin: 0 auto 20px;
	border-collapse: collapse;
}

.upicm-success-table th,
.upicm-success-table td {
	padding: 6px 14px;
	text-align: left;
	font-size: 14px;
}

.upicm-success-table th {
	color: #6b7280;
	font-weight: 600;
}

.upicm-success-actions {
	margin: 10px 0 18px;
}

.upicm-success-note {
	font-size: 13px;
	color: #6b7280;
}

@media print {
	.upicm-success-actions {
		display: none;
	}
}