/*
 *  Common classes
 *
 */

 .digidone-shop-js-only {
	 display: none;
 }

.compact-container > :first-child { margin-top: 0; }
.compact-container > :last-child { margin-bottom: 0; }

.digidone-shop.splittable.label-input label,
.digidone-shop.splittable.label-input input {
	display: block;
	width: 100%;
}

/* TODO: Container query */
@media screen and (min-width:1024px) {
	.digidone-shop.splittable {
		display: grid;
		grid-gap: 2em;
		grid-template-columns: repeat(2,1fr);
	}
		.digidone-shop.splittable.label-input {
			grid-template-columns: 2fr 3fr;
		}
}

/*
 *  Boxed content
 *
 */

/*  Wrapper for tables (for horizontal scrolling)  */

.digidone-shop.boxed.table-wrapper {
	position: relative;
	display: block;
	overflow-x: auto;

	border: 1px solid rgba(0,0,0,0.1);
}
	.digidone-shop.boxed.table-wrapper table.digidone-shop.boxed {
		margin: 0;
		border: none;
	}

	.digidone-shop.boxed.table-wrapper.is-overflown .overflow-left,
	.digidone-shop.boxed.table-wrapper.is-overflown .overflow-right {
		position: absolute;
		display: block;
		top: 0;
		bottom: 0;
		z-index: 2;
		height: 100%;
		width: 20px;

		background-color: rgba(210,0,0,0.2);
	}
		.digidone-shop.boxed.table-wrapper.is-overflown .overflow-left {
			background: transparent linear-gradient(to right, rgba(0,0,0,0.1), transparent 100% ) no-repeat;
		}
		.digidone-shop.boxed.table-wrapper.is-overflown .overflow-right {
			background: transparent linear-gradient(to left, rgba(0,0,0,0.1), transparent 100% ) no-repeat;
		}

.digidone-shop.boxed.table-wrapper .table-span-controls {
	width: 100%;
	display: grid;
	grid-template-columns: 40px auto 40px;
	position: relative;
	padding: 0.5em 0.75em;
	background-color: #f7f7f7;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	z-index: 3;
}
	.digidone-shop.boxed.table-wrapper .table-span-controls .label {
		font-size: 80%;
		text-align: center;
		color: rgba(0,0,0,0.6);
	}
	.digidone-shop.boxed.table-wrapper .table-span-controls .table-span {
		background: transparent url(../img/arrow.png) 100% 50% / 1em no-repeat;
		opacity: 0.65;
	}
		.digidone-shop.boxed.table-wrapper.at-left-margin .table-span-controls .span-left,
		.digidone-shop.boxed.table-wrapper.at-right-margin .table-span-controls .span-right {
			background-image: none;
			cursor: default;
		}
			.digidone-shop.boxed.table-wrapper .table-span-controls .span-left {
				transform: rotate(180deg);
			}

/*  Special case: Error and success messages  */

.digidone-shop.boxed.message {
	margin-bottom: 2em;
	padding: 1em;
	border-radius: 0;
	border: none;
	border-left: 7px solid rgba(0,0,0,0.8);
}
	.digidone-shop.boxed.message.error { border-left-color: rgba(210,0,0,1); }
	.digidone-shop.boxed.message.notice { border-left-color: rgba(242,223,0,1); }
	.digidone-shop.boxed.message.success { border-left-color: rgba(0,210,0,1); }

/*  Special case: Items  */

.digidone-shop.boxed.item header input[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 0.5em;
}

.digidone-shop.boxed.item header {
	font-weight: normal;
}
	.digidone-shop.boxed.item header .title {
		font-weight: bold;
	}
	.digidone-shop.boxed.item header .instructions {
		font-size: 85%;
		font-style: italic;
		color: rgba(0,0,0,0.5);
	}
	.digidone-shop.boxed.item .item-thumbnail {
		min-height: 150px;
		background-position: 50% 50%;
		background-size: cover;
	}

@media screen and (min-width: 800px) {
	.digidone-shop.boxed.item:not(.featured-item) > header {
		display: grid;
		grid-template-columns: auto 250px;
		grid-template-areas: "item-info shop-action";
		grid-gap: 0.1em 1em;
	}
		.digidone-shop.boxed.item:not(.featured-item) > header .item-information { grid-area: item-info; }
		.digidone-shop.boxed.item:not(.featured-item) > header .shop-action { grid-area: shop-action; text-align: right; }
			.digidone-shop.boxed.item:not(.featured-item) > header .shop-action input { height: 100%; margin-top: 0; }
}

.wp-block-digidone-shop-featured-item {
	container: digidone-shop-featured-item / inline-size;
}

@container digidone-shop-featured-item (min-width: 800px) {
	.featured-item.has-thumbnail {
		display: grid;
		grid-template-columns: 400px auto;
	}
}

/*  Special case: Order items listing  */

.digidone-shop.boxed.order-items {
	box-shadow: none;
}
	.digidone-shop.boxed.order-items header {
		display: none;
	}
	.digidone-shop.boxed.order-items .main {
		padding: 0;
	}
		.digidone-shop.boxed.order-items .row {
			padding: 1em;
			border-bottom: 1px solid rgba(0,0,0,0.1);
		}
			.digidone-shop.boxed.order-items .row:last-child {
				border-bottom: none;
			}
			.digidone-shop.boxed.order-items .main .row:nth-child(even) {
				background-color: rgba(0,0,0,0.02);
			}
		.digidone-shop.boxed.order-items .item-column-name {
			font-weight: bold;
		}
		.digidone-shop.boxed.order-items .item-column .description {
			font-size: 85%;
			font-style: italic;
			font-weight: normal;
		}


@media screen and (min-width: 800px) {
	.digidone-shop.boxed.order-items header,
	.digidone-shop.boxed.order-items .row {
		display: flex;
		padding: 0.3em 0.5em;
	}
	.digidone-shop.boxed.order-items .main {
		background-color: rgba(0,0,0,0.03);
	}
		.digidone-shop.boxed.order-items .main .row:nth-child(even) {
			background-color: rgba(0,0,0,0.04);
		}
	.digidone-shop.boxed.order-items .main .item-column-name {
		font-weight: normal;
	}

	.digidone-shop.boxed.order-items .item-column {
		padding-right: 0.5em;
		padding-left: 0.5em;
	}
		.digidone-shop.boxed.order-items .item-column:first-child {
			padding-left: 0;
		}
		.digidone-shop.boxed.order-items .item-column:last-child {
			padding-right: 0;
		}
		.digidone-shop.boxed.order-items .item-column-name {
			flex: 1;
		}
		.digidone-shop.boxed.order-items .item-column-price,
		.digidone-shop.boxed.order-items .item-column-vat,
		.digidone-shop.boxed.order-items .item-column-price_total {
			flex-basis: 100px;
			flex-shrink: 0;
			align-self: center;
			text-align: right;
		}
			.digidone-shop.boxed.order-items .item-column-vat {
				flex-basis: 150px;
			}

}

/*  Special case: Terms  */

.digidone-shop.boxed.terms {
	min-height: 20vh;
	max-height: 50vh;
	overflow-y: scroll;
	position: relative;
	z-index: 1;
	box-shadow: none;
	margin: 0 0 1em 0;
}
	.digidone-shop.boxed.terms img {
		max-width: 100%;
		height: auto;
	}

/*  Special case: Filters  */
.digidone-shop.boxed.filters .main {
	line-height: 2em;
}
 .digidone-shop.boxed.filters .main .filter-row {
		display: grid;
	}

@media screen and (min-width: 600px) {
	.digidone-shop.boxed.filters .filter-row {
		grid-template-columns: 150px auto;
	}
}

/*
 *  Modals
 *
 */

body.has-modal {
	height: 100vh;
	overflow: hidden;
}

.digidone-shop-modal-shade {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100vw;
	height: 100vh;

	background-color: rgba(0,0,0,0.3);
}

.digidone-shop.modal {
	position: fixed;
	width: auto;
	max-width: 1000px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;

	z-index: 100001;
	overflow-y: scroll;

	color: #222;
	background-color: #fff;
	box-shadow: 0 0 0.5em rgba(0,0,0,0.3);

	text-align: left;
}
	.digidone-shop.modal > header {
		padding: 1em 2em;
	}
	.digidone-shop.modal > .main {
		padding: 1.5em 2em;
		background-color: rgba(0,0,0,0.03);
	}
	.digidone-shop.modal > footer {
		padding: 1em 2em;
	}

@media screen and (min-width: 640px) {
	.digidone-shop.modal {
		top: 3em;
		right: 3em;
		bottom: 3em;
		left: 3em;
	}
		.digidone-shop.modal.size-small {
			width: 640px;
			margin-left: auto;
			margin-right: auto;

			height: auto;
			top: 50%;
			bottom: initial;
			transform: translate(0, -50%);

			overflow-y: initial;
		}

		.digidone-shop.modal > header,
		.digidone-shop.modal > footer {
			z-index: 2;
			position: sticky;
		}
			.digidone-shop.modal > header { top: 0; left: 0; }
			.digidone-shop.modal > footer { bottom: 0; left: 0; }
}

/*  Throbber background  */

.digidone-shop.modal::before {
	content: "";
	width: 50%;
	height: 50%;
	background: transparent url(../img/spinner.png) 50% 50% no-repeat;
	position: absolute;
	top: 25%;
	left: 25%;
	z-index: -1;
	animation: 1s infinite spin;
	opacity: 0.65;
}
	.digidone-shop.modal.loaded::before {
		display: none;
	}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/*  Form field rows  */

.digidone-shop-form-row {
	margin-bottom: 0.25em;
}
	.digidone-shop-form-row input[type="checkbox"] {
		display: inline-block;
		margin-top: 0.75em;
	}

	.digidone-shop-form-row + p {
		margin-top: 1.5em;
	}

	.digidone-shop-form-row label,
	.digidone-shop-form-row input,
	.digidone-shop-form-row select {
		display: block;
		width: 100%;
	}
		.digidone-shop-form-row label {
			margin-bottom: 0.2em;
		}
		.digidone-shop-form-row input {
			font-size: 110%;
			padding: 0.4em 0.5em;
		}
		.digidone-shop-form-row select {
			font-size: 110%;
			padding: 0.4em 0.5em;
			background-color: #fff;
			border: 1px solid #444;
		}

		.digidone-shop-form-row.type-bool > label,
		.digidone-shop-form-row.type-bool > label > input {
			display: inline;
			width: auto;
			margin-bottom: 0;
			font-size: 100%;
			padding: 0;
		}
		.digidone-shop-form-row.type-bool .markup {
			margin-top: 0.5em;
			font-size: 85%;
		}
	.digidone-shop-form-row .order-items input {
		font-size: 100%;
		padding: 0.2em;
	}

/* TODO: Container query */
@media screen and (min-width: 800px) {
	.digidone-shop-form-row.has-label {
		margin-bottom: 0.75em;
		display: grid;
		grid-template-columns: 200px auto;
		grid-gap: 1em;
	}
		.digidone-shop-form-row.has-label input {
			font-size: 110%;
		}
		.digidone-shop-form-row.has-label label {
			padding-top: 0.4em;
			margin-bottom: 0;
		}
}

/*  Terms in an accordion  */
.digidone-shop.boxed.terms.accordion {
	max-height: none;
}

.digidone-shop.modal .terms.accordion .main {
	padding-bottom: 0;
}

.digidone-shop.modal .terms.accordion h2.accordion-heading {
	position: relative;
	font-size: 100%;
	font-weight: 500;
	margin: 0 -1em;
	padding: 0.5em 1em;
	border-top: 1px solid rgba(0,0,0,0.1);
	background-color: rgba(0,0,0,0.025);
}
	.digidone-shop.modal .terms.accordion .accordion-section:first-child h2.accordion-heading {
		margin-top: -1em;
		border-top: none;
	}
	.digidone-shop.modal .terms.accordion .accordion-section:last-of-type:not(.open) h2.accordion-heading {
		margin-bottom: -1em;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}

	.digidone-shop.modal .terms.accordion h2.accordion-heading::after {
		content: " ";
		height: 100%;
		width: 1em;
		position: absolute;
		right: 1em;
		top: 0;
		background: transparent url(../img/arrow.png) 100% 50% / 1em no-repeat;
		transform: rotate( 90deg );
		transition: transform 400ms;
	}
	.digidone-shop.modal .terms.accordion .accordion-section.open h2.accordion-heading {
		border-bottom: 1px solid rgba(0,0,0,0.1);
		background-color: #fff;
	}
		.digidone-shop.modal .terms.accordion .accordion-section.open h2.accordion-heading::after {
			transform: rotate( -90deg );
		}

	.digidone-shop.modal .terms.accordion h3 {
		font-size: 125%;
	}

.terms.accordion .accordion-content {
	display: none;
	padding: 1em 0;
}
	.terms.accordion .accordion-section.open .accordion-content {
		display: block;
	}

/*
 *  Item listing
 *
 */

.digidone-shop.item-listing {
	container: digidone-shop-items / inline-size;
}

@container digidone-shop-items (min-width: 800px) {
	.items-wrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: var(--digidone-shop--box-spacing);
		margin: var(--digidone-shop--box-spacing) auto;
	}
		.items-wrapper .digidone-shop.boxed {
			margin: 0 auto;
		}
}