/**
 * Video report modal — visual mirror of the report-modal with the addition
 * of a problem-type checkbox group and a "report a video" trigger that the
 * companion JS injects below every video player on a single post.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Trigger — small clickable text centered below each video.
   ========================================================================== */
.hm-video-report-trigger {
	display: block;
	width: fit-content;
	margin: 8px auto 16px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: var(--hm-font-primary);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hm-color-accent);
	text-align: center;
	text-decoration: none;
	transition: color var(--hm-transition-fast, 150ms ease);
}

.hm-video-report-trigger:hover .hm-video-report-trigger__text,
.hm-video-report-trigger:focus-visible .hm-video-report-trigger__text {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hm-video-report-trigger:focus-visible {
	outline: none;
}

/* ==========================================================================
   Modal shell — same look as the report-modal.
   ========================================================================== */
.hm-video-report-modal {
	padding: 0;
	border: none;
	border-radius: var(--hm-radius-xl);
	max-width: 480px;
	width: calc(100% - 32px);
	background-color: var(--hm-color-bg-alt);
	color: var(--hm-color-text);
	box-shadow: var(--hm-shadow-lg);
	font-family: var(--hm-font-primary);
	direction: rtl;
	z-index: var(--hm-z-modal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.hm-video-report-modal::backdrop {
	background-color: rgba(33, 33, 33, 0.6);
	backdrop-filter: blur(4px);
}

.hm-video-report-modal[open] {
	animation: hm-video-report-fade-in 200ms ease-out;
}

@keyframes hm-video-report-fade-in {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hm-video-report-modal__form {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 32px 28px 28px;
	margin: 0;
	max-height: calc(100dvh - 64px);
	overflow-y: auto;
}

.hm-video-report-modal__close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 14px;
	width: 32px;
	height: 32px;
	background: transparent;
	border: none;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	color: var(--hm-color-text-muted);
	cursor: pointer;
	transition: background-color var(--hm-transition-fast), color var(--hm-transition-fast);
}

.hm-video-report-modal__close:hover,
.hm-video-report-modal__close:focus-visible {
	background-color: var(--hm-color-bg);
	color: var(--hm-color-accent);
	outline: none;
}

.hm-video-report-modal__header {
	margin-bottom: 20px;
	text-align: center;
}

.hm-video-report-modal__title {
	margin: 0 0 8px 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hm-color-text);
	text-box-trim: both;
	text-box-edge: cap alphabetic;
}

.hm-video-report-modal__subtitle {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--hm-color-text-muted);
}

.hm-video-report-modal__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hm-video-report-modal__label {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--hm-color-text);
}

.hm-video-report-modal__input {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--hm-font-primary);
	font-size: 15px;
	color: var(--hm-color-text);
	background-color: var(--hm-color-bg-alt);
	border: 1px solid var(--hm-color-border);
	border-radius: var(--hm-radius-md);
	transition: border-color var(--hm-transition-fast), box-shadow var(--hm-transition-fast);
}

.hm-video-report-modal__input[type="email"] {
	direction: ltr;
	text-align: start;
}

.hm-video-report-modal__textarea {
	min-height: 88px;
	resize: vertical;
	font-family: var(--hm-font-primary);
	line-height: 1.5;
}

.hm-video-report-modal__input:focus {
	outline: none;
	border-color: var(--hm-color-accent);
	box-shadow: 0 0 0 3px rgba(255, 23, 62, 0.15);
}

.hm-video-report-modal__input.is-invalid {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* ==========================================================================
   Problem-type checkbox group.
   ========================================================================== */
.hm-video-report-modal__fieldset {
	margin: 4px 0 8px;
	padding: 0;
	border: none;
}

.hm-video-report-modal__legend {
	margin: 0 0 8px 0;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--hm-color-text);
}

.hm-video-report-modal__check-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 4px 2px;
	border-radius: var(--hm-radius-md);
	transition: box-shadow var(--hm-transition-fast);
}

.hm-video-report-modal__check-group.is-invalid {
	box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.hm-video-report-modal__check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}

.hm-video-report-modal__check-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.hm-video-report-modal__check-visual {
	flex-shrink: 0;
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--hm-color-bg-alt);
	border: 1px solid var(--hm-color-border);
	border-radius: 50%;
	transition: background-color var(--hm-transition-fast), border-color var(--hm-transition-fast), box-shadow var(--hm-transition-fast);
}

.hm-video-report-modal__check-input:checked + .hm-video-report-modal__check-visual {
	background-color: var(--hm-color-accent);
	border-color: var(--hm-color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 10L9 13L14 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.hm-video-report-modal__check-input:focus-visible + .hm-video-report-modal__check-visual {
	box-shadow: 0 0 0 3px rgba(255, 23, 62, 0.35);
}

.hm-video-report-modal__check-text {
	font-family: var(--hm-font-primary);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hm-color-text);
}

/* ==========================================================================
   Submit + spinner.
   ========================================================================== */
.hm-video-report-modal__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	padding: 12px 20px;
	font-family: var(--hm-font-primary);
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	background-color: var(--hm-color-accent);
	border: none;
	border-radius: var(--hm-radius-md);
	cursor: pointer;
	transition: background-color var(--hm-transition-fast), transform var(--hm-transition-fast);
	min-height: 48px;
}

.hm-video-report-modal__submit:hover,
.hm-video-report-modal__submit:focus-visible {
	background-color: #d9102f;
	outline: none;
}

.hm-video-report-modal__submit:active {
	transform: scale(0.98);
}

.hm-video-report-modal__submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.hm-video-report-modal__submit-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: hm-video-report-spin 600ms linear infinite;
}

.hm-video-report-modal__submit-spinner[hidden] {
	display: none;
}

@keyframes hm-video-report-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   Privacy / terms checkbox.
   ========================================================================== */
.hm-video-report-modal__terms {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	cursor: pointer;
	margin-top: 8px;
}

.hm-video-report-modal__checkbox-wrap {
	flex-shrink: 0;
	padding-block-start: 2px;
}

.hm-video-report-modal__checkbox {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.hm-video-report-modal__checkbox-visual {
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--hm-color-bg-alt);
	border: 1px solid var(--hm-color-border);
	border-radius: 50%;
	transition: background-color var(--hm-transition-fast), border-color var(--hm-transition-fast), box-shadow var(--hm-transition-fast);
}

.hm-video-report-modal__checkbox:checked + .hm-video-report-modal__checkbox-visual {
	background-color: var(--hm-color-accent);
	border-color: var(--hm-color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 10L9 13L14 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.hm-video-report-modal__checkbox:focus-visible + .hm-video-report-modal__checkbox-visual {
	box-shadow: 0 0 0 3px rgba(255, 23, 62, 0.35);
}

.hm-video-report-modal__checkbox.is-invalid + .hm-video-report-modal__checkbox-visual {
	border-color: #dc2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}

.hm-video-report-modal__terms-text {
	flex: 1;
	font-family: var(--hm-font-primary);
	font-size: 13px;
	font-weight: 300;
	line-height: 18px;
	color: var(--hm-color-text-muted);
	text-align: start;
}

.hm-video-report-modal__terms-link {
	color: var(--hm-color-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hm-video-report-modal__terms-link:hover {
	color: #d9102f;
}

/* ==========================================================================
   Status line.
   ========================================================================== */
.hm-video-report-modal__status {
	min-height: 18px;
	margin: 6px 0 0 0;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 300;
}

.hm-video-report-modal__status--success {
	color: #16a34a;
}

.hm-video-report-modal__status--error {
	color: #dc2626;
}

/* ==========================================================================
   Mobile.
   ========================================================================== */
@media (max-width: 480px) {
	.hm-video-report-modal {
		max-width: none;
		width: calc(100% - 24px);
		max-height: calc(100dvh - 32px);
		margin: auto;
	}

	.hm-video-report-modal__form {
		padding: 28px 20px 22px;
	}

	.hm-video-report-modal__title {
		font-size: 19px;
	}

	.hm-video-report-modal__subtitle {
		font-size: 13px;
	}

	.hm-video-report-modal__submit {
		min-height: 44px;
		padding: 10px 16px;
	}

	.hm-video-report-modal__terms-text {
		font-size: 12px;
		line-height: 17px;
	}
}