/**
 * Raptcha WPForms Integration Styles
 * FILE: assets/css/raptcha-wpforms.css
 *
 * WPForms-specific styling to restore Raptcha CAPTCHA appearance within
 * WPForms forms. All rules scoped to .wpforms-form .wpforms-field-raptcha
 * for proper specificity without !important.
 *
 * Only loaded when WPForms integration is active and form is rendered.
 */

/* Editor Placeholder - Clean preview in WPForms block editor */
.wpforms-field-raptcha.raptcha-editor-placeholder {
	max-width: 300px;
	margin-bottom: 10px;
	padding: 20px;
	background: #f0f8ff;
	border: 2px dashed #4a90e2;
	border-radius: 8px;
	text-align: center;
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

.wpforms-field-raptcha.raptcha-editor-placeholder strong {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
}

.wpforms-field-raptcha.raptcha-editor-placeholder span {
	font-size: 13px;
	color: #666;
}

/* Container - ensure proper spacing within WPForms field */
.wpforms-form .wpforms-field-raptcha .raptcha-container {
	font-family: inherit;
	font-size: 16px;
	max-width: 100%;
	margin: 20px 0;
	position: relative;
	box-sizing: border-box;
}

/* Loading State */
.wpforms-form .wpforms-field-raptcha .raptcha-loading {
	text-align: center;
	padding: 20px;
	display: block;
	max-width: 300px;
}

.wpforms-form .wpforms-field-raptcha .raptcha-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #ccc;
	border-radius: 50%;
	border-top-color: #007cba;
	animation: raptcha-spin 1s linear infinite;
	margin-bottom: 10px;
}

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

/* Challenge State */
.wpforms-form .wpforms-field-raptcha .raptcha-challenge {
	border: 1px solid #ddd;
	padding: 15px;
	border-radius: 4px;
	background: #fff;
	display: none;
	max-width: 300px;
}

.wpforms-form .wpforms-field-raptcha .raptcha-question {
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}

.wpforms-form .wpforms-field-raptcha .raptcha-image-wrapper {
	text-align: center;
	margin-bottom: 15px;
}

.wpforms-form .wpforms-field-raptcha .raptcha-image {
	max-width: 100%;
	height: auto;
	border: 1px solid #ddd;
	display: block;
}

.wpforms-form .wpforms-field-raptcha .raptcha-answer-area {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Answer Options - draggable number boxes */
.wpforms-form .wpforms-field-raptcha .raptcha-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	justify-items: center;
	margin: 10px 0;
	max-width: 300px;
}

.wpforms-form .wpforms-field-raptcha .raptcha-option {
	background: #f0f0f0;
	border: 2px solid #ccc;
	border-radius: 1rem;
	padding: 0;
	text-align: center;
	cursor: grab;
	user-select: none;
	transition: background 0.2s, transform 0.1s, border-color 0.2s;
	width: 100%;
	max-width: 80px;
	min-width: 50px;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.wpforms-form .wpforms-field-raptcha .raptcha-option:hover {
	background: #e6e6e6;
	border-color: #007cba;
	transform: scale(1.05);
	cursor: grab;
}

.wpforms-form .wpforms-field-raptcha .raptcha-option.dragging {
	opacity: 0.5;
	cursor: grabbing;
}

/* Drop Zone - CRITICAL: Grey background with dashed border */
.wpforms-form .wpforms-field-raptcha .raptcha-dropzone {
	border: 2px dashed #ccc;
	border-radius: 4px;
	padding: 20px;
	text-align: center;
	background: #fafafa;
	transition: border-color 0.2s, background 0.2s;
	min-height: 50px;
}

.wpforms-form .wpforms-field-raptcha .raptcha-dropzone.drag-over {
	border-color: #007cba;
	background: #f0f8ff;
}

.wpforms-form .wpforms-field-raptcha .raptcha-dropzone-text {
	font-size: 14px;
	color: #666;
}

/* Error State - Red background with retry button */
.wpforms-form .wpforms-field-raptcha .raptcha-error {
	text-align: center;
	padding: 15px;
	background: #ffeaea;
	border: 1px solid #f5c6ca;
	border-radius: 4px;
	color: #c53030;
	display: none;
	max-width: 300px;
}

.wpforms-form .wpforms-field-raptcha .raptcha-error-message {
	margin-bottom: 10px;
}

.wpforms-form .wpforms-field-raptcha .raptcha-retry {
	background: #007cba;
	color: #fff;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 10px;
	transition: background 0.2s;
}

.wpforms-form .wpforms-field-raptcha .raptcha-retry:hover {
	background: #005a87;
}

/* Success State - Green background with checkmark */
.wpforms-form .wpforms-field-raptcha .raptcha-success {
	text-align: center;
	padding: 15px;
	background: #e8f5e8;
	border: 1px solid #4caf50;
	border-radius: 4px;
	color: #2e7d32;
	display: none;
	max-width: 300px;
}

.wpforms-form .wpforms-field-raptcha .raptcha-success-icon {
	font-size: 24px;
	margin-bottom: 10px;
}

/* Themes - Dark Mode Support */
.wpforms-form .wpforms-field-raptcha.raptcha-theme-dark .raptcha-challenge {
	background: #333;
	color: #fff;
	border-color: #555;
}

.wpforms-form .wpforms-field-raptcha.raptcha-theme-dark .raptcha-option {
	background: #444;
	border-color: #666;
	color: #fff;
}

.wpforms-form .wpforms-field-raptcha.raptcha-theme-dark .raptcha-option:hover {
	background: #555;
}

.wpforms-form .wpforms-field-raptcha.raptcha-theme-dark .raptcha-dropzone {
	background: #444;
	border-color: #666;
	color: #ccc;
}

/* Responsive - Mobile adjustments */
@media (max-width: 600px) {
	.wpforms-form .wpforms-field-raptcha .raptcha-options {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {

	.wpforms-form .wpforms-field-raptcha .raptcha-spinner,
	.wpforms-form .wpforms-field-raptcha .raptcha-option,
	.wpforms-form .wpforms-field-raptcha .raptcha-retry {
		animation: none;
	}

	.wpforms-form .wpforms-field-raptcha .raptcha-option:hover {
		transform: none;
	}
}