/*
 * "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;
}

/* Phone-only parts: a short title and the cart sum inside the checkout button. */
.atc__title-short,
.atc__btn-sum {
	display: none;
}

/* Phone: tight head and footer, one-row offers, so most of the height is left for the scrolling list. */
@media (max-width: 700px) {
	.atc {
		padding: var(--nd-sp-12);
	}

	.atc__head {
		padding: var(--nd-sp-10) var(--nd-sp-16);
	}

	.atc__title {
		font-size: var(--nd-fs-16);
	}

	.atc__title-long {
		display: none;
	}

	.atc__title-short {
		display: inline;
	}

	.atc__check {
		width: var(--nd-sp-20);
		height: var(--nd-sp-20);
	}

	.atc__body {
		padding: var(--nd-sp-12) var(--nd-sp-16);
	}

	.atc__item {
		gap: var(--nd-sp-10);
	}

	.atc__thumb {
		width: var(--nd-sp-48);
		height: var(--nd-sp-48);
	}

	.atc__item-name {
		font-size: var(--nd-fs-14);
	}

	.atc__item-price {
		font-size: var(--nd-fs-16);
	}

	/* Offer: icon | name + note | price above the button */
	.atc__offers {
		margin-top: var(--nd-sp-12);
		padding-top: var(--nd-sp-10);
	}

	.atc__offers-list {
		gap: var(--nd-sp-6);
	}

	.atc__offer {
		display: grid;
		grid-template-columns: var(--nd-sp-36) minmax(0, 1fr) auto;
		grid-template-areas: "ic txt price" "ic txt add";
		gap: var(--nd-sp-2) var(--nd-sp-10);
		align-items: center;
		padding: var(--nd-sp-8) var(--nd-sp-10);
	}

	.atc__offer-ic,
	.atc__offer-img {
		grid-area: ic;
		justify-self: center;
		place-items: center;
		width: var(--nd-sp-36);
		height: var(--nd-sp-36);
	}

	.atc__offer-txt {
		grid-area: txt;
	}

	.atc__offer-txt small {
		display: -webkit-box;
		overflow: hidden;
		font-size: var(--nd-fs-12);
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.atc__offer-price {
		grid-area: price;
		justify-self: end;
		font-size: var(--nd-fs-14);
	}

	.atc__add {
		grid-area: add;
		justify-self: end;
		padding: var(--nd-sp-5) var(--nd-sp-10);
	}

	/* Footer: shipping on one line, then "Pokračovať" (outline) and "Dokončiť nákup" + sum side by side */
	.atc__foot {
		grid-template-columns: 1fr 1.3fr;
		gap: var(--nd-sp-8);
		padding: var(--nd-sp-10) var(--nd-sp-12) calc(var(--nd-sp-10) + env(safe-area-inset-bottom));
	}

	.atc__col {
		display: contents;
	}

	.atc__ship {
		grid-column: 1 / -1;
		gap: var(--nd-sp-6);
		font-size: var(--nd-fs-13);
	}

	.atc__ship svg {
		width: var(--nd-sp-16);
		height: var(--nd-sp-16);
	}

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

	.atc__sum {
		display: none;
	}

	.atc__btn {
		min-height: var(--nd-sp-48);
		padding: 0 var(--nd-sp-12);
		font-size: var(--nd-fs-15);
		line-height: var(--nd-lh-head);
	}

	.atc__btn--brand {
		border: 1.5px solid var(--nd-c-brand);
		background: var(--nd-c-surface);
		color: var(--nd-c-brand);
		font-size: var(--nd-fs-14);
		white-space: normal;
	}

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

	/* Error popup: its single button spans the footer. */
	.atc__col > .atc__btn:only-child {
		grid-column: 1 / -1;
	}

	.atc__btn--cta {
		flex-direction: column;
		gap: 0;
	}

	.atc__btn-sum {
		display: block;
		font-size: var(--nd-fs-13);
		font-weight: var(--nd-fw-semibold);
	}
}

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

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

/* Zľava za balíček k telefónu (A/B test doplnkov) */
.atc__bundle {
	display: grid;
	gap: var(--nd-sp-6);
	margin: var(--nd-sp-10) 0 0;
	padding: var(--nd-sp-10) 0 0;
	border-top: 1px dashed var(--nd-c-line);
	font-size: var(--nd-fs-13);
}

.atc__bundle p {
	margin: 0;
}

.atc__bundle-on {
	display: flex;
	justify-content: space-between;
	gap: var(--nd-sp-8);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-ok);
}

.atc__bundle-nudge {
	padding: var(--nd-sp-6) var(--nd-sp-10);
	border-radius: var(--nd-radius-s);
	background: var(--nd-c-brand-tint);
	color: var(--nd-c-head);
}