.rpd-dock-menu {
	/* Centralized fallbacks — avoids repeating a default at every var() call site below. */
	--background: #FFFFFF;
	--icon_color: #666666;
	--active_color: #2D7BF4;
	--active_bg_color: #EAF1FE;
	--font_weight: 400;
	--font_size: 12px;
	--font_color: #666666;
	--icon_size: 24px;
	--dock_thickness: 0px;
	--dock_transition_duration: 300ms;
	--border_color: #E5E5E5;
	--border_width: 1px;
	--shadow_color: rgba(0, 0, 0, 0.15);
	--offset_x: 0px;
	--offset_y: 0px;
	--item_gap: 0px;
	--dock_padding: 0px;
	--dock_radius: 0px;
	--dock_blur: 12px;
	--dock_opacity: 1;
	--item_radius: 0px;
	--dock_z_index: 9990;

	background: var(--background);
	border-radius: var(--dock_radius);
	display: none;
	opacity: var(--dock_opacity);
	padding: var(--dock_padding);
	position: fixed;
	z-index: var(--dock_z_index);
}

.rpd-dock-menu--glass {
	backdrop-filter: blur(var(--dock_blur)) saturate(180%);
	-webkit-backdrop-filter: blur(var(--dock_blur)) saturate(180%);
}

/* @media can't consume var(), so these numbers are kept in sync by hand with
   --rpd-bp-sm/--rpd-bp-md in style.css. */
@media (max-width: 767px) {
	.rpd-dock-menu--show-smartphones { display: block; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.rpd-dock-menu--show-tablet { display: block; }
}

@media (min-width: 992px) {
	.rpd-dock-menu--show-desktop { display: block; }
}

/* Edge = anchor side, align = distribution along it. Left/Right stay icon-only for now (dock-menu.php). */
.rpd-dock-menu--edge-bottom,
.rpd-dock-menu--edge-top {
	left: 0;
	right: 0;
}

.rpd-dock-menu--edge-bottom {
	bottom: var(--offset_y);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.rpd-dock-menu--edge-top {
	top: var(--offset_y);
}

.rpd-dock-menu--edge-bottom.rpd-dock-menu--align-start,
.rpd-dock-menu--edge-top.rpd-dock-menu--align-start {
	left: var(--offset_x);
	right: auto;
}

.rpd-dock-menu--edge-bottom.rpd-dock-menu--align-center,
.rpd-dock-menu--edge-top.rpd-dock-menu--align-center {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.rpd-dock-menu--edge-bottom.rpd-dock-menu--align-end,
.rpd-dock-menu--edge-top.rpd-dock-menu--align-end {
	left: auto;
	right: var(--offset_x);
}

.rpd-dock-menu--edge-left,
.rpd-dock-menu--edge-right {
	width: auto;
}

.rpd-dock-menu--edge-left {
	left: var(--offset_x);
}

.rpd-dock-menu--edge-right {
	right: var(--offset_x);
}

.rpd-dock-menu--edge-left.rpd-dock-menu--align-stretch,
.rpd-dock-menu--edge-right.rpd-dock-menu--align-stretch {
	bottom: var(--offset_y);
	top: var(--offset_y);
}

.rpd-dock-menu--edge-left.rpd-dock-menu--align-start,
.rpd-dock-menu--edge-right.rpd-dock-menu--align-start {
	top: var(--offset_y);
}

.rpd-dock-menu--edge-left.rpd-dock-menu--align-center,
.rpd-dock-menu--edge-right.rpd-dock-menu--align-center {
	top: 50%;
	transform: translateY(-50%);
}

.rpd-dock-menu--edge-left.rpd-dock-menu--align-end,
.rpd-dock-menu--edge-right.rpd-dock-menu--align-end {
	bottom: var(--offset_y);
}

.rpd-dock-menu__list {
	display: flex;
	flex-direction: row;
	gap: var(--item_gap);
	height: var(--dock_thickness);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rpd-dock-menu--edge-left .rpd-dock-menu__list,
.rpd-dock-menu--edge-right .rpd-dock-menu__list {
	flex-direction: column;
	height: auto;
	width: auto;
}

/* Stretched left/right dock: the list fills the full edge and dm_item_distribution
   places the item group inside it (the --distribute-* class is only rendered there). */
.rpd-dock-menu--edge-left.rpd-dock-menu--align-stretch .rpd-dock-menu__list,
.rpd-dock-menu--edge-right.rpd-dock-menu--align-stretch .rpd-dock-menu__list {
	height: 100%;
}

.rpd-dock-menu--distribute-start .rpd-dock-menu__list {
	justify-content: flex-start;
}

.rpd-dock-menu--distribute-center .rpd-dock-menu__list {
	justify-content: center;
}

.rpd-dock-menu--distribute-end .rpd-dock-menu__list {
	justify-content: flex-end;
}

.rpd-dock-menu--distribute-space-between .rpd-dock-menu__list {
	justify-content: space-between;
}

.rpd-dock-menu__item {
	flex: 1 1 0;
}

.rpd-dock-menu--edge-left .rpd-dock-menu__item,
.rpd-dock-menu--edge-right .rpd-dock-menu__item,
.rpd-dock-menu--align-start .rpd-dock-menu__item,
.rpd-dock-menu--align-center .rpd-dock-menu__item,
.rpd-dock-menu--align-end .rpd-dock-menu__item {
	flex: 0 0 auto;
}

.rpd-dock-menu__link {
	align-items: center;
	border-radius: var(--item_radius);
	color: var(--icon_color);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	text-decoration: none;
}

.rpd-dock-menu--edge-left .rpd-dock-menu__link,
.rpd-dock-menu--edge-right .rpd-dock-menu__link {
	flex-direction: row;
	height: auto;
	justify-content: flex-start;
	min-width: var(--dock_thickness);
	padding: 10px;
	width: auto;
}

.rpd-dock-menu--edge-left .rpd-dock-menu__label,
.rpd-dock-menu--edge-right .rpd-dock-menu__label {
	margin-top: 0;
}

.rpd-dock-menu__icon {
	align-items: center;
	display: inline-flex;
	font-size: var(--icon_size);
	justify-content: center;
	line-height: 1;
}

.rpd-dock-menu__icon img {
	display: block;
	height: var(--icon_size);
	object-fit: contain;
	width: var(--icon_size);
}

.rpd-dock-menu__label {
	color: var(--font_color);
	font-size: var(--font_size);
	font-weight: var(--font_weight);
	margin-top: 2px;
}

/* Collapsed via width/opacity, not clip-rect sr-only, so the left/right dock can expand
   it on hover/focus (kuhnbrasil.com.br's "#tools-navigation": whole dock reveals together,
   not per-item). Top/Bottom icon-only stays collapsed — no reveal, no layout shift. */
.rpd-dock-menu--icon-only .rpd-dock-menu__label {
	margin-left: 0;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-width var(--dock_transition_duration) cubic-bezier(0.42, 0, 0.58, 1),
		margin-left var(--dock_transition_duration) cubic-bezier(0.42, 0, 0.58, 1),
		opacity var(--dock_transition_duration) ease;
	white-space: nowrap;
}

.rpd-dock-menu--edge-left.rpd-dock-menu--icon-only:hover .rpd-dock-menu__label,
.rpd-dock-menu--edge-left.rpd-dock-menu--icon-only:focus-within .rpd-dock-menu__label,
.rpd-dock-menu--edge-right.rpd-dock-menu--icon-only:hover .rpd-dock-menu__label,
.rpd-dock-menu--edge-right.rpd-dock-menu--icon-only:focus-within .rpd-dock-menu__label {
	margin-left: 10px;
	max-width: 200px;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rpd-dock-menu--icon-only .rpd-dock-menu__label {
		transition: none !important;
	}
}

.rpd-dock-menu__item--active .rpd-dock-menu__link {
	color: var(--active_color);
}

.rpd-dock-menu__item--active .rpd-dock-menu__label {
	color: var(--active_color);
}

/* Border/shadow face away from the docked edge, toward the page content. */
.rpd-dock-menu--border.rpd-dock-menu--edge-bottom {
	border-top: var(--border_width) solid var(--border_color);
}

.rpd-dock-menu--border.rpd-dock-menu--edge-top {
	border-bottom: var(--border_width) solid var(--border_color);
}

.rpd-dock-menu--border.rpd-dock-menu--edge-left {
	border-right: var(--border_width) solid var(--border_color);
}

.rpd-dock-menu--border.rpd-dock-menu--edge-right {
	border-left: var(--border_width) solid var(--border_color);
}

.rpd-dock-menu--shadow.rpd-dock-menu--edge-bottom {
	box-shadow: 0 -2px 8px var(--shadow_color);
}

.rpd-dock-menu--shadow.rpd-dock-menu--edge-top {
	box-shadow: 0 2px 8px var(--shadow_color);
}

.rpd-dock-menu--shadow.rpd-dock-menu--edge-left {
	box-shadow: 2px 0 8px var(--shadow_color);
}

.rpd-dock-menu--shadow.rpd-dock-menu--edge-right {
	box-shadow: -2px 0 8px var(--shadow_color);
}

/* Pill padding stays reserved (transparent) even when inactive, so hover/focus/active
   only toggles the background color — never resizes the icon box or shifts the label. */
.rpd-dock-menu--active-bg-pill .rpd-dock-menu__icon {
	background: transparent;
	border-radius: 999px;
	padding: 6px 14px;
}

.rpd-dock-menu__item--active-pill .rpd-dock-menu__icon {
	background: var(--active_bg_color);
}

.rpd-dock-menu__item--active-full .rpd-dock-menu__link {
	background: var(--active_bg_color);
}

/* Hover/focus reuse the current-page item's active color + background style. */
.rpd-dock-menu__link:hover,
.rpd-dock-menu__link:focus-visible {
	color: var(--active_color);
}

.rpd-dock-menu__link:hover .rpd-dock-menu__label,
.rpd-dock-menu__link:focus-visible .rpd-dock-menu__label {
	color: var(--active_color);
}

/* Color comes from the sitewide `:focus-visible` rule (style.css ~L11453); width/offset only, to keep the ring inside this compact target. */
.rpd-dock-menu__link:focus-visible {
	outline-width: 2px;
	outline-offset: -2px;
}

.rpd-dock-menu--active-bg-pill .rpd-dock-menu__link:hover .rpd-dock-menu__icon,
.rpd-dock-menu--active-bg-pill .rpd-dock-menu__link:focus-visible .rpd-dock-menu__icon {
	background: var(--active_bg_color);
}

.rpd-dock-menu--active-bg-full .rpd-dock-menu__link:hover,
.rpd-dock-menu--active-bg-full .rpd-dock-menu__link:focus-visible {
	background: var(--active_bg_color);
}