/* Tammuz / Smoove Opt-in Warning Modal
 *
 * Supports:
 * 1. Old HTML Widget modal: #optin-warning-modal
 * 2. Future general.js modal: #tammuz-optin-warning-modal
 */

/* Overlay */
html body #optin-warning-modal,
html body #tammuz-optin-warning-modal {
	display: none !important;
	position: fixed !important;
	z-index: 2147483647 !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	padding: 16px !important;
	box-sizing: border-box !important;
	background: rgba(0, 0, 0, 0.65) !important;
}

html body #optin-warning-modal.is-open,
html body #tammuz-optin-warning-modal.is-open {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Direction for old HTML widget modal */
html[lang^="he"] body #optin-warning-modal {
	direction: rtl !important;
}

html:not([lang^="he"]) body #optin-warning-modal {
	direction: ltr !important;
}

/* Direction for future JS modal */
html body #tammuz-optin-warning-modal[dir="rtl"] {
	direction: rtl !important;
}

html body #tammuz-optin-warning-modal[dir="ltr"] {
	direction: ltr !important;
}

/* Modal box */
html body #optin-warning-modal .optin-warning-modal__box,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__box {
	position: relative !important;
	z-index: 2147483647 !important;
	width: 100% !important;
	max-width: 600px !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	color: #333333 !important;
	border-radius: 18px !important;
	padding: 32px 28px !important;
	text-align: center !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
	font-family: inherit !important;
}

/* Title */
html body #optin-warning-modal .optin-warning-modal__title,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__title {
	margin: 0 0 18px !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #8D316E !important;
}

/* Text */
html body #optin-warning-modal .optin-warning-modal__text,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__text {
	margin: 0 0 26px !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: #333333 !important;
}

html body #optin-warning-modal .optin-warning-modal__text p,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__text p {
	margin: 0 0 14px !important;
}

html body #optin-warning-modal .optin-warning-modal__text p:last-child,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__text p:last-child {
	margin-bottom: 0 !important;
}

/* Actions */
html body #optin-warning-modal .optin-warning-modal__actions,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__actions {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Base button */
html body #optin-warning-modal .optin-warning-modal__button,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__button {
	position: relative !important;
	z-index: 2147483647 !important;
	width: 100% !important;
	max-width: 440px !important;
	border-radius: 8px !important;
	padding: 13px 20px !important;
	font-family: inherit !important;
	line-height: 1.35 !important;
	cursor: pointer !important;
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease,
		background 0.15s ease !important;
}


/* Primary button */
html body #optin-warning-modal .optin-warning-modal__button--continue,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__button--continue {
	border: 1px solid #22B3AE !important;
	background: #22B3AE !important;
	color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	box-shadow: 0 7px 16px rgba(34, 179, 174, 0.28) !important;
	white-space: normal !important;
	overflow-wrap: break-word !important;
	word-break: normal !important;	
}

html body #optin-warning-modal .optin-warning-modal__button--continue:hover,
html body #optin-warning-modal .optin-warning-modal__button--continue:focus,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__button--continue:hover,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__button--continue:focus {
	border-color: #8D316E !important;
	background: #8D316E !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 9px 20px rgba(141, 49, 110, 0.32) !important;
}

/* Secondary button */
html body #optin-warning-modal .optin-warning-modal__button--fix,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__button--fix {
	width: auto !important;
	max-width: none !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: #777777 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	padding: 8px 14px !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
}

html body #optin-warning-modal .optin-warning-modal__button--fix:hover,
html body #optin-warning-modal .optin-warning-modal__button--fix:focus,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__button--fix:hover,
html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__button--fix:focus {
	background: #f5f5f5 !important;
	color: #555555 !important;
}

/* Mobile */
@media (max-width: 600px) {
	html body #optin-warning-modal .optin-warning-modal__box,
	html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__box {
		padding: 26px 20px !important;
	}

	html body #optin-warning-modal .optin-warning-modal__title,
	html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__title {
		font-size: 24px !important;
	}

	html body #optin-warning-modal .optin-warning-modal__text,
	html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__text {
		font-size: 16px !important;
	}

	html body #optin-warning-modal .optin-warning-modal__button--continue,
	html body #tammuz-optin-warning-modal .tammuz-optin-warning-modal__button--continue {
		font-size: 16px !important;
	}
}