/*
 * "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: photo | name + what came with it | price of it all */
.atc__item {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-12);
	padding-bottom: var(--nd-sp-12);
	border-bottom: 1px solid var(--nd-c-line);
}

.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__item-txt small {
	overflow-wrap: anywhere;
}

/* Offer sections: services ("Chráňte svoj nový telefón") and one add-on per accessory group ("Ďalej sa hodí") */
.atc__sec {
	margin-top: var(--nd-sp-16);
}

.atc__sec-title {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-6);
	margin-bottom: var(--nd-sp-10);
	font-size: var(--nd-fs-15);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-brand);
}

.atc__svcs,
.atc__accs {
	display: grid;
	gap: var(--nd-sp-10);
}

.atc__accs {
	gap: var(--nd-sp-8);
}

/* Service: name + "Kryje" points | price per month, one-off price, "Pridať" */
.atc__svc {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--nd-sp-12);
	padding: var(--nd-sp-12) var(--nd-sp-14);
	border: 1.5px solid var(--nd-c-brand-tint-2);
	border-radius: var(--nd-radius-m);
	background: var(--nd-c-surface);
}

.atc__svc.is-done {
	border-color: var(--nd-c-cta);
	background: color-mix(in srgb, var(--nd-c-cta) 7%, var(--nd-c-surface));
}

.atc__svc-tag {
	position: absolute;
	top: calc(var(--nd-sp-10) * -1);
	left: var(--nd-sp-12);
	padding: var(--nd-sp-2) var(--nd-sp-8);
	border-radius: var(--nd-radius-pill);
	background: var(--nd-c-brand);
	color: var(--nd-c-on-brand);
	font-size: var(--nd-fs-11);
	font-style: normal;
	font-weight: var(--nd-fw-bold);
}

.atc__svc-main {
	flex: 1;
	min-width: 0;
}

.atc__svc-main b {
	font-size: var(--nd-fs-15);
	line-height: var(--nd-lh-name);
	color: var(--nd-c-head);
}

.atc__svc-main small {
	display: block;
	font-size: var(--nd-fs-13);
	color: var(--nd-c-muted);
}

.atc__svc-covers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nd-sp-2) var(--nd-sp-14);
	margin: var(--nd-sp-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--nd-fs-13);
	color: var(--nd-c-ink);
}

.atc__svc-covers li {
	display: flex;
	align-items: flex-start;
	gap: var(--nd-sp-6);
}

.atc__svc-covers svg {
	flex: 0 0 auto;
	margin-top: var(--nd-sp-3);
	color: var(--nd-c-cta);
}

.atc__svc-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--nd-sp-2);
	text-align: right;
}

.atc__svc-price {
	font-size: var(--nd-fs-17);
	font-weight: var(--nd-fw-bold);
	color: var(--nd-c-brand);
	white-space: nowrap;
}

.atc__svc-price small {
	font-size: var(--nd-fs-12);
	font-weight: var(--nd-fw-semibold);
}

.atc__svc-once {
	font-size: var(--nd-fs-12);
	color: var(--nd-c-muted);
	white-space: nowrap;
}

.atc__svc-add {
	display: inline-flex;
	align-items: center;
	gap: var(--nd-sp-6);
	margin-top: var(--nd-sp-6);
	padding: var(--nd-sp-6) var(--nd-sp-14);
	border: 1.5px solid var(--nd-c-brand);
	border-radius: var(--nd-radius-btn);
	background: var(--nd-c-surface);
	color: var(--nd-c-brand);
	font: inherit;
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-bold);
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--nd-dur-fast), color var(--nd-dur-fast);
}

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

.atc__svc-add.is-done {
	border-color: transparent;
	background: var(--nd-c-cta);
	color: var(--nd-c-on-cta);
	cursor: default;
}

/* Add-on: photo | group + product | price | round "+" */
.atc__have {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-6);
	margin: calc(var(--nd-sp-4) * -1) 0 var(--nd-sp-8);
	font-size: var(--nd-fs-12);
	color: var(--nd-c-ok);
}

.atc__acc {
	display: flex;
	align-items: center;
	gap: var(--nd-sp-12);
	padding: var(--nd-sp-8) var(--nd-sp-10);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius-m);
	background: var(--nd-c-surface);
	transition: border-color var(--nd-dur-fast);
}

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

.atc__acc-img {
	flex: 0 0 auto;
	width: var(--nd-sp-44);
	height: var(--nd-sp-44);
	padding: var(--nd-sp-3);
	border: 1px solid var(--nd-c-line);
	border-radius: var(--nd-radius-s);
	object-fit: contain;
}

.atc__acc-txt {
	flex: 1;
	min-width: 0;
	display: grid;
}

.atc__acc-txt span {
	font-size: var(--nd-fs-11);
	font-weight: var(--nd-fw-bold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--nd-c-muted);
}

.atc__acc-txt b {
	overflow: hidden;
	font-size: var(--nd-fs-14);
	font-weight: var(--nd-fw-semibold);
	color: var(--nd-c-head);
	white-space: nowrap;
	text-overflow: ellipsis;
}

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

.atc__acc-add {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--nd-sp-36);
	height: var(--nd-sp-36);
	padding: 0;
	border: 0;
	border-radius: var(--nd-radius-round);
	background: var(--nd-c-cta);
	color: var(--nd-c-on-cta);
	cursor: pointer;
	transition: background var(--nd-dur-fast);
}

.atc__acc-add svg {
	width: var(--nd-sp-18);
	height: var(--nd-sp-18);
}

.atc__acc-add:hover:not(:disabled),
.atc__acc-add:focus-visible {
	background: var(--nd-c-cta-hover);
}

.atc__acc-add:focus-visible {
	outline: 2px solid var(--nd-c-brand);
	outline-offset: 2px;
}

.atc__acc-add.is-adding svg {
	visibility: hidden;
}

.atc__acc-add.is-adding::after {
	content: "";
	position: absolute;
	width: var(--nd-sp-16);
	height: var(--nd-sp-16);
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--nd-radius-round);
	animation: mobilky-atc-spin 0.8s linear infinite;
}

.atc__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	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);
	}

	.atc__sec {
		margin-top: var(--nd-sp-12);
	}

	.atc__svc {
		padding: var(--nd-sp-10) var(--nd-sp-12);
	}

	.atc__svc-covers {
		gap: 0 var(--nd-sp-10);
		font-size: var(--nd-fs-12);
	}

	.atc__svc-price {
		font-size: var(--nd-fs-15);
	}

	.atc__acc {
		gap: 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__acc,
	.atc__acc-add,
	.atc__svc-add,
	.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;
	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);
}