/**
 * Product page file buttons.
 *
 * Tokens from the approved Figma frame "File Management - Front End":
 * 290x50 pill, radius 50, #00aeef, 23px icon on a white disc, 17px Medium label,
 * dropdown panel 290 wide, radius 12, shadow 0 4px 4px rgba(0,0,0,.1).
 */

.rfm-buttons {
	/* Overridden inline from the Button colour setting; this is the fallback. */
	--rfm-accent: #00aeef;

	display: flex;
	flex-wrap: wrap;
	/* Matches the row rhythm of the theme's own document pills above — measured
	   at 10px between rows — so these read as the next row of the same block
	   rather than a detached group. */
	gap: 10px;
	margin: 10px 0 0;
}

.rfm-button-group {
	position: relative;
	/* Shrink-wraps the button so the panel below can inherit its exact width. */
	display: inline-block;
	max-width: 100%;
}

/* Two-class scoping is needed to outrank the theme's [type="button"] rule,
   which has equal specificity and loads later. */
.rfm-buttons .rfm-button {
	display: inline-flex;
	align-items: center;
	/* The theme sets flex-wrap on descendants of the summary; without this the
	   chevron drops onto its own line once the label runs long. */
	flex-wrap: nowrap;
	gap: 0;
	box-sizing: border-box;
	/* A step up from the site's 24px document pills — 30px, bold — so these
	   read as buttons without dwarfing the row they sit in. */
	width: auto;
	max-width: 100%;
	min-height: 30px;
	padding: 5px 6px 5px 5px;
	border: 0;
	border-radius: 9999px;
	background: var(--rfm-accent);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: background 0.15s ease;
}

.rfm-buttons .rfm-button:hover,
.rfm-buttons .rfm-button:focus {
	/* Darkened from the accent rather than a second hard-coded colour. */
	background: var(--rfm-accent);
	filter: brightness(0.92);
	color: #fff;
}

.rfm-button:focus-visible {
	outline: 2px solid #1e2327;
	outline-offset: 2px;
}

.rfm-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
}

.rfm-button__icon img {
	width: 14px;
	height: 14px;
	object-fit: contain;
}

.rfm-button__label {
	flex: 0 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 20px;
	padding: 0 6px;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rfm-button__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: 2px;
	transform: rotate(90deg);
	transition: transform 0.15s ease;
	filter: brightness(0) invert(1);
}

.rfm-button--toggle[aria-expanded="true"] .rfm-button__chevron {
	transform: rotate(-90deg);
}

/* ------------------------------------------------------------- File panel */

.rfm-filepanel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	box-sizing: border-box;
	/* The button is now only as wide as its label, so the panel sets its own
	   width: wide enough for a file name, never past the screen. */
	width: 240px;
	max-width: calc(100vw - 32px);
	/* Figma insets the panel content by 20px within a 290px panel; kept
	   proportional at this reduced scale. */
	padding: 14px 0;
	border: 1px solid #f7f7f7;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.rfm-filepanel[hidden] {
	display: none;
}

.rfm-filepanel__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	color: #000;
	text-decoration: none;
}

/* The design's divider is inset from both edges rather than running the full
   width of the panel, so it is drawn per row instead of as a border. */
.rfm-filepanel__row + .rfm-filepanel__row::before {
	content: "";
	position: absolute;
	top: 0;
	left: 16px;
	right: 16px;
	height: 1px;
	background: #e9e9ee;
}

.rfm-filepanel__row:hover,
.rfm-filepanel__row:focus {
	background: #f7fcff;
	color: #000;
}

.rfm-filepanel__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 39px;
	height: 19px;
	padding: 0 6px;
	border: 1px solid #d5352c;
	border-radius: 12px;
	background: #ffd2d2;
	font-size: 10px;
	font-weight: 500;
	color: #d5352c;
}

.rfm-filepanel__badge.rfm-badge--purple {
	border-color: #af52de;
	background: #edcaff;
	color: #af52de;
}

.rfm-filepanel__name {
	font-size: 12px;
	letter-spacing: 0.5px;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------- Phone and tablet */

/* Below the large breakpoint the theme centres the whole summary — title,
   identifier pills, categories line — so the buttons follow. Centring each
   wrapped row on its own leaves both edges ragged, so instead they are laid
   out as a single column sized to the longest label: every button gets that
   same width and the column is centred, which lines both edges up without
   stretching short labels across the full column.

   This block has to stay below the .rfm-button rules above — it matches their
   specificity, so source order is what settles the width. */
@media (max-width: 1023px) {
	.rfm-buttons {
		display: grid;
		grid-template-columns: minmax(0, max-content);
		justify-content: center;
	}

	.rfm-button-group {
		display: block;
		width: 100%;
	}

	.rfm-buttons .rfm-button {
		width: 100%;
	}

	/* The pill is now wider than its label, so the chevron is pinned to the
	   right edge rather than left sitting against the text. */
	.rfm-button__chevron {
		margin-left: auto;
	}
}

@media (max-width: 767px) {
	.rfm-buttons {
		gap: 8px;
	}

	.rfm-filepanel {
		min-width: 0;
		width: 240px;
	}
}

/* Inside the page's own row of pills the wrapper steps aside, so the buttons
   wrap and space exactly like the pills beside them. Last in the file so it
   outranks the phone layout above. */
.rfm-buttons.rfm-buttons--inline {
	display: contents;
}

.rfm-buttons--inline .rfm-button-group {
	display: inline-block;
	width: auto;
}

.rfm-buttons--inline .rfm-button {
	width: auto;
}