/**
 * VorsorgePlus Dashboard — Member-area styles.
 *
 * Design language matches the iOS app: glassmorphic surfaces, animated
 * gradient accents, Playfair Display headings, DM Sans body. Brand
 * gradient is #2563EB → #0EA5E9.
 *
 * Class prefix: vpd-
 * (Theme-side classes use vpt- so the two never collide.)
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */

:root {
	--vpd-blue-700: #1d4ed8;
	--vpd-blue-600: #2563eb;
	--vpd-blue-500: #3b82f6;
	--vpd-cyan-500: #0ea5e9;
	--vpd-cyan-400: #38bdf8;
	--vpd-grad-primary: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
	--vpd-grad-soft:    linear-gradient(135deg, rgba(37,99,235,0.10) 0%, rgba(14,165,233,0.10) 100%);

	--vpd-ink-900: #0f172a;
	--vpd-ink-700: #334155;
	--vpd-ink-500: #64748b;
	--vpd-ink-300: #cbd5e1;
	--vpd-ink-100: #f1f5f9;
	--vpd-ink-50:  #f8fafc;
	--vpd-bg:      #f4f7fb;

	--vpd-surface:        rgba(255,255,255,0.72);
	--vpd-surface-strong: rgba(255,255,255,0.92);
	--vpd-border:         rgba(148,163,184,0.25);

	--vpd-shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
	--vpd-shadow-md: 0 8px 24px -8px rgba(15,23,42,0.12);
	--vpd-shadow-lg: 0 24px 48px -16px rgba(37,99,235,0.20);

	--vpd-radius-sm: 10px;
	--vpd-radius-md: 16px;
	--vpd-radius-lg: 24px;

	--vpd-success: #10b981;
	--vpd-warning: #f59e0b;
	--vpd-danger:  #ef4444;

	--vpd-font-display: 'Playfair Display', 'Georgia', serif;
	--vpd-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
}

/* -------------------------------------------------------------------------- */
/* Containers                                                                 */
/*                                                                            */
/* Default screen container: max-width box with subtle radial gradient        */
/* background. This applies to dashboard / documents / vault / partners /     */
/* profile / emergency screens. Auth screens (login, register) opt out — see  */
/* the .vpd-auth ruleset below for their full-bleed split-screen layout.      */
/* -------------------------------------------------------------------------- */

[data-vpd-screen]:not(.vpd-auth) {
	font-family: var(--vpd-font-body);
	color: var(--vpd-ink-900);
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 20px 80px;
	background: var(--vpd-bg);
	min-height: 60vh;
	position: relative;
}

[data-vpd-screen]:not(.vpd-auth)::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(1200px 600px at 80% -10%, rgba(14,165,233,0.10), transparent 60%),
	            radial-gradient(900px 500px at -10% 30%, rgba(37,99,235,0.10), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

[data-vpd-screen]:not(.vpd-auth) > * { position: relative; z-index: 1; }

.vpd-hidden { display: none !important; }

/* -------------------------------------------------------------------------- */
/* Auth screens — login & register                                            */
/*                                                                            */
/* Layout: split-screen on desktop. Left half is a richly gradient-painted    */
/* marketing panel (orbs, brand copy, trust signals, on a deep blue base).    */
/* Right half is a clean white form panel. Together they give the page two    */
/* clearly differentiated zones that meet at a soft seam in the middle.       */
/* On mobile the columns stack, brand panel becomes a compact header.         */
/* -------------------------------------------------------------------------- */

.vpd-auth {
	position: relative;
	overflow: hidden;
	min-height: 88vh;
	margin: 0;
	background: white;
	font-family: var(--vpd-font-body);
	color: var(--vpd-ink-900);
}

/* Two-column split — full-width, no inner max-width container. */
.vpd-auth__split {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: inherit;
}

/* ----- LEFT: marketing panel with rich gradient + orbs ----- */
.vpd-auth__brand {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 80px 64px;
	background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 35%, #0ea5e9 75%, #6366f1 100%);
	color: white;
}

/* Animated gradient orbs — sit inside the brand panel only. */
.vpd-auth__orbs {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.vpd-auth__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .65;
	animation: vpd-auth-float 22s ease-in-out infinite;
}

.vpd-auth__orb--a {
	width: 520px; height: 520px;
	background: radial-gradient(circle, rgba(125, 211, 252, .8), transparent 60%);
	top: -180px; left: -160px;
}

.vpd-auth__orb--b {
	width: 460px; height: 460px;
	background: radial-gradient(circle, rgba(165, 180, 252, .75), transparent 60%);
	bottom: -160px; right: -120px;
	animation-delay: -8s;
}

.vpd-auth__orb--c {
	width: 360px; height: 360px;
	background: radial-gradient(circle, rgba(56, 189, 248, .6), transparent 60%);
	top: 45%; left: 30%;
	animation-delay: -15s;
}

@keyframes vpd-auth-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(40px, -30px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.vpd-auth__orb { animation: none; }
}

.vpd-auth__brand-inner {
	position: relative;
	z-index: 1;
	max-width: 480px;
}

.vpd-auth__eyebrow {
	display: inline-block;
	font-family: var(--vpd-font-body);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, .85);
	margin: 0 0 24px;
	padding: 6px 12px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.vpd-auth__brand-title {
	font-family: var(--vpd-font-display);
	font-weight: 700;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.05;
	letter-spacing: -.015em;
	color: white;
	margin: 0 0 20px;
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
}

.vpd-auth__brand-lead {
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
	margin: 0 0 40px;
	max-width: 440px;
}

.vpd-auth__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.vpd-auth__features li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.vpd-auth__feature-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: white;
	border: 1px solid rgba(255, 255, 255, .2);
}

.vpd-auth__feature-icon svg { width: 20px; height: 20px; }

.vpd-auth__features strong {
	display: block;
	font-weight: 600;
	color: white;
	font-size: 15px;
	margin-bottom: 3px;
}

.vpd-auth__features span {
	display: block;
	color: rgba(255, 255, 255, .75);
	font-size: 14px;
	line-height: 1.5;
}

/* ----- RIGHT: clean form panel ----- */
.vpd-auth__panel {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 80px 64px;
	background: white;
}

.vpd-auth__panel-inner {
	width: 100%;
	max-width: 440px;
}

.vpd-auth__heading { margin-bottom: 32px; }

.vpd-auth__title {
	font-family: var(--vpd-font-display);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.15;
	color: var(--vpd-ink-900);
	margin: 0 0 8px;
}

.vpd-auth__subtitle {
	color: var(--vpd-ink-500);
	font-size: 15px;
	margin: 0;
}

.vpd-auth__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.vpd-auth__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.vpd-auth__status {
	margin-top: 8px;
	min-height: 20px;
	font-size: 14px;
	text-align: left;
}

.vpd-auth__status[data-state="error"]   { color: var(--vpd-danger); }
.vpd-auth__status[data-state="success"] { color: var(--vpd-success); }

.vpd-auth__switch {
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--vpd-border);
	font-size: 14px;
	color: var(--vpd-ink-500);
	text-align: left;
}

.vpd-auth__switch a {
	color: var(--vpd-blue-700);
	font-weight: 600;
	margin-left: 6px;
	text-decoration: none;
}

.vpd-auth__switch a:hover { text-decoration: underline; }

/* Field hint below an input. */
.vpd-field__hint {
	color: var(--vpd-ink-500);
	font-size: 12px;
	line-height: 1.5;
	margin-top: 4px;
}

/* Larger primary button for auth CTAs. */
.vpd-button--lg {
	padding: 14px 22px;
	font-size: 16px;
	border-radius: 12px;
	margin-top: 8px;
}

/* ----- Mobile: stack columns, brand panel becomes compact gradient header ----- */
@media (max-width: 900px) {
	.vpd-auth { min-height: auto; }

	.vpd-auth__split {
		grid-template-columns: 1fr;
	}

	.vpd-auth__brand {
		justify-content: center;
		padding: 56px 24px 48px;
		text-align: left;
	}

	.vpd-auth__brand-inner { max-width: 540px; width: 100%; }

	.vpd-auth__brand-title { font-size: clamp(28px, 7vw, 38px); }

	.vpd-auth__brand-lead {
		font-size: 16px;
		margin-bottom: 28px;
	}

	/* Hide trust signals on mobile to keep form above the fold. */
	.vpd-auth__features { display: none; }

	.vpd-auth__panel {
		justify-content: center;
		padding: 48px 24px 64px;
	}

	.vpd-auth__panel-inner { max-width: 540px; }

	.vpd-auth__row { grid-template-columns: 1fr; }
}



/* =====================================================================
   Member-area navigation
   ===================================================================== */

.vpd-app {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.vpd-app__content {
	flex: 1 0 auto;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 24px;
}

.vpd-membernav {
	background: white;
	border-bottom: 1px solid var(--vpd-border);
	box-shadow: var(--vpd-shadow-sm);
	position: sticky;
	top: 0;
	z-index: 50;
}

.vpd-membernav__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 64px;
}

.vpd-membernav__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--vpd-ink-900);
	text-decoration: none;
	font-weight: 700;
	flex-shrink: 0;
}

.vpd-membernav__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 50%, #6366f1 100%);
	color: white;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
}

.vpd-membernav__brand-name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 18px;
}

.vpd-membernav__list {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	justify-content: center;
}

.vpd-membernav__item { display: inline-flex; }

.vpd-membernav__link,
.vpd-membernav__logout {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 10px;
	color: var(--vpd-ink-700);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s ease, color .15s ease;
}

.vpd-membernav__link:hover,
.vpd-membernav__logout:hover {
	background: var(--vpd-ink-100);
	color: var(--vpd-ink-900);
}

.vpd-membernav__link.is-active {
	background: rgba(37, 99, 235, .1);
	color: var(--vpd-blue-700);
	font-weight: 600;
}

.vpd-membernav__logout {
	margin-left: auto;
	color: var(--vpd-ink-500);
	flex-shrink: 0;
}

.vpd-membernav__logout:hover {
	color: #dc2626;
	background: rgba(220, 38, 38, .08);
}

.vpd-membernav__icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.vpd-membernav__icon svg {
	width: 100%;
	height: 100%;
}

/* Mobile: collapse the top bar to brand + logout, then show bottom tab bar */
@media (max-width: 720px) {
	.vpd-membernav__inner {
		height: 56px;
		gap: 12px;
		padding: 0 16px;
	}

	.vpd-membernav__list {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		justify-content: space-around;
		padding: 8px 4px env(safe-area-inset-bottom, 8px);
		background: white;
		border-top: 1px solid var(--vpd-border);
		box-shadow: 0 -4px 16px -4px rgba(15, 23, 42, .08);
		z-index: 60;
	}

	.vpd-membernav__link {
		flex-direction: column;
		gap: 2px;
		padding: 6px 8px;
		font-size: 11px;
		font-weight: 600;
		min-width: 56px;
		text-align: center;
	}

	.vpd-membernav__icon {
		width: 22px;
		height: 22px;
	}

	.vpd-app__content {
		padding: 24px 16px 96px; /* 96px bottom = space for fixed bottom nav */
	}

	.vpd-membernav__brand-name {
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------- */
/* Form primitives                                                            */
/* -------------------------------------------------------------------------- */

.vpd-field { display: flex; flex-direction: column; gap: 6px; }

.vpd-field__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vpd-ink-500);
}

.vpd-field input,
.vpd-field select,
.vpd-field textarea,
.vpd-vault-form textarea,
.vpd-vault-form input {
	font-family: inherit;
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid var(--vpd-border);
	border-radius: 10px;
	background: white;
	color: var(--vpd-ink-900);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vpd-field input:focus,
.vpd-field select:focus,
.vpd-field textarea:focus,
.vpd-vault-form textarea:focus {
	outline: none;
	border-color: var(--vpd-blue-500);
	box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.vpd-field input:disabled { background: var(--vpd-ink-100); color: var(--vpd-ink-500); }

.vpd-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	color: var(--vpd-ink-700);
	cursor: pointer;
}

.vpd-checkbox input { margin-top: 3px; }

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

.vpd-button {
	font-family: inherit;
	font-weight: 600;
	font-size: 14px;
	padding: 11px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	line-height: 1.2;
}

.vpd-button:active { transform: translateY(1px); }
.vpd-button:disabled { opacity: .55; cursor: not-allowed; }

.vpd-button--primary {
	background: var(--vpd-grad-primary);
	color: white;
	box-shadow: 0 6px 16px -6px rgba(37,99,235,0.55);
}

.vpd-button--primary:hover:not(:disabled) { box-shadow: 0 12px 24px -8px rgba(37,99,235,0.65); }

.vpd-button--ghost {
	background: white;
	color: var(--vpd-blue-700);
	border-color: var(--vpd-border);
}

.vpd-button--ghost:hover:not(:disabled) { background: var(--vpd-blue-700); color: white; border-color: var(--vpd-blue-700); }

.vpd-button--danger-ghost { background: white; color: var(--vpd-danger); border-color: rgba(239,68,68,0.25); }
.vpd-button--danger-ghost:hover:not(:disabled) { background: var(--vpd-danger); color: white; border-color: var(--vpd-danger); }

.vpd-icon-button { background: transparent; border: none; font-size: 24px; line-height: 1; padding: 4px 10px; cursor: pointer; color: var(--vpd-ink-500); }
.vpd-icon-button:hover { color: var(--vpd-ink-900); }

/* -------------------------------------------------------------------------- */
/* Layout primitives                                                          */
/* -------------------------------------------------------------------------- */

.vpd-eyebrow { color: var(--vpd-blue-600); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 4px; }

.vpd-page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.vpd-page-head__title { font-family: var(--vpd-font-display); font-weight: 700; font-size: 38px; margin: 0; color: var(--vpd-ink-900); }
.vpd-page-head__lede  { color: var(--vpd-ink-500); margin: 8px 0 0; max-width: 60ch; }

.vpd-section { margin-top: 36px; }
.vpd-section__title { font-family: var(--vpd-font-display); font-size: 22px; margin: 0 0 16px; }

.vpd-grid { display: grid; gap: 18px; }
.vpd-grid--2 { grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ); }

.vpd-help { color: var(--vpd-ink-500); font-size: 13px; }

.vpd-fieldset {
	border: 1px solid var(--vpd-border);
	border-radius: var(--vpd-radius-md);
	padding: 22px 22px 24px;
	margin: 0 0 22px;
	background: var(--vpd-surface-strong);
}

.vpd-fieldset__legend { font-family: var(--vpd-font-display); font-weight: 600; padding: 0 10px; color: var(--vpd-blue-700); }

/* -------------------------------------------------------------------------- */
/* Dashboard hero + cards                                                     */
/* -------------------------------------------------------------------------- */

.vpd-dashboard__hero {
	background: var(--vpd-grad-primary);
	color: white;
	border-radius: var(--vpd-radius-lg);
	padding: 36px 32px 28px;
	box-shadow: var(--vpd-shadow-lg);
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}

.vpd-dashboard__hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(600px 400px at 90% 0%, rgba(255,255,255,0.20), transparent 60%);
	pointer-events: none;
}

.vpd-dashboard__hero .vpd-eyebrow { color: rgba(255,255,255,0.75); }

.vpd-dashboard__greeting { font-family: var(--vpd-font-display); font-size: 40px; font-weight: 600; margin: 4px 0 6px; }
.vpd-dashboard__lede     { color: rgba(255,255,255,0.85); margin: 0 0 24px; max-width: 50ch; }

.vpd-stats { display: grid; grid-template-columns: repeat( auto-fit, minmax(140px, 1fr) ); gap: 12px; position: relative; }

.vpd-stat {
	background: rgba(255,255,255,0.18);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: var(--vpd-radius-md);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vpd-stat__value { font-family: var(--vpd-font-display); font-size: 28px; font-weight: 700; }
.vpd-stat__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }

.vpd-card {
	display: block;
	background: var(--vpd-surface);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border: 1px solid var(--vpd-border);
	border-radius: var(--vpd-radius-md);
	padding: 22px 22px 18px;
	color: inherit;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
	box-shadow: var(--vpd-shadow-sm);
}

.vpd-card:hover { transform: translateY(-2px); box-shadow: var(--vpd-shadow-md); border-color: rgba(37,99,235,0.35); }

.vpd-card__title { font-family: var(--vpd-font-display); font-size: 22px; margin: 0 0 8px; }
.vpd-card__body  { color: var(--vpd-ink-500); font-size: 14px; margin: 0 0 14px; }
.vpd-card__cta   { color: var(--vpd-blue-700); font-weight: 600; font-size: 14px; }

.vpd-card--accent { background: var(--vpd-grad-soft); border-color: rgba(37,99,235,0.25); }

.vpd-activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vpd-activity li {
	background: white;
	border: 1px solid var(--vpd-border);
	border-radius: 12px;
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}
.vpd-activity li time { color: var(--vpd-ink-500); font-size: 12px; }

/* -------------------------------------------------------------------------- */
/* Filter chips                                                               */
/* -------------------------------------------------------------------------- */

.vpd-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

.vpd-chip {
	border: 1px solid var(--vpd-border);
	background: white;
	color: var(--vpd-ink-700);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s ease;
}

.vpd-chip:hover { border-color: var(--vpd-blue-500); color: var(--vpd-blue-700); }
.vpd-chip.is-active { background: var(--vpd-grad-primary); color: white; border-color: transparent; }

/* -------------------------------------------------------------------------- */
/* Document / vault / partner cards                                           */
/* -------------------------------------------------------------------------- */

.vpd-doc-list, .vpd-vault-list, .vpd-partner-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(290px, 1fr) );
	gap: 18px;
}

.vpd-doc-card, .vpd-vault-card, .vpd-partner-card {
	background: var(--vpd-surface-strong);
	border: 1px solid var(--vpd-border);
	border-radius: var(--vpd-radius-md);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: var(--vpd-shadow-sm);
	transition: transform .15s ease, box-shadow .2s ease;
}

.vpd-doc-card:hover, .vpd-vault-card:hover, .vpd-partner-card:hover { transform: translateY(-2px); box-shadow: var(--vpd-shadow-md); }

.vpd-doc-card__head, .vpd-vault-card__head, .vpd-partner-card__head { display: flex; justify-content: space-between; align-items: center; }

.vpd-doc-card__type, .vpd-vault-card__category, .vpd-partner-card__type {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vpd-blue-700);
	background: rgba(37,99,235,0.10);
	padding: 4px 10px;
	border-radius: 999px;
}

.vpd-doc-card__title, .vpd-vault-card__title, .vpd-partner-card__name {
	font-family: var(--vpd-font-display);
	font-size: 19px;
	margin: 0;
}

.vpd-doc-card__meta, .vpd-partner-card__contact {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px 14px;
	font-size: 13px;
	color: var(--vpd-ink-700);
	margin: 0;
}

.vpd-doc-card__meta dt, .vpd-partner-card__contact dt { color: var(--vpd-ink-500); font-weight: 500; }

.vpd-doc-card__actions, .vpd-vault-card__actions, .vpd-partner-card__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 6px;
}

.vpd-status {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}

.vpd-status[data-status="draft"]     { background: rgba(245,158,11,0.15); color: var(--vpd-warning); }
.vpd-status[data-status="completed"] { background: rgba(14,165,233,0.15); color: var(--vpd-cyan-500); }
.vpd-status[data-status="signed"]    { background: rgba(16,185,129,0.15); color: var(--vpd-success); }
.vpd-status[data-status="archived"]  { background: var(--vpd-ink-100); color: var(--vpd-ink-500); }

.vpd-vault-card__preview { color: var(--vpd-ink-500); font-size: 13px; margin: 0; }

.vpd-partner-card__rating { color: var(--vpd-warning); font-weight: 600; font-size: 14px; }
.vpd-partner-card__company { color: var(--vpd-ink-500); font-size: 14px; margin: 0; }
.vpd-partner-card__specialization { font-size: 13px; color: var(--vpd-ink-700); margin: 0; }

/* -------------------------------------------------------------------------- */
/* Modal                                                                      */
/* -------------------------------------------------------------------------- */

.vpd-modal {
	border: none;
	border-radius: var(--vpd-radius-lg);
	padding: 0;
	max-width: 720px;
	width: calc(100% - 40px);
	box-shadow: 0 32px 64px -16px rgba(15,23,42,0.45);
	background: white;
}

.vpd-modal::backdrop { background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.vpd-modal__head, .vpd-wizard__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid var(--vpd-border);
}

.vpd-modal__head h2, .vpd-wizard__title { font-family: var(--vpd-font-display); margin: 0; font-size: 22px; }

.vpd-modal__foot, .vpd-wizard__foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 18px 24px;
	border-top: 1px solid var(--vpd-border);
	background: var(--vpd-ink-50);
}

.vpd-vault-form { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }

/* -------------------------------------------------------------------------- */
/* Wizard                                                                     */
/* -------------------------------------------------------------------------- */

.vpd-wizard { display: flex; flex-direction: column; }

.vpd-stepper {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 16px 24px;
	border-bottom: 1px solid var(--vpd-border);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--vpd-ink-500);
	overflow-x: auto;
}

.vpd-stepper__item {
	flex: 1 1 0;
	min-width: 90px;
	padding: 8px 10px;
	background: var(--vpd-ink-100);
	border-radius: 8px;
	text-align: center;
}

.vpd-stepper__item.is-active { background: var(--vpd-grad-primary); color: white; }
.vpd-stepper__item.is-complete { background: rgba(16,185,129,0.15); color: var(--vpd-success); }

.vpd-wizard__step { display: none; padding: 24px; flex-direction: column; gap: 14px; }
.vpd-wizard__step.is-active { display: flex; }

.vpd-type-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); gap: 12px; }

.vpd-type-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px;
	border: 2px solid var(--vpd-border);
	border-radius: var(--vpd-radius-md);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.vpd-type-card:hover { border-color: var(--vpd-blue-500); }
.vpd-type-card input { position: absolute; opacity: 0; }
.vpd-type-card:has(input:checked) { border-color: var(--vpd-blue-600); background: var(--vpd-grad-soft); }

.vpd-type-card__title { font-family: var(--vpd-font-display); font-size: 18px; }
.vpd-type-card__desc  { color: var(--vpd-ink-500); font-size: 13px; }

.vpd-review { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 14px; }
.vpd-review dt { color: var(--vpd-ink-500); font-weight: 500; }
.vpd-review dd { margin: 0; }

.vpd-encryption-notice {
	background: var(--vpd-grad-soft);
	border: 1px solid rgba(37,99,235,0.20);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 13px;
	color: var(--vpd-ink-700);
	line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* Membership                                                                 */
/* -------------------------------------------------------------------------- */

.vpd-membership {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--vpd-grad-soft);
	border-radius: 12px;
}

.vpd-membership__tier {
	font-family: var(--vpd-font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--vpd-blue-700);
	text-transform: capitalize;
}

.vpd-membership__expires { color: var(--vpd-ink-500); font-size: 13px; }

/* -------------------------------------------------------------------------- */
/* QR & emergency                                                             */
/* -------------------------------------------------------------------------- */

.vpd-qr { padding: 24px; text-align: center; }
.vpd-qr__canvas { width: 220px; height: 220px; margin: 0 auto 14px; background: white; padding: 8px; border-radius: 12px; box-shadow: var(--vpd-shadow-sm); }
.vpd-qr__url { font-size: 11px; color: var(--vpd-ink-500); word-break: break-all; }

.vpd-emergency {
	max-width: 720px;
	margin: 0 auto;
	padding: 60px 20px 80px;
}

.vpd-emergency__head { text-align: center; margin-bottom: 28px; }
.vpd-emergency__title { font-family: var(--vpd-font-display); font-size: 36px; margin: 14px 0 6px; }
.vpd-emergency__lede  { color: var(--vpd-ink-500); margin: 0 auto; max-width: 50ch; }

.vpd-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .12em;
	font-size: 12px;
}

.vpd-badge--urgent { background: var(--vpd-danger); color: white; }

.vpd-emergency__panel {
	background: white;
	border-radius: var(--vpd-radius-lg);
	padding: 36px;
	box-shadow: var(--vpd-shadow-md);
	text-align: center;
}

.vpd-emergency__data { text-align: left; }

.vpd-emergency__patient {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 24px;
	margin: 0 0 28px;
}

.vpd-emergency__patient dt { color: var(--vpd-ink-500); font-weight: 500; }
.vpd-emergency__patient dd { margin: 0; font-weight: 500; }

.vpd-emergency__directive { padding: 18px 20px; border: 1px solid var(--vpd-border); border-radius: 12px; background: var(--vpd-grad-soft); }
.vpd-emergency__directive h2 { font-family: var(--vpd-font-display); font-size: 18px; margin: 0 0 6px; }

/* -------------------------------------------------------------------------- */
/* Spinner                                                                    */
/* -------------------------------------------------------------------------- */

.vpd-spinner {
	width: 36px;
	height: 36px;
	border: 3px solid rgba(37,99,235,0.20);
	border-top-color: var(--vpd-blue-600);
	border-radius: 50%;
	margin: 0 auto 12px;
	animation: vpd-spin .8s linear infinite;
}

@keyframes vpd-spin { to { transform: rotate(360deg); } }

.vpd-gate { min-height: 50vh; display: grid; place-items: center; }
.vpd-gate__inner { text-align: center; }
.vpd-gate__text { color: var(--vpd-ink-500); margin: 0; }

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	[data-vpd-screen] { padding: 20px 14px 60px; }
	.vpd-page-head__title { font-size: 28px; }
	.vpd-dashboard__greeting { font-size: 30px; }
	.vpd-dashboard__hero { padding: 26px 22px; }
	.vpd-modal { max-width: 100%; width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}

/* =====================================================================
   Lawyer portal — review queue + per-review detail
   ===================================================================== */

.vpd-lawyer-portal {
	max-width: 1180px;
	margin: 0 auto;
	padding: 32px 24px 80px;
}

.vpd-lawyer-portal .vpd-page-head { margin-bottom: 28px; }
.vpd-page-lead { color: var(--vpd-ink-500); margin: 8px 0 0; font-size: 15px; }

.vpd-lawyer-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 24px;
	align-items: start;
}

.vpd-lawyer-queue {
	background: white;
	border: 1px solid var(--vpd-border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: var(--vpd-shadow-sm);
	position: sticky;
	top: 88px;
}

.vpd-h2 {
	font-family: var(--vpd-font-display);
	font-size: 18px;
	margin: 0 0 12px;
	color: var(--vpd-ink-900);
}

.vpd-lawyer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vpd-lawyer-list__loading,
.vpd-lawyer-list__empty {
	padding: 12px; color: var(--vpd-ink-500); font-size: 14px; text-align: center;
}

.vpd-lawyer-list__btn {
	width: 100%;
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--vpd-border);
	border-radius: 12px;
	background: white;
	cursor: pointer;
	font-family: inherit;
	transition: border-color .15s, background .15s, transform .05s;
}
.vpd-lawyer-list__btn:hover { background: var(--vpd-ink-100); }
.vpd-lawyer-list__item.is-pending .vpd-lawyer-list__btn { border-color: var(--vpd-blue-600); }

.vpd-lawyer-list__name { font-weight: 600; font-size: 14px; color: var(--vpd-ink-900); text-align: left; }

.vpd-status {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 999px;
	background: var(--vpd-ink-100);
	color: var(--vpd-ink-700);
}
.vpd-status--pending  { background: rgba(37, 99, 235, .12); color: var(--vpd-blue-700); }
.vpd-status--approved { background: rgba(22, 163, 74, .12); color: #15803d; }
.vpd-status--rejected { background: rgba(220, 38, 38, .10); color: #b91c1c; }

.vpd-lawyer-detail {
	background: white;
	border: 1px solid var(--vpd-border);
	border-radius: 16px;
	padding: 28px;
	box-shadow: var(--vpd-shadow-sm);
	min-height: 320px;
}

.vpd-empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 240px; text-align: center; color: var(--vpd-ink-500);
}
.vpd-empty h2 { font-family: var(--vpd-font-display); margin: 0 0 8px; color: var(--vpd-ink-900); }
.vpd-empty p { margin: 0; font-size: 15px; max-width: 420px; }

.vpd-review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.vpd-review__user { font-family: var(--vpd-font-display); font-size: 24px; margin: 0; color: var(--vpd-ink-900); }
.vpd-review__meta { display: flex; gap: 12px; align-items: center; margin: 6px 0 0; font-size: 13px; color: var(--vpd-ink-500); }

.vpd-review__section {
	border-top: 1px solid var(--vpd-border);
	padding: 18px 0;
}
.vpd-review__section:first-of-type { border-top: 0; padding-top: 0; }
.vpd-review__section h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--vpd-ink-500); margin: 0 0 10px; }
.vpd-review__comment { white-space: pre-line; line-height: 1.55; color: var(--vpd-ink-900); margin: 0; }

.vpd-signature-display {
	background: var(--vpd-ink-100);
	border: 1px dashed var(--vpd-border);
	border-radius: 10px;
	padding: 12px;
	min-height: 90px;
	display: flex; align-items: center; justify-content: center;
}
.vpd-signature-display img { max-height: 140px; max-width: 100%; }

.vpd-review-form { display: flex; flex-direction: column; gap: 16px; }
.vpd-review-form textarea { font-family: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--vpd-border); resize: vertical; }

.vpd-signature-pad {
	border: 1px solid var(--vpd-border);
	border-radius: 10px;
	padding: 8px;
	background: #fafafa;
}
.vpd-signature-pad canvas {
	display: block; width: 100%; height: 180px;
	background: white;
	border-radius: 8px;
	cursor: crosshair;
	touch-action: none;
}
.vpd-signature-pad__actions { display: flex; justify-content: flex-end; padding-top: 6px; }

.vpd-review-form__buttons { display: flex; gap: 10px; justify-content: flex-end; }

@media (max-width: 900px) {
	.vpd-lawyer-layout { grid-template-columns: 1fr; }
	.vpd-lawyer-queue { position: static; }
}

/* =====================================================================
   Emergency snapshot — readable document view for doctors
   ===================================================================== */

.vpd-emergency__snapshot {
	background: white;
	border: 1px solid var(--vpd-border);
	border-radius: 12px;
	padding: 24px 28px;
	line-height: 1.6;
	color: var(--vpd-ink-900);
	margin-top: 8px;
}
.vpd-emergency__snapshot h2,
.vpd-emergency__snapshot h3,
.vpd-emergency__snapshot h4 { margin-top: 24px; margin-bottom: 6px; }
.vpd-emergency__snapshot h2:first-child,
.vpd-emergency__snapshot h3:first-child { margin-top: 0; }
.vpd-emergency__snapshot p  { margin: 0 0 10px; }
.vpd-emergency__snapshot ul,
.vpd-emergency__snapshot ol { margin: 0 0 12px 24px; }
.vpd-emergency__snapshot dl { margin: 12px 0; }
.vpd-emergency__snapshot dt { font-weight: 700; margin-top: 8px; }
.vpd-emergency__snapshot dd { margin: 0 0 6px 16px; }

.vpd-emergency__actions {
	display: flex; gap: 10px;
	margin-top: 16px;
}