// Components that replace legacy libraries (Sizzle toasts/modals, FilePond) or add keyboard support.

.ssgsw-react {
	// Help tooltips also open on keyboard focus (legacy: hover only).
	.ssgs-tooltip:focus-within > span {
		opacity: 1;
		visibility: visible;
	}

	.ssgs-tooltip .ssgs-help:focus-visible {
		box-shadow: var(--ssgsw-focus-ring);
		border-radius: 50%;
	}

	// Native drop zone styled by the legacy .filepond--root rules.
	.ssgsw-dropzone {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		.filepond--drop-label,
		.filepond--drop-label label {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-height: 296px;
		}

		&.is-dragging,
		&:focus-within {
			border-color: var(--ssgsw-blue);
			background: #f5f9ff;
		}
	}

	.ssgsw-field-error {
		color: #b32d2e;
		font-size: 13px;
		margin: 8px 0 0;
	}

	.ssgs-input[aria-invalid='true'] {
		border-color: #b32d2e;
	}

	// step-3.php set this with an inline style, which beat the `.ssgs-badge + .ssgs-badge` margin.
	.ssgs-badge.ssgsw-badge-flush {
		margin-left: 0 !important;
	}

	.ssgsw-strong {
		font-weight: 600;
	}

	// Buttons that replace legacy javascript: links or clickable divs.
	.ssgsw-video-trigger {
		display: block;
		width: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
	}

	.profeatures .ssgsw-react-link-button {
		color: var(--ssgsw-blue);
		background: transparent;
		border: 0;
		cursor: pointer;
		font-size: inherit;
		text-decoration: underline;
	}

	.ssgsw-woo-prompt .ssgs-btn {
		border: 0;
		cursor: pointer;
	}

	// Apps Script notice: same look as the legacy .ssgsw_remove_text_dec / .ssgsw_dismiss_notice
	// classes, which React avoids because notice.js binds click handlers to them.
	.ssgsw-react-notice-link {
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--ssgsw-blue);
		cursor: pointer;
		text-decoration: none;
	}

	.ssgsw-react-icon-button {
		padding: 0;
		border: 0;
		background: transparent;
	}

	.ssgsw-react-primary-button {
		background-color: var(--ssgsw-blue) !important;
		color: #fff !important;
	}

	// Legacy offsets the dismiss icon with top/right (inline <style> in dashboard/appscript.php),
	// which pushes it past the viewport edge on narrower screens. Keep it inside the banner.
	.ssgsw-react-appscript-notice {
		display: flex;
		align-items: center;
		gap: 8px;

		.ssgsw_notice_container {
			flex: 1;
			width: auto;
		}

		.ssgsw_notice_container2 {
			position: static;
			margin-right: 16px;
		}
	}

	// Legacy popups: above the WP admin bar (legacy z-index: 1) and sized for small screens.
	.ssgs_popup-container {
		z-index: 100000;
		padding: 16px;
		box-sizing: border-box;
	}

	.ssgs_popup-content {
		width: min(560px, 92vw);
		box-sizing: border-box;
	}

	@media only screen and (max-width: 575px) {
		.ssgs_popup-container {
			align-items: flex-end;
			padding: 0;
		}

		.ssgs_popup-content {
			width: 100%;
			border-radius: 12px 12px 0 0;
		}
	}

	// No background override: .gradient-text paints the text with a clipped background gradient.
	.ssgs-dashboard__tab .ssgsw-promo.ssgsw-react-link-button {
		border: 0;
		cursor: pointer;
		font-size: inherit;
		font-family: inherit;
		padding: 0;
	}
}

// Toasts and dialogs render inside the mount node (fixed position).
.ssgsw-toasts {
	position: fixed;
	top: 46px;
	right: 20px;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(380px, calc(100vw - 32px));
}

.ssgsw-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 280px;
	padding: 12px 12px 12px 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
	color: #0f172a;
	animation: ssgsw-toast-in 0.2s ease-out;

	&__body {
		flex: 1;
		min-width: 0;

		strong {
			display: block;
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
		}

		p {
			margin: 2px 0 0;
			color: #64748b;
			font-size: 13px;
		}
	}

	&__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: transparent;
		color: #64748b;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;

		&:hover {
			background: #f1f5f9;
			color: #0f172a;
		}
	}
}

@keyframes ssgsw-toast-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ssgsw-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, 0.45);
}

.ssgsw-dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(440px, 100%);
	padding: 28px 28px 24px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
	text-align: center;
	color: #0f172a;
	box-sizing: border-box;

	.ssgsw-status-icon.ssgsw-dialog__icon {
		width: 44px;
		height: 44px;

		svg {
			width: 22px;
			height: 22px;
		}
	}

	h2 {
		margin: 14px 0 6px;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.4;
	}

	p {
		margin: 0 0 18px;
		color: #64748b;
		font-size: 14px;
	}

	&__text {
		margin: 4px 0 0 !important;
	}

	&__hint {
		margin: 12px 0 0 !important;
		font-size: 13px !important;
	}

	&--progress h2 {
		margin-top: 16px;
	}
}

.ssgsw-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 8px;

	&__track {
		flex: 1;
		height: 8px;
		overflow: hidden;
		border-radius: 999px;
		background: #e2e8f0;
	}

	&__bar {
		height: 100%;
		border-radius: inherit;
		background: #005ae0;
		transition: width 0.3s ease;
	}

	&__value {
		min-width: 48px;
		color: #334155;
		font-size: 13px;
		font-weight: 600;
		text-align: right;
	}
}

@media only screen and (max-width: 575px) {
	.ssgsw-toasts {
		left: 16px;
		right: 16px;
		max-width: none;
	}

	.ssgsw-toast {
		min-width: 0;
	}

	.ssgsw-dialog-backdrop {
		align-items: flex-end;
		padding: 0;
	}

	.ssgsw-dialog {
		width: 100%;
		border-radius: 16px 16px 0 0;
	}
}