/**
 * NT – הגבלת כמות רכישה
 * בועת הסבר הקשרית מעל שדה הכמות או הכפתור שעליהם הלקוח פעל.
 */

.ntmq-bubble {
	--ntmq-arrow-x: 50%;
	direction: rtl;
	box-sizing: border-box;
	position: fixed;
	z-index: 2147483647;
	display: block;
	width: max-content;
	max-width: min(340px, calc(100vw - 24px));
	padding: 8px 12px;
	border: 1px solid #ffd39e;
	border-radius: 8px;
	background: #fff7ed;
	box-shadow: 0 8px 24px rgba(73, 43, 0, .14);
	color: #7a3d00;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	text-align: right;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.ntmq-bubble::before {
	content: '';
	position: absolute;
	bottom: -6px;
	left: calc(var(--ntmq-arrow-x) - 5px);
	width: 10px;
	height: 10px;
	border-right: 1px solid #ffd39e;
	border-bottom: 1px solid #ffd39e;
	background: #fff7ed;
	transform: rotate(45deg);
}

.ntmq-bubble.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ntmq-bubble.is-below {
	transform: translateY(4px);
}

.ntmq-bubble.is-below.is-visible {
	transform: translateY(0);
}

.ntmq-bubble.is-below::before {
	top: -6px;
	bottom: auto;
	border: 0;
	border-top: 1px solid #ffd39e;
	border-left: 1px solid #ffd39e;
}

.ntmq-bubble.is-global {
	transform: translate(-50%, -4px);
}

.ntmq-bubble.is-global.is-visible {
	transform: translate(-50%, 0);
}

.ntmq-bubble.is-global::before {
	display: none;
}

/* הבהוב קצר כשהמערכת מתקנת את הכמות. */
.ntmq-flash {
	animation: ntmq-flash 180ms ease-out 1;
}

@keyframes ntmq-flash {
	0% {
		background-color: rgba(255, 214, 130, .85);
		box-shadow: 0 0 0 2px rgba(232, 160, 20, .55);
	}

	100% {
		background-color: transparent;
		box-shadow: 0 0 0 2px rgba(232, 160, 20, 0);
	}
}

@media (max-width: 782px) {
	.ntmq-bubble {
		max-width: calc(100vw - 24px);
		padding: 9px 12px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ntmq-bubble {
		transition: none;
	}

	.ntmq-flash {
		animation: none;
	}
}
