/**
 * Raptcha Frontend Styles
 * FILE: assets/css/raptcha-styles.css
 *
 * Responsive, accessible CSS for drag-and-drop CAPTCHA UI.
 * Supports light/dark themes, small/medium/large sizes, and mobile.
 */

.raptcha-container {
	font-family: inherit;
	font-size: 16px;
	max-width: 100%;
	margin: 20px 0;
	position: relative;
	box-sizing: border-box;
}

/* Loading State */
.raptcha-loading {
	text-align: center;
	padding: 20px;
	display: block;
	max-width: 300px;
	/* Ensure visible initially */
}

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

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

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

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

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

.raptcha-image {
	max-width: 100%;
	height: auto;
	border: 1px solid #ddd;
	display: block;
	/* Ensure img shows */
}

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

.raptcha-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 3 columns for 3 options */
	gap: 10px;
	/* Spacing between options */
	justify-items: center;
	/* Center items in grid */
	margin: 10px 0;
	/* Center row below image */
	max-width: 300px;
	/* Constrain width for centering */
}

.raptcha-option {
	background: #f0f0f0;
	/* Fallback if image fails */
	border: 2px solid #ccc;
	/* Visible border for structure */
	border-radius: 1rem;
	/* Nice radius for rounded "button" look */
	padding: 0;
	/* Remove padding since using background-image */
	text-align: center;
	cursor: grab;
	user-select: none;
	transition: background 0.2s, transform 0.1s, border-color 0.2s;
	width: 100%;
	/* Responsive width - scales with container */
	max-width: 80px;
	/* Max size for normal forms */
	min-width: 50px;
	/* Minimum size to prevent too small on narrow forms */
	aspect-ratio: 1 / 1;
	/* Maintain square shape */
	background-size: cover;
	/* Fill div with image */
	background-position: center;
	background-repeat: no-repeat;
}

.raptcha-option:hover {
	background: #e6e6e6;
	border-color: #007cba;
	/* Highlight on hover */
	transform: scale(1.05);
	cursor: grab;
}

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

.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;
}

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

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

/* Error State */
.raptcha-error {
	text-align: center;
	padding: 15px;
	background: #ffeaea;
	border: 1px solid #f5c6ca;
	border-radius: 4px;
	color: #c53030;
	display: none;
	/* Hidden initially */
	max-width: 300px;
}

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

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

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

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

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

/* Themes */
.raptcha-theme-dark .raptcha-challenge {
	background: #333;
	color: #fff;
	border-color: #555;
}

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

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

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

/* Sizes */
.raptcha-size-small {
	font-size: 14px;
}

.raptcha-size-small .raptcha-spinner {
	width: 16px;
	height: 16px;
}

.raptcha-size-small .raptcha-challenge,
.raptcha-size-small .raptcha-loading,
.raptcha-size-small .raptcha-error,
.raptcha-size-small .raptcha-success {
	padding: 10px;
}

.raptcha-size-large {
	font-size: 18px;
}

.raptcha-size-large .raptcha-spinner {
	width: 24px;
	height: 24px;
}

.raptcha-size-large .raptcha-challenge,
.raptcha-size-large .raptcha-loading,
.raptcha-size-large .raptcha-error,
.raptcha-size-large .raptcha-success {
	padding: 20px;
}

/* Responsive */
@media (max-width: 600px) {
	.raptcha-options {
		grid-template-columns: repeat(3, 1fr);
		/* Still 3 on mobile */
	}
}

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

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

	.raptcha-option:hover {
		transform: none;
	}
}