/* Ducato Trans - rezervare bilete (WS Form), 1.1.0.
   Colors, radii, spacing and fonts come from the site's Automatic.css tokens, with fallbacks. WS Form's style
   defines its --wsf-* variables unlayered on :where([data-wsf-style-id]); this file redefines them on the form
   and on its calendar, which WS Form adds at the end of the page. Colored fills under white text use
   --primary-semi-dark, so the text stays readable even if the brand color becomes a light one, such as the
   old site's gold. */

.dt-rezervare .dt-hide,
.dt-rezervare .dt-garda {
	display: none !important;
}

/* Until the script has added times and prices, the bare trip list stays hidden */
.dt-rezervare:not(.dt-gata) .dt-cursa [data-row-radio] {
	display: none;
}

/* ---------- Variables ---------- */

form.wsf-form.dt-rezervare,
.xdsoft_datetimepicker.dt-calendar {
	/* Resolved here, so a button's own --focus-color (Automatic.css) does not change them */
	--_dt-focus: var(--focus-color, #265ef7);
	--_dt-accent: var(--primary, #265ef7);
	--_dt-ink: var(--primary-semi-dark, #1d47b7);
	--_dt-tint: var(--primary-ultra-light, #f5f8ff);
	--_dt-text: var(--text-dark, #000);
	--_dt-muted: var(--neutral-semi-dark, #575b61);
	--_dt-soft: var(--neutral-light, #eaecee);
	--_dt-white: var(--white, #fff);
	/* Field borders, 3.8:1 on white: enough for a field's only outline */
	--_dt-line: color-mix(in oklch, var(--neutral-semi-dark, #575b61) 50%, var(--neutral-semi-light, #acafb4));
	/* Error text, 5.3:1 on white (--danger alone is 4.5:1 only on paper) */
	--_dt-error: color-mix(in oklch, var(--danger, #de3546) 70%, var(--danger-semi-dark, #991c2b));

	--wsf-form-color-base: var(--_dt-text);
	--wsf-form-color-base-contrast: var(--_dt-white);
	--wsf-form-color-primary: var(--_dt-ink);
	--wsf-form-color-accent: var(--_dt-ink);
	--wsf-form-color-neutral: var(--neutral-semi-light, #acafb4);
	--wsf-form-color-danger: var(--danger, #de3546);
	--wsf-form-color-success: var(--success, #2aa745);

	--wsf-field-color-background: var(--_dt-white);
	--wsf-field-color-background-disabled: var(--bg-light, #eaecee);
	--wsf-field-color-placeholder: var(--_dt-muted);
	--wsf-field-border-color: var(--_dt-line);
	--wsf-field-border-color-hover: var(--_dt-muted);
	--wsf-field-border-color-focus: var(--_dt-focus);
	--wsf-field-border-radius: var(--radius, 8px);
	--wsf-field-padding-vertical: 12px;
	--wsf-field-padding-horizontal: 14px;
	--wsf-field-box-shadow: 0 0 0 1px var(--_dt-focus), 0 0 0 4px color-mix(in oklch, var(--_dt-focus) 22%, transparent);
	--wsf-field-label-font-size: var(--text-s, .9375rem);
	--wsf-field-label-font-weight: 600;
	--wsf-field-label-gap: 6px;
	--wsf-field-help-color: var(--_dt-muted);
	--wsf-field-invalid-feedback-color: var(--_dt-error);
	--wsf-field-invalid-feedback-gap: 6px;
	--wsf-field-checkbox-border-radius: var(--radius-s, 5px);
	--wsf-field-select-select2-result-color-background-selected: var(--_dt-tint);
	--wsf-field-select-select2-result-padding-vertical: 10px;
	--wsf-field-select-select2-result-padding-horizontal: 14px;
	--wsf-field-button-padding-vertical: 14px;
	--wsf-field-button-font-weight: 700;

	--wsf-section-legend-color: var(--heading-color, var(--_dt-text));
	--wsf-section-legend-font-family: var(--heading-font-family, inherit);
	--wsf-section-legend-font-size: var(--text-l, 1.25rem);
	--wsf-section-legend-font-weight: var(--heading-font-weight, 700);
	--wsf-section-legend-gap: 12px;

	/* Steps */
	--wsf-group-li-border-width: 2px;
	--wsf-group-li-color: var(--_dt-muted);
	--wsf-group-li-color-active: var(--_dt-text);
	--wsf-group-li-color-focus: var(--_dt-text);
	--wsf-group-li-color-disabled: var(--_dt-muted);
	--wsf-group-li-font-size: var(--text-s, .9375rem);
	--wsf-group-li-font-weight: 600;
	--wsf-group-li-steps-size: 36px;
	--wsf-group-li-steps-font-size: var(--text-s, .9375rem);
	--wsf-group-li-steps-color: var(--_dt-muted);
	--wsf-group-li-steps-color-background: var(--_dt-white);
	--wsf-group-li-steps-border-color: var(--_dt-line);
	/* The current step is filled, like a finished one, which shows a check instead of its number */
	--wsf-group-li-steps-color-background-active: var(--_dt-ink);
	--wsf-group-li-steps-color-active: var(--_dt-white);

	/* Calendar */
	--wsf-field-datetime-calendar-color-background: var(--_dt-white);
	--wsf-field-datetime-calendar-border-color: var(--_dt-white);
	--wsf-field-datetime-calendar-heading-color-background: var(--_dt-white);
	--wsf-field-datetime-calendar-heading-color: var(--_dt-muted);
	--wsf-field-datetime-calendar-today-color-background: var(--_dt-tint);
	--wsf-field-datetime-calendar-today-color: var(--_dt-ink);
	--wsf-field-datetime-calendar-hover-color-background: var(--primary-light, #e1ebfe);
	--wsf-field-datetime-calendar-hover-color: var(--_dt-ink);
	--wsf-field-datetime-calendar-font-weight: 600;
	--wsf-field-datetime-calendar-padding-vertical: 8px;
}

/* ---------- Form ---------- */

form.wsf-form.dt-rezervare {
	--wsf-form-color-background: var(--_dt-white);
	--wsf-form-border-color: var(--_dt-soft);
	--wsf-form-border-width: 1px;
	--wsf-form-border-radius: var(--radius-l, 12px);
	--wsf-form-padding-horizontal: var(--card-padding, 1.25rem);
	--wsf-form-padding-vertical: var(--card-padding, 1.25rem);
	max-inline-size: 46rem;
	margin-inline: auto;
	box-shadow: var(--box-shadow-1, 0 0 40px rgb(0 0 0 / .1));
}

/* Steps: numbered circles, a check on the finished step */
form.wsf-form.dt-rezervare ul.wsf-group-tabs.wsf-steps {
	margin-block-end: var(--space-s, 1.25rem);
	padding-block-end: var(--space-s, 1.25rem);
	border-block-end: 1px solid var(--_dt-soft);
}

form.wsf-form.dt-rezervare ul.wsf-group-tabs.wsf-steps > li > a::before {
	margin-block-end: 8px;
}

@keyframes dt-pas {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

form.wsf-form.dt-rezervare .wsf-group {
	animation: dt-pas .25s ease-out;
}

/* The total is in the summary and on the pay button */
form.wsf-form.dt-rezervare .dt-total {
	display: none;
}

/* ---------- Swap stations ---------- */

form.wsf-form.dt-rezervare .dt-swap {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	margin: 10px 0 0;
	padding: 6px 14px;
	border: 1px solid var(--_dt-soft);
	border-radius: 999px;
	background: var(--_dt-white);
	color: var(--_dt-ink);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	touch-action: manipulation;
}

form.wsf-form.dt-rezervare .dt-swap:hover {
	border-color: var(--primary-light, #e1ebfe);
	background: var(--_dt-tint);
}

/* ---------- Passengers and trips: chosen options are tinted, with the brand color on the edge ---------- */

form.wsf-form.dt-rezervare .dt-pasageri [role="radiogroup"] {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
}

form.wsf-form.dt-rezervare .dt-pasageri .wsf-inline {
	display: block;
	margin: 0;
}

form.wsf-form.dt-rezervare :is(.dt-pasageri, .dt-cursa) input[type=radio].wsf-field.wsf-button + label.wsf-label {
	border: 1px solid var(--_dt-line);
	background-color: var(--_dt-white);
	box-shadow: none;
	color: var(--_dt-text);
}

form.wsf-form.dt-rezervare :is(.dt-pasageri, .dt-cursa) input[type=radio].wsf-field.wsf-button:hover:enabled:not(:checked) + label.wsf-label {
	border-color: var(--_dt-muted);
}

form.wsf-form.dt-rezervare :is(.dt-pasageri, .dt-cursa) input[type=radio].wsf-field.wsf-button:checked + label.wsf-label {
	border-color: var(--_dt-accent);
	background-color: var(--_dt-tint);
	box-shadow: inset 0 0 0 1px var(--_dt-accent);
	color: var(--_dt-text);
}

form.wsf-form.dt-rezervare :is(.dt-pasageri, .dt-cursa) input[type=radio].wsf-field.wsf-button:focus-visible + label.wsf-label {
	box-shadow: var(--wsf-field-box-shadow);
}

form.wsf-form.dt-rezervare :is(.dt-pasageri, .dt-cursa) input[type=radio].wsf-field.wsf-button:checked:focus-visible + label.wsf-label {
	box-shadow: inset 0 0 0 1px var(--_dt-accent), var(--wsf-field-box-shadow);
}

form.wsf-form.dt-rezervare .dt-pasageri input[type=radio].wsf-field.wsf-button + label.wsf-label {
	display: block;
	padding: 12px 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

form.wsf-form.dt-rezervare .dt-pasageri input[type=radio].wsf-field.wsf-button:checked + label.wsf-label {
	color: var(--_dt-ink);
}

/* Trip cards, with a radio mark on the left */
form.wsf-form.dt-rezervare .dt-cursa input[type=radio].wsf-field.wsf-button + label.wsf-label {
	position: relative;
	padding: 14px 16px 14px 48px;
	text-align: start;
}

form.wsf-form.dt-rezervare .dt-cursa input[type=radio].wsf-field.wsf-button + label.wsf-label::before {
	display: block;
	top: 17px;
	left: 16px;
	width: 20px;
	height: 20px;
	border: 2px solid var(--_dt-line);
	background-color: var(--_dt-white);
	box-shadow: none;
}

form.wsf-form.dt-rezervare .dt-cursa input[type=radio].wsf-field.wsf-button:checked + label.wsf-label::before {
	border-color: var(--_dt-accent);
	background-color: var(--_dt-accent);
	box-shadow: inset 0 0 0 3px var(--_dt-white);
}

/* A trip that cannot be booked: readable, but plainly not a choice */
form.wsf-form.dt-rezervare .dt-cursa input[type=radio].wsf-field.wsf-button:disabled + label.wsf-label {
	border-style: dashed;
	background-color: var(--bg-ultra-light, #f9fafc);
	color: var(--_dt-muted);
	opacity: 1;
}

form.wsf-form.dt-rezervare .dt-cursa input[type=radio].wsf-field.wsf-button:disabled + label.wsf-label::before {
	border-color: var(--_dt-soft);
	background-color: var(--bg-light, #eaecee);
}

/* "Continue" without a trip: the free trips are outlined in red, like the other fields */
form.wsf-form.dt-rezervare.wsf-validated .dt-cursa:has(.dt-garda:invalid) input[type=radio].wsf-field.wsf-button:enabled + label.wsf-label,
form.wsf-form.dt-rezervare .wsf-validated .dt-cursa:has(.dt-garda:invalid) input[type=radio].wsf-field.wsf-button:enabled + label.wsf-label {
	border-color: var(--wsf-form-color-danger);
}

form.wsf-form.dt-rezervare .dt-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	align-items: baseline;
	text-align: start;
	white-space: normal;
	line-height: 1.35;
}

form.wsf-form.dt-rezervare .dt-ore,
form.wsf-form.dt-rezervare .dt-pret {
	font-size: 1.125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

form.wsf-form.dt-rezervare .dt-pret {
	text-align: end;
	white-space: nowrap;
}

form.wsf-form.dt-rezervare .dt-pret small {
	display: block;
	color: var(--_dt-muted);
	font-size: .75rem;
	font-weight: 400;
}

form.wsf-form.dt-rezervare .dt-loc,
form.wsf-form.dt-rezervare .dt-det,
form.wsf-form.dt-rezervare .dt-motiv {
	grid-column: 1 / -1;
	font-size: .9375rem;
}

form.wsf-form.dt-rezervare .dt-det {
	color: var(--_dt-muted);
	font-size: .875rem;
}

form.wsf-form.dt-rezervare .dt-durata {
	white-space: nowrap;
}

form.wsf-form.dt-rezervare .dt-motiv {
	margin-block-start: 4px;
	color: var(--_dt-text);
	font-size: .875rem;
	font-weight: 600;
}

/* ---------- Message above the trips. Not .dt-info: that is the class of the HTML field around it ---------- */

/* WS Form gives HTML fields no bottom margin, so the message brings its own. With no message, the empty box
   (which stays, so screen readers hear the next message) takes no space. */
form.wsf-form.dt-rezervare .dt-mesaj {
	margin-block-end: 12px;
	padding: 12px 14px;
	border: 1px solid var(--primary-light, #e1ebfe);
	border-inline-start: 4px solid var(--_dt-accent);
	border-radius: var(--radius, 8px);
	background: var(--_dt-tint);
	color: var(--_dt-text);
	line-height: 1.45;
}

form.wsf-form.dt-rezervare .dt-mesaj p {
	margin: 0 0 6px;
}

form.wsf-form.dt-rezervare .dt-mesaj p:last-child {
	margin-block-end: 0;
}

/* The no-trips line, above the other days (the owner, 2026-10-24). */
form.wsf-form.dt-rezervare .dt-mesaj:has(.dt-chips) p:first-child {
	font-size: 1.0625rem;
	font-weight: 700;
}

form.wsf-form.dt-rezervare .dt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 10px;
}

form.wsf-form.dt-rezervare .dt-chip {
	-webkit-appearance: none;
	appearance: none;
	min-height: 40px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--_dt-accent);
	border-radius: 999px;
	background: var(--_dt-white);
	color: var(--_dt-text);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	touch-action: manipulation;
}

form.wsf-form.dt-rezervare .dt-chip:hover {
	background: var(--primary-light, #e1ebfe);
}

form.wsf-form.dt-rezervare :is(.dt-swap, .dt-chip):focus-visible {
	outline: var(--focus-width, 2px) solid var(--_dt-focus);
	outline-offset: 2px;
}

/* ---------- Summary in step 2 ---------- */

form.wsf-form.dt-rezervare .dt-sum {
	padding: 16px;
	border: 1px solid var(--_dt-soft);
	border-radius: var(--radius, 8px);
	background: var(--bg-ultra-light, #f9fafc);
	line-height: 1.45;
}

form.wsf-form.dt-rezervare .dt-sum p {
	margin: 0;
}

form.wsf-form.dt-rezervare .dt-sum-titlu {
	font-weight: 700;
}

/* Departure and arrival on a short timeline */
form.wsf-form.dt-rezervare .dt-sum-ore {
	padding-block: 12px;
}

form.wsf-form.dt-rezervare .dt-sum-ore > span {
	display: block;
	position: relative;
	padding-inline-start: 24px;
}

form.wsf-form.dt-rezervare .dt-sum-ore > span + span {
	margin-block-start: 12px;
}

form.wsf-form.dt-rezervare .dt-sum-ore > span::before {
	content: "";
	position: absolute;
	top: .4em;
	left: 2px;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid var(--_dt-ink);
	border-radius: 50%;
	background: var(--_dt-white);
}

form.wsf-form.dt-rezervare .dt-sum-ore > span:last-child::before {
	background: var(--_dt-ink);
}

form.wsf-form.dt-rezervare .dt-sum-ore > span:first-child::after {
	content: "";
	position: absolute;
	top: calc(.4em + 14px);
	bottom: calc(-10px - .4em);
	left: 7px;
	width: 2px;
	background: var(--_dt-line);
}

form.wsf-form.dt-rezervare .dt-sum-ore b {
	margin-inline-end: 6px;
	font-variant-numeric: tabular-nums;
}

form.wsf-form.dt-rezervare .dt-sum-ruta {
	color: var(--_dt-muted);
	font-size: .875rem;
}

form.wsf-form.dt-rezervare .dt-sum-total {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px 12px;
	margin-block-start: 12px !important;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--_dt-soft);
}

form.wsf-form.dt-rezervare .dt-sum-total b {
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */

/* "Continuă" and "Plătește" follow the site's primary button (Automatic.css .btn--primary) */
form.wsf-form.dt-rezervare button.wsf-button.btn--primary {
	--wsf-field-button-primary-color-background: var(--btn-background, var(--_dt-ink));
	--wsf-field-button-primary-color-background-hover: var(--btn-background-hover, var(--_dt-ink));
	--wsf-field-button-primary-color-background-focus: var(--btn-background-hover, var(--_dt-ink));
	--wsf-field-button-primary-border-color: var(--btn-border-color, var(--_dt-ink));
	--wsf-field-button-primary-border-color-hover: var(--btn-border-color-hover, var(--_dt-ink));
	--wsf-field-button-primary-border-color-focus: var(--btn-border-color-hover, var(--_dt-ink));
	--wsf-field-button-primary-color: var(--btn-text-color, var(--_dt-white));
	--wsf-field-button-primary-color-hover: var(--btn-text-color-hover, var(--_dt-white));
	--wsf-field-button-primary-color-focus: var(--btn-text-color-hover, var(--_dt-white));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	border-radius: var(--btn-radius, var(--radius, 8px));
	font-size: var(--text-m, 1rem);
	font-weight: var(--btn-font-weight, 700);
}

/* "Modifică călătoria": a text button */
form.wsf-form.dt-rezervare .dt-inapoi {
	--wsf-field-button-color-background: transparent;
	--wsf-field-button-color-background-hover: transparent;
	--wsf-field-button-color-background-focus: transparent;
	--wsf-field-button-border-color: transparent;
	--wsf-field-button-border-color-hover: transparent;
	--wsf-field-button-border-color-focus: transparent;
	--wsf-field-button-color: var(--_dt-ink);
	--wsf-field-button-color-hover: var(--_dt-ink);
	--wsf-field-button-color-focus: var(--_dt-ink);
	--wsf-field-button-padding: 8px 4px;
	--wsf-field-button-font-weight: 600;
}

form.wsf-form.dt-rezervare .dt-inapoi button.wsf-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

form.wsf-form.dt-rezervare button.wsf-button:focus:not(:focus-visible) {
	box-shadow: none;
}

/* Keyboard focus: an outline set apart from the button, as on the swap and date buttons. WS Form's ring is
   the same blue as a primary button, so it would barely show there. */
form.wsf-form.dt-rezervare button.wsf-button:focus-visible {
	outline: var(--focus-width, 2px) solid var(--_dt-focus);
	outline-offset: 2px;
	box-shadow: none;
}

/* Icons: an arrow after "Continuă", a lock before "Plătește", an arrow before "Modifică călătoria" */
form.wsf-form.dt-rezervare .dt-continua button.wsf-button::after,
form.wsf-form.dt-rezervare button.wsf-button[data-wsf-stripe-submit]::before,
form.wsf-form.dt-rezervare .dt-inapoi button.wsf-button::before {
	content: "";
	flex: none;
	width: 1.125em;
	height: 1.125em;
	background-color: currentColor;
	-webkit-mask: var(--_dt-icon) center / contain no-repeat;
	mask: var(--_dt-icon) center / contain no-repeat;
}

form.wsf-form.dt-rezervare .dt-continua button.wsf-button {
	--_dt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

form.wsf-form.dt-rezervare button.wsf-button[data-wsf-stripe-submit] {
	--_dt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

form.wsf-form.dt-rezervare .dt-inapoi button.wsf-button {
	--_dt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}

/* ---------- Card field (Stripe Elements) ---------- */

/* The focus ring of the other fields. Stripe Elements asks for --wsf-form-box-shadow, which WS Form 1.12.13 does not define */
form.wsf-form.dt-rezervare .StripeElement.wsf-field.StripeElement--focus {
	box-shadow: var(--wsf-field-box-shadow);
}

/* ---------- Station list (select2 opens inside the field) ---------- */

/* A shadow over the fields below. WS Form's own rule sets none, so this selector has to outweigh it */
form.wsf-form.dt-rezervare select.wsf-field ~ .select2-container .select2-dropdown.wsf-select2-dropdown {
	box-shadow: 0 12px 24px -8px rgb(0 0 0 / .18);
}

form.wsf-form.dt-rezervare .select2-dropdown.wsf-select2-dropdown .select2-results {
	--wsf-field-border: 1px solid var(--_dt-soft);
}

/* ---------- Calendar (WS Form adds it at the end of the page; the script gives it .dt-calendar) ---------- */

.xdsoft_datetimepicker.dt-calendar {
	border-color: var(--_dt-soft);
	border-radius: var(--radius-l, 12px);
	box-shadow: 0 12px 32px -8px rgb(0 0 0 / .22);
	/* The site's font: outside the form, the calendar would keep the date picker's own Helvetica */
	font-family: var(--text-font-family, inherit);
}

/* Days with no trip for the chosen stations */
.xdsoft_datetimepicker.dt-calendar .xdsoft_datepicker .xdsoft_calendar td.dt-fara-cursa {
	text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
	form.wsf-form.dt-rezervare .wsf-group {
		animation: none;
	}
}