/**
 * Form reCAPTCHA Block Styles
 *
 * @since 2.0.0
 * @package Spectra Pro
 */

.wp-block-spectra-pro-form-recaptcha {
	margin: 1rem 0;

	&__wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	// reCAPTCHA v2 styles
	&--v2 {

		.g-recaptcha {
			transform-origin: 0 0;
		}
	}

	// reCAPTCHA v3 styles (invisible)
	&--v3 {

		.g-recaptcha-response {
			display: none;
		}
	}

	&__badge {
		font-size: 0.75rem;
		color: #6b7280;
		line-height: 1.25;
		text-align: left;

		a {
			color: #3b82f6;
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}

	&__error {
		padding: 0.75rem 1rem;
		background-color: #fef2f2;
		border: 1px solid #fecaca;
		border-radius: 0.375rem;
		color: #991b1b;
		font-size: 0.875rem;
	}

	// Editor preview styles
	&__preview {
		width: 100%;
	}

	&__v2-preview {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 1rem;
		border: 2px solid #e5e7eb;
		border-radius: 0.25rem;
		background-color: #f9fafb;
		font-size: 0.875rem;
		min-height: 4rem;

		&--compact {
			min-height: 3rem;
			padding: 0.5rem 0.75rem;
		}

		&--dark {
			background-color: #1f2937;
			border-color: #374151;
			color: #f3f4f6;
		}
	}

	&__checkbox {
		flex-shrink: 0;

		&-input {
			width: 1.25rem;
			height: 1.25rem;
			border: 2px solid #3b82f6;
			border-radius: 0.25rem;
			background-color: #fff;
			cursor: not-allowed;

			.spectra-pro-form-recaptcha__v2-preview--dark & {
				background-color: #374151;
				border-color: #60a5fa;
			}
		}
	}

	&__label {
		flex: 1;
		font-weight: 500;
	}

	&__logo {
		flex-shrink: 0;
		font-size: 0.75rem;
		font-weight: 600;
		color: #3b82f6;
		text-transform: uppercase;
		letter-spacing: 0.05em;

		.spectra-pro-form-recaptcha__v2-preview--dark & {
			color: #60a5fa;
		}
	}

	&__v3-preview {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		padding: 1rem;
		border: 2px dashed #e5e7eb;
		border-radius: 0.375rem;
		background-color: #f8fafc;
		text-align: center;
	}

	&__v3-badge {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-weight: 500;
		color: #374151;
	}

	&__v3-icon {
		font-size: 1.25rem;
	}

	&__v3-info {
		font-size: 0.8125rem;
		color: #6b7280;
	}

	&__disabled-notice {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.75rem 1rem;
		background-color: #fefce8;
		border: 1px solid #facc15;
		border-radius: 0.375rem;
		color: #854d0e;
		font-size: 0.875rem;
	}

	&__notice-icon {
		font-size: 1.125rem;
		flex-shrink: 0;
	}

	&__notice-text {
		flex: 1;
	}

	// Dark mode support
	@media (prefers-color-scheme: dark) {

		&__badge {
			color: #9ca3af;

			a {
				color: #60a5fa;
			}
		}

		&__error {
			background-color: #7f1d1d;
			border-color: #ef4444;
			color: #fecaca;
		}

		&__disabled-notice {
			background-color: #713f12;
			border-color: #eab308;
			color: #fef3c7;
		}

		&__v3-preview {
			background-color: #0f172a;
			border-color: #334155;

			.spectra-pro-form-recaptcha__v3-badge {
				color: #cbd5e1;
			}

			.spectra-pro-form-recaptcha__v3-info {
				color: #64748b;
			}
		}
	}

	// Responsive design
	@media (max-width: 480px) {

		&__v2-preview {
			padding: 0.5rem 0.75rem;
			gap: 0.5rem;
			font-size: 0.8125rem;

			&--normal {
				min-height: 3.5rem;
			}

			&--compact {
				min-height: 2.5rem;
			}
		}

		&__badge {
			font-size: 0.6875rem;
		}
	}

	// RTL support
	[dir="rtl"] & {

		&__wrapper {
			align-items: flex-end;
		}

		&__badge {
			text-align: right;
		}

		&__v2-preview {
			direction: rtl;
		}
	}
}

// WordPress editor specific styles
.block-editor-block-list__layout {

	.spectra-pro-form-recaptcha {
		// Editor preview styles
		border: 1px dashed #e5e7eb;
		border-radius: 0.25rem;
		padding: 0.75rem;

		&:hover {
			border-color: #3b82f6;
		}

		// Disable interactions in editor
		.g-recaptcha,
		&__checkbox-input {
			pointer-events: none;
		}
	}
}
