/**
 * Styles for the "Pyydä tarjous" (Quote Request) CTA and drawer.
 */

#dxw3-quote-request-cta {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 1000;
	background: #004176;
	color: #fff;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	border: none;
	border-radius: 6px;
	padding: 14px 22px;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

#dxw3-quote-request-cta:hover,
#dxw3-quote-request-cta:focus-visible {
	background: #002d52;
}

#dxw3-quote-request-overlay {
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.35s ease-in-out;
}

#dxw3-quote-request-overlay.show {
	opacity: 1;
}

#dxw3-quote-request-drawer {
	position: fixed;
	left: 20px;
	bottom: 90px;
	z-index: 1002;
	width: 600px;
	max-width: calc(100vw - 40px);
	max-height: calc(100dvh - 130px);
	overflow-y: auto;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
	font-family: "Raleway", sans-serif;
	padding: 20px;
	box-sizing: border-box;
	/* Safety net: nothing inside should ever force the rounded card wider than
	   this, even a course name with one very long, unbroken word. */
	overflow-x: hidden;
}

#dxw3-quote-request-drawer.show {
	transform: translateY(0);
	opacity: 1;
}

@media (max-width: 600px) {
	#dxw3-quote-request-drawer {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		/* Leaves room at the top instead of forcing full-screen height — the
		   drawer only grows as tall as its content, up to this cap. */
		max-height: calc(100dvh - 56px);
		border-radius: 16px 16px 0 0;
		z-index: 2147483002;
	}
}

#dxw3-quote-request-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #333;
}

#dxw3-quote-request-title {
	font-family: "Merriweather", serif;
	color: #004176;
	margin: 0 40px 20px 0;
}

#dxw3-quote-request-steps {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	font-size: 13px;
	color: #999;
}

/* display:flex above otherwise overrides the [hidden] attribute JS toggles for the
   thank-you view — this restores the browser's default hidden behaviour. */
#dxw3-quote-request-steps[hidden] {
	display: none;
}

#dxw3-quote-request-steps .step.is-active {
	color: #004176;
	font-weight: 700;
}

/* Honeypot spam guard — kept off-screen (not display:none) so unsophisticated
   bots that skip hidden fields still fill it in; real users never see it. */
.dxw3-quote-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dxw3-quote-field {
	margin-bottom: 16px;
}

.dxw3-quote-field label {
	display: block;
	margin-bottom: 4px;
	font-weight: 700;
}

.dxw3-quote-field input[type="text"],
.dxw3-quote-field input[type="tel"],
.dxw3-quote-field input[type="email"],
.dxw3-quote-field textarea,
#dxw3-quote-course-search {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: 15px;
}

.dxw3-quote-field input[aria-invalid="true"] {
	border-color: #c0392b;
}

.dxw3-quote-field-error {
	display: block;
	color: #c0392b;
	font-size: 13px;
	margin-top: 4px;
}

#dxw3-quote-course-results {
	position: relative;
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 4px;
	max-height: 220px;
	overflow-y: auto;
}

#dxw3-quote-course-results li {
	padding: 10px 12px;
	cursor: pointer;
	overflow-wrap: break-word;
}

#dxw3-quote-course-results li:hover,
#dxw3-quote-course-results li:focus {
	background: #f2f6fa;
	outline: none;
}

.dxw3-quote-selected-courses-header {
	display: flex;
	gap: 8px;
	padding: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* display:flex above otherwise overrides the [hidden] attribute JS toggles —
   see the same fix on #dxw3-quote-request-steps above. */
.dxw3-quote-selected-courses-header[hidden] {
	display: none;
}

.dxw3-quote-selected-courses-header .dxw3-quote-course-name {
	flex: 1;
}

.dxw3-quote-selected-courses-header .dxw3-quote-qty-label {
	width: 60px;
	text-align: center;
}

/* Matches .dxw3-quote-remove-course's fixed width below, so the header's two
   visible columns land above the same columns in each course row instead of
   the name column silently taking more width here (no third row) than there
   (name + input + remove button). */
.dxw3-quote-selected-courses-header .dxw3-quote-remove-spacer {
	width: 40px;
}

#dxw3-quote-selected-courses {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.dxw3-quote-selected-course {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}

.dxw3-quote-selected-course .dxw3-quote-course-name {
	flex: 1;
	/* Flex items default to min-width:auto, which refuses to shrink below the
	   content's intrinsic width — without this, one long unbroken word (e.g. a
	   course name like "Sähkötyöturvallisuuskorttikoulutus...") pushes the row
	   wider than the drawer instead of wrapping. */
	min-width: 0;
	overflow-wrap: break-word;
}

.dxw3-quote-selected-course input[type="number"] {
	width: 60px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.dxw3-quote-remove-course {
	background: transparent;
	border: 1px solid #c0392b;
	color: #c0392b;
	border-radius: 4px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dxw3-quote-remove-course svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.dxw3-quote-step-actions {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 24px;
}

.dxw3-quote-btn-primary,
.dxw3-quote-btn-secondary {
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	font-size: 15px;
	border-radius: 6px;
	padding: 12px 20px;
	cursor: pointer;
}

.dxw3-quote-btn-primary {
	background: #004176;
	color: #fff;
	border: none;
}

.dxw3-quote-btn-primary:hover,
.dxw3-quote-btn-primary:focus-visible {
	background: #002d52;
}

.dxw3-quote-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.dxw3-quote-btn-secondary {
	background: transparent;
	color: #004176;
	border: 1px solid #004176;
}

#dxw3-quote-request-feedback {
	margin-top: 16px;
	font-weight: 700;
}

#dxw3-quote-request-feedback.is-error {
	color: #c0392b;
}

#dxw3-quote-request-success {
	padding: 12px 0 4px;
}

#dxw3-quote-success-message {
	font-size: 16px;
	margin: 0 0 20px;
}

#dxw3-quote-success-close,
#dxw3-quote-success-close:hover,
#dxw3-quote-step1-next:hover,
#dxw3-quote-add-another:hover,
#dxw3-quote-selected-courses .dxw3-quote-remove-course:hover,
#dxw3-quote-step2-back:hover,
#dxw3-quote-submit:hover {
	color: white;
}

/* Below 460px, give the course name a little more breathing room before
   anything needs to wrap onto a second line. */
@media (max-width: 460px) {
	.dxw3-quote-selected-course .dxw3-quote-course-name {
		font-size: 14px;
	}
}

/* Below 430px there's no longer room for name + quantity + remove button on
   one line without squeezing the name — drop the quantity input/remove
   button to their own line instead, so the name keeps the full row width to
   wrap naturally. The header is dropped entirely at this width rather than
   forced to wrap along with it: a two-line "KURSSIN NIMI / OSALLISTUJAT"
   caption ends up reading as a floating label disconnected from the row
   below it once both are stacked, rather than as a column header. Each row
   is self-explanatory without it (a name, then a number field next to a
   delete icon). */
@media (max-width: 430px) {
	.dxw3-quote-selected-courses-header {
		display: none;
	}

	.dxw3-quote-selected-course {
		flex-wrap: wrap;
	}

	.dxw3-quote-selected-course .dxw3-quote-course-name {
		flex: 1 1 100%;
		margin-bottom: 6px;
	}
}