/**
 * Notiflix messages of the Kaveh login popup, restyled for Derang.
 *
 * Two things are corrected here:
 * 1. Notiflix caps its layers at z-index 4003, which puts them under the popup
 *    backdrop (99999) and its blur filter, so the messages render blurred.
 * 2. kaveh-login-ajax.js passes the typography *file name* as fontFamily, so the
 *    text falls back to Notiflix's Latin stack.
 *
 * Notiflix writes colors, radius and font as inline styles, hence !important.
 */

[id^="NotiflixReportWrap"],
[id^="NotiflixConfirmWrap"],
[id^="NotiflixLoadingWrap"] {
	z-index: 100010 !important;
}

/* On success the popup shows a toast and a Report at once, so toasts have to sit
   above the Report overlay to stay readable. */
[id^="NotiflixNotifyWrap"] {
	z-index: 100020 !important;
}

/* ---------------------------------------------------------------- Toasts --- */

[id^="NotiflixNotifyWrap"] {
	width: 360px !important;
	max-width: calc(100vw - 32px) !important;
	right: auto !important;
	left: 24px !important;
	top: auto !important;
	bottom: 24px !important;
}

[id^="NotiflixNotifyWrap"] > div {
	margin: 0 0 12px !important;
	padding: 12px !important;
	min-height: 60px !important;
	border: 1px solid #f2f2f2 !important;
	border-radius: 20px !important;
	background: #fff !important;
	box-shadow: 0 18px 44px -14px rgba(16, 17, 14, .28) !important;
	color: #10110e !important;
	font-family: 'Nian', sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 26px !important;
	/* Nian's space glyph is half-width, which runs sentences together at this size. */
	word-spacing: 2px !important;
}

[id^="NotiflixNotifyWrap"] > div:last-child {
	margin-bottom: 0 !important;
}

[id^="NotiflixNotifyWrap"] > div > span.nx-message {
	word-break: normal !important;
	overflow-wrap: anywhere !important;
}

[id^="NotiflixNotifyWrap"] > div.nx-rtl-on > span.nx-with-icon {
	width: calc(100% - 48px) !important;
	margin: 0 48px 0 0 !important;
	padding: 0 !important;
}

/* The bundled glyph is white, so it needs a tinted badge to stay readable on
   the light card. */
[id^="NotiflixNotifyWrap"] > div > .nx-message-icon {
	width: 36px !important;
	height: 36px !important;
	right: 12px !important;
	left: auto !important;
	border-radius: 50% !important;
}

[id^="NotiflixNotifyWrap"] > div.notiflix-notify-success > .nx-message-icon {
	background: #95b193 !important;
}

[id^="NotiflixNotifyWrap"] > div.notiflix-notify-failure > .nx-message-icon {
	background: #e05b4b !important;
}

[id^="NotiflixNotifyWrap"] > div.notiflix-notify-warning > .nx-message-icon {
	background: #eeaf3a !important;
}

[id^="NotiflixNotifyWrap"] > div.notiflix-notify-info > .nx-message-icon {
	background: #26c0d3 !important;
}

/* --------------------------------------------------------------- Reports --- */

[id^="NotiflixReportWrap"] > div[class*="-overlay"] {
	background: rgba(16, 17, 14, .28) !important;
}

[id^="NotiflixReportWrap"] > div[class*="-content"] {
	width: 380px !important;
	padding: 24px !important;
	border: 1px solid #f2f2f2 !important;
	border-radius: 24px !important;
	background: #fff !important;
	box-shadow: 0 24px 60px -18px rgba(16, 17, 14, .3) !important;
	font-family: 'Nian', sans-serif !important;
	word-spacing: 2px !important;
	text-align: center !important;
}

[id^="NotiflixReportWrap"] > div[class*="-content"] > div[class$="-icon"] {
	width: 84px !important;
	height: 84px !important;
	margin: 4px auto 16px !important;
}

/* Notiflix paints its success glyph with a fill attribute on the svg root. */
[id^="NotiflixReportWrap"] svg#NXReportSuccess {
	fill: #95b193;
}

[id^="NotiflixReportWrap"] > * > h5 {
	margin: 0 0 12px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid #f2f2f2 !important;
	color: #10110e !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 28px !important;
	word-break: normal !important;
}

[id^="NotiflixReportWrap"] > * > p {
	margin: 0 0 20px !important;
	padding: 0 !important;
	color: #5c5c5c !important;
	font-size: 14px !important;
	line-height: 26px !important;
	word-break: normal !important;
}

/* Notiflix floats this button left in RTL, which breaks the centred card. */
[id^="NotiflixReportWrap"] a#NXReportButton {
	float: none !important;
	padding: 11px 26px !important;
	border-radius: 32px !important;
	background: #95b193 !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

[id^="NotiflixReportWrap"] a#NXReportButton:hover {
	background: #7f9d7d !important;
	box-shadow: none !important;
}