/**
 * Freemius opt-in / connect page — brand-aligned styles.
 *
 * Scoped to body.toplevel_page_vendor-tasks-dokan-clickup. Uses --fs-*
 * local tokens defined on that scope so there is no dependency on which
 * Tailwind design tokens happen to be tree-shaken into the compiled bundle.
 */

/* ── Local design tokens ─────────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup {

	/* Brand */
	--fs-brand:           #7047eb;
	--fs-brand-dark:      #5e30d0;
	--fs-brand-darker:    #4c22b0;

	/* Surfaces */
	--fs-surface:         #fff;
	--fs-surface-app:     #f0f0f1;
	--fs-surface-subtle:  #f9f8ff;
	--fs-surface-overlay: #f0ecff;
	--fs-surface-hover:   #ede9fe;
	--fs-surface-dark:    #130b2e;

	/* Text */
	--fs-text:            #1d2327;
	--fs-text-2:          #50575e;
	--fs-text-3:          #8c8f94;
	--fs-text-brand:      #7047eb;
	--fs-text-disabled:   #c3c4c7;
	--fs-text-inverse:    #f8f8f8;

	/* Borders */
	--fs-border:          #dcdcde;
	--fs-border-subtle:   #e9e9eb;
	--fs-border-strong:   #8c8f94;
	--fs-border-brand:    #c4b5fd;
	--fs-border-input:    #dcdcde;
	--fs-border-focus:    #7047eb;

	/* Status */
	--fs-error-surface:   #fef2f2;
	--fs-error-border:    #fca5a5;
	--fs-error-text:      #991b1b;

	/* Shadows */
	--fs-shadow-xs:       0 1px 2px 0 rgb(0 0 0 / .05);
	--fs-shadow-sm:       0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .10);
	--fs-shadow-md:       0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .10);
	--fs-shadow-focus:    0 0 0 2px #fff, 0 0 0 4px #7047eb;
	--fs-shadow-dropdown: 0 4px 6px -1px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .05);

	/* Radii */
	--fs-radius-md:       6px;
	--fs-radius-xl:       12px;

	/* Typography */
	--fs-font:            -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;

	/* Motion */
	--fs-duration:        150ms;
	--fs-ease:            cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ────────────────────────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect {
	width: 520px;
	margin: 60px auto 20px;
	font-family: var( --fs-font );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect a {
	color: inherit;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect a:not(.button) {
	text-decoration: underline;
}

/* ── Card container ──────────────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-box-container {
	padding-top: 50px;
	overflow: hidden;
	background: var( --fs-surface );
	border: 1px solid var( --fs-border-subtle );
	border-radius: var( --fs-radius-xl );
	box-shadow: var( --fs-shadow-md );
}

/* ── Header (plugin icon bubble) ─────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header {
	position: relative;
	height: 0;
	padding: 0;
	line-height: 0;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .fs-plugin-icon {
	position: absolute;
	top: -23px;
	left: 50%;
	z-index: 1;
	width: 80px;
	height: 80px;
	padding: 3px;
	margin-left: -44px;
	overflow: hidden;
	background: var( --fs-surface );
	border: 2px solid var( --fs-border-subtle );
	border-radius: 50%;
	box-shadow: 0 0 0 4px var( --fs-surface-app ), var( --fs-shadow-sm );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .fs-plugin-icon img {
	width: 74px;
	height: 74px;
	border-radius: 50%;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .fs-site-icon,
body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .fs-connect-logo {
	position: absolute;
	top: -8px;
	padding: 3px;
	background: var( --fs-surface );
	border: 1px solid var( --fs-border-subtle );
	border-radius: 50%;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .fs-site-icon { left: 152px; }

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .fs-connect-logo { right: 152px; }

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .fs-site-icon,
body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header img,
body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header object {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .dashicons-plus {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	font-size: 30px;
	color: var( --fs-border );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .dashicons-plus.fs-first { left: 28%; }

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-header .dashicons-plus.fs-second { left: 65%; }

/* ── Content area ────────────────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-content {
	padding: 28px 28px 24px;
	background: var( --fs-surface );
	border-bottom: 1px solid var( --fs-border-subtle );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-content h2 {
	padding: 0;
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: var( --fs-text );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-content p {
	padding: 0;
	margin: 0;
	font-size: 13px;
	line-height: 1.65;
	color: var( --fs-text-2 );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-content .fs-error {
	padding: 8px 12px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var( --fs-error-text );
	text-align: center;
	background: var( --fs-error-surface );
	border: 1px solid var( --fs-error-border );
	border-radius: var( --fs-radius-md );
	box-shadow: var( --fs-shadow-xs );
}

/* ── License key field ───────────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-license-key-container {
	position: relative;
	width: 300px;
	margin: 12px auto 0;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-license-key-container input {
	width: 100%;
	height: 36px;
	padding: 0 30px 0 10px;
	font-size: 13px;
	border: 1px solid var( --fs-border-input );
	border-radius: var( --fs-radius-md );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-license-key-container input:focus {
	outline: none;
	border-color: var( --fs-border-focus );
	box-shadow: var( --fs-shadow-focus );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-license-key-container .dashicons {
	position: absolute;
	top: 6px;
	right: 6px;
	color: var( --fs-text-3 );
}

/* ── Action bar ──────────────────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions {
	display: flex;
	flex-direction: row-reverse;
	gap: 8px;
	align-items: center;
	padding: 14px 28px;
	background: var( --fs-surface-app );
	border: none;
	border-top: 1px solid var( --fs-border-subtle );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button {
	height: 36px;
	padding: 0 16px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 34px;
	border-radius: var( --fs-radius-md );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button .dashicons {
	margin-right: 10px;
	margin-left: -6px;
	font-size: 36px;
}

/* Primary CTA */
body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button.button-primary {
	padding: 0 20px;
	color: #fff !important;
	background: var( --fs-brand ) !important;
	border-color: var( --fs-brand-dark ) !important;
	box-shadow: var( --fs-shadow-xs );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button.button-primary::after {
	content: " →";
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button.button-primary.fs-loading::after {
	content: "";
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button.button-primary:hover,
body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button.button-primary:focus {
	background: var( --fs-brand-dark ) !important;
	border-color: var( --fs-brand-darker ) !important;
}

/* Secondary / skip */
body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button.button-secondary {
	float: none;
	color: var( --fs-text-2 );
	background: var( --fs-surface );
	border-color: var( --fs-border );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button.button-secondary:hover,
body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-actions .button.button-secondary:focus {
	color: var( --fs-text );
	background: var( --fs-surface-hover );
	border-color: var( --fs-border-strong );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect.fs-anonymous-disabled .fs-actions .button.button-primary {
	width: 100%;
}

/* ── Permissions accordion ───────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions {
	padding: 0 28px;
	background: var( --fs-surface );
	transition: background var( --fs-duration ) var( --fs-ease );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions > .fs-trigger {
	display: block;
	padding: 10px 0;
	font-size: 12px;
	color: var( --fs-text-3 );
	text-align: center;
	text-decoration: none;
	border-top: 1px solid var( --fs-border-subtle );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions > .fs-trigger .fs-arrow::after {
	display: inline-block;
	width: 20px;
	content: "→";
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions.fs-open > .fs-trigger .fs-arrow::after {
	content: "↓" !important;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions ul {
	height: 0;
	margin: 0;
	overflow: hidden;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions.fs-open ul {
	height: auto;
	overflow: visible;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions ul li {
	position: relative;
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid var( --fs-border-subtle );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions ul li:last-child {
	border-bottom: none;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions ul li > i.dashicons {
	float: left;
	width: 28px;
	height: 28px;
	padding: 5px;
	font-size: 28px;
	color: var( --fs-text-brand );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions ul li .fs-switch {
	float: right;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions ul li .fs-permission-description {
	margin-left: 50px;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions ul li .fs-permission-description span {
	font-size: 13px;
	font-weight: 500;
	color: var( --fs-text );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions ul li .fs-permission-description p {
	padding: 0;
	margin: 3px 0 0;
	font-size: 12px;
	color: var( --fs-text-3 );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions.fs-open {
	background: var( --fs-surface-subtle );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions .fs-switch.fs-on {
	background: var( --fs-brand );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions .fs-permission.fs-disabled,
body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-permissions .fs-permission.fs-disabled .fs-permission-description span {
	color: var( --fs-text-disabled );
}

/* ── Freemium licensing strip ────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-freemium-licensing {
	padding: 8px 16px;
	color: var( --fs-text-brand );
	background: var( --fs-surface-overlay );
	border-top: 1px solid var( --fs-border-brand );
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-freemium-licensing p {
	display: block;
	padding: 0;
	margin: 0;
	font-size: 12px;
	text-align: center;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-freemium-licensing a {
	color: var( --fs-text-brand );
}

/* ── Terms bar ───────────────────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-terms {
	padding: 12px 16px;
	font-size: 11px;
	color: var( --fs-text-3 );
	text-align: center;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-terms a {
	color: var( --fs-text-3 );
	text-decoration: none;
}

body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-terms a:hover {
	color: var( --fs-text-2 );
	text-decoration: underline;
}

/* ── Tooltip ─────────────────────────────────────────────────────────── */

body.toplevel_page_vendor-tasks-dokan-clickup .fs-tooltip-trigger .fs-tooltip {
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var( --fs-text-inverse ) !important;
	background: var( --fs-surface-dark );
	border-radius: var( --fs-radius-md );
	box-shadow: var( --fs-shadow-dropdown );
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media screen and (max-width: 540px) {

	body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect {
		width: auto;
		margin: 30px 0 0 -10px;
	}

	body.toplevel_page_vendor-tasks-dokan-clickup #fs_connect .fs-box-container {
		border-radius: 0;
		box-shadow: none;
	}
}