/* Store MM — Guided submission Stage 1 (idea-start)
   Palette: white bg, #0a0a0a text, #c0392b red sparingly, hairline #e8e8e8 borders. */

.smm-idea-wrap,
.smm-idea-mod {
	max-width: 1080px;
	margin: 0 auto;
	color: #1a1a1a;
	font-size: 15px;
	line-height: 1.55;
}
.smm-idea-wrap *,
.smm-idea-mod * { box-sizing: border-box; }

/* ── Gate / fallback ── */
.smm-idea-gate {
	max-width: 520px;
	margin: 40px auto;
	padding: 28px 24px;
	text-align: center;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	background: #fff;
}

/* ── Hero ── */
.smm-idea-hero {
	text-align: center;
	padding: 34px 20px 10px;
}
.smm-idea-kicker {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #c0392b;
	margin-bottom: 10px;
}
.smm-idea-h1 {
	font-size: 2rem;
	line-height: 1.15;
	font-weight: 800;
	color: #0a0a0a;
	margin: 0 0 12px;
}
.smm-idea-sub {
	max-width: 640px;
	margin: 0 auto;
	color: #6b6b6b;
	font-size: 1.02rem;
}

/* ── Section titles ── */
.smm-idea-section-title {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #0a0a0a;
	text-align: center;
	margin: 0 0 18px;
}

/* ── Journey bar ── */
.smm-idea-journey-block { padding: 26px 12px 10px; }

.smm-journey {
	display: flex;
	align-items: flex-start;
	gap: 0;
	max-width: 920px;
	margin: 0 auto;
}
.smm-journey-step {
	position: relative;
	flex: 1 1 0;
	text-align: center;
	min-width: 0;
}
.smm-journey-line {
	position: absolute;
	top: 15px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: #e0e0e0;
	z-index: 0;
}
.smm-journey-step:first-child .smm-journey-line { display: none; }
.smm-journey-node {
	position: relative;
	z-index: 1;
	width: 32px;
	height: 32px;
	margin: 0 auto 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .82rem;
	font-weight: 700;
	background: #fff;
	border: 2px solid #d0d0d0;
	color: #9a9a9a;
}
.smm-journey-text { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.smm-journey-label {
	font-size: .72rem;
	font-weight: 700;
	color: #6b6b6b;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.smm-journey-hint { font-size: .7rem; color: #9a9a9a; line-height: 1.3; }

/* states */
.smm-journey-step--done .smm-journey-node {
	background: #0a0a0a; border-color: #0a0a0a; color: #fff;
}
.smm-journey-step--done .smm-journey-line { background: #1a7f4b; }
.smm-journey-step--done .smm-journey-label { color: #0a0a0a; }

.smm-journey-step--active .smm-journey-node {
	background: #c0392b; border-color: #c0392b; color: #fff;
	box-shadow: 0 0 0 4px rgba(192,57,43,.14);
}
.smm-journey-step--active .smm-journey-label { color: #c0392b; }

.smm-journey-step--rejected .smm-journey-node { border-color: #e0e0e0; color: #c9c9c9; }

.smm-journey--compact .smm-journey-node { width: 26px; height: 26px; font-size: .74rem; }
.smm-journey--compact .smm-journey-line { top: 12px; }

/* ── Layout grid ── */
.smm-idea-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 22px;
	margin-top: 18px;
	align-items: start;
}
.smm-idea-main { min-width: 0; }

/* ── Cards ── */
.smm-idea-card {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0,0,0,.05);
	padding: 22px 24px;
	margin-bottom: 18px;
}
.smm-idea-card-title {
	font-size: 1.12rem;
	font-weight: 800;
	color: #0a0a0a;
	margin: 0 0 4px;
}
.smm-idea-card-hint { color: #6b6b6b; font-size: .92rem; margin: 0 0 18px; }

/* ── Rules card ── */
.smm-idea-rules { border-left: 4px solid #c0392b; }
.smm-idea-rules-list { margin: 12px 0 0; padding: 0 0 0 2px; list-style: none; }
.smm-idea-rules-list li {
	position: relative;
	padding: 0 0 12px 26px;
	color: #1a1a1a;
}
.smm-idea-rules-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #c0392b;
}
.smm-idea-rules-list a { color: #c0392b; font-weight: 600; }

/* ── Fields ── */
.smm-idea-field { margin-bottom: 18px; }
.smm-idea-label {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b6b6b;
	margin-bottom: 7px;
}
.smm-idea-optional {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	color: #9a9a9a;
	font-size: .78rem;
}
.smm-idea-input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: .95rem;
	color: #0a0a0a;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.smm-idea-input:focus {
	outline: none;
	border-color: #0a0a0a;
	box-shadow: 0 0 0 3px rgba(10,10,10,.06);
}
.smm-idea-textarea { resize: vertical; min-height: 110px; }
.smm-idea-select { appearance: none; background: #fff; cursor: pointer; }
.smm-idea-counter { font-size: .76rem; color: #9a9a9a; margin-top: 5px; }
.smm-idea-hint { font-size: .8rem; color: #8a8a8a; margin: 6px 0 0; }
.smm-idea-err { color: #c0392b; font-size: .82rem; margin: 6px 0 0; display: none; }
.smm-idea-err.is-shown { display: block; }
.smm-idea-input.is-invalid { border-color: #c0392b; }

/* unit field */
.smm-idea-unit { display: flex; align-items: center; gap: 0; }
.smm-idea-unit .smm-idea-input { border-radius: 0; }
.smm-idea-prefix, .smm-idea-suffix {
	padding: 11px 12px;
	background: #f7f7f7;
	border: 1px solid #e0e0e0;
	font-size: .9rem;
	color: #6b6b6b;
	white-space: nowrap;
}
.smm-idea-prefix { border-right: none; border-radius: 8px 0 0 8px; }
.smm-idea-suffix { border-left: none; border-radius: 0 8px 8px 0; }

/* ── Category cards ── */
.smm-idea-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.smm-idea-cat-card {
	padding: 13px 12px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	font-size: .9rem;
	font-weight: 600;
	color: #1a1a1a;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s, background .15s;
}
.smm-idea-cat-card:hover { border-color: #b0b0b0; }
.smm-idea-cat-card.is-active {
	border-color: #0a0a0a;
	background: #0a0a0a;
	color: #fff;
}
.smm-idea-subcat-row { margin-top: 16px; }

/* ── Reference image drop ── */
.smm-idea-drop {
	position: relative;
	border: 2px dashed #d8d8d8;
	border-radius: 10px;
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .15s, background .15s;
}
.smm-idea-drop:hover, .smm-idea-drop.is-drag { border-color: #0a0a0a; background: #fafafa; }
.smm-idea-drop-ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	color: #9a9a9a;
	text-align: center;
	padding: 14px;
}
.smm-idea-drop-ph small { font-size: .72rem; color: #b0b0b0; }
#smm-idea-img-prev { max-width: 100%; max-height: 220px; display: block; }
.smm-idea-img-remove {
	position: absolute;
	top: 8px; right: 8px;
	width: 26px; height: 26px;
	border: none;
	border-radius: 50%;
	background: rgba(10,10,10,.75);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

/* ── Checkbox ── */
.smm-idea-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: .92rem;
	color: #1a1a1a;
	margin-top: 6px;
}
.smm-idea-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.smm-idea-check-box {
	flex: 0 0 auto;
	width: 20px; height: 20px;
	margin-top: 1px;
	border: 2px solid #c0c0c0;
	border-radius: 5px;
	position: relative;
	transition: background .15s, border-color .15s;
}
.smm-idea-check input:checked + .smm-idea-check-box {
	background: #0a0a0a; border-color: #0a0a0a;
}
.smm-idea-check input:checked + .smm-idea-check-box::after {
	content: "";
	position: absolute;
	left: 6px; top: 2px;
	width: 5px; height: 10px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* ── Buttons ── */
.smm-idea-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	background: #fff;
	color: #0a0a0a;
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, opacity .15s;
}
.smm-idea-btn-primary {
	width: 100%;
	margin-top: 18px;
	background: #0a0a0a;
	border-color: #0a0a0a;
	color: #fff;
	padding: 14px 20px;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.smm-idea-btn-primary:hover { opacity: .9; }
.smm-idea-btn:disabled { opacity: .55; cursor: not-allowed; }
.smm-idea-submit-note { text-align: center; font-size: .8rem; color: #9a9a9a; margin: 10px 0 0; }

/* ── Sidebar ── */
.smm-idea-aside { position: sticky; top: 20px; }
.smm-idea-next { border-left: 4px solid #0a0a0a; }
.smm-idea-aside-title { font-size: 1rem; font-weight: 800; color: #0a0a0a; margin: 0 0 14px; }
.smm-idea-next-list { margin: 0; padding-left: 20px; color: #1a1a1a; }
.smm-idea-next-list li { padding-bottom: 9px; }
.smm-idea-aside-foot { font-size: .82rem; color: #8a8a8a; margin: 12px 0 0; }

/* ── Moderator panel ── */
.smm-idea-mod {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	padding: 20px 22px;
	margin-bottom: 26px;
}
.smm-idea-mod-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.smm-idea-mod-title {
	font-size: .82rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: #c0392b; margin: 0;
}
.smm-idea-mod-count {
	font-size: .78rem; font-weight: 700;
	background: #c0392b; color: #fff;
	border-radius: 12px; padding: 2px 10px;
}
.smm-idea-mod-empty { color: #8a8a8a; font-size: .9rem; }
.smm-idea-mod-list { display: flex; flex-direction: column; gap: 12px; }
.smm-idea-mod-item {
	display: flex;
	gap: 14px;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 14px;
}
.smm-idea-mod-item.is-removing { opacity: 0; transform: translateY(-6px); transition: .25s; }
.smm-idea-mod-thumb { flex: 0 0 92px; }
.smm-idea-mod-thumb img { width: 92px; height: 92px; object-fit: cover; border-radius: 6px; }
.smm-idea-mod-body { flex: 1 1 auto; min-width: 0; }
.smm-idea-mod-item-title { font-size: 1rem; font-weight: 700; color: #0a0a0a; margin: 0 0 4px; }
.smm-idea-mod-meta { font-size: .8rem; color: #8a8a8a; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.smm-idea-mod-desc { font-size: .88rem; color: #4a4a4a; margin: 0 0 12px; }
.smm-idea-mod-actions { display: flex; gap: 10px; }
.smm-idea-btn-accept { background: #1a7f4b; border-color: #1a7f4b; color: #fff; }
.smm-idea-btn-reject { background: #fff; border-color: #e0c4c0; color: #c0392b; }

/* ── Success modal ── */
.smm-idea-modal {
	position: fixed; inset: 0;
	background: rgba(10,10,10,.55);
	display: flex; align-items: center; justify-content: center;
	z-index: 99999; padding: 20px;
}
.smm-idea-modal-box {
	background: #fff;
	border-radius: 14px;
	padding: 34px 28px;
	max-width: 400px;
	width: 100%;
	text-align: center;
	box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.smm-idea-modal-icon {
	width: 60px; height: 60px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: #1a7f4b;
	display: flex; align-items: center; justify-content: center;
}
.smm-idea-modal-box h3 { font-size: 1.3rem; font-weight: 800; color: #0a0a0a; margin: 0 0 8px; }
.smm-idea-modal-box p { color: #6b6b6b; margin: 0 0 20px; }
.smm-idea-modal-link {
	display: block;
	margin: 12px auto 0;
	background: none;
	border: none;
	color: #6b6b6b;
	font-size: .85rem;
	text-decoration: underline;
	cursor: pointer;
}

/* ── RTL (Arabic) ── only applies when an ancestor is dir="rtl" / .rtl, so EN/FR are untouched */
[dir="rtl"] .smm-idea-kicker,
.rtl .smm-idea-kicker {
	font-size: .92rem;          /* readable size for Arabic */
	letter-spacing: 0;          /* letter-spacing breaks Arabic letter-joining */
}
/* Neutralize tracking on every uppercase/tracked label — Arabic must stay joined */
[dir="rtl"] .smm-idea-section-title,
[dir="rtl"] .smm-idea-label,
[dir="rtl"] .smm-journey-label,
[dir="rtl"] .smm-idea-btn-primary,
.rtl .smm-idea-section-title,
.rtl .smm-idea-label,
.rtl .smm-journey-label,
.rtl .smm-idea-btn-primary {
	letter-spacing: 0;
}

/* Journey connector line: extend toward the previous (lower-numbered) node, which sits
   to the RIGHT in RTL. Fixes the missing 1↔2 line and the stray line past node 7. */
[dir="rtl"] .smm-journey-line,
.rtl .smm-journey-line {
	left: auto;
	right: -50%;
}

/* Rules-card bullets sit on the right in Arabic */
[dir="rtl"] .smm-idea-rules-list,
.rtl .smm-idea-rules-list {
	padding: 0 2px 0 0;
}
[dir="rtl"] .smm-idea-rules-list li,
.rtl .smm-idea-rules-list li {
	padding-left: 0;
	padding-right: 26px;
}
[dir="rtl"] .smm-idea-rules-list li::before,
.rtl .smm-idea-rules-list li::before {
	left: auto;
	right: 4px;
}

/* Sidebar numbered list indents from the right */
[dir="rtl"] .smm-idea-next-list,
.rtl .smm-idea-next-list {
	padding-left: 0;
	padding-right: 20px;
}

/* Card accent stripes move to the right edge in RTL */
[dir="rtl"] .smm-idea-rules,
.rtl .smm-idea-rules {
	border-left: none;
	border-right: 4px solid #c0392b;
}
[dir="rtl"] .smm-idea-next,
.rtl .smm-idea-next {
	border-left: none;
	border-right: 4px solid #0a0a0a;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Designer Agreement card — welcome gate ① (register A7, v1.17.0)
   The friendly-rules card above already carries the single red accent stripe,
   so this one takes black: red must stay a signal, not decoration.
   ═══════════════════════════════════════════════════════════════════════════ */
.smm-agr-card {
	border-left: 4px solid #0a0a0a;
	margin-top: 16px;
}

.smm-agr-bullets { margin: 14px 0 0; padding: 0 0 0 2px; list-style: none; }
.smm-agr-bullets li {
	position: relative;
	padding: 0 0 10px 26px;
	color: #1a1a1a;
	font-size: .92rem;
}
.smm-agr-bullets li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0a0a0a;
}

/* "You accepted version X on DATE" — green = a confirmed state, per the palette */
.smm-agr-known {
	margin: 14px 0 0;
	padding: 10px 14px;
	background: #f4faf6;
	border-left: 3px solid #1a7f4b;
	border-radius: 6px;
	color: #1a1a1a;
	font-size: .86rem;
	line-height: 1.55;
}

/* ── Expander ── */
.smm-agr-expand { margin-top: 16px; }
.smm-agr-toggle {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 9px 16px;
	font-size: .82rem;
	font-weight: 700;
	color: #0a0a0a;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.smm-agr-toggle:hover { background: #f8f8f8; border-color: #d8d8d8; }

.smm-agr-panel {
	display: none;
	margin-top: 12px;
	max-height: 380px;
	overflow-y: auto;
	padding: 16px 18px;
	background: #fcfcfc;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	color: #1a1a1a;
	font-size: .86rem;
	line-height: 1.7;
	/* The authored text separates clauses with a 69-character box-drawing rule
	   that contains no spaces. Without these it cannot break, and it forces the
	   whole page to scroll sideways on a phone — the filename-overflow rule in
	   CLAUDE.md, in its unbreakable-string form. */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.smm-agr-panel.is-open { display: block; }
.smm-agr-panel:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }

.smm-agr-scroll-hint {
	margin: 8px 0 0;
	color: #8a8a8a;
	font-size: .8rem;
}

/* ── Consent checkboxes ── */
.smm-agr-checks { margin-top: 16px; }
.smm-agr-checks .smm-idea-check { margin-top: 10px; }
.smm-agr-checks.is-locked { opacity: .5; }
.smm-agr-checks.is-locked .smm-idea-check { cursor: not-allowed; }

.smm-agr-foot {
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid #f0f0f0;
	color: #8a8a8a;
	font-size: .78rem;
	line-height: 1.55;
}

.smm-welcome-actions { margin-top: 18px; }

/* RTL — stripe and bullet dots move to the right edge. The panel itself carries
   dir="rtl" from PHP when the Arabic file is served, so its text needs nothing. */
[dir="rtl"] .smm-agr-card,
.rtl .smm-agr-card {
	border-left: none;
	border-right: 4px solid #0a0a0a;
}
[dir="rtl"] .smm-agr-bullets,
.rtl .smm-agr-bullets { padding: 0 2px 0 0; }
[dir="rtl"] .smm-agr-bullets li,
.rtl .smm-agr-bullets li { padding: 0 26px 10px 0; }
[dir="rtl"] .smm-agr-bullets li::before,
.rtl .smm-agr-bullets li::before { left: auto; right: 4px; }
[dir="rtl"] .smm-agr-known,
.rtl .smm-agr-known {
	border-left: none;
	border-right: 3px solid #1a7f4b;
}
/* Arabic letters do not join when tracked — same fix as the rest of this page */
[dir="rtl"] .smm-agr-toggle,
.rtl .smm-agr-toggle { letter-spacing: 0; }

/* ── Responsive ── */
@media (max-width: 900px) {
	.smm-idea-grid { grid-template-columns: 1fr; }
	.smm-idea-aside { position: static; }
	.smm-journey-hint { display: none; }
}
@media (max-width: 600px) {
	.smm-idea-h1 { font-size: 1.55rem; }
	.smm-journey-label { font-size: .62rem; }
	.smm-journey-node { width: 27px; height: 27px; font-size: .72rem; }
	.smm-idea-card { padding: 18px 16px; }
	.smm-idea-mod-item { flex-direction: column; }
	.smm-idea-mod-thumb img { width: 100%; height: 160px; }
	/* Shorter panel on a phone, so the checkbox below it stays reachable without
	   scrolling past a full screen of legal text every time. */
	.smm-agr-panel { max-height: 300px; padding: 14px; font-size: .84rem; }
	.smm-welcome-actions .smm-idea-btn { width: 100%; }
}