/* ===== "-10% online" badge on order_visit buttons =====
   Active when .has_online_badge is
     - on the button itself  (page headers: buttons_order_ask.html, every page)
     - on a wrapper          (log_visit block, header_search_box)
   Doctor cards (buttons_ask_order.html) are NOT affected. */

.order_visit.has_online_badge,
.has_online_badge .order_visit {
	position: relative;
	overflow: visible;
}

/* Bubble overlaps the button's top-right corner:
   ~40% of it sits above the button, the tail points into it. */
.order_visit.has_online_badge::after,
.has_online_badge .order_visit::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 43%;
	min-width: 110px;
	max-width: 230px;
	aspect-ratio: 107 / 36;
	transform: translateY(-40%);
	background: no-repeat center / contain;
	pointer-events: none;       /* clicks still go to the button */
	z-index: 2;
}

.order_visit.online_badge_lv::after, .online_badge_lv .order_visit::after { background-image: url('/css/badges/but_lv.svg'); }
.order_visit.online_badge_ru::after, .online_badge_ru .order_visit::after { background-image: url('/css/badges/but_ru.svg'); }
.order_visit.online_badge_en::after, .online_badge_en .order_visit::after { background-image: url('/css/badges/but_en.svg'); }

/* Small text link in the site header -> small badge above it */
#header_search_box.has_online_badge .order_visit::after {
	top: auto;
	bottom: calc(100% - 4px);
	right: -10px;
	width: 80px;
	min-width: 0;
	transform: none;
}