/* ============================================================================
   Signup Modal  —  workspace_way_render_signup_modal() / [tww_signup_modal]
   ----------------------------------------------------------------------------
   Reusable popup that shows Gravity Form 14 (the three-minute email-sequence
   signup). Shared by the home page (home-062726) and the email-sequence reader
   (building-on-workspace).

   Deliberately NOT scoped under .tww-page so it also works on plain pages: the
   email-sequence page renders as .entry-content > .tww-email-seq with no
   .tww-page wrapper. The Gravity Form input/button theming comes from the bare
   .tww-form-card rules in pages.css (those are not .tww-page-scoped), so only
   the modal chrome below needs to live here.

   Behaviour: signup-modal.js. Markup: functions.php.
   ============================================================================ */

.tww-signup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.tww-signup[hidden] {
	display: none;
}

.tww-signup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(2px);
}

.tww-signup__panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 86vh;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 22px;
	padding: 44px 44px 40px;
	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
}

.tww-signup__close {
	position: absolute;
	top: 14px;
	right: 18px;
	border: 0;
	background: transparent;
	font-size: 30px;
	line-height: 1;
	color: #9aa6b2;
	cursor: pointer;
}

.tww-signup__close:hover,
.tww-signup__close:focus {
	color: #1d1b18;
}

/* Privacy chip — shield + "Privacy" sitting just below the subtext, above the
   form. Tooltip opens on hover, keyboard focus, or tap (.is-open from the JS). */
.tww-signup__privacy {
	position: relative;
	z-index: 2;
	margin: 0 0 -20px;
	text-align: right;
}

.tww-signup__privacy-trigger {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 0 4px 8px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #2563eb;
	cursor: pointer;
	border-radius: 999px;
}

.tww-signup__privacy-trigger:hover,
.tww-signup__privacy-trigger:focus-visible {
	color: #1d4ed8;
}

.tww-signup__privacy-trigger svg {
	flex: none;
}

.tww-signup__privacy-tip {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 8px;
	width: 244px;
	max-width: calc(100vw - 80px);
	padding: 12px 14px;
	background: #1d1b18;
	color: #e7eaf0;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	border-radius: 10px;
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.32);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.tww-signup__privacy:hover .tww-signup__privacy-tip,
.tww-signup__privacy:focus-within .tww-signup__privacy-tip,
.tww-signup__privacy.is-open .tww-signup__privacy-tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tww-signup__privacy-tip a {
	color: #93b4ff;
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

.tww-signup__title {
	margin: 0 0 8px;
	font-size: 27px;
	font-weight: 800;
	line-height: 1.18;
	color: #1d1b18;
}

.tww-signup__lead {
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.55;
	color: #475467;
}

/* Embedded Gravity Form: keep the input/button theming from .tww-form-card
   but strip its outer box so it sits flush inside the modal panel. */
.tww-signup .tww-form-card {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* Tighten the vertical gap between fields (name <-> email) inside the modal. */
.tww-signup .gform_wrapper .gform_fields {
	grid-row-gap: 14px;
	row-gap: 14px;
}

/* Hide the top-level "There was a problem..." summary banner inside the modal;
   the per-field validation messages still show. */
.tww-signup .gform_wrapper .gform_validation_errors {
	display: none;
}

.tww-signup__footer {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #667085;
}

.tww-signup__footer a {
	color: #2563eb;
	font-weight: 600;
}

/* After a successful submit, GF shows its confirmation message; hide the
   hardcoded lead + footer so only the title and confirmation remain. */
.tww-signup__panel.tww-signup--confirmed .tww-signup__lead,
.tww-signup__panel.tww-signup--confirmed .tww-signup__footer {
	display: none;
}

@media (max-width: 768px) {
	.tww-signup__panel {
		padding: 36px 24px 30px;
		border-radius: 18px;
	}

	.tww-signup__title {
		font-size: 23px;
	}
}