.page.orders {
	h4 { margin: 0; }
	h4 + p { margin: 0; }
	h4 + p .status + span { display: block; margin-top: 8px; }

	details.order {
		summary {
			display: flex;
			gap: 2rem;
			align-items: flex-start;
			padding: var(--padding);

			.order-header-col {
				flex: 1;
				min-width: 0;

				h4 {
					margin: 0 0 10px 0;
				}

				.order-status-line {
					display: flex;
					gap: 1rem;
					align-items: center;
					margin: 0.5rem 0;
				}

				.order-total {
					font-weight: 600;
					margin-top: 0.25rem;
				}
			}

			.order-address-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 0.75rem;

				.order-meta-item {
					.meta-label {
						font-size: 0.8em;
						font-weight: 600;
						opacity: 0.6;
						text-transform: uppercase;
						letter-spacing: 0.5px;
						margin-bottom: 0.25rem;
					}

					.meta-value {
						font-size: 0.95em;
						line-height: 1.4;
					}
				}
			}

			.toggleIcon {
				flex-shrink: 0;
			}
		}

		article {padding: 0 40px;}
		article footer {padding: 40px 0;}
		.status {
			display: inline-block;
			text-align: center;
			border-radius: 10px;
			padding: 5px 10px;
			background: #90CAF9;
			color: #070d29;
		}

		.toggleIcon {
			display: flex; align-items: center; justify-content: center;
			z-index: 99;
			width: 40px; height: 40px;
		}

		.toggleIcon > .icon-menu {
			transition: transform ease-in-out .2s;
			&:before {transform: translateY(0) rotate(0)}
			&:after {transform: translateY(0) rotate(90deg);}
		}

		&[open] .toggleIcon > .icon-menu {transform: rotate(45deg);}
	}

	@media (max-width: 768px) {
		details.order {
			summary {
				position: relative;
				flex-direction: column;
				gap: 0.75rem;
				padding: 1rem;
				padding-right: 3rem;

				.order-header-col {
					width: 100%;

					h4 {
						font-size: 1.1em;
						margin-bottom: 0.5rem;
					}

					.order-status-line {
						flex-wrap: wrap;
						gap: 0.5rem;
						margin: 0.5rem 0;
					}

					.order-date {
						font-size: 0.9em;
					}

					.order-total {
						font-size: 1em;
						margin-top: 0.5rem;
					}
				}

				.order-address-info {
					width: 100%;
					gap: 0.5rem;

					.order-meta-item {
						.meta-label {
							font-size: 0.7em;
							margin-bottom: 0.15rem;
						}

						.meta-value {
							font-size: 0.85em;
							line-height: 1.3;
						}
					}
				}

				.toggleIcon {
					position: absolute;
					top: 1rem;
					right: 1rem;
				}
			}

			article {
				padding: 0 1rem;

				table {
					display: block;

					thead {
						display: none;
					}

					tbody {
						display: block;
					}

					tr {
						display: block;
						background: rgba(255, 255, 255, .02);
						border-radius: 8px;
						padding: 0.75rem;
						margin-bottom: 0.75rem;

						&:last-child {
							margin-bottom: 0;
						}

						td {
							display: grid;
							grid-template-columns: 1fr 1fr;
							gap: 1rem;
							align-items: center;
							text-align: left !important;
							padding: 0.4rem 0;
							border: none;

							&:before {
								content: attr(data-label);
								font-size: 0.7em;
								font-weight: 600;
								opacity: 0.6;
								text-transform: uppercase;
								letter-spacing: 0.5px;
							}

							&:first-child {
								padding-top: 0;
							}

							&:last-child {
								padding-bottom: 0;
							}
						}
					}
				}

				footer.buttons {
					padding: 1rem 0;
					display: flex;
					flex-direction: column;
					gap: 0.5rem;

					.btn {
						justify-content: center;
						padding: 0.875rem 1rem;
						font-size: 0.9em;
						text-align: center;
						min-height: 44px;
						width: 100%;
					}
				}
			}

			.table-footer {
				flex-direction: column;
				gap: 0.75rem;
				margin-top: 1rem;

				> * {
					text-align: left !important;
				}

				strong {
					font-size: 1em;
				}
			}
		}
	}

	.order th {
		font-size: 12px;
		color: var(--geniBlueLight);
		text-transform: uppercase;
	}
	.order th, .order td {
		text-align: left;
		font-weight: 400;
		padding: 5px 10px;
	}

	tr:nth-child(even) {
		background: rgba(255, 255, 255, .02);
	}

	.table-footer {
		display: flex;
		justify-content: space-between;

		strong {
			font-weight: 600;
		}
	}

	.table-footer > *:nth-child(2) {
		text-align: right;
	}
	.table-footer > * > * {
		display: block;
	}

	.table-footer span {
		font-size: 12px;
		color: var(--geniBlueLight);
		text-transform: uppercase;
	}
	.card.order { padding: 0; }

	#processed-orders h3 {color: #00C853!important;}
	#paid-orders h3 {color: #00B8D4!important;}
	#registered-orders h3 {color: #FFAB00!important;}
}