/**
 * Pro Fields CSS - SkunkForms Pro
 */

/* Radio button styling */
.skunkforms-radio-group {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.skunkforms-radio-group.skunkforms-layout-vertical {
	flex-direction: column;
}

.skunkforms-radio-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 8px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	transition: all 0.2s;
	background: white;
}

.skunkforms-radio-option:hover {
	border-color: #6366f1;
	background: #f8fafc;
}

.skunkforms-radio-option input[type="radio"] {
	accent-color: #6366f1;
}

.skunkforms-radio-option input[type="radio"]:checked + span {
	font-weight: 500;
	color: #6366f1;
}

/* Checkbox styling */
.skunkforms-checkbox-group {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.skunkforms-checkbox-group.skunkforms-layout-vertical {
	flex-direction: column;
}

.skunkforms-checkbox-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 8px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	transition: all 0.2s;
	background: white;
}

.skunkforms-checkbox-option:hover {
	border-color: #6366f1;
	background: #f8fafc;
}

.skunkforms-checkbox-option input[type="checkbox"] {
	accent-color: #6366f1;
}

.skunkforms-checkbox-option input[type="checkbox"]:checked + span {
	font-weight: 500;
	color: #6366f1;
}

/* Select/dropdown styling */
.skunkforms-select select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	background: white;
	transition: border-color 0.2s;
}

.skunkforms-select select:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Number field styling */
.skunkforms-number input[type="number"] {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.2s;
}

.skunkforms-number input[type="number"]:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Date field styling */
.skunkforms-date input[type="date"] {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	transition: border-color 0.2s;
	background: white;
}

.skunkforms-date input[type="date"]:focus {
	outline: none;
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* File upload styling */
.skunkforms-file-dropzone {
	position: relative;
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	padding: 24px;
	text-align: center;
	background: #f9fafb;
	transition: all 0.2s;
	cursor: pointer;
}

.skunkforms-file-dropzone:hover,
.skunkforms-file-dropzone.dragover {
	border-color: #6366f1;
	background: #f8fafc;
}

.skunkforms-file-input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.skunkforms-file-label {
	pointer-events: none;
}

.skunkforms-file-icon {
	font-size: 24px;
	display: block;
	margin-bottom: 8px;
}

.skunkforms-file-hint {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-top: 4px;
}

.skunkforms-file-list {
	margin-top: 16px;
	text-align: left;
}

.skunkforms-file-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	margin-bottom: 8px;
}

.skunkforms-file-item:last-child {
	margin-bottom: 0;
}

.skunkforms-file-name {
	font-size: 14px;
	color: #374151;
}

.skunkforms-file-size {
	font-size: 12px;
	color: #6b7280;
}

.skunkforms-file-remove {
	background: none;
	border: none;
	color: #dc2626;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	font-size: 12px;
}

.skunkforms-file-remove:hover {
	background: #fef2f2;
}

/* Calculated field styling */
.skunkforms-calculated {
	background: #f3f4f6;
	padding: 12px 16px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
}

.skunkforms-calculated .currency {
	color: #059669;
}

.skunkforms-calculated .percentage {
	color: #dc2626;
}

/* Hidden field (no visual styling needed, but class for targeting) */
.skunkforms-hidden {
	display: none !important;
}

/* Custom styling variables support */
.skunkforms-form {
	--skunkforms-accent: #6366f1;
	--skunkforms-font: inherit;
	--skunkforms-radius: 6px;
	--skunkforms-label-position: above;
}

/* Label positioning */
.skunkforms-form.skunkforms-labels-left .skunkforms-field {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.skunkforms-form.skunkforms-labels-left .skunkforms-field label {
	min-width: 120px;
	margin-bottom: 0;
	padding-top: 8px;
}

.skunkforms-form.skunkforms-labels-right .skunkforms-field {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex-direction: row-reverse;
}

.skunkforms-form.skunkforms-labels-right .skunkforms-field label {
	min-width: 120px;
	margin-bottom: 0;
	padding-top: 8px;
}

/* Use CSS custom properties where possible */
.skunkforms-radio-option:hover,
.skunkforms-checkbox-option:hover {
	border-color: var(--skunkforms-accent, #6366f1);
}

.skunkforms-select select:focus,
.skunkforms-number input:focus,
.skunkforms-date input:focus {
	border-color: var(--skunkforms-accent, #6366f1);
	box-shadow: 0 0 0 3px rgba(var(--skunkforms-accent-rgb, 99, 102, 241), 0.1);
}

input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--skunkforms-accent, #6366f1);
}

.skunkforms-radio-option,
.skunkforms-checkbox-option,
.skunkforms-select select,
.skunkforms-number input,
.skunkforms-date input,
.skunkforms-file-dropzone,
.skunkforms-calculated {
	border-radius: var(--skunkforms-radius, 6px);
}

.skunkforms-form {
	font-family: var(--skunkforms-font, inherit);
}

/* Responsive */
@media (max-width: 768px) {
	.skunkforms-radio-group,
	.skunkforms-checkbox-group {
		flex-direction: column;
	}
	
	.skunkforms-form.skunkforms-labels-left .skunkforms-field,
	.skunkforms-form.skunkforms-labels-right .skunkforms-field {
		flex-direction: column;
		gap: 8px;
	}
	
	.skunkforms-form.skunkforms-labels-left .skunkforms-field label,
	.skunkforms-form.skunkforms-labels-right .skunkforms-field label {
		min-width: unset;
		padding-top: 0;
		margin-bottom: 8px;
	}
}