/* ==========================================================================
   Account Management (Profile) — additive, page-scoped styles only.

   Nothing here redefines or overrides a selector from app.css; every
   class below is new and prefixed `.acct-` so it can never collide with
   or change the look of Dashboard, Home, Quick Links, Content Pages,
   Notifications, or the Doctor System. Colors, radii, shadows and type
   all reuse the existing design tokens from app.css (:root / [data-theme])
   so this page matches the current theme exactly instead of introducing
   a new visual language.
   ========================================================================== */

/* ---- Avatar header ---- */
.acct-hero {
	position: relative;
	padding: 20px 0;
	overflow: hidden;
	text-align: center;
}

.acct-avatar-wrap {
	position: relative;
	width: 92px;
	height: 92px;
	margin: 0 auto;
}

.acct-avatar-wrap .donor-avatar {
	width: 92px;
	height: 92px;
	border: 3px solid var(--surface-raised);
}

.acct-avatar-edit {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--surface-raised);
	background: var(--accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.acct-avatar-edit:active { transform: scale(.92); }

.acct-avatar-remove {
	position: absolute;
	left: -2px;
	bottom: -2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--surface-raised);
	background: var(--surface);
	color: var(--accent-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.acct-avatar-remove:active { transform: scale(.92); }

.acct-name { font-size: 18px; margin-top: 12px; }
.acct-role-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.acct-verified-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent-strong);
	font-size: 11.5px;
	font-weight: 800;
}

/* ---- Section headings inside cards ---- */
.acct-card-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	margin-bottom: 14px;
}
.acct-card-title .acct-ic {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex: 0 0 auto;
}
.acct-card-sub {
	font-size: 12.5px;
	color: var(--text-muted);
	margin: -8px 0 14px;
}

/* ---- Field grid (two columns on wider screens, stacks on mobile) ---- */
.acct-grid { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 480px) {
	.acct-grid-2 { grid-template-columns: 1fr 1fr; }
}
.acct-grid .field { min-width: 0; }

/* ---- Row-style field: label/value + an inline "Change" action ---- */
.acct-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}
.acct-row:last-child { border-bottom: none; padding-bottom: 0; }
.acct-row-label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.acct-row-value { font-size: 15px; font-weight: 600; margin-top: 3px; word-break: break-all; }
.acct-row-pending { display: block; margin-top: 3px; font-size: 12px; color: var(--accent-strong); font-weight: 700; }

.acct-btn-inline {
	flex: 0 0 auto;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-size: 13px;
	font-weight: 700;
}
.acct-btn-inline:active { transform: scale(.96); }
.acct-btn-inline.acct-btn-danger { color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }

/* ---- Toggle switch (used for Donation Availability) ---- */
.acct-switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.acct-switch-row + .acct-switch-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.acct-switch-copy .acct-row-label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.acct-switch-copy .acct-card-sub { margin: 2px 0 0; }

.acct-switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: 0 0 auto; }
.acct-switch input { opacity: 0; width: 0; height: 0; }
.acct-switch-track {
	position: absolute; inset: 0; border-radius: 999px;
	background: var(--surface); border: 1.5px solid var(--border);
	transition: background-color .15s ease, border-color .15s ease;
}
.acct-switch-track::before {
	content: ""; position: absolute; width: 19px; height: 19px; left: 3px; top: 2.5px;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .18s var(--ease-spring, ease);
}
.acct-switch input:checked + .acct-switch-track { background: var(--accent); border-color: var(--accent); }
.acct-switch input:checked + .acct-switch-track::before { transform: translateX(19px); }

/* ---- Password strength meter ---- */
.acct-strength { margin: -4px 0 14px; }
.acct-strength-track { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; display: flex; gap: 4px; }
.acct-strength-seg { flex: 1; height: 100%; border-radius: 999px; background: var(--border); transition: background-color .15s ease; }
.acct-strength-seg.on-0 { background: var(--accent-strong); }
.acct-strength-seg.on-1 { background: #E4592E; }
.acct-strength-seg.on-2 { background: #C29A55; }
.acct-strength-seg.on-3 { background: #1a7f37; }
.acct-strength-label { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); }

.acct-pw-field { position: relative; }
.acct-pw-field input { padding-right: 44px; }
.acct-pw-toggle {
	position: absolute; right: 6px; top: 30px; width: 32px; height: 32px;
	border: none; background: transparent; font-size: 15px; color: var(--text-muted);
	display: flex; align-items: center; justify-content: center;
}

/* ---- Save bar ---- */
.acct-savebar { display: flex; gap: 10px; margin-top: 4px; }
.acct-savebar .btn { width: auto; flex: 1; }
.acct-savebar .btn-primary { flex: 2; }

/* ---- Inline verification stepper (used for phone/email change) ---- */
.acct-verify-box {
	margin-top: 12px;
	padding: 14px;
	border-radius: 16px;
	background: var(--surface);
	border: 1.5px dashed var(--border);
}
.acct-verify-box p { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.acct-verify-actions { display: flex; gap: 8px; }
.acct-verify-actions .btn { width: auto; flex: 1; padding: 12px 16px; font-size: 14px; }
.acct-resend { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; color: var(--accent-strong); font-weight: 700; background: none; border: none; }
.acct-resend:disabled { color: var(--text-muted); }

/* ---- Success banner shown right after a save ---- */
.acct-success-banner {
	display: flex; align-items: center; gap: 8px;
	padding: 12px 14px; border-radius: 14px; margin-bottom: 14px;
	background: rgba(26, 127, 55, .12); color: #1a7f37; font-size: 13.5px; font-weight: 700;
}

.acct-field-error { color: var(--accent-strong); font-size: 12px; margin: -10px 0 12px; }

/* ==========================================================================
   🩸 Donation History (Trust Mode) — additive, prefixed `.acct-dhist-`
   and `.acct-lightbox-` so nothing here can collide with or redesign
   any other screen. Reuses the same design tokens (:root / [data-theme])
   as the rest of profile.css.
   ========================================================================== */

.acct-dhist-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.acct-dhist-count { font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.acct-dhist-count b { font-size: 16px; color: var(--accent-strong); }
.acct-dhist-add-btn { width: auto; padding: 10px 16px; font-size: 13.5px; white-space: nowrap; }

.acct-dhist-empty {
	padding: 22px 14px;
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
	background: var(--surface);
	border-radius: 16px;
	border: 1.5px dashed var(--border);
}

.acct-dhist-list { display: flex; flex-direction: column; gap: 10px; }

.acct-dhist-item {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-radius: 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	position: relative;
}

.acct-dhist-thumb-btn { border: none; background: none; padding: 0; flex-shrink: 0; cursor: pointer; }
.acct-dhist-thumb {
	width: 64px; height: 64px;
	border-radius: 12px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	border: 1px solid var(--border);
}
.acct-dhist-thumb-empty {
	display: flex; align-items: center; justify-content: center;
	color: var(--accent);
	font-size: 20px;
	background: var(--accent-soft);
}

.acct-dhist-body { flex: 1; min-width: 0; padding-right: 28px; }
.acct-dhist-top-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.acct-dhist-date { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.acct-dhist-place { font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.acct-dhist-place i { color: var(--accent); font-size: 12px; }
.acct-dhist-district { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.acct-dhist-district i { color: var(--accent); font-size: 11px; }
.acct-dhist-note {
	font-size: 12.5px; color: var(--text-muted); margin-top: 6px;
	white-space: pre-wrap; word-break: break-word;
}

/* Donation Verification: only ever shown once an admin has turned
   Trust Mode off — a Trust Mode donation is always 'verified' and
   renders no badge at all (see donationStatusBadgeHtml()). */
.acct-dhist-status {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}
.acct-dhist-status-pending { background: #FEF3C7; color: #b45309; }
.acct-dhist-status-rejected { background: #FBE3E9; color: var(--accent-strong); }

.acct-dhist-reject-reason {
	font-size: 12.5px;
	color: var(--accent-strong);
	margin-top: 6px;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
.acct-dhist-reject-reason i { margin-top: 2px; flex-shrink: 0; }

.acct-dhist-delete-btn {
	position: absolute; top: 10px; right: 10px;
	width: 26px; height: 26px; border-radius: 50%;
	border: none; background: transparent; color: var(--text-muted);
	display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.acct-dhist-delete-btn:active { transform: scale(.9); }

/* ---- Donation form: inline expansion inside the history card ---- */
.acct-dhist-inline-form-wrap {
	margin: 12px 0 14px;
	padding: 16px;
	border-radius: 18px;
	background: var(--surface-raised);
	border: 1px solid var(--border);
	box-shadow: 0 8px 22px rgba(36,22,20,.06);
	animation: acctDhistInlineOpen .18s ease-out;
}
@keyframes acctDhistInlineOpen {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}
.acct-dhist-inline-form-wrap .acct-dhist-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
}
.acct-dhist-inline-form-wrap .acct-dhist-modal-header h2 {
	font-size: 16px;
	margin: 0;
}
.acct-dhist-inline-form-wrap .acct-dhist-modal-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}
.acct-dhist-inline-form-wrap .acct-dhist-form textarea {
	width: 100%;
	font: inherit;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	color: var(--text);
	resize: vertical;
	box-sizing: border-box;
}
.acct-dhist-photo-preview { margin-top: 10px; }
.acct-dhist-photo-preview img {
	max-width: 100%;
	max-height: 200px;
	border-radius: 14px;
	border: 1px solid var(--border);
	display: block;
}
@media(max-width:520px){
	.acct-dhist-inline-form-wrap{
		margin-left:-2px;
		margin-right:-2px;
		padding:14px;
		border-radius:16px;
	}
}

/* ---- Lightbox (full donation photo) ---- */
.acct-lightbox-backdrop { align-items: center; padding: 24px; cursor: zoom-out; }
.acct-lightbox-img {
	max-width: 100%;
	max-height: 85vh;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.acct-lightbox-close {
	position: absolute;
	top: 18px; right: 18px;
	width: 38px; height: 38px; border-radius: 50%;
	border: none; background: rgba(255, 255, 255, .16); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 16px;
}

body.acct-modal-open { overflow: hidden; }

/* My Emergency Blood Requests — additive Profile-only card. */
.acct-er-list{display:flex;flex-direction:column;gap:10px}.acct-er-empty{padding:12px;border:1px dashed var(--border);border-radius:12px;color:var(--text-muted);font-size:13px}.acct-er-item{padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface,rgba(255,255,255,.55))}.acct-er-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.acct-er-blood{width:auto!important;height:auto!important;padding:4px 10px!important}.acct-er-status{font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--surface-2,#f3f4f6)}.acct-er-status-approved{color:#b42318;background:#fff0ee}.acct-er-status-completed{color:#18794e;background:#e9f8ef}.acct-er-status-pending{color:#8a6116;background:#fff7df}.acct-er-status-rejected{color:#7a271a;background:#ffebe9}.acct-er-id{margin-top:7px;font-size:11px;color:var(--text-muted);font-weight:700}.acct-er-place{margin-top:6px;font-size:13px;font-weight:700}.acct-er-meta{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:11px;color:var(--text-muted)}.acct-er-complete{margin-top:10px;width:100%;min-height:38px;font-size:12px}

/* ======================================================================
   Premium profile-photo refresh — clean circular white ring + soft
   blood-red halo. Keeps the existing upload/remove logic untouched and
   automatically follows Light/Dark mode through existing theme tokens.
   ====================================================================== */
.acct-hero .acct-avatar-wrap {
	width: 112px;
	height: 112px;
	margin-bottom: 4px;
}
.acct-hero .acct-avatar-wrap .life-ring {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	padding: 5px;
	background: var(--surface-raised);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
		0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent),
		0 0 28px color-mix(in srgb, var(--accent) 13%, transparent);
}
.acct-hero .acct-avatar-wrap .life-ring::before {
	display: none;
}
.acct-hero .acct-avatar-wrap .donor-avatar {
	width: 102px;
	height: 102px;
	border-radius: 50%;
	border: 0;
	object-fit: cover;
}
.acct-hero .acct-avatar-edit {
	right: -1px;
	bottom: 2px;
	width: 38px;
	height: 38px;
	font-size: 15px;
	border: 4px solid var(--surface-raised);
	background: var(--accent);
	box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 28%, transparent);
	z-index: 3;
}
.acct-hero .acct-avatar-remove {
	left: 2px;
	bottom: 5px;
	width: 26px;
	height: 26px;
	font-size: 10px;
	border: 2px solid var(--surface-raised);
	box-shadow: 0 3px 10px color-mix(in srgb, #000 12%, transparent);
	z-index: 3;
}

/* Profile avatar geometry fix: keep the premium ring perfectly circular even
   when Profile Manager injects an inline avatar size. */
.acct-hero .acct-avatar-wrap {
	width: 112px !important;
	height: 112px !important;
	margin: 0 auto 4px !important;
}
.acct-hero .acct-avatar-wrap .life-ring {
	box-sizing: border-box;
	width: 112px !important;
	height: 112px !important;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}
.acct-hero .acct-avatar-wrap .donor-avatar {
	box-sizing: border-box;
	width: 102px !important;
	height: 102px !important;
	min-width: 102px;
	min-height: 102px;
	display: block;
	margin: 0;
	border-radius: 50% !important;
	object-fit: cover;
}
.acct-hero .acct-avatar-edit {
	right: -2px;
	bottom: 0;
}
.acct-hero .acct-avatar-remove {
	left: 0;
	bottom: 3px;
}


/* ==========================================================================\n   Profile Native Android UI — v1.18.5\n   Visual-only enhancement. Existing IDs, forms, REST bindings and actions\n   remain untouched so all profile data continues to load/save automatically.\n   ========================================================================== */
.bbb-profile-native{padding:8px 10px 34px;max-width:760px;margin:0 auto}
.bbb-profile-native>.card{border:1px solid rgba(166,24,53,.08);border-radius:20px;background:var(--surface-raised);box-shadow:0 8px 24px rgba(95,35,48,.08);margin-bottom:14px;padding:17px}
.bbb-profile-native .acct-hero{padding:24px 18px 20px!important;background:linear-gradient(135deg,#ef3659 0%,#c90036 62%,#a9002b 100%)!important;color:#fff;border:0;box-shadow:0 14px 30px rgba(184,0,43,.22)}
.bbb-profile-native .acct-hero:before{content:"";position:absolute;width:190px;height:190px;border:34px solid rgba(255,255,255,.07);border-radius:50%;right:-75px;top:-85px}
.bbb-profile-native .acct-hero .acct-name{color:#fff!important;font-size:22px!important;font-weight:900;margin-top:13px}
.bbb-profile-native .acct-hero .blood-chip{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid rgba(255,255,255,.55)!important;box-shadow:none!important}
.bbb-profile-native .acct-verified-pill{background:#fff!important;color:#c60035!important;box-shadow:none}
.bbb-profile-native .acct-hero .acct-avatar-wrap .donor-avatar{border:4px solid #fff!important;box-shadow:0 8px 22px rgba(75,0,18,.22)}
.bbb-profile-native .acct-avatar-edit{background:#fff!important;color:#d10a3b!important;border-color:#f5d7df!important}
.bbb-profile-native .acct-avatar-remove{background:#fff!important;color:#b91c3c!important;border-color:#f5d7df!important}
.bbb-profile-native .acct-section-title,.bbb-profile-native .card-title{font-weight:900}
.bbb-profile-native .card h2,.bbb-profile-native .card h3{letter-spacing:-.2px}
.bbb-profile-native .field{margin-bottom:12px}
.bbb-profile-native .field label{font-size:12px;font-weight:800;color:var(--text-muted);margin-bottom:6px}
.bbb-profile-native .field input,.bbb-profile-native .field select{min-height:48px;border-radius:14px!important;background:var(--surface)!important;border:1px solid var(--line)!important;padding:0 14px!important}
.bbb-profile-native .acct-savebar{display:grid;grid-template-columns:.72fr 1.55fr;gap:10px;margin-top:8px}
.bbb-profile-native .acct-savebar .btn,.bbb-profile-native #acct-password-form>.btn{min-height:48px;border-radius:14px;font-weight:900}
.bbb-profile-native .btn-primary{background:linear-gradient(135deg,#ff365e,#bd0034)!important;border:0!important;box-shadow:0 8px 18px rgba(198,0,53,.18)}
.bbb-profile-native .acct-switch-row{min-height:58px;padding:10px 2px;border-bottom:1px solid var(--line)}
.bbb-profile-native .acct-switch-row:last-child{border-bottom:0}
.bbb-profile-native .acct-row-label{font-weight:850}
.bbb-profile-native .acct-dhist-summary{padding:12px;border-radius:15px;background:var(--accent-soft);gap:10px}
.bbb-profile-native .acct-dhist-add-btn{width:100%;margin-top:10px;border-radius:13px!important}
.bbb-profile-native .acct-dhist-item,.bbb-profile-native .acct-er-item{border-radius:15px!important;background:var(--surface)!important;border:1px solid var(--line)!important;padding:12px!important}
.bbb-profile-native .acct-row{padding:14px 2px;border-bottom:1px solid var(--line)}
.bbb-profile-native .acct-btn-inline{border-radius:999px!important;padding:8px 13px!important;background:var(--accent-soft)!important;color:var(--accent-strong)!important;font-weight:900!important}
.bbb-profile-native #acct-password-form{padding-top:8px}
.bbb-profile-native #logout-btn.bbb-profile-logout-btn{width:100%;min-height:0;padding:16px 20px!important;margin-top:14px;border:0!important;border-radius:999px!important;background:var(--bbb-garnet)!important;color:#fff!important;font-size:16px!important;font-weight:800!important;line-height:1.2;box-shadow:0 16px 32px -12px rgba(209,38,78,.55)!important;transition:transform .15s var(--ease-spring),box-shadow .15s ease,opacity .15s ease;box-sizing:border-box}.bbb-profile-native #logout-btn.bbb-profile-logout-btn:hover{transform:translateY(-1px)}.bbb-profile-native #logout-btn.bbb-profile-logout-btn:active{transform:scale(.98)}.bbb-profile-native #logout-btn.bbb-profile-logout-btn:disabled{opacity:.7}
.bbb-profile-native .acct-success-banner{border-radius:13px}
@media(max-width:520px){
 .bbb-profile-native{padding-left:8px;padding-right:8px}
 .bbb-profile-native>.card{padding:15px;border-radius:18px}
 .bbb-profile-native .acct-grid-2{grid-template-columns:1fr!important}
 .bbb-profile-native .acct-hero{padding-top:22px!important}
}


/* ==========================================================================
   Donation History — inline validation / 10 MB photo UX
   Errors stay attached to the field that needs attention, matching the
   Profile donation-form reference UX. The first invalid field is focused
   and scrolled into view automatically.
   ========================================================================== */
/* Donation form success — stays inside the form, directly below its title. */
.bbb-dhist-success-banner{
	display:flex;
	align-items:flex-start;
	gap:9px;
	margin:0 0 14px;
	padding:12px 14px;
	border:1.5px solid #2d8a55;
	border-radius:14px;
	background:#ecf8f0;
	color:#237344;
	font-size:13.5px;
	font-weight:800;
	line-height:1.45;
	box-shadow:0 3px 10px rgba(45,138,85,.08);
}
.bbb-dhist-success-banner i{
	flex:0 0 auto;
	margin-top:2px;
	font-size:15px;
}
.bbb-dhist-success-banner span{
	min-width:0;
}

.acct-dhist-form .field.bbb-dhist-field-error > input,
.acct-dhist-form .field.bbb-dhist-field-error > select,
.acct-dhist-form .field.bbb-dhist-field-error > textarea {
	border-color: #d1264e !important;
	box-shadow: 0 0 0 2px rgba(209, 38, 78, .10);
}

.acct-dhist-form .bbb-dhist-field-error input[type="file"] {
	border-color: #d1264e !important;
}

.acct-dhist-form .bbb-dhist-inline-error {
	display: block;
	margin-top: 6px;
	padding: 0;
	color: #d1264e;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.45;
}

.acct-dhist-form .bbb-dhist-field-error label {
	color: #d1264e;
}

.acct-dhist-form .bbb-dhist-field-error > input:focus,
.acct-dhist-form .bbb-dhist-field-error > select:focus,
.acct-dhist-form .bbb-dhist-field-error > textarea:focus {
	outline: 2px solid rgba(209,38,78,.16);
	outline-offset: 1px;
}

.acct-dhist-form .bbb-dhist-inline-error::before {
	content: "⚠ ";
	font-weight: 800;
}

.acct-dhist-form .bbb-dhist-field-error .acct-dhist-photo-preview {
	border-color: #d1264e;
}


/* =====================================================================
   Profile Quick Actions — Donation + Blood Posts
   ===================================================================== */
.bbb-profile-quick-actions{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:10px;
	margin:0 0 14px;
}
.bbb-profile-quick-card{
	min-width:0;
	min-height:82px;
	padding:12px 11px;
	border-radius:18px;
	border:1px solid var(--border);
	background:var(--surface);
	color:var(--text);
	text-decoration:none;
	display:flex;
	align-items:center;
	gap:9px;
	text-align:left;
	box-shadow:0 4px 14px rgba(36,22,20,.055);
	transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bbb-profile-quick-card:active{
	transform:scale(.98);
}
.bbb-profile-quick-donation{
	background:#a31621;
	border-color:#a31621;
	color:#fff;
}
.bbb-profile-quick-post{
	background:#a31621;
	border-color:#a31621;
	color:#fff;
}
.bbb-profile-quick-icon{
	width:42px;
	height:42px;
	flex:0 0 42px;
	border-radius:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:19px;
}
.bbb-profile-quick-donation .bbb-profile-quick-icon{
	background:#fff;
	color:#a31621;
}
.bbb-profile-quick-post .bbb-profile-quick-icon{
	background:#fff;
	color:#a31621;
}
.bbb-profile-quick-copy{
	min-width:0;
	flex:1;
}
.bbb-profile-quick-copy strong{
	display:block;
	font-size:14px;
	font-weight:800;
	line-height:1.35;
	color:#fff;
}
.bbb-profile-quick-copy small{
	display:block;
	margin-top:2px;
	font-size:10.5px;
	line-height:1.35;
	color:rgba(255,255,255,.82);
}
.bbb-profile-quick-arrow{
	font-size:16px;
	color:#fff;
	flex:0 0 auto;
}
.bbb-profile-quick-donation .bbb-profile-quick-arrow{
	color:#fff;
}
@media(max-width:390px){
	.bbb-profile-quick-actions{gap:8px}
	.bbb-profile-quick-card{padding:10px 8px;gap:7px;border-radius:16px}
	.bbb-profile-quick-icon{width:38px;height:38px;flex-basis:38px;border-radius:12px;font-size:17px}
	.bbb-profile-quick-copy strong{font-size:13px}
	.bbb-profile-quick-copy small{font-size:9.5px}
}


/* Profile Quick Action — My Donation overlay */
.bbb-profile-donation-overlay {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 18px;
	box-sizing: border-box;
}
.bbb-profile-donation-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(36,22,20,.42);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.bbb-profile-donation-dialog {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	max-height: min(88vh, 820px);
	overflow: auto;
	background: var(--surface, #fff);
	border: 1px solid var(--border, #ead9cf);
	border-radius: 24px 24px 16px 16px;
	box-shadow: 0 18px 50px rgba(36,22,20,.22);
	padding: 14px;
	box-sizing: border-box;
	animation: bbbProfileDonationOpen .18s ease-out;
}
@keyframes bbbProfileDonationOpen {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}
.bbb-profile-donation-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 4px 12px;
}
.bbb-profile-donation-dialog-head h2 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--text, #241614);
}
.bbb-profile-donation-close {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border: 1px solid var(--border, #ead9cf);
	border-radius: 50%;
	background: var(--surface-raised, #fff7f2);
	color: var(--accent-strong, #7a0f19);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.bbb-profile-donation-content > .card {
	margin-bottom: 0;
}
@media(max-width:520px){
	.bbb-profile-donation-overlay { padding: 0; }
	.bbb-profile-donation-dialog {
		width: 100%;
		max-height: 92vh;
		border-radius: 22px 22px 0 0;
		padding: 12px;
	}
	.bbb-profile-donation-dialog-head h2 { font-size: 18px; }
}


/* -------------------------------------------------------------------------
   Privacy + Account Deletion — v1.21.1
   Entirely page-scoped. No existing profile/security styles are overridden.
   ------------------------------------------------------------------------- */
.acct-privacy-delete-card {
	margin-top: 14px;
}
.acct-privacy-copy {
	margin: -4px 0 14px;
	color: var(--text-muted, #6b5a56);
	font-size: 13px;
	line-height: 1.65;
}
.acct-privacy-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}
.acct-privacy-link {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--border, #ead9cf);
	border-radius: 12px;
	background: var(--surface-raised, #fff7f2);
	color: var(--text, #241614);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	box-sizing: border-box;
}
.acct-privacy-link i {
	color: var(--accent, #a31621);
	flex: 0 0 auto;
}
.acct-delete-danger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px;
	border: 1px solid rgba(179,38,30,.24);
	border-radius: 14px;
	background: rgba(179,38,30,.055);
}
.acct-delete-danger-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.acct-delete-danger-copy strong {
	color: var(--text, #241614);
	font-size: 14px;
}
.acct-delete-danger-copy span {
	color: var(--text-muted, #6b5a56);
	font-size: 12px;
	line-height: 1.55;
}
.acct-btn-danger {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 10px 14px;
	border: 1px solid rgba(179,38,30,.45);
	border-radius: 12px;
	background: #fff;
	color: #b3261e;
	font-weight: 800;
	cursor: pointer;
}
.acct-btn-danger:disabled {
	opacity: .55;
	cursor: wait;
}
@media (max-width: 560px) {
	.acct-privacy-links {
		grid-template-columns: 1fr;
	}
	.acct-delete-danger {
		flex-direction: column;
		align-items: stretch;
	}
	.acct-btn-danger {
		width: 100%;
	}
}


/* -------------------------------------------------------------------------
   Account deletion confirmation modal — v1.21.2
   Native prompt/confirm dialogs are avoided so Android WebView gets a
   consistent in-app confirmation and success state.
   ------------------------------------------------------------------------- */
.acct-delete-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(20, 14, 18, .62);
	box-sizing: border-box;
}
.acct-delete-modal {
	width: min(100%, 520px);
	max-height: min(90vh, 680px);
	overflow: auto;
	padding: 22px;
	border: 1px solid var(--border, #ead9cf);
	border-radius: 20px;
	background: var(--surface, #fff);
	box-shadow: 0 24px 70px rgba(0,0,0,.24);
	box-sizing: border-box;
}
.acct-delete-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--text, #241614);
	font-size: 19px;
	line-height: 1.35;
}
.acct-delete-modal-close {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	border: 1px solid var(--border, #ead9cf);
	border-radius: 50%;
	background: var(--surface-raised, #fff7f2);
	color: var(--text, #241614);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.acct-delete-modal-copy {
	margin: 14px 0;
	color: var(--text-muted, #6b5a56);
	font-size: 14px;
	line-height: 1.7;
}
.acct-delete-confirm-label {
	display: block;
	margin-top: 14px;
	color: var(--text, #241614);
	font-size: 13px;
	font-weight: 800;
}
.acct-delete-confirm-label span {
	display: block;
	margin-bottom: 7px;
}
.acct-delete-confirm-label input {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	border: 1px solid var(--border, #ead9cf);
	border-radius: 12px;
	background: var(--surface-raised, #fff7f2);
	color: var(--text, #241614);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .08em;
	box-sizing: border-box;
	outline: none;
}
.acct-delete-confirm-label input:focus {
	border-color: var(--accent, #a31621);
	box-shadow: 0 0 0 3px rgba(163,22,33,.10);
}
.acct-delete-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}
.acct-delete-modal-actions button {
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 12px;
	font-weight: 800;
	cursor: pointer;
}
.acct-delete-modal-cancel {
	border: 1px solid var(--border, #ead9cf);
	background: var(--surface-raised, #fff7f2);
	color: var(--text, #241614);
}
.acct-delete-modal-submit {
	border: 1px solid #b3261e;
	background: #b3261e;
	color: #fff;
}
.acct-delete-modal-submit:disabled {
	opacity: .55;
	cursor: wait;
}
@media (max-width: 560px) {
	.acct-delete-modal-overlay {
		align-items: flex-end;
		padding: 0;
	}
	.acct-delete-modal {
		width: 100%;
		max-height: 88vh;
		border-radius: 22px 22px 0 0;
		padding: 18px;
	}
	.acct-delete-modal-actions {
		flex-direction: column-reverse;
	}
	.acct-delete-modal-actions button {
		width: 100%;
	}
}