/*
 * Cancellation form — public UI in the theme's design language.
 *
 * Reuses the theme primitives that load globally from components.css /
 * pages.css (.field, .field__label, .field__input, .field-row, .btn,
 * .checkbox) and mirrors the quote-form recipe for the card + numbered
 * blocks. Only slc-* classes live here; every color/size comes from the
 * theme tokens with safe fallbacks.
 */

/* Spans the page shell (template-cancellation.php) so the card reads as
   a primary surface — the quote-form recipe. */
.slc-wrap {
	width: 100%;
	margin: 0;
}

.slc-lead {
	font-size: var(--fs-md, 1.125rem);
	color: var(--graphite, #3a4254);
	line-height: 1.65;
	margin: 0 0 1.6rem;
}

/* --- storno terms — tinted panel ----------------------------------- */
.slc-terms {
	margin: 0 0 1.8rem;
	padding: 1.3rem 1.5rem 1.2rem;
	background: var(--surface-2, #f1ece0);
	border: var(--hairline-w, 1px) solid var(--line, #e3ded0);
	border-radius: var(--radius-md, 4px);
}

.slc-terms__title {
	font-family: var(--font-mono, monospace);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mute, #6c7380);
	margin: 0 0 0.7rem;
}

.slc-terms__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slc-terms__list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.2rem;
	padding: 0.55rem 0;
	border-bottom: var(--hairline-w, 1px) solid var(--line-soft, #eee9db);
	font-size: 0.92rem;
	color: var(--graphite, #3a4254);
}

.slc-terms__list li:last-child {
	border-bottom: 0;
}

.slc-terms__list strong {
	color: var(--ink, #0b1220);
	font-weight: 600;
	white-space: nowrap;
}

.slc-terms__note {
	margin: 0.6rem 0 0;
	font-size: 0.84rem;
	color: var(--mute, #6c7380);
	line-height: 1.55;
}

.slc-terms__note a,
.slc-foot a {
	color: var(--ink, #0b1220);
	border-bottom: var(--hairline-w, 1px) solid var(--line-strong, #cec7b4);
	transition: color 180ms ease, border-color 180ms ease;
}

.slc-terms__note a:hover,
.slc-foot a:hover {
	color: var(--highlight, #eb8c2e);
	border-color: var(--highlight, #eb8c2e);
}

/* --- the card + numbered blocks (quote-form recipe) ----------------- */
.slc-card {
	counter-reset: slcBlock;
	padding: 2.6rem 2.8rem 2.4rem;
	background: var(--surface, #fff);
	border: var(--hairline-w, 1px) solid var(--line, #e3ded0);
	border-radius: 6px;
	box-shadow:
		0 1px 0 rgba(11, 18, 32, 0.02),
		0 12px 40px -16px rgba(11, 18, 32, 0.12);
}

.slc-block {
	counter-increment: slcBlock;
	display: flex;
	flex-direction: column;
	gap: 1.3rem;
}

/* Any `display: flex/grid` in this component overrides the UA default
   for the `hidden` attribute (quote-form learned the same lesson) — JS
   toggles panels/blocks/pickers via el.hidden, so re-assert it for the
   whole wrap. Hidden blocks also stop incrementing the CSS counter, so
   after lookup the result blocks renumber to 01/02. */
.slc-wrap [hidden] {
	display: none !important;
}

.slc-block + .slc-block,
#slc-result .slc-block {
	margin-top: 2.2rem;
}

.slc-block__title {
	margin: 0;
	padding-bottom: 0.9rem;
	border-bottom: var(--hairline-w, 1px) solid var(--line, #e3ded0);
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--ink, #0b1220);
}

.slc-block__title::before {
	content: counter(slcBlock, decimal-leading-zero);
	font-family: var(--font-mono, monospace);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--highlight, #eb8c2e);
	background: var(--highlight-wash, #fbebd6);
	padding: 0.18rem 0.5rem;
	border-radius: 999px;
	line-height: 1;
	position: relative;
	top: -0.18em;
}

.slc-field--wide {
	grid-column: 1 / -1;
}

.slc-hint {
	font-size: 0.76rem;
	color: var(--fog, #9aa0aa);
	line-height: 1.5;
}

/* Shared hint for the name pair — sits on its own grid row; pull it back
   toward the two fields it annotates (the row gap is 1.6rem). */
.slc-hint--names {
	margin-top: -0.9rem;
}

/* Honeypot — off-screen, not display:none (smart bots skip those). */
.slc-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.slc-actions {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	margin-top: 0.2rem;
}

.slc-alert {
	padding: 0.75rem 1rem;
	background: rgba(176, 58, 46, 0.07);
	border-left: 2px solid var(--signal, #b03a2e);
	border-radius: var(--radius-sm, 2px);
	color: var(--signal, #b03a2e);
	font-size: 0.88rem;
	line-height: 1.5;
}

/* --- order summary --------------------------------------------------- */
.slc-summary {
	display: flex;
	flex-direction: column;
}

.slc-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.2rem;
	padding: 0.55rem 0;
	border-bottom: var(--hairline-w, 1px) solid var(--line-soft, #eee9db);
}

.slc-summary__row:last-child {
	border-bottom: 0;
}

.slc-summary__label {
	font-family: var(--font-mono, monospace);
	font-size: 0.64rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mute, #6c7380);
	white-space: nowrap;
}

.slc-summary__value {
	font-size: 0.95rem;
	color: var(--ink, #0b1220);
	text-align: right;
}

.slc-summary__value strong {
	font-weight: 600;
}

/* --- storno preview -------------------------------------------------- */
.slc-preview {
	padding: 1.1rem 1.3rem;
	background: var(--highlight-wash, #fbebd6);
	border: var(--hairline-w, 1px) solid var(--highlight-soft, #f4b877);
	border-radius: var(--radius-md, 4px);
}

/* Standalone notice under the order summary (e.g. "žiadosť už evidujeme"). */
#slc-result > .slc-preview {
	margin-top: 1.6rem;
}

.slc-preview__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-size: 0.92rem;
	color: var(--graphite, #3a4254);
	padding: 0.25rem 0;
}

.slc-preview__row strong {
	font-size: 1.05rem;
	color: var(--ink, #0b1220);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.slc-preview__row--refund strong {
	font-size: 1.35rem;
	font-weight: 600;
}

.slc-preview__note {
	margin-top: 0.5rem;
	font-size: 0.8rem;
	color: var(--mute, #6c7380);
	line-height: 1.5;
}

.slc-preview--warn {
	background: rgba(176, 58, 46, 0.06);
	border-color: rgba(176, 58, 46, 0.25);
}

.slc-preview--warn .slc-preview__row {
	color: var(--signal, #b03a2e);
}

/* --- request-type segmented toggle ----------------------------------- */
.slc-seg {
	display: inline-flex;
	flex-wrap: wrap;
	align-self: flex-start;
	gap: 4px;
	padding: 4px;
	background: var(--paper, #f7f4ec);
	border: var(--hairline-w, 1px) solid var(--line, #e3ded0);
	border-radius: 999px;
}

.slc-seg__opt {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.slc-seg__opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
}

.slc-seg__opt span {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.15rem;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--graphite, #3a4254);
	transition: background 180ms ease, color 180ms ease;
	line-height: 1.3;
}

.slc-seg__opt:hover span {
	color: var(--ink, #0b1220);
}

.slc-seg__opt input:checked + span {
	background: var(--ink, #0b1220);
	color: var(--paper, #f7f4ec);
}

.slc-seg__opt input:focus-visible + span {
	outline: 2px solid var(--highlight, #eb8c2e);
	outline-offset: 1px;
}

/* --- panels + legs ---------------------------------------------------- */
.slc-panel {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* Both legs share one row on desktop; each folds to full width on
   narrow screens. A single leg (one-way) spans the whole row via auto-fit. */
.slc-legs {
	display: grid;
	/* min(340px, 100%) keeps the column from forcing itself wider than the
	   card on narrow phones (a plain 340px floor overflows at ~375px). */
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 1.1rem;
	align-items: start;
}

.slc-legs > .slc-leg {
	min-width: 0;
}

/* Inside the half-width leg cards the picker reads better single-column. */
.slc-legs .slc-leg__picker {
	grid-template-columns: 1fr;
	gap: 0.9rem;
}

.slc-leg {
	padding: 1.1rem 1.3rem;
	border: var(--hairline-w, 1px) solid var(--line, #e3ded0);
	border-radius: var(--radius-md, 4px);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.slc-leg__title {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	flex-wrap: wrap;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ink, #0b1220);
}

/* Current term chip next to the leg title. */
.slc-leg__current {
	font-family: var(--font-mono, monospace);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--graphite, #3a4254);
	background: var(--surface-2, #f1ece0);
	border: var(--hairline-w, 1px) solid var(--line, #e3ded0);
	border-radius: 999px;
	padding: 0.14rem 0.6rem;
}

/* Smaller segmented variant for the per-leg mode toggle. */
.slc-seg--sm .slc-seg__opt span {
	padding: 0.4rem 0.9rem;
	font-size: 0.8rem;
}

/* Steppers inside pax/extras cards — theme .stepper supplies the look;
   just pin the disabled state (min/max reached). */
.slc-leg--pax .stepper {
	align-self: flex-start;
}

.slc-leg--pax .stepper button[disabled],
.slc-leg--extras .stepper button[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* One extra service: label left, stepper right; VIP address field below. */
.slc-extra {
	padding: 0.55rem 0;
	border-bottom: var(--hairline-w, 1px) solid var(--line-soft, #eee9db);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.slc-extra:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.slc-extra__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.slc-extra__label {
	font-size: 0.92rem;
	color: var(--ink, #0b1220);
}

/* Changed quantity gets the brand highlight so the edit is obvious. */
.slc-extra-value--changed {
	color: var(--highlight, #eb8c2e);
	font-weight: 700;
}

/* Stacked prefilled VIP address inputs (one per existing address). */
.slc-vip-addrs {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

/* Address struck out by a VIP quantity reduction — visibly removed. */
.slc-wrap .slc-vip-addr--off,
.slc-wrap .slc-vip-addr--off:hover {
	text-decoration: line-through;
	opacity: 0.5;
	cursor: not-allowed;
}

/* Tight footnote stack under the submit button. */
.slc-change-notes {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.slc-change-notes .slc-note {
	margin: 0;
}

.slc-leg__times {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.slc-leg__slot {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.55rem 0.95rem;
	border: var(--hairline-w, 1px) solid var(--line-strong, #cec7b4);
	border-radius: var(--radius-md, 4px);
	background: var(--surface, #fff);
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.slc-leg__slot-time {
	font-family: var(--font-mono, monospace);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ink, #0b1220);
	line-height: 1.2;
}

.slc-leg__slot-free {
	font-family: var(--font-mono, monospace);
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mute, #6c7380);
}

/* The theme's hover.css carries GLOBAL `button:hover { hover-tint
   !important }` and `button:focus/:active { transparent !important }`
   resets (anti-GeneratePress bleed). A freshly clicked slot keeps
   focus, so without these guards the selected chip went transparent
   with paper-white text = invisible. Same defence pattern the theme
   uses for its own `.chip[aria-pressed]`: higher specificity +
   !important on every interaction state. */
.slc-wrap .slc-leg__slot:hover,
.slc-wrap .slc-leg__slot:focus,
.slc-wrap .slc-leg__slot:focus-visible,
.slc-wrap .slc-leg__slot:active {
	background: var(--hover-tint, rgba(243, 237, 224, 0.4)) !important;
	color: inherit !important;
	border-color: var(--ink, #0b1220);
}

.slc-wrap .slc-leg__slot.is-selected,
.slc-wrap .slc-leg__slot.is-selected:hover,
.slc-wrap .slc-leg__slot.is-selected:focus,
.slc-wrap .slc-leg__slot.is-selected:focus-visible,
.slc-wrap .slc-leg__slot.is-selected:active {
	background: var(--ink, #0b1220) !important;
	border-color: var(--ink, #0b1220) !important;
}

.slc-leg__slot.is-selected .slc-leg__slot-time,
.slc-leg__slot.is-selected .slc-leg__slot-free {
	color: var(--paper, #f7f4ec) !important;
}

.slc-leg__slot[disabled] {
	opacity: 0.4;
	cursor: default;
}

.slc-wrap .slc-leg__slot[disabled]:hover,
.slc-wrap .slc-leg__slot[disabled]:focus,
.slc-wrap .slc-leg__slot[disabled]:active {
	background: var(--surface, #fff) !important;
	border-color: var(--line-strong, #cec7b4);
}

.slc-leg__loading,
.slc-leg__empty {
	font-size: 0.84rem;
	color: var(--mute, #6c7380);
}

/* "Nový termín" chosen but no departure time picked yet — flag the slot
   area the same signal-red way fields are flagged. */
.slc-leg-times--invalid {
	border: 1px dashed var(--signal, #b03a2e);
	border-radius: var(--radius-md, 4px);
	background: rgba(176, 58, 46, 0.04);
	padding: 0.5rem;
}

.slc-note {
	font-size: 0.8rem;
	color: var(--mute, #6c7380);
	line-height: 1.55;
}

/* Consent inside a soft tinted row (quote-form consent recipe). */
.slc-consent {
	padding: 1rem 1.2rem;
	background: var(--paper, #f7f4ec);
	border: var(--hairline-w, 1px) solid var(--line, #e3ded0);
	border-radius: var(--radius-md, 4px);
}

.slc-consent--invalid {
	border-color: var(--signal, #b03a2e);
	background: rgba(176, 58, 46, 0.05);
}

/* --- success ---------------------------------------------------------- */
.slc-success {
	text-align: center;
	padding: 1.4rem 0 0.6rem;
}

.slc-success__eyebrow {
	font-family: var(--font-mono, monospace);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--highlight, #eb8c2e);
	margin-bottom: 0.8rem;
}

.slc-success__title {
	font-size: var(--fs-lg, 1.375rem);
	font-weight: 600;
	color: var(--ink, #0b1220);
	margin-bottom: 1rem;
}

.slc-success__number {
	display: inline-block;
	font-family: var(--font-mono, monospace);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--ink, #0b1220);
	background: var(--highlight-wash, #fbebd6);
	border: var(--hairline-w, 1px) solid var(--highlight-soft, #f4b877);
	border-radius: 999px;
	padding: 0.45rem 1.3rem;
	margin-bottom: 1.1rem;
}

.slc-success__note {
	max-width: 480px;
	margin: 0 auto;
	font-size: 0.92rem;
	color: var(--graphite, #3a4254);
	line-height: 1.6;
}

.slc-success__note + .slc-success__note {
	margin-top: 0.3rem;
}

/* --- footnotes (inside the card, under the actions) ------------------- */
.slc-card__foot {
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: var(--hairline-w, 1px) solid var(--line-soft, #eee9db);
}

.slc-foot {
	margin: 0;
	font-size: 0.82rem;
	color: var(--mute, #6c7380);
	line-height: 1.6;
}

.slc-foot + .slc-foot {
	margin-top: 0.4rem;
}

.slc-foot__sep {
	margin: 0 0.35rem;
	color: var(--fog, #9aa0aa);
}

/* --- responsive ------------------------------------------------------- */
@media (max-width: 680px) {
	.slc-card {
		padding: 1.6rem 1.25rem 1.5rem;
	}

	/* Storno rows stack: the nowrap fee value otherwise pushes past the
	   card edge and drags the whole page into horizontal scroll. */
	.slc-terms__list li {
		display: block;
	}

	.slc-terms__list strong {
		display: block;
		white-space: normal;
		margin-top: 2px;
	}

	.slc-actions .btn {
		width: 100%;
		justify-content: center;
	}

	/* Type selector: the same one-row pill tray as desktop — the two
	   options split 50/50 and the long label wraps inside its pill. */
	.slc-seg {
		align-self: stretch;
	}

	.slc-seg:not(.slc-seg--sm) .slc-seg__opt {
		flex: 1 1 0;
		min-width: 0;
	}

	.slc-seg:not(.slc-seg--sm) .slc-seg__opt span {
		width: 100%;
		justify-content: center;
		text-align: center;
		white-space: normal;
		line-height: 1.25;
		font-size: 0.8rem;
		padding: 0.5rem 0.6rem;
	}

	/* Small per-leg segs: free-standing wrapping chips — a 999px tray
	   wrapped onto two rows reads as a lumpy egg. */
	.slc-seg--sm {
		background: transparent;
		border: 0;
		padding: 0;
		gap: 8px;
	}

	.slc-seg--sm .slc-seg__opt {
		flex: 1 1 auto;
	}

	.slc-seg--sm .slc-seg__opt span {
		width: 100%;
		justify-content: center;
		background: var(--paper, #f7f4ec);
		border: var(--hairline-w, 1px) solid var(--line, #e3ded0);
	}

	.slc-seg--sm .slc-seg__opt input:checked + span {
		border-color: var(--ink, #0b1220);
	}

	.slc-summary__value {
		text-align: right;
	}
}