/*
Theme Name: MyTotalWPTheme Child Theme
Theme URI: https://my.totalwptheme.com
Description: Child theme for my.totalwptheme.com
Author: AJ Clarke
Author URI: https://my.totalwptheme.com/
Template: Total
Version: 1.0
*/

:root {
	--wpex-outline-btn-border-width: 2px;

	--mytwpt-envato: #9ced69;
	--mytwpt-envato-hover: #8ee158;
	--mytwpt-envato-edge: #8fe157;
	--mytwpt-envato-ink: #191919;
}

html {
	font-size: initial;
}

html,
body {
  min-height: 100%;
}

#wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

body {
	font-size: 14px;
	font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
	background: #fff;
}

#main {
	background: #f5f7fa;
}

body.page-header-disabled #main,
body:is(.page-template-disclosure) #main {
	padding-top: 40px;
}

body.page-header-disabled:not(.logged-in,.page-template-disclosure) #main {
	padding-top: 0;
}

.theme-button:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* Header */
#site-header {
	border-bottom: 1px solid #e0e1e5;
	font-size: 14px;
}

#site-logo .site-logo-text {
	font-size: 16px;
	font-weight: 600;
	color: #191919;
}

.site-logo-text__icon {
	border-radius: 7px;
	font-size: 1rem;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var(--wpex-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.main-navigation-ul > .menu-item > a {
	font-weight: 500;
}

#site-navigation-wrap.has-menu-underline .main-navigation-ul > li > a >.link-inner::after {
	transform: none;
	width: 0;
	transition-duration: 400ms;
}

#site-navigation-wrap.has-menu-underline .main-navigation-ul>li.current-menu-item>a>.link-inner::after,
#site-navigation-wrap.has-menu-underline .main-navigation-ul>li:hover>a>.link-inner::after,
#site-navigation-wrap.has-menu-underline .main-navigation-ul>li.wpex-active>a>.link-inner::after {
	width: 100%;
}

/* Mobile Menu */
#mobile-menu {
	font-size: 1.1em;
	font-weight: 600;
}

.wpex-hamburger-icon > span {
	width: 70%;
}

.wpex-hamburger-icon > span::before,
.wpex-hamburger-icon > span::after {
	width: calc(100% + 30%);
}

.mobile-toggle-nav.wpex-togglep-absolute {
	max-height: calc(100vh - var(--wpex-site-header-height, 100px));
}

.mobile-toggle-nav {
	padding-block-end: 20px;
	border-radius: 0px 0px 12px 12px;
	box-shadow: var(--wpex-shadow-2xl);
}

/* Footer Bottom */
#footer-bottom {
	padding-block: 24px;
	border-top: 1px solid #e0e1e5;
	font-size: 13px;
}

#footer-bottom a:hover {
	text-decoration: underline;
}

body:not(.logged-in) #footer-bottom-menu #menu-item-171 {
	display: none;
}

/* Auth surfaces */
.mytwpt-login,
.mytwpt-register,
.mytwpt-reset,
.mytwpt-gate {
	--auth-border: var(--wpex-surface-3);
	--auth-muted: #606369;
	--auth-ink: #181b1f;
	--auth-accent: var(--wpex-accent, #1700ff);
	--auth-ring: rgba(23, 0, 255, 0.14);
	--auth-danger: #c53637;
	--auth-radius: 16px;
	--auth-shadow: 0 1px 2px rgba(96, 99, 105, 0.04);
	margin-inline: auto;
	padding-block: clamp(32px, 5vmax, 56px) clamp(40px, 6vmax, 64px);
}

.mytwpt-login { max-width: 420px; }
.mytwpt-register { max-width: 520px; }
.mytwpt-reset { max-width: 420px; }
.mytwpt-gate { max-width: 480px; text-align: center; }

/* --- Headers --- */
.mytwpt-login__header,
.mytwpt-register__header,
.mytwpt-reset__header {
	text-align: center;
	margin-block-end: 26px;
}

.mytwpt-login__title,
.mytwpt-register__title,
.mytwpt-reset__title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-login__subtitle,
.mytwpt-register__subtitle,
.mytwpt-reset__header .mytwpt-reset__text {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--auth-muted);
}

.mytwpt-reset__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 14px;
	background: #ecebff;
	color: var(--auth-accent);
}

.mytwpt-reset__icon svg { display: block; }

/* --- Cards --- */
.mytwpt-login__card,
.mytwpt-register-form,
.mytwpt-reset__card {
	background: #fff;
	border: 1px solid var(--auth-border);
	border-radius: var(--auth-radius);
	padding: 28px 26px;
	box-shadow: var(--auth-shadow);
}

.mytwpt-login-form,
.mytwpt-register-form,
.mytwpt-reset-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mytwpt-register-form { gap: 20px; }

/* --- Field labels + inputs (shared) --- */
.mytwpt-login-field > label,
.mytwpt-login-field__labelrow label,
.mytwpt-register-field > label,
.mytwpt-reset-field > label {
	display: block;
	margin-block-end: 7px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--auth-muted);
}

.mytwpt-login :is(input[type="text"], input[type="password"], input[type="email"]),
.mytwpt-register :is(input[type="text"], input[type="password"], input[type="email"]),
.mytwpt-reset input[type="email"] {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--auth-border);
	border-radius: 10px;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.25;
	color: var(--auth-ink);
	outline: none;
}

.mytwpt-login input:focus,
.mytwpt-register input:focus,
.mytwpt-reset input:focus {
	border-color: var(--auth-accent);
	box-shadow: 0 0 0 3px var(--auth-ring);
}

.mytwpt-register .required { color: var(--auth-accent); }

/* --- Submit buttons --- */
.mytwpt-login-form__submit,
.mytwpt-register-submit,
.mytwpt-reset-form .theme-button {
	width: 100%;
	height: 48px;
	padding: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
}

/* --- Error notices --- */
.mytwpt-login-errors,
.mytwpt-register-errors {
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #eec3c3;
	background: #faefef;
	color: var(--auth-danger);
	font-size: 13px;
	font-weight: 500;
	text-align: left;
}

.mytwpt-login-errors a,
.mytwpt-register-errors a { color: inherit; text-decoration: underline; }

/* --- Alt / switch line --- */
.mytwpt-login__alt,
.mytwpt-register__alt,
.mytwpt-reset__alt {
	margin: 22px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--auth-muted);
}

.mytwpt-login__alt a,
.mytwpt-register__alt a,
.mytwpt-reset__alt a { font-weight: 500; }

/* --- Login: password field + toggle --- */
.mytwpt-login-field__labelrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 7px;
}

.mytwpt-login-field__labelrow label { margin-block-end: 0; }

.mytwpt-login__lost-password {
	font-size: 12.5px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.mytwpt-login-field__control { position: relative; }
.mytwpt-login-field__control input { padding-inline-end: 60px; }

.mytwpt-login-form__toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	height: 32px;
	padding: 0 10px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--auth-muted);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
}

.mytwpt-login-form__toggle:hover { background: #f0f2f4; }

/* --- Reusable password show/hide toggle (register + account) --- */
.mytwpt-pass-control { position: relative; }
.mytwpt-pass-control input { padding-inline-end: 60px; }

.mytwpt-pass-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	height: 32px;
	padding: 0 10px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--auth-muted, var(--twpt-ink-2));
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
}

.mytwpt-pass-toggle:hover { background: #f0f2f4; }

/* --- Checkboxes (remember / newsletter) --- */
.mytwpt-login-remember,
.mytwpt-register-check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-size: 13.5px;
	line-height: 1.5;
	color: #4a4d53;
}

.mytwpt-register-check { align-items: flex-start; gap: 11px; }

.mytwpt-login-remember input,
.mytwpt-register-check input {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--auth-accent);
	cursor: pointer;
}

.mytwpt-register-check input { margin-block-start: 1px; }

/* --- Register: sections --- */
.mytwpt-register-section__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #52555b;
}

.mytwpt-register-section__desc {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: #6f7278;
}

.mytwpt-register-section__eyebrow + .mytwpt-register-field,
.mytwpt-register-section__eyebrow + .mytwpt-register-row { margin-block-start: 10px; }

.mytwpt-register-field + .mytwpt-register-field,
.mytwpt-register-row + .mytwpt-register-field,
.mytwpt-register-field + .mytwpt-register-row { margin-block-start: 16px; }

.mytwpt-register-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.mytwpt-register-row .mytwpt-register-field {
	flex: 1;
	min-width: 160px;
	margin-block-start: 0;
}

.mytwpt-register-divider {
	height: 1px;
	background: var(--auth-border);
}

.mytwpt-register-code {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 13.5px !important;
	letter-spacing: 0.02em;
}

/* OR divider */
.mytwpt-register-or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #7d8086;
}

.mytwpt-register-or::before,
.mytwpt-register-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--auth-border);
}

/* Envato button */
.mytwpt-register-envato-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 46px;
	background: var(--mytwpt-envato);
	border: 1px solid var(--mytwpt-envato-edge);
	border-radius: 10px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--mytwpt-envato-ink);
	cursor: pointer;
}

.mytwpt-register-envato-button:hover,
.mytwpt-register-envato-button:focus-visible { background: var(--mytwpt-envato-hover); }

.mytwpt-register-envato-button svg { height: 18px; width: auto; display: block; }

.mytwpt-register-envato-status {
	display: block;
	margin-block-start: 8px;
	padding: 10px 12px;
	border: 1px solid var(--auth-border);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--auth-muted);
	background: #f5f6f6;
}

.mytwpt-register-envato-status:empty { display: none; }

.mytwpt-register-envato-status--pending {
	color: var(--auth-ink);
	border-color: var(--auth-border);
	background: #f1f0ff;
}

.mytwpt-register-envato-status--success {
	color: #005f21;
	border-color: #b3dbc1;
	background: #e9f5ed;
}

.mytwpt-register-envato-status--error {
	color: var(--auth-danger);
	border-color: #eec3c3;
	background: #faefef;
}

/* Password strength meter */
.mytwpt-register-strength { margin-block-start: 10px; }

.mytwpt-register-strength__bars {
	display: flex;
	gap: 4px;
}

.mytwpt-register-strength__bars > span {
	flex: 1;
	height: 4px;
	border-radius: 3px;
	background: #dcdee1;
	transition: background 0.15s ease;
}

.mytwpt-register-strength__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-start: 7px;
	font-size: 12px;
}

.mytwpt-register-strength__hint { color: #6f7278; }
.mytwpt-register-strength__label { font-weight: 600; }

/* Inline mismatch hints */
.mytwpt-register-mismatch {
	margin-block-start: 6px;
	font-size: 12.5px;
	color: var(--auth-danger);
}

/* Terms consent text */
.mytwpt-register-terms {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: #6f7278;
	text-align: center;
}

/* --- Reset: sent confirmation --- */
.mytwpt-reset__card--sent {
	padding: 40px 28px;
	text-align: center;
}

.mytwpt-reset__sent-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #daf7e3;
	color: #0b7643;
	font-size: 26px;
	line-height: 1;
}

.mytwpt-reset__card--sent .mytwpt-reset__title {
	font-size: 22px;
	letter-spacing: -0.01em;
}

.mytwpt-reset__card--sent .mytwpt-reset__text {
	margin: 10px auto 0;
	max-width: 40ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--auth-muted);
}

.mytwpt-reset__back {
	margin-block-start: 24px;
	height: 44px;
	padding: 0 22px;
}

/* --- Already-signed-in notice (login + register share one card design) --- */
.mytwpt-login--notice,
.mytwpt-register--notice { max-width: 480px; }

.mytwpt-login-notice,
.mytwpt-register-notice {
	background: #fff;
	border: 1px solid var(--auth-border);
	border-radius: var(--auth-radius);
	padding: 48px 32px;
	box-shadow: var(--auth-shadow);
	text-align: center;
}

.mytwpt-login-notice__icon,
.mytwpt-register-notice__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #daf7e3;
	color: #0b7643;
}

.mytwpt-login-notice__icon svg,
.mytwpt-register-notice__icon svg { display: block; }

.mytwpt-login-notice__title,
.mytwpt-register-notice__title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-login-notice__text,
.mytwpt-register-notice__text {
	margin: 8px auto 0;
	max-width: 44ch;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--auth-muted);
}

.mytwpt-register-notice__email {
	font-weight: 600;
	color: var(--twpt-ink, #26292e);
}

.mytwpt-login-notice__actions,
.mytwpt-register-notice__actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-block-start: 24px;
	flex-wrap: wrap;
}

.mytwpt-login-notice__actions .theme-button,
.mytwpt-register-notice__actions .theme-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
}

/* Neutral secondary — not .outline, so the theme's accent outline styles (and
   their !important hover) stay out of it. Mirrors .mytwpt-gate__register. */
.mytwpt-login-notice__actions .theme-button.mytwpt-login-notice__button--alt,
.mytwpt-register-notice__actions .theme-button.mytwpt-register-notice__button--alt {
	background: #fff;
	border: 1px solid var(--auth-border);
	color: #2b2e33;
}

.mytwpt-login-notice__actions .theme-button.mytwpt-login-notice__button--alt:hover,
.mytwpt-login-notice__actions .theme-button.mytwpt-login-notice__button--alt:focus-visible,
.mytwpt-register-notice__actions .theme-button.mytwpt-register-notice__button--alt:hover,
.mytwpt-register-notice__actions .theme-button.mytwpt-register-notice__button--alt:focus-visible {
	background: #f4f5f8;
	color: #2b2e33;
}

/* --- Gate (logged-out notice) --- */
.mytwpt-gate__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 22px;
	border-radius: 18px;
	background: #ecebff;
	color: var(--auth-accent);
}

.mytwpt-gate__icon svg { display: block; }

.mytwpt-gate__title {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-gate__text {
	margin: 12px auto 0;
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--auth-muted);
}

.mytwpt-gate__actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-block-start: 28px;
	flex-wrap: wrap;
}

.mytwpt-gate__actions .theme-button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 48px;
	padding: 0 24px;
	border-radius: 11px;
}

/* Neutral "Create an account" button — not .outline, so the theme's accent
   outline styles (incl. its transparent-border !important hover) don't apply. */
.mytwpt-gate__actions .theme-button.mytwpt-gate__register {
	background: #fff;
	border: 1px solid var(--auth-border);
	color: #2b2e33;
	font-weight: 500;
}

.mytwpt-gate__actions .theme-button.mytwpt-gate__register:hover,
.mytwpt-gate__actions .theme-button.mytwpt-gate__register:focus-visible {
	background: #f4f5f8;
	color: #2b2e33;
}

.mytwpt-gate__note {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-start: 34px;
	padding: 20px 22px;
	background: #fff;
	border: 1px solid var(--auth-border);
	border-radius: 14px;
	box-shadow: var(--auth-shadow);
	text-align: left;
}

.mytwpt-gate__note-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: #f4f5f8;
	color: #45484d;
}

.mytwpt-gate__note-body {
	flex: 1;
	min-width: 0;
}

.mytwpt-gate__note-title {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #1f2227;
}

.mytwpt-gate__note-text {
	display: block;
	margin-block-start: 2px;
	font-size: 13px;
	color: #66696f;
}

.mytwpt-gate__note-link {
	flex-shrink: 0;
	font-size: 13.5px;
	font-weight: 500;
}

/* Support status */
.mytwpt-support-status-active {
	color: #16a34a;
}

.mytwpt-support-status-inactive {
	color: #dc2626;
}

/* Support Form */
.mytwpt-support-form {
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	padding: 26px 24px;
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
	color: var(--twpt-ink);
}

.mytwpt-support-form:has(.button[disabled]) {
	opacity: .6;
}

.mytwpt-support-form [hidden] {
	display: none;
}

/* 22px, not the design's 28px header gap: the notice is the last thing in here, so
   this is the notice-to-form-card spacing. The 28px sits on the notice's own top
   margin instead. */
.mytwpt-support-form__intro {
	margin-block-end: 22px;
	color: var(--twpt-ink);
}

.mytwpt-support-form__title {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-support-form__subtitle {
	font-size: 15px;
	margin: 6px 0 0;
	color: #606369;
}

.mytwpt-support-form .mytwpt-support-form__subtitle {
	margin: 0;
	font-size: 15px;
	color: var(--twpt-ink-2);
}

/* The "report a bug instead" notice. Literal colors, as the subtitle uses: the
   intro sits outside .mytwpt-support-form, so the portal tokens aren't in scope. */
.mytwpt-support-form__alt {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 28px 0 0;
	padding: 13px 15px;
	background: #f5f6f9;
	border: 1px solid #e3e4e8;
	border-radius: 12px;
}

.mytwpt-support-form__alt p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #4a4d53;
	text-wrap: pretty;
}

.mytwpt-support-form__alt-icon {
	display: block;
	flex-shrink: 0;
	margin-top: 3px;
	color: #6b6e74;
}

.mytwpt-support-form__row {
	margin-block-end: 20px;
}

.mytwpt-support-form .mytwpt-support-form__note {
	margin: 0 0 10px;
	padding: 12px 14px;
	background: #f0f4f9;
	border: 1px solid #d9dee6;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.55;
	color: #4a4d53;
}

.mytwpt-support-form .mytwpt-support-form__note p {
	margin: 0;
}

/* The dot is the design's marker for a titled callout - decorative, so it hangs
   off the heading rather than being another element to read. */
.mytwpt-support-form__note-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #343b45;
}

.mytwpt-support-form__note-title::before {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--twpt-accent);
}

.mytwpt-support-form__support-email {
	font-weight: 600;
	font-family: 'JetBrains Mono', Menlo, Consolas, monaco, monospace;
	font-style: normal;
}

.mytwpt-support-form__submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 500;
	color: #fff;
}

.mytwpt-support-form__submit:hover,
.mytwpt-support-form__submit:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-support-form__loader svg {
	display: block;
	animation: mytwpt-support-form-spin 1s linear infinite;
}

@keyframes mytwpt-support-form-spin {
	to { transform: rotate(360deg); }
}

.mytwpt-support-form label,
.mytwpt-support-form__label {
	display: inline-block;
	margin-block-end: 7px;
	color: var(--twpt-ink-2);
	font-weight: 500;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.mytwpt-support-form :is(input,textarea) {
	width: 100%;
	padding: 0 14px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	font-size: 14.5px;
	color: var(--twpt-ink);
}

.mytwpt-support-form input {
	height: 44px;
}

.mytwpt-support-form textarea {
	padding: 12px 14px;
	line-height: 1.5;
}

.mytwpt-support-form :is(input,textarea):focus {
	outline: none;
	border-color: var(--twpt-accent);
	box-shadow: 0 0 0 3px var(--twpt-ring);
}

.mytwpt-support-form label.mytwpt-support-form__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 20px;
	border: 1px dashed #c9cace;
	border-radius: 10px;
	background: var(--twpt-card);
	text-align: center;
	cursor: pointer;
	font-weight: 400;
	font-size: 13.5px;
	color: var(--twpt-ink-2);
	margin-block-end: 0;
	transition: border-color .15s ease-in-out, color .15s ease-in-out;
}

.mytwpt-support-form label.mytwpt-support-form__dropzone:hover,
.mytwpt-support-form label.mytwpt-support-form__dropzone.is-dragover {
	border-color: var(--twpt-accent);
	color: #45484d;
}

.mytwpt-support-form .mytwpt-support-form__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mytwpt-support-form label.mytwpt-support-form__dropzone:has(.mytwpt-support-form__file-input:focus-visible) {
	outline: 2px solid var(--wpex-accent);
	outline-offset: 2px;
}

.mytwpt-support-form__dropzone-icon {
	color: var(--twpt-ink-3);
	line-height: 0;
}

.mytwpt-support-form__dropzone-title {
	font-weight: 600;
	font-size: 12px;
}

.mytwpt-support-form__dropzone-hint {
	font-size: 11.5px;
	color: #56575D;
}

.mytwpt-support-form__attachments-error {
	margin-top: 15px;
	font-size: 12px;
}

.mytwpt-support-form__attachments-preview {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Asymmetric padding: the thumbnail's own edge reads as inset, so it needs less
   room on the left than the button does on the right. */
.mytwpt-support-form__attachment {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px 9px 12px;
	background: var(--twpt-inset);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	animation: mytwpt-support-form-fade-in .18s ease;
}

@keyframes mytwpt-support-form-fade-in {
	from { opacity: 0; transform: translateY(2px); }
	to { opacity: 1; transform: none; }
}

.mytwpt-support-form__attachment-thumb {
	flex: none;
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--twpt-tint);
}

.mytwpt-support-form__attachment-meta {
	flex: 1;
	min-width: 0;
}

.mytwpt-support-form__attachment-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 500;
	color: #26292e;
}

.mytwpt-support-form__attachment-size {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	color: #777a80;
}

.mytwpt-support-form__attachment-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: 17px;
	line-height: 1;
	color: #6f7278;
	cursor: pointer;
}

.mytwpt-support-form__attachment-remove:hover,
.mytwpt-support-form__attachment-remove:focus-visible {
	background: var(--twpt-danger-tint);
	color: var(--twpt-danger);
}

.mytwpt-support-form__required {
	color: var(--twpt-accent);
	font-size: 11.5px;
	vertical-align: super;
}

/* Error messages */
.mytwpt-support-form__errors,
.mytwpt-support-form__attachments-error {
	padding: 1em;
	border-width: 0 0 0 4px;
	border-style: solid;
	background: var(--wpex-error-bg, #fbeaea);
	border-color: var(--wpex-red-error, #dc3232);
}

/* Post-submission success — a centered card matching the Claude Design
   "submitted" state: check badge, heading, copy, then the two follow-up
   actions. Rendered standalone (it replaces the form), so it carries its own
   --twpt-* token scope above rather than inheriting the form's. */
.mytwpt-support-form__success {
	max-width: 620px;
	margin-inline: auto;
	padding: 48px 44px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
	text-align: center;
}

.mytwpt-support-form__success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: #daf7e3;
	color: #0b7643;
	font-size: 26px;
	line-height: 1;
}

.mytwpt-support-form__success-title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--twpt-ink);
}

.mytwpt-support-form__success p {
	max-width: 52ch;
	margin: 16px auto 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--twpt-ink-2);
}

.mytwpt-support-form__success-email {
	font-weight: 600;
	color: var(--twpt-ink);
}

.mytwpt-support-form__success-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
}

.mytwpt-support-form__success-button {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.mytwpt-support-form__success-button:hover {
	text-decoration: none;
}

.mytwpt-support-form__success-button--secondary {
	background: var(--twpt-card);
	border-color: var(--twpt-border);
	color: var(--twpt-ink);
	text-decoration: none;
}

.mytwpt-support-form__success-button--secondary:hover,
.mytwpt-support-form__success-button--secondary:focus-visible {
	background: var(--twpt-inset);
	color: var(--twpt-ink);
	text-decoration: none;
}

.mytwpt-support-form__success-button--primary {
	background: var(--twpt-accent);
	border-color: var(--twpt-accent);
	color: #fff;
	text-decoration: none;
}

.mytwpt-support-form__success-button--primary:hover,
.mytwpt-support-form__success-button--primary:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
	text-decoration: none;
}

.mytwpt-support-form__errors {
	margin-bottom: 40px
}

.mytwpt-support-form__errors > strong {
	display: block;
	margin-bottom: 20px;
	font-size: 18px;
	line-height: 1.4
}

.mytwpt-support-form__errors ul {
	margin: 0;
	list-style-position: inside
}

/* Bare label, no container - the text carries it. The whole block is still the
   hit area, and the links inside suppress label activation per spec, so reading
   the policy doesn't tick the box on the way past.
   Qualified with the element (as .mytwpt-support-form__dropzone is) to outrank
   `.mytwpt-support-form label`, which would otherwise make this an 11px uppercase
   field label. The type properties are reset here rather than only on the text
   span, because they inherit past it. */
.mytwpt-support-form label.mytwpt-support-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-block-end: 0;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* Native control tinted with accent-color rather than a rebuilt one: at 17px the
   platform checkbox is the clearer of the two.
   Qualified with the element to outrank `.mytwpt-support-form :is(input,textarea)`
   - :is() takes the specificity of its most specific argument, so that rule is a
   class+element and beats a lone class. Its text-field box (full width, padding,
   border, radius, background) is reverted to the UA's so the platform draws its
   own checkbox. */
.mytwpt-support-form input.mytwpt-support-form__consent-input {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	padding: revert;
	border: revert;
	border-radius: revert;
	background: revert;
	accent-color: var(--twpt-accent);
	cursor: pointer;
}

/* The shared :focus rule swaps the outline for a 3px field ring, which on a 17px
   box just smears. Keep a real ring, and only for keyboard focus. */
.mytwpt-support-form input.mytwpt-support-form__consent-input:focus {
	box-shadow: none;
}

.mytwpt-support-form input.mytwpt-support-form__consent-input:focus-visible {
	outline: 2px solid var(--twpt-accent);
	outline-offset: 2px;
}

.mytwpt-support-form .mytwpt-support-form__consent-text {
	font-size: 13.5px;
	line-height: 1.5;
	color: #4a4d53;
}

.mytwpt-support-form__dialog-title {
	margin: 0 0 15px;
}

.mytwpt-support-form__dialog-text {
	margin-block-end: 20px;
}

.mytwpt-support-form__dialog-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mytwpt-support-form button[disabled] {
	pointer-events: none;
	opacity: .5
}

/* Support tab — "no licenses" empty state. */
.mytwpt-support-empty {
	max-width: 480px;
	margin: 20px auto 0;
	padding: 40px 36px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
	text-align: center;
	color: var(--twpt-ink);
}

.mytwpt-support-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	border-radius: 16px;
	background: #feedc9;
	color: #a45e00;
}

.mytwpt-support-empty__icon svg {
	display: block;
}

.mytwpt-support-empty__title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-support-empty__text {
	margin: 10px auto 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--twpt-ink-2);
}

.mytwpt-support-empty__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.mytwpt-support-empty__import {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.mytwpt-support-empty__import span {
	font-size: 17px;
}

.mytwpt-support-empty__import:hover,
.mytwpt-support-empty__import:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
	text-decoration: none;
}

.mytwpt-support-empty__buy {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	color: #383b40;
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
}

.mytwpt-support-empty__buy:hover,
.mytwpt-support-empty__buy:focus-visible {
	background: var(--twpt-inset);
	color: #383b40;
}

/* The "found a bug?" footer. Separated by a rule and set on the inset background
   so it reads as a different offer from the buy/renew actions above it. */
.mytwpt-support-empty__bug {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--twpt-border);
}

.mytwpt-support-empty__bug-title {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--twpt-ink);
}

.mytwpt-support-empty__bug-text {
	margin: 6px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--twpt-ink-2);
}

.mytwpt-support-empty__bug-link {
	display: inline-flex;
	align-items: center;
	margin-top: 14px;
	height: 40px;
	padding: 0 18px;
	background: var(--twpt-inset);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	color: #383b40;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.mytwpt-support-empty__bug-link:hover,
.mytwpt-support-empty__bug-link:focus-visible {
	background: var(--twpt-tint);
	border-color: var(--twpt-accent);
	color: var(--twpt-accent-hover);
	text-decoration: none;
}

/* Abstracts */
img.image-w-border, .image-w-border img {
	border: 1px solid var(--wpex-surface-4);
}

.twpt-rounded-btn {
	border-radius: 999px;
}

.twpt-rounded-button--lg {
	padding: 1em 2em;
	line-height: 1.4;
}

.mytwpt-external-icon {
	font-size: clamp(11px, .75em, 14px);
	height: 1em;
	width: 1em;
}

/** Gradient Backgrounds */
.twpt-gradient-bg {
	background: rgb(6, 0, 152);
	background: linear-gradient(90deg, rgba(6, 0, 152, 1) 0%, rgba(1, 64, 250, 1) 67%, rgba(61, 118, 252, 1) 92%);
}

.twpt-gradient-bg::before {
	content: "";
	display: block !important;
	position: absolute;
	inset: 0;
	background-image: url(https://totalwptheme.com/wp-content/uploads/total-shape-dots-bg.png);
	background-position: right 50% bottom -20px;
	background-size: 1200px;
	z-index: 1;
}

.page-header-inner {
	position: relative;
	z-index: 2;
}

.twpt-gradient-bg--no-repeat::before {
	background-repeat: no-repeat;
}

/** ---------------------------------------------------------------------------
 * Customer portal — design tokens.
 * ------------------------------------------------------------------------- */

.mytwpt-dashboard,
.mytwpt-account,
.mytwpt-services,
.mytwpt-logout-button,
.mytwpt-support-empty,
.mytwpt-licenses,
.mytwpt-license-pagination,
.mytwpt-license-controls,
.mytwpt-licenses__header,
.mytwpt-license-search,
.mytwpt-license-search-result,
.mytwpt-support-form,
.mytwpt-support-form__success,
.mytwpt-support-notice,
.mytwpt-alert,
.mytwpt-features,
.mytwpt-features__dialog,
.mytwpt-bug-report,
.mytwpt-bug-report__dialog,
.mytwpt-import {
	--twpt-accent: var(--wpex-accent);
	--twpt-accent-hover: #1200cc;
	--twpt-ring: rgba(23, 0, 255, 0.14);
	--twpt-tint: rgba(23, 0, 255, 0.08);
	--twpt-card: #fff;
	--twpt-border: #e0e1e5;
	--twpt-inset: #f4f5f8;
	--twpt-ink: #181b1f;
	--twpt-ink-2: #606369;
	--twpt-ink-3: #58585F;
	--twpt-shadow: 0 1px 2px rgba(96, 99, 105, 0.04);
	--twpt-danger: #c53637;
	--twpt-danger-tint: rgba(213, 87, 83, 0.12);
}

/** ---------------------------------------------------------------------------
 * Expired-support notice — the amber bar under the site header.
 *
 * Rendered by MyTwpt\Support_Notice on wpex_hook_wrap_top (after wpex_header), so
 * it spans the full width with its own inner rail matching the portal's 880px
 * column. Amber rather than the danger red: support lapsing is a prompt, not an
 * error. The row wraps on narrow screens (body has min-width) and the status line
 * takes a full row of its own beneath.
 * ------------------------------------------------------------------------- */

.mytwpt-support-notice {
	background: #ffede5;
	border-bottom: 1px solid #fec1a6;
}

.mytwpt-support-notice__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	max-width: 880px;
	margin: 0 auto;
	padding-block: 14px;
	line-height: 1.25;
}

.mytwpt-support-notice__icon {
	display: flex;
	align-items: center;
	align-self: flex-start;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	margin-block-start: 2px;
	background: #ffcfb0;
	color: #aa3700;
}

.mytwpt-support-notice__icon svg {
	display: block;
}

.mytwpt-support-notice__body {
	flex: 1;
	min-width: 220px;
}

.mytwpt-support-notice__title {
	font-size: 14px;
	font-weight: 600;
	color: #733216;
}

.mytwpt-support-notice__text {
	font-size: 13.5px;
	color: #7a5341;
}

.mytwpt-support-notice__actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
	margin-inline-start: 8px;
}

.mytwpt-support-notice__reverify {
	height: 36px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid #edbfab;
	border-radius: 9px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: #79371c;
	cursor: pointer;
}

.mytwpt-support-notice__reverify:hover {
	background: #fff5ee;
}

.mytwpt-support-notice__reverify:disabled {
	cursor: default;
	opacity: .65;
}

.mytwpt-support-notice__buy {
	display: inline-flex;
	display: none;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
}

.mytwpt-support-notice__buy:hover {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
	text-decoration: none;
}

.mytwpt-support-notice__status {
	flex-basis: 100%;
	font-size: 13px;
	color: #7a5341;
	font-weight: 700;
	text-align: center;
	margin-top: 10px;
}

.mytwpt-support-notice__status[hidden] {
	display: none;
}

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

	.mytwpt-support-notice__actions {
		width: 100%;
	}

	.mytwpt-support-notice__reverify,
	.mytwpt-support-notice__buy {
		flex: 1;
		justify-content: center;
	}

}

/* Portal header logout button */
.mytwpt-logout-button {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 9px;
	color: #2b2e33;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
}

.mytwpt-logout-button:hover,
.mytwpt-logout-button:focus-visible {
	background: var(--twpt-inset);
	color: #2b2e33;
	text-decoration: none;
}

.mytwpt-dashboard__action,
.mytwpt-dashboard__action:hover,
.mytwpt-dashboard__action:focus-visible,
.mytwpt-dashboard__promo,
.mytwpt-dashboard__promo:hover,
.mytwpt-dashboard__promo:focus-visible,
.mytwpt-dashboard__download,
.mytwpt-dashboard__download:hover,
.mytwpt-dashboard__download:focus-visible,
.mytwpt-support-empty__buy,
.mytwpt-support-empty__buy:hover,
.mytwpt-support-empty__buy:focus-visible {
	text-decoration: none;
}

/** ---------------------------------------------------------------------------
 * Customer portal home ([mytwpt_dashboard]).
 * ------------------------------------------------------------------------- */

.mytwpt-dashboard {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--twpt-ink);
}

.mytwpt-dashboard [hidden] {
	display: none;
}

/** Profile / support card */

.mytwpt-dashboard__user {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 24px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
}

.mytwpt-dashboard__avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: var(--twpt-accent);
	color: #fff;
	font-size: 26px;
	font-weight: 600;
}

.mytwpt-dashboard__user-meta {
	flex: 1;
	min-width: 200px;
}

.mytwpt-dashboard__name {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-dashboard__email {
	margin-top: 2px;
	font-size: 14px;
	color: var(--twpt-ink-2);
}

.mytwpt-dashboard__support-wrap {
	flex-shrink: 0;
	text-align: right;
}

.mytwpt-dashboard__support {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
}

.mytwpt-dashboard__support::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dot, currentColor);
}

.mytwpt-dashboard__support--active {
	background: #daf7e3;
	color: #185b37;
	--dot: #3f9b65;
}

.mytwpt-dashboard__support--inactive {
	background: #ffe8e0;
	color: #9a4729;
	--dot: #e4744b;
}

.mytwpt-dashboard__support-expires {
	margin-top: 8px;
	font-size: 12.5px;
	color: #6f7278;
}

/** Buy-a-license promo banner */

.mytwpt-dashboard__promo {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 30px 32px;
	border-radius: 18px;
	background: linear-gradient(115deg, #1700ff 0%, #4a29b2 55%, #9030a4 100%);
	color: #fff;
	text-decoration: none;
}

.mytwpt-dashboard__promo::before,
.mytwpt-dashboard__promo::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.mytwpt-dashboard__promo::before {
	top: -60px;
	right: 80px;
	width: 220px;
	height: 220px;
	background: rgba(255, 255, 255, 0.08);
}

.mytwpt-dashboard__promo::after {
	bottom: -90px;
	right: -30px;
	width: 240px;
	height: 240px;
	background: rgba(255, 255, 255, 0.06);
}

.mytwpt-dashboard__promo-body {
	position: relative;
	max-width: 60ch;
}

.mytwpt-dashboard__promo-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.15);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #fff;
}

.mytwpt-dashboard__promo-title {
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}

.mytwpt-dashboard__promo-text {
	margin: 7px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
}

.mytwpt-dashboard__promo-button {
	position: relative;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 48px;
	padding: 0 24px;
	border-radius: 12px;
	background: #fff;
	color: var(--twpt-accent-hover);
	font-size: 15px;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.mytwpt-dashboard__promo:hover .mytwpt-dashboard__promo-button,
.mytwpt-dashboard__promo:focus-visible .mytwpt-dashboard__promo-button {
	background: #f3f5fc;
}

/** Action tiles */

.mytwpt-dashboard__actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.mytwpt-dashboard__action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 22px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.mytwpt-dashboard__action:hover,
.mytwpt-dashboard__action:focus-visible {
	border-color: var(--twpt-accent);
	box-shadow: 0 4px 14px rgba(91, 97, 128, 0.12);
	text-decoration: none;
}

.mytwpt-dashboard__action-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 16px;
	border-radius: 11px;
	background: var(--twpt-tint);
	color: var(--twpt-accent-hover);
}

.mytwpt-dashboard__action-icon svg {
	display: block;
}

.mytwpt-dashboard__action-title {
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--twpt-ink);
}

.mytwpt-dashboard__action-desc {
	margin-top: 6px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #66696f;
}

.mytwpt-dashboard__action-cta {
	margin-top: auto;
	padding-top: 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--twpt-accent-hover);
}

/** Panels (latest licenses, version, newsletter) */

.mytwpt-dashboard__panel {
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
}

.mytwpt-dashboard__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.mytwpt-dashboard__label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--twpt-ink-3);
}

.mytwpt-dashboard__view-all {
	font-size: 13px;
	font-weight: 500;
}

/** Latest licenses */

.mytwpt-dashboard__latest {
	padding: 8px 22px;
}

.mytwpt-dashboard__latest .mytwpt-dashboard__panel-head {
	padding: 14px 0 12px;
}

.mytwpt-dashboard__latest-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mytwpt-dashboard__latest-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-top: 1px solid #eaebee;
}

.mytwpt-dashboard__latest-meta {
	flex: 1;
	min-width: 0;
}

.mytwpt-dashboard__latest-plan {
	font-size: 14px;
	font-weight: 500;
	color: #1f2227;
}

.mytwpt-dashboard__latest-code {
	margin-top: 2px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: 'JetBrains Mono', Menlo, Consolas, monaco, monospace;
	font-size: 12.5px;
	color: #6f7278;
}

.mytwpt-dashboard__latest-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 20px 0 24px;
	text-align: center;
}

.mytwpt-dashboard__latest-empty-text {
	margin: 0;
	font-size: 13.5px;
	color: var(--twpt-ink-2);
}

.mytwpt-dashboard__import {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 16px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.mytwpt-dashboard__import:hover,
.mytwpt-dashboard__import:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-dashboard__import svg {
	display: block;
}

/** Version + newsletter row */

.mytwpt-dashboard__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.mytwpt-dashboard__row.is-single {
	grid-template-columns: 1fr;
}

.mytwpt-dashboard__version {
	display: flex;
	flex-direction: column;
	padding: 22px;
}

.mytwpt-dashboard__download {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--twpt-tint);
	color: var(--twpt-accent-hover);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.mytwpt-dashboard__download svg {
	display: block;
}

.mytwpt-dashboard__version-number {
	margin-top: 12px;
	font-family: 'JetBrains Mono', Menlo, Consolas, monaco, monospace;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-dashboard__version-text {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #606369;
}

.mytwpt-dashboard__changelog {
	margin-top: auto;
	padding-top: 16px;
	font-size: 13.5px;
	font-weight: 500;
}

.mytwpt-dashboard__newsletter {
	padding: 22px;
	background: #f6f8fd;
}

.mytwpt-dashboard__newsletter-title {
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-dashboard__newsletter-text {
	margin: 5px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #66696f;
}

.mytwpt-dashboard__newsletter-form {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}

.mytwpt-dashboard__newsletter-input {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 14px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	font-size: 14px;
	color: var(--twpt-ink);
}

.mytwpt-dashboard__newsletter-input:focus {
	outline: none;
	border-color: var(--twpt-accent);
	box-shadow: 0 0 0 3px var(--twpt-ring);
}

.mytwpt-dashboard__newsletter-button {
	flex-shrink: 0;
	height: 42px;
	padding: 0 16px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
}

.mytwpt-dashboard__newsletter-button:hover,
.mytwpt-dashboard__newsletter-button:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
}

.mytwpt-dashboard__newsletter-button:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.mytwpt-dashboard__newsletter-done:not([hidden]) {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #daf7e3;
	color: #185b37;
	font-size: 13.5px;
	font-weight: 500;
}

.mytwpt-dashboard__newsletter-error {
	margin-top: 10px;
	font-size: 13px;
	color: var(--twpt-danger);
}

@media only screen and (max-width: 767px) {
	.mytwpt-dashboard__actions,
	.mytwpt-dashboard__row {
		grid-template-columns: 1fr;
	}

	.mytwpt-dashboard__support-wrap {
		text-align: left;
	}
}

/** ---------------------------------------------------------------------------
 * Customer portal account ([mytwpt_account]).
 * ------------------------------------------------------------------------- */

.mytwpt-account {
	color: var(--twpt-ink);
}

.mytwpt-account__header {
	margin-bottom: 28px;
}

.mytwpt-account__title {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-account__subtitle {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--twpt-ink-2);
}

.mytwpt-account__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mytwpt-account__card {
	padding: 24px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
}

.mytwpt-account__card-title {
	margin: 0 0 18px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-account__fields {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.mytwpt-account__form > .mytwpt-account__field {
	margin-top: 16px;
}

.mytwpt-account__fields--stack {
	flex-direction: column;
	max-width: 380px;
}

.mytwpt-account__field {
	flex: 1;
	min-width: 220px;
}

.mytwpt-account__label {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--twpt-ink-2);
}

.mytwpt-account__input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	font-size: 14.5px;
	color: var(--twpt-ink);
}

.mytwpt-account__input:focus {
	outline: none;
	border-color: var(--twpt-accent);
	box-shadow: 0 0 0 3px var(--twpt-ring);
}

.mytwpt-account__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.mytwpt-account__submit {
	height: 42px;
	padding: 0 20px;
	border-radius: 10px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.mytwpt-account__submit:hover,
.mytwpt-account__submit:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-account__submit:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.mytwpt-account__submit--secondary {
	background: var(--twpt-card);
	border-color: var(--twpt-border);
	color: #2b2e33;
}

.mytwpt-account__submit--secondary:hover,
.mytwpt-account__submit--secondary:focus-visible {
	background: var(--twpt-inset);
	border-color: var(--twpt-border);
	color: #2b2e33;
}

.mytwpt-account__feedback {
	font-size: 13.5px;
	font-weight: 500;
}

.mytwpt-account__feedback.is-ok {
	color: #0b7643;
}

.mytwpt-account__feedback.is-error {
	color: var(--twpt-danger);
}

.mytwpt-account__newsletter {
	padding: 24px;
	background: var(--twpt-card);
}

.mytwpt-account__newsletter .mytwpt-dashboard__newsletter-title {
	font-size: 16px;
	margin-bottom: 6px;
}

.mytwpt-account__newsletter .mytwpt-dashboard__newsletter-text {
	margin: 0 0 16px;
}

.mytwpt-account__newsletter .mytwpt-dashboard__newsletter-form {
	margin-top: 0;
	max-width: 420px;
}

.mytwpt-account__newsletter .mytwpt-dashboard__newsletter-input,
.mytwpt-account__newsletter .mytwpt-dashboard__newsletter-button {
	height: 44px;
}

.mytwpt-account__newsletter .mytwpt-dashboard__newsletter-done {
	max-width: 420px;
}

/** ---------------------------------------------------------------------------
 * Customer portal services ([mytwpt_services]).
 * ------------------------------------------------------------------------- */

.mytwpt-services {
	color: var(--twpt-ink);
}

.mytwpt-services [hidden] {
	display: none;
}

/** Hero */

.mytwpt-services__hero {
	position: relative;
	overflow: hidden;
	padding: 34px 36px;
	margin-bottom: 22px;
	border-radius: 18px;
	background: linear-gradient(120deg, #39359b 0%, #6a43c4 100%);
}

.mytwpt-services__hero::before {
	content: "";
	position: absolute;
	top: -70px;
	right: -20px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	filter: blur(10px);
	pointer-events: none;
}

.mytwpt-services__hero-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.mytwpt-services__hero-avatar {
	flex-shrink: 0;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.mytwpt-services__hero-body {
	flex: 1;
	min-width: 240px;
}

.mytwpt-services__hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 10px;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.9);
}

.mytwpt-services__hero-title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}

.mytwpt-services__hero-text {
	margin: 8px 0 0;
	max-width: 62ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

/** Service cards */

.mytwpt-services__label {
	margin-bottom: 12px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--twpt-ink-3);
}

.mytwpt-services__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-bottom: 24px;
}

.mytwpt-services__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 18px 20px;
	background: var(--twpt-card);
	border: 1.5px solid var(--twpt-border);
	border-radius: 14px;
	text-align: left;
	cursor: pointer;
}

.mytwpt-services__card:hover,
.mytwpt-services__card:focus-visible {
	border-color: var(--twpt-accent);
}

.mytwpt-services__card.is-selected {
	border-color: var(--twpt-accent);
	background: var(--twpt-tint);
}

.mytwpt-services__card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.mytwpt-services__card-name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--twpt-ink);
}

.mytwpt-services__card-radio {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--twpt-border);
	background: var(--twpt-card);
}

.mytwpt-services__card.is-selected .mytwpt-services__card-radio {
	border-color: var(--twpt-accent);
	background: var(--twpt-accent);
	box-shadow: inset 0 0 0 3px #fff;
}

.mytwpt-services__card-desc {
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.5;
	color: #66696f;
}

.mytwpt-services__card-price {
	margin-top: auto;
	padding-top: 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--twpt-accent-hover);
}

/** Project form */

.mytwpt-services__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 26px 24px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
}

.mytwpt-services__form-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-services__form-subtitle {
	margin: 5px 0 0;
	font-size: 14px;
	color: var(--twpt-ink-2);
}

.mytwpt-services__fields {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.mytwpt-services__fields .mytwpt-services__field {
	flex: 1;
	min-width: 220px;
}

.mytwpt-services__field-label {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--twpt-ink-2);
}

.mytwpt-services__req {
	color: var(--twpt-accent);
}

.mytwpt-services__input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	font-size: 14.5px;
	color: var(--twpt-ink);
}

.mytwpt-services__textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px 14px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--twpt-ink);
	resize: vertical;
}

.mytwpt-services__input:focus,
.mytwpt-services__textarea:focus {
	outline: none;
	border-color: var(--twpt-accent);
	box-shadow: 0 0 0 3px var(--twpt-ring);
}

/* Selected-services chips */
.mytwpt-services__selected-empty {
	padding: 13px 14px;
	border: 1px dashed #c9cace;
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--twpt-ink-2);
}

.mytwpt-services__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mytwpt-services__chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 8px 8px 14px;
	background: var(--twpt-tint);
	border: 1px solid var(--twpt-accent);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	color: #1f2227;
}

.mytwpt-services__chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: rgba(23, 0, 255, 0.12);
	color: var(--twpt-accent-hover);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.mytwpt-services__chip-remove:hover,
.mytwpt-services__chip-remove:focus-visible {
	background: rgba(23, 0, 255, 0.22);
}

.mytwpt-services__error {
	font-size: 13px;
	color: var(--twpt-danger);
}

.mytwpt-services__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mytwpt-services__submit {
	height: 46px;
	padding: 0 24px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.mytwpt-services__submit:hover,
.mytwpt-services__submit:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-services__submit:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.mytwpt-services__note {
	font-size: 12.5px;
	color: var(--twpt-ink-3);
}

/** Success */

.mytwpt-services__success {
	padding: 48px 32px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
	text-align: center;
}

.mytwpt-services__success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #daf7e3;
	color: #0b7643;
	font-size: 26px;
}

.mytwpt-services__success-title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-services__success-text {
	margin: 8px auto 0;
	max-width: 440px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--twpt-ink-2);
}

.mytwpt-services__success-service,
.mytwpt-services__success-email {
	font-weight: 600;
	color: #26292e;
}

.mytwpt-services__reset {
	height: 42px;
	padding: 0 18px;
	margin-top: 24px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	color: #2b2e33;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

.mytwpt-services__reset:hover,
.mytwpt-services__reset:focus-visible {
	background: var(--twpt-inset);
}

@media only screen and (max-width: 767px) {
	.mytwpt-services__cards {
		grid-template-columns: 1fr;
	}
}

/** ---------------------------------------------------------------------------
 * Customer license grid.
 * ------------------------------------------------------------------------- */

.mytwpt-licenses__default[hidden],
.mytwpt-license-search-result[hidden],
.mytwpt-license-search__loader[hidden],
.mytwpt-deactivate-license-button__loader[hidden] {
	display: none;
}

/** Header */

.mytwpt-licenses__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 32px;
	color: var(--twpt-ink);
}

.mytwpt-licenses__title {
	margin: 0;
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-licenses__subtitle {
	margin: 6px 0 0;
	font-size: 15px;
	color: var(--twpt-ink-2);
}

.mytwpt-licenses__actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.mytwpt-licenses-import.theme-button,
.mytwpt-licenses-refresh.theme-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
}

.mytwpt-licenses-refresh.theme-button {
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	color: #2b2e33;
}

.mytwpt-licenses-refresh.theme-button:hover,
.mytwpt-licenses-refresh.theme-button:focus-visible {
	background: var(--twpt-inset);
	border-color: var(--twpt-border);
	color: #2b2e33;
}

.mytwpt-licenses-import.theme-button {
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	color: #fff;
}

.mytwpt-licenses-import.theme-button:hover,
.mytwpt-licenses-import.theme-button:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-licenses-import svg,
.mytwpt-licenses-refresh svg {
	display: block;
}

.mytwpt-licenses-refresh svg {
	animation-duration: 3s;
}

/** Search */

.mytwpt-license-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

.mytwpt-license-search {
	display: flex;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.mytwpt-license-filter-form {
	flex-shrink: 0;
	margin: 0;
}

/* Unregistered filter */
.mytwpt-license-filter {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 12px;
	color: #45484d;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.mytwpt-license-filter.is-active {
	background: var(--twpt-tint);
	border-color: var(--twpt-accent);
	color: var(--twpt-accent-hover);
}

.mytwpt-license-filter svg {
	display: block;
}

.mytwpt-license-search__field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.mytwpt-license-search__input {
	width: 100%;
	height: 44px;
	padding: 0 42px 0 44px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 12px;
	font-size: 14.5px;
	color: var(--twpt-ink);
}

.mytwpt-license-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.mytwpt-license-search__input:focus {
	outline: none;
	border-color: var(--twpt-accent);
	box-shadow: 0 0 0 3px var(--twpt-ring);
}

.mytwpt-license-search__clear:not([hidden]) {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--twpt-inset);
	color: #52555b;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.mytwpt-license-search__clear:hover,
.mytwpt-license-search__clear:focus-visible {
	background: var(--twpt-border);
	color: var(--twpt-ink);
}

/* Search empty state */
.mytwpt-license-search-empty {
	padding: 40px 24px;
	background: var(--twpt-card);
	border: 1px dashed #cfd1d4;
	border-radius: 16px;
	text-align: center;
}

.mytwpt-license-search-empty__title {
	font-size: 15px;
	font-weight: 500;
	color: #2b2e33;
}

.mytwpt-license-search-empty__text {
	margin: 5px 0 0;
	font-size: 13.5px;
	color: var(--twpt-ink-2);
}

.mytwpt-license-search-empty__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
	height: 38px;
	padding: 0 18px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	color: #2b2e33;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
}

.mytwpt-license-search-empty__clear:hover,
.mytwpt-license-search-empty__clear:focus-visible {
	background: var(--twpt-inset);
}

.mytwpt-license-search__submit {
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--twpt-ink-3);
	cursor: pointer;
}

.mytwpt-license-search__submit:hover,
.mytwpt-license-search__submit:focus-visible {
	color: var(--twpt-accent);
}

.mytwpt-license-search__submit svg {
	display: block;
	width: 20px;
	height: 20px;
}

.mytwpt-license-search__loader {
	display: none;
	color: var(--twpt-accent);
}

.mytwpt-license-search__loader svg {
	width: 18px;
	height: 18px;
}

.mytwpt-license-search__submit.is-loading .mytwpt-license-search__submit-icon {
	display: none;
}

.mytwpt-license-search__submit.is-loading .mytwpt-license-search__loader {
	display: block;
}

/** Grid */

.mytwpt-licenses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	color: var(--twpt-ink);
}

.mytwpt-licenses.is-busy {
	opacity: .6;
	pointer-events: none;
}

.mytwpt-license {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px 24px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
	height: 100%;
}

/** Header (type + status) */

.mytwpt-license__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.mytwpt-license__type {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.mytwpt-license__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--wpex-surface-3);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
}

.mytwpt-license__status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dot, currentColor);
}

.mytwpt-license__header-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 10px;
}

/* Quiet until hovered: removing a license is rare next to the things around it,
   so it should not compete with the status pill for attention. */
.mytwpt-license__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--twpt-border);
	border-radius: 9px;
	background: var(--twpt-card);
	color: var(--twpt-ink-2);
	cursor: pointer;
}

.mytwpt-license__remove:hover,
.mytwpt-license__remove:focus-visible {
	border-color: rgba(213, 87, 83, 0.5);
	background: var(--twpt-danger-tint);
	color: var(--twpt-danger);
}

.mytwpt-license__remove:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.mytwpt-license__remove svg {
	display: block;
}

/* Same box as the button it stands in for, so swapping the two doesn't shift the
   status pill beside them. The SVG carries its own animateTransform. */
.mytwpt-license__remove-loader {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--twpt-accent);
}

.mytwpt-license__remove-loader[hidden] {
	display: none;
}

.mytwpt-license__remove-loader svg {
	display: block;
	width: 16px;
	height: 16px;
}

.mytwpt-license__status--active {
	background: #daf7e3;
	color: #185b37;
	--dot: #3f9b65;
}

.mytwpt-license__status--expired {
	background: #ffe8e0;
	color: #9a4729;
	--dot: #e4744b;
}

.mytwpt-license__status--trial {
	background: #e8edff;
	color: #4b55a0;
	--dot: #6a78cd;
}

/* Registration state, shown on the dashboard summary in place of validity: the
   useful fact for a healthy license is whether it has a site on it. Registered
   borrows the Active green - both mean "in use and fine". */
.mytwpt-license__status--registered {
	background: #daf7e3;
	color: #185b37;
	--dot: #3f9b65;
}

/* Accent rather than a warning colour: a spare license is information, not a
   problem - and it's the state someone hunting for a free slot is looking for. */
.mytwpt-license__status--unregistered {
	background: var(--twpt-tint);
	color: var(--twpt-accent-hover);
	--dot: var(--twpt-accent);
}

/* The two statuses that can actually be set. Previously undefined, so a killed
   license fell back to the base pill and read as unremarkable grey. */
.mytwpt-license__status--revoked,
.mytwpt-license__status--invalid {
	background: var(--twpt-danger-tint);
	color: var(--twpt-danger);
	--dot: var(--twpt-danger);
}

/** Key */

.mytwpt-license__key {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.mytwpt-license__key .mytwpt-license__label {
	flex-basis: 100%;
	margin-bottom: -1px;
}

.mytwpt-license__key .mytwpt-license__key-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mytwpt-license__key .mytwpt-key-value {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	background: var(--twpt-inset);
	font-family: 'JetBrains Mono', Menlo, Consolas, monaco, monospace;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--twpt-ink);
	text-overflow: ellipsis;
}

/** Show / Copy */

.mytwpt-license__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 42px;
	padding: 0 15px;
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	background: var(--twpt-card);
	color: #2b2e33;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.mytwpt-license__button svg {
	display: none;
}

.mytwpt-license__button:hover,
.mytwpt-license__button:focus-visible {
	background: var(--twpt-inset);
}

.mytwpt-key-copy {
	border-color: var(--twpt-accent);
	background: var(--twpt-accent);
	color: #fff;
}

.mytwpt-key-copy:hover,
.mytwpt-key-copy:focus-visible {
	border-color: var(--twpt-accent-hover);
	background: var(--twpt-accent-hover);
	color: #fff;
}

/** Per-domain disconnect */

.mytwpt-deactivate-license-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--twpt-ink-3);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}

.mytwpt-deactivate-license-button:hover,
.mytwpt-deactivate-license-button:focus-visible {
	background: var(--twpt-danger-tint);
	color: var(--twpt-danger);
}

.mytwpt-license__button:disabled,
.mytwpt-deactivate-license-button:disabled,
.mytwpt-licenses-refresh:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.mytwpt-deactivate-license-button__loader {
	display: inline-flex;
	align-items: center;
	color: var(--twpt-accent);
}

.mytwpt-deactivate-license-button__loader svg {
	height: 1.2em;
	width: 1.2em;
	display: block;
}

/** Instant hover/focus tooltip for the icon-only remove and deactivate buttons */

.mytwpt-license__remove[data-tooltip],
.mytwpt-deactivate-license-button[data-tooltip] {
	position: relative;
}

.mytwpt-license__remove[data-tooltip]::after,
.mytwpt-deactivate-license-button[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	z-index: 10;
	width: max-content;
	max-width: 220px;
	padding: 6px 9px;
	border-radius: 8px;
	background: var(--twpt-ink);
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
	box-shadow: var(--twpt-shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}

.mytwpt-license__remove[data-tooltip]:hover::after,
.mytwpt-license__remove[data-tooltip]:focus-visible::after,
.mytwpt-deactivate-license-button[data-tooltip]:hover::after,
.mytwpt-deactivate-license-button[data-tooltip]:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.mytwpt-license__remove[data-tooltip]::after,
	.mytwpt-deactivate-license-button[data-tooltip]::after {
		transition: opacity .15s ease;
		transform: translateX(-50%);
	}
}

/** Sites */

.mytwpt-license__sites {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--twpt-border);
}

.mytwpt-license__label {
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--twpt-ink-3);
}

.mytwpt-license__sites-count {
	font-size: 13px;
	font-weight: 500;
	color: #383b40;
}

.mytwpt-license__sites.is-at-limit .mytwpt-license__sites-count {
	color: #804D00;
}

/** Domains */

.mytwpt-license__domains {
	margin-top: auto;
}

.mytwpt-domains-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mytwpt-domain-item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px 7px 13px;
	background: var(--twpt-inset);
	border: 1px solid var(--twpt-border);
	border-radius: 999px;
	font-size: 13.5px;
}

.mytwpt-domain-item::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6faf86;
}

.mytwpt-domain-item a {
	font-family: 'JetBrains Mono', Menlo, Consolas, monaco, monospace;
	font-size: 13px;
	color: #26292e;
	word-break: break-all;
}

/* The grid's own empty state, swapped in by remove-license.js when the last card
   goes. Roomier than the per-card one - it stands in for the whole grid. */
.mytwpt-licenses__empty {
	margin: 0;
	padding: 32px 20px;
	border: 1px dashed #cfd1d4;
	border-radius: 12px;
	color: var(--twpt-ink-2);
	text-align: center;
}

.mytwpt-license__empty {
	margin: 0;
	padding: 14px;
	border: 1px dashed #cfd1d4;
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--twpt-ink-2);
	text-align: center;
}

/** Pagination + notices */

.mytwpt-license-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.mytwpt-license-pagination__range {
	font-size: 13px;
	color: #6f7278;
}

.mytwpt-license-pagination__links {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.mytwpt-license-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	border: 1px solid var(--twpt-border);
	border-radius: 9px;
	background: var(--twpt-card);
	color: #45484d;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.mytwpt-license-pagination a.page-numbers:hover,
.mytwpt-license-pagination a.page-numbers:focus-visible {
	background: var(--twpt-inset);
	text-decoration: none;
}

.mytwpt-license-pagination .page-numbers.current {
	background: var(--twpt-accent);
	border-color: var(--twpt-accent);
	color: #fff;
}

.mytwpt-license-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 2px;
	border-color: transparent;
	background: transparent;
	color: var(--twpt-ink-3);
}

.mytwpt-alert {
	border-radius: 16px;
	padding: 26px 24px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.mytwpt-alert--warning {
	background: #fff5e1;
	border: 1px solid #eecb95;
}

.mytwpt-alert__icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: #ffdb9d;
	color: #994b00;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 600;
}

.mytwpt-alert__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.mytwpt-alert__heading {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #663305;
}

.mytwpt-alert__text {
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: #6d523b;
}

.mytwpt-alert__action {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	height: 38px;
	padding: 0 16px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.mytwpt-alert__action:hover,
.mytwpt-alert__action:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-alert__action svg {
	display: block;
}

.mytwpt-alert__heading + .mytwpt-alert__text,
.mytwpt-alert__content > .mytwpt-alert__text:first-child {
	margin-top: 8px;
}

.mytwpt-alert__content > .mytwpt-alert__text:only-child {
	margin-top: 0;
}

.mytwpt-alert--error {
	background: var(--wpex-surface-2);
	color: var(--wpex-red-error);
}

/** ---------------------------------------------------------------------------
 * Import a license dialog.
 * ------------------------------------------------------------------------- */
.mytwpt-import [hidden] {
	display: none;
}

.mytwpt-import {
	width: min(560px, 100% - 40px);
	max-height: calc(100vh - 40px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--wpex-text-2);
	box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
}

.mytwpt-import::backdrop {
	background: rgb(0 0 0 / 50%);
}

.mytwpt-import__inner {
	padding: clamp(24px, 4vmax, 34px);
}

.mytwpt-import__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.mytwpt-import__title {
	margin: 0;
	font-size: 24px;
}

.mytwpt-import__close {
	display: flex;
	padding: 4px;
	margin: -4px -4px 0 0;
	border: 0;
	background: none;
	color: var(--wpex-text-3);
	cursor: pointer;
	line-height: 1;
}

.mytwpt-import__close:hover,
.mytwpt-import__close:focus-visible {
	color: var(--wpex-accent);
}

.mytwpt-import__intro {
	margin: 8px 0 0;
	color: var(--wpex-text-3);
}

.mytwpt-import__message {
	margin-top: 20px;
	padding: 12px 15px;
	border-radius: 8px;
	font-size: .9em;
	background: var(--wpex-surface-2);
}

.mytwpt-import__message[data-type="success"] {
	background: #e0fae4;
	color: #195c2e;
}

.mytwpt-import__message[data-type="warning"] {
	background: #fff5e1;
	color: #824700;
}

.mytwpt-import__message[data-type="error"] {
	background: #ffebe8;
	color: #9b1f1d;
}

/** Switcher */

.mytwpt-import__switcher {
	display: flex;
	gap: 4px;
	margin-top: 24px;
	padding: 4px;
	border-radius: 10px;
	background: var(--wpex-surface-2);
}

.mytwpt-import__tab {
	flex: 1;
	padding: 9px 14px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--wpex-text-3);
	cursor: pointer;
	font-size: .9em;
	font-weight: 500;
	line-height: 1.3;
}

.mytwpt-import__tab.is-active {
	background: #fff;
	color: var(--wpex-text-2);
	box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

/** Panels */

.mytwpt-import__panel {
	margin-top: 24px;
}

.mytwpt-import__label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: .9em;
}

.mytwpt-import__key {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	background: var(--twpt-card);
	font-family: 'JetBrains Mono', Menlo, Consolas, monaco, monospace;
	font-size: 14.5px;
	letter-spacing: 0.03em;
	color: var(--twpt-ink);
	text-transform: uppercase;
}

.mytwpt-import__key:focus {
	outline: none;
	border-color: var(--twpt-accent);
	box-shadow: 0 0 0 3px var(--twpt-ring);
}

.mytwpt-import__register-button,
.mytwpt-import__import-button,
.mytwpt-import__envato-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.mytwpt-import__register-button,
.mytwpt-import__import-button {
	background: var(--twpt-accent);
	border-color: var(--twpt-accent);
	color: #fff;
}

.mytwpt-import__register-button:hover,
.mytwpt-import__register-button:focus-visible,
.mytwpt-import__import-button:hover,
.mytwpt-import__import-button:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-import__register-button {
	margin-top: 15px;
}

.mytwpt-import__loader svg {
	display: block;
}

/** Envato */

.mytwpt-import__panel--envato {
	text-align: center;
}

.mytwpt-import__envato-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--mytwpt-envato);
	border: 1px solid var(--mytwpt-envato-edge);
	color: var(--mytwpt-envato-ink);
}

/* The mark ships as a bare viewBox with no width/height attributes, so without
   an explicit size it falls back to the replaced-element default and bursts out
   of whatever is holding it. */
.mytwpt-import__envato-svg {
	display: block;
	flex: none;
	width: auto;
	height: 26px;
}

.mytwpt-import__envato-button,
.mytwpt-import__envato-button:hover,
.mytwpt-import__envato-button:focus-visible {
	background: var(--mytwpt-envato);
	border-color: var(--mytwpt-envato-edge);
	color: var(--mytwpt-envato-ink);
}

.mytwpt-import__envato-button:hover,
.mytwpt-import__envato-button:focus-visible {
	background: var(--mytwpt-envato-hover);
}

.mytwpt-import__envato-button .mytwpt-import__envato-svg {
	height: 18px;
}

.mytwpt-import__envato-text {
	margin: 16px 0 22px;
	color: var(--wpex-text-3);
}

.mytwpt-import__note {
	margin: 16px 0 0;
	font-size: .8em;
	color: var(--wpex-text-3);
}

@media only screen and (max-width: 480px) {
	.mytwpt-import__switcher {
		flex-direction: column;
	}

	.mytwpt-import__register-button,
	.mytwpt-import__envato-button,
	.mytwpt-import__import-button {
		width: 100%;
	}
}

/** ---------------------------------------------------------------------------
 * Destructive confirmation dialog — replaces the browser confirm() on the
 * license manager's per-domain disconnect. Narrower than the import dialog: it
 * asks one question, so it should not read as a screen.
 * ------------------------------------------------------------------------- */

.mytwpt-confirm {
	width: min(420px, 100% - 40px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--wpex-text-2);
	box-shadow: 0 20px 50px rgba(20, 22, 27, 0.25);
}

.mytwpt-confirm::backdrop {
	background: rgba(20, 22, 27, 0.45);
}

.mytwpt-confirm__inner {
	padding: 26px 24px;
}

.mytwpt-confirm__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: #ffe5e1;
	color: #c53637;
}

.mytwpt-confirm__icon svg {
	display: block;
}

.mytwpt-confirm__title {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wpex-text-1);
}

.mytwpt-confirm__text {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wpex-text-3);
}

/* The license type, named inline so the customer can tell which card they hit. */
.mytwpt-confirm__subject {
	font-weight: 600;
	color: var(--wpex-text-1);
}

/* The domain or key reads as a value, not prose - same monospace treatment the
   license key gets in the card it was removed from. */
.mytwpt-confirm__target {
	font-family: 'JetBrains Mono', Menlo, Consolas, monaco, monospace;
	font-size: 13px;
	color: var(--wpex-text-1);
	overflow-wrap: anywhere;
}

.mytwpt-confirm__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 22px;
}

/* Styled here rather than borrowing .theme-button: these two need to read as a
   matched pair at one size, and the theme's button carries its own padding,
   transform and hover colour that fight that. */
.mytwpt-confirm__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.mytwpt-confirm__cancel {
	background: #fff;
	border: 1px solid #e0e1e5;
	color: #383b40;
}

.mytwpt-confirm__cancel:hover,
.mytwpt-confirm__cancel:focus-visible {
	background: #f4f5f8;
	color: #383b40;
}

.mytwpt-confirm__accept {
	padding: 0 20px;
	background: #c53637;
	border: 1px solid #c53637;
	color: #fff;
}

.mytwpt-confirm__accept:hover,
.mytwpt-confirm__accept:focus-visible {
	background: #ac1922;
	border-color: #ac1922;
	color: #fff;
}

@media only screen and (max-width: 480px) {
	.mytwpt-confirm__actions {
		flex-direction: column-reverse;
	}

	.mytwpt-confirm__button {
		width: 100%;
	}
}

/** ---------------------------------------------------------------------------
 * Customer portal feature requests ([mytwpt_feature_requests]).
 *
 * A vote rail beside a body, per card. The rail is fixed-width and the body
 * flexes, so a card is as tall as its text and the counts still line up down the
 * page. Status pills carry their palette on a --<slug> modifier: the slugs come
 * from MyTwpt\Feature_Request::statuses(), plus `pending`, which is the
 * moderation state (post_status), not a roadmap one.
 * ------------------------------------------------------------------------- */

.mytwpt-features {
	color: var(--twpt-ink);
}

.mytwpt-features [hidden] {
	display: none;
}

/* Maintenance notice sits above the board — space it off the controls below. */
.mytwpt-features > .mytwpt-alert {
	margin-bottom: 30px;
}

/** Header */

.mytwpt-features__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 28px;
}

.mytwpt-features__title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-features__intro {
	max-width: 52ch;
	margin: 8px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--twpt-ink-2);
}

.mytwpt-features__submit-button {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	background: var(--twpt-accent);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}

.mytwpt-features__submit-button:hover,
.mytwpt-features__submit-button:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

/** Filters + sort */

.mytwpt-features__controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.mytwpt-features__filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.mytwpt-features__filter {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--twpt-border);
	border-radius: 999px;
	background: var(--twpt-card);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #383b40;
	text-decoration: none;
}

.mytwpt-features__filter:hover,
.mytwpt-features__filter:focus-visible {
	border-color: var(--twpt-accent);
	color: var(--twpt-accent-hover);
	text-decoration: none;
}

.mytwpt-features__filter.is-active,
.mytwpt-features__filter.is-active:hover,
.mytwpt-features__filter.is-active:focus-visible {
	background: var(--twpt-accent);
	border-color: var(--twpt-accent);
	color: #fff;
}

.mytwpt-features__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.mytwpt-features__sort-label {
	font-size: 12.5px;
	color: #6f7278;
}

.mytwpt-features__sort-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 13px;
	border: 1px solid var(--twpt-border);
	border-radius: 9px;
	background: var(--twpt-card);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #303338;
	text-decoration: none;
}

.mytwpt-features__sort-toggle:hover,
.mytwpt-features__sort-toggle:focus-visible {
	background: var(--twpt-inset);
	color: var(--twpt-ink);
	text-decoration: none;
}

/** Notice (vote failed / request sent) */

.mytwpt-features__notice {
	padding: 12px 15px;
	margin-bottom: 14px;
	border-radius: 10px;
	background: var(--twpt-inset);
	font-size: 13.5px;
	color: var(--twpt-ink-2);
}

.mytwpt-features__notice:empty {
	display: none;
}

/** Cards */

.mytwpt-features__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/** Action notices (added / updated / deleted), between the controls and list */

@keyframes mytwpt-features-notice-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

.mytwpt-features__notice {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	margin-bottom: 14px;
	border: 1px solid var(--twpt-border);
	border-radius: 11px;
	background: var(--twpt-inset);
	color: #74777d;
	animation: mytwpt-features-notice-in 0.18s ease;
}

.mytwpt-features__notice--added,
.mytwpt-features__notice--updated {
	background: #e9f8ef;
	border-color: #bde5cc;
	color: #1e7a49;
}

.mytwpt-features__notice-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.mytwpt-features__notice-text {
	margin: 0;
	flex: 1;
	font-size: 13.5px;
	line-height: 1.5;
	color: #3b3e43;
}

.mytwpt-features__notice-text strong {
	font-weight: 600;
}

.mytwpt-features__card {
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--twpt-border);
	border-radius: 14px;
	background: var(--twpt-card);
	box-shadow: var(--twpt-shadow);
}

/* The customer's own unapproved request, only ever visible to them. Dashed so
   it reads as provisional next to the live cards around it - but still on white,
   like every other card. */
.mytwpt-features__card.is-pending {
	border-style: dashed;
}

.mytwpt-features__vote {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	align-self: flex-start;
	gap: 2px;
	width: 58px;
	height: 75px;
	padding: 8px 0;
	border: 1px solid var(--twpt-border);
	border-radius: 11px;
	background: var(--twpt-card);
	color: #45484d;
	cursor: pointer;
}

/* :not(.is-static) so the read-only render (pending, or no license) shows no
   hover affordance - it isn't clickable. */
.mytwpt-features__vote:not(.is-static):hover,
.mytwpt-features__vote:not(.is-static):focus-visible {
	border-color: var(--twpt-accent);
	color: var(--twpt-accent-hover);
}

.mytwpt-features__vote.is-voted {
	border-color: var(--twpt-accent);
	background: var(--twpt-tint);
	color: var(--twpt-accent-hover);
}

/* The read-only render: a pending request, or a reader with no license. Not a
   button, so it must not offer to be clicked. */
.mytwpt-features__vote.is-static {
	background: var(--twpt-inset);
	color: var(--twpt-ink-3);
	cursor: default;
}

.mytwpt-features__vote[disabled] {
	opacity: 0.7;
}

.mytwpt-features__vote-count {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-features__body {
	flex: 1;
	min-width: 0;
}

.mytwpt-features__card-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.mytwpt-features__card-title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--twpt-ink);
}

.mytwpt-features__card-text {
	margin-top: 7px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--twpt-ink-2);
	/* A pasted paragraph with no spaces would otherwise push the card wide. */
	overflow-wrap: break-word;
}

.mytwpt-features__card-text p {
	margin: 0 0 8px;
}

.mytwpt-features__card-text p:last-child {
	margin-bottom: 0;
}

.mytwpt-features__card-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
	font-size: 12.5px;
	color: #777a80;
}

.mytwpt-features__card-hint {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: #777a80;
	font-style: italic;
}

.mytwpt-features__card-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mytwpt-features__card-edit {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 9px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 7px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--twpt-ink-2);
	cursor: pointer;
}

.mytwpt-features__card-edit:hover,
.mytwpt-features__card-edit:focus-visible {
	border-color: var(--twpt-accent);
	color: var(--twpt-accent-hover);
}

.mytwpt-features__card-delete:hover,
.mytwpt-features__card-delete:focus-visible {
	border-color: var(--twpt-danger);
	color: var(--twpt-danger);
}

.mytwpt-features__card-date {
	margin-left: auto;
}

/** Read more toggle — native <details>, no JS. Lead/rest split in PHP
	(Feature_Requests::split_lead); the lead clamps while collapsed. */

.mytwpt-features__card-lead > p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Expanded: the lead shows in full. */
.mytwpt-features__card-text--collapsible:has(details[open]) .mytwpt-features__card-lead > p {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

/* column-reverse puts the summary (first in the DOM, so the native toggle still
   works) visually below the revealed rest. The :not([open]) rule hides the rest
   explicitly - a <details> styled as a flex container doesn't hide its closed
   content on its own in every engine. */
.mytwpt-features__more {
	display: flex;
	flex-direction: column-reverse;
}

.mytwpt-features__more:not([open]) .mytwpt-features__card-rest {
	display: none;
}

.mytwpt-features__card-rest {
	margin-top: 8px;
}

.mytwpt-features__readmore {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 5px;
	width: fit-content;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--twpt-accent);
	cursor: pointer;
	list-style: none;
}

/* Drop the native disclosure triangle - the chevron below replaces it. */
.mytwpt-features__readmore::-webkit-details-marker {
	display: none;
}

.mytwpt-features__readmore:hover {
	color: var(--twpt-accent-hover);
}

.mytwpt-features__readmore-less {
	display: none;
}

details[open] > .mytwpt-features__readmore .mytwpt-features__readmore-more {
	display: none;
}

details[open] > .mytwpt-features__readmore .mytwpt-features__readmore-less {
	display: inline;
}

.mytwpt-features__readmore-chevron {
	font-size: 11px;
	line-height: 1;
	transition: transform 0.15s ease;
}

details[open] > .mytwpt-features__readmore .mytwpt-features__readmore-chevron {
	transform: rotate(180deg);
}

/** Note from the team */

.mytwpt-features__response {
	margin-top: 12px;
	padding: 11px 13px;
	border-radius: 10px;
	background: var(--twpt-inset);
	border: 1px solid #e7e8ec;
}

.mytwpt-features__response-head {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 5px;
}

.mytwpt-features__response-icon {
	flex-shrink: 0;
	color: var(--twpt-accent);
}

.mytwpt-features__response-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #4a4d52;
}

.mytwpt-features__response-date {
	font-size: 11.5px;
	color: #80838a;
}

.mytwpt-features__response-text {
	font-size: 13px;
	line-height: 1.65;
	color: #3c3f44;
	overflow-wrap: break-word;
}

.mytwpt-features__response-text p {
	margin: 0 0 8px;
}

.mytwpt-features__response-text p:last-child {
	margin-bottom: 0;
}

.mytwpt-features__response-text code {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	padding: 2px 6px;
	margin: 0 1px;
	background: #fff;
	border: 1px solid #dcdde1;
	border-radius: 5px;
	color: var(--twpt-accent-hover);
	white-space: nowrap;
}

/** Status pills */

.mytwpt-features__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
	background: #eef2f9;
	color: #4a4d53;
}

.mytwpt-features__status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.75;
}

.mytwpt-features__status--pending {
	background: #ffe6cf;
	color: #97400d;
}

.mytwpt-features__status--planned {
	background: #deefff;
	color: #3c448d;
}

.mytwpt-features__status--in-progress {
	background: #c9faf9;
	color: #005e78;
}

.mytwpt-features__status--completed {
	background: #daf7e3;
	color: #185b37;
}

.mytwpt-features__status--declined {
	background: #f0f2f5;
	color: #5b5e63;
}

/** Empty state */

.mytwpt-features__empty {
	padding: 48px 24px;
	border: 1px dashed #c9cace;
	border-radius: 14px;
	background: var(--twpt-card);
	text-align: center;
}

.mytwpt-features__empty-title {
	font-size: 15px;
	font-weight: 500;
	color: #2b2e33;
}

.mytwpt-features__empty-text {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: var(--twpt-ink-2);
}

/** Pagination */

.mytwpt-features__pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.mytwpt-features__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--twpt-border);
	border-radius: 9px;
	background: var(--twpt-card);
	font-size: 13.5px;
	color: var(--twpt-ink-2);
	text-decoration: none;
}

.mytwpt-features__pagination .page-numbers:hover,
.mytwpt-features__pagination .page-numbers:focus-visible {
	border-color: var(--twpt-accent);
	color: var(--twpt-accent-hover);
	text-decoration: none;
}

.mytwpt-features__pagination .page-numbers.current {
	background: var(--twpt-accent);
	border-color: var(--twpt-accent);
	color: #fff;
}

.mytwpt-features__pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/** No-license gate */

.mytwpt-features__gate {
	padding: 32px 24px;
	margin-top: 20px;
	border: 1px solid var(--twpt-border);
	border-radius: 14px;
	background: var(--twpt-card);
	text-align: center;
}

.mytwpt-features__gate-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--twpt-tint);
	color: var(--twpt-accent);
}

.mytwpt-features__gate-title {
	margin: 14px 0 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-features__gate-text {
	max-width: 56ch;
	margin: 8px auto 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--twpt-ink-2);
}

.mytwpt-features__gate-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.mytwpt-features__gate-import,
.mytwpt-features__gate-buy {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.mytwpt-features__gate-import {
	border: 1px solid var(--twpt-accent);
	background: var(--twpt-accent);
	color: #fff;
	text-decoration: none;
}

.mytwpt-features__gate-import:hover,
.mytwpt-features__gate-import:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-features__gate-buy {
	border: 1px solid var(--twpt-border);
	background: var(--twpt-card);
	color: #383b40;
}

.mytwpt-features__gate-buy:hover,
.mytwpt-features__gate-buy:focus-visible {
	background: var(--twpt-inset);
	color: var(--twpt-ink);
	text-decoration: none;
}

/** Submit dialog */

.mytwpt-features__dialog {
	width: min(520px, 100% - 40px);
	max-height: calc(100vh - 40px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--twpt-ink);
	box-shadow: 0 20px 50px rgba(20, 22, 27, 0.25);
}

.mytwpt-features__dialog::backdrop {
	background: rgba(20, 22, 27, 0.45);
}

.mytwpt-features__dialog [hidden] {
	display: none;
}

.mytwpt-features__dialog-inner {
	padding: clamp(22px, 4vmax, 26px) 24px;
}

.mytwpt-features__dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.mytwpt-features__dialog-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mytwpt-features__dialog-close {
	display: flex;
	padding: 4px;
	margin: -4px -4px 0 0;
	border: 0;
	background: none;
	color: var(--twpt-ink-3);
	cursor: pointer;
	line-height: 1;
}

.mytwpt-features__dialog-close:hover,
.mytwpt-features__dialog-close:focus-visible {
	color: var(--twpt-accent);
}

.mytwpt-features__dialog-intro {
	margin: 7px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--twpt-ink-2);
}

.mytwpt-features__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 20px;
}

.mytwpt-features__label {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--twpt-ink-2);
}

.mytwpt-features__req {
	color: var(--twpt-accent);
}

.mytwpt-features__input,
.mytwpt-features__select,
.mytwpt-features__textarea {
	width: 100%;
	padding: 0 14px;
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--twpt-ink);
}

.mytwpt-features__input,
.mytwpt-features__select {
	height: 46px;
}

/* Drop the native arrow (which sits tight against the border and differs per
   browser) for our own chevron, inset from the edge with room to breathe. The
   extra right padding keeps a long option label off the arrow. */
.mytwpt-features__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6f7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

/* IE/legacy Edge only - hides their built-in arrow, which ignores appearance. */
.mytwpt-features__select::-ms-expand {
	display: none;
}

.mytwpt-features__textarea {
	min-height: 110px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.mytwpt-features__input:focus,
.mytwpt-features__select:focus,
.mytwpt-features__textarea:focus {
	outline: 0;
	border-color: var(--twpt-accent);
	box-shadow: 0 0 0 3px var(--twpt-ring);
}

.mytwpt-features__check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--twpt-ink-2);
	cursor: pointer;
}

.mytwpt-features__check input {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--twpt-accent);
	cursor: pointer;
}

.mytwpt-features__form-error {
	font-size: 13px;
	color: var(--twpt-danger);
}

.mytwpt-features__form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 6px;
}

.mytwpt-features__cancel,
.mytwpt-features__form-submit {
	height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
}

.mytwpt-features__cancel {
	border: 1px solid var(--twpt-border);
	background: #fff;
	color: #383b40;
}

.mytwpt-features__cancel:hover,
.mytwpt-features__cancel:focus-visible {
	background: var(--twpt-inset);
}

.mytwpt-features__form-submit {
	padding: 0 20px;
	border: 1px solid var(--twpt-accent);
	background: var(--twpt-accent);
	color: #fff;
}

.mytwpt-features__form-submit:hover,
.mytwpt-features__form-submit:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
}

.mytwpt-features__form-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

@media only screen and (max-width: 768px) {
	.mytwpt-features__submit-button {
		width: 100%;
		justify-content: center;
	}

	.mytwpt-features__sort {
		margin-left: 0;
	}
}

@media only screen and (max-width: 560px) {
	/* The rail becomes a row above the body: at this width a 58px column plus
	   text leaves the title wrapping every other word. */
	.mytwpt-features__card {
		flex-direction: column;
		gap: 12px;
	}

	.mytwpt-features__vote {
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		width: auto;
		align-self: flex-start;
		padding: 6px 14px;
	}

	.mytwpt-features__card-meta {
		flex-wrap: wrap;
		gap: 8px;
	}

	.mytwpt-features__card-date {
		margin-left: 0;
	}

	.mytwpt-features__form-actions {
		flex-direction: column-reverse;
	}

	.mytwpt-features__cancel,
	.mytwpt-features__form-submit {
		width: 100%;
	}
}

/** ---------------------------------------------------------------------------
 * Report a bug — [mytwpt_bug_report].
 *
 * Rendered by MyTwpt\Bug_Report. Shares the portal tokens and borrows the
 * support form's dropzone/attachment treatment, but keeps its own class prefix so
 * the two forms can diverge. Sections are cards on the portal's 880px column;
 * unlike the wp-admin screens this one is responsive, since customers reach it
 * from phones.
 * ------------------------------------------------------------------------- */

.mytwpt-bug-report {
	max-width: 880px;
	margin: 0 auto;
	color: var(--twpt-ink);
}

.mytwpt-bug-report [hidden] {
	display: none;
}

/* Intro */

.mytwpt-bug-report__intro {
	margin-bottom: 24px;
}

.mytwpt-bug-report__title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-bug-report__text {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--twpt-ink-2);
}

.mytwpt-bug-report__text--muted {
	font-size: 13.5px;
	color: var(--twpt-ink-3);
}

/* Form */

.mytwpt-bug-report__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mytwpt-bug-report__section {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
}

.mytwpt-bug-report__section-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* The section title and the note under it belong together, so the flex gap
   between them is collapsed rather than matching the field spacing. */
.mytwpt-bug-report__section-title + .mytwpt-bug-report__hint--section {
	margin-top: -12px;
}

.mytwpt-bug-report__fields {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.mytwpt-bug-report__fields .mytwpt-bug-report__field {
	flex: 1;
	min-width: 220px;
}

.mytwpt-bug-report__fields--three .mytwpt-bug-report__field {
	min-width: 160px;
}

.mytwpt-bug-report__label {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--twpt-ink-2);
}

.mytwpt-bug-report__req {
	color: var(--twpt-accent);
}

.mytwpt-bug-report__hint {
	margin: 7px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--twpt-ink-3);
}

.mytwpt-bug-report__input,
.mytwpt-bug-report__select {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	font-size: 14.5px;
	color: var(--twpt-ink);
}

.mytwpt-bug-report__textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--twpt-ink);
	resize: vertical;
}

.mytwpt-bug-report__input:focus,
.mytwpt-bug-report__select:focus,
.mytwpt-bug-report__textarea:focus {
	outline: none;
	border-color: var(--twpt-accent);
	box-shadow: 0 0 0 3px var(--twpt-ring);
}

/* Attachments */

.mytwpt-bug-report label.mytwpt-bug-report__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 20px;
	border: 1px dashed #c9cace;
	border-radius: 10px;
	background: var(--twpt-card);
	text-align: center;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--twpt-ink-2);
	margin-block-end: 0;
	transition: border-color .15s ease-in-out, color .15s ease-in-out;
}

.mytwpt-bug-report label.mytwpt-bug-report__dropzone:hover,
.mytwpt-bug-report label.mytwpt-bug-report__dropzone.is-dragover {
	border-color: var(--twpt-accent);
	color: #45484d;
}

.mytwpt-bug-report__file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mytwpt-bug-report label.mytwpt-bug-report__dropzone:has(.mytwpt-bug-report__file-input:focus-visible) {
	outline: 2px solid var(--twpt-accent);
	outline-offset: 2px;
}

.mytwpt-bug-report__dropzone-icon {
	color: var(--twpt-ink-3);
	line-height: 0;
}

.mytwpt-bug-report__dropzone-title {
	font-weight: 600;
	font-size: 12px;
}

.mytwpt-bug-report__dropzone-hint {
	font-size: 11.5px;
	color: #56575D;
}

.mytwpt-bug-report__attachments-error {
	font-size: 12.5px;
	color: var(--twpt-danger);
}

.mytwpt-bug-report__attachments-preview {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Empty until a file is picked; the section gap would otherwise leave a hole. */
.mytwpt-bug-report__attachments-preview:empty {
	display: none;
}

/* Asymmetric padding: the thumbnail's own edge reads as inset, so it needs less
   room on the left than the button does on the right. */
.mytwpt-bug-report__attachment {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 10px 9px 12px;
	background: var(--twpt-inset);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
}

.mytwpt-bug-report__attachment-thumb {
	flex: none;
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--twpt-tint);
}

.mytwpt-bug-report__attachment-meta {
	flex: 1;
	min-width: 0;
}

.mytwpt-bug-report__attachment-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 500;
	color: #26292e;
}

.mytwpt-bug-report__attachment-size {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	color: #777a80;
}

.mytwpt-bug-report__attachment-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: 17px;
	line-height: 1;
	color: #6f7278;
	cursor: pointer;
}

.mytwpt-bug-report__attachment-remove:hover,
.mytwpt-bug-report__attachment-remove:focus-visible {
	background: var(--twpt-danger-tint);
	color: var(--twpt-danger);
}

/* Consent */

.mytwpt-bug-report label.mytwpt-bug-report__consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-block-end: 0;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* Native control tinted with accent-color: at 17px the platform checkbox is the
   clearer of the two. */
.mytwpt-bug-report input.mytwpt-bug-report__consent-input {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	accent-color: var(--twpt-accent);
	cursor: pointer;
}

.mytwpt-bug-report input.mytwpt-bug-report__consent-input:focus-visible {
	outline: 2px solid var(--twpt-accent);
	outline-offset: 2px;
}

/* The two checkboxes are one group, so they sit tighter than the section's own
   18px gap between unrelated blocks. */
.mytwpt-bug-report__consent + .mytwpt-bug-report__consent {
	margin-top: -6px;
}

.mytwpt-bug-report__consent-text {
	font-size: 13.5px;
	line-height: 1.5;
	color: #4a4d53;
}

/* Errors + actions */

.mytwpt-bug-report__errors {
	padding: 12px 14px;
	background: var(--twpt-danger-tint);
	border: 1px solid var(--twpt-danger);
	border-radius: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #8f2422;
}

.mytwpt-bug-report__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.mytwpt-bug-report__submit {
	height: 46px;
	padding: 0 24px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.mytwpt-bug-report__submit:hover,
.mytwpt-bug-report__submit:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-bug-report__submit:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.mytwpt-bug-report__note {
	font-size: 12.5px;
	color: var(--twpt-ink-3);
}

/* Success */

.mytwpt-bug-report__success {
	max-width: 520px;
	margin: 20px auto 0;
	padding: 40px 36px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 16px;
	box-shadow: var(--twpt-shadow);
	text-align: center;
}

.mytwpt-bug-report__success:focus {
	outline: none;
}

.mytwpt-bug-report__success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: #e4f7ea;
	color: #1c8a45;
	font-size: 26px;
	line-height: 1;
}

.mytwpt-bug-report__success-title {
	margin: 0;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mytwpt-bug-report__success-text {
	margin: 10px 0 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--twpt-ink-2);
}

.mytwpt-bug-report__success-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.mytwpt-bug-report__reset {
	height: 44px;
	padding: 0 22px;
	background: var(--twpt-accent);
	border: 1px solid var(--twpt-accent);
	border-radius: 10px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
}

.mytwpt-bug-report__reset:hover,
.mytwpt-bug-report__reset:focus-visible {
	background: var(--twpt-accent-hover);
	border-color: var(--twpt-accent-hover);
	color: #fff;
}

.mytwpt-bug-report__success-link {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	background: var(--twpt-card);
	border: 1px solid var(--twpt-border);
	border-radius: 10px;
	color: #383b40;
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
}

.mytwpt-bug-report__success-link:hover,
.mytwpt-bug-report__success-link:focus-visible {
	background: var(--twpt-inset);
	color: #383b40;
	text-decoration: none;
}

/* Code-notice dialog */

.mytwpt-bug-report__dialog-title {
	margin: 0 0 15px;
}

.mytwpt-bug-report__dialog-text {
	margin-block-end: 20px;
}

.mytwpt-bug-report__dialog-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

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

	.mytwpt-bug-report__section {
		padding: 20px 16px;
	}

	.mytwpt-bug-report__title {
		font-size: 22px;
	}

	.mytwpt-bug-report__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.mytwpt-bug-report__submit {
		width: 100%;
	}

	.mytwpt-bug-report__success {
		padding: 32px 20px;
	}

	.mytwpt-bug-report__reset,
	.mytwpt-bug-report__success-link {
		width: 100%;
		justify-content: center;
	}
}

/* Legal Page */
.legal-page__content {
    background: #fff;
    border: 1px solid #e5e5e8;
    border-radius: 16px;
    padding: 38px 40px;
    box-shadow: 0 1px 2px rgba(115, 116, 125, 0.04);
}

.legal-page__content > header {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #eaeaed;
}

.legal-page__content h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.legal-page__updated {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12.5px;
    color: #53535A;
}

.legal-page__updated::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.legal-page__text h2 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.012em;
    scroll-margin-top: 84px;
}

.legal-page__text h2:not(:first-child) {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid #eaeaed;
}

.legal-page__text h3 {
    margin: 22px 0 8px;
    font-size: 15.5px;
    font-weight: 600;
    color: #3f4046;
}

.legal-page__text p,
.legal-page__text li {
    font-size: 14.5px;
    line-height: 1.72;
    color: #5b5c64;
    text-wrap: pretty;
}

.legal-page__text p {
    margin: 0 0 14px;
}

.legal-page__text > *:last-child {
    margin-bottom: 0;
}

.legal-page__text ul,
.legal-page__text ol {
    margin: 0 0 14px;
    padding-left: 20px;
}

.legal-page__text li {
    margin-bottom: 7px;
    line-height: 1.65;
}

.legal-page__text a {
    color: #1700ff;
    text-decoration: none;
}

.legal-page__text a:hover {
    color: #1200cc;
    text-decoration: underline;
}

.legal-page__text hr {
    border: none;
    border-top: 1px solid #eaeaed;
    margin: 28px 0;
}

.legal-page__text blockquote {
    margin: 0 0 14px;
    padding: 13px 16px;
    background: #f7f7f9;
    border-left: 3px solid #dedee2;
    border-radius: 0 9px 9px 0;
}

.legal-page__text blockquote p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #62636b;
}

.legal-page__text code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    padding: 2px 6px;
    background: #f7f7f9;
    border: 1px solid #e5e5e8;
    border-radius: 5px;
    color: #1200cc;
}

.legal-page .just-cookies-open-prefs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: baseline;
    margin: 0 1px;
    padding: 3px 10px;
    background: #f7f7f9;
    border: 1px solid #e5e5e8;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: #47484f;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.legal-page .just-cookies-open-prefs::before {
    content: "";
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 2a9.5 9.5 0 1 0 9.5 9.5 4 4 0 0 1-5-5 4 4 0 0 1-4.5-4.5z'/%3E%3Cpath d='M8.5 10h.01M15 14h.01M10 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 2a9.5 9.5 0 1 0 9.5 9.5 4 4 0 0 1-5-5 4 4 0 0 1-4.5-4.5z'/%3E%3Cpath d='M8.5 10h.01M15 14h.01M10 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.legal-page .just-cookies-open-prefs:hover {
    background: #fff;
    border-color: #d2d2d7;
    color: #1700ff;
}

.legal-page .just-cookies-open-prefs:focus-visible {
    outline: 2px solid #1700ff;
    outline-offset: 2px;
}

.legal-page__text table {
    width: 100%;
    margin: 0 0 14px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #eaeaed;
    border-radius: 11px;
    overflow: hidden;
    font-size: 14px;
}

.legal-page__text thead {
	background: none;
	color: inherit;
}

.legal-page__text thead th {
    background: #f7f7f9;
    padding: 9px 14px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #53535A;
	border: 0;
    border-bottom: 1px solid #eaeaed;
}

.legal-page__text tbody td {
    padding: 11px 14px;
    color: #5b5c64;
    line-height: 1.6;
	border: 0;
    border-bottom: 1px solid #f0f0f2;
    vertical-align: top;
}

.legal-page__text tbody tr:last-child td {
    border-bottom: none;
}

.legal-page__text tbody td:first-child {
    font-weight: 500;
    color: #3a3b41;
    white-space: nowrap;
}

.legal-page__text table caption {
    caption-side: bottom;
    padding-top: 9px;
    font-size: 12.5px;
    color: #85868e;
    text-align: left;
}

.legal-page__text .wp-block-table {
    overflow-x: auto;
}

@media (max-width: 860px) {
    .legal-page__content {
        padding: 26px 22px;
    }

    .legal-page__content h1 {
        font-size: 25px;
    }
}

/* Cookie floating button */
body > .just-cookies-open-prefs {
    height: 40px;
    margin: 0;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #dcdce0;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(96, 97, 106, 0.12);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    color: #47484f;
    cursor: pointer;
    transition: border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

body > .just-cookies-open-prefs::before {
    content: none;
}

body > .just-cookies-open-prefs svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

body > .just-cookies-open-prefs:hover {
    background: #fff;
    border-color: #c3c3ca;
    color: #1700ff;
    box-shadow: 0 6px 20px rgba(96, 97, 106, 0.18);
}

body > .just-cookies-open-prefs:focus-visible {
    outline: 2px solid #1700ff;
    outline-offset: 2px;
}