/**
 *
 * micromagnetics.de
 * Copyright 2025 Daniel Czarnecki <d.czarnecki@outlook.de>
 * Alle Rechte vorbehalten.
 *
 */

.orderform-table
{
	padding-bottom: var(--spacing-3);
	margin-top: var(--spacing-3);
	border-bottom: 1px solid var(--color-separator-primary);
}
.orderform-table:last-child 
{
	border-bottom: 0;
	padding-bottom: 0;
}
.orderform-table > div.info > h6
{
	font-size: var(--text-large);
	font-weight: 500;
}
.orderform-table > div.info > p
{
	margin-top: 0.25rem;
	font-size: var(--text-small);
	color: var(--color-label-secondary);
}
.orderform-table > div > img
{
	height: 9.35rem;
	border-radius: var(--radius-large);
	border: 1px solid var(--color-separator-primary);
}
.orderform-table > div.price 
{
	font-size: var(--text-xs);
	text-align: right;
}
.orderform-table > div.price > p
{
	font-size: var(--text-large);
	font-weight: 500;
}

.orderform-footer
{
	display: flex;
	gap: var(--spacing-3);
}
.orderform-footer > div
{
	flex: 4;
}
.orderform-footer > div > div
{
	display: none;
	padding: calc(var(--spacing-3)/2) var(--spacing-2);
     font-size: var(--text-small);
	font-weight: var(--font-weight-semibold);
	border: 1px solid var(--color-semantic-negative);
	border-radius: var(--radius-large);
	color: var(--color-semantic-negative);
	background-color: var(--color-bg-semantic-negative);
}
.orderform-footer > div > div > i { margin-right: var(--spacing-1) }
.orderform-footer > a
{
	flex: 2;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (min-width: 58rem) /* DESKTOP */
{
	.orderform-table
	{
		display: flex;
		gap: var(--spacing-3);
	}
	.orderform-table > div:nth-child(3) { order: -1; flex: 1 }
	.orderform-table > div:nth-child(2) { flex: 4 }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (max-width: 58rem) /* MOBILE */
{
	.orderform-table > div:nth-child(1) { display: block; width: 100% }
	.orderform-table > div:nth-child(2) { display: block; width: 100% }
	.orderform-table > div:nth-child(3) { float: left; width: 50% }
	.orderform-table > div.info > h6
	{
		font-size: var(--text-xl);
		margin: var(--spacing-1) 0;
	}
	.orderform-table > div.info > p
	{
		margin-bottom: var(--spacing-2);
	}
	.orderform-footer
	{
		flex-direction: column;
	}
}