/*
 * Solicitar muestras — request step of the free-samples flow
 * ([ed_solicitar_muestras], /solicitar-muestras/).
 *
 * Only the layout and the selected-samples review list live here. The form
 * (.ed-muestras__form / .ed-form__*), submit button, error lines and the
 * success block are shared with muestras-gratis.css, which this page also
 * loads — nothing is duplicated.
 *
 * Mobile-first: one column (samples, then the form); two columns from 1024px.
 */

/* -------------------------------------------------------------------- */
/* Compact hero                                                          */
/* -------------------------------------------------------------------- */

.ed-solicitar-hero .ed-guide-hero__inner {
	padding-block: var(--ed-space-md);
}

.ed-solicitar-hero .ed-guide-hero__title {
	margin-bottom: var(--ed-space-xs);
}

.ed-solicitar-hero .ed-guide-hero__desc {
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.ed-solicitar-hero .ed-guide-hero__inner {
		padding-block: var(--ed-space-xl);
	}
}

.ed-solicitar-section {
	padding-top: var(--ed-space-md);
}

/* -------------------------------------------------------------------- */
/* Layout                                                                */
/* -------------------------------------------------------------------- */

/* The plain [hidden] attribute loses to the display rules below (author CSS
   beats the user-agent one), so restate it for every toggled block. */
.ed-solicitar__layout[hidden],
.ed-solicitar__empty[hidden],
.ed-solicitar__samples[hidden],
.ed-solicitar__heading[hidden] {
	display: none;
}

.ed-solicitar__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ed-space-xl);
	align-items: start;
	max-width: 1100px;
	margin-inline: auto;
}

@media (min-width: 1024px) {
	.ed-solicitar__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: var(--ed-space-2xl);
	}

	.ed-solicitar__samples {
		position: sticky;
		top: calc(var(--ed-header-height, 80px) + var(--ed-space-lg));
	}
}

/* After a successful submission only the confirmation is left: centre it. */
.ed-solicitar__layout.is-done {
	grid-template-columns: minmax(0, 1fr);
	max-width: 640px;
}

.ed-solicitar__heading {
	margin: 0 0 var(--ed-space-xs);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-xl);
	line-height: 1.2;
}

.ed-solicitar .ed-muestras__counter {
	margin-bottom: var(--ed-space-sm);
	font-size: var(--ed-font-size-md);
}

/* -------------------------------------------------------------------- */
/* Selected samples list                                                 */
/* -------------------------------------------------------------------- */

.ed-solicitar__list {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-solicitar__item {
	display: flex;
	align-items: center;
	gap: var(--ed-space-sm);
	padding: var(--ed-space-xs);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-solicitar__thumb {
	display: block;
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-sm);
}

.ed-solicitar__thumb img,
.ed-solicitar__thumb-fill {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ed-solicitar__item-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ed-solicitar__item-fabric {
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.ed-solicitar__item-color {
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* 44px-tall tap target, kept quiet so the list doesn't read as all buttons. */
.ed-solicitar__remove {
	flex: 0 0 auto;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--ed-space-xs);
	background: none;
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
	color: var(--ed-color-text);
	font: inherit;
	font-size: var(--ed-font-size-sm);
	cursor: pointer;
}

.ed-solicitar__remove:hover {
	border-color: var(--ed-color-error);
	color: var(--ed-color-error);
}

.ed-solicitar__remove:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

.ed-solicitar__more {
	display: inline-block;
	margin-top: var(--ed-space-sm);
	padding-block: var(--ed-space-2xs);
	color: var(--ed-color-link);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ed-solicitar__more:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- */
/* Empty state                                                           */
/* -------------------------------------------------------------------- */

.ed-solicitar__empty {
	max-width: 520px;
	margin-inline: auto;
	padding: var(--ed-space-xl) var(--ed-space-md);
	text-align: center;
}

.ed-solicitar__empty-title {
	margin: 0 0 var(--ed-space-xs);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-xl);
	line-height: 1.2;
}

.ed-solicitar__empty-text {
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
}

/* -------------------------------------------------------------------- */
/* Small phones                                                          */
/* -------------------------------------------------------------------- */

@media (max-width: 400px) {
	.ed-solicitar__thumb {
		flex-basis: 64px;
		width: 64px;
		height: 64px;
	}
}