/**
 * Modern customizer — tablet & mobile layout
 * Brand accents: plugin green (#316153 / #37c89f), slate neutrals.
 * Desktop layout in customizer-v2.css is left unchanged.
 *
 * Mobile structure (tools → panel → canvas):
 *   header → menubar (wrap) → tool icons (wrap) → panel (below tools) → canvas (bottom)
 *
 * Scroll model: #designer-popup is the main vertical scroller so tools + panel +
 * full canvas remain reachable. Avoid overflow:hidden shells that clip the stage.
 */

.ext-pd-mobile-panel-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 30;
	background: rgba(15, 23, 42, 0.28);
	-webkit-tap-highlight-color: transparent;
	pointer-events: none;
}

.ext-pd-mobile-panel-backdrop.is-visible {
	display: block;
}

/* —— Tablet + phone: tools-first shell —— */
@media (max-width: 991.98px) {
	/*
	 * Main vertical scroller. Content (tools + panel + canvas) may grow taller
	 * than the viewport; users scroll top↔bottom inside this shell.
	 */
	#designer-popup {
		overflow-x: hidden !important;
		overflow-y: auto !important;
		height: 100% !important;
		height: 100dvh !important;
		max-height: 100dvh !important;
		width: 100% !important;
		/* Above theme sticky footers / mobile nav that intercept tool clicks */
		z-index: 100050 !important;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: #ffffff;
	}

	/* Dialogs / layers appended to body must sit above the designer shell */
	#unsavedChangesPopup,
	#canvasNavigatorPanel,
	.popup_background,
	.popup_wrapper,
	div[id$="_background"].popup_background,
	div[id$="_wrapper"].popup_wrapper {
		z-index: 100120 !important;
	}

	#canvasNavigatorPanel {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		max-width: calc(100vw - 24px) !important;
		top: max(72px, calc(env(safe-area-inset-top, 0px) + 56px)) !important;
		max-height: min(70vh, 480px) !important;
		overflow: hidden !important;
		box-sizing: border-box;
	}

	#canvasNavigatorList {
		max-height: min(55vh, 380px) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}

	/* Kill desktop popup chrome that shrinks the mobile shell */
	#designer-popup #designer-content,
	#designer-content {
		margin: 0 !important;
		padding: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
		height: auto !important;
		min-height: 100% !important;
		border-radius: 0 !important;
	}

	#designer-popup > div:first-child,
	#designer-popup #close-button {
		display: none !important;
	}

	#customizer-container {
		display: flex;
		flex-direction: column;
		height: auto !important;
		min-height: 100%;
		max-height: none !important;
		overflow: visible;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: #f8fafc;
	}

	#customizer-container > .app-header,
	#customizer-container > header.app-header {
		position: sticky;
		top: 0;
		z-index: 60;
		flex: 0 0 auto;
		flex-wrap: nowrap;
		padding: 0.55rem 0.75rem;
		padding-top: max(0.55rem, env(safe-area-inset-top, 0px));
		padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
		padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
		border-radius: 0 !important;
		gap: 0.5rem;
		min-height: 52px;
		align-items: center;
		background: #ffffff;
		box-shadow: 0 1px 0 #e2e8f0;
	}

	.app-header h1 {
		font-size: 0.95rem;
		line-height: 1.2;
		max-width: 38vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #316153;
		flex: 0 1 auto;
		min-width: 0;
	}

	.header-actions {
		gap: 0.35rem;
		flex-wrap: nowrap;
		min-width: 0;
		justify-content: flex-end;
		flex: 1 1 auto;
		align-items: center;
		position: relative;
	}

	/* Keep close control fully tappable (desktop uses absolute offset that clips) */
	#close-button2.header-btn.btn-close,
	.app-header .btn-close {
		position: relative !important;
		top: auto !important;
		right: auto !important;
		margin-left: 0.15rem !important;
		min-width: 40px;
		min-height: 40px;
		padding: 0.45rem !important;
		border-radius: 999px !important;
		flex: 0 0 auto;
		z-index: 2;
	}

	#clear-canvas-header-btn.header-btn span,
	.header-btn-clear-canvas.header-btn span {
		display: none;
	}

	#clear-canvas-header-btn.header-btn,
	.header-btn-clear-canvas.header-btn {
		padding: 0.45rem;
		min-width: 40px;
		min-height: 40px;
	}

	.finish-design,
	#finish-proceed-action {
		margin-left: 0 !important;
		padding: 0.45rem 0.7rem !important;
		font-size: 0.75rem !important;
		gap: 4px !important;
		white-space: nowrap;
	}

	.finish-design img,
	#finish-proceed-action img {
		width: 20px !important;
		height: auto;
	}

	#shortcuts-btn {
		display: none !important;
	}

	/* Top menubar: wrap onto multiple lines — no horizontal scroll.
	 * Natural height (page scrolls); soft cap only for extreme wrap stacks. */
	.app-menubar {
		flex: 0 0 auto;
		flex-wrap: wrap !important;
		align-items: flex-start;
		overflow-x: hidden !important;
		overflow-y: visible !important;
		padding: 0.45rem 0.65rem;
		min-height: 0;
		max-height: none;
		gap: 0.4rem;
		border-radius: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		background: #ffffff;
	}

	.menubar-header {
		display: none !important;
	}

	.menubar-actions {
		display: flex;
		flex-wrap: wrap !important;
		align-items: center;
		gap: 0.4rem;
		min-width: 0 !important;
		width: 100%;
		max-width: 100%;
		row-gap: 0.45rem;
	}

	.menubar-properties,
	.menubar-properties.active {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center;
		gap: 0.4rem;
		min-width: 0 !important;
		max-width: 100%;
		row-gap: 0.45rem;
	}

	/* Comfortable touch targets — avoid cramped narrow controls */
	.app-menubar .form-input,
	.app-menubar .form-select,
	.app-menubar input[type="number"],
	.app-menubar input[type="text"] {
		min-height: 36px;
		min-width: 3.25rem;
		padding: 0.35rem 0.45rem;
	}

	.app-menubar button,
	.app-menubar .btn,
	.app-menubar [role="button"] {
		min-height: 36px;
		min-width: 36px;
	}

	/* Optically center menubar icons (theme button UA styles push glyphs top-left) */
	#designer-popup .app-menubar .btn-menubar-icon,
	.app-menubar .btn-menubar-icon {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		padding: 0 !important;
		line-height: 0 !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	#designer-popup .app-menubar .btn-menubar-icon svg,
	.app-menubar .btn-menubar-icon svg {
		width: 18px !important;
		height: 18px !important;
		margin: 0 !important;
		display: block !important;
		flex-shrink: 0;
	}

	#designer-popup .left-toolbar .tool-button,
	.left-toolbar .tool-button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		line-height: 0 !important;
		box-sizing: border-box !important;
	}

	.ext-pd-pricing-bar {
		display: none !important;
	}

	/* Bootstrap editor row → vertical tools-first stack.
	 * Content-sized column so the popup scroller can reach canvas bottom. */
	#customizer-container > .row {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		flex: 0 0 auto;
		min-height: 0;
		height: auto !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible;
	}

	#customizer-container > .row > [class*="col-"] {
		float: none !important;
		max-width: 100% !important;
		width: 100% !important;
		flex-basis: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Tools column first — natural height, no max-height trap */
	#customizer-container > .row > .col-md-4,
	#customizer-container > .row > .col-sm-12.col-md-4 {
		order: 1 !important;
		flex: 0 0 auto !important;
		position: relative;
		z-index: 40;
		min-height: 0;
		max-height: none;
		overflow: visible;
		background: #ffffff;
		border-bottom: 1px solid #e2e8f0;
		box-shadow: none;
		padding-bottom: 0;
	}

	/* Canvas column last — size to stage so bottom is scroll-reachable */
	#customizer-container > .row > .col-md-8,
	#customizer-container > .row > .col-sm-12.col-md-8 {
		order: 2 !important;
		flex: 0 0 auto !important;
		min-height: 280px;
		height: auto !important;
		display: flex;
		flex-direction: column;
		overflow: visible;
		padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	}

	#customizer-container > .row > .col-md-4 > .well,
	#customizer-container .col-md-4 .well {
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		overflow: visible !important;
	}

	.app-content {
		display: flex;
		flex-direction: column;
		margin: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		overflow: visible;
		width: 100%;
		max-height: none;
		height: auto !important;
		min-height: 0;
	}

	/* Tool icon rail: below menubar, wrap, no horizontal scroll */
	.left-toolbar {
		order: 1;
		flex: 0 0 auto;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center;
		justify-content: flex-start;
		position: relative !important;
		left: auto;
		right: auto;
		bottom: auto;
		top: auto;
		width: 100% !important;
		height: auto !important;
		min-height: 52px;
		box-sizing: border-box;
		gap: 0.35rem;
		padding: 0.5rem 0.65rem;
		overflow-x: hidden !important;
		overflow-y: visible !important;
		border-right: none !important;
		border-bottom: 1px solid #e2e8f0;
		background: #ffffff;
		z-index: 42;
		box-shadow: none;
		row-gap: 0.4rem;
	}

	.toolbar-spacer {
		display: none !important;
	}

	#designer-popup .left-toolbar .tool-button,
	.left-toolbar .tool-button {
		flex: 0 0 auto;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
		padding: 0 !important;
		line-height: 0 !important;
		border-radius: 0.65rem !important;
		box-sizing: border-box !important;
	}

	#designer-popup .left-toolbar .tool-button:hover,
	.left-toolbar .tool-button:hover {
		background-color: rgba(55, 200, 159, 0.12) !important;
		color: #316153;
	}

	#designer-popup .left-toolbar .tool-button.active,
	.left-toolbar .tool-button.active {
		background-color: #37c89f !important;
		color: #fff !important;
		box-shadow: none !important;
	}

	#designer-popup .left-toolbar .tool-button svg,
	.left-toolbar .tool-button svg {
		width: 22px !important;
		height: 22px !important;
		min-width: 22px;
		min-height: 22px;
	}

	/*
	 * Properties panel: open top→bottom below tool rail (in-flow).
	 * Usable min height (~45vh); internal scroll only when content is large.
	 */
	.properties-panel {
		order: 2;
		flex: 0 0 auto;
		position: relative !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		min-height: 0;
		height: auto !important;
		max-height: min(55vh, 440px) !important;
		border-right: none !important;
		border-radius: 0;
		box-shadow: none;
		z-index: 41;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transform: none !important;
		opacity: 1;
		pointer-events: auto;
		transition: max-height 0.2s ease, opacity 0.18s ease, min-height 0.2s ease;
		padding-bottom: 0;
		background: #ffffff;
		border-bottom: 1px solid #e2e8f0;
	}

	.properties-panel:not(.collapsed) {
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto;
		max-width: 100% !important;
		min-height: clamp(220px, 45vh, 380px) !important;
		max-height: min(55vh, 440px) !important;
		height: auto !important;
	}

	.properties-panel.collapsed {
		transform: none !important;
		opacity: 0 !important;
		pointer-events: none !important;
		max-width: 100% !important;
		height: 0 !important;
		max-height: 0 !important;
		min-height: 0 !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden !important;
	}

	.properties-panel .panel-header {
		flex: 0 0 auto;
		padding: 0.6rem 0.9rem;
		border-bottom: 1px solid #e2e8f0;
	}

	.properties-panel .panel-header h2 {
		font-size: 1rem;
		color: #316153;
	}

	/* Only the panel body scrolls when content is large */
	.panel-content,
	.panel-content.active {
		flex: 1 1 auto;
		height: auto !important;
		max-height: none !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		padding: 0.85rem 0.9rem 1.1rem;
		min-height: 0;
	}

	/* Material Icons: keep Load more pinned; scroll icon grid only (not whole panel). */
	#panel-material-icons.panel-content.active {
		display: flex !important;
		flex-direction: column;
		overflow: hidden !important;
		overflow-y: hidden !important;
		min-height: 0;
	}

	#panel-material-icons .material-icons-panel-hint,
	#panel-material-icons .material-icons-style-controls {
		flex-shrink: 0;
	}

	#panel-material-icons .material-icons-section {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		margin-top: 1rem;
	}

	#panel-material-icons .material-icons-search {
		flex-shrink: 0;
	}

	#panel-material-icons .material-icons-results {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	#panel-material-icons .material-icons-load-more:not([hidden]) {
		flex-shrink: 0;
		margin-top: 0.65rem;
	}

	.main-inner {
		flex: 0 0 auto;
		min-height: 0;
		height: auto !important;
		display: flex;
		flex-direction: column;
		margin: 0 !important;
		padding: 0.65rem !important;
		border: none !important;
		overflow: visible;
	}

	#main-inner-content,
	.canvas-wrapper,
	.canvas-content,
	.canvas-content .container {
		flex: 0 0 auto;
		min-height: 0;
		height: auto !important;
		max-height: none !important;
		max-width: 100% !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex;
		flex-direction: column;
		/* Keep Fabric overflow inside #canvasbox — do not widen the page/tools */
		overflow-x: hidden;
		overflow-y: visible;
	}

	/*
	 * Beat ext-pricing-modern.css `#canvasbox { overflow: hidden !important }`
	 * (loaded later via AJAX template). Fixed Fabric stages are often wider
	 * than the phone: allow horizontal scroll ONLY on #canvasbox, and keep
	 * the stage width (no max-width:100% shrink that left-anchors overflow).
	 */
	#designer-popup #customizer-container #canvasbox,
	#designer-popup #canvasbox {
		flex: 0 0 auto;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 280px !important;
		max-height: none !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		display: flex;
		flex-direction: column;
		/* flex-start + auto margins: center when smaller; full scroll range when wider */
		align-items: flex-start;
		justify-content: flex-start;
		padding: 0.35rem;
		padding-bottom: 1.25rem;
		border-radius: 10px;
		background: #eef2f0;
		box-sizing: border-box;
	}

	#designer-popup #canvasbox .canvas-container {
		/* Fabric sets an inline pixel width — never shrink below it */
		max-width: none !important;
		width: auto;
		flex: 0 0 auto;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		overflow: visible !important;
	}

	#designer-popup #canvasbox .ext-pd-area-picker {
		align-self: center;
		width: 100%;
		max-width: 100%;
	}

	/* Close / unsaved dialog: opaque card above designer shell */
	#unsavedChangesPopup {
		background: rgba(15, 23, 42, 0.48) !important;
		isolation: isolate;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	#unsavedChangesPopup > div {
		background: #ffffff !important;
		opacity: 1 !important;
		filter: none !important;
		position: relative;
		z-index: 2;
		mix-blend-mode: normal !important;
	}

	.ext-pd-area-picker {
		margin-top: 0.5rem;
		width: 100%;
		justify-content: center;
	}

	.bnt_row_last {
		display: none !important;
	}

	.zoom-controls {
		bottom: 0.5rem;
		right: 0.5rem;
		transform: scale(0.92);
		transform-origin: bottom right;
	}

	#popupContainer {
		width: 94% !important;
		height: 88% !important;
		margin: 4vh auto !important;
		padding: 12px !important;
	}

	.grid-3,
	.grid-4 {
		grid-template-columns: repeat(3, 1fr);
	}

	.text-templates-grid,
	.design-templates-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
	}
}

/* —— Narrow phones —— */
@media (max-width: 575.98px) {
	.app-header h1 {
		font-size: 0.82rem;
		max-width: 26vw;
	}

	.finish-design {
		padding: 0.4rem 0.55rem !important;
		font-size: 0.7rem !important;
	}

	#finish-proceed-action span {
		display: none;
	}

	.properties-panel:not(.collapsed) {
		min-height: clamp(200px, 42vh, 340px) !important;
		max-height: min(52vh, 400px) !important;
	}

	#designer-popup .left-toolbar .tool-button,
	.left-toolbar .tool-button {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
	}

	.form-input,
	.form-select {
		font-size: 16px; /* avoid iOS zoom on focus */
	}

	#fontsize.form-input {
		width: 4.5rem;
	}
}

/* Landscape phones: keep canvas usable */
@media (max-width: 991.98px) and (max-height: 500px) and (orientation: landscape) {
	.properties-panel:not(.collapsed) {
		min-height: clamp(140px, 48vh, 220px) !important;
		max-height: min(55vh, 240px) !important;
	}

	.app-menubar {
		padding: 0.3rem 0.5rem;
	}

	.left-toolbar {
		padding: 0.3rem 0.5rem;
	}

	#canvasbox {
		min-height: 200px !important;
	}
}