/*
 * ThatWorx Local Launch — Client Dashboard styles.
 *
 * Loaded only on pages using the Client Dashboard template.
 * Completely standalone — does not depend on main.css.
 *
 * Layers:
 *   1. Reset & tokens
 *   2. Layout shell
 *   3. Sidebar
 *   4. Top bar
 *   5. Content area
 *   6. Login screen
 *   7. Cards & forms
 *   8. Buttons
 *   9. Notices
 *  10. Logo upload
 *  11. Responsive
 */

/* -------------------------------------------------------------------
 * 1. Reset & tokens
 * ---------------------------------------------------------------- */

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

.twx-ll-dashboard-page {
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #1a2332;
	background: #f0f2f5;
	-webkit-font-smoothing: antialiased;
}

/* Token aliases for the dashboard. */
.twx-ll-dashboard-page {
	--db-navy:        #0d1f3c;
	--db-navy-2:      #132748;
	--db-teal:        #00a8a8;
	--db-teal-dark:   #008b8b;
	--db-white:       #ffffff;
	--db-light:       #f0f2f5;
	--db-border:      #e1e5eb;
	--db-text:        #1a2332;
	--db-text-muted:  #5a6678;
	--db-sidebar-w:   260px;
	--db-topbar-h:    60px;
	--db-radius:      8px;
	--db-radius-sm:   5px;
	--db-shadow:      0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--db-shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10);
}

/* -------------------------------------------------------------------
 * 2. Layout shell
 * ---------------------------------------------------------------- */

.twx-ll-db {
	display: flex;
	min-height: 100vh;
}

.twx-ll-db__sidebar {
	width: var(--db-sidebar-w);
	background: var(--db-navy);
	flex-shrink: 0;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	overflow-y: auto;
	z-index: 100;
}

.twx-ll-db__main {
	flex: 1;
	margin-left: var(--db-sidebar-w);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* -------------------------------------------------------------------
 * 3. Sidebar
 * ---------------------------------------------------------------- */

.twx-ll-db__sidebar-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
}

/* Brand area */
.twx-ll-db-sidebar__brand {
	padding: 24px 20px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.twx-ll-db-sidebar__logo {
	display: block;
	max-height: 48px;
	max-width: 140px;
	width: auto;
	height: auto;
	filter: brightness(0) invert(1);
}

.twx-ll-db-sidebar__logo-link {
	display: inline-block;
}

.twx-ll-db-sidebar__name {
	display: block;
	color: var(--db-white);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.twx-ll-db-sidebar__name:hover {
	color: var(--db-teal);
}

/* Nav */
.twx-ll-db-sidebar__nav {
	flex: 1;
	padding: 16px 0;
}

.twx-ll-db-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.twx-ll-db-sidebar__item {
	position: relative;
}

.twx-ll-db-sidebar__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	color: rgba(255, 255, 255, 0.65);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.twx-ll-db-sidebar__link:hover {
	color: var(--db-white);
	background: rgba(255, 255, 255, 0.06);
}

.twx-ll-db-sidebar__item--active .twx-ll-db-sidebar__link {
	color: var(--db-white);
	background: rgba(0, 168, 168, 0.12);
	border-left-color: var(--db-teal);
}

.twx-ll-db-sidebar__item--locked .twx-ll-db-sidebar__link {
	opacity: 0.45;
	cursor: default;
}

.twx-ll-db-sidebar__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.twx-ll-db-sidebar__icon svg {
	width: 100%;
	height: 100%;
}

.twx-ll-db-sidebar__lock {
	margin-left: auto;
	width: 14px;
	height: 14px;
	opacity: 0.5;
}

.twx-ll-db-sidebar__lock svg {
	width: 100%;
	height: 100%;
}

.twx-ll-db-sidebar__tier-badge {
	display: block;
	font-size: 0.67rem;
	color: var(--db-teal);
	padding: 0 20px 8px 48px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: -4px;
}

/* Footer */
.twx-ll-db-sidebar__footer {
	padding: 16px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.twx-ll-db-sidebar__tier {
	margin-bottom: 12px;
}

.twx-ll-db-sidebar__tier-label {
	display: block;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2px;
}

.twx-ll-db-sidebar__tier-name {
	display: block;
	font-size: 0.85rem;
	color: var(--db-white);
	font-weight: 600;
}

.twx-ll-db-sidebar__signout {
	display: flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.82rem;
	text-decoration: none;
	transition: color 0.15s;
}

.twx-ll-db-sidebar__signout svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.twx-ll-db-sidebar__signout:hover {
	color: var(--db-white);
}

/* -------------------------------------------------------------------
 * 4. Top bar
 * ---------------------------------------------------------------- */

.twx-ll-db__topbar {
	height: var(--db-topbar-h);
	background: var(--db-white);
	border-bottom: 1px solid var(--db-border);
	position: sticky;
	top: 0;
	z-index: 50;
}

.twx-ll-db__topbar-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28px;
}

.twx-ll-db__topbar-title {
	font-weight: 600;
	font-size: 1rem;
	color: var(--db-text);
}

.twx-ll-db__topbar-user {
	font-size: 0.85rem;
	color: var(--db-text-muted);
}

/* -------------------------------------------------------------------
 * 5. Content area
 * ---------------------------------------------------------------- */

.twx-ll-db__content {
	flex: 1;
	padding: 28px;
	max-width: 820px;
}

/* -------------------------------------------------------------------
 * 6. Login screen
 * ---------------------------------------------------------------- */

.twx-ll-db-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 2rem 1rem;
	background:
		radial-gradient(120% 100% at 60% 0%, rgba(0, 168, 168, 0.18), transparent 55%),
		linear-gradient(160deg, var(--db-navy-2) 0%, var(--db-navy) 100%);
}

.twx-ll-db-login__card {
	background: var(--db-white);
	border-radius: 14px;
	box-shadow: var(--db-shadow-md);
	padding: 40px 40px 32px;
	width: 100%;
	max-width: 420px;
}

.twx-ll-db-login__brand {
	text-align: center;
	margin-bottom: 28px;
}

.twx-ll-db-login__logo {
	max-height: 56px;
	max-width: 160px;
	width: auto;
	height: auto;
	display: inline-block;
	margin-bottom: 8px;
}

.twx-ll-db-login__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: linear-gradient(135deg, var(--db-teal) 0%, var(--db-teal-dark) 100%);
	border-radius: 12px;
	margin-bottom: 10px;
}

.twx-ll-db-login__mark svg {
	width: 28px;
	height: 28px;
	color: var(--db-white);
}

.twx-ll-db-login__site-name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--db-text-muted);
	margin: 0;
}

.twx-ll-db-login__heading {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--db-text);
	margin: 0 0 6px;
	text-align: center;
}

.twx-ll-db-login__sub {
	font-size: 0.88rem;
	color: var(--db-text-muted);
	margin: 0 0 24px;
	text-align: center;
}

.twx-ll-db-login__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.twx-ll-db-login__reset {
	text-align: center;
	margin: 16px 0 0;
	font-size: 0.82rem;
}

.twx-ll-db-login__reset a {
	color: var(--db-teal-dark);
	text-decoration: none;
}

.twx-ll-db-login__reset a:hover {
	text-decoration: underline;
}

.twx-ll-db-login__footer {
	margin-top: 24px;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
}

.twx-ll-db-login__footer a {
	color: rgba(255, 255, 255, 0.65);
}

/* -------------------------------------------------------------------
 * 7. Cards & forms
 * ---------------------------------------------------------------- */

.twx-ll-db-section__header {
	margin-bottom: 20px;
}

.twx-ll-db-section__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: var(--db-text);
}

.twx-ll-db-section__desc {
	font-size: 0.87rem;
	color: var(--db-text-muted);
	margin: 0;
}

.twx-ll-db-card {
	background: var(--db-white);
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow);
	padding: 24px;
	margin-bottom: 20px;
}

.twx-ll-db-card__title {
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--db-text);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--db-border);
}

.twx-ll-db-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.twx-ll-db-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.twx-ll-db-field--full {
	grid-column: 1 / -1;
}

.twx-ll-db-field--check {
	flex-direction: row;
	align-items: center;
	gap: 8px;
}

.twx-ll-db-label {
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--db-text);
}

.twx-ll-db-check-label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.88rem;
	color: var(--db-text);
	cursor: pointer;
}

.twx-ll-db-input {
	padding: 9px 12px;
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius-sm);
	font-size: 0.9rem;
	color: var(--db-text);
	background: var(--db-white);
	transition: border-color 0.15s, box-shadow 0.15s;
	width: 100%;
	font-family: inherit;
}

.twx-ll-db-input:focus {
	outline: none;
	border-color: var(--db-teal);
	box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.15);
}

.twx-ll-db-input--textarea {
	resize: vertical;
	min-height: 72px;
}

.twx-ll-db-form__actions {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

/* -------------------------------------------------------------------
 * 8. Buttons
 * ---------------------------------------------------------------- */

.twx-ll-db-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 20px;
	border-radius: var(--db-radius-sm);
	font-size: 0.9rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-decoration: none;
	border: 2px solid transparent;
	transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
	line-height: 1;
}

.twx-ll-db-btn--primary {
	background: var(--db-teal);
	color: var(--db-white);
	border-color: var(--db-teal);
}

.twx-ll-db-btn--primary:hover {
	background: var(--db-teal-dark);
	border-color: var(--db-teal-dark);
}

.twx-ll-db-btn--secondary {
	background: var(--db-white);
	color: var(--db-teal-dark);
	border-color: var(--db-border);
}

.twx-ll-db-btn--secondary:hover {
	border-color: var(--db-teal);
	color: var(--db-teal);
}

.twx-ll-db-btn--ghost {
	background: transparent;
	color: var(--db-text-muted);
	border-color: transparent;
}

.twx-ll-db-btn--ghost:hover {
	color: #c0392b;
}

.twx-ll-db-btn--full {
	width: 100%;
}

/* -------------------------------------------------------------------
 * 9. Notices
 * ---------------------------------------------------------------- */

.twx-ll-db-notice {
	padding: 12px 16px;
	border-radius: var(--db-radius-sm);
	font-size: 0.88rem;
	font-weight: 500;
	margin-bottom: 20px;
}

.twx-ll-db-notice--success {
	background: #e6f9f3;
	color: #116045;
	border: 1px solid #a3e3cc;
}

.twx-ll-db-notice--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	margin-bottom: 16px;
}

/* -------------------------------------------------------------------
 * 10. Logo upload
 * ---------------------------------------------------------------- */

.twx-ll-db-logo-upload {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.twx-ll-db-logo-upload__preview {
	width: 140px;
	height: 80px;
	flex-shrink: 0;
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--db-light);
	overflow: hidden;
}

.twx-ll-db-logo-upload__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
}

.twx-ll-db-logo-upload__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--db-text-muted);
	text-align: center;
	padding: 8px;
}

.twx-ll-db-logo-upload__placeholder svg {
	width: 24px;
	height: 24px;
	opacity: 0.5;
}

.twx-ll-db-logo-upload__placeholder span {
	font-size: 0.72rem;
	line-height: 1.3;
}

.twx-ll-db-logo-upload__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

/* -------------------------------------------------------------------
 * 11. Appearance section
 * ---------------------------------------------------------------- */

/* Live preview strip */
.twx-ll-db-appearance-preview {
	background: var(--db-white);
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow);
	overflow: hidden;
	margin-bottom: 20px;
}

.twx-ll-db-appearance-preview__label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--db-text-muted);
	padding: 10px 16px 6px;
	border-bottom: 1px solid var(--db-border);
}

.twx-ll-db-appearance-preview__bar {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	transition: background 0.2s;
}

.twx-ll-db-appearance-preview__site-name {
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
}

.twx-ll-db-appearance-preview__body {
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.twx-ll-db-appearance-preview__heading {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--db-text);
	transition: font-family 0.2s;
}

.twx-ll-db-appearance-preview__btn {
	display: inline-block;
	padding: 8px 18px;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	border: none;
	cursor: default;
	transition: background 0.2s, border-radius 0.2s;
	white-space: nowrap;
}

/* Color field with picker + text input */
.twx-ll-db-color-field {
	display: flex;
	align-items: center;
	gap: 8px;
}

.twx-ll-db-color-picker {
	width: 40px;
	height: 36px;
	padding: 2px;
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius-sm);
	cursor: pointer;
	background: none;
	flex-shrink: 0;
}

.twx-ll-db-color-text {
	padding: 8px 10px;
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius-sm);
	font-size: 0.88rem;
	font-family: monospace;
	color: var(--db-text);
	width: 100px;
}

.twx-ll-db-color-text:focus {
	outline: none;
	border-color: var(--db-teal);
	box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.15);
}

.twx-ll-db-label__hint {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--db-text-muted);
	margin-top: 1px;
}

/* Option cards (font style + button style) */
.twx-ll-db-option-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
}

.twx-ll-db-option-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 10px;
	border: 2px solid var(--db-border);
	border-radius: var(--db-radius);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s, background 0.15s;
	background: var(--db-white);
}

.twx-ll-db-option-card:hover {
	border-color: var(--db-teal);
	background: rgba(0, 168, 168, 0.03);
}

.twx-ll-db-option-card--selected {
	border-color: var(--db-teal);
	background: rgba(0, 168, 168, 0.06);
}

.twx-ll-db-option-card__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.twx-ll-db-option-card__name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--db-text);
}

.twx-ll-db-option-card__desc {
	font-size: 0.72rem;
	color: var(--db-text-muted);
	line-height: 1.3;
}

.twx-ll-db-option-card__btn-preview {
	display: inline-block;
	padding: 7px 14px;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	transition: border-radius 0.2s, background 0.2s;
}

.twx-ll-db-form__note {
	font-size: 0.78rem;
	color: var(--db-text-muted);
	margin: 0;
	align-self: center;
}

/* Upgrade gate */
.twx-ll-db-upgrade-gate {
	text-align: center;
	padding: 48px 24px;
	background: var(--db-white);
	border: 1px solid var(--db-border);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow);
}

.twx-ll-db-upgrade-gate__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--db-light);
	border-radius: 50%;
	margin-bottom: 16px;
}

.twx-ll-db-upgrade-gate__icon svg {
	width: 26px;
	height: 26px;
	color: var(--db-text-muted);
}

.twx-ll-db-upgrade-gate__title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--db-text);
	margin: 0 0 8px;
}

.twx-ll-db-upgrade-gate__desc {
	font-size: 0.88rem;
	color: var(--db-text-muted);
	margin: 0 0 20px;
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------
 * 12. Responsive
 * ---------------------------------------------------------------- */

@media ( max-width: 768px ) {
	.twx-ll-db__sidebar {
		width: 100%;
		height: auto;
		position: static;
		bottom: auto;
	}

	.twx-ll-db {
		flex-direction: column;
	}

	.twx-ll-db__main {
		margin-left: 0;
	}

	.twx-ll-db-login__card {
		padding: 28px 20px 24px;
	}

	.twx-ll-db-form__grid {
		grid-template-columns: 1fr;
	}

	.twx-ll-db-logo-upload {
		flex-direction: column;
	}

	.twx-ll-db__content {
		padding: 20px 16px;
	}
}

/* ── Content section ────────────────────────────────────────────────────── */

.twx-ll-db-section__block {
	background: var(--db-surface, #fff);
	border: 1px solid var(--db-border, #e5e9f0);
	border-radius: 10px;
	padding: 24px;
	margin-bottom: 24px;
}

.twx-ll-db-section__block-header {
	margin-bottom: 20px;
}

.twx-ll-db-section__block-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--db-text-dark, #061b33);
	margin: 0 0 4px;
}

.twx-ll-db-section__block-hint {
	font-size: 0.8125rem;
	color: var(--db-text-muted, #7a8aa0);
	margin: 0;
}

/* Services rows */
.twx-ll-content-services__row {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--db-border, #e5e9f0);
}

.twx-ll-content-services__row:first-child {
	border-top: none;
	padding-top: 0;
}

/* Testimonials rows */
.twx-ll-content-testimonials__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--db-border, #e5e9f0);
}

.twx-ll-content-testimonials__row:first-child {
	border-top: none;
	padding-top: 0;
}

.twx-ll-content-testimonials__row .twx-ll-field--full {
	grid-column: 1 / -1;
}

/* Gallery grid */
.twx-ll-content-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px;
}

.twx-ll-content-gallery__item {
	position: relative;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--db-surface-alt, #f4f6f9);
}

.twx-ll-content-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.twx-ll-content-gallery__remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 0;
	opacity: 0;
	transition: opacity 0.15s;
}

.twx-ll-content-gallery__item:hover .twx-ll-content-gallery__remove,
.twx-ll-content-gallery__item:focus-within .twx-ll-content-gallery__remove {
	opacity: 1;
}

.twx-ll-content-gallery__remove svg {
	width: 12px;
	height: 12px;
}

.twx-ll-content-gallery__add {
	aspect-ratio: 1;
	border: 2px dashed var(--db-border, #e5e9f0);
	border-radius: 8px;
	background: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--db-text-muted, #7a8aa0);
	font-size: 0.75rem;
	font-weight: 500;
	transition: border-color 0.15s, color 0.15s;
}

.twx-ll-content-gallery__add:hover {
	border-color: var(--db-accent, #00a8a8);
	color: var(--db-accent, #00a8a8);
}

.twx-ll-content-gallery__add svg {
	width: 22px;
	height: 22px;
}

/* Pricing card description */
.twx-ll-lp-plan__description {
	font-size: 0.85rem;
	color: var(--twx-color-text-muted, #7a8aa0);
	margin: 4px 0 0;
	line-height: 1.45;
}

.twx-ll-lp-plan--popular .twx-ll-lp-plan__description {
	color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   Custom on-brand image uploader (replaces wp.media modal)
   ============================================================ */
.twx-ll-uploader { --twx-up-accent: #00a8a8; }
.twx-ll-uploader__dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 150px;
	padding: 1.25rem;
	border: 2px dashed #cbd5e1;
	border-radius: 12px;
	background: #f8fafc;
	cursor: pointer;
	text-align: center;
	transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.twx-ll-uploader__dropzone:hover,
.twx-ll-uploader__dropzone:focus-visible {
	border-color: var(--twx-up-accent);
	background: #f0fdfa;
	outline: none;
}
.twx-ll-uploader.is-dragover .twx-ll-uploader__dropzone {
	border-color: var(--twx-up-accent);
	background: #ecfeff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px rgba(0,168,168,.5);
}
.twx-ll-uploader__preview { width: 100%; display: flex; align-items: center; justify-content: center; }
.twx-ll-uploader__placeholder {
	display: flex; flex-direction: column; align-items: center; gap: .35rem; color: #94a3b8;
}
.twx-ll-uploader__placeholder svg { width: 34px; height: 34px; opacity: .8; }
.twx-ll-uploader__title { font-size: .9rem; color: #475569; font-weight: 600; }
.twx-ll-uploader__title em { color: var(--twx-up-accent); font-style: normal; text-decoration: underline; }
.twx-ll-uploader__hint { font-size: .75rem; color: #94a3b8; }
.twx-ll-uploader__img {
	max-width: 100%; max-height: 200px; border-radius: 8px; object-fit: cover; display: block;
	box-shadow: 0 6px 18px -10px rgba(2,6,23,.4);
	animation: twx-up-pop .25s ease;
}
.twx-ll-uploader--logo .twx-ll-uploader__img { max-height: 90px; background: #fff; padding: 6px; }
.twx-ll-uploader:not(.has-image) .twx-ll-uploader__img { display: none; }
.twx-ll-uploader.has-image .twx-ll-uploader__placeholder { display: none; }
.twx-ll-uploader__overlay {
	position: absolute; inset: 0; display: none;
	align-items: center; justify-content: center; gap: .5rem;
	background: rgba(248,250,252,.85); border-radius: 12px; color: #0f172a; font-weight: 600; font-size: .85rem;
	backdrop-filter: blur(2px);
}
.twx-ll-uploader.is-uploading .twx-ll-uploader__overlay { display: flex; }
.twx-ll-uploader__error { display: none; margin: .5rem 0 0; color: #b91c1c; font-size: .8rem; }
.twx-ll-uploader.has-error .twx-ll-uploader__error { display: block; animation: twx-up-shake .3s ease; }
.twx-ll-uploader__actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; }

/* Spinner */
.twx-ll-uploader__spinner {
	width: 20px; height: 20px; border-radius: 50%;
	border: 3px solid rgba(0,168,168,.25); border-top-color: var(--twx-up-accent);
	animation: twx-up-spin .7s linear infinite; display: inline-block;
}

/* Gallery */
.twx-ll-uploader-gallery { --twx-up-accent: #00a8a8; border-radius: 12px; transition: box-shadow .18s ease; }
.twx-ll-uploader-gallery.is-dragover { box-shadow: 0 0 0 2px var(--twx-up-accent); }
.twx-ll-uploader-gallery__grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem;
}
.twx-ll-uploader-gallery__item {
	position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; background: #f1f5f9;
	display: flex; align-items: center; justify-content: center; animation: twx-up-pop .25s ease;
}
.twx-ll-uploader-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.twx-ll-uploader-gallery__item.is-uploading { border: 2px dashed #cbd5e1; }
.twx-ll-uploader-gallery__remove {
	position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%;
	background: rgba(15,23,42,.65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
	opacity: 0; transform: scale(.85); transition: opacity .15s ease, transform .15s ease;
}
.twx-ll-uploader-gallery__remove svg { width: 14px; height: 14px; }
.twx-ll-uploader-gallery__item:hover .twx-ll-uploader-gallery__remove { opacity: 1; transform: scale(1); }
.twx-ll-uploader-gallery__add {
	aspect-ratio: 1/1; border: 2px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; cursor: pointer;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; color: #64748b;
	font-size: .78rem; font-weight: 600; transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.twx-ll-uploader-gallery__add:hover { border-color: var(--twx-up-accent); background: #f0fdfa; color: var(--twx-up-accent); }
.twx-ll-uploader-gallery__add svg { width: 22px; height: 22px; }

@keyframes twx-up-spin { to { transform: rotate(360deg); } }
@keyframes twx-up-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes twx-up-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }