/* ============================================================
   Aizle Dots → admin settings page styling
   @package AizleDots
   ============================================================ */

.gd-settings-wrap {
	max-width: 820px;
}

/* Live preview — sticky at the top so it stays visible while you tune. */
.gd-preview-pane {
	position: sticky;
	top: 32px;
	z-index: 10;
	margin: 0 0 20px;
	padding-bottom: 8px;
	background: #f0f0f1;
}

.gd-preview-pane .description {
	margin: 6px 2px 0;
}

#gd-preview {
	display: block;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 2 / 1;
	height: auto;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: linear-gradient( 135deg, #1d2327 0%, #2c3338 100% );
	cursor: crosshair;
}

/* "Start here" card + presets. */
.gd-card {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 20px;
}

.gd-card h2 {
	margin-top: 0;
}

.gd-presets-label {
	margin: 12px 0 8px;
	color: #50575e;
}

.gd-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gd-preset.is-active {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	font-weight: 600;
}

/* Section cards (Look, Movement & cursor, etc.) — bounding boxes like Start. */
.gd-section-card h2 {
	margin: 0 0 2px;
	font-size: 1.1em;
}

.gd-section-card .form-table {
	margin-top: 0;
}

/* Palette repeater. */
.gd-palette {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-bottom: 8px;
}

.gd-palette-row {
	display: flex;
	align-items: center;
	gap: 4px;
}

.gd-palette-remove {
	color: #b32d2e;
	text-decoration: none;
}

.gd-palette-remove:hover {
	color: #8a2424;
}

/* Range sliders + readouts. */
.gd-range {
	vertical-align: middle;
	width: 240px;
	max-width: 100%;
}

.gd-range-output {
	display: inline-block;
	min-width: 5.5em;
	margin-left: 10px;
	font-variant-numeric: tabular-nums;
	color: #50575e;
}

.gd-reset-form {
	margin: -8px 0 8px;
}

.gd-credit {
	margin-top: 24px;
	color: #50575e;
}