/* ---------------------------------------------------------------------------
   Bordado personalizado na página de produto.

   Os campos só aparecem quando a caixa é marcada, e isso é :has() em vez de
   JavaScript: eles ficam sempre no DOM, o leitor de tela encontra tudo, e o
   formulário não depende de script para enviar.
   --------------------------------------------------------------------------- */

.fb-bordado {
	margin-block: var(--fb-space-md);
	padding: var(--fb-space-sm);
	border: 0.0625rem solid var(--fb-seam);
	border-radius: 0.25rem;
	background-color: var(--fb-ground);

	& .fb-bordado__ativar {
		display: flex;
		align-items: flex-start;
		gap: var(--fb-space-2xs);
		cursor: pointer;

		& input {
			flex: none;
			inline-size: 1.125rem;
			block-size: 1.125rem;
			margin-block-start: 0.125rem;
			accent-color: var(--fb-terracota);
		}
	}

	& .fb-bordado__ativar-texto {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;

		& strong {
			font-size: var(--fb-text-sm);
			font-weight: 600;
			color: var(--fb-ink);
		}

		& em {
			font-size: var(--fb-text-xs);
			font-style: normal;
			color: var(--fb-ink-2);
		}
	}

	/* fechado por padrão; abre quando a caixa é marcada */
	& .fb-bordado__campos {
		display: none;
		margin-block-start: var(--fb-space-sm);
		padding-block-start: var(--fb-space-sm);
		border-block-start: 0.0625rem solid var(--fb-seam);
	}

	&:has(.fb-bordado__ativar input:checked) .fb-bordado__campos {
		display: grid;
		gap: var(--fb-space-sm);
	}

	& .fb-bordado__campo {
		display: grid;
		gap: 0.25rem;
		margin: 0;

		& label {
			font-size: var(--fb-text-xs);
			font-weight: 600;
			color: var(--fb-ink);
		}

		& :is(input, select) {
			inline-size: 100%;
			box-sizing: border-box;
			padding-block: 0.5rem;
			padding-inline: 0.625rem;
			border: 0.0625rem solid var(--fb-seam-strong);
			border-radius: 0.125rem;
			background-color: var(--fb-surface);
			font-family: var(--fb-font);
			font-size: var(--fb-text-sm);
			color: var(--fb-ink);

			&:focus-visible {
				border-color: var(--fb-espresso);
				outline: 0.125rem solid var(--fb-espresso);
				outline-offset: 0.0625rem;
			}
		}

		& small {
			font-size: 0.6875rem;
			color: var(--fb-ink-3);
		}
	}

	/* ---- onde bordar: as duas fotos lado a lado ---- */
	& .fb-bordado__local {
		margin: 0;
		padding: 0;
		border: none;

		& legend {
			padding: 0;
			font-size: var(--fb-text-xs);
			font-weight: 600;
			color: var(--fb-ink);
		}

		& label {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-template-areas:
				"radio  imagem"
				"radio  texto";
			align-items: center;
			gap: 0.25rem var(--fb-space-2xs);
			padding: var(--fb-space-2xs);
			border: 0.0625rem solid var(--fb-seam);
			border-radius: 0.125rem;
			background-color: var(--fb-surface);
			cursor: pointer;

			&:has(input:checked) {
				border-color: var(--fb-terracota);
				box-shadow: inset 0 0 0 0.0625rem var(--fb-terracota);
			}
		}

		& input {
			grid-area: radio;
			inline-size: 1rem;
			block-size: 1rem;
			accent-color: var(--fb-terracota);
		}

		& img {
			grid-area: imagem;
			display: block;
			inline-size: 3rem;
			block-size: 3rem;
			object-fit: cover;
			border-radius: 0.125rem;
		}

		& span {
			grid-area: texto;
			font-size: var(--fb-text-xs);
			color: var(--fb-ink-2);
		}
	}

	& .fb-bordado__aviso {
		margin: 0;
		font-size: 0.6875rem;
		line-height: 1.5;
		color: var(--fb-ink-2);
		text-wrap: pretty;
	}

	/* as duas opções lado a lado quando couber */
	@media (width >= 30rem) {
		& .fb-bordado__local {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--fb-space-2xs);

			& legend {
				grid-column: 1 / -1;
				margin-block-end: 0.25rem;
			}
		}
	}
}