/**
 * Content pages — Muestras gratis, Preguntas frecuentes, Contacto, Sobre
 * nosotros, Envíos, Devoluciones, Garantía, Formas de pago. Enqueued only
 * on those 8 pages (see inc/enqueue.php). Reuses .ed-guide-hero /
 * .ed-guide-breadcrumb / .ed-guide-nav / .ed-section__header /
 * .ed-guide-cta / .ed-guide-faq from guide-page.css, and .ed-feature-grid /
 * .ed-steps / .ed-cta-tinted / .ed-pill / .ed-icon-list from cards.css.
 * Only the pieces genuinely new to this batch (form fields, payment method
 * cards, native-<details> info accordion) live here.
 */

/* -------------------------------------------------------------------- */
/* Form — Contacto + Muestras gratis                                     */
/* -------------------------------------------------------------------- */

.ed-form {
	max-width: 640px;
}

.ed-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-md);
	margin-bottom: var(--ed-space-md);
}

@media (min-width: 640px) {
	.ed-form__row--2col {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ed-form__group {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-2xs);
}

.ed-form__label {
	color: var(--ed-color-heading);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

.ed-form__label .ed-form__optional {
	color: var(--ed-color-muted);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.ed-form__input,
.ed-form__select,
.ed-form__textarea {
	width: 100%;
	padding: var(--ed-space-sm);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-sm);
	color: var(--ed-color-text);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-base);
	line-height: 1.4;
}

.ed-form__textarea {
	min-height: 140px;
	resize: vertical;
}

.ed-form__input:focus-visible,
.ed-form__select:focus-visible,
.ed-form__textarea:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 1px;
}

.ed-form__group--label-only {
	margin-bottom: var(--ed-space-sm);
}

.ed-form__checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ed-space-sm);
	margin-bottom: var(--ed-space-md);
}

.ed-form__checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	padding: var(--ed-space-2xs) var(--ed-space-md);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-full);
	font-size: var(--ed-font-size-sm);
	cursor: pointer;
}

.ed-form__checkbox input {
	width: 16px;
	height: 16px;
	accent-color: var(--ed-color-primary);
}

.ed-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-2xs);
	margin-bottom: var(--ed-space-lg);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-xs);
}

.ed-form__consent input {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 0.15em;
	accent-color: var(--ed-color-primary);
}

.ed-form__consent a {
	color: var(--ed-color-link);
}

/*
 * Honeypot field — visually hidden, never tabbed to, but still present in
 * the DOM for bots that fill every input blindly. Shared by Contacto and
 * Muestras gratis (the latter previously duplicated this as
 * .ed-muestras__honeypot in muestras-gratis.css).
 */
.ed-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/*
 * Field-level error text + invalid state — shared by Contacto and Muestras
 * gratis (the latter previously duplicated these in muestras-gratis.css;
 * consolidated here since both pages already load this file).
 */
.ed-form__field-error {
	display: none;
	color: var(--ed-color-error);
	font-size: var(--ed-font-size-xs);
}

.ed-form__field-error:not(:empty) {
	display: block;
}

.ed-form__input.is-invalid,
.ed-form__select.is-invalid,
.ed-form__textarea.is-invalid {
	border-color: var(--ed-color-error);
}

.ed-form__submit-error {
	margin: 0 0 var(--ed-space-sm);
	color: var(--ed-color-error);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
}

/* Generic inline success state — same visual language as Muestras
   gratis's own .ed-muestras__success, reusable by any form on these
   shared content-page.css pages. */
.ed-form__success {
	padding: var(--ed-space-xl) var(--ed-space-md);
	text-align: center;
}

.ed-form__success svg {
	width: 48px;
	height: 48px;
	margin-bottom: var(--ed-space-sm);
	color: var(--ed-color-success);
}

.ed-form__success-title {
	margin: 0 0 var(--ed-space-2xs);
	color: var(--ed-color-heading);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-lg);
}

.ed-form__success-desc {
	margin: 0 auto;
	max-width: 40ch;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
	line-height: 1.6;
}

/* -------------------------------------------------------------------- */
/* Contact options — reuses .ed-feature-grid as-is, cards become links   */
/* -------------------------------------------------------------------- */

.ed-feature-card--link {
	display: block;
	text-decoration: none;
	transition: border-color var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
}

.ed-feature-card--link:hover {
	border-color: var(--ed-color-primary);
	box-shadow: var(--ed-shadow-sm);
}

.ed-feature-card--link .ed-feature-card__title {
	color: var(--ed-color-heading);
}

/* -------------------------------------------------------------------- */
/* Payment method cards — Formas de pago                                  */
/* -------------------------------------------------------------------- */

.ed-payment-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ed-space-md);
}

@media (min-width: 640px) {
	.ed-payment-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ed-payment-card {
	display: flex;
	align-items: flex-start;
	gap: var(--ed-space-md);
	padding: var(--ed-space-lg);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-payment-card--soon {
	opacity: 0.7;
}

.ed-payment-card__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--ed-color-link);
	background-color: rgba(0, 183, 183, 0.08);
	border-radius: var(--ed-radius-full);
}

.ed-payment-card__icon svg {
	width: 20px;
	height: 20px;
}

.ed-payment-card__title {
	display: flex;
	align-items: center;
	gap: var(--ed-space-2xs);
	margin: 0 0 var(--ed-space-3xs);
	font-family: var(--ed-font-heading);
	font-size: var(--ed-font-size-md);
	font-weight: 500;
}

.ed-payment-card__badge {
	display: inline-block;
	padding: 2px var(--ed-space-2xs);
	background-color: var(--ed-color-surface-alt);
	border-radius: var(--ed-radius-sm);
	color: var(--ed-color-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-eyebrow);
	text-transform: uppercase;
}

.ed-payment-card__desc {
	margin: 0;
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

/* -------------------------------------------------------------------- */
/* Info accordion — native <details>/<summary>, zero JS. Used by Envíos, */
/* Devoluciones, Garantía for short structured Q&A that doesn't need the  */
/* single-open-at-a-time behaviour of .ed-guide-faq.                      */
/* -------------------------------------------------------------------- */

.ed-info-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--ed-space-sm);
}

.ed-info-item {
	padding: 0 var(--ed-space-lg);
	background-color: var(--ed-color-surface);
	border: 1px solid var(--ed-color-border);
	border-radius: var(--ed-radius-md);
}

.ed-info-item__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ed-space-sm);
	padding-block: var(--ed-space-sm);
	color: var(--ed-color-heading);
	font-family: var(--ed-font-body);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.ed-info-item__summary::-webkit-details-marker {
	display: none;
}

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

.ed-info-item__chevron {
	flex: none;
	width: 12px;
	height: 8px;
	color: var(--ed-color-muted);
	transition: transform var(--ed-transition-fast);
}

.ed-info-item[open] .ed-info-item__chevron {
	transform: rotate(180deg);
}

.ed-info-item__body {
	margin: 0 0 var(--ed-space-md);
	color: var(--ed-color-muted);
	font-size: var(--ed-font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
	.ed-info-item__chevron {
		transition: none;
	}
}

/* -------------------------------------------------------------------- */
/* FAQ category page — sticky category nav reuses .ed-guide-nav as-is;    */
/* each category is its own .ed-guide-faq block under an H2.              */
/* -------------------------------------------------------------------- */

/*
 * --ed-header-stack-offset (published by header-scroll.js, see header.css)
 * already includes the admin-bar height, so a separate body.admin-bar
 * override isn't needed here any more.
 */
.ed-faq-category {
	scroll-margin-top: calc(64px + var(--ed-space-lg) + var(--ed-header-stack-offset, 0px));
}

.ed-faq-category + .ed-faq-category {
	margin-top: var(--ed-space-2xl);
}

.ed-faq-category .ed-section__title + .ed-guide-faq {
	margin-top: var(--ed-space-lg);
}