/* =========================================================
   Mofli Submission Hub
   STEP1.10
   ========================================================= */

.mofli-submission-hub {
	--mofli-submit-beige: #f8f1e7;
	--mofli-submit-coral: #ef8175;
	--mofli-submit-coral-dark: #d96960;
	--mofli-submit-text: #4a403a;
	--mofli-submit-muted: #81736a;

	box-sizing:
		border-box;

	width:
		100%;

	max-width:
		1000px;

	margin:
		0 auto;

	padding:
		20px 0 40px;
}


/* =========================================================
   Header
   ========================================================= */

.mofli-submission-hub__header {
	max-width:
		720px;

	margin:
		0 auto 34px;

	text-align:
		center;
}


.mofli-submission-hub__lead {
	margin:
		0 0 14px;

	color:
		var(--mofli-submit-text);

	font-size:
		clamp(
			20px,
			3vw,
			28px
		);

	font-weight:
		700;

	line-height:
		1.7;
}


.mofli-submission-hub__note {
	margin:
		0;

	color:
		var(--mofli-submit-muted);

	font-size:
		14px;

	line-height:
		1.8;
}


/* =========================================================
   Grid
   ========================================================= */

.mofli-submission-hub__grid {
	display:
		grid;

	grid-template-columns:
		repeat(
			2,
			minmax(
				0,
				1fr
			)
		);

	gap:
		24px;
}


/* =========================================================
   Card
   ========================================================= */

.mofli-submission-hub__card {
	display:
		flex;

	flex-direction:
		column;

	box-sizing:
		border-box;

	min-width:
		0;

	padding:
		30px;

	background:
		var(--mofli-submit-beige);

	border:
		1px solid
		rgba(
			120,
			95,
			75,
			0.12
		);

	border-radius:
		22px;

	box-shadow:
		0 6px 22px
		rgba(
			85,
			65,
			50,
			0.07
		);
}


/* =========================================================
   Icon
   ========================================================= */

.mofli-submission-hub__icon {
	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		72px;

	height:
		72px;

	margin:
		0 auto 18px;

	color:
		#fff;

	background:
		var(--mofli-submit-coral);

	border-radius:
		50%;
}


.mofli-submission-hub__icon
.dashicons {
	width:
		auto;

	height:
		auto;

	font-size:
		34px;
}


/* =========================================================
   Text
   ========================================================= */

.mofli-submission-hub__title {
	margin:
		0 0 12px;

	color:
		var(--mofli-submit-text);

	font-size:
		24px;

	line-height:
		1.4;

	text-align:
		center;
}


.mofli-submission-hub__description {
	margin:
		0 0 20px;

	color:
		var(--mofli-submit-text);

	font-size:
		14px;

	line-height:
		1.8;

	text-align:
		center;
}


.mofli-submission-hub__info {
	margin:
		0 0 24px;

	padding:
		0 0 0 1.4em;

	color:
		var(--mofli-submit-muted);

	font-size:
		13px;

	line-height:
		1.9;
}


/* =========================================================
   Button
   ========================================================= */

.mofli-submission-hub__action {
	margin-top:
		auto;

	text-align:
		center;
}


.mofli-submission-hub__button {
	display:
		inline-flex;

	align-items:
		center;

	justify-content:
		center;

	box-sizing:
		border-box;

	min-width:
		190px;

	min-height:
		48px;

	padding:
		10px 24px;

	color:
		#fff;

	background:
		var(--mofli-submit-coral);

	border-radius:
		999px;

	font-size:
		15px;

	font-weight:
		700;

	text-decoration:
		none;

	transition:
		background-color 0.15s ease,
		transform 0.15s ease;
}


.mofli-submission-hub__button:hover {
	color:
		#fff;

	background:
		var(--mofli-submit-coral-dark);

	transform:
		translateY(-2px);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 700px) {

	.mofli-submission-hub {
		padding:
			12px 0 30px;
	}


	.mofli-submission-hub__header {
		margin-bottom:
			24px;
	}


	.mofli-submission-hub__grid {
		grid-template-columns:
			1fr;

		gap:
			18px;
	}


	.mofli-submission-hub__card {
		padding:
			24px 18px;

		border-radius:
			18px;
	}


	.mofli-submission-hub__button {
		width:
			100%;
	}
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.mofli-submission-hub__button {
		transition:
			none;
	}
}

/* =========================================================
   STEP1.12-D-8-D-5-4-A-1
   Shared lower-page heading
   ========================================================= */

.mofli-submission-hub__page-heading {
	margin: 0 0 24px;
	text-align: center;
}

.mofli-submission-hub__eyebrow {
	margin: 0 0 6px;
	color: #d96960;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.18em;
}

.mofli-submission-hub__page-title {
	position: relative;
	margin: 0;
	padding-bottom: 17px;
	color: #4a403a;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.02em;
}

.mofli-submission-hub__page-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 56px;
	height: 3px;
	border-radius: 999px;
	background: #ef8175;
	transform: translateX(-50%);
}

.mofli-submission-hub__header {
	margin-top: 0;
}

@media (max-width: 800px) {
	.mofli-submission-hub__page-heading {
		margin-bottom: 20px;
	}

	.mofli-submission-hub__page-title {
		padding-bottom: 14px;
		font-size: clamp(28px, 8vw, 36px);
	}
}


/* =========================================================
   STEP1.12-D-8-D-5-4-A-2
   /submit/ heading final alignment
   ========================================================= */

.mofli-subpage-shell .mofli-submission-hub__page-heading {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 auto 26px;
	padding: 0;
	text-align: center !important;
}

.mofli-subpage-shell .mofli-submission-hub__eyebrow {
	display: block;
	margin: 0 0 6px;
	color: #d96960;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-align: center !important;
}

.mofli-subpage-shell .mofli-submission-hub__page-title {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 17px;
	color: #4a403a;
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-align: center !important;
}

.mofli-subpage-shell .mofli-submission-hub__page-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	display: block;
	width: 56px;
	height: 3px;
	margin: 0;
	border-radius: 999px;
	background: #ef8175;
	transform: translateX(-50%);
}

@media (max-width: 800px) {
	.mofli-subpage-shell .mofli-submission-hub__page-title {
		padding-bottom: 14px;
		font-size: clamp(28px, 8vw, 36px);
	}
}

/* =========================================================
   投稿完了ページ
   /post-complete/
   ========================================================= */

.mofli-submission-complete {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 360px;
	padding-top: 48px;
	padding-bottom: 72px;
}

.mofli-submission-complete__card {
	box-sizing: border-box;
	width: min(100%, 640px);
	padding: 64px 32px;
	border: 1px solid rgba(120, 95, 75, 0.12);
	border-radius: 24px;
	background: #f8f1e7;
	box-shadow: 0 8px 28px rgba(85, 65, 50, 0.07);
	text-align: center;
}

.mofli-submission-complete__card::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: #ef8175;
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	line-height: 1;
}

.mofli-submission-complete__title {
	margin: 0;
	color: #4a403a;
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

@media (max-width: 700px) {
	.mofli-submission-complete {
		min-height: 300px;
		padding-top: 32px;
		padding-bottom: 52px;
	}

	.mofli-submission-complete__card {
		padding: 48px 20px;
		border-radius: 20px;
	}

	.mofli-submission-complete__card::before {
		width: 58px;
		height: 58px;
		margin-bottom: 20px;
		font-size: 29px;
	}

	.mofli-submission-complete__title {
		font-size: 24px;
	}
}


/* =========================================================
   STEP7-SUBMIT-A
   /submit/ visual collage + video usage notice
   ========================================================= */

.mofli-submission-hub {
	position: relative;
	isolation: isolate;
	max-width: 1000px;
}

.mofli-submission-hub > :not(.mofli-submission-hub__decor) {
	position: relative;
	z-index: 2;
}

.mofli-submission-hub__decor {
	position: absolute;
	z-index: 1;
	inset: -34px -185px auto;
	height: 610px;
	pointer-events: none;
	overflow: visible;
}

.mofli-submission-hub__decor::before,
.mofli-submission-hub__decor::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(239,129,117,.12);
}

.mofli-submission-hub__decor::before {
	width: 180px;
	height: 180px;
	left: 36px;
	top: 105px;
}

.mofli-submission-hub__decor::after {
	width: 220px;
	height: 220px;
	right: 0;
	top: 250px;
}

.mofli-submission-hub__pet {
	position: absolute;
	display: block;
	width: 150px;
	height: 150px;
	padding: 8px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(74,64,58,.16);
	object-fit: cover;
}

.mofli-submission-hub__pet--dog1 {
	left: 12px;
	top: 12px;
	transform: rotate(-8deg);
	object-position: 50% 38%;
}

.mofli-submission-hub__pet--dog2 {
	right: 20px;
	top: 12px;
	transform: rotate(7deg);
	object-position: 54% 42%;
}

.mofli-submission-hub__pet--dogs3 {
	left: 82px;
	top: 350px;
	width: 126px;
	height: 126px;
	transform: rotate(6deg);
	object-position: 55% 42%;
}

.mofli-submission-hub__pet--dog4 {
	right: 75px;
	top: 335px;
	width: 132px;
	height: 150px;
	transform: rotate(-6deg);
	object-position: 52% 40%;
}

.mofli-submission-hub__pet--cat1 {
	right: -10px;
	top: 175px;
	width: 128px;
	height: 150px;
	transform: rotate(9deg);
	object-position: 50% 36%;
}

.mofli-submission-hub__usage-notice {
	box-sizing: border-box;
	max-width: 900px;
	margin: 28px auto 0;
	padding: 20px 26px 19px 72px;
	border: 2px solid rgba(239,129,117,.62);
	border-radius: 18px;
	background: rgba(255,248,245,.96);
	box-shadow: 0 5px 18px rgba(85,65,50,.04);
	text-align: left;
}

.mofli-submission-hub__usage-notice::before {
	content: "!";
	position: absolute;
	left: 25px;
	top: 23px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mofli-submit-coral);
	color: #fff;
	font-size: 22px;
	font-weight: 900;
	line-height: 1;
}

.mofli-submission-hub__usage-main {
	margin: 0 0 7px;
	color: #d9554d;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.75;
}

.mofli-submission-hub__usage-sub {
	margin: 0;
	color: var(--mofli-submit-text);
	font-size: 13px;
	line-height: 1.8;
}

.mofli-submission-hub .mofli-home-return {
	margin-top: 30px;
}

@media (max-width: 1180px) and (min-width: 701px) {
	.mofli-submission-hub__decor {
		left: -90px;
		right: -90px;
		opacity: .72;
	}
	.mofli-submission-hub__pet {
		width: 118px;
		height: 118px;
	}
}

@media (max-width: 700px) {
	.mofli-submission-hub {
		padding-top: 86px;
	}

	.mofli-submission-hub__decor {
		inset: 0 0 auto;
		height: 100px;
		overflow: hidden;
	}

	.mofli-submission-hub__pet {
		display: none;
		width: 74px;
		height: 74px;
		padding: 5px;
		border-radius: 7px;
		box-shadow: 0 6px 16px rgba(74,64,58,.14);
	}

	/* Smartphone: dog on the left, cat on the right. */
	.mofli-submission-hub__pet--dog1,
	.mofli-submission-hub__pet--cat1 {
		display: block;
		top: 8px;
	}

	.mofli-submission-hub__pet--dog1 {
		left: 8px;
		transform: rotate(-7deg);
	}

	.mofli-submission-hub__pet--cat1 {
		right: 8px;
		transform: rotate(7deg);
	}

	.mofli-submission-hub__usage-notice {
		margin-top: 22px;
		padding: 18px 16px 17px 52px;
		border-radius: 15px;
	}

	.mofli-submission-hub__usage-notice::before {
		left: 14px;
		top: 18px;
		width: 28px;
		height: 28px;
		font-size: 18px;
	}

	.mofli-submission-hub__usage-main {
		font-size: 13px;
		line-height: 1.65;
	}

	.mofli-submission-hub__usage-sub {
		font-size: 12px;
		line-height: 1.7;
	}
}


/* =========================================================
   STEP7-SUBMIT-B
   Notice priority + unobstructed decorative photos
   ========================================================= */

.mofli-submission-hub__header {
	margin-bottom: 18px;
}

.mofli-submission-hub__usage-notice {
	position: relative;
	z-index: 3;
	max-width: 760px;
	margin: 0 auto 30px;
}

.mofli-submission-hub__grid {
	position: relative;
	z-index: 4;
}

/* Desktop: keep photos around the outer margins, not behind the cards. */
@media (min-width: 1181px) {
	.mofli-submission-hub__decor {
		inset: -30px -205px auto;
		height: 690px;
	}

	.mofli-submission-hub__pet--dog1 {
		left: 0;
		top: 8px;
	}

	.mofli-submission-hub__pet--dog2 {
		right: 0;
		top: 8px;
	}

	.mofli-submission-hub__pet--dogs3 {
		left: 22px;
		top: 405px;
		width: 118px;
		height: 118px;
	}

	.mofli-submission-hub__pet--dog4 {
		right: 20px;
		top: 390px;
		width: 122px;
		height: 138px;
	}

	.mofli-submission-hub__pet--cat1 {
		right: -6px;
		top: 185px;
		width: 120px;
		height: 140px;
	}
}

/* Tablet: hide lower decorations before they can overlap the cards. */
@media (max-width: 1180px) and (min-width: 701px) {
	.mofli-submission-hub__decor {
		left: -70px;
		right: -70px;
	}
	.mofli-submission-hub__pet--dogs3,
	.mofli-submission-hub__pet--dog4 {
		display: none;
	}
	.mofli-submission-hub__pet--cat1 {
		right: -8px;
		top: 160px;
	}
}

/* Smartphone: visual hook first, then title/lead, then the publication notice, then cards. */
@media (max-width: 700px) {
	.mofli-submission-hub {
		padding-top: 82px;
	}

	.mofli-submission-hub__decor {
		height: 90px;
	}

	.mofli-submission-hub__pet--dog1,
	.mofli-submission-hub__pet--cat1 {
		top: 5px;
		width: 70px;
		height: 70px;
	}

	.mofli-submission-hub__pet--dog1 {
		left: 6px;
	}

	.mofli-submission-hub__pet--cat1 {
		right: 6px;
	}

	.mofli-submission-hub__header {
		margin-bottom: 16px;
	}

	.mofli-submission-hub__usage-notice {
		margin: 0 0 20px;
		padding: 15px 13px 14px 46px;
	}

	.mofli-submission-hub__usage-notice::before {
		left: 12px;
		top: 16px;
		width: 26px;
		height: 26px;
		font-size: 17px;
	}

	.mofli-submission-hub__usage-main {
		font-size: 12.5px;
		line-height: 1.6;
	}

	.mofli-submission-hub__usage-sub {
		margin-top: 5px;
		font-size: 11.5px;
		line-height: 1.65;
	}
}