/**
 * collage-designer — editor styles.
 * Design system shared with print-shop-orders (dark navy + gold, RTL, mobile-first).
 */

/* Defined on :root too (not just #ccd-wrap) so elements appended directly to
   <body> - like the share/preview modals - can still resolve these vars. */
:root, #ccd-wrap {
	--ccd-navy: #1a2744;
	--ccd-navy-dk: #080e1a;
	--ccd-navy-md: #111b2e;
	--ccd-surface: #131e30;
	--ccd-surface2: #0d1525;
	--ccd-border: #1e2e47;
	--ccd-gold: #DDB913;
	--ccd-gold-lt: #f0d040;
	--ccd-gold-dk: #b09610;
	--ccd-teal: #6EC1E4;
	--ccd-text: #dde6f0;
	--ccd-muted: #6e849e;
	--ccd-success: #10b981;
	--ccd-danger: #ef4444;
	--ccd-shadow: 0 4px 24px rgba(0, 0, 0, .45);
	--ccd-r: 16px;

	direction: rtl;
	font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
	color: var(--ccd-text);
	background: var(--ccd-navy-dk);
	border-radius: var(--ccd-r);
	padding: 16px;
	box-sizing: border-box;
}

/* Full-width breakout — overrides any theme container (Astra/Elementor).
   margin-left: calc(50% - 50vw) shifts left by the distance between the
   centered content column and the viewport edge. */
#ccd-wrap {
	max-width: none !important;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

#ccd-wrap *,
#ccd-wrap *::before,
#ccd-wrap *::after {
	box-sizing: border-box;
}

/* ---------------- buttons ---------------- */

.ccd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	border-radius: 12px;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: .2s;
}

.ccd-btn-primary {
	background: linear-gradient(135deg, var(--ccd-gold-dk), var(--ccd-gold));
	color: #1a1a07;
	box-shadow: 0 4px 14px rgba(221, 185, 19, .25);
}

.ccd-btn-primary:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.ccd-btn:disabled,
.ccd-btn[aria-disabled="true"] {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

.ccd-btn-secondary {
	background: transparent;
	color: var(--ccd-teal);
	border: 2px solid rgba(110, 193, 228, .55);
}

.ccd-btn-secondary:hover {
	border-color: var(--ccd-teal);
	background: rgba(110, 193, 228, .08);
}

.ccd-btn-2line {
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.ccd-btn-2line span {
	display: block;
}

.ccd-btn-ghost {
	background: transparent;
	color: var(--ccd-muted);
	border: 1px solid var(--ccd-border);
}

.ccd-btn-ghost:hover {
	color: var(--ccd-text);
	border-color: var(--ccd-muted);
}

/* ---------------- step dots ---------------- */

.ccd-steps {
	display: flex;
	direction: ltr; /* numeric sequence stays LTR like the existing plugin */
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 6px 0 12px;
}

.ccd-step-dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ccd-surface);
	border: 2px solid var(--ccd-border);
	color: var(--ccd-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	flex: none;
	transition: .2s;
}

.ccd-step-dot.is-active {
	background: linear-gradient(135deg, var(--ccd-gold-dk), var(--ccd-gold));
	border-color: var(--ccd-gold);
	color: #1a1a07;
	box-shadow: 0 0 14px rgba(221, 185, 19, .5);
}

.ccd-step-dot.is-done {
	background: var(--ccd-success);
	border-color: var(--ccd-success);
	color: #fff;
}

.ccd-step-line {
	width: 38px;
	height: 2px;
	background: var(--ccd-border);
	flex: none;
}

.ccd-step-line.is-done {
	background: var(--ccd-success);
}

/* ---------------- cards / panels ---------------- */

.ccd-card {
	background: var(--ccd-surface);
	border: 1px solid var(--ccd-border);
	border-radius: var(--ccd-r);
	padding: 20px;
	box-shadow: var(--ccd-shadow);
}

.ccd-gold-tagline {
	color: var(--ccd-gold);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.3;
	text-align: center;
	margin: 0 0 16px;
}

.ccd-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
}

.ccd-subtitle {
	font-size: 14px;
	color: var(--ccd-muted);
	margin: 0 0 16px;
}

/* ================= editor canvas ================= */

.ccd-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 6px 0;
}

.ccd-canvas {
	position: relative;
	margin: 0 auto;
	box-shadow: var(--ccd-shadow);
	/* clip like the print does — what leaves the canvas won't be printed */
	overflow: hidden;
	direction: ltr; /* geometry is plain x/y — RTL is handled in panels only */
	touch-action: none;
}

.ccd-bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- entry screen (מה מעצבים היום?) ---- */

.ccd-entry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	max-width: 720px;
	margin: 18px auto 6px;
}

.ccd-entry-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 26px 16px 20px;
	background: var(--ccd-surface);
	border: 2px solid var(--ccd-border);
	border-radius: 14px;
	color: var(--ccd-text);
	font-family: inherit;
	cursor: pointer;
	transition: .15s;
	text-align: center;
}

.ccd-entry-card:hover {
	border-color: var(--ccd-gold);
	transform: translateY(-2px);
}

.ccd-entry-ico { font-size: 40px; line-height: 1; }
.ccd-entry-title { font-size: 17px; font-weight: 700; }
.ccd-entry-desc { font-size: 12.5px; color: #9fb3cc; line-height: 1.5; }
.ccd-entry-price { font-size: 13px; font-weight: 700; color: var(--ccd-gold); }

/* Quiet text link under the entry cards, not another card — for a
   returning customer with saved קולאז'/מסגרת designs (see renderStep0). */
.ccd-entry-account-link {
	display: block;
	margin: 4px auto 0;
	background: none;
	border: none;
	color: #9fb3cc;
	font-family: inherit;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

.ccd-entry-account-link:hover {
	color: var(--ccd-gold);
}

/* ---- decorative frame overlay (תמונה עם מסגרת) ---- */

/* Editor stage: above the photo slots, below the text/clipart layer. */
.ccd-frame-overlay {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: fill !important;
	pointer-events: none;
	z-index: 4;
}

/* Frames gallery panel — checkerboard behind each thumb shows the
   transparent window where the photo will appear. */
.ccd-frames-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.ccd-frame-thumb {
	position: relative;
	aspect-ratio: 3 / 4;
	padding: 0;
	border: 2px solid var(--ccd-border);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: repeating-conic-gradient(#243247 0% 25%, #1a2436 0% 50%) 0 0 / 14px 14px;
}

.ccd-frame-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ccd-frame-thumb.is-active {
	border-color: var(--ccd-gold);
	box-shadow: 0 0 0 1px var(--ccd-gold);
}

.ccd-frame-none {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: var(--ccd-surface);
	color: var(--ccd-text);
	font-size: 11px;
	font-family: inherit;
}

.ccd-frame-none span { font-size: 18px; }

/* Frames strip UNDER the canvas (frame mode): categories → frames. */
.ccd-frames-strip {
	margin-top: 6px;
	padding: 6px 8px 8px;
	background: var(--ccd-navy);
	border: 1px solid var(--ccd-border);
	border-radius: 12px;
}

.ccd-strip-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.ccd-strip-title { font-weight: 700; font-size: 14px; color: var(--ccd-text); }
.ccd-strip-hint { font-size: 12px; color: #9fb3cc; }

.ccd-strip-back { padding: 4px 10px; font-size: 12px; }

.ccd-strip-confirm {
	margin-inline-start: auto;
	padding: 6px 14px;
	font-size: 13px;
}

.ccd-strip-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.ccd-strip-thumb {
	position: relative;
	flex: none;
	width: 74px;
	height: 96px;
	padding: 0;
	border: 2px solid var(--ccd-border);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: repeating-conic-gradient(#243247 0% 25%, #1a2436 0% 50%) 0 0 / 12px 12px;
}

.ccd-strip-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ccd-strip-thumb.is-active {
	border-color: var(--ccd-gold);
	box-shadow: 0 0 0 1px var(--ccd-gold);
}

.ccd-strip-cat img { height: 72px; }

.ccd-strip-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2px 4px;
	background: rgba(13, 21, 37, .85);
	color: var(--ccd-text);
	font-size: 11px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ccd-strip-empty {
	font-size: 12px;
	color: #6e849e;
	padding: 12px;
}

/* Framed-photo badge on tray thumbs — "this one is done". */
.ccd-tray-framed-badge {
	position: absolute;
	bottom: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0a6b45;
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	z-index: 2;
}

/* "החל על כל התמונות" shortcuts in the frame-mode sidebar. */
.ccd-apply-all {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.ccd-apply-all .ccd-btn { flex: 1; }

/* Frame-mode tray: the active photo gets a gold ring; ✕ removes it. */
.ccd-tray-thumb.is-active-design {
	outline: 3px solid var(--ccd-gold);
	outline-offset: -3px;
}

.ccd-tray-remove {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: rgba(13, 21, 37, .85);
	border: 1px solid var(--ccd-border);
	border-radius: 50%;
	color: #ef4444;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

/* A neutral (non-red) menu trigger — opening a menu isn't destructive by
   itself. Teal instead of the default muted gray so it's actually easy
   to spot on a small thumbnail, not just a hint of a dot in the corner. */
.ccd-page-menu-btn {
	color: var(--ccd-teal);
	border-color: var(--ccd-teal);
	font-size: 13px;
	font-weight: 700;
}

.ccd-page-menu {
	position: fixed;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	min-width: 140px;
	background: var(--ccd-navy);
	border: 1px solid var(--ccd-border);
	border-radius: 10px;
	padding: 4px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.ccd-page-menu-item {
	background: transparent;
	border: none;
	color: var(--ccd-text);
	font-size: 13px;
	text-align: right;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
}

.ccd-page-menu-item:hover:not(:disabled) {
	background: var(--ccd-border);
}

.ccd-page-menu-item:disabled {
	color: var(--ccd-muted);
	opacity: .5;
	cursor: not-allowed;
}

.ccd-page-menu-danger {
	color: #ef4444;
}

/* ---- slots ---- */

.ccd-slot {
	position: absolute;
	overflow: hidden;
	background: var(--ccd-surface2);
	cursor: pointer;
}

.ccd-slot.is-selected {
	outline: 3px solid var(--ccd-gold);
	outline-offset: -3px;
	z-index: 3;
}

/* Free mode: part of a Ctrl+click multi-selection (moves together) —
   teal + a checkmark badge, deliberately far from the gold single-select
   outline so it's unmistakable at a glance, not just "dashed vs solid". */
.ccd-slot.is-multi-selected {
	outline: 3px dashed var(--ccd-teal);
	outline-offset: -3px;
	z-index: 3;
}

.ccd-slot.is-multi-selected::before {
	content: '✓';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ccd-teal);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	pointer-events: none;
	z-index: 4;
}

.ccd-slot.is-swap-source {
	outline: 3px dashed var(--ccd-teal);
	outline-offset: -3px;
}

.ccd-slot.is-swap-target {
	outline: 2px dashed rgba(110, 193, 228, .6);
	outline-offset: -2px;
	animation: ccd-pulse 1.2s infinite;
}

/* Free mode: locked frame — small lock badge, no resize/rotate handles rendered. */
.ccd-slot.is-locked::after {
	content: '🔒';
	position: absolute;
	top: 4px;
	right: 4px;
	font-size: 12px;
	background: rgba(13, 21, 37, .75);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

@keyframes ccd-pulse {
	50% { outline-color: var(--ccd-teal); }
}

/* The !importants protect the math-driven inline dimensions from theme
   rules like `img { max-width:100%; height:auto }` (Astra/Elementor) —
   any override distorts the image because width/height are computed
   together from the crop window. */
.ccd-slot-img {
	position: absolute !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	object-fit: fill !important;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	touch-action: none;
}

.ccd-slot-empty {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: repeating-linear-gradient(45deg, var(--ccd-surface2), var(--ccd-surface2) 12px, var(--ccd-navy-md) 12px, var(--ccd-navy-md) 24px);
	border: 2px dashed var(--ccd-border);
	color: var(--ccd-muted);
	font-family: inherit;
	cursor: pointer;
	transition: .2s;
}

.ccd-slot-empty:hover {
	border-color: var(--ccd-gold);
	color: var(--ccd-gold);
}

.ccd-plus {
	font-size: 30px;
	line-height: 1;
}

.ccd-add-label {
	font-size: 12px;
}

.ccd-lowres-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ccd-danger);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* ---- dividers ---- */

.ccd-divider {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccd-divider-v { cursor: col-resize; }
.ccd-divider-h { cursor: row-resize; }

.ccd-divider-line {
	background: transparent;
	transition: background .15s;
	border-radius: 2px;
}

.ccd-divider-v .ccd-divider-line { width: 4px; height: 100%; }
.ccd-divider-h .ccd-divider-line { height: 4px; width: 100%; }

.ccd-divider:hover .ccd-divider-line,
.ccd-divider:active .ccd-divider-line {
	background: var(--ccd-gold);
	box-shadow: 0 0 8px rgba(221, 185, 19, .6);
}

/* ---- slot toolbar ---- */

.ccd-slot-toolbar {
	position: absolute;
	z-index: 6;
	display: flex;
	gap: 2px;
	background: var(--ccd-navy);
	border: 1px solid var(--ccd-border);
	border-radius: 10px;
	padding: 4px;
	box-shadow: var(--ccd-shadow);
	direction: rtl;
}

.ccd-tb-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: var(--ccd-text);
	font-family: inherit;
	font-size: 10px;
	padding: 4px 7px;
	cursor: pointer;
	transition: .15s;
	white-space: nowrap;
}

.ccd-tb-btn:hover {
	background: var(--ccd-surface);
	color: var(--ccd-gold);
}

.ccd-tb-ico { font-size: 15px; line-height: 1.2; }

/* עריכה panel — per-image adjust sliders inside the slot toolbar */
.ccd-slot-toolbar.is-adjust {
	flex-wrap: wrap;
	width: 292px;
}

.ccd-adjust-panel {
	display: flex;
	flex-direction: column;
	gap: 7px;
	width: 100%;
	padding: 6px 8px 4px;
	direction: rtl;
}

.ccd-adjust-row {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: default;
}

.ccd-adjust-label {
	flex: none;
	width: 52px;
	font-size: 11px;
	color: var(--ccd-text);
}

/* +/- nudge buttons at the slider ends (also show which way is which). */
.ccd-adjust-nudge {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	background: var(--ccd-surface);
	border: 1px solid var(--ccd-border);
	border-radius: 6px;
	color: var(--ccd-text);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

.ccd-adjust-nudge:hover {
	color: var(--ccd-gold);
	border-color: var(--ccd-gold);
}

/* Explicit track/thumb styling — the site theme (Astra/Elementor) skins
   input[type=range] with higher-specificity selectors, so every visual
   property here is maximally specific + !important: the element is a
   transparent 20px hit area, the LOOK lives on the track/thumb pseudos.
   Applies to EVERY slider in the editor (#ccd-wrap), not just the
   per-image adjust panel — spacing/border/background panels use the same
   plain .ccd-field markup and were showing the un-skinned native slider. */
#ccd-wrap input[type="range"] {
	flex: 1;
	min-width: 80px;
	-webkit-appearance: none !important;
	appearance: none !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none;
	accent-color: var(--ccd-gold);
	cursor: pointer;
	touch-action: none;
}

#ccd-wrap input[type="range"]::-webkit-slider-runnable-track {
	height: 6px !important;
	background: var(--ccd-surface) !important;
	border: 1px solid var(--ccd-border) !important;
	border-radius: 3px !important;
	box-shadow: none !important;
}

#ccd-wrap input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	margin-top: -7px !important;
	border-radius: 50% !important;
	background: var(--ccd-gold) !important;
	border: 2px solid var(--ccd-navy) !important;
	box-shadow: none !important;
	cursor: pointer;
}

#ccd-wrap input[type="range"]::-moz-range-track {
	height: 6px !important;
	background: var(--ccd-surface) !important;
	border: 1px solid var(--ccd-border) !important;
	border-radius: 3px !important;
}

#ccd-wrap input[type="range"]::-moz-range-thumb {
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	background: var(--ccd-gold) !important;
	border: 2px solid var(--ccd-navy) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.ccd-adjust-actions {
	display: flex;
	justify-content: center;
	gap: 2px;
	border-top: 1px solid var(--ccd-border);
	padding-top: 5px;
	margin-top: 2px;
}

.ccd-adjust-actions .ccd-tb-btn.is-active {
	background: var(--ccd-surface);
	color: var(--ccd-gold);
}

/* The mobile rule hides toolbar labels (icons only) — but ✨/↔/⟳ alone
   are cryptic; the adjust actions keep their labels on every screen. */
.ccd-adjust-actions .ccd-tb-label {
	display: inline;
}

/* Mirror wrapper: flips the visible photo window about the slot center —
   crop math inside stays untouched (mirrors the server tile flip). */
.ccd-flip-wrap {
	position: absolute;
	inset: 0;
}


/* mask shape picker — visual silhouette thumbnails, not text labels */
.ccd-mask-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 5px;
	background: var(--ccd-surface);
	border: 2px solid var(--ccd-border);
	border-radius: 8px;
	color: var(--ccd-text);
	font-size: 14px;
	cursor: pointer;
}

.ccd-mask-chip.is-active {
	border-color: var(--ccd-gold);
}

.ccd-mask-chip-none {
	font-size: 16px;
	line-height: 1;
}

.ccd-mask-thumb {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ccd-text);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.ccd-tb-close {
	position: absolute;
	top: -10px;
	left: -10px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: var(--ccd-danger);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
	padding: 0;
}

.ccd-colorbox {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ccd-color-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.ccd-color-pick {
	width: 44px;
	height: 34px;
	padding: 2px;
	border: 1px solid var(--ccd-border);
	border-radius: 8px;
	background: var(--ccd-surface2);
	cursor: pointer;
}

.ccd-color-hex {
	width: 90px;
	background: var(--ccd-surface2);
	border: 1px solid var(--ccd-border);
	border-radius: 8px;
	color: var(--ccd-text);
	font-family: Consolas, monospace;
	font-size: 13px;
	padding: 8px 10px;
	text-align: center;
}

.ccd-swatch-none {
	background:
		linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%),
		linear-gradient(45deg, #777 25%, #ccc 25%, #ccc 75%, #777 75%);
	background-size: 10px 10px;
	background-position: 0 0, 5px 5px;
	position: relative;
}

.ccd-swap-hint {
	position: absolute;
	top: -34px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ccd-teal);
	color: var(--ccd-navy-dk);
	font-size: 13px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 99px;
	white-space: nowrap;
	z-index: 7;
}

/* ---- crop panel ---- */

.ccd-crop-panel {
	position: absolute;
	bottom: -52px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ccd-navy);
	border: 1px solid var(--ccd-border);
	border-radius: 99px;
	padding: 8px 16px;
	z-index: 6;
	box-shadow: var(--ccd-shadow);
}

.ccd-zoom-slider {
	width: 160px;
	accent-color: var(--ccd-gold);
}

.ccd-crop-done {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--ccd-success);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

/* ================= overlays (text + clipart) ================= */

.ccd-overlay-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}

.ccd-overlay {
	position: absolute;
	pointer-events: auto;
	cursor: move;
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
}

.ccd-overlay.is-selected {
	outline: 2px dashed var(--ccd-teal);
	outline-offset: 2px;
}

.ccd-overlay-text {
	width: 100%;
	text-align: center;
	line-height: 1.25;
	/* Preserve explicit \n breaks but also wrap long lines — the box grows
	   downward (see autosizeText) to match the wrapped print render. */
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;
	user-select: none;
	direction: rtl;
	unicode-bidi: plaintext;
}

.ccd-overlay-textarea {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 2px;
	border: 0;
	outline: 1px solid var(--ccd-gold);
	background: rgba(8, 14, 26, .25);
	border-radius: 4px;
	resize: none;
	overflow: hidden;
	/* !important: see .ccd-text-input for why (Elementor kit textarea reset) */
	line-height: 1.25 !important;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-break: break-word;
	touch-action: auto;
}

.ccd-overlay-img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	margin: 0 !important;
	border: 0 !important;
	user-select: none;
	-webkit-user-drag: none;
}

.ccd-ov-handle {
	position: absolute;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ccd-navy);
	border: 2px solid var(--ccd-teal);
	color: var(--ccd-teal);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	z-index: 7;
	cursor: pointer;
	padding: 0;
}

.ccd-ov-confirm {
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	border-color: #10b981;
	color: #10b981;
}

.ccd-ov-del {
	top: -13px;
	right: -13px;
	border-color: var(--ccd-danger);
	color: var(--ccd-danger);
}

.ccd-ov-resize {
	bottom: -13px;
	left: -13px;
	cursor: nwse-resize;
}

.ccd-ov-rotate {
	top: -13px;
	left: -13px;
	cursor: grab;
}

.ccd-ov-edit {
	bottom: -13px;
	right: -13px;
}

.ccd-ov-resize-w {
	top: 50%;
	right: -13px;
	transform: translateY(-50%);
	cursor: ew-resize;
}

.ccd-ov-resize-h {
	bottom: -13px;
	left: 50%;
	transform: translateX(-50%);
	cursor: ns-resize;
}

/* ================= editor layout (step 4) ================= */

.ccd-editor-layout {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ccd-editor-main {
	min-width: 0;
}

.ccd-editor-side {
	min-width: 0;
}

.ccd-editor-nav {
	margin-top: 14px;
	flex-direction: column;
}

.ccd-editor-nav .ccd-btn {
	width: 100%;
	padding: 9px 12px;
	font-size: 13px;
}

.ccd-designs-bar {
	margin-top: 14px;
}

.ccd-designs-label {
	font-size: 13px;
	color: #9fb3cc;
	margin-bottom: 8px;
}

.ccd-designs-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ccd-design-chip {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 8px;
	background: #131e30 center / cover no-repeat;
	border: 1px solid #1e2e47;
}

.ccd-design-chip-num {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: #DDB913;
	color: #131e30;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccd-carousel-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 8px;
}

.ccd-carousel-arrow {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 999px;
	font-size: 16px;
	line-height: 1;
}

.ccd-carousel-counter {
	font-size: 13px;
	color: #9fb3cc;
	min-width: 90px;
}

/* Tool buttons: compact 3-per-row grid wherever the sidebar lives */
.ccd-actionbar-side {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 0;
}

.ccd-actionbar-side .ccd-action {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100% !important;
	min-width: 0 !important;
	padding: 8px 4px !important;
	font-size: 12px !important;
	border-radius: 9px;
}

.ccd-actionbar-side .ccd-action-ico {
	font-size: 14px !important;
}

.ccd-editor-side .ccd-panel {
	max-height: 52vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 12px;
	margin-top: 10px;
	box-sizing: border-box;
}

/* Tool panels are narrow (280px on desktop too) — keep fields compact and
   wrapping everywhere, not just on mobile. */
.ccd-panel { box-sizing: border-box; max-width: 100%; }
.ccd-field { box-sizing: border-box; max-width: 100%; flex-wrap: wrap; gap: 6px; }
.ccd-field input[type="range"] { width: 100%; max-width: 100%; }
.ccd-swatches { max-width: 100%; }
.ccd-color-pick { flex: none; }
.ccd-color-hex { min-width: 0; }
.ccd-field-color .ccd-colorbox,
.ccd-field .ccd-bg-gallery,
.ccd-field > div:not(label) {
	flex: 1 1 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
.ccd-colorbox { max-width: 100%; box-sizing: border-box; }
.ccd-color-row { flex-wrap: wrap; gap: 6px; max-width: 100%; box-sizing: border-box; }

/* Desktop: tray column on right | canvas center | tools on left (RTL row order) */
@media (min-width: 900px) {
	.ccd-editor-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.ccd-editor-main {
		flex: 1;
	}

	.ccd-editor-side {
		width: 230px;
		flex: none;
		position: sticky;
		top: 20px;
	}

	/* Photo tray column — rightmost strip in RTL flex row (first in DOM order).
	   position:sticky keeps it in view; height is set by JS (viewport bottom - tray top).
	   overflow-y:auto provides internal scroll so thumbnails never extend beyond viewport. */
	.ccd-tray-col {
		width: 160px; /* default = 2 fixed-size columns, see setTrayCols() */
		flex: none;
		position: sticky;
		top: 0;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 8px 4px 8px 14px; /* left padding = room for the 14px drag handle */
		scrollbar-width: thin;
		scrollbar-color: var(--ccd-teal) transparent;
	}
	.ccd-tray-col::-webkit-scrollbar {
		width: 6px;
	}
	.ccd-tray-col::-webkit-scrollbar-thumb {
		background: var(--ccd-teal);
		border-radius: 3px;
	}
	.ccd-tray-col::-webkit-scrollbar-button {
		display: none;
	}

	.ccd-tray-col.ccd-tray-1col {
		width: 88px;
	}

	.ccd-tray-col.ccd-tray-3col {
		width: 232px;
	}

	/* Switch from flex to grid for the 1/2/3-column thumbnail layout.
	   Fixed 66px tracks (not 1fr) — thumbnail size never changes with the
	   drag handle, only the column count does; any dragged width beyond
	   an exact column fit is just idle space, not stretched thumbnails.
	   justify-content:start packs columns to the reading-order edge
	   (right, in this RTL layout) instead of spreading into that idle
	   space. */
	.ccd-tray-col .ccd-tray {
		display: grid !important;
		grid-template-columns: repeat(2, 66px) !important;
		justify-content: start;
		gap: 6px;
		padding: 4px 2px;
	}

	.ccd-tray-col.ccd-tray-1col .ccd-tray {
		grid-template-columns: repeat(1, 66px) !important;
	}

	.ccd-tray-col.ccd-tray-3col .ccd-tray {
		grid-template-columns: repeat(3, 66px) !important;
	}

	/* Fixed size, not width:100% of the (now also fixed) track — belt and
	   suspenders against the intrinsic-content-size grid quirk that broke
	   this before min-width:0 was added (see 1.0.118: a real photo's <img>
	   could still report a larger intrinsic size than its track). */
	.ccd-tray-col .ccd-tray-thumb,
	.ccd-tray-col .ccd-tray-add {
		width: 66px !important;
		height: 66px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		flex: none !important;
	}

	.ccd-tray-col .ccd-tray-hint {
		display: none;
	}

	/* .ccd-canvas-col wraps stage+quickbar (+ the frame-mode kiosk strip) —
	   a plain block wrapper, no layout role of its own on regular desktop.
	   Tried making the album page list a side column unconditionally here;
	   reverted per feedback (back to a row below the canvas). It becomes a
	   column again, but ONLY on short (laptop) screens — see the
	   max-height-gated block below. */
}

/* Smaller page thumbnails than the frame-mode gallery (.ccd-strip-thumb
   default 74x96) — scoped to .ccd-pages-strip only. */
.ccd-pages-strip .ccd-strip-thumb,
.ccd-pages-strip .ccd-page-add {
	width: 56px;
	height: 74px;
}

/* Laptop screens: wide enough for the desktop row layout, but short
   (typical 1366x768/1440x900 — 768-880px tall). The album page strip
   becomes a narrow vertical rail to the left of the canvas instead of a
   horizontal row below it, so the whole editor fits without scrolling.
   Untouched on taller desktop monitors (the block above) and on mobile
   (its own separate media query, strip stays horizontal there). */
@media (min-width: 900px) and (max-height: 880px) {
	/* Match the photo tray's height to the pages column beside it (both
	   capped the same way) instead of letting JS stretch the tray to the
	   full canvas height — keeps the two side columns visually balanced.
	   max-height clamps the inline height sizeTrayCol() already sets. */
	.ccd-tray-col {
		max-height: calc(100vh - 126px);
	}
	.ccd-editor-main {
		display: flex;
		align-items: flex-start;
		gap: 8px;
	}
	.ccd-editor-main .ccd-canvas-col {
		flex: 1;
		min-width: 0;
	}
	.ccd-editor-main .ccd-pages-strip {
		flex: none;
		width: 96px;
		margin-top: 0;
		display: flex;
		flex-direction: column;
	}
	.ccd-editor-main .ccd-pages-strip .ccd-strip-head {
		flex: none;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		margin-bottom: 6px;
	}
	.ccd-editor-main .ccd-pages-strip .ccd-strip-title,
	.ccd-editor-main .ccd-pages-strip .ccd-strip-hint {
		display: none;
	}
	.ccd-editor-main .ccd-pages-strip .ccd-strip-back {
		font-size: 9px;
		padding: 3px 2px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}
	.ccd-editor-main .ccd-pages-strip .ccd-save-ind {
		font-size: 9px;
		text-align: center;
	}
	/* Fixed to exactly 8 tiles (cover + 7 pages) — a live-tested exact
	   count, not a viewport guess (see 1.0.115: a shared vh-based budget
	   with .ccd-tray-col grew pages by 3 rows and photos by 0, since the
	   two have very different row heights — decoupled here so each can be
	   tuned to what it actually needs). 8*48px tiles + 7*8px gaps = 440px.
	   Extra pages scroll inside this row only (a visibly-colored inset
	   scrollbar — same treatment as .ccd-tray-col but in an accent color
	   so it's actually noticeable, not just a hint of a track). */
	.ccd-editor-main .ccd-pages-strip .ccd-strip-row {
		flex-direction: column;
		max-height: 440px;
		overflow-x: hidden;
		overflow-y: auto;
		padding-bottom: 0;
		padding-left: 6px;
		scrollbar-width: thin;
		scrollbar-color: var(--ccd-teal) transparent;
	}
	.ccd-editor-main .ccd-pages-strip .ccd-strip-row::-webkit-scrollbar {
		width: 6px;
	}
	.ccd-editor-main .ccd-pages-strip .ccd-strip-row::-webkit-scrollbar-thumb {
		background: var(--ccd-teal);
		border-radius: 3px;
	}
	/* Most albums are landscape/panoramic (established elsewhere in this
	   editor) — a tall portrait thumbnail box just letterboxes wide
	   photos with dead space top and bottom. A wide box matches the
	   common case, and is shorter too, so more pages fit before scrolling
	   is needed. */
	.ccd-editor-main .ccd-pages-strip .ccd-strip-thumb,
	.ccd-editor-main .ccd-pages-strip .ccd-page-add {
		width: 68px;
		height: 48px;
		flex: none;
	}
}

/* Hide toggle button on mobile (tray is horizontal there) */
.ccd-tray-toggle {
	display: none;
}

.ccd-pan-hint {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	text-align: center;
	font-size: 10px;
	color: var(--ccd-muted);
	background: var(--ccd-navy);
	border-radius: 0 0 8px 8px;
	padding: 2px 6px;
	white-space: nowrap;
}

.ccd-slot.is-panning {
	cursor: grabbing;
	outline: 2px solid var(--ccd-teal);
	outline-offset: -2px;
}

.ccd-slot .ccd-slot-img {
	cursor: grab;
}

.ccd-divider.is-dragging .ccd-divider-line {
	background: var(--ccd-gold);
	box-shadow: 0 0 10px rgba(221, 185, 19, .8);
}

/* ================= bottom action bar ================= */

.ccd-actionbar {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.ccd-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	background: var(--ccd-surface);
	border: 1px solid var(--ccd-border);
	border-radius: 12px;
	color: var(--ccd-text);
	font-family: inherit;
	font-size: 12px;
	padding: 10px 16px;
	min-width: 72px;
	cursor: pointer;
	transition: .2s;
}

.ccd-action:hover,
.ccd-action.is-open {
	border-color: var(--ccd-gold);
	color: var(--ccd-gold);
}

.ccd-action-ico { font-size: 20px; line-height: 1; }

/* ---- tool panels (opened by action bar) ---- */

.ccd-panel {
	background: var(--ccd-surface);
	border: 1px solid var(--ccd-border);
	border-radius: var(--ccd-r);
	padding: 16px;
	margin-top: 12px;
	animation: ccd-fadein .2s;
}

@keyframes ccd-fadein {
	from { opacity: 0; transform: translateY(6px); }
}

.ccd-field {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.ccd-field label {
	min-width: 110px;
	font-size: 14px;
	color: var(--ccd-muted);
}

.ccd-field input[type="range"] {
	flex: 1;
	accent-color: var(--ccd-gold);
}

.ccd-text-input {
	flex: 1;
	box-sizing: border-box;
	background: var(--ccd-surface2);
	border: 1px solid var(--ccd-border);
	border-radius: 8px;
	color: var(--ccd-text);
	font-family: inherit;
	font-size: 15px;
	/* !important: Elementor's global kit CSS ships a higher-specificity
	   `.elementor-kit-XXXX textarea { line-height: 0 }` reset that otherwise
	   collapses every wrapped line onto the same baseline. */
	line-height: 1.3 !important;
	padding: 9px 12px;
	resize: vertical;
	min-height: 40px;
}

.ccd-text-input:focus {
	outline: none;
	border-color: var(--ccd-gold);
}

.ccd-swatches {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ccd-swatch {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid var(--ccd-border);
	cursor: pointer;
	transition: .15s;
	padding: 0;
}

.ccd-swatch.is-active {
	border-color: var(--ccd-gold);
	box-shadow: 0 0 0 3px rgba(221, 185, 19, .3);
}

/* ================= template picker ================= */

.ccd-cats {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ccd-cat {
	background: var(--ccd-surface);
	border: 1px solid var(--ccd-border);
	border-radius: 99px;
	color: var(--ccd-muted);
	font-family: inherit;
	font-size: 14px;
	padding: 8px 18px;
	cursor: pointer;
	transition: .2s;
}

.ccd-cat.is-active {
	background: linear-gradient(135deg, var(--ccd-gold-dk), var(--ccd-gold));
	border-color: var(--ccd-gold);
	color: #1a1a07;
	font-weight: 700;
}

.ccd-tpl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.ccd-tpl {
	background: var(--ccd-surface);
	border: 2px solid var(--ccd-border);
	border-radius: 12px;
	padding: 10px;
	cursor: pointer;
	transition: .2s;
	text-align: center;
}

.ccd-tpl:hover {
	border-color: rgba(221, 185, 19, .5);
	transform: translateY(-2px);
}

.ccd-tpl.is-active {
	border-color: var(--ccd-gold);
	box-shadow: 0 0 14px rgba(221, 185, 19, .25);
}

.ccd-tpl svg {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.ccd-tpl-name {
	font-size: 12px;
	color: var(--ccd-muted);
	margin-top: 6px;
}

/* "צורות" category: 2 shape tiles + a photo-count stepper (renderShapePicker).
   Both panels are appended straight into .ccd-tpl-grid (an auto-fill CSS
   grid meant for many small template tiles) — without spanning every
   column explicitly they'd get squeezed into a single ~120px track, which
   is what made the size buttons/shape tiles stack in a single narrow
   column instead of laying out in a row. */
.ccd-shape-picker,
.ccd-shape-square-notice {
	grid-column: 1 / -1;
	width: 100%;
}

.ccd-shape-tiles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.ccd-shape-tiles .ccd-tpl {
	width: 140px;
	flex: none;
}

.ccd-shape-square-notice {
	text-align: center;
}

/* Only 5 square sizes max — always fit them in one row (shrinking as
   needed) instead of the default auto-fill grid used by the full size
   picker in step 2, which wraps once its 96px-minimum columns run out
   of room. */
.ccd-shape-square-notice .ccd-size-grid {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 8px;
}

.ccd-shape-square-notice .ccd-size-grid .ccd-size {
	flex: 1 1 0;
	min-width: 0;
	padding-left: 4px;
	padding-right: 4px;
}

.ccd-shape-disclaimer {
	max-width: 420px;
	margin: 16px auto 0;
	text-align: center;
	font-size: 12px;
	color: var(--ccd-muted);
}

/* Live thumbnail of the actual mask PNG (so heart-1/2/3 are visually
   distinguishable), not a generic emoji — colored via CSS mask-image on a
   solid-fill box, same technique as the live in-editor shape mask. */
.ccd-shape-thumb {
	width: 56px;
	height: 56px;
	margin: 0 auto;
	background: var(--ccd-gold);
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
}

.ccd-shape-count-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}

.ccd-shape-count-num {
	min-width: 28px;
	text-align: center;
	font-weight: 700;
	font-size: 16px;
}

/* ================= size picker ================= */

.ccd-size-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
}

/* Album page-size picker ("איזה גודל דף") — auto-fill grid columns stretch
   to fill the row even when there are fewer buttons than columns, leaving
   the real buttons bunched to one side instead of centered (יניב,
   30.9.2026: "מרכז לי את הלחצנים"). Flex + wrap keeps every button its own
   natural size and centers the row as a group instead. */
.ccd-album-size-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.ccd-album-size-grid .ccd-size {
	flex: 0 1 96px;
}

.ccd-size {
	background: var(--ccd-surface);
	border: 2px solid var(--ccd-border);
	border-radius: 12px;
	color: var(--ccd-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	padding: 14px 8px;
	cursor: pointer;
	transition: .2s;
	text-align: center;
}

.ccd-size:hover { border-color: rgba(221, 185, 19, .5); }

.ccd-size.is-active {
	border-color: var(--ccd-gold);
	background: rgba(221, 185, 19, .08);
}

.ccd-size-price {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--ccd-muted);
	margin-top: 4px;
}

.ccd-orient {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 18px;
}

.ccd-orient-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: var(--ccd-surface);
	border: 2px solid var(--ccd-border);
	border-radius: 12px;
	color: var(--ccd-text);
	font-family: inherit;
	font-size: 14px;
	padding: 16px 26px;
	cursor: pointer;
	transition: .2s;
}

.ccd-orient-btn:hover,
.ccd-orient-btn.is-active {
	border-color: var(--ccd-gold);
	color: var(--ccd-gold);
}

.ccd-orient-shape {
	background: var(--ccd-border);
	border: 1px solid var(--ccd-gold);
	border-radius: 3px;
	transition: .2s;
}

.ccd-orient-btn:hover .ccd-orient-shape,
.ccd-orient-btn.is-active .ccd-orient-shape {
	background: var(--ccd-gold);
}

/* Same shape swatch, reused inside an album-size .ccd-size button (see
   sizeShape() in the wizard) — centered above the size label/price. */
.ccd-size-shape {
	margin: 0 auto 8px;
}

.ccd-size.is-active .ccd-size-shape {
	background: var(--ccd-gold);
}

/* ================= uploader tray ================= */

.ccd-tray {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 4px;
	min-height: 86px;
}

.ccd-tray-thumb {
	position: relative;
	width: 66px;
	height: 66px;
	border-radius: 10px;
	overflow: hidden;
	border: 2px solid var(--ccd-border);
	flex: none;
	cursor: grab;
}

.ccd-tray-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccd-tray-thumb.is-used {
	opacity: .4;
	border-color: var(--ccd-success);
}

.ccd-tray-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	background: var(--ccd-gold);
	transition: width .2s;
	z-index: 5; /* above the loading scrim/spinner below, so it still peeks through */
}

/* A real high-res photo can take a visible moment to decode+paint before
   its upload even starts — this dark scrim + spinner covers that whole
   window (reading through uploading), not just the 4px progress bar
   which only appears once the actual upload begins. */
.ccd-tray-thumb.is-uploading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(8, 14, 26, .55);
	z-index: 3;
}

.ccd-tray-thumb.is-uploading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 22px;
	margin: -11px 0 0 -11px;
	border: 3px solid rgba(255, 255, 255, .25);
	border-top-color: var(--ccd-gold);
	border-radius: 50%;
	animation: ccd-spin .7s linear infinite;
	z-index: 4;
	pointer-events: none;
}

.ccd-tray-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ccd-gold);
	color: #1a1a07;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	pointer-events: none;
}

.ccd-drag-ghost {
	position: fixed;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid var(--ccd-gold);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 99999;
	opacity: .9;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

.ccd-slot.is-drop-target {
	outline: 3px dashed var(--ccd-gold);
	outline-offset: -3px;
}

.ccd-tray-add {
	position: relative;
	width: 66px;
	height: 66px;
	border-radius: 10px;
	border: 2px dashed var(--ccd-border);
	background: transparent;
	color: var(--ccd-muted);
	font-size: 26px;
	cursor: pointer;
	flex: none;
	transition: .2s;
}

.ccd-tray-add.is-busy::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(221, 185, 19, .3);
	border-top-color: var(--ccd-gold);
	border-radius: 50%;
	animation: ccd-spin .7s linear infinite;
}

.ccd-tray-add:hover {
	border-color: var(--ccd-gold);
	color: var(--ccd-gold);
}

.ccd-tray-hint {
	margin: 0 4px 4px;
	font-size: 12px;
	color: var(--ccd-muted);
	text-align: center;
}

/* ================= free design mode ================= */

.ccd-slot.is-free {
	cursor: move;
	/* the dashed affordance is drawn by .ccd-slot-border (above the photo) */
}

.ccd-slot.is-free.is-selected {
	z-index: 5;
	outline: 2px solid var(--ccd-gold);
	outline-offset: -2px;
}

.ccd-snap-guide {
	position: absolute;
	background: var(--ccd-gold);
	box-shadow: 0 0 6px rgba(221, 185, 19, .8);
	z-index: 9;
	pointer-events: none;
	display: none;
}

.ccd-snap-guide-v { top: 0; bottom: 0; width: 3px; }
.ccd-snap-guide-h { left: 0; right: 0; height: 3px; }

/* border overlay — sits ABOVE the photo so it's actually visible */
.ccd-slot-border {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}

/* free-mode handles live in the canvas layer (slots clip their children) */
.ccd-free-handle {
	position: absolute;
	z-index: 8;
	width: 28px;
	height: 28px;
	font-size: 14px;
	background: var(--ccd-teal);
	border-color: #fff;
	color: var(--ccd-navy-dk);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.ccd-free-rotate { cursor: grab; }

/* edge handles: small cyan pills on each side of the frame, for dragging
   that single edge to resize the frame (left/right/top/bottom). */
.ccd-free-edge {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	border: 2px solid #fff;
}

.ccd-free-edge-t,
.ccd-free-edge-b {
	cursor: ns-resize;
}

.ccd-free-edge-l,
.ccd-free-edge-r {
	cursor: ew-resize;
}

/* corner handle: resizes width + height together, following the drag */
.ccd-free-corner {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 2px solid #fff;
	cursor: nwse-resize;
}

.ccd-free-corner svg {
	pointer-events: none;
}

/* Long-press feedback: a "move content" hand icon over the frame while
   panning the photo inside it. */
.ccd-slot.is-pan-content {
	cursor: grabbing;
}

.ccd-slot.is-pan-content::after {
	content: '✥';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #fff;
	text-shadow: 0 0 6px rgba(0, 0, 0, .8);
	background: rgba(48, 209, 196, .25);
	z-index: 6;
	pointer-events: none;
}

/* low-res warning popup */
.ccd-lowres-pop {
	position: absolute;
	top: 36px;
	right: 4px;
	background: var(--ccd-navy);
	border: 1px solid var(--ccd-danger);
	border-radius: 10px;
	color: var(--ccd-text);
	font-size: 12px;
	line-height: 1.5;
	padding: 10px 30px 10px 12px;
	z-index: 10;
	box-shadow: var(--ccd-shadow);
	max-width: 200px;
}

.ccd-pop-x {
	position: absolute;
	top: 6px;
	right: 6px;
	background: none;
	border: none;
	color: var(--ccd-muted);
	cursor: pointer;
	font-size: 11px;
	padding: 2px;
}

/* preview modal */
.ccd-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5, 8, 15, .85);
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ccd-modal-box {
	position: relative;
	max-width: min(92vw, 760px);
	max-height: 88vh;
	overflow-y: auto;
	box-sizing: border-box;
	background: var(--ccd-surface);
	border: 1px solid var(--ccd-border);
	border-radius: 14px;
	padding: 10px;
}

.ccd-modal-box img {
	max-width: 100%;
	max-height: calc(88vh - 20px);
	display: block;
	border-radius: 8px;
}

/* Cover reference-photo popup (showCoverImageModal) only — the generic
   760px cap above is sized for small dialogs, not a "see it bigger" photo
   preview (יניב, 30.9.2026: "תגדיל את החלון פי 4"). Since these reference
   photos are picked from the media library, their native resolution varies
   wildly per image — using the box's default shrink-to-content sizing made
   the popup itself balloon or shrink with it ("חלקן ממש גדולות וחלקן
   קטנות", 30.9.2026). Giving the image an explicit fixed envelope (not just
   a max-*) plus object-fit:contain keeps every popup the same size
   regardless of the source photo's pixel dimensions — small photos get
   letterboxed instead of shrinking the whole window. */
.ccd-modal-box-cover {
	width: min(90vw, 900px);
	max-width: min(90vw, 900px);
}

.ccd-modal-box-cover img {
	width: 100%;
	max-width: 100%;
	height: min(70vh, 650px);
	max-height: min(70vh, 650px);
	object-fit: contain;
	background: rgba(0, 0, 0, .15);
}

/* guided tour (spotlight + tooltip) */
.ccd-tour-screen {
	position: fixed;
	inset: 0;
	z-index: 99996;
}

.ccd-tour-highlight {
	position: fixed;
	z-index: 99997;
	border: 2px solid var(--ccd-gold);
	border-radius: 10px;
	box-shadow: 0 0 0 9999px rgba(5, 8, 15, .65);
	pointer-events: none;
}

.ccd-tour-tip {
	position: fixed;
	z-index: 99998;
	width: min(280px, calc(100vw - 24px));
	background: var(--ccd-surface);
	border: 1px solid var(--ccd-border);
	border-radius: var(--ccd-r);
	box-shadow: var(--ccd-shadow);
	padding: 14px 16px;
	color: var(--ccd-text);
}

.ccd-tour-tip::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border: 8px solid transparent;
}

.ccd-tour-tip:not(.ccd-tour-tip-up)::before {
	top: -16px;
	border-bottom-color: var(--ccd-surface);
}

.ccd-tour-tip-up::before {
	bottom: -16px;
	border-top-color: var(--ccd-surface);
}

.ccd-tour-count {
	color: var(--ccd-muted);
	font-size: 12px;
	margin-bottom: 4px;
}

.ccd-tour-text {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 12px;
}

.ccd-tour-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* eyedropper / color sampling */
.ccd-eyedrop-btn {
	width: 44px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--ccd-border);
	background: var(--ccd-surface2);
	color: var(--ccd-text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccd-eyedrop-btn svg {
	flex: none;
	width: 20px;
	height: 20px;
}

.ccd-eyedrop-btn-sm svg {
	width: 18px;
	height: 18px;
}

.ccd-eyedrop-btn-sm {
	width: 36px;
	height: 28px;
	font-size: 13px;
	border-radius: 6px;
}

.ccd-eyedrop-box {
	text-align: center;
}

.ccd-eyedrop-img {
	cursor: crosshair;
}

/* compact text panel */
.ccd-text-input-main {
	width: 100%;
	/* Not center-aligned: in an empty textarea, Chrome on mobile renders
	   the caret for centered text outside the visible padding box, so it
	   looks like the cursor vanished after deleting all the text. */
	text-align: start;
	margin-bottom: 8px;
	/* Height is driven by autoResize() (matches scrollHeight) so multi-line
	   text doesn't overlap a fixed rows=2 box. */
	overflow: hidden;
	resize: none;
}

.ccd-font-select { display: none; } /* replaced by .ccd-font-picker */

.ccd-font-picker {
	max-height: 180px;
	overflow-y: auto;
	background: var(--ccd-surface2);
	border: 1px solid var(--ccd-border);
	border-radius: 8px;
	margin-bottom: 8px;
	outline: none;
	padding: 4px 0;
}
.ccd-font-picker:focus {
	border-color: var(--ccd-gold);
}

.ccd-font-section {
	font-size: 10px;
	color: rgba(255,255,255,0.35);
	padding: 6px 10px 2px;
	text-transform: uppercase;
	letter-spacing: .06em;
	pointer-events: none;
	direction: rtl;
}

.ccd-font-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 7px 10px;
	color: var(--ccd-text);
	cursor: pointer;
	direction: rtl;
	text-align: right;
	font-size: 15px;
	line-height: 1.2;
	gap: 8px;
}
.ccd-font-item:hover,
.ccd-font-item.is-active {
	background: rgba(221,185,19,.15);
	color: var(--ccd-gold);
}
.ccd-font-name {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccd-font-badge {
	font-size: 10px;
	font-family: inherit !important;
	opacity: .5;
	flex-shrink: 0;
	border: 1px solid currentColor;
	border-radius: 3px;
	padding: 1px 4px;
}

.ccd-trow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.ccd-trow > label {
	min-width: 52px;
	font-size: 12px;
	color: var(--ccd-muted);
	flex: none;
}

.ccd-trow-controls {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
	flex: 1;
	justify-content: flex-start;
}

.ccd-swatch-sm { width: 22px; height: 22px; }
.ccd-color-pick-sm { width: 32px; height: 24px; }
.ccd-color-hex-sm { width: 64px; padding: 4px 6px; font-size: 11px; }

.ccd-stepper .ccd-step-btn { width: 34px; height: 30px; font-size: 14px; }
.ccd-step-val { min-width: 32px; font-size: 12px; }

.ccd-bold-btn { font-weight: 900; }
.ccd-bold-btn.is-active { border-color: var(--ccd-gold); color: var(--ccd-gold); }

/* ================= quick bar / steppers / spinner ================= */

.ccd-quickbar {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 6px;
}

.ccd-quick-btn {
	padding: 7px 14px !important;
	font-size: 13px !important;
}

.ccd-quick-btn.is-active {
	background: var(--ccd-surface);
	color: var(--ccd-gold);
	border-color: var(--ccd-gold);
}

.ccd-stepper {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ccd-step-btn {
	width: 40px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--ccd-border);
	background: var(--ccd-surface2);
	color: var(--ccd-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	transition: .15s;
}

.ccd-step-btn:hover {
	border-color: var(--ccd-gold);
	color: var(--ccd-gold);
}

.ccd-step-val {
	min-width: 36px;
	text-align: center;
	color: var(--ccd-muted);
	font-size: 13px;
}

.ccd-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(221, 185, 19, .3);
	border-top-color: var(--ccd-gold);
	border-radius: 50%;
	animation: ccd-spin .7s linear infinite;
	vertical-align: -2px;
}

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

/* Slot photo still loading (e.g. draft restore from the server) — big
   centered spinner so the customer knows to wait. */
.ccd-slot.ccd-slot-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid rgba(255, 255, 255, .25);
	border-top-color: var(--ccd-gold);
	border-radius: 50%;
	animation: ccd-spin .7s linear infinite;
	z-index: 6;
	pointer-events: none;
}

/* ================= top back button ================= */

.ccd-back-top {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--ccd-surface);
	border: 1px solid var(--ccd-border);
	border-radius: 99px;
	color: var(--ccd-muted);
	font-family: inherit;
	font-size: 13px;
	padding: 7px 16px;
	cursor: pointer;
	transition: .2s;
	z-index: 10;
}

.ccd-back-top:hover {
	color: var(--ccd-gold);
	border-color: var(--ccd-gold);
}

.ccd-card { position: relative; }

/* Center the content in steps 1-3; step 4 (.ccd-card-editor) and the album
   start screen (.ccd-card-wide — needs room for its two-column layout,
   see .ccd-album-start-grid below) both span the full width instead. */
#ccd-app .ccd-card:not(.ccd-card-editor):not(.ccd-card-wide) {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Tighter than the default .ccd-card padding — every bit of vertical
   room matters on the full editor screen. */
.ccd-card-editor {
	padding: 12px;
}

/* ================= background gallery ================= */

.ccd-bg-gallery {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
	gap: 6px;
	max-height: 130px;
	overflow-y: auto;
}

.ccd-bg-thumb {
	height: 44px;
	border-radius: 8px;
	border: 2px solid var(--ccd-border);
	background-size: cover;
	background-position: center;
	cursor: pointer;
	transition: .15s;
	padding: 0;
}

.ccd-bg-thumb:hover {
	border-color: var(--ccd-gold);
}

/* ================= step 5: one-row form + warnings ================= */

.ccd-form-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.ccd-form-cell {
	flex: 1;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ccd-form-cell label {
	font-size: 12px;
	color: var(--ccd-muted);
}

/* !important: the theme (Elementor) ships global input styling that wins
   on load-order/specificity ties otherwise — same fight as .ccd-order-note
   and .ccd-text-input elsewhere in this file. */
.ccd-form-cell input {
	background: var(--ccd-surface2) !important;
	border: 1px solid var(--ccd-border) !important;
	border-radius: 8px;
	color: var(--ccd-text) !important;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 15px;
	width: 100%;
}

.ccd-form-cell input:focus {
	outline: none;
	border-color: var(--ccd-gold) !important;
}

/* Chrome/Edge autofill (remembered login, or the browser's own form-fill
   memory on the name/phone/email fields) paints its own background via an
   internal layer that ignores `background-color` entirely, even set inline
   with !important — the -webkit-box-shadow inset trick is the only thing
   that actually overrides it. Without this, an autofilled field (יניב,
   7.8.2026: saved login) goes white regardless of forceDarkInputColors(),
   which also makes the light-colored eye icon on top of the password field
   invisible against that white background — same root cause, one fix. */
.ccd-form-cell input:-webkit-autofill,
.ccd-form-cell input:-webkit-autofill:hover,
.ccd-form-cell input:-webkit-autofill:focus,
.ccd-form-cell input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--ccd-surface2) inset !important;
	-webkit-text-fill-color: var(--ccd-text) !important;
	caret-color: var(--ccd-text);
	transition: background-color 9999s ease-in-out 0s;
}

/* Password field (embedded login form) — an eye button to reveal the typed
   password, absolutely positioned inside the same wrapper so it overlaps
   the field instead of taking its own layout row. */
.ccd-password-wrap {
	position: relative;
}

.ccd-password-wrap input {
	padding-left: 38px;
}

.ccd-password-toggle {
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: var(--ccd-text);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 6px;
	opacity: .55;
}

.ccd-password-toggle:hover,
.ccd-password-toggle.is-active {
	opacity: 1;
}

/* Order-notes field (album summary): a labeled block above a textarea,
   unlike the default .ccd-field row layout which centers a single-line
   control beside its label. */
.ccd-order-note-field {
	align-items: flex-start;
	flex-direction: column;
}

.ccd-order-note {
	/* !important: the site theme (Elementor) ships global form-field CSS
	   that targets bare textarea/textarea:focus with higher specificity than
	   a single class — without this the field turns theme-default white on
	   white the moment it's focused (same root cause as .ccd-text-input's
	   line-height !important above). */
	background: var(--ccd-surface2) !important;
	border: 1px solid var(--ccd-border) !important;
	border-radius: 8px;
	color: var(--ccd-text) !important;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	/* !important: see .ccd-text-input above — same Elementor line-height:0 reset. */
	line-height: 1.3 !important;
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
}

.ccd-order-note:focus {
	outline: none;
	background: var(--ccd-surface2) !important;
	color: var(--ccd-text) !important;
	border-color: var(--ccd-gold) !important;
}

.ccd-toast {
	position: fixed;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ccd-navy);
	border: 1px solid var(--ccd-gold);
	color: var(--ccd-text);
	font-size: 13px;
	padding: 10px 20px;
	border-radius: 99px;
	z-index: 99999;
	box-shadow: var(--ccd-shadow);
	transition: opacity .5s;
}

.ccd-toast.is-out { opacity: 0; }

.ccd-lowres-summary {
	background: rgba(239, 68, 68, .12);
	border: 1px solid rgba(239, 68, 68, .5);
	border-radius: 10px;
	color: #ffb4b4;
	font-size: 13px;
	padding: 10px 14px;
	margin-bottom: 12px;
}

/* Hide floating chat/WhatsApp widgets while the collage editor is open —
   they cover the canvas and intercept taps, especially on mobile. */
body.ccd-open #chatbase-bubble-button,
body.ccd-open #chatbase-message-bubbles,
body.ccd-open .elementor-icon-wrapper:has(a[href*="api.whatsapp.com"]) {
	display: none !important;
}

/* Hide the page footer while the editor (step 4) is active — it's distracting
   under a full-width canvas. Targets Astra theme + generic HTML5 footer. */
body.ccd-step4 footer,
body.ccd-step4 .site-footer,
body.ccd-step4 #colophon,
body.ccd-step4 .ast-footer-area,
body.ccd-step4 .footer-widgets-area {
	display: none !important;
}

/* Hide the site's own header too — logo/search/cart/menu ate enough
   vertical space that the editor didn't fit a screen without scrolling.
   #ccd-mini-brand (below) replaces it with a small, editor-scoped brand
   bar. #wpadminbar (WP's own admin toolbar) is a <div>, not a <header>,
   so it's untouched by these selectors. */
body.ccd-step4 header,
body.ccd-step4 .site-header,
body.ccd-step4 #masthead,
body.ccd-step4 .ast-primary-header-bar-wrap,
body.ccd-step4 .ast-header-break-point-wrap,
body.ccd-step4 .ast-mobile-header-wrap {
	display: none !important;
}

/* Mini-brand bar: replaces the site header while it's hidden above. Shares
   the step-dots row (#ccd-step-row) instead of taking a row of its own —
   absolutely positioned to one side so it never shifts the dots off-center. */
#ccd-step-row {
	position: relative;
}

body.ccd-step4 #ccd-step-row {
	background: var(--ccd-navy);
	border-radius: 12px;
	padding: 4px 0;
}

/* Visible on every step (not just the full editor, ccd-step4) — יניב,
   5.8.2026: wanted the logo/version reachable from the summary screen too,
   to always be able to tell which uploaded version is actually live. */
#ccd-mini-brand {
	display: flex;
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	align-items: center;
	gap: 10px;
}

#ccd-mini-brand a {
	display: flex;
	align-items: center;
}

#ccd-mini-brand img {
	max-height: 32px;
	width: auto;
	display: block;
}

/* "שלום, X" — empty (no layout impact) when logged out, e.g. anonymous
   collage/frame customers who never reach the embedded login form. */
#ccd-user-greeting {
	font-size: 13px;
	color: var(--ccd-text);
	white-space: nowrap;
}

/* Plugin version, opposite side from the logo — visible on every step,
   same as #ccd-mini-brand above. */
#ccd-version-badge {
	display: block;
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	font-size: 11px;
	color: var(--ccd-muted);
	direction: ltr;
}

/* Drag handle on the inner (left) edge of the photo tray column */
.ccd-tray-handle {
	display: none; /* desktop only */
}

@media (min-width: 900px) {
	.ccd-tray-handle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 14px;
		cursor: col-resize;
		z-index: 2;
		color: var(--ccd-muted);
		font-size: 12px;
		background: rgba(255,255,255,.04);
		border-left: 2px solid var(--ccd-border);
		transition: color .15s, background .15s, border-color .15s;
	}

	.ccd-tray-handle::before {
		content: '⋮';
		font-size: 16px;
		line-height: 1;
	}

	.ccd-tray-handle:hover {
		color: var(--ccd-gold);
		background: rgba(221, 185, 19, .12);
		border-color: var(--ccd-gold);
	}
}

/* ================= mobile / compact panels ================= */

@media (max-width: 768px) {
	#ccd-wrap { padding: 10px; border-radius: 0; }
	.ccd-card { padding: 14px; }
	.ccd-step-line { width: 22px; }
	.ccd-action { min-width: 60px; padding: 8px 10px; font-size: 11px; }
	.ccd-tb-label { display: none; }
	.ccd-tb-ico { font-size: 18px; }

	/* The slot toolbar opens centered on the canvas (JS positions it) and
	   is draggable — on small screens just keep it compact and wrapping. */
	.ccd-slot-toolbar {
		max-width: calc(100vw - 12px);
		justify-content: center;
		flex-wrap: wrap;
		z-index: 1000;
	}
	.ccd-tb-close { top: -10px; left: -10px; }
	.ccd-tpl-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.ccd-size-grid { grid-template-columns: repeat(3, 1fr); }

	/* Panels must fit one screen: tighter fields, smaller swatches */
	.ccd-panel { padding: 10px; margin-top: 8px; }
	.ccd-field { margin-bottom: 8px; }
	.ccd-field label { min-width: 100%; font-size: 12px; }
	.ccd-swatch { width: 24px; height: 24px; }
	.ccd-swatches { gap: 4px; }
	.ccd-color-pick { width: 32px; height: 26px; }
	.ccd-color-hex { width: 64px; padding: 5px 6px; font-size: 11px; }
	.ccd-text-input { font-size: 14px; padding: 7px 10px; }
	.ccd-editor-side .ccd-panel { max-height: 40vh; }
	.ccd-eyedrop-btn { width: 38px; height: 30px; font-size: 12px; border-radius: 6px; }
	.ccd-bg-gallery { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: 96px; }
	.ccd-bg-thumb { height: 36px; }

	/* Order: canvas (1) → photo tray (2) → tools sidebar (3) */
	.ccd-editor-main { order: 1; }
	.ccd-tray-col { order: 2; }
	.ccd-editor-side { order: 3; }

	/* While a tool panel is open, hide the quickbar and photo tray so the
	   canvas sits directly above the open panel — both visible without scrolling. */
	.ccd-editor-main.ccd-panel-open .ccd-quickbar,
	.ccd-editor-layout.ccd-panel-open .ccd-tray-col {
		display: none;
	}

	/* Exit chip takes the place of the collapsed quickbar/tray, giving a
	   clear way back to the normal design view. */
	.ccd-panel-exit {
		display: none;
	}
	.ccd-editor-main.ccd-panel-open .ccd-panel-exit {
		display: block;
		width: 100%;
		margin: 8px 0;
		padding: 10px;
		background: var(--ccd-surface2);
		border: 1px solid var(--ccd-border);
		border-radius: 10px;
		color: var(--ccd-text);
		font-size: 13px;
		font-family: inherit;
		cursor: pointer;
	}
}

/* ================= album mode ================= */

/* Album start screen: "my albums" (left) + "+ אלבום חדש" (right, RTL: DOM
   order 1 = rightmost track, see the JS) side by side instead of stacked —
   a customer with several saved albums used to have to scroll past the
   whole list before reaching the new-album wizard.

   The wizard track is a bounded minmax (600-960px, wide enough for 5
   album-size buttons or all 3 cover cards on one row each). Earlier this
   was 1fr + its own max-width + margin:0 auto to re-center it within
   that huge track, which LOOKS like it should cap at 960px but doesn't:
   a grid item with an auto inline margin stops stretching to fill its
   track and shrink-wraps to its content's natural width instead (a CSS
   Grid gotcha, same family of bug as the tray-thumbnail min-width issue
   from an earlier round). The list track is ALSO bounded now, not 1fr —
   giving it the flexible leftover space on a wide screen let it balloon
   to roughly half the card, reading as more prominent than the actual
   choices next to it; both tracks now stay a sane fixed-ish size and
   justify-content:center keeps the pair as a whole centered in the wide
   card (a container-level property, not a per-item margin — doesn't
   trip the same auto-margin stretch bug). */
.ccd-album-start-grid {
	display: grid;
	grid-template-columns: minmax(600px, 960px) minmax(380px, 460px);
	justify-content: center;
	gap: 28px;
	align-items: start;
}

.ccd-album-list-col { min-width: 0; }
.ccd-album-new-col { min-width: 0; }

@media (max-width: 820px) {
	.ccd-album-start-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* Album start: "my albums" list. */
.ccd-album-list-title {
	margin: 18px 0 10px;
	font-size: 16px;
	color: var(--ccd-text);
}

.ccd-album-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	margin-bottom: 8px;
	background: var(--ccd-navy);
	border: 1px solid var(--ccd-border);
	border-radius: 12px;
}

.ccd-album-row-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.ccd-album-row-title { font-weight: 700; color: var(--ccd-text); }
.ccd-album-row-sub { font-size: 12px; color: #9fb3cc; }

.ccd-album-row-actions {
	display: flex;
	gap: 8px;
	flex: none;
}

.ccd-album-row-actions .ccd-btn { padding: 8px 14px; font-size: 13px; }

/* Album start: type picker (דפוס / נייר תמונה) — two big centered cards
   instead of the small generic .ccd-size tile, since this is the very
   first, most important choice on the screen. */
.ccd-album-type-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 14px 0 20px;
}

.ccd-album-type-ico { font-size: 30px; line-height: 1; }
.ccd-album-type-name { font-size: 16px; font-weight: 700; margin-top: 4px; }
.ccd-album-type-caption { font-size: 12px; color: var(--ccd-muted); line-height: 1.4; }

/* Wider, shorter than the default .ccd-size-grid tiles — only 2-3 cover
   types are ever configured, so one per row (or two on very wide screens)
   with room to breathe horizontally reads better than a cramped square. */
.ccd-cover-grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ccd-cover-ico { font-size: 26px; flex: none; }

.ccd-cover-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ccd-cover-label { font-size: 15px; font-weight: 700; }
.ccd-cover-text .ccd-size-price { margin-top: 0; }

/* ============ split pick button ============
   One visual button, two actual <button>s inside it: a leading
   reference-photo icon zone (opens showCoverImageModal) and the real
   selection zone beside it — seamless, not a badge stuck on top of or
   floating next to a separate control (יניב, 30.9.2026: "חייב שיהיה
   אחידות... חלק את הכפתור לאיקון מצלמה... ואחר כך טקסט הכפתור"). Used for
   cover cards, album-type cards, and light/dark swatch buttons alike. */
.ccd-split-btn {
	display: flex;
	align-items: center;
	background: var(--ccd-surface);
	border: 2px solid var(--ccd-border);
	border-radius: 12px;
	transition: .2s;
}

.ccd-split-btn:hover { border-color: rgba(221, 185, 19, .5); }

.ccd-split-btn.is-active {
	border-color: var(--ccd-gold);
	background: rgba(221, 185, 19, .08);
}

/* A fixed-size circle, not stretched to the button's full height (that
   read as an oval, מכוער — יניב, 30.9.2026) — margin on every side gives it
   breathing room from both the wrapper's border and the text zone next to
   it, no divider line needed. */
.ccd-split-btn-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 8px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: var(--ccd-text);
	font-size: 15px;
	cursor: pointer;
	padding: 0;
}

.ccd-split-btn-icon:hover { color: var(--ccd-gold); background: rgba(221, 185, 19, .18); }

.ccd-split-btn-main {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	color: inherit;
	font-family: inherit;
	cursor: pointer;
	padding: 0;
}

/* Cover-type cards — wide row, icon+label inline. */
.ccd-cover-split { width: 100%; }
.ccd-cover-split .ccd-split-btn-main {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	text-align: right;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
}

/* Album-type cards — tall stacked card. */
.ccd-album-type-split { width: 200px; }
.ccd-album-type-split .ccd-split-btn-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 20px 16px;
	text-align: center;
	font-family: inherit;
}

/* Compact variant for the light/dark swatch buttons. */
.ccd-split-btn-sm { border-radius: 10px; }
.ccd-split-btn-sm .ccd-split-btn-icon { width: 26px; height: 26px; margin: 6px; font-size: 12px; }
.ccd-split-btn-sm .ccd-split-btn-main {
	padding: 10px 16px;
	font-size: 16px;
	font-weight: 600;
}

/* Prev/next controls in the cover reference-photo popup, shown only when
   there's more than one photo to browse. */
.ccd-cover-modal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 10px;
	color: var(--ccd-muted);
	font-size: 13px;
}

/* Pages strip under the canvas (reuses the frames-strip shell). */
.ccd-page-tile { background: #0d1525; }

.ccd-page-tile img { object-fit: cover; }

.ccd-page-cover {
	border-color: var(--ccd-gold);
}

.ccd-page-cover .ccd-strip-label {
	background: rgba(140, 110, 10, .9);
	font-weight: 700;
}

.ccd-page-tile.is-drop-target {
	border-color: #6EC1E4;
	box-shadow: 0 0 0 2px #6EC1E4;
}

.ccd-page-tile .ccd-tray-remove { z-index: 2; }

.ccd-page-add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--ccd-surface2);
	border-style: dashed;
	color: var(--ccd-text);
	font-size: 12px;
}

.ccd-page-add span { font-size: 22px; color: var(--ccd-gold); }

/* "✨ מילוי אוטומטי" modal — photos-per-page range + selectable photo grid */
.ccd-autofill-modal { max-width: min(92vw, 640px); }

.ccd-autofill-range {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
	font-size: 13px;
}

.ccd-autofill-num {
	width: 56px;
	padding: 4px 6px;
	background: var(--ccd-surface2);
	border: 1px solid var(--ccd-border);
	border-radius: 6px;
	color: var(--ccd-text);
	font-size: 13px;
	text-align: center;
}

.ccd-autofill-pick-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.ccd-btn-sm { padding: 3px 8px; font-size: 11px; }

.ccd-autofill-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 6px;
	max-height: 40vh;
	overflow-y: auto;
	padding: 2px;
}

.ccd-autofill-tile {
	position: relative;
	aspect-ratio: 1;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid transparent;
	opacity: .45;
}

.ccd-autofill-tile.is-active {
	border-color: var(--ccd-gold);
	opacity: 1;
}

.ccd-autofill-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.ccd-autofill-check {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--ccd-gold);
	color: #1a1300;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
}

.ccd-autofill-tile.is-active .ccd-autofill-check { display: flex; }

.ccd-autofill-submit { width: 100%; margin-top: 12px; }

.ccd-page-ghost {
	width: 74px;
	height: 96px;
	border-radius: 8px;
	overflow: hidden;
}

/* Autosave indicator in the strip head. */
.ccd-save-ind {
	font-size: 12px;
	color: #9fb3cc;
	min-width: 70px;
}

.ccd-save-ind.is-saved { color: #35c06f; }
.ccd-save-ind.is-error { color: #ef4444; }

/* Print guides (editor only): trim area + fold line. The WHOLE layer is
   click-through — pointer-events anywhere here would sit above the slots
   and swallow every canvas interaction (drag/tap/dividers). */
.ccd-print-guides,
.ccd-print-guides * {
	pointer-events: none !important;
}

.ccd-print-guides {
	position: absolute;
	inset: 0;
	z-index: 6;
}

.ccd-guide-trim {
	position: absolute;
	border: 1px dashed rgba(158, 179, 204, .55);
}

.ccd-guide-fold {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 0;
	border-left: 1px dashed rgba(158, 179, 204, .55);
}

.ccd-guide-fold-label {
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	padding: 1px 5px;
	background: rgba(13, 21, 37, .75);
	border-radius: 6px;
	font-size: 10px;
	color: #9fb3cc;
	white-space: nowrap;
}

/* Material cover tile (faux leather / book): nothing to design. */
.ccd-cover-material {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--ccd-surface2);
}

.ccd-cover-material-ico { font-size: 24px; }

.ccd-cover-material-note {
	font-size: 10px;
	color: #9fb3cc;
}

/* Retry button on a tray photo whose server upload failed. */
.ccd-tray-retry {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(13, 21, 37, .88);
	border: 2px solid #ef4444;
	border-radius: 50%;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	z-index: 3;
}

.ccd-tray-retry:hover { background: #ef4444; }

/* ===== Keyboard focus ring (v1.0.203) =====
   One explicit, high-contrast ring for every control, so it can't be removed by the site
   theme's `outline: none` resets. :focus-visible = shown for keyboard users, not after a mouse click. */
#ccd-wrap :is(button, a, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
.ccd-modal-overlay :is(button, a, input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible,
.ccd-page-menu :is(button):focus-visible {
	outline: 3px solid var(--ccd-gold, #DDB913) !important;
	outline-offset: 2px !important;
}
/* Items inside a clipping container (overflow:hidden) would lose an outer ring: draw it inside. */
#ccd-wrap :is(.ccd-tray-thumb, .ccd-strip-thumb, .ccd-entry-card, .ccd-tpl, .ccd-split-btn-main, .ccd-slot-empty, .ccd-size, .ccd-tray-add):focus-visible {
	outline-offset: -4px !important;
}
/* Programmatic focus on a heading after a step change: announce it, don't draw a box around it. */
#ccd-wrap [tabindex="-1"]:focus,
#ccd-app:focus { outline: none !important; }

/* ===== Keyboard: photos, dividers, text/clipart (v1.0.204) ===== */
.ccd-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* Photos and text boxes: the browser's own outline is painted UNDER their positioned
   children (image wrapper, handles), so draw the ring as a ::before layer on top. */
#ccd-wrap :is(.ccd-slot, .ccd-overlay):focus-visible {
	outline: none !important;
}
/* A photo's ring is NOT a ::before (v1.0.206): the slot carries the heart/circle mask and
   would clip it. CCDSlots draws it as a sibling element in the canvas instead. */
.ccd-focus-ring {
	position: absolute;
	box-sizing: border-box;
	z-index: 7;
	pointer-events: none;
	border: 3px solid var(--ccd-gold, #DDB913);
	box-shadow: inset 0 0 0 2px rgba(13, 21, 37, .85);
}
#ccd-wrap .ccd-overlay:focus-visible::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 6;
	pointer-events: none;
	border: 3px solid var(--ccd-gold, #DDB913);
	box-shadow: inset 0 0 0 2px rgba(13, 21, 37, .85);
}
/* A divider is a thin hit strip: the ring goes round the strip, and its line lights up. */
#ccd-wrap .ccd-divider:focus-visible {
	outline-offset: 0 !important;
}
#ccd-wrap .ccd-divider:focus-visible .ccd-divider-line {
	background: var(--ccd-gold, #DDB913);
	opacity: 1;
}