@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

.wpf {
	--wpf-forest: #2F4B3C;
	--wpf-forest-dark: #1E3229;
	--wpf-amber: #E8A33D;
	--wpf-linen: #F7F3EC;
	--wpf-charcoal: #24211C;
	--wpf-sage: #8AA68B;
	--wpf-border: #E0D8C6;
	--wpf-white: #FFFFFF;
	--wpf-danger: #B3462C;

	--wpf-font-display: 'Fraunces', serif;
	--wpf-font-body: 'Public Sans', sans-serif;
	--wpf-font-mono: 'IBM Plex Mono', monospace;

	color: var(--wpf-charcoal);
	font-family: var(--wpf-font-body);
	box-sizing: border-box;
}
.wpf *, .wpf *::before, .wpf *::after { box-sizing: inherit; }

.wpf h1, .wpf h2, .wpf h3, .wpf h4 {
	font-family: var(--wpf-font-display);
	color: var(--wpf-forest-dark);
	margin: 0 0 .4em;
	line-height: 1.15;
}

/* ---------- Signature element: pet-tag badge ---------- */
.wpf-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wpf-forest);
	color: var(--wpf-linen);
	font-family: var(--wpf-font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 4px 12px 4px 8px;
	border-radius: 999px 10px 10px 999px;
	position: relative;
}
.wpf-tag::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wpf-linen);
	box-shadow: inset 0 0 0 1.5px var(--wpf-forest);
	flex: 0 0 auto;
}
.wpf-tag--amber { background: var(--wpf-amber); color: var(--wpf-forest-dark); }
.wpf-tag--amber::before { box-shadow: inset 0 0 0 1.5px var(--wpf-amber); }

/* ---------- Layout: grid / list ---------- */
.wpf-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}
.wpf-toolbar a {
	font-family: var(--wpf-font-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 6px 14px;
	border: 1px solid var(--wpf-border);
	border-radius: 999px;
	color: var(--wpf-forest-dark);
	text-decoration: none;
	background: var(--wpf-white);
}
.wpf-toolbar a.active, .wpf-toolbar a:hover {
	background: var(--wpf-forest);
	border-color: var(--wpf-forest);
	color: var(--wpf-linen);
}

.wpf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}
.wpf-list { display: flex; flex-direction: column; gap: 14px; }
.wpf-list .wpf-card { display: flex; gap: 16px; align-items: center; }
.wpf-list .wpf-card-media { width: 96px; height: 96px; flex: 0 0 auto; }

.wpf-card {
	background: var(--wpf-white);
	border: 1px solid var(--wpf-border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
.wpf-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(47,75,60,.12); }
.wpf-card-media {
	width: 100%;
	aspect-ratio: 4/3;
	background: var(--wpf-linen) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="46" fill="none" stroke="%23E0D8C6" stroke-width="2"/></svg>') center/60% no-repeat;
	border-bottom: 1px solid var(--wpf-border);
}
.wpf-list .wpf-card-media { border-radius: 12px; border-bottom: none; }
.wpf-card-body { padding: 16px; flex: 1 1 auto; }
.wpf-card-title { font-size: 18px; margin: 4px 0; }
.wpf-card-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6B675E; margin-bottom: 8px; }
.wpf-stars { color: var(--wpf-amber); letter-spacing: 1px; }
.wpf-card-actions { margin-top: 12px; display: flex; gap: 8px; }

/* ---------- Buttons ---------- */
.wpf-btn {
	display: inline-block;
	font-family: var(--wpf-font-body);
	font-weight: 600;
	font-size: 14px;
	padding: 9px 18px;
	border-radius: 10px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}
.wpf-btn-primary { background: var(--wpf-forest); color: var(--wpf-linen); }
.wpf-btn-primary:hover { background: var(--wpf-forest-dark); color: var(--wpf-linen); }
.wpf-btn-outline { background: transparent; border-color: var(--wpf-forest); color: var(--wpf-forest-dark); }
.wpf-btn-outline:hover { background: var(--wpf-forest); color: var(--wpf-linen); }
.wpf-btn-danger { background: transparent; border-color: var(--wpf-danger); color: var(--wpf-danger); }
.wpf-btn-danger:hover { background: var(--wpf-danger); color: #fff; }
.wpf-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Forms ---------- */
.wpf-form { max-width: 620px; }
.wpf-field { margin-bottom: 16px; }
.wpf-field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.wpf-field input, .wpf-field select, .wpf-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--wpf-border);
	border-radius: 10px;
	font-family: var(--wpf-font-body);
	font-size: 14px;
	background: var(--wpf-white);
}
.wpf-field input:focus, .wpf-field select:focus, .wpf-field textarea:focus {
	outline: 2px solid var(--wpf-amber);
	outline-offset: 1px;
}
.wpf-row { display: flex; gap: 12px; flex-wrap: wrap; }
.wpf-row .wpf-field { flex: 1 1 200px; }
.wpf-msg { padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; display: none; }
.wpf-msg.success { display: block; background: #E7F0E8; color: var(--wpf-forest-dark); }
.wpf-msg.error { display: block; background: #FBEAE5; color: var(--wpf-danger); }

/* ---------- Single profile ---------- */
.wpf-profile-header { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; }
.wpf-profile-photo { width: 120px; height: 120px; border-radius: 16px; background: var(--wpf-linen); border: 1px solid var(--wpf-border); flex: 0 0 auto; }
.wpf-section { margin-bottom: 28px; }
.wpf-service-row, .wpf-review-row, .wpf-booking-row {
	border: 1px solid var(--wpf-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 10px;
	background: var(--wpf-white);
}
.wpf-service-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wpf-price { font-family: var(--wpf-font-mono); font-weight: 500; color: var(--wpf-forest-dark); }
.wpf-review-row .wpf-review-head { display: flex; justify-content: space-between; margin-bottom: 6px; }

/* ---------- Status badges (front-end) ---------- */
.wpf-status { font-family: var(--wpf-font-mono); font-size: 11px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.wpf-status-pending { background: #FDF3E0; color: #8A5A00; }
.wpf-status-confirmed { background: #E7F0E8; color: var(--wpf-forest-dark); }
.wpf-status-completed { background: #E3EAE6; color: var(--wpf-forest-dark); }
.wpf-status-cancelled, .wpf-status-rejected { background: #FBEAE5; color: var(--wpf-danger); }
.wpf-status-suspended { background: #F0E6D2; color: #6B4F00; }
.wpf-status-approved { background: #E7F0E8; color: var(--wpf-forest-dark); }

/* ---------- Dashboard ---------- */
.wpf-dash-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--wpf-border); margin-bottom: 20px; }
.wpf-dash-tabs button {
	background: none; border: none; padding: 10px 16px; font-weight: 600; cursor: pointer;
	border-bottom: 2px solid transparent; margin-bottom: -2px; color: #6B675E;
}
.wpf-dash-tabs button.active { color: var(--wpf-forest-dark); border-color: var(--wpf-amber); }
.wpf-dash-panel { display: none; }
.wpf-dash-panel.active { display: block; }

@media (max-width: 600px) {
	.wpf-grid { grid-template-columns: 1fr; }
	.wpf-profile-header { flex-direction: column; }
}