/* Accept rules before posting - Zeina */

.acceptrules {
	margin-top: 1rem;
	border: 1px solid rgba(var(--color-primary), 0.15);
	border-radius: 0.75rem;
	background-color: rgba(var(--color-primary), 0.04);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.acceptrules:hover {
	border-color: rgba(var(--color-primary), 0.3);
}

.acceptrules-label {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1rem;
	cursor: pointer;
	user-select: none;
}

/* Native input: hidden visually, still focusable & accessible */
.acceptrules-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	opacity: 0;
}

/* Custom checkbox */
.acceptrules-box {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.375rem;
	height: 1.375rem;
	border: 2px solid rgba(var(--color-secondary), 0.45);
	border-radius: 0.4rem;
	background-color: #fff;
	transition: background-color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

.acceptrules-box svg {
	width: 0.875rem;
	height: 0.875rem;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 16;
	stroke-dashoffset: 16;
	transition: stroke-dashoffset .25s ease .05s;
}

.acceptrules-label:hover .acceptrules-box {
	border-color: rgba(var(--color-primary), 0.7);
}

.acceptrules-label:active .acceptrules-box {
	transform: scale(0.9);
}

.acceptrules-input:focus-visible + .acceptrules-box {
	box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.3);
}

.acceptrules-input:checked + .acceptrules-box {
	border-color: rgba(var(--color-primary), 1);
	background-color: rgba(var(--color-primary), 1);
}

.acceptrules-input:checked + .acceptrules-box svg {
	stroke-dashoffset: 0;
}

/* Text */
.acceptrules-text {
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(var(--color-secondary), 1);
}

.acceptrules-text a {
	font-weight: 600;
	color: rgba(var(--color-primary), 1);
	text-decoration: underline;
	text-decoration-color: rgba(var(--color-primary), 0.3);
	text-underline-offset: 3px;
	transition: text-decoration-color .2s ease;
}

.acceptrules-text a:hover {
	text-decoration-color: rgba(var(--color-primary), 1);
}

/* Icon badge */
.acceptrules-badge {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background-color: rgba(var(--color-primary), 0.12);
	color: rgba(var(--color-primary), 1);
	line-height: 0;
	transition: background-color .2s ease, color .2s ease;
}

/* Icon (SVG files from styles/all, used as mask so they take the current color) */
.acceptrules-icon {
	display: block;
	width: 0.875rem;
	height: 0.875rem;
	background-color: currentColor;
	-webkit-mask: url("../../all/theme/images/acceptrules-x.svg") center / contain no-repeat;
	mask: url("../../all/theme/images/acceptrules-x.svg") center / contain no-repeat;
}

.acceptrules.is-checked .acceptrules-icon {
	width: 1.125rem;
	height: 1.125rem;
	-webkit-mask-image: url("../../all/theme/images/acceptrules-check.svg");
	mask-image: url("../../all/theme/images/acceptrules-check.svg");
	animation: acceptrules-pop .3s ease;
}

@keyframes acceptrules-pop {
	0% { transform: scale(0.4); opacity: 0; }
	70% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}

/* Remember option */
.acceptrules-footer {
	display: flex;
	justify-content: flex-start;
	padding: 0.5rem 1rem;
	border-top: 1px dashed rgba(var(--color-primary), 0.15);
	transition: border-color .2s ease;
}

.acceptrules-remember {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(var(--color-secondary), 1);
	cursor: pointer;
	user-select: none;
}

.acceptrules-switch {
	position: relative;
	flex-shrink: 0;
	width: 2rem;
	height: 1.125rem;
	border-radius: 9999px;
	background-color: rgba(var(--color-secondary), 0.3);
	transition: background-color .2s ease, box-shadow .2s ease;
}

.acceptrules-switch::after {
	content: "";
	position: absolute;
	top: 0.1875rem;
	inset-inline-start: 0.1875rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 9999px;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	transition: transform .2s ease;
}

.acceptrules-remember:hover .acceptrules-switch {
	background-color: rgba(var(--color-secondary), 0.45);
}

.acceptrules-input:focus-visible + .acceptrules-switch {
	box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.3);
}

.acceptrules-input:checked + .acceptrules-switch {
	background-color: rgba(var(--color-primary), 1);
}

.acceptrules-input:checked + .acceptrules-switch::after {
	transform: translateX(0.875rem);
}

[dir="rtl"] .acceptrules-input:checked + .acceptrules-switch::after {
	transform: translateX(-0.875rem);
}

.acceptrules.is-checked .acceptrules-footer {
	border-top-color: rgba(22, 163, 74, 0.25);
}

.acceptrules.is-invalid .acceptrules-footer {
	border-top-color: rgba(220, 38, 38, 0.3);
}

/* Checked state */
.acceptrules.is-checked {
	border-color: rgba(22, 163, 74, 0.35);
	background-color: rgba(22, 163, 74, 0.06);
}

.acceptrules.is-checked .acceptrules-badge {
	background-color: rgba(22, 163, 74, 0.15);
	color: rgb(22, 163, 74);
}

/* Invalid state (submit without accepting) */
.acceptrules.is-invalid {
	border-color: rgba(220, 38, 38, 0.6);
	background-color: rgba(220, 38, 38, 0.05);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
	animation: acceptrules-shake .4s ease;
}

.acceptrules.is-invalid .acceptrules-box {
	border-color: rgb(220, 38, 38);
}

.acceptrules.is-invalid .acceptrules-badge {
	background-color: rgba(220, 38, 38, 0.12);
	color: rgb(220, 38, 38);
}

@keyframes acceptrules-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-5px); }
	40%, 80% { transform: translateX(5px); }
}

/* Dark mode */
.dark .acceptrules {
	border-color: rgba(var(--color-primary-dark), 0.25);
	background-color: rgba(var(--color-primary-dark), 0.08);
}

.dark .acceptrules:hover {
	border-color: rgba(var(--color-primary-dark), 0.45);
}

.dark .acceptrules-box {
	border-color: #334155;
	background-color: #0f172a;
}

.dark .acceptrules-label:hover .acceptrules-box {
	border-color: rgba(var(--color-primary-dark), 0.8);
}

.dark .acceptrules-input:focus-visible + .acceptrules-box {
	box-shadow: 0 0 0 3px rgba(var(--color-primary-dark), 0.4);
}

.dark .acceptrules-input:checked + .acceptrules-box {
	border-color: rgba(var(--color-primary-dark), 1);
	background-color: rgba(var(--color-primary-dark), 1);
}

.dark .acceptrules-text a {
	color: rgba(var(--color-text-dark), 1);
	text-decoration-color: rgba(var(--color-text-dark), 0.35);
}

.dark .acceptrules-text a:hover {
	text-decoration-color: rgba(var(--color-text-dark), 1);
}

.dark .acceptrules-badge {
	background-color: rgba(var(--color-primary-dark), 0.25);
	color: rgba(var(--color-text-dark), 1);
}

.dark .acceptrules.is-checked {
	border-color: rgba(34, 197, 94, 0.35);
	background-color: rgba(34, 197, 94, 0.07);
}

.dark .acceptrules.is-checked .acceptrules-badge {
	background-color: rgba(34, 197, 94, 0.15);
	color: rgb(74, 222, 128);
}

.dark .acceptrules.is-invalid {
	border-color: rgba(248, 113, 113, 0.6);
	background-color: rgba(220, 38, 38, 0.08);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.dark .acceptrules.is-invalid .acceptrules-box {
	border-color: rgb(248, 113, 113);
}

.dark .acceptrules.is-invalid .acceptrules-badge {
	background-color: rgba(220, 38, 38, 0.2);
	color: rgb(248, 113, 113);
}

.dark .acceptrules-footer {
	border-top-color: rgba(var(--color-primary-dark), 0.25);
}

.dark .acceptrules.is-checked .acceptrules-footer {
	border-top-color: rgba(34, 197, 94, 0.25);
}

.dark .acceptrules.is-invalid .acceptrules-footer {
	border-top-color: rgba(248, 113, 113, 0.3);
}

.dark .acceptrules-switch {
	background-color: #334155;
}

.dark .acceptrules-remember:hover .acceptrules-switch {
	background-color: #475569;
}

.dark .acceptrules-input:focus-visible + .acceptrules-switch {
	box-shadow: 0 0 0 3px rgba(var(--color-primary-dark), 0.4);
}

.dark .acceptrules-input:checked + .acceptrules-switch {
	background-color: rgba(var(--color-primary-dark), 1);
}

/* Mobile */
@media (max-width: 767px) {
	.acceptrules-label {
		gap: 0.75rem;
		padding: 0.75rem;
	}

	.acceptrules-badge {
		display: none;
	}

	.acceptrules-footer {
		padding: 0.5rem 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acceptrules,
	.acceptrules * {
		animation: none !important;
		transition: none !important;
	}
}