/*
 * Efex custom build - designer toolbar restyle (approved mockup "Option B v2").
 * - Prominent "Download Design" pill on the right of the top bar
 * - Zoom / Guided Tour / Reset as labelled outline pills on the left
 * - Rounded outer block
 * Colours can be changed with the CSS variables below.
 */

.fpd-container.fpd-wrapper {
	--efex-download-bg: rgb(239, 201, 182);
	--efex-download-text: #0b2a45;
	--efex-pill-border: rgba(255, 255, 255, 0.4);
	--efex-pill-text: #ffffff;
	--efex-radius: 16px;
	--efex-bar-height: 64px;
	--fpd-actions-bar-height: var(--efex-bar-height);

	border-radius: var(--efex-radius);
	border: 1px solid #d9dde2;
}

/* rounded top corners follow the bar */
.fpd-container.fpd-container > fpd-actions-bar {
	border-top-left-radius: calc(var(--efex-radius) - 1px);
	border-top-right-radius: calc(var(--efex-radius) - 1px);
	padding: 0 20px;
	box-sizing: border-box;
	align-items: center;
}

/* last visible block gets the bottom corners */
.fpd-container.fpd-wrapper > :last-child {
	border-bottom-left-radius: calc(var(--efex-radius) - 1px);
	border-bottom-right-radius: calc(var(--efex-radius) - 1px);
}

/* one full-width row: every button sits directly in the bar, whichever group (left / center /
   right) the plugin settings put it in. Zoom / Guided Tour / Reset start at the left padding,
   Download Design ends at the right padding (same 20px each side). */
.fpd-container.fpd-container > fpd-actions-bar {
	display: flex;
	justify-content: flex-start;
	gap: 8px;
}

.fpd-container.fpd-container > fpd-actions-bar > div[data-pos]:not([data-pos="modal"]):has(> fpd-actions-menu > .fpd-uncollapsed-menu > .fpd-btn),
.fpd-container.fpd-container > fpd-actions-bar > div[data-pos]:not([data-pos="modal"]) > fpd-actions-menu:has(> .fpd-uncollapsed-menu > .fpd-btn),
.fpd-container.fpd-container > fpd-actions-bar > div[data-pos]:not([data-pos="modal"]) > fpd-actions-menu > .fpd-uncollapsed-menu:has(> .fpd-btn) {
	display: contents;
}

/* groups with no buttons take no space */
.fpd-container.fpd-container > fpd-actions-bar > div[data-pos]:not([data-pos="modal"]):not(:has(> fpd-actions-menu > .fpd-uncollapsed-menu > .fpd-btn)) {
	display: none;
}

/* older browsers without :has(): previous layout */
@supports not selector(:has(*)) {
	.fpd-container.fpd-container > fpd-actions-bar > div.fpd-visible-hidden {
		flex: 0 0 0;
		min-width: 0;
		overflow: hidden;
	}

	.fpd-container.fpd-container > fpd-actions-bar > div:not(.fpd-visible-hidden) {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
	}

	.fpd-container.fpd-container > fpd-actions-bar fpd-actions-menu {
		width: 100%;
		height: var(--efex-bar-height);
	}

	.fpd-container.fpd-container > fpd-actions-bar fpd-actions-menu .fpd-uncollapsed-menu {
		position: static;
		left: auto;
		right: auto;
		transform: none;
		width: 100%;
		height: 100%;
		justify-content: flex-start;
		align-items: center;
		gap: 8px;
	}
}

/* secondary actions: labelled outline pills */
.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn {
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--efex-pill-border);
	border-radius: 22px;
	color: var(--efex-pill-text);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	box-sizing: border-box;
	margin: 0;
	white-space: nowrap;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.7);
}

.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn > i {
	font-size: 20px;
}

.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn > span {
	display: inline !important;
	margin-left: 8px;
	font-size: inherit;
	color: inherit;
	text-transform: none;
}

/* primary action: Download Design, pushed to the right - same size as the other buttons,
   stands out by its colour */
.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn[data-action="download"] {
	order: 99;
	margin-left: auto;
	border-color: var(--efex-download-bg);
	background-color: var(--efex-download-bg);
	color: var(--efex-download-text);
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn[data-action="download"]:hover {
	background-color: var(--efex-download-bg);
	border-color: var(--efex-download-bg);
	filter: brightness(1.05);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn[data-action="download"] > i {
	color: inherit;
}

/* the plugin shows hover tooltips for icon-only buttons - not needed now that buttons are labelled */
.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn.fpd-tooltip::before,
.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn.fpd-tooltip::after {
	display: none !important;
}

/* phones/tablets: secondary buttons become icon-only, Download keeps its text */
@media (max-width: 768px) {
	.fpd-container.fpd-container > fpd-actions-bar {
		padding: 0 10px;
	}

	.fpd-container.fpd-container > fpd-actions-bar {
		gap: 6px;
	}

	.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn:not([data-action="download"]) {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
		padding: 0;
		justify-content: center;
	}

	.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn:not([data-action="download"]) > span {
		display: none !important;
	}

	.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn[data-action="download"] {
		height: 40px;
		flex: 0 0 auto;
		padding: 0 14px;
	}
}

/* small phones */
@media (max-width: 480px) {
	.fpd-container.fpd-container > fpd-actions-bar {
		padding: 0 8px;
	}

	.fpd-container.fpd-container > fpd-actions-bar {
		gap: 4px;
	}

	.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn:not([data-action="download"]) {
		width: 34px;
		height: 34px;
		flex: 0 0 34px;
	}

	.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn:not([data-action="download"]) > i {
		font-size: 18px;
	}

	.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn[data-action="download"] {
		height: 34px;
		padding: 0 10px;
		font-size: 12.5px;
	}

	.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn[data-action="download"] > i {
		font-size: 18px;
	}

	.fpd-container.fpd-container > fpd-actions-bar .fpd-uncollapsed-menu > .fpd-btn[data-action="download"] > span {
		margin-left: 6px;
	}
}

/* Efex custom build: Upload Image panel - uploads only (QR-code tab hidden) */
fpd-module-images .fpd-module-tabs > [data-context="qr-code"] {
	display: none !important;
}

fpd-module-images .fpd-module-tabs > [data-context="upload"] {
	flex: 1 1 100%;
	max-width: none;
}

/* when Uploads is the only source left, hide the tab row completely */
fpd-module-images .fpd-module-tabs:not(:has(> [data-context="facebook"]:not(.fpd-hidden), > [data-context="instagram"]:not(.fpd-hidden), > [data-context="pixabay"]:not(.fpd-hidden), > [data-context="text2Img"]:not(.fpd-hidden))) {
	display: none !important;
}

/* Efex custom build: no "previously uploaded" thumbnails - customers always upload a fresh logo */
fpd-module-images .fpd-module-tabs-content > [data-context="upload"] .fpd-grid,
fpd-module-images .fpd-upload-content .fpd-grid {
	display: none !important;
}

/* Efex custom build: main menu row (Swap Product ... Select Colours) - first item on the left,
   last item on the right, the rest spaced evenly; lines up with the blue bar's 20px padding */
.fpd-container.fpd-topbar fpd-main-bar .fpd-navigation.fpd-navigation {
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	padding-left: 0;
	padding-right: 0;
}

.fpd-container.fpd-topbar fpd-main-bar .fpd-navigation.fpd-navigation > div {
	flex: 0 0 auto;
}

/* Efex custom build: logo guidance above the upload area */
fpd-module-uploads .efex-upload-hint {
	margin: 0 0 12px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.5;
	color: #3b4651;
	background: #f4f6f8;
	border-left: 3px solid var(--efex-download-bg, rgb(239, 201, 182));
	border-radius: 6px;
	text-align: left;
}

/* Efex custom build: "Generating Product PDF" loader (Download Design) */
#efex-pdf-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(20, 28, 38, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	cursor: wait;
}

#efex-pdf-overlay.efex-visible {
	display: flex;
	animation: efex-pdf-fade 160ms ease-out;
}

#efex-pdf-overlay .efex-pdf-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 340px;
	width: 100%;
	padding: 30px 28px 26px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
	text-align: center;
}

#efex-pdf-overlay .efex-pdf-spinner {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 5px solid rgba(239, 201, 182, 0.45);
	border-top-color: #3471b3;
	animation: efex-pdf-spin 0.8s linear infinite;
	will-change: transform;
}

#efex-pdf-overlay .efex-pdf-title {
	font-size: 18px;
	font-weight: 700;
	color: #0b2a45;
	line-height: 1.3;
}

#efex-pdf-overlay .efex-pdf-sub {
	font-size: 14px;
	color: #5b6672;
	line-height: 1.4;
}

html.efex-pdf-busy,
html.efex-pdf-busy body {
	cursor: wait;
}

@keyframes efex-pdf-spin {
	to { transform: rotate(360deg); }
}

@keyframes efex-pdf-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#efex-pdf-overlay .efex-pdf-spinner {
		animation-duration: 2s;
	}
}

/* Efex custom build: typing straight into text - no element toolbar popup (Edit Text / Reset) */
html.efex-text-direct fpd-element-toolbar,
html.efex-text-direct .fpd-element-toolbar-smart {
	display: none !important;
}