/**
 * Marketplace UI — styles for the WordPress-native flow components:
 * auth forms, provider profile, verification, bids, reviews, status badges.
 * Uses the theme's existing design tokens (spruce/amber/paper).
 */

/* ---- Forms ---------------------------------------------------------- */
.hp-field { display: block; margin-bottom: var(--hp-sp-4); }
.hp-field__label { display: block; font-weight: 600; font-size: var(--hp-fs-sm); margin-bottom: var(--hp-sp-2); color: var(--hp-ink); }
.hp-field__hint { display: block; font-size: var(--hp-fs-xs); color: var(--hp-slate); margin-top: var(--hp-sp-2); }

.hp-field input[type="text"],
.hp-field input[type="email"],
.hp-field input[type="password"],
.hp-field input[type="tel"],
.hp-field input[type="number"],
.hp-field input[type="date"],
.hp-field input[type="file"],
.hp-field select,
.hp-field textarea,
.hp-bidform input,
.hp-reviewform select,
.hp-reviewform textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	border: 1px solid var(--hp-line);
	border-radius: var(--hp-radius);
	background: #fff;
	font: inherit;
	color: var(--hp-ink);
}
.hp-field textarea { resize: vertical; min-height: 3em; }
.hp-field input:focus,
.hp-field select:focus,
.hp-field textarea:focus {
	outline: none;
	border-color: var(--hp-spruce);
	box-shadow: 0 0 0 3px rgba(27,67,50,0.12);
}

.hp-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hp-sp-4); }
@media (max-width: 640px) { .hp-formgrid { grid-template-columns: 1fr; } }

/* ---- Auth cards ----------------------------------------------------- */
.hp-authcard { max-width: 460px; margin: var(--hp-sp-7) auto; padding: var(--hp-sp-6); }
.hp-authcard__title { font-family: var(--hp-font-display); margin-bottom: var(--hp-sp-5); }
.hp-authcard__alt { margin-top: var(--hp-sp-4); font-size: var(--hp-fs-sm); color: var(--hp-slate); text-align: center; }
.hp-authprompt { max-width: 560px; margin: var(--hp-sp-6) auto; padding: var(--hp-sp-6); text-align: center; }

.hp-roletoggle { display: flex; gap: var(--hp-sp-3); border: 0; padding: 0; margin: 0 0 var(--hp-sp-5); }
.hp-roletoggle legend { font-weight: 600; font-size: var(--hp-fs-sm); margin-bottom: var(--hp-sp-2); }
.hp-roleopt { flex: 1; cursor: pointer; }
.hp-roleopt input { position: absolute; opacity: 0; }
.hp-roleopt__box { display: block; border: 2px solid var(--hp-line); border-radius: var(--hp-radius); padding: var(--hp-sp-3); text-align: center; transition: border-color .15s, background .15s; }
.hp-roleopt__box strong { display: block; }
.hp-roleopt__box small { color: var(--hp-slate); font-size: var(--hp-fs-xs); }
.hp-roleopt input:checked + .hp-roleopt__box { border-color: var(--hp-spruce); background: var(--hp-mist); }

/* ---- Alerts --------------------------------------------------------- */
.hp-alert { border-radius: var(--hp-radius); padding: var(--hp-sp-3) var(--hp-sp-4); margin-bottom: var(--hp-sp-4); font-size: var(--hp-fs-sm); }
.hp-alert--error { background: #fdecea; color: #a3382b; border: 1px solid #f3c9c3; }
.hp-alert--info { background: #eaf3ee; color: #1b4332; border: 1px solid #cfe4d8; }

/* ---- Profile / verification ---------------------------------------- */
.hp-profileform { padding: var(--hp-sp-6); }
.hp-checkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--hp-sp-2); }
.hp-check { display: flex; align-items: center; gap: var(--hp-sp-2); padding: var(--hp-sp-2); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.hp-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--hp-sp-3); margin-top: var(--hp-sp-2); }
.hp-portfolio-item { display: block; }
.hp-portfolio-item img { width: 100%; height: 90px; object-fit: cover; border-radius: var(--hp-radius); }
.hp-portfolio-remove { display: block; font-size: var(--hp-fs-xs); color: var(--hp-slate); margin-top: 4px; }

.hp-verify { padding: var(--hp-sp-6); max-width: 560px; }
.hp-verify__status { display: flex; gap: var(--hp-sp-2); align-items: center; margin-bottom: var(--hp-sp-4); }
.hp-verify__status span { padding: 3px 10px; border-radius: var(--hp-radius-pill); font-size: var(--hp-fs-xs); font-weight: 700; }
.hp-verify__status--approved span { background: #d7ede0; color: #1b6b45; }
.hp-verify__status--pending span { background: #fdeecb; color: #9a6b0d; }
.hp-verify__status--rejected span { background: #fdecea; color: #a3382b; }
.hp-verify__status--unverified span { background: var(--hp-mist); color: var(--hp-slate); }
.hp-verify__msg { color: var(--hp-slate); margin-bottom: var(--hp-sp-4); }

/* ---- Bids / quotes / reviews --------------------------------------- */
.hp-joblist { display: flex; flex-direction: column; gap: var(--hp-sp-4); }
.hp-joblist__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--hp-sp-3); }
.hp-joblist__item { padding: var(--hp-sp-5); }
.hp-joblist__action { margin-top: var(--hp-sp-3); }
.hp-joblist__cancel { margin-top: var(--hp-sp-3); }

.hp-bidlist { margin-top: var(--hp-sp-4); display: flex; flex-direction: column; gap: var(--hp-sp-3); }
.hp-bidlist h4 { margin: 0 0 var(--hp-sp-2); }
.hp-bid { padding: var(--hp-sp-4); border: 1px solid var(--hp-line); }
.hp-bid__top { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-2); }
.hp-bid__meta { font-size: var(--hp-fs-xs); margin: var(--hp-sp-2) 0; }
.hp-bid__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--hp-sp-3); margin-top: var(--hp-sp-3); }
.hp-bid__amount { font-family: var(--hp-font-mono); font-weight: 700; }

.hp-bidform { margin-top: var(--hp-sp-3); border-top: 1px dashed var(--hp-line); padding-top: var(--hp-sp-3); }
.hp-bidform__row { display: flex; gap: var(--hp-sp-3); }
.hp-bidform__row label { flex: 1; font-size: var(--hp-fs-sm); }

.hp-reviewform { margin-top: var(--hp-sp-3); }
.hp-reviewlist { display: flex; flex-direction: column; gap: var(--hp-sp-3); }
.hp-reviewlist__item { padding: var(--hp-sp-4); }
.hp-reviewlist__top { display: flex; gap: var(--hp-sp-2); align-items: center; margin-bottom: var(--hp-sp-2); }

/* ---- Status badges -------------------------------------------------- */
.hp-badge--open { background: #eaf3ee; color: #1b6b45; }
.hp-badge--hired,
.hp-badge--in_progress { background: #fdeecb; color: #9a6b0d; }
.hp-badge--completed { background: #e3edfb; color: #2a5aa0; }
.hp-badge--confirmed,
.hp-badge--accepted { background: #d7ede0; color: #1b6b45; }
.hp-badge--cancelled,
.hp-badge--declined { background: #f2e6e4; color: #8a4b40; }
.hp-badge--pending { background: var(--hp-mist); color: var(--hp-slate); }