/*
 * Share dialog (afb/share-dialog): modal form, response messages and confirmation notice.
 * Breakpoint: 990px (--wp--custom--breakpoint--tablet).
 */

.dialogCustom label {
	font-size: var(--wp--preset--font-size--s);
	color: var(--wp--preset--color--grey-900);
	margin-bottom: var(--wp--preset--spacing--s);
}

.dialogCustom input {
	border: 1px solid var(--wp--preset--color--afb-black);
	margin-bottom: var(--wp--preset--spacing--xs);
}

.dialogCustom input:not([type=checkbox]) {
	padding: var(--wp--preset--spacing--m);
}

.dialogCustom input[type=email],
.dialogCustom input[type=text] {
	width: 100%;
}

.dialogCustom input::-moz-placeholder {
	color: var(--wp--preset--color--grey-700);
	font-style: italic;
	font-weight: lighter;
	font-size: var(--wp--preset--font-size--xs);
}

.dialogCustom input::placeholder {
	color: var(--wp--preset--color--grey-700);
	font-style: italic;
	font-weight: lighter;
	font-size: var(--wp--preset--font-size--xs);
}

@media (min-width: 990px) {
	.dialogCustom input::-moz-placeholder {
		font-size: var(--wp--preset--font-size--s);
	}

	.dialogCustom input::placeholder {
		font-size: var(--wp--preset--font-size--s);
	}
}

.dialogCustom input:disabled {
	color: var(--wp--preset--color--grey-700);
	border: solid 1px var(--wp--preset--color--grey-700);
}

.dialogCustom textarea {
	width: 100%;
	min-height: 150px;
	border: 1px solid var(--wp--preset--color--afb-black);
	padding: var(--wp--preset--spacing--m);
	margin-bottom: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--m);
}

.dialogCustom textarea::-moz-placeholder {
	color: var(--wp--preset--color--grey-700);
	font-style: italic;
	font-weight: lighter;
	font-size: var(--wp--preset--font-size--xs);
}

.dialogCustom textarea::placeholder {
	color: var(--wp--preset--color--grey-700);
	font-style: italic;
	font-weight: lighter;
	font-size: var(--wp--preset--font-size--xs);
}

@media (min-width: 990px) {
	.dialogCustom textarea::-moz-placeholder {
		font-size: var(--wp--preset--font-size--s);
	}

	.dialogCustom textarea::placeholder {
		font-size: var(--wp--preset--font-size--s);
	}
}

.dialogCustom .button {
	border-radius: 999em;
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--xl);
	display: block;
	border: 1px solid;
	text-transform: uppercase;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
	.dialogCustom .button {
		transition: background 0.5s;
	}
}

.dialogCustom {
	background: var(--wp--preset--color--afb-white);
	padding: var(--wp--preset--spacing--l);
}

.dialogCustom__header {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--s);
	font-size: var(--wp--preset--font-size--l);
}

.dialogCustom__title {
	font-size: var(--wp--preset--font-size--l);
	font-weight: bold;
	margin-bottom: var(--wp--preset--spacing--s);
}

/*
 * Subtitle (title of the shared post, filled by the store): bold like the title.
 * No font-weight preset exists in theme.json; 700 matches the bundled bold face.
 */
.dialogCustom__header > p:not(.dialogCustom__title) {
	font-weight: 700;
}

.shareForm {
	max-width: 650px;
	margin-bottom: var(--wp--preset--spacing--m);
}

.shareForm .form__field {
	flex-direction: column;
	align-items: inherit;
}

.shareForm .error {
	color: #dc3545;
	font-size: var(--wp--preset--font-size--s);
}

.shareForm__button {
	margin: 0 auto;
}

.shareForm__response {
	display: inline-block;
}

.share__loader {
	text-align: center;
}

.share__loader .loader {
	border-color: var(--wp--preset--color--afb-black);
	border-bottom-color: transparent;
}

.shareForm__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

dialog.dialogCustom--shareForm {
	width: 90%;
	max-width: 700px;
	max-height: 92vh;
	margin: auto;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 0 10px var(--wp--preset--color--afb-black);
	overflow: auto;
	color: var(--wp--preset--color--grey-900);
}

dialog.dialogCustom--shareForm::backdrop {
	background: rgba(0, 0, 0, 0.75);
}

dialog.dialogCustom--shareForm:not([open]) {
	display: none;
}

.dialogCustom__close {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--grey-900);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dialogCustom__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--afb-black);
	outline-offset: 2px;
}

.shareNotice {
	position: fixed;
	top: 2rem;
	right: 2rem;
	z-index: 101;
	max-width: 320px;
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	border-radius: 4px;
	background: #11b683;
	color: var(--wp--preset--color--afb-white);
	font-size: var(--wp--preset--font-size--s);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	display: none;
}

.shareNotice__title {
	display: block;
	font-weight: bold;
}

.dialogCustom .button {
	background: var(--wp--preset--color--afb-dark-red);
	color: var(--wp--preset--color--afb-white);
	border-color: var(--wp--preset--color--afb-dark-red);
}

.dialogCustom .button:hover,
.dialogCustom .button:focus {
	background: var(--wp--preset--color--afb-dark-red);
	box-shadow: 0 5px 10px -3px var(--wp--preset--color--afb-dark-red);
}

.dialogCustom .button:disabled {
	background: var(--wp--preset--color--afb-pale-red);
	color: var(--wp--preset--color--afb-dark-red);
	border-color: var(--wp--preset--color--afb-pale-red);
}

.dialogCustom .button:disabled:hover,
.dialogCustom .button:disabled:focus {
	box-shadow: none;
}