/* ==========================================================================
   PuriyaGalo — Profile/Account page v6
   Mobile-first, clean single column → desktop 2-col sidebar grid
   ========================================================================== */

.pg-profile { --pg-nav-active: #0D1B4C; background: #f6f7f9; }
.pg-profile.pg-app { background: #f6f7f9; }
.pg-profile .pg-see-all { color: #555; font-size: 13px; font-weight: 600; }
.pg-profile .pg-see-all-pink { color: #0D1B4C; }

/* ══ WRAPPER — mobile: plain block, desktop: 2-col grid ══════════════════ */
.pg-profile-wrapper {
	display: block;
	padding: 0;
}


.pg-profile-sidebar,
.pg-profile-main {
	display: contents;
}

/* ══ PROFILE HEADER (avatar card) ════════════════════════════════════════ */
.pg-profile-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 16px 14px 14px;
	background: #fff;
	margin-bottom: 10px;
}
.pg-profile-id {
	display: flex;
	gap: 14px;
	align-items: center;
}
.pg-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0,0,0,0.12);
	flex-shrink: 0;
	border: 3px solid #fff;
	background: #f0f0f0;
}
.pg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pg-profile-info h1 {
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 2px;
	color: #1f1f1f;
}
.pg-profile-info .pg-welcome {
	font-size: 12px;
	color: #777;
	margin: 0 0 4px;
	line-height: 1.4;
}
.pg-member-since {
	font-size: 10px;
	color: #aaa;
	margin-bottom: 6px;
	display: block;
}
.pg-gold-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: linear-gradient(90deg, #fff8e6, #fff0c0);
	color: #b8860b;
	font-size: 11px;
	font-weight: 800;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid #ffd966;
}
.pg-profile-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.pg-circle-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #555;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,0.07);
	transition: box-shadow 0.15s;
}
.pg-circle-btn:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.pg-circle-btn svg { width: 17px; height: 17px; }

/* ══ REWARDS ROW ════════════════════════════════════════════════════════════ */
.pg-rewards-row {
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
}
.pg-reward-card {
	flex: 1;
	min-width: 0;
	border-radius: 14px;
	padding: 12px 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.pg-reward-coins   { background: #fffaeb; }
.pg-reward-voucher { background: #E8EAF6; }
.pg-reward-refer   { background: #effaf1; }

.pg-reward-icon-row {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 6px;
	row-gap: 3px;
	margin-bottom: 6px;
	min-height: 28px;
}
.pg-reward-icon-img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	overflow: hidden;
	flex-shrink: 0;
}
.pg-reward-label { font-size: 11px; font-weight: 700; color: #444; line-height: 1.3; }
.pg-reward-value {
	font-family: 'Poppins', sans-serif;
	font-size: 22px;
	font-weight: 900;
	color: #1f1f1f;
	line-height: 1;
}
.pg-reward-value-small {
	font-size: 13px;
	font-weight: 700;
	margin-top: 2px;
	line-height: 1.3;
}
.pg-reward-sub { font-size: 10px; color: #888; margin-bottom: 4px; }
.pg-reward-cta {
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	padding: 8px 0;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity 0.15s;
	display: block;
	margin-top: 4px;
}
.pg-reward-cta:hover { opacity: 0.82; }
.pg-cta-pink { background: #0D1B4C; color: #fff; }
.pg-cta-outline-pink { border: 1.5px solid #0D1B4C; color: #0D1B4C; }
.pg-cta-outline-green { border: 1.5px solid #19b45b; color: #19b45b; }

/* ══ ORDER TRACKER ══════════════════════════════════════════════════════════ */
.pg-order-tracker-wrap { position: relative; padding: 4px 0; }
.pg-order-tracker-line {
	position: absolute;
	top: 24px;
	left: 4%;
	right: 4%;
	height: 1.5px;
	background: repeating-linear-gradient(
		90deg,
		#e0e0e0 0, #e0e0e0 5px,
		transparent 5px, transparent 9px
	);
	z-index: 0;
}
.pg-order-tracker {
	display: flex;
	justify-content: flex-start;
	position: relative;
	z-index: 1;
	overflow-x: auto;
	padding-bottom: 4px;
	gap: 14px;
	scrollbar-width: none;
}
.pg-order-tracker::-webkit-scrollbar { display: none; }
.pg-order-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	width: 48px;
	text-decoration: none;
	color: inherit;
}
.pg-order-icon {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f8f9fb;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	transition: transform 0.15s;
}
.pg-order-icon svg { width: 20px; height: 20px; flex-shrink: 0; }
.pg-order-step:hover .pg-order-icon { transform: translateY(-2px); }
.pg-order-step-label {
	font-size: 9px;
	font-weight: 600;
	color: #555;
	text-align: center;
	line-height: 1.2;
	max-width: 48px;
}
.pg-order-step-count {
	font-size: 10px;
	font-weight: 800;
	color: #0D1B4C;
	line-height: 1;
}

/* ══ MY CHANNEL ════════════════════════════════════════════════════════════ */
.pg-channel-row { gap: 10px !important; }
.pg-channel-card {
	flex: 0 0 110px;
	border-radius: 14px;
	padding: 10px 8px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.05);
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.15s;
	text-decoration: none;
	color: inherit;
}
.pg-channel-card:hover { transform: translateY(-2px); }
.pg-channel-illustration {
	width: 100%;
	height: 60px;
	border-radius: 8px;
	background: rgba(255,255,255,0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	margin-bottom: 4px;
}
.pg-channel-card strong { font-size: 11px; font-weight: 700; color: #1f1f1f; }
.pg-channel-card span  { font-size: 9px; color: #666; line-height: 1.3; }
.pg-channel-badge {
	position: absolute;
	top: 7px;
	right: 7px;
	background: #0D1B4C;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 999px;
}
.pg-channel-badge.pg-badge-new { background: #19b45b; }

/* ══ RECENTLY VIEWED ════════════════════════════════════════════════════════ */
.pg-recent-row { gap: 10px !important; }
.pg-recent-card {
	flex: 0 0 130px;
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 7px;
	position: relative;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	display: block;
	transition: transform 0.15s;
	text-decoration: none;
	color: inherit;
}
.pg-recent-card:hover { transform: translateY(-2px); }
.pg-recent-card img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 6px;
}
.pg-discount-badge-pink {
	position: absolute;
	top: 7px;
	left: 7px;
	background: #0D1B4C;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	z-index: 2;
}
.pg-recent-title {
	font-size: 11px;
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
	line-height: 1.3;
	min-height: 28px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pg-recent-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pg-price-red { font-size: 13px; font-weight: 800; color: #0D1B4C; }
.pg-price-strike { font-size: 10px; color: #bbb; text-decoration: line-through; }

/* ══ SIDEBAR MENU — HIDDEN on mobile, shown on desktop ═════════════════════ */
.pg-profile-menu-section { display: none !important; }
.pg-profile-footer       { display: none !important; }

.pg-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 16px;
	border-bottom: 1px solid #f5f5f5;
	color: #1a1a1a;
	text-decoration: none;
	transition: background 0.12s;
}
.pg-menu-item:last-child { border-bottom: none; }
.pg-menu-item:hover { background: #fafafa; }
.pg-menu-item.is-active { background: #E8EAF6; color: #0D1B4C; font-weight: 700; }
.pg-menu-icon  { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.pg-menu-label { font-size: 13px; font-weight: 600; flex: 1; }
.pg-menu-count {
	background: #f0f0f0;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: #555;
}

.pg-logout-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 13px;
	border: 1.5px solid #0D1B4C;
	border-radius: 12px;
	color: #0D1B4C;
	font-size: 13px;
	font-weight: 700;
	background: #fff;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.pg-logout-btn:hover { background: #0D1B4C; color: #fff; }

/* ==========================================================================
   TABLET  (≥ 768px)
   ========================================================================== */
@media (min-width: 768px) {

	.pg-profile-header {
		padding: 20px 20px 18px;
	}

	.pg-rewards-row { gap: 14px; }
	.pg-reward-card { padding: 16px 14px; }
	.pg-reward-value { font-size: 24px; }

	.pg-order-tracker { overflow-x: visible; gap: 8px; }
	.pg-order-icon { width: 50px; height: 50px; font-size: 22px; }
	.pg-order-icon svg { width: 24px; height: 24px; }
	.pg-order-step-label { font-size: 10px; max-width: 58px; }

	.pg-channel-row { flex-wrap: wrap !important; overflow: visible !important; gap: 12px !important; }
	.pg-channel-card { flex: 0 0 calc(33.33% - 8px); }

	.pg-recent-card { flex: 0 0 150px; }
	.pg-recent-card img { height: 130px; }
}

/* ==========================================================================
   DESKTOP  (≥ 1024px) — 2-col grid: 280px sidebar | 1fr main
   ========================================================================== */

@media (min-width: 1200px) {

	.pg-profile.pg-app { background: #f0f2f5; }


	.pg-profile-wrapper {
		display: grid;
		grid-template-columns: 280px 1fr;
		gap: 20px;
		align-items: start;
		max-width: 1280px;
		margin: 24px auto 40px;
		padding: 0 24px;
	}

	.pg-profile-sidebar {
		display: flex;
		flex-direction: column;
		gap: 20px;
		position: sticky;
		top: 88px;
	}

	.pg-profile-main {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	/* ── Sidebar: avatar card ── */
	.pg-profile-header {
		margin: 0;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 2px 12px rgba(0,0,0,0.07);
		padding: 28px 20px 22px;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.pg-profile-id      { flex-direction: column; text-align: center; }
	.pg-profile-actions { margin-top: 16px; }
	.pg-avatar          { width: 90px; height: 90px; }
	.pg-profile-info h1 { font-size: 20px; }

	/* ── Sidebar: nav menu ── */
	.pg-profile-menu-section {
		display: block !important;    /* override the mobile hide */
		background: #fff;
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	}

	/* ── Sidebar: logout ── */
	.pg-profile-footer {
		display: block !important;    /* override the mobile hide */
		padding: 0;
	}

	/* ── Main column sections ── */
	.pg-profile .pg-section {
		background: #fff;
		border-radius: 16px;
		padding: 22px !important;
		margin: 0 !important;
		box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	}

	.pg-rewards-row { gap: 16px; }
	.pg-reward-card { padding: 18px 14px; }
	.pg-reward-value { font-size: 26px; }

	.pg-channel-row { flex-wrap: wrap !important; overflow: visible !important; gap: 14px !important; }
	.pg-channel-card { flex: 0 0 calc(33.33% - 10px); }

	.pg-recent-card { flex: 0 0 160px; }
	.pg-recent-card img { height: 140px; }

	.pg-order-tracker { overflow-x: visible; gap: 14px; }
	.pg-order-icon { width: 52px; height: 52px; font-size: 20px; }
	.pg-order-icon svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   WALLET PAGE OVERRIDE
   The wallet endpoint only renders one child (.pg-section with TeraWallet's
   content), so it must NOT inherit .pg-profile-wrapper's 2-col
   sidebar/main grid meant for the dashboard — that grid was shoving the
   wallet content into the 280px sidebar column and leaving the rest of
   the page blank on desktop (and squeezing TeraWallet's transactions
   table into an unreadable vertical strip). Instead: a simple centered
   single column that scales cleanly at every width.
   ========================================================================== */
.pg-profile-wrapper.pg-wallet-page {
	display: block !important;
	grid-template-columns: none !important;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 12px;
	box-sizing: border-box;
}

.pg-wallet-page .pg-section {
	background: #fff;
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	width: 100%;
	box-sizing: border-box;
}

.pg-wallet-page .pg-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.pg-wallet-page .pg-section-head h2 {
	font-family: 'Poppins', sans-serif;
	font-size: 17px;
	font-weight: 700;
	margin: 0;
	color: #1f1f1f;
}

/* Let TeraWallet's own inner content (balance card, stat cards, tables)
   use the full width of this container instead of a fixed px value. */
.pg-wallet-page .pg-section > * {
	max-width: 100%;
}

/* ── Addresses & Payment Methods (default WooCommerce markup) ──────────
   These endpoints render WooCommerce's own default HTML with no PuriyaGalo
   classes to hook into, so — same idea as the wallet page above — give
   the generic elements (headings, address boxes, buttons, tables) basic
   app-consistent styling instead of leaving them unstyled default WP. */
.pg-wallet-page .woocommerce-Address {
	background: #fafbfc;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 14px;
}
.pg-wallet-page .woocommerce-Address-title h3 {
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #1f1f1f;
}
.pg-wallet-page .woocommerce-Address-title .edit,
.pg-wallet-page a.button {
	display: inline-block;
	margin-top: 10px;
	padding: 9px 20px;
	border-radius: 999px;
	background: #0D1B4C;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.pg-wallet-page a.button:hover,
.pg-wallet-page .woocommerce-Address-title .edit:hover { opacity: 0.85; }

.pg-wallet-page form .form-row { margin: 0 0 14px; }
.pg-wallet-page form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: #333;
	margin-bottom: 4px;
}
.pg-wallet-page form input:not([type="submit"]):not([type="checkbox"]),
.pg-wallet-page form select,
.pg-wallet-page form textarea {
	width: 100%;
	max-width: 480px;
	padding: 10px 14px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
}
.pg-wallet-page form input:focus,
.pg-wallet-page form select:focus,
.pg-wallet-page form textarea:focus { border-color: #F5821F; outline: none; }
.pg-wallet-page form button,
.pg-wallet-page form input[type="submit"] {
	background: #0D1B4C;
	color: #fff;
	border: none;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.pg-wallet-page form button:hover,
.pg-wallet-page form input[type="submit"]:hover { background: #091336; }

.pg-wallet-page table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.pg-wallet-page table.woocommerce-table th,
.pg-wallet-page table.woocommerce-table td {
	padding: 10px 8px;
	border-bottom: 1px solid #f0f0f0;
	text-align: left;
}

@media (min-width: 768px) {
	.pg-profile-wrapper.pg-wallet-page {
		padding: 20px;
	}
	.pg-wallet-page .pg-section {
		padding: 26px;
	}
}

@media (min-width: 1200px) {
	.pg-profile-wrapper.pg-wallet-page {
		max-width: 760px;
		margin: 28px auto 48px;
		padding: 0 24px;
	}
	.pg-wallet-page .pg-section {
		padding: 30px;
	}
}