/**
 * Complaints Book Form Styles
 *
 * @package MNK_CB
 */

/* === Form Wrapper === */
.mnk-cb-form-wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

/* === Fieldsets === */
.mnk-cb-fieldset {
	margin-bottom: 25px;
	padding: 0;
	border: 0;
}

.mnk-cb-fieldset-title {
	margin-bottom: 20px;
	padding-bottom: 10px;
}

/* === Fields Grid === */
.mnk-cb-fields-grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 768px) {
	.mnk-cb-fields-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.mnk-cb-field-textarea,
	.mnk-cb-layout-full {
		grid-column: span 2;
	}

	.mnk-cb-layout-half {
		grid-column: span 1;
	}
}

/* === Field Wrapper === */
.mnk-cb-field {
	display: flex;
	flex-direction: column;
}

.mnk-cb-conditional-field[data-depends-on] {
	display: none;
}

.mnk-cb-conditional-field.mnk-cb-visible {
	display: flex;
}

/* === Labels === */
.mnk-cb-label {
	display: block;
	margin-bottom: 6px;
}

.mnk-cb-required {
	margin-left: 2px;
}

/* === Inputs === */
.mnk-cb-input,
.mnk-cb-textarea,
.mnk-cb-select {
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
}

.mnk-cb-textarea {
	resize: vertical;
	min-height: 100px;
}

/* === Radio & Checkbox === */
.mnk-cb-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	padding: 8px 0;
}

.mnk-cb-radio-label,
.mnk-cb-checkbox-label {
	display: flex;
	align-items: center;
	cursor: pointer;
}

.mnk-cb-radio,
.mnk-cb-checkbox {
	margin-right: 8px;
}

.mnk-cb-help-text {
	margin-top: 6px;
	font-style: italic;
}

/* === Error Messages === */
.mnk-cb-error-message {
	margin-top: 4px;
	min-height: 18px;
	/* Keep red for errors as it is crucial for UX, but avoid other styling */
	color: firebrick; 
}

.mnk-cb-input.mnk-cb-error,
.mnk-cb-textarea.mnk-cb-error,
.mnk-cb-select.mnk-cb-error {
	border-color: firebrick;
}

/* === Submit Button === */
.mnk-cb-submit-wrapper {
	text-align: center;
	padding: 20px 0;
}

.mnk-cb-submit-button {
	cursor: pointer;
}

.mnk-cb-button-loading {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* === Spinner === */
.mnk-cb-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-color: transparent;
	animation: mnk-cb-spin 0.8s linear infinite;
}

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

/* === Form Messages === */
.mnk-cb-form-message {
	padding: 15px 20px;
	margin: 20px 0;
}

.mnk-cb-form-error {
	border: 1px solid firebrick;
	color: firebrick;
}

/* === Success Message === */
.mnk-cb-success-message {
	text-align: center;
	padding: 40px 20px;
}

.mnk-cb-success-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	margin: 0 auto 20px;
}

.mnk-cb-success-title {
	margin: 0 0 10px;
}

.mnk-cb-success-text {
	margin: 0 0 25px;
}

.mnk-cb-success-text > :last-child {
	margin-bottom: 0;
}

.mnk-cb-success-details {
	padding: 20px;
	margin-bottom: 20px;
	display: inline-block;
}

.mnk-cb-success-details p {
	margin: 8px 0;
}

.mnk-cb-success-note {
	font-style: italic;
}