/* Form styling and validation */

.form-section {
	margin-bottom: var(--space-2xl);
}

.form-section-title {
	font-size: var(--font-size-lg);
	font-weight: 700;
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-lg);
	border-bottom: 2px solid var(--color-border);
}

.form-steps {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--space-2xl);
	position: relative;
}

.form-steps::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--color-border);
	z-index: 0;
}

.form-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 1;
	flex: 1;
}

.form-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color-card);
	border: 2px solid var(--color-border);
	font-weight: 700;
	font-size: var(--font-size-sm);
	margin-bottom: var(--space-md);
	transition: all var(--transition-fast);
}

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

.form-step.completed .form-step-number {
	background-color: var(--color-success);
	color: white;
	border-color: var(--color-success);
}

.form-step-completed .form-step-number::after {
	content: '✓';
}

.form-step-label {
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-align: center;
	max-width: 100px;
}

.form-step:not(.active):not(.completed) .form-step-label {
	color: #64748B;
}

/* Form groups */

.form-group {
	margin-bottom: var(--space-lg);
}

.form-group.required > label::after {
	content: ' *';
	color: var(--color-danger);
}

label {
	display: block;
	margin-bottom: var(--space-sm);
	font-weight: 600;
	font-size: var(--font-size-sm);
	color: var(--color-text);
}

/* Input fields */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="url"],
textarea,
select {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--font-size-base);
	font-family: inherit;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
	background-color: var(--color-card);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

input:disabled,
textarea:disabled,
select:disabled {
	background-color: var(--color-bg);
	color: #64748B;
	cursor: not-allowed;
	opacity: 0.6;
}

textarea {
	resize: vertical;
	min-height: 120px;
}

/* Validation states */

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
	border-color: var(--color-danger);
	background-color: rgba(239, 68, 68, 0.05);
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus,
.form-group.has-error select:focus {
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-group.has-success input,
.form-group.has-success textarea,
.form-group.has-success select {
	border-color: var(--color-success);
	background-color: rgba(16, 185, 129, 0.05);
}

.form-group.has-success input:focus,
.form-group.has-success textarea:focus,
.form-group.has-success select:focus {
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Helper text */

.form-helper {
	color: #64748B;
	font-size: var(--font-size-xs);
	margin-top: var(--space-xs);
	display: block;
}

.form-error {
	color: var(--color-danger);
	font-size: var(--font-size-xs);
	margin-top: var(--space-xs);
	display: block;
	font-weight: 600;
}

.form-success {
	color: var(--color-success);
	font-size: var(--font-size-xs);
	margin-top: var(--space-xs);
	display: block;
}

/* Checkboxes & radios */

.form-checkbox,
.form-radio {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	margin-bottom: var(--space-sm);
	cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--color-primary);
	flex-shrink: 0;
}

/* File upload */

.form-file-upload {
	border: 2px dashed var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	text-align: center;
	transition: all var(--transition-fast);
	cursor: pointer;
	background-color: var(--color-bg);
}

.form-file-upload:hover {
	border-color: var(--color-primary);
	background-color: rgba(30, 64, 175, 0.05);
}

.form-file-upload.dragging {
	border-color: var(--color-primary);
	background-color: rgba(30, 64, 175, 0.1);
}

.form-file-upload input[type="file"] {
	display: none;
}

.form-file-upload-label {
	cursor: pointer;
	font-weight: 600;
	color: var(--color-primary);
}

.form-file-upload-hint {
	font-size: var(--font-size-xs);
	color: #64748B;
	margin-top: var(--space-sm);
}

.form-file-list {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.form-file-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-md);
	background-color: var(--color-card);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	margin-bottom: var(--space-sm);
}

.form-file-info {
	flex: 1;
}

.form-file-name {
	font-weight: 600;
	display: block;
	margin-bottom: var(--space-xs);
}

.form-file-size {
	font-size: var(--font-size-xs);
	color: #64748B;
}

.form-file-remove {
	background: none;
	border: none;
	color: var(--color-danger);
	cursor: pointer;
	font-size: var(--font-size-lg);
	padding: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-fast);
}

.form-file-remove:hover {
	transform: scale(1.2);
}

/* Form actions */

.form-actions {
	display: flex;
	justify-content: space-between;
	gap: var(--space-lg);
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.form-actions-left {
	flex: 1;
}

.form-actions-right {
	display: flex;
	gap: var(--space-md);
	justify-content: flex-end;
}

@media (max-width: 768px) {
	.form-actions {
		flex-direction: column-reverse;
	}

	.form-actions button {
		width: 100%;
	}
}

/* Progress bar */

.form-progress {
	width: 100%;
	height: 4px;
	background-color: var(--color-bg);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: var(--space-lg);
}

.form-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
	width: 0%;
	transition: width var(--transition-base);
}

/* Loading state */

.form-loading {
	pointer-events: none;
	opacity: 0.6;
}

.form-loading input,
.form-loading textarea,
.form-loading select,
.form-loading button {
	pointer-events: none;
}

.form-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(30, 64, 175, 0.2);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin-right: var(--space-sm);
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Success state */

.form-success-message {
	padding: var(--space-lg);
	background-color: rgba(16, 185, 129, 0.1);
	border: 1px solid var(--color-success);
	border-radius: var(--radius-lg);
	color: var(--color-success);
	margin-bottom: var(--space-lg);
}

.form-success-message strong {
	display: block;
	font-weight: 700;
	margin-bottom: var(--space-sm);
}

/* ── Requirement chips (selectable options) ───────────────────── */

.chip-options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface, #fff);
	font-size: var(--font-size-sm);
	cursor: pointer;
	transition: border-color .15s, background .15s, box-shadow .15s;
	user-select: none;
}

.chip:hover { border-color: var(--color-primary); }

.chip input { margin: 0; accent-color: var(--color-primary); }

.chip:has(input:checked) {
	border-color: var(--color-primary);
	background: var(--color-bg-alt, #EAF0FB);
	box-shadow: inset 0 0 0 1px var(--color-primary);
	font-weight: 600;
}

/* ── Rich (contenteditable) description editor ────────────────── */

.rich-editor {
	min-height: 180px;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-surface, #fff);
	overflow-y: auto;
	max-height: 460px;
	line-height: 1.6;
}

.rich-editor:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.12);
}

.rich-editor:empty::before {
	content: attr(data-placeholder);
	color: var(--color-muted);
}

.rich-editor h3 {
	font-size: 1.05rem;
	margin: var(--space-md) 0 var(--space-xs);
}

.rich-editor ul { margin: 0 0 var(--space-sm); padding-left: 1.2em; }
.rich-editor li { margin-bottom: 4px; }
.rich-editor p { margin: 0 0 var(--space-sm); }

/* ── CV template picker ───────────────────────────────────────── */

.cv-templates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

@media (max-width: 640px) {
	.cv-templates { grid-template-columns: 1fr; }
}

.cv-tpl { display: block; cursor: pointer; margin: 0; }
.cv-tpl input { position: absolute; opacity: 0; pointer-events: none; }

.cv-tpl-card {
	display: block;
	border: 2px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-sm);
	text-align: center;
	transition: border-color .15s, box-shadow .15s, transform .15s;
	background: #fff;
}

.cv-tpl:hover .cv-tpl-card { border-color: var(--color-primary); transform: translateY(-2px); }

.cv-tpl input:checked + .cv-tpl-card {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}

.cv-tpl-name { display: block; font-weight: 700; margin-top: 8px; }
.cv-tpl-desc { display: block; font-size: var(--font-size-sm); color: var(--color-muted); }

/* Mini thumbnails */
.cv-tpl-thumb {
	display: block;
	position: relative;
	height: 96px;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--color-border);
}

.cv-tpl-thumb .t-side { position: absolute; left: 0; top: 0; bottom: 0; width: 34%; background: #16317D; }
.cv-tpl-thumb .t-main { position: absolute; right: 8px; left: 38%; top: 12px; height: 8px; background: #CBD5E1; box-shadow: 0 16px 0 #E2E8F0, 0 30px 0 #E2E8F0; }

.tpl-classic .t-head { position: absolute; left: 18%; right: 18%; top: 12px; height: 10px; background: #CBD5E1; border-radius: 2px; }
.tpl-classic .t-rule { position: absolute; left: 12px; right: 12px; top: 30px; height: 4px; background: linear-gradient(90deg,#1E40AF 0 34%,#F2B705 34% 67%,#CE1126 67% 100%); }
.tpl-classic .t-row { position: absolute; left: 12px; right: 12px; top: 46px; height: 7px; background: #E2E8F0; }
.tpl-classic .t-row + .t-row { top: 64px; }

.tpl-min .t-name { position: absolute; left: 14px; top: 16px; width: 50%; height: 10px; background: #CBD5E1; border-radius: 2px; }
.tpl-min .t-hair { position: absolute; left: 14px; top: 34px; width: 28px; height: 4px; background: linear-gradient(90deg,#1E40AF 0 34%,#F2B705 34% 67%,#CE1126 67% 100%); }
.tpl-min .t-row { position: absolute; left: 14px; right: 30px; top: 52px; height: 7px; background: #EEF2F7; box-shadow: 0 14px 0 #EEF2F7; }

/* Active template switch button */
.cv-switch .btn.is-active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* ── Plan quota banner (job form) ─────────────────────────────── */

.quota-banner {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
	padding: 12px 16px;
	border-radius: var(--radius-lg);
	margin: var(--space-md) 0 var(--space-lg);
	font-size: var(--font-size-sm);
}

.quota-banner.quota-ok {
	background: var(--color-bg-alt, #EAF0FB);
	border: 1px solid var(--color-primary, #1E40AF);
	color: var(--color-primary-dark, #16317D);
}

.quota-banner.quota-blocked {
	background: #FEF2F2;
	border: 1px solid var(--color-red, #CE1126);
	color: #991B1B;
}

.quota-banner .btn { margin-left: auto; }

/* ── AI image: contact fields, loading overlay, result card, lightbox ── */

.img-contact-fields {
	margin-top: var(--space-sm);
	padding: var(--space-md);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt, #EAF0FB);
}
.img-contact-fields input { font-size: var(--font-size-sm); }

@media (max-width: 560px) {
	.img-contact-fields > div { grid-template-columns: 1fr !important; }
}

.ai-image-stage { position: relative; min-height: 40px; }

.ai-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: rgba(15, 23, 42, 0.72);
	backdrop-filter: blur(2px);
	border-radius: var(--radius-lg);
	z-index: 5;
	min-height: 220px;
	text-align: center;
	padding: var(--space-lg);
}
.ai-loading-msg { color: #fff; font-weight: 600; font-size: var(--font-size-sm); max-width: 320px; }
.ai-spinner {
	width: 48px; height: 48px;
	border-radius: 50%;
	/* Tricolor ring (blue → yellow → red), no grey. */
	background: conic-gradient(#1E40AF, #F2B705, #CE1126, #1E40AF);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
	animation: ai-spin 0.9s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* Smaller, framed result with actions */
.ai-image-card {
	display: inline-block;
	max-width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 8px;
	background: #fff;
	box-shadow: 0 8px 24px -14px rgba(15,23,42,0.3);
}
.ai-image-thumb {
	display: block;
	width: 360px;
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}
.ai-image-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

.dtuk-lightbox {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(2, 6, 23, 0.88);
	z-index: 9999;
	padding: 24px;
	cursor: zoom-out;
}
.dtuk-lightbox img {
	max-width: 92vw;
	max-height: 92vh;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
}

/* ── CV: professional thumbnail + photo upload ────────────────── */

.tpl-pro .t-name { position: absolute; left: 14px; top: 16px; width: 46%; height: 11px; background: #CBD5E1; border-radius: 2px; }
.tpl-pro .t-rule2 { position: absolute; left: 12px; right: 12px; top: 34px; height: 3px; background: #334155; }
.tpl-pro .t-row { position: absolute; left: 12px; right: 12px; top: 48px; height: 7px; background: #E2E8F0; }
.tpl-pro .t-row + .t-row { top: 66px; }

.cv-photo-row { display: flex; align-items: center; gap: var(--space-md); }
.cv-photo-preview {
	width: 72px; height: 72px; border-radius: 10px;
	border: 1px dashed var(--color-border, #E2E8F0); background: #F8FAFC;
	display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.cv-photo-preview img { width: 100%; height: 100%; object-fit: cover; }

.cv-photo-locked {
	display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
	padding: 12px 16px; border-radius: var(--radius-lg);
	background: var(--color-bg-alt, #EAF0FB); border: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
}
.cv-photo-locked .btn { margin-left: auto; }

/* ── AI image monthly quota note ──────────────────────────────── */
.img-quota-note { font-size: 0.84rem; }
.img-quota-note .iq-ok { color: var(--color-muted, #64748B); }
.img-quota-note .iq-blocked { color: var(--color-red, #CE1126); }
.img-quota-note .iq-blocked a { color: var(--color-primary, #1E40AF); font-weight: 600; }