body { flex-direction: column; }

header {
	display: flex; align-items: center; padding: var(--padding); gap: var(--padding); z-index: 1;
	border-bottom: 1px solid rgb(0 0 0 / 0.1); color: var(--barTxt);
	background: linear-gradient(-90deg, rgb(151 171 187) 0%, rgb(195 210 220) 100%);
	box-shadow: 0 0.3px 2.2px rgba(0 0 0 / 0.042), /* https://shadows.brumm.af */
		0 0.7px 5.3px rgba(0 0 0 / 0.061),
		0 1.3px 10px rgba(0 0 0 / 0.075),
		0 2.2px 17.9px rgba(0 0 0 / 0.089),
		0 4.2px 33.4px rgba(0 0 0 / 0.108),
		0 10px 80px rgba(0 0 0 / 0.15);
}
	header h1 { flex-grow: 1; }
	body:has(#SectionCfg:checked) #Transact { display: none; }
	body:has(#SectionTrans:checked) #Cfg { display: none; }
	header :is(x-radio, x-lbl) { height: 100%; }
	#Logout { padding: 5px 15px; }
main {
	height: 100%; display: flex; justify-content: center;
	background: linear-gradient(-180deg, rgb(251 246 241) 0%, rgb(221 227 234) 100%);
}
	[name^="["][name$="]"] { contain: content; }
	section {
		display: flex; flex-direction: column; height: 100%; width: 100%; max-width: 600px;
		padding: var(--padding); gap: calc(var(--padding) * 2); align-items: center;
	}
		section h1 { text-align: center; }
	#Cfg { justify-content: center; }
		x-accordion { width: 100%; border: 1px solid rgb(80 80 80); border-radius: 8px; overflow: hidden; }
			x-accordion details:nth-child(n + 2 of details) { border-top: 1px solid rgb(80 80 80); }
			x-accordion details:nth-child(even) { background-color: hsl(204deg 26% 92%); }
		details { padding: var(--padding); }
			x-details { display: flex; flex-direction: column; margin-top: var(--padding); gap: var(--padding); }
			x-details:has(label) { display: grid; grid-template-columns: min-content 1fr; align-items: center; }
			x-details label { display: contents; }
			summary::marker { margin-right: 1em; }
				details:not([open]) summary::marker { opacity: 0.8; }
			details[open] summary { font-weight: 600; }
			details :is(p, em) { text-wrap: balance; text-align: center; line-height: 1.4; }
		#CodePair { display: flex; contain: content; }
			#CodePair input { width: 50%; flex-grow: 1; text-align: center; font-size: 1.4em; letter-spacing: 0.1em; }
			#CodePair input:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
			#CodePair input:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
	#Transact { align-items: normal; }
		#Transact-Slider-Cont { flex-grow: 1; }
			#Transact-Slider { display: flex; height: 100%; width: 400%; transition: 0.6s ease transform; }
			.paymentsTable { border-spacing: 0; border-collapse: separate; border-radius: 8px; border: 1px solid black; }
				.paymentsTable :is(th, td) { padding: calc(var(--padding) / 2) var(--padding); }
				.paymentsTable :is(th, td):nth-child(n + 2) { border-left: 0.5px solid currentcolor; }
				.paymentsTable :is(th, td):not(:last-child) { border-right: 0.5px solid currentcolor; }
				.paymentsTable td { border-top: 0.5px solid currentcolor; }
				.paymentsTable :is(th, tr:not(:last-child) td) { border-bottom: 0.5px solid currentcolor; }
				.paymentsTable tr:nth-child(even) td { background-color: rgb(210 221 228); }
		/* Info */
			#Info > label { width: 100%; display: flex; align-items: center; gap: inherit; }
				#Info > label input { flex-grow: 1; }
			.payments { width: 100%; display: flex; flex-direction: column; gap: var(--padding); }
				.payment { contain: content; display: flex; gap: inherit; align-items: center; }
				.payment > :first-child { flex-grow: 1; }
				.itemDelete { background-color: rgb(180 0 0); color: rgb(255 255 255); }
					:nth-child(1 of .payment) .itemDelete { opacity: 0; pointer-events: none; }
		/* QR */
			#QR-TCode:empty { display: none; }
				#QR-TCode:not(:empty)::before { content: "Transaction code: "; }
			video { width: 100%; max-width: 300px; aspect-ratio: 1; border: 1px solid black; border-radius: 8px; }
			#QR-BalDue { background-color: yellow; border-radius: 8px; padding: var(--padding); }
				#QR-BalDue:empty { display: none; }
				#QR-BalDue:not(:empty)::before { content: "Balance Due: "; }
		/* Preview */
		/* Result */
			#Result-Box {
				min-width: 40%; display: flex; flex-direction: column; align-items: center; contain: content; gap: 1em;
				padding: calc(var(--padding) * 1.5); border: 1.5px solid rgb(80 80 80); border-radius: 8px;
			}
				#Result-Box-Icon { contain: content; text-align: center; font-family: sans-serif; font-size: 5em; }
					#Result[success="true"] #Result-Box-Icon::before { content: "✔"; color: rgb(0 128 0); }
					#Result[success="false"] #Result-Box-Icon::before { content: "✗"; color: rgb(255 0 0); }
		#Transact-Footer { display: flex; gap: var(--padding); }
			#Transact-Footer button { flex-grow: 1; }
			#Transact-Footer button[disabled] { display: none; }