/* ── Source Sans 3 (self-hosted, variable font) ─────────────────────────── */

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('fonts/source-sans-3-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

:root {
	--bs-font-sans-serif: 'Source Sans 3', system-ui, sans-serif;
}

body {
	font-family: 'Source Sans 3', system-ui, sans-serif;
}

.app-main {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* ── Quill editor ───────────────────────────────────────────────────────── */

.ql-editor {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	min-height: 120px;
}

/* ── Newsletter item card (form editor) ─────────────────────────────────── */

.body-item-wrapper { margin-top: 2rem; }

/* ── Dynamic area (form editor) ─────────────────────────────────────────── */

.dynamic-area       { min-height: 1rem; }
.add-item-bar       { margin: .5rem 0; }

/* ── Loading overlay ────────────────────────────────────────────────────── */

#loading {
	display: none;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(200,0,0,.8);
	z-index: 9999;
}

/* ── Image uploader dialog ──────────────────────────────────────────────── */

#image-uploader-dialog { display: none; }

.iu-dialog-wrapper {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(200,200,200,.8);
	z-index: 9000;
}

.iu-dialog-form {
	position: absolute;
	padding: 15px;
	background: #fffde7;
	width: 520px;
	height: 80px;
	margin-left: -260px;
	margin-top: -40px;
	top: 45%;
	left: 50%;
	border-radius: 10px;
	border: 2px solid #aaa;
}

.iu-dialog label { display: inline-block; color: #666; }

/* ── Newsletter list (explore) ──────────────────────────────────────────── */

.list-box {
	min-height: 200px;
	max-height: 700px;
	overflow-y: auto;
	column-count: 4;
	column-gap: .75rem;
}

.list-item {
	break-inside: avoid;
	display: flex;
	align-items: center;
	gap: .35rem;
	margin-bottom: .4rem;
	padding: .3rem .5rem;
	background: #fff;
	border: 1px solid #dee2e6;
	border-radius: .375rem;
	font-size: .875rem;
}

.list-item .label { flex: 1; }
.list-item .preview { flex-shrink: 0; color: #6c757d; }

/* ── Inline buttons (previewImg / getFromURL) ───────────────────────────── */

.previewImg,
.getFromURL {
	font-size: .8rem;
	background-color: #17a2b8;
	border: none;
	padding: 4px 10px;
	color: #fff;
	cursor: pointer;
	border-radius: 4px;
	display: inline-block;
	margin-left: .75rem;
}