.flipset-mark{
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #818cf8;
	color: #1d2327;
	font-size: var(--fa-text-xl);
	line-height: 36px;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.flipset-card-help{
	margin: 0 0 16px;
	color: #646970;
}

.flipset-toast{
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%) translateY(8px);
	padding: 10px 16px;
	border-radius: 999px;
	background: #1d2327;
	color: #fff;
	font-size: var(--fa-text-sm);
	font-weight: 600;
	z-index: 100000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.flipset-toast.is-on{
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 960px) {

	#flipset-copy-shortcode{
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flipset-toast{
		transition: none;
	}
}

/* ==========================================================================
   Docs & Features Showcase Styles
   ========================================================================== */

/* ==========================================================================
   Documents Usage Guide Box Styles (Polished Modern Elevated Look)
   ========================================================================== */

/* ==========================================================================
   User Guide & Documentation Tab Styles (Polished Modern Reference)
   ========================================================================== */

/* Guide Hero */

/* Sections */

/* 1. Quick Start Cards */

/* 2 & 3. Modern API Reference Table */

/* Ready to Use Copy Presets Shelf */

/* 4. Deep Linking */

/* 5. Builder Cards Grid */
.flipset-builder-cards-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media (max-width: 782px) {
	.flipset-builder-cards-grid{
		grid-template-columns: 1fr;
	}
}

.flipset-builder-card{
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 18px 20px;
	transition: all 0.2s ease;
}

.flipset-builder-card:hover{
	background: #ffffff;
	border-color: #cbd5e1;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transform: translateY(-2px);
}

.flipset-builder-card-head{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.flipset-builder-icon{
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}

.flipset-builder-icon .dashicons{
	font-size: var(--fa-text-lg);
	width: 18px;
	height: 18px;
}

.flipset-builder-icon.is-wp{
	background: #4f46e5;
}

.flipset-builder-icon.is-elementor{
	background: #e60067;
}

.flipset-builder-icon.is-divi{
	background: #7c3aed;
}

.flipset-builder-icon.is-i18n{
	background: #0d9488;
}

.flipset-builder-card-head h4{
	margin: 0;
	font-size: var(--fa-text-base);
	font-weight: 600;
	color: #0f172a;
}

.flipset-builder-card p{
	margin: 0;
	font-size: var(--fa-text-sm);
	line-height: 1.5;
	color: #586274;
}

/* 6. FAQs Accordion */

/* ==========================================================================
   Shortcode Builder & Live Preview Styles
   ========================================================================== */
.flipset-builder-wrap{
	max-width: 1400px;
	margin: 20px 20px 40px 0;
}

.flipset-builder-header{
	background: #1e2327;
	color: #fff;
	border-radius: 10px;
	padding: 24px 28px;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.flipset-builder-kicker{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

.flipset-builder-kicker .dashicons{
	font-size: var(--fa-text-3xl);
	width: 26px;
	height: 26px;
	color: #818cf8;
}

.flipset-builder-kicker h1{
	margin: 0;
	font-size: var(--fa-text-2xl);
	color: #fff;
	line-height: 1.2;
}

.flipset-builder-lede{
	margin: 0;
	font-size: var(--fa-text-base);
	color: #c3c4c7;
	max-width: 800px;
	line-height: 1.5;
}

.flipset-builder-presets{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.flipset-presets-label{
	font-size: var(--fa-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #9da3a8;
}

.flipset-presets-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.flipset-preset-chip{
	appearance: none;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #e2e8f0;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: var(--fa-text-xs);
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: all 0.15s ease;
}

.flipset-preset-chip:hover,
.flipset-preset-chip:focus{
	background: rgba(255, 255, 255, 0.18);
	border-color: #818cf8;
	color: #fff;
	transform: translateY(-1px);
}

.flipset-preset-chip.is-active{
	background: #4f46e5;
	border-color: #818cf8;
	color: #fff;
	box-shadow: 0 0 0 2px rgba(114, 174, 230, 0.4);
}

/* 2-Column Builder Layout */
.flipset-builder-layout{
	display: grid;
	grid-template-columns: minmax(380px, 1fr) minmax(480px, 1.25fr);
	gap: 24px;
	align-items: start;
}

@media (max-width: 1080px) {
	.flipset-builder-layout{
		grid-template-columns: 1fr;
	}
}

.flipset-builder-controls{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.flipset-builder-card{
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.flipset-builder-card .flipset-card-head{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

.flipset-builder-card .flipset-card-head .dashicons{
	color: #4f46e5;
	font-size: var(--fa-text-xl);
	width: 20px;
	height: 20px;
}

.flipset-builder-card .flipset-card-head h2{
	margin: 0;
	font-size: var(--fa-text-base);
	font-weight: 600;
	color: #1e293b;
}

.flipset-builder-card .flipset-card-body{
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.flipset-file-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
}

.flipset-file-actions .button{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	height: auto;
	font-size: var(--fa-text-sm);
	font-weight: 600;
}

.flipset-form-row{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.flipset-label{
	font-size: var(--fa-text-sm);
	font-weight: 600;
	color: #1e293b;
}

.flipset-sublabel{
	font-size: var(--fa-text-xs);
	font-weight: 600;
	color: #586274;
	margin-bottom: 4px;
	display: block;
}

.flipset-form-row input[type="text"],
.flipset-form-row input[type="url"],
.flipset-form-row input[type="number"]{
	width: 100%;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid #cbd5e1;
	font-size: var(--fa-text-sm);
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.flipset-form-row input:focus{
	border-color: #4f46e5;
	box-shadow: 0 0 0 1px #4f46e5;
	outline: none;
}

.flipset-grid-2{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 600px) {
	.flipset-grid-2{
		grid-template-columns: 1fr;
	}
}

/* Recent PDFs List */
.flipset-recent-list{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-height: 120px;
	overflow-y: auto;
	padding: 4px;
	background: #f1f5f9;
	border-radius: 6px;
}

.flipset-recent-btn{
	appearance: none;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: var(--fa-text-xs);
	color: #334155;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 200px;
	transition: all 0.12s ease;
}

.flipset-recent-btn:hover{
	border-color: #4f46e5;
	color: #0f172a;
	background: #f8fafc;
}

.flipset-recent-btn.is-active{
	background: #eff6ff;
	border-color: #4f46e5;
	color: #1d4ed8;
	font-weight: 600;
}

.flipset-recent-title{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Theme Pills */
.flipset-theme-pills{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.flipset-theme-pill{
	cursor: pointer;
}

.flipset-theme-pill input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.flipset-pill-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 8px;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	background: #f8fafc;
	text-align: center;
	transition: all 0.15s ease;
}

.flipset-pill-icon{
	font-size: var(--fa-text-lg);
}

.flipset-pill-label{
	font-size: var(--fa-text-xs);
	font-weight: 600;
	color: #334155;
}

.flipset-theme-pill input:checked + .flipset-pill-box{
	border-color: #4f46e5;
	background: #eff6ff;
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

.flipset-theme-pill input:checked + .flipset-pill-box .flipset-pill-label{
	color: #1d4ed8;
}

/* View Pills */
.flipset-view-pills{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.flipset-view-pill{
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	font-size: var(--fa-text-xs);
	font-weight: 500;
	color: #334155;
	cursor: pointer;
	transition: all 0.12s ease;
}

.flipset-view-pill:hover{
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.flipset-view-pill input:checked + span{
	font-weight: 600;
	color: #4f46e5;
}

.flipset-view-pill-flip{
	border-color: #c7d2fe;
	background: #f5f3ff;
}

.flipset-view-pill-flip:hover{
	background: #ede9fe;
}

/* Quick Chips */
.flipset-quick-chips{
	display: flex;
	gap: 6px;
	margin-top: 4px;
}

.flipset-quick-chip{
	appearance: none;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	font-size: var(--fa-text-xs);
	padding: 2px 8px;
	color: #475569;
	cursor: pointer;
}

.flipset-quick-chip:hover{
	background: #e2e8f0;
	color: #0f172a;
}

/* Tool Switches Grid */
.flipset-tool-switches-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px 12px;
}

.flipset-tool-switch{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	cursor: pointer;
	font-size: var(--fa-text-xs);
	font-weight: 500;
	color: #334155;
	transition: background 0.12s ease;
}

.flipset-tool-switch:hover{
	background: #f1f5f9;
}

.flipset-tool-switch input:checked + .flipset-switch-label{
	color: #0f172a;
	font-weight: 600;
}

/* Checkbox group */
.flipset-checkbox-group{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.flipset-check-label{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--fa-text-sm);
	color: #475569;
	cursor: pointer;
}

.flipset-check-label input{
	margin-top: 2px;
}

/* Left Controls Tabbed Navigation (3 Balanced Tabs - No Scrollbar) */
.flipset-ctrl-tabs-nav{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 8px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	overflow: hidden;
}

.flipset-ctrl-tab{
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	padding: 10px 8px;
	border-radius: 6px;
	font-size: var(--fa-text-sm);
	font-weight: 600;
	color: #586274;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: normal;
	line-height: 1.25;
	min-width: 0;
	transition: all 0.15s ease;
	text-align: center;
}

.flipset-ctrl-tab .dashicons{
	font-size: var(--fa-text-md);
	width: 17px;
	height: 17px;
	color: #94a3b8;
	transition: color 0.15s ease;
	flex-shrink: 0;
}

.flipset-ctrl-tab:hover{
	color: #0f172a;
	background: #f1f5f9;
}

.flipset-ctrl-tab.is-active{
	background: #fff;
	color: #4f46e5;
	border-color: #cbd5e1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.flipset-ctrl-tab.is-active .dashicons{
	color: #4f46e5;
}

.flipset-ctrl-pane{
	background: #fff;
}

.flipset-pane-body{
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.flipset-section-subhead h3{
	margin: 0 0 2px;
	font-size: var(--fa-text-sm);
	font-weight: 600;
	color: #1e293b;
}

.flipset-section-subhead .description{
	margin: 2px 0 0;
	font-size: var(--fa-text-xs);
	color: #586274;
}

.flipset-pane-divider{
	border: 0;
	border-top: 1px solid #e2e8f0;
	margin: 4px 0;
}

.flipset-pane-footer{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
	background: #f8fafc;
	border-top: 1px solid #e2e8f0;
}

.flipset-tab-step{
	font-size: var(--fa-text-xs);
	font-weight: 600;
	cursor: pointer;
}

/* Sticky Right Column (Live Preview & Code Output) */
.flipset-builder-sidebar{
	position: sticky;
	top: 40px;
	z-index: 10;
}

.flipset-builder-sticky{
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Preview Card */
.flipset-builder-preview-card{
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.flipset-preview-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}

.flipset-preview-title{
	display: flex;
	align-items: center;
	gap: 8px;
}

.flipset-preview-title .dashicons{
	color: #4f46e5;
	font-size: var(--fa-text-lg);
	width: 18px;
	height: 18px;
}

.flipset-preview-title h3{
	margin: 0;
	font-size: var(--fa-text-sm);
	font-weight: 600;
	color: #1e293b;
}

.flipset-device-switcher{
	display: flex;
	gap: 4px;
	background: #e2e8f0;
	padding: 2px;
	border-radius: 6px;
}

.flipset-device-btn{
	appearance: none;
	background: transparent;
	border: 0;
	padding: 4px 8px;
	border-radius: 4px;
	color: #586274;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.12s ease;
}

.flipset-device-btn .dashicons{
	font-size: var(--fa-text-md);
	width: 16px;
	height: 16px;
}

.flipset-device-btn:hover{
	color: #0f172a;
}

.flipset-device-btn.is-active{
	background: #fff;
	color: #4f46e5;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Preview Frame */
.flipset-builder-frame-wrap{
	background: #e2e8f0;
	padding: 14px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	min-height: 380px;
}

.flipset-builder-frame{
	width: 100%;
	transition: max-width 0.25s ease;
}

.flipset-builder-frame.is-desktop{
	max-width: 100%;
}

.flipset-builder-frame.is-tablet{
	max-width: 768px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	overflow: hidden;
}

.flipset-builder-frame.is-mobile{
	max-width: 375px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	overflow: hidden;
}

.flipset-builder-preview-stage{
	width: 100%;
	min-height: 340px;
}

.flipset-builder-preview-stage .flipset-wrap{
	margin: 0 !important;
}

.flipset-builder-empty-state{
	min-height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #586274;
	background: #fff;
	border-radius: 8px;
	padding: 24px;
	text-align: center;
}

.flipset-builder-empty-state .dashicons{
	font-size: 40px;
	width: 40px;
	height: 40px;
	color: #94a3b8;
}

/* Output Card */
.flipset-builder-output-card{
	background: #fff;
	border: 1px solid #ccd0d4;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.flipset-output-tabs{
	display: flex;
	gap: 6px;
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 6px;
}

.flipset-tab-btn{
	appearance: none;
	background: transparent;
	border: 0;
	padding: 5px 10px;
	font-size: var(--fa-text-xs);
	font-weight: 600;
	color: #586274;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.12s ease;
}

.flipset-tab-btn:hover{
	color: #0f172a;
	background: #f1f5f9;
}

.flipset-tab-btn.is-active{
	color: #4f46e5;
	background: #eff6ff;
}

.flipset-builder-textarea{
	width: 100%;
	font-family: var(--fa-mono);
	font-size: var(--fa-text-xs);
	line-height: 1.45;
	padding: 10px 12px;
	background: #0f172a;
	color: #38bdf8;
	border-radius: 6px;
	border: 1px solid #1e293b;
	resize: none;
	outline: none;
}

.flipset-output-actions{
	display: flex;
	gap: 8px;
}

.flipset-output-actions .button{
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 14px;
	height: auto;
	font-size: var(--fa-text-sm);
	font-weight: 600;
}

.flipset-output-actions #flipset-builder-copy{
	background: #4f46e5;
	border-color: #4f46e5;
}

.flipset-output-actions #flipset-builder-copy:hover{
	background: #4338ca;
}

/* ==========================================================================
   Shortcode Builder — Modern Polish (overrides)
   ========================================================================== */
/* Design tokens (--fb-*) now live on .flipset-admin in flipset-admin-ui.css. */
.flipset-builder-wrap{
	font-feature-settings: "cv02", "cv03", "cv04";
}

/* Hero header */
.flipset-builder-wrap .flipset-builder-header{
	position: relative;
	overflow: hidden;
	background: radial-gradient(1200px 300px at 0% 0%, rgba(124, 58, 237, 0.35), transparent 60%), radial-gradient(900px 300px at 100% 100%, rgba(79, 70, 229, 0.4), transparent 60%), linear-gradient(135deg, #0b1020 0%, #151a33 100%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.6);
}

.flipset-builder-wrap .flipset-builder-kicker .dashicons{
	background: linear-gradient(135deg, var(--fb-accent), var(--fb-accent-2));
	color: #fff;
	border-radius: 10px;
	box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.7);
}

.flipset-builder-wrap .flipset-builder-lede{
	color: #a5b0c8;
}

/* Preset chips */
.flipset-builder-wrap .flipset-preset-chip{
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #e2e8f0;
	border-radius: 999px;
	padding: 5px 13px;
	font-weight: 600;
	backdrop-filter: blur(6px);
	transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.flipset-builder-wrap .flipset-preset-chip:hover,
.flipset-builder-wrap .flipset-preset-chip:focus{
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
	transform: translateY(-1px);
	outline: none;
}

.flipset-builder-wrap .flipset-preset-chip.is-active{
	background: linear-gradient(135deg, var(--fb-accent), var(--fb-accent-2));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 18px -4px rgba(124, 58, 237, 0.75);
}

/* Cards */
.flipset-builder-wrap .flipset-builder-card,
.flipset-builder-wrap .flipset-builder-preview-card,
.flipset-builder-wrap .flipset-builder-output-card{
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius);
	box-shadow: var(--fb-shadow);
	overflow: hidden;
}

/* Tabs */
.flipset-builder-wrap .flipset-ctrl-tabs-nav{
	background: linear-gradient(180deg, #f8f9ff, #f3f4fb);
	border-bottom: 1px solid var(--fb-line);
	padding: 10px;
	gap: 8px;
}

.flipset-builder-wrap .flipset-ctrl-tab{
	position: relative;
	border-radius: 10px;
	padding: 11px 8px;
	color: var(--fb-muted);
}

.flipset-builder-wrap .flipset-ctrl-tab:hover{
	background: rgba(79, 70, 229, 0.06);
	color: var(--fb-ink);
}

.flipset-builder-wrap .flipset-ctrl-tab.is-active{
	background: #fff;
	color: var(--fb-accent);
	border-color: transparent;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 14px -6px rgba(79, 70, 229, 0.35);
}

.flipset-builder-wrap .flipset-ctrl-tab.is-active::after{
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -1px;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: linear-gradient(90deg, var(--fb-accent), var(--fb-accent-2));
}

.flipset-builder-wrap .flipset-ctrl-tab.is-active .dashicons{
	color: var(--fb-accent);
}

.flipset-builder-wrap .flipset-ctrl-pane:not([hidden]) .flipset-pane-body{
	animation: flipset-pane-in 0.28s ease both;
}

@keyframes flipset-pane-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.flipset-builder-wrap .flipset-pane-body{
	padding: 22px;
	gap: 18px;
}

.flipset-builder-wrap .flipset-section-subhead h3{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fa-text-xs);
	letter-spacing: var(--fa-tracking);
	text-transform: uppercase;
	color: var(--fb-muted);
}

.flipset-builder-wrap .flipset-section-subhead h3::after{
	content: "";
	flex: 1;
	height: 1px;
	background: var(--fb-line);
}

.flipset-builder-wrap .flipset-pane-footer{
	background: #fafbff;
	border-top: 1px solid var(--fb-line);
	padding: 14px 22px;
}

/* Form fields */
.flipset-builder-wrap .flipset-label{
	font-size: var(--fa-text-xs);
	font-weight: 600;
	color: #334155;
	margin-bottom: 6px;
}

.flipset-builder-wrap .flipset-form-row input[type="text"],
.flipset-builder-wrap .flipset-form-row input[type="url"],
.flipset-builder-wrap .flipset-form-row input[type="number"],
.flipset-builder-wrap .flipset-form-row select{
	border: 1px solid #dbe0ee;
	border-radius: 10px;
	padding: 9px 12px;
	min-height: 40px;
	background: #fff;
	box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.flipset-builder-wrap .flipset-form-row input:focus,
.flipset-builder-wrap .flipset-form-row select:focus{
	border-color: var(--fb-accent);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14);
	outline: none;
}

/* Buttons */
.flipset-builder-wrap .button,
.flipset-builder-wrap .button-primary{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 10px;
	min-height: 38px;
	padding: 0 16px;
	font-weight: 600;
	line-height: 1;
	transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.flipset-builder-wrap .button .dashicons,
.flipset-builder-wrap .button-primary .dashicons{
	width: 16px;
	height: 16px;
	font-size: var(--fa-text-md);
	line-height: 1.4;
	margin: 0;
	vertical-align: baseline;
}

.flipset-builder-wrap .button-primary{
	background: linear-gradient(135deg, var(--fb-accent), var(--fb-accent-2));
	border: 0;
	color: #fff;
	box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.8);
}

.flipset-builder-wrap .button-primary:hover,
.flipset-builder-wrap .button-primary:focus{
	background: linear-gradient(135deg, #4338ca, #6d28d9);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 12px 22px -8px rgba(79, 70, 229, 0.9);
}

.flipset-builder-wrap .button:not(.button-primary){
	background: #fff;
	border: 1px solid #d5daea;
	color: var(--fb-accent);
}

.flipset-builder-wrap .button:not(.button-primary):hover{
	background: var(--fb-accent-soft);
	border-color: #c7d2fe;
	color: #4338ca;
}

.flipset-builder-wrap .flipset-tab-step{
	border-radius: 999px;
	padding: 0 16px;
}

/* Theme + view pills */
.flipset-builder-wrap .flipset-pill-box{
	border: 1.5px solid #e1e5f0;
	border-radius: 12px;
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.flipset-builder-wrap .flipset-theme-pill:hover .flipset-pill-box{
	border-color: #c7d2fe;
	transform: translateY(-1px);
}

.flipset-builder-wrap .flipset-theme-pill input:checked + .flipset-pill-box{ border-color: var(--fb-accent);
	background: var(--fb-accent-soft);
	color: var(--fb-accent);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

/* Toggles / quick switches */
.flipset-builder-wrap .flipset-tool-switch{
	border-radius: 10px;
	background: #fafbff;
	border-color: var(--fb-line);
	padding: 8px 12px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.flipset-builder-wrap .flipset-tool-switch:hover{
	background: var(--fb-accent-soft);
	border-color: #c7d2fe;
}

.flipset-builder-wrap input[type="checkbox"],
.flipset-builder-wrap input[type="radio"]{
	accent-color: var(--fb-accent);
}

/* Preview card */
.flipset-builder-wrap .flipset-builder-preview-card{
	background: #fff;
}

.flipset-builder-wrap .flipset-builder-frame-wrap{
	background: radial-gradient(circle at 1px 1px, #d9deee 1px, transparent 0) 0 0 / 18px 18px, #f4f6fc;
	border-radius: 12px;
}

.flipset-builder-wrap .flipset-builder-frame.is-desktop,
.flipset-builder-wrap .flipset-builder-frame.is-tablet,
.flipset-builder-wrap .flipset-builder-frame.is-mobile{
	border-radius: 12px;
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.45);
	transition: max-width 0.3s ease;
}

/* Output / code */
.flipset-builder-wrap .flipset-tab-btn{
	border-radius: 8px;
	font-weight: 600;
}

.flipset-builder-wrap .flipset-tab-btn.is-active{
	background: var(--fb-accent-soft);
	color: var(--fb-accent);
}

.flipset-builder-wrap .flipset-builder-textarea{
	background: #0b1020;
	color: #a5f3fc;
	border: 1px solid #1e2547;
	border-radius: 12px;
	font-family: var(--fa-mono);
	font-size: var(--fa-text-sm);
	line-height: var(--fa-lh);
	padding: 14px 16px;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}

.flipset-builder-wrap .flipset-output-actions #flipset-builder-copy{
	background: linear-gradient(135deg, var(--fb-accent), var(--fb-accent-2));
	border: 0;
	color: #fff;
	min-height: 44px;
	box-shadow: 0 10px 22px -10px rgba(79, 70, 229, 0.9);
}

.flipset-builder-wrap .flipset-output-actions #flipset-builder-copy:hover{
	background: linear-gradient(135deg, #4338ca, #6d28d9);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.flipset-builder-wrap *{
		animation: none !important;
		transition: none !important;
	}
}

/* View layout pills — border lives on the label, inner span stays plain */
.flipset-builder-wrap .flipset-view-pills{
	gap: 10px;
}

.flipset-builder-wrap .flipset-view-pill{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 10px 14px;
	background: #fff;
	border: 1.5px solid #e1e5f0;
	border-radius: 12px;
	font-size: var(--fa-text-sm);
	font-weight: 600;
	line-height: 1.3;
	color: #334155;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.flipset-builder-wrap .flipset-view-pill:hover{
	background: #fff;
	border-color: #c7d2fe;
	transform: translateY(-1px);
}

.flipset-builder-wrap .flipset-view-pill input[type="radio"]{
	flex: 0 0 auto;
	margin: 0;
}

.flipset-builder-wrap .flipset-view-pill span{
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.flipset-builder-wrap .flipset-view-pill:has(input:checked){
	border-color: var(--fb-accent);
	background: var(--fb-accent-soft);
	color: var(--fb-accent);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.flipset-builder-wrap .flipset-view-pill input:checked + span{
	color: var(--fb-accent);
	font-weight: 600;
}

.flipset-builder-wrap .flipset-view-pill-flip{
	background: #faf8ff;
	border-color: #ddd6fe;
}
/* Compact sizing + start page width */
.flipset-builder-wrap .flipset-view-pills{
	gap: 6px;
}

.flipset-builder-wrap .flipset-view-pill{
	min-height: 34px;
	padding: 6px 10px;
	gap: 8px;
	border-radius: 9px;
	font-size: var(--fa-text-xs);
}

.flipset-builder-wrap .flipset-view-pill input[type="radio"]{
	width: 15px;
	height: 15px;
	min-width: 15px;
}

.flipset-builder-wrap .flipset-view-pill input[type="radio"]:checked::before{
	width: 7px;
	height: 7px;
	margin: 3px;
}

.flipset-builder-wrap .flipset-view-pill span,
.flipset-builder-wrap .flipset-view-pill input:checked + span{
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.flipset-builder-wrap #flipset-builder-page{
	width: 72px;
	max-width: 72px;
	min-height: 34px;
	padding: 6px 10px;
	text-align: center;
}

.flipset-builder-wrap .button,
.flipset-builder-wrap .button-primary{
	min-height: 32px;
	padding: 0 14px;
	font-size: var(--fa-text-sm);
}

.flipset-builder-wrap .flipset-pane-footer{
	padding: 10px 20px;
}

.flipset-builder-wrap .flipset-output-actions #flipset-builder-copy{
	min-height: 38px;
}

.flipset-builder-wrap .flipset-form-row input[type="text"],
.flipset-builder-wrap .flipset-form-row input[type="url"]{
	min-height: 36px;
	padding: 6px 12px;
}
/* Toolbar location badges */
.flipset-builder-wrap .flipset-tool-switch .flipset-switch-label{
	flex: 1;
	min-width: 0;
}

.flipset-builder-wrap .flipset-loc-badge{
	flex: 0 0 auto;
	margin-left: auto;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: var(--fa-text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
	white-space: nowrap;
}

.flipset-builder-wrap .flipset-loc-badge.is-bar{
	background: #dcfce7;
	color: #166534;
}

.flipset-builder-wrap .flipset-loc-badge.is-menu{
	background: #e0e7ff;
	color: #3730a3;
}

/* ==========================================================================
   Saved Embeds Manager & View Tabs Styles (Advanced)
   ========================================================================== */

/* Top View Switcher Navigation */
.flipset-builder-view-nav{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #ffffff;
	padding: 5px;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	margin-bottom: 20px;
}

.flipset-view-tab-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	color: #586274;
	font-size: var(--fa-text-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.flipset-view-tab-btn:hover{
	color: #0f172a;
	background: #f8fafc;
}

.flipset-view-tab-btn.is-active{
	background: var(--fb-accent, #4f46e5);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.flipset-view-tab-btn .dashicons{
	font-size: var(--fa-text-md);
	width: 17px;
	height: 17px;
}

.flipset-count-pill{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: var(--fa-text-xs);
	font-weight: 600;
	background: rgba(0, 0, 0, 0.08);
	color: inherit;
}

.flipset-view-tab-btn.is-active .flipset-count-pill{
	background: rgba(255, 255, 255, 0.25);
	color: #ffffff;
}

/* Edit Banner */
.flipset-builder-edit-banner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(90deg, #eff6ff 0%, #f0fdf4 100%);
	border: 1px solid #bfdbfe;
	border-radius: 10px;
	padding: 12px 18px;
	margin-bottom: 20px;
	box-shadow: 0 1px 3px rgba(37, 99, 235, 0.06);
}

.flipset-edit-banner-left{
	display: flex;
	align-items: center;
	gap: 10px;
	color: #1e3a8a;
	font-size: var(--fa-text-sm);
}

.flipset-edit-banner-left .dashicons{
	color: #2563eb;
	font-size: var(--fa-text-xl);
	width: 20px;
	height: 20px;
}

.flipset-btn-new-embed{
	background: #ffffff !important;
	border-color: #93c5fd !important;
	color: #1d4ed8 !important;
	font-weight: 600 !important;
}

.flipset-btn-new-embed:hover{
	background: #dbeafe !important;
}

/* Code Mode Checkbox Row */
.flipset-code-mode-row{
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed #e2e8f0;
}

.flipset-code-mode-toggle{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fa-text-xs);
	color: #586274;
	cursor: pointer;
}

.flipset-code-mode-toggle input[type="checkbox"]{
	margin: 0;
}

/* Saved Embeds Manager View */
.flipset-embeds-manager-card{
	background: #ffffff;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	padding: 24px;
	box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

.flipset-manager-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f1f5f9;
}

.flipset-manager-title{
	display: flex;
	align-items: center;
	gap: 10px;
}

.flipset-manager-title .dashicons{
	color: var(--fb-accent, #4f46e5);
	font-size: var(--fa-text-2xl);
	width: 24px;
	height: 24px;
}

.flipset-manager-title h2{
	margin: 0;
	font-size: var(--fa-text-lg);
	font-weight: 600;
	color: #0f172a;
}

.flipset-manager-actions{
	display: flex;
	align-items: center;
	gap: 10px;
}

#flipset-embeds-search{
	min-width: 240px;
	border-radius: 8px;
	border: 1px solid #cbd5e1;
	padding: 6px 12px;
	font-size: var(--fa-text-sm);
}

/* Embeds Table */
.flipset-embeds-table{
	border-radius: 8px;
	border: 1px solid #e2e8f0 !important;
	overflow: hidden;
}

.flipset-embeds-table thead th{
	background: #f8fafc;
	font-size: var(--fa-text-xs);
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 12px 14px;
}

.flipset-embeds-table tbody td{
	padding: 12px 14px;
	vertical-align: middle;
	font-size: var(--fa-text-sm);
}

.flipset-embeds-table .row-title{
	font-weight: 600;
	color: #1e293b;
	font-size: var(--fa-text-sm);
	text-decoration: none;
}

.flipset-embeds-table .row-title:hover{
	color: var(--fb-accent, #4f46e5);
}

.flipset-sub-title{
	display: block;
	font-size: var(--fa-text-xs);
	color: #586274;
	margin-top: 2px;
}

.flipset-file-name{
	font-family: var(--fa-mono);
	font-size: var(--fa-text-xs);
	color: #475569;
	background: #f1f5f9;
	padding: 3px 6px;
	border-radius: 4px;
	border: 1px solid #e2e8f0;
	display: inline-block;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.flipset-tag-pill{
	display: inline-block;
	font-size: var(--fa-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 2px 7px;
	border-radius: 4px;
	margin-right: 4px;
}

.flipset-tag-pill.is-view{
	background: #e0e7ff;
	color: #3730a3;
}

.flipset-tag-pill.is-theme{
	background: #fef3c7;
	color: #92400e;
}

.flipset-shortcode-chip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 4px 8px;
	font-family: var(--fa-mono);
	font-size: var(--fa-text-xs);
	font-weight: 600;
	color: #0f172a;
	cursor: pointer;
	transition: all 0.15s ease;
}

.flipset-shortcode-chip:hover{
	background: #eff6ff;
	border-color: #3b82f6;
	color: #1d4ed8;
	box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
}

.flipset-shortcode-chip .dashicons{
	font-size: var(--fa-text-base);
	width: 14px;
	height: 14px;
	color: #586274;
}

.flipset-shortcode-chip:hover .dashicons{
	color: #1d4ed8;
}

/* Empty State */
.flipset-embeds-empty-state{
	text-align: center;
	padding: 48px 24px;
	background: #f8fafc;
	border-radius: 10px;
	border: 2px dashed #e2e8f0;
}

.flipset-embeds-empty-state .dashicons{
	font-size: 48px;
	width: 48px;
	height: 48px;
	color: #94a3b8;
	margin-bottom: 12px;
}

.flipset-embeds-empty-state h3{
	margin: 0 0 8px;
	font-size: var(--fa-text-md);
	font-weight: 600;
	color: #0f172a;
}

.flipset-embeds-empty-state p{
	margin: 0 0 20px;
	color: #586274;
	font-size: var(--fa-text-sm);
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.5;
}