/* ═══════════════════════════════════════════════════════
   FIELDS.CSS — Form Inputs & Widgets
   ═══════════════════════════════════════════════════════
   
   Contains:
   - Text inputs, selects, textareas, file inputs
   - Invalid states
   - Checkboxes & radio buttons  
   - Phone input groups
   - Multi-select widgets (roles, languages, provinces)
   - Tags
   - Agreement box
   - Cropper UI
   - Range sliders
   ═══════════════════════════════════════════════════════ */

/* ─────────────── Form Basics ─────────────── */

.realcruits-form label {
	display: block;
	margin-bottom: var(--rc-space-16);
	font-weight: var(--rc-font-weight-semibold);
	color: var(--rc-ink);
}

/* Remove label margin when inside flex-col container (gap handles spacing) */
.rc-flex-col>label {
	margin-bottom: 0;
}

/* Spacing between label text and input fields */
.realcruits-form label input,
.realcruits-form label select,
.realcruits-form label textarea {
	margin-top: var(--rc-space-8);
}

/* Phone group already has internal flex layout, no extra margin needed */
.realcruits-form label .rc-phone-group {
	margin-top: var(--rc-space-8);
}

/* Remove margin from fields inside phone-group - higher specificity required */
.realcruits-form .rc-phone-group select,
.realcruits-form .rc-phone-group input {
	margin-top: 0;
}

/* Required & Optional Field Indicators */
.realcruits-form label .rc-required-mark,
.realcruits-form label.rc-label--required .rc-required-mark {
	color: var(--rc-error-text);
	font-weight: var(--rc-font-weight-bold);
	font-size: 1.3em;
	margin-left: var(--rc-space-4);
	text-decoration: none;
	cursor: inherit;
	border: none;
}

.realcruits-form label .rc-optional-mark,
.realcruits-form label.rc-label--optional .rc-optional-mark {
	color: var(--rc-muted);
	font-size: var(--rc-text-sm);
	font-weight: var(--rc-font-weight-normal);
	margin-left: var(--rc-space-8);
}

.realcruits-form input[type=text],
.realcruits-form input[type=email],
.realcruits-form input[type=password],
.realcruits-form input[type=date],
.realcruits-form input[type=url],
.realcruits-form input[type=file] {
	width: 100%;
	height: var(--rc-input-height);
	padding: 0 var(--rc-space-20);
	border: var(--rc-border);
	background: var(--rc-color-white);
	border-radius: var(--rc-radius-lg);
	font-size: var(--rc-text-md);
	box-sizing: border-box;
}

.realcruits-form input[type=file] {
	background: var(--rc-card-bg);
	border-radius: var(--rc-radius-md);
	font-size: var(--rc-text-base);
	cursor: pointer;
	transition: border-color var(--rc-transition-fast) ease, background var(--rc-transition-base) ease;
	padding: var(--rc-space-10) var(--rc-space-20);
}

.realcruits-form select {
	width: 100%;
	display: block;
	box-sizing: border-box;
	height: var(--rc-input-height);
	padding: var(--rc-space-12) 36px var(--rc-space-12) var(--rc-space-16);
	font-size: var(--rc-text-base);
	line-height: var(--rc-leading-snug);
	color: var(--rc-ink);
	appearance: none;
	border-radius: var(--rc-radius-lg);
	border: var(--rc-border);
	background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M1 1.5L6 6.5L11 1.5" stroke="%23666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

.realcruits-form textarea {
	width: 100%;
	min-height: var(--rc-textarea-min-height);
	padding: var(--rc-space-12) var(--rc-space-20);
	border: var(--rc-border);
	background: var(--rc-color-white);
	border-radius: var(--rc-radius-lg);
	font-size: var(--rc-text-md);
	font-family: var(--rc-font-body);
	line-height: var(--rc-leading-normal);
	color: var(--rc-ink);
	box-sizing: border-box;
	resize: vertical;
}

.realcruits-form textarea.rc-auto-resize {
	resize: none;
	overflow-y: hidden;
	min-height: 80px;
	transition: height 0.1s ease-out;
}

.realcruits-form input::placeholder,
.realcruits-form textarea::placeholder {
	color: var(--rc-muted);
}

.realcruits-form .rc-small-note {
	display: block;
	font-size: var(--rc-text-base);
	font-weight: var(--rc-font-weight-regular);
	/* 400 */
	color: var(--rc-muted);
	margin-top: var(--rc-space-8);
	line-height: var(--rc-leading-snug);
}

.realcruits-form input:focus,
.realcruits-form select:focus,
.realcruits-form textarea:focus {
	outline: none;
	border-color: var(--rc-primary);
	background: var(--rc-card-bg);
	box-shadow: var(--rc-shadow-focus);
}

.realcruits-form input:hover,
.realcruits-form select:hover,
.realcruits-form textarea:hover {
	border-color: var(--rc-border);
}

/* Invalid State */
.realcruits-form .rc-invalid input,
.realcruits-form .rc-invalid select,
.realcruits-form .rc-invalid textarea,
.realcruits-form input.rc-invalid,
.realcruits-form select.rc-invalid,
.realcruits-form textarea.rc-invalid {
	border-color: var(--rc-error-border-strong) !important;
	box-shadow: var(--rc-shadow-focus-error);
	background: var(--rc-error-bg-light);
}

/* ─────────────── Multi-Select Widgets ─────────────── */

.rc-multiselect,
.rc-multiselect-container {
	position: relative;
	width: 100%;
	background: transparent;
	border: none;
	padding: 0;
	min-height: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--rc-space-8);
}

/* Multiselect Input Field */
.rc-multiselect-input {
	width: 100%;
	height: var(--rc-input-height);
	padding: var(--rc-space-12) var(--rc-space-16);
	border: var(--rc-border);
	background: var(--rc-color-white);
	border-radius: var(--rc-radius-lg);
	font-size: var(--rc-text-md);
	font-weight: var(--rc-font-weight-medium);
	color: var(--rc-ink);
	margin: 0;
	box-sizing: border-box;
}

.rc-multiselect-input:focus {
	border-color: var(--rc-primary);
	background: var(--rc-color-white);
	outline: none;
	box-shadow: var(--rc-shadow-focus);
}

/* Shared Dropdown Styles */
.rc-multiselect-dropdown,
.rc-searchable-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--rc-color-white);
	border: 1px solid var(--rc-gray-300);
	border-radius: var(--rc-radius-md);
	box-shadow: var(--rc-shadow-dropdown);
	max-height: var(--rc-dropdown-max-height);
	overflow-y: auto;
	padding: var(--rc-space-8) 0;
	z-index: var(--rc-z-dropdown);
}

.rc-multiselect-dropdown {
	top: calc(100% + var(--rc-space-4));
	bottom: auto !important;
	/* Force downward positioning */
}

.rc-multiselect-dropdown.rc-hidden {
	display: none;
}

/* Searchable Select */
.rc-searchable-select-wrapper {
	position: relative;
	width: 100%;
	margin: 0 0 var(--rc-space-8);
}

.rc-searchable-select-wrapper .rc-input {
	width: 100%;
	padding: var(--rc-space-16) var(--rc-space-20);
	border: 1px solid var(--rc-border);
	background: var(--rc-card-bg);
	border-radius: var(--rc-radius-lg);
	font-size: var(--rc-text-md);
	margin: 0;
}

.rc-searchable-select-wrapper .rc-input:focus {
	border-color: var(--rc-primary);
	background: var(--rc-card-bg);
	outline: none;
	box-shadow: var(--rc-shadow-focus-sm);
}

.rc-searchable-dropdown {
	top: calc(100% + var(--rc-space-8));
}

.rc-searchable-item {
	padding: var(--rc-space-8) var(--rc-space-12);
	cursor: pointer;
	transition: background var(--rc-transition-fast) ease, color var(--rc-transition-fast) ease;
}

@media (hover: hover) {
	.rc-searchable-item:hover {
		background: var(--rc-gray-100);
	}
}

/* ─────────────── Tags ─────────────── */

.rc-tags,
.rc-multiselect-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rc-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--rc-space-8);
	padding: var(--rc-chip-padding);
	border-radius: var(--rc-chip-radius);
	border: var(--rc-chip-border);
	background: var(--rc-chip-bg);
	box-shadow: var(--rc-chip-shadow);
	color: var(--rc-ink);
	font-size: var(--rc-chip-font-size);
	font-weight: var(--rc-chip-font-weight);
	line-height: 1.4;
}

.rc-tag>button {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: rgba(6, 40, 55, 0.15);
	color: var(--rc-body);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	font-size: var(--rc-text-base);
	transition: background 0.15s ease;
}

@media (hover: hover) {
	.rc-tag>button:hover {
		background: rgba(6, 40, 55, 0.3);
	}
}

/* ─────────────── Radio & Checkbox ─────────────── */

.rc-check {
	display: flex;
	align-items: center;
	cursor: pointer;
	position: relative;
	font-size: var(--rc-text-base);
	line-height: 1.4;
}

.rc-check input[type=checkbox] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.rc-check .rc-box {
	width: 24px;
	height: 24px;
	border: 2px solid var(--rc-color-gray-300);
	border-radius: 6px;
	background: var(--rc-white);
	display: inline-block;
	flex-shrink: 0;
	position: relative;
	transition: all var(--rc-transition-base) ease;
	vertical-align: middle;
	margin-right: var(--rc-space-16);
}

.rc-check input:focus+.rc-box {
	box-shadow: var(--rc-shadow-focus);
	border-color: var(--rc-primary);
}

.rc-check input:checked+.rc-box {
	background: var(--rc-primary);
	border-color: var(--rc-primary);
}

.rc-check input:checked+.rc-box:after {
	content: "";
	position: absolute;
	top: 2px;
	left: 7px;
	width: 6px;
	height: 12px;
	border: 3px solid var(--rc-white);
	border-left: none;
	border-top: none;
	transform: rotate(45deg);
}

/* ─────────────── Agreement Box ─────────────── */

.rc-agree-box {
	display: flex;
	flex-direction: column;
	gap: var(--rc-space-8);
	margin: var(--rc-space-24) 0 var(--rc-space-36);
}

/* Interactive Rows Style */
.rc-agree-box .rc-check {
	background: var(--rc-white);
	border: 1px solid var(--rc-border);
	padding: var(--rc-space-16);
	border-radius: var(--rc-radius-md);
	transition: all 0.2s ease;
}

@media (hover: hover) {
	.rc-agree-box .rc-check:hover {
		border-color: var(--rc-primary);
		box-shadow: var(--rc-shadow-sm);
		transform: translateY(-1px);
	}

	.rc-agree-box .rc-label a:hover {
		color: var(--rc-primary);
		border-bottom-color: var(--rc-primary);
	}
}

.rc-agree-box .rc-label {
	color: var(--rc-ink);
	font-weight: var(--rc-font-weight-medium);
}

.rc-agree-box .rc-label a {
	color: var(--rc-secondary);
	text-decoration: none;
	font-weight: var(--rc-font-weight-semibold);
	border-bottom: 2px solid var(--rc-secondary);
	padding-bottom: 1px;
	transition: all var(--rc-transition-base) ease;
}

/* ─────────────── Toggle Buttons (Radio Buttons) ─────────────── */

.rc-button-radios {
	display: flex;
	gap: var(--rc-space-12);
	align-items: center;
}

.rc-radio-btn {
	position: relative;
	cursor: pointer;
	user-select: none;
}

.rc-radio-btn input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Pill-shaped button */
.rc-radio-btn .rc-radio-text {
	display: inline-block;
	padding: var(--rc-space-10) var(--rc-space-24);
	background: var(--rc-white);
	color: var(--rc-body);
	border: 2px solid var(--rc-primary) !important;
	border-radius: var(--rc-radius-full);
	font-size: var(--rc-text-base);
	font-weight: var(--rc-font-weight-semibold);
	transition: all var(--rc-transition-base) ease;
	box-shadow: var(--rc-shadow-sm);
}

/* Checked State */
.rc-radio-btn input:checked+.rc-radio-text {
	background: var(--rc-primary);
	color: var(--rc-white);
	border-color: var(--rc-primary);
	box-shadow: var(--rc-shadow-btn-hover);
}

/* Focus State */
.rc-radio-btn input:focus+.rc-radio-text {
	box-shadow: var(--rc-shadow-focus);
}

/* Hover State */
@media (hover: hover) {
	.rc-radio-btn:hover .rc-radio-text {
		border-color: var(--rc-primary);
	}

	.rc-radio-btn input:checked:hover+.rc-radio-text {
		background: var(--rc-primary-hover);
		border-color: var(--rc-primary-hover);
	}
}

/* Relocate block styling */
.rc-relocate-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rc-space-12);
}

.rc-relocate-block>label {
	display: block;
	margin: 0;
	font-weight: var(--rc-font-weight-semibold);
	color: var(--rc-ink);
}

.rc-relocate-block .rc-button-radios {
	margin: 0;
}

/* ─────────────── Phone Input Group ─────────────── */

.rc-phone-group {
	display: flex;
	gap: var(--rc-space-8);
	align-items: stretch;
}

.rc-phone-group select.rc-phone-cc,
select.rc-phone-cc {
	flex: 0 0 var(--rc-phone-cc-width);
	max-width: var(--rc-phone-cc-width);
	width: var(--rc-phone-cc-width);
	display: block;
	box-sizing: border-box;
	height: var(--rc-input-height);
	padding: var(--rc-space-12) 36px var(--rc-space-12) var(--rc-space-12);
	font-size: var(--rc-text-base);
	line-height: var(--rc-leading-snug);
	color: var(--rc-ink);
	border: var(--rc-border);
	border-radius: var(--rc-radius-lg);
	background-color: var(--rc-color-white);
	appearance: none;
	background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M1 1.5L6 6.5L11 1.5" stroke="%23666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

.rc-phone-group .rc-phone-local {
	flex: 1;
	min-width: 140px;
	height: var(--rc-input-height);
	padding: 0 var(--rc-space-20);
	font-size: var(--rc-text-md);
	line-height: 1.45;
	font-weight: var(--rc-font-weight-medium);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius-md);
	background: var(--rc-card-bg);
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.rc-phone-group {
		flex-direction: column;
		align-items: stretch;
	}

	.rc-phone-group select.rc-phone-cc,
	.rc-phone-group .rc-phone-local {
		flex: unset;
		max-width: 100%;
		width: 100%;
	}
}

/* Phone Group - Shared Form Pattern */
.rc-phone-local {
	flex: 1;
}

/* ─────────────── Profile Photo Cropper ─────────────── */

.rc-cropper-form {
	background: var(--rc-crop-bg);
	border: 2px solid var(--rc-crop-border);
	border-radius: var(--rc-radius-md);
	padding: var(--rc-space-16);
	margin-top: var(--rc-space-16);
	box-shadow: 0 2px 8px rgba(6, 40, 55, 0.08);
}

.rc-crop-stage {
	position: relative;
	width: 200px;
	height: 200px;
	margin: 0 auto var(--rc-space-20);
	border-radius: var(--rc-radius-md);
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(6, 40, 55, 0.12);
}

.rc-crop-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	background: radial-gradient(circle closest-side, transparent 98%, rgba(6, 40, 55, 0.5) 100%);
	z-index: 10;
	border-radius: var(--rc-radius-md);
}

.rc-cropper-form.rc-hidden {
	display: none !important;
}

.rc-crop-canvas {
	display: block;
	width: 200px;
	height: 200px;
	background: var(--rc-crop-canvas-bg);
	cursor: move;
	transition: all var(--rc-transition-base);
}



.rc-crop-canvas.rc-loading {
	opacity: 0.6;
	cursor: wait;
}

/* Zoom slider row */
.rc-crop-zoom {
	display: flex;
	justify-content: center;
	margin-bottom: var(--rc-space-16);
	padding: 0 var(--rc-space-16);
}

.rc-crop-zoom label {
	display: block;
	text-align: center;
	font-size: var(--rc-typo-body-size);
	/* 14px */
	font-weight: var(--rc-font-weight-semibold);
	color: var(--rc-body);
}

.rc-crop-zoom label input {
	vertical-align: middle;
	margin-left: var(--rc-space-12);
	display: inline-block;
}

/* Action buttons row */
.rc-crop-actions {
	display: flex;
	gap: var(--rc-space-12);
	justify-content: center;
	margin-bottom: var(--rc-space-16);
}

.rc-crop-zoom input[type="range"] {
	width: var(--rc-crop-slider-width);
	height: var(--rc-crop-slider-height);
	-webkit-appearance: none;
	appearance: none;
	background: linear-gradient(90deg, #c2d9e0 0%, #8ba9b6 100%);
	border-radius: 3px;
	outline: none;
	transition: opacity 0.2s;
}

.rc-crop-zoom input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--rc-crop-thumb-size);
	height: var(--rc-crop-thumb-size);
	background: var(--rc-color-blue-900);
	border: var(--rc-crop-thumb-border) solid white;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s;
}

@media (hover: hover) {
	.rc-crop-zoom input[type="range"]::-webkit-slider-thumb:hover {
		background: var(--rc-color-blue-800);
		transform: scale(1.1);
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	}

	.rc-crop-zoom input[type="range"]::-moz-range-thumb:hover {
		background: var(--rc-color-blue-800);
		transform: scale(1.1);
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	}
}

.rc-crop-zoom input[type="range"]::-moz-range-thumb {
	width: var(--rc-crop-thumb-size);
	height: var(--rc-crop-thumb-size);
	background: var(--rc-color-blue-900);
	border: var(--rc-crop-thumb-border) solid white;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.2s;
}

.rc-crop-hint {
	text-align: center;
	font-size: var(--rc-typo-small-size);
	/* 13px */
	color: var(--rc-crop-hint-text);
	background: var(--rc-crop-hint-bg);
	border: 1px solid var(--rc-crop-hint-border);
	border-radius: var(--rc-radius-sm);
	padding: var(--rc-space-12) var(--rc-space-16);
	font-weight: var(--rc-font-weight-medium);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--rc-space-8);
}

.rc-crop-hint svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: currentColor;
	opacity: 0.8;
}

.rc-crop-error {
	text-align: center;
	font-size: var(--rc-typo-small-size);
	/* 13px */
	color: var(--rc-error-text);
	background: var(--rc-error-bg);
	border: 1px solid var(--rc-error-border);
	border-radius: var(--rc-radius-sm);
	padding: var(--rc-space-12) var(--rc-space-16);
	font-weight: var(--rc-font-weight-medium);
	margin-bottom: var(--rc-space-12);
}

/* File Input with Preview */
.rc-file-with-preview {
	display: flex;
	align-items: center;
	gap: var(--rc-space-12);
}

.rc-file-with-preview input[type="file"] {
	flex: 1;
}

.rc-mini-preview {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--rc-bg-light);
	border: 2px solid var(--rc-border);
	background-size: cover;
	background-position: center;
	box-shadow: var(--rc-shadow-sm);
	flex-shrink: 0;
	display: none;
	/* hidden until populated */
}

.rc-mini-preview.rc-has-image {
	display: block;
}

/* ─────────────── DOB Picker ─────────────── */

.rc-dob-picker {
	display: flex;
	gap: 8px;
	align-items: center;
}

.rc-dob-select {
	flex: 1;
	height: var(--rc-input-height);
	padding: 0 var(--rc-space-20);
	border: var(--rc-border);
	background: var(--rc-color-white);
	border-radius: var(--rc-radius-lg);
	font-size: var(--rc-text-md);
	font-weight: var(--rc-font-weight-medium);
	color: var(--rc-ink);
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23062837" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 40px;
	cursor: pointer;
	transition: border-color var(--rc-transition-fast) ease, box-shadow var(--rc-transition-fast) ease;
}

.rc-dob-select:hover {
	border-color: var(--rc-primary);
}

.rc-dob-select:focus {
	outline: none;
	border-color: var(--rc-primary);
	box-shadow: 0 0 0 3px rgba(6, 40, 55, 0.15);
}

.rc-dob-select:invalid,
.rc-dob-invalid .rc-dob-select {
	border-color: var(--rc-error-border);
}

.rc-dob-year {
	flex: 1.2;
}

.rc-dob-month {
	flex: 1.5;
}

.rc-dob-day {
	flex: 0.8;
}

/* Error message for DOB picker */
.rc-dob-invalid::after {
	content: attr(data-error);
	display: block;
	margin-top: 6px;
	font-size: var(--rc-typo-small-size);
	/* 13px */
	color: var(--rc-error-text);
	font-weight: var(--rc-font-weight-medium);
}

/* Responsive: stack on mobile */
@media (max-width: 767px) {
	.rc-dob-picker {
		flex-direction: column;
		gap: 12px;
	}

	.rc-dob-select {
		width: 100%;
	}
}