/**
 * Newsletter slide-up popup.
 *
 * All values hardcoded from Figma design tokens — no CSS custom properties.
 * Font family: "TT Fellows", Sans-serif throughout (Roboto for privacy link).
 *
 * Specificity: double-class selectors + !important to override Elementor kit
 * and Hello theme base styles on buttons, inputs, and form elements.
 */

/* ---------------------------------------------------------------------------
   Outer wrapper — fixed to viewport bottom.
   --------------------------------------------------------------------------- */
.harju-newsletter {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	pointer-events: none;
	max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.harju-newsletter *,
.harju-newsletter *::before,
.harju-newsletter *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Trigger button — "Subscribe to the newsletter".
   Links/Extra Small: 12px, weight 400, underline, bg #000F2D.
   --------------------------------------------------------------------------- */
.harju-newsletter .harju-newsletter__trigger {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 32px 12px 24px !important;
	margin: 0;
	background: #000F2D !important;
	background-color: #000F2D !important;
	color: #FFF !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: "TT Fellows", Sans-serif !important;
	font-size: 12px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 16px !important;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
	cursor: pointer;
	white-space: nowrap;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	transition: opacity 0.2s;
}

.harju-newsletter .harju-newsletter__trigger:hover,
.harju-newsletter .harju-newsletter__trigger:focus-visible {
	opacity: 0.85;
	color: #FFF !important;
	background-color: #000F2D !important;
}

/* Chevron rotates when panel is open. */
.harju-newsletter__chevron {
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}

.harju-newsletter--open .harju-newsletter__chevron {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Panel — slides up from bottom. Background #000F2D.
   --------------------------------------------------------------------------- */
.harju-newsletter__panel {
	pointer-events: auto;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	background-color: #000F2D;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.harju-newsletter--open .harju-newsletter__panel {
	max-height: 700px;
}

/* Override [hidden] so CSS transition can work. */
.harju-newsletter__panel[hidden] {
	display: block !important;
	max-height: 0;
	visibility: hidden;
}

.harju-newsletter--open .harju-newsletter__panel,
.harju-newsletter--open .harju-newsletter__panel[hidden] {
	visibility: visible;
}

/* ---------------------------------------------------------------------------
   SVG background pattern — pinned to top-left of panel.
   Figma positions it at bottom, but since the panel slides open via max-height
   (revealing from top down), anchoring to bottom would shift the SVG during
   the transition. Anchoring to top keeps it visually static as panel opens.
   --------------------------------------------------------------------------- */
.harju-newsletter__bg-pattern {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 600px;
	height: 200px;
	pointer-events: none;
	z-index: 0;
}

/* ---------------------------------------------------------------------------
   Inner layout — flex row: image + form.
   --------------------------------------------------------------------------- */
.harju-newsletter__inner {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	max-width: 920px;
	margin: 0 auto;
	padding: 64px 32px;
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
   Decorative image. Desktop: square 229px. Aspect ratio 1:1.
   --------------------------------------------------------------------------- */
.harju-newsletter__image {
	flex: 0 0 auto;
	width: 229px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	align-self: start;
}

.harju-newsletter__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Form wrapper and heading.
   Body/xxl--bold: "TT Fellows" 28px, weight 600, color #FFF.
   --------------------------------------------------------------------------- */
.harju-newsletter__form-wrapper {
	flex: 1;
	min-width: 0;
}

.harju-newsletter .harju-newsletter__heading {
	margin: 0 0 20px;
	padding: 0;
	color: #FFF !important;
	font-family: "TT Fellows", Sans-serif !important;
	font-size: 28px !important;
	font-style: normal;
	font-weight: 600 !important;
	line-height: normal !important;
}

/* ---------------------------------------------------------------------------
   Form reset.
   --------------------------------------------------------------------------- */
.harju-newsletter__form {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   Fields row — name + email side by side (desktop).
   --------------------------------------------------------------------------- */
.harju-newsletter__fields {
	display: flex;
	gap: 16px;
	margin-bottom: 16px;
}

.harju-newsletter__field {
	flex: 1;
}

/*
 * Labels — Body/sm: "TT Fellows" 14px, weight 400, line-height 24px, #FFF.
 */
.harju-newsletter .harju-newsletter__field label {
	display: block;
	margin-bottom: 6px;
	color: #FFF !important;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TT Fellows", Sans-serif !important;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 24px !important;
}

/*
 * Text inputs.
 * Overrides Hello theme: border: 1px solid #c36; border-radius: 3px;
 * Overrides Elementor kit: font-family, color globals.
 */
.harju-newsletter .harju-newsletter__field input[type="text"],
.harju-newsletter .harju-newsletter__field input[type="email"] {
	width: 100% !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	background-color: #FFF !important;
	color: #000F2D !important;
	border: 1px solid #d0d0d0 !important;
	border-radius: 0 !important;
	font-family: "TT Fellows", Sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	height: auto !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color 0.2s;
}

.harju-newsletter .harju-newsletter__field input[type="text"]:focus,
.harju-newsletter .harju-newsletter__field input[type="email"]:focus {
	border-color: #FFF !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.harju-newsletter .harju-newsletter__field input::placeholder {
	color: #999 !important;
	opacity: 1 !important;
}

/* ---------------------------------------------------------------------------
   Language checkboxes — horizontal row on desktop.
   --------------------------------------------------------------------------- */
.harju-newsletter .harju-newsletter__languages {
	border: none !important;
	padding: 0 !important;
	margin: 0 0 12px !important;
}

.harju-newsletter .harju-newsletter__languages legend {
	color: #FFF !important;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TT Fellows", Sans-serif !important;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 24px !important;
	margin-bottom: 8px;
	padding: 0;
}

.harju-newsletter__language-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
}

/* ---------------------------------------------------------------------------
   Checkbox — custom drawn to match Figma.
   --------------------------------------------------------------------------- */
.harju-newsletter .harju-newsletter__checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #FFF !important;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TT Fellows", Sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	cursor: pointer;
	user-select: none;
	margin: 0;
	padding: 0;
}

.harju-newsletter .harju-newsletter__checkbox-label input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	min-height: 18px;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 2px !important;
	background-color: transparent !important;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
	position: relative;
	flex-shrink: 0;
	vertical-align: middle;
	box-shadow: none !important;
	outline: none !important;
}

.harju-newsletter .harju-newsletter__checkbox-label input[type="checkbox"]:checked {
	background-color: #FFF !important;
	border-color: #FFF !important;
}

.harju-newsletter .harju-newsletter__checkbox-label input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 8px;
	border: solid #000F2D;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.harju-newsletter .harju-newsletter__checkbox-label input[type="checkbox"]:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6) !important;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Privacy agreement.
   Label: "TT Fellows" 14px. Link: Roboto 16px, underline.
   --------------------------------------------------------------------------- */
.harju-newsletter .harju-newsletter__agree {
	margin: 0 0 20px !important;
	display: flex;
}

.harju-newsletter .harju-newsletter__agree span {
	color: #FFF !important;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TT Fellows", Sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
}

.harju-newsletter .harju-newsletter__agree a {
	color: #FFF !important;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: Roboto, sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 150% !important;
	text-decoration-line: underline !important;
	text-decoration-style: solid !important;
	text-decoration-skip-ink: none !important;
	text-decoration-thickness: auto !important;
	text-underline-offset: auto !important;
	text-underline-position: from-font !important;
}

.harju-newsletter .harju-newsletter__agree a:hover {
	text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   Subscribe button — filled white pill, dark text.
   Figma: radius 360px, 2px white border, white bg, text #454854,
   "TT Fellows" 16px weight 600 line-height 24px, padding 6px 10px.
   --------------------------------------------------------------------------- */
.harju-newsletter .harju-newsletter__submit {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 6px 10px !important;
	margin: 0 !important;
	border-radius: 360px !important;
	border: 2px solid #FFF !important;
	background: #FFF !important;
	background-color: #FFF !important;
	color: #454854 !important;
	text-align: center !important;
	font-feature-settings: 'liga' off, 'clig' off;
	font-family: "TT Fellows", Sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 600 !important;
	line-height: 24px !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: opacity 0.2s !important;
	width: auto !important;
	min-width: 0 !important;
}

.harju-newsletter .harju-newsletter__submit:hover,
.harju-newsletter .harju-newsletter__submit:focus-visible {
	opacity: 0.85;
	background: #FFF !important;
	background-color: #FFF !important;
	color: #454854 !important;
	border-color: #FFF !important;
}

.harju-newsletter .harju-newsletter__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed !important;
}

.harju-newsletter .harju-newsletter__submit--loading {
	position: relative;
}

/* ---------------------------------------------------------------------------
   Feedback messages.
   --------------------------------------------------------------------------- */
.harju-newsletter__feedback {
	margin-top: 12px;
	font-family: "TT Fellows", Sans-serif;
	font-size: 14px;
	line-height: 24px;
	min-height: 0;
}

.harju-newsletter__feedback:empty {
	display: none;
}

.harju-newsletter__feedback--success {
	color: #a5d6a7;
}

.harju-newsletter__feedback--error {
	color: #ef9a9a;
}

/* ---------------------------------------------------------------------------
   Responsive — mobile (Figma Frame 2874).
   Image: full-width 96px height. Heading: 25px. Stacked layout.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

	.harju-newsletter .harju-newsletter__trigger {
		padding: 10px 16px 10px 12px !important;
		font-size: 12px !important;
	}

	.harju-newsletter__inner {
		flex-direction: column;
		padding: 24px 20px 32px;
		gap: 20px;
	}

	/* Mobile image: full-width, 96px height per Figma. */
	.harju-newsletter__image {
		flex: 0 0 auto;
		width: 100%;
		height: 96px;
		aspect-ratio: auto;
	}

	.harju-newsletter__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Mobile heading: 25px per Figma. */
	.harju-newsletter .harju-newsletter__heading {
		font-size: 25px !important;
	}

	.harju-newsletter__fields {
		flex-direction: column;
		gap: 12px;
	}

	.harju-newsletter__language-options {
		flex-direction: column;
		gap: 10px;
	}

	/* Mobile subscribe button — full-width pill. */
	.harju-newsletter .harju-newsletter__submit {
		width: 100% !important;
	}

	.harju-newsletter--open .harju-newsletter__panel {
		max-height: 90vh;
		overflow-y: auto;
	}

	/* Scale down bg pattern for mobile. */
	.harju-newsletter__bg-pattern {
		left: -450px;
        bottom: -60px;
        width: 900px;
        height: 300px;
	}
}