/* Shared shell for logged-in /account pages (account_base.html).
   Same design language as the login page: soft blue wash, white cards with
   the house-gradient edge stripe, embossed-style labels. */

.account-area {
	background: linear-gradient(180deg, #f6f9fd 0%, #eef3fa 100%);
	padding: 140px 0 60px;
	min-height: 70vh;
}

.account-page-title {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 4px;
}
.account-page-sub {
	color: #6b7a90;
	font-size: 14px;
	margin-bottom: 26px;
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.pc-card {
	background: #fff;
	border-radius: 18px;
	border: 1px solid #e6ecf5;
	box-shadow: 0 12px 30px rgba(28, 78, 140, 0.08);
	padding: 26px 28px;
	position: relative;
	/* No overflow:hidden here — it clipped selectize dropdowns at the
	   card edge. The stripe below rounds its own corners instead. */
	margin-bottom: 24px;
}
.pc-card.pc-card-striped::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	border-radius: 17px 17px 0 0;
	background: linear-gradient(90deg, #1CA4FF 0%, #6078EA 100%);
}
.pc-card h2, .pc-card .pc-card-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 16px;
}

/* embossed-style labels, like the engraved captions on a card */
.pc-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8291a8;
	margin-bottom: 6px;
}
.pc-value {
	font-size: 16px;
	color: #222;
	font-variant-numeric: tabular-nums;
}
.pc-value.pc-amount { font-weight: 600; font-size: 20px; }

.account-area .form-control, .account-area .form-select {
	border: 1px solid #dbe3ef;
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 15px;
	box-shadow: none;
}
.account-area .form-control:focus, .account-area .form-select:focus {
	border-color: #1CA4FF;
	box-shadow: 0 0 0 3px rgba(28, 164, 255, 0.15);
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn-pc {
	display: inline-block;
	border: 0;
	border-radius: 10px;
	padding: 11px 22px;
	font-weight: 600;
	font-size: 15px;
	color: #fff;
	background: linear-gradient(90deg, #1CA4FF 0%, #6078EA 100%);
	transition: filter .15s ease;
	text-decoration: none;
}
.btn-pc:hover, .btn-pc:focus-visible { color: #fff; filter: brightness(1.06); }
.btn-pc:focus-visible { outline: 3px solid rgba(28, 164, 255, 0.4); outline-offset: 2px; }
.btn-pc-quiet {
	display: inline-block;
	border: 1px solid #dbe3ef;
	border-radius: 10px;
	padding: 10px 20px;
	font-weight: 500;
	font-size: 14px;
	color: #4a5a72;
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease;
}
.btn-pc-quiet:hover { border-color: #1CA4FF; color: #1c6fd6; }
.btn-pc-quiet.disabled {
	color: #b6c2d4;
	border-color: #eef2f8;
	pointer-events: none;
}
.btn-pc-danger {
	display: inline-block;
	border: 0;
	border-radius: 10px;
	padding: 11px 22px;
	font-weight: 600;
	font-size: 15px;
	color: #fff;
	background: #d64545;
	text-decoration: none;
}
.btn-pc-danger:hover { color: #fff; filter: brightness(1.06); }

/* ── Tables ────────────────────────────────────────────────────────── */
.pc-card .table { margin-bottom: 0; }
.pc-card .table th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8291a8;
	border-bottom: 1px solid #e6ecf5;
}
.pc-card .table td { vertical-align: middle; border-color: #eef2f8; }
.pc-card .table > tbody > tr:hover { background: #f8fbfe; }
.pc-amount-pos { color: #1d9e74; font-weight: 600; }
.pc-amount-neg { color: #d64545; font-weight: 600; }

/* Bootstrap 5.2's text-bg-* utilities — the site runs the 5.1 bundle,
   where these classes don't exist and such badges render white-on-white.
   Same colors Bootstrap ships; drop this block if the bundle is upgraded. */
.text-bg-primary   { color: #fff !important; background-color: #0d6efd !important; }
.text-bg-secondary { color: #fff !important; background-color: #6c757d !important; }
.text-bg-success   { color: #fff !important; background-color: #198754 !important; }
.text-bg-danger    { color: #fff !important; background-color: #dc3545 !important; }
.text-bg-warning   { color: #000 !important; background-color: #ffc107 !important; }
.text-bg-info      { color: #000 !important; background-color: #0dcaf0 !important; }
.text-bg-light     { color: #000 !important; background-color: #f8f9fa !important; }
.text-bg-dark      { color: #fff !important; background-color: #212529 !important; }

/* Review rows (wizard confirm steps): label column + value, one hairline
   per row, so the recap reads as a summary and not a half-empty form. */
.pc-review-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	padding: 13px 0;
	border-bottom: 1px solid #eef2f8;
}
.pc-review-row:last-child { border-bottom: 0; }
.pc-review-row .pc-label { flex: 0 0 150px; margin: 0; }
.pc-review-value {
	flex: 1;
	min-width: 200px;
	font-weight: 600;
	color: #33415c;
}
.pc-review-value p { margin: 0; font-weight: 600; }

/* Tab counters (services tabs & co): visible blue pill — text-bg-light
   was white-on-white on the tab bar. */
.pc-tab-count {
	background: #dceaf9;
	color: #1c6fd6;
	font-weight: 600;
}
.pc-stats-tabs .nav-link.active .pc-tab-count {
	background: #1CA4FF;
	color: #fff;
}

/* Transactions table: main line + muted secondary line per cell.
   IBM Plex Sans (loaded by account_base) instead of Poppins: a text/UI
   face — clearer at 13px, distinct numerals that align in columns. */
.pc-txn-table {
	font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	font-size: 13.5px;
	letter-spacing: 0.01em;
	color: #33415c;
}
.pc-txn-date { white-space: nowrap; }
.pc-txn-sub {
	display: block;
	font-size: 12px;
	color: #8291a8;
	margin-top: 2px;
}
.pc-txn-ref {
	font-family: "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 11px;
}
.pc-txn-amount {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

/* ── Alerts (flash) ────────────────────────────────────────────────── */
.account-area .alert { border-radius: 10px; }

/* In-app webview (?e= pages): base.html shows only the slim brand bar. */
.account-area.account-area-inapp { padding: 84px 0 30px; }

@media (max-width: 991px) {
	.account-area { padding: 90px 0 40px; }
	.account-area.account-area-inapp { padding: 74px 0 30px; }
	.pc-card { padding: 20px 18px; }
}

/* ── Card delivery (agent confirm page) ────────────────────────────── */
.pc-delivery-name {
	font-size: 24px;
	font-weight: 600;
	color: #222;
	margin: -2px 0 18px;
}
.pc-delivery-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
}
.pc-delivery-facts .pc-label { margin-bottom: 2px; }
@media (max-width: 575px) {
	.pc-delivery-facts { grid-template-columns: 1fr; gap: 12px; }
}
.account-area .pc-otp-input {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: 0.45em;
	text-align: center;
	padding: 12px 0 12px 0.45em; /* the trailing letter-spacing re-centres the digits */
	font-variant-numeric: tabular-nums;
}

/* ── PIN pad (setcardpin pages; main.js drives .digitinput-table) ──── */
.pc-pin-pad { max-width: 320px; }
.pc-pin-pad td { border: 0; padding: 5px; }
.pc-pin-display {
	text-align: center;
	font-size: 22px;
	letter-spacing: 0.4em;
	background: #f6f9fd;
}
.pc-pin-pad button.digit,
.pc-pin-pad .pc-pad-reset,
.pc-pin-pad .pc-pad-submit {
	width: 100%;
	padding: 14px 0;
	font-size: 18px;
	font-weight: 600;
	border-radius: 10px;
	border: 1px solid #dbe3ef;
	background: #fff;
	color: #222;
	transition: background .12s ease, border-color .12s ease;
}
.pc-pin-pad button.digit:hover, .pc-pin-pad button.digit:focus-visible {
	border-color: #1CA4FF;
	background: rgba(28, 164, 255, 0.07);
}
.pc-pin-pad .pc-pad-reset { font-size: 14px; color: #6b7a90; }
.pc-pin-pad .pc-pad-submit {
	border: 0;
	color: #fff;
	background: linear-gradient(90deg, #1CA4FF 0%, #6078EA 100%);
}
.pc-pin-pad .pc-pad-submit:hover { filter: brightness(1.06); }

/* ── Side navigation ───────────────────────────────────────────────── */
.pc-sidenav { padding: 10px; }
.pc-sidenav-heading {
	display: block;
	padding: 10px 14px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8291a8;
}
.pc-sidenav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 14.5px;
	color: #4a5a72;
	text-decoration: none;
	transition: background .12s ease, color .12s ease;
}
.pc-sidenav-item i { width: 18px; text-align: center; color: #8291a8; }
.pc-sidenav-item:hover { background: #f2f7fd; color: #1c6fd6; }
.pc-sidenav-item.active {
	background: linear-gradient(90deg, rgba(28,164,255,.12) 0%, rgba(96,120,234,.12) 100%);
	color: #1c6fd6;
	font-weight: 600;
}
.pc-sidenav-item.active i { color: #1c6fd6; }
.pc-sidenav-item .badge { margin-left: auto; }
.pc-sidenav-icons { margin-left: auto; color: #8291a8; }

/* ── Stats tabs ────────────────────────────────────────────────────── */
.pc-stats-tabs { border-bottom: 1px solid #dbe3ef; }
.pc-stats-tabs .nav-link { color: #4a5a72; border: 0; }
.pc-stats-tabs .nav-link.active {
	color: #1c6fd6;
	font-weight: 600;
	border-bottom: 2px solid #1CA4FF;
	background: transparent;
}

/* Print helpers (ported from base_old.css) — receipt pages use these. */
.print-only { display: none; }
@media print {
	.no-print { display: none; }
	.print-only { display: block; }
}

/* Canceled-transaction row styling (ported from base_old.css) */
.strike {
	text-decoration: line-through;
}

.faded {
	opacity: 0.2;
}

.faded:hover {
	opacity: 1;
}