/* Assemblr Buyer App — prototype styles. Shares the same palette as the home page
   plugin so the flow looks consistent; swap --ab-* variables once real brand colors
   are final. 9/21: teal retired (Cak's call) — replaced with a dark gray (secondary,
   general accents/labels) and a dark beige sampled from the hero photo (tertiary,
   used specifically for action buttons and round/numeric call-outs — price figures,
   timeline "done" markers, the avatar-placeholder circle). --ab-amber corrected to
   match the home page's sampled logo color (was a slightly different orange). */

.ab-card, .ab-booking-form, .ab-match-screen, .ab-status-screen {
	--ab-navy: #12202b;
	--ab-gray: #4a4a4a;
	--ab-gray-dark: #333333;
	--ab-beige: #b58265;
	--ab-beige-dark: #8a5f45;
	--ab-amber: #e25a2c;
	--ab-cream: #f7f4ee;
	--ab-ink: #1c2b33;
	--ab-muted: #5b6b73;
	--ab-white: #ffffff;
	--ab-border: #e3ddd0;
	--ab-radius: 12px;
}

.ab-card {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var(--ab-white);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	padding: 32px;
	max-width: 640px;
	margin: 32px auto;
	color: var(--ab-ink);
}
.ab-card h2 { margin-top: 0; color: var(--ab-navy); }
.ab-card h3 { color: var(--ab-navy); margin-bottom: 8px; }
.ab-card form label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin: 16px 0 6px;
}
.ab-card input[type=text], .ab-card input[type=email], .ab-card input[type=tel],
.ab-card input[type=number], .ab-card select, .ab-card textarea, .ab-card input[type=file] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ab-border);
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
}
.ab-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; }
.ab-checkbox input { width: auto !important; }

.ab-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	font-size: 15px;
	margin-top: 20px;
}
.ab-btn-primary { background: var(--ab-beige); color: var(--ab-white); }
.ab-btn-secondary { background: var(--ab-cream); color: var(--ab-navy); border: 1px solid var(--ab-border); }
.ab-btn-ghost { background: transparent; color: var(--ab-beige-dark); border: 1px solid var(--ab-beige-dark); }

.ab-fineprint { font-size: 13px; color: var(--ab-muted); }
.ab-badge {
	display: inline-block;
	background: var(--ab-cream);
	color: var(--ab-gray-dark);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

.ab-price-range { font-size: 32px; font-weight: 700; color: var(--ab-beige-dark); margin: 4px 0 12px; }

.ab-pro-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-top: 16px;
}
.ab-pro-card {
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	padding: 16px;
	text-align: center;
}
.ab-pro-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 0 auto 8px; }
.ab-pro-photo-placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--ab-beige); color: var(--ab-white); font-weight: 700; font-size: 20px;
}
.ab-pro-card h4 { margin: 6px 0 2px; font-size: 15px; }
.ab-pro-rating { font-size: 13px; color: var(--ab-muted); margin: 0 0 6px; }
.ab-pro-price { font-size: 18px; font-weight: 700; color: var(--ab-navy); margin: 0 0 8px; }
.ab-pro-upsells { list-style: none; padding: 0; margin: 0; font-size: 12px; color: var(--ab-muted); text-align: left; }

.ab-timeline { list-style: none; padding: 0; margin: 20px 0; }
.ab-timeline li {
	position: relative;
	padding: 0 0 20px 28px;
	border-left: 2px solid var(--ab-border);
	font-weight: 600;
	font-size: 14px;
}
.ab-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ab-timeline li::before {
	content: "";
	position: absolute;
	left: -7px; top: 0;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--ab-border);
}
.ab-timeline li.done::before { background: var(--ab-beige); }
.ab-timeline li.active::before { background: var(--ab-amber); }
.ab-timeline li.at-risk::before { background: #c0392b; }
.ab-timeline li span { display: block; font-weight: 400; color: var(--ab-muted); font-size: 13px; margin-top: 2px; }

.ab-status-detail { background: var(--ab-cream); border-radius: var(--ab-radius); padding: 16px; margin: 16px 0; font-size: 14px; }
.ab-rating-form, .ab-escalation-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ab-border); }

.ab-booking-list { list-style: none; padding: 0; }
.ab-booking-list li { padding: 12px 0; border-bottom: 1px solid var(--ab-border); }
.ab-booking-list a { text-decoration: none; color: var(--ab-navy); font-weight: 600; }

@media (max-width: 560px) {
	.ab-card { padding: 20px; margin: 16px; }
	.ab-pro-grid { grid-template-columns: 1fr; }
}