/* =========================================================
   Woo Professional Checkout & Dashboard Design
   ========================================================= */

:root {
	--wpd-primary: #2563eb;
	--wpd-primary-dark: #1d4ed8;
	--wpd-success: #16a34a;
	--wpd-warning: #f59e0b;
	--wpd-danger: #dc2626;
	--wpd-text: #1e293b;
	--wpd-muted: #64748b;
	--wpd-border: #e2e8f0;
	--wpd-bg-soft: #f8fafc;
	--wpd-radius: 12px;
	--wpd-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--wpd-shadow-lg: 0 10px 25px rgba(0,0,0,0.08);
}

/* -------------------- Checkout Progress Steps -------------------- */
.wpd-checkout-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 480px;
	margin: 0 auto 40px;
	padding: 20px 0;
}

.wpd-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	opacity: 0.5;
}

.wpd-step.active {
	opacity: 1;
}

.wpd-step-number {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wpd-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
}

.wpd-step:not(.active) .wpd-step-number {
	background: #cbd5e1;
}

.wpd-step-label {
	font-size: 13px;
	color: var(--wpd-text);
	font-weight: 500;
}

.wpd-step-line {
	flex: 1;
	height: 2px;
	background: var(--wpd-border);
	margin: 0 10px;
	margin-bottom: 22px;
	max-width: 60px;
}

/* -------------------- Checkout Layout -------------------- */
.wpd-checkout-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important; /* থিমের কোনো space-between override করার জন্য */
	gap: 28px !important;
	align-items: flex-start !important;
	width: 100% !important;
}

.wpd-checkout-col-left {
	flex: 1 1 0% !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.wpd-checkout-col-right {
	flex: 0 0 380px !important;
	width: 380px !important;
	max-width: 380px !important;
	min-width: 0 !important;
	position: sticky;
	top: 20px;
}

@media (max-width: 1100px) {
	.wpd-checkout-col-right {
		flex-basis: 320px !important;
		width: 320px !important;
		max-width: 320px !important;
	}
}

@media (max-width: 900px) {
	.wpd-checkout-col-right {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		position: static; /* মোবাইলে sticky বন্ধ, নাহলে অর্ডার রিভিউ স্ক্রিনে আটকে থাকবে */
	}
	.wpd-checkout-steps {
		max-width: 100%;
		padding: 14px 10px 24px;
	}
	.wpd-step-number {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}
	.wpd-step-label {
		font-size: 11px;
	}
	.wpd-step-line {
		margin: 0 6px;
		margin-bottom: 18px;
	}
}

/* ভিজিবল কার্ড (Billing box, Order box) যেন সবসময় তার প্যারেন্ট কলামের পুরো width নেয় —
   থিমের নিজস্ব কোনো width/flex-basis রুল যেন এই বক্সগুলোকে ছোট করে সংকুচিত করে
   মাঝখানে ফাঁকা জায়গা তৈরি করতে না পারে, তাই এখানেও জোর করে override করা হয়েছে */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	background: #fff;
	border: 1px solid var(--wpd-border);
	border-radius: var(--wpd-radius);
	padding: 24px;
	box-shadow: var(--wpd-shadow);
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	box-sizing: border-box !important;
	float: none !important;
}

@media (max-width: 600px) {
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		padding: 16px;
		border-radius: 10px;
	}
}

/* customer_details এর ভেতরের col2-set (Billing/Shipping) যেন float সমস্যা না করে */
.woocommerce-checkout #customer_details.col2-set {
	display: block !important; /* theme এর flex/grid কিছু থাকলেও override করা হচ্ছে */
}

/* Billing ও Shipping ফিল্ড পাশাপাশি না রেখে একটার নিচে একটা রাখা হচ্ছে।
   কারণ: শিপিং প্রয়োজন না হলে বা "ship to different address" আনচেক থাকলে
   পাশের কলাম খালি থেকে যায় এবং মাঝখানে বড় ফাঁকা জায়গা তৈরি হয়।
   !important ব্যবহার করা হয়েছে কারণ থিমের নিজস্ব flex-basis/width রুল
   সাধারণ width প্রপার্টিকে override করে দিচ্ছিল। */
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.woocommerce-checkout #customer_details .col-2:empty,
.woocommerce-checkout #customer_details .col-2:has(> *:empty:only-child) {
	display: none !important;
}

.woocommerce-checkout #order_review_heading {
	margin-top: 20px;
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0;
}

.woocommerce-checkout h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--wpd-text);
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wpd-border);
}

.woocommerce-checkout .form-row label {
	font-weight: 500;
	font-size: 13px;
	color: var(--wpd-text);
	margin-bottom: 4px;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	border: 1px solid var(--wpd-border) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-size: 16px !important; /* 16px রাখলে iOS Safari ফোকাসে অটো-জুম করে না */
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	background: var(--wpd-bg-soft);
	min-height: 46px; /* টাচ-ফ্রেন্ডলি ট্যাপ এরিয়া */
	box-sizing: border-box;
	width: 100%;
}

.woocommerce-checkout textarea {
	min-height: 90px;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	border-color: var(--wpd-primary) !important;
	box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
	background: #fff;
	outline: none;
}

/* Order review table */
.woocommerce-checkout-review-order-table {
	border-radius: 8px;
	overflow: hidden;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 12px 8px;
	border-bottom: 1px solid var(--wpd-border);
	font-size: 14px;
}

.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
	font-size: 17px;
	font-weight: 700;
	color: var(--wpd-primary);
	border-top: 2px solid var(--wpd-text);
	border-bottom: none;
}

/* Payment methods box */
.woocommerce-checkout #payment {
	background: var(--wpd-bg-soft);
	border-radius: 10px;
	margin-top: 16px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 12px 14px;
}

.woocommerce-checkout #payment div.payment_box {
	background: #eef2ff;
	border-radius: 8px;
}

/* Place order button */
.wpd-secure-note {
	display: block;
	text-align: center;
	font-size: 12px;
	color: var(--wpd-muted);
	margin-bottom: 8px;
}

#place_order,
.woocommerce-checkout #payment #place_order {
	width: 100%;
	background: var(--wpd-primary) !important;
	border: none !important;
	padding: 16px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	transition: background 0.15s ease, transform 0.1s ease;
	letter-spacing: 0.2px;
	min-height: 50px;
	cursor: pointer;
}

#place_order:hover {
	background: var(--wpd-primary-dark) !important;
	transform: translateY(-1px);
}

/* টাচ ডিভাইসে radio/checkbox আরেকটু বড় করা */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
	width: 18px;
	height: 18px;
	vertical-align: middle;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-size: 14px;
	padding-left: 4px;
}

/* -------------------- My Account: Layout -------------------- */
/* CSS Grid এর বদলে Flexbox ব্যবহার করা হচ্ছে, কারণ WooCommerce/Astra মাঝেমধ্যে
   অতিরিক্ত এলিমেন্ট (notices wrapper ইত্যাদি) যোগ করে দেয়। Grid এ auto-placement
   এর কারণে সেগুলো ভুল কলামে বসে লেআউট ভেঙে ফেলছিল। Flexbox + wrap দিয়ে
   অজানা এলিমেন্ট শুধু নিজের সারিতে wrap হয়ে যাবে, sidebar/content এর width
   কখনো নষ্ট করবে না। */
.woocommerce-account .woocommerce {
	display: flex !important;
	flex-wrap: wrap;
	gap: 28px;
	align-items: flex-start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 260px;
	max-width: 260px;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 480px;
	min-width: 0;
	box-sizing: border-box;
}

/* নেভিগেশন আর কনটেন্ট ছাড়া অন্য যেকোনো ডাইরেক্ট চাইল্ড (notices wrapper ইত্যাদি)
   পুরো width নিয়ে নিজের সারিতে থাকবে, sidebar/content এর width এ প্রভাব ফেলবে না */
.woocommerce-account .woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
	flex: 1 1 100%;
	width: 100%;
}

@media (max-width: 800px) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
		gap: 16px;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		flex: 1 1 100%;
		max-width: 100%;
	}
	.woocommerce-MyAccount-content {
		padding: 16px;
	}
	.wpd-account-user-card {
		padding: 14px;
	}
}

/* Sidebar user card */
.wpd-account-user-card {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--wpd-border);
	border-radius: var(--wpd-radius);
	padding: 18px;
	margin-bottom: 16px;
	box-shadow: var(--wpd-shadow);
}

.wpd-avatar img {
	border-radius: 50%;
	display: block;
}

.wpd-user-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wpd-user-info strong {
	font-size: 15px;
	color: var(--wpd-text);
}

.wpd-user-info span {
	font-size: 12px;
	color: var(--wpd-muted);
}

/* Sidebar navigation */
.woocommerce-MyAccount-navigation {
	background: #fff;
	border: 1px solid var(--wpd-border);
	border-radius: var(--wpd-radius);
	padding: 10px;
	box-shadow: var(--wpd-shadow);
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
	list-style: none;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	padding: 11px 14px;
	border-radius: 8px;
	color: var(--wpd-text) !important;
	background: transparent !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--wpd-bg-soft) !important;
	color: var(--wpd-primary) !important;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	background: var(--wpd-primary) !important;
	color: #ffffff !important;
}

/* মোবাইল টগল বাটন (JS দিয়ে prepend করা হয়) */
.wpd-nav-toggle {
	display: none;
	width: 100%;
	background: var(--wpd-bg-soft);
	border: 1px solid var(--wpd-border);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wpd-text);
	text-align: left;
	cursor: pointer;
	min-height: 46px;
}

@media (max-width: 800px) {
	.wpd-nav-toggle {
		display: block;
	}
	.woocommerce-MyAccount-navigation li a {
		padding: 13px 14px; /* টাচ-ফ্রেন্ডলি */
	}
}

/* Content area card */
.woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--wpd-border);
	border-radius: var(--wpd-radius);
	padding: 26px;
	box-shadow: var(--wpd-shadow);
}

/* -------------------- Dashboard Stat Cards -------------------- */
.wpd-dashboard-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 28px;
}

@media (max-width: 600px) {
	.wpd-dashboard-stats {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 400px) {
	.wpd-dashboard-stats {
		grid-template-columns: 1fr;
	}
}

.wpd-stat-card {
	background: linear-gradient(135deg, #f8fafc, #eef2ff);
	border: 1px solid var(--wpd-border);
	border-radius: var(--wpd-radius);
	padding: 20px;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wpd-stat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wpd-shadow-lg);
}

.wpd-stat-icon {
	font-size: 26px;
	margin-bottom: 8px;
}

.wpd-stat-value {
	font-size: 20px;
	font-weight: 700;
	color: var(--wpd-text);
}

.wpd-stat-label {
	font-size: 12px;
	color: var(--wpd-muted);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* -------------------- Orders Table -------------------- */
.woocommerce-orders-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.woocommerce-orders-table thead th {
	background: var(--wpd-bg-soft);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--wpd-muted);
	padding: 12px 14px;
	text-align: left;
}

.woocommerce-orders-table tbody td {
	padding: 14px;
	border-bottom: 1px solid var(--wpd-border);
	font-size: 14px;
}

.woocommerce-orders-table tbody tr:hover {
	background: var(--wpd-bg-soft);
}

.woocommerce-orders-table__cell-order-actions a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 12px !important;
	font-weight: 600;
	text-decoration: none !important;
	min-height: 36px;
}

/* -------------------- Orders Table: Mobile Card Layout -------------------- */
@media (max-width: 700px) {
	.woocommerce-orders-table thead {
		display: none; /* মোবাইলে হেডার সারি লুকানো, প্রতিটা সেলে label দেখানো হবে */
	}

	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table td {
		display: block;
		width: 100%;
	}

	.woocommerce-orders-table tr {
		background: #fff;
		border: 1px solid var(--wpd-border);
		border-radius: var(--wpd-radius);
		box-shadow: var(--wpd-shadow);
		margin-bottom: 14px;
		padding: 6px 14px;
	}

	.woocommerce-orders-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 0;
		border-bottom: 1px dashed var(--wpd-border);
		text-align: right;
	}

	.woocommerce-orders-table td:last-child {
		border-bottom: none;
	}

	/* WooCommerce ডিফল্ট টেমপ্লেট প্রতিটা td তে data-title attribute দেয়, সেটাকেই লেবেল হিসেবে দেখানো */
	.woocommerce-orders-table td::before {
		content: attr(data-title);
		font-weight: 600;
		font-size: 12px;
		color: var(--wpd-muted);
		text-transform: uppercase;
		letter-spacing: 0.3px;
		text-align: left;
	}

	.woocommerce-orders-table__cell-order-actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.woocommerce-orders-table__cell-order-actions::before {
		display: none;
	}
}

/* -------------------- Order Status Badges (Placed / Pending payment / Processing / Shipping / Delivered) -------------------- */
/* WooCommerce ডিফল্ট মার্কআপ: mark.order-status। প্রতিটা স্ট্যাটাসের সাথে একটা প্রফেশনাল SVG আইকন যুক্ত করা হয়েছে
   mask-image দিয়ে, যাতে আইকনের রঙ ব্যাজের টেক্সট রঙ (currentColor) অনুসরণ করে। */
mark.order-status {
	--wpd-status-icon: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px 5px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	background: #e2e8f0 !important;
	color: var(--wpd-text) !important;
	line-height: 1.6;
}

/* আইকন বসানোর জন্য ::before সিউডো এলিমেন্ট */
mark.order-status::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask-image: var(--wpd-status-icon);
	mask-image: var(--wpd-status-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ১. Order Placed (নতুন কাস্টম স্ট্যাটাস: wc-placed) */
mark.order-status.status-placed {
	--wpd-status-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTkgMmExIDEgMCAwIDAtMSAxdjFINmEyIDIgMCAwIDAtMiAydjE0YTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY2YTIgMiAwIDAgMC0yLTJoLTJWM2ExIDEgMCAwIDAtMS0xSDl6bTAgMmg2djJIOVY0ek02IDZoMnYxYTEgMSAwIDAgMCAxIDFoNmExIDEgMCAwIDAgMS0xVjZoMnYxNEg2VjZ6bTkuNyA0LjMtNC4yIDQuMi0xLjctMS43YTEgMSAwIDEgMC0xLjQgMS40bDIuNCAyLjRhMSAxIDAgMCAwIDEuNCAwbDQuOS00LjlhMSAxIDAgMCAwLTEuNC0xLjR6Ii8+PC9zdmc+Cg==");
	background: #e0e7ff !important;
	color: #4338ca !important;
}

/* ২. Pending payment (wc-pending) */
mark.order-status.status-pending {
	--wpd-status-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnptMSAxMC40VjZhMSAxIDAgMCAwLTIgMHY3YTEgMSAwIDAgMCAuNC44bDQgM2ExIDEgMCAxIDAgMS4yLTEuNnoiLz48L3N2Zz4K");
	background: #fef3c7 !important;
	color: var(--wpd-warning) !important;
}

/* On hold ও pending payment একই মাসিক (হলুদ) রঙে, কিন্তু on-hold এর নিজস্ব pause আইকন */
mark.order-status.status-on-hold {
	--wpd-status-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTggNWExIDEgMCAwIDAtMSAxdjEyYTEgMSAwIDAgMCAxIDFoMmExIDEgMCAwIDAgMS0xVjZhMSAxIDAgMCAwLTEtMUg4em02IDBhMSAxIDAgMCAwLTEgMXYxMmExIDEgMCAwIDAgMSAxaDJhMSAxIDAgMCAwIDEtMVY2YTEgMSAwIDAgMC0xLTFoLTJ6Ii8+PC9zdmc+Cg==");
	background: #fef3c7 !important;
	color: var(--wpd-warning) !important;
}

/* ৩. Processing (wc-processing) */
mark.order-status.status-processing {
	--wpd-status-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE5LjQgMTNhNy42IDcuNiAwIDAgMCAuMS0xIDcuNiA3LjYgMCAwIDAtLjEtMWwyLjEtMS42YS41LjUgMCAwIDAgLjEtLjZsLTItMy41YS41LjUgMCAwIDAtLjYtLjJsLTIuNSAxYTcuNyA3LjcgMCAwIDAtMS43LTFMMTQuNCAyYS41LjUgMCAwIDAtLjUtLjRoLTRhLjUuNSAwIDAgMC0uNS40bC0uNCAyLjdhNy43IDcuNyAwIDAgMC0xLjcgMWwtMi41LTFhLjUuNSAwIDAgMC0uNi4ybC0yIDMuNWEuNS41IDAgMCAwIC4xLjZMNC41IDExYTcuNiA3LjYgMCAwIDAtLjEgMSA3LjYgNy42IDAgMCAwIC4xIDFsLTIuMSAxLjZhLjUuNSAwIDAgMC0uMS42bDIgMy41YS41LjUgMCAwIDAgLjYuMmwyLjUtMWE3LjcgNy43IDAgMCAwIDEuNyAxbC40IDIuN2EuNS41IDAgMCAwIC41LjRoNGEuNS41IDAgMCAwIC41LS40bC40LTIuN2E3LjcgNy43IDAgMCAwIDEuNy0xbDIuNSAxYS41LjUgMCAwIDAgLjYtLjJsMi0zLjVhLjUuNSAwIDAgMC0uMS0uNnpNMTIgMTUuNWEzLjUgMy41IDAgMSAxIDMuNS0zLjUgMy41IDMuNSAwIDAgMS0zLjUgMy41eiIvPjwvc3ZnPgo=");
	background: #dbeafe !important;
	color: var(--wpd-primary) !important;
}

/* ৪. Shipping (নতুন কাস্টম স্ট্যাটাস: wc-shipping) */
mark.order-status.status-shipping {
	--wpd-status-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTMgNmExIDEgMCAwIDAtMSAxdjlhMSAxIDAgMCAwIDEgMWgxLjJhMi44IDIuOCAwIDAgMCA1LjYgMGg0LjRhMi44IDIuOCAwIDAgMCA1LjYgMEgyMWExIDEgMCAwIDAgMS0xdi00LjZhMSAxIDAgMCAwLS4yLS42bC0zLTRhMSAxIDAgMCAwLS44LS40SDE1VjdhMSAxIDAgMCAwLTEtMUgzem0xMy41IDIuNUgxNy41bDIuNCAzLjJIMTYuNVY4LjV6TTcgMTYuM2ExLjMgMS4zIDAgMSAxIDEuMy0xLjNBMS4zIDEuMyAwIDAgMSA3IDE2LjN6bTEwIDBhMS4zIDEuMyAwIDEgMSAxLjMtMS4zQTEuMyAxLjMgMCAwIDEgMTcgMTYuM3oiLz48L3N2Zz4K");
	background: #ede9fe !important;
	color: #6d28d9 !important;
}

/* ৫. Delivered (wc-completed স্ট্যাটাসকেই "Delivered" লেবেলে দেখানো হয়) */
mark.order-status.status-completed {
	--wpd-status-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnptLTEuMiAxNC40LTQtNGExIDEgMCAxIDEgMS40LTEuNGwzLjMgMy4zIDYuMy02LjNhMSAxIDAgMSAxIDEuNCAxLjRsLTcgN2ExIDEgMCAwIDEtMS40IDB6Ii8+PC9zdmc+Cg==");
	background: #dcfce7 !important;
	color: var(--wpd-success) !important;
}

/* Cancelled / Failed */
mark.order-status.status-cancelled,
mark.order-status.status-failed {
	--wpd-status-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnptMy41IDEyLjEtMS40IDEuNEwxMiAxMy40bC0yLjEgMi4xLTEuNC0xLjRMMTAuNiAxMiA4LjUgOS45bDEuNC0xLjRMMTIgMTAuNmwyLjEtMi4xIDEuNCAxLjRMMTMuNCAxMnoiLz48L3N2Zz4K");
	background: #fee2e2 !important;
	color: var(--wpd-danger) !important;
}

/* Refunded */
mark.order-status.status-refunded {
	--wpd-status-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTYuMyA4SDEwYTEgMSAwIDAgMCAwLTJINGExIDEgMCAwIDAtMSAxdjZhMSAxIDAgMCAwIDIgMHYtMi45QTggOCAwIDEgMCAxMiA0YTEgMSAwIDAgMCAwIDIgNiA2IDAgMSAxLTUuNyA0SDhhMSAxIDAgMCAwIDAtMkg0LjhBOCA4IDAgMCAxIDYuMyA4eiIvPjwvc3ZnPgo=");
	background: #fee2e2 !important;
	color: var(--wpd-danger) !important;
}

/* -------------------- Single Order / Thank You Page -------------------- */
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-order-downloads {
	background: #fff;
	border: 1px solid var(--wpd-border);
	border-radius: var(--wpd-radius);
	padding: 22px;
	margin-bottom: 20px;
	box-shadow: var(--wpd-shadow);
}

.woocommerce-thankyou-order-received {
	background: #dcfce7;
	color: var(--wpd-success);
	border-radius: var(--wpd-radius);
	padding: 16px 20px;
	font-weight: 600;
	margin-bottom: 24px;
}

/* -------------------- General Buttons -------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--wpd-primary) !important;
	color: #fff !important;
	border-radius: 8px !important;
	padding: 10px 20px !important;
	font-weight: 600 !important;
	border: none !important;
	transition: background 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--wpd-primary-dark) !important;
}

/* -------------------- General Mobile & Touch Safety -------------------- */
@media (max-width: 600px) {
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		width: 100%;
		text-align: center;
		min-height: 46px;
		padding: 12px 18px !important;
	}

	.woocommerce-order-details,
	.woocommerce-customer-details,
	.woocommerce-order-downloads {
		padding: 16px;
	}

	.wpd-stat-card {
		padding: 14px;
	}
	.wpd-stat-value {
		font-size: 16px;
	}
}

/* শুধুমাত্র সিঙ্গেল অর্ডার পেজের প্রোডাক্ট টেবিলের জন্য (My Account > Orders লিস্ট টেবিলের জন্য না,
   ওটার জন্য আলাদা mobile card CSS আছে উপরে) এবং শুধু ছোট স্ক্রিনেই প্রযোজ্য */
@media (max-width: 700px) {
	.woocommerce table.shop_table:not(.woocommerce-orders-table) {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

img {
	max-width: 100%;
	height: auto;
}

/* সব ইন্টারেক্টিভ এলিমেন্ট (লিংক/বাটন) মোবাইলে ন্যূনতম ৪৪px ট্যাপ এরিয়া */
@media (max-width: 600px) {
	.woocommerce-MyAccount-navigation li a,
	.woocommerce-orders-table__cell-order-actions a {
		min-height: 44px;
	}
}

/* -------------------- my-account/orders/ পেজের উপরে Order Status Guide/Legend -------------------- */
.wpd-order-status-legend {
	background: var(--wpd-bg-soft);
	border: 1px solid var(--wpd-border);
	border-radius: var(--wpd-radius);
	padding: 16px 18px;
	margin-bottom: 22px;
	box-shadow: var(--wpd-shadow);
}

.wpd-legend-title {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--wpd-muted);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-bottom: 10px;
}

.wpd-legend-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

/* লেজেন্ডের ভেতরের ব্যাজগুলো একটু বড়, স্পষ্ট এবং non-uppercase (readability এর জন্য) */
.wpd-legend-chips .order-status,
.wpd-legend-chips mark.order-status {
	font-size: 12px;
	padding: 6px 14px 6px 10px;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.wpd-legend-chips .order-status::before,
.wpd-legend-chips mark.order-status::before {
	width: 13px;
	height: 13px;
}

/* প্রতিটা chip এখন ক্লিকযোগ্য লিংক — status অনুযায়ী orders লিস্ট ফিল্টার করে */
.wpd-legend-chips .wpd-legend-chip-link {
	display: inline-flex;
	text-decoration: none;
	border-radius: 999px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wpd-legend-chips .wpd-legend-chip-link:hover {
	transform: translateY(-1px);
	box-shadow: var(--wpd-shadow);
}

.wpd-legend-chips .wpd-legend-chip-link.is-active mark.order-status {
	box-shadow: 0 0 0 2px var(--wpd-primary, #2271b1) inset;
}

.wpd-legend-chips .wpd-legend-chip-all {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--wpd-border);
	background: #fff;
	color: var(--wpd-muted);
	text-decoration: none;
	font-weight: 600;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wpd-legend-chips .wpd-legend-chip-all:hover {
	transform: translateY(-1px);
	box-shadow: var(--wpd-shadow);
}

.wpd-legend-chips .wpd-legend-chip-all.is-active {
	box-shadow: 0 0 0 2px var(--wpd-primary, #2271b1) inset;
	color: var(--wpd-text, #1d2327);
}

@media (max-width: 600px) {
	.wpd-order-status-legend {
		padding: 14px;
		margin-bottom: 16px;
	}

	.wpd-legend-chips {
		gap: 8px;
	}

	.wpd-legend-chips .order-status,
	.wpd-legend-chips mark.order-status {
		font-size: 11px;
		padding: 5px 10px 5px 8px;
	}
}

/* -------------------- Single Order পেজের ভিজ্যুয়াল Order Tracker (Order Placed → ... → Delivered) -------------------- */
.wpd-order-tracker {
	margin: 24px 0 28px;
}

.wpd-tracker-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--wpd-text);
	margin: 0 0 22px;
}

.wpd-tracker-steps {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.wpd-tracker-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 2px;
}

.wpd-tracker-icon {
	position: relative;
	z-index: 1;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e2e8f0;
	color: #94a3b8;
	transition: background 0.2s ease, color 0.2s ease;
}

.wpd-tracker-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.wpd-tracker-step.is-complete .wpd-tracker-icon {
	background: var(--wpd-text);
	color: #fff;
}

/* সংযোগকারী লাইন — বাম অর্ধেক */
.wpd-tracker-step:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 0;
	width: 50%;
	height: 3px;
	background: var(--wpd-border);
	z-index: 0;
}

/* সংযোগকারী লাইন — ডান অর্ধেক */
.wpd-tracker-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 23px;
	right: 0;
	width: 50%;
	height: 3px;
	background: var(--wpd-border);
	z-index: 0;
}

.wpd-tracker-step.is-complete:not(:first-child)::before {
	background: var(--wpd-text);
}

.wpd-tracker-step.is-next-complete:not(:last-child)::after {
	background: var(--wpd-text);
}

.wpd-tracker-label {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wpd-text);
}

.wpd-tracker-date {
	margin-top: 3px;
	font-size: 11px;
	color: var(--wpd-muted);
	min-height: 14px;
}

/* Cancelled / Refunded / Failed অর্ডারের জন্য আলাদা নোটিশ (ট্র্যাকার এর বদলে) */
.wpd-tracker-exception {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 28px;
	padding: 14px 16px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--wpd-radius);
}

.wpd-tracker-exception-text {
	font-size: 13px;
	color: var(--wpd-text);
}

/* Tracking Link বক্স */
.wpd-tracking-link {
	margin-bottom: 28px;
}

.wpd-tracking-box {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--wpd-bg-soft);
	border: 1px solid var(--wpd-border);
	border-radius: var(--wpd-radius);
	padding: 14px 16px;
	font-size: 13px;
	color: var(--wpd-muted);
}

.wpd-tracking-box.has-link {
	background: #eff6ff;
	border-color: #bfdbfe;
}

.wpd-tracking-box.has-link a {
	color: var(--wpd-primary);
	font-weight: 600;
	text-decoration: none;
}

.wpd-tracking-box.has-link a:hover {
	text-decoration: underline;
}

/* মোবাইলে ট্র্যাকার — ছোট আইকন, ছোট ফন্ট, লেবেল wrap হবে */
@media (max-width: 600px) {
	.wpd-tracker-icon {
		width: 36px;
		height: 36px;
	}

	.wpd-tracker-icon svg {
		width: 16px;
		height: 16px;
	}

	.wpd-tracker-step:not(:first-child)::before,
	.wpd-tracker-step:not(:last-child)::after {
		top: 18px;
	}

	.wpd-tracker-label {
		font-size: 10.5px;
		margin-top: 8px;
		line-height: 1.2;
	}

	.wpd-tracker-date {
		font-size: 9.5px;
	}
}