/*
 * DiunaDent — floating "Umów wizytę" call-to-action (W§4.2).
 *
 * A copper pill in the bottom-right corner, always visible, the whole surface
 * being the click-to-call link. Two things it must not do, both learned from the
 * card it replaced: it must not hide content that cannot be scrolled back into
 * view (that card was 320x174 and sat on the price column), and it must not be
 * the brightest object on a black-and-copper page (that card was #f9f9f9).
 *
 * Two overlays it steps aside for:
 *   1. the consent banner owns the bottom edge until a choice is made —
 *      Complianz blocks pointer events outside its dialog, so a CTA left
 *      underneath would be visible but dead (.dd-cta--consent);
 *   2. the intro overlay — the pill used to flash on the first screen for the
 *      ~2.5 s before the overlay took over.
 */

.dd-cta {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 900;
}

.dd-cta--consent,
.dd-intro-active .dd-cta {
	display: none;
}

.dd-cta__pill {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-height: 60px;
	padding: .5rem 1.3rem .5rem 1.05rem;
	border-radius: 999px;
	background: var(--dd-color-accent);
	color: var(--dd-color-ink);
	text-decoration: none;
	box-shadow:
		0 10px 28px rgba(0, 0, 0, .3),
		0 2px 6px rgba(0, 0, 0, .18);
}

.dd-cta__pill:hover,
.dd-cta__pill:focus-visible {
	background: var(--dd-color-accent-dark);
	color: #fff;
}

/* The global focus ring (main.css) is a box-shadow, which would replace the
   pill's own drop shadow and leave it flat exactly when it is being pointed at.
   Both, in the order that puts the ring against the button edge. */
.dd-cta__pill:focus-visible {
	box-shadow:
		0 0 0 2px var(--dd-color-ink),
		0 10px 28px rgba(0, 0, 0, .3),
		0 2px 6px rgba(0, 0, 0, .18);
}

@media (prefers-reduced-motion: no-preference) {
	.dd-cta__pill {
		transition: background-color .2s ease, color .2s ease, transform .2s ease;
	}

	.dd-cta__pill:hover {
		transform: translateY(-2px);
	}
}

.dd-cta__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.dd-cta__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.dd-cta__label {
	font-family: var(--dd-font-body);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.dd-cta__phone {
	font-family: var(--dd-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .01em;
}

/* No confirmed number yet: the pill carries the label alone and centres it. */
.dd-cta__pill--label-only .dd-cta__label {
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: none;
}

@media (max-width: 990.98px) {
	.dd-cta {
		right: 1rem;
		bottom: 1rem;
	}
}

/* Phones: the pill keeps its 44 px+ target but gives up the letter-spaced
   label size, so it stays under half the width of a 390 px screen. */
@media (max-width: 600px) {
	.dd-cta {
		right: .75rem;
		bottom: .75rem;
	}

	.dd-cta__pill {
		min-height: 52px;
		padding: .45rem 1.05rem .45rem .85rem;
		gap: .55rem;
	}

	.dd-cta__label {
		font-size: .62rem;
		letter-spacing: .1em;
	}

	.dd-cta__phone {
		font-size: 1.02rem;
	}
}

/*
 * Short windows at laptop widths get the phone's GEOMETRY and keep the desktop
 * label. The compact pill above was drawn for narrow screens - it gives up the
 * letter-spaced label to stay under half of a 390px screen - and a 1093x614
 * laptop is short, not narrow. What it needs is the 20px of height, which the
 * hero portrait in the same corner gets back (see --dd-cta-reserve in main.css).
 */
@media (min-width: 601px) and (max-height: 740px) {
	.dd-cta {
		bottom: .75rem;
	}

	.dd-cta__pill {
		min-height: 52px;
		padding: .45rem 1.05rem .45rem .85rem;
	}
}