/*
 * TempsPlus — Phase 3 Form CSS
 * Registration forms, profile edit, post-job, shared form components.
 * Appended to tempsplus.css or loaded separately.
 */

/* ── Shared form utilities ───────────────────────────────────────────────────── */
.tp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--tp-space-4); }
.tp-form-group { display:flex; flex-direction:column; gap:var(--tp-space-2); margin-bottom:var(--tp-space-4); }
.tp-form-group label { font-size:var(--tp-text-sm); font-weight:var(--tp-weight-medium); color:var(--tp-heading); }
.tp-form-group--full { grid-column:1/-1; }
.tp-required { color:var(--tp-accent-red); margin-left:2px; }
.tp-text-muted { color:var(--tp-body); font-size:var(--tp-text-xs); font-weight:var(--tp-weight-normal); }
.tp-field-help { font-size:var(--tp-text-xs); color:var(--tp-body); }
.tp-form-actions { display:flex; gap:var(--tp-space-3); justify-content:flex-end; margin-top:var(--tp-space-6); }
.tp-char-count { font-size:var(--tp-text-xs); color:var(--tp-body); text-align:right; margin-top:var(--tp-space-1); }

/* Input states */
.tp-input--error { border-color:var(--tp-accent-red) !important; }
.tp-input-prefix-wrap { position:relative; }
.tp-input-prefix { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--tp-body); font-size:var(--tp-text-sm); pointer-events:none; }
.tp-input--with-prefix { padding-left:28px !important; }
.tp-input-icon-wrap { position:relative; }
.tp-pw-toggle { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1rem; color:var(--tp-body); padding:0; }
.tp-textarea { resize:vertical; min-height:120px; line-height:1.6; }

/* Password strength */
.tp-pw-strength-bar { height:4px; background:var(--tp-border); border-radius:var(--tp-radius-full); margin-top:var(--tp-space-2); overflow:hidden; }
.tp-pw-strength-fill { height:100%; border-radius:var(--tp-radius-full); width:0; transition:width 0.3s, background 0.3s; }
.tp-pw-strength-label { font-size:var(--tp-text-xs); font-weight:var(--tp-weight-medium); }
.tp-pw-match-label { font-size:var(--tp-text-xs); font-weight:var(--tp-weight-medium); display:block; margin-top:var(--tp-space-1); }

/* ── Registration page ───────────────────────────────────────────────────────── */
.tp-register-page { align-items:flex-start; padding-top:var(--tp-space-10); min-height:100vh; }
.tp-register-wrap { width:100%; max-width:700px; margin:0 auto; padding:0 var(--tp-space-4) var(--tp-space-10); }
.tp-reg-logo { text-align:center; margin-bottom:var(--tp-space-6); }
.tp-reg-card { padding:var(--tp-space-8); }
.tp-reg-title { font-size:var(--tp-text-xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin:0 0 var(--tp-space-2); }
.tp-reg-sub { font-size:var(--tp-text-sm); color:var(--tp-body); margin:0 0 var(--tp-space-6); }
.tp-reg-signin { text-align:center; font-size:var(--tp-text-sm); color:var(--tp-body); margin-top:var(--tp-space-5); }

/* Steps indicator */
.tp-steps { display:flex; align-items:center; justify-content:center; margin-bottom:var(--tp-space-8); gap:0; }
.tp-step { display:flex; align-items:center; gap:var(--tp-space-2); font-size:var(--tp-text-sm); color:var(--tp-body); }
.tp-step__num { width:30px; height:30px; border-radius:50%; background:var(--tp-border); display:flex; align-items:center; justify-content:center; font-weight:var(--tp-weight-bold); font-size:var(--tp-text-xs); color:var(--tp-body); flex-shrink:0; transition:background var(--tp-transition); }
.tp-step--active .tp-step__num { background:var(--tp-primary); color:#fff; }
.tp-step--done   .tp-step__num { background:var(--tp-accent-green); color:#fff; }
.tp-step--active .tp-step__label { color:var(--tp-heading); font-weight:var(--tp-weight-semibold); }
.tp-step--done   .tp-step__label { color:var(--tp-accent-green); }
.tp-step__line { flex:1; height:2px; background:var(--tp-border); margin:0 var(--tp-space-3); min-width:40px; }
.tp-reg-step { display:none; }
.tp-reg-step--active { display:block; }

/* Type selection cards */
.tp-type-cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--tp-space-4); margin-bottom:var(--tp-space-2); }
.tp-type-card { display:flex; align-items:flex-start; gap:var(--tp-space-4); border:2px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); cursor:pointer; transition:border-color var(--tp-transition), background var(--tp-transition); position:relative; }
.tp-type-card input[type=radio] { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.tp-type-card--selected,
.tp-type-card:has(input:checked) { border-color:var(--tp-primary); background:var(--tp-primary-light); }
.tp-type-card__icon { font-size:2rem; flex-shrink:0; line-height:1; }
.tp-type-card__body strong { display:block; font-size:var(--tp-text-base); font-weight:var(--tp-weight-semibold); color:var(--tp-heading); margin-bottom:var(--tp-space-2); }
.tp-type-card__body p { font-size:var(--tp-text-sm); color:var(--tp-body); margin:0 0 var(--tp-space-3); line-height:1.5; }
.tp-type-card__fee { font-size:var(--tp-text-sm); font-weight:var(--tp-weight-bold); color:var(--tp-primary); }

/* ── Skills tagger ───────────────────────────────────────────────────────────── */
.tp-skills-tagger { border:1.5px solid var(--tp-border); border-radius:var(--tp-radius-md); padding:var(--tp-space-2) var(--tp-space-3); display:flex; flex-wrap:wrap; gap:var(--tp-space-2); align-items:center; min-height:44px; cursor:text; transition:border-color var(--tp-transition); }
.tp-skills-tagger:focus-within { border-color:var(--tp-primary); }
.tp-skills-tags { display:contents; }
.tp-skill-tag { display:inline-flex; align-items:center; gap:4px; background:var(--tp-primary-light); color:var(--tp-primary); border-radius:var(--tp-radius-full); padding:3px var(--tp-space-3); font-size:var(--tp-text-xs); font-weight:var(--tp-weight-medium); white-space:nowrap; }
.tp-skill-tag__remove { background:none; border:none; cursor:pointer; color:var(--tp-primary); font-size:0.9rem; line-height:1; padding:0; display:flex; align-items:center; }
.tp-skills-input { border:none; outline:none; font-size:var(--tp-text-sm); flex:1; min-width:120px; font-family:var(--tp-font-sans); background:transparent; }
.tp-skills-suggestions { display:flex; flex-wrap:wrap; gap:var(--tp-space-2); margin-top:var(--tp-space-2); }
.tp-skill-suggest { border:1.5px solid var(--tp-border); border-radius:var(--tp-radius-full); padding:2px var(--tp-space-3); font-size:var(--tp-text-xs); background:var(--tp-white); color:var(--tp-body); cursor:pointer; transition:all var(--tp-transition); }
.tp-skill-suggest:hover { border-color:var(--tp-primary); color:var(--tp-primary); background:var(--tp-primary-light); }

/* ── Availability grid ───────────────────────────────────────────────────────── */
.tp-avail-grid { display:flex; gap:var(--tp-space-2); flex-wrap:wrap; }
.tp-avail-day { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.tp-avail-day input { display:none; }
.tp-avail-day span { width:52px; height:52px; border:2px solid var(--tp-border); border-radius:var(--tp-radius-md); display:flex; align-items:center; justify-content:center; font-size:var(--tp-text-xs); font-weight:var(--tp-weight-semibold); color:var(--tp-body); transition:all var(--tp-transition); user-select:none; }
.tp-avail-day input:checked + span { border-color:var(--tp-primary); background:var(--tp-primary); color:#fff; }

/* ── File drop zones ─────────────────────────────────────────────────────────── */
.tp-file-drop { border:2px dashed var(--tp-border); border-radius:var(--tp-radius-lg); cursor:pointer; position:relative; overflow:hidden; transition:border-color var(--tp-transition), background var(--tp-transition); }
.tp-file-drop:hover { border-color:var(--tp-primary); background:var(--tp-primary-light); }
.tp-file-drop--filled { border-color:var(--tp-accent-green); border-style:solid; }
.tp-file-drop__inner { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--tp-space-6); text-align:center; color:var(--tp-body); gap:var(--tp-space-2); pointer-events:none; }
.tp-file-drop__icon { font-size:2rem; }
.tp-file-drop__inner p { margin:0; font-size:var(--tp-text-sm); font-weight:var(--tp-weight-medium); color:var(--tp-heading); }
.tp-file-drop__inner small { color:var(--tp-body); font-size:var(--tp-text-xs); }
.tp-file-drop__input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }

/* Logo upload area */
.tp-logo-upload-area { display:flex; align-items:center; gap:var(--tp-space-5); flex-wrap:wrap; position:relative; overflow:hidden; }
.tp-logo-upload-preview { width:88px; height:88px; border:2px dashed var(--tp-border); border-radius:var(--tp-radius-lg); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--tp-space-2); font-size:var(--tp-text-xs); color:var(--tp-body); overflow:hidden; }
.tp-logo-upload-label { font-size:var(--tp-text-xs); color:var(--tp-body); }

/* ── Payment summary ─────────────────────────────────────────────────────────── */
.tp-pay-summary { border:1.5px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); max-width:380px; margin:var(--tp-space-5) auto; }
.tp-pay-summary__row { display:flex; justify-content:space-between; padding:var(--tp-space-3) 0; border-bottom:1px solid var(--tp-border); font-size:var(--tp-text-sm); color:var(--tp-body); }
.tp-pay-summary__row--total { border-bottom:none; font-weight:var(--tp-weight-bold); color:var(--tp-heading); font-size:var(--tp-text-base); }
.tp-pay-note { font-size:var(--tp-text-xs); color:var(--tp-body); margin-top:var(--tp-space-5); }

/* ── Profile edit layout ─────────────────────────────────────────────────────── */
.tp-profile-edit { padding:0; }
.tp-profile-photo-row { display:flex; gap:var(--tp-space-6); align-items:flex-start; }
.tp-profile-photo-wrap { position:relative; flex-shrink:0; }
.tp-profile-photo { width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--tp-primary-light); }
.tp-profile-photo-change { position:absolute; bottom:0; right:0; width:28px; height:28px; background:var(--tp-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; cursor:pointer; color:#fff; }
.tp-profile-photo-change input { display:none; }
.tp-repeatable-row { border:1.5px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); margin-bottom:var(--tp-space-4); }
.tp-repeatable-row .tp-remove-repeatable { margin-top:var(--tp-space-2); }

/* ── Post-job page ───────────────────────────────────────────────────────────── */
.tp-post-job-page { background:var(--tp-bg); min-height:100vh; padding:var(--tp-space-8) var(--tp-space-6); }
.tp-post-job-wrap { max-width:800px; margin:0 auto; }
.tp-post-job-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--tp-space-6); }
.tp-post-job-header h1 { font-size:var(--tp-text-2xl); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin:0; }
.tp-post-job-card { padding:var(--tp-space-8); }

/* Plan mini cards (no-plan gate) */
.tp-plan-mini-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--tp-space-4); margin:var(--tp-space-6) 0; text-align:center; }
.tp-plan-mini { border:2px solid var(--tp-border); border-radius:var(--tp-radius-lg); padding:var(--tp-space-5); }
.tp-plan-mini--featured { border-color:var(--tp-primary); }
.tp-plan-mini strong { display:block; font-size:var(--tp-text-base); font-weight:var(--tp-weight-bold); color:var(--tp-heading); margin-bottom:var(--tp-space-2); }
.tp-plan-mini__price { font-size:var(--tp-text-xl); font-weight:var(--tp-weight-bold); color:var(--tp-primary); display:block; margin-bottom:var(--tp-space-2); }
.tp-plan-mini__price small { font-size:var(--tp-text-xs); font-weight:var(--tp-weight-normal); color:var(--tp-body); }
.tp-plan-mini p { font-size:var(--tp-text-xs); color:var(--tp-body); margin:0; }

/* Checkbox */
.tp-checkbox { display:flex; align-items:flex-start; gap:var(--tp-space-3); font-size:var(--tp-text-sm); color:var(--tp-body); cursor:pointer; line-height:1.5; }
.tp-checkbox input { margin-top:2px; width:16px; height:16px; accent-color:var(--tp-primary); flex-shrink:0; }

/* Stars */
.tp-stars { display:inline-flex; gap:2px; }
.tp-star--full  { color:#f59e0b; }
.tp-star--half  { color:#f59e0b; opacity:0.6; }
.tp-star--empty { color:var(--tp-border); }

/* Btn small */
.tp-btn--sm { padding:var(--tp-space-2) var(--tp-space-3); font-size:var(--tp-text-xs); }

/* Responsive */
@media (max-width: 640px) {
    .tp-type-cards   { grid-template-columns:1fr; }
    .tp-form-row     { grid-template-columns:1fr; }
    .tp-form-actions { flex-direction:column; }
    .tp-plan-mini-cards { grid-template-columns:1fr; }
    .tp-profile-photo-row { flex-direction:column; align-items:center; }
    .tp-register-wrap { padding:0 var(--tp-space-3) var(--tp-space-8); }
    .tp-reg-card { padding:var(--tp-space-5); }
    .tp-post-job-card { padding:var(--tp-space-5); }
    .tp-avail-day span { width:42px; height:42px; }
}