/**
 * Quote count icon and floating bubble styles, scoped to the add-on's own
 * wpdevart-raqp-count classes (theme and WooCommerce elements are never
 * restyled). The icon takes the color and font of its place, like the
 * Mini-Cart; the badge and the bubble colors can be changed with the custom
 * properties --wpdevart-raqp-count-badge-bg, --wpdevart-raqp-count-badge-color,
 * --wpdevart-raqp-bubble-bg and --wpdevart-raqp-bubble-color.
 *
 * @package WPDEVART_RAQP
 */

.wpdevart-raqp-count {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em;
	color: inherit;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.wpdevart-raqp-count:hover,
.wpdevart-raqp-count:focus {
	color: inherit;
	text-decoration: none;
}

/* Hooked beside a Mini-Cart (an inline-block on the text baseline): on the
   baseline too, so both icons line up whatever padding the theme gives the
   Mini-Cart button. */
.wpdevart-raqp-count.wpdevart-raqp-count--beside-cart {
	vertical-align: baseline;
}

.wpdevart-raqp-count[hidden],
.wpdevart-raqp-count--hide-empty[data-count="0"],
.wpdevart-raqp-count-bubble[hidden] {
	display: none !important;
}

/* A crowded header row (set by the script only while the icon would push the
   row past its box, e.g. on a phone): the icon moves closer to the item
   before it, then the row that holds it narrows its own gaps, and when that
   is not enough the icon is left out at this width. Without the icon the
   row keeps the theme's gaps. */
.wpdevart-raqp-count.wpdevart-raqp-count--tight {
	margin-inline-start: calc(-1 * var(--wpdevart-raqp-count-pull, 0px));
}

:has(> .wpdevart-raqp-count--snug.wpdevart-raqp-count--snug) {
	column-gap: 10px;
}

.wpdevart-raqp-count.wpdevart-raqp-count--no-room {
	display: none !important;
}

.wpdevart-raqp-count__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.wpdevart-raqp-count__icon svg {
	display: block;
	width: 1.5em;
	height: 1.5em;
}

.wpdevart-raqp-count__label {
	font: inherit;
}

.wpdevart-raqp-count__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
	word-wrap: normal !important;
}

.wpdevart-raqp-count__badge {
	position: absolute;
	top: 0;
	left: 1.15em;
	inset-inline-start: 1.15em;
	box-sizing: border-box;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.35em;
	border-radius: 0.75em;
	background: var(--wpdevart-raqp-count-badge-bg, #e2401c);
	color: var(--wpdevart-raqp-count-badge-color, #fff);
	font-size: 0.72em;
	font-weight: 600;
	line-height: 1.5em;
	text-align: center;
	white-space: nowrap;
}

[dir="rtl"] .wpdevart-raqp-count__badge {
	right: 1.15em;
	left: auto;
}

.wpdevart-raqp-count[data-count="0"] .wpdevart-raqp-count__badge {
	display: none;
}

/* Floating bubble ------------------------------------------------------- */

/* --wpdevart-raqp-bubble-lift: set by the script when a bar fixed to the
   bottom of the screen (a theme's handheld footer bar) covers the corner. */
.wpdevart-raqp-count-bubble {
	position: fixed;
	right: 24px;
	bottom: calc(24px + var(--wpdevart-raqp-bubble-lift, 0px));
	inset-inline-end: 24px;
	z-index: 9990;
}

[dir="rtl"] .wpdevart-raqp-count-bubble {
	right: auto;
	left: 24px;
}

.wpdevart-raqp-count.wpdevart-raqp-count--bubble {
	justify-content: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 50%;
	background: var(--wpdevart-raqp-bubble-bg, #fff);
	color: var(--wpdevart-raqp-bubble-color, #1e1e1e);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	font-size: 16px;
}

.wpdevart-raqp-count.wpdevart-raqp-count--bubble:hover,
.wpdevart-raqp-count.wpdevart-raqp-count--bubble:focus {
	color: var(--wpdevart-raqp-bubble-color, #1e1e1e);
}

.wpdevart-raqp-count.wpdevart-raqp-count--bubble:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.wpdevart-raqp-count--bubble .wpdevart-raqp-count__badge {
	top: 8px;
	left: 30px;
	inset-inline-start: 30px;
}

[dir="rtl"] .wpdevart-raqp-count--bubble .wpdevart-raqp-count__badge {
	right: 30px;
	left: auto;
}

@media (max-width: 600px) {
	.wpdevart-raqp-count-bubble {
		right: 16px;
		bottom: calc(16px + var(--wpdevart-raqp-bubble-lift, 0px));
		inset-inline-end: 16px;
	}

	[dir="rtl"] .wpdevart-raqp-count-bubble {
		right: auto;
		left: 16px;
	}
}

@media print {
	.wpdevart-raqp-count-bubble {
		display: none !important;
	}
}

/* Block editor preview -------------------------------------------------- */

.wpdevart-raqp-count--editor .wpdevart-raqp-count__icon .dashicon {
	width: 1.5em;
	height: 1.5em;
	font-size: 1.5em;
}