/* Popupu vlozeni produktu do kosiku */
#popup-insert_ajax {
	border-radius: 3.2rem;
	overflow: hidden;

	.capt {
		font-weight: var(--font-weight-700);
		text-transform: uppercase;

		@media (max-width: 560px) {
			text-align: center;
		}
	}

	.popup_head {
		padding: 2em 1.5em;
		border-bottom: none;
		box-shadow: 0 .5rem .75rem 0 rgba(0, 0, 0, .1);
		z-index: 10;
	}

	.popup_foot {
		padding: 1em 1.5em;
		border-top: none;

		.popup_transit {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 1rem;
			color: var(--color-black);
			line-height: 1.8rem;

			.icon {
				flex: 0 0 auto;
				color: var(--color-lightergray);
				font-size: 3.4rem;
			}

			.cont {
				flex: 1 1 calc(100% - 4.4rem);
				max-width: 18rem;
				text-align: left;
			}

			.line {
				flex: 1 1 100%;
				width: 100%;
				height: .3rem;
				margin: 1rem 0 0 0;
				background-color: #e79fa1;
				border-radius: 6rem;
			}
		}
	}

	.popup_items {
		padding: 2em 1.5em;
		border-top: none;
		box-shadow: 0 -.5rem .75rem 0 rgba(0, 0, 0, .1);
		z-index: 10;
	}

	.btn {
		border-radius: 6rem;
	}
}

/* Nahled kosiku v hlavicce */
.header-tooltip-cart {
	border: none;
	border-radius: 3.2rem 0 3.2rem 3.2rem;

	.header-cart-items {
		position: relative;
		border-radius: 3.2rem 0 0 0;
		z-index: 10;

		&:has(+ .buy-more-for) {
			box-shadow: 0 .5rem .75rem 0 rgba(0, 0, 0, .1);
		}

		.item {
			border-bottom-color: var(--color-gray);
		}
	}

	.buy-more-for {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 1.5rem;
		margin: 0;
		padding: 2rem;
		color: var(--color-black);
		background: #f4f4f4;
		border: none;
		line-height: 1.35;
		z-index: 0;

		.icon {
			flex: 0 0 auto;
			margin: 0;
			font-size: 4.2rem;
		}

		.cont {
			flex: 1 1 calc(100% - 4.4rem);
			max-width: 18rem;
			text-align: left;
		}

		.line {
			flex: 1 1 100%;
			width: 100%;
			height: .3rem;
			margin: 0;
			background-color: #e79fa1;
			border-radius: 6rem;
		}
	}

	.more {
		position: relative;
		background: none;
		border: none;
		border-radius: 0 0 3.2rem 3.2rem;
		box-shadow: 0 -.5rem .75rem 0 rgba(0, 0, 0, .1);
		z-index: 10;

		.btn {
			border-radius: 6rem;
		}
	}
}

/* Rekapitulace objednavky */
.order-recap {
	padding: 4rem 0 0 0;

	h1,
	h2,
	h3 {
		text-align: center;
		text-transform: uppercase;
	}

	h1 {
		margin: 0;
		font-size: 2.8rem;

		@media (max-width: 559px) {
			font-size: 2.6rem;
		}
	}

	h2 {
		font-size: 2.4rem;

		@media (max-width: 559px) {
			font-size: 2.2rem;
		}
	}

	h3 {
		font-size: 2rem;

		@media (max-width: 559px) {
			font-size: 1.8rem;
		}
	}

	.payment {
		position: relative;
		max-width: 60rem;
		margin: 4rem auto -11rem auto;
		padding: 3rem 2rem;
		background: var(--color-white);
		border-radius: 3.6rem;
		box-shadow: 0 0 1.5rem rgba(0, 0, 0, .2);
		text-align: center;
		z-index: 10;

		@media (max-width: 559px) {
			& + .status {
				padding: 5rem 1.5rem;
				border-radius: 0 0 4.2rem 4.2rem;
				border-top: none;
			}
		}

		&.is-qr {
			padding: 3rem;

			@media (max-width: 559px) {
				padding: 3rem 2rem;
			}
		}

		h2 {
			margin: 0 0 2rem 0;
		}

		p {
			margin: 0;

			small {
				font-size: 1.4rem;
			}
		}

		#payment-system {
			margin: 2rem 0;

			.btn-green {
				padding: calc(var(--button-padding-y) * 1.5) calc(var(--button-padding-x) * 2);
				background: var(--color-primary);
				border-color: var(--color-primary);
				border-radius: 4rem;

				&:hover {
					color: var(--color-white);
					background: var(--color-primary-darker);
					border-color: var(--color-primary-darker);
				}
			}
		}

		.payments {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: .5rem;
			margin: 0 0 1rem 0;
			padding: 0;
			list-style: none;

			li {
				flex: 0 1 auto;
				display: flex;
				justify-content: center;
				align-items: center;

				img {
					flex: 0 1 auto;
				}
			}
		}

		.inside {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 2rem;
			text-align: left;

			@media (max-width: 559px) {
				flex-wrap: wrap;
			}

			.information {
				flex: 0 1 auto;

				@media (max-width: 559px) {
					flex: 1 1 100%;
				}

				h2 {
					text-align: left;

					@media (max-width: 559px) {
						text-align: center;
					}
				}

				p {
					&:last-child {
						margin: 2rem 0 0 0;
					}
				}
			}

			.code {
				flex: 0 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;

				@media (max-width: 559px) {
					flex: 1 1 100%;
				}

				img {
					flex: 0 1 auto;
					-ms-interpolation-mode: nearest-neighbor;
					image-rendering: -moz-crisp-edges;
					image-rendering: pixelated;
					object-fit: contain;
				}
			}
		}
	}

	.status {
		position: relative;
		display: block;
		margin: 8rem 0 0 0;
		padding: 5rem 4rem 3rem 4rem;
		color: var(--text-color);
		background: transparent;
		border: .2rem solid var(--color-green);
		border-radius: 4.2rem;
		font-size: 1.8rem;
		text-align: center;
		z-index: 5;

		@media (max-width: 1439px) {
			padding: 5rem 2rem;
		}

		@media (max-width: 559px) {
			margin: 2rem 0 4rem 0;
			padding: 3rem 1.5rem 5rem 1.5rem;
		}

		p {
			margin: 0;
		}

		.pictogram {
			position: absolute;
			inset: auto 6rem calc(100% - 3rem) auto;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--color-green);
			font-size: 12rem;
			z-index: 10;

			@media (max-width: 1439px) {
				inset: 100% auto auto 50%;
				font-size: 8rem;
				translate: -50% -50%;
			}

			@media (max-width: 559px) {
				font-size: 6.8rem;
			}

			.icon {
				position: relative;
				z-index: 10;
			}

			&:before {
				content: "";
				position: absolute;
				inset: 50% auto auto 50%;
				width: 90%;
				height: auto;
				aspect-ratio: 1 / 1;
				background: var(--color-white);
				border-radius: 50%;
				translate: -50% -50%;
				z-index: 0;
			}
		}
	}

	.timeline,
	.next {
		h2 {
			margin: 0 0 2rem 0;
		}
	}

	.timeline {
		margin: 6rem 0 0 0;
		padding: 0 0 4rem 0;

		ul {
			position: relative;
			display: flex;
			justify-content: space-around;
			align-items: flex-start;
			max-width: 120rem;
			margin: 0 auto;
			padding: 2rem 0 0 0;
			color: var(--text-color-secondary);
			font-size: 1.4rem;
			font-weight: var(--font-weight-700);
			line-height: 1.25;
			text-transform: uppercase;
			list-style: none;
			text-align: center;
			overflow: hidden;

			li {
				position: relative;
				flex: 1 1 auto;
				padding: 2rem 0 0 0;
				border-top: .3rem solid var(--color-gray);

				&:before {
					content: "";
					position: absolute;
					inset: 0 auto auto 50%;
					width: 1.6rem;
					height: auto;
					aspect-ratio: 1 / 1;
					border-radius: 50%;
					background: #faf9f9;
					border: .2rem solid var(--color-gray);
					box-shadow: 0 0 0 .4rem #faf9f9;
					translate: -50% calc(-50% - .1rem);
					z-index: 10;
				}

				&.is-active {
					color: var(--color-primary);

					&:before {
						background: var(--color-primary);
						border-color: var(--color-primary);
					}

					&:after {
						content: "";
						position: absolute;
						inset: 0 auto auto 0;
						width: 100%;
						height: .3rem;
						background: var(--color-primary);
						translate: -50% -100%;
						z-index: 5;
					}
				}
			}
		}
	}

	.next {
		padding: 4rem 0;

		.inside {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 3rem;

			@media (max-width: 1439px) {
				flex-wrap: wrap;
			}

			@media (max-width: 834px) {
				gap: 1.5rem;
			}

			.item {
				flex: 0 1 auto;
				padding: 3rem 4rem;
				background: var(--color-white);
				border-radius: 3.6rem;
				box-shadow: 0 0 1.5rem rgba(0, 0, 0, .2);

				@media (max-width: 834px) {
					padding: 3rem 1rem;
					border-radius: 2.8rem;
				}

				@media (max-width: 559px) {
					flex: 1 1 100%;
					padding: 2rem 1rem;
					border-radius: 1.8rem;
				}

				h3 {
					margin: 0 0 2rem 0;
				}

				ul {
					display: flex;
					justify-content: center;
					align-items: stretch;
					gap: 1rem;
					margin: 0;
					padding: 0;
					list-style: none;

					@media (max-width: 834px) {
						gap: .5rem;
					}

					li {
						flex: 0 0 auto;
						display: flex;
						justify-content: center;
						align-items: center;

						@media (max-width: 559px) {
							flex: 0 1 calc(100% / 3);
						}

						a {
							position: relative;
							flex: 1 1 100%;
							display: flex;
							justify-content: flex-end;
							align-items: flex-start;
							flex-direction: column;
							min-width: 18rem;
							width: 100%;
							height: auto;
							aspect-ratio: 1 / 1;
							padding: 1.25rem 1.5rem;
							color: var(--color-white);
							background: var(--color-primary);
							font-size: 1.5rem;
							line-height: 1.25;
							text-decoration: none;
							text-transform: uppercase;
							overflow: hidden;

							@media (max-width: 834px) {
								min-width: 14rem;
								padding: 1rem;
								font-size: 1.4rem;
							}

							@media (max-width: 559px) {
								min-width: auto;
								width: 100%;
								height: auto;
								font-size: 1.2rem;
							}

							&:hover {
								.icon {
									color: var(--color-primary);
								}

								img {
									scale: 1.05;
								}
							}

							&:has(.icon) {
								background: var(--gray-bgc);

								&:before {
									content: "";
									position: absolute;
									inset: 0;
									width: 100%;
									height: 100%;
									background: linear-gradient(180deg, rgba(34, 34, 34, 0) 40%, #222);
									z-index: 5;
								}

								img {
									width: 100%;
									height: 100%;
									object-fit: cover;
								}
							}

							& > * {
								position: relative;
								z-index: 10;
							}

							strong {
								display: block;
							}

							.icon {
								order: -1;
								margin: 0 0 -.75rem 0;
								color: currentColor;
								font-size: 3.6rem;
								transition: color var(--transition-timing);
							}

							img {
								position: absolute;
								inset: 50% auto auto 50%;
								width: 100%;
								height: 100%;
								object-fit: cover;
								translate: -50% -50%;
								transition: scale calc(var(--transition-timing) * 2);
								pointer-events: none;
								z-index: 0;

								@media (max-width: 559px) {
									inset: 0 auto auto 50%;
									width: 80%;
									height: 80%;
									object-fit: contain;
									translate: -50% 0;
								}
							}
						}
					}
				}
			}
		}
	}

	.order-recap-table-wrapper {
		overflow-x: visible;

		@media (max-width: 559px) {
			thead {
				th {
					white-space: nowrap;

					&:not(:first-child) {
						padding: 0;
						font-size: 0;
					}
				}
			}
		}
	}

	.order-recap-table {
		width: calc(100% - 5rem);
		margin-left: auto;
		margin-right: auto;
		background: var(--color-white);
		border-radius: 0 0 2.8rem 2.8rem;
		box-shadow: 0 0 1.5rem rgba(0, 0, 0, .2);

		@media (max-width: 559px) {
			width: calc(100% - 3rem);
			border-radius: 0 0 2.2rem 2.2rem;
		}

		thead {
			tr {
				th {
					position: relative;
					padding: 1.5rem 2rem;
					font-weight: var(--font-weight-700);
					text-transform: uppercase;

					@media (max-width: 559px) {
						padding: 1rem;
					}

					&:first-child {
						&:before {
							content: "";
							position: absolute;
							inset: 0 auto 0 0;
							width: auto;
							height: 100%;
							aspect-ratio: 1 / 1;
							background: #414141;
							border-radius: 50%;
							translate: -50% 0;
							z-index: 0;
						}
					}

					&:last-child {
						&:after {
							content: "";
							position: absolute;
							inset: 0 0 0 auto;
							width: auto;
							height: 100%;
							aspect-ratio: 1 / 1;
							background: #414141;
							border-radius: 50%;
							translate: 50% 0;
							z-index: 0;
						}
					}

					span {
						display: inline-block;
						position: relative;
						z-index: 10;
					}
				}
			}
		}

		tbody {
			&:has(+ tfoot) {
				tr {
					&:last-child {
						td {
							border-bottom: .1rem solid #dfe1e2;
						}
					}
				}
			}

			tr {
				&:not(:last-child) {
					td {
						border-bottom: .1rem solid #dfe1e2;
					}
				}
			}
		}

		tfoot {
			tr {
				td {
					padding: 2rem;

					@media (max-width: 559px) {
						padding: 1.5rem 1rem;
					}
				}
			}
		}

		tr {
			background: transparent;

			&:nth-child(odd) {
				background: transparent;
			}
		}

		th,
		td {
			padding: 1.25rem 2rem;
			border: none;

			@media (max-width: 559px) {
				padding: 1rem;
			}

			strong {
				&.is-total {
					color: var(--color-primary);
					font-size: 2.2rem;

					@media (max-width: 559px) {
						font-size: 1.8rem;
					}
				}
			}
		}
	}
}