/*! PROPRIETARY — © 2026 Online Mega Stores Zbigniew Orlowski. Not GPL. Redistribution prohibited — see LICENSE.txt. */
/**
 * Admin styles for Lifetime Popups.
 * Modern design matching React app - all classes prefixed with lftpop- to avoid conflicts.
 *
 * @package Lifetime_Popups
 * @author  Zbigniew Orlowski
 */

/* ==========================================================================
   CSS Variables (prefixed to avoid conflicts)
   ========================================================================== */

:root {
	--lftpop-white: #ffffff;
	--lftpop-primary: #6366f1;
	--lftpop-primary-hover: #4f46e5;
	--lftpop-success: #10b981;
	--lftpop-warning: #f59e0b;
	--lftpop-danger: #ef4444;
	--lftpop-slate-50: #f8fafc;
	--lftpop-slate-100: #f1f5f9;
	--lftpop-slate-200: #e2e8f0;
	--lftpop-slate-300: #cbd5e1;
	--lftpop-slate-400: #94a3b8;
	--lftpop-slate-500: #64748b;
	--lftpop-slate-600: #475569;
	--lftpop-slate-700: #334155;
	--lftpop-slate-800: #1e293b;
	--lftpop-slate-900: #0f172a;
	--lftpop-indigo-50: #eef2ff;
	--lftpop-indigo-100: #e0e7ff;
	--lftpop-indigo-500: #6366f1;
	--lftpop-indigo-600: #4f46e5;
	--lftpop-indigo-700: #4338ca;
	--lftpop-radius-sm: 8px;
	--lftpop-radius-md: 12px;
	--lftpop-radius-lg: 16px;
	--lftpop-radius-xl: 24px;
	--lftpop-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--lftpop-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--lftpop-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--lftpop-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--lftpop-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   Custom Scrollbar (slim, grey)
   ========================================================================== */

.lftpop-editor ::-webkit-scrollbar,
.lftpop-dashboard ::-webkit-scrollbar,
.lftpop-templates ::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.lftpop-editor ::-webkit-scrollbar-track,
.lftpop-dashboard ::-webkit-scrollbar-track,
.lftpop-templates ::-webkit-scrollbar-track {
	background: transparent;
}

.lftpop-editor ::-webkit-scrollbar-thumb,
.lftpop-dashboard ::-webkit-scrollbar-thumb,
.lftpop-templates ::-webkit-scrollbar-thumb {
	background-color: rgba(156, 163, 175, 0.5);
	border-radius: 20px;
}

.lftpop-editor ::-webkit-scrollbar-thumb:hover,
.lftpop-dashboard ::-webkit-scrollbar-thumb:hover,
.lftpop-templates ::-webkit-scrollbar-thumb:hover {
	background-color: rgba(107, 114, 128, 0.8);
}

/* Firefox scrollbar */
.lftpop-editor,
.lftpop-dashboard,
.lftpop-templates {
	scrollbar-width: thin;
	scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

.lftpop-dashboard {
	width: 100%;
	margin: 0;
	padding: 32px 40px 60px 40px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--lftpop-slate-900);
	background: var(--lftpop-slate-50);
	min-height: calc(100vh - 32px);
	box-sizing: border-box;
}

.lftpop-editor,
.lftpop-templates {
	width: 100%;
	margin: 0;
	padding: 32px 40px 60px 20px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--lftpop-slate-900);
	background: var(--lftpop-slate-50);
	min-height: calc(100vh - 32px);
	box-sizing: border-box;
}

.lftpop-dashboard *,
.lftpop-editor *,
.lftpop-templates * {
	box-sizing: border-box;
}

/* Hide WordPress admin footer on our pages */
.toplevel_page_lifetime-popups #wpfooter,
.popups_page_lifetime-popups-editor #wpfooter,
.popups_page_lifetime-popups-templates #wpfooter,
.popups_page_lifetime-popups-docs #wpfooter {
	display: none;
}

/* Override WordPress admin container for full-width dashboard */
.toplevel_page_lifetime-popups #wpcontent {
	padding-left: 0 !important;
	background: var(--lftpop-slate-50);
}

.popups_page_lifetime-popups-editor #wpcontent,
.popups_page_lifetime-popups-templates #wpcontent,
.popups_page_lifetime-popups-docs #wpcontent {
	background: var(--lftpop-slate-50);
}

.toplevel_page_lifetime-popups #wpbody,
.popups_page_lifetime-popups-editor #wpbody,
.popups_page_lifetime-popups-templates #wpbody,
.popups_page_lifetime-popups-docs #wpbody {
	background: var(--lftpop-slate-50);
}

.toplevel_page_lifetime-popups #wpbody-content,
.popups_page_lifetime-popups-editor #wpbody-content,
.popups_page_lifetime-popups-templates #wpbody-content,
.popups_page_lifetime-popups-docs #wpbody-content {
	padding-bottom: 0 !important;
	background: var(--lftpop-slate-50);
	float: none;
}

.toplevel_page_lifetime-popups .wrap,
.popups_page_lifetime-popups-editor .wrap,
.popups_page_lifetime-popups-templates .wrap,
.popups_page_lifetime-popups-docs .wrap {
	margin: 0 !important;
	max-width: none;
}

/* ==========================================================================
   Header
   ========================================================================== */

.lftpop-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 32px;
	flex-wrap: wrap;
	gap: 16px;
}

.lftpop-header h1 {
	font-size: 32px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0;
	padding: 0;
	letter-spacing: -0.025em;
}

.lftpop-header p {
	font-size: 16px;
	color: var(--lftpop-slate-500);
	margin: 8px 0 0 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.lftpop-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
	line-height: 1.4;
}

.lftpop-btn-primary {
	background: var(--lftpop-primary);
	color: #fff;
	box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.4);
}

.lftpop-btn-primary:hover {
	background: var(--lftpop-primary-hover);
	color: #fff;
	transform: translateY(-1px);
}

.lftpop-btn-primary:active {
	transform: scale(0.98);
}

.lftpop-btn-secondary {
	background: #fff;
	color: var(--lftpop-slate-700);
	border: 1px solid var(--lftpop-slate-200);
}

.lftpop-btn-secondary:hover {
	background: var(--lftpop-slate-50);
	border-color: var(--lftpop-slate-300);
	color: var(--lftpop-slate-700);
}

.lftpop-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */

.lftpop-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

@media (max-width: 1200px) {
	.lftpop-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.lftpop-stats-grid {
		grid-template-columns: 1fr;
	}
}

.lftpop-stat-card {
	background: #fff;
	padding: 24px;
	border-radius: var(--lftpop-radius-xl);
	border: 1px solid var(--lftpop-slate-200);
	box-shadow: var(--lftpop-shadow-sm);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	transition: box-shadow 0.2s ease;
}

.lftpop-stat-card:hover {
	box-shadow: var(--lftpop-shadow-md);
}

.lftpop-stat-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lftpop-stat-label {
	font-size: 16px;
	font-weight: 500;
	color: var(--lftpop-slate-500);
}

.lftpop-stat-value {
	font-size: 32px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	letter-spacing: -0.025em;
}

.lftpop-stat-trend {
	font-size: 14px;
	font-weight: 500;
	color: var(--lftpop-slate-400);
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
}

.lftpop-stat-trend.lftpop-trend-up {
	color: var(--lftpop-success);
}

.lftpop-stat-trend .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.lftpop-stat-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--lftpop-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lftpop-stat-icon .dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
}

.lftpop-icon-views {
	background: rgba(99, 102, 241, 0.1);
	color: var(--lftpop-primary);
}

.lftpop-icon-clicks {
	background: rgba(16, 185, 129, 0.1);
	color: var(--lftpop-success);
}

.lftpop-icon-conversions {
	background: rgba(245, 158, 11, 0.1);
	color: var(--lftpop-warning);
}

.lftpop-icon-bars {
	background: rgba(99, 102, 241, 0.1);
	color: var(--lftpop-primary);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.lftpop-card {
	background: #fff;
	border-radius: var(--lftpop-radius-xl);
	border: 1px solid var(--lftpop-slate-200);
	box-shadow: var(--lftpop-shadow-sm);
	overflow: hidden;
	margin-bottom: 32px;
}

.lftpop-card-header {
	padding: 24px 32px;
	border-bottom: 1px solid var(--lftpop-slate-100);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lftpop-card-header h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0;
	padding: 0;
	border: none;
}

/* ==========================================================================
   Table
   ========================================================================== */

.lftpop-table {
	width: 100%;
	border-collapse: collapse;
}

.lftpop-table thead {
	background: var(--lftpop-slate-50);
}

.lftpop-table th {
	padding: 16px 32px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lftpop-slate-500);
	border: none;
}

.lftpop-table tbody tr {
	border-bottom: 1px solid var(--lftpop-slate-100);
	transition: background 0.15s ease;
}

.lftpop-table tbody tr:hover {
	background: var(--lftpop-slate-50);
}

.lftpop-table td {
	padding: 20px 32px;
	vertical-align: middle;
	border: none;
}

.lftpop-bar-name {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lftpop-bar-name strong {
	font-size: 16px;
	font-weight: 600;
	color: var(--lftpop-slate-900);
}

.lftpop-bar-type {
	font-size: 14px;
	color: var(--lftpop-slate-500);
	text-transform: capitalize;
}

/* Position Badge */
.lftpop-position-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--lftpop-radius-sm);
	border: 1px solid;
}

.lftpop-position-top {
	background: rgba(59, 130, 246, 0.1);
	color: #2563eb;
	border-color: rgba(59, 130, 246, 0.2);
}

.lftpop-position-bottom {
	background: rgba(139, 92, 246, 0.1);
	color: #7c3aed;
	border-color: rgba(139, 92, 246, 0.2);
}

.lftpop-position-left,
.lftpop-position-right {
	background: rgba(249, 115, 22, 0.1);
	color: #ea580c;
	border-color: rgba(249, 115, 22, 0.2);
}

.lftpop-position-floating {
	background: rgba(236, 72, 153, 0.1);
	color: #db2777;
	border-color: rgba(236, 72, 153, 0.2);
}

/* Status Toggle */
.lftpop-status-toggle {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lftpop-toggle {
	position: relative;
	width: 44px;
	height: 24px;
	background: var(--lftpop-slate-300);
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease;
	padding: 0;
}

.lftpop-toggle.lftpop-toggle-active {
	background: var(--lftpop-success);
}

.lftpop-toggle-slider {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: var(--lftpop-shadow-sm);
	transition: transform 0.2s ease;
}

.lftpop-toggle.lftpop-toggle-active .lftpop-toggle-slider {
	transform: translateX(20px);
}

.lftpop-status-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.lftpop-status-active {
	color: var(--lftpop-success);
}

.lftpop-status-scheduled {
	color: #d97706;
	font-weight: 700;
}

/* Scheduled toggle - amber/yellow instead of green */
.lftpop-toggle-scheduled {
	background-color: #fbbf24 !important;
}

.lftpop-toggle-scheduled .lftpop-toggle-slider {
	transform: translateX(20px);
}

/* Expired status - red/orange to indicate not displaying */
.lftpop-status-expired {
	color: #dc2626;
	font-weight: 700;
}

/* Expired toggle - red/orange */
.lftpop-toggle-expired {
	background-color: #f87171 !important;
}

.lftpop-toggle-expired .lftpop-toggle-slider {
	transform: translateX(20px);
}

.lftpop-status-inactive {
	color: var(--lftpop-warning);
}

.lftpop-status-draft {
	color: var(--lftpop-slate-500);
}

/* Bar Stats */
.lftpop-bar-stats {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lftpop-stat-item {
	display: flex;
	flex-direction: column;
}

.lftpop-stat-num {
	font-size: 16px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
}

.lftpop-stat-name {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lftpop-slate-400);
}

.lftpop-stat-divider {
	width: 1px;
	height: 32px;
	background: var(--lftpop-slate-200);
}

.lftpop-modified-date {
	font-size: 14px;
	font-weight: 500;
	color: var(--lftpop-slate-500);
}

/* Actions */
.lftpop-actions-col {
	text-align: right !important;
}

.lftpop-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.lftpop-action-btn {
	width: 36px;
	height: 36px;
	border-radius: var(--lftpop-radius-sm);
	border: none;
	background: transparent;
	color: var(--lftpop-slate-400);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
	text-decoration: none;
}

.lftpop-action-btn:hover {
	background: var(--lftpop-slate-100);
}

.lftpop-action-edit:hover {
	color: var(--lftpop-primary);
	background: rgba(99, 102, 241, 0.1);
}

.lftpop-action-preview:hover {
	color: var(--lftpop-success);
	background: rgba(16, 185, 129, 0.1);
}

.lftpop-action-delete:hover {
	color: var(--lftpop-danger);
	background: rgba(239, 68, 68, 0.1);
}

.lftpop-action-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.lftpop-action-variant:hover {
	color: var(--lftpop-primary);
	background: rgba(99, 102, 241, 0.1);
}

.lftpop-action-busy {
	opacity: 0.5;
	cursor: wait;
}

/* ==========================================================================
   A/B test group (Ultra). Sub-rows sit under the parent row: indented,
   indigo accent on the left, one compact stat cluster per variant.
   ========================================================================== */

.lftpop-bar-ab-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 99px;
	background: var(--lftpop-indigo-50);
	color: var(--lftpop-indigo-700);
	border: 1px solid var(--lftpop-indigo-100);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	vertical-align: middle;
}

.lftpop-table tbody tr.lftpop-ab-row {
	background: var(--lftpop-slate-50);
	border-bottom: 1px solid var(--lftpop-slate-100);
}

.lftpop-table tbody tr.lftpop-ab-row:hover {
	background: var(--lftpop-indigo-50);
}

.lftpop-table tbody tr.lftpop-ab-row-first {
	box-shadow: inset 0 1px 0 var(--lftpop-slate-200);
}

.lftpop-table tbody tr.lftpop-ab-row td {
	padding: 10px 32px 10px 52px;
	border-left: 3px solid var(--lftpop-primary);
}

.lftpop-ab-member {
	display: flex;
	align-items: center;
	gap: 20px;
}

.lftpop-ab-letter {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--lftpop-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}

.lftpop-ab-name {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.lftpop-ab-name strong {
	max-width: 320px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: var(--lftpop-slate-800);
}

.lftpop-ab-leading {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 99px;
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.lftpop-ab-stats {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
}

.lftpop-ab-stat {
	display: flex;
	flex-direction: column;
	min-width: 64px;
}

.lftpop-ab-stat-num {
	font-size: 14px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
}

.lftpop-ab-stat-name {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lftpop-slate-400);
}

.lftpop-ab-weight-wrap {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lftpop-ab-weight-field {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.lftpop-ab-member input.lftpop-ab-weight {
	width: 64px;
	height: 30px;
	min-height: 30px;
	padding: 0 8px;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-sm);
	background: #fff;
	color: var(--lftpop-slate-900);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-align: right;
	box-shadow: none;
	transition: all 0.2s ease;
}

.lftpop-ab-member input.lftpop-ab-weight:focus {
	border-color: var(--lftpop-primary);
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
	outline: none;
}

.lftpop-ab-weight-unit {
	font-size: 12px;
	font-weight: 600;
	color: var(--lftpop-slate-500);
}

.lftpop-ab-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.lftpop-ab-winner {
	padding: 7px 12px;
	border-radius: var(--lftpop-radius-sm);
	border: 1px solid var(--lftpop-indigo-100);
	background: #fff;
	color: var(--lftpop-indigo-600);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-ab-winner:hover {
	background: var(--lftpop-primary);
	border-color: var(--lftpop-primary);
	color: #fff;
}

.lftpop-ab-winner:disabled {
	opacity: 0.5;
	cursor: wait;
}

@media (max-width: 782px) {
	.lftpop-table tbody tr.lftpop-ab-row td {
		padding-left: 20px;
	}

	.lftpop-ab-member {
		flex-wrap: wrap;
		gap: 10px 16px;
	}

	.lftpop-ab-name {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.lftpop-empty-state {
	padding: 64px 32px;
	text-align: center;
}

.lftpop-empty-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 24px;
	background: var(--lftpop-slate-100);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lftpop-slate-400);
}

.lftpop-empty-icon .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
}

.lftpop-empty-state h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0 0 8px 0;
}

.lftpop-empty-state p {
	font-size: 15px;
	color: var(--lftpop-slate-500);
	margin: 0 0 24px 0;
}

/* ==========================================================================
   Section
   ========================================================================== */

.lftpop-section {
	margin-bottom: 32px;
}

.lftpop-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.lftpop-section-header h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0;
	padding: 0;
	border: none;
}

.lftpop-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 15px;
	font-weight: 600;
	color: var(--lftpop-primary);
	text-decoration: none;
	transition: color 0.15s ease;
}

.lftpop-link:hover {
	color: var(--lftpop-primary-hover);
}

.lftpop-link .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   Analytics Row (Chart + Boost Sales)
   ========================================================================== */

.lftpop-analytics-row {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	margin-bottom: 32px;
}

@media (max-width: 1200px) {
	.lftpop-analytics-row {
		grid-template-columns: 1fr;
	}
}

/* Performance Chart Card */
.lftpop-chart-card {
	min-height: 450px;
}

.lftpop-chart-card .lftpop-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lftpop-chart-period {
	font-size: 14px;
	font-weight: 500;
	border: none;
	background: var(--lftpop-slate-100);
	border-radius: 8px;
	padding: 8px 16px;
	color: var(--lftpop-slate-600);
	cursor: pointer;
}

.lftpop-chart-period:hover {
	background: var(--lftpop-slate-200);
}

.lftpop-chart-container {
	height: 350px;
	padding: 20px;
}

/* Boost Sales Pro Tip Card */
.lftpop-boost-card {
	display: block;
	background-color: var(--lftpop-slate-900);
	border-radius: 24px;
	padding: 40px;
	color: var(--lftpop-white);
	position: relative;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--lftpop-shadow-xl);
	transition: transform 0.2s ease;
}

.lftpop-boost-card:hover {
	transform: scale(1.02);
	color: var(--lftpop-white);
}

.lftpop-boost-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
}

.lftpop-boost-glow-1 {
	top: -40px;
	right: -40px;
	width: 180px;
	height: 180px;
	background: var(--lftpop-primary);
	opacity: 0.3;
	transition: opacity 0.3s ease;
}

.lftpop-boost-card:hover .lftpop-boost-glow-1 {
	opacity: 0.5;
}

.lftpop-boost-glow-2 {
	bottom: 0;
	left: 0;
	width: 160px;
	height: 160px;
	background: #8b5cf6;
	opacity: 0.2;
}

.lftpop-boost-content {
	position: relative;
	z-index: 10;
}

.lftpop-boost-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px);
	padding: 8px 16px;
	border-radius: 50px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.lftpop-zap-icon {
	width: 16px;
	height: 16px;
	stroke: #facc15;
	flex-shrink: 0;
}

.lftpop-boost-content h3 {
	font-size: 28px !important;
	font-weight: 700 !important;
	margin: 0 0 12px 0 !important;
	color: #ffffff !important;
	line-height: 1.2 !important;
}

.lftpop-boost-content p {
	font-size: 15px;
	color: #cbd5e1;
	line-height: 1.7;
	margin: 0 0 24px 0;
}

/* Mini Browser Preview in Boost Card */
.lftpop-boost-preview {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #1e293b;
	transition: transform 0.3s ease;
}

.lftpop-boost-card:hover .lftpop-boost-preview {
	transform: scale(1.02);
}

.lftpop-boost-browser-header {
	background: rgba(0, 0, 0, 0.3);
	padding: 10px 12px;
	display: flex;
	gap: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lftpop-boost-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #475569;
}

.lftpop-boost-browser-content {
	height: 120px;
	background: #f1f5f9;
	position: relative;
	overflow: hidden;
}

/* Popup preview: a card centered on a dimmed page */
.lftpop-boost-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
}

.lftpop-boost-popup {
	position: relative;
	width: 64%;
	max-width: 190px;
	padding: 15px 14px 13px;
	border-radius: 10px;
	background: linear-gradient(135deg, #f43f5e, #d97706);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	color: var(--lftpop-white);
}

.lftpop-boost-popup-close {
	position: absolute;
	top: 4px;
	right: 8px;
	font-size: 14px;
	line-height: 1;
	opacity: 0.75;
}

.lftpop-boost-popup-title {
	font-size: 11px;
	font-weight: 800;
}

.lftpop-boost-popup-timer {
	font-family: monospace;
	font-size: 11px;
	font-weight: 700;
	background: rgba(0, 0, 0, 0.22);
	padding: 3px 9px;
	border-radius: 4px;
}

.lftpop-boost-popup-code {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	padding: 4px 14px;
	border-radius: 4px;
	border: 1px dashed rgba(255, 255, 255, 0.6);
}

.lftpop-boost-skeleton {
	padding: 16px;
	opacity: 0.35;
}

.lftpop-boost-skeleton-hero {
	height: 48px;
	background: #94a3b8;
	border-radius: 8px;
	margin-bottom: 12px;
}

.lftpop-boost-skeleton-row {
	display: flex;
	gap: 10px;
}

.lftpop-boost-skeleton-box {
	height: 32px;
	background: #94a3b8;
	border-radius: 6px;
	flex: 1;
}

.lftpop-boost-skeleton-wide {
	flex: 2;
}

/* Hover Overlay */
.lftpop-boost-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.4);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	transition-duration: 300ms;
	z-index: 30;
}

.lftpop-boost-card:hover .lftpop-boost-overlay {
	opacity: 1;
}

.lftpop-boost-use-btn {
	background: var(--lftpop-white);
	color: var(--lftpop-slate-900) !important;
	font-size: 16px;
	font-weight: 700;
	padding: 14px 28px;
	border-radius: 50px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.5);
	transform: translateY(10px);
	transition: transform 0.3s ease;
	text-decoration: none !important;
}

.lftpop-boost-card:hover .lftpop-boost-use-btn {
	transform: translateY(0);
}

/* ==========================================================================
   Template Filters
   ========================================================================== */

.lftpop-filters {
	margin-bottom: 24px;
}

.lftpop-filter-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lftpop-filter-btn {
	padding: 8px 16px;
	border-radius: var(--lftpop-radius-full);
	border: 1px solid var(--lftpop-slate-200);
	background: #fff;
	color: var(--lftpop-slate-600);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-filter-btn:hover {
	border-color: var(--lftpop-slate-300);
	background: var(--lftpop-slate-50);
	color: var(--lftpop-slate-900);
}

.lftpop-filter-btn.lftpop-filter-active {
	background: var(--lftpop-primary);
	border-color: var(--lftpop-primary);
	color: #fff;
}

.lftpop-filter-btn.lftpop-filter-active:hover {
	background: var(--lftpop-primary-dark);
	border-color: var(--lftpop-primary-dark);
}

/* ==========================================================================
   Templates Grid
   ========================================================================== */

.lftpop-templates-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 1100px) {
	.lftpop-templates-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 680px) {
	.lftpop-templates-grid {
		grid-template-columns: 1fr;
	}
}

.lftpop-template-card {
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-xl);
	overflow: hidden;
	box-shadow: var(--lftpop-shadow-sm);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
}

.lftpop-template-card:hover {
	box-shadow: var(--lftpop-shadow-xl);
	transform: translateY(-4px);
}

.lftpop-template-browser {
	background: var(--lftpop-slate-50);
	border-bottom: 1px solid var(--lftpop-slate-200);
	padding: 10px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lftpop-browser-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lftpop-premium-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
	color: #92400e;
	font-size: 9px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.lftpop-type-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 5;
	background: rgba(15, 23, 42, 0.6);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	backdrop-filter: blur(4px);
}

.lftpop-browser-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	transition: background 0.2s ease;
}

.lftpop-dot-red {
	background: var(--lftpop-slate-300);
}

.lftpop-dot-yellow {
	background: var(--lftpop-slate-300);
}

.lftpop-dot-green {
	background: var(--lftpop-slate-300);
}

.lftpop-template-card:hover .lftpop-dot-red {
	background: #f87171;
}

.lftpop-template-card:hover .lftpop-dot-yellow {
	background: #fbbf24;
}

.lftpop-template-card:hover .lftpop-dot-green {
	background: #34d399;
}

.lftpop-template-preview {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--lftpop-slate-100);
	overflow: hidden;
}

.lftpop-template-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	z-index: 10;
	box-shadow: var(--lftpop-shadow-md);
	overflow: hidden;
}

/* Atmosphere container for template previews */
.lftpop-template-bar .lftpop-atmosphere-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.lftpop-template-bar .lftpop-preview-bar-message,
.lftpop-template-bar .lftpop-preview-bar-button,
.lftpop-template-bar .lftpop-preview-coupon,
.lftpop-template-bar .lftpop-preview-bar-countdown,
.lftpop-template-bar .lftpop-preview-bar-form,
.lftpop-template-bar .lftpop-progress-bar {
	position: relative;
	z-index: 1;
}

.lftpop-template-message {
	font-size: 11px;
	font-weight: 600;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lftpop-template-cta {
	font-size: 10px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.lftpop-template-skeleton {
	position: absolute;
	inset: 0;
	padding: 26% 16px 16px;
	opacity: 0.3;
	z-index: 0;
}

.lftpop-skeleton-hero {
	height: 60px;
	background: var(--lftpop-slate-300);
	border-radius: var(--lftpop-radius-sm);
	margin-bottom: 12px;
}

.lftpop-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.lftpop-skeleton-box {
	height: 32px;
	background: var(--lftpop-slate-300);
	border-radius: var(--lftpop-radius-sm);
}

.lftpop-template-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.1);
	backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 20;
}

.lftpop-template-card:hover .lftpop-template-overlay {
	opacity: 1;
}

.lftpop-template-use-btn {
	background: #fff;
	color: var(--lftpop-slate-900);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 20px;
	border-radius: 999px;
	box-shadow: var(--lftpop-shadow-xl);
	transform: translateY(8px);
	transition: transform 0.3s ease;
}

.lftpop-template-card:hover .lftpop-template-use-btn {
	transform: translateY(0);
}

.lftpop-template-info {
	padding: 16px;
	border-top: 1px solid var(--lftpop-slate-100);
	background: #fff;
}

.lftpop-template-info h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0 0 4px 0;
}

.lftpop-template-category {
	font-size: 13px;
	color: var(--lftpop-slate-500);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes lftpop-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lftpop-dashboard,
.lftpop-editor,
.lftpop-templates {
	animation: lftpop-fade-in 0.3s ease;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.lftpop-dashboard,
	.lftpop-editor,
	.lftpop-templates {
		padding: 16px;
	}
}

@media (max-width: 768px) {
	.lftpop-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.lftpop-header h1 {
		font-size: 24px;
	}

	.lftpop-table th,
	.lftpop-table td {
		padding: 12px 16px;
	}
}

/* ==========================================================================
   Notice Messages
   ========================================================================== */

.lftpop-notice {
	padding: 16px 20px;
	margin-bottom: 24px;
	border-radius: var(--lftpop-radius-md);
	display: flex;
	align-items: center;
	gap: 12px;
}

.lftpop-notice-success {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	color: #047857;
}

.lftpop-notice-error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #b91c1c;
}

.lftpop-notice p {
	margin: 0;
}

/* ==========================================================================
   EDITOR PAGE - Matching React Editor.tsx
   ========================================================================== */

.lftpop-editor {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	padding: 0;
	margin-left: -20px;
	margin-top: -10px;
}

/* Editor Header */
.lftpop-editor-header {
	height: 64px;
	background: #fff;
	border-bottom: 1px solid var(--lftpop-slate-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	flex-shrink: 0;
	z-index: 20;
}

.lftpop-editor-header-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lftpop-back-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--lftpop-radius-sm);
	color: var(--lftpop-slate-500);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s ease;
}

.lftpop-back-btn:hover {
	background: var(--lftpop-slate-100);
	color: var(--lftpop-slate-700);
}

.lftpop-back-btn .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.lftpop-header-divider {
	width: 1px;
	height: 24px;
	background: var(--lftpop-slate-200);
}

.lftpop-editor-title h1 {
	font-size: 14px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0;
	line-height: 1.2;
}

.lftpop-autosave-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--lftpop-slate-500);
}

.lftpop-autosave-dot {
	width: 6px;
	height: 6px;
	background: var(--lftpop-success);
	border-radius: 50%;
}

.lftpop-autosave-dot.lftpop-autosave-pending {
	background: var(--lftpop-warning);
}

.lftpop-autosave-dot.lftpop-autosave-saving {
	background: var(--lftpop-primary);
	animation: lftpop-pulse 1s infinite;
}

.lftpop-autosave-dot.lftpop-autosave-saved {
	background: var(--lftpop-success);
}

.lftpop-autosave-dot.lftpop-autosave-error {
	background: var(--lftpop-danger);
}

@keyframes lftpop-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.lftpop-editor-header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lftpop-btn-outline {
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	color: var(--lftpop-slate-600);
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 500;
	border-radius: var(--lftpop-radius-sm);
}

.lftpop-btn-outline:hover {
	background: var(--lftpop-slate-50);
	color: var(--lftpop-slate-900);
}

.lftpop-btn-outline.lftpop-btn-active {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.3);
	color: var(--lftpop-primary);
}

.lftpop-btn-text {
	background: transparent;
	border: none;
	color: var(--lftpop-slate-600);
	font-size: 14px;
	font-weight: 500;
	padding: 8px 12px;
	cursor: pointer;
}

.lftpop-btn-text:hover {
	color: var(--lftpop-slate-900);
}

.lftpop-btn-publish {
	background: var(--lftpop-slate-900);
	padding: 10px 20px;
	border-radius: 999px;
	box-shadow: var(--lftpop-shadow-lg);
}

.lftpop-btn-publish:hover {
	background: var(--lftpop-slate-800);
}

.lftpop-btn-publish:active {
	transform: scale(0.98);
}

/* Device Toggle */
.lftpop-device-toggle {
	display: flex;
	background: var(--lftpop-slate-100);
	padding: 4px;
	border-radius: var(--lftpop-radius-sm);
}

.lftpop-device-btn {
	padding: 6px;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lftpop-device-btn:hover {
	color: var(--lftpop-slate-700);
}

.lftpop-device-btn.lftpop-device-active {
	background: #fff;
	box-shadow: var(--lftpop-shadow-sm);
	color: var(--lftpop-slate-900);
}

.lftpop-device-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* Editor Main */
.lftpop-editor-main {
	flex: 1;
	display: flex;
	overflow: hidden;
}

/* Editor Sidebar */
.lftpop-editor-sidebar {
	width: 400px;
	background: #fff;
	border-right: 1px solid var(--lftpop-slate-200);
	flex-shrink: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

@media (min-width: 1440px) {
	.lftpop-editor-sidebar {
		width: 450px;
	}
}

/* Accordion Sections */
.lftpop-accordion-section {
	border-bottom: 1px solid var(--lftpop-slate-200);
}

.lftpop-accordion-section:last-child {
	border-bottom: none;
}

.lftpop-accordion-header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lftpop-accordion-header:hover {
	background: var(--lftpop-slate-50);
}

.lftpop-accordion-header.lftpop-accordion-open {
	background: var(--lftpop-slate-50);
}

.lftpop-accordion-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lftpop-slate-100);
	border-radius: var(--lftpop-radius-sm);
	color: var(--lftpop-slate-500);
	margin-right: 12px;
}

.lftpop-accordion-icon.lftpop-accordion-icon-active {
	background: rgba(99, 102, 241, 0.1);
	color: var(--lftpop-primary);
}

.lftpop-accordion-icon .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.lftpop-accordion-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--lftpop-slate-600);
	flex: 1;
	text-align: left;
}

.lftpop-accordion-open .lftpop-accordion-title {
	color: var(--lftpop-slate-900);
}

.lftpop-accordion-arrow {
	color: var(--lftpop-slate-400);
	transition: transform 0.2s ease;
}

.lftpop-accordion-arrow.lftpop-accordion-arrow-open {
	transform: rotate(180deg);
}

.lftpop-accordion-content {
	display: none;
	padding: 16px;
	background: #fff;
}

.lftpop-accordion-content.lftpop-accordion-content-open {
	display: block;
	animation: lftpop-fade-in 0.2s ease;
}

/* Form Elements */
.lftpop-field {
	margin-bottom: 16px;
}

.lftpop-field:last-child {
	margin-bottom: 0;
}

.lftpop-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--lftpop-slate-700);
	margin-bottom: 6px;
}

/* Field hint text */
.lftpop-field-hint {
	font-size: 11px;
	color: var(--lftpop-slate-400);
	margin: -2px 0 8px 0;
}

.lftpop-input,
.lftpop-select,
.lftpop-textarea {
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid var(--lftpop-slate-300);
	border-radius: 8px;
	background: #fff;
	color: var(--lftpop-slate-900);
	transition: all 0.15s ease;
	outline: none;
	font-family: inherit;
}

.lftpop-input:focus,
.lftpop-select:focus,
.lftpop-textarea:focus {
	border-color: var(--lftpop-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.lftpop-input-mono {
	font-family: ui-monospace, monospace;
}

.lftpop-textarea {
	min-height: 80px;
	resize: vertical;
}

.lftpop-field-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.lftpop-field-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.lftpop-field-value {
	font-size: 12px;
	color: var(--lftpop-slate-500);
}

/* Bar Type Selector */
.lftpop-popup-type-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 6px;
	background: var(--lftpop-slate-100);
	border-radius: var(--lftpop-radius-sm);
	margin-bottom: 4px;
}

.lftpop-type-btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 4px 8px;
	font-size: 11px;
	font-weight: 500;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-type-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.lftpop-type-btn .lftpop-type-label {
	line-height: 1.1;
	text-align: center;
}

.lftpop-type-btn:hover {
	color: var(--lftpop-slate-700);
}

.lftpop-type-btn.lftpop-type-active {
	background: #fff;
	color: var(--lftpop-primary);
	box-shadow: var(--lftpop-shadow-sm);
}

/* "Coming soon" (M2/M3) types: greyed out, not clickable */
.lftpop-type-btn.lftpop-type-soon,
.lftpop-trigger-btn.lftpop-type-soon {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

.lftpop-type-soon-badge {
	position: absolute;
	top: 3px;
	right: 3px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--lftpop-slate-200);
	color: var(--lftpop-slate-500);
	padding: 1px 4px;
	border-radius: 4px;
}

.lftpop-trigger-btn .lftpop-type-soon-badge {
	position: static;
	margin-left: 4px;
}

/* Image picker */
.lftpop-image-controls {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lftpop-image-thumb {
	margin-top: 8px;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-sm);
	overflow: hidden;
	max-width: 180px;
}

.lftpop-image-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

/* Mini Toolbar */
.lftpop-mini-toolbar {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--lftpop-slate-100);
	border-radius: 6px;
	padding: 4px;
}

.lftpop-toolbar-btn {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 4px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	font-size: 12px;
	transition: all 0.15s ease;
}

.lftpop-toolbar-btn:hover {
	background: #fff;
}

.lftpop-toolbar-btn.lftpop-toolbar-active {
	background: #fff;
	color: var(--lftpop-slate-900);
	box-shadow: var(--lftpop-shadow-sm);
}

.lftpop-toolbar-group {
	display: flex;
	gap: 2px;
}

.lftpop-toolbar-divider {
	width: 1px;
	height: 12px;
	background: var(--lftpop-slate-300);
	margin: 0 4px;
	align-self: center;
}

.lftpop-toolbar-label {
	font-size: 9px;
	font-weight: 700;
	color: var(--lftpop-slate-500);
	text-transform: uppercase;
	display: flex;
	align-items: center;
}

.lftpop-toolbar-input {
	width: 50px;
	padding: 2px 6px;
	font-size: 11px;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 4px;
	text-align: center;
	outline: none;
}

.lftpop-toolbar-align-btn .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

/* Text Alignment Row */
.lftpop-text-align-row {
	display: flex;
	gap: 4px;
	margin-top: 8px;
}

.lftpop-align-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 28px;
	background: var(--lftpop-slate-100);
	border: none;
	border-radius: 4px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-align-btn:hover {
	background: var(--lftpop-slate-200);
	color: var(--lftpop-slate-700);
}

.lftpop-align-btn.lftpop-align-active {
	background: var(--lftpop-primary);
	color: #fff;
}

.lftpop-align-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Type Settings Boxes */
.lftpop-type-settings {
	padding: 16px;
	border-radius: var(--lftpop-radius-md);
	margin-top: 16px;
}

.lftpop-type-settings-countdown {
	background: rgba(245, 158, 11, 0.1);
	border: 1px solid rgba(245, 158, 11, 0.2);
}

.lftpop-type-settings-coupon {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
}

.lftpop-type-settings-lead {
	background: rgba(59, 130, 246, 0.1);
	border: 1px solid rgba(59, 130, 246, 0.2);
}

.lftpop-type-settings-shipping {
	background: var(--lftpop-slate-50);
	border: 1px solid var(--lftpop-slate-200);
}

.lftpop-settings-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 12px 0;
}

.lftpop-settings-amber {
	color: #b45309;
}

.lftpop-settings-emerald {
	color: #047857;
}

.lftpop-settings-blue {
	color: #1d4ed8;
}

.lftpop-settings-indigo {
	color: #4338ca;
}

.lftpop-settings-title .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Toggle Row */
.lftpop-toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.lftpop-toggle-row:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

/* Toggle Row with Border Separator */
.lftpop-toggle-row-border {
	border-bottom: 1px solid rgba(217, 119, 6, 0.3) !important; /* amber-200/50 */
	padding-bottom: 12px !important;
	margin-bottom: 8px !important;
}

/* Coupon Settings border separator (emerald) */
.lftpop-coupon-settings .lftpop-toggle-row-border {
	border-bottom-color: rgba(16, 185, 129, 0.3) !important; /* emerald-200/50 */
}

/* Coupon Style Selector */
.lftpop-style-selector {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.lftpop-style-btn {
	padding: 8px 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	background: #fff;
	border: 1px solid var(--lftpop-slate-300);
	border-radius: 6px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-style-btn:hover {
	border-color: var(--lftpop-success);
	color: var(--lftpop-success);
}

.lftpop-style-btn.lftpop-style-active {
	background: rgba(16, 185, 129, 0.1);
	border-color: var(--lftpop-success);
	color: #047857;
	box-shadow: 0 0 0 1px var(--lftpop-success);
}

/* Checkbox Input */
.lftpop-checkbox-input {
	width: 18px;
	height: 18px;
	accent-color: var(--lftpop-primary);
}

/* Input Group */
.lftpop-input-group {
	display: flex;
	align-items: center;
}

.lftpop-input-prefix {
	padding: 10px 12px;
	background: var(--lftpop-slate-100);
	border: 1px solid var(--lftpop-slate-300);
	border-right: none;
	border-radius: var(--lftpop-radius-sm) 0 0 var(--lftpop-radius-sm);
	font-weight: 600;
	color: var(--lftpop-slate-500);
}

.lftpop-input-group .lftpop-input {
	border-radius: 0 var(--lftpop-radius-sm) var(--lftpop-radius-sm) 0;
}

/* Color Picker Row */
.lftpop-color-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-sm);
	margin-bottom: 12px;
	transition: border-color 0.15s ease;
	cursor: pointer;
}

.lftpop-color-row:hover {
	border-color: var(--lftpop-slate-300);
}

.lftpop-color-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--lftpop-slate-600);
}

/* Offer Panel editor fields */
.lftpop-panel-fields { display: flex; flex-direction: column; gap: 2px; }
.lftpop-panel-colors .lftpop-color-row { cursor: default; gap: 8px; }
.lftpop-panel-colors .lftpop-color-label { flex: 1; }
.lftpop-color-input {
	flex: 0 1 120px;
	max-width: 120px;
	padding: 5px 8px;
	font-family: ui-monospace, monospace;
	font-size: 12px;
	text-transform: uppercase;
}
.lftpop-color-swatch {
	width: 34px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-sm);
	background: none;
	cursor: pointer;
	flex: 0 0 auto;
}
.lftpop-sublabel {
	display: block;
	margin: 10px 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--lftpop-slate-600);
}

.lftpop-color-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lftpop-color-hex {
	font-size: 12px;
	font-family: ui-monospace, monospace;
	text-transform: uppercase;
	color: var(--lftpop-slate-400);
}

.lftpop-color-preview {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--lftpop-slate-200);
}

.lftpop-color-preview input[type="color"] {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150%;
	height: 150%;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* Upload Area */
.lftpop-upload-area {
	position: relative;
	border: 2px dashed var(--lftpop-slate-300);
	border-radius: var(--lftpop-radius-md);
	padding: 20px;
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-bottom: 16px;
}

.lftpop-upload-area:hover {
	border-color: var(--lftpop-primary);
	background: var(--lftpop-slate-50);
}

.lftpop-upload-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.lftpop-upload-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(99, 102, 241, 0.1);
	border-radius: 50%;
	color: var(--lftpop-primary);
	margin-bottom: 4px;
	transition: background 0.2s ease;
}

.lftpop-upload-area:hover .lftpop-upload-icon {
	background: rgba(99, 102, 241, 0.2);
}

.lftpop-upload-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.lftpop-upload-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--lftpop-slate-600);
}

.lftpop-upload-hint {
	font-size: 11px;
	color: var(--lftpop-slate-400);
}

/* Gradients Grid */
.lftpop-gradients-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.lftpop-gradient-btn {
	aspect-ratio: 1;
	border-radius: var(--lftpop-radius-sm);
	border: 1px solid var(--lftpop-slate-200);
	box-shadow: var(--lftpop-shadow-sm);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.lftpop-gradient-btn:hover {
	transform: scale(1.1);
}

/* Divider */
.lftpop-divider {
	height: 1px;
	background: var(--lftpop-slate-200);
	margin: 16px 0;
}

/* Shape Presets */
.lftpop-shape-presets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}

.lftpop-shape-btn {
	padding: 8px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 6px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-shape-btn:hover {
	border-color: var(--lftpop-slate-300);
}

.lftpop-shape-btn.lftpop-shape-active {
	background: rgba(99, 102, 241, 0.1);
	border-color: var(--lftpop-primary);
	color: var(--lftpop-primary);
}

/* Layout selector (Text only / Image left|right|top|background) */
.lftpop-layout-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lftpop-layout-btn {
	flex: 1 1 auto;
	padding: 8px 12px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 6px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-layout-btn:hover {
	border-color: var(--lftpop-slate-300);
}

.lftpop-layout-btn.lftpop-layout-active {
	background: rgba(99, 102, 241, 0.1);
	border-color: var(--lftpop-primary);
	color: var(--lftpop-primary);
}

/* Range Input */
.lftpop-range {
	width: 100%;
	height: 8px;
	background: var(--lftpop-slate-200);
	border-radius: 4px;
	appearance: none;
	cursor: pointer;
}

.lftpop-range::-webkit-slider-thumb {
	appearance: none;
	width: 18px;
	height: 18px;
	background: var(--lftpop-primary);
	border-radius: 50%;
	cursor: pointer;
}

/* Position Grid */
.lftpop-position-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.lftpop-position-grid-5 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 4px;
	background: var(--lftpop-slate-100);
	padding: 4px;
	border-radius: var(--lftpop-radius-sm);
}

.lftpop-position-grid-4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	background: var(--lftpop-slate-100);
	padding: 4px;
	border-radius: var(--lftpop-radius-sm);
}

.lftpop-position-grid-4 .lftpop-position-btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 4px;
	background: transparent;
	border: none;
	border-radius: var(--lftpop-radius-sm);
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-position-grid-4 .lftpop-position-btn:hover {
	color: var(--lftpop-slate-700);
}

.lftpop-position-grid-4 .lftpop-position-btn.lftpop-position-active {
	background: #fff;
	color: var(--lftpop-primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.lftpop-position-grid-4 .lftpop-position-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.lftpop-position-grid-4 .lftpop-position-btn[data-position="top_left"] .dashicons,
.lftpop-position-grid-4 .lftpop-position-btn[data-position="bottom_left"] .dashicons {
	transform: rotate(-45deg);
}

.lftpop-position-grid-4 .lftpop-position-btn[data-position="top_right"] .dashicons,
.lftpop-position-grid-4 .lftpop-position-btn[data-position="bottom_right"] .dashicons {
	transform: rotate(45deg);
}

.lftpop-position-grid-5 .lftpop-position-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px 4px;
	background: transparent;
	border: none;
	border-radius: var(--lftpop-radius-sm);
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-position-grid-5 .lftpop-position-btn:hover {
	color: var(--lftpop-slate-700);
}

.lftpop-position-grid-5 .lftpop-position-btn.lftpop-position-active {
	background: #fff;
	color: var(--lftpop-primary);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.lftpop-position-grid-5 .lftpop-position-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.lftpop-position-label {
	font-size: 10px;
	font-weight: 500;
	margin-top: 2px;
}

/* Shipping Star Icon */
.lftpop-type-star {
	font-size: 10px;
	width: 10px;
	height: 10px;
	color: #f59e0b;
	margin-left: 2px;
}

/* WooCommerce Required Warning */
.lftpop-woocommerce-warning {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	margin-top: 12px;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
	border: 1px solid #f59e0b;
	border-radius: 8px;
	color: #92400e;
	font-size: 13px;
	font-weight: 500;
}

.lftpop-woocommerce-warning .dashicons-warning {
	color: #d97706;
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.lftpop-woocommerce-warning a {
	color: #7c2d12;
	text-decoration: underline;
	font-weight: 600;
}

.lftpop-woocommerce-warning a:hover {
	color: #451a03;
}

/* Simulate Cart Slider */
.lftpop-simulate-cart {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 60;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	border: 1px solid var(--lftpop-slate-200);
	padding: 12px 16px;
	border-radius: var(--lftpop-radius-sm);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	width: 220px;
}

.lftpop-simulate-cart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.lftpop-simulate-cart-label {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--lftpop-slate-500);
	letter-spacing: 0.05em;
}

.lftpop-simulate-cart-value {
	font-size: 13px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
}

.lftpop-cart-slider {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: var(--lftpop-slate-200);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.lftpop-cart-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #0ea5e9;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lftpop-cart-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #0ea5e9;
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lftpop-simulate-cart-range {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 10px;
	color: var(--lftpop-slate-400);
}

.lftpop-position-btn {
	padding: 10px 8px;
	font-size: 12px;
	font-weight: 500;
	text-transform: capitalize;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-sm);
	color: var(--lftpop-slate-600);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-position-btn:hover {
	background: var(--lftpop-slate-50);
}

.lftpop-position-btn.lftpop-position-active {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.3);
	color: var(--lftpop-primary);
	box-shadow: var(--lftpop-shadow-sm);
}

/* Settings Box */
.lftpop-settings-box {
	padding: 12px;
	background: var(--lftpop-slate-50);
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-md);
	margin-bottom: 16px;
}

/* Toggle Buttons */
.lftpop-toggle-buttons {
	display: flex;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 6px;
	padding: 4px;
}

.lftpop-toggle-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 12px;
	font-size: 12px;
	text-transform: capitalize;
	background: transparent;
	border: none;
	border-radius: 4px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-toggle-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.lftpop-toggle-btn:hover {
	color: var(--lftpop-slate-700);
}

.lftpop-toggle-btn.lftpop-toggle-btn-active {
	background: rgba(99, 102, 241, 0.1);
	color: var(--lftpop-primary);
	font-weight: 500;
}

/* Vertical Direction Buttons */
.lftpop-vertical-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px 12px;
	font-size: 12px;
	background: transparent;
	border: none;
	border-radius: 4px;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-vertical-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.lftpop-vertical-btn:hover {
	color: var(--lftpop-slate-700);
}

.lftpop-vertical-btn.lftpop-vertical-btn-active {
	background: rgba(99, 102, 241, 0.1);
	color: var(--lftpop-primary);
	font-weight: 500;
}

/* Device Selector */
.lftpop-device-selector {
	display: flex;
	gap: 8px;
}

.lftpop-device-option {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px;
	font-size: 12px;
	font-weight: 500;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-sm);
	color: var(--lftpop-slate-600);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-device-option:hover {
	background: var(--lftpop-slate-50);
}

.lftpop-device-option.lftpop-device-option-active {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.3);
	color: var(--lftpop-primary);
}

.lftpop-device-option .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   Preview Panel
   ========================================================================== */

.lftpop-editor-preview {
	flex: 1;
	background: rgba(241, 245, 249, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 32px;
	position: relative;
	overflow: hidden;
}

.lftpop-preview-grid {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--lftpop-slate-400) 1px, transparent 1px);
	background-size: 20px 20px;
	opacity: 0.03;
}

/* Browser Mock */
.lftpop-browser-mock {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-xl);
	box-shadow: var(--lftpop-shadow-xl);
	overflow: hidden;
	width: 100%;
	max-width: 1000px;
	height: 90%;
	transition: all 0.5s ease;
	z-index: 1;
}

.lftpop-browser-mock.lftpop-browser-mobile {
	width: 375px;
	height: 700px;
	margin-top: 40px;
}

/* Mobile Preview Styles (popup adapts to narrow viewport) */
.lftpop-browser-mobile .lftpop-preview-overlay {
	padding: 12px;
}

.lftpop-browser-mobile .lftpop-preview-popup-wrap {
	max-width: 92% !important;
}

.lftpop-browser-mobile .lftpop-preview-popup .lftpop-popup-body {
	padding: 20px !important;
	gap: 10px !important;
}

/* Corner types dock to the bottom edge on mobile (matches frontend behavior) */
.lftpop-browser-mobile .lftpop-preview-pos-top_left,
.lftpop-browser-mobile .lftpop-preview-pos-top_right,
.lftpop-browser-mobile .lftpop-preview-pos-bottom_left,
.lftpop-browser-mobile .lftpop-preview-pos-bottom_right {
	align-items: flex-end;
	justify-content: center;
}

.lftpop-browser-mobile .lftpop-preview-type-slide_in .lftpop-preview-popup-wrap,
.lftpop-browser-mobile .lftpop-preview-type-floating_box .lftpop-preview-popup-wrap {
	max-width: 100% !important;
	width: 100% !important;
}

.lftpop-browser-mobile .lftpop-preview-bar-input {
	width: 100% !important;
	min-width: 0;
}

.lftpop-browser-mobile .lftpop-preview-bar-button {
	flex: 0 0 auto;
	justify-content: center;
}

.lftpop-browser-mobile .lftpop-preview-coupon {
	flex: 0 0 auto;
	justify-content: center;
}

.lftpop-browser-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	background: var(--lftpop-slate-50);
	border-bottom: 1px solid var(--lftpop-slate-200);
}

.lftpop-browser-dots {
	display: flex;
	gap: 6px;
}

.lftpop-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.lftpop-browser-mock .lftpop-dot-red {
	background: #fb7185;
}

.lftpop-browser-mock .lftpop-dot-yellow {
	background: #fbbf24;
}

.lftpop-browser-mock .lftpop-dot-green {
	background: #34d399;
}

.lftpop-browser-url {
	flex: 1;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-family: ui-monospace, monospace;
	color: var(--lftpop-slate-400);
}

.lftpop-browser-content {
	flex: 1;
	position: relative;
	background: #fff;
	overflow: hidden;
}

/* ==========================================================================
   Popup Preview: overlay + card inside the browser mock
   ========================================================================== */

.lftpop-preview-overlay {
	position: absolute;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	transition: background 0.3s ease;
	overflow: hidden;
}

/* Corner positions (slide_in / floating_box) */
.lftpop-preview-overlay.lftpop-preview-pos-top_left {
	align-items: flex-start;
	justify-content: flex-start;
}

.lftpop-preview-overlay.lftpop-preview-pos-top_right {
	align-items: flex-start;
	justify-content: flex-end;
}

.lftpop-preview-overlay.lftpop-preview-pos-bottom_left {
	align-items: flex-end;
	justify-content: flex-start;
}

.lftpop-preview-overlay.lftpop-preview-pos-bottom_right {
	align-items: flex-end;
	justify-content: flex-end;
}

/* Corner types get a smaller default card */
.lftpop-preview-type-slide_in .lftpop-preview-popup-wrap,
.lftpop-preview-type-floating_box .lftpop-preview-popup-wrap {
	max-width: 340px !important;
}

/* Fullscreen type fills the whole mock */
.lftpop-preview-type-fullscreen {
	padding: 0;
}

/* Popup card wrapper (magic border frame + entrance animation target) */
.lftpop-preview-popup-wrap {
	position: relative;
	z-index: 51;
}

/* Popup card */
.lftpop-preview-popup {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-width: 0;
	flex: 1;
	transition: border-radius 0.2s ease, width 0.2s ease;
}

.lftpop-preview-popup .lftpop-popup-heading {
	margin: 0;
	font-weight: 800;
	line-height: 1.15;
	position: relative;
	z-index: 2;
}

.lftpop-preview-popup .lftpop-popup-message {
	margin: 0;
	line-height: 1.55;
	opacity: 0.92;
	position: relative;
	z-index: 2;
}

.lftpop-preview-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: transparent;
	border: none;
	opacity: 0.7;
	cursor: pointer;
	z-index: 20;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: opacity 0.2s ease;
}

.lftpop-preview-popup-close:hover {
	opacity: 1;
}

/* Text Alignment Classes */
.lftpop-text-left {
	text-align: left !important;
}

.lftpop-text-center {
	text-align: center !important;
}

.lftpop-text-right {
	text-align: right !important;
}

.lftpop-preview-bar-countdown {
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: ui-monospace, monospace;
	font-weight: 700;
	font-size: 14px;
}

.lftpop-preview-bar-countdown-unit {
	background: rgba(0, 0, 0, 0.2);
	padding: 4px 8px;
	border-radius: 4px;
}

.lftpop-preview-bar-button {
	font-size: 14px;
	font-weight: 700;
	height: 36px;
	padding: 0 24px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lftpop-preview-coupon {
	font-size: 14px;
	font-weight: 700;
	height: 36px;
	padding: 0 24px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lftpop-preview-bar-close {
	position: absolute;
	background: transparent;
	border: none;
	opacity: 0.8;
	cursor: pointer;
	z-index: 20;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lftpop-preview-bar-close:hover {
	opacity: 1;
}

.lftpop-preview-bar-close svg {
	width: 16px;
	height: 16px;
}

/* Preview Form */
.lftpop-preview-bar-form {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lftpop-preview-bar-input {
	padding: 8px 16px;
	font-size: 14px;
	border: none;
	border-radius: var(--lftpop-radius-sm);
	background: rgba(255, 255, 255, 0.9);
	color: var(--lftpop-slate-900);
	outline: none;
}

.lftpop-preview-bar-input::placeholder {
	color: var(--lftpop-slate-400);
}

/* Coupon Preview */
.lftpop-preview-coupon {
	padding: 8px 16px;
	font-family: ui-monospace, monospace;
	font-weight: 700;
	transition: all 0.3s ease;
}

.lftpop-preview-coupon-dashed {
	border: 2px dashed currentColor;
	background: transparent;
}

.lftpop-preview-coupon-solid {
	border: none;
}

.lftpop-preview-coupon-outline {
	border: 2px solid currentColor;
	background: transparent;
}

/* Editor Preview Skeleton Content (larger sizes for browser mock) */
.lftpop-browser-mock .lftpop-skeleton-content {
	padding: 32px;
	margin-top: 80px;
	opacity: 0.4;
	filter: grayscale(1);
	pointer-events: none;
	user-select: none;
}

.lftpop-browser-mock .lftpop-skeleton-hero {
	height: 256px;
	background: var(--lftpop-slate-100);
	border-radius: 12px;
	margin-bottom: 32px;
}

.lftpop-browser-mock .lftpop-skeleton-grid {
	gap: 24px;
	margin-bottom: 32px;
}

.lftpop-browser-mock .lftpop-skeleton-box {
	height: 160px;
	background: var(--lftpop-slate-100);
	border-radius: 12px;
}

.lftpop-browser-mock .lftpop-skeleton-lines {
	margin-bottom: 32px;
	gap: 16px;
}

.lftpop-browser-mock .lftpop-skeleton-line {
	background: var(--lftpop-slate-100);
}

.lftpop-browser-mock .lftpop-skeleton-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 32px;
}

.lftpop-browser-mock .lftpop-skeleton-box-tall {
	height: 224px;
	background: var(--lftpop-slate-100);
	border-radius: 12px;
}

.lftpop-browser-mock .lftpop-skeleton-footer {
	height: 128px;
	background: var(--lftpop-slate-100);
	border-radius: 12px;
}

/* ==========================================================================
   Fullscreen Preview Modal
   ========================================================================== */

.lftpop-fullscreen-modal {
	position: fixed;
	inset: 0;
	background: var(--lftpop-slate-900);
	z-index: 100000;
	display: none;
}

.lftpop-fullscreen-modal.lftpop-fullscreen-active {
	display: block;
}

.lftpop-fullscreen-close {
	position: fixed;
	top: 24px;
	right: 24px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	z-index: 200;
	transition: all 0.2s ease;
}

.lftpop-fullscreen-close:hover {
	background: #000;
}

.lftpop-fullscreen-close .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.lftpop-fullscreen-viewport {
	width: 100%;
	height: 100%;
	position: relative;
	background: #fff;
}

.lftpop-fullscreen-content {
	padding: 100px 48px 48px;
	opacity: 0.3;
}

/* ==========================================================================
   Button Animation Classes
   ========================================================================== */

@keyframes lftpop-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

@keyframes lftpop-bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

@keyframes lftpop-shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-2px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(2px);
	}
}

@keyframes lftpop-glow {
	0%, 100% {
		box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
	}
	50% {
		box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
	}
}

.lftpop-effect-pulse {
	animation: lftpop-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.lftpop-effect-bounce {
	animation: lftpop-bounce 1s ease-in-out infinite;
}

.lftpop-effect-shake {
	animation: lftpop-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both infinite;
	animation-delay: 2s;
}

.lftpop-effect-glow {
	animation: lftpop-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==========================================================================
   Timer Design Styles (20 Designs)
   ========================================================================== */

/* Base countdown container */
.lftpop-preview-bar-countdown {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: ui-monospace, monospace;
	font-weight: 700;
	font-size: 14px;
}

/* Timer Design Selector Grid */
.lftpop-timer-design-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.lftpop-timer-design-btn {
	aspect-ratio: 1;
	border-radius: var(--lftpop-radius-sm);
	border: 1px solid var(--lftpop-slate-200);
	background: var(--lftpop-slate-50);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: all 0.2s ease;
	padding: 4px;
}

.lftpop-timer-design-btn:hover {
	border-color: #f59e0b;
	box-shadow: var(--lftpop-shadow-sm);
}

.lftpop-timer-design-btn.lftpop-timer-design-active {
	background: #fff;
	border-color: #f59e0b;
	box-shadow: 0 0 0 1px #f59e0b;
}

.lftpop-timer-preview-mini {
	transform: scale(0.55);
	transform-origin: center;
	pointer-events: none;
	user-select: none;
	color: var(--lftpop-slate-800);
}

/* Plain Timer */
.lftpop-timer-plain {
	font-family: ui-monospace, monospace;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/* Classic Timer (default) */
.lftpop-timer-classic .lftpop-timer-unit {
	background: rgba(0, 0, 0, 0.2);
	padding: 4px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
}

/* Solid Timer */
.lftpop-timer-solid {
	color: #000;
}

.lftpop-timer-solid .lftpop-timer-unit {
	background: #fff;
	padding: 4px 6px;
	border-radius: 6px;
	min-width: 28px;
	text-align: center;
	box-shadow: var(--lftpop-shadow-sm);
}

/* Outline Timer */
.lftpop-timer-outline .lftpop-timer-unit {
	border: 1px solid currentColor;
	padding: 4px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
}

/* Circle Timer */
.lftpop-timer-circle {
	gap: 6px;
	font-size: 12px;
}

.lftpop-timer-circle .lftpop-timer-unit {
	width: 32px;
	height: 32px;
	border: 2px solid currentColor;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Pill Timer */
.lftpop-timer-pill {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	padding: 4px 12px;
	letter-spacing: 0.1em;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Split Timer */
.lftpop-timer-split {
	background: #fff;
	color: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--lftpop-shadow-sm);
	border: 1px solid var(--lftpop-slate-200);
}

.lftpop-timer-split .lftpop-timer-unit {
	padding: 4px 8px;
	background: var(--lftpop-slate-50);
}

.lftpop-timer-split .lftpop-timer-divider {
	width: 1px;
	height: 16px;
	background: var(--lftpop-slate-300);
}

/* Digital Timer */
.lftpop-timer-digital {
	background: rgba(0, 0, 0, 0.8);
	color: #34d399;
	padding: 4px 12px;
	border-radius: 4px;
	border: 1px solid #065f46;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
	text-shadow: 0 0 5px rgba(52, 211, 153, 0.5);
}

/* Cards Timer */
.lftpop-timer-cards {
	color: var(--lftpop-slate-800);
}

.lftpop-timer-cards .lftpop-timer-unit {
	background: #fff;
	padding: 4px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
	box-shadow: var(--lftpop-shadow-md);
	border-bottom: 2px solid var(--lftpop-slate-200);
}

/* Neon Timer */
.lftpop-timer-neon {
	border: 2px solid currentColor;
	border-radius: 8px;
	padding: 2px 12px;
	text-shadow: 0 0 10px currentColor;
	box-shadow: inset 0 0 10px currentColor;
}

/* Bubbles Timer */
.lftpop-timer-bubbles {
	gap: 6px;
	font-size: 12px;
	color: #fff;
}

.lftpop-timer-bubbles .lftpop-timer-unit {
	width: 32px;
	height: 32px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	box-shadow: var(--lftpop-shadow-sm);
}

/* Blocks Timer */
.lftpop-timer-blocks {
	gap: 2px;
	color: #fff;
}

.lftpop-timer-blocks .lftpop-timer-unit {
	background: var(--lftpop-slate-900);
	padding: 4px 6px;
	min-width: 28px;
	text-align: center;
}

/* Sketch Timer */
.lftpop-timer-sketch .lftpop-timer-unit {
	border: 2px dashed currentColor;
	padding: 4px 6px;
	border-radius: 8px;
	min-width: 28px;
	text-align: center;
}

/* Flip Timer */
.lftpop-timer-flip {
	color: #fff;
}

.lftpop-timer-flip .lftpop-timer-unit {
	background: linear-gradient(to bottom, var(--lftpop-slate-700), var(--lftpop-slate-800));
	padding: 4px 6px;
	border-radius: 4px;
	min-width: 28px;
	text-align: center;
	border-bottom: 2px solid rgba(0, 0, 0, 0.2);
	box-shadow: var(--lftpop-shadow-sm);
}

/* Cyber Timer */
.lftpop-timer-cyber {
	border-left: 2px solid currentColor;
	border-right: 2px solid currentColor;
	padding: 4px 12px;
	gap: 8px;
}

.lftpop-timer-cyber .lftpop-timer-divider {
	opacity: 0.5;
}

/* Elegant Timer */
.lftpop-timer-elegant {
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.05em;
	font-size: 16px;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.lftpop-timer-elegant .lftpop-timer-label {
	font-size: 10px;
	font-style: normal;
	opacity: 0.7;
	margin-left: 2px;
}

/* Paper Timer */
.lftpop-timer-paper {
	gap: 8px;
	color: var(--lftpop-slate-800);
	transform: rotate(-1deg);
}

.lftpop-timer-paper .lftpop-timer-unit {
	background: #fef3c7;
	padding: 4px 6px;
	box-shadow: var(--lftpop-shadow-sm);
	border: 1px solid #fde68a;
}

.lftpop-timer-paper .lftpop-timer-unit:nth-child(1) {
	transform: rotate(2deg);
}

.lftpop-timer-paper .lftpop-timer-unit:nth-child(2) {
	transform: rotate(-1deg);
}

.lftpop-timer-paper .lftpop-timer-unit:nth-child(3) {
	transform: rotate(1deg);
}

/* Underline Timer */
.lftpop-timer-underline {
	gap: 8px;
}

.lftpop-timer-underline .lftpop-timer-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lftpop-timer-underline .lftpop-timer-line {
	width: 100%;
	height: 2px;
	background: currentColor;
	opacity: 0.5;
	margin-top: 2px;
}

/* Thick Timer */
.lftpop-timer-thick {
	border: 4px solid currentColor;
	padding: 2px 8px;
	font-weight: 900;
	letter-spacing: -0.05em;
}

/* LCD Timer */
.lftpop-timer-lcd {
	background: #000;
	color: #84cc16;
	padding: 2px 8px;
	border: 2px solid #3f6212;
	border-radius: 2px;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lftpop-timer-lcd .lftpop-timer-unit {
	opacity: 0.8;
}

@keyframes lftpop-blink {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

.lftpop-timer-lcd .lftpop-timer-colon {
	animation: lftpop-blink 1s ease-in-out infinite;
}

/* ==========================================================================
   Create Selection Page
   ========================================================================== */

.lftpop-create-selection {
	min-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px;
	position: relative;
	overflow: hidden;
}

.lftpop-create-selection-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 384px;
	background: linear-gradient(to bottom, var(--lftpop-slate-100), transparent);
	z-index: 0;
}

.lftpop-create-selection-content {
	max-width: 1200px;
	width: 100%;
	position: relative;
	z-index: 10;
}

/* Create Selection Header */
.lftpop-create-header {
	text-align: center;
	margin-bottom: 48px;
	position: relative;
}

.lftpop-create-back {
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	color: var(--lftpop-slate-400);
	text-decoration: none;
	transition: all 0.2s ease;
}

.lftpop-create-back:hover {
	background: #fff;
	border-color: var(--lftpop-slate-200);
	color: var(--lftpop-slate-600);
	box-shadow: var(--lftpop-shadow-sm);
}

.lftpop-create-back .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.lftpop-create-icon {
	display: inline-flex;
	padding: 12px;
	background: rgba(99, 102, 241, 0.1);
	color: var(--lftpop-primary);
	border-radius: 16px;
	margin-bottom: 8px;
	box-shadow: var(--lftpop-shadow-sm);
	border: 1px solid rgba(99, 102, 241, 0.1);
}

.lftpop-create-icon .dashicons {
	font-size: 32px;
	width: 32px;
	height: 32px;
}

.lftpop-create-header h1 {
	font-size: 40px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0 0 16px 0;
	letter-spacing: -0.025em;
}

.lftpop-create-header p {
	font-size: 20px;
	color: var(--lftpop-slate-500);
	margin: 0;
}

/* Selection Cards */
.lftpop-selection-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-bottom: 48px;
}

@media (max-width: 900px) {
	.lftpop-selection-cards {
		grid-template-columns: 1fr;
	}
}

.lftpop-selection-card {
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 24px;
	padding: 8px;
	box-shadow: var(--lftpop-shadow-sm);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
	cursor: pointer;
}

.lftpop-selection-card:hover {
	box-shadow: var(--lftpop-shadow-xl);
	transform: translateY(-6px);
}

.lftpop-selection-card-scratch:hover {
	border-color: rgba(99, 102, 241, 0.3);
}

.lftpop-selection-card-template:hover {
	border-color: rgba(16, 185, 129, 0.3);
}

/* Selection Card Preview */
.lftpop-selection-preview {
	background: var(--lftpop-slate-100);
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--lftpop-slate-200);
	position: relative;
	height: 256px;
	transition: background 0.3s ease;
}

.lftpop-selection-card-scratch:hover .lftpop-selection-preview {
	background: rgba(99, 102, 241, 0.05);
}

.lftpop-selection-card-template:hover .lftpop-selection-preview {
	background: rgba(16, 185, 129, 0.05);
}

.lftpop-selection-browser {
	position: absolute;
	left: 24px;
	right: 24px;
	top: 40px;
	bottom: 0;
	background: #fff;
	border-radius: 12px 12px 0 0;
	box-shadow: var(--lftpop-shadow-lg);
	border: 1px solid var(--lftpop-slate-200);
	overflow: hidden;
}

.lftpop-selection-browser-header {
	height: 32px;
	background: var(--lftpop-slate-50);
	border-bottom: 1px solid var(--lftpop-slate-100);
	display: flex;
	align-items: center;
	padding: 0 12px;
	gap: 6px;
}

.lftpop-selection-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--lftpop-slate-300);
}

.lftpop-selection-card-template .lftpop-selection-dot:nth-child(1) {
	background: #fca5a5;
}

.lftpop-selection-card-template .lftpop-selection-dot:nth-child(2) {
	background: #fcd34d;
}

.lftpop-selection-card-template .lftpop-selection-dot:nth-child(3) {
	background: #6ee7b7;
}

.lftpop-selection-browser-body {
	position: relative;
	flex: 1;
	background: var(--lftpop-slate-50);
	padding: 16px;
}

/* Simple Bar Preview */
.lftpop-selection-bar-simple {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	background: var(--lftpop-slate-900);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	box-shadow: var(--lftpop-shadow-md);
	transition: transform 0.5s ease;
	transform-origin: top;
}

.lftpop-selection-card:hover .lftpop-selection-bar-simple {
	transform: scaleY(1.02);
}

.lftpop-selection-bar-simple-text {
	width: 96px;
	height: 8px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

.lftpop-selection-bar-simple-btn {
	width: 64px;
	height: 20px;
	background: #fff;
	border-radius: 4px;
	font-size: 8px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lftpop-slate-900);
}

/* Fancy Bar Preview */
.lftpop-selection-bar-fancy {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 48px;
	background: linear-gradient(to right, #f43f5e, #f97316);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	box-shadow: var(--lftpop-shadow-md);
	z-index: 10;
	transition: transform 0.5s ease;
	transform-origin: top;
}

.lftpop-selection-card:hover .lftpop-selection-bar-fancy {
	transform: scaleY(1.02);
}

.lftpop-selection-bar-fancy-left {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lftpop-selection-bar-fancy-text {
	width: 128px;
	height: 8px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
}

.lftpop-selection-bar-fancy-timer {
	display: flex;
	gap: 4px;
}

.lftpop-selection-bar-fancy-timer-unit {
	width: 16px;
	height: 12px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}

.lftpop-selection-bar-fancy-btn {
	height: 24px;
	padding: 0 12px;
	background: #fff;
	border-radius: 4px;
	font-size: 8px;
	font-weight: 700;
	color: #ea580c;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed transparent;
}

/* Selection Skeleton */
.lftpop-selection-skeleton {
	margin-top: 56px;
	opacity: 0.2;
}

.lftpop-selection-skeleton-hero {
	height: 48px;
	background: var(--lftpop-slate-400);
	border-radius: 8px;
	margin-bottom: 12px;
}

.lftpop-selection-skeleton-row {
	display: flex;
	gap: 10px;
}

.lftpop-selection-skeleton-box {
	height: 32px;
	background: var(--lftpop-slate-400);
	border-radius: 6px;
	flex: 1;
}

.lftpop-selection-skeleton-wide {
	flex: 2;
}

.lftpop-selection-skeleton-lines {
	margin-top: 64px;
	space-y: 12px;
}

.lftpop-selection-skeleton-line {
	height: 16px;
	background: var(--lftpop-slate-400);
	border-radius: 4px;
}

.lftpop-selection-skeleton-line-full {
	width: 100%;
}

.lftpop-selection-skeleton-line-3-4 {
	width: 75%;
}

.lftpop-selection-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 16px;
}

.lftpop-selection-skeleton-grid-box {
	height: 64px;
	background: var(--lftpop-slate-400);
	border-radius: 4px;
}

/* Selection Card Info */
.lftpop-selection-info {
	padding: 32px;
}

.lftpop-selection-info-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.lftpop-selection-info-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lftpop-slate-100);
	border-radius: 8px;
	color: var(--lftpop-slate-600);
	transition: all 0.3s ease;
}

.lftpop-selection-card-scratch:hover .lftpop-selection-info-icon {
	background: var(--lftpop-primary);
	color: #fff;
}

.lftpop-selection-card-template:hover .lftpop-selection-info-icon {
	background: var(--lftpop-success);
	color: #fff;
}

.lftpop-selection-info-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.lftpop-selection-info h3 {
	font-size: 24px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0;
	transition: color 0.3s ease;
}

.lftpop-selection-card-scratch:hover .lftpop-selection-info h3 {
	color: var(--lftpop-primary);
}

.lftpop-selection-card-template:hover .lftpop-selection-info h3 {
	color: var(--lftpop-success);
}

.lftpop-selection-info p {
	font-size: 15px;
	color: var(--lftpop-slate-500);
	line-height: 1.6;
	margin: 0;
}

/* Canvas Templates (create-selection page) */
.lftpop-canvas-templates {
	margin-bottom: 48px;
}

.lftpop-canvas-templates-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.lftpop-canvas-templates-header h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0;
	letter-spacing: -0.01em;
}

.lftpop-canvas-templates-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--lftpop-indigo-50);
	color: var(--lftpop-indigo-600);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.lftpop-canvas-templates-header p {
	flex-basis: 100%;
	font-size: 15px;
	color: var(--lftpop-slate-500);
	margin: 0;
}

.lftpop-canvas-templates-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 1100px) {
	.lftpop-canvas-templates-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.lftpop-canvas-templates-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.lftpop-canvas-templates-grid {
		grid-template-columns: 1fr;
	}
}

.lftpop-canvas-template-card {
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 16px;
	padding: 8px;
	box-shadow: var(--lftpop-shadow-sm);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	transition: all 0.25s ease;
}

.lftpop-canvas-template-card:hover {
	box-shadow: var(--lftpop-shadow-lg);
	transform: translateY(-4px);
	border-color: rgba(99, 102, 241, 0.35);
}

.lftpop-canvas-template-card:focus-visible {
	outline: 2px solid var(--lftpop-primary);
	outline-offset: 2px;
}

.lftpop-canvas-template-preview {
	position: relative;
	height: 156px;
	border-radius: 12px;
	background: var(--lftpop-slate-100);
	border: 1px solid var(--lftpop-slate-200);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: background 0.25s ease;
}

.lftpop-canvas-template-card:hover .lftpop-canvas-template-preview {
	background: rgba(99, 102, 241, 0.06);
}

/* Skeleton mock of the design: a mini card with colour-true blocks. */
.lftpop-canvas-template-mock {
	width: 76%;
	padding: 14px 12px;
	border-radius: 10px;
	box-shadow: var(--lftpop-shadow-md);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	overflow: hidden;
}

.lftpop-canvas-template-mock-shape {
	height: 24px;
	width: 100%;
	border-radius: 6px;
	flex-shrink: 0;
}

.lftpop-canvas-template-mock-shape:first-child {
	width: calc(100% + 24px);
	margin: -14px 0 4px;
	height: 28px;
	border-radius: 0;
}

.lftpop-canvas-template-mock-text {
	height: 7px;
	width: 68%;
	border-radius: 4px;
	opacity: 0.32;
	flex-shrink: 0;
}

.lftpop-canvas-template-mock-text.is-lg {
	height: 12px;
	width: 86%;
	border-radius: 5px;
	opacity: 0.92;
}

.lftpop-canvas-template-mock-text.is-sm {
	height: 5px;
	width: 46%;
	opacity: 0.55;
}

.lftpop-canvas-template-mock-button {
	height: 22px;
	width: 58%;
	border-radius: 6px;
	margin-top: 3px;
	flex-shrink: 0;
}

.lftpop-canvas-template-mock-coupon {
	box-sizing: border-box;
	height: 22px;
	width: 62%;
	margin-top: 3px;
	border-radius: 6px;
	border: 1.5px dashed currentColor;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	flex-shrink: 0;
}

.lftpop-canvas-template-mock-coupon.is-solid {
	border-color: transparent;
}

.lftpop-canvas-template-mock-coupon.is-outline {
	border-style: solid;
}

.lftpop-canvas-template-mock-image {
	height: 34px;
	width: 70%;
	border-radius: 6px;
	flex-shrink: 0;
}

.lftpop-canvas-template-blank .lftpop-canvas-template-preview {
	background: #fff;
	border-style: dashed;
	color: var(--lftpop-slate-400);
	transition: all 0.25s ease;
}

.lftpop-canvas-template-blank:hover .lftpop-canvas-template-preview {
	color: var(--lftpop-primary);
	border-color: rgba(99, 102, 241, 0.4);
}

.lftpop-canvas-template-blank .lftpop-canvas-template-preview .dashicons {
	font-size: 36px;
	width: 36px;
	height: 36px;
}

.lftpop-canvas-template-info {
	padding: 14px 12px 10px;
}

.lftpop-canvas-template-info h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0 0 4px;
	transition: color 0.25s ease;
}

.lftpop-canvas-template-card:hover .lftpop-canvas-template-info h3 {
	color: var(--lftpop-primary);
}

.lftpop-canvas-template-info p {
	font-size: 13px;
	color: var(--lftpop-slate-500);
	line-height: 1.5;
	margin: 0;
}

/* Policy Footer */
.lftpop-create-footer {
	text-align: center;
	padding-top: 32px;
	border-top: 1px solid var(--lftpop-slate-200);
}

.lftpop-policy-box {
	display: inline-flex;
	align-items: flex-start;
	gap: 12px;
	background: rgba(99, 102, 241, 0.05);
	border: 1px solid rgba(99, 102, 241, 0.1);
	padding: 24px;
	border-radius: 16px;
	max-width: 800px;
	text-align: left;
}

.lftpop-policy-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(99, 102, 241, 0.1);
	border-radius: 50%;
	color: var(--lftpop-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

.lftpop-policy-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.lftpop-policy-text {
	font-size: 14px;
	color: var(--lftpop-slate-700);
	line-height: 1.6;
	margin: 0;
}

.lftpop-policy-title {
	font-weight: 700;
	color: var(--lftpop-primary);
	display: block;
	margin-bottom: 4px;
}

.lftpop-policy-highlight {
	font-weight: 700;
	color: var(--lftpop-primary);
}

.lftpop-policy-underline {
	font-weight: 600;
	text-decoration: underline;
}

.lftpop-policy-once {
	font-weight: 700;
	color: var(--lftpop-slate-900);
	background: #fef08a;
	padding: 0 4px;
	border-radius: 2px;
}

/* ==========================================================================
   ULTRA Badge
   ========================================================================== */

.lftpop-ultra-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: linear-gradient(to right, #fcd34d, #eab308);
	color: #451a03;
	font-size: 10px;
	font-weight: 900;
	padding: 2px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	border: 1px solid #fef08a;
	user-select: none;
	transition: transform 0.15s ease;
}

.lftpop-ultra-badge:hover {
	transform: scale(1.05);
}

.lftpop-ultra-badge .dashicons {
	font-size: 10px;
	width: 10px;
	height: 10px;
	line-height: 10px;
}

/* ULTRA Badge Inline (smaller, for toggle rows) */
.lftpop-ultra-badge-inline {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: linear-gradient(to right, #fcd34d, #eab308);
	color: #451a03;
	font-size: 8px;
	font-weight: 900;
	padding: 1px 4px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	user-select: none;
}

.lftpop-ultra-badge-inline .dashicons {
	font-size: 8px;
	width: 8px;
	height: 8px;
	line-height: 8px;
}

/* Toggle Label Group (label + badge + hint) */
.lftpop-toggle-label-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.lftpop-toggle-label-group .lftpop-label {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 0;
}

.lftpop-toggle-hint {
	font-size: 10px;
	font-weight: 500;
	color: #10b981;
	font-style: italic;
}

/* ==========================================================================
   Scratch-off Coupon Styles (ULTRA)
   ========================================================================== */

.lftpop-scratch-color-section {
	margin-top: 4px;
	margin-bottom: 12px;
	padding: 12px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	animation: lftpopFadeIn 0.2s ease;
}

.lftpop-scratch-color-buttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-top: 8px;
}

.lftpop-scratch-color-btn {
	font-size: 10px;
	font-weight: 700;
	padding: 8px 12px;
	border-radius: 6px;
	border: 2px solid var(--lftpop-slate-200);
	background: #ffffff;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-scratch-color-btn:hover {
	border-color: #a7f3d0;
	color: #059669;
}

.lftpop-scratch-color-btn.lftpop-scratch-active {
	background: #ffffff;
	border-color: #10b981;
	color: #065f46;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* Scratch-off Preview Container */
.lftpop-scratch-off-container {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lftpop-scratch-canvas {
	border-radius: inherit;
}

.lftpop-scratch-code {
	font-size: 14px;
	user-select: none;
	border-radius: inherit;
}

/* ==========================================================================
   Magic Border Styles (ULTRA)
   ========================================================================== */

/* Editor UI: Toggle and Grid */
.lftpop-magic-border-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(to right, #fdf4ff, #eef2ff);
	border: 1px solid #e0e7ff;
	padding: 8px 12px;
	border-radius: 8px;
	margin-bottom: 12px;
}

.lftpop-magic-border-label {
	font-size: 12px;
	font-weight: 700;
	color: #312e81;
	display: flex;
	align-items: center;
	gap: 6px;
}

.lftpop-magic-border-label .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	color: #8b5cf6;
}

.lftpop-magic-border-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	max-height: 200px;
	overflow-y: auto;
	padding: 12px;
	background: linear-gradient(to right, #fdf4ff, #eef2ff);
	border: 1px solid #e0e7ff;
	border-radius: 12px;
	margin-bottom: 12px;
}

.lftpop-magic-border-btn {
	font-size: 10px;
	font-weight: 700;
	padding: 8px 4px;
	border-radius: 6px;
	border: 2px solid var(--lftpop-slate-200);
	background: #ffffff;
	color: var(--lftpop-slate-600);
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
}

.lftpop-magic-border-btn:hover {
	border-color: #c4b5fd;
	color: #7c3aed;
}

.lftpop-magic-border-btn.lftpop-active {
	background: #ffffff;
	border-color: #8b5cf6;
	color: #5b21b6;
	box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* Preview: Magic Border Element */
.lftpop-magic-border {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 50;
	background-size: 200% 100%;
}

/* For vertical bars: magic border on the side instead of bottom */
.lftpop-preview-bar-left .lftpop-magic-border {
	bottom: auto;
	right: 0;
	left: auto;
	top: 0;
	width: 3px;
	height: 100%;
	background-size: 100% 200%;
}

.lftpop-preview-bar-right .lftpop-magic-border {
	bottom: auto;
	right: auto;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background-size: 100% 200%;
}

/* For bottom bar: magic border on top (inner side) */
.lftpop-preview-bar-bottom .lftpop-magic-border {
	bottom: auto;
	top: 0;
}

/* For floating bar: magic border on top */
.lftpop-preview-bar-floating .lftpop-magic-border {
	bottom: auto;
	top: 0;
}

/* Magic Border Flow Animation */
.lftpop-magic-flow {
	animation: lftpopMagicFlow 3s linear infinite;
}

.lftpop-preview-bar-left .lftpop-magic-flow,
.lftpop-preview-bar-right .lftpop-magic-flow {
	animation: lftpopMagicFlowVertical 3s linear infinite;
}

@keyframes lftpopMagicFlow {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

@keyframes lftpopMagicFlowVertical {
	0% { background-position: 50% 0%; }
	100% { background-position: 50% 200%; }
}

/* ==========================================================================
   Animated Backgrounds Keyframes
   ========================================================================== */

@keyframes lftpopAnimGradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes lftpopAnimScroll {
	0% { background-position: 0 0; }
	100% { background-position: 100px 100px; }
}

@keyframes lftpopAnimPulseColor {
	0%, 100% { background-color: #000; box-shadow: 0 0 10px #6366f1; }
	50% { background-color: #1e1b4b; box-shadow: 0 0 30px #6366f1, 0 0 60px #8b5cf6; }
}

@keyframes lftpopAnimSnow {
	0% { background-position: 0 0, 25px 25px; }
	100% { background-position: 50px 100px, 75px 125px; }
}

@keyframes lftpopAnimShine {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@keyframes lftpopAnimMatrix {
	0% { background-position: 0 0; }
	100% { background-position: 50px 50px; }
}

@keyframes lftpopAnimPulseScale {
	0%, 100% { background-size: 100% 100%; }
	50% { background-size: 150% 150%; }
}

@keyframes lftpopAnimUp {
	0% { background-position: 0 0; }
	100% { background-position: 0 -100px; }
}

@keyframes lftpopAnimShift {
	0% { background-position: 50% 0%; }
	100% { background-position: 60% 60%; }
}

/* ==========================================================================
   Entrance Animations
   ========================================================================== */

.lftpop-entrance-slide_down {
	animation: lftpopSlideDown 0.6s ease-out forwards;
}
@keyframes lftpopSlideDown {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.lftpop-entrance-slide_up {
	animation: lftpopSlideUp 0.6s ease-out forwards;
}
@keyframes lftpopSlideUp {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.lftpop-entrance-slide_left {
	animation: lftpopSlideLeft 0.6s ease-out forwards;
}
@keyframes lftpopSlideLeft {
	from { transform: translateX(-100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.lftpop-entrance-slide_right {
	animation: lftpopSlideRight 0.6s ease-out forwards;
}
@keyframes lftpopSlideRight {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}

.lftpop-entrance-fade_in {
	animation: lftpopFadeIn 0.8s ease-out forwards;
}
@keyframes lftpopFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.lftpop-entrance-zoom_in {
	animation: lftpopZoomIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes lftpopZoomIn {
	from { transform: scale(0.8); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.lftpop-entrance-bounce_in {
	animation: lftpopBounceIn 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
@keyframes lftpopBounceIn {
	0% { opacity: 0; transform: scale3d(.3, .3, .3); }
	20% { transform: scale3d(1.1, 1.1, 1.1); }
	40% { transform: scale3d(.9, .9, .9); }
	60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80% { transform: scale3d(.97, .97, .97); }
	100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

.lftpop-entrance-swing {
	transform-origin: top center;
	animation: lftpopSwing 1s forwards;
}
@keyframes lftpopSwing {
	20% { transform: rotate3d(0, 0, 1, 15deg); }
	40% { transform: rotate3d(0, 0, 1, -10deg); }
	60% { transform: rotate3d(0, 0, 1, 5deg); }
	80% { transform: rotate3d(0, 0, 1, -5deg); }
	100% { transform: rotate3d(0, 0, 1, 0deg); }
}

.lftpop-entrance-flip_x {
	backface-visibility: visible !important;
	animation: lftpopFlipInX 1s forwards;
}
@keyframes lftpopFlipInX {
	from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
	40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
	60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
	80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
	to { transform: perspective(400px); }
}

/* ==========================================================================
   Attention Seekers
   ========================================================================== */

.lftpop-attention-wiggle {
	animation: lftpopWiggle 2s ease-in-out infinite;
}
@keyframes lftpopWiggle {
	0%, 50%, 100% { transform: rotate(0deg); }
	5%, 15% { transform: rotate(-3deg); }
	10%, 20% { transform: rotate(3deg); }
	25% { transform: rotate(0deg); }
}

.lftpop-attention-pulse {
	animation: lftpopPulseScale 2s infinite;
}
@keyframes lftpopPulseScale {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.lftpop-attention-shake {
	animation: lftpopShake 3s cubic-bezier(.36,.07,.19,.97) infinite;
	transform: translate3d(0, 0, 0);
}
@keyframes lftpopShake {
	0%, 50%, 100% { transform: translate3d(0, 0, 0); }
	5%, 15%, 25%, 35%, 45% { transform: translate3d(-1px, 0, 0); }
	10%, 20%, 30%, 40% { transform: translate3d(1px, 0, 0); }
}

.lftpop-attention-heartbeat {
	animation: lftpopHeartbeat 2s ease-in-out infinite;
}
@keyframes lftpopHeartbeat {
	from { transform: scale(1); transform-origin: center center; animation-timing-function: ease-out; }
	10% { transform: scale(0.91); animation-timing-function: ease-in; }
	17% { transform: scale(0.98); animation-timing-function: ease-out; }
	33% { transform: scale(0.87); animation-timing-function: ease-in; }
	45% { transform: scale(1); animation-timing-function: ease-out; }
}

.lftpop-attention-wobble {
	animation: lftpopWobble 2s infinite;
}
@keyframes lftpopWobble {
	0%, 100% { transform: translateX(0%); }
	15% { transform: translateX(-25%) rotate(-5deg); }
	30% { transform: translateX(20%) rotate(3deg); }
	45% { transform: translateX(-15%) rotate(-3deg); }
	60% { transform: translateX(10%) rotate(2deg); }
	75% { transform: translateX(-5%) rotate(-1deg); }
}

.lftpop-attention-flash {
	animation: lftpopFlash 3s infinite;
}
@keyframes lftpopFlash {
	0%, 50%, 100% { opacity: 1; }
	25%, 75% { opacity: 0; }
}

.lftpop-attention-jello {
	animation: lftpopJello 2s infinite;
	transform-origin: center;
}
@keyframes lftpopJello {
	from, 11.1%, to { transform: translate3d(0, 0, 0); }
	22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
	33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
	44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
	55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
	66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
	77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
	88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

.lftpop-attention-rubber_band {
	animation: lftpopRubberBand 2s infinite;
}
@keyframes lftpopRubberBand {
	from { transform: scale3d(1, 1, 1); }
	30% { transform: scale3d(1.25, 0.75, 1); }
	40% { transform: scale3d(0.75, 1.25, 1); }
	50% { transform: scale3d(1.15, 0.85, 1); }
	65% { transform: scale3d(0.95, 1.05, 1); }
	75% { transform: scale3d(1.05, 0.95, 1); }
	to { transform: scale3d(1, 1, 1); }
}

.lftpop-attention-tada {
	animation: lftpopTada 2s infinite;
}
@keyframes lftpopTada {
	from { transform: scale3d(1, 1, 1); }
	10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
	to { transform: scale3d(1, 1, 1); }
}

/* ==========================================================================
   Particle Atmosphere Animations
   ========================================================================== */

@keyframes lftpopParticleFall {
	0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
	100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
}

@keyframes lftpopParticleFallVertical {
	0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
	100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

@keyframes lftpopParticleRain {
	0% { transform: translateY(-20px); opacity: 1; }
	100% { transform: translateY(100px); opacity: 0.3; }
}

@keyframes lftpopParticleRainVertical {
	0% { transform: translateY(-20px); opacity: 1; }
	100% { transform: translateY(100vh); opacity: 0.3; }
}

@keyframes lftpopParticleFloat {
	0% { transform: translateY(0); opacity: 0; }
	10% { opacity: 1; }
	100% { transform: translateY(-100px); opacity: 0; }
}

@keyframes lftpopParticleFloatVertical {
	0% { transform: translateY(0); opacity: 0; }
	10% { opacity: 1; }
	100% { transform: translateY(-100vh); opacity: 0; }
}

@keyframes lftpopParticleFire {
	0% { transform: translateY(0) scale(1); opacity: 0.6; }
	50% { transform: translateY(-30px) scale(1.2); opacity: 0.8; }
	100% { transform: translateY(-60px) scale(0.5); opacity: 0; }
}

@keyframes lftpopParticleFireVertical {
	0% { transform: translateY(0) scale(1); opacity: 0.6; }
	50% { transform: translateY(-50vh) scale(1.2); opacity: 0.8; }
	100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

@keyframes lftpopBirdFly {
	0% { transform: translateY(0) translateX(0); opacity: 0; }
	10% { opacity: 1; }
	25% { transform: translateY(-30px) translateX(15px); }
	50% { transform: translateY(-50px) translateX(-10px); }
	75% { transform: translateY(-80px) translateX(20px); }
	100% { transform: translateY(-120px) translateX(0); opacity: 0; }
}

@keyframes lftpopBirdFlyVertical {
	0% { transform: translateY(0) translateX(0); opacity: 0; }
	10% { opacity: 1; }
	25% { transform: translateY(-25vh) translateX(15px); }
	50% { transform: translateY(-50vh) translateX(-10px); }
	75% { transform: translateY(-75vh) translateX(20px); }
	100% { transform: translateY(-100vh) translateX(0); opacity: 0; }
}

/* ==========================================================================
   Glass Effect
   ========================================================================== */

.lftpop-glass-effect {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.lftpop-glass-effect .lftpop-bar-background {
	opacity: 0.5;
}

/* ==========================================================================
   Video Bubble
   ========================================================================== */

.lftpop-video-bubble {
	position: relative;
	flex-shrink: 0;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.lftpop-video-bubble:hover {
	transform: scale(1.05);
}

.lftpop-video-bubble-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	animation: lftpopPing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.lftpop-video-bubble-pulse {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	animation: lftpopPulseScale 2s ease-in-out infinite;
}

.lftpop-video-bubble-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid #fff;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	position: relative;
	background: #000;
}

.lftpop-video-bubble-thumb {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0.9;
}

.lftpop-video-bubble-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
}

.lftpop-video-bubble-play .dashicons {
	color: #fff;
	font-size: 12px;
	width: 12px;
	height: 12px;
}

.lftpop-video-bubble-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 12px;
	height: 12px;
	background: #ef4444;
	border-radius: 50%;
	border: 2px solid #fff;
}

/* Video Modal */
.lftpop-video-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.85);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.lftpop-video-modal {
	position: relative;
	width: 100%;
	max-width: 900px;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.lftpop-video-modal-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.lftpop-video-modal-close:hover {
	opacity: 1;
}

.lftpop-video-modal-content {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
}

.lftpop-video-modal-content iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@keyframes lftpopPing {
	75%, 100% {
		transform: scale(2);
		opacity: 0;
	}
}

/* ==========================================================================
   Progress Bar (Shipping)
   ========================================================================== */

.lftpop-progress-bar {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 9999px;
	overflow: hidden;
	position: relative;
}

.lftpop-progress-bar-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: #fff;
	transition: width 0.5s ease-out;
	border-radius: 9999px;
}

.lftpop-progress-bar-horizontal {
	height: 12px;
	width: 128px;
}

.lftpop-progress-bar-vertical {
	width: 12px;
	height: 128px;
}

.lftpop-progress-bar-vertical .lftpop-progress-bar-fill {
	width: 100%;
	height: auto;
	bottom: 0;
	top: auto;
}

/* ==========================================================================
   Animated Background Grid (Editor)
   ========================================================================== */

.lftpop-anim-bg-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	padding: 4px;
}

.lftpop-anim-bg-btn {
	aspect-ratio: 1;
	border-radius: 6px;
	border: 2px solid var(--lftpop-slate-200);
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: var(--lftpop-shadow-sm);
	min-width: 0;
	padding: 0;
	font-size: 10px;
	font-weight: 700;
	color: var(--lftpop-slate-400);
	background: #fff;
}

.lftpop-anim-bg-btn:hover {
	transform: scale(1.05);
}

.lftpop-anim-bg-btn.lftpop-active {
	border-color: var(--lftpop-primary);
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.lftpop-anim-bg-btn.lftpop-bg-expand {
	background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
	border-color: #f59e0b;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lftpop-anim-bg-btn.lftpop-bg-expand:hover {
	background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.lftpop-anim-bg-btn.lftpop-bg-expand.lftpop-expanded {
	background: var(--lftpop-slate-100);
	border-color: var(--lftpop-slate-300);
	color: var(--lftpop-slate-600);
}

/* ==========================================================================
   Atmosphere Effects Grid (Editor)
   ========================================================================== */

.lftpop-atmosphere-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.lftpop-atmosphere-btn {
	padding: 8px 4px;
	font-size: 10px;
	font-weight: 700;
	border-radius: 6px;
	border: 1px solid var(--lftpop-slate-200);
	background: #fff;
	color: var(--lftpop-slate-500);
	text-transform: capitalize;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-atmosphere-btn:hover {
	border-color: #8b5cf6;
	color: #8b5cf6;
}

.lftpop-atmosphere-btn.lftpop-active {
	background: #fff;
	border-color: #8b5cf6;
	color: #7c3aed;
	box-shadow: 0 0 0 1px #8b5cf6;
}

.lftpop-atmosphere-btn.lftpop-atm-expand {
	background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
	border-color: #8b5cf6;
	color: #fff;
}

.lftpop-atmosphere-btn.lftpop-atm-expand:hover {
	background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
	color: #fff;
}

.lftpop-atmosphere-btn.lftpop-atm-expand.lftpop-expanded {
	background: var(--lftpop-slate-100);
	border-color: var(--lftpop-slate-300);
	color: var(--lftpop-slate-600);
}

/* ==========================================================================
   Speed/Size Sliders
   ========================================================================== */

.lftpop-slider-wrapper {
	padding-top: 8px;
	border-top: 1px solid rgba(139, 92, 246, 0.1);
}

.lftpop-slider-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.lftpop-slider-label {
	font-size: 12px;
	font-weight: 700;
	color: #7c3aed;
}

.lftpop-slider-value {
	font-size: 10px;
	font-weight: 700;
	color: #7c3aed;
	background: rgba(139, 92, 246, 0.1);
	padding: 2px 6px;
	border-radius: 4px;
}

.lftpop-slider-range {
	width: 100%;
	height: 6px;
	background: rgba(139, 92, 246, 0.2);
	border-radius: 9999px;
	appearance: none;
	cursor: pointer;
}

.lftpop-slider-range::-webkit-slider-thumb {
	appearance: none;
	width: 14px;
	height: 14px;
	background: #8b5cf6;
	border-radius: 50%;
	cursor: pointer;
}

.lftpop-slider-range::-moz-range-thumb {
	width: 14px;
	height: 14px;
	background: #8b5cf6;
	border-radius: 50%;
	cursor: pointer;
	border: none;
}

.lftpop-slider-labels {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 10px;
	color: rgba(124, 58, 237, 0.6);
	font-weight: 500;
}

/* ==========================================================================
   Pattern Grid (Editor)
   ========================================================================== */

.lftpop-pattern-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.lftpop-pattern-btn {
	aspect-ratio: 1;
	border-radius: 6px;
	border: 2px solid var(--lftpop-slate-200);
	cursor: pointer;
	transition: all 0.2s ease;
	min-width: 0;
	padding: 0;
	font-size: 10px;
	font-weight: 700;
	background: var(--lftpop-slate-800);
}

.lftpop-pattern-btn:hover {
	border-color: var(--lftpop-primary);
}

.lftpop-pattern-btn.lftpop-active {
	border-color: var(--lftpop-primary);
	box-shadow: 0 0 0 1px var(--lftpop-primary);
}

/* ==========================================================================
   Entrance Animation Grid (Editor)
   ========================================================================== */

.lftpop-entrance-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.lftpop-entrance-btn {
	padding: 8px 4px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid var(--lftpop-slate-200);
	background: #fff;
	color: var(--lftpop-slate-600);
	text-transform: capitalize;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-entrance-btn:hover {
	background: var(--lftpop-slate-50);
}

.lftpop-entrance-btn.lftpop-active {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.2);
	color: #4f46e5;
	box-shadow: var(--lftpop-shadow-sm);
}

/* ==========================================================================
   Targeting Triggers Grid (Editor)
   ========================================================================== */

.lftpop-trigger-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.lftpop-trigger-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid var(--lftpop-slate-200);
	background: #fff;
	color: var(--lftpop-slate-600);
	text-transform: capitalize;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-trigger-btn:hover {
	background: var(--lftpop-slate-50);
}

.lftpop-trigger-btn.lftpop-active {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.2);
	color: #4f46e5;
	box-shadow: var(--lftpop-shadow-sm);
}

.lftpop-trigger-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   Scheduling Section (Editor)
   ========================================================================== */

.lftpop-schedule-fields {
	animation: lftpopFadeIn 0.3s ease;
}

.lftpop-schedule-date {
	position: relative;
}

.lftpop-schedule-date .dashicons {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 16px;
	width: 16px;
	height: 16px;
	z-index: 1;
	pointer-events: none;
}

.lftpop-schedule-date input[type="date"] {
	padding-left: 36px;
}

.lftpop-schedule-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--lftpop-slate-500);
	background: var(--lftpop-slate-50);
	padding: 8px;
	border-radius: 6px;
	border: 1px solid var(--lftpop-slate-200);
	margin-top: 8px;
}

.lftpop-schedule-note .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

/* ==========================================================================
   Integrations Section (Editor)
   ========================================================================== */

.lftpop-integration-connected {
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.2);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.lftpop-integration-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 185, 129, 0.2);
	color: var(--lftpop-success);
	border-radius: 50%;
	flex-shrink: 0;
}

.lftpop-integration-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.lftpop-integration-info h4 {
	font-weight: 700;
	color: #065f46;
	font-size: 14px;
	margin: 0 0 4px 0;
}

.lftpop-integration-info p {
	font-size: 12px;
	color: #059669;
	margin: 0 0 8px 0;
}

.lftpop-integration-disconnect {
	font-size: 12px;
	font-weight: 600;
	color: #059669;
	text-decoration: underline;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

.lftpop-integration-disconnect:hover {
	color: #065f46;
}

/* ==========================================================================
   Tracking & Analytics Section (Editor)
   ========================================================================== */

.lftpop-tracking-info-box {
	background: rgba(99, 102, 241, 0.08);
	border: 1px solid rgba(99, 102, 241, 0.15);
	border-radius: 8px;
	padding: 12px;
	margin-bottom: 16px;
}

.lftpop-tracking-info-box strong {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--lftpop-indigo-600);
	margin-bottom: 4px;
}

.lftpop-tracking-info-box span {
	font-size: 11px;
	color: var(--lftpop-indigo-700);
	line-height: 1.4;
}

.lftpop-tracking-divider {
	height: 1px;
	background: var(--lftpop-slate-200);
	margin: 16px 0;
}

.lftpop-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.lftpop-field-half {
	flex: 1;
}

.lftpop-label-small {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--lftpop-slate-500);
	margin-bottom: 6px;
}

#lftpop-tracking-fields {
	animation: lftpopFadeIn 0.3s ease;
}

@keyframes lftpopFadeIn {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Dynamic Tags (Editor)
   ========================================================================== */

.lftpop-dynamic-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.lftpop-dynamic-tags-label {
	font-size: 10px;
	color: var(--lftpop-slate-400);
	display: flex;
	align-items: center;
	gap: 4px;
}

.lftpop-dynamic-tag-btn {
	font-size: 10px;
	background: var(--lftpop-slate-100);
	color: var(--lftpop-slate-600);
	padding: 2px 8px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lftpop-dynamic-tag-btn:hover {
	background: var(--lftpop-slate-200);
}

/* ==========================================================================
   Preview Device Toggle
   ========================================================================== */

.lftpop-device-toggle {
	display: flex;
	background: var(--lftpop-slate-100);
	padding: 4px;
	border-radius: 8px;
}

.lftpop-device-btn {
	padding: 6px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-device-btn:hover {
	color: var(--lftpop-slate-700);
}

.lftpop-device-btn.lftpop-active {
	background: #fff;
	color: var(--lftpop-slate-900);
	box-shadow: var(--lftpop-shadow);
}

.lftpop-device-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Fullscreen Preview Button
   ========================================================================== */

.lftpop-fullscreen-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid var(--lftpop-slate-200);
	background: #fff;
	color: var(--lftpop-slate-600);
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-fullscreen-btn:hover {
	color: var(--lftpop-slate-900);
}

.lftpop-fullscreen-btn.lftpop-active {
	background: rgba(99, 102, 241, 0.1);
	border-color: rgba(99, 102, 241, 0.2);
	color: #4f46e5;
}

.lftpop-fullscreen-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   Multi-Message Toggle
   ========================================================================== */

.lftpop-multi-message-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--lftpop-slate-50);
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid var(--lftpop-slate-200);
	margin-bottom: 12px;
}

.lftpop-multi-message-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--lftpop-slate-700);
	display: flex;
	align-items: center;
	gap: 8px;
}

.lftpop-multi-message-label .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   ULTRA Feature Sections (Editor)
   ========================================================================== */

.lftpop-ultra-section {
	background: linear-gradient(to right, rgba(139, 92, 246, 0.05), rgba(168, 85, 247, 0.05));
	border: 1px solid rgba(139, 92, 246, 0.1);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}

.lftpop-ultra-section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #7c3aed;
	margin-bottom: 12px;
}

.lftpop-ultra-section-header .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
}

.lftpop-countdown-section {
	background: rgba(251, 191, 36, 0.1);
	border: 1px solid rgba(251, 191, 36, 0.2);
}

.lftpop-countdown-section .lftpop-ultra-section-header {
	color: #b45309;
}

.lftpop-shipping-section {
	background: rgba(14, 165, 233, 0.05);
	border: 1px solid rgba(14, 165, 233, 0.1);
}

.lftpop-shipping-section .lftpop-ultra-section-header {
	color: #0369a1;
}

.lftpop-coupon-section {
	background: rgba(16, 185, 129, 0.05);
	border: 1px solid rgba(16, 185, 129, 0.1);
}

.lftpop-coupon-section .lftpop-ultra-section-header {
	color: #047857;
}

.lftpop-lead-section {
	background: rgba(59, 130, 246, 0.05);
	border: 1px solid rgba(59, 130, 246, 0.1);
}

.lftpop-lead-section .lftpop-ultra-section-header {
	color: #1d4ed8;
}

.lftpop-video-section {
	background: rgba(244, 63, 94, 0.05);
	border: 1px solid rgba(244, 63, 94, 0.1);
}

.lftpop-video-section .lftpop-ultra-section-header {
	color: #be123c;
}

/* Violet section for Atmosphere Effects */
.lftpop-ultra-section-violet {
	background: linear-gradient(to right, #f5f3ff, #faf5ff);
	border: 1px solid #ddd6fe;
}

.lftpop-ultra-section-violet .lftpop-ultra-section-header {
	color: #5b21b6;
}

.lftpop-ultra-section-violet .lftpop-atmosphere-btn {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: #64748b;
}

.lftpop-ultra-section-violet .lftpop-atmosphere-btn:hover {
	border-color: #a78bfa;
}

.lftpop-ultra-section-violet .lftpop-atmosphere-btn.lftpop-active {
	border-color: #8b5cf6;
	color: #6d28d9;
	background: #ffffff;
	box-shadow: 0 0 0 1px #8b5cf6;
}

.lftpop-ultra-section-violet .lftpop-slider-range {
	accent-color: #8b5cf6;
}

.lftpop-ultra-section-violet .lftpop-slider-value {
	background: #ede9fe;
	color: #6d28d9;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
}

.lftpop-ultra-section-violet .lftpop-slider-labels {
	color: rgba(109, 40, 217, 0.6);
}

.lftpop-ultra-section-violet .lftpop-atmosphere-controls {
	padding-top: 12px;
	border-top: 1px solid #ede9fe;
	margin-top: 12px;
}

/* Amber speed slider for animated backgrounds */
.lftpop-anim-speed-amber {
	background: #fffbeb;
	border: 1px solid #fef3c7;
	padding: 12px;
	border-radius: 8px;
	margin-top: 16px;
}

.lftpop-anim-speed-amber .lftpop-slider-range {
	accent-color: #d97706;
}

.lftpop-anim-speed-amber .lftpop-slider-value {
	background: #fef3c7;
	color: #b45309;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
}

.lftpop-anim-speed-amber .lftpop-slider-labels {
	color: rgba(180, 83, 9, 0.6);
}

/* Field header with badge */
.lftpop-field-header-with-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.lftpop-field-header-with-badge .lftpop-label {
	margin-bottom: 0;
}

/* Slider label with badge */
.lftpop-slider-label-with-badge {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lftpop-slider-label-with-badge .lftpop-ultra-badge {
	font-size: 8px;
	padding: 1px 4px;
}

/* Sky-blue section for Smart Progress Goals */
.lftpop-ultra-section-sky {
	background: linear-gradient(to right, #f0f9ff, #e0f2fe);
	border: 1px solid #bae6fd;
}

.lftpop-ultra-section-sky .lftpop-ultra-section-header {
	color: #0369a1;
}

.lftpop-ultra-section-sky .lftpop-label {
	color: #0c4a6e;
}

.lftpop-ultra-section-sky .lftpop-input {
	border-color: #bae6fd;
}

.lftpop-ultra-section-sky .lftpop-input:focus {
	border-color: #0ea5e9;
	box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.1);
}

/* Rose section for Video Bubble */
.lftpop-ultra-section-rose {
	background: linear-gradient(to right, #fff1f2, #ffe4e6);
	border: 1px solid #fecdd3;
}

.lftpop-ultra-section-rose .lftpop-ultra-section-header {
	color: #9f1239;
}

.lftpop-ultra-section-rose .lftpop-label {
	color: #881337;
}

.lftpop-ultra-section-rose .lftpop-input {
	border-color: #fecdd3;
}

.lftpop-ultra-section-rose .lftpop-input:focus {
	border-color: #f43f5e;
	box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.1);
}

.lftpop-ultra-section-rose .lftpop-toggle.lftpop-toggle-active {
	background: #e11d48;
}

.lftpop-ultra-section-rose.lftpop-video-active {
	box-shadow: 0 0 0 2px rgba(254, 205, 211, 1);
}

/* Emerald section for Reward Coupon */
.lftpop-ultra-section-emerald {
	background: linear-gradient(to right, #ecfdf5, #d1fae5);
	border: 1px solid #a7f3d0;
}

.lftpop-ultra-section-emerald .lftpop-ultra-section-header {
	color: #047857;
}

.lftpop-ultra-section-emerald .lftpop-label {
	color: #064e3b;
}

.lftpop-ultra-section-emerald .lftpop-input {
	border-color: #a7f3d0;
}

.lftpop-ultra-section-emerald .lftpop-input:focus {
	border-color: #10b981;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

.lftpop-ultra-section-emerald .lftpop-style-btn {
	background: #ffffff;
	border: 1px solid #d1fae5;
	color: #047857;
}

.lftpop-ultra-section-emerald .lftpop-style-btn:hover {
	border-color: #10b981;
}

.lftpop-ultra-section-emerald .lftpop-style-btn.lftpop-style-active {
	background: #d1fae5;
	border-color: #10b981;
	color: #047857;
}

/* Dynamic Tags */
.lftpop-dynamic-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
	flex-wrap: wrap;
}

.lftpop-dynamic-tags-label {
	font-size: 10px;
	color: var(--lftpop-slate-400);
	display: flex;
	align-items: center;
	gap: 4px;
}

.lftpop-dynamic-tags-label .lftpop-ultra-badge {
	font-size: 7px;
	padding: 1px 3px;
}

.lftpop-tag-btn {
	font-size: 10px;
	background: var(--lftpop-slate-100);
	border: none;
	padding: 4px 8px;
	border-radius: 4px;
	color: var(--lftpop-slate-600);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-tag-btn:hover {
	background: var(--lftpop-slate-200);
	color: var(--lftpop-slate-800);
}

/* Currency input small width */
.lftpop-input-currency {
	width: 60px;
	text-align: center;
}

/* ==========================================================================
   Preview Modal (Dashboard)
   ========================================================================== */
.lftpop-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.lftpop-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(4px);
}

.lftpop-modal-container {
	position: relative;
	width: 100%;
	max-width: 1100px;
	max-height: 85vh;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: lftpopModalIn 0.25s ease-out;
}

@keyframes lftpopModalIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Modal Header */
.lftpop-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	border-bottom: 1px solid var(--lftpop-slate-200);
	background: #fff;
}

.lftpop-modal-header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lftpop-modal-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lftpop-modal-device-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--lftpop-slate-100);
	padding: 4px;
	border-radius: 8px;
}

.lftpop-modal-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lftpop-indigo-50);
	color: var(--lftpop-indigo-600);
	border-radius: 10px;
}

.lftpop-modal-icon .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.lftpop-modal-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lftpop-modal-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
}

.lftpop-modal-subtitle {
	font-size: 12px;
	font-weight: 600;
	color: var(--lftpop-slate-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.lftpop-modal-close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--lftpop-slate-500);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lftpop-modal-close:hover {
	background: var(--lftpop-slate-100);
	color: var(--lftpop-slate-700);
}

.lftpop-modal-close .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

/* Modal Body */
.lftpop-modal-body {
	flex: 1;
	padding: 32px;
	background: var(--lftpop-slate-100);
	overflow: auto;
	display: flex;
	justify-content: center;
	position: relative;
}

.lftpop-modal-body::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--lftpop-slate-300) 1px, transparent 1px);
	background-size: 20px 20px;
	opacity: 0.5;
	pointer-events: none;
}

/* Browser Frame */
.lftpop-browser-frame {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 500px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
	border: 1px solid var(--lftpop-slate-200);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Browser Chrome */
.lftpop-browser-chrome {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	background: var(--lftpop-slate-50);
	border-bottom: 1px solid var(--lftpop-slate-200);
	flex-shrink: 0;
}

.lftpop-browser-traffic {
	display: flex;
	gap: 6px;
}

.lftpop-traffic-light {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.lftpop-traffic-red {
	background: #f87171;
}

.lftpop-traffic-yellow {
	background: #fbbf24;
}

.lftpop-traffic-green {
	background: #4ade80;
}

.lftpop-browser-address {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-family: ui-monospace, monospace;
	color: var(--lftpop-slate-500);
}

.lftpop-browser-address .dashicons {
	font-size: 12px;
	width: 12px;
	height: 12px;
	color: var(--lftpop-slate-400);
}

/* Browser Content */
.lftpop-browser-content {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: #fff;
}

/* Modal Browser Frame - Mobile View */
.lftpop-browser-frame.lftpop-browser-mobile {
	width: 375px;
	max-width: 375px;
	height: 700px;
	min-height: 700px;
}

/* Apply same mobile preview styles to modal browser frame */
.lftpop-browser-frame.lftpop-browser-mobile .lftpop-preview-bar-top,
.lftpop-browser-frame.lftpop-browser-mobile .lftpop-preview-bar-bottom {
	padding: 12px 16px !important;
	height: auto !important;
	min-height: 48px;
}

.lftpop-browser-frame.lftpop-browser-mobile .lftpop-preview-bar-content {
	flex-wrap: wrap;
	gap: 8px !important;
	justify-content: center !important;
}

.lftpop-browser-frame.lftpop-browser-mobile .lftpop-preview-bar-message {
	text-align: center;
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
}

.lftpop-browser-frame.lftpop-browser-mobile .lftpop-preview-bar-button {
	flex: 0 0 auto;
	justify-content: center;
}

.lftpop-browser-frame.lftpop-browser-mobile .lftpop-preview-coupon {
	flex: 0 0 auto;
	justify-content: center;
}

.lftpop-browser-frame.lftpop-browser-mobile .lftpop-shipping-progress {
	flex: 1 1 80px;
	max-width: 150px;
}

/* Modal Bar Container */
#lftpop-modal-bar-container {
	position: absolute;
	inset: 0;
	z-index: 50;
	pointer-events: none;
}

#lftpop-modal-bar-container > * {
	pointer-events: auto;
}

/* Fake Page Content */
.lftpop-fake-page {
	padding: 32px;
	opacity: 0.4;
	filter: grayscale(1);
	pointer-events: none;
	user-select: none;
}

.lftpop-fake-page-top {
	margin-top: 60px;
}

.lftpop-fake-page-bottom {
	margin-bottom: 60px;
}

.lftpop-fake-page-left {
	margin-left: 60px;
}

.lftpop-fake-page-right {
	margin-right: 60px;
}

.lftpop-fake-hero {
	height: 80px;
	background: var(--lftpop-slate-200);
	border-radius: 12px;
	margin-bottom: 16px;
}

.lftpop-fake-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

.lftpop-fake-box {
	height: 50px;
	background: var(--lftpop-slate-200);
	border-radius: 8px;
}

.lftpop-fake-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.lftpop-fake-line {
	height: 12px;
	background: var(--lftpop-slate-200);
	border-radius: 4px;
}

.lftpop-fake-line-75 {
	width: 75%;
}

.lftpop-fake-line-50 {
	width: 50%;
}

.lftpop-fake-line-100 {
	width: 100%;
}

.lftpop-fake-spacer {
	height: 100px;
	background: var(--lftpop-slate-100);
	border-radius: 12px;
}

/* Schedule date container */
.lftpop-schedule-date {
	position: relative;
}

.lftpop-schedule-date .dashicons {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--lftpop-slate-400);
	font-size: 14px;
	width: 14px;
	height: 14px;
	z-index: 1;
	pointer-events: none;
}

.lftpop-schedule-date input {
	padding-left: 36px;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
	border-bottom-color: #f9fafb !important;
}

/* Header - Month/Year - Clean white/gray */
.flatpickr-months {
	background: #f9fafb !important;
	border-radius: 10px 10px 0 0 !important;
	padding: 10px 8px !important;
	border-bottom: 1px solid #e5e7eb !important;
}

.flatpickr-months .flatpickr-month {
	height: 28px !important;
	color: #111827 !important;
}

.flatpickr-current-month {
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #111827 !important;
}

/* Month dropdown */
.flatpickr-current-month .flatpickr-monthDropdown-months {
	background: #ffffff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 4px !important;
	color: #111827 !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding: 2px 6px !important;
	cursor: pointer !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
	border-color: #9ca3af !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
	background: #ffffff !important;
	color: #111827 !important;
	font-weight: 500 !important;
}

/* Year input */
.flatpickr-current-month input.cur-year {
	color: #111827 !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	background: #ffffff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 4px !important;
	padding: 2px 6px !important;
	width: 56px !important;
}

.flatpickr-current-month input.cur-year:hover {
	border-color: #9ca3af !important;
}

.flatpickr-current-month .numInputWrapper {
	width: 64px !important;
}

.flatpickr-current-month .numInputWrapper span {
	border: none !important;
	background: transparent !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
	border-bottom-color: #6b7280 !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
	border-top-color: #6b7280 !important;
}

/* Navigation arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	padding: 6px !important;
	border-radius: 4px !important;
	transition: background 0.15s !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	background: #e5e7eb !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
	fill: #374151 !important;
	width: 12px !important;
	height: 12px !important;
}

/* Weekdays */
.flatpickr-weekdays {
	background: #ffffff !important;
	padding: 8px 0 4px 0 !important;
}

span.flatpickr-weekday {
	color: #9ca3af !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
}

/* Days */
.flatpickr-days {
	padding: 2px 4px 6px 4px !important;
	background: #ffffff !important;
}

.dayContainer {
	padding: 0 !important;
	min-width: auto !important;
	max-width: none !important;
}

.flatpickr-day {
	border-radius: 6px !important;
	height: 32px !important;
	line-height: 32px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #374151 !important;
	border: none !important;
	max-width: 34px !important;
	margin: 1px !important;
	background: transparent !important;
}

.flatpickr-day:hover {
	background: #f3f4f6 !important;
}

.flatpickr-day.today {
	border: 1px solid #6366f1 !important;
	background: transparent !important;
	color: #6366f1 !important;
	font-weight: 600 !important;
}

.flatpickr-day.today:hover {
	background: #eef2ff !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
	background: #4f46e5 !important;
	border-color: #4f46e5 !important;
	color: #ffffff !important;
}

.flatpickr-day.inRange {
	background: #e0e7ff !important;
	border-color: #e0e7ff !important;
	box-shadow: none !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: #d1d5db !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
	color: #e5e7eb !important;
}

/* Time picker - Clean and visible */
.flatpickr-time {
	border-top: 1px solid #e5e7eb !important;
	background: #f9fafb !important;
	border-radius: 0 0 10px 10px !important;
	padding: 10px !important;
	max-height: none !important;
	height: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

.flatpickr-time .numInputWrapper {
	height: 36px !important;
	width: 52px !important;
	flex: none !important;
	position: relative !important;
}

.flatpickr-time input {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #111827 !important;
	background: #ffffff !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	padding: 0 !important;
	height: 36px !important;
	width: 52px !important;
	text-align: center !important;
}

.flatpickr-time input:hover {
	border-color: #9ca3af !important;
}

.flatpickr-time input:focus {
	background: #ffffff !important;
	border-color: #6366f1 !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
}

.flatpickr-time .flatpickr-time-separator {
	color: #374151 !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	padding: 0 !important;
	line-height: 36px !important;
	width: auto !important;
	flex: none !important;
}

.flatpickr-time .flatpickr-am-pm {
	background: #f3f4f6 !important;
	color: #374151 !important;
	border: 1px solid #d1d5db !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	padding: 0 10px !important;
	height: 36px !important;
	line-height: 36px !important;
	cursor: pointer !important;
	width: auto !important;
	flex: none !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
	background: #e5e7eb !important;
	border-color: #9ca3af !important;
}

/* Hide arrows - rely on number input */
.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
	display: none !important;
}

/* Alt input styling - visible input */
input.flatpickr-input[readonly] {
	background: #ffffff !important;
	border: 2px solid #cbd5e1 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	color: #1e293b !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	width: 100% !important;
}

input.flatpickr-input[readonly]:hover {
	border-color: #a78bfa !important;
}

input.flatpickr-input[readonly]:focus {
	border-color: #8b5cf6 !important;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
	outline: none !important;
}

/* Hide original hidden input */
input.lftpop-flatpickr.flatpickr-input[type="hidden"] {
	display: none;
}

/* ==========================================================================
   Settings Modal Styles
   ========================================================================== */

/* Settings Button in Card Header */
.lftpop-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lftpop-settings-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: none;
	background: #f1f5f9;
	border-radius: 10px;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-settings-btn:hover {
	background: #e2e8f0;
	color: #475569;
}

.lftpop-settings-btn .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

/* Settings Modal - Complete Override */
.lftpop-settings-modal .lftpop-modal-container {
	max-width: 672px;
	width: 100%;
	border-radius: 16px;
	border: 1px solid #e2e8f0;
	max-height: 90vh;
}

/* Settings Modal Header */
.lftpop-settings-modal .lftpop-modal-header {
	padding: 20px 24px;
	border-bottom: 1px solid #f1f5f9;
	flex-shrink: 0;
}

.lftpop-settings-modal .lftpop-modal-title {
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
}

.lftpop-settings-modal .lftpop-modal-subtitle {
	font-size: 14px;
	color: #64748b;
	margin-top: 4px;
	display: block;
}

.lftpop-settings-modal .lftpop-modal-close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	border-radius: 50%;
	color: #64748b;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lftpop-settings-modal .lftpop-modal-close:hover {
	background: #f1f5f9;
}

/* Settings Modal Body - Override Preview Modal Styles */
.lftpop-settings-body {
	display: block !important;
	justify-content: initial !important;
	padding: 24px !important;
	overflow-y: auto !important;
	max-height: calc(90vh - 160px);
	background: #ffffff !important;
	flex: 1;
}

.lftpop-settings-body::before {
	display: none !important;
}

/* License Status Card (outer card with border) */
.lftpop-settings-license-card {
	background: #ffffff;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	margin-bottom: 32px;
}

.lftpop-settings-section-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #475569;
	margin-bottom: 12px;
}

/* License Box (inner green box) */
.lftpop-license-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	border-radius: 8px;
}

.lftpop-license-ultra {
	background: #ecfdf5;
	border: 1px solid #d1fae5;
}

.lftpop-license-free {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
}

.lftpop-license-info {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lftpop-license-icon {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.lftpop-license-ultra .lftpop-license-icon {
	background: #10b981;
	color: #ffffff;
}

.lftpop-license-free .lftpop-license-icon {
	background: #e2e8f0;
	color: #64748b;
}

.lftpop-license-icon .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
}

.lftpop-license-text strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #065f46;
	margin-bottom: 2px;
}

.lftpop-license-text span {
	font-size: 12px;
	color: #047857;
}

/* Paid Badge (white bg, green text, border) */
.lftpop-license-badge-paid {
	display: inline-flex;
	align-items: center;
	background: #ffffff;
	color: #047857;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 4px;
	border: 1px solid #d1fae5;
}

.lftpop-upgrade-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.lftpop-upgrade-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
	color: #ffffff;
}

/* Settings Layout (Sidebar 1/3 + Content 2/3) */
.lftpop-settings-layout {
	display: flex !important;
	flex-direction: row !important;
	gap: 32px;
}

.lftpop-settings-sidebar {
	width: 176px;
	min-width: 176px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.lftpop-settings-tab {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 16px;
	border: none;
	background: transparent;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: left;
}

.lftpop-settings-tab:hover {
	background: #f1f5f9;
	color: #475569;
}

.lftpop-settings-tab-active {
	background: #eef2ff;
	color: #4f46e5;
	box-shadow: inset 0 0 0 1px #c7d2fe;
}

.lftpop-settings-tab-active:hover {
	background: #eef2ff;
	color: #4f46e5;
}

.lftpop-settings-tab .dashicons {
	width: 18px;
	height: 18px;
	font-size: 18px;
}

.lftpop-settings-content {
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

/* Settings Panels */
.lftpop-settings-panel {
	display: none;
}

.lftpop-settings-panel-active {
	display: block;
	animation: fadeIn 0.2s ease;
}

/* General Tab Spacing */
.lftpop-settings-general-space {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* Setting Card (Enable Plugin) */
.lftpop-setting-card {
	background: rgba(248, 250, 252, 0.5);
	padding: 20px;
	border-radius: 16px;
	border: 1px solid #e2e8f0;
	transition: border-color 0.2s ease;
}

.lftpop-setting-card:hover {
	border-color: #c7d2fe;
}

.lftpop-setting-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lftpop-setting-info h4 {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 6px 0;
}

.lftpop-setting-info p {
	font-size: 12px;
	color: #64748b;
	margin: 0;
	line-height: 1.5;
}

/* Plain Setting (Z-Index, GA4 - no card wrapper) */
.lftpop-setting-plain {
	/* No card styling */
}

.lftpop-setting-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	margin-bottom: 8px;
}

.lftpop-setting-input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	font-size: 14px;
	color: #0f172a;
	background: #ffffff;
	transition: all 0.2s ease;
}

.lftpop-setting-input:focus {
	border-color: #6366f1;
	box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
	outline: none;
}

.lftpop-setting-help {
	font-size: 12px;
	color: #64748b;
	margin: 10px 0 0 0;
	line-height: 1.5;
}

/* Radio Button Group (GA4 Mode) */
.lftpop-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.lftpop-radio-option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-radio-option:hover {
	border-color: #6366f1;
	background: rgba(99, 102, 241, 0.03);
}

.lftpop-radio-option:has(input:checked) {
	border-color: #6366f1;
	background: rgba(99, 102, 241, 0.05);
}

.lftpop-radio-option input[type="radio"] {
	margin-top: 2px;
	accent-color: #6366f1;
	width: 18px;
	height: 18px;
	cursor: pointer;
	flex-shrink: 0;
}

.lftpop-radio-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.3;
}

.lftpop-radio-hint {
	display: block;
	font-size: 12px;
	color: #64748b;
	margin-top: 2px;
	line-height: 1.4;
}

/* Expired Bar Notice (Editor) */
.lftpop-expired-notice {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 28px;
	max-width: 440px;
	background: #ffffff;
	border: 1px solid #fecaca;
	border-left: 4px solid #dc2626;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1);
	animation: lftpopPopIn 0.3s ease-out;
}

@keyframes lftpopPopIn {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.lftpop-expired-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	color: #94a3b8;
	transition: all 0.15s ease;
}

.lftpop-expired-close:hover {
	background: #f1f5f9;
	color: #64748b;
}

.lftpop-expired-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fef2f2;
	border-radius: 10px;
	color: #dc2626;
}

.lftpop-expired-icon .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.lftpop-expired-content {
	flex: 1;
	padding-right: 20px;
}

.lftpop-expired-content h3 {
	margin: 0 0 8px 0;
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
}

.lftpop-expired-content p {
	margin: 0 0 16px 0;
	font-size: 14px;
	color: #64748b;
	line-height: 1.5;
}

.lftpop-expired-content p strong {
	color: #dc2626;
}

.lftpop-expired-actions {
	display: flex;
	gap: 10px;
}

.lftpop-expired-actions .lftpop-btn {
	padding: 8px 14px;
	font-size: 13px;
}

/* Toast Notification */
.lftpop-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	z-index: 999999;
	padding: 12px 20px;
	background: #0f172a;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transition: all 0.3s ease;
}

.lftpop-toast-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Dashboard Footer */
.lftpop-dashboard-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	margin-top: 32px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.lftpop-footer-social,
.lftpop-footer-docs {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lftpop-footer-label {
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
}

.lftpop-footer-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	color: #475569;
	text-decoration: none;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	transition: all 0.15s ease;
}

.lftpop-footer-link:hover {
	color: #6366f1;
	border-color: #6366f1;
	background: #f5f3ff;
}

.lftpop-footer-link svg {
	flex-shrink: 0;
}

.lftpop-footer-link .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Checkbox Card (Performance) */
.lftpop-setting-checkbox-card {
	padding: 16px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
}

.lftpop-checkbox-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}

.lftpop-checkbox-label {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
}

.lftpop-checkbox {
	width: 20px;
	height: 20px;
	accent-color: #4f46e5;
	cursor: pointer;
}

/* Coming Soon Placeholder (Advanced) */
.lftpop-setting-coming-soon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 160px;
	border: 2px dashed #e2e8f0;
	border-radius: 12px;
	background: rgba(248, 250, 252, 0.5);
	color: #94a3b8;
	text-align: center;
}

.lftpop-setting-coming-soon .dashicons {
	width: 32px;
	height: 32px;
	font-size: 32px;
	opacity: 0.5;
	margin-bottom: 8px;
}

.lftpop-setting-coming-soon p {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}

/* Modal Footer */
.lftpop-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	padding: 20px 24px;
	border-top: 1px solid #f1f5f9;
	background: #ffffff;
}

.lftpop-btn-secondary {
	background: transparent;
	color: #475569;
	border: none;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 12px;
}

.lftpop-btn-secondary:hover {
	background: #f1f5f9;
	color: #334155;
}

.lftpop-settings-save {
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2), 0 2px 4px -1px rgba(99, 102, 241, 0.1);
}

.lftpop-settings-save:active {
	transform: scale(0.95);
}

/* =============================================
   AI Writer Button & Copywriter Dropdown
   ============================================= */

/* AI & Toolbar Row */
.lftpop-ai-toolbar-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* AI Button Wrapper - relative for dropdown positioning */
.lftpop-ai-button-wrapper {
	position: relative;
}

/* AI Writer Button - Purple gradient */
.lftpop-ai-writer-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	background: linear-gradient(to right, #6366f1, #8b5cf6);
	color: #ffffff;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	border: none;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	cursor: pointer;
	transition: box-shadow 0.2s ease;
}

.lftpop-ai-writer-btn:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.lftpop-ai-writer-btn svg {
	width: 10px;
	height: 10px;
	stroke: currentColor;
}

/* AI Copywriter Dropdown */
.lftpop-ai-copywriter {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 8px;
	width: 320px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	border: 1px solid #e0e7ff;
	z-index: 50;
	overflow: hidden;
	animation: lftpop-scale-in 0.15s ease-out;
	outline: 4px solid rgba(99, 102, 241, 0.1);
}

@keyframes lftpop-scale-in {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Copywriter Header */
.lftpop-ai-copywriter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	background: linear-gradient(to right, #4f46e5, #7c3aed);
	color: #ffffff;
}

.lftpop-ai-copywriter-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
}

.lftpop-sparkles-yellow {
	color: #fde047;
	stroke: #fde047;
}

.lftpop-ai-copywriter-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: #ffffff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lftpop-ai-copywriter-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.lftpop-ai-copywriter-close svg {
	stroke: currentColor;
}

/* Copywriter Body */
.lftpop-ai-copywriter-body {
	padding: 16px;
}

/* Tone Selection */
.lftpop-ai-tone-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.lftpop-ai-tone-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 16px;
}

.lftpop-ai-tone-btn {
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #475569;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-ai-tone-btn:hover {
	border-color: #a5b4fc;
}

.lftpop-ai-tone-btn.lftpop-ai-tone-active {
	background: #eef2ff;
	border-color: #6366f1;
	color: #4338ca;
}

/* Generate Button */
.lftpop-ai-generate-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 16px;
	background: #0f172a;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lftpop-ai-generate-btn:hover {
	background: #1e293b;
}

.lftpop-ai-generate-btn svg {
	stroke: currentColor;
}

/* Results Section */
.lftpop-ai-results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.lftpop-ai-results-label {
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
}

.lftpop-ai-try-again {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 700;
	color: #6366f1;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.lftpop-ai-try-again:hover {
	text-decoration: underline;
}

.lftpop-ai-try-again svg {
	stroke: currentColor;
}

/* AI Results List */
.lftpop-ai-results {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lftpop-ai-result-btn {
	width: 100%;
	text-align: left;
	padding: 12px;
	font-size: 12px;
	background: #f8fafc;
	border: 1px solid #f1f5f9;
	border-radius: 8px;
	color: #334155;
	cursor: pointer;
	transition: all 0.2s ease;
}

.lftpop-ai-result-btn:hover {
	border-color: #6366f1;
	background: rgba(99, 102, 241, 0.05);
	color: #312e81;
}

/* Loading State */
.lftpop-ai-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px;
	color: #64748b;
	font-size: 12px;
}

.lftpop-spin {
	animation: lftpop-spin 1s linear infinite;
}

@keyframes lftpop-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


/* Modal Buttons */
.lftpop-modal-btn {
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 6px;
}

.lftpop-modal-btn-secondary {
	background: transparent;
	border: none;
	color: #64748b;
}

.lftpop-modal-btn-secondary:hover {
	background: #f1f5f9;
	color: #475569;
}

.lftpop-modal-btn-primary {
	background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
	border: none;
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.lftpop-modal-btn-primary:hover {
	background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
	transform: translateY(-1px);
}

.lftpop-modal-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.lftpop-modal-btn-primary .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ==========================================================================
   Documentation Page
   ========================================================================== */

.lftpop-docs {
	max-width: 1100px;
}

/* Navigation */
.lftpop-docs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-xl);
}

.lftpop-docs-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lftpop-slate-600);
	text-decoration: none;
	border-radius: 999px;
	border: 1px solid var(--lftpop-slate-200);
	background: var(--lftpop-slate-50);
	transition: all 0.2s ease;
}

.lftpop-docs-nav-item:hover {
	background: var(--lftpop-primary);
	border-color: var(--lftpop-primary);
	color: #fff;
}

.lftpop-docs-nav-item .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Sections */
.lftpop-docs-section {
	background: #fff;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-xl);
	margin-bottom: 24px;
	overflow: hidden;
}

.lftpop-docs-section-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 32px;
	border-bottom: 1px solid var(--lftpop-slate-100);
}

.lftpop-docs-section-header h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 0;
	padding: 0;
	border: none;
}

.lftpop-docs-section-icon {
	width: 44px;
	height: 44px;
	border-radius: var(--lftpop-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lftpop-docs-section-icon .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.lftpop-docs-icon-blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.lftpop-docs-icon-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.lftpop-docs-icon-pink { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.lftpop-docs-icon-gold { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.lftpop-docs-icon-orange { background: rgba(249, 115, 22, 0.1); color: #f97316; }
.lftpop-docs-icon-green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.lftpop-docs-icon-emerald { background: rgba(5, 150, 105, 0.1); color: #059669; }
.lftpop-docs-icon-cyan { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.lftpop-docs-icon-slate { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.lftpop-docs-icon-amber { background: rgba(245, 158, 11, 0.1); color: #d97706; }

.lftpop-docs-content {
	padding: 24px 32px 32px;
}

.lftpop-docs-content h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--lftpop-slate-900);
	margin: 20px 0 8px 0;
}

.lftpop-docs-content h3:first-child {
	margin-top: 0;
}

.lftpop-docs-content p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--lftpop-slate-600);
	margin: 0 0 12px 0;
}

.lftpop-docs-content ul {
	margin: 0 0 16px 0;
	padding-left: 20px;
}

.lftpop-docs-content li {
	font-size: 14px;
	line-height: 1.7;
	color: var(--lftpop-slate-600);
	margin-bottom: 4px;
}

/* Step Grid */
.lftpop-docs-step-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

@media (max-width: 768px) {
	.lftpop-docs-step-grid {
		grid-template-columns: 1fr;
	}
}

.lftpop-docs-step {
	padding: 20px;
	background: var(--lftpop-slate-50);
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-md);
	position: relative;
}

.lftpop-docs-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--lftpop-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	border-radius: 50%;
	margin-bottom: 12px;
}

.lftpop-docs-step h3 {
	margin: 0 0 8px 0 !important;
}

.lftpop-docs-step p {
	margin: 0 !important;
}

/* Two Column Layout */
.lftpop-docs-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

@media (max-width: 768px) {
	.lftpop-docs-two-col {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* Feature Grid */
.lftpop-docs-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.lftpop-docs-feature-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1000px) {
	.lftpop-docs-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.lftpop-docs-feature-grid,
	.lftpop-docs-feature-grid-2 {
		grid-template-columns: 1fr;
	}
}

.lftpop-docs-feature-card {
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-md);
	overflow: hidden;
	background: var(--lftpop-slate-50);
}

.lftpop-docs-feature-header {
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.lftpop-docs-feature-header .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.lftpop-docs-feature-card h3 {
	padding: 16px 16px 0;
	margin: 0 !important;
}

.lftpop-docs-feature-card p {
	padding: 8px 16px 0;
}

.lftpop-docs-feature-card ul {
	padding: 4px 16px 16px 32px;
	margin: 0;
}

.lftpop-docs-feature-card li {
	font-size: 13px;
}

/* Callout Boxes */
.lftpop-docs-callout {
	display: flex;
	gap: 12px;
	padding: 16px 20px;
	border-radius: var(--lftpop-radius-md);
	margin: 16px 0;
}

.lftpop-docs-callout .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
}

.lftpop-docs-callout strong {
	display: block;
	font-size: 14px;
	margin-bottom: 4px;
}

.lftpop-docs-callout p {
	margin: 0 !important;
	font-size: 13px !important;
}

.lftpop-docs-callout-info {
	background: rgba(59, 130, 246, 0.08);
	border: 1px solid rgba(59, 130, 246, 0.2);
}

.lftpop-docs-callout-info .dashicons {
	color: #3b82f6;
}

.lftpop-docs-callout-info strong {
	color: #1e40af;
}

.lftpop-docs-callout-tip {
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.2);
}

.lftpop-docs-callout-tip .dashicons {
	color: #f59e0b;
}

.lftpop-docs-callout-tip strong {
	color: #92400e;
}

/* Integration Grid */
.lftpop-docs-integration-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 16px 0 24px;
}

@media (max-width: 900px) {
	.lftpop-docs-integration-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.lftpop-docs-integration-grid {
		grid-template-columns: 1fr;
	}
}

.lftpop-docs-integration-item {
	padding: 16px;
	background: var(--lftpop-slate-50);
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-md);
}

.lftpop-docs-integration-item strong {
	font-size: 14px;
	color: var(--lftpop-slate-900);
}

.lftpop-docs-integration-item p {
	font-size: 13px;
	margin: 6px 0 0 0;
}

/* FAQ */
.lftpop-docs-faq-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lftpop-docs-faq-item {
	border: 1px solid var(--lftpop-slate-200);
	border-radius: var(--lftpop-radius-md);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.lftpop-docs-faq-item:hover {
	border-color: var(--lftpop-slate-300);
}

.lftpop-docs-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: #fff;
	border: none;
	cursor: pointer;
	text-align: left;
	font-size: 14px;
	font-weight: 600;
	color: var(--lftpop-slate-800);
	transition: background 0.15s ease;
}

.lftpop-docs-faq-question:hover {
	background: var(--lftpop-slate-50);
}

.lftpop-docs-faq-arrow {
	font-size: 16px;
	width: 16px;
	height: 16px;
	color: var(--lftpop-slate-400);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.lftpop-docs-faq-open .lftpop-docs-faq-arrow {
	transform: rotate(180deg);
}

.lftpop-docs-faq-answer {
	display: none;
	padding: 0 20px 16px;
	background: var(--lftpop-slate-50);
}

.lftpop-docs-faq-answer p {
	margin: 0;
}

.lftpop-docs-faq-open .lftpop-docs-faq-answer {
	display: block;
}

.lftpop-docs-faq-open .lftpop-docs-faq-question {
	background: var(--lftpop-slate-50);
	color: var(--lftpop-primary);
}


/* ==========================================================================
   Mobile fixes — dashboard must never cause page-level horizontal scroll.
   The bars table scrolls inside its own card; the footer wraps.
   ========================================================================== */
@media (max-width: 782px) {
	.lftpop-card {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.lftpop-table {
		/* Keep columns readable — the card scrolls, the page does not. */
		min-width: 640px;
	}

	.lftpop-dashboard-footer {
		flex-wrap: wrap;
		gap: 12px;
		justify-content: flex-start;
	}

	.lftpop-footer-social,
	.lftpop-footer-docs {
		flex-wrap: wrap;
		row-gap: 8px;
	}
}

/* ==========================================================================
   Mobile v2 — editor stacks into one column (sticky live preview on top),
   the dashboard table becomes cards. Overrides the earlier mobile block.
   ========================================================================== */
@media (max-width: 782px) {
	/* --- Editor: single column, natural page scroll --- */
	.lftpop-editor {
		height: auto;
		min-height: 100vh;
		overflow: visible;
		margin-left: -10px;
	}

	.lftpop-editor-header {
		height: auto;
		min-height: 52px;
		flex-wrap: wrap;
		gap: 8px;
		padding: 8px 12px;
	}

	.lftpop-editor-main {
		flex-direction: column;
		overflow: visible;
	}

	/* Live preview pinned to the top while scrolling the settings */
	.lftpop-editor-preview {
		order: 1;
		flex: none;
		height: 264px;
		padding: 10px;
		position: sticky;
		top: 46px; /* below the WP admin bar */
		z-index: 15;
		border-bottom: 1px solid var(--lftpop-slate-200);
		background: #f1f5f9;
	}

	.lftpop-editor-preview > * {
		max-width: 100%;
	}

	.lftpop-editor-sidebar {
		order: 2;
		width: 100%;
		border-right: none;
		overflow-y: visible;
		flex-shrink: 1;
	}

	/* --- Dashboard: table → cards --- */
	.lftpop-table {
		min-width: 0;
	}

	.lftpop-table thead {
		display: none;
	}

	.lftpop-table,
	.lftpop-table tbody {
		display: block;
		width: 100%;
	}

	.lftpop-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 10px;
		border: 1px solid var(--lftpop-slate-200);
		border-radius: 12px;
		margin: 10px 12px;
		padding: 12px 14px;
		background: #fff;
	}

	.lftpop-table td {
		display: flex;
		align-items: center;
		border: none !important;
		padding: 2px 0;
		width: auto;
	}

	/* Bar name takes the full first row of the card */
	.lftpop-table td:first-child {
		width: 100%;
	}

	/* Hide STATS and LAST MODIFIED on phones — details live in the editor */
	.lftpop-table td:nth-child(4),
	.lftpop-table td:nth-child(5) {
		display: none;
	}

	/* Actions to the right edge of the card */
	.lftpop-table td:last-child {
		margin-left: auto;
	}
}

/* Mobile: editor header must fit — the right side shrinks and wraps.
   Fullscreen stays: extra screen space is most welcome on a phone. */
@media (max-width: 782px) {
	.lftpop-editor-header-right {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 6px;
		max-width: 100%;
	}

	.lftpop-editor-header-right .lftpop-btn {
		padding: 6px 12px;
		font-size: 12.5px;
	}
}

/* Mobile: the desktop/mobile preview toggle is meaningless on a phone —
   the preview area is phone-sized either way, so hide the switch. */
@media (max-width: 782px) {
	.lftpop-device-toggle {
		display: none;
	}
}

/* The WP-admin-bar offset (public CSS) must NOT apply to bars rendered
   inside the editor/dashboard preview mock — the mock is a fake viewport,
   there is no toolbar inside it. Higher specificity beats the offset rules
   at every breakpoint. */
body.admin-bar .lftpop-browser-mock .lftpop-preview-bar-top,
body.admin-bar .lftpop-browser-mock .lftpop-preview-bar-left,
body.admin-bar .lftpop-browser-mock .lftpop-preview-bar-right {
	top: 0;
}

body.admin-bar .lftpop-browser-mock .lftpop-preview-bar-left,
body.admin-bar .lftpop-browser-mock .lftpop-preview-bar-right {
	height: 100%;
}

/* Mobile: the message toolbar (AI Writer + B/I/align/px) must wrap instead
   of forcing horizontal scroll on narrow phones (360-375px). */
@media (max-width: 782px) {
	.lftpop-ai-toolbar-row {
		flex-wrap: wrap;
		gap: 6px;
		max-width: 100%;
	}

	.lftpop-mini-toolbar {
		flex-wrap: wrap;
		max-width: 100%;
	}

	.lftpop-toolbar-input {
		width: 44px;
	}
}

/* Below 600px the WP toolbar is position:absolute and scrolls away with the
   page, so the sticky preview must pin to the very top of the viewport —
   otherwise page content shows through a 46px band above it. */
@media (max-width: 600px) {
	.lftpop-editor-preview {
		top: 0;
	}
}

/* ==========================================================================
   M3: Gamification (segment editor, wheel, gift boxes, test spin)
   ========================================================================== */

/* Golden ULTRA section for the prize/segment editor */
.lftpop-ultra-section-gold {
	background: linear-gradient(to right, #fffbeb, #fef3c7);
	border: 1px solid #fde68a;
}

.lftpop-ultra-section-gold .lftpop-ultra-section-header {
	color: #92400e;
}

.lftpop-ultra-section-gold .lftpop-label {
	color: #78350f;
}

/* Segment editor rows */
.lftpop-segments-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
}

.lftpop-segment-row {
	background: #fff;
	border: 1px solid #fde68a;
	border-radius: 8px;
	padding: 6px 8px;
}

.lftpop-segment-main {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lftpop-segment-color {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--lftpop-slate-200);
	border-radius: 6px;
	background: none;
	cursor: pointer;
}

.lftpop-segment-label {
	flex: 2 1 90px;
	min-width: 0;
	font-size: 12px !important;
	padding: 6px 8px !important;
}

.lftpop-segment-coupon {
	flex: 1.4 1 70px;
	min-width: 0;
	font-size: 11px !important;
	padding: 6px 8px !important;
}

.lftpop-segment-weight {
	flex: 0 0 58px;
	width: 58px;
	font-size: 12px !important;
	padding: 6px 6px !important;
	text-align: right;
}

.lftpop-segment-losing,
.lftpop-segment-advanced-toggle,
.lftpop-segment-delete {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--lftpop-slate-100);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	transition: all 0.15s ease;
}

.lftpop-segment-losing:hover,
.lftpop-segment-advanced-toggle:hover,
.lftpop-segment-delete:hover {
	background: var(--lftpop-slate-200);
}

.lftpop-segment-losing-on {
	background: #fee2e2;
	color: #dc2626;
}

.lftpop-segment-delete:hover {
	background: #fee2e2;
}

.lftpop-segment-advanced {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 4px 2px;
	flex-wrap: wrap;
}

.lftpop-segment-advanced label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--lftpop-slate-600);
}

.lftpop-segment-advanced .lftpop-input {
	width: 64px;
	padding: 4px 6px !important;
	font-size: 11px !important;
}

/* Weight sum bar */
.lftpop-weight-bar-wrap {
	margin: 4px 0 10px;
}

.lftpop-weight-bar {
	height: 8px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

.lftpop-weight-bar-fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	transition: width 0.25s ease, background 0.25s ease;
}

.lftpop-weight-bar-fill.lftpop-weight-ok {
	background: #10b981;
}

.lftpop-weight-bar-fill.lftpop-weight-bad {
	background: #ef4444;
}

.lftpop-weight-bar-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 700;
}

#lftpop-weight-warning {
	color: #dc2626;
	font-weight: 500;
}

.lftpop-segments-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Gift boxes in preview */
.lftpop-gift-box {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 38px;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	cursor: pointer;
	transition: transform 0.15s ease;
}

.lftpop-gift-box:hover {
	transform: scale(1.1) rotate(-3deg);
}

/* Test spin button (floats over the preview panel) */
.lftpop-test-spin-btn {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 60;
	box-shadow: var(--lftpop-shadow-lg);
}

/* Wheel preview — mirror of the public wheel styles. */
.lftpop-wheel {
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
}

.lftpop-wheel-rotor {
	transform-box: view-box;
	will-change: transform;
}

.lftpop-wheel-pointer {
	transform-origin: 150px 12px;
	transform-box: view-box;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

@keyframes lftpopWheelBulb {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

.lftpop-wheel-bulb {
	animation: lftpopWheelBulb 1.2s ease-in-out infinite;
}

.lftpop-wheel-bulb-alt {
	animation: lftpopWheelBulb 1.2s ease-in-out infinite;
	animation-delay: 0.6s;
}

@keyframes lftpopWheelWobble {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-7deg); }
	75% { transform: rotate(7deg); }
}

.lftpop-wheel-spinning .lftpop-wheel-pointer {
	animation: lftpopWheelWobble 0.3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.lftpop-wheel-bulb,
	.lftpop-wheel-bulb-alt,
	.lftpop-wheel-spinning .lftpop-wheel-pointer {
		animation: none;
	}
}

/* Multi-step restart chip */
.lftpop-preview-restart {
	background: transparent;
	border: none;
	color: inherit;
	opacity: 0.55;
	font-size: 11.5px;
	cursor: pointer;
	padding: 4px 8px;
}

.lftpop-preview-restart:hover {
	opacity: 0.9;
}