/**
 * CollageCraft – WordPress Plugin Styles v1.1
 * All selectors scoped to .collagecraft-wrap to avoid conflicts with themes.
 * Light theme is now the DEFAULT. Dark is opt-in via theme="dark".
 */

/* ═══════════════════════════════════════════
   CSS VARIABLES – LIGHT THEME (default)
   ═══════════════════════════════════════════ */
.collagecraft-wrap,
.collagecraft-wrap.collagecraft-theme-light {
	--cc-bg:           #eef0f3;
	--cc-surface:      #ffffff;
	--cc-surface2:     #f5f6f8;
	--cc-surface3:     #eaecef;
	--cc-border:       #dde0e5;
	--cc-border2:      #c5cad3;

	--cc-accent:       #e50014;
	--cc-accent2:      #c04a1e;
	--cc-accent-light: #fdf0ea;

	--cc-danger:       #d63c3c;
	--cc-success:      #1f9e6a;

	--cc-text:         #1c1f24;
	--cc-text2:        #4a5060;
	--cc-text3:        #8a9099;

	--cc-canvas-bg:    #dfe2e7;
	--cc-shadow:       rgba(0,0,0,.09);
	--cc-shadow-deep:  rgba(0,0,0,.16);
}

/* ═══════════════════════════════════════════
   CSS VARIABLES – DARK THEME (opt-in)
   Soft dark – not pure black, good contrast
   ═══════════════════════════════════════════ */
.collagecraft-wrap.collagecraft-theme-dark {
	--cc-bg:           #23252b;
	--cc-surface:      #2c2f38;
	--cc-surface2:     #353840;
	--cc-surface3:     #3e4250;
	--cc-border:       #454a58;
	--cc-border2:      #555b6a;

	--cc-accent:       #e8844a;
	--cc-accent2:      #cf6a34;
	--cc-accent-light: rgba(232,132,74,.12);

	--cc-danger:       #e07070;
	--cc-success:      #5ec99a;

	--cc-text:         #eceef2;
	--cc-text2:        #a8adb8;
	--cc-text3:        #686e7e;

	--cc-canvas-bg:    #1a1c21;
	--cc-shadow:       rgba(0,0,0,.30);
	--cc-shadow-deep:  rgba(0,0,0,.50);
}

/* ═══════════════════════════════════════════
   BASE WRAP
   ═══════════════════════════════════════════ */
.collagecraft-wrap {
	all: initial;
	display: flex;
	flex-direction: column;
	height: 700px;
	min-height: 520px;
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--cc-border2);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	color: var(--cc-text);
	background: var(--cc-bg);
	box-sizing: border-box;
	position: relative;
	box-shadow: 0 2px 16px var(--cc-shadow);
}

.collagecraft-wrap *,
.collagecraft-wrap *::before,
.collagecraft-wrap *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ═══════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-topbar {
	height: 50px;
	background: var(--cc-surface);
	border-bottom: 1px solid var(--cc-border);
	display: flex;
	align-items: center;
	padding: 0 14px;
	gap: 4px;
	flex-shrink: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.collagecraft-wrap .cc-topbar::-webkit-scrollbar { display: none; }

.collagecraft-wrap .cc-logo {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--cc-accent);
	letter-spacing: -0.3px;
	margin-right: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

.collagecraft-wrap .cc-sep {
	width: 1px;
	height: 20px;
	background: var(--cc-border);
	margin: 0 4px;
	flex-shrink: 0;
}

.collagecraft-wrap .cc-topbar-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-btn {
	height: 32px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--cc-text2);
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transition: background .12s, border-color .12s, color .12s;
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
}
.collagecraft-wrap .cc-btn:hover {
	background: var(--cc-surface3);
	border-color: var(--cc-border);
	color: var(--cc-text);
}

/* Outlined buttons in topbar */
.collagecraft-wrap .cc-topbar .cc-btn {
	border-color: var(--cc-border);
	background: var(--cc-surface2);
	color: var(--cc-text2);
}
.collagecraft-wrap .cc-topbar .cc-btn:hover {
	background: var(--cc-surface3);
	border-color: var(--cc-border2);
	color: var(--cc-text);
}

/* Primary */
.collagecraft-wrap .cc-btn.cc-btn-primary {
	background: var(--cc-accent);
	color: #fff;
	border-color: var(--cc-accent);
	font-weight: 600;
}
.collagecraft-wrap .cc-btn.cc-btn-primary:hover {
	background: var(--cc-accent2);
	border-color: var(--cc-accent2);
}

/* Danger */
.collagecraft-wrap .cc-btn.cc-btn-danger { color: var(--cc-text2); }
.collagecraft-wrap .cc-btn.cc-btn-danger:hover {
	background: rgba(214,60,60,.08);
	border-color: var(--cc-danger);
	color: var(--cc-danger);
}

/* Active */
.collagecraft-wrap .cc-btn.active {
	background: var(--cc-accent-light);
	border-color: var(--cc-accent);
	color: var(--cc-accent);
}

.collagecraft-wrap .cc-btn:disabled {
	opacity: .38;
	cursor: not-allowed;
	pointer-events: none;
}

/* ═══════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-main {
	flex: 1;
	display: flex;
	overflow: hidden;
}

/* ═══════════════════════════════════════════
   SIDE PANELS
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-panel {
	width: 248px;
	background: var(--cc-surface);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex-shrink: 0;
}
.collagecraft-wrap .cc-panel-left  { border-right: 1px solid var(--cc-border); }
.collagecraft-wrap .cc-panel-right { border-left:  1px solid var(--cc-border); }

.collagecraft-wrap .cc-tabs {
	display: flex;
	border-bottom: 1px solid var(--cc-border);
	flex-shrink: 0;
	background: var(--cc-surface2);
}
.collagecraft-wrap .cc-tab {
	flex: 1;
	padding: 10px 4px;
	text-align: center;
	cursor: pointer;
	color: var(--cc-text3);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: color .12s, border-color .12s, background .12s;
}
.collagecraft-wrap .cc-tab:hover {
	color: var(--cc-text2);
	background: var(--cc-surface3);
}
.collagecraft-wrap .cc-tab.active {
	color: var(--cc-accent);
	border-bottom-color: var(--cc-accent);
	background: var(--cc-surface);
}

.collagecraft-wrap .cc-tab-content {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: none;
	scrollbar-width: thin;
	scrollbar-color: var(--cc-border2) transparent;
}
.collagecraft-wrap .cc-tab-content::-webkit-scrollbar { width: 4px; }
.collagecraft-wrap .cc-tab-content::-webkit-scrollbar-thumb { background: var(--cc-border2); border-radius: 2px; }
.collagecraft-wrap .cc-tab-content.active { display: block; }

/* ═══════════════════════════════════════════
   CANVAS AREA
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-canvas-area {
	flex: 1;
	overflow: hidden;
	position: relative;
	background: var(--cc-canvas-bg);
	background-image: radial-gradient(circle, var(--cc-border) 1px, transparent 1px);
	background-size: 20px 20px;
}

.collagecraft-wrap .cc-canvas-viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.collagecraft-wrap .cc-canvas-wrapper {
	position: relative;
	transform-origin: center center;
	border-radius: 1px;
	box-shadow:
		0 0 0 1px var(--cc-border2),
		0 4px 24px var(--cc-shadow),
		0 12px 48px var(--cc-shadow-deep);
	transition: transform .1s;
}

.collagecraft-wrap .cc-drop-overlay {
	position: absolute;
	inset: 0;
	border: 2.5px dashed var(--cc-accent);
	background: var(--cc-accent-light);
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--cc-accent);
	z-index: 10;
	pointer-events: none;
}
.collagecraft-wrap .cc-drop-overlay.active { display: flex; }

/* ═══════════════════════════════════════════
   ZOOM BAR
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-zoom-bar {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cc-surface);
	border: 1px solid var(--cc-border2);
	border-radius: 24px;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px 10px;
	z-index: 20;
	box-shadow: 0 2px 10px var(--cc-shadow);
}
.collagecraft-wrap .cc-zoom-bar .cc-btn {
	border: none;
	background: transparent;
	width: 24px;
	height: 24px;
	padding: 0;
	justify-content: center;
	font-size: 16px;
}
.collagecraft-wrap .cc-zoom-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--cc-text2);
	min-width: 38px;
	text-align: center;
}

/* ═══════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-form-group { margin-bottom: 12px; }

.collagecraft-wrap .cc-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--cc-text3);
	margin-bottom: 5px;
}

.collagecraft-wrap .cc-input,
.collagecraft-wrap .cc-select,
.collagecraft-wrap .cc-textarea {
	width: 100%;
	background: var(--cc-surface2);
	border: 1px solid var(--cc-border);
	border-radius: 6px;
	color: var(--cc-text);
	font-family: inherit;
	font-size: 12px;
	padding: 6px 8px;
	transition: border-color .12s, box-shadow .12s;
	outline: none;
	-webkit-appearance: none;
}
.collagecraft-wrap .cc-input:focus,
.collagecraft-wrap .cc-select:focus,
.collagecraft-wrap .cc-textarea:focus {
	border-color: var(--cc-accent);
	box-shadow: 0 0 0 3px var(--cc-accent-light);
}
.collagecraft-wrap .cc-textarea { resize: vertical; min-height: 56px; }

.collagecraft-wrap input[type="range"] {
	width: 100%;
	accent-color: var(--cc-accent);
	cursor: pointer;
}
.collagecraft-wrap input[type="color"] {
	width: 100%;
	height: 32px;
	padding: 3px;
	background: var(--cc-surface2);
	border: 1px solid var(--cc-border);
	border-radius: 6px;
	cursor: pointer;
}

.collagecraft-wrap .cc-range-row { display: flex; align-items: center; gap: 8px; }
.collagecraft-wrap .cc-range-row input[type="range"] { flex: 1; }
.collagecraft-wrap .cc-range-val {
	font-size: 11px;
	font-weight: 600;
	color: var(--cc-text2);
	min-width: 32px;
	text-align: right;
}

.collagecraft-wrap .cc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.collagecraft-wrap .cc-btn-group { display: flex; gap: 3px; }
.collagecraft-wrap .cc-btn-group .cc-btn {
	flex: 1;
	justify-content: center;
	padding: 0 4px;
	border: 1px solid var(--cc-border);
	background: var(--cc-surface2);
}

/* ═══════════════════════════════════════════
   DROPZONE
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-dropzone {
	border: 1.5px dashed var(--cc-border2);
	border-radius: 8px;
	padding: 20px 12px;
	text-align: center;
	cursor: pointer;
	color: var(--cc-text3);
	background: var(--cc-surface2);
	transition: border-color .12s, color .12s, background .12s;
	margin-bottom: 10px;
}
.collagecraft-wrap .cc-dropzone:hover {
	border-color: var(--cc-accent);
	color: var(--cc-accent);
	background: var(--cc-accent-light);
}
.collagecraft-wrap .cc-dz-icon { font-size: 24px; margin-bottom: 7px; }
.collagecraft-wrap .cc-dropzone p { font-size: 11px; line-height: 1.5; }

/* ═══════════════════════════════════════════
   CANVAS PRESETS
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 12px; }
.collagecraft-wrap .cc-preset-btn {
	padding: 8px 5px;
	background: var(--cc-surface2);
	border: 1px solid var(--cc-border);
	border-radius: 6px;
	color: var(--cc-text2);
	cursor: pointer;
	font-family: inherit;
	font-size: 10px;
	font-weight: 500;
	text-align: center;
	transition: border-color .12s, color .12s, background .12s;
	line-height: 1.4;
}
.collagecraft-wrap .cc-preset-btn:hover {
	border-color: var(--cc-accent);
	color: var(--cc-accent);
	background: var(--cc-accent-light);
}
.collagecraft-wrap .cc-preset-dim { font-size: 9px; color: var(--cc-text3); display: block; margin-top: 2px; font-weight: 400; }

/* ═══════════════════════════════════════════
   TOGGLE SWITCH
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.collagecraft-wrap .cc-toggle-label { font-size: 11px; font-weight: 500; color: var(--cc-text2); }
.collagecraft-wrap .cc-toggle { position: relative; width: 32px; height: 18px; }
.collagecraft-wrap .cc-toggle input { opacity: 0; width: 0; height: 0; }
.collagecraft-wrap .cc-toggle-slider {
	position: absolute;
	inset: 0;
	background: var(--cc-border2);
	border-radius: 10px;
	cursor: pointer;
	transition: .18s;
}
.collagecraft-wrap .cc-toggle-slider::before {
	content: '';
	position: absolute;
	width: 12px;
	height: 12px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: .18s;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.collagecraft-wrap .cc-toggle input:checked + .cc-toggle-slider { background: var(--cc-accent); }
.collagecraft-wrap .cc-toggle input:checked + .cc-toggle-slider::before { transform: translateX(14px); }

/* ═══════════════════════════════════════════
   SHAPE GRID
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-shape-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 12px; }
.collagecraft-wrap .cc-shape-btn {
	aspect-ratio: 1;
	background: var(--cc-surface2);
	border: 1px solid var(--cc-border);
	border-radius: 7px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	font-size: 10px;
	font-weight: 500;
	color: var(--cc-text2);
	transition: border-color .12s, color .12s, background .12s;
}
.collagecraft-wrap .cc-shape-btn:hover {
	border-color: var(--cc-accent);
	color: var(--cc-accent);
	background: var(--cc-accent-light);
}
.collagecraft-wrap .cc-si { font-size: 20px; }

/* ═══════════════════════════════════════════
   FILTER PILLS
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-filter-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.collagecraft-wrap .cc-filter-pill {
	padding: 4px 9px;
	background: var(--cc-surface2);
	border: 1px solid var(--cc-border);
	border-radius: 20px;
	font-size: 10px;
	font-weight: 500;
	color: var(--cc-text2);
	cursor: pointer;
	transition: all .12s;
}
.collagecraft-wrap .cc-filter-pill:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.collagecraft-wrap .cc-filter-pill.active {
	border-color: var(--cc-accent);
	color: var(--cc-accent);
	background: var(--cc-accent-light);
	font-weight: 600;
}

/* ═══════════════════════════════════════════
   TEXT ALIGN BUTTONS
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-align-btns { display: flex; gap: 4px; }
.collagecraft-wrap .cc-align-btn {
	flex: 1;
	padding: 6px;
	background: var(--cc-surface2);
	border: 1px solid var(--cc-border);
	border-radius: 6px;
	color: var(--cc-text2);
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	transition: all .12s;
}
.collagecraft-wrap .cc-align-btn:hover { border-color: var(--cc-accent); color: var(--cc-accent); }
.collagecraft-wrap .cc-align-btn.active {
	border-color: var(--cc-accent);
	color: var(--cc-accent);
	background: var(--cc-accent-light);
}

/* ═══════════════════════════════════════════
   SECTION TITLES
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-section-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--cc-text3);
	margin-bottom: 8px;
	margin-top: 16px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--cc-border);
}
.collagecraft-wrap .cc-section-title:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════
   LAYERS LIST
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-layer-item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 8px;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background .11s, border-color .11s;
	margin-bottom: 2px;
}
.collagecraft-wrap .cc-layer-item:hover { background: var(--cc-surface2); }
.collagecraft-wrap .cc-layer-item.selected {
	background: var(--cc-accent-light);
	border-color: var(--cc-accent);
}
.collagecraft-wrap .cc-layer-icon { font-size: 12px; opacity: .6; flex-shrink: 0; }
.collagecraft-wrap .cc-layer-name {
	flex: 1;
	font-size: 11px;
	font-weight: 500;
	color: var(--cc-text2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.collagecraft-wrap .cc-layer-item.selected .cc-layer-name { color: var(--cc-accent); }
.collagecraft-wrap .cc-layer-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .11s; }
.collagecraft-wrap .cc-layer-item:hover .cc-layer-actions { opacity: 1; }
.collagecraft-wrap .cc-layer-action-btn {
	background: transparent;
	border: none;
	color: var(--cc-text3);
	cursor: pointer;
	padding: 2px 3px;
	font-size: 12px;
	border-radius: 4px;
	line-height: 1;
	transition: background .1s, color .1s;
}
.collagecraft-wrap .cc-layer-action-btn:hover { color: var(--cc-text); background: var(--cc-surface3); }

.collagecraft-wrap .cc-empty-state { color: var(--cc-text3); font-size: 11px; text-align: center; padding: 20px; line-height: 1.6; }

/* ═══════════════════════════════════════════
   NO SELECTION
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-no-selection {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 16px;
	gap: 8px;
	color: var(--cc-text3);
	font-size: 11px;
	text-align: center;
	line-height: 1.5;
}
.collagecraft-wrap .cc-ns-icon { font-size: 28px; opacity: .22; margin-bottom: 4px; }

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-toast {
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: var(--cc-text);
	color: var(--cc-surface);
	padding: 7px 16px;
	border-radius: 24px;
	font-size: 11px;
	font-weight: 600;
	z-index: 200;
	opacity: 0;
	transition: opacity .2s, transform .2s;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 4px 14px var(--cc-shadow-deep);
}
.collagecraft-wrap .cc-toast.active { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.4);
	backdrop-filter: blur(2px);
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
}
.collagecraft-wrap .cc-modal-overlay.active { display: flex; }
.collagecraft-wrap .cc-modal {
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: 10px;
	padding: 24px;
	min-width: 280px;
	max-width: 380px;
	box-shadow: 0 8px 32px var(--cc-shadow-deep);
}
.collagecraft-wrap .cc-modal-title { font-size: 16px; font-weight: 700; color: var(--cc-text); margin-bottom: 8px; }
.collagecraft-wrap .cc-modal-body { font-size: 12px; color: var(--cc-text2); margin-bottom: 20px; line-height: 1.6; }
.collagecraft-wrap .cc-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.collagecraft-wrap .cc-modal .cc-btn { border: 1px solid var(--cc-border); background: var(--cc-surface2); }

/* ═══════════════════════════════════════════
   PROPS ANIMATION
   ═══════════════════════════════════════════ */
.collagecraft-wrap .cc-props-image,
.collagecraft-wrap .cc-props-text,
.collagecraft-wrap .cc-props-shape {
	animation: cc-fade-in .15s ease;
}
@keyframes cc-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 800px) {
	.collagecraft-wrap .cc-panel-left,
	.collagecraft-wrap .cc-panel-right { width: 200px; }
}
@media (max-width: 600px) {
	.collagecraft-wrap .cc-panel-right { display: none; }
	.collagecraft-wrap .cc-panel-left  { width: 190px; }
	.collagecraft-wrap { height: 580px; }
}
@media (max-width: 440px) {
	.collagecraft-wrap .cc-panel-left  { display: none; }
	.collagecraft-wrap { height: 480px; }
}