/* hire-public-listing.css */

.hpl-container { padding: 1rem 0; }
.hpl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.hpl-header h2 { margin: 0; color: var(--text-primary, #e2e8f0); font-size: 1.4rem; }
.hpl-btn-dashboard { background: var(--bg-secondary, #334155); color: var(--text-primary, #e2e8f0); border: 1px solid var(--border, #475569); border-radius: 6px; padding: 0.5rem 1rem; font-weight: bold; cursor: pointer; font-size: 0.9rem; }

.hpl-selector { margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.hpl-selector label { color: var(--text-muted, #94a3b8); font-weight: 600; }
.hpl-selector select { flex: 1; padding: 0.6rem; border-radius: 6px; border: 1px solid var(--border, #334155); background: var(--bg-primary, #0f172a); color: var(--text-primary, #e2e8f0); font-size: 0.95rem; }

.hpl-form { background: var(--bg-secondary, #1e293b); border-radius: 12px; padding: 1.5rem; border-left: 4px solid var(--accent, #f39c12); }
.hpl-field { margin-bottom: 1rem; }
.hpl-field-toggle label { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary, #e2e8f0); font-size: 1rem; cursor: pointer; }
.hpl-field label { font-size: 0.85rem; color: var(--text-muted, #94a3b8); margin-bottom: 0.3rem; display: block; }
.hpl-field textarea { width: 100%; padding: 0.6rem; border-radius: 6px; border: 1px solid var(--border, #334155); background: var(--bg-primary, #0f172a); color: var(--text-primary, #e2e8f0); font-size: 0.95rem; resize: vertical; }

.hpl-section { margin-top: 1.5rem; border-top: 1px solid var(--border, #334155); padding-top: 1rem; }
.hpl-section h3 { color: var(--accent, #f39c12); margin: 0 0 0.5rem; }
.hpl-hint { color: var(--text-muted, #94a3b8); font-size: 0.85rem; margin-bottom: 0.8rem; }

/* Add‑ons */
.hpl-addon-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.hpl-addon-row input { flex: 1; padding: 0.4rem; border-radius: 4px; border: 1px solid var(--border, #334155); background: var(--bg-primary, #0f172a); color: var(--text-primary, #e2e8f0); font-size: 0.9rem; }
.hpl-addon-delete { background: var(--danger, #7f1d1d); color: var(--danger-text, #fca5a5); border: none; border-radius: 4px; width: 24px; height: 24px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.hpl-btn-addon { background: transparent; border: 1px dashed var(--border, #475569); color: var(--text-muted, #94a3b8); border-radius: 4px; padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.85rem; margin-top: 0.3rem; }

/* Photos */
.hpl-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hpl-photo-item { position: relative; width: 100px; height: 80px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border, #334155); }
.hpl-photo-thumb { width: 100%; height: 100%; object-fit: cover; }
.hpl-photo-delete { position: absolute; top: 2px; right: 2px; background: rgba(239,68,68,0.9); color: white; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hpl-photo-add { width: 100px; height: 80px; border: 2px dashed var(--border, #475569); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #94a3b8); font-size: 2rem; cursor: pointer; }
.hpl-photo-add:hover { border-color: var(--accent, #f39c12); }

.hpl-form-actions { margin-top: 1.5rem; }
.hpl-btn-save { background: var(--accent, #f39c12); color: #0f172a; border: none; border-radius: 6px; padding: 0.7rem 1.5rem; font-weight: bold; cursor: pointer; font-size: 1rem; }

/* Toasts */
.hpl-toast { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.9rem; font-weight: 500; animation: hpl-slide-in 0.2s ease; }
.hpl-toast-error { background: var(--danger, #7f1d1d); color: var(--danger-text, #fca5a5); border: 1px solid #ef4444; }
.hpl-toast-success { background: var(--success, #14532d); color: var(--success-text, #86efac); border: 1px solid #22c55e; }
@keyframes hpl-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }