/* Pangnote Phase 1 redesign — design tokens + .pn-* public chrome & homepage components.
   Additive on top of the legacy CoreUI/Bootstrap main.css: never reuses bare Bootstrap
   classnames (.btn, .nav, .card, .dropdown, ...) which are still live on unmigrated pages. */

:root {
	--pn-ink: #101820;
	--pn-ink-soft: #4a5a68;
	--pn-bg: #ffffff;
	--pn-bg-subtle: #f5f7f9;
	--pn-bg-deep: #0e1b26;
	--pn-brand: #f5931e;
	--pn-brand-dark: #d97500;
	--pn-brand-tint: #fff1e0;
	--pn-trust: #1b4b66;
	--pn-trust-tint: #e8f1f6;
	--pn-success: #1f9d63;
	--pn-border: #e1e6ea;

	--pn-font-display: 'Space Grotesk', 'IBM Plex Sans', Arial, sans-serif;
	--pn-font-body: 'IBM Plex Sans', Lato, Arial, sans-serif;
	--pn-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--pn-radius: 10px;
	--pn-radius-sm: 6px;
	--pn-container: 1180px;
	--pn-shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 8px 24px rgba(16, 24, 32, 0.06);
}

/* ---------- Reset scope for public pages only ---------- */

#pang.pn-public {
	background: var(--pn-bg);
	font-family: var(--pn-font-body);
	color: var(--pn-ink);
}

#pang.pn-public .pn-container {
	max-width: var(--pn-container);
	margin: 0 auto;
	padding: 0 20px;
}

.pn-h1,
.pn-h2,
.pn-h3 {
	font-family: var(--pn-font-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--pn-ink);
	margin: 0;
}
.pn-h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); line-height: 1.08; }
.pn-h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); line-height: 1.18; }
.pn-h3 { font-size: 1.25rem; line-height: 1.3; }

.pn-eyebrow {
	font-family: var(--pn-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pn-brand-dark);
	font-weight: 600;
}

.pn-lead {
	font-size: 1.08rem;
	line-height: 1.65;
	color: var(--pn-ink-soft);
}

.pn-data {
	font-family: var(--pn-font-mono);
	font-variant-ligatures: none;
}

/* ---------- Header ---------- */

.pn-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--pn-bg);
	border-bottom: 1px solid var(--pn-border);
}

.pn-header__bar {
	max-width: var(--pn-container);
	margin: 0 auto;
	padding: 0 20px;
	height: 68px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.pn-brand-mark {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
}
.pn-brand-mark img { width: 30px; height: 30px; display: block; }
.pn-brand-mark span {
	font-family: var(--pn-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--pn-ink);
}

.pn-nav {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
	flex: 1;
}
.pn-nav a {
	display: block;
	padding: 8px 14px;
	border-radius: var(--pn-radius-sm);
	color: var(--pn-ink-soft);
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.pn-nav a:hover { color: var(--pn-ink); background: var(--pn-bg-subtle); }
.pn-nav a.active { color: var(--pn-brand-dark); background: var(--pn-brand-tint); }

.pn-header__side {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.pn-mobile-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius-sm);
	background: none;
	cursor: pointer;
	color: var(--pn-ink);
}
.pn-mobile-toggle svg { width: 18px; height: 18px; }

.pn-mobile-nav {
	border-top: 1px solid var(--pn-border);
	padding: 8px 20px 14px;
	display: flex;
	flex-direction: column;
}
.pn-mobile-nav a {
	padding: 10px 4px;
	color: var(--pn-ink);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 1px solid var(--pn-border);
}
.pn-mobile-nav a:last-child { border-bottom: none; }

/* Currency selector — reuses existing markup/JS (.currency-block, .select-wrapper, .dropdown-content),
   restyled only. */
.pn-header .currency-block .select-dropdown.dropdown-trigger {
	width: 74px;
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius-sm);
	padding: 8px 10px;
	font-family: var(--pn-font-mono);
	font-size: 0.85rem;
	cursor: pointer;
	background: var(--pn-bg);
	color: var(--pn-ink);
}
.pn-header .currency-block label { display: none; }
.pn-header .currency-block .dropdown-content.select-dropdown.active {
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius-sm);
	box-shadow: var(--pn-shadow);
	margin-top: 4px;
	min-width: 74px;
}
.pn-header .currency-block .dropdown-content li span {
	display: block;
	padding: 8px 12px;
	font-family: var(--pn-font-mono);
	font-size: 0.85rem;
	cursor: pointer;
}
.pn-header .currency-block .dropdown-content li span:hover,
.pn-header .currency-block .dropdown-content li.selected span {
	background: var(--pn-brand-tint);
	color: var(--pn-brand-dark);
}

/* Account dropdown — reuses #loged / .dropdown-toggle hooks so closeCurrencyDropdown()/dropdown()
   keep working unmodified. */
.pn-header #loged { position: relative; list-style: none; }
.pn-header #loged .dropdown-button {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--pn-ink);
	padding: 6px 10px;
	border-radius: var(--pn-radius-sm);
	cursor: pointer;
}
.pn-header #loged .dropdown-button:hover { background: var(--pn-bg-subtle); }
.pn-header #loged img.img-avatar { border-radius: 50%; width: 32px; height: 32px; object-fit: cover; }
.pn-header #loged .triangel {
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--pn-ink-soft);
}
.pn-header #loged #subHeadDrop {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 200px;
	background: var(--pn-bg);
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius);
	box-shadow: var(--pn-shadow);
	list-style: none;
	margin: 0;
	padding: 6px;
	z-index: 200;
}
.pn-header #loged.open #subHeadDrop { display: block; }
.pn-header #loged .dropdown-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 9px 10px;
	border-radius: var(--pn-radius-sm);
	font-size: 0.9rem;
	color: var(--pn-ink);
	text-decoration: none;
	cursor: pointer;
}
.pn-header #loged .dropdown-item:hover { background: var(--pn-bg-subtle); }

.pn-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 6px;
	border-radius: 999px;
	background: var(--pn-brand);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
}

.pn-login-link {
	font-weight: 600;
	color: var(--pn-brand-dark);
	text-decoration: none;
	padding: 8px 16px;
	border: 1px solid var(--pn-brand);
	border-radius: var(--pn-radius-sm);
}
.pn-login-link:hover { background: var(--pn-brand-tint); }

@media (min-width: 992px) {
	.pn-nav { display: flex; }
	.pn-mobile-toggle { display: none; }
}

/* ---------- Buttons ---------- */

.pn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--pn-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 12px 22px;
	border-radius: var(--pn-radius-sm);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pn-btn--primary { background: var(--pn-brand); color: #fff; }
.pn-btn--primary:hover { background: var(--pn-brand-dark); color: #fff; }
.pn-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.pn-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.pn-btn--outline { background: transparent; border-color: var(--pn-border); color: var(--pn-ink); }
.pn-btn--outline:hover { border-color: var(--pn-ink-soft); }

/* ---------- Sections / hero ---------- */

.pn-section { padding: 72px 0; }
.pn-section--subtle { background: var(--pn-bg-subtle); }

.pn-hero {
	background: var(--pn-bg-deep);
	color: #fff;
	padding: 76px 0 88px;
	overflow: hidden;
}
.pn-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}
.pn-hero .pn-h1 { color: #fff; }
.pn-hero .pn-eyebrow { color: var(--pn-brand); }
.pn-hero .pn-lead { color: rgba(255, 255, 255, 0.72); max-width: 46ch; }
.pn-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (min-width: 992px) {
	.pn-hero__grid { grid-template-columns: 1fr 0.86fr; gap: 40px; }
}

/* Signature: escrow transfer card (Seller -> Escrow -> Buyer) */
.pn-transfer {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	padding: 26px;
}
.pn-transfer__block {
	background: var(--pn-bg-deep);
	border: 1px solid rgba(255, 157, 40, 0.4);
	border-radius: var(--pn-radius-sm);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.pn-transfer__block .pn-data { color: var(--pn-brand); font-size: 1.05rem; font-weight: 600; }
.pn-transfer__block small { color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; }

.pn-transfer__route {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 20px;
}
.pn-transfer__party {
	text-align: center;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}
.pn-transfer__party span {
	display: block;
	width: 44px;
	height: 44px;
	line-height: 44px;
	margin: 0 auto 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.pn-transfer__party--escrow span { background: var(--pn-brand-tint); color: var(--pn-trust); border-color: transparent; }
.pn-transfer__line { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(255, 157, 40, 0.6) 0 6px, transparent 6px 12px); margin-top: -18px; }

.pn-transfer__checks { display: flex; flex-direction: column; gap: 10px; }
.pn-transfer__check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
}
.pn-transfer__check svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--pn-success); }

/* ---------- Trust strip ---------- */

.pn-trust-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 768px) {
	.pn-trust-grid { grid-template-columns: repeat(3, 1fr); }
}
.pn-trust-item__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--pn-trust-tint);
	color: var(--pn-trust);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.pn-trust-item h3 { margin: 0 0 8px; }
.pn-trust-item p { margin: 0; color: var(--pn-ink-soft); line-height: 1.55; }

/* ---------- Cards (category / listing) ---------- */

.pn-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 768px) { .pn-card-grid { grid-template-columns: repeat(4, 1fr); } }

.pn-card {
	display: block;
	background: var(--pn-bg);
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius);
	padding: 20px;
	text-decoration: none;
	color: var(--pn-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pn-card:hover { border-color: var(--pn-brand); box-shadow: var(--pn-shadow); transform: translateY(-2px); }
.pn-card h3 { font-size: 1rem; margin: 0 0 6px; font-family: var(--pn-font-display); }
.pn-card .pn-card__meta { color: var(--pn-ink-soft); font-size: 0.85rem; }
.pn-card .pn-data { color: var(--pn-trust); font-size: 0.82rem; }

/* ---------- News ---------- */

.pn-news-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 768px) { .pn-news-grid { grid-template-columns: repeat(3, 1fr); } }

.pn-news-card {
	display: block;
	text-decoration: none;
	color: var(--pn-ink);
	border: 1px solid var(--pn-border);
	border-radius: var(--pn-radius);
	overflow: hidden;
	background: var(--pn-bg);
}
.pn-news-card img { width: 100%; height: 160px; object-fit: cover; display: block; }
.pn-news-card__body { padding: 16px; }
.pn-news-card__cat {
	font-family: var(--pn-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pn-brand-dark);
}
.pn-news-card h3 { font-size: 0.98rem; margin: 8px 0 6px; }
.pn-news-card p { font-size: 0.85rem; color: var(--pn-ink-soft); margin: 0 0 10px; line-height: 1.5; }
.pn-news-card__day { font-size: 0.75rem; color: var(--pn-ink-soft); font-family: var(--pn-font-mono); }

/* ---------- Footer ---------- */

.pn-footer {
	background: var(--pn-bg-deep);
	color: rgba(255, 255, 255, 0.75);
	padding: 56px 0 28px;
}
.pn-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 768px) { .pn-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.pn-footer h4 {
	font-family: var(--pn-font-display);
	color: #fff;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.pn-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pn-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.9rem; }
.pn-footer a:hover { color: #fff; }
.pn-footer .pn-brand-mark span { color: #fff; }
.pn-footer p { font-size: 0.9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); max-width: 40ch; }
.pn-footer__bottom {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

/* ---------- Cookie banner (restyled, both chrome variants) ---------- */

.cookies-modal.pn-cookie {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	max-width: 640px;
	margin: 0 auto;
	background: var(--pn-bg-deep);
	color: rgba(255, 255, 255, 0.85);
	border-radius: var(--pn-radius);
	box-shadow: var(--pn-shadow);
	padding: 18px 22px;
	z-index: 500;
	font-family: var(--pn-font-body);
}
.cookies-modal.pn-cookie.disabled { display: none; }
.cookies-modal.pn-cookie a { color: var(--pn-brand); }
.cookies-modal.pn-cookie .pn-btn { margin-top: 12px; }