/* =========================================================
   Sobuj Prantho Photocard Engine — Styles
   v3.0: প্লেইন HTML/CSS লেয়ার্ড কার্ড (Fabric.js/canvas বাদ) —
   ব্রাউজার নিজেই রেসপন্সিভ লেআউট হিসাব করে, তাই কোনো JS
   resize-sync বাগ থাকার সুযোগ নেই। ডাউনলোডের সময় শুধু html2canvas
   দিয়ে এই DOM-টাকেই এক্সপোর্ট করা হয়।
   ========================================================= */

/* ---------- স্বতন্ত্র পেজের বেসিক রিসেট ও মিনি হেডার ---------- */
.sppc-standalone-body {
	margin: 0;
	background: #f7faf8;
}

.sppc-mini-header {
	background: #0b3d1e;
	padding: 14px 20px;
	text-align: center;
}

.sppc-mini-logo {
	color: #ffffff;
	text-decoration: none;
	font-size: 18px;
	font-weight: 700;
	font-family: 'Noto Serif Bengali', 'Segoe UI', Arial, sans-serif;
}

.sppc-canvas-error {
	text-align: center;
	color: #c0392b;
	font-size: 14px;
	margin-top: 10px;
}

/* ---------- পোস্টের শেষে ট্রিগার বাটন (লিংক) ---------- */
.sppc-trigger-wrap {
	margin: 28px 0;
	text-align: center;
}

.sppc-open-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #1e7e34, #0f5c22);
	color: #ffffff !important;
	text-decoration: none !important;
	border: none;
	border-radius: 50px;
	padding: 14px 30px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(15, 92, 34, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sppc-open-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(15, 92, 34, 0.45);
	color: #ffffff !important;
}

/* ---------- ফটোকার্ড পেজ (ফুল-পেজ, মডাল নয়) ---------- */
.sppc-page-wrap {
	max-width: 720px;
	margin: 30px auto;
	padding: 20px;
	box-sizing: border-box;
	font-family: 'Noto Serif Bengali', 'Segoe UI', Arial, sans-serif;
	color: #0b3d1e;
}

.sppc-back-link {
	display: inline-block;
	margin-bottom: 16px;
	color: #1e7e34;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}

.sppc-back-link:hover {
	text-decoration: underline;
}

.sppc-page-heading {
	font-size: 20px;
	line-height: 1.5;
	margin: 0 0 20px 0;
	color: #0b3d1e;
}

/* =========================================================
   ফটোকার্ড — পুরোটাই %-ভিত্তিক পজিশনিং, তাই .sppc-card যেকোনো
   প্রস্থে (মোবাইল/ডেস্কটপ) স্বয়ংক্রিয়ভাবে স্কেল হয়ে যায়।
   ========================================================= */
.sppc-card-wrapper {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
}

.sppc-card {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* border-radius ইচ্ছাকৃতভাবে বাদ দেওয়া হয়েছে — টেমপ্লেট ডিজাইনের চারটা কোণাই ইতিমধ্যে
	   বর্গাকার (স্কয়ার) করে আঁকা, তাই এখানে গোল করলে টেমপ্লেটের কোণার অংশ কেটে/ঢাকা পড়ে যাচ্ছিল */
	box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

/* ব্যাকগ্রাউন্ড টেমপ্লেট (সবুজ কার্ড ডিজাইন: লোগো, ফুটার, বর্ডার ইত্যাদি) */
.sppc-card-template {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* টেমপ্লেট 1:1 হওয়ার কথা, cover নিশ্চিত করে কোনো ফাঁকা/ধূসর ফালি না থাকে */
	display: block;
	pointer-events: none;
	user-select: none;
}

/* ফিচার্ড ইমেজের বক্স — টেমপ্লেটের আলফা-চ্যানেল পিক্সেল-বাই-পিক্সেল স্ক্যান করে মাপা প্রকৃত
   স্বচ্ছ (cutout) এলাকা থেকে %-এ কনভার্ট করা। আগে মাঝের লোগো/ফিতা ঢাকা না পড়ার জন্য একটা
   clip-path নচ কাটতে হতো — এখন তার বদলে নিচে .sppc-card-template-overlay একটা ডুপ্লিকেট
   টেমপ্লেট লেয়ার ছবির উপরে বসিয়ে দেওয়া হয়, তাই বক্সটা এখন সাধারণ আয়তক্ষেত্র রাখলেই চলে —
   টেমপ্লেটের যেকোনো অপ্রচ্ছ অংশ (লোগো, বর্ডার ইত্যাদি) স্বয়ংক্রিয়ভাবে ছবির উপরে দেখা যাবে। */
.sppc-feature-box-backing {
	position: absolute;
	/* নতুন টেমপ্লেট (বর্ডার-বিহীন) থেকে আবার পিক্সেল-নিখুঁতভাবে মাপা — এখন ছবির
	   জায়গাটা একদম উপরে-বামে কোণা ঘেঁষে শুরু হয় (বর্ডার সরিয়ে ফেলার কারণে)।
	   width: 101%; padding-top: 57% (এখানে height হিসেবে প্রয়োগ করা হয়েছে, কারণ .sppc-card
	   আগে থেকেই 1:1 স্কয়ার) — 16:9-এর (56.25%) চেয়ে সামান্য বড় রাখা ইচ্ছাকৃত bleed, যাতে
	   সাব-পিক্সেল রাউন্ডিং-এর কারণে টেমপ্লেটের সাথে কোনো ১ পিক্সেলের ফাঁকা/সাদা ফালিও
	   কখনো দেখা না যায়। */
	left: 0%;
	top: 0%;
	width: 101%;
	height: 57%;
	background: #ffffff;
}

.sppc-feature-box {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 101%;
	height: 57%;
	overflow: hidden;
	touch-action: none;
	cursor: grab;
}

/* টেমপ্লেটের ডুপ্লিকেট ওভারলে — ছবির বক্সের ঠিক পরে/উপরে বসানো, যাতে টেমপ্লেটের লোগো/বর্ডার/
   অন্য যেকোনো অপ্রচ্ছ ডিজাইন সবসময় ফিচার্ড ইমেজের উপরে দেখা যায় (ছবি কখনো লোগো ঢেকে দিতে
   পারবে না), টেমপ্লেট যেভাবেই ডিজাইন করা হোক বা বদলানো হোক না কেন — কোনো হার্ডকোডেড
   পিক্সেল-নচ হিসাব ছাড়াই। টেমপ্লেটের স্বচ্ছ (transparent) অংশ দিয়ে নিচের ছবিটা স্বাভাবিকভাবেই
   দেখা যায়, শুধু অপ্রচ্ছ অংশগুলো (লোগো, বর্ডার, ফুটার ইত্যাদি) ছবির উপরে এসে বসে। */
.sppc-card-template-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	user-select: none;
}

.sppc-feature-box.sppc-dragging {
	cursor: grabbing;
}

.sppc-feature-img {
	position: absolute;
	/* সাব-পিক্সেল রাউন্ডিং-এ ফাঁক তৈরি হয়ে .sppc-card এর ব্যাকগ্রাউন্ড (ডার্ক গ্রিন)
	   উঁকি দিয়ে "ডাবল বর্ডার" এর মতো দেখাচ্ছিল — তাই ছবিটা বক্সের চেয়ে সামান্য বড় (bleed)
	   রাখা হচ্ছে, যাতে কোনো অবস্থাতেই (zoom/drag/resize) ১ পিক্সেলের ফাঁকও না থাকে */
	inset: -1%;
	width: 102%;
	height: 102%;
	object-fit: cover; /* বেস ফিট — বক্সের বাইরে কখনো যাবে না, ওভারফ্লো সবসময় hidden দিয়ে ক্লিপ হয় */
	display: block;
	will-change: transform;
}

/* শিরোনাম জোন — মূল ডিজাইনের TITLE_ZONE (top 655 → bottom 995, maxWidth 980) থেকে %-এ */
.sppc-title-zone {
	position: absolute;
	left: 4.63%;
	right: 4.63%;
	top: 59.3%;
	height: 32%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	pointer-events: none;
}

.sppc-title-line {
	margin: 0;
	font-weight: 700;
	font-family: 'Noto Serif Bengali', 'Segoe UI', Arial, sans-serif;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.15; /* JS স্লাইডার দিয়ে ইনলাইন স্টাইলে ওভাররাইট হয় */
}

.sppc-title-line1 {
	color: #ffffff;
}

.sppc-title-line2 {
	color: #ffd700;
}

/* তারিখ — মূল ডিজাইনের DATE_POSITION (right 1035, top 1010) থেকে %-এ */
.sppc-date-text {
	position: absolute;
	right: 4.17%;
	bottom: 3.5%;
	color: #ffffff;
	font-weight: 700;
	font-family: 'Noto Serif Bengali', 'Segoe UI', Arial, sans-serif;
	font-size: clamp(11px, 2.6vw, 16px);
	pointer-events: none;
}

.sppc-hint-text {
	margin: 12px 0 0 0;
	font-size: 13px;
	color: #4d7a5c;
	text-align: center;
}

/* ---------- কন্ট্রোল প্যানেল ---------- */
.sppc-controls-col {
	max-width: 520px;
	margin: 24px auto 0 auto;
	background: linear-gradient(160deg, #0b3d1e 0%, #072a14 100%);
	border: 1px solid #1e6b3a;
	border-radius: 14px;
	padding: 20px;
	box-sizing: border-box;
	color: #eafff0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sppc-controls-title {
	margin: 0;
	font-size: 18px;
	color: #ffd700;
	border-bottom: 1px solid #1e6b3a;
	padding-bottom: 10px;
}

.sppc-control-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sppc-control-group label {
	font-size: 14px;
	color: #eafff0;
	font-weight: 600;
}

.sppc-control-group input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 4px;
	background: #12522c;
	outline: none;
}

.sppc-control-group input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffd700;
	border: 2px solid #0b3d1e;
	cursor: pointer;
}

.sppc-control-group input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffd700;
	border: 2px solid #0b3d1e;
	cursor: pointer;
}

.sppc-range-value {
	font-size: 13px;
	color: #a9d9b8;
	align-self: flex-end;
}

.sppc-download-btn {
	background: linear-gradient(135deg, #ffd700, #e0a800);
	color: #0b3d1e;
	border: none;
	border-radius: 10px;
	padding: 16px 20px;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sppc-download-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(255, 215, 0, 0.3);
}

.sppc-download-btn:disabled {
	opacity: 0.6;
	cursor: default;
	transform: none;
}

.sppc-longpress-hint {
	font-size: 13px;
	color: #eafff0;
	background: rgba(255, 215, 0, 0.12);
	border: 1px solid rgba(255, 215, 0, 0.35);
	border-radius: 8px;
	padding: 10px 12px;
	line-height: 1.5;
	margin: 0;
}

.sppc-manual-open-link {
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #0b3d1e;
	background: #eafff0;
	border-radius: 8px;
	padding: 10px 12px;
	text-decoration: none;
}

.sppc-manual-open-link:hover {
	background: #ffffff;
}

.sppc-loading-indicator {
	font-size: 13px;
	color: #ffd700;
	text-align: center;
}

/* =========================================================
   রেসপন্সিভ — মোবাইল
   ========================================================= */
@media (max-width: 600px) {
	.sppc-page-wrap {
		margin: 12px auto;
		padding: 14px;
	}

	.sppc-page-heading {
		font-size: 17px;
	}

	.sppc-controls-col {
		padding: 16px;
		border-radius: 12px;
	}

	.sppc-open-btn {
		width: 100%;
		justify-content: center;
		padding: 13px 20px;
		font-size: 16px;
	}

	.sppc-download-btn {
		font-size: 16px;
		padding: 14px 18px;
	}
}