/* ========================================================
   PhotoFaceFun Modernized Retro 2019 Theme & Responsive Styles
   ======================================================== */

* {
	box-sizing: border-box;
}

body {
	background: #f7f9fa;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Tahoma, Verdana, sans-serif;
	font-size: 14px;
	color: #333;
	overflow-x: hidden;
}

a, a:visited {
	color: #0080ff;
	text-decoration: none;
}
a:hover {
	color: #0054bd;
	text-decoration: underline;
}

/* --- Top Navigation Header (PhotoFaceFun 2019 Style) --- */
#top_header {
	background: linear-gradient(180deg, #0288d1 0%, #0275c6 100%);
	color: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,0.15);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.top_header_inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	height: 48px;
}

.brand_logo {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none !important;
	color: #fff !important;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: -0.5px;
}

.brand_logo span.accent {
	color: #ff9800;
	background: #fff;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 15px;
	margin-left: 4px;
}

.main_nav {
	display: flex;
	align-items: center;
	gap: 5px;
}

.main_nav a {
	color: #fff !important;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	transition: background 0.15s ease;
	text-decoration: none !important;
}

.main_nav a:hover, .main_nav a.active {
	background: rgba(255, 255, 255, 0.2);
}

.main_nav a.admin_link {
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Mobile Hamburger Toggle Button */
.mobile_nav_toggle {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 32px;
	height: 30px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	transition: background 0.15s;
}

.mobile_nav_toggle:hover {
	background: rgba(255, 255, 255, 0.15);
}

.mobile_nav_toggle span {
	width: 100%;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	transition: all 0.25s ease-in-out;
}

.mobile_nav_toggle.open span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.mobile_nav_toggle.open span:nth-child(2) {
	opacity: 0;
}

.mobile_nav_toggle.open span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Main Layout Container --- */
#main_container {
	max-width: 1100px;
	margin: 20px auto 40px auto;
	padding: 0 15px;
	display: flex;
	gap: 25px;
}

/* --- Left Column: Categories & Sorting (Desktop) --- */
.column_sections {
	width: 200px;
	flex-shrink: 0;
}

.sidebar_box {
	background: #fff;
	border-radius: 6px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	overflow: hidden;
	margin-bottom: 20px;
}

.sidebar_title {
	background: #f1f5f9;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #64748b;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #e2e8f0;
}

.section_link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 14px;
	font-size: 13px;
	color: #475569 !important;
	border-bottom: 1px solid #f8fafc;
	transition: background 0.15s, color 0.15s;
	text-decoration: none !important;
}

.section_link:hover {
	background: #f8fafc;
	color: #0284c7 !important;
}

.section_link.section_selected {
	background: #ff6600 !important;
	color: #fff !important;
	font-weight: bold;
}

.section_link.section_selected .badge {
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.badge {
	background: #e2e8f0;
	color: #64748b;
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 10px;
	font-weight: normal;
}

/* --- Center Column: Effect Grid --- */
.column_center {
	flex-grow: 1;
	min-width: 0;
}

.section_heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #e2e8f0;
}

.section_heading h2 {
	margin: 0;
	font-size: 20px;
	font-weight: bold;
	color: #1e293b;
}

.section_heading .counter {
	color: #64748b;
	font-size: 13px;
}

/* Grid of Cards */
.effects_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}

.effect_card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
	display: flex;
	flex-direction: column;
	position: relative;
}

.effect_card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.12);
	border-color: #ff9800;
}

.effect_thumb_wrap {
	position: relative;
	width: 100%;
	padding-top: 100%; /* 1:1 Aspect ratio square */
	background: #f1f5f9;
	overflow: hidden;
}

.effect_thumb_wrap picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.effect_thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.effect_badge_face {
	position: absolute;
	top: 6px;
	left: 6px;
	background: rgba(255, 102, 0, 0.88);
	color: #fff;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: bold;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.effect_card_body {
	padding: 10px;
	text-align: center;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
}

.effect_title {
	font-size: 12px;
	font-weight: 600;
	color: #334155;
	line-height: 1.3;
	margin-bottom: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.effect_card:hover .effect_title {
	color: #ff6600;
}

.effect_ratio {
	font-size: 11px;
	color: #94a3b8;
	font-family: monospace;
}

/* --- Mobile Horizontal Navigation & Arrows --- */
.mobile_sections_wrapper {
	display: none;
	align-items: center;
	position: relative;
	width: 100%;
	margin-bottom: 15px;
	gap: 4px;
}

.mobile_sec_nav_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 50%;
	color: #475569;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	padding: 0;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.mobile_sec_nav_btn:hover, .mobile_sec_nav_btn:active {
	background: #0284c7;
	color: #fff;
	border-color: #0284c7;
}

.mobile_sections_bar {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	padding: 6px 4px 10px 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 8px;
	flex-grow: 1;
	scroll-behavior: smooth;
}

.mobile_sections_bar::-webkit-scrollbar {
	display: none;
}

.mobile_sec_pill {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 20px;
	padding: 7px 15px;
	font-size: 13px;
	font-weight: 500;
	color: #475569;
	text-decoration: none !important;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	transition: all 0.15s ease;
}

.mobile_sec_pill:hover {
	border-color: #0284c7;
	color: #0284c7;
}

.mobile_sec_pill.active {
	background: #ff6600;
	color: #fff;
	border-color: #ff6600;
	font-weight: bold;
	box-shadow: 0 2px 6px rgba(255, 102, 0, 0.3);
}

/* --- Modal Window & Backdrop --- */
#submodal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	z-index: 2000;
	display: none;
}

#modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 92%;
	max-width: 620px;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	max-height: 90vh;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 35px rgba(0,0,0,0.4);
	z-index: 2001;
	display: none;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: center;
	padding: 0;
}

/* imgAreaSelect high z-index & touch responsiveness */
.imgareaselect-outer,
.imgareaselect-selection,
.imgareaselect-border1,
.imgareaselect-border2,
.imgareaselect-border3,
.imgareaselect-border4,
.imgareaselect-handle {
	z-index: 3000 !important;
	touch-action: none !important;
}

/* --- Article Page Box --- */
.article_box {
	width: 100%;
	max-width: 820px;
	margin: 25px auto 40px auto;
	background: #fff;
	border-radius: 12px;
	padding: 35px 30px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.06);
	line-height: 1.7;
	color: #334155;
	box-sizing: border-box;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.article_heading {
	margin: 0 0 20px 0;
	font-size: 26px;
	color: #0f172a;
	border-bottom: 2px solid #f1f5f9;
	padding-bottom: 15px;
	font-weight: bold;
}

.article_content {
	font-size: 15px;
	margin-top: 15px;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.article_footer {
	margin-top: 35px;
	padding-top: 20px;
	border-top: 1px solid #f1f5f9;
	text-align: center;
}

.btn_back_home {
	display: inline-block;
	padding: 12px 24px;
	background: #0284c7;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 8px;
	font-weight: bold;
	font-size: 15px;
	box-shadow: 0 2px 6px rgba(2,132,199,0.3);
	transition: background 0.15s;
}

.btn_back_home:hover {
	background: #0369a1;
}

#modal_title {
	display: flex;
	justify-content: flex-end;
	padding: 12px 15px 0 15px;
}

#modal_title .close_btn {
	cursor: pointer;
	font-size: 22px;
	color: #94a3b8;
	line-height: 1;
	border: none;
	background: none;
}

#modal_title .close_btn:hover {
	color: #ef4444;
}

#modal_content {
	padding: 10px 25px 30px 25px;
}

/* Upload & Crop Buttons */
#upload_button {
	background: #0284c7;
	color: #fff;
	padding: 12px 24px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 6px;
	cursor: pointer;
	display: inline-block;
	box-shadow: 0 2px 6px rgba(2,132,199,0.3);
	transition: background 0.2s;
	margin: 15px auto;
}

#upload_button:hover {
	background: #0369a1;
}

span#button {
	background: #16a34a;
	color: #fff;
	padding: 10px 28px;
	font-size: 15px;
	font-weight: bold;
	border-radius: 6px;
	cursor: pointer;
	display: inline-block;
	margin-top: 15px;
	box-shadow: 0 2px 6px rgba(22,163,74,0.3);
}

span#button:hover {
	background: #15803d;
}

/* Results Display Container */
.result_box {
	background: #fff;
	padding: 25px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	text-align: center;
	margin: 20px auto;
	max-width: 800px;
}

.result_img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.15);
	margin-bottom: 20px;
}

.btn_download {
	background: #ff6600;
	color: #fff !important;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 8px;
	display: inline-block;
	box-shadow: 0 3px 10px rgba(255,102,0,0.35);
	text-decoration: none !important;
	transition: background 0.15s, transform 0.15s;
}

.btn_download:hover {
	background: #e65c00;
	transform: translateY(-2px);
}

/* --- Galery Grid --- */
.galery_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	width: 100%;
}

.galery_card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: transform 0.2s, box-shadow 0.2s;
}

.galery_card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.galery_thumb_wrap {
	position: relative;
	width: 100%;
	padding-top: 100%;
	background: #f1f5f9;
}

.galery_thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Responsive Media Queries --- */
@media (max-width: 850px) {
	#main_container {
		flex-direction: column;
		gap: 15px;
		padding: 0 12px;
	}

	.column_sections {
		display: none; /* Hidden on phones/tablets in favor of horizontal pills */
	}

	.mobile_sections_wrapper {
		display: flex;
	}

	.effects_grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 12px;
	}
}

@media (max-width: 768px) {
	.top_header_inner {
		padding: 0 12px;
		position: relative;
	}

	.mobile_nav_toggle {
		display: flex;
	}

	.main_nav {
		display: none;
		position: absolute;
		top: 48px;
		left: 0;
		width: 100%;
		background: #0275c6;
		flex-direction: column;
		padding: 10px 15px 15px 15px;
		box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		z-index: 1500;
	}

	.main_nav.open {
		display: flex;
		animation: navFadeDown 0.2s ease-out;
	}

	.main_nav a {
		width: 100%;
		padding: 12px 14px;
		font-size: 15px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.main_nav a:last-child {
		border-bottom: none;
	}
}

@keyframes navFadeDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 540px) {
	.effects_grid, .galery_grid {
		grid-template-columns: repeat(2, 1fr) !important; /* Strictly 2 columns on phones */
		gap: 10px !important;
	}

	.effect_card_body {
		padding: 8px 6px !important;
	}

	.effect_title {
		font-size: 11px !important;
		line-height: 1.3 !important;
		height: 28px;
	}

	.section_heading h2 {
		font-size: 17px !important;
	}

	#modal {
		width: 95% !important;
		max-height: 94vh !important;
		border-radius: 10px !important;
	}

	#modal_content {
		padding: 5px 10px 20px 10px !important;
	}

	#upload_button, span#button {
		width: 100% !important;
		box-sizing: border-box;
		text-align: center;
		display: block;
	}

	.result_actions_wrap {
		flex-direction: column !important;
		width: 100%;
	}

	.result_actions_wrap > * {
		width: 100% !important;
		text-align: center !important;
		justify-content: center !important;
		box-sizing: border-box;
	}

	.result_box {
		padding: 15px 12px !important;
	}

	.article_box {
		padding: 20px 14px !important;
		margin: 10px auto !important;
		border-radius: 8px !important;
	}

	.article_heading {
		font-size: 20px !important;
	}
}

/* User photo thumbnail with delete cross */
.user_photo_card {
	position: relative;
	width: 75px;
	height: 75px;
	border-radius: 6px;
	border: 2px solid #cbd5e1;
	cursor: pointer;
	display: inline-block;
	background: #f1f5f9;
	margin: 5px;
	transition: border-color 0.2s, transform 0.2s;
}
.user_photo_card:hover {
	border-color: #0284c7;
	transform: scale(1.04);
}
.user_photo_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}
.user_photo_del {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	background: #ef4444;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 17px;
	font-size: 13px;
	font-weight: bold;
	box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	cursor: pointer;
	z-index: 10;
	transition: background 0.15s, transform 0.15s;
}
.user_photo_del:hover {
	background: #b91c1c;
	transform: scale(1.15);
}


/* Direct Link Icon on Effect Card */
.effect_link_icon {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(2px);
	color: #ffffff !important;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.15s ease, background 0.15s ease;
	z-index: 5;
}
.effect_card:hover .effect_link_icon {
	opacity: 1;
}
.effect_link_icon:hover {
	background: #0284c7;
	color: #ffffff !important;
}

/* ========================================================
   Phase 7: Freshness Badge, Drip Banner, Toast & Stealth
   ======================================================== */
.effect_badge_new {
	position: absolute;
	top: 6px;
	left: 6px;
	background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 12px;
	letter-spacing: 0.5px;
	box-shadow: 0 2px 5px rgba(16, 185, 129, 0.4);
	z-index: 2;
	pointer-events: none;
}
.effect_badge_face + .effect_badge_new {
	top: 30px;
}
.drip_feed_banner {
	background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
	border: 1px solid #fde68a;
	color: #92400e;
	padding: 10px 16px;
	border-radius: 8px;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}
.drip_banner_icon {
	font-size: 18px;
	flex-shrink: 0;
}
.toast_copied {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: rgba(15, 23, 42, 0.94);
	color: #ffffff;
	padding: 10px 20px;
	border-radius: 24px;
	font-size: 13.5px;
	font-weight: 600;
	z-index: 999999;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	opacity: 0;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}
.toast_copied.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Stealth Mode Quest Card & Easter Eggs */
.stealth_quest_card {
	background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
	color: #ffffff;
	border-radius: 12px;
	padding: 24px 28px;
	margin-bottom: 24px;
	box-shadow: 0 8px 24px rgba(49, 46, 129, 0.3);
	border: 1px solid #4338ca;
}
.stealth_quest_card h3 {
	margin: 0 0 10px 0;
	font-size: 20px;
	color: #fbbf24;
}
.stealth_quest_card p {
	font-size: 14.5px;
	line-height: 1.6;
	color: #e0e7ff;
	margin: 0 0 18px 0;
}
.stealth_buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.btn_stealth_action {
	background: #f59e0b;
	color: #1e1b4b !important;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
	transition: all 0.15s ease;
}
.btn_stealth_action:hover {
	background: #fbbf24;
	transform: translateY(-1px);
}
.btn_stealth_cancel {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff !important;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 6px;
	text-decoration: none;
	display: inline-block;
}
.btn_stealth_cancel:hover {
	background: rgba(255, 255, 255, 0.25);
}

/* Cookie Consent Banner */
.cookie_consent_banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #0f172a;
	color: #f8fafc;
	padding: 14px 20px;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
	font-size: 13.5px;
}
.cookie_consent_btn {
	background: #0284c7;
	color: #ffffff;
	border: none;
	padding: 8px 18px;
	border-radius: 6px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
}
.cookie_consent_btn:hover {
	background: #0369a1;
}

/* ========================================================
   Pagination Bar (Frontend)
   ======================================================== */
.pff_pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 36px 0 20px 0;
	flex-wrap: wrap;
}
.pff_page_link, .pff_page_current, .pff_page_dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
	transition: all 0.15s ease;
}
.pff_page_link {
	background: #ffffff;
	color: #334155;
	border: 1px solid #cbd5e1;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.pff_page_link:hover {
	background: #f1f5f9;
	border-color: #0284c7;
	color: #0284c7;
	transform: translateY(-1px);
}
.pff_page_current {
	background: #0284c7;
	color: #ffffff;
	border: 1px solid #0284c7;
	box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
	cursor: default;
}
.pff_page_dots {
	color: #94a3b8;
	cursor: default;
}
.pff_page_btn {
	padding: 0 14px;
	font-weight: 700;
}

/* Floating Back to Top Button */
#pff_back_to_top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #0284c7;
	color: #ffffff;
	border: none;
	font-size: 22px;
	line-height: 1;
	font-weight: bold;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 999;
}
#pff_back_to_top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#pff_back_to_top:hover {
	background: #0369a1;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(2, 132, 199, 0.5);
}

/* Selected Effect Hero Card on /make/{id}/ */
.selected_effect_hero {
	display: flex;
	gap: 20px;
	align-items: center;
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border: 1px solid #bae6fd;
	border-radius: 12px;
	padding: 18px 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.08);
}
.hero_thumb_wrap img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 10px;
	border: 2px solid #ffffff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	display: block;
}
.hero_info {
	flex: 1;
}
.hero_badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #0369a1;
	background: #ffffff;
	padding: 2px 8px;
	border-radius: 12px;
	margin-bottom: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.hero_title {
	margin: 0 0 6px 0;
	font-size: 22px;
	color: #0c4a6e;
	font-weight: 800;
}
.hero_desc {
	margin: 0 0 12px 0;
	color: #475569;
	font-size: 13.5px;
	line-height: 1.4;
}
.hero_btn {
	background: #0284c7;
	color: #ffffff;
	border: none;
	padding: 9px 20px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
	transition: all 0.15s ease;
}
.hero_btn:hover {
	background: #0369a1;
	transform: translateY(-1px);
}
@media (max-width: 640px) {
	.selected_effect_hero {
		flex-direction: column;
		text-align: center;
		padding: 16px;
	}
	.hero_thumb_wrap img {
		width: 70px;
		height: 70px;
		margin: 0 auto;
	}
}


/* ==========================================================================
   Dedicated Effect Page Styles (/make/{id}/)
   ========================================================================== */

/* Breadcrumbs Bar */
.pff_breadcrumb_bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px 18px;
	margin-bottom: 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	font-size: 13.5px;
	color: #64748b;
}
.pff_breadcrumb_bar a {
	color: #0284c7;
	text-decoration: none;
	font-weight: 600;
}
.pff_breadcrumb_bar a:hover {
	text-decoration: underline;
}
.pff_breadcrumb_bar .sep {
	color: #94a3b8;
}
.pff_breadcrumb_bar .current {
	color: #1e293b;
	font-weight: 700;
}

/* Dedicated Page Layout */
.make_standalone_wrapper {
	width: 100%;
	flex: 1 1 100%;
	display: block;
}

#main_container:has(.make_standalone_wrapper) {
	display: block;
}

.make_page_container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px 40px 10px;
}
.make_hero_grid {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	margin-bottom: 35px;
}
.make_preview_col {
	flex: 0 0 380px;
	max-width: 380px;
}
.make_preview_card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.06);
	overflow: hidden;
	padding: 14px;
}
.make_preview_wrap {
	position: relative;
	width: 100%;
	background: #f1f5f9;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.make_main_preview {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: contain;
	display: block;
	border-radius: 6px;
}
.make_preview_badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
}
.make_meta_row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	align-items: center;
}
.meta_chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: #f1f5f9;
	color: #475569;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
}
.meta_chip_link {
	text-decoration: none;
	color: #0284c7;
	transition: background 0.15s ease;
}
.meta_chip_link:hover {
	background: #e0f2fe;
}
.gumroad_pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: #ec4899;
	color: #ffffff;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease;
}
.gumroad_pill:hover {
	background: #db2777;
	color: #ffffff;
}
.make_share_wrap {
	margin-top: 12px;
	border-top: 1px solid #f1f5f9;
	padding-top: 10px;
}
.btn_share_effect {
	width: 100%;
	background: #f8fafc;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 8px 12px;
	color: #334155;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.btn_share_effect:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
}

/* Right Action Column */
.make_action_col {
	flex: 1 1 auto;
	min-width: 0;
}
.make_action_card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.06);
	padding: 26px 30px;
}
.make_h1_title {
	margin: 0 0 12px 0;
	font-size: 26px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.25;
}
.make_desc_block {
	font-size: 14.5px;
	line-height: 1.6;
	color: #475569;
	margin-bottom: 22px;
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 18px;
}

/* Upload Box */
.make_upload_box {
	background: #f8fafc;
	border: 2px dashed #cbd5e1;
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	transition: all 0.2s ease;
}
.upload_box_title {
	font-size: 18px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 4px;
}
.upload_box_sub {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 18px;
}
.upload_btn_row {
	margin-bottom: 14px;
}
.btn_big_upload {
	background: #0284c7;
	color: #ffffff;
	border: none;
	padding: 13px 32px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
	transition: all 0.15s ease;
}
.btn_big_upload:hover {
	background: #0369a1;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(2, 132, 199, 0.45);
}
.make_dropzone {
	border: 1px dashed #94a3b8;
	border-radius: 8px;
	padding: 14px 20px;
	cursor: pointer;
	background: #ffffff;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #64748b;
	font-size: 13.5px;
	transition: all 0.2s ease;
}
.make_dropzone:hover, .make_dropzone.drag_hover {
	border-color: #0284c7;
	background: #e0f2fe;
	color: #0369a1;
}
.make_dropzone .drop_icon {
	font-size: 20px;
}
.make_gallery_row {
	margin-top: 10px;
	margin-bottom: 16px;
}
.gallery_check_label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #334155;
	cursor: pointer;
	user-select: none;
}
.gallery_check_label input {
	width: 17px;
	height: 17px;
	cursor: pointer;
	accent-color: #0284c7;
}

/* Recent Photos */
.make_recent_section {
	margin-top: 18px;
	border-top: 1px solid #e2e8f0;
	padding-top: 14px;
	text-align: left;
}
.recent_section_title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #64748b;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}
.recent_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.recent_thumb_wrap {
	position: relative;
	width: 58px;
	height: 58px;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid #cbd5e1;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.recent_thumb_wrap:hover {
	border-color: #0284c7;
	transform: scale(1.05);
}
.recent_thumb_wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.recent_del_btn {
	position: absolute;
	top: 1px;
	right: 1px;
	background: rgba(220, 38, 38, 0.9);
	color: #fff;
	border: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	font-size: 12px;
	line-height: 14px;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Status / Progress Box */
.make_status_box {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 30px;
	text-align: center;
}
.pff_spinner {
	width: 44px;
	height: 44px;
	border: 4px solid #e2e8f0;
	border-top-color: #0284c7;
	border-radius: 50%;
	animation: pff_spin 0.8s linear infinite;
	margin: 0 auto 16px auto;
}
@keyframes pff_spin {
	to { transform: rotate(360deg); }
}
.status_title {
	font-size: 16px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 6px;
}
.status_sub {
	font-size: 13px;
	color: #64748b;
	margin-bottom: 14px;
}
.status_bar_track {
	width: 100%;
	max-width: 320px;
	height: 6px;
	background: #e2e8f0;
	border-radius: 3px;
	overflow: hidden;
	margin: 0 auto;
}
.status_bar_active {
	width: 100%;
	height: 100%;
	background: #0284c7;
	animation: pff_bar_indeterminate 1.5s infinite ease-in-out;
}
@keyframes pff_bar_indeterminate {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

/* Error Banner */
.make_error_banner {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
	border-radius: 8px;
	padding: 14px 18px;
	font-size: 14px;
	margin-top: 14px;
	text-align: center;
}
.btn_retry_action {
	background: #dc2626;
	color: #fff;
	border: none;
	padding: 7px 18px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

/* Cropping Stage */
.make_crop_section {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	padding: 24px;
	margin-bottom: 35px;
	text-align: center;
}
.crop_header_wrap {
	margin-bottom: 16px;
}
.crop_title {
	margin: 0 0 4px 0;
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
}
.crop_subtitle {
	margin: 0;
	font-size: 13.5px;
	color: #64748b;
}
.crop_photo_stage {
	max-width: 100%;
	margin: 0 auto 20px auto;
	overflow: auto;
	background: #0f172a;
	border-radius: 8px;
	padding: 10px;
}
.crop_controls_row {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
}
.btn_submit_crop {
	background: #16a34a;
	color: #ffffff;
	border: none;
	padding: 11px 28px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
	transition: all 0.15s ease;
}
.btn_submit_crop:hover {
	background: #15803d;
	transform: translateY(-1px);
}
.btn_cancel_crop {
	background: #f1f5f9;
	color: #475569;
	border: 1px solid #cbd5e1;
	padding: 11px 22px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.btn_cancel_crop:hover {
	background: #e2e8f0;
	color: #1e293b;
}

/* Related Section */
.related_section {
	margin-top: 30px;
}
.related_title_row {
	margin-bottom: 16px;
	border-bottom: 2px solid #e2e8f0;
	padding-bottom: 8px;
}
.related_title_row h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #1e293b;
}

/* Responsive adjustments */
@media (max-width: 860px) {
	.make_hero_grid {
		flex-direction: column;
	}
	.make_preview_col {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}
	.make_action_col {
		width: 100%;
	}
	.make_action_card {
		padding: 18px 20px;
	}
	.make_h1_title {
		font-size: 22px;
	}
}