/*
 * "Produkt bol pridaný do košíka" popup: .atc, .atc__overlay, .atc__dialog, .atc__head, .atc__body, .atc__foot.
 * Structure and sizes follow AddedToCartModal in design/najlepsiemobily-kategoria-desktop.html;
 * colours, radii, shadows and type come from the --nd-* tokens. Drawn by assets/js/added-to-cart.js.
 */

.atc {
	position: fixed;
	inset: 0;
	z-index: var(--nd-atc-z);
	display: grid;
	place-items: center;
	padding: var(--nd-sp-16);
	font-family: var(--nd-font);
	font-size: var(--nd-fs-body);
	line-height: var(--nd-lh-body);
	color: var(--nd-c-ink);
}

.atc__overlay {
	position: absolute;
	inset: 0;
	background: var(--nd-c-backdrop);
}

.atc__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--nd-atc-w);
	max-height: 100%;
	overflow: hidden;
	background: var(--nd-c-surface);
	border-radius: var(--nd-radius);
	box-shadow: var(--nd-shadow-lg);
}

.atc__dialog:focus {
	outline: none;
}

.atc__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nd-sp-12);
	padding: var(--nd-sp-16) var(--nd-sp-20);
	border-bottom: 1px solid var(--nd-c-line);
}

.atc__title {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-9);
	margin: 0;
	font-size: var(--nd-fs-19);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-head);
	color: var(--nd-c-head);
}

.atc__check {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--nd-atc-check);
	height: var(--nd-atc-check);
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-cta);
	color: var(--nd-c-on-cta);
}

.atc__close {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--nd-tap);
	height: var(--nd-tap);
	margin: calc(var(--nd-sp-12) * -1) calc(var(--nd-sp-12) * -1) calc(var(--nd-sp-12) * -1) 0;
	padding: 0;
	border: 0;
	border-radius: var(--nd-radius-round);
	background: transparent;
	color: var(--nd-c-muted);
	cursor: pointer;
}

.atc__close:hover,
.atc__close:focus-visible {
	color: var(--nd-c-brand);
	background: var(--nd-c-brand-tint);
}

.atc__body {
	flex: 1 1 auto;
	overflow: auto;
	padding: var(--nd-sp-16) var(--nd-sp-20) var(--nd-sp-18);
}

.atc__msg {
	margin: 0;
	color: var(--nd-c-head);
}

/* Added line */
.atc__item {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-14);
}

.atc__thumb {
	flex: 0 0 auto;
	width: var(--nd-atc-thumb);
	height: var(--nd-atc-thumb);
	object-fit: contain;
}

.atc__item-txt {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: var(--nd-sp-3);
}

.atc__item-name {
	font-size: var(--nd-fs-15);
	font-weight: var(--nd-fw-bold);
	line-height: var(--nd-lh-name);
	color: var(--nd-c-head);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.atc__item-name:hover {
	color: var(--nd-c-brand);
}

.atc__item-txt small {
	font-size: var(--nd-fs-13);
	color: var(--nd-c-muted);
}

.atc__item-price {
	font-size: var(--nd-fs-19);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-head);
	white-space: nowrap;
}

.atc__chosen {
	display: grid;
	gap: var(--nd-sp-6);
	margin: var(--nd-sp-10) 0 0;
	padding: var(--nd-sp-10) 0 0;
	list-style: none;
	border-top: 1px dashed var(--nd-c-line);
}

.atc__chosen li {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-8);
	font-size: var(--nd-fs-13);
}

.atc__chosen-ic {
	display: grid;
	color: var(--nd-c-cta);
}

.atc__chosen-price {
	margin-left: auto;
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-head);
}

/* Offers next to a phone */
.atc__offers {
	margin-top: var(--nd-sp-16);
	padding-top: var(--nd-sp-12);
	border-top: 1px solid var(--nd-c-brand-tint-2);
}

.atc__offers-title {
	margin-bottom: var(--nd-sp-9);
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-head);
}

.atc__offers-list {
	display: grid;
	gap: var(--nd-sp-7);
}

.atc__offer {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-12);
	padding: var(--nd-sp-9) var(--nd-sp-11);
	border: 1px solid var(--nd-c-brand-tint-2);
	border-radius: var(--nd-radius-m);
	background: var(--nd-c-surface);
	transition: border-color var(--nd-dur-fast);
}

.atc__offer:hover {
	border-color: var(--nd-c-brand);
}

.atc__offer-ic {
	flex: 0 0 auto;
	display: grid;
	color: var(--nd-c-brand);
}

.atc__offer-img {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.atc__offer-txt {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: var(--nd-sp-2);
}

.atc__offer-txt b {
	font-size: var(--nd-fs-14);
	color: var(--nd-c-head);
}

.atc__offer-txt small {
	font-size: var(--nd-fs-12-5);
	color: var(--nd-c-muted);
}

.atc__offer-price {
	font-size: var(--nd-fs-15);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-head);
	white-space: nowrap;
}

.atc__add {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--nd-sp-5);
	padding: var(--nd-sp-7) var(--nd-sp-13);
	border: 1.5px solid var(--nd-c-cta);
	border-radius: var(--nd-radius-btn);
	background: var(--nd-c-surface);
	color: var(--nd-c-ok);
	font: inherit;
	font-size: var(--nd-fs-13);
	font-weight: var(--nd-fw-bold);
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--nd-dur-fast), color var(--nd-dur-fast);
}

.atc__add:hover:not(:disabled),
.atc__add:focus-visible {
	background: var(--nd-c-cta);
	color: var(--nd-c-on-cta);
}

.atc__add:disabled {
	cursor: default;
}

.atc__add.is-done {
	background: var(--nd-c-cta);
	color: var(--nd-c-on-cta);
}

.atc__err {
	margin: var(--nd-sp-9) 0 0;
	font-size: var(--nd-fs-13);
	color: var(--nd-c-out);
}

/* Footer */
.atc__foot {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--nd-sp-14) var(--nd-sp-24);
	align-items: end;
	padding: var(--nd-sp-20) var(--nd-sp-24);
	background: var(--nd-c-brand-tint);
	border-top: 1px solid var(--nd-c-line);
}

.atc__col {
	display: grid;
	gap: var(--nd-sp-14);
	justify-items: start;
}

.atc__col--right {
	justify-items: end;
}

.atc__ship {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-10);
	color: var(--nd-c-head);
}

.atc__ship svg {
	flex: 0 0 auto;
	color: var(--nd-c-brand);
}

.atc__ship b {
	font-size: var(--nd-fs-15);
}

.atc__sum {
	font-size: var(--nd-fs-19);
	color: var(--nd-c-head);
	white-space: nowrap;
}

.atc__sum em {
	font-style: normal;
	font-weight: var(--nd-fw-bold);
	font-size: var(--nd-fs-22);
}

.atc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--nd-sp-9);
	width: 100%;
	min-height: var(--nd-atc-btn-h);
	padding: 0 var(--nd-sp-30);
	border: 0;
	border-radius: var(--nd-radius-btn);
	color: var(--nd-c-on-brand);
	font: inherit;
	font-size: var(--nd-fs-16);
	font-weight: var(--nd-fw-bold);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--nd-dur-fast);
}

.atc__btn--brand {
	background: var(--nd-c-brand);
}

.atc__btn--brand:hover,
.atc__btn--brand:focus-visible {
	background: var(--nd-c-brand-hover);
}

.atc__btn--cta {
	background: var(--nd-c-cta);
	color: var(--nd-c-on-cta);
}

.atc__btn--cta:hover,
.atc__btn--cta:focus-visible {
	background: var(--nd-c-cta-hover);
	color: var(--nd-c-on-cta);
}

/* Popup while a service / add-on is being added: a veil with a spinner over the whole dialog blocks every
   click (the JS also ignores the backdrop and the keyboard), so nothing can change until the cart answers. */
.atc.is-busy .atc__dialog {
	cursor: progress;
}

.atc.is-busy .atc__dialog::before,
.atc.is-busy .atc__dialog::after {
	content: "";
	position: absolute;
	z-index: 1;
}

.atc.is-busy .atc__dialog::before {
	inset: 0;
	background: color-mix(in srgb, var(--nd-c-surface) 55%, transparent);
}

.atc.is-busy .atc__dialog::after {
	top: 50%;
	left: 50%;
	width: var(--nd-sp-36);
	height: var(--nd-sp-36);
	margin: calc(var(--nd-sp-36) / -2) 0 0 calc(var(--nd-sp-36) / -2);
	border: 3px solid var(--nd-c-brand-tint-2);
	border-top-color: var(--nd-c-brand);
	border-radius: var(--nd-radius-round);
	animation: mobilky-atc-spin 0.8s linear infinite;
}

@keyframes mobilky-atc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Card / button while the add request runs */
[data-wooptima-product].is-adding {
	opacity: var(--nd-opacity-disabled, 0.42);
	pointer-events: none;
}

@media (max-width: 700px) {
	.atc {
		padding: var(--nd-sp-12);
	}

	.atc__head,
	.atc__body {
		padding-inline: var(--nd-sp-16);
	}

	.atc__item {
		flex-wrap: wrap;
	}

	.atc__item-txt {
		flex: 1 1 calc(100% - var(--nd-atc-thumb) - var(--nd-sp-14));
	}

	.atc__item-price {
		margin-left: calc(var(--nd-atc-thumb) + var(--nd-sp-14));
	}

	.atc__offer {
		flex-wrap: wrap;
	}

	.atc__offer-txt {
		flex-basis: calc(100% - 40px - var(--nd-sp-12) * 2);
	}

	.atc__offer-price {
		margin-right: auto;
	}

	.atc__foot {
		grid-template-columns: 1fr;
		padding: var(--nd-sp-16);
	}

	.atc__col,
	.atc__col--right {
		justify-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.atc__offer,
	.atc__add,
	.atc__btn {
		transition: none;
	}

	.atc.is-busy .atc__dialog::after {
		animation-duration: 2.4s;
	}
}