/* =========================================================
   IDD Moodboard — Style cards, palette, zones photo,
   panneau partage, switch toggle, selected strip
   ========================================================= */

/* ---- Style templates (cards cliquables) ---- */
.idd-mb__styles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
}
.idd-mb__style-card {
	background: var(--mb-surface);
	border: 1px solid var(--mb-line);
	border-radius: var(--mb-radius-sm);
	padding: 14px;
	cursor: pointer;
	transition: border-color var(--duration, 180ms) var(--ease, ease), transform .08s, box-shadow var(--duration, 180ms) var(--ease, ease);
	font-family: inherit;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.idd-mb__style-card:hover {
	border-color: var(--mb-brand-border);
	transform: translateY(-2px);
	box-shadow: var(--mb-shadow-sm);
}
.idd-mb__style-card.is-active {
	border-color: var(--mb-brand);
	background: var(--mb-brand-soft);
}
.idd-mb__style-swatches {
	display: flex;
	gap: 3px;
	height: 26px;
	border-radius: var(--radius-xs, 6px);
	overflow: hidden;
}
.idd-mb__style-swatches span {
	flex: 1;
	display: block;
}
.idd-mb__style-name {
	font-family: var(--mb-font-serif);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--mb-ink);
}

/* ---- Palette ---- */
.idd-mb__palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}
.idd-mb__swatch {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: var(--mb-radius-sm);
	border: 2px solid var(--mb-line);
	background: var(--mb-surface);
	cursor: pointer;
	font-family: inherit;
	transition: border-color var(--duration, 180ms) var(--ease, ease), background var(--duration, 180ms) var(--ease, ease), transform .08s;
	text-align: left;
}
.idd-mb__swatch:hover {
	border-color: var(--mb-line-strong);
	transform: translateY(-1px);
}
.idd-mb__swatch.is-active {
	border-color: var(--mb-brand);
	background: var(--mb-brand-soft);
}
.idd-mb__swatch-dot {
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--swatch);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
	flex: 0 0 auto;
}
.idd-mb__swatch-label {
	font-size: .85rem;
	color: var(--mb-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Custom colors */
.idd-mb__palette-custom {
	background: var(--mb-surface-2);
	border-radius: var(--mb-radius-sm);
	padding: 16px;
	margin-bottom: 16px;
}
.idd-mb__palette-custom-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	gap: 12px;
}
.idd-mb__custom-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.idd-mb__custom-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: var(--mb-surface);
	border: 1px solid var(--mb-line);
	border-radius: var(--radius-full, 999px);
}
.idd-mb__custom-picker {
	width: 28px; height: 28px;
	border: 0; background: transparent; cursor: pointer;
	border-radius: 50%; padding: 0;
}
.idd-mb__custom-hex {
	font-family: ui-monospace, monospace;
	font-size: .8rem;
	color: var(--mb-soft);
}

/* Strip des couleurs sélectionnées (preview) */
.idd-mb__selected-strip {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	min-height: 36px;
	padding: 8px 0;
}
.idd-mb__selected-strip__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	background: var(--mb-surface-2);
	border: 1px solid var(--mb-line);
	border-radius: var(--radius-full, 999px);
	font-size: .85rem;
	color: var(--mb-soft);
}
.idd-mb__selected-strip__chip span.dot {
	width: 18px; height: 18px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

/* ---- Zones photo ---- */
.idd-mb__zones {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 900px) { .idd-mb__zones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .idd-mb__zones { grid-template-columns: 1fr; } }

.idd-mb__zone-thumb {
	position: relative;
	width: 100%;
	padding-bottom: 75%;
	border-radius: var(--mb-radius-sm);
	background-color: var(--mb-surface-2);
	background-size: cover;
	background-position: center;
	border: 1px dashed var(--mb-line-strong);
	overflow: hidden;
	transition: border-color var(--duration, 180ms) var(--ease, ease);
}
.idd-mb__zone-thumb.has-image {
	border-style: solid;
	border-color: var(--mb-line);
}
.idd-mb__zone-add,
.idd-mb__zone-remove {
	position: absolute;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	width: 36px; height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--duration, 180ms) var(--ease, ease);
}
.idd-mb__zone-add {
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: var(--mb-brand);
	color: #fff;
	font-size: 18px;
	box-shadow: var(--shadow-brand, 0 8px 20px rgba(181,99,122,.4));
}
.idd-mb__zone-add:hover { background: var(--mb-brand-dark); }
.idd-mb__zone-thumb.has-image .idd-mb__zone-add { display: none; }
.idd-mb__zone-remove {
	display: none;
	top: 8px; right: 8px;
	background: rgba(0,0,0,.55);
	color: #fff;
}
.idd-mb__zone-thumb.has-image .idd-mb__zone-remove { display: inline-flex; }
.idd-mb__zone-remove:hover { background: var(--mb-prune); }
.idd-mb__zone-add .dashicons, .idd-mb__zone-remove .dashicons {
	font-size: 18px; width: 18px; height: 18px;
}
.idd-mb__zone-title {
	font-family: var(--mb-font-serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--mb-ink);
	margin: 10px 0 2px;
}
.idd-mb__zone-sub {
	font-size: .82rem;
	color: var(--mb-muted);
	margin: 0;
}

/* ---- Share panel ---- */
.idd-mb__share-panel {
	position: fixed;
	inset: 0;
	z-index: 1100;
	pointer-events: none;
}
.idd-mb__share-panel.is-open { pointer-events: auto; }
.idd-mb__share-backdrop {
	position: absolute; inset: 0;
	background: rgba(29,24,25,.4);
	opacity: 0;
	transition: opacity var(--duration-lg, 250ms) var(--ease, ease);
}
.idd-mb__share-panel.is-open .idd-mb__share-backdrop { opacity: 1; }
.idd-mb__share-content {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(440px, 100%);
	background: var(--mb-surface);
	box-shadow: var(--shadow-xl, -20px 0 60px rgba(29,24,25,.18));
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--duration-lg, 300ms) var(--ease, ease);
}
.idd-mb__share-panel.is-open .idd-mb__share-content { transform: translateX(0); }
.idd-mb__share-head {
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--mb-line);
}
.idd-mb__share-title {
	font-family: var(--mb-font-serif);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	color: var(--mb-ink);
}
.idd-mb__share-body {
	padding: 22px 24px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}
.idd-mb__share-help {
	font-size: .88rem;
	color: var(--mb-muted);
	line-height: 1.5;
	margin: 0;
}
.idd-mb__copy-row {
	display: flex;
	gap: 8px;
}
.idd-mb__copy-row input {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid var(--mb-line-strong);
	border-radius: var(--mb-radius-sm);
	background: var(--mb-surface-2);
	color: var(--mb-soft);
	font-family: ui-monospace, monospace;
	font-size: .85rem;
}

/* Switch */
.idd-mb__switch {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	user-select: none;
}
.idd-mb__switch input { display: none; }
.idd-mb__switch-slider {
	width: 48px; height: 28px;
	border-radius: var(--radius-full, 999px);
	background: var(--mb-line-strong);
	position: relative;
	transition: background var(--duration, 180ms) var(--ease, ease);
	flex: 0 0 auto;
}
.idd-mb__switch-slider::after {
	content: "";
	position: absolute;
	left: 3px; top: 3px;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: #fff;
	transition: left var(--duration, 180ms) var(--ease, ease), background var(--duration, 180ms) var(--ease, ease);
	box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.idd-mb__switch input:checked + .idd-mb__switch-slider { background: var(--mb-brand); }
.idd-mb__switch input:checked + .idd-mb__switch-slider::after { left: 23px; }
.idd-mb__switch-label {
	font-size: .95rem;
	color: var(--mb-soft);
}