/* Nákupný proces /kosik a prihlásenie /profil/login (2026-10). Načítava sa len na týchto stránkach (header.blade.php).
   Farby webu: oranžová #fc8801, text #1d1d1d. Súhrn: partials/summary.blade.php, správanie checkout.js. */

:root {
	--co-orange: #fc8801;
	--co-orange-dark: #b35f00;
	--co-orange-soft: #fff4e6;
	--co-text: #1d1d1d;
	--co-muted: #6b6b6b;
	--co-line: #e5e5e5;
	--co-soft: #f6f6f6;
	--co-green: #23794a;
	--co-red: #c0392b;
}

/* ---------- Kroky ---------- */
.checkout-steps {
	background: var(--co-soft);
	padding: 18px 0;
}
.checkout-steps-list {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.checkout-step {
	display: flex;
	align-items: center;
	font-size: 15px;
	color: var(--co-muted);
}
.checkout-step + .checkout-step::before {
	content: "";
	width: 56px;
	height: 2px;
	margin: 0 14px;
	background: var(--co-line);
}
.checkout-step.is-done + .checkout-step::before {
	background: var(--co-orange);
}
.checkout-step > a,
.checkout-step > span {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
}
.checkout-step > a:hover .checkout-step-name {
	color: var(--co-orange-dark);
	text-decoration: underline;
}
.checkout-step-dot {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 2px solid #cfcfcf;
	border-radius: 50%;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--co-muted);
}
.checkout-step-dot .ico-i {
	font-size: 16px;
}
.checkout-step.is-done {
	color: var(--co-text);
}
.checkout-step.is-done .checkout-step-dot {
	border-color: var(--co-orange);
	background: var(--co-orange);
	color: #fff;
}
.checkout-step.is-current {
	color: var(--co-text);
	font-weight: 600;
}
.checkout-step.is-current .checkout-step-dot {
	border-color: var(--co-orange);
	color: var(--co-orange-dark);
}
.checkout-steps-mobile {
	display: none;
}
@media (max-width: 767.98px) {
	.checkout-steps {
		padding: 12px 0;
	}
	.checkout-steps-list {
		display: none;
	}
	.checkout-steps-mobile {
		display: grid;
		gap: 8px;
	}
	.checkout-steps-mobile p {
		margin: 0;
		font-size: 14px;
		color: var(--co-muted);
	}
	.checkout-steps-mobile strong {
		color: var(--co-text);
	}
}
.checkout-progress,
.checkout-free-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--co-line);
	overflow: hidden;
}
.checkout-progress i,
.checkout-free-bar i {
	display: block;
	height: 100%;
	border-radius: 3px;
	background: var(--co-orange);
}

/* ---------- Rozloženie ---------- */
.checkout {
	padding: 32px 0 72px;
}
.checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 370px;
	gap: 40px;
	align-items: start;
}
.checkout-grid.is-loading,
#checkout-body.is-loading {
	opacity: .6;
	pointer-events: none;
	transition: opacity .15s;
}
.checkout-main {
	min-width: 0;
}
.checkout-title {
	margin: 0 0 20px;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
}
.checkout-title span {
	font-size: 17px;
	font-weight: 400;
	color: var(--co-muted);
}
.checkout-lead {
	margin: -10px 0 20px;
	color: var(--co-muted);
}
@media (max-width: 991.98px) {
	.checkout {
		padding: 20px 0 140px;   /* miesto pre lištu dole */
	}
	.checkout-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.checkout-title {
		font-size: 24px;
	}
}

/* ---------- Položky košíka ---------- */
.cart-items {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--co-line);
}
.cart-item {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr) auto 120px auto;
	gap: 18px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--co-line);
}
.cart-items.is-readonly .cart-item {
	grid-template-columns: 64px minmax(0, 1fr) auto 120px;
	padding: 14px 0;
}
.cart-item-img img {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
	border-radius: 6px;
	background: #fff;
}
.cart-items.is-readonly .cart-item-img img {
	width: 64px;
	height: 64px;
}
.cart-item-name {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--co-text);
}
.cart-item-name:hover {
	color: var(--co-orange-dark);
	text-decoration: underline;
}
.cart-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 5px;
	font-size: 13px;
	color: var(--co-muted);
}
.cart-item-stock,
.cart-item-stock * {
	font-weight: 500;
}
.cart-item-qty {
	font-size: 15px;
	white-space: nowrap;
}
.cart-qty {
	display: flex;
	align-items: center;
	border: 1px solid #cfcfcf;
	border-radius: 6px;
	background: #fff;
}
.cart-qty-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 42px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--co-text);
	cursor: pointer;
}
.cart-qty-btn:disabled {
	color: #c4c4c4;
	cursor: default;
}
.cart-qty-btn:not(:disabled):hover {
	color: var(--co-orange-dark);
}
.cart-qty-btn .ico-i {
	font-size: 16px;
}
.cart-qty-input {
	width: 46px;
	height: 42px;
	padding: 0;
	border: 0;
	border-inline: 1px solid #e3e3e3;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	-moz-appearance: textfield;
}
.cart-item-price {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.cart-item-price b {
	display: block;
	font-size: 17px;
	font-weight: 600;
	white-space: nowrap;
}
.cart-item-price small {
	display: block;
	font-size: 13px;
	color: var(--co-muted);
	white-space: nowrap;
}
.cart-item-remove {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px;
	margin-right: -8px;
	color: #9a9a9a;
	font-size: 13px;
}
.cart-item-remove span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.cart-item-remove .ico-i {
	font-size: 18px;
}
.cart-item-remove:hover {
	color: var(--co-red);
}
@media (max-width: 767.98px) {
	.cart-item,
	.cart-items.is-readonly .cart-item {
		grid-template-columns: 64px minmax(0, 1fr) auto;
		grid-template-areas: "img info remove" "img qty price";
		gap: 10px 12px;
		align-items: start;
	}
	.cart-items.is-readonly .cart-item {
		grid-template-areas: "img info info" "img qty price";
	}
	.cart-item-img { grid-area: img; }
	.cart-item-img img { width: 64px; height: 64px; }
	.cart-item-info { grid-area: info; }
	.cart-qty,
	.cart-item-qty { grid-area: qty; justify-self: start; align-self: center; }
	.cart-item-price { grid-area: price; align-self: center; }
	.cart-item-remove { grid-area: remove; align-self: start; margin-top: -6px; }
	.cart-qty-btn { width: 44px; height: 44px; }
	.cart-qty-input { height: 44px; }
}

/* Doprava zdarma */
.checkout-free {
	display: grid;
	gap: 10px;
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--co-orange-soft);
}
.checkout-free p {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 15px;
}
.checkout-free .ico-i {
	font-size: 22px;
	color: var(--co-orange);
}
.checkout-free.is-done .ico-i {
	color: var(--co-green);
}
.checkout-free-bar {
	background: #fde2bf;
}
.checkout-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--co-muted);
	font-size: 15px;
}
.checkout-back:hover {
	color: var(--co-orange-dark);
	text-decoration: underline;
}
.checkout-back .ico-i {
	font-size: 16px;
}
.checkout-back-shop {
	margin-top: 22px;
}

/* ---------- Súhrn ---------- */
.checkout-summary {
	position: sticky;
	top: 110px;
	display: grid;
	gap: 16px;
	padding: 22px;
	border: 1px solid var(--co-line);
	border-radius: 10px;
	background: #fff;
}
.checkout-summary-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.checkout-summary-title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}
.checkout-summary-close {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: -8px -8px -8px 0;
	border: 0;
	background: none;
}
.checkout-summary-close .ico-i {
	font-size: 22px;
}
.checkout-summary-items {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0 0 14px;
	list-style: none;
	border-bottom: 1px solid var(--co-line);
	font-size: 14px;
	color: var(--co-muted);
}
.checkout-summary-items li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}
.checkout-summary-items li span:last-child {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.checkout-summary-lines,
.checkout-summary-total {
	display: grid;
	gap: 9px;
	margin: 0;
}
.checkout-summary-lines > div,
.checkout-summary-total > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
}
.checkout-summary dt {
	font-weight: 400;
	color: var(--co-muted);
}
.checkout-summary dt small {
	display: block;
	font-size: 13px;
	color: #8d8d8d;
}
.checkout-summary dd {
	margin: 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--co-text);
}
.checkout-summary-later {
	color: var(--co-muted) !important;
	font-size: 14px;
}
.checkout-summary-total {
	padding-top: 14px;
	border-top: 1px solid var(--co-line);
}
.checkout-summary-total .is-total {
	margin-top: 4px;
}
.checkout-summary-total .is-total dt {
	font-weight: 600;
	color: var(--co-text);
}
.checkout-summary-total .is-total dd {
	font-size: 26px;
	font-weight: 700;
}
.checkout-summary-actions {
	display: grid;
	gap: 12px;
	justify-items: center;
}
.checkout-cta {
	display: block;
	width: 100%;
	padding: 15px 18px;
	border: 0;
	border-radius: 6px;
	background: var(--co-orange);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s;
}
.checkout-cta:hover,
.checkout-cta:focus-visible {
	background: #e57900;
	color: #fff;
}
.checkout-cta:disabled {
	opacity: .7;
	cursor: progress;
}
.checkout-trust {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 14px 0 0;
	list-style: none;
	border-top: 1px solid var(--co-line);
	font-size: 14px;
	color: var(--co-muted);
}
.checkout-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.checkout-trust .ico-i {
	font-size: 17px;
	color: var(--co-green);
}
.checkout-trust a {
	color: var(--co-text);
	font-weight: 500;
}

/* Mobil: lišta dole + rozpis ceny ako vysúvací panel */
.checkout-bar {
	display: none;
}
@media (max-width: 991.98px) {
	.checkout-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 14px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--co-line);
		box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
	}
	.checkout-bar-total {
		display: grid;
		min-width: 0;
	}
	.checkout-bar-toggle,
	.checkout-bar-label {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 0;
		border: 0;
		background: none;
		font-size: 13px;
		color: var(--co-muted);
		text-align: left;
	}
	.checkout-bar-toggle span {
		text-decoration: underline;
		text-underline-offset: 2px;
	}
	.checkout-bar-toggle .ico-i {
		font-size: 14px;
	}
	.checkout-bar-total b {
		font-size: 21px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;
	}
	.checkout-bar .checkout-cta {
		width: auto;
		min-width: 150px;
		padding: 14px 20px;
	}
	/* Posledný krok: dlhé tlačidlo „Objednať s povinnosťou platby“ pod sumou na celú šírku */
	.checkout-bar.is-final {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
	.checkout-bar.is-final .checkout-bar-total {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}
	.checkout-bar.is-final .checkout-cta {
		width: 100%;
	}
	.checkout-summary {
		position: static;
	}
	.checkout-summary.is-sheet {
		position: fixed;
		top: auto;
		align-content: start;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1002;
		max-height: 85vh;
		overflow-y: auto;
		padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
		border: 0;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -10px 30px rgba(0, 0, 0, .2);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform .25s ease, visibility 0s linear .25s;
	}
	.checkout-summary.is-sheet .checkout-summary-actions,
	.checkout-summary.is-sheet .checkout-trust {
		display: none;
	}
	.checkout-sheet-open .checkout-summary.is-sheet {
		transform: none;
		visibility: visible;
		transition: transform .25s ease;
	}
	.checkout-sheet-backdrop {
		position: fixed;
		inset: 0;
		z-index: 1001;
		background: rgba(0, 0, 0, .4);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility 0s linear .25s;
	}
	.checkout-sheet-open .checkout-sheet-backdrop {
		opacity: 1;
		visibility: visible;
		transition: opacity .25s ease;
	}
	body.checkout-sheet-open {
		overflow: hidden;
	}
	/* scrollUp tlačidlo by prekrylo lištu */
	body:has(.checkout-bar) #scrollUp {
		bottom: 96px !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	.checkout-summary.is-sheet,
	.checkout-sheet-backdrop {
		transition: none !important;
	}
}

/* ---------- Krok 2: voľby ---------- */
.checkout-options {
	display: grid;
	gap: 10px;
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}
.checkout-options legend,
.checkout-fieldset legend {
	float: none;
	width: auto;
	margin: 0 0 12px;
	padding: 0;
	font-size: 19px;
	font-weight: 600;
}
.checkout-options legend small,
.checkout-fieldset legend small {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 400;
	color: var(--co-muted);
}
.checkout-option {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: start;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid #d6d6d6;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.checkout-option:hover {
	border-color: #b9b9b9;
}
.checkout-option.is-checked {
	border-color: var(--co-orange);
	background: var(--co-orange-soft);
	box-shadow: inset 0 0 0 1px var(--co-orange);
}
.checkout-option input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--co-orange);
	cursor: pointer;
}
.checkout-option-body {
	display: grid;
	gap: 3px;
	min-width: 0;
}
.checkout-option-name {
	font-size: 16px;
	font-weight: 500;
}
.checkout-option-desc {
	font-size: 14px;
	color: var(--co-muted);
}
.checkout-option-price {
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.checkout-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 2px 0 0;
	font-size: 14px;
	color: var(--co-muted);
}
.checkout-hint .ico-i {
	font-size: 18px;
	color: var(--co-orange);
}

/* ---------- Krok 3: formulár ---------- */
.checkout-errors {
	margin-bottom: 20px;
}
.checkout-errors p {
	margin: 0;
}
.checkout-errors ul {
	margin: 6px 0 0;
	padding-left: 20px;
}
.checkout-errors a {
	color: inherit;
	text-decoration: underline;
}
.checkout-login {
	margin-bottom: 26px;
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--co-soft);
}
.checkout-login-line {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 16px;
	font-size: 15px;
}
.checkout-login-form {
	margin-top: 14px;
}
.checkout-login-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 14px;
}
.checkout-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--co-orange-dark);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.checkout-link:hover {
	color: var(--co-orange);
}
.checkout-btn {
	padding: 11px 22px;
	border: 0;
	border-radius: 6px;
	background: var(--co-text);
	color: #fff;
	font-weight: 500;
}
.checkout-btn:hover {
	background: #000;
}
.checkout-logged {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	color: var(--co-muted);
}
.checkout-logged .ico-i {
	font-size: 20px;
}
.checkout-fieldset {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}
.checkout-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
}
@media (max-width: 575.98px) {
	.checkout-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}
.checkout-field {
	display: grid;
	gap: 6px;
	align-content: start;
	min-width: 0;
}
.checkout-field label,
.checkout-field > label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--co-text);
}
.checkout-optional {
	font-weight: 400;
	color: var(--co-muted);
}
.checkout-field input,
.checkout-field select,
.checkout-phone select {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid #c9c9c9;
	border-radius: 6px;
	background: #fff;
	font-size: 16px;   /* 16 px – iOS inak pri zameraní priblíži stránku */
	color: var(--co-text);
}
.checkout-field input:focus,
.checkout-field select:focus,
.checkout-phone select:focus {
	border-color: var(--co-orange);
	outline: 2px solid rgba(252, 136, 1, .25);
	outline-offset: 0;
}
.checkout-field.has-error input {
	border-color: var(--co-red);
}
.checkout-field-error {
	margin: 0;
	font-size: 13px;
	color: var(--co-red);
}
.checkout-field-help {
	margin: 0;
	font-size: 13px;
	color: var(--co-muted);
}
.checkout-phone {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 8px;
}
.checkout-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 0;
	font-size: 15px;
	cursor: pointer;
}
.checkout-check input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--co-orange);
}
.checkout-toggle {
	margin-top: 16px;
	padding: 16px;
	border-radius: 8px;
	background: var(--co-soft);
}
.checkout-toggle .checkout-field-help {
	margin-top: 12px;
}

/* ---------- Krok 4: súhrn ---------- */
.checkout-review {
	display: grid;
	gap: 10px;
	margin-bottom: 28px;
}
.checkout-review-block {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--co-line);
	border-radius: 8px;
}
.checkout-review-block h2,
.checkout-review-items-head h2 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}
.checkout-review-block p {
	margin: 0;
	font-size: 15px;
	color: var(--co-muted);
	overflow-wrap: anywhere;
}
.checkout-review-block .checkout-link {
	flex: 0 0 auto;
	font-size: 14px;
}
.checkout-review-items-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}
.checkout-review-items-head .checkout-link {
	font-size: 14px;
}
.checkout-confirm {
	margin-top: 24px;
	padding: 16px;
	border-radius: 8px;
	background: var(--co-soft);
}
.checkout-confirm .checkout-check {
	margin: 0;
}
.checkout-confirm .checkout-field-error,
.checkout-confirm .checkout-field-help {
	margin: 8px 0 0 30px;
}

/* ---------- Prihlásenie / registrácia (/profil/login) ---------- */
.login-register-form .account-field {
	display: grid;
	gap: 6px;
	margin-bottom: 16px;
}
.login-register-form .account-field label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}
.login-register-form .account-field input {
	margin: 0 !important;
}
.account-password {
	position: relative;
}
.account-password input {
	padding-right: 92px !important;
}
.account-password-toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	padding: 8px 10px;
	border: 0;
	background: none;
	color: var(--co-orange-dark);
	font-size: 14px;
	font-weight: 600;
}
.login-register-form .account-check {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 4px 0 18px;
	font-size: 15px;
}
.login-register-form .account-check input {
	width: 18px !important;
	height: 18px !important;
	margin: 2px 0 0 !important;
	accent-color: var(--co-orange);
}
.login-register-form .account-note {
	margin: 18px 0 0;
	font-size: 14px;
	color: var(--co-muted);
}
.checkout-field-help a,
.checkout-check a {
	color: var(--co-orange-dark);
	text-decoration: underline;
}
.login-register-form .button-box button {
	background: var(--co-orange);
	color: #fff;
}
.login-register-form .button-box button:hover {
	background: #e57900;
	color: #fff;
}