/* =========================================================
   CSS VARIABLES — design tokens for the new dashboard
   ========================================================= */

:root {
	--pc-green-dark: #0d4a3a;
	--pc-green-medium: #1a6b52;
	--pc-green-light: #e7ece2;
	--pc-green-pale: #f0f5eb;
	--pc-lime: #E6F972;
	--pc-orange: #e0782c;
	--pc-orange-hover: #cf6d28;
	--pc-red: #dc2626;
	--pc-white: #ffffff;
	--pc-gray-50: #f9fafb;
	--pc-gray-100: #f3f4f6;
	--pc-gray-200: #e5e7eb;
	--pc-gray-400: #9ca3af;
	--pc-gray-500: #6b7280;
	--pc-gray-700: #374151;
	--pc-gray-900: #111827;
	--pc-radius-sm: 8px;
	--pc-radius-md: 12px;
	--pc-radius-lg: 16px;
	--pc-radius-xl: 20px;
	--pc-radius-pill: 999px;
	--pc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--pc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--pc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
	--pc-transition: 0.2s ease;
	--pc-bottom-nav-height: 72px;
	--pc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* =========================================================
   DASHBOARD SHELL — full viewport mobile app feel
   ========================================================= */

.pc-dashboard {
	font-family: var(--pc-font-family);
	color: var(--pc-gray-900);
	padding-bottom: calc(var(--pc-bottom-nav-height) + 24px);
	max-width: 480px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
}

/* =========================================================
   HEADER — greeting + hamburger
   ========================================================= */

.pc-dashboard__header {
	background: var(--pc-green-dark);
	color: var(--pc-white);
	padding: 24px 20px 28px;
	border-radius: 0 0 var(--pc-radius-xl) var(--pc-radius-xl);
	position: relative;
}

.pc-dashboard__header-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.pc-dashboard__logo {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.3px;
	margin: 0 0 16px;
}

.pc-dashboard__hamburger {
	background: none;
	border: none;
	color: var(--pc-white);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pc-dashboard__hamburger svg {
	width: 28px;
	height: 28px;
}

.pc-dashboard__greeting {
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 4px;
	line-height: 1.2;
}

.pc-dashboard__greeting em {
	font-style: italic;
}

.pc-dashboard__greeting-sub {
	font-size: 14px;
	font-weight: 400;
	margin: 4px 0 0;
	opacity: 0.85;
}

/* =========================================================
   PAYMENT ALERT BANNER — urgent payment due
   ========================================================= */

.pc-payment-alert {
	margin: -14px 16px 0;
	position: relative;
	z-index: 2;
}

.pc-payment-alert__card {
	background: var(--pc-white);
	border-radius: var(--pc-radius-lg);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: var(--pc-shadow-lg);
}

.pc-payment-alert__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fef3c7;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pc-payment-alert__icon svg {
	width: 20px;
	height: 20px;
	color: var(--pc-orange);
}

.pc-payment-alert__content {
	flex: 1;
	min-width: 0;
}

.pc-payment-alert__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--pc-gray-900);
	margin: 0 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pc-payment-alert__desc {
	font-size: 12px;
	color: var(--pc-gray-500);
	margin: 0;
	line-height: 1.3;
}

.pc-payment-alert__btn {
	flex-shrink: 0;
	background: var(--pc-orange);
	color: var(--pc-white);
	border: none;
	border-radius: var(--pc-radius-pill);
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--pc-transition);
	text-decoration: none;
	white-space: nowrap;
}

.pc-payment-alert__btn:hover {
	background: var(--pc-orange-hover);
	color: var(--pc-white);
}

/* =========================================================
   SECTIONS — shared spacing
   ========================================================= */

.pc-dashboard__section {
	padding: 24px 16px 0;
}

.pc-dashboard__section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.pc-dashboard__section-title {
	font-size: 20px;
	font-weight: 700;
	color: var(--pc-gray-900);
	margin: 0;
}

.pc-dashboard__section-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--pc-green-dark);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: color var(--pc-transition);
}

.pc-dashboard__section-link:hover {
	color: var(--pc-green-medium);
}

.pc-dashboard__section-link svg {
	width: 16px;
	height: 16px;
}

/* =========================================================
   POLICY SLIDER
   ========================================================= */

.pc-policies-slider {
	overflow: hidden;
	position: relative;
}

.pc-policies-slider__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 0 8px;
}

.pc-policies-slider__track::-webkit-scrollbar {
	display: none;
}

/* ---- Policy Card ---- */

.pc-policy-card {
	flex: 0 0 calc(100% - 16px);
	scroll-snap-align: start;
	background: var(--pc-green-pale);
	border-radius: var(--pc-radius-lg);
	padding: 16px;
	min-width: 0;
	position: relative;
}

.pc-policy-card__top {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.pc-policy-card__photo {
	width: 80px;
	height: 80px;
	border-radius: var(--pc-radius-md);
	object-fit: cover;
	flex-shrink: 0;
	background: var(--pc-gray-200);
}

.pc-policy-card__photo-placeholder {
	width: 80px;
	height: 80px;
	border-radius: var(--pc-radius-md);
	background: var(--pc-gray-200);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pc-policy-card__photo-placeholder svg {
	width: 36px;
	height: 36px;
	color: var(--pc-gray-400);
}

.pc-policy-card__info {
	flex: 1;
	min-width: 0;
}

.pc-policy-card__name {
	font-size: 18px;
	font-weight: 700;
	color: var(--pc-gray-900);
	margin: 0 0 6px;
}

.pc-policy-card__arrow {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--pc-white);
	border: 1px solid var(--pc-gray-200);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--pc-transition);
	text-decoration: none;
	color: var(--pc-gray-700);
}

.pc-policy-card__arrow:hover {
	background: var(--pc-gray-100);
	color: var(--pc-gray-900);
}

.pc-policy-card__arrow svg {
	width: 16px;
	height: 16px;
}

.pc-policy-card__variant {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--pc-gray-900);
	background: var(--pc-white);
	border: 1.5px solid var(--pc-gray-200);
	border-radius: var(--pc-radius-pill);
	padding: 4px 12px;
	margin-bottom: 8px;
}

.pc-policy-card__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
}

.pc-policy-card__meta-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--pc-gray-700);
}

.pc-policy-card__meta-row svg {
	width: 16px;
	height: 16px;
	color: var(--pc-gray-400);
	flex-shrink: 0;
}

.pc-policy-card__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: var(--pc-radius-pill);
	margin-bottom: 12px;
}

.pc-policy-card__status--active {
	background: #d1fae5;
	color: #065f46;
}

.pc-policy-card__status--active svg {
	width: 14px;
	height: 14px;
	color: #10b981;
}

.pc-policy-card__status--pending {
	background: #fef3c7;
	color: #92400e;
}

.pc-policy-card__status--overdue {
	background: #fee2e2;
	color: #991b1b;
}

.pc-policy-card__status--cancelled {
	background: var(--pc-gray-200);
	color: var(--pc-gray-500);
}

.pc-policy-card__change-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px;
	background: var(--pc-white);
	border: 1.5px solid var(--pc-gray-200);
	border-radius: var(--pc-radius-sm);
	font-size: 13px;
	font-weight: 600;
	color: var(--pc-gray-700);
	cursor: pointer;
	transition: background var(--pc-transition), border-color var(--pc-transition);
}

.pc-policy-card__change-photo:hover {
	background: var(--pc-gray-50);
	border-color: var(--pc-gray-400);
}

/* Slider dots */

.pc-policies-slider__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.pc-policies-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pc-gray-200);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background var(--pc-transition), transform var(--pc-transition);
}

.pc-policies-slider__dot.is-active {
	background: var(--pc-green-dark);
	transform: scale(1.25);
}

/* =========================================================
   MARKETING CONSENT BANNER
   ========================================================= */

.pc-marketing-banner {
	margin: 0 16px;
	margin-top: 24px;
}

.pc-marketing-banner__card {
	background: var(--pc-lime);
	border-radius: var(--pc-radius-xl);
	padding: 24px 20px;
	display: flex;
	gap: 16px;
	align-items: center;
	overflow: hidden;
	position: relative;
}

.pc-marketing-banner__content {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.pc-marketing-banner__title {
	font-size: 18px;
	font-weight: 800;
	color: var(--pc-gray-900);
	margin: 0 0 8px;
	line-height: 1.2;
}

.pc-marketing-banner__desc {
	font-size: 13px;
	color: var(--pc-gray-700);
	margin: 0 0 16px;
	line-height: 1.5;
}

.pc-marketing-banner__btn {
	display: inline-block;
	background: var(--pc-green-dark);
	color: var(--pc-white);
	border: none;
	border-radius: var(--pc-radius-pill);
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--pc-transition);
	text-decoration: none;
}

.pc-marketing-banner__btn:hover {
	background: var(--pc-green-medium);
	color: var(--pc-white);
}

.pc-marketing-banner__illustration {
	width: 100px;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

.pc-marketing-banner__illustration svg {
	width: 100%;
	height: auto;
}

/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.pc-quick-actions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.pc-quick-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--pc-gray-700);
	transition: color var(--pc-transition);
}

.pc-quick-action:hover {
	color: var(--pc-green-dark);
}

.pc-quick-action__icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--pc-transition);
}

.pc-quick-action:hover .pc-quick-action__icon {
	transform: scale(1.05);
}

.pc-quick-action__icon--claim {
	background: #fef3c7;
}

.pc-quick-action__icon--download {
	background: #d1fae5;
}

.pc-quick-action__icon--add-pet {
	background: #dbeafe;
}

.pc-quick-action__icon--docs {
	background: #ede9fe;
}

.pc-quick-action__icon svg {
	width: 24px;
	height: 24px;
}

.pc-quick-action__label {
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
}

/* =========================================================
   UPSELL BANNER
   ========================================================= */

.pc-upsell-banner {
	margin: 0 16px;
	margin-top: 24px;
}

.pc-upsell-banner__card {
	background: var(--pc-green-dark);
	border-radius: var(--pc-radius-xl);
	padding: 28px 20px;
	color: var(--pc-white);
	position: relative;
	overflow: hidden;
}

.pc-upsell-banner__title {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 8px;
	line-height: 1.3;
	max-width: 70%;
}

.pc-upsell-banner__desc {
	font-size: 13px;
	margin: 0 0 20px;
	line-height: 1.5;
	opacity: 0.9;
	max-width: 70%;
}

.pc-upsell-banner__variant {
	font-weight: 800;
}

.pc-upsell-banner__btn {
	display: inline-block;
	background: var(--pc-lime);
	color: var(--pc-green-dark);
	border: none;
	border-radius: var(--pc-radius-pill);
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--pc-transition), transform var(--pc-transition);
	text-decoration: none;
	position: relative;
	z-index: 1;
}

.pc-upsell-banner__btn:hover {
	background: #d9f060;
	color: var(--pc-green-dark);
	transform: scale(1.02);
}

.pc-upsell-banner__illustration {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 110px;
	height: 110px;
	opacity: 0.6;
}

/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.pc-bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--pc-bottom-nav-height);
	background: var(--pc-white);
	border-top: 1px solid var(--pc-gray-200);
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	z-index: 1000;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.pc-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-decoration: none;
	color: var(--pc-gray-400);
	font-size: 11px;
	font-weight: 600;
	transition: color var(--pc-transition);
	position: relative;
	padding: 8px 0;
}

.pc-bottom-nav__item:hover {
	color: var(--pc-green-dark);
}

.pc-bottom-nav__item.is-active {
	color: var(--pc-green-dark);
}

.pc-bottom-nav__icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pc-bottom-nav__icon svg {
	width: 24px;
	height: 24px;
}

.pc-bottom-nav__item--center .pc-bottom-nav__icon {
	width: 48px;
	height: 48px;
	background: var(--pc-green-dark);
	border-radius: var(--pc-radius-md);
	margin-top: -12px;
}

.pc-bottom-nav__item--center .pc-bottom-nav__icon svg {
	color: var(--pc-white);
}

.pc-bottom-nav__item--center.is-active .pc-bottom-nav__icon {
	background: var(--pc-green-medium);
}

.pc-bottom-nav__label {
	line-height: 1;
}

/* =========================================================
   EMPTY STATE — no policies
   ========================================================= */

.pc-empty-state {
	text-align: center;
	padding: 40px 20px;
}

.pc-empty-state__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	background: var(--pc-green-pale);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pc-empty-state__icon svg {
	width: 32px;
	height: 32px;
	color: var(--pc-green-dark);
}

.pc-empty-state__title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--pc-gray-900);
}

.pc-empty-state__desc {
	font-size: 14px;
	color: var(--pc-gray-500);
	margin: 0;
}

/* =========================================================
   RESPONSIVE — wider screens center content
   ========================================================= */

@media screen and (min-width: 481px) {
	.pc-bottom-nav {
		max-width: 480px;
		left: 50%;
		transform: translateX(-50%);
		border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0;
	}
}