/**
 * PES Account Portal styles.
 * Dark theme with PES gold accent, matching the My Account mockup.
 * All tokens live in .pes-portal so nothing leaks into the wider theme.
 */

.pes-portal {
	--pes-surface: #161616;
	--pes-surface-2: #1c1c1c;
	--pes-border: #2a2a2a;
	--pes-gold: #d4af37;
	--pes-gold-dim: rgba(212, 175, 55, .12);
	--pes-text: #f5f5f5;
	--pes-muted: #8a8a8a;
	--pes-label: #7d7d7d;
	--pes-green: #3fb56b;
	--pes-green-bg: rgba(63, 181, 107, .14);

	max-width: 1180px;
	margin: 0 auto;
	padding: 1rem;
	color: var(--pes-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pes-portal * {
	box-sizing: border-box;
}

/* ---- Header ---- */
.pes-portal__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.pes-portal__title {
	margin: 0;
	font-size: 1.76rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
}

.pes-portal__sub {
	margin: .35rem 0 0;
	color: var(--pes-muted);
	font-size: 0.862rem;
}

.pes-acct-badge {
	border: 1px solid var(--pes-gold);
	color: var(--pes-gold);
	padding: .4rem .75rem;
	border-radius: 6px;
	font-size: 0.634rem;
	font-weight: 700;
	letter-spacing: .06em;
	white-space: nowrap;
}

/* ---- Tab bar ---- */
.pes-tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 2px;
	margin-bottom: 1.5rem;
	background: var(--pes-border);
	border: 1px solid var(--pes-border);
	border-radius: 12px;
	overflow: hidden;
}

.pes-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .45rem;
	padding: 1.15rem .5rem;
	background: var(--pes-surface);
	color: var(--pes-muted);
	text-decoration: none;
	font-size: 0.81rem;
	font-weight: 600;
	border-bottom: 3px solid transparent;
	transition: background .15s, color .15s;
}

.pes-tab:hover {
	background: var(--pes-surface-2);
	color: var(--pes-text);
}

.pes-tab.is-active {
	background: var(--pes-gold-dim);
	color: var(--pes-gold);
	border-bottom-color: var(--pes-gold);
}

.pes-tab__icon {
	width: 22px;
	height: 22px;
}

/* ---- Stat row ---- */
.pes-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 1.25rem;
	background: var(--pes-surface);
	border: 1px solid var(--pes-border);
	border-radius: 12px;
	overflow: hidden;
}

.pes-stat {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1.6rem 1rem;
	text-align: center;
	border-left: 1px solid var(--pes-border);
}

.pes-stat:first-child {
	border-left: none;
}

.pes-stat__num {
	font-size: 2.112rem;
	font-weight: 800;
	line-height: 1;
	color: var(--pes-gold);
}

.pes-stat__label {
	color: var(--pes-muted);
	font-size: 0.81rem;
}

/* ---- Cards ---- */
.pes-grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.pes-card {
	padding: 1.5rem 1.6rem;
	background: var(--pes-surface);
	border: 1px solid var(--pes-border);
	border-radius: 12px;
}

.pes-card__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--pes-border);
}

.pes-card__title {
	margin: 0;
	font-size: 1.012rem;
	font-weight: 700;
	color: #fff;
}

/* ---- Label / value fields ---- */
.pes-field {
	padding: .7rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.pes-field:last-child {
	border-bottom: none;
}

.pes-field__label {
	display: block;
	margin-bottom: .3rem;
	color: var(--pes-label);
	font-size: 0.634rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.pes-field__value {
	display: block;
	color: var(--pes-text);
	font-size: 0.898rem;
}

/* ---- Status pill ---- */
.pes-status {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .35rem .8rem;
	background: var(--pes-green-bg);
	color: var(--pes-green);
	border-radius: 999px;
	font-size: 0.748rem;
	font-weight: 600;
}

.pes-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pes-green);
}

/* ---- Full-width status bar (Account Details) ---- */
.pes-status-bar {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .9rem;
	background: var(--pes-green-bg);
	color: var(--pes-green);
	border-radius: 8px;
	font-size: 0.81rem;
	font-weight: 600;
}

/* ---- Edit link in card header ---- */
.pes-edit-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--pes-gold);
	text-decoration: none;
	font-size: 0.792rem;
	font-weight: 600;
}

.pes-edit-link:hover {
	text-decoration: underline;
}

.pes-edit-link svg {
	width: 15px;
	height: 15px;
}

/* ---- Card action buttons ---- */
.pes-card__actions {
	display: flex;
	gap: .75rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

.pes-btn {
	display: inline-block;
	padding: .6rem 1.1rem;
	border-radius: 8px;
	font-size: 0.792rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .15s;
}

.pes-btn:hover {
	opacity: .88;
}

.pes-btn--light {
	background: #fff;
	color: #1a1a1a;
}

/* ---- Pricing callout ---- */
.pes-callout {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: 1.1rem;
	padding: .9rem 1.1rem;
	background: var(--pes-gold-dim);
	border: 1px solid rgba(212, 175, 55, .35);
	border-radius: 8px;
}

.pes-callout__title {
	color: var(--pes-gold);
	font-size: 0.704rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.pes-callout__text {
	color: var(--pes-muted);
	font-size: 0.792rem;
}

/* ---- Misc ---- */
.pes-synced {
	margin-top: 1.25rem;
	color: #5a5a5a;
	font-size: 0.704rem;
}

.pes-muted {
	color: var(--pes-muted);
}

.pes-link {
	color: var(--pes-gold);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.pes-tabs {
		grid-template-columns: repeat(3, 1fr);
	}

	.pes-grid2 {
		grid-template-columns: 1fr;
	}

	.pes-portal__head {
		flex-direction: column;
	}

	.pes-portal__title {
		font-size: 1.496rem;
	}
}

@media (max-width: 560px) {
	.pes-tabs {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Stack stats vertically; dividers become horizontal. */
	.pes-stats {
		grid-template-columns: 1fr;
	}

	.pes-stat {
		border-left: none;
		border-top: 1px solid var(--pes-border);
	}

	.pes-stat:first-child {
		border-top: none;
	}
}

/* =========================================================================
 * My Orders — toolbar, table, badges, empty state
 * ========================================================================= */

/* Toolbar */
.pes-toolbar {
	display: flex;
	gap: .75rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.pes-search {
	position: relative;
	flex: 1 1 260px;
	display: flex;
	align-items: center;
}

.pes-search svg {
	position: absolute;
	left: .85rem;
	width: 17px;
	height: 17px;
	color: var(--pes-muted);
	pointer-events: none;
}

.pes-search input {
	width: 100%;
	padding: .7rem .9rem .7rem 2.4rem;
	background: var(--pes-surface);
	border: 1px solid var(--pes-border);
	border-radius: 8px;
	color: var(--pes-text);
	font-size: 0.81rem;
}

.pes-search input::placeholder {
	color: var(--pes-muted);
}

.pes-select {
	padding: .7rem 2rem .7rem .9rem;
	background: var(--pes-surface);
	border: 1px solid var(--pes-border);
	border-radius: 8px;
	color: var(--pes-text);
	font-size: 0.81rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
}

.pes-search input:focus,
.pes-select:focus {
	outline: none;
	border-color: var(--pes-gold);
}

/* Card with no inner padding, for tables */
.pes-card--flush {
	padding: 0;
	overflow: hidden;
}

/* Table */
.pes-table-wrap {
	overflow-x: auto;
}

.pes-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.81rem;
}

.pes-table thead th {
	text-align: left;
	padding: 1rem 1.2rem;
	color: var(--pes-label);
	font-size: 0.634rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 1px solid var(--pes-border);
	white-space: nowrap;
}

.pes-table tbody td {
	padding: 1rem 1.2rem;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
	color: var(--pes-text);
	white-space: nowrap;
}

.pes-table tbody tr:last-child td {
	border-bottom: none;
}

.pes-table tbody tr:hover {
	background: var(--pes-surface-2);
}

.pes-order-num {
	color: var(--pes-gold);
	font-weight: 600;
}

.pes-order-total {
	font-weight: 700;
}

.pes-dash {
	color: #555;
}

/* Status badges */
.pes-badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .7rem;
	border-radius: 999px;
	font-size: 0.704rem;
	font-weight: 600;
	white-space: nowrap;
}

.pes-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.pes-badge--completed {
	background: rgba(63, 181, 107, .14);
	color: var(--pes-green);
}

.pes-badge--pending {
	background: rgba(138, 138, 138, .16);
	color: #b0b0b0;
}
.pes-badge--create {
	background: rgba(138, 138, 138, .16);
	color: #b0b0b0;
}

.pes-badge--open {
	background: rgba(74, 144, 226, .14);
	color: #4a90e2;
}

.pes-badge--process {
	background: rgba(212, 175, 55, .14);
	color: var(--pes-gold);
}

.pes-badge--paid {
	background: rgba(63, 181, 107, .14);
	color: var(--pes-green);
}

.pes-badge--sent {
	background: rgba(74, 144, 226, .14);
	color: #4a90e2;
}

.pes-badge--created {
	background: rgba(138, 138, 138, .16);
	color: #b0b0b0;
}

.pes-badge--void {
	background: rgba(200, 80, 80, .14);
	color: #c85050;
}

.pes-badge--due {
	background: rgba(212, 175, 55, .14);
	color: var(--pes-gold);
}

.pes-badge--overdue {
	background: rgba(200, 80, 80, .14);
	color: #c85050;
}

/* Small button variant */
.pes-btn--sm {
	padding: .4rem .9rem;
	font-size: 0.748rem;
}

/* No-results line */
.pes-no-results {
	padding: 2rem 1.2rem;
	text-align: center;
	color: var(--pes-muted);
}

/* Empty state */
.pes-empty {
	text-align: center;
	padding: 3rem 1.5rem;
}

.pes-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--pes-surface-2);
	color: var(--pes-muted);
}

.pes-empty__icon svg {
	width: 28px;
	height: 28px;
}

.pes-empty__title {
	margin: 0 0 .5rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
}

.pes-empty__text {
	margin: 0;
	color: var(--pes-muted);
}

/* Responsive: stack toolbar */
@media (max-width: 640px) {
	.pes-toolbar {
		flex-direction: column;
	}

	.pes-select {
		width: 100%;
	}
}

/* =========================================================================
 * Address Book (placeholder until address data exists)
 * ========================================================================= */
.pes-addressbook {
	margin-top: 1rem;
}

.pes-address-grid {
	gap: 2rem;
}

.pes-address {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.pes-address__empty {
	margin: 0;
	padding: 1.25rem;
	background: var(--pes-surface-2);
	border: 1px dashed var(--pes-border);
	border-radius: 8px;
	color: var(--pes-muted);
	font-size: 0.81rem;
}

.pes-soon-tag {
	padding: .25rem .6rem;
	background: rgba(138, 138, 138, .16);
	color: var(--pes-muted);
	border-radius: 999px;
	font-size: 0.634rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

/* =========================================================================
 * Settings — sub-nav, forms, toggles, banners
 * ========================================================================= */

.pes-settings {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.5rem;
	align-items: start;
}

.pes-settings__nav {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.pes-settings__link {
	padding: .75rem 1rem;
	border-radius: 8px;
	color: var(--pes-muted);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.836rem;
	transition: background .15s, color .15s;
}

.pes-settings__link:hover {
	background: var(--pes-surface-2);
	color: var(--pes-text);
}

.pes-settings__link.is-active {
	background: var(--pes-surface-2);
	color: var(--pes-gold);
}

.pes-settings__panel {
	min-width: 0;
}

/* Forms */
.pes-form-block {
	padding: 1.5rem 0;
	border-top: 1px solid var(--pes-border);
}

.pes-form-block__title {
	margin: 0 0 1rem;
	font-size: 0.88rem;
	font-weight: 700;
	color: #fff;
}

.pes-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.pes-form-field {
	margin-bottom: 1.1rem;
}

.pes-form-field .pes-field__label {
	margin-bottom: .45rem;
}

.pes-portal .pes-input,
.pes-portal input.pes-input,
.pes-portal input[type="text"].pes-input,
.pes-portal input[type="email"].pes-input,
.pes-portal input[type="password"].pes-input {
	width: 100%;
	padding: .75rem .9rem;
	background: #0f0f0f !important;
	border: 1px solid var(--pes-border) !important;
	border-radius: 8px;
	color: var(--pes-text) !important;
	font-size: 0.836rem;
	box-shadow: none !important;
}

.pes-portal .pes-input:focus {
	outline: none;
	border-color: var(--pes-gold) !important;
}

.pes-portal .pes-input:disabled {
	opacity: .7;
	cursor: not-allowed;
	background: #0f0f0f !important;
	color: var(--pes-text) !important;
	-webkit-text-fill-color: var(--pes-text);
}

.pes-portal .pes-input::placeholder {
	color: #666 !important;
}

/* Buttons — gold variant */
.pes-btn--gold {
	background: var(--pes-gold);
	color: #1a1a1a;
	border: none;
}

.pes-btn--gold:disabled {
	opacity: .5;
	cursor: not-allowed;
}

.pes-btn--light:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Toggle rows (notifications) */
.pes-toggle-row {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, .04);
	cursor: pointer;
}

.pes-toggle-row:last-of-type {
	border-bottom: none;
}

.pes-toggle {
	position: relative;
	flex-shrink: 0;
	margin-top: .1rem;
}

.pes-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.pes-toggle__track {
	display: block;
	width: 42px;
	height: 24px;
	background: #3a3a3a;
	border-radius: 999px;
	transition: background .2s;
}

.pes-toggle__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s;
}

.pes-toggle input:checked + .pes-toggle__track {
	background: var(--pes-gold);
}

.pes-toggle input:checked + .pes-toggle__track .pes-toggle__thumb {
	transform: translateX(18px);
}

.pes-toggle-row__text {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.pes-toggle-row__title {
	color: var(--pes-text);
	font-weight: 600;
	font-size: 0.836rem;
}

.pes-toggle-row__desc {
	color: var(--pes-muted);
	font-size: 0.774rem;
}

/* Status banners */
.pes-banner {
	padding: .85rem 1.1rem;
	border-radius: 8px;
	margin-bottom: 1rem;
	font-size: 0.81rem;
	font-weight: 500;
}

.pes-banner--ok {
	background: var(--pes-green-bg);
	color: var(--pes-green);
	border: 1px solid rgba(63, 181, 107, .3);
}

.pes-banner--err {
	background: rgba(220, 80, 80, .12);
	color: #e08484;
	border: 1px solid rgba(220, 80, 80, .3);
}

/* Responsive */
@media (max-width: 760px) {
	.pes-settings {
		grid-template-columns: 1fr;
	}

	.pes-settings__nav {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.pes-form-row {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * Email & Password — toggle-reveal sections
 * ========================================================================= */

/* A toggle header row that reveals a form when switched on */
.pes-reveal {
	border-top: 1px solid var(--pes-border);
	padding-top: 1.25rem;
	margin-top: 1.25rem;
}

.pes-reveal:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.pes-reveal__head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	cursor: pointer;
}

.pes-reveal__text {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.pes-reveal__title {
	color: var(--pes-text);
	font-weight: 600;
	font-size: 0.88rem;
}

.pes-reveal__desc {
	color: var(--pes-muted);
	font-size: 0.774rem;
}

/* The collapsible body: hidden until the toggle checkbox is checked */
.pes-reveal__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
}

.pes-reveal__toggle:checked ~ .pes-reveal__body {
	max-height: 1000px;
}

.pes-reveal__inner {
	margin-top: 1.25rem;
	padding: 1.25rem;
	background: var(--pes-surface-2);
	border: 1px solid var(--pes-border);
	border-radius: 10px;
}

/* Reuse the notification toggle switch visuals for the reveal toggle */
.pes-reveal__switch {
	position: relative;
	flex-shrink: 0;
	margin-top: .1rem;
}

.pes-reveal__toggle {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.pes-reveal__track {
	display: block;
	width: 42px;
	height: 24px;
	background: #3a3a3a;
	border-radius: 999px;
	transition: background .2s;
	cursor: pointer;
}

.pes-reveal__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s;
	pointer-events: none;
}

.pes-reveal__toggle:checked ~ .pes-reveal__head .pes-reveal__track {
	background: var(--pes-gold);
}

.pes-reveal__toggle:checked ~ .pes-reveal__head .pes-reveal__track .pes-reveal__thumb {
	transform: translateX(18px);
}

/* Address Book — address line rendering */
.pes-address__lines {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	color: var(--pes-text);
	font-size: 0.836rem;
	line-height: 1.5;
}

.pes-address__strong {
	font-weight: 600;
}

.pes-empty--compact {
	padding: 2rem 1.5rem;
}

.pes-empty--compact .pes-empty__icon {
	width: 48px;
	height: 48px;
	margin-bottom: .75rem;
}

.pes-empty--compact .pes-empty__icon svg {
	width: 22px;
	height: 22px;
}

/* Invoice status badges — derived from the due date, not payment data */
.pes-badge--due {
	background: rgba(138, 138, 138, .16);
	color: #b0b0b0;
}

.pes-badge--overdue {
	background: rgba(220, 80, 80, .14);
	color: #e08484;
}

/* Contact phone on an address card */
.pes-address__phone {
	margin-top: .3rem;
	color: var(--pes-gold);
}

/* Astra sets select:focus background to #fff, which hides our text on click.
   Force the dark theme to hold through focus. */
.pes-portal .pes-select,
.pes-portal .pes-select:focus,
.pes-portal .pes-select:focus-visible {
	background-color: var(--pes-surface) !important;
	color: var(--pes-text) !important;
}

/* Dropdown options — the open list inherits the OS default (white) without this */
.pes-portal .pes-select option {
	background: var(--pes-surface);
	color: var(--pes-text);
}