/**
 * Hollywood Prints Designer UI — desktop shell
 *
 * Scoped to .hp-design-studio. Does not modify WCDP DOM order or IDs.
 */

.hp-design-studio {
	--hp-pink: #FF39A3;
	--hp-mint: #77FFC9;
	--hp-yellow: #FEC85C;

	--hp-dark: #222222;
	--hp-dark-soft: #2B2B2B;

	--hp-surface: #FFFFFF;
	--hp-surface-muted: #F6F6F8;
	--hp-canvas-bg: #F2F2F4;

	--hp-border: #E7E7EC;
	--hp-text: #242424;
	--hp-text-muted: #6F6F78;

	--hp-radius-sm: 8px;
	--hp-radius-md: 12px;
	--hp-radius-lg: 16px;

	--hp-tool-rail-width: 84px;
	--hp-tool-panel-width: 350px;
	--hp-studio-header-offset: 72px;

	--hp-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------------
   Page shell — full-width designer workspace (ported from Elementor pass)
   ------------------------------------------------------------------------- */

.hp-design-studio.layout-boxed #haru-main,
.hp-design-studio.layout-boxed .haru-page,
.hp-design-studio.layout-boxed .page-content-wrap,
.hp-design-studio.layout-boxed .entry-content,
.hp-design-studio.layout-boxed .elementor-shortcode {
	max-width: 100% !important;
	width: 100% !important;
}

.hp-design-studio .haru-container,
.hp-design-studio .e-con-inner,
.hp-design-studio .hp-design-studio-root > .elementor-element > .e-con-inner {
	max-width: 100% !important;
	width: 100% !important;
}

.hp-design-studio main.haru-page,
.hp-design-studio .page-content,
.hp-design-studio .page-content-wrap,
.hp-design-studio .entry-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* -------------------------------------------------------------------------
   Main app layout (desktop)
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hp-design-studio #wcdp-container {
		display: flex !important;
		flex-direction: row;
		align-items: stretch;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		min-height: calc(100vh - var(--hp-studio-header-offset));
		font-family: var(--hp-font);
		background: var(--hp-canvas-bg);
	}

	/*
	 * Do NOT set font-family on #wcdp-container *.
	 * That override beats WCDP's wcdp-sprites icon font and shows blank boxes.
	 */
	.hp-design-studio #wcdp-tabs-content,
	.hp-design-studio #wcdp-settings-panel,
	.hp-design-studio #wcdp-box-options-btn,
	.hp-design-studio #wcdp-opts-below-canvas,
	.hp-design-studio #wcdp-editor-container label,
	.hp-design-studio #wcdp-editor-container input,
	.hp-design-studio #wcdp-editor-container select,
	.hp-design-studio #wcdp-editor-container textarea,
	.hp-design-studio #wcdp-editor-container button,
	.hp-design-studio .hp-tool-label {
		font-family: var(--hp-font) !important;
	}

	.hp-design-studio #wcdp-container [class^="wcdp-icon-"],
	.hp-design-studio #wcdp-container [class*=" wcdp-icon-"],
	.hp-design-studio #wcdp-container [id^="wcdp-btn-"] {
		font-family: "wcdp-sprites" !important;
	}

	.hp-design-studio #wcdp-container [id^="wcdp-btn-"] .hp-tool-label {
		font-family: var(--hp-font) !important;
	}

	.hp-design-studio #wcdp-custom-tool-panel {
		display: flex !important;
		flex: 0 0 calc(var(--hp-tool-rail-width) + var(--hp-tool-panel-width));
		width: calc(var(--hp-tool-rail-width) + var(--hp-tool-panel-width)) !important;
		min-width: calc(var(--hp-tool-rail-width) + var(--hp-tool-panel-width)) !important;
		max-width: calc(var(--hp-tool-rail-width) + var(--hp-tool-panel-width)) !important;
		height: auto !important;
		margin: 0 !important;
		background: var(--hp-surface);
		border-right: 1px solid var(--hp-border);
		box-shadow: none !important;
	}

	.hp-design-studio #wcdp-vertical-tab {
		display: grid !important;
		grid-template-columns: var(--hp-tool-rail-width) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"rail panel"
			"rail actions";
		width: 100% !important;
		height: 100% !important;
		min-height: calc(100vh - var(--hp-studio-header-offset));
	}

	.hp-design-studio #wcdp-tabs-icons {
		grid-area: rail;
		float: none !important;
		width: var(--hp-tool-rail-width) !important;
		height: 100% !important;
		background: var(--hp-dark);
		padding: 10px 6px;
		box-sizing: border-box;
		border-right: 1px solid rgba(255, 255, 255, 0.06);
	}

	.hp-design-studio #wcdp-tabs-content {
		grid-area: panel;
		float: none !important;
		margin-left: 0 !important;
		min-width: 0 !important;
		width: 100% !important;
		max-width: var(--hp-tool-panel-width);
		background: var(--hp-surface) !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 16px 14px 12px !important;
		overflow: hidden;
	}

	.hp-design-studio #wcdp-box-options-btn {
		grid-area: actions;
		float: none !important;
		margin-left: 0 !important;
		padding: 12px 14px 16px !important;
		background: var(--hp-surface);
		border-top: 1px solid var(--hp-border);
	}

	.hp-design-studio #wcdp-editor-container {
		display: flex !important;
		flex-direction: column;
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		float: none !important;
		padding: 16px 20px 12px !important;
		background: var(--hp-canvas-bg) !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}
}

/* -------------------------------------------------------------------------
   Left tool rail
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hp-design-studio #wcdp-tabs-icons > span {
		float: none !important;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100% !important;
		min-height: 44px;
		height: auto !important;
		padding: 10px 4px !important;
		margin: 0 0 6px !important;
		line-height: 1 !important;
		border: none !important;
		border-left: 3px solid transparent !important;
		border-radius: var(--hp-radius-sm) !important;
		background: transparent !important;
		color: rgba(255, 255, 255, 0.88) !important;
		box-shadow: none !important;
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}

	.hp-design-studio #wcdp-tabs-icons > span::before {
		font-size: 20px !important;
		line-height: 1 !important;
		float: none !important;
		width: auto !important;
	}

	.hp-design-studio #wcdp-tabs-icons > span .hp-tool-label {
		display: block;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.2;
		letter-spacing: 0.01em;
		text-align: center;
		color: rgba(255, 255, 255, 0.72);
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		pointer-events: none;
	}

	.hp-design-studio #wcdp-tabs-icons > span:hover {
		background: rgba(255, 255, 255, 0.06) !important;
		color: #ffffff !important;
		cursor: pointer;
	}

	.hp-design-studio #wcdp-tabs-icons > span:hover .hp-tool-label {
		color: rgba(255, 255, 255, 0.88);
	}

	.hp-design-studio #wcdp-tabs-icons > span.vtab-selected {
		background: rgba(255, 57, 163, 0.16) !important;
		border-left-color: var(--hp-pink) !important;
		border-right-color: transparent !important;
		color: #ffffff !important;
	}

	.hp-design-studio #wcdp-tabs-icons > span.vtab-selected .hp-tool-label {
		color: #ffffff;
	}
}

/* -------------------------------------------------------------------------
   Active tool panel
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hp-design-studio #wcdp-tabs-content > .wcdp-tab-section {
		padding: 0 !important;
	}

	.hp-design-studio #wcdp-tabs-content .dp-title-label {
		font-size: 13px !important;
		font-weight: 600 !important;
		text-transform: none !important;
		letter-spacing: 0.02em;
		color: var(--hp-text) !important;
		text-align: left !important;
		margin: 0 0 14px !important;
		padding: 0 0 10px !important;
		border-bottom: 1px solid var(--hp-border);
		line-height: 1.3 !important;
	}

	.hp-design-studio #wcdp-tabs-content label,
	.hp-design-studio #wcdp-settings-panel label {
		color: var(--hp-text-muted) !important;
		font-weight: 500 !important;
		font-size: 12px !important;
	}

	.hp-design-studio #wcdp-tabs-content input[type="text"],
	.hp-design-studio #wcdp-tabs-content input[type="number"],
	.hp-design-studio #wcdp-tabs-content select,
	.hp-design-studio #wcdp-tabs-content textarea,
	.hp-design-studio #wcdp-settings-panel input[type="number"],
	.hp-design-studio #wcdp-settings-panel select {
		min-height: 44px !important;
		border: 1px solid var(--hp-border) !important;
		border-radius: var(--hp-radius-md) !important;
		background: var(--hp-surface) !important;
		color: var(--hp-text) !important;
		padding: 8px 12px !important;
		box-shadow: none !important;
		font-weight: 400 !important;
	}

	.hp-design-studio #wcdp-tabs-content textarea,
	.hp-design-studio #wcdp-new-textbox {
		min-height: 88px !important;
		border-radius: var(--hp-radius-md) !important;
	}

	.hp-design-studio #wcdp-add-new-text,
	.hp-design-studio #wcdp-vertical-tab .dp-btn-style span {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 10px 16px !important;
		border-radius: var(--hp-radius-md) !important;
		background: var(--hp-pink) !important;
		color: #ffffff !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		text-transform: none !important;
		border: none !important;
		cursor: pointer;
	}

	.hp-design-studio #wcdp-tabs-content .dp-content-style,
	.hp-design-studio #wcdp-tabs-content .dp-border-style,
	.hp-design-studio #wcdp-settings-panel .dp-content-style,
	.hp-design-studio #wcdp-settings-panel .dp-border-style {
		border: 1px solid var(--hp-border) !important;
		border-radius: var(--hp-radius-md) !important;
		background: var(--hp-surface-muted) !important;
		box-shadow: none !important;
	}
}

/* -------------------------------------------------------------------------
   Canvas workspace
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hp-design-studio #wcdp-canvas-container {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 8px !important;
		min-height: 0;
	}

	.hp-design-studio #wcdp-editor-container .canvas-container {
		margin: 0 auto !important;
	}

	.hp-design-studio #wcdp-editor-container canvas,
	.hp-design-studio #wcdp-editor-container .upper-canvas,
	.hp-design-studio #wcdp-editor-container .lower-canvas {
		max-width: 100% !important;
	}

	.hp-design-studio #wcdp-editor-container .upper-canvas {
		border-radius: var(--hp-radius-lg) !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
	}
}

/* -------------------------------------------------------------------------
   Top toolbar (visual refresh only — still fully visible)
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hp-design-studio #wcdp-toolbar-options {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center;
		justify-content: center;
		gap: 6px !important;
		width: 100% !important;
		margin: 0 0 14px !important;
		padding: 8px 10px !important;
		background: var(--hp-surface) !important;
		border: 1px solid var(--hp-border) !important;
		border-radius: var(--hp-radius-lg) !important;
		box-shadow: none !important;
		visibility: visible !important;
	}

	.hp-design-studio #wcdp-toolbar-options > span {
		float: none !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 42px !important;
		height: 42px !important;
		min-width: 42px !important;
		line-height: 1 !important;
		margin: 0 !important;
		border: 1px solid var(--hp-border) !important;
		border-right: 1px solid var(--hp-border) !important;
		border-radius: var(--hp-radius-sm) !important;
		background: var(--hp-surface) !important;
		color: var(--hp-text) !important;
		box-shadow: none !important;
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}

	.hp-design-studio #wcdp-toolbar-options > span::before {
		font-size: 18px !important;
		line-height: 1 !important;
		float: none !important;
		width: auto !important;
	}

	.hp-design-studio #wcdp-toolbar-options > span:hover,
	.hp-design-studio #wcdp-toolbar-options > span.btn-enabled {
		background: var(--hp-pink) !important;
		border-color: var(--hp-pink) !important;
		color: #ffffff !important;
		transform: none !important;
	}
}

/* -------------------------------------------------------------------------
   Save + Add to Cart
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico {
		width: 100% !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 48px;
		padding: 10px 16px !important;
		margin-bottom: 10px !important;
		border-radius: var(--hp-radius-md) !important;
		border: 1px solid var(--hp-border) !important;
		background: var(--hp-surface-muted) !important;
		box-shadow: none !important;
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}

	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico:last-child {
		margin-bottom: 0 !important;
	}

	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico span {
		position: static !important;
		width: auto !important;
		margin: 0 !important;
		line-height: 1 !important;
		font-size: 18px !important;
		color: inherit !important;
		background: transparent !important;
	}

	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico label {
		width: auto !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: var(--hp-text) !important;
		cursor: pointer;
	}

	/* Save — secondary */
	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico:has(#wcdp-btn-save) {
		background: var(--hp-surface) !important;
		border-color: var(--hp-border) !important;
	}

	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico:has(#wcdp-btn-save):hover {
		border-color: #cfcfd8 !important;
		background: var(--hp-surface-muted) !important;
	}

	/* Add to Cart — primary */
	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico:has(#wcdp-btn-addtocart) {
		background: var(--hp-pink) !important;
		border-color: var(--hp-pink) !important;
		min-height: 52px;
	}

	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico:has(#wcdp-btn-addtocart) label,
	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico:has(#wcdp-btn-addtocart) span {
		color: #ffffff !important;
	}

	.hp-design-studio #wcdp-box-options-btn .dp-btn-style-ico:has(#wcdp-btn-addtocart):hover {
		background: #e83296 !important;
		border-color: #e83296 !important;
	}
}

/* -------------------------------------------------------------------------
   Front / back + zoom view controls
   ------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.hp-design-studio #wcdp-opts-below-canvas {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100% !important;
		max-width: 100% !important;
		margin: 12px 0 0 !important;
		padding: 0 !important;
		visibility: visible !important;
	}

	.hp-design-studio #wcdp-canvas-thumbs-container {
		float: none !important;
		display: flex !important;
		align-items: center;
		gap: 10px;
	}

	.hp-design-studio #wcdp-canvas-thumbs-container > div {
		margin: 0 !important;
		opacity: 0.72;
		transition: opacity 0.15s ease;
	}

	.hp-design-studio #wcdp-canvas-thumbs-container > div.dp-canvas-active {
		opacity: 1;
	}

	.hp-design-studio #wcdp-canvas-thumbs-container img {
		border: 2px solid var(--hp-border) !important;
		border-radius: var(--hp-radius-md) !important;
		padding: 4px !important;
		background: var(--hp-surface) !important;
		box-shadow: none !important;
		transition: border-color 0.15s ease;
	}

	.hp-design-studio #wcdp-canvas-thumbs-container .dp-canvas-active img {
		border-color: var(--hp-pink) !important;
		box-shadow: 0 0 0 1px rgba(255, 57, 163, 0.15) !important;
	}

	.hp-design-studio #wcdp-canvas-thumbs-container label {
		font-size: 12px !important;
		font-weight: 600 !important;
		color: var(--hp-text-muted) !important;
	}

	.hp-design-studio #wcdp-canvas-thumbs-container .dp-canvas-active label {
		color: var(--hp-pink) !important;
	}

	.hp-design-studio #wcdp-zoom-canvas-container {
		float: none !important;
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		width: auto !important;
		min-width: 180px;
		padding: 8px 12px !important;
		background: var(--hp-surface) !important;
		border: 1px solid var(--hp-border) !important;
		border-radius: var(--hp-radius-md) !important;
		box-shadow: none !important;
	}

	.hp-design-studio #wcdp-zoom-canvas-container .wcdp-icon-zoom {
		color: var(--hp-text-muted) !important;
		background: transparent !important;
		float: none !important;
		width: auto !important;
		font-size: 16px !important;
		line-height: 1 !important;
	}

	.hp-design-studio #wcdp-zoom-canvas-container .dp-zoom-value {
		font-size: 12px !important;
		font-weight: 600 !important;
		color: var(--hp-text-muted) !important;
		min-width: 38px;
		text-align: right;
	}

	.hp-design-studio #wcdp-zoom-canvas-container input[type="range"] {
		width: 96px !important;
	}
}

/* -------------------------------------------------------------------------
   Large desktop tuning
   ------------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.hp-design-studio {
		--hp-tool-panel-width: 360px;
	}
}

@media (min-width: 1440px) {
	.hp-design-studio #wcdp-editor-container {
		padding: 18px 28px 14px !important;
	}
}

@media (min-width: 1920px) {
	.hp-design-studio {
		--hp-tool-panel-width: 380px;
	}
}

/* -------------------------------------------------------------------------
   Tablet / mobile — desktop shell rules are min-width gated above.
   Only hide rail labels; WCDP native responsive layout remains intact.
   ------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.hp-design-studio #wcdp-tabs-icons > span .hp-tool-label {
		display: none;
	}
}