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

.wp-block-spectra-pro-register-terms-and-conditions {
	margin: 1rem 0;
	font-size: inherit;

	// Use form-checkbox structure
	.spectra-pro-form-checkbox__wrapper {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.spectra-pro-form-checkbox__input {
		position: absolute;
		opacity: 0;
		cursor: pointer;

		&:checked ~ .spectra-pro-form-checkbox__checkmark {
			border-color: #3b82f6;

			&::after {
				display: block;
			}
		}
	}

	.spectra-pro-form-checkbox__checkmark {
		position: relative;
		display: inline-block;
		width: 16px;
		height: 16px;
		border: 1px solid #ccc;
		border-radius: 4px;
		background-color: #fff;
		cursor: pointer;
		flex-shrink: 0;
		margin-top: 0.125rem;
		transition: all 0.2s ease;

		&::after {
			content: "";
			position: absolute;
			display: none;
			left: 50%;
			top: 50%;
			width: 4px;
			height: 8px;
			border: solid var(--spectra-checkbox-checkmark-color, #3b82f6);
			border-width: 0 2px 2px 0;
			transform: translate(-50%, -60%) rotate(45deg);
		}
	}

	.spectra-pro-form-checkbox__label {
		margin: 0;
		line-height: 1.25;
		color: #374151;
		cursor: pointer;
		user-select: none;
		transition: color 0.2s ease;
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.spectra-pro-form-checkbox__text {
		flex: 1;
		line-height: 1.25;
		cursor: pointer;
	}

	.spectra-pro-form-checkbox__required {
		color: #dc2626;
		margin-left: 0.25rem;
		font-weight: 500;
	}

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

		&__input {
			border-color: #4b5563;
			background-color: #1f2937;

			&:checked {
				background-color: #3b82f6;
				border-color: #3b82f6;
			}
		}

		&__label {
			color: #d1d5db;

			&:hover {
				color: #f3f4f6;
			}
		}
	}

	// Dynamic styles - specificity (0,2,0) and higher.
	&[class*="wp-block"] {

		// Parent context inheritance - inherit parent text color when no checkbox-specific color is set
		&:not(.spectra-label-color):not(.spectra-text-color) {

			.wp-block-spectra-pro-login &,
			.wp-block-spectra-pro-register & {

				.spectra-pro-form-checkbox__label {
					color: var(--spectra-text-color, inherit);
				}
			}
		}

		// Variable based CSS - Text Color.
		&.spectra-text-color .spectra-pro-form-checkbox__label {
			color: var(--spectra-text-color);
		}

		// Variable based CSS - Checkbox Background Color.
		&.spectra-checkbox-background-color .spectra-pro-form-checkbox__checkmark {
			background-color: var(--spectra-checkbox-background-color);
		}

		// Variable based CSS - Checkbox Checkmark Color.
		&.spectra-checkbox-checkmark-color .spectra-pro-form-checkbox__checkmark::after {
			border-color: var(--spectra-checkbox-checkmark-color) !important;
		}

		// Hover states
		&:focus,
		&:hover {

			&.spectra-text-color-hover .spectra-pro-form-checkbox__label {
				color: var(--spectra-text-color-hover) !important;
			}
		}
	}

	// Field type specific styles
	&.spectra-form-checkbox--remember {
		// Remember me specific styles
		.spectra-pro-form-checkbox__label {
			font-size: 0.875rem;
		}
	}

	&.spectra-form-checkbox--terms,
	&.spectra-form-checkbox--privacy {
		// Terms/privacy agreement styles
		.spectra-pro-form-checkbox__label {
			font-size: 0.8125rem;
			line-height: 1.375;
		}
	}

	&.spectra-form-checkbox--newsletter {
		// Newsletter signup styles
		.spectra-pro-form-checkbox__label {
			font-weight: 500;
		}
	}
}
