/**
 * FM Stillness Marketplace — Submission form styles.
 *
 * Uses Framed Minds brand tokens. All colors, typography, and spacing
 * align with the Echo brand guardian spec: warm neutrals, rounded
 * corners, generous whitespace, Heal Teal accents.
 */

:root {
	--fmsm-bg:        #FFFFFF;
	--fmsm-warm:      #F4F1E8;
	--fmsm-beige:     #E9E2D0;
	--fmsm-ink:       #151515;
	--fmsm-body:      #4A5560;
	--fmsm-meta:      #A0A7B0;
	--fmsm-border:    #E7EAED;
	--fmsm-heal:      #3A5A40;
	--fmsm-cta:       #BCCF97;
	--fmsm-cta-hover: #9FAF80;
	--fmsm-success:   #96CA42;
	--fmsm-error:     #EB5757;
}

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

.fmsm-form-wrap {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 0 48px;
	color: var(--fmsm-ink);
	font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
}

.fmsm-form-header {
	text-align: center;
	margin-bottom: 32px;
}

.fmsm-form-header h2 {
	font-family: 'Avenir', Georgia, serif;
	font-size: 32px;
	font-weight: 600;
	color: var(--fmsm-heal);
	margin: 0 0 12px;
}

.fmsm-form-intro {
	color: var(--fmsm-body);
	max-width: 520px;
	margin: 0 auto;
	font-size: 16px;
}

/* ─── Gate messaging (non-Keepers) ────────────────────── */

.fmsm-gate {
	max-width: 520px;
	margin: 60px auto;
	padding: 40px;
	background: var(--fmsm-warm);
	border-radius: 16px;
	text-align: center;
}

.fmsm-gate__heading {
	font-family: 'Avenir', Georgia, serif;
	font-size: 24px;
	font-weight: 600;
	color: var(--fmsm-heal);
	margin: 0 0 12px;
}

.fmsm-gate__body {
	color: var(--fmsm-body);
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

/* ─── Notices ─────────────────────────────────────────── */

.fmsm-notice {
	padding: 16px 20px;
	border-radius: 8px;
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.5;
}

.fmsm-notice--success {
	background: #F2F7E9;
	color: #2D4A1F;
	border-left: 4px solid var(--fmsm-success);
}

.fmsm-notice--error {
	background: #FDECEC;
	color: #7A1D1E;
	border-left: 4px solid var(--fmsm-error);
}

.fmsm-notice--info {
	background: var(--fmsm-warm);
	color: var(--fmsm-body);
	border-left: 4px solid var(--fmsm-heal);
}

/* ─── Field groups ────────────────────────────────────── */

.fmsm-field-group {
	background: var(--fmsm-bg);
	border: 1px solid var(--fmsm-border);
	border-radius: 12px;
	padding: 28px 32px;
	margin-bottom: 20px;
}

.fmsm-field-group legend {
	font-family: 'Avenir', Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	color: var(--fmsm-heal);
	padding: 0 8px;
	margin-left: -8px;
}

/* ─── Individual fields ───────────────────────────────── */

.fmsm-field {
	margin-bottom: 20px;
}

.fmsm-field:last-child { margin-bottom: 0; }

.fmsm-field label,
.fmsm-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
	color: var(--fmsm-ink);
}

.fmsm-required {
	color: var(--fmsm-error);
	font-weight: 400;
}

.fmsm-hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--fmsm-meta);
	line-height: 1.5;
}

.fmsm-form input[type="text"],
.fmsm-form input[type="email"],
.fmsm-form input[type="number"],
.fmsm-form textarea,
.fmsm-form select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--fmsm-border);
	border-radius: 8px;
	background: var(--fmsm-warm);
	font-family: inherit;
	font-size: 15px;
	color: var(--fmsm-ink);
	box-sizing: border-box;
	transition: border-color .2s, background-color .2s;
}

.fmsm-form input:focus,
.fmsm-form textarea:focus,
.fmsm-form select:focus {
	outline: none;
	border-color: var(--fmsm-heal);
	background: var(--fmsm-bg);
}

.fmsm-form textarea {
	resize: vertical;
	min-height: 80px;
}

/* ─── Radios and checkboxes ───────────────────────────── */

.fmsm-radio-row {
	display: flex;
	gap: 24px;
	margin-top: 4px;
}

.fmsm-radio-row label,
.fmsm-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 15px;
	cursor: pointer;
	color: var(--fmsm-ink);
	margin-bottom: 0;
}

.fmsm-checkbox-list,
.fmsm-frames-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px 16px;
	margin-top: 4px;
}

.fmsm-checkbox input[type="checkbox"],
.fmsm-radio-row input[type="radio"] {
	margin: 0;
	accent-color: var(--fmsm-heal);
}

/* ─── Media picker row ────────────────────────────────── */

.fmsm-form input[type="file"].fmsm-file {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 10px 12px;
	border: 1px dashed var(--fmsm-border);
	border-radius: 8px;
	background: var(--fmsm-warm);
	font-family: inherit;
	font-size: 14px;
	color: var(--fmsm-body);
	box-sizing: border-box;
	cursor: pointer;
}

.fmsm-form input[type="file"].fmsm-file:focus {
	outline: none;
	border-color: var(--fmsm-heal);
	background: var(--fmsm-bg);
}

.fmsm-form input[type="file"].fmsm-file::file-selector-button {
	margin-right: 12px;
	padding: 8px 16px;
	border: 1px solid var(--fmsm-cta);
	border-radius: 8px;
	background: var(--fmsm-cta);
	color: var(--fmsm-ink);
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background-color .2s;
}

.fmsm-form input[type="file"].fmsm-file::file-selector-button:hover {
	background: var(--fmsm-cta-hover);
	border-color: var(--fmsm-cta-hover);
}

.fmsm-media-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.fmsm-media-info {
	font-size: 13px;
	color: var(--fmsm-meta);
}

.fmsm-featured-preview {
	margin-top: 10px;
}

.fmsm-featured-preview img {
	max-width: 320px;
	max-height: 180px;
	border-radius: 8px;
	display: block;
}

/* ─── Price row ───────────────────────────────────────── */

.fmsm-price-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fmsm-price-prefix {
	font-size: 17px;
	color: var(--fmsm-body);
}

.fmsm-price-row input {
	max-width: 140px;
}

.fmsm-creator-net {
	font-weight: 600;
	color: var(--fmsm-heal);
}

/* ─── Buttons ─────────────────────────────────────────── */

.fmsm-btn {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.fmsm-btn--primary {
	background: var(--fmsm-cta);
	color: var(--fmsm-ink);
	border-color: var(--fmsm-cta);
	padding: 12px 28px;
	font-size: 16px;
}

.fmsm-btn--primary:hover {
	background: var(--fmsm-cta-hover);
	color: var(--fmsm-bg);
}

.fmsm-btn--secondary {
	background: var(--fmsm-warm);
	color: var(--fmsm-ink);
	border-color: var(--fmsm-border);
}

.fmsm-btn--secondary:hover {
	background: var(--fmsm-beige);
}

/* ─── Submit row ──────────────────────────────────────── */

.fmsm-form-actions {
	text-align: center;
	padding: 24px 0 0;
}

.fmsm-submission-note {
	margin-top: 16px;
	font-size: 13px;
	color: var(--fmsm-meta);
}

/* ─── Conditional fields ──────────────────────────────── */

.fmsm-conditional[hidden],
.fmsm-price-field[hidden] {
	display: none;
}

/* ─── Mobile ──────────────────────────────────────────── */

@media (max-width: 600px) {
	.fmsm-field-group {
		padding: 20px;
	}

	.fmsm-form-header h2 {
		font-size: 26px;
	}

	.fmsm-checkbox-list,
	.fmsm-frames-grid {
		grid-template-columns: 1fr;
	}

	.fmsm-btn--primary {
		width: 100%;
	}
}

/* ─── App-context signpost (in-app "manage on the web") ─── */
/* Structural styles live inline so the signpost renders correctly even where
   this stylesheet isn't enqueued (e.g. BuddyBoss profile tabs). The rules
   below only add interaction states that inline styles can't express. */

.fmsm-app-signpost__copy:hover,
.fmsm-app-signpost__open:hover {
	filter: brightness(0.97);
}

.fmsm-app-signpost__copy:focus-visible,
.fmsm-app-signpost__open:focus-visible,
.fmsm-app-notice .fmsm-app-signpost__copy:focus-visible {
	outline: 2px solid var(--fmsm-heal);
	outline-offset: 2px;
}

.fmsm-app-signpost__copy:active {
	transform: translateY(1px);
}

@media (max-width: 480px) {
	.fmsm-app-signpost {
		margin-left: 16px !important;
		margin-right: 16px !important;
		padding: 28px 20px !important;
	}
	.fmsm-app-signpost__actions {
		flex-direction: column !important;
	}
	.fmsm-app-signpost__actions .fmsm-btn {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}
}