/*
 * Dienemer — sticky side actions.
 *
 * Source (StickyActions.tsx): each button is `w-14` and grows to `w-64/48/56/56`
 * on hover, revealing its label, with `rounded-l-xl` and a 300ms ease-out slide.
 * The replica had the right icons, links and corners but the buttons carried no
 * label and the rail was pinned to 56px, so nothing could open.
 *
 * Desktop only — the source hides this rail below lg and uses a bottom bar there.
 */

@media (min-width: 1025px) {

	/* the rail sizes to its widest hovered child instead of clamping at 56px */
	#sticky-actions {
		width: auto !important;
		max-width: none !important;
		overflow: visible !important;
		align-items: flex-end;
	}

	#sticky-actions .dm-sticky-item {
		display: block;
		width: 56px;
		max-width: 56px;
		overflow: hidden;
		border-radius: 12px 0 0 12px;
		transition: width .3s ease-out, max-width .3s ease-out, background-color .3s ease-out;
	}

	#sticky-actions .dm-sticky-item .elementor-button-content-wrapper {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0;
	}

	/* Elementor's 16px button padding pushed the icon box 16px right of the
	   pill's centre, so the clipped 56px window showed the icon hugging the right
	   edge — "cut off". The source <a> has no padding: the icon box IS the whole
	   56x56 collapsed pill, and the pill's height comes from it, not from padding. */
	#sticky-actions .dm-sticky-item .elementor-button {
		padding: 0 !important;
	}

	/* the icon keeps its own 56px square so nothing shifts as the button grows */
	#sticky-actions .dm-sticky-item .elementor-button-icon {
		flex: 0 0 56px;
		width: 56px;
		height: 56px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
	}

	#sticky-actions .dm-sticky-item .elementor-button-text {
		flex: 0 0 auto;
		white-space: nowrap;
		text-align: left;
		padding-right: 16px;
		opacity: 0;
		transition: opacity .3s ease-out;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.25;
	}

	/* the phone rail also shows the number, taken from its own tel: href */
	#sticky-actions .dm-sticky-item .dm-sticky-sub {
		display: block;
		font-size: 12px;
		font-weight: 400;
		color: rgba(255, 255, 255, .9);
	}

	/* widths mirror the source's hover:w-* per item */
	#sticky-actions .dm-sticky-item:hover,
	#sticky-actions .dm-sticky-item:focus-visible {
		width: var(--dm-open, 224px);
		max-width: var(--dm-open, 224px);
	}

	#sticky-actions .dm-sticky-item:hover .elementor-button-text,
	#sticky-actions .dm-sticky-item:focus-visible .elementor-button-text {
		opacity: 1;
	}

	#sticky-actions .dm-sticky-item:focus-visible {
		outline: 2px solid #FFFFFF;
		outline-offset: -2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#sticky-actions .dm-sticky-item,
	#sticky-actions .dm-sticky-item .elementor-button-text {
		transition: none;
	}
}