/*
 *  Variable definitions
 *
 */

:root {
	/* Colors */
	--digidone-shop--hairline-color: rgba(0,0,0,0.1);

	/* Buttons */
	--digidone-shop--button-padding: 0.5em 1em;
	--digidone-shop--button-bg-color: #227a7d;
	--digidone-shop--button-fg-color: #fff;

	/* Modal title */
	--digidone-shop--modal-title-fg-color: #000;

	/* Box */
	--digidone-shop--box-shadow: 2px 2px 4px var(--digidone-shop--hairline-color);

	/* Borders */
	--digidone-shop--border: 1px solid var(--digidone-shop--hairline-color);
	--digidone-shop--border-radius: 3px;

	/* Spacing */
	--digidone-shop--box-spacing: 1.5em;
}

/*
 *  Boxed content
 *
 */

.digidone-shop.boxed {
	width: 100%;
	margin: var(--digidone-shop--box-spacing) auto;
	padding: 0;

	box-shadow: var(--digidone-shop--box-shadow);
	border: var(--digidone-shop--border);
	border-radius: var(--digidone-shop--border-radius);

	background-color: #fff;
	color: #222;

	text-align: left;
}
	.digidone-shop.boxed > :last-child {
		border-bottom: none;
	}
	.digidone-shop.boxed header,
	.digidone-shop.boxed .main,
	.digidone-shop.boxed footer {
		padding: 1em;
		background-color: #fff;
	}

		.digidone-shop.boxed header > :first-child,
		.digidone-shop.boxed .main > :first-child,
		.digidone-shop.boxed footer  > :first-child {
			margin-top: 0;
		}
		.digidone-shop.boxed header > :last-child,
		.digidone-shop.boxed .main > :last-child,
		.digidone-shop.boxed footer  > :last-child {
			margin-bottom: 0;
		}

		.digidone-shop.boxed header,
		.digidone-shop.boxed thead {
			font-weight: bold;
		}
			.digidone-shop.boxed header:not(:last-child),
			.digidone-shop.boxed thead:not(:last-child) {
				border-bottom: var(--digidone-shop--border);
			}

			.digidone-shop.boxed header > * {
				display: block;
			}

			.digidone-shop.boxed header h1 {
				margin: 0;
			}
			.digidone-shop.boxed header .indicator {
				margin-right: 0.5em;
				font-weight: normal;
			}
			.digidone-shop.boxed header .note {
				display: inline-block;
				margin-left: 0.2em;
				margin-bottom: 0.25em;
				font-size: max( 70%, 9pt );
				color: rgba(0,0,0,0.6);
			}

		.digidone-shop.boxed .main,
		.digidone-shop.boxed tbody {
			color: #444;
		}

			.digidone-shop.boxed > table.main {
				width: 100%;
				padding: 0;
				margin-bottom: 0;
				table-layout: fixed;
			}
				.digidone-shop.boxed > table.main tr {
					border-bottom: var(--digidone-shop--border);
				}
					.digidone-shop.boxed > table.main tbody tr:last-child {
						border-bottom: none;
					}
					.digidone-shop.boxed > table.main th,
					.digidone-shop.boxed > table.main td {
						display: block;
						padding: 0.2em 1em 0.2em 1em;
					}
					.digidone-shop.boxed > table.main th {
						font-weight: 600;
					}
						.digidone-shop.boxed > table.main tr > :first-child { padding-top: 0.65em; }
						.digidone-shop.boxed > table.main tr > :last-child { padding-bottom: 0.65em; }

					@media screen and (min-width:800px) {
						.digidone-shop.boxed > table.main tr {
							padding: 0;
						}
						.digidone-shop.boxed > table.main th,
						.digidone-shop.boxed > table.main td {
							display: table-cell;
							padding: 0.65em 1em;
							border-right: var(--digidone-shop--border);
						}
						.digidone-shop.boxed > table.main tbody th {
							width: 175px;
						}
						.digidone-shop.boxed > table.main tr > :last-child {
							border-right: none;
						}
					}


		.digidone-shop.boxed footer {
			display: grid;
			grid-template-columns: 1fr;
			grid-auto-rows: auto;
			grid-gap: 0.75em;
			border-top: var(--digidone-shop--border);

			text-align: center;
		}
			.digidone-shop.boxed footer .primary,
			.digidone-shop.boxed footer .secondary {
				margin: 0;
			}

			.digidone-shop.boxed footer .secondary {
				color: #777;
			}
				.digidone-shop.boxed footer .secondary a {
					padding: 0.5em 0;
					color: #333;
				}
				.digidone-shop.boxed footer .primary input,
				.digidone-shop.boxed footer .secondary input,
				.digidone-shop.boxed footer .primary a,
				.digidone-shop.boxed footer .secondary a {
					display: block;
					width: 100%;
				}


@media screen and (min-width: 480px) {
	.digidone-shop.boxed footer {
		grid-template-columns: 100px auto;
		grid-template-areas: "secondary primary";
		align-items: center;
	}
		.digidone-shop.boxed footer .primary {
			grid-area: primary;
			text-align: right;
		}
		.digidone-shop.boxed footer .secondary {
			text-align: left;
			grid-area: secondary;
		}
			.digidone-shop.boxed footer .primary input,
			.digidone-shop.boxed footer .secondary input,
			.digidone-shop.boxed footer .primary a,
			.digidone-shop.boxed footer .secondary a {
				display: initial;
				width: auto;
			}
}

/*  Tables  */

table.digidone-shop.boxed {
	width: 100%;
	border-collapse: collapse;
}
	table.digidone-shop.boxed.striped tbody {
		background-color: rgba(0,0,0,0.03);
	}
		table.digidone-shop.boxed.striped tbody tr:nth-child(even) {
			background-color: rgba(0,0,0,0.03);
		}

	table.digidone-shop.boxed tr {
		border-bottom: var(--digidone-shop--border);
	}
		table.digidone-shop.boxed th {
			font-weight: bold;
		}
		table.digidone-shop.boxed th,
		table.digidone-shop.boxed td {
			padding: 0.5em 0.75em;
		}

/*  Buttons  */

.digidone-shop.boxed .primary a,
.digidone-shop.boxed input[type="submit"],
.digidone-shop.boxed input[type="button"] {
	padding: var(--digidone-shop--button-padding);
	background-color: var(--digidone-shop--button-bg-color);
	color: var(--digidone-shop--button-fg-color);
	border: none;
	border-radius: var(--digidone-shop--border-radius);
	font-weight: 600;
}

/*  Modal title  */

.digidone-shop.boxed.modal header h1 {
	color: var(--digidone-shop--modal-title-fg-color);
}