/**
 * Oyolloo Elements — document notice card.
 *
 * The "sending us your documents" panel that sits in the cart, checkout and
 * mini-cart summary columns. Distinct from `.oe-checkout__notice`, which is the
 * full-width brand bar across the top of checkout.
 *
 * Sized for a summary column rather than a content width: the copy is short and
 * the type steps down, so it reads as a footnote to the order rather than
 * competing with the total above it.
 */

/*
 * A section of the summary column, not a card of its own.
 *
 * It used to carry 20px of padding and a #f5f5f5 fill. Every summary column it
 * lives in is already a #f5f5f5 card with 32px of padding, so the fill drew
 * nothing — an invisible box — while the padding pushed this copy 20px further
 * in than every row above it. That is the misalignment the card wrapper made
 * obvious.
 *
 * The red title and its icon are what set the notice apart from the rows around
 * it; it does not need a second background to say so.
 */
.oe-docnote {
	--oe-docnote-accent: #d2202f;

	padding: 0;
	background-color: transparent;
}

.oe-docnote__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-family: var(--oe-font-heading, inherit);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--oe-docnote-accent);
}

.oe-docnote__icon {
	flex: none;
	width: 18px;
	height: 18px;
}

.oe-docnote__body {
	font-family: var(--oe-font-body, inherit);
	font-size: 13px;
	line-height: 1.55;
	color: var(--oe-color-neutral-700, #3d3d3d);
}

.oe-docnote__body p {
	margin: 0 0 8px;
}

.oe-docnote__body p:last-child {
	margin-bottom: 0;
}

.oe-docnote__link {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--oe-color-ink, #181818);
	text-decoration: underline;
	/* The gold underline is the only brand cue at this size; a plain rule
	   reads as body copy and nobody clicks it. */
	text-decoration-color: var(--oe-color-brand, #ffc700);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.oe-docnote__link:hover,
.oe-docnote__link:focus-visible {
	color: var(--oe-docnote-accent);
}