/*
 * Comment form for the Omid site - the parts the Mediana comments plugin adds.
 *
 * The plugin used to print this inside <style> tags, twice per page (once in wp_head and
 * once inside the form), and fought the theme with !important. It is one versioned sheet
 * now, and it only styles what the plugin owns.
 *
 * Tokens mirror the child theme: --b teal, --a gold, --line the hairline.
 */

.comment-form-mobile,
.comment-form-anonymous {
	margin: 0 0 18px;
	padding: 0;
	font-family: inherit;
}

.comment-form-mobile label,
.comment-form-anonymous label {
	display: block;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--text, #162022);
	font-family: inherit;
}

.comment-form-mobile .required {
	color: var(--danger, #b42318);
	margin-inline-start: 2px;
}

.comment-form-mobile input[type="tel"],
.comment-form-mobile input[type="text"] {
	width: 100%;
	max-width: 340px;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--border, rgba(0, 72, 81, .18));
	border-radius: 8px;
	background: #fff;
	color: var(--text, #162022);
	font: inherit;
	font-family: inherit;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Phone numbers are Latin digits and read left to right in every language of this site. */
.comment-form-mobile input[type="tel"],
.comment-form-mobile input[type="text"] {
	direction: ltr;
	text-align: left;
	letter-spacing: .5px;
}

.comment-form-mobile input:focus-visible {
	outline: none;
	border-color: var(--b, #004851);
	box-shadow: 0 0 0 3px rgba(0, 72, 81, .12);
}

.comment-form-mobile input:user-invalid {
	border-color: var(--danger, #b42318);
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .10);
}

.comment-form-mobile small {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--muted, #5f6b6d);
	font-family: inherit;
}

.comment-form-anonymous label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: 500;
	font-size: 14.5px;
}

/*
 * The theme's checkbox reset (appearance:none plus ::before marks) turns this box into an
 * invisible square, which reads as a broken form. Restore a real control and nothing else.
 */
.comment-form-anonymous input[type="checkbox"] {
	position: static;
	width: 20px;
	height: 20px;
	margin: 0;
	opacity: 1;
	visibility: visible;
	transform: none;
	clip: auto;
	clip-path: none;
	accent-color: var(--b, #004851);
	-webkit-appearance: auto;
	appearance: auto;
	direction: ltr;
	flex: 0 0 auto;
	cursor: pointer;
}

.comment-form-anonymous input[type="checkbox"]::before,
.comment-form-anonymous input[type="checkbox"]::after,
.comment-form-anonymous label::before,
.comment-form-anonymous label::after,
.comment-form-anonymous label span::before,
.comment-form-anonymous label span::after {
	content: none !important;
	display: none !important;
}

/* The plugin hides the email note; the field itself is removed, so the note is noise. */
.comment-notes {
	display: none;
}

/* Error pages raised by the plugin's own validation. */
.mediana-error-message {
	max-width: 640px;
	margin: 0 auto;
	padding: 14px 16px;
	border: 1px solid var(--danger, #b42318);
	border-radius: 10px;
	background: rgba(180, 35, 24, .06);
	color: var(--text, #162022);
	font-family: inherit;
	text-align: start;
}

.mediana-error-message p {
	margin: 0;
	font-family: inherit;
}

/* A hidden row must stay hidden whatever the theme says about <p> in a form. */
.comment-form-mobile[hidden],
.comment-form-anonymous[hidden] {
	display: none !important;
}

@media (max-width: 600px) {
	.comment-form-mobile input[type="tel"],
	.comment-form-mobile input[type="text"] {
		max-width: 100%;
		font-size: 16px; /* keeps iOS from zooming the page on focus */
	}
}